Si vous faites un peu (ou beaucoup) d’intégration et de développement web, et que le duo HTML CSS n’a plus de secret pour vous, vous utilisez déjà certainement un éditeur de code avec auto-complétion, qui suggère, corrige la syntaxe et ferme les bonnes balises à votre place, entre autres.

codehtml Zen Coding, un éditeur de code HTML CSS qui crée les balises pour vous

Je ne sais pas si vous connaissez Zen Coding, mais cet éditeur sous stéroïdes mérite que l’on y jette un coup d’Å“il : mieux qu’un éditeur classique, il permet de déployer très rapidement des lignes de code HTML à partir d’abréviations inspirées des sélecteurs CSS.

Ainsi avec cette simple abréviation :

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

vous obtiendrez le bloc ci-dessous :

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

Cet exemple vous laisse entrevoir la puissance de la chose, et son intérêt en termes de productivité. Le point négatif étant que vous aurez à apprendre une nouvelle syntaxe avant d’utiliser Zen Code au mieux de ses possibilités, soit un temps à investir qui ne sera pas toujours facile à trouver dans une journée déjà bien chargée d’intégrateur HTML.

Pour vous accompagner dans cet apprentissage (qui ne devrait cependant pas être très long), Smashing Magazine avait publié il y a quelque temps un didacticiel complet comme eux seuls savent en faire qui devrait vous aider à vite intégrer la syntaxe Zen Coding.

Zen Code est disponible sous forme d’extension pour les principaux éditeurs de code, y compris me NotePad Windows ou encore Dreamweaver.

Vous allez coder avec un turbo dans le clavier.