Petit conseil balisage encore plus rapide avec Sparkup

La plupart d’entre nous connaissons à présent le célèbre utilitaire Zen Coding. Pour ceux qui ne le sont pas, cela transforme le processus de création de balises complexes en un sélecteur de type CSS. Cela peut vous faire économiser un temps extraordinaire. Cependant, il a quelques inconvénients. Heureusement, un autre outil, Sparkup, inspiré du codage Zen, résout ces problèmes et augmente encore votre productivité.!


Préférer un tutoriel vidéo?


Attendez… Qu'est-ce que le codage Zen??

Considérez le balisage suivant:

 

C'est un balisage assez courant que vous allez créer pour chaque nouveau site Web. En supposant que vous ne l'avez pas déjà enregistré en tant qu'extrait, vous pouvez facilement le recréer en quelques secondes, avec Zen Coding..

#container> nav> ul> li * 4
  • Cible identifiants et Des classes avec le # et . sélecteurs.
  • Utilisez le > pour filtrer l'arbre et créer des éléments enfants.
  • Demander plusieurs éléments en utilisant le * symbole.
  • Utilisez le + symbole pour créer des frères et soeurs.

Marge d'amélioration

Malheureusement, il y a quelques problèmes que j'ai avec Zen Coding.

  • À ma connaissance, il n’existe aucun moyen facile de remonter l’arbre. Par exemple, si je crée un ul> li * 4 sélecteur, je ne suis pas au courant d'un moyen de filtrer jusqu'à la ul, puis créer un élément frère.
  • Il n'y a pas moyen d'assigner innerHTML à un élément. Ne serait-il pas génial de pouvoir taper, ul> li du texte ici?
  • Je ne crois pas qu'il y ait un moyen de languette entre les arrêts, après avoir développé.

Heureusement, un utilitaire inspiré de Zen Coding corrige chacun des problèmes énumérés ci-dessus. Il est compatible avec les versions antérieures, ce qui signifie que toute votre connaissance du codage Zen sera transférée de manière transparente.


Disponibilité

Au moment d'écrire ces lignes, Sparkup est disponible pour TextMate, Vim et pour un usage général, via la ligne de commande. C'est assez simple à installer. Pour plus d'informations, reportez-vous à la capture d'écran ci-dessus.


Grimper à l'arbre

Avec Sparkup, nous pouvons remonter l'arbre.

La syntaxe
ul> li * 3> a < < + #contents

Remarquez comment nous utilisons le < remonter l'arbre. De la balise d'ancrage, un < nous mènera à l'élément de la liste, et un autre nous ramènera à la liste non ordonnée, à quel point nous pouvons créer un frère avec le + symbole. Très utile!

Le résultat
  

Ajouter du texte aux éléments

En utilisant des accolades, nous pouvons attribuer des valeurs, ou innerHTML aux éléments que nous créons. Cette fonctionnalité était vraiment nécessaire.

La syntaxe
ul> li> p Mon texte ici
Le résultat
 
  • Mon texte ici


Languette Arrêts

Avec Sparkup, nous pouvons languette sur les arrêts nécessaires, afin que nous puissions insérer manuellement nos attributs / valeurs aussi rapidement que possible. Avec MacVim, comme indiqué dans la capture d'écran, vous pouvez utiliser Contrôle + N et Contrôle + P pour basculer entre les arrêts.

De cette façon, plutôt que d’avoir à appuyer sur de nombreuses touches directionnelles, une seule commande vous mènera là où vous devez être.. Reportez-vous au screencast pour un exemple.


Alors qu'est-ce que tu en penses? Ferez-vous le changement?