Hammer time
Summary: If you use OSX and write HTML, screw the trial version. Buy Hammer. You’ll earn back what you spent on it during the first hour you use it.
I’ve been working alongside a designer who’s making designs for traditional desktop-size screens only. For him, Photoshop visuals are a passable way to demonstrate old-fashioned fixed-width layouts. My job’s deconstructing his designs and reconstructing them so that they’re optimised for multiple screen sizes. Photoshop images are no good for this. The only thing that works well enough is HTML, CSS and Javascript in a browser, on a device. Every one of my client projects involves me writing code while I’m designing. Then, whereas once I delivered a set of static Photoshop visuals, I now hand over a set of HTML templates.
Unlike the “production HTML, CSS and Javascript” that a front-end developer might write, I don’t optimise my “design code” for deployment. I treat it just like I treat pencils, paper and Photoshop, as a creative tool and a way to demonstrate my ideas. This means I write code fast, post it to a server, open it in a browser and check if my ideas have merit. Sometimes I keep code, often I don’t. Writing code is just the same as making a fast sketch with a fat marker, so it’s really important to keep focussed on design by minimising inefficient and distracting aspects of working with HTML, CSS and Javascript. That’s where, for me, a tool like Hammer for OSX really comes into its own.
Hammer
I’ve been using Hammer for several months. In-fact I used it throughout my redesign of this site a few months back. Hammer’s developers, Riot, say that it:
… lets you create HTML builds & templates quicker, more efficiently & more conveniently.
They’re not kidding.
Hammer makes writing HTML (or XHTML if you prefer) more efficient because I can use its shortcuts in HTML. Hammer then automatically expands these shortcuts into a finished ‘build.’ Hammer does a helluva lot more besides, but I’ll get to that.
There are two ways to get started with Hammer. Hammer can create a new project for you with a default structure of assets and includes. Currently there’s no way to change Hammer’s default set of files from within the app. If you’re nerdy enough to need to do this — and I expect a lot of people are — show the app’s package contents and navigate to Contents > Resources > SampleApp to change the default files to your own.
Otherwise, drag any project’s root folder into Hammer’s sidebar and Hammer will begin to watch that folder and apply its magic — taking whatever you do or add to your project, automatically processing it and placing a copy in a ‘Build.’ folder within that project.
Hammer packs in a lot of features:
- HTML Includes
- Finding asset files and automatically completing paths for you
- Sass (but not LESS) and CoffeeScript compilation
- Cleverly adding ‘current’ classes to navigation
- Variables (Yes. In HTML.)
- Automatic browser reloading
- Sharing built projects online
I won’t run through all of Hammer’s features, just the ones that have made my work more efficient. You should try the rest out for yourself.
HTML Includes
I often make dozens of HTML templates during a project. There’s a lot of repeated code across them — banners, navigation lists, footers and code a client won’t see, like the contents of the <head>. Hammer keeps every template in sync because it uses HTML Includes for those common elements. In essence, Hammer @include tags are just like PHP includes but for regular HTML.
<!-- @include _banner.html -->There’s no limit to the amount of includes you can use and there’s no real need to keep them organised in folders either, as Hammer will find them anywhere inside your project. Hammer’s HTML Includes are worth the price of the app all on their own.
Clever paths
With images flying in and out of a design project, it can be hard sometimes to keep track of them, particularly when there’s more than one person working with you. With Hammer, there’s no need to know which folder an image is in, just its file name. So instead of writing out the full path to an image, just write:
<img src="<!-- @path banner.png -->">Hammer finds the image and compiles it to:
<img src="../img/banner.png">Aside: To make things even simpler, I’ve set up a TextExpander snippet so that I only have to type §img to insert the Hammer shortcut.
Moving assets around a project — for example organising @2x images into their own sub-folder — isn’t a problem as Hammer updates paths across a project every time it builds.
Hammer also keeps track of stylesheets and scripts. Instead of writing what could be a long list of CSS and Javascript files into dozens of templates and the maintenance that goes along with that, just write:
<img src="<!-- @stylesheet /css/* -->Hammer then compiles all stylesheet links into the templates automatically. The same goes for script files too.
These two or three features alone make Hammer a great tool. So what about any cons?
Cons
I’m a LESS, not a Sass user. Hammer doesn’t compile LESS files and Riot tell me they’ve no plans to add LESS compiling to the app. I normally compile LESS files using Codekit but using both apps together isn’t ideal. As much as a prefer LESS and as much as like Codekit, having Hammer do everything for me is a big enough reason for me to switch to Sass. (For God’s sake, nobody tell Jina Bolton I said that.)
There’s a few things Hammer doesn’t do that I’d love the developers to consider. Most obviously, hacking the app’s package contents to customise default project files isn’t ideal. I wish there’s a way that Hammer could link to outside framework files in the same way that Codekit does so I can have a canonical reference set of files I can keep up to date with new versions of scripts etc. There’s also no Windows version, not that I care but it does make working with Windows-based teams a little more tricky.
Summary
I’ve worked with Hammer for a few months on several projects. Where I’ve not been able to use it — because other developers haven’t had access to the Hammer Beta (and because they use Windows) — I’ve really missed it.
Hammer’s available now from the Mac App Store. It’s $23.99 so it’s not a cheap utility app. Don’t worry about the money though, Hammer’s worth every penny. There’s a trial version available if you want to see for yourself.
My advice is, if you use OSX and write HTML, screw the trial version. Buy Hammer. You’ll earn back what you spent on it during the first hour you use it.