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é.!
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
identifiants
et Des classes
avec le #
et .
sélecteurs. >
pour filtrer l'arbre et créer des éléments enfants. *
symbole. +
symbole pour créer des frères et soeurs. Malheureusement, il y a quelques problèmes que j'ai avec Zen Coding.
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. innerHTML
à un élément. Ne serait-il pas génial de pouvoir taper, ul> li du texte ici
? 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.
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.
Avec Sparkup, nous pouvons remonter l'arbre.
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!
En utilisant des accolades, nous pouvons attribuer des valeurs, ou innerHTML
aux éléments que nous créons. Cette fonctionnalité était vraiment nécessaire.
ul> li> p Mon texte ici
Mon texte ici
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?