Themen:

Netzgeek

Beschleunige deinen Workflow mit dem Zen Coding Plugin

Wieviel Zeit verbringt man täglich damit HTML Code zu schreiben; die ganzen DIV Container, Attribute, Quotes, Listen usw. Abhilfe schafft hier das kostenlose Plugin Zen Coding , welches deinen Workflow ungemein beschleunigen kann. Das Plugin kann für viele verschiedene Editoren kostenlos auf der Google Code Webseite heruntergeladen werden. Mit diversen Shortcuts kann man vordefinierte HTML Elemente sowie CSS Eigeschaften um ein vielfaches schneller schreiben.

Mit Zen Coding können wir ähnlich wie mit CSS Selektoren arbeiten. Wir stylen jedoch keine Elemente, sondern generieren den Code. Möchte man als Beispiel eine Unsortierte Liste verschachtelt in DIV Containern schreiben, nutzt man bei Zen Coding folgenden Shortcut

1
div#page>div.logo+ul#navigation>li*5>a

Diese Zeile wird per Shortcut von Zen Coding automatisch als HTML Block ausgegeben.

1
2
3
4
5
6
7
8
9
10
<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Möchten wir zum Beispiel vier DIV Container erstellen mit einer vortlaufenden Klasse schreiben wir folgendes:

1
div.item$*3

Als HTML Ausgabe bekommen wir folgenden HTML Block. Das Dollar Zeichen gibt hier immer die fortlaufende Zahl an.

1
2
3
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

Das gleiche Prinzip können wir natürlich auch mit ID`s machen oder einer größeren Zahl. Als Beispiel:

1
div#i$-test.class$$$*5

Die HTML Ausgabe wäre dann:

1
2
3
4
5
<div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div>

Man kann sich also so eine Menge Zeit mit dem schreiben von HTML ersparen. Es bedarf zwar ein wenig Zeit, bis man all bzw. seine favorisierten Shortcuts auswendig kann, doch versteht man erst einmal das Prinzip, geht das schreiben von HTML Code sehr viel schneller.
Zen Coding ist derzeit für viele verschiedenen Editoren verfügbar, so zum Beispiel für Adobe`s Dreamweaver, oder den kostenlosen Windows Editor Notepad++.

Demo

  • Demo ( Benötigt Javascript )

Zen Coding

Downloads

Kommentare