A lot of people write HTML, XML, or a similar data-structuring format. A lot of people don't particularly like it either. Some will like it, but for the wrong reasons - I personally find doing anything on my keyboard oddly gratifying, independent on the actual 'worth' per keystroke.
Writing out HTML and similar types of code can be a typing-intensive task. Writing out something like <div id="main"></div>, for example, takes six combination keys (shift+., shift+') and a repetitive task (closing the </div>), while the basic idea you're trying to write is 'a div with id main', or in your most basic thought patterns, 'div main'.
Yet many people write out the full HTML section, because they either don't know of an alternative, or don't actually want an alternative, and the basic act of writing out a HTML structure gives them some gratification and a feeling of doing something relevant.
Well it's not. There is an alternative, and it's even faster than an IDE that automagically adds a HTML closing tag (saving two combination keys, a slash and a couple of characters). This is Zen Coding.
Who knows CSS Selectors? If you've ever worked with CSS or jQuery, you will. A CSS selector is bascially a syntax that allows you to specify a certain portion of your HTML document. You can 'select' a div with ID 'main' using the CSS selector div#main.
When you read div#main, and you're somewhat versed in basic CSS selector syntax, you will recognise this as 'A div with ID main', and read it as 'div main'. Wait, doesn't this seem familiar? Yes, a few paragraphs back, it turns out this is the same thing you have in your mind when writing out the full HTML for creating a div with a certain ID.
Zen Coding recognises this too. Zen Coding is an editor or IDE addon that allows you to write HTML by writing CSS selectors (and a few additions), allowing you to replace the boring task of writing out HTML syntax with writing out your thoughts with some minor syntax.
I can demonstrate this with a handful of examples. If you want to go along with this, you can use the online Zen Coding tool at http://zen-coding.ru/textarea/, or go to http://code.google.com/p/zen-coding/ and get the editor or IDE plugin of your preference to add Zen Coding support to it. I discovered this feature in IntelliJ IDEA, as it's a default feature in this IDE.
HTML tags
To start, let's create a div. In your editor, simply type div<tab>, where <tab> means 'press on that button on your keyboard that says 'tab''. This produces the HTML <div></div>, and places (in the case of IntelliJ) the caret in the middle of the div, so you can immediately write out the contents of the div.
ID attributes
Give the div an ID. Delete the div, then recreate it using div#main<tab>. This produces a <div id="main"></div> - a six control+key and 14 regular-keystroke string in just 7 regular and one control+key keystrokes. It types much more natural, too, as having to do ctrl + < takes some acrobatics (if you're like me and try to do the two keys with the same hand).
Classes and combining
Similarly, we can give the div a class instead. Simply type div.content<tab> to give it a class 'content'. Of course, you can also combine the two - type div#main.content<tab> to have the editor write out <div id="main" class="content"></div> instantly.
Attributes
Perhaps unsurprisingly, you can add a non-class or ID attribute to an element using CSS (or XPath?) syntax. Let's write a div with a role: div[role=main]. This produces a div with a 'role' attribute with the given 'main' value.
Children and siblings
The CSS standard also supplies syntax for children and siblings. If we want to create a div that contains a fancy HTML5 nav element, we can use that:
produces:
<div id="main">
<nav></nav>
</div>
with the caret inside the <nav>-tag. Similarly, we can add siblings. Let's add a list to the nav tag:
div#main>nav>ul>li+li+li
produces:
<div id="main">
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
This puts the caret in the first LI. In my editor (IDEA), pressing tab again moves the caret to the next li - no reaching to the mouse (as I often do) to move to the next list item.
Multiplication and numbering
We repeated the three LI siblings by typing out li+li+li, which can be written out pretty quickly, but it can be done even faster using the *-character. Note that this isn't the CSS *-character, which matches all, but a Zen Coding-specific character. Instead of writing li+li+li, you can write li*3, which produces three (sibling) list items.
If you like, you can also number the list items using the $-character. Try this: ul>li#item-$*3. This produces a neat list with three unique ID properties in the list:
<ul>
<li id="item-1"></li>
<li id="item-2"></li>
<li id="item-3"></li>
</ul>
Grouping
Finally, you can group sections of your Zen Coding string using parentheses. Read the next Zen Coding string and guess what the outcome is:
html>(head>title)+body>(div#header>img)
<html>
<head>
<title></title>
</head>
<body>
<div id="header">
<img src="" alt="">
</div>
</body>
</html>
Zen Coding allows you to write a large amount of largely boilerplate HTML in a concise syntax that's almost as fast to write out as you can think. With a one-liner like the following, you can write out a full HTML page that would normally take you five or so minutes to write out in the classic fashion:
html>(head>title)+body>(div#header>img)+(nav>ul>li*2>a[href=article-$])+(div#main>(h1>span)+(article*2>(header>(h2+time))+summary+section*2>h3+p)+div#footer)
Once you're used in the syntax, producing large amounts of HTML - if needed - becomes a trivial matter, and it's much easier and faster to experiment and change some things around.
Of course, I wouldn't recommend even trying to write out a Zen Coding string like the above - I admit I spent five minutes or so trying to debug it because I had the parentheses wrong. Instead, try to write nice and short 'sentences', if you will. Split the above up into:
html>head>title
body>div#header>a>img
nav>ul>li*2>a
div#main
article#2>(header>(h2+time))+summary+section*2>h3>p
div#footer>nav>ul>li*5>a
etcetera. It's a matter of style.
Other applications
HTML isn't the only thing you can do with Zen Coding. Naturally, you can do XML and XML-like structures too with the same syntax. There's also alternative applications for zen coding, for example with filtering. One example is the 'e' filter, which escapes the HTML output like so:
produces the HTML-escaped version:
<div id="main"></div>
Another is the 'haml'-filter:
div#main>nav>ul>li.item*3|haml
which produces the output as a (also concise but rich in whitespace) HAML template:
#main
%nav
%ul
%li.item
%li.item
%li.item
I'm pretty sure there's other output formats out there too.
Writing CSS isn't that big of a chore, but it can be done faster. Writing out 'margin-bottom:auto; can really slow you down if you want to chuck up large amounts of CSS lines. There's a Zen Coding derivative, Zen CSS properties that helps with this. With shortcuts like mb:a, you can write out full CSS properties a lot more efficient. See the webpage for more examples.
Another interesting application is using Zen Coding with some rudimentary syntax extensions as a template language. One limitation of the basic Zen Coding syntax is that you can't add values to the output - adding this option makes it suitable as a very compact and powerful templating language, not unlike the above mentioned HAML and its derivates. Here's an exaple from the JQuery Zen Coding plugin:
var data = {
contacts = ['Bob', 'John', 'Yog-Sothoth']
}
$.zc('h2{There are !contacts.length! contacts.}', data);
which produces:
<h2>There are 3 contacts.</h2>
One thing to keep in mind though: anything longer than 40 characters or so becomes hard to read and maintain. A multi-line, but similarly compact syntax would be more suitable for longer templates. Partial templates could also help, so you can keep the individual templates short.
With client-side templating on the rise, a short but readable syntax for creating templates is certainly worth exploring.
tl;dr
In hindsight, modern IDEs sorta offer similar functionality with pre-defined templates, but they're not as flexible as Zen Coding - yes, you can chuck out a default navigation block with IDE templates, but you have to pre-define them, and you need to manually edit them afterwards if you want to change some IDs. I believe the zen coding logic can be applied to a lot of areas, especially in potentially code-intensive languages. I also think it's a very smart alternative to what we know as IntelliSense, automatically filling in the full name of the function you want to use.
Currently, at least for me, this involves typing part of the function name, and then either waiting a few hundred milliseconds (I think I have it set to 200 at the moment, but I'm not sure) or pressing the ctrl+space keyboard combination. This often - at least in the case of Eclipse - leads to having to wait a short while until the IDE has loaded the available functions.
With Zen Coding-style syntax, you could possibly type part of the name of a class or feature you want to use (or use the abbreviation-style already possible in Eclipse, for example typing IAE if you refer to an IllegalArgumentException), and just put it there instead of still offering you a choice and you having to press enter. I can imagine typing 'for 1 to 10' in Java, then pressing tab to have it written out as a proper for-loop with all the syntax, could speed up productiveness.
I might just be misusing my IDE though, or not using some smart customizations like having tab double as ctrl+space or return.
tl;dr: Zen Coding, It's Good™.
