HEAD.JS, Twitter Bootstrap, Django, and Google App Engine... Oh my!

After watching an awesome presentation about Twitter Bootstrap at this year’s CodeStock, I really wanted to give it a try.

As with most web projects that I want to deploy rapidly, I turned to Django (nonrel) and Google App Engine and started tweaking the default template I’ve got for creating a new website. I use mediagenerator to combine all of my JS into a single minified file which I include at the bottom of the page to ensure faster load times and so that the DOM is ready for my JS.

It only took a few minutes to make the updates to my template, and then I was ready to deploy and start playing.

I decided to use a gadget I had created for Windows 7 a long time ago as the source of information for the content (better than Lorem Ipsum, right?), and deployed the web app to http://gadderstock-web.appspot.com/

Everything was working great, until I realized that I couldn’t use some of the cool jQuery scripts in Bootstrap with my JS file at the bottom of the page. This was particularly a problem when I tried using the Popover from Bootstrap as it (along with the Tooltip) is an “opt-in” effect. This means that you have to explicitly activate the effect with a piece of JS in your page.

In order for the JS to work, it could only be called after jQuery was loaded—but by the time the jQuery loads from the bottom of the page, the content with the script had already been processed by the browser!

This was really annoying…

There were two obvious solutions:

1. Stick the single, minified JS file at the top of the page so jQuery will be available to content further down.
2. Break out the jQuery files and stick those alone at the top of the page, while continuing to use the rest at the bottom of the page.

Both of these solutions were problematic. Having to include multiple JS files in the page means additional server requests, the headache of tracking which files go where in the markup. Sticking the single whole JS file at the top means slower page loads and a reduced user experience.

I wasn’t happy with either of these workarounds, so I did what I always do: ask Google.

Then I discovered HEAD.js.

I was able to reference this tiny file at the top (so minimal impact on page load performance), and then I could still use JS in the content of my pages! This particular bit activates the popover effect:

head(function(){$('img[rel="popover"]').popover();;});