Zen Coding



Алғашқы мақаламды web бағдарламалар жазатын адамдарға пайдалы болатын Zen Coding құралынан бастауды жөн көрдім. Менің мақаланы жазудағы мақсатым Zen Coding құралының барлық мүмкіндігін көрсету емес, жай құралдың пайдалы тұстарына шолу жасау. Сонымен, Zen Coding дегеніміз ол не?

Zen Coding — бұл HTML, XML, XSL кодтарын жазуды жылдамдататын, мәтіндік редакторлар үшін қосымша (плагин). (орысша википедиядан аударма)

Zen Coding барлық дерлік кең таралған мәтіндік редакторларда бар немесе ең болмағанда қосымша түрінде жасалынған. Көп есіткеннен гөрі бір рет көрген жақсы, Zen Coding-тің көптеген мүмкіншіліктерін келесі видеодан көруге болады.

Әрине,

div#nav>ul>li*5>a[href=page$.html] 


түріндегі жазуды бір ғана батырманы басу арқылы мынандай түрге әкелу өте ыңғайлы және жылдам:

<div id="nav">
  <ul>
    <li><a href="page1.html"></a></li>
    <li><a href="page2.html"></a></li>
    <li><a href="page3.html"></a></li>
    <li><a href="page4.html"></a></li>
    <li><a href="page5.html"></a></li>
  </ul>
</div> 

Zen Coding тек XML типті кодтарға ғана емес CSS үшін де бар. Бірақ онда HTML дегі секілді емес, тек көптеген қысқартулар тізімі ретінде. Ол қысқартуларды мына жерден табуға болады: code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

Zen Coding v0.6 дан бастап жаңа ұғым — фильтрлер пайда болды. Фильтрлер html тілінің арнайы символдарын html қасиетке ие емес символдарға ауыстыруға қолданылады. Фильтрдің бұдан басқа да қолданыстары бар, ол туралы мына жерден қарап көруге болады: code.google.com/p/zen-coding/wiki/Filters

Фильтрлердің пайдаланылуына мысал:
div>p#hello|e 

түріндегі жазу, арнайы батырманы басқан соң мына түрге келеді:
&lt;div&gt;
    &lt;p id="hello"&gt;&lt;/p&gt;
&lt;/div&gt;
Күніне жүздеген қатар HTML мен CSS тіліндегі кодтарды жазатын маман иелері үшін пайдалы болады деп ойлаймын. Zen Coding құралының пайдалы тұстарын көрсете алдым деп үміттенемін.

  • +6
5 пікір
nurzhol
Рақмет! Пайдалы!
onlasyn
Түсінбедім, пайдасыз нәрсе сияқты
raimbek
Сіз видеоны қарап көрдіңіз ба? Білмедім, мен өзім веб бағдарлама жазбағандықтан көп пайдаланбаймын, бірақ өте ыңғайлы құрал болғандықтан, html-де көп жұмыс жасайтындарға пайдасы тиетін шығар деп пайымдағанмын.
jarjan
Қазір Zen Coding атауы ауысып Emmet болып кетті.
Міне сайты: emmet.io

Өөөөөөте мықты құрал, жұмыста ылғи қолданамын. HTML элементтерің ашып жауып қиналмай тез арада керекті айди, класс атауларымен құра саламын Tab-ты басып. Мысалыға,
div.hello>span{Hello, World!}
Tab-ты басқаннан кейін бірден
<div class="hello"><span>Hello, World!</span></div>
бола қалады.

Ал стильдерді өзгерту одан да рахат, мысалы:
h500 > height: 500px;
db > display: block;
Khan
Ия Zen coding атын менде бірнеше рет естігем. Қазіргі Emmet қой. Тағы қосарым.Fuzzy search арқасында былай жазуға болады.
posa+t0+l0+w100p+h100p+bdrs-+bg-
Тек тіркелген қолданушылар ғана пікір қалдыра алады.