Environment-specific Builds With Grunt, Gulp or Broccoli

Image credit:

Image credit:

The dev, staging and production versions of our projects can vastly vary, which is one reason we may need to change paths to resources (scripts/styles/templates), generated markup or other content based on environment and target-specific information. Luckily there exist a number of build tasks in the Grunt, Gulp and Broccolli eco-systems that can help us here.

Today I’ll cover three approaches to this problem – string replacement, conditional comments and template variables. The option you end up choosing will likely depend on where you’re happy for the bulk of your conditional logic to exist. Continue Reading →



Ghostbusting For Front-end Developers

Ghostbusting for front-end developers

Human sacrifice, dogs and cats living together… mass hysteria! We’d like to avoid that, right? Well, today we’re going to talk about how to improve the accuracy of your front-end testing environment so you’re not chasing ghosts. This is important for anyone building high-performance apps for the web.

All engineering requires environmental assumptions. This is particularly important when we’re measuring the quality and performance of the web experiences we create. A faster web is a better web, but before you can achieve this, you need to ask yourself – is your room clean?
Continue Reading →



Yo Polymer – A Quick Tour Of Web Component Tooling

web component tooling

In the HTML5 Rocks write-up and videos for my talk “yo polymer”, I walk through Web Components – an exciting new set of web platform features that will change the way you build apps.

We’ll look at Polymer – a library for using them in modern browsers today (including new <x-mileycyrus> and <jukebox> tags!) and Yeoman – modern tooling that can help you rapidly build new apps using these technologies. Set aside a few minutes, grab some pop-corn and learn how to create your own custom elements.