Ja, richtig gelesen! “Zen Coding”. Bevor Ihr Euch fragt, was diese Strömung des Buddhismus mit der Webentwicklung in Visual Studio zu tun hat, möchte ich den Zen-Meister “Suzuki Shunryu” zitieren:
„Zen ist nicht etwas Aufregendes, sondern Konzentration auf deine alltäglichen Verrichtungen.“
Um diese “alltäglichen” Verrichtungen eines Webentwicklers geht es jetzt. In den kultigen Web Essentials für Visual Studio gibt es das Feature Zen Coding, welches zum Ziel hat schnelleres HTML zu schreiben mit einer CSS Selector ähnlichen Syntax.
Wie oft haben wir z.B. schon “Lorem Ipsum” Texte kopiert und eingesetzt? Genau! Zu oft.
Nun die TAB – Taste und voila
1: Lorem ipsum dolor sit amet, consectetur adipiscing elit
Hier eine kleine Auswahl der Syntaxauflistung (jeweils immer mit TAB zur Ausführung):
- # (Raute) erstellt ein ID – Attribut
(z.B. div#container => <div id="container"></div>)
- . (der Punkt) erstellt ein class Attribut
(z.B. div.test => <div class="test"></div>)
-
[] erstellet ein benutzerdefiniertes Attribut(z.B. input[type="text" placeholder="Bitte Namen eingeben"] =>
<input type="text" value="" placeholder="Bitte Namen eingeben" />)
-
> erstellt ein Kind-Element (z.B. table>tr>td =>
<table>
<tr>
<td></td>
</tr>
</table>
- * multipliziert ein Element
(z.B. ul>li*5 =>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
- $$ erstellt Zahlen mit führender 0 (inkrementell)
(z.B. ul>li*3>a.item$$*1 =>
<ul>
<li>
<a href="" class="item01"></a>
</li>
<li>
<a href="" class="item02"></a>
</li>
<li>
<a href="" class="item03"></a>
</li>
</ul>
- {} erstellt Text innerhalb eines Elements
(z.B. ul>li*3>a{Punkt$$} =>
<ul>
<li>
<a href="">Punkt01</a>
</li>
<li>
<a href="">Punkt02</a>
</li>
<li>
<a href="">Punkt03</a>
</li>
</ul>
Ein klassisches Beispiel ist eine Navigationsstruktur in HTML5. Man nehme ein nav –Element mit der id “navigation” und einer ungeordneten Liste, welche wiederrum 5 Listenelemente beinhaltet, die 5 Links haben mit der Klasse “links” und einem hochzählenden Text
nav#navigation>ul>li*5>a.links{Link$$} =>
<nav id="navigation">
<ul>
<li>
<a href="" class="links">Link01</a>
</li>
<li>
<a href="" class="links">Link02</a>
</li>
<li>
<a href="" class="links">Link03</a>
</li>
<li>
<a href="" class="links">Link04</a>
</li>
<li>
<a href="" class="links">Link05</a>
</li>
</ul>
</nav>
Bei dem ZenCoding wäre natürlich zu beachten, dass eine zu komplexe Beschreibungssyntax den Sinn und das eigentliche Ziel des Zen verfehlt. Happy meditation…