In questa guida dedicata a Brackets abbiamo visto come è possibile sfruttare le funzionalità native messe a disposizione dal software e, inoltre, come sia possibile installarne di nuove attraverso le estensioni che permettono l'inserimento di strumenti e di caratteristiche aggiuntive rispetto a quanto presente di default.
Sono disponibili centinaia di estensioni all'interno del pannello dedicato ma in questa lezione voglio soffermarmi in particolare su una che credo indispensabile in quanto permette di ottimizzare il lavoro e ridurre enormemente il codice digitato perché, come vedremo, andrà a scriverlo al nostro posto.
Utilizzata da milioni di persone l'estensione chiamata Emmet fornisce agli utenti una varietà di funzionalità di produttività, come l'abbreviazione di codice, il completamento di tag, la creazione di modelli e così via.
L'estensione Emmet di Brackets consente di abbreviare e espandere il codice utilizzando segni di abbreviazione definiti da Emmet stessa e visibili all'interno di questo link.
Emmet è uno strumento incredibile per gli sviluppatori Web che desiderano creare e modificare rapidamente codice in quanto, grazie a rapidi comandi, è possibile scrivere costrutti anche molto complessi.
Emmet si basa sui selettori CSS utilizzati nello sviluppo Web.
Utilizzando alcune semplici abbreviazioni, è possibile scrivere rapidamente codice che altrimenti richiederebbe molto più tempo, tra poco vedremo come funziona e faremo anche degli esempi pratici, ora però vediamo come installare l'estensione.
Installare Emmet
Come già visto all'interno della precedente lezione, ci dirigiamo all'interno del repository delle estensioni, passando per l'icona a forma di Brick situata nella sidebar di destra.
A questo punto dovremo accedere alla tab chiamata "Disponibili" e cercare semplicemente il nome "Emmet"
Una volta trovata, clicchiamo sul tasto "installa" ed andiamo ad eseguirne l'installazione.
A questo punto noteremo che all'interno della barra superiore sarà comparsa la voce "Emmet", dove all'interno troviamo l'elenco delle opzioni disponibili e delle funzionalità.
Passiamo ora alla parte pratica e vediamo come funziona l'estensione Emmet.
Come funziona l'estensione Emmet
Per prima cosa, creiamo un nuovo documento ("File > Nuovo") ed assegniamo la tipologia di file tramite la voce in basso a destra ed infine salviamo.
Ora clicchiamo all'interno della Main area, ovvero la parte centrale e scriviamo il seguente codice avendo cura di non lasciare spazi bianchi.
{
div>div>p
}Cosa stiamo facendo?
Stiamo sfruttando la scrittura semplificata di Emmet per creare due elementi
{<div>}con all'interno un elemento
{<p>}A seguito della stringa appena scritta basterà cliccare il tasto TAB oppure andare all'interno della Topbar alla voce "Emmet" e selezionare "Expand Abreviation".
Il risultato che otteniamo è il seguente:
{
<div>
<div>
<p></p>
</div>
</div>
}Strepitoso no?
Ma continuiamo, infatti è solo l'inizio.
Possiamo essere ancor più specifici e scrivere:
{
ul>li*6
}Con questa istruzione stiamo andando a creare una lista formata da 6 elementi
{<li>}Infatti al click del tasto TAB, quindi all'esecuzione del comando, quello che otteniamo è il seguente codice:
{
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
}Notevole no?
Cos'altro possiamo fare grazie all'estensione Emmet?
Possiamo indicare maggiori informazioni, come ad esempio Classi (.) e Id (#), che sono informazioni indispensabili in HTML, ovvero il linguaggio di Markup più utilizzato al Mondo.
Procediamo quindi assegnando dei nomi agli elementi HTML grazie all'estensione Emmet.
Scriviamo la seguente istruzione:
{
div#contenitore>div#contenitore_interno>h1.titolo+h2.sottotitolo+p.paragrafo*2
}e otteniamo il seguente costrutto HTML:
{
<div id="contenitore">
<div id="contenitore_interno">
<h1 class="titolo"></h1>
<h2 class="sottotitolo"></h2>
<p class="paragrafo"></p>
<p class="paragrafo"></p>
</div>
</div>
}Noterai che ho usato anche un'altra nuova istruzione all'interno della stringa, ovvero il segno +
Questo simbolo va ad aggiungere un elemento all'interno dello stesso contenitore, mantenendo gli elementi sullo stesso piano, proprio come fatto per gli elementi <h1> <h2> <p>.
Facciamo un passo indietro e vediamo la scorciatoia più utile di tutte, ovvero colei che ci consentirà di creare una nuova struttura HTML di default necessaria per la scrittura di tutti i documenti HTML.
Puliamo il foglio e scriviamo semplicemente il simbolo del punto esclamativo, ovvero !, dopodiché eseguiamo l'operazione.
Quello che otteniamo è il seguente codice, che altro non è che la struttura base di ogni file HTML, ovvero quella struttura che contiene i macro gruppi di elementi necessari alla corretta lettura dei file.
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
}Procediamo con la scoperta delle funzioni messe a disposizione dall'estensione Emmet e vediamo come è possibile raggruppare gli elementi attraverso piccole stringhe di codice.
Scriviamo la seguente istruzione:
{
div>(header>ul>li*2>a)+footer>
}Eseguiamo per ottenere il risultato in corretto linguaggio HTML il seguente costrutto:
{
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
}Quello che otteniamo è l'esplosione degli elementi completati ed in corretta scrittura già suddivisi tra macro gruppo <header> e <footer> con i relativi ordinamenti assegnati.
Possiamo spingerci anche oltre, ed "i conti" farli fare a Emmet.
Durante la creazione di elementi multipli è possibile infatti assegnare nomi diversi, capita infatti durante la creazione di elementi <div> o liste <li> di aver bisogno di nomi diversi per differenziare gli elementi.
Possiamo ottenere questo risultato utilizzando la seguente stringa:
{
ul>li.item$*5
}A questo punto quello che accadrà sarà la creazione di un elenco composta da 5 elementi ma tutti ben differenziati e richiamabili grazie all'assegnazione del nome ad incremento numerico.
{
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
}Altre scorciatoie molto utili ed utilizzare sono le seguenti:
{
link:css
}Utile per scrivere in maniera automatica il codice necessario ad inserire fogli di stile CSS.
{
<link rel="stylesheet" href="style.css">
}Possiamo scrivere anche la dicitura che ci permetterà di inserire immagini grazie al tag img ed eseguirla, quello che otterremo sarà il seguente codice:
{
<img src="" alt="">
}All'interno del seguente link è presente l'elenco completo degli shortcode di Emmet, consiglio quindi di scoprire ogni funzione a disposizione e adattarla al tuo ambiente di lavoro.
Insomma, possiamo chiudere questa lezione con la certezza che utilizzando l'estensione Emmet su Brackets è essenziale per ottimizzare la scrittura del codice CSS, abbreviando le istruzioni ed riducendo il tempo di scrittura sarà molto più semplice scrivere e faremo fare a Emmet il lavoro di scrittura fornendo lui le istruzioni necessarie per migliorare il nostro workflow.