Rask Tips Enda raskere Markup med Sparkup

De fleste av oss er kjent med det populære Zen Coding-verktøyet nå. For de som ikke er det, blir det prosessen med å opprette komplisert markering i en CSS-lignende selector. Dette kan spare deg for en ekstraordinær tid; Det har imidlertid noen få short-comings. Heldigvis, et annet verktøy, Sparkup, inspirert av Zen Coding, retter disse problemene, og skyver produktiviteten enda høyere!

Foretrekker en videoopplæring?

Vent ... Hva er Zen Coding?

Vurder følgende markering:

Dette er ganske vanlig merking som du vil opprette for hver ny nettside. Forutsatt at du ikke allerede har denne lagret som en utdrag, kan den lett bli gjenskapt innen sekunder, med Zen-koding.

#container> nav> ul> li * 4

Mål ids og klasser med # og . velgere.
Bruke > å filtrere ned treet og lage barnelementer.
Be om flere elementer ved å bruke * symbol.
Bruke + symbol for å lage søsken.

Rom for forbedring

Dessverre er det noen problemer jeg har med Zen Coding.

Så vidt jeg vet, er det ingen enkel måte å reise opp igjen på treet. For eksempel, hvis jeg lager en ul> li * 4 selector, jeg er ikke klar over en måte å filtrere tilbake til ul, og opprett deretter et søskenelement.
Det er ikke en måte å tildele innerhtml til et element. Ville det ikke vært bra hvis jeg kunne skrive, ul li noen tekst her?
Jeg tror ikke det er en måte å tab mellom stopp, etter at du har utvidet.

Heldigvis løser et verktøy, inspirert av Zen Coding, alle de ovennevnte problemene. Det er fremoverkompatibelt - noe som betyr at all din Zen-kodingskunnskap vil overføre over sømløst.

Tilgjengelighet

På tidspunktet for denne skrivingen er Sparkup tilgjengelig for TextMate, Vim, og for generell bruk, via kommandolinjen. Det er ganske trivielt å installere. For mer informasjon, se skjermbildet ovenfor.

Klatre opp treet

Med Sparkup kan vi reise opp igjen treet.

Syntaxen

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

Legg merke til hvordan vi bruker < å reise tilbake opp treet. Fra ankermerket, en < vil ta oss til listeposten, og en annen vil bringe oss tilbake til den uordnede listen, på hvilket tidspunkt kan vi lage en søsken med + symbol. Veldig hjelpsom!

Utgangen

Legg til tekst i elementene

Ved å bruke krøllete braces kan vi tildele verdier, eller innerhtml til elementene vi lager. Denne funksjonen var svært nødvendig.

Syntaxen

ul> li> p Min tekst her

Utgangen

    Min tekst her

Tab stopper

Med Sparkup kan vi tab over de nødvendige stoppene, slik at vi manuelt kan sette inn våre attributter / verdier så raskt som mulig. Med MacVim, som vist på skjermbildet, kan du bruke Kontroll + N og Kontroll + P å bytte mellom stoppene.

På denne måten, i stedet for å ty til mange retningsbestemt nøkkelpresser, vil en enkelt kommando ta deg der du trenger å være. Se på skjermbildet for et eksempel.

Så hva tror du? Vil du gjøre bryteren?

Kode