The Art Of Zen Coding
// February 21st, 2011 // 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:
- Aptana/Eclipse (crossplatform) https://github.com/sergeche/eclipse-zencoding
- TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). Bundles > Zen Coding menu item
- Coda (Mac) — external download, via TEA for Coda. Plug-ins > TEA for Coda > Zen Coding menu item
- Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. Actions > HTML menu item
- Komodo Edit/IDE (crossplatform) — external download. Tools > Zen Coding menu item
- Notepad++ (Windows). Zen Coding menu item Also a Python version of NPP plugin is available: http://sourceforge.net/projects/npppythonscript/files/
- PSPad (Windows). Scripts > Zen Coding menu item
- Dreamweaver (Windows, Mac)
- Sublime Text (Windows)
- UltraEdit (Windows)
- TopStyle (Windows)
- GEdit (crossplatform) — Franck Marcia’s plugin, Mike Crittenden’s plugin
- BBEdit/TextWrangler (Mac) — external download
- Visual Studio (Windows) — external download
- EmEditor (Windows) — external download
- Sakura Editor (Windows) — external download
- NetBeans (crossplatform) — download
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:
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!
To try out zen coding without having to install anything, you can view the online text editor here.
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.