A Zen Coding igen egyszerű, megszabadít bennünket az unalmas és fárasztó, sokszor igen csak hosszadalmas html kódok „futószalag” munkájától.
Gondolkodtam rajta, hogy leírjam, hogy honnan ered, ki találta ki, de igazából lényegtelen, annyit, hogy a Googlenak van hozzá köze. :)
A cikk végén egy videót is találtok, mely igen jól bemutatja mennyire hatékony a Zen Coding.
Hogy gyorsan bemutassam a Zen Coding lényegét, jó szokáshoz híven egyből példával futok neki.
Tételezzük fel, hogy az alábbi alap HTML szerkezetet szeretnénk:
<html>
<head></head>
<body>
<div id="count">
<div id="top"></div>
<div id="menu">
<ul>
<li id="menu-1"><a href="" title="Kattints ide" rel=""></a></li>
<li id="menu-2"><a href="" title="Kattints ide" rel=""></a></li>
<li id="menu-3"><a href="" title="Kattints ide" rel=""></a></li>
<li id="menu-4"><a href="" title="Kattints ide" rel=""></a></li>
<li id="menu-5"><a href="" title="Kattints ide" rel=""></a></li>
</ul>
</div>
</div>
</body>
</html>
Ezt mindenki érti, tudja, de iszonyat unalmas begépelni, esetleg soronként másolgatni.
Én már nem is közdöttem ennek a kódnak a beírásával, csupán az alábbi sorral állítottam elő a fenti szerkezetet
html>head+body>div#count>div#top+div#menu>ul>li#menu-$*5>a[title='Kattints ide' rel]
Nem kell megijedni nem olyan bonyolult mint elsőre tűnik. ha jobban megnézzük lényegében CSS szelektorokról van szó,
egy egyszerűbb példával megpróbálom elmagyarzáni a lényeget.
html>head+body>ul#menu>li*5
Szóval magyarul ez kb annyit tesz, hogy:
Hozz létre egy html elemet, azon belül egy head, egy body elemet, body-n belül egy ul elemet menu id-vel, azon belül li elemet 5-ször.
A sor beírása után CTRL+E (npp alatt) és voálá, az eredmény:
<html>
<head></head>
<body>
<ul id="menu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Hogy most már tudjuk mivel is van dolgunk, és rájöttünk, hogy ez nekünk kell, nem árt,
ha tudjuk, hogy hogyan is juthatunk hozzá, nem kell megijdeni, nem kell áttérni új html szerkesztő programra (legalábbis, ha egy kis szerencséd van)
A Zen Coding bővítmény modulként jelent meg, azaz a legtöbb, legismertebb szerkesztőhöz kiegészítőként letölthető.
Én Notepad++ progit használom, egy perc alatt leszedtem és tettem fel, már használható is volt.
Az alábbi linkről tudjátok lekapni a Zen Coding plugint: http://code.google.com/p/zen-coding/downloads/list
Most, hogy mindenki feltette magának, és rájött milyen állat a Zen Coding menjünk is tovább és nézzük át a többi szelektort szépen sorba.
E#name
div#name
<div id="name"></div>
E.name
div.name
<div class="name"></div>
div.one.two
<div class="one two"></div>
div#name.one.two
<div id="name" class="one two"></div>
E>E
head>link
<head>
<link/>
</head>table>tr>td
<table>
<tr>
<td></td>
</tr>
</table>ul#name>li.item
<ul id="name">
<li class="item"></li>
</ul>E+E
p+p
<p></p>
<p></p>
div#name>p.one+p.two
<div id="name">
<p class="one"></p>
<p class="two"></p>
</div>E[attr]
p[title]
<p title=""></p>
td[colspan=2]
<td colspan="2"></td>
span[title="Hello" rel]
<span title="Hello" rel=""></span>
E*N
p*3
<p></p>
<p></p>
<p></p>
ul#name>li.item*3
<ul id="name">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>E*N$
p.name-$*3
<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>
select>option#item-$*3
<select>
<option id="item-1"></option>
<option id="item-2"></option>
<option id="item-3"></option>
</select>E+
ul+
<ul>
<li></li>
</ul>table+
<table>
<tr>
<td></td>
</tr>
</table>dl+
<dl>
<dt></dt>
<dd></dd>
</dl>Nagyjából ennyi lenne a Zen Coding, tök egyszerű és nagy segítség tud lenni. Annyit tudok javasolni, hogy 1-2 órát érdemes részánni, hogy gyakorljuk, hogy kicsit rááljon az agyunk, de bőven megéri, hiszen a befektetett idő kamatostul megtérül.
És a beígért videó mely igazán személteti a Zen Coding hatékonyságát:
Kommentek
Hozzászóláshoz be kell jelentkezned! Ha még nem lennél regisztrálva itt megteheted.