Zen Coding - making HTML Development faster!
Heck, I could write a long post about Zen Coding - but why not just let you see a vid that explains it, and shows some of its amazing features?
Check it out at Vimeo - Zen Coding v0.5.
As my xHTML writing tool of choice is Notepad++ (due to it having syntax highlighting for like, everything) I did a few googles to find a Zen Coding plugin for Notepad++. Chances are that your favorite editor also supports it, or that a plugin is available from the Google Code project.
How it works
Simply type in a string such as this one, which reflects the hierarchy of html tags:
body#yourPage>div#item-$*5>ul>li.listitem$$*3>a.link
Then use the shortcut your editor uses to expand the Zen Code into xHTML (for the Notepad++ plugin that is Ctrl+E, later versions seem to use ctrl+alt+enter) and watch how, magically, you end up with full blown, indented markup.
<body id="yourPage"> <div id="item-1"> <ul> <li class="listitem01"><a href="" class="link"></a></li> <li class="listitem02"><a href="" class="link"></a></li> <li class="listitem03"><a href="" class="link"></a></li> </ul> </div> <div id="item-2"> <ul> <li class="listitem01"><a href="" class="link"></a></li> <li class="listitem02"><a href="" class="link"></a></li> <li class="listitem03"><a href="" class="link"></a></li> </ul> </div> <div id="item-3"> <ul> <li class="listitem01"><a href="" class="link"></a></li> <li class="listitem02"><a href="" class="link"></a></li> <li class="listitem03"><a href="" class="link"></a></li> </ul> </div> <div id="item-4"> <ul> <li class="listitem01"><a href="" class="link"></a></li> <li class="listitem02"><a href="" class="link"></a></li> <li class="listitem03"><a href="" class="link"></a></li> </ul> </div> <div id="item-5"> <ul> <li class="listitem01"><a href="" class="link"></a></li> <li class="listitem02"><a href="" class="link"></a></li> <li class="listitem03"><a href="" class="link"></a></li> </ul> </div> </body>
But that's not it! There's more! Do you also have the same markup layout structure of a container div, containing an inner container, then a header and content div? Does your header div have a logo img? No biggy!
body>div#container>div#inner>(div#header>img.logo)+div#content
transforms into
<body> <div id="container"> <div id="inner"> <div id="header"><img src="" alt="" class="logo" /></div> <div id="content"></div> </div> </div> </body>
You could literally build a whole page's basic structure with this in minutes... I'm in love.
Oh, and this one is even better. If you use "html:5", you get the complete HTML5 structure, including doctype and what not.
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
If you're looking for a total list of possibilities, I suggesting getting this 7 page cheatsheet, which also includes the Zen CSS properties.