J'aime les sites statiques. Pour être plus précis, j'aime les construire. Il y a quelque chose de pur à rester assis devant votre écran; c'est juste vous et votre éditeur de texte, écrivant dans le vieux HTML et le CSS.
Ne vous méprenez pas, les sites dynamiques sont amusants aussi. Dieu sait que je suis fan de WordPress et de la facilité d’utilisation qu’il offre aux utilisateurs. Les sites statiques me ramènent cependant. Je me souviens du passage du logiciel WYSIWYG à un éditeur de texte. Je me souviens avoir rationalisé le processus de développement avec ma première fonction PHP: include. C'étaient de bons jours, mais contrairement à tant d'autres, ils ne sont pas tous partis.
La différence est que maintenant, nous pouvons le faire mieux. Les pré-processeurs aiment Moins et Toupet considérablement amélioré l'expérience de l'écriture CSS. Nous avons un certain nombre de langages de script à mélanger dans notre HTML, si nous le souhaitons. Et puis ... alors les gens ont fait des choses vraiment intéressantes.
J'ai déjà mentionné le Marteau application pour Mac. C'est une application qui introduit ses propres fonctions et expansions au bon vieux HTML, vous permettant d'inclure un fichier en tant que partiel dans un autre, et d'autres bonnes choses. Il compile les résultats dans un site statique standard pouvant être hébergé n'importe où. Il a en fait un peu plus de fonctionnalités que cela, mais cet article ne concerne pas Hammer. Pourquoi? Il est uniquement disponible pour la plate-forme Mac.
Entrer Harpe…
Ce n'est pas une application, c'est beaucoup plus. Il comprend des préprocesseurs pour CSS. Il comprend des langages de templates pour les documents HTML. C'est un mini-serveur qui peut être utilisé pour le développement ou transformé en un véritable serveur de production. Vous pouvez utiliser JavaScript côté serveur pour le transformer en une application complète, car elle s'exécute sur Node.js. Ou, si vous n'êtes pas un programmeur, vous pouvez simplement créer votre site statique, puis le compiler pour l'hébergement ailleurs.
Comme il est basé sur Node.js, il est multi-plateforme. C'est aussi sous licence MIT, donc c'est gratuit. Vous pouvez même apporter des modifications et les redistribuer ou les revendre si vous le souhaitez.
Maintenant, les personnes qui ont été à l'affût ont remarqué que Harp n'est pas le seul outil du genre. Beaucoup de gens créent des outils basés sur des nœuds pour démarrer rapidement des projets Web. Mon principal problème avec ces derniers est qu'ils supposent généralement que vous souhaitez utiliser leur framework CSS, leur bibliothèque d'animation ou leur code HTML préféré. Harp ne fait aucune hypothèse sur le code que vous voulez écrire. Cela vous donne juste les outils pour l'écrire plus rapidement.
Attention, il doit être installé et exécuté via la ligne de commande. Il n'y a pas d'interface graphique pour cela. Mais une fois que vous avez commencé - et ce n'est pas difficile du tout - les avantages l'emportent sur la courbe d'apprentissage.
À l'heure actuelle, je suis sûr que la plupart de nos lecteurs sont familiarisés avec la manière dont l'industrie Web a essayé d'améliorer la CSS vanille. Lorsque le mini-serveur de votre projet est en cours d'exécution, les fichiers LESS, SASS et Stylus sont automatiquement compilés en CSS.
La compilation est toujours rapidement rapide. Dans tous mes tests, les modifications apportées à mon site Web ont été compilées dans le temps nécessaire pour enregistrer mon fichier, puis actualiser mon navigateur.
Sont également inclus Jade et EJS. Ces deux langages JavaScript sont conçus pour vous aider à écrire / générer des documents HTML plus avancés avec plus de flexibilité. Fondamentalement, vous pouvez créer des modèles HTML et stocker votre contenu de page réel séparément de ces modèles. C'est un peu comme utiliser un CMS, il n'y a pas de base de données (sauf si vous en voulez un), et vous devez écrire tout le contenu dans des fichiers texte.
Le véritable avantage est, bien sûr, la maintenance du code, ainsi que tous les trucs que les programmeurs peuvent faire avec le JavaScript réel côté serveur et côté client. Ce sont également les langages qui vous permettent de créer des systèmes plus avancés, tels que les blogs, tous relativement facilement (là encore, si vous avez un programmeur sur la liste de paie).
Quelle est la différence entre les deux? Il s'agit principalement de la façon dont vous préférez écrire votre code.
EJS garde les choses simples. Si vous connaissez déjà le langage HTML, il suffit d'ajouter des balises spécifiques à EJS, comme ceci: <% include global / header%>. Qu'est-ce que j'ai fait là-bas? Fondamentalement, je viens de saisir le code HTML de mon en-tête de page à partir d'un autre fichier et de l'importer pour l'utiliser dans mon modèle principal. Vous pouvez bien sûr faire des choses plus complexes. Voici ce que la documentation Harp a à dire à propos d'EJS.
Jade adopte une approche très différente de l’écriture du HTML. Cela ressemble à ceci, comme indiqué sur la page d'accueil du projet:
bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,Tout cela est traduit en HTML et Javascript. Notez l'inclusion d'une instruction if / else au milieu de tout, et la dépendance à l'indentation appropriée.
Coffeescript est à JavaScript ce que Jade est au HTML. Fondamentalement, il s’agit d’un format simplifié pour écrire du code JavaScript, qui est ensuite compilé dans les éléments habituels. Comme Jade, il dépend fortement de l'indentation et perd beaucoup de syntaxe.
Cela ressemble à ceci (un autre exemple tiré sans vergogne de la page d'accueil du projet):
math =root: Math.sqrtsquare: squarecube: (x) -> x * square xEt la sortie ressemble à ceci:
math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};Les sites Web créés avec Harp peuvent bien sûr être hébergés n'importe où. Il convient toutefois de mentionner que les créateurs de Harp ont créé une plate-forme d’hébergement spécialement conçue pour les éléments créés avec leurs logiciels. La tarification n'est pas mauvaise et s'intègre à Dropbox pour faciliter la mise à jour automatique de votre site. Vérifiez le ici: www.harp.io
La harpe, avec ses préprocesseurs, ses langages de modélisation, sa rapidité et ses qualités multiplates-formes, constitue un ajout solide à la boîte à outils de tout concepteur. Je dis que ça vaut la peine d'apprendre.