Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

ZenCoding - Schneller ans Ziel kommen

ZenCoding - Schneller ans Ziel kommen

Viele Texteditoren und Entwicklungsumgebungen erleichtern und beschleunigen durch Hilfestellungen die Arbeit. Hinter unserem letzten Türchen stellt Jens Grochtdreis einen Ansatz vor, der in vielen unterschiedlichen Editoren die Arbeit enorm beschleunigen kann.

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:

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

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

  1. <ul id="eineID" class="eineKlasse">
  2.   <li id="test1"></li>
  3.   <li id="test2"></li>
  4.   <li id="test3"></li>
  5.   <li id="test4"></li>
  6.   <li id="test5"></li>
  7. </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:

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

Das Ergebnis sieht dann so aus:

  1. <div class="sidebox">
  2.   <h3></h3>
  3.   <p></p>
  4.   <ul>
  5.     <li><a href="" class="external"></a></li>
  6.     <li><a href="" class="external"></a></li>
  7.     <li><a href="" class="external"></a></li>
  8.     <li><a href="" class="external"></a></li>
  9.     <li><a href="" class="external"></a></li>
  10.   </ul>
  11. </div>

Neben HTML kann ZenCoding 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!

Kommentare

Markus Thömmes
am 24.12.2009 - 13:52

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.

Permanenter Link

Holger
am 24.12.2009 - 14:38

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!

Permanenter Link

Matthias Mees
am 24.12.2009 - 20:25

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

Permanenter Link
Michel Balzer

Michel Balzer (Webkraut)
am 25.12.2009 - 00:58

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

Permanenter Link

Andre Krug
am 05.01.2010 - 16:17

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

Permanenter Link

Die Kommentare sind geschlossen.