Tempo di lettura stimato: 2 minuti

Per chi non lo sa, gedit è l’editor di testo per eccellenza di qualsiasi distribuzione Linux basata su Gnome. È preinstallato sulla maggior parte delle distribuzioni Linux, ad eccezione di quelle basate su window managers diversi da Gnome (Kde, xfce, enlightenment, ecc.). Serve soprattutto per l’editing delle configurazioni nei file di sistema, ma supporta un gran numero di linguaggi di programmazione ed è espandibile con i plugin dedicati.

Per questo motivo, prima di usare Brackets, ho usato Gedit anche per l’editing di HTML e CSS.

Questo è gedit.

“Zen coding” invece è un nuovo modo, più rapido, di scrivere l’HTML. I plugin ufficiali (scaricabili dal repository: http://code.google.com/p/zen-coding/) sono rilasciati sotto licenza MIT, ma ne esistono di non ufficiali anch’essi elencati nel repository, fra cui un paio per gedit: il plugin di Frank Marcias e quello di Mike Crittenden.

In realtà i due plugin sono molto simili e l’installazione di entrambi è elementare, basta aver dimestichezza con file e cartelle. Non mi dilungherò in un tutorial sull’installazione dell’uno o dell’altro, entrambe le procedure sono ben documentate sui rispettivi GitHub, vorrei più che altro soffermarmi sul funzionamento del plugin in se.

Supponiamo di dover creare in una pagina HTML l’intestazione e il menu di navigazione di un sito. Normalmente questo è quello che scriveremmo “a mano”:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Con zen coding scriveremo invece una singola riga di istruzioni, che verranno interpretate ed espanse nel modo che conosciamo:

div#page>div.logo+ul#navigation>li*5>a

La spiegazione è semplice ed essenziale, basta confrontare i due codici. In pratica il primo termine definisce un tag, se seguito da “#termine” imposterà l’id del relativo tag come “termine”, se a seguire mettiamo il simbolo “minore” (>) il tag che seguirà sarà figlio del primo tag. Se invece a seguire mettiamo il simbolo “+” il tag che segue sarà “fratello”. È poi possibile specificare un numero di ripetizioni dello stesso tag (ed eventualmente dei relativi attributi), moltiplicandolo per un numero a scelta (“li*5”).

Sul repository Google di zen coding, possiamo trovare una lista di tutti gli scenari possibili. È una pagina da tenere nei preferiti.