Rolling my own HTML5 Boilerplate

HTML5 Boilerplate has been generating a decent amount of buzz lately. OK, it’s nice. Really, really nice. So nice, in fact, that I abandoned my own project to create a project baseline. Instead I rolled my own custom boilerplate, and there was a lot to customize.

You're all I ever wanted

I’ve been meaning to do this for a while. When I run into a problem I don’t know how to solve while working on a project, I like to create a new project to address just that problem. Doing so lets me focus on the new script without letting the larger project cloud my thought-process. It’s the equivalent of clearing off a workbench by swiping your arm across it.

But when you clear off a workbench, you want to clear it off fast! Anything else would detract from the problem-at-hand. When I wrote An agile-ready checklist I referred to this too: if you don’t have the ability to get something started and delivered quickly, then you have a process problem. In this case my wish list was pretty short: One script to:

  • Create a named project in my shared project directory that includes…
  • …my usual directory structure with default .css and .js files.
  • jQuery. Offline so I can work sans interwebz.
  • …a unit testing framework, ready to go.
  • …a pretty enough UI that I don’t get distracted trying to clean it up.

It’s really not that much when you think about it, and H5B delivers.

"delete-key friendly"

It delivers so well in fact, that it over-delivers. There’s a reason Paul Irish coined the phrase “delete-key friendly” within the list of H5B’s “awesome-er” features; this thing was meant to cover everything from inspiration to deployment, and comes with a bunch of server configuration templates, placeholders for developing jQuery plugins, styles for mobile devices… all of this had to go. In the heat of the moment, I’d rather not be tripping over any more cruft than I have to.

Although I did leave in a few things for later, hidden behind commented code, like the hooks for Google Analytics. No it’s not going to do me any good in a development environment, but I’ve been meaning to throw a few projects behind ninjascript.com, just for the hell of it. Keeping GA commented in there just means I’m more likely to remember to turn it on at some point when it could be useful.

Changing things up

Just because I like to tinker, and if I didn’t do it now then I’d just waste time later, I also made a few additions of my own. The low-hanging fruit just meant upgrading jQuery and writing some custom CSS so that my new projects weren’t completely bare. The more interesting things came in the form of a build script.

H5B does come with its own shell script for creating new projects, but it’s very utilitarian: Create a project directory and copy files over to it. One of my own criteria was that the script create new projects in my shared project directory. I was going to have to change that script anyway, but I wanted to give my new projects some identity too, so in the .html, .css and .js files I added some tokens. The whole thing is ridiculously simple:


$> ant
$> ...Give it a name:
$> ...What's it about?:

And bam! you’re done. The build script reads in a few properties so that I can configure my project path and the token values:


author.name=Scott Grogan
author.site=http://ninjascript.com
dest.dir=/Users/scottgrogan/Projects

Next steps

If the links haven’t given it away, I chucked this project onto GitHub: ninjascribble/SquareOne. Check it out, send feedback, etc… I’ll be updating it as I go. Next up: H5B’s build.xml feels ridiculously cluttered. I like keeping things simple: clean, test, compile, deploy.