Tech Life

Ilustrační obrázek

Techblog - Zen Coding

13. 01. 2011 16:15    kategorie: Tech Life    autor: JTr    komentářů: 1

Od dob, kdy se HTML psalo v Notepadu, nebo v jedné z jeho modifikovaných alternativ, uplynulo (doufám) už spoustu let. Jedinou možností, jak tehdy urychlit práci, bylo několik tlačítek v toolbaru editoru. V dnešní době jsou možnosti nesrovnatelně lepší.
 

Snad každý editor (nebo IDE), který má ambice alespoň trochu uspět a rozšířit se mezi komunitu vývojářů, obsahuje minimálně jednu funkci, která pomáhá jeho uživatelům pracovat (psát kód) rychleji a efektivněji. Většinou se jedná o funkce typu autocomplete, snippety, předpřipravené šablony a další. Ze všech těchto možností mě ale nejvíce zaujal Zen Coding. Jedná se o sadu pluginů, která umožňuje psát a editovat HTML, XML a XSL dokumenty pomocí CSS selektorů.

Protože se tedy jedná o plugin, musím zároveň upozornit, že je k dispozici pro omezený počet editorů. Množina těchto editorů by se dala rozdělit na:

1. Oficiálně podporované editory - verze pluginu pro tyto editory vydávají přímo autoři Zen Codingu a dále v nich zaručují funkčnost všech vlastností poslední verze Zen Codingu. Mezi ně patří např. poměrně rozšířené editory PSPad, Notepad++, Komodo Edit, TextMate, Coda a nebo IDE Eclipse či Aptana.

2. Editory s oficiální implementací - plugin je pro ně vyvíjen mimo Zen Coding tým, ale za využití oficiálního enginu. V tomto případě ale tým Zen Codingu nezaručuje, že bude plugin využívat všechny vlastnosti poslední verze Zen Codingu. Konkrétně se jedná třeba o Dreamweaver, NetBeans, UltraEdit, TopStyle.

3. Neoficiální implementace - autoři pluginu implementují Zen Coding vlastním způsobem a autoři Zen Codingu nemají na tyto projekty žádnou vazbu. Příkladem takových editorů je třeba Vim.

Jak už jsem psal, nosným kamenem a nejsilnější stránkou tohoto pluginu je možnost psát HTML kód pomocí CSS selektorů. Ambice tohoto projektu sahají ještě trochu dále, např. k psaní a editaci samotného CSS. V tomto ohledu už mi ale využití Zen Codingu moc efektivní nepřijde. Zatímco v případě psaní HTML kódu využívám něčeho, co již znám (nebo bych měl znát), u CSS je tomu naopak. Pro každou CSS vlastnost existuje nějaká zkratka a nakolik se snaží být jejich názvy intuitivní, nepřinutil jsem se je ve větší míře zapamatovat nebo používat.

Pojďme se ale věnovat tomu, v čem je Zen Coding nejsilnější. Např. následující fragment HTML kódu

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

mohu pomocí Zen Coding zapsat jako

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

Celý systém je postaven na podobných zkratkách, které jsou analogií k CSS selektorům. V rámci Zen Codingu lze používat

- ID nebo class atributy: div#id.trida
- ostatní atributy (i custom): a[href] nebo div[title="Hello world"]
- násobení elementů: li*5 vypíše pět tagů <li></li>
- číslování elementů: li.item_$*3 vypíše tři tagy <li class=”item_X”></li>, kde X bude nahrazeno číslem 1-3
- rozšířené číslování elementů: li.item_$$*3 kdy generovaná čísla mohou být uvozena nulou a výsledný tvar CSS třídy bude class=”item_03″
- skupiny zkratek a selektory definující rodičovské, dětské a sourozenecké elementy: např. div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
- možnost vynechání DIV tagu, obdobně jako je tomu např. u javascriptových frameworků: #test tedy odpovídá zápisu div#test
- filtry: rozšiřující možnosti formátování výstupního kódu, např.:
div#content|e vrátí escapovaný <code><div id=”content”></code>
div#content|c převede zkratku na HTML kód a výsledný kód obalí do komentářů <!– #content –> a <!– /#content –>

Kromě těchto zkratek, jejichž výborný přehled je uveden v Zen Coding Cheatsheet, který je ke stažení v PDF přímo na stránkách pluginu (http://code.google.com/p/zen-coding/), má celý systém ještě několik dalších funkcí (actions) pro zefektivnění práce.

Kromě základního rozbalení zkratek ve výsledný HTML kód jsou to:

- obalení HTML kódem - HTML tag, na kterém je nastavený kurzor, obalí HTML kódem definovaným Zen Coding zápisem (v Notepad++ tato funkce ale není moc rychlá, pro definici Zen Coding zkratky se otevře popup okno využívající tuším jádra IE ze systému)
- možnost výběru HTML tagu dle aktuální pozice kurzoru - pokud jsem např. na DIVu, který má dětské elementy, tak se označí celý tento blok
- možnost přeskakování mezi předchozím a následujícím editačním bodem ve vygenerovaném kódu - pro snadnější doplnění nevyplněných hodnot atributů nebo textového obsahu elementů
- spojení řádek HTML kódu do jedné
- odstranění HTML tagů ve vybraném kódu, pokud není vybraný, vybere se blok kódu definovaný elementem, na kterém je kurzor
- možnost spojení nebo rozdělení HTML tagu, např. <code><div id=”test”></div></code> převede na <code><div id=”test” /></code> a zpět
- možnost generování komentářů

Tolik asi ve zkratce představení pluginu Zen Coding. Pokud používáte některý z editorů, uvedených na stránkách pluginu, doporučuji jej minimálně vyzkoušet. Třeba vám bude vyhovovat.

Sdílet odkaz:
tisk

Diskuze k článku

Messa, 14.1.2011 17:14

Proč generovat nějaké HTML, když takhle můžu psát rovnou :) Třeba v Hamlu: http://haml-lang.com/

Přidat příspěvek

 

Kontakt pro média


Máte zájem o další informace, odborný článek či přednášku na konferenci? Kontaktujte nás prosím na pr@etnetera.cz.

RSS - Tech life


RSS kanál Tech Life Blogu

Offlineblog

Offlineblog

Ljama


Komix z prostředí imaginární firmy.

ljama

Ještě jste ho nečetli? Tak tudy ...

 
Doporučujeme: Nabídka práce, volná pracovní místa - pracovní portál SPRÁVNÝKROK.CZ