De meesten van ons zijn inmiddels bekend met het populaire hulpprogramma Zen Coding. Voor degenen die dat niet zijn, wordt het proces van het maken van complexe markeringen in een CSS-achtige selector omgezet. Dit kan u een buitengewone hoeveelheid tijd besparen; het heeft echter een paar tekortkomingen. Gelukkig verhelpt een andere tool, Sparkup, geïnspireerd door Zen Coding, deze problemen en duwt je productiviteit nog hoger!
Overweeg de volgende markup:
Dit is vrij algemene markup die u voor elke nieuwe website zult maken. Ervan uitgaande dat je dit nog niet hebt opgeslagen als een fragment, kan het eenvoudig binnen enkele seconden opnieuw worden gemaakt, met Zen Coding.
#container> nav> ul> li * 4
ids
en klassen
met de #
en .
selectors. >
om de boom te filteren en kinderenelementen te maken. *
symbool. +
symbool om broers en zussen te maken. Helaas zijn er een paar problemen die ik heb met Zen Coding.
ul> li * 4
selector, ik ben me niet bewust van een manier om te filteren naar de ul
, en maak vervolgens een broer / zus-element. innerHTML
naar een element. Zou het niet geweldig zijn als ik kon typen, ul> li Een beetje tekst hier
? tab
tussen stops, nadat je het hebt uitgebreid. Gelukkig lost een hulpprogramma, geïnspireerd door Zen Coding, elk van de hierboven genoemde problemen op. Het is compatibel met de toekomst, wat betekent dat al uw kennis over Zen-codering naadloos wordt overgedragen.
Op het moment van schrijven is Sparkup beschikbaar voor TextMate, Vim en voor algemeen gebruik, via de opdrachtregel. Het is vrij triviaal om te installeren. Raadpleeg de bovenstaande screencast voor meer informatie.
Met Sparkup kunnen we terug in de boom reizen.
ul> li * 3> a < < + #contents
Let op hoe we de gebruiken <
om terug de boom op te gaan. Van de ankertag, één <
brengt ons naar het lijstitem en een ander brengt ons terug naar de ongeordende lijst. Op dat moment kunnen we een broer of zus maken met de +
symbool. Erg behulpzaam!
Door accolades te gebruiken, kunnen we waarden toewijzen, of innerHTML
naar de elementen die we creëren. Deze functie was hard nodig.
ul> li> p Mijn tekst hier
Mijn tekst hier
Met Sparkup kunnen we dat tab over de benodigde stops, zodat we onze attributen / waarden zo snel mogelijk handmatig kunnen invoegen. Met MacVim, zoals getoond in de screencast, kunt u gebruiken Controle + N
en Controle + P
om tussen de stops te schakelen.
Op deze manier, in plaats van dat je je toevlucht moet nemen tot talloze directionele toetsaanslagen, zal een enkele opdracht je brengen waar je moet zijn. Raadpleeg de screencast voor een voorbeeld.
Dus wat denk je ervan? Ga je de overstap maken?