Handcraft gets Zen Coding

If you’re not familiar with Zen Coding, here’s a brief description taken from its homepage:

Zen Coding is an editor plugin for high-speed [HTML] coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:

div#page>div.logo+ul#navigation>li*5>a

…can be expanded into:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

In addition to this, Zen Coding adds a few keyboard shortcuts for things like selecting a tag’s inner or outer contents, increasing numeric values in a css rule or surrounding a text selection with an html tag (or better yet; a Zen Coding abbreviation).

Integrating Zen Coding into Handcraft really speeds up HTML prototyping and makes a great addition to the already syntax highlighted, context-aware code completing editing experience that Handcraft offers. To give all users a clear overview of the keyboard shortcuts available, we’ve added an overlay similar to Gmail by the simple press of “?”.

Handcraft's keyboard shortcuts

For a quick demo of Zen Coding (without Handcraft’s CSCC code completion), go to
http://zen-coding.ru/codemirror/

New to Handcraft? Sign up for free (or sign in with Google) and you’ll be trying out this fantastic editing experience in under half a minute.