Yeni bir Flash-Javascript uygulaması keşfettim. Downloadify isimli uygulama, bir Flash uygulaması ve bu Flash uygulamasındaki bazı fonksiyonları dışarıdan Javascript üzerinden çağırmanızı sağlayan framework’ten oluşuyor.
Uygulamanın amacı, hiç bir server etkileşimi olmaksızın, client üzerinden javascript+Flash kullanarak kullanıcının makinesine dosya yazdırmak. Kullanıcıya gösterilen bir “Save” kutusunun ardından dosya içerisine istediğinizi yazabiliyorsunuz.
Uygulamanın detayları ve (varsa) kısıtları ile ilgili bir uygulama yapmadım, yapabilirsem tecrübelerimi burada paylaşacağım. Girdiğiniz metni, clientside olarak kullanıcını makinesine yazdıran basit bir uygulamayı http://downloadify.info/downloadify/test.html adresinden deneyebilirsiniz.
W3C, bugün (09.12.2009) bir taslak yayınlayarak yeni önerisini sundu. Bu çalışma, javascript yardımıyla kameradan anlık görüntü, mikrofondan ise ses alabilmeyi sağlayacak bir API için yazılan ilk draft.
Çalışma oldukça enteresan ve enteresan olduğu kadar bütün web geliştiricileri heyecanlandıracak türden. Özellikle sosyal ağ platformu çılgınlığının sürdüğü ve şekil değiştirerek sürmeye devam edeceği bu dönemde, böyle bir özellik gerçekten çok farklı hizmetlerin sunulmasında kullanılabilir.
Elbette ki bu tip uygulamalar Flash ile yapılmakta ve yapılacak da. Mesela gerçekten güzel bir (yerli) uygulama olan, üyelik kartınız için gereken fotoğrafı anında çekip kartta size gösteren Müzekart uygulaması gibi. Ancak bu tip işlemlerin, javascript ile çok farklı alanlara ve geliştirici kitlesine yayılacağı da kesin.
Taslağı kabaca incelediğimde, kameradan bir görüntü yakalamak için ihtiyaç duyulacak kod aşağı yukarı şu kadar:
// Create a container div element and append it to the document body.
var container = document.createElement("div");
document.body.appendChild(container);
// The browser viewport width in pixels.
var screenWidth = window.innerWidth;
function successCallback(data) {
for (var i in data) {
var img = document.createElement("img");
img.src = data[i].uri;
// If the image width exceeds that of the browser viewport, the image
// is scaled to fit the screen keeping the aspect ratio intact.
if (data[i].format.width> screenWidth) {
img.style.width = screenWidth + "px";
img.style.height = (data[i].format.height/data[i].format.width)*screenWidth + "px";
}
container.appendChild(img);
}
}
function errorCallback(err) {
alert(err.message + " (" + err.code + ")");
}
// Launch the device camera application and invoke the callback once
// the user exits the camera application.
transactionId = navigator.device.captureImage(successCallback, 1, errorCallback);
LABjs isimli bir proje (http://labjs.com), web sayfalarına dışarıdan yüklediğimiz (js gibi) dış kaynakların yüklenmesini optimize etmeye yönelmiş bir Javascript kaynağı. Dış kaynakların aynı anda (veya sizin belirteceğiniz bir sıralama ile) yüklenmeye başlamasını sağlayabiliyorsunuz.
Bu tip bir iyileştirmenin Firefox 3.5 ile geldiğini biliyoruz. Kısmen (tarayıcının tanımlayabildiği) ilişkisi bulunmayan kaynaklar aynı anda yüklenmeye başlanarak önemli bir kaynak artışı sağlamışlardı.
Firefox 3.0′da bazı kaynakların yüklenmesi aşağıdaki şekildeyken (16.84 saniye):
Firefox 3.5′te kaynakların yüklenmesi bir miktar hızlanmıştı (10.69 saniye):
Ancak görebildiğiniz gibi hala bazı kaynaklar paralel yüklemeye maruz kalmıyorlar. Bunun sebebi yukarıda bahsetmeye çalıştığım tarayıcının kararverdiği öngereklilik koşulları.
Bu örnekte de LABjs tarafından önceliğe konulmuş dış kaynakların yüklenmesini görebilirsiniz (6.24 saniye):
Ancak tavsiye, yukarıda belirttiğim sitede yazan uyarılara gözatmadan sistemlerinize entegre etmeyin. Bu uyarıları “Are there any negative side effects?” başlığı altında görebilirsiniz.
Kendim yaptığım testleri derli toplu hale getirebilirsem burada yayınlayacağım…
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.
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…
Çok katılmayı istediğim, ama bunun bir hayal olduğunu bildiğim Berlin Javascript konferansı tamamlandı (http://jsconf.eu). Katılımcılar arasında kimler yoktu ki? John Resig (jQuery), Thomas Fuchs (script.aculo.us), Dion Almaer (Ajaxian), Steve Souders (Velocity), Jörn Zaefferer (jQuery UI)…
Gidemedik, ama sağolsunlar Blip üzerinden sunumların bir kısmını paylaşmışlar. Videoları aşağıda bulabilirsiniz…
İç geçirerek inşallah seneye diyoruz artık. Napalı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
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…
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.
Bundan bir kaç gün önce, Microsoft’un Ajax Minifier projesiyle ilgili bir post yapmıştım.
Bugün Ajaxian ekibinin, Microsoft Ajax Minifier ile YUI Compressor karşılaştırmasını okudum. İki ürün de birbirlerine üstünlük sağlamıyorlar yazarların yorumlarına göre. Bence YUI Compressor bir adım önde görünüyor. Özellikle sıkıştırdığı/küçülttüğü örnek kodları incelediğinizde, kodu körü körüne küçültmek yerine akışı algılayıp gereksiz tekrarları ve kaynak hebalarını yakalayabildiğini gözlemliyoruz. Bu bile oldukça ilgi çekici
Microsoft, AJAX.NET faciasından sonra tekrar bir Ajax kütüphanesi işine girişmiş. Henüz inceleme fırsatım olmadı, Pazartesi incelemeyi umuyorum. Sonra tekrar yorumlarımı yazarım inceleyebilirsem. Ama yorumlardan bakıldığında bu sefer “boyunun ölçüsünü” biliyor gibi görünüyor. jQuery pluginlerine geçiş vs. desteği verdiğine göre, babaları kabul etmiş, kendileri de bir şeyler eklemiş olabilir…
Bunula beraber Microsoft Ajax Minifier’ı test ettim. Bildiğimiz metotlarla Javascript dosyalarında boyut küçültmeye gidiyor. Denediğim JS’leri bozmadan iyi oranda küçülttü. Özellikle hyperchruncing özelliğini de denemenizi tavsiye ederim.
