Popups on your Popups

We've been using Bootstrap 3 for a lot of the newer screens in our application - particularly our internal, administrator facing screens.  It has been a great framework.  However, the Bootstrap Modals do leave a fair amount to be desired.  You have to write a lot of boilerplate code and then bootstrap has this in their documentation:

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.  

To avoid writing boilerplate, we've used the monkey-friendly Bootstrap Dialog javascript library from nakupanda.  This makes showing a Bootstrap Modal as simple as:

Okay, but what if you want to show a modal on top of another modal?  That is custom code!  Oh look, custom code:

Here is a JS Fiddle of the same thing showing it in action.


Some of that code comes from this Stack Overflow question and answer.

A few things are going on here:

1. When the modal starts to show, set the visibility to hidden.  Bootstrap animates the modal coming in from the top of the screen.  However, the second modal animates in behind the first.  So hide the modal until its completely shown.
2. To make the second modal come to the foreground, the z-indexes need to be adjusted.  If you dig into Bootstrap 3, you'll find the z-index of the dialog is 50000 and the background is 1030.  So the new modal and back drop need to be in front of those.
3. The timeout of 100 ms is probably not necessary, but in my application I am displaying an overlay spinner when the link is clicked.  The 100ms makes the overlay show for a minimum amount of time. 

Modals on top of modals are a kludge, and they aren't a great design choice, but when you need them, you need them.

Barf: I know we need the money, but...
Lone Starr: Listen! We're not just doing this for money!
Barf: [Barf looks at him, raises his ears]
Lone Starr: We're doing it for a SHIT LOAD of money!

Maybe in the future, Bootstrap will make multiple modals easier, but I think its justifiable that multiple modals requires custom code.    

Capistrano Deploys without Swap

I work on a Ruby on Rails application that is deployed with Capistrano 3 to Amazon Web Services.  We monitor our site performance with New Relic.  About a month ago, we noticed that our deploys were causing a delay in request processing and a drop in Apdex.

Here is an example of what we saw during a deploy.  The blue vertical lines are the deploy times and the green bar is how long a request spent waiting to be processed.


When we dug into it, we found that our servers were going into memory swap during the deploys.  When we deploy with Capistrano, a new Rails process is started to pre-compile the assets.  This pushes the memory usage over the physical memory limits.   Here is the key graphic from New Relic.  Note the swap usage just after 3:00 pm and the disk I/O at the same time.



You can see in the graph above how memory usage drops after the deploy so the solution to this was pretty straight forward: restart the servers first.

We're using Puma as our web server, so we added these lines to our deploy file.  This causes a phased-restart to be sent before the deploy, freeing memory and allowing the asset compilation to have enough memory to run without using swap.  Since Capistrano is based on Rake, its important to re-enable the phased-restart task after its run, otherwise it will only be run once.




Now our deploys run without causing requests to be queued.  What tricks do you have for zero-impact deployments?