Bir önceki gönderimde (Zen Coding) bahsettiğim Zen Coding ile ilgili yeni bir kaynak buldum. Bu kod için Visual Studio Add-in'i geliştirmeye başlayacağımı söylemiştim. Konu ile ilgilenip, Python kodlarını .NET ortamında compile etmeyi denemeye başladım. Tam IronPython ve IronPyhton Studio ile içli dışlı olmuşken ve bir noktaya gelmişken, Amerika'nın daha önce keşfedildiğini fark ettim...
Einar Regilsson'un Blog'unda, konu ile ilgili bir çalışma yaptığını gördüm. Blog yazısını buradan okuyabilirsiniz. Yazının sonlarına doğru "an installer" linki ile setup dosyasına, "the source" linki ile de kaynak kodlarına erişebilirsiniz. Emeğe saygı olarak hotlink yapmıyorum. Aslında mantık konusunda doğru yolda ilerlediğimi kaynak kodlara baktığımda görmüş oldum. Regilsson da IronPython modülünü kullanarak çalışma yapmıştı. Tek farkı kodu olduğu gibi Python kaynağında bırakıp, on-the-fly compile işlemini IronPython ile yapmış.
Add-in'i çektim, denedim. Hem Visual Studio 2005 hem de 2008'de sorunsuz olarak çalıştı. Kurulumdan sonra Visual Studio'nuz içerisinden bir kısayol ataması yapmanız gerekiyor sadece. Kısaca adımlar şöyle;
- Visual Studio kapalı iken Add-in kurulumunu tamamlayın.
- Visual Studio'yu açın, "Tools" menüsünden "Add-in Manager..." seçeneğini seçin.
- Listede "ZenCoding" karşısındaki iki işaret kutusunu da seçip onaylayın.
- "Tools" menüsünden "Options..." seçeneğini seçin.
- "Environment" dalından "Keyboard" yaprağını seçin.
- Komut listesinden "ZenCoding.VisualStudio.ZenCodingAddIn.Expand" seçeneğini seçin.
- "Use new shortcut in" kutusundan "HTML Editor Source View" seçeneğini seçin (eğer ZenCoding özelliklerinin code-behind dosyaları, resource dosyaları gibi diğer bütün yerlerde aktif olmasını istiyorsanız seçimi "Global" olarak bırakabilirsiniz).
- "Press shortcut keys" kutusunda istediğiniz kısayolu tuşlayın (ben CTRL+E kullanmayı tercih ettim).
- Kutuyu onaylayarak çıkın.
table#tblMain.tblClass>th.tblHeaderClass+tr#trSub_$.tblRowClass*5>td#tdSub_$.tblCellClass*3Yazıp CTRL+E yaptığınızda şu çıktıyı görmek korkunç güzel birşey :)
<table id="tblMain" class="tblClass">Bir süre sonra kısa bir video hazırlayıp yazıyı editlemeyi düşünüyorum. Vakit bulabilirsem tabi...
<th class="tblHeaderClass"></th>
<tr id="trSub_1" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_2" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_3" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_4" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_5" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
</table>
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.
<div class="test">
<span id="spn1">
<span id="spn2">
<span id="spn3">
</div>
$('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).
- CheckBoxList kullanımından vazgeçip, alanı repeater'a çevirmek istediğimiz gibi özgür olmak.
- Bir javascript array içerisinde ilgili açıklamaları ve ID'leri tutup, sayfa yüklendiğinde prototype.js ile (projede prototype kullanılıyor) bunları tooltip'e çevirmek.
- Soruna bir CSS yaklaşımı ile çözüm aramak.
table.chkOptionHover td labelBu sayede checkboxlistteki her bir checkbox'a ait açıklamalar görünmez hale geliyor. Bir önceki style'da belirttiğimiz td'nin hover'ına bir class daha vererek üzerine geldiğimizde açıklamaların görünmesini sağlıyoruz.
{
display:none;
}
table.chkOptionHover td:hover labelBelirttiğim style eklendikten sonra mouse over efekti şu duruma geliyor:
{
position:absolute;
display:block;
}
Her ne kadar görsel olarak kullanılabilir olmasa da isteğimiz aslında teknik olarak gerçekleşmiş durumda. Bir kaç küçük CSS dokunuşu ile label'larımızı gerçek birer tooltip'e döndürüyoruz. Bunun için sadece :hover class'ına bazı eklemeler yapıyoruz. Tabi ki istediğiniz şekilde görsel oluşturabilirsiniz. Bu benim tercihim:
table.chkOptionHover td:hover labelYukarıdaki uygulamalardan sonra artık tooltip'imiz oturmuş duruma geliyor ve aşağıdaki gibi bir görüntü oluşuyor:
{
font-size:10pt;
font-weight:bold;
padding:5px;
position:absolute;
background-color:yellow;
-moz-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}
Gerçek bir tooltip'e benziyor değil mi? Uygularken Checklist'e class verip yukarıdaki satırları eklemek dışında da bir geliştirme gerektirmiyor. Ön koşulların sağlandığı durumlarda oldukça uygulanabilir bir çözüm olduğunu düşünüyorum. Ayrıca IE, Firefox ve Chrome (webkit) uyumlu olarak çalışıyor. Tarayıcıdan tarayıcıya tooltiplerin konumları değişebiliyor, ancak hepsi kabul edilebilir sınırlar içerisinde kalıyor. Arzuya göre genişlik de belirterek daha tooltip-benzer bir görüntü de elde edilebilir. Ötesi CSS yeteneklerinize kalmış...
Umarım sizin de işinize yarar...
Tebdil-i Mekanda ferahlık varmış. Blog'uma yeni tasarım giydirdim. Diğer tasarım da iyiydi hoştu ama yazı alanı çok dardı...
Ç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...
Dostum Ümit Öncel'in bir yazısından öğrendiğim Lose/Lose süper bir oyun. Detayları okumadan oynamayın lütfen :) İlk önce Visual Studio dosyalarından silmeye başlıyorsa hemen oynamaya başlamayı planlıyorum...
http://www.tekno-cafe.com/index.php/oyun/dunyanin-en-tehlikeli-bilgisayar-oyunu
Bir oyun örneği ve 5000'e yaklaşan puanlar olan highscore listesini (manyaklar listesi de diyebiliriz) görmek için ise http://www.stfj.net/art/2009/loselose
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
Daha önceki gönderilerimde, Perculus ürünümüzün başarısını anlatmıştım.
Bugün (aslında saat itibariyle dün), çalışma arkadaşlarım beni ve bu işin diğer elebaşı Cengiz'i çok mutlu edecek bir jest yaptılar. Bizim için aşağıdaki kocaman pastayı yaptırmışlar, pastayı ilk kesme şerefini de bana verdiler sağolsunlar.
Çok mutlu oldum. İş yerinde çalıştığım kişilerin "iş arkadaşı"ndan çok dost olduğunu bir kere daha gördüm.
Teşekkürler dostlarım, iyi ki varsınız. Sizlerle beraber daha bir çok başarı tesadüf olmayacak. Kadir kıymet bilmeyenler hiç önemli değil. Siz biliyorsanız bu bana yeter. Sizler oldukça ben de bu çatı altında olacağım...
Ali
Uzun süredir var olan ancak ücretli olan Ample GUI SDK artık ücretsiz. Özellikle XUL tabanlı arabirim elemanları, IE'ye SVG desteği getirmesi gibi özellikleri ile göz dolduruyor ve ilgi çekiyor. Bütün web developerların arşivinde bulunmalı...
http://www.amplesdk.com
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
İlginç bir proje. Bilindik çok kullanılan yazılımları tek seferde bilgisayarınıza kurmak için tasarlanmış bir sistem. İstediğiniz yazılımları uzunca bir listeden seçiyorsunuz. Daha sonra size küçük bir installer download ettiriliyor.
Bundan sonra start'a basıp kahve almaya gidiyorsunuz... Çünkü Ninite, seçtiğiniz programları sırayla download ediyor (son sürümlerini) ve size tek soru sormadna kuruyor... Şaka gibi ama gerçek :)
Buradan deneyin lütfen: http://ninite.com