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.
|
1 |
div |
- Tab’dan sonra
|
1 |
<div></div> |
- ul>li yazıp tab tuşuna basalım.
|
1 |
ul>li |
- Tab’dan sonra
|
1 2 3 |
<ul> <li></li> </ul> |
- table>tr*3>td*2
|
1 |
table>tr*3>td*2 |
- Tab’dan sonra
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> |
- ul>li*3>lorem
|
1 |
ul>li*3>lorem |
- Tab’dan sonra
|
1 2 3 4 5 6 7 8 |
<ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. </li> </ul> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul data-bind="foreach:jewelerry"> <li> <div>Name 01</div> <input type="text" value="" data-bind="value 01" /> </li> <li> <div>Name 02</div> <input type="text" value="" data-bind="value 02" /> </li> <li> <div>Name 03</div> <input type="text" value="" data-bind="value 03" /> </li> <li> <div>Name 04</div> <input type="text" value="" data-bind="value 04" /> </li> </ul> |
- div#descriptionDiv.title
Tab’den sonra
|
1 |
<div id="descriptionDiv" class="title"></div> |
- div[name=”product $”]*3>input[type=”text” value=”Product Name $$”]
Tab’dan sonra
|
1 2 3 4 5 6 |
div name="product 1"> <input type="text" value="Product Name 01" /></div> <div name="product 2"> <input type="text" value="Product Name 02" /></div> <div name="product 3"> <input type="text" value="Product Name 03" /></div> |
- table#productlist>tr.menu*3>td[id=”Name$”].item*2>input[type=”text” id=”txt$”]
Tab’dan sonra
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<table id="productlist"> <tr class="menu"> <td id="Name1" class="item"> <input type="text" value="" id="txt1" /></td> <td id="Name2" class="item"> <input type="text" value="" id="txt2" /></td> </tr> <tr class="menu"> <td id="Name1" class="item"> <input type="text" value="" id="txt1" /></td> <td id="Name2" class="item"> <input type="text" value="" id="txt2" /></td> </tr> <tr class="menu"> <td id="Name1" class="item"> <input type="text" value="" id="txt1" /></td> <td id="Name2" class="item"> <input type="text" value="" id="txt2" /></td> </tr> </table> |
- footer.footerHead#footer>div.title*2>a[href=”http://www.borakasmer.com/”]{Music$}*3
Tab’den sonra
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<footer id="footer" class="footerHead"> <div class="title"> <a href="http://www.borakasmer.com/">Music1</a> <a href="http://www.borakasmer.com/">Music2</a> <a href="http://www.borakasmer.com/">Music3</a> </div> <div class="title"> <a href="http://www.borakasmer.com/">Music1</a> <a href="http://www.borakasmer.com/">Music2</a> <a href="http://www.borakasmer.com/">Music3</a> </div> </footer> |
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
|
1 2 3 4 5 6 7 8 9 10 |
<section data-bind="foreach:persons"> <div> <input type="text" value="" data-bind="text01" /></div> <div> <input type="text" value="" data-bind="text02" /></div> <div> <input type="text" value="" data-bind="text03" /></div> <div> <input type="text" value="" data-bind="text04" /></div> </section> |
Ş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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div> <title class="headTitle"> <div id="name1"></div> <div id="name2"></div> </title> <section class="headSection"> <ul id="productList"> <li><a href="">Product Name 01</a></li> <li><a href="">Product Name 02</a></li> </ul> <footer id="footerHead"> <div> <span></span> </div> <span class="cls"></span> <div> <span></span> </div> <span class="cls"></span> <div> <span></span> </div> <span class="cls"></span> </footer> </section> </div> |
Son olarak Lorem Ipsum ile alaklı bir örnek ile makalenin sonuna gelelim.
- ul>li*5>lorem8
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> </ul> |
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.
Dediğiniz gibi bir başladımı birdaha bırakılmıyor Zen Coding. Güzel makale için teşekkürler Bora hocam.
Teşekkürler Mesut;
Ben de sürekli kullanıyorum…
Bilgi için teşekkürler. Ellerinize sağlık.
Ben Teşekkür ederim…
Hocam, malesef Visual studio 2017 için desteği yok. Farklı bir çözümünüz var mıdır ?