Riot est une petite société de logiciels composée actuellement de cinq personnes seulement. Sorti de nulle part, cette équipe a lancé deux applications de développement Web pour les utilisateurs de Mac qui m'ont époustouflé. À mon avis, il s'agit d'une catégorie d'applications qui n'a pas fait l'objet de beaucoup d'innovation au cours des dernières années et apparemment, les bonnes personnes chez Riot sont prêtes à changer cela, car leurs idées sont vraiment uniques et incroyablement utiles.
Aujourd'hui, nous examinerons brièvement Hammer et Anvil pour voir ce que chacun fait et comment ils peuvent collectivement améliorer votre flux de travail, en particulier si vous êtes un développeur front-end travaillant avec des sites statiques.
Marteau
En premier lieu, Hammer, un véritable bond en avant dans le domaine du développement de sites statiques. Si vous aimez le genre de choses que PHP aime, mais que vous ne connaissez pas PHP ou que vous ne vouliez tout simplement pas le gêner dans vos petits projets, vous adorerez Hammer.
Qu'Est-ce que c'est?
Commençons par discuter de ce que Hammer n'est pas. Ce n'est pas un éditeur de texte ou IDE. Vous n'avez pas à renoncer à Sublime Text 2 pour l'utiliser (ce qui est génial), il se branche directement sur votre flux de travail existant et fonctionne aux côtés de vos applications de développement Web préférées, quelles qu'elles soient.
Maintenant, vous demandez encore une fois, qu'est-ce que c'est que Hammer? En bref, c'est un compilateur. Il sert de base pour votre projet de conception Web. Au fur et à mesure que vous apportez des modifications, Hammer compile vos fichiers. Par exemple, si vous utilisez Sass ou CoffeeScript, ils seront automatiquement compilés en CSS et JavaScript.
C'est tout?
Nan. Hammer n'est pas qu'un simple concurrent Codekit. Il ajoute au concept de compilateur en fournissant une syntaxe spéciale que vous pouvez utiliser dans votre travail et qui régit la manière dont vos fichiers sont créés.
Quelle sorte de syntaxe spéciale vous demandez? Qu'en est-il des inclusions HTML qui vous permettent d'intégrer automatiquement des documents HTML les uns aux autres sans PHP ni environnement serveur? Ou peut-être aimeriez-vous utiliser des chemins de fichiers intelligents pour localiser automatiquement des actifs spécifiques, même lorsqu'ils sont déplacés? Voulez-vous un côté des variables HTML avec cela?
?Ferme la porte de devant? vous dites. Non, je vais garder la porte grande ouverte. Hammer fait tout cela et plus encore. Voyons comment.
Débuter avec Hammer
Après avoir téléchargé et lancé Hammer, voici ce que nous voyons:
Ici, nous avons une belle fenêtre de démarrage conviviale qui nous invite à créer un nouveau projet ou à déposer un projet existant. Je vais créer un nouveau projet car il y a beaucoup de choses fantaisistes qu'il faut voir.
Créer un nouveau projet
Une fois que j'ai cliqué sur? Créer un nouveau projet? dossier, puis choisissez un nom et un emplacement pour le projet, Hammer se met au travail et crée un petit répertoire impressionnant de fichiers de démarrage.
Dans le fichier de projet principal, vous trouverez un fichier index.html avec trois dossiers: assets, Build et includes. Chaque fichier est pré-rempli avec des fichiers de démarrage pour vous aider à démarrer.
Le principal domaine d’intérêt ici est le? Build? dossier, c’est le répertoire où votre site HTML statique terminé sera placé dans toute sa splendeur.
Connecter avec votre éditeur de texte préféré
Comme je l’ai déjà mentionné, Hammer est conçu pour s’adapter à votre flux de travail actuel. Après avoir créé votre projet, cliquez sur la petite icône d'application en haut à droite de l'interface pour sélectionner l'éditeur que vous utiliserez.
Maintenant, avec le projet sélectionné dans la barre latérale gauche, appuyez sur Commande-E et ce projet s'ouvrira dans l'application sélectionnée, Sublime Text 2 dans mon cas.
Freaking Awesome Caractéristiques
Il est difficile de ne pas faire une double prise lorsque vous voyez les caractéristiques de Hammer. Ils sont bons. Vraiment, vraiment bien. Je parle de voodoo que vous n'avez jamais pensé pouvoir être performant. Jetons un coup d'oeil à certaines des meilleures parties.
HTML comprend
Si nous ouvrons le fichier HTML généré automatiquement avec notre nouveau projet, voici ce que nous voyons (il s’agit de l’ensemble du fichier):
Cela devrait être votre réaction:? WTF? Où est tout le code? Attendez, est-ce que c'est ce que je pense faire ?? Oui.
Sans aucune connaissance de PHP et sans configurer un environnement de serveur local, nous pouvons tirer parti du concept de développement par module.
Si vous êtes tellement habitué aux sites statiques que vous n'avez aucune idée de ce qui se passe, laissez-moi vous expliquer. À l'intérieur de la? Comprend? dossier est un ensemble de fichiers HTML. Par exemple, prenez le fichier _header.html. On a un copie de ce qui peut être inséré dans autant de pages que nous voulons. Si vous le placez dans dix fichiers HTML, puis mettez à jour le fichier d’en-tête principal, les dix autres fichiers HTML sont mis à jour lors de la compilation.
Tout ce dont vous avez besoin pour réaliser cet exploit impressionnant est un extrait personnalisé qui se présente sous la forme d’un commentaire HTML. Voici trois exemples:
Les implications ici devraient souffler votre esprit. Je ne peux vraiment pas exprimer le progrès que cela représente pour les sites statiques.
Variables
?Mais attendez!? vous dites. "Vous ne pouvez pas utiliser le même en-tête exact dans chaque fichier!" Vous êtes une forte. À tout le moins, vous devrez personnaliser la balise title afin que chaque page soit différente. Alors quoi maintenant? Le capitaine Hammer est-il vaincu?
N'ayez crainte, je suis sur le point de vous montrer comment utiliser des variables dans votre code HTML. Au lieu de saisir un titre réel dans votre fichier d’en-tête HTML principal, vous pouvez simplement créer une variable comme ceci:
Maintenant, lorsque nous exécutons une inclusion sur notre fichier d’en-tête, nous pouvons personnaliser cette variable. Nous faisons cela avec une seule ligne en haut de notre fichier HTML de destination.
La ligne supérieure de cet extrait de code indique à Hammer de remplacer la variable $ title par "Design Shack". Maintenant, je peux avoir un fichier d'en-tête inclus qui est personnalisé page par page. Je vous ai dit que c'était génial.
?Intelligent? Les chemins
La prochaine étape est des chemins intelligents. Celles-ci sont simples à comprendre et très pratiques.Fondamentalement, vous pouvez supprimer des chemins de fichiers longs lorsque vous vous connectez à vos diverses ressources pour utiliser le chemin? @ @? syntaxe.