Les actualités du Jeudi 17 novembre 2011 dans les métiers du web - Marmits.com - Reims
![[![Texte alternatif:!:Zen coding]!]](/xmedia/doc/full/zen-coding.gif)
Vous connaissez sans-doute déjà le plugin Zen Coding (sinon courez vite admirer cette vidéo assez ancienne mais plutôt bluffante).
Zen Coding est une extension pour éditeurs HTML et autres logiciels de développement (IDE) permettant d'automatiser et d'accélérer la rédaction de code à l'aide de syntaxes courtes (snippets) et de raccourcis-clavier.
Je me suis récemment amusé à compiler un ensemble de raccourcis (snippets) personnalisés que j’applique à mes projets et que je commence à intégrer en interne chez Alsacreations.fr
Récupérez et utilisez le fichier Zen Coding modifié
J’ai pensé que ces aménagements pourraient éventuellement servir à d’autres. Du coup, je vous partage volontiers le fichier, faites-en bon usage.
- Récupérez et installez Zen Coding
- Récupérez le dossier “Zen-Coding.zip” sur mon site perso pour en extraire les fichiers Zen Coding.js et Readme.txt
-
Copier le fichier Zen Coding.js au sein du dossier “\plugins\NppScripting\includes” de votre éditeur HTML/CSS en écrasant le fichier original (après avoir fait une copie de sauvegarde !).
Par exemple, pour Notepad++, le chemin sur Windows7 est C:\Program Files (x86)\Notepad++\plugins\NppScripting\includes
Rappel : sur Zen Coding, les Snippets fonctionnent avec les mots-clés (ci-dessous) + la combinaison de touches Ctrl + e
Modifications apportées
Beaucoup de mots-clés sont définis de base, voici uniquement ceux que j’ai modifiés personnellement (ajoutés) :
Structure
- doctype -> un doctype HTML5 + gabarit minimal
- doctype2 -> un doctype HTML5 avec classes conditionnelles sur html (combinaison de lte IE 7 / IE 8 / gt IE 8) + gabarit minimal
- html5 -> aussi un doctype HTML5 + gabarit minimal
- xhtml -> un doctype XHTML 1.0 strict + gabarit minimal
- css -> élément link vers feuille styles.css
Contenu
- lorem -> texte de remplissage en texte schnapsum
- loremp -> 3 paragraphes en schnapsum
- list -> liste ul/li de 5 éléments
- nav -> élément nav contenant une liste ul/li/a de 5 éléments
- content -> contenu type entier (titres, liste, paragraphes) en schnapsum
Commentaires conditionnels
-
ie -> commentaire conditionnel
if IE -
ie6 -> commentaire conditionnel
if IE lte IE 6 -
ie7 -> commentaire conditionnel
if IE lte IE 7 -
noie -> commentaire conditionnel
if not IE
CSS
- reset -> styles CSS de base (reset.css personnel)
- bg -> background:#FFF url(|) 0 0 no-repeat;
- br -> border-radius (avec préfixes pour navigateurs en ayant besoin)
- bs -> box-shadow (avec préfixes pour navigateurs en ayant besoin)
-
clearfix -> crée une classe .clearfix empêchant les débordements de flottants (à l'aide de
content)
Un exemple pour la route
Pour illustrer l'efficacité de ces snippets, voici comment je procède pour créer un gabarit HTML à partir d'une page vide sous Notepad++
Pour commencer, j'écris simplement "doctype" + Ctrl + e pour générer le code suivant :
Puis, si je désire ajouter une liste, les touches seront "list" + Ctrl + e pour générer ceci :
- Salade
- Tomate
- Oignons
- Choucroute
- Picon bière
Enfin, si je souhaite du faux texte de remplissage encadré par des paragraphes, la manipulation sera "loremp" + Ctrl + e :
Lorem Elsass ipsum réchime amet non Choucroute knack tchao bissame hopla. Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ?
Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un Picon sur le comptoir.
Allez tchao bissame !
Pratique, n'est-ce pas ?
N’hésitez pas à me faire vos retours si vous utilisez ces modifications, et me proposer les vôtres si vous avez vous aussi bidouillé votre fichier.