Shortcuts sind für jeden Programmierer, das Salz in der Suppe. Sie machen das Programmieren effektiver und motivieren dazu, da es viel Freude macht schnell und einfach zu arbeiten. PhpStorm Zen Coding ist schon installiert und direkt einsatzbereit. Die einfachste Art es zu testen ist in einer HTML-Datei „h1“ zu schreiben und die Tab-Taste zu drücken. Jetzt erzeugt PhpStorm „<h1></h1>“ und setzt den Curser dazwischen. Im täglichen Anwendungsfall brauche ich gar nicht lange verschachtelte Zen-Coding Snippets, sondern nur einzelne Tags. Aber nun erstmal zum Thema.
PhpStorm Zen Coding
PhpStorm Zen Coding
Zen Coding ist eine Art Marko Sprache, damit man schnell und effektiv HTML, CSS, XML, XLS oder andere strukturierte Sprachen editieren kann. Die offizielle Seite zen-coding- Set of Plugins zeigt hierbei ein Beispiel und auch eine Liste von Webdevelopment IDEs. Man sieht hier, das praktisch alle die praktische Art Code zu schreiben implementiert haben, oder es einfach über ein Plugin nachgeladen werden kann. Kommen wir nun zu dem Beispiel Code.
PhpStorm Zen Coding Beispiel Code
|
1 |
div#page>div.logo+ul#navigation>li*5>a |
hat man den Curser direkt hinter dem a-Tag stehen und drückt die Tabulator Taste wird folgender HTML-Code erzeugt.
|
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> |
Das ist ein sehr komplexes Beispiel und findet sich selten in der Praxis im praktischen Anwendungsbereich. Generell sind solch ausformulierte Listen auch eher selten und finden sich höchstens im Bereich des HTML Prototyping. Genau hier ist es aber schnell ein Werkzeug, welches man nicht mehr aus den Händen gibt. In dem oben genannten PhpStorm Zen Coding Beispiel sind verschiedene Code Snippets angewendet. Grundsätzlich startet jeder Part mit einem HTML Tag.
|
1 |
div#page |
Dieses kleine Zen-Coding Snippet erzeugt
|
1 |
<div id="page"></div> |
Die # wird also als Pendent zum CSS-Selector eine id erzeugt. Dasselbe gilt in diesem Zusammenhang natürlich auch für eine Klasse und kann an der Stelle auch kombiniert werden.
|
1 |
div#page.l-mainpage |
erzeugt also folegenden HTML-Code
|
1 |
<div id="page" class="l-mainpage"></div> |
Das Beispiel ist jetzt mal eine Anlehnung an Smacss. Da ich im täglichen Anwendungsgebiet eher in Bootstrap und Foundation zu Hause bin vielleicht mal ein hilfreicher Tip für die CSS Architektur.
Das „>“ Zeichen verschachtelt die HTML Tags und das „+“ Zeichen setzt sie hintereinander. Dazu kommt in dem Beispiel noch das „*“ als Multiplikator. Tatsächlich ist in täglichen Anwendungsfall aber eher ein einzelnes Tag mit ID und Klasse im Gebrauch. Das ist jedoch dann tatsächlich ein unverzichtbares Werkzeug und wichtiges Tool für die Produktivität beim Programmieren.
