Connaissez-vous Emmet, précédemment connu sous le nom de Zen Coding, un outil développé par Serge Chikuyonok en 2009 pour accélérer le développement d’applications en HTML? Emmet est une sorte de boite à outils permettant d’écrire rapidement du code HTML ou CSS via des abréviations standardisées.
Emmet prend la forme d’un plugin pour les principaux éditeurs de texte du marché (Sublime Text 2, Textmate, Eclipse, Aptana, Coda, Espresso, Chocolat, Komodo IDE, Notepad++, PSPad, les balises textarea, CodeMirror, ainsi que Brackets). Une fois le plugin installé, il suffit de saisir les abréviations Emmet pour écrire du code HTML via une simple combinaison de touches comme sur l’exemple ci-dessous :
Via Emmet, il est possible de :
- Rapidement initialiser un projet HTML,
- Ajouter des blocs (div, span, …) avec des identifiants, classes ou attributs,
- De créer des blocs imbriqués ou les un à la suite des autres,
- De créer plusieurs blocs d’un seul coup à l’aide d’un multiplicateur,
Le même genre d’abréviations est utilisé pour générer le CSS. Par exemple, il suffit d’écrire w5e pour générer la ligne width: 5em;. Astucieux, non?! En plus de tout cela, le code généré est automatiquement indenté.
Pour l’avoir testé en ligne et sur Notepad++, j’ai été bluffé par le facilitée de prise en main de l’outil et la rapidité avec laquelle on peut écrire du code HTML.
Emmet.io :
- Documentation
- Téléchargement
Source et Crédit photo : Smashing Magazine
Jeu de briques
Snake
Pacman
Bubble