Une tonne de discussions a récemment été donnée aux pré-processeurs. Ces outils extrêmement utiles rendent le codage plus facile, plus rapide et plus facile à gérer, mais ils ne sont certainement pas destinés à tout le monde. Que vous ayez pris le train du préprocesseur ou non, vous devriez donner un nouveau look à un ancien favori qui vous aide à réduire considérablement votre temps de codage sans réinventer votre flux de travail avec les compilateurs et autres complications: le codage Zen.
Avec Zen Coding, vous pouvez taper un peu et sortir beaucoup, comme avec un préprocesseur tel que Jade ou Haml, seulement il se développe instantanément dans le HTML vanille que vous aimez. Pour ceux qui sont nouveaux dans le concept, je vais vous expliquer le fonctionnement de Zen Coding et vous montrer quelques-uns de mes trucs préférés, puis je terminerai avec un bref tutoriel sur la mise en place de Zen Coding dans Sublime Text 2.
Codage Zen vs pré-processeurs
Le codage Zen existe depuis un certain nombre d'années, donc plusieurs de ceux qui lisent ceci vont sûrement penser que c'est une école trop ancienne pour mériter une discussion en 2012, mais je suis prêt à parier que de nombreux nouveaux codeurs ne l'ont jamais donnée. un coup de feu.
Je commencerai par dire que le codage Zen n'est pas: il ne s'agit pas d'un préprocesseur dans la même veine que LESS, Sass, Stylus, Jade, Haml, etc. Il y a des similitudes cependant. Comme tous ces éléments, Zen Coding a une syntaxe unique qui vise à simplifier le processus de codage HTML et CSS.
Cependant, contrairement à ces autres outils, Zen Coding n’ajoute aucune fonctionnalité spéciale, telle que des variables ou des mixins, et ne nécessite aucun fichier supplémentaire devant être exécuté via un compilateur. Zen Coding génère immédiatement le code HTML et CSS, personne n’a aucun moyen de savoir que vous l’avez utilisé en consultant votre code.
Peut-être un parallèle plus proche est TextExpander, une application qui "se développe". brefs extraits de texte en plus gros. Fondamentalement, Zen Coding est un ensemble géant de macros d’expansion de texte prédéfinies spécialement conçues pour les codeurs HTML et CSS.
Comment ça marche?
Assez d'explications, passons à l'exploration de la syntaxe qui sous-tend le codage Zen. Si vous êtes familier avec HTML, CSS et le concept du DOM, je suis sûr que vous le comprendrez immédiatement.
Commençons par le côté HTML car je pense que c’est là que réside la quasi-totalité des avantages réels. Comme premier exemple de base, supposons que nous voulions créer une div simple avec un ID de conteneur, voici comment procéder:
Si vous connaissez bien Haml, vous verrez immédiatement que certaines des mêmes conventions sont utilisées ici. J'ai d'abord saisi le nom de l'élément que je voulais, dans ce cas, un div, puis j'ai utilisé la syntaxe de type CSS consistant à insérer un hashtag pour indiquer que je fais référence à un ID. Enfin, j'ai suivi le hashtag avec le texte que je voulais assigner à l'ID: "conteneur".
Comme vous pouvez le constater, j'ai presque failli couper en deux le nombre de saisies requis pour cet extrait de code particulier. Je n'ai pas eu à me préoccuper des parenthèses ou des guillemets de départ et de fermeture, mais la structure a été réduite au minimum.
Nous pouvons utiliser cette connaissance comme point de départ pour d’autres extraits similaires. Par exemple, disons que je veux créer un paragraphe avec une classe donnée. La syntaxe est à peu près la même, seulement j'utilise un point pour indiquer une classe (encore une fois, comme CSS).
Enchaînement, frères et sœurs et enfants
Enregistrer une poignée de caractères est pittoresque, mais que se passe-t-il si vous êtes un développeur sérieux qui peut taper tout cela dans votre sommeil en l'espace d'une seconde? Est-ce que ce matériel de codage zen sera vraiment utile?
La réponse est un oui retentissant.? En fait, plus la structure de votre code devient complexe, plus le codage Zen vous sera utile! Le vrai pouvoir réside ici dans la capacité d’enchaîner différents éléments.
Comme vous pouvez le constater, il est facile de créer des enfants et des frères et soeurs avec la syntaxe Zen Coding. En restant avec le thème CSS, les frères et sœurs sont connectés avec le? +? Le symbole et les enfants utilisent le symbole?> var13 ->? symbole.
Cela ouvre énormément de temps et d'efforts pour économiser le potentiel. Jouez avec cela pendant quelques minutes et votre cerveau commencera rapidement à penser à la structure des documents HTML de cette façon. Avant de vous en rendre compte, vous allez taper de longues séquences avancées qui se développent en gros morceaux de code.
CSS zen
Le codage Zen ne concerne pas que le HTML, il vous aide également à coder CSS. Pour être honnête, je n'utilise pas trop cet aspect du codage Zen, tout simplement parce que la plupart des bons rédacteurs de texte ont une telle fonction de saisie automatique CSS que je passe très peu de temps à saisir manuellement les propriétés (de toute façon, la saisie automatique CSS tend également à se faire avec et déroger au codage Zen). Le même argument pourrait être dit à propos du HTML, mais ici, je trouve que le codage Zen est beaucoup plus rapide que la route à saisie automatique.
Malgré tout, c’est tout mon opinion personnelle. Vous constaterez peut-être que vous aimez absolument le côté CSS de Zen Coding. Voici un exemple de la façon dont cela fonctionne:
Comme vous pouvez le constater, le côté CSS implique généralement que vous saisissiez les initiales de la propriété, suivies de deux points et des initiales de la valeur à affecter à la propriété. Comme vous pouvez le deviner, de nombreuses propriétés CSS sont prises en charge. La mémorisation est donc beaucoup plus délicate qu'avec le côté HTML. Assurez-vous de vérifier les feuilles de triche.
Mes macros HTML préférées
La feuille de triche Zen Coding peut être assez déconcertante, car elle contient tellement de choses. Par conséquent, pour vous aider à rester accroché dès le début, voici certaines de mes macros préférées.
HTML5 Starter
Vous voulez commencer un nouveau document HTML avec une table rase? Tapez simplement? Html: 5? et vous aurez un bon départ.
Stylesheet Include
Une fois que vous avez démarré ce nouveau fichier HTML, vous aurez envie de mélanger une feuille de style. Heureusement, vous pouvez le faire en un tournemain.
JavaScript Inclure
Un de plus pour la partie principale de votre document. Une fois la feuille de style élaborée, il est temps de lancer le code JavaScript.
Tags d'ancrage
Une de mes premières questions concernant le codage Zen était: "Comment fonctionnent les liens?" Haml est en fait assez maladroit quand il s’agit de tout type d’éléments et d’attributs en ligne, alors je craignais que ce soit la même chose.
Cependant, au lieu de proposer un schéma compliqué pour l'insertion du texte du lien et de l'URL, vous tapez simplement? A? et la structure de base de l'ancre est créée et prête à être complétée. Cela pourrait probablement être un peu mieux, mais au moins, c'est facile à retenir!
Multiplier les éléments
Le codage Zen a un truc de multiplicateur pratique qui facilite la création d’un certain nombre d’éléments spécifiques. Encore une fois, le processus est très intuitif, utilisez simplement le? *? symbole et le numéro de l'élément que vous souhaitez créer.
Numéro d'incrément
Une autre astuce vraiment intéressante que vous pouvez utiliser lors de la multiplication d’éléments consiste à inclure un nombre croissant dans la classe ou la valeur de l’ID. Pour ce faire, vous implémentez le? $? symbole.
Comment puis-je faire ce travail?
Le codage Zen est pris en charge dans des tonnes d'éditeurs de texte différents et est parfois même intégré, comme c'est le cas avec Espresso. Assurez-vous de consulter la page de projet Google Codage Zen pour télécharger les plugins de votre éditeur.
Comment installer le codage Zen sur Sublime Text 2
J'ai certainement été piqué par le bogue Sublime Text. J'aime tout simplement cet éditeur de texte et je ne peux pas en avoir assez de son extensibilité et de sa flexibilité. Un moyen simple et rapide d'améliorer encore Sublime Text 2 consiste à prendre en charge le codage Zen.
Pour ce faire, vous devez vous procurer le téléchargement gratuit de Sublime Package Control de Will Bond. C'est un gestionnaire de paquets génial qui facilite la recherche et l'installation de plug-ins de texte Sublime.
Une fois que vous avez cela installé, appuyez sur Commande + Maj + P (Commande = Contrôle pour les utilisateurs de PC) pour afficher la palette de commandes et tapez le mot "installer". Vous devriez voir un élément qui dit "Package Control: Install Package?", Appuyez sur Entrée pour cette option.
À partir de là, tapez? Zen Coding? et vous devriez voir le paquet. Appuyez simplement sur Entrée à nouveau et le paquet sera installé (redémarrez s'il ne prend pas effet). Commencez un nouveau document HTML, tapez une abréviation, appuyez sur l'onglet et observez la magie (assurez-vous que votre syntaxe est définie sur HTML sinon cela ne fonctionnera pas).
Sublime text est déjà un éditeur fantastique et son utilisation en conjonction avec Zen Coding me fait sourire. C'est une combinaison meurtrière à ne pas manquer.
Utilisez-vous le codage Zen?
Pour être honnête, j'ai vraiment manqué le bateau sur le codage Zen, alors qu'il était populaire il y a quelques années. J'ai toujours trouvé l'intégration d'Espresso un peu maladroite et, comme c'était mon éditeur de prédilection, je ne l'ai jamais explorée davantage. Maintenant que je suis sur Sublime Text, je suis ravi de la rapidité avec laquelle je peux utiliser le codage Zen pour décomposer une structure HTML complexe sans le fardeau des balises, des retours, etc.
Qu'est-ce que tu penses? Utilisez-vous le codage Zen pour votre code HTML? Préférez-vous l'utilisation d'un pré-processeur pour faire quelque chose de similaire? Que diriez-vous de votre CSS? Pensez-vous que le codage Zen est utile pour taper du code CSS ou est-ce que la saisie semi-automatique vous convient?