Monthly Archives: February 2014

Jag Reehal: Responsive Workflow with Grunt, at Refresh Cambridge

Grunt logo

At last night’s Refresh Cambridge meetup, the first of 2014, we were lucky enough to have Jag Reehal come to speak about his experiences with using Grunt — the JavaScript Task Runner — to facilitate easier development of responsive websites.

After some introductory slides to define responsive design (fluid grids, flexible images, media queries) Jag jumped straight into some live coding demos. Here’s a summary of what he demonstrated, with links to the relevant Grunt plugins in the NPM archive where I could find them:

  • A basic Gruntfile is a series of tasks that you want to run, written in fairly basic JavaScript. You can output text, warnings, and cause a task to fail.
  • The time-grunt plugin lets you see how long tasks took to run.
  • The grunt-concurrent plugin allows you to run two or more tasks in parallel instead of in series.
  • It’s easy to create your own Grunt plugin; use the grunt-init-gruntplugin as a template. It includes tests, which is a important part of any plugin.
  • Since we want to build a responsive page, we’ll need to access it on a variety of devices while developing. The grunt-contrib-connect plugin starts a basic server on a local address, so you can load your work-in-progress on your phone or tablet as you work. It also includes a livereload feature, so you don’t have to refresh each device after making changes to the source files.
  • We’ll be using media queries for responsiveness; in order to avoid repetition of values or breakpoints in our CSS, we should use a preprocessor like LESS or SASS.
  • The autoprefixer plugin is especially clever; just tell it what browsers you want to support (or even how far back it should go to support) and it will automatically fill-in browser prefixes for any CSS properties that need it. And the best thing is that you don’t have to worry about going back to change support when new browsers come out!
  • By using CSS compilers, we can easily split out the various parts of our code into logical areas, and import them into one single stylesheet.
  • The grunt-browser-sync plugin is almost like magic; it synchronises form values (and presumably UI state as well) across browsers/devices — update something on your desktop and the same change will appear instantly on your mobile! It also cleverly doesn’t force a full page reload if you update a source file; it simply injects only the updated file into the page, preserving any changes you have made. And it even lets you scroll in sync across devices too!
  • Images are the biggest web performance killer. Responsive images is a confusing topic; you must consider compression, spriting, and retina images. Spriting images in particular has always been a lot of work.
  • The grunt-spritesmith plugin lets you simply maintain a source file full of images; when run, the plugin converts all the images into a single sprite, together with the accompanying CSS. Adding a new sprite is now just a case of dropping the new image into a folder; no more re-calculating background positions!
  • Alternatively, you might want to use base64 encoded images. The grunt-image-embed plugin handles this for you (although obviously you need to balance the multiple files vs CSS size performance issues).
  • The ultimate icon solution is provided by the grunt-grunticon plugin, which takes SVG icons as its default type, while also creating a sprited PNG fallback and individual images, and uses JavaScript to decide which is the best format to use.
  • When it comes to larger images, no standard solution has been decided upon yet, but in the meantime the grunt-responsive-images plugin does most of the work for you. Simply provide it the large image and it will automatically create resized versions that are interpreted by the <figure> markup to serve different images depending on screen size. Only the images needed are downloaded.
  • An alternative is the BBC’s Imager.js library, which allows you to specify the breakpoints in a simpler JSON format rather than writing out a full set of srcsets.
  • For creating production-ready resources — concatenated and minified — there are plenty of plugins such a cssmin (for CSS), uglify (for JavaScript), smushit (for images), etc.

Unfortunately I had to leave before the end of Jag’s talk, but I’ll add any additional notes I receive from other attendees. It was a great demonstration of the power of Grunt’s plugin architecture (and I’m sure that a lot of these plugins work exactly the same within new-kid-on-the-block, gulp.js too), and reminded me of the recent blog post complaining that too often programmers don’t bother to automate repetitive tasks. Armed with the power of the relatively easy-to-install Node and Grunt, designers finally have a way to automate away the most time-consuming parts of their job, and concentrate on building great user experiences.

If you’ve never given Grunt a try, I highly recommend it; it’s not as scary as it looks, and you’ll be amazed at how much easier it can make your life!