Building a better workflow with Hammer and Anvil

Author: Andy Hartwell

Hammer and Anvil, both made by Riot in Bath, are two apps for web development that have been around since last Autumn. However, it’s only been the last few weeks where I’ve really brought them in to my workflow.

Anvil

anvilformac.com

Anvil is the simpler of the two. It’s a beautiful little app that can sit in your menu bar, ready for you to add folders to. One added, you can give the folder a project name, and Anvil will give it a .dev URL to run from. So far I’ve only used it for static HTML sites, but it’s capable of running Rack apps too (a Ruby web server interface). The app is a simple concept, but put together very well. If I need to run a static site locally, I’d certainly rather be using something like Anvil over a powerful but (in this case) bloated app like MAMP. The UI with your projects listed is a pretty handy feature too.

So far the only problem I’ve found is not with the functionality itself, but with the UI. Although my projects are running perfectly with Anvil, the toggle is permanently switched to “off”, and refuses to change. Not a real issue, as it’s definitely all on and running, but an odd glitch nonetheless!

Hammer

hammerformac.com

Hammer is the key workhorse here. To get it working alongside your development project, you simply need to click and drag your development folder in to the app. Hammer will then start tracking the folder, and can offer the following features…

Auto Compiling and Reload

So, plenty of us are using SASS/SCSS these days, while CoffeeScript is proving fairly popular too. Hammer can compile all these languages and output the standard CSS and JS. This isn’t a revolution of course, with CodeKit being the app that really brought in-app compiling to everyone’s attention, but it’s good to see Hammer offer this too, as needing to run it alongside another app wouldn’t feel nearly as efficient. Support is also offered for Bourbon, the popular mixin library for SASS, which I’d recommend to anyone writing CSS. It’ll automatically help your with vendor prefix support, improve your efficiency, and create more maintainable code. I’ve always found it more enjoyable to work with than the popular alternative, Compass.

Alongside all of this, auto reload is also supported, because no one wants to be hitting cmd+R these days.

HTML Includes

Includes can only be created using a programming language right? Not anymore. Hammer supports its own kind of HTML include, so PHP or local servers aren’t required. A full static site build can use the markup from a single header.html or footer.html file, for example. Handy.

File auto detection

Your file and directory structure can become a lot more manageable with “clever paths”. Instead of referencing a specific directory in your markup, you can include something like
<a href="<!-- @path home.html -->">Home</a> and Hammer will automatically find your home.html file, even if it’s moved between folders.

Variables

Variables can be useful in various scenarios. If you have an include across your site, that you wish to change a certain aspect of between each page (e.g. a page title, or sidebar class, etc), then you can set variables within specific page templates to adjust the final output of things. Navigation active classes can also be produced. Hammer can detect a class of “menu”, along with the page you’re currently on, and add a class of “current” to the relevant page link within the navigation. One more feature that helps your prototypes become more real.
On a related note, I’d love to see support brought in for “if” statements, referencing pages within the statement to output markup when required. You can often achieve a similar thing with a variable class and some display: none usage in your CSS, but this takes longer, and outputs CSS that starts becoming more specific to prototyping, as opposed to production ready code.

Build publishing

Each time you save a change to one of your files, Hammer compiles your development into a totally static “Build” folder, with all the finalised markup. You can view these files as normal, run the folder locally using Anvil to get a dev URL, or utilise Hammer’s final feature – remote publishing. With a single button click, you can upload your site to Hammer’s servers, creating a viewable site online with a short URL, perfect for sharing with clients or your team.
My second request for the guys at Riot is to add an easily accessible button on the published build template that removes the Hammer header (which displays project details and some browsing UI). If you’re focussing on design evaluation, the header can really disrupt the flow and feel of many layouts, and while you can view the source to grab the iframed source, it would be nice to have an easier removal method, especially for those who may be unfamiliar with iframes.

My workflow

Ultimately, I’m finding Hammer and Anvil useful during the initial stages of a project. I’m experimenting with introducing the browser early on to concept design ideas, particularly so with the wireframing stages. Hammer is a dream for prototyping overall. Includes make sitewide changes quick and easy, with variables and nifty features like the active navigation classes making the prototypes feel more real and polished. Working with Hammer will be twice as efficient as working various static files directly, while avoiding the headaches that PHP or an early introduction of WordPress can bring.