Zen Coding: high speed HTML en CSS

Het intypen van codes en formules bij het programmeren van een pagina in HTML neemt heel wat tijd in beslag. Gelukkig kan het sneller en gemakkelijker met behulp van Zen Coding. Zen Coding stelt je in staat razendsnel in HTML en CSS te coderen. Wat Zen Coding tot een bijzonder handige tool maakt is dat het meer kan dan automatisch aanvullen, zoals bijvoorbeeld Dreamweaver doet.

Wat is Zen Coding nu precies en wat kun je ermee? Zen Coding is een plugin die voor verschillende editors, waaronder Coda en Textmate, verkrijbaar is. Zen Coding maakt het schrijven van structuren, menu’s en CSS properties een stuk gemakkelijker. Je schrijft CCS selectors in een HTML document met behulp van een keyboard shortcut en speciale syntax. De CSS selectors worden door Zen Coding direct omgezet in de beoogde HTML structuur.

Om Zen Coding te kunnen gebruiken moet je wel wat shortcodes leren, maar mogelijk ken je deze al van CSS. Wanneer je eenmaal bekend bent met de css selectors is Zen Coding zeker een tijdbesparende tool. Het mooie aan deze plugin is dat het compatible is met veel editors, waaronder Text Mate Aptana, Coda, NetBeans en Espresso.

Hoe ziet dit er in de praktijk uit? Dit is een voorbeeld voor een menu. Het menu ziet er als volgt uit:

Home
Our products
About us
Contact

De Zen Coding plugin verandert dit dan in:

<div id="header">
   <ul id="navigation">
      <li class="item1"><a href=""><span>Home</span></a></li>
      <li class="item2"><a href=""><span>Our products</span></a></li>
      <li class="item3"><a href=""><span>About us</span></a></li>
      <li class="item4"><a href=""><span>Contact</span></a></li>
   </ul>
</div>

Een ander voorbeeld:

ul#name>li.item

Dit wordt door Zen Coding omgezet in:

<ul id="name">
    <li class="item"></li>
</ul>

Dit is een handig filmpje wanneer je wil weten hoe het precies werkt:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.