How requirements shaped my code, AKA Rails 5 and ActiveRecord before_destroy callbacks

I recently started a new project with Rails 5, and at some point I found out the code was not behaving as expected.
The initial scenario was quite simple, Admins can have many Phones, as this code suggests:

Continue reading “How requirements shaped my code, AKA Rails 5 and ActiveRecord before_destroy callbacks”

Wrap and iterate with the power of yield

Iterating over a collection isn’t rocket science. Obviously if you need to iterate over a really big collection you may need to adjust your strategy but it is something that in the vast majority of programming languages you get quite for free.

In Ruby for example you can just send the each message to your collection together with a block of code. The block will be executed for each element of the collection itself.

But what if you need “something more” from the objects you’re iterating on? If, for example, each element of your initial collection is an array and you want to abstract away how you access each of its elements? What options do you have?

Continue reading “Wrap and iterate with the power of yield”

Swift: How to send SOAP requests with AlamoFire 4.0

We do love our JSON APIs, but sometimes we need to work and talk with the Dark Side and perform SOAP requests exchanging XML responses with a server far far away.

In our Objective-C projects we grew fond of AFNetworking, but having switched to Swift (and Swift 3 nonetheless) we had to rely on the new Alamofire 4.0.

Why new if it is a 4.0 version?

Alamofire 4.0 brings a big rewrite and some breaking changes, needed to address the new Swift 3 syntax and to ease some things up. The breaking changes involve how to make a request and how to encode our parameters, key aspects if you want to talk with a SOAP server. The changes have been introduced only recently and it seems few people had the same problem of having POST requests on a legacy SOAP server, so the literature on the web is quite scarse and this post wants to fill this gap.

As with everything, the solution when found, is quite simple.

At line #6 we set the headers up, the SOAPAction one is quite important, since without it nothing worked. As always, YMMV, but you should find the correct value inside your WSDL of reference.

At line #16 we setup the request, the encoding parameter is the key of this post: to encode the request we write an extension to String:

In this extension we specify the format for a correct header as requested by our SOAP server and serve it during every request.

And we are ready to go.

Then, if you need to parse the XML response (otherwise why talk with the server to begin with?), we suggest you to use the XMLHash library of SwiftyJSON inspiration.

We hope this little bit of information will save you some research time.

Elastic IP Address (EIP) and ECS (EC2 Container Service) cluster, a naive solution

Recently I had the opportunity to set up another ECS cluster for a Ruby on Rails application that exposes a few API endpoints and a backend to manage some contents, i.e. images, videos and so on.

Considering our previous experience we decided to automate the provisioning of the infrastructure by using Ansible and after a bit we ended up with a few playbooks that allowed us to bring up everything we needed, from the DB to the instances, ELB, task definitions and services.

Everything was working quite well until we were asked to provide a static IP that could be used to access the aforementioned API endpoints.

Continue reading “Elastic IP Address (EIP) and ECS (EC2 Container Service) cluster, a naive solution”

How to create and customize a slider

A few days ago I had to work as a frontend developer because I needed to create some html static pages for mobile devices. One requirement was to have a scrollable component that mimics a calendar interface.

Building a slider from scratch takes a long time for sure, so I decided to use Swiper, an open-source slider compatible with most browsers and platforms.

I chose Swiper among many other candidates because it can be easily installed via Bower, which is currently one of the most popular package manager tools.

To install Swiper launch:

$ bower install swiper

If you want to save new dependencies to your bower.json, run:

$ bower install swiper -- save

Now we need to include the generated CSS and JS files in our website:

<link rel="stylesheet" href="path/to/swiper.css">
<script src="path/to/swiper.js"></script>

This is the basic html structure of a Swiper slider and we can start from it to build our own:

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
   <div class="swiper-wrapper">
       <!-- Slides -->
       <div class="swiper-slide">Slide 1</div>
       <div class="swiper-slide">Slide 2</div>
       <div class="swiper-slide">Slide 3</div>
       ...
   </div>
    <!-- If we need pagination -->
   <div class="swiper-pagination"></div>     <!-- If we need navigation buttons -->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>     <!-- If we need scrollbar -->
   <div class="swiper-scrollbar"></div>
</div>

I replicated the structure of the sliders within my html file, adapting it to my needs:

<div class="swiper-container">
  <!-- Slides wrapper -->
 <div class="swiper-wrapper">     <!-- Slides -->
   <div class="calendar swiper-slide"> <!-- bootstrap list -->
     <div class="list-group">
     <span class="list-group-item head-list">9/10</span>
       <div class="arrow-down"></div>
       <a href="#" class="list-group-item">Book time slot</a>
       <a href="#" class="list-group-item disabled">Not available</a>
       ...
     </div>
   </div>
 </div> </div>

The next step is to initialize the slider and its behaviour via javascript:

  var mySwiper = new Swiper ('.swiper-container', {
   pagination: '.swiper-pagination',
   slidesPerView: 2,
   centeredSlides: true,
   paginationClickable: true,
   spaceBetween: 0,
   initialSlide: 0
 })        

The last step is to add some styles to the slider in order to make it more usable and nicer. I wrote some SASS styles which will be compiled by Gulp in standard CSS. To stylize the main div that contains all the slides, I added the following styles:

// configure slider
.full-page
 padding: 0 .swiper-container
 height: auto
 width: 100% .swiper-slide
 text-align: center
 background: #fff
 width: 60%
 // Center slide text vertically
 display: -webkit-box
 display: -ms-flexbox
 display: -webkit-flex
 display: flex
 -webkit-box-pack: center
 -ms-flex-pack: center
 -webkit-justify-content: center
 justify-content: center
 -webkit-box-align: center
 -ms-flex-align: center
 -webkit-align-items: center
 align-items: center .list-group
 width: 100% .calendar
 margin-top: 20px
 text-align: center

These are the styles for the left fixed sidebar:

// fixed left side-bar
.time-side-bar
 width: 25%
 display: block
 position: absolute
 z-index: 2
 margin-top: 20px
 color: gray

In order to customize the presentation of the active element of the slider I used mostly the “swiper-slider-active” class. This class is added automatically by the library on the selected slide:

// active element
.swiper-slide-active
 .list-group
   .list-group-item
     background: rgba(3, 169, 244, 0.21) .list-group-item
 border-radius: 0
 border: 0
 border-bottom: 1px solid #d4d4d4
 margin-bottom: 0a .list-group-item:hover
 color: #03a9f4
 background-color: #fff .list-group-item.disabled
   background: #fff .swiper-slide-active
 .list-group
   .list-group-item:first-child
     background: #03a9f4 .swiper-slide-active
 .list-group
   .list-group-item:nth-child(2)
     padding-top: 20px // list first element (header)
.list-group
 .list-group-item:first-child
   height: 45px
   background: #bfbfbf
   color: #fff
   border-bottom: 0
   font-size: 15px // arrow for active element
.arrow-down
 position: absolute
 width: 0
 height: 0
 border-left: 93px solid transparent
 border-right: 93px solid transparent
 border-top: 10px solid #03a9f4

This is the final result:

image

In my opinion Swiper has proved to be an extremely versatile and powerful tool. It provides a long list of available parameters that make easier to achieve different goals. Moreover, there are many available demos from which you can get some ideas and realize that the customization possibilities are endless.

Just go to this link and take what you need to start building your slider.