Zen Coding : Améliorez votre productivité

Je me suis récemment intéressé à AngularJS, un framework JavaScript créé par Google. J’ai suivi des vidéos d’introduction/présentation de ce framework qui a l’air très prometteur. Dans ces vidéos, j’ai pu découvrir une technique permettant de coder très rapidement en HTML. Après quelques recherches, j’ai découvert qu’il s’agit de ce qu’on appelle le Zen Coding.

Présentation

Il s’agit de décrire les éléments HTML avec une syntaxe proche du CSS qui permet de générer le code HTML.

Ainsi

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

…sera transformé en :

<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>

Il s’intègre dans la plupart des IDE sous la forme d’un plugin ou est intégré directement. Une extension pour Visual Studio est disponible dans la galerie des extensions par exemple.

Syntaxe

Attribut id et classe

div#page.section.main

devient

<div id="page" class="section main"> </div>

A noter que si le type d’élément n’est pas précisé avec un « # » ou « . », l’élément généré sera de type div. On aurait obtenu le même résultat avec

#page.section.main

Autres attributs

Il est possible de générer les autres attributs en les spécifiant entre crochets.

td[colspan=2]

devient

<td colspan="2"></td>

Multiplication d’éléments

Il est possible de multiplier la génération d’éléments via *

li*5

devient

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

Numérotation avec $

li.item$*3 générera 3 tags <li>, remplaçant $ par le l’index du tag.

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

Nœuds Enfants et Frères

Il est possible de générer une arborescence complète via les opérateurs suivants :

  • > permet d’indiquer que l’élément suivant est un enfant
  • + permet d’indiquer que l’élément suivant est un frère
  • ( ) permet d’indiquer un groupe

Ainsi

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

devient

<div id="page">
	<div id="header">
		<ul id="nav">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="page">
		<h1><span></span></h1>
		<p></p>
		<p></p>
	</div>
	<div id="footer"></div>
</div>

Support du texte (depuis la version 0.7)

Il est maintenant possible de renseigner du texte entre { }

p>{Click }+a{here}+{ to continue}.

devient

<p>Click 
	<a href="">here</a> to continue
</p>

Ressource

Pour en savoir plus, je vous invite à consulter les ressources suivantes :

Conclusion

Cette technique permet de gagner en rapidité lors de l’écriture de code HTML (compatible également XML et XSL). L’essayer c’est l’adopter. De plus il existe des extensions pour la plupart des éditeurs. Pourquoi s’en priver !!

Une réflexion au sujet de « Zen Coding : Améliorez votre productivité »

  1. Hello,

    Autant les codes du type ‘ li*5 ‘ je les trouve intéressant
    autant les codes du type div#page.section.main je les trouve peu intuitif surtout avec l’intellinse que nous propose certains logiciels….

    Donc a mon avis il faut bien reflechir avant d’apprendre a code d’une nouvelle facon puisque dans les faits ca revient a ca.

    Uiop en mode optimisation

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *