Snabbtips Även Snabbare Markup med Sparkup

De flesta av oss är kända för det populära Zen Coding-verktyget. För dem som inte är det blir processen att skapa komplicerad markering i en CSS-liknande väljare. Detta kan spara dig en extra tid. Det har dock några korta följder. Lyckligtvis, ett annat verktyg, Sparkup, inspirerat av Zen Coding, åtgärdar dessa problem och driver din produktivitet ännu högre!

Föredrar en video-handledning?

Vänta ... Vad är Zen kodning?

Tänk på följande markering:

Detta är ganska vanligt markup som du skapar för varje ny webbplats. Om du antar att du inte redan har sparat det som ett fragment, kan det enkelt återskapas inom några sekunder, med Zen-kodning.

#container> nav> ul> li * 4

Mål ids och klasser med # och . selektorer.
Använd > att filtrera ner trädet och skapa barnelement.
Begär flera element genom att använda * symbol.
Använd + symbol för att skapa syskon.

Plats för förbättring

Tyvärr finns det några problem som jag har med Zen Coding.

Så vitt jag vet är det inte enkelt att resa tillbaka upp på trädet. Till exempel, om jag skapar en ul> li * 4 väljare, jag är inte medveten om ett sätt att filtrera tillbaka till ul, och skapa sedan ett syskonelement.
Det finns inget sätt att tilldela innerhtml till ett element. Skulle det inte vara bra om jag kunde skriva, ul li lite text här?
Jag tror inte att det finns ett sätt att flik mellan stopp, efter att du har utvidgat.

Lyckligtvis fixar ett verktyg, inspirerat av Zen Coding, alla de frågor som anges ovan. Det är framåtkompatibelt - vilket betyder att all din Zen-kodningskunskap kommer att överföras över sömlöst.

Tillgänglighet

Vid det här skrivandet är Sparkup tillgängligt för TextMate, Vim och för allmän användning via kommandoraden. Det är ganska trivialt att installera. För mer information, se skärmbilden ovan.

Klättra upp trädet

Med Sparkup kan vi resa tillbaka upp på trädet.

Syntaxen

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

Lägg märke till hur vi använder < att resa tillbaka upp i trädet. Från ankaretiketten, en < tar oss till listobjektet, och en annan tar oss tillbaka till den oordnade listan, vid vilken tidpunkt kan vi skapa en syskon med + symbol. Väldigt hjälpsam!

Utgången

Lägg till text till element

Genom att använda lockiga axlar kan vi tilldela värden, eller innerhtml till de element vi skapar. Denna funktion var mycket nödvändig.

Syntaxen

ul> li> p Min text här

Utgången

    Min text här

Flik Stoppar

Med Sparkup kan vi flik över de nödvändiga stoppen, så att vi manuellt kan infoga våra attribut / värden så snabbt som möjligt. Med MacVim, som visas i skärmen, kan du använda Kontroll + N och Kontroll + P att växla mellan stoppen.

På det här sättet, i stället för att behöva tillgripa många riktiga tangenttryckningar, kommer ett enda kommando att ta dig där du behöver vara. Se skärmbilden för ett exempel.

Så vad tycker du? Kommer du att göra omkopplaren?

Koda