Corsi on-line

Emmet, un nuovo modo di utilizzare gli snippets

Emmet non è propriamente un editor, ma più esattamente un plugin appositamente dedicato ai Web developers che realizzano applicazioni e soluzioni basate su HTML e CSS; tale estensione potrà essere integrata in tutti i più importanti editor tra cui anche i diffusissimi Notepad++, Aptana, Coda, CodeMirror, PSPad, Espresso, TextMate e Komodo Edit; dotato di tutte le funzionalità classiche per uno strumento di questo tipo, come per esempio la syntax highlighting e l’indentazione dei sorgenti, Emmet introduce però anche un nuovo concetto di utilizzo degli snippets.

Generalmente i text editor permettono la memorizzazione di porzioni di codice (“chunks“) riutilizzabili al fine di velocizzare i tempi di produttività; il limite degli snippets sta però nel fatto che questi ultimi, per poter divenire parte integrante del flusso di lavoro, devono essere definiti e allocati in precedenza e poi implementati a runtime; Emmet propone invece un nuovo approccio per la manipolazione dei chunks.

In pratica, il plugin permette di digitare delle espressioni basate su costrutti sintattici ripresi dai fogli di stile che subiranno un’azione di parsing dinamico durante la fase di stesura; il funzionamento di tale meccanismo si fonda su delle abbreviazioni CSS-like, dopo averle inserite nel listato esse potranno essere “espanse” tramite una “action” in modo da restituire il markup di pagina corrispondente.

Per fare un esempio, l’abbreviation:

#page>div.logo+ul#navigation>li*5>a{Item $}

Produrrà un output composto da un div associato all’id “page” al cui interno vi sarà annidato un ulteriore div (classe “logo”) e un elenco puntato (id “navigation”) che presenterà 5 diversi elementi:

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Emmett (“the essential toolkit for web-developers“) è scaricabile da GitHub ed è disponibile per il libero utilizzo sotto licenza Open Source; per installare il plugin sarà necessario disporre di alcune dipendenze: il framework Node.JS, il Package manager NPM, DocPad and Grunt.js.

Post correlati
I più letti del mese
Tematiche