Zen coding, scrivere codice HTML e CSS alla velocità della luce.

Zen coding è un plugin per IDE (editor di codici) sviluppato da Sergey Chikuyonok, che permette di scrivere markup XHTML, HTML5, XML e CSS alla velocità della luce.

Questo plugin nasce nel 2009 e inizialmente poteva essere installato solamente su pochi IDE come Aptana o Espresso, ma grazie al grande successo ora è disponibile su oltre 10 editor, per vedere la lista completa e scaricare il plugin adatto al tuo IDE ti rimando alla pagina download di Zen coding

Come funziona

Per scrivere markup HTML utilizzando Zen Coding bisogna sostanzialmente scrivere e mescolare righe di codice utilizzando selettori CSS e simboli di operazioni matematiche per poi espandere il risultato di questa riga, quindi trasformarlo nella struttra classica che tutti conosciamo.

Immagina per esempio di voler generare tre paragrafi con classe .testo e un numero progressivo, ti basterà scrivere p.testo-$*3 ed espandere con il comando ctrl+ questa istruzione, il risultato sarà:

<p class="testo-1"></p>
<p class="testo-2"></p>
<p class="testo-3"></p>

il simbolo $ serve per assegnare un numero progressivo mentre * è il simbolo della moltiplicazione, nel caso sopra l’elemento p.testo è stato moltiplicato tre volte.

Se invece vuoi inserire i tre paragrafi sopra dentro un div con id #contenitore potresti scrivere una istruzione del genere div#contenitore>p.testo-$*3 ed il risultato sarà questo:

<div id="contenitore">
  <p class="testo-1"></p>
  <p class="testo-2"></p>
  <p class="testo-3"></p>
</div>

Zen coding nasconde al suo interno anche numerosi trucchetti molto utili, per esempio per generare in una frazione di secondo la struttura base di una pagina web in HTML5 basterà scrivere html:5 ed espandere questo comando, il risultato sarà questo:

< !DOCTYPE HTML>
 <html lang="en-EN">
  <head>
    <title></title>
    <meta charset="UTF-8">
  </meta></head>
  <body>
  </body>
</html>

Per scoprire altre potenzialità di questo plugin ti consiglio di guardare il video sottostante, ma soprattutto di scaricare il cheatsheet in PDF che contiene tutte le istruzioni da usare per creare codice XHTML e regole CSS per i fogli di stile.

Info sull' autore:
Nato nel 1986 a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

2 Risposte per Zen coding, scrivere codice HTML e CSS alla velocità della luce.

  1. GaSe 23 gennaio 2012 at 11:30 | Permalink | Reply

    Lo conosco da quasi un anno e mi accodo al tuo articolo per dire che una volta conosciuto non ne potrete più fare a meno.

Lascia un commento

Trackbacks