Inhalt der aktuellen Seite

Schneller coden mit Zen Coding

Seit ein paar Monaten macht sich "Zen Coding" bei den Frontend-Webentwicklern breit. Es handelt sich dabei um ein Editor-Plugin für verschiedene Editoren (Textmate, UltraEdit, Aptana, ...), das "Abkürzungen" in ausformulierten HTML-Code umsetzt.

Konkret heißt das, ich tippe in meinem Editor
div#content>h1+p.vorlauf+ul>li*3>a

anschließend folgt eine Tastenkombination, die Zen Coding zum unwandeln veranlasst (bei Textmate beispielsweise Apfel+E) und ich erhalte den folgenden Quelltext geschrieben:
<div id="content"> <h1> <p class="vorlauf"></p> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>
Das ist enorm hilfreich beim Aufbau einer Website. Auch gibt es weitere kleinere Helferlein, beispielsweise erstellt mir
html:xs

das komplette HTML-Grundgerüst mit Doctype etc. einer XHTML-konformen Seite in der strict-Variante.
Die Selektoren dabei ergeben sich ganz von alleine, denn man kennt sie bereits von CSS.

Für einen Überblick über alle Code-Abkürzungen hilft am schnellsten ein CheatSheet weiter.