Posts Tagged ‘zen’

The Art Of Zen Coding

// February 21st, 2011 // No Comments » // Programming

Creating the markup for a page has always been repetitive endeavour. Copy and paste was your best friend and if your text editing program had intellisense available, it was usually not helpful. That’s why the Zen Coding Plugin was created.

Zen coding allows you to write shorthand code and with a single keystroke be able to create the markup for an entire page.

Getting Started With Zen Coding

To get started, go to the Zen Coding Plugin home page and download the plugin for your IDE/Text Editor. Personally, I use Notepad++ for all HTML/CSS based projects but there is a plugin for many other IDEs. Such as:

A more up-to-date list can be found on the plugins home page.

After installing the plugin, you can begin using it immediately.  Just open up your text editor of preference and type in the following:

div#header>ul#nav>li*5

Then, press the expansion hotkey (for Notepad++ it is Ctrl + Alt + Enter) or click on Expand Abbreviation under your Zen Coding menu. This code will result in:

<div id="header">
	<ul id="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

This code would require several mouse clicks and copy+pastes before, now it is just a couple of key combinations and you’ve build an entire page!

Online Demo

To try out zen coding without having to install anything, you can view the online text editor here.

Reach Enlightenment

All in all, I think this is a great tool that every web developer should have. Not just because it saves time and energy while coding but if you learn all the short codes by heart you can drastically increase your productivity while creating HTML. If not for that, then maybe just for the fact that it will take your code to a higher level much like that of buddhist monk after several hours of meditation.