Blog

Scrivere codice più velocemente? EMMET è la scelta giusta.

Molteplici volte capita di perdere letteralmente tantissimo tempo, soprattutto per coloro che sono alle prime armi, nello scrivere codice. Per risolvere questo problema sono stati creati innumerevoli tools (plugins), che ci mettono a disposizione delle abbreviazioni dedite ad auto completare il nostro codice HTML e CSS.

Uno dei più conosciuti ed utilizzati è appunto EMMET, che non solo si occupa di prendere una stringa e di espanderla creando una struttura ben definita, ma di molto altro.

Per poter utilizzare EMMET, devi prima installarlo all’interno dell’editor di testo che hai deciso di utilizzare.

Gli editor di testo più moderni e più utilizzati hanno un gestore di pacchetti interno, che ci permette di installare e attivare EMMET in pochissimo tempo.

Alcuni ide (editor di testo), come ad esempio Visual Studio Code, hanno questa funzionalità integrata.

Se il tuo editor non presenta un gestore di estensioni, ti consiglio vivamente di utilizzarne un altro più moderno e performante.

Dopo averlo installato è arrivato il momento di concentraci sul suo funzionamento.

Le scorciatoie da tastiera possono cambiare in base al tuo editor di testo e al tuo sistema, quindi controlla nelle impostazioni per visualizzare e modificare i comandi.

Adesso vediamo passo per passo degli esempi che ti consentiranno di apprendere al meglio come utilizzare questo fantastico tool.

Per creare la struttura HTML completa ti basterà scrivere html:5 e premere il tasto TAB.

 ../html-emmet.png

Con EMMET puoi creare un tag HTML div specificando la classe o l’id che vogliamo aggiungere all’elemento.

Ti basterà digitare il nome della classe o dell’id preceduto rispettivamente dal punto (.) o dal cancelletto (#) e spingere TAB.

../Schermata%202021-05-28%20alle%2015.37.43.png

Otteniamo: 

../Schermata%202021-05-28%20alle%2015.40.22.png

La peculiarità di questo potentissimo strumento è quella di poter creare intere strutture HTML in un tempo irrisorio.

Se per esempio volessimo creare un elenco all’interno dell’elemento footer, digita questo codice e premi TAB.

 ../Schermata%202021-05-28%20alle%2015.52.55.png

Risultato: 

../Schermata%202021-05-28%20alle%2015.58.27.png

Con una facilità impressionante sei riuscito a creare questa struttura composta dall’elemento footer con all’interno una lista non ordinata caratterizzata da 5 voci. I due simboli utilizzati > e * indicano rispettivamente l’elemento contenuto all’interno e quante ricorrenze ci sono di quell’elemento.

Puoi inserire anche attributi utilizzando questa specifica sintassi:

../Schermata%202021-05-28%20alle%2016.17.32.png

Risultato: 

../Schermata%202021-05-28%20alle%2016.18.45.png

Dopo aver visto tutto questo possiamo soffermarci su come inserire del contenuto in maniera veloce e automatica.

../Schermata%202021-05-28%20alle%2016.49.38.png

Risultato: 

In questo specifico caso ci soffermiamo sull’utilizzo del simbolo $, che ti ha permesso di creare un id univoco per ogni elemento della lista in maniera automatica e soprattutto rispettando l’ordine dello stesso.

Invece per quanto concerne l’utilizzo delle parentesi, quest’ultime servono per inserire all’interno del contenuto testuale personalizzato.

In questo articolo abbiamo analizzato in maniera accurata, alcune delle principali funzionalità di EMMET. 

Consulta la documentazione ufficiale https://docs.emmet.io/ per approfondire l’argomento.

Personalmente ti consiglio di usarlo e di imparare ad utilizzare al meglio questi piccoli trucchetti che ti agevoleranno nel lavoro in maniera notevole. 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Un fattore importante e spesso sottovalutato per avere successo nel campo del web development è la capacità di fare buone domande e sapere dove trovare aiuto all’occorrenza. Quando Google non bast…
Le tecnologie legate all’intelligenza artificiale stanno facendo progressi rapidi, suscitando al tempo stesso non poche congetture. Da scenari distopici in stile 2001: Odissea nello spazio, passando…
Il settore tech è appannaggio esclusivo della popolazione maschile? Questo preconcetto è abbastanza diffuso, ma come stanno davvero le cose? Oggigiorno il mondo tech, non solo in Italia, è in gran …

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.