Usa Emmet per crea strutture HTML in un lampo!

Sono convinto che lo strumento che ti presento oggi ti sarà sicuramente di aiuto!

In SkillsAndMore cerchiamo di facilitarti il compito presentandoti le nozioni necessarie attraverso i nostri articoli e i corsi con l’intenzione di velocizzare il tuo apprendimento e proprio per questo motivo oggi ti parliamo di una soluzione che ti aiuterà a scrivere codice HTML, CSS e JavaScript.

Lo strumento che ti voglio presentare prende il nome di Emmet e anche se non è uscito l’altro ieri, conosco molti sviluppatori che ancora non lo usano nel proprio lavoro. Proprio per questo ho deciso di presentartelo e di farti vedere quanto può velocizzare la tua immissione quotidiana di codice.

Se stai pensando che non hai bisogno di un altro strumento per velocizzare la stesura del tuo codice, ti consiglio di pensare di nuovo perché Emmet è in grado di creare intere strutture HTML in un lampo.

Sinceramente non sono soltanto io l’unico a dirlo, anche Smashing Magazine ha dedicato un articolo molto dettagliato, quindi se non vuoi prendere soltanto la mia parola dai pure un’occhiata all’articolo che ti ho appena collegato.

Prima di scoprire come installarlo all’interno del tuo editor di codice preferito sento il dovere di chiarire che cosa Emmet non è.

Emmet non è un semplice text expander!

Un text expander prende una stringa (diciamo html) e la espande creando la struttura di cui hai bisogno. Questi strumenti sono da sempre molto graditi soprattutto da chi usa molto le email e vuole velocizzare la stesura del testo per risposte comuni. Ovviamente questa cosa può avvenire anche nei nostri editor di codice e come ti ho spiegato nel corso dedicato ad Atom prende il nome di snippet.

Emmet però permette di fare molto di più, ma prima di poter vedere nel dettaglio le sue caratteristiche è necessario installarlo.

Come installare Emmet

Se ti stai interessando e vuoi iniziare a provare questo nuovo strumento, la prima cosa che devi fare è installare questo plugin all’interno del tuo editor di testo preferito.

Se hai letto l’articolo sulle migliori estensioni di Atom avrai anche scoperto che è possibile installare questo plugin grazie al gestore di package interno. Ci sono altri editor che hanno la possibilità di gestire le proprie estensioni grazie a strumenti simili, come nel caso di Sublime Text o VS Code, ma per assicurarti che anche il tuo editor abbia la possibilità di installare questo plugin ti consiglio di consultare la pagina appropriata presente nel sito di Emmet.

Molto probabilmente, consultando la sua pagina di download, ti sarai stupito nel vedere quanti editor e servizi online ti permettono di utilizzare questo plugin, questo è sicuramente un punto a favore perché assicura un grande interesse e una sicura longevità del progetto stesso.

Se il tuo editor di testo non presenta alcun gestore di estensioni non devi assolutamente preoccuparti, magari è giunto il momento di spostare il tuo interesse verso un editor di codice moderno perchè il fatto che il tuo editor non supporti Emmet potrebbe essere un segnale della carenza del suo sviluppo.

Iniziamo ad usare Emmet

Adesso che hai installato questo plugin è giunto il momento di imparare ad usarlo! Come ti dicevo precedentemente, io andrò ad utilizzare Atom e sono su Mac (queste sono due cose che potrebbero cambiare le scorciatoie da tastiera), infatti nel mio caso specifico, una volta installato il package in Atom, è apparsa una nuova voce menu che mi mostra tutte le scorciatoie che posso utilizzare, qua sotto trovi uno screenshot.

Controlla le scorciatoie da tastiera che hai nel tuo sistema, anche se, il tasto che utilizzerai maggiormente durante questo articolo sarà sopratutto il tasto TAB (quel tasto che ti aiuta ad indentare il codice nei tuoi file).

Crea il tuo primo <div> con classe personalizzata

Non perdiamo altro tempo e iniziamo subito con qualcosa di concreto! Spostati sul tuo editor con installato Emmet e digita quanto segue:

.test

Nient’altro! Tutto quello che devi fare è inserire nel tuo file HTML una qualsiasi classe CSS, in questo esempio .test, e successivamente premere il tasto Tab o in alcuni casi il tasto Invio.

<div class="test"></div>

Che cosa è successo?

Con la scrittura di una semplice classe e la pressione di un singolo tasto il plugin Emmet è in grado di costruire un elemento <div> che conterrà qualsiasi altro elemento.

Se finisse qua l’utilità di utilizzare Emmet la cosa non sarebbe poi così interessante, ma ci sono molte altre cose che fanno di questo plugin un potente strumento.

Crea la tua prima struttura HTML

Una delle cose più interessanti di questo plugin risulta nella possibilità di creare intere strutture HTML (rispettando anche la loro indentazione) in pochissimi secondi. Facciamo subito un esempio, stai creando la struttura del tuo sito e ti sei accorto che devi inserire un menu all’interno dell’elemento <header>, benissimo un primo piccolo test per questo potente plugin!

Ecco cosa dovresti inserire all’interno del tuo editor:

header>nav.menu>ul>li*4

Come puoi notare tu stesso, ci sono alcuni caratteri che non abbiamo ancora presentato ma, prima di farlo, perché non provi ad estendere questa stringa?

<header>
    <nav class="menu">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</header>

Guarda un po’ che cosa sei stato in grado di creare… Un intero menu contenente 4 elementi differenti che conterranno le singole voci! È giunto però il momento di andare a scoprire i due caratteri che abbiamo utilizzato:

• > (maggiore) – con questo simbolo sarai in grado di indicare quale elemento dovrà essere incluso all’interno di quello presente a sinistra, ecco come è stato possibile inserire <nav class="menu"> all’interno di <header>;
• * (moltiplica) – come puoi notare dall’elemento lista, questo carattere è stato utilizzato per indicare quante volte lo stesso dovrà essere ripetuto all’interno della pagina (infatti troviamo quattro volte l’elemento <li>).

Già a questo punto Emmet ha dimostrato che è in grado di creare una perfetta struttura HTML senza la necessità di stare a scrivere ogni singolo elemento, ma ci sono molte altre cose che ti potrebbero essere utili…

Inserisci gli attributi

Al momento abbiamo visto quanto sia intuitivo inserire le classi degli elementi e in modo molto simile potrai anche impostare gli ID (ti basta utilizzare il carattere # prima del nome ID dell’elemento), ma la cosa che è ancora più interessante è che puoi inserire qualsiasi altro attributo.

Se la cosa ti sembra troppo bella per essere vera, prova ad inserire il seguente codice:

a[href="http://google.com" title="Google"]

Ed ecco che cosa ti verrà restituito:

<a href="http://google.com" title="Google"></a>

Probabilmente non sembra che tu stia salvando un gran numero di caratteri, ma proviamo adesso a combinare alcuni degli operatori che abbiamo utilizzato fino ad ora per inserire del contenuto all’interno dei vari elementi.

Inserisci Fake Content

Siamo giunti al momento in cui è utile iniziare ad avere del contenuto di esempio all’interno della propria struttura HTML (quante volte ti sei trovato a scrivere Link 1, Link2 ecc… tutto a manina?!?), con la scorciatoia che trovi qua sotto potrai fare tutto questo premendo semplicemente il pulsante TAB:

ul>li.item$*5>a{Link$}

In questo caso stiamo creando una lista contenente link con testo, riesci ad immaginare a che cosa serve il simbolo $? Guardiamo l’esempio:

<ul>
    <li class="item1"><a href="">Link1</a></li>
    <li class="item2"><a href="">Link2</a></li>
    <li class="item3"><a href="">Link3</a></li>
    <li class="item4"><a href="">Link4</a></li>
    <li class="item5"><a href="">Link5</a></li>
</ul>

Ecco che, a questo punto, sei stato in grado di inserire non soltanto delle classi uniche per ogni elemento della lista (in questo caso probabilmente sarebbe stato meglio utilizzare un ID) e in aggiunta hai anche inserito del testo all’interno degli elementi <a>! Mica male per una singola linea di codice.

Quindi, per raggruppare i nuovi caratteri che abbiamo utilizzato in questa porzione di codice, dai un’occhiata a questa lista:

• $ (dollaro) – questo semplice carattere aggiungerà un numero che rispetta l’ordine del tuo elemento, in questo modo potrai distinguere facilmente i tuoi elementi;
• {} (parentesi graffe) – grazie all’utilizzo di queste parentesi sarai in grado di inserire del testo personalizzato all’interno dei tuoi elementi e potrai utilizzarle assieme al carattere $ che ti permetterà di differenziare ogni singolo elemento.

Crea elementi gemelli

Al momento abbiamo analizzato soltanto quelle regole che permettono di includere un elemento all’interno di un altro, ma che cosa dovremmo fare per inserire due elementi che occupano la stessa posizione all’interno della struttura delle tue pagine?

Come Emmet ci ha abituato fino ad ora, molto probabilmente dovremmo utilizzare un altro carattere, ed è proprio così!

Il nuovo carattere che ci permette di creare degli elementi gemelli è quello di addizione +, ecco un facile esempio che ti permetterà di capirlo:

article>header.titolo+section.corpo+footer.piede

Quello che sto cercando di fare un questo momento è creare una semplice struttura per l’elemento <article>, ecco come si trasforma questa sintassi una volta premuto il pulsante TAB:

<article>
    <header class="titolo"></header>
    <section class="corpo"></section>
    <footer class="piede"></footer>
</article>

La struttura HTML è pronta ad accettare qualsiasi contenuto tu desideri e potrai personalizzarla come meglio credi, ma adesso sai anche come sia facile inserire degli elementi gemelli all’interno della tua struttura HTML; tutto quello che devi fare è utilizzare il carattere +!

Conclusioni

Quest’oggi ti ho presentato uno strumento che ti permetterà di velocizzare incredibilmente la creazione dei tuoi file HTML e anche io ho deciso di utilizzarla sempre più spesso quindi, d’ora in avanti, quando vedrai i nostri video e vedrai comparire delle strutture HTML da una singola linea di codice non pensare che sia magia, è semplicemente Emmet che svolge egregiamente il suo lavoro!

Spero che questa risorsa sia utile a te quanto lo è per me e volevo sfruttare queste ultime righe dell’articolo per ricordarti che potrebbe far comodo anche a molti tuoi colleghi ed amici, ricordati quindi di condividere questo articolo con loro perché sono sicuro che te ne saranno eternamente grati!