Tuesday, December 14, 2010

Zen Coding

For those looking to get more with less keystrokes, zencoding plugin is a must. You can write lightening fast HTML using its powerful abbreviation engine.

From its project site -

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) 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.
To appreciate its power you need to play with it. Its author Sergey Chikuyonok has very good article on smashing magazine - a speedy way of writing HTML code. Watch the 6 minute video and you will be a convert.

Here is an example of its power. The following expression

html:4t>div#header+div#main.content
expands to the following snippet -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title></title>
 </head>
 <body>
  <div id="header"></div><div id="main" class="content"></div>
 </body>
 </html>

Or the following example

ul>li#item-$*6
which expands to
<ul>
 <li id="item-1"></li>
 <li id="item-2"></li>
 <li id="item-3"></li>
 <li id="item-4"></li>
 <li id="item-5"></li>
 <li id="item-6"></li>
</ul>

Here is a link to the zencoding cheatsheet. For Resharper fans it is available as ZenCoding Powertoy and there is also a Visual Studio PlugIn


No comments: