Zen Coding

admin — Tue, 11 May 2010 20:00:33 +0000

If you write HTML for a living, and you don't know Zen Coding yet, you are missing out big time.

Zen Coding is build as a plugin for commonly used editors (including Notepad++, yey!) that allows you to write HTML, CSS and XML code 20 time faster. So writing:

1	html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

with a keystroke converts to:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	<div id="header">
		<div id="logo"></div>
		<ul id="nav">
			<li class="item-1"><a href=""></a></li>
			<li class="item-2"><a href=""></a></li>
			<li class="item-3"><a href=""></a></li>
			<li class="item-4"><a href=""></a></li>
			<li class="item-5"><a href=""></a></li>
		</ul>
	</div>
</body>
</html>

Don't get this wrong, like the man said, "The purpose of ZC is not to write a full HTML page with a single line, but to help you write smaller code chunks.". Here is a video introducing the system in further detail.

It is easier than it looks actually, and looking a bit over the syntax will make total sense. Printing the cheat sheet also helps

Also worth noticing that in Notepad++ (the only one I tried) the plugin added few more functions that help with the coding that I'm sure you'll enjoy (Jumping to the edit points is a God given). This project inspired another neat tool for PHP developers to output HTML using this syntax from code. You can find more here

I have only touched briefly on what it can do but I will certainly not author another single HTML document without the benefit of Zen Coding.

JavaScript Object-Oriented Programming (OOP) – jClass

ADM Blog » zen

Zen Coding