- Smashing Magazine a consacré récemment un tutoriel sur le sujet ;
- quelques curieux s’y essayent en ce moment sur Twitter.
Suffisamment d’éléments pour donner envie d’en parler un peu ici. Il faut dire aussi que je suis plutôt convaincu par les possibilités offertes.
De quoi s’agit-il exactement ?
Zen-coding propose simplement quelques automatisations qui viennent se greffer sur votre éditeur habituel.
La fonctionnalité principale (implémentée en premier sur les éditeurs) est basée sur la syntaxe des sélecteurs CSS : idéal pour ne pas être dérouté.
Par exemple si j’entre :
div#content>p.intro+ul>li*3>a
J’obtiens immédiatement :
<div id="content">
<p class="intro"></p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
On joue donc entre les sélecteurs enfants et adjacents pour construire sa structure d’une ligne.
Les « abréviations » permettent également donc de générer un grand nombre d’éléments HTML pré-construits ainsi que des propriétés CSS.
Tout cela est très efficace, d’autant qu’une fois le code généré, il suffira de tabuler pour que l’éditeur fasse passer votre curseur sur les endroits où du contenu doit être ajouté.
Sur l’exemple précédent, c’est :
<div id="content">
<p class="intro">ici,</p>
<ul>
<li><a href="ici,">ici,</a></li>
<li><a href="ici,">ici,</a></li>
<li><a href="ici,">et ici.</a></li>
</ul>
</div>
Autre fonctionnalité intéressante : la possibilité de sélectionner de manière progressive des portions de code. Toujours en reprenant l’exemple précédent, et en supposant que je place mon curseur entre « et » et « ici. », à chaque fois que je déclenche la fonctionnalité je sélectionne :
et ici.;<a href="ici,">et ici.</a>;<li><a href="ici,">et ici.</a></li>;- etc.
Et bien sûr la sélection est faite de manière à pouvoir supprimer le bloc proprement d’un coup.
Arrive également la possibilité d’ajouter autour de la structure sélectionnée une nouvelle abréviation.
Je peux par exemple facilement produire en quelques raccourcis claviers :
<div id="content">
<p class="intro">ici,</p>
<div class="blocs ajoutes par la suite">
<div class="blocs">
<ul>
<li><a href="ici">ici,</a></li>
<li><a href="ici">ici,</a></li>
<li><a href="ici">et ici.</a></li>
</ul>
</div>
</div>
</div>
Tout cela sans devoir à aucun moment revoir mes indentations.
Pour les utilisateurs avancés, il est également possible de (re)définir finement de nouveaux modèles, en précisant syntaxes, positions du curseurs, etc.
Plongez-vous également dans les filtres de sortie qui semblent eux aussi très puissants.
Parfait ?
Pratique en tout cas. Il faudra cependant prendre le temps d’appendre les raccourcis clavier propres à votre éditeur pour en profiter pleinement. Et surtout croiser les doigts pour que votre éditeur favori supporte le plugin convenablement.
Difficile de se défaire de nos petites habitudes acquises au jour le jour pour en adopter d’autres… mais il semblerait que ça vaille le coup d’essayer.
14 commentaires ↓
Bon bin tu testes ça à fond avec Espresso, et quand je reviens tu me montres !!! 😉
Ce plugin est effectivement très efficace. Par contre, je serais assez curieuse de voir avec quels éditeurs de texte vous l’utilisez.
Hey, mais nous avions justement un article en préparation sur ce sujet, les grands esprits se rencontrent ?
On est plusieurs chez nous (= à l’agence) à tester Zen Coding, sur plusieurs éditeurs différents (Notepad++, PSPad, e-Texteditor) et avec plus ou moins de succès.
La méthodologie est sympa quand on joue le jeu à fond car il faut un certain temps d’adaptation avant de gagner en productivité.
Pour info, Zen Coding propose également une syntaxe pour les CSS.
Nicolas : et petit kouign amann et je te fais ça. 😉
D’ailleurs c’est bien vu le système de plugins d’Espresso : ce sont des sucres.
Oui, j’en parle dans le billet. Mais je ne m’en sert pas, l’auto-complétion proposée par Espresso me convient bien par défaut.
J’ai testé sur Dreamweaver au boulot, c’est très chouette. Et sur e-Texteditor à la maison et ça l’est beaucoup moins (cygwin me rappelle cordialement pourquoi j’ai choisi de ne pas être développeur)…
Bonjour Vincent,
Ma curiosité m’a aussi poussé à tester ce fameux Zen Coding. Cet outil proche des raccourcis clavier ou snippets de certains éditeurs semble pouvoir offrir un gain de temps évidant sur la conception d’une architecture HTML.
Cependant, dès les premiers essais mon avis s’est partagé. Il semble évident que le plugin n’a pas été implémenté de la même manière sur l’ensemble des éditeurs. Je ne sais pas se qu’en pense @raphael mais sous e-Texteditor l’utilisation est très minimaliste (à mon grand regret).
En tout cas l’initiative est à suivre de près.
[…] This post was mentioned on Twitter by Christophe Andrieu, FormeOlibre. FormeOlibre said: RT @htmlzengarden: découvrir Zen-coding : http://www.htmlzengarden.com/2010/06/coder_plus_rapidement_avec_zen-coding/ #integration […]
@Xavier : pour l’instant, je n’ai pas encore assez de recul sur cette méthode. Je la teste en même temps que je découvre e-texteditor dont je commence à apprécier de plus en plus les « bundles » personnalisables à souhait. Entre les deux mon coeur balance et je ne suis pas sûr qu’on puisse exploiter les deux en même temps.
Petite suggestion pour @Valentin : un petit word-wrap:break-word; sur ton élément .custom dl#comment_list dd permettrait aux url longues de ne pas dépasser de la bulle de commentaire 😉
Testé et approuvé avec Textmate, le seul hic sont les conflits potentiels avec d’autres bundles HTML.
Je teste depuis hier et je trouve ça assez terrible, pour le html comme pour le css. L’utilisation du filtre commentaire c’est tout bête, mais très pratique. Je vais continuer à apprendre les raccourcis au fur et à mesure !!
J’aime beaucoup le Zen coding avec Pspad, je lui ai attribué la combinaison « Ctrl * », c’est très pratique et j’essaie de prendre le réflexe à chaque occasion.
« Et surtout croiser les doigts pour que votre éditeur favori supporte le plugin convenablement. »
Certains éditeurs ne sont pas dans la liste proposée mais existent tout de même. Je pense notamment à Sublim Text 2, qui implémente Zen Coding par l’intermédiaire du plugin Package Control (sinon à partir de GitHub), il suffit d’activer l’option.
Laisser un commentaire