Bir çok yaygın Javascript framework'ünün üzerine oturduğu temel hep aynı; CSS seçimi. CSS seçimi ile ne kastediyoruz, bir veya daha fazla nesneyi, CSS için kullandığımız tanımlama sentaksları ile yakalamak. Daha sonrasında da bunu manipüle etmek.

Örneğin;
<div class="test">
<span id="spn1">
<span id="spn2">
<span id="spn3">
</div>
Bu kodda bütün spn1, spn2, spn3'leri yakalayıp içine test yazdırmak jQuery ile tek satır bir koddur:
$('div.test span').html('test');
Prototype, Mootools, Midori... diğer bütün frameworkler de aynı veya benzer söz dizimleri ile bu işlemi gerçekleştirebilirler (yeri gelmişken Türk bir yazılımcı Aycan Gülez'in -http://twitter.com/aycangulez- elinden çıkan Midori'ye tekrar saygı/tebrik).

Yazının konusuna yaklaşırsak, CSS seçicileri mantığını tam tersten değerlendiren bir proje ile karşılaştım. Zen Coding, bir çok farklı editör desteği ile (maalesef Visual Studio yok) verilen CSS seçicisini genişleterek HTML'ini sunuyor. Aslında uygulama metin bazlı bir girdi alıp, metin bazlı bir çıktı veren bir uygulama. Visual Studio add-in'i yazma planlarım var :)

Ne anlatmak istediğimi örneklerle görmek için video'ya bir gözatın:


Kendi sitesindeki bir online editor ile denemek için de http://zen-coding.ru/demo adresini ziyaret edebilirsiniz.

İlgi çekici bir proje. Dediğim gibi Visual Studio add-in yapma planlarım var. Eğer tamamlarsam bu blog aracılığı ile sizinle paylaşıyor olacağım...

Script.aculo.us'un mimari Thomas Fuchs'un yeni marifeti Scripty2 ile bugün tanıştım. Henüz alpha release. Güzel bir kütüphane gibi görünse de yine Prototype tabanlı olması bir eksi. Eski bir Prototype fanı olarak onu unutmuş değilim. Sadece artan jQuery eğilimini görmezden gelememiş biriyim :) Scripty2'nin açılış sayfasına adres vermeyeceğim. Doğrudan dokümantasyondan bir sayfaya örnek vereceğim. Beni tanıyanlar kütüphaneyi niçin beğendiğimi bu sayfadan çok net anlayacaktır: http://scripty2.com/doc/scripty2 fx/s2/fx/transitions.html

Tam da kütüphanelerden bağımsız bir animasyon kütüphanesi nasıl olurdu acaba diye düşünürken, yine bir Thomas Fuchs üretimi çıktı karşıma, Émile. Henüz hazır sayılmaz, ama 50 satır kodla harikalar yaratılmış. Henüz kendi sitesi bile yok, kendi blog girdisine bir göz atabilirsiniz: http://mir.aculo.us/2009/11/07/a-50-lines-of-code-javascript-animation-framework-say-hello-to-emile


Bugün artık zengin internet uygulamaları geliştiren her web yazılımcısı, jQuery, Prototype, Dojo, MooTools gibi farklı farklı Javascript kütüphanelerinden birini mutlaka kullanıyor. Hatta artık $ olmadan bir javascript tümcesine başladık mı garip gelir haldeyiz...

Bu kütüphaneler ortada yokken, yada varken ama henüz "experimental" seviyeyi geçmediği dönemlerde, ben ve benim gibi web geliştiriciliği yapan bütün yazılımcıların ağzının suyunun akmasına sebep olan uygulamalar görmeye başladık. Google kaynaklı GMail, Google Maps, Google Docs... gibi uygulamalar gerçekten o gün için hayal gücümüzün sınırlarını zorluyordu.

Gitgide javascript çerçeve çalışmaları ile tanıştıkça artık bu tip uygulamalar hiç birimiz için çok uzak değildi. Ama Google zamanında bunları nasıl yapmıştı? Kendi bir çerçevesi olmadan pure javascript mi yazmıştı? Tabi ki hayır. Bugün dahi halen hiç bir Google uygulaması, yukarıda örneklerini verdiğim bildik javascript kütüphanelerini kullanmıyor.

Bir zamanlar kulaktan kulağa efsane gibi yayılan, daha sonra doğruluğuna emin olduğumuz ama sır gibi saklanan Closure artık Google tarafından açık kod olarak dağıtılmaya başladı.

Şu noktada artık alışkanlıklarımızı değiştirir miyiz, bir jQuery'den bir Prototype'tan vazgeçer miyiz bilemem. Ama işin içinde Google varsa incelemeye değer. İncelediğimde gördüğüm ince zeka örnekleri gerçekten hala çok etkileyici...

Buyrun: http://code.google.com/closure

JS Bin adındaki sistem, yazdığınız javascript kodunun, online olarak nasıl çalışacağını denemenizi sağlıyor. Ayrıca örneklerinizi tek bir tıklama ile kısaltılmış URL'lere indirgeyebiliyorsunuz, bu sayede paylaşma şansınız da oluyor.

En ilgi çekici yanı ise kod yazdığınız kutunun üzerindeki bir açılır menü sayesinde, popüler bütün javascript frameworklerini çalışmanıza tek tıkla dahil edebiliyorsunuz. Bu sayede frameworkler üzerinde de deneme yapma şansınız oluyor. Desteklenen frameworkler:
- jQuery
- Prototype
- script.aculo.us
- YUI
- MooTools
- Dojo
- Ext JS

Özellikle kısa javascriptler denemek istediğinizde, yada bir kod farklı kütüphanelere çevirmek istediğinizde pratik bir araç olabilir.

Buyrun: http://jsbin.com

Copyright Ali INAL ©2009 - Creative Commons Licence
preload preload preload

Taşındık!


Ali's Surprisingly Web blog'u, artık yeni, güçlü ve daha esnek altyapısıyla yeni adresinden yayın yapıyor. Yeni adresimiz: http://surprisingly.web.tr. Bu eski blog sayfalarındaki bütün içerik, yeni blog altyapısına da taşındı. Arzu ederseniz sizi yeni blog'umda ağırlamak isterim.
Yeni blog'a gitmek istiyorum Bu sayfayı okumak istiyorum

We've Moved!


Ali's Surprisingly Web Blog is now serving from a new, stronger and flexible system with a brand new address. Our new address: http://surprisingly.web.tr. Also we've migrated all old content from this blog to our new blog. If you wish, I want to welcome yo to my new blog.
I want to visit new blog I want to stay and read this page