]]> http://altanyilmaz.com/genel-konular/einstein-belgesel.html/feed 0 http://altanyilmaz.com/front-end-development/zen-coding.html http://altanyilmaz.com/front-end-development/zen-coding.html#comments Sun, 24 Jan 2010 17:36:42 +0000 allthein http://altanyilmaz.com/?p=16 Bilirsiniz kodlama yaparken kullandigimiz editorlerimizin en basta syntax highlighting ve auto completion ozelliklerini degerlendiririz. Bu tip ozellikler daha kontrollu ve hizli kod yazabilmemizi saglar. Bugun HTML kodlama yapan arkadaslara kod yazma hizlarini arttiracak bir eklentiden bahsedecegim karsinizda ZEN CODING.

Zen Coding Nedir?

Sergey Chikuyonok tarafindan gelistirilmis javascript tabanli bir eklenti. Bu eklentiyi bir cok favori editor hem mac hem windows plaformlarinda destekliyor.

• Aptana, Mac & Win.
• Coda — TEA for Coda, Mac
• Espresso — TEA for Espresso, Mac
• TextMate, Mac (uzerine tanimam).
• Visual Studio —  Win.

Aslinda bu eklentinin temel mantigi tanimlanan keywordleri hizlica tag haline donusturmesi. Ornek verecek olursak

gibi bir kod blogu yaratmak icin yapmamiz gereken tek sey ul#sehirler>li>a.aktif yazmak ve editorunuze tanimli kisayol tusunu kullanmak (texmate icin Command+E) .

Biraz daha basite indirgeyecek olursak <div id="dummy"></div> yazmak icin div#dummy yazmamiz yeterli. Benim gorusum karmasik yapilari yaparken degilde hizli bir sekilde kod yazmamiz gerektigi durumlarda cok fazla ise yaradigi. Simdiden vazgecilmezim haline geldi bile.

Kisaca ozelliklerinden bahsetmek gerekirse:

• E - Element  (div, p);
• E#id - Id atanmis element (div#content, p#intro, span#error);
• E.class - Class atanmis element (div.header, p.error.critial).
• E>N - Child element (div>p, div#footer>p>span);
• E+N - Sirali element (h1+p, div#header+div#content+div#footer);
• EN - Element kopyalama (ul#nav>li5>a);
• E$N - Element siralama (ul#nav>li.item-$5);

Daha detayli bilgi ve aciklama icin http://code.google.com/p/zen-coding/