Looking for the best way to make static HTML sites on your Mac? Hit the nail on the head with Hammer – the newest addition to the web developer/designer’s (devigner’s?) toolbelt. Hammer is a brand new auto-build tool from Riot intended to make a developer’s life easier by speeding up the design-code-test loop. It speeds up your process of converting CoffeeScript to Javascript and SASS/SCSS to CSS, while keeping the build folder clean of trash and various dependencies.
Join us as we hammer our way through a demo of this App Store newcomer and show its features in all their glory. We’ve got two copies to giveaway to our readers as well, so keep reading to get your chance to enter.
When we compare the olden days of web design and development in the early 1990s and the web today, the leap we’ve made as a technologically obsessed species becomes staggeringly apparent. We’ve lived through the rise and fall of WYSIWYG editors, witnessed countless design trends and changes and argued over browsers, operating systems, continuously evolving programming languages and, these days more than ever, design and development on mobile devices.
With so much time spent actually developing cross-browser, cross-OS and cross-device, one can really use a tool which speeds up the actual design-code-test loop, saving valuable hours which we can then toil away on arguing about standards, as we tend to do.
Note: this review is done with a pre-release version of Hammer, and some options may differ slightly in look and functionality in the final release.
Let’s see what it can do
The TL;DR version is – Hammer automatically builds your SCSS, SASS, CSS, JS, CoffeeScript and HTML files into the Build folder inside your project. This means it automatically optimises and saves new versions of your code, without forcing you to run external programs like, for example, Compass, in addition to having an active CoffeeScript to Javascript compiler. It’s an all-in-one tool for rapid design and front end development.
Installing is, of course, as simple as ever. Simply dragging the app to your Applications folder handles everything and as soon as we run it, we’re greeted by a welcome screen.
Hitting Create new Project will let us pick a location, and will automatically create the folder. We’ll call this one “demo”.
Hammer will then build the initial project, set up some starting files and tell us it’s ready. Near the top of the window that opens next, to the left of the “Build” folder icon is an empty application placeholder. Use this to select a default text editor. I’ll use Sublime Text 2 in this case (as evident in the screenshot below). When set up, if you click this text editor icon the entire project will open in it.
The other two icons near the top of the window are also interactive – the left one, “Project Files”, opens the project folder (in my case ~/Sites/demo), and the rightmost one titled “Build” will open the Build subfolder inside our project folder (~/Sites/demo/Build).
To the left is our list of available projects (currently only one), and in the centre of the right part of the window is the build status, reporting what Hammer did, on which files, and how it went. Hammer rebuilds all files on every file save, but you can also initialise the Rebuild process manually by clicking the Rebuild Now button or hitting ?R. Clicking “index.html” will open it in your browser in all its magnificence.
You can open your files for editing, publish them, open them in the browser and open their containing folder directly from Hammer
The bottom-most part of the right side of the window, “Publish to hammr.co”, is especially interesting — when your project is ready for deployment (for example, you’re designing a site for a client, and you’re ready to demo it), you can deploy to hammr.co — for free! You get a minified link to your demo which you can send to your clients, and every new publish gives you a new link, which means you can even give your clients different versions of your design.
Includes
After opening the project in our editor by clicking the editor icon, we immediately notice some odd “include” comments in `index.html`. This is one of Hammer’s primary features — it allows you to define html fragments you can use in multiple pages without copying the same block of code over and over again, and without resorting to a server-side solution like PHP to handle the includes. Have a header you need included on all pages? No problem!
Includes help you include a common html fragment in one or more other html pages
Another immediately noticeable thing is the fact that includes do not require a file extension — just the file name is enough — nor do they require full file paths to be specified. Hammer automatically searches your project folders when building and locates the necessary files, so you can even move them around and nothing will break as long as they still have the same name. Hence, in the index.html file,
"@include _header" was enough, and there was no need for "@include /includes/_header.html"This is due to the Clever Paths feature which works in includes, image sources <img src="<!-- @path mac.png -->" /> and even in CSS background-image: url(mac.png).
Inclusions extend to assets as well, and you can just as easily embed your JS and CSS (or CoffeeScript and SASS/SCSS) into the html. Typing something like <!-- @javascript app --> will not only look for the app.js (or app.coffee) file in your entire project, it will also generate the required <script> tags. Likewise for CSS — using <!-- @stylesheet style --> will include the file through the appropriate <link> tags, and using something like <!-- @stylesheet assets/css/* --> will include every stylesheet file found in the entire assets/css folder, one after the other.
Variables
Hammer also supports declaring variables. They are similar in syntax to PHP variables and declared thusly:<!-- $title My New Title -->
This declares the `title` variable and allows you to use it all over the current document, like so: <title><!-- $title --></title>In case a page does not explicitly re-declare a variable, you can use a default value: <title><!-- $title | This is a title --></title>.
As you can see, variables are a powerful tool in any developer’s arsenal as they make refactoring data on a page significantly faster.
Variables enable data-reuse, and can even be used as a way to demonstrate internationalisation in your project
Automatic Reload
Including a @reload tag in your file tells Hammer to reload the page in the browser every time it builds, i.e. every time you save the file.
This provides you with the responsiveness of a WYSIWYG editor in the comfort of your browser. Edit CSS and markup in one window/monitor, and watch the changes as they are applied live in/on another. This saves additional time that’s usually wasted on switching to the other window and hitting Reload, and you’ll quickly get accustomed to it.
Navigation helpers and Clever Path
Last but not least, two more features deserve a mention.
Clever Path, which we’ve already mentioned above in the Includes section, is realised through an @path keyword. Using @path prints out the path to the html file in question, so <!-- @path _header --> in our demo app would produce /includes/_header.html.
Clever path will load the first file it finds, so if there are multiple files of the same name, be more specific by adding a full path route or file extension
Using this type of pathing in your navigation links (see _nav.html) will enable Hammer to figure out the page it’s currently on, and if what it figures out matches any of the anchor tags rendered with `@path` on that given page, it automatically gives the anchor tag the “current” class. If the anchor is inside a `<li>` element, it too is given the `current` class.
For example, if we’re on the `index.html` page and said page contains the following:
<a href="<!-- @path index -->">Index</a>
<a href="<!-- @path about -->">About</a>
The first link will automatically be given a current class and will appear in the Build folder like so:
<a href="/index.html" class="current">Index</a>
<a href="/about.html">About</a>
This allows us to use the exact same navigation element on every page we use – without having to customise each page to have its own current element, further making refactoring easier and saving time.
Nav helpers rid developers of having multiple nearly-identical html fragments manually pasted into every one of their pages.
Conclusion
As a newcomer to the App Store, Hammer hit the ground running. The features it offers are a worthwhile addition to any developer’s arsenal, so go ahead and give the trial version a go. Additionally, if the price tag is too much but you end up falling in love with the app as one tends to do, Riot and Appstorm have teamed up for a promotional giveaway of two Hammer licenses to you — our readers!
Just leave a comment below letting us know what you want to use most in Hammer, and optionally tweet about the giveaway and leave a link to the tweet below for an extra entry. We’ll close the giveaway on November 24th, so hurry and get your entry in!