Les chances sont, maintenant vous savez tout sur Sass et ses frères (MOINS, Stylus, etc.). Aimez-les ou détestez-les, ces pré-processeurs CSS font sensation dans la communauté des développeurs. À bien des égards, ils représentent un moyen plus rapide et plus efficace d’écrire des feuilles de style CSS et, si vous y adhérez, vous apprécierez sans aucun doute la souplesse qu’ils apportent à votre projet.
Une fois que vous aurez été piqué par le bogue du préprocesseur CSS, vous commencerez inévitablement à regarder le HTML et à vous demander pourquoi il doit être si lourd. Pourquoi quelqu'un ne simplifie-t-il pas radicalement la façon dont nous écrivons le balisage? Il s'avère que les mêmes personnes qui nous ont amené Sass l'ont fait avec un langage appelé Haml. Aujourd'hui, nous allons jeter un coup d'œil et voir comment utiliser Haml pour changer complètement la façon dont vous écrivez le balisage.
Qu'est-ce que Haml?
Haml est essentiellement un langage de balisage léger. L'équivalent le plus proche que vous connaissez probablement est le Markdown de Gruber, qui est fonctionnellement similaire mais plus destiné aux écrivains.
Comme Markdown, Haml facilite beaucoup l’écriture en HTML, et quand je dis? Beaucoup plus facile? vous ne croirez pas combien de temps vous pouvez économiser en utilisant Haml. À mon avis, c'est encore plus un gain de temps évident que Sass. De nombreux développeurs jettent un coup d'œil à Sass et se disent: Mais je n'en vois pas vraiment le besoin. Avec Haml, presque tous les développeurs, qu’ils consentent à l’utiliser ou non, devraient immédiatement bénéficier des avantages considérables qu’ils apportent.
Pas seulement pour les développeurs Ruby
Le gros problème de Haml est qu’il peut être intimidant simplement parce que son site Web est tellement destiné aux développeurs Ruby. Un développeur HTML occasionnel ne passera sur ce site que le temps nécessaire pour lire la déclaration "Haml constitue la prochaine étape dans la génération de vues dans votre application Rails." Ceci, combiné à de multiples références à ERB, ne fait que hurler - vous n’avez pas sa place ici? aux anciens développeurs front-end.
C’est bien dommage, car comme je viens de le dire, tous ceux qui écrivent du HTML peuvent utiliser Haml à certains égards. Bien sûr, vous n'utiliserez pas toutes les fonctionnalités, mais je suis sûr que vous n'utilisez pas non plus toutes les fonctionnalités de Photoshop, mais vous l'activez toujours au quotidien.
Mon point est que, si vous n'avez jamais écrit une ligne de Ruby dans votre vie et n'en avez pas l'intention, ne vous laissez pas effrayer par Haml. C'est toujours très amusant. Aujourd'hui, nous allons discuter de Haml uniquement comme moyen d'écrire du code HTML. Peu importe où vous vous trouvez dans le spectre du développement, vous devriez pouvoir suivre.
Votre première ligne de ham
Maintenant que vous avez une idée de base de ce qu'est Haml sur le plan conceptuel, il est temps de casser les pneus et de voir comment cela fonctionne. Finalement, nous devrons discuter de la façon de compiler votre Haml en HTML (ne vous inquiétez pas, cela ne demande aucun effort), mais pour le moment, essayez de l'ignorer et de simplement assimiler le langage. Quand je dis? Compile à? Sachez simplement que nous couvrirons bientôt ce processus.
La beauté de Haml réside dans le fait qu’il s’agit de «DRY», ce qui signifie qu’il a été tenté de supprimer autant que possible la répétition inhérente au code HTML inhérente. Par exemple, considérons la structure des balises. Voici une structure de paragraphe standard:
HTML:
Notez que même le plus simple des fichiers HTML implique une certaine répétition. La balise de paragraphe doit être placée au début de l'instruction, puis une balise de fermeture correspondante doit être placée à la fin. Et si nous pouvions sauter toutes ces bêtises? Voici la même déclaration dans Haml:
Haml:
En Haml, nous préfixons les balises HTML avec un?%? et ça s'occupe du reste. Mais attendez, implorez-vous, comment différencier deux éléments sans la balise de fermeture? La réponse est bien sûr que Haml est dépend de l'espaceCela signifie qu’il utilise la structure visuelle de votre code pour déterminer la sortie HTML. Voici un autre exemple qui utilise plusieurs éléments et même niche certains éléments à l'intérieur d'autres (les éléments de liste sont imbriqués dans la liste non ordonnée).
Haml:
En HTML ancien et clair, les retraits dans une liste non ordonnée sont simplement destinés à un guidage visuel et n'ont pas vraiment de signification sémantique. Dans Haml cependant, ils disent au compilateur que ces éléments de liste entrent dans la balise précédente, ce qui dans ce cas est un ul.
Il peut être difficile d’envelopper votre cerveau au début, mais le code ci-dessus est le code ci-dessous, ce qui signifie qu'ils sont parfaitement équivalents. Si nous tapons le Haml ci-dessus et l'introduisons dans un compilateur, il crache le code HTML ci-dessous.
HTML:
Comme vous pouvez le constater, la version HTML nécessite beaucoup plus de caractères. En utilisant Haml, nous nous sommes épargnés plus de trente frappes dans cet extrait minuscule. Développez ce concept sur tout un site Web et vous pourrez facilement en voir les implications.
Classes et ID
Sans la structure de balises traditionnelle, vous vous demandez peut-être comment déclarer des éléments HTML supplémentaires tels que des classes et des ID. Haml a une longueur d'avance sur vous et utilise même une syntaxe que vous trouverez étrangement familière.
Haml:
Comme vous pouvez le voir, le. et ?#? les symboles désignent respectivement les classes et les identifiants. Cela tombe bien parce que vous connaissez déjà cette méthode en CSS. Cette familiarité signifie qu’une fois que vous aurez plongé dans l’immeuble, vous serez en mesure de prendre Haml en un rien de temps. Voici comment ce code est compilé.
HTML:
Les divs sont magiques
Regardons les choses en face, même avec tous les nouveaux éléments HTML5 sophistiqués, nous aimons toujours nos divs.Étant donné que cet élément particulier est si courant, Haml lui a attribué une syntaxe particulièrement simple. Réfléchissez à la manière dont vous pensez écrire le code HTML suivant dans Haml.
HTML:
Compte tenu de ce que nous avons appris jusqu’à présent, vous en arriverez sans doute à la conclusion qu’une forme de?% Div? est nécessaire ici. Cependant, Haml vous permet de sauter la syntaxe div dans son ensemble. Pour écrire le code HTML ci-dessus dans Haml, c'est tout ce dont vous avez besoin.
Haml:
C'est tout! Ce code est compilé en un div complet avec un identifiant "someDiv". Même les sceptiques parmi vous doivent admettre que c'est assez concis. Une fois encore, nous voyons les avantages évidents de pouvoir écrire notre balisage comme nous écrivons du CSS.
Pour vous assurer que vous avez vraiment bien compris comment cela fonctionne, voici un exemple beaucoup plus complet. Cette fois, nous utiliserons une div principale et deux div internes ainsi que de nombreux autres éléments.
Haml:
HTML:
Cette fois-ci, vous pouvez vraiment ressentir l’impressionnant pouvoir de Haml. Le charme ici dépasse le fait que nous ayons sauvé des tonnes de caractères et même quelques lignes entières. Notez à quel point il est plus facile de lire Haml en un coup d’œil. Tout le fouillis fouillis qui accompagne HTML a été supprimé et est remplacé par une hiérarchie claire des balises immédiatement perceptibles.
Qu'en est-il de HTML5?
Juste au cas où vous vous le demanderiez, Haml fonctionne parfaitement avec tous les nouveaux tags intéressants du HTML5. En fait, le type de balises que vous essayez de créer n’importe pas vraiment. Si vous tapez ?% somecrazytag? le résultat de sortie sera ?? indépendamment du fait que ce n'est même pas valide HTML.
Voici un exemple rapide illustrant l’utilisation des nouveaux balises HTML5 en-tête, nav, section et pied de page.
Haml:
HTML:
Mélangez-le avec HTML
Une dernière grande chose à propos de Haml est que, comme avec Sass, vous pouvez toujours ajouter la syntaxe originale à tout moment et que tout se compilera parfaitement. Par exemple, personnellement, je n'aime pas la façon dont Haml gère l'insertion de liens de texte simples (c'est un peu bizarre), alors je m'en tiens à la syntaxe HTML normale.
Haml:
Ici, je mélange HTML à la vanille avec Haml et c'est parfaitement acceptable. Lorsque cela est compilé, le résultat obtenu correspond exactement à ce que vous attendez.
HTML:
Cela facilite vraiment l'utilisation de Haml. Si vous vous heurtez à quelque chose que vous ne pouvez tout simplement pas comprendre, vous n'avez pas à passer des heures de recherche à la recherche de la solution, utilisez simplement HTML!
Haml aspire au contenu
Plus je faisais des recherches sur Haml, plus je réalisais que je ne suis pas le seul à être dérangé par sa syntaxe de lien ou d'autres structures de contenu. En fait, Chris Eppstein a écrit un article hardiment intitulé Haml Sucks for Content dans lequel il a même marqué un accord sur cette déclaration du créateur de Haml, Nathan Weizenbaum!
Assurez-vous de lire cet article avant de commenter celui-ci, car il indique de nombreuses critiques valables de Haml avec lesquelles je suis tout à fait d'accord. La solution proposée par Eppstein consiste à utiliser Haml uniquement pour? Layout & design? fins. Il parvient ensuite à la même conclusion que moi: il est correct d'utiliser HTML dans votre Haml. Parfois, c'est plus simple.
Eppstein indique également d'autres possibilités, telles que l'utilisation du filtre Haml Markdown pour baliser votre contenu.
Outils pour compiler Haml to HTML
C'est la partie où vous courez pour les collines parce que je commence à parler d'installer Ruby gems pour compiler votre code, n'est-ce pas? Faux. Heureusement, nous n’avons pas besoin de sauter à travers des cerceaux sophistiqués ni même d’éclater la ligne de commande pour compiler Haml. Il y a beaucoup d'excellents outils qui le font pour nous.
Pour commencer, il y a l'application # haml.try sur le site officiel de Haml. Cela vous permet de taper Haml dans un champ de texte et de recevoir une sortie HTML.
Cependant, si vous recherchez un compilateur en ligne, vous pouvez faire beaucoup mieux que ce simple outil. Personnellement, j'aime beaucoup Rendera, qui offre une vue partagée qui affiche votre entrée Haml et votre sortie HTML côte à côte. Vous pouvez même basculer entre la sortie HTML en direct et la source.
Il est également intéressant de noter que Tinkerbin prend en charge Haml. Ce n'est pas la voie à suivre si vous cherchez à copier et coller la sortie HTML, mais c'est probablement le meilleur moyen de faire des expériences avec Haml et Sass sans aucun travail d'installation.
Pour les utilisateurs de Mac
Si vous souhaitez utiliser Haml dans votre environnement de codage local et que vous utilisez un ordinateur Mac, vous avez de la chance car il existe des outils fantastiques pour vous aider. La première chose que vous voudrez télécharger la version bêta publique gratuite de Chocolat, un éditeur de texte génial qui prend en charge la coloration syntaxique modeste pour un million de langues différentes, dont Haml. Il y a eu également au moins une tentative de création d'un sucre espresso Haml.
Malheureusement, le seul avantage réel de Chocolat est que vous n’aurez pas à taper du texte brut, cela ne compilera pas votre code. Pour cela, vous devez vous tourner vers une autre version bêta publique: Codekit.
Codekit fonctionne avec Haml, Sass, Less, Stylus et CoffeeScript. Fondamentalement, il garde un œil sur votre dossier de projet afin que, même lorsque vous enregistrez ou mettez à jour l'un de ces types de fichiers (dans notre cas, un fichier .haml), il traite et génère automatiquement le fichier équivalent standard. Veillez également à consulter Live Reload, qui fonctionne de la même manière mais qui réside dans la barre de menus.
Conclusion
Si vous avez pris le train Sass, LESS ou Stylus et que vous recherchez une solution similaire pour HTML, Haml est votre réponse. Il vous permet d'écrire du code simple et élégant qui vous permet de gagner du temps et d'être plus facile à lire une fois que vous vous y êtes habitué.
Ce qui est malheureux avec Haml, c’est que c’est un peu effrayant pour les développeurs autres que Ruby, tout simplement parce que la documentation est tellement orientée sur Ruby. Je promets cependant que, même si vous ne connaissez rien à Ruby, Haml est toujours assez amusant à explorer et à expérimenter pour une sortie HTML simple.
Maintenant que nous avons couvert les bases, sortez et essayez Haml pour vous-même. Assurez-vous de consulter le site Web de Haml pour plus d’informations et enregistrez cet aide-mémoire Haml dans vos favoris pour un départ rapide.