Zen Coding: Ako písať HTML rýchlejšie

Užitočný nástroj pre efektívnejšiu prácu s HTML alebo CSS: Zen Coding. Ocenia ho všetci web developeri denne prichádzajúci do styku s HTML/CSS. Jedná sa o plugin do editorov, ktorý zjednodušuje písanie HTML kódu používaním klávesových skratiek.

Príklad

Zen Coding má syntax podobnú CSS. Napríklad:

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

po stlačení klávesovej skratky Zen Coding-u v editore vytvorí HTML kód:

<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>

Výhody sú okamžite jasné:

• rýchlejšie písanie kódu
• 100% valídny HTML kód
• netreba si pamätať syntax a povinné atribúty niektorých menej bežných tagov (rôzne meta, link, map tagy)

Demo

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Pre ilustráciu predvediem zopár najpopulárnejších skratiek.

ID a triedy

Pre vytvorenie div elementu s požadovaným ID alebo triedou postačí v editore napísať.

div#wrapper

vytvorí

<div id="wrapper"></div>

Analogicky, h1 element s triedou “site-title” vytvoríme takto:

h1.site-title

Elementom je možné priamo zadať i obsah:

p.info{Lorem ipsum dolor sit amet}

vytvorí

<p class="info">Lorem ipsum dolor sit amet</p>

Deti, súrodenci

Hierarchiu HTML elementov vytvárame pomocou “>” a “+”:

ul>li>a

vytvorí

<ul>
  <li>
    <a href=""></a>
  </li>
</ul>

Zápisom

div>span.first+span.second+span.third

vygenerujeme kód

<div>
  <span class="first"></span>
  <span class="second"></span>
  <span class="third"></span>
</div>

Ak za operátorom “+” neuvedieme nič, vygenerovaný element bude mať automaticky nastavené bežne používané atribúty a potomkov. Napr.:

map+

nám vytvorí

<map name=""><area alt="" href="" shape="" coords="" /></map>

Opakovanie HTML elementov

Zen Coding nám umožňuje vytvárať neobmedzený počet opakujúcich sa elementov naraz jediným zápisom pomocou operátora “*” (hviezdičky):

table>tr*3>td*2

generuje

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Automatické číslovanie

Triedy alebo ID-čka môžu byť dynamicky číslované:

table>tr.row-$*5

vytvorí

<table>
 <tr class="row-1"></tr>
 <tr class="row-2"></tr>
 <tr class="row-3"></tr>
 <tr class="row-4"></tr>
 <tr class="row-5"></tr>
</table>

Zložitejšie elementy

Pomocou operátora “:” je možné presnejšie špecifikovať aký element si želáme vygenerovať. Príklady:

meta:utf

vygeneruje

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

Príklad:

input:checkbox

vytvorí

<input id="" name="" type="checkbox" />

HTML atribúty

Zen Coding umožňuje k elementom špecifikovať extra atribúty:

a[title rel]

vytvorí

<a rel="" href="" title=""></a>

Je možné špecifikovať i hodnotu atribútu:

img[alt="Opis obrazka"]

vytvorí

<img src="" alt="Opis obrazka" />

Filtre

Filtre slúžia na úpravu generovaného HTML kódu ešte predtým, ako sa vloží do editora. Napr.

div#global-container|c

spôsobí, že výsledný element bude ohraničený komentármi pre lepšiu orientáciu v kóde:

<!-- #global-container -->
<div id="global-container"></div>
<!-- /#global-container -->

Používatelia alternatívnej syntaxe HAML využijú filter haml:

ul#navigation>li>a|haml

vytvorí HAML kód

%ul#navigation
  %li
    %a{ :href => "" }

V dokumentácii k pluginu Zen Coding nájdete zoznam všetkých filtrov.

CSS

Zen coding uľahčuje aj prácu s CSS:

d:n

vygeneruje

display:none

Prehľad skratiek Zen Coding (ťahák)

Syntax a všetky dostupné skratky Zen coding.

Podpora v editoroch

Plugin je dostupný pre všetky populárne editory a IDE nástroje:

• Eclipse
• NetBeans
• Vim
• Dreamweaver
• PSPad
• Notepad++
• Visual Studio
• GEdit
• Ultraedit
• a cca. 20 ďalších