It’s a web development pattern so ingrained we barely notice it: hit ⌘-S to save an HTML or CSS file, ⌘-TAB to switch to a browser window, ⌘-R to refresh it, then back to the editor for more changes, repeated dozens of times a day.

Anything that cuts down this series of steps reduces fatigue while forging a closer link between code and design: rather than playing a guessing game (“does this work?” (save / refresh) “maybe this?” (save / refresh)) developers can watch the browser adapt to their code changes in close to real time. There are several tools that accomplish this today, with installation just a click away:

Emmet logo

Emmet (formerly Zen Coding) is best described as a set of macros and keyboard shortcuts for rapid web development. Available as a free download and plugin for over a dozen popular editors, Emmet potentially doubles the production speed of web pages if used consistently. In this article, I’ll take you through installing, using and customizing Emmet to gain maximum results.

In the past I've suggested a particular workflow to creating body copy for web pages: write the text in Microsoft Word (taking advantage of the program's inline grammar and spell checking, correct typography, and easy exchange of the file with clients), then transfer the text into your web editor of choice, clean up the markup, and use the resulting HTML in your web page.

It is a system that works well, and is still my go-to option. But sometimes you just need to create a quick bit of text with markup: for example, writing a few paragraphs for a blog entry, or a short article for a CMS. For such a task the Word-DreamWeaver route takes too long, and DreamWeaver by itself is too much (and won't do correct typography).