Zen Coding

Selamlar;

Bugün Zen Coding üzerine konuşacağız. Günümüzde zaman herşeyden daha kıymetli soyut  bir değerdir. İşte biz programcılar için bir web arayüz ile nekadar az zaman kaybeder isek arka plan ile o kadar çok zaman geçirip daha kaliteli işler çıkarabiliriz. Tam bu noktada Zen Coding css sitili filitreleme ile html code yazarak, küçük makrolar ile büyük kod kalabalığından kurtulabiliriz.

Zen Coding projesi ilk olarak 2008 yılında Vadim Makeev tarafından başlatılıp, 2009 yılında Rus front end developer Sergey Chikuyonok tarafından devam ettrilmiş ve Zen Coding 2.0 haline gelmiştir. Günümüze kadar birçok güncelleme ile kullanımı çok daha kullanışlı hale getirilmiştir. Bir çok platformda kullanılan Zen Coding,  Visual Studio ortamına Web Essentials ile Mads Kristensen ve ekibi sayesinde  neyseki :) eklenmiştir.

Zen Coding’i kullanmak için öncelikle http://vswebessentials.com/ adresinden download edilmelidir. Bu işlemden sonra boş bir mvc projesi açıp Index view’ımıza gelelim.

Şimdi öncelikle birkaç basit örnek ile başlıyalım. Daha sonra syntax üzerine konuşacağız.

  • div yazıp tab tuşuna basalım.

  •  Tab’dan sonra

  •  ul>li yazıp tab tuşuna basalım.

  •  Tab’dan sonra

  •  table>tr*3>td*2

  •  Tab’dan sonra

  •  ul>li*3>lorem

  •  Tab’dan sonra

Yukarıdaki basit örneklerde de görüldüğü gibi ‘>’ sembolü bir alt kırılımı ifade etmektedir. ‘*’ ise  nesnenin kaç kere tekrarlıyacağını belirtir. Bizim basitçe yazdığımız kodlar tab ile nihai hallerini almakta ve bize büyük zaman kazandırmaktadır. Bu basit örneklerden sonra öncelikle Zen Coding’de kullanılabilecek tüm syntax’ı inceleyelim.

  • # nesneye id property’si eklenir.
  • . nesneye class eklenir.
  • [ ] nesneye özel attribute’lar eklenir.
  • > nesne’ye alt eleman eklenir.
  • + nesne’ye aynı seviyede yeni bir eleman eklenir.
  • ^ üst elemente çıkılır.
  • * nesne yanına yazılan sayı kadar tekrarlanır.
  • $ artan sayı ile değiştirilir.
  • $$ başında 0 ile artan sayı konur.
  • { } içine text yazı konur.
  • ( ) Eşit seviyede eleman ekleme durumunda guruplamak için kullanılır.

Örnekler ile incleyelim.

  • ul[data-bind=”foreach:jewelerry”]>li*4>div{Name $$}+input[type=text data-bind=”value $$” value=$]

Tab’dan Sonra:

  • div#descriptionDiv.title

Tab’den sonra

  •  div[name=”product $”]*3>input[type=”text” value=”Product Name $$”]

Tab’dan sonra

  •  table#productlist>tr.menu*3>td[id=”Name$”].item*2>input[type=”text” id=”txt$”]

Tab’dan sonra

  •  footer.footerHead#footer>div.title*2>a[href=”http://www.borakasmer.com/”]{Music$}*3

Tab’den sonra

Biraz da knockout.js binding için Zen Code’ile template yazalım :)

  • section[data-bind=”foreach:persons”]>div*4>input[type=”text” data-bind=”text$$”]

Tab’dan sonra

Şimdi bir Group  örneği yapalım.

  • div>(title.headTitle>div#name$*2)+section.headSection>(ul#productList>li*2>a{Product Name $$})+footer#footerHead>(div*3>span^^>span.cls)

Tab’dan sonra

Son olarak Lorem Ipsum ile alaklı bir örnek ile makalenin sonuna gelelim.

  • ul>li*5>lorem8

Yukarıdaki örneklerde de görüldüğü gibi yazdığımız makrolar tab tuşundan sonra nihai uzun html kodları halini almaktadır. Bir süre Zen Code ile çalıştıktan sonra bırakamıyacaksınız. Hem zaman hem de hata riskini azaltması front end development için büyük nimet.

Geldik bir makalenin daha sonuna.

Yeni bir makalede görüşmek üzere hoşçakalın.

 

Herkes Görsün:

Sevebilirsin...

2 Yanıt

  1. Mesut Güneş diyor ki:

    Dediğiniz gibi bir başladımı birdaha bırakılmıyor Zen Coding. Güzel makale için teşekkürler Bora hocam.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir