Le probabilità sono, ormai sai tutto su Sass ei suoi fratelli (MENO, Stilo, ecc.). Amateli o li odiate, questi preprocessori CSS stanno facendo un grande successo nella comunità di sviluppo. In molti modi rappresentano un modo più rapido ed efficiente per scrivere CSS e se sali a bordo, apprezzerai senza dubbio la flessibilità che portano al tuo progetto.
Una volta che sei stato morso dal bug del preprocessore CSS, inizierai inevitabilmente a guardare l'HTML e chiederai perché deve essere così ingombrante. Perché qualcuno non semplifica drasticamente il modo in cui scriviamo il markup? Si scopre che le stesse persone che ci hanno portato Sass hanno fatto proprio questo con un linguaggio chiamato Haml. Oggi daremo un'occhiata e vediamo come usare Haml per cambiare completamente il modo in cui scrivi il markup.
Cos'è Haml?
Al suo centro, Haml è un linguaggio di marcatura leggero. L'equivalente più simile a quello che probabilmente conosci è Gruber's Markdown, che è funzionalmente simile ma più orientato verso gli scrittori.
Come Markdown, Haml rende la scrittura HTML molto più semplice e, quando lo dico, molto più facile? quello che voglio dire è che non crederai a quanto tempo puoi risparmiare usando Haml. A mio parere, è ancora più di un evidente risparmio di tempo rispetto a Sass. Molti sviluppatori danno un'occhiata a Sass e pensano: "Neat! Ma non ne vedo davvero il bisogno. Con Haml, quasi tutti gli sviluppatori, indipendentemente dal fatto che acconsentirebbero a usarlo o meno, dovrebbero immediatamente vedere gli intensi vantaggi in termini di tempo che porta in tavola.
Non solo per sviluppatori di rubini
Il grosso problema con Haml è che può intimidire semplicemente perché il sito Haml è così orientato verso gli sviluppatori di Ruby. Uno sviluppatore HTML casuale si fermerà da questo sito solo il tempo necessario per leggere la dichiarazione ? Haml è il passo successivo nella generazione di visualizzazioni nell'applicazione Rails.? Questo combinato con più riferimenti a ERB solo urla? Non appartieni qui? ai semplici vecchi sviluppatori front-end.
Questo è sicuramente un peccato perché, come ho appena detto, chiunque scriva HTML può usare Haml in un certo senso. Certo, non utilizzerai tutte le funzionalità, ma sono sicuro che non utilizzi tutte le funzionalità di Photoshop, ma lo accendi ancora ogni giorno.
Il mio punto è che se non hai mai scritto una riga di Ruby nella tua vita e non hai intenzione di farlo, non lasciarti spaventare da Haml. È ancora immensamente divertente. Oggi discuteremo Haml esclusivamente come un modo per scrivere HTML, quindi non importa dove ti trovi nello spettro di sviluppo che dovresti essere in grado di seguire.
La tua prima linea di Haml
Ora che hai un'idea di base di ciò che Haml è a livello concettuale, è il momento di prendere le gomme e vedere come funziona. Alla fine, dovremo discutere su come compilare il tuo Haml in HTML (non ti preoccupare, è semplice) ma per ora prova ad ignorarlo e ad assimilare la lingua. Quando dico? Compila? Sappi che tratteremo presto questo processo.
La bellezza di Haml è che si tratta di? DRY ?, che significa che c'è stato un tentativo di eliminare la più fastidiosa ripetizione HTML inerente possibile. Ad esempio, considera la struttura dei tag. Ecco una struttura di paragrafo standard:
HTML:
Nota come anche il bit più semplice dell'HTML comporta alcune ripetizioni. Il tag di paragrafo deve essere posizionato all'inizio dell'istruzione, quindi un tag di chiusura corrispondente deve essere posizionato alla fine. E se potessimo saltare tutte queste sciocchezze? Ecco la stessa affermazione in Haml:
Haml:
In Haml, prefixiamo i tag HTML con un?%? e si prende cura di tutto il resto. Ma aspetta di implorare, come si fa a distinguere tra due elementi senza il tag di chiusura? La risposta è ovviamente che Haml è spazio bianco dipendente, nel senso che usa la struttura visiva del tuo codice per determinare l'output HTML. Ecco un altro esempio che utilizza più elementi e nidifica persino alcuni elementi all'interno di altri (gli elementi dell'elenco sono nidificati nell'elenco non ordinato).
Haml:
Nel semplice vecchio HTML, i rientri in una lista non ordinata sono semplicemente di orientamento visivo e non hanno alcun significato semantico. In Haml però, dicono al compilatore che quegli elementi della lista vanno all'interno del tag precedente, che in questo caso è un ul.
All'inizio potrebbe essere difficile avvolgere il cervello, ma il codice sopra è il codice qui sotto, il che significa che sono perfettamente equivalenti. Se scriviamo sopra Haml e lo inseriamo in un compilatore, esso sputa l'HTML qui sotto.
HTML:
Come puoi vedere, la versione HTML richiede molti più caratteri. Usando Haml, ci siamo salvati più di trenta sequenze di tasti in questo piccolo frammento. Espandi questo concetto su un intero sito web e puoi facilmente vedere le implicazioni.
Classi e ID
Senza la tradizionale struttura dei tag, ci si potrebbe chiedere come dichiarare elementi HTML aggiuntivi come classi e ID. Haml è molto più avanti di te e usa anche una sintassi che troverai stranamente familiare.
Haml:
Come puoi vedere, il?.? e ?#? i simboli sono usati per denotare rispettivamente classi e ID. Questo è fantastico perché hai già familiarità con questo metodo in CSS. Quella familiarità significa che una volta che ti tufferai davvero, sarai in grado di prendere Haml in pochissimo tempo. Ecco come viene compilato questo codice.
HTML:
Divs Are Magic
Ammettiamolo, anche con tutti i fantastici nuovi elementi HTML5, amiamo ancora tutti i nostri div.Dato che questo particolare elemento è così comune, Haml gli ha assegnato una sintassi particolarmente semplice. Pensa a come pensi di poter scrivere il seguente codice HTML in Haml.
HTML:
Considerato ciò che abbiamo imparato finora, senza dubbio giungerai alla conclusione che qualche forma di?% Div? è necessario qui. Tuttavia, Haml consente di saltare la sintassi div tutti insieme. Per scrivere l'HTML sopra in Haml, questo è tutto ciò di cui hai bisogno.
Haml:
Questo è tutto! Questo codice compila in un div completo con un ID di "someDiv". Anche gli scettici tra di voi devono ammettere che questo è abbastanza pericoloso. Ancora una volta vediamo i chiari vantaggi di poter scrivere il nostro markup come se scrivessimo CSS.
Solo per assicurarti di aver davvero capito come funziona, ecco un esempio molto più ampio. Questa volta useremo un div principale e due div interni insieme ad un sacco di altri elementi.
Haml:
HTML:
Questa volta puoi veramente iniziare a sentire il fantastico potere di Haml. Il fascino qui va oltre il fatto che abbiamo salvato un sacco di personaggi e anche poche righe intere, notate quanto è più facile leggere l'Haml a colpo d'occhio. Tutto il brutto clutter che viene fornito con HTML è stato spazzato via e al suo posto c'è una chiara gerarchia di markup che è immediatamente riconoscibile.
Che dire di HTML5?
Nel caso ve lo stiate chiedendo, Haml funziona perfettamente con tutti i nuovi e interessanti tag all'interno di HTML5. In realtà, non interessa davvero quale tipo di tag si tenta di creare. Se si digita ?% Somecrazytag? il risultato finale sarà ?? indipendentemente dal fatto che questo non sia nemmeno un HTML valido.
Ecco un rapido esempio per illustrare che utilizza i nuovi tag HTML5 di header, nav, section e footer.
Haml:
HTML:
Mescolalo con HTML
Un'ultima cosa grandiosa di Haml è che, proprio come con Sass, puoi sempre lanciare la sintassi originale ogni volta che vuoi e tutto verrà comunque compilato bene. Ad esempio, personalmente non mi piace come Haml gestisca l'inserimento di semplici collegamenti testuali (è un po 'eccentrico) quindi mi attengo alla normale sintassi HTML.
Haml:
Qui sto mixando vanilla HTML con Haml ed è perfettamente accettabile. Quando questo compila, il risultato è esattamente quello che ti aspetteresti che sia.
HTML:
Questo rende molto facile l'utilizzo di Haml. Se ti imbatti in qualcosa che semplicemente non riesci a capire come fare, non devi passare ore di ricerca alla ricerca della soluzione, basta usare l'HTML!
Haml succhia per il contenuto
Più ho ricercato Haml, più mi sono reso conto che non sono l'unico a essere disturbato dalla sua sintassi di collegamento o da altre strutture di contenuto. Infatti, Chris Eppstein ha scritto un pezzo intitolato in modo audace Haml Sucks per i Contenuti in cui ha persino ottenuto un accordo con quella dichiarazione del creatore di Haml, Nathan Weizenbaum!
Assicurati di leggere quel post prima di commentare questo argomento, in quanto mette in evidenza molte critiche di Haml valide che sono completamente d'accordo. La soluzione offerta da Eppstein è di usare Haml solo per? Layout & design? scopi. Quindi procede per raggiungere la stessa conclusione che ho fatto: è ok usare HTML nel tuo Haml. A volte è solo più semplice.
Eppstein sottolinea anche altre possibilità come l'utilizzo del filtro Markdown Haml per contrassegnare il contenuto.
Strumenti per la compilazione di Haml in HTML
Questa è la parte in cui corri per le colline perché inizio a parlare dell'installazione di gemme Ruby per compilare il tuo codice giusto? Sbagliato. Fortunatamente, non dobbiamo saltare attraverso qualche stravagante cerchio o persino rompere la linea di comando per compilare Haml. Ci sono molti ottimi strumenti che lo fanno per noi.
Per cominciare, c'è l'app # haml.try sul sito web ufficiale di Haml. Questo ti permette di digitare Haml in un campo di testo e ricevere output HTML.
Tuttavia, se stai cercando un compilatore online, puoi fare molto meglio di questo semplice strumento. Personalmente mi piace davvero Rendera, che ha una bella vista divisa che mostra l'input di Haml e l'output HTML fianco a fianco. Puoi persino passare dall'output HTML live alla sorgente.
È anche interessante notare che Tinkerbin supporta Haml. Non è la soluzione ideale se stai cercando di copiare e incollare l'output HTML, ma probabilmente è il modo migliore per sperimentare Haml e Sass senza alcun tipo di installazione.
Per utenti Mac
Se stai cercando di usare Haml nel tuo ambiente di programmazione locale e capita di essere un utente Mac, sei fortunato perché ci sono alcuni strumenti fantastici per aiutarti. La prima cosa che ti consigliamo di scaricare è la beta pubblica gratuita di Chocolat, un editor di testo fantastico che supporta l'evidenziazione della sintassi modesta per un milione di lingue diverse, incluso Haml. C'è stato anche almeno un tentativo di creare uno zucchero Haml Espresso.
Sfortunatamente, l'unico vero vantaggio dell'utilizzo di Chocolat è che non dovrai digitare testo in chiaro, in realtà non verrà compilato per te. Per questo, dovrai consultare un'altra beta pubblica gratuita: Codekit.
Codekit funziona con Haml, Sass, Less, Stylus e CoffeeScript. Fondamentalmente, tiene d'occhio la cartella del progetto in modo che molto tempo si salvi o si aggiorni uno di questi tipi di file (nel nostro caso un file .haml), esso elabora ed emette automaticamente il file equivalente standard. Assicurati anche di controllare Live Reload, che funziona allo stesso modo ma vive nella barra dei menu.
Conclusione
Se sei saltato sul carrozzone Sass, LESS o Stylus e hai cercato una soluzione simile per HTML, Haml è la tua risposta. Ti permette di scrivere codice magnificamente semplice che ti fa risparmiare tempo e può essere più facile da leggere dopo esserti abituato.
La cosa sfortunata di Haml è che è un po 'spaventoso per gli sviluppatori non-Ruby semplicemente perché la documentazione è così orientata verso Ruby. Vi prometto però che, anche se non sapete nulla di Ruby, Haml è ancora abbastanza divertente da scavare e sperimentare per un semplice output HTML.
Ora che abbiamo coperto le basi, esci e prova Haml per te stesso. Assicurati di controllare il sito web di Haml per maggiori informazioni e aggiungi questo segnalibro a Haml per iniziare rapidamente.