Autoptimize by default excludes inline JS and jquery.js from optimization. Inline JS is excluded because it is a typical cache-buster (due to changing variables in it) and as inline JS often requires jQuery being available as a consequence that needs to be excluded as well. The result of this “safe default” however is that jquery.js is a render-blocking resource. So even if you’re doing “inline & defer CSS” your Start-Render time (or one of the variations thereof) will be sub-optimal.
Jonas, the smart guy behind criticalcss.com, proposed to embed inline JS that requires jQuery in a function that executes after the DomContentLoaded event. And so I created a small code snippet as a proof of concept which hooks into Autoptimize’s API and that seems to work just fine;
The next step is having some cutting-edge Autoptimize users test this in the wild. You can view/ download the code from this gist and add it as a code snippet (or if you insist in your theme’s functions.php). Your feedback is more then welcome, I’m sure you know where to find me!
jquery
Autoptimize; JavaScript in head and some deprecated functionality
Autoptimize 1.6.5 got just pushed out, with one new feature and one notification. The new option configures Autoptimize to output the aggregated JavaScript in the head-section instead of at the bottom of the HTML. This can be useful when some of the JavaScript needs to be loaded asap and might prove useful to make jQuery plugins behave.
The notification might be less welcome for some users; YUI compression and the CDN options are marked as deprecated in this release. YUI compression was pretty exotic and required the installation of JAVA and the YUI compression jar, so I doubt anyone was actually using this. CDN options are deprecated as well; some people reported issue that I could not reproduce or fix. As I consider CDN not to be core functionality and as it can better be accomplished using e.g. WP Super Cache (which is a must-have companion of Autoptimize anyhow), CDN will indeed also be removed from Autoptimize. Expect the deprecated parts to be removed in 1.7.0 (which isn’t planned yet).
Javascript tip: visualizing DOM events
At work we were stumped by a simple link that upon clicking didn’t have the browser request the target page. Our supplier investigated using VisualEvent, a bookmarklet-initiated javasript-tool that goes through a page and visualizes all events on DOM nodes. The developer released VisualEvent 2 a couple of days ago (also on GitHub), which I played around with for a bit and it really is great for debugging purposes!
The culprit for the “broken” link by the way was a bug in an old version of SmoothScroll, a jQuery-plugin by fellow Belgian Mathias Bynens which ensures smooth scrolling when clicking on a in-page link. The plugin did check if the link was to an anchor on the same page, but it had already prevented the default action before that check was made, resulting in the broken link. The current version of the plugin does the check before the default action is prevented, so all is well, your weekend can start. Enjoy!
How to do jQuery templates with jQote2
For a proof of concept I was preparing at work I needed a jQuery templating solution. Although there is beta templating support (contributed by Microsoft) in jQuery, I decided to implement jQote2 instead. This alternative jQuery plugin is small (3,2Kb minimized, 1,7Kb compressed), versatile and most importantly very, very fast!
So what do you need to know about jQote2 to get it working? Well, there’s 3 ingredients; data, template and javascript-code to put the data in the template.
The data can be fetched from an external source, e.g. this call to the iRail-api for departures from Brussels North.
The template is basically just HTML with some placeholders for your data:
<script type="text/x-jqote-template" id="liveboard_tmpl"> <tr> <td class="left"> <%= this.station %> </td> <td class="right"> <%= this.time %> </td> <td class="right"> <%= this.platform %> </td> </tr> </script>
The javascript fetches the data using jQuery’s getJson, parses all departures in the template and adds the resulting HTML to an element in your DOM (in this case #liveboard’):
<script type="text/javascript"> $(document).ready( function() { $.getJSON( 'http://api.irail.be/liveboard/?format=json&station=Brussel%20Noord&lang=EN&arrdep=DEP&callback=?', function(data) { $('#liveboard').jqoteapp('#liveboard_tmpl', data.departures.departure); } ) } ); </script>
Off course the UNIX-timestamp in this.time isn’t really usable, but we can easily add some javascript to the template, just before outputting the time, to fix that;
<% this.time=((new Date((Number(this.time))*1000)).toLocaleTimeString()).substr(0,5); %>
That’s right, use “<%” instead of “<%=” and you can mingle javascript in the template. To only show trains that have not left and to show departures including delay, the template looks like this:
<script type="text/x-jqote-template" id="liveboard_tmpl"> <% if (this.left!="1") { %> <tr> <td class="left"> <%= this.station %> </td> <td class="right"> <% if (this.delay!="0") { this.time="<span class=\"delayed\">"+((new Date((Number(this.time)+Number(this.delay))*1000)).toLocaleTimeString()).substr(0,5)+"</span>"; } else { this.time=((new Date((Number(this.time))*1000)).toLocaleTimeString()).substr(0,5); } %> <%= this.time %> </td> <td class="right"> <%= this.platform %> </td> </tr> <% }; %> </script>
Add some CSS and you’ll quickly have something like the demo you can find here. Just look at the code, it’s pretty straightforward and check out the jQote2 reference for even more info.
Coding for the New Year
Just a quickie before diving into 2011;
- I’m having great fun with jQuery and a templating plugin called jQote2. Not getting into specifics or examples yet, but if you’re into jQuery jQote2 is well worth checking out!
- I’ve created a small plugin, DoNotTrack, to stop the Quantcast tracking that e.g. the WordPress.com Stats plugin introduces. You can download it here to give it a try. If time & my brain permit, this plugin could become a general solution to stop any unwanted tracking by other plugins on your blog.
- There’s a new version of WP YouTube Lyte with some small fixes & tested on WordPress 3.1 RC. We’re rapidly approaching 10.000 downloads, a great way to start a new year!
And this is how I feel about 2011:
Have a great New Year!