In one of the greatest discoveries of my web development career, I stumbled upon the Zen Coding Project the other day. This is an absolutely amazing project that allows for building robust and — more importantly — valid HTML markup with a fraction of the keystrokes. What’s more, this new method of writing the code uses CSS selectors for an extremely small learning curve. Rather than another language to learn, this little shorthand script is available as a plugin or macro for almost all major IDEs and text editors (Eclipse, NetBeans and even Notepad++ to name a few).
In my case, I use Notepad++ for raw editing on my PC, so I started toying with this shorthand to build a couple Smary templates, and I am hooked. Take the following code sample written in the Zen Coding syntax:
div#navigation>ul>li#item-$.nav-link*5>a
This was my first attempt, and my goal was to set up a basic navigation template into which I could plug in my Smarty variables and be ready to fly. I thought that I would surely have to tweak the generated code, but I held my breath and hit Ctrl + E. The resulting code was quite literally exactly what I was hoping for:
<div id="navigation"> <ul> <li id="item-1" class="nav-link"><a href=""></a></li> <li id="item-2" class="nav-link"><a href=""></a></li> <li id="item-3" class="nav-link"><a href=""></a></li> <li id="item-4" class="nav-link"><a href=""></a></li> <li id="item-5" class="nav-link"><a href=""></a></li> </ul> </div>
Beautiful!
Moving from here into a fully functioning template was easy. You can see how this could save loads of time in those more repetitive and menial tasks. I tend to run into this headache most often when dealing with forms, but again, Zen Coding helped me to create a custom user form in a fraction of the time it would otherwise have taken.
I am thrilled that it is set as a macro, so I can intermix my raw HTML with my Zen Code and simply call the shortcut on those lines which contain the Zen Code I wish to translate. This is one project I can highly recommend to anyone coding HTML by hand.
Dude, my co-worker Mike developed a Zen plugin for Gedit: http://github.com/mikecrittenden/zen-coding-gedit
He’s all excited about it too, but for me, I don’t spend enough time writing new HTML snippets to make use of it. CakePHP, for instance, has helper classes for HTML (and another for Forms specifically), so I can write things like:
echo $form->input(‘firstname’);
which uses the Model logic to build a div with a label and input inside, giving it a “required” etc. if need be, and auto-filling it if it corresponds to an existing record.
But Mike has to maintain some of our legacy sites, so he swears by the Zen coding stuff