Webkrauts: Für mehr Qualität im Web.

Artikel

ZenCoding – Schneller ans Ziel kommen

Die wesentliche Aufgabe eines Editors und einer Entwicklungsumgebung (IDE) ist es, dem Entwickler Arbeit abzunehmen und Hilfestellung zu leisten. Das kann eine programminterne Validierung sein, das können programminterne Codeschnipsel sein. Textmate auf dem Mac ist dafür berühmt, dass es über Kurzschreibweisen in Zusammenarbeit mit der Tabulatortaste alle HTML-Elemente oder CSS-Eigenschaften und noch viel mehr zugänglich macht.

Dieses Grundprinzip macht der Russe Sergey Chikuyonok für andere Editoren nutzbar. ZenCoding nennt sich die kleine Skriptsammlung, die er über GoogleCode anbietet und die derzeit von Aptana, Coda, Espresso, editArea (online Editor), Visual Studio, TextMate, E-editor, TopStyle, Sublime, GEdit, Dreamweaver, UltraEdit, Web IDE und NetBeans in unterschiedlicher Intensität unterstützt werden. ZenCoding ist eine Mischung aus Snippets und Shortcuts, die das Coden nicht revolutionieren, aber schneller und bequemer machen.

Auf einen »Schlüssel« folgt eine Tastenkombination, die abhängig von Programm und Betriebssystem entweder Cmd+E oder Strg+E ist, aber auch individuell eingestellt werden kann. Für das einfache Erzeugen eines Absatzes ist ZenCoding zwar geeignet, aber nicht nötig. Wie sieht es aber aus, wenn ich eine Liste mit fünf Listenelementen erstellen will, die alle eine fortlaufende ID haben müssen (warum auch immer?). Für ZenCoding die gefundene Aufgabe. Die Schreibweise erinnert sehr an CSS:

ul#eineID.eineKlasse>li#test$*5

Nun einmal Cmd+E bzw. Strg+E drücken und es entsteht dieses Konstrukt:

<ul id="eineID" class="eineKlasse">
<li id="test1"></li>
<li id="test2"></li>
<li id="test3"></li>
<li id="test4"></li>
<li id="test5"></li>
</ul>

Mit html:xt wird ein grobes Template mit XHTML1-Transitional-Doctype erzeugt. Für andere Doctypes gibt es ähnliche Kürzel. Sehr hilfreich finde ich, neben der schnellen Erzeugung von Elementen mit Klassen und IDs, die Erstellung verschachtelter Konstrukte. Wenn ich mir eine Containerbox mit Headline und Absatz erzeugen möchte, kann ich folgendes schnell schreiben:

div.sidebox>h3+p+ul>li*5>a.external

Das Ergebnis sieht dann so aus:

<div class="sidebox">
<h3></h3>
<p></p>
<ul>
<li><a href="" class="external"></a></li>
<li><a href="" class="external"></a></li>
<li><a href="" class="external"></a></li>
<li><a href="" class="external"></a></li>
<li><a href="" class="external"></a></li>
</ul>
</div>

Neben HTML kann ZenCodíng auch CSS. So gibt es für alle Eigenschaften Abkürzungen. Meist sind diese aber selber so kurz, daß sich ein Auswendiglernen der Abkürzungen kaum lohnt. Trotzdem ist es nett, wenn aus einem bdt ein border-top:; wird. So richtig hilfreich sind aber Perlen wie op:ie, aus dem dann filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); wird. Das beschleunigt die Codearbeit ungemein. Vorher sollte man sich aber intensiv mit der Materie beschäftigen und viel austesten. Durch die konstante Arbeit damit kommt man schnell auf den Geschmack.

Wer es einmal außerhalb seines Editors testen möchte, kann dies online tun. Das Projekt selber liegt bei Google Code. Viele dortige Erklärungen sind auf russisch. Eine prima Gelegenheit, um Google Translate auszutesten! Bei delicious habe ich ein paar empfehlenswerte Artikel zum Thema gesammelt, darunter ist auch der umfangreiche Überblick des Smashing Magazines.

Happy ZenCoding!

Über den Autor

Jens Grochtdreis ist freier Webentwickler und Berater. Er liebt leidenschaftlich das Medium Internet. Jens gründete die Webkrauts, um für ein besseres Medium zu streiten. Wenn er nicht gerade bloggt, twittert, surft oder codet, dann entspannt er sich bei Comics, Krimis, hört Blues oder kocht.

Info:

ZenCoding – Schneller ans Ziel kommen ist Beitrag Nr. 746

Autor:

Jens Grochtdreis am 24. Dezember 2009 um 07:00

Kategorie:

Adventskalender 2009

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   Ich kenne Zen Coding schon etwas länger und bin sehr begeistert von der Idee und auch der Umsetzung.
   Leider gibt es für gedit nur ein Plugin das die Shortcuts umsetzt, Match Pair usw. gibts dort leider noch nicht.

   Kommentar von Markus Thömmes - 24. Dezember 2009 um 13:52

2. 2.
   

   ja das ist doch mal ein Weihnachtsgeschenk – hat man bis Sylvester was vernünftiges zum ausprobieren. Ganz ehrlich habe schon immer mal über zencoding gehört aber nie den richtigen Zeitpunkt gefunden, mich intensiver damit auseinander zu setzen. Deine Ausführungen machen mir aber gerade den nötigen Appetit
   Danke und Frohes Fest!

   Kommentar von Holger - 24. Dezember 2009 um 14:38

3. 3.
   

   Gibt es übrigens — wenngleich noch etwas rudimentär — auch für Emacs.

   Kommentar von Matthias Mees - 24. Dezember 2009 um 20:25

4. 4.
   

   Oh fein, das schaut gut aus, das muss ich ausprobieren. Gut, dass ich Urlaub hab.

   Kommentar von Michel Balzer - 25. Dezember 2009 um 00:58

5. 5.
   

   Super, ich hatte davon noch nichts gehört und wie man sieht den Weihnachtskalender eigentlich auch verpennt Aber dein Eintrag ist nicht nur was für die Weihnachtszeit

   Kommentar von Andre Krug - 5. Januar 2010 um 16:17

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.