Un regard dans: La langue du kit

Imaginons que vous construisiez des prototypes pour un site Web avec des fichiers HTML . Vous avez environ 10 pages HTML ou plus, et ces pages partagent certains composants communs tels que l'en-tête, la barre latérale et le pied de page.

Maintenant, voici le problème: si vous faites un changement dans ces composants partagés, vous devrez peut-être aussi les changer dans les autres fichiers . C'est contre-productif et une grosse perte de temps.

Pour éviter cela, vous pouvez essayer des moteurs de templates . Il y a un certain nombre de moteurs de modèles là-bas, chacun avec ses caractéristiques distinctives. Dans ce post, nous allons vous guider à travers celui que nous avons trouvé pour être le plus simple mais encore puissant: Kit .

Qu'est-ce que Kit?

Kit est un langage propriétaire de Codekit qui apporte la capacité d' importation de fichiers et de variables en HTML. Il est écrit avec une extension de fichier .kit . En utilisant Codekit, il peut ensuite être compilé dans un fichier HTML lors d'une sauvegarde de fichier.

Variables

Les variables du kit ne sont pas figées; ils peuvent être définis avec la notation $ ou @ . Donc, si vous utilisez Kit avec LESS, vous pouvez nommer vos variables avec la notation @ pour suivre la convention LESS. De même, vous pouvez utiliser le $ pour Sass. Les valeurs peuvent être affectées de deux points, d'un signe égal ou d'un espace. Voici quelques exemples:

Cependant, il est à noter que vous ne pouvez définir qu'une seule variable par commentaire, l'exemple suivant ne fonctionnera donc pas comme variable.

Importer

Avec le langage Kit, vous pouvez importer n'importe quel type de fichier, y compris .html, .txt, .kit et même .php . Pour importer des fichiers, vous pouvez utiliser @import ou @include .

De plus, contrairement à la définition de variables, vous pouvez importer plusieurs fichiers sur une ligne, comme ceci:

Lors de l'enregistrement, Codekit récupère le contenu de ces fichiers et les ajoute au fichier.

Utiliser Kit

Nous avons donc vu ce que Kit a à offrir. Ils peuvent ne pas être beaucoup, mais ils sont certainement assez puissants pour rendre la vie plus facile lors de la manipulation d'un tas de fichiers HTML.

Dans un scénario pratique, nous pouvons décomposer notre document en plusieurs fichiers, par exemple: header.kit, sidebar.kit, footer.kit, head.kit, closing.kit et closing.kit . Nous importerons ces fichiers dans nos pages afin que lorsque nous faisons un changement, il s'appliquera sur toutes les pages.

Ouverture et clôture du document

Je suis sûr que les noms de fichiers sont assez explicites quant à ce que les fichiers closing.kit, sauf (peut-être) le closing.kit et le closing.kit .

Dans notre exemple ci-dessous, le fichier opening.kit contient le Doctype, la balise d'ouverture HTML et la balise body d'ouverture. Dans ce fichier, nous importons également le head.kit qui contient tout ce qui est enveloppé dans le élément, et peut également définir plusieurs variables globales qui peuvent être héritées à travers tous les fichiers, comme ceci:

Notez que j'ai également ajouté deux variables: @body_class dans la balise body et @page_name dans la balise title. Ces variables nous permettront de définir différentes classes et noms de pages sur les pages. Si nous avons deux pages nommées index.kit et about.kit, dans chacun de ces fichiers, nous pouvons définir les valeurs de ces deux variables comme suit:

index.kit

à propos de

Lorsque nous aurons sauvegardé les fichiers, Codekit remplacera les variables que nous avons placées dans la balise body et le title avec ces valeurs. Une chose à noter cependant, c'est que les variables doivent venir avant l'inclusion de opening.kit, sinon elles ne seront pas récupérées.

Conclusion

Comme mentionné précédemment, Kit pourrait être la langue de modèle la plus simple disponible. Il utilise uniquement la balise de commentaire HTML et offre une grande flexibilité dans la définition des variables et l'importation des fichiers.

La possibilité d'utiliser des variables et d'importer des fichiers en HTML signifie que nous pouvons augmenter notre productivité, car nous ne devons plus changer nos codes plusieurs fois dans plusieurs fichiers, ce qui prend beaucoup de temps. De plus, cela nous permet également de rendre notre projet modulaire et donc plus maniable.

Post-processeurs CSS pour les débutants: conseils et ressources

Le pré-traitement CSS est un concept que la plupart des développeurs Web ont déjà appris ou lu. Nous avons couvert en détail le prétraitement CSS pour aider les développeurs à se familiariser avec cette technologie répandue. Mais qu'en est-il des post-processeurs ?Ces outils relativement nouveaux sont similaires en ce sens qu'ils affectent le flux de travail de développement web, mais ils opèrent de l' autre côté du développement CSS ( développement "post").Dans ce post,

(Conseils techniques et de conception)

Regardez comme la Terre change au fil des ans avec Google Earth Timelapse

En 2013, Google a collaboré avec l'US Geological Survey (USGS), la NASA et TIME pour compiler une histoire de l'imagerie satellitaire de 1984 à 2012. Ces images serviront de base à la fonction Timelapse de Google Earth . Après une longue période d'inactivité, le géant des moteurs de recherche a décidé de déployer une grande mise à jour de Google Earth et de sa fonctionnalité Timelapse, donnant à tous une vision plus précise de la Terre.Google a ensu

(Conseils techniques et de conception)