Updates to Origin

Back in April I published my front-end starting point on GitHub. It includes basic HTML & CSS and many Grunt tasks to automate compilation, minification, optimisation, and rasterisation.

What’s new

My custom SVG rasterisation task was poorly written. It brought my laptop to a standstill while churning through as many phantom.js processes as there were SVG files. I’ve now improved that, mostly with a sexy progress bar:

rasterize task

There’s probably a faster way using a single phantom.js instance but by the time I figure that out I won’t need PNG fallbacks for legacy browsers… Update: I’ve now published grunt-svg2png to NPM and improved the speed performance dramatically! Instead of 30 seconds it’s done in less than 5.

Because I’m generating some raster graphics on the fly I’ve had to manually optimise them using the ImageOptim desktop app. Now thanks to Jamie Mason’s awesome Grunt-ImageOptim and ImageOptim-CLI that’s no longer the case! My automated build process now goes:

  1. Create build folder
  2. Compile HTML templates
  3. Compile CSS (Sass with Compass)
  4. Copy assets (images, fonts, JavaScript)
  5. Minify JavaScript
  6. Optimise and rasterise SVG
  7. Optimise raster images

The whole process takes less than a minute and I have a production ready flat build. I could do more with JavaScript (concatenation and testing) but my usual work hasn’t mandated much attention here. I should probably normal(-ise/-ize) spelling at some point.


Follow @dbushell on Twitter
Return to Blog