Ultimamente è stata data una lunga discussione ai preprocessori. Questi strumenti incredibilmente utili rendono la codifica più facile, più veloce e più manutenibile, ma non sono certamente per tutti. Indipendentemente dal fatto che tu abbia saltato sul carro del preprocessore, dovresti dare un nuovo look a un vecchio preferito che ti aiuta a ridurre drasticamente il tempo di codifica senza reinventare il tuo flusso di lavoro con compilatori e altre complicazioni: Zen Coding.
Con Zen Coding puoi scrivere un po 'e produrre molto, proprio come con un preprocessore come Jade o Haml, solo che si espande istantaneamente nel vanigliato dell'HTML che ami. Per coloro che sono nuovi al concetto, ti guiderò attraverso come funziona Zen Coding e ti mostrerò alcuni dei miei trucchi preferiti, quindi terminerò con un breve tutorial su come installare e aggiornare Zen Coding in Sublime Text 2.
Coding Zen vs. Preprocessor
Lo Zen Coding è in circolazione da un certo numero di anni, quindi molti di voi leggendo questo sono obbligati a pensare che questa è troppo vecchia scuola per meritare una discussione nel 2012, ma sono disposto a scommettere che molti nuovi programmatori non l'hanno mai dato un colpo.
Inizierò col dire cosa non è lo Zen Coding: non è un preprocessore nella stessa vena di LESS, Sass, Stylus, Jade, Haml e simili. Ci sono comunque delle somiglianze. Come tutti questi, Zen Coding ha una sintassi unica che mira a semplificare il processo di codifica di HTML e CSS.
Tuttavia, a differenza di questi altri strumenti, Zen Coding non aggiunge caratteristiche speciali come variabili o mixin, né richiede alcun file aggiuntivo che deve essere eseguito attraverso un compilatore. Zen Coding emette immediatamente HTML e CSS, nessuno ha alcun modo possibile di sapere che l'hai usato guardando il tuo codice.
Forse un parallelo più vicino è TextExpander, un'app che? Si espande? brevi frammenti di testo in quelli più grandi. Fondamentalmente, Zen Coding è come un gigantesco set di macro di espansione di testo prefabbricate create appositamente per i codificatori HTML e CSS.
Come funziona?
Basta spiegazioni, saltiamo dentro ed esploriamo l'effettiva sintassi dietro Zen Coding. Se hai familiarità con HTML, CSS e il concetto di DOM, sono sicuro che lo raccoglierai immediatamente.
Iniziamo con il lato HTML perché penso che sia la causa di quasi tutti i vantaggi reali. Come primo esempio di base, diciamo che volevamo creare un div semplice con un ID di contenitore, ecco come lo faremmo:
Se hai familiarità con Haml, vedrai immediatamente che alcune delle stesse convenzioni sono usate qui. Innanzitutto ho digitato il nome dell'elemento che volevo, in questo caso un div, quindi ho usato la sintassi simile a CSS di inserire un hashtag per indicare che mi riferisco a un ID. Infine, ho seguito l'hashtag con il testo effettivo che volevo assegnare all'ID:? Container ?.
Come puoi vedere, ho quasi tagliato il mio dattiloscritto richiesto per questo particolare snippet di codice. Non ho dovuto preoccuparmi di eventuali parentesi o virgolette di partenza e chiusura, invece la struttura è stata ridotta al minimo.
Possiamo usare questa conoscenza come punto di partenza per altri frammenti simili. Ad esempio, supponiamo di voler creare un paragrafo con una determinata classe. La sintassi è praticamente la stessa, solo io uso un punto per indicare una classe (di nuovo, proprio come i CSS).
Concatenamento, fratelli e bambini
Salvare una manciata di personaggi è curioso, ma cosa succede se sei uno sviluppatore serio che può digitare tutto ciò nel sonno nell'arco di un secondo? Questa roba di codifica Zen sarà davvero utile?
La risposta è clamorosa? Sì.? In effetti, più la struttura del codice diventa complessa, più utile sarà trovare lo Zen Coding! Il vero potere qui sta nella capacità di concatenare elementi diversi.
Come puoi vedere, è facile creare sia i figli che i fratelli con la sintassi di Zen Coding. Seguendo il tema CSS, i fratelli sono connessi con il? +? il simbolo e i bambini usano il?> var13 ->? simbolo.
Questo apre una grande quantità di tempo e sforzi per risparmiare potenziale. Gioca con questo per alcuni minuti e il tuo cervello inizierà a pensare rapidamente alla struttura dei documenti HTML in questo modo. Prima che tu te ne accorga, digiti sequenze lunghe e avanzate che si espandono in bei pezzi di codice.
CSS Zen
Zen Coding non è solo per HTML, ma ti aiuta anche a codificare i CSS. Per essere onesti, non uso questo aspetto della Codifica Zen troppo semplicemente perché la maggior parte degli editor di testo decenti ha un buon completamento automatico CSS che spendo pochissimo tempo a digitare manualmente le proprietà in ogni caso (anche, il completamento automatico CSS tende a competere con e sovrascrivi la codifica Zen). Lo stesso argomento potrebbe essere detto dell'HTML, ma qui trovo che la codifica Zen è molto più veloce della rotta di completamento automatico.
Tuttavia, questa è tutta la mia opinione personale, potreste scoprire che amate assolutamente il lato CSS di Zen Coding. Ecco un esempio di come funziona:
Come puoi vedere, il lato CSS di solito comporta la digitazione delle iniziali della proprietà, seguito da due punti e le iniziali del valore da assegnare alla proprietà. Come puoi immaginare, ci sono un sacco di proprietà CSS supportate, quindi la memorizzazione qui è molto più complicata rispetto al lato HTML. Assicurati di controllare i fogli dei trucchi.
I miei macro HTML preferiti
Il cheat di Zen Coding può essere piuttosto travolgente dato che c'è così tanto in esso, quindi per aiutarti a farti appassionare fin dall'inizio, ecco alcuni dei miei macro preferiti.
HTML5 Starter
Vuoi iniziare un nuovo documento HTML con una lavagna pulita? Basta digitare? Html: 5? e inizierai con un buon inizio.
Foglio di stile Includi
Una volta che avvii quel nuovo file HTML, vorrai lanciare un foglio di stile. Fortunatamente, puoi farlo in un attimo.
JavaScript incluso
Un altro per la parte di testa del tuo documento. Dopo aver ottenuto il foglio di stile risolto, è il momento di inserire il codice JavaScript.
Tag di ancoraggio
Una delle mie prime domande su Zen Coding è stata, "come funzionano i collegamenti ?? Haml è in realtà piuttosto imbarazzante quando si tratta di qualsiasi tipo di elementi e attributi in linea quindi ero preoccupato che questo potesse essere lo stesso.
Tuttavia, invece di inventare uno schema complicato per inserire il testo del link e l'URL, devi semplicemente digitare? A? e la struttura di base dell'ancora viene creata e preparata per essere riempita. Potrebbe probabilmente essere un po 'migliore, ma almeno è facile da ricordare!
Moltiplicare gli elementi
Zen Coding ha un pratico trucco moltiplicatore che semplifica la creazione di un certo numero di elementi specifici. Ancora una volta, il processo è molto intuitivo, basta usare il? *? simbolo e il numero dell'elemento che vorresti creare.
Numero di incremento
Un altro trucco davvero interessante che è possibile eseguire mentre si moltiplicano gli elementi consiste nell'includere un numero incrementale nel valore della classe o dell'ID. Per fare ciò, implementare il? $? simbolo.
Come faccio a fare questo lavoro?
Zen Coding è supportato in tonnellate di diversi editor di testo e talvolta viene persino integrato, come nel caso di Espresso. Assicurati di controllare la pagina del progetto Google Zen Coding per scaricare i plug-in per il tuo editor.
Come installare Zen Coding su Sublime Text 2
Sono stato sicuramente morso dal bug di Sublime Text. Semplicemente amo questo editor di testo e non ne ho mai abbastanza della sua estensibilità e flessibilità. Un modo semplice e veloce per rendere Sublime Text 2 ancora migliore è aggiungere il supporto Zen Coding.
Per fare ciò, dovrai scaricare il download gratuito di Sublime Package Control da Will Bond. Questo è un fantastico gestore di pacchetti che rende incredibilmente facile trovare e installare plug-in di testo di Sublime.
Una volta installato, premi Command + Shift + P (Command = Control per PC) per visualizzare la Command Palette e digitare la parola "install". Dovresti vedere un articolo che dice: Controllo pacchetto: Installa pacchetto ?, premi invio su tale opzione.
Da qui, digitare? Zen Coding? e dovresti vedere il pacchetto. Premi semplicemente invio di nuovo e il pacchetto verrà installato (riavvia se non ha effetto). Avvia un nuovo documento HTML, digita un'abbreviazione, premi il tab e guarda la magia (assicurati che la tua sintassi sia impostata su HTML o che non funzioni).
Il testo sublime è già un editor fantastico e usarlo insieme a Zen Coding mi fa solo sorridere. È una combinazione assassina da non perdere.
Usi la codifica Zen?
Ad essere onesti, ho davvero perso la barca su Zen Coding quando era popolare un paio di anni fa. Ho sempre trovato l'integrazione dell'Espresso un po 'goffo e, dato che era il mio editor preferito, non l'ho mai esplorato ulteriormente. Ora che sono su Sublime Text mi piace quanto velocemente riesco a usare Zen Coding per liberare una struttura HTML complessa senza il fastidio di tag, resi e simili.
Cosa pensi? Usi Zen Coding per il tuo HTML? Preferisci usare un preprocessore per fare qualcosa di simile? Che ne dici del tuo CSS? Pensi che Zen Coding sia utile per digitare CSS o stai bene con il completamento automatico?