Front end web development gives me a lot of joy, but it's not without its frustrations. And so I'm always looking out for any tool that improves my processes and reduces friction. Espresso is a good example of a tool that does just enough without offering too much, and it's a permanent fixture in my tool belt.
Another tool I've come to love is Hammer. The slogan for the app says it all:
Build out static HTML sites quickly and easily. No fuss, no mess, no PHP.
No mess is what I like. MAMP is handy, but it's overkill for me and often resulted in frustration. Hammer is slick and has a handful of small features that add up to a big improvement in local development.
The small things
My favorite is the auto refresh. I've expended way too many Command+R's to refresh a design. Having the work in progress refresh itself in the browser is a lovely thing. This is something that's been available for a while with tools like LiveReload, but most I've seen have been one trick ponies. Hammer combines the auto refresh with these other great items:
- includes: simply embed other files in the project without having to type a URL, similar to a snippet or template within a CMS
- paths: reference your assets (CSS, JS, or images) without having to worry about the URL path
- variables: just like they sound, set a value to be used on multiple pages of your site design
- preprocessors welcome: works with SASS, SCSS, and CoffeeScript files
- publish: Hammer will also create a testable, reviewable version of your in-development site which you can share with clients or dot comrades
On their own, each item is not terribly significant. But put them all together in one application and the result is a tool that becomes indispensable.
Typekit
When working on a site design, I like to start with typography as early as possible. Simply because the spacing, alignment and 'feel' of the design is affected so much by your type choices and because your content should be the focus of the design. And since I tend not to splurge on fonts all that often, I like to add Typekit to my in-progress design early on in the process.
In the past, that often meant using a clients folder on my web host and refreshing the browser twice to see changes. Not so with Hammer. It's possible to get Typekit working locally, which gives you the advantage of using Hammer's automatic reload functionality.
To get this working, you'll also need Riot's tool Anvil. This handy, free utility allows you to manage local sites and creates a unique dev URL for each project. You can simply add this URL to your kit on Typekit (build.dev in my case).
Now you can test your early iterations with various type choices.
Customizations
The default configuration comes with a few things I don't want or need. An example is the normalize.css file. To change this, you can update the application package for Hammer. Simply browse to your Application folder and find Hammer, then right click and choose Open Package Contents. From there, simply browse to Resources > Sample App. Within that folder are assets and includes, with various content in each. Here is where you can modify what is included with each new project you generate with Hammer.
I add my CSS resets to the main CSS file rather than a separate one, add an images folder under assets, and remove the app.'s file. Customize to your preference and note that you'll need to authenticate to admin privileges to make these changes.
Again, on their own, each little improvement to your workflow is not what makes Hammer such a pleasure. But the combination smooths out the local development process in a handful of ways. Even better, every time I've had a question for the team, I get a response within hours.
I heartily recommend you try it out.
