JSTürk » Araçlar

CSS Seçicileri Performans Karşılaştırıcısı

Murat Çorlu — Sat, 16 May 2009 15:38:48 +0000

CSS seçiciler (CSS selector), Javascript Framework’lerin can damarıdır. Çünkü DOM üzerinde manipüle edeceğimiz elemanlara onlarla ulaşırız ve bu yüzden çok da sık kullanırız. Bu kadar çok sık kullanıldığından CSS seçicilerin çalışma performansları ve sağladıkları imkanlar, hangi Javascript Framework’ü kullanmamız gerektiği sorusuna cevap bulmada önemli bir bilgidir.

Slickspeed, bu konuda Javascript geliştiricilerinin yardımına sunulmuş bir uygulama. Mootools ile yazılan ve http://mootools.net/slickspeed/ adresinden çalıştırabileceğiniz uygulama ile 5 adet Javascript Framework’ün (MooTools, JQuery, Prototype, YUI, Dojo) CSS seçicilerinin performanslarını karşılaştırabilirsiniz. Bu değerlerin çalıştırdığınız tarayıcıya ve bilgisayara göre değiştiğini unutmayınız.

Javascript Kopya Kağıtları (Cheatsheets)

Murat Çorlu — Sat, 16 May 2009 15:25:43 +0000

Kopya Kağıtları (Cheasheets), bir çok web uygulama geliştiricisinin kullandığı araçlar. Çünkü diller ve framework’ler o kadar çok özellik ve metod içeriyorlar ki bunların hepsinin ezberde tutulması hem zor hem de gereksiz.

İşte bu durumda imdadımıza kopya kağıtları yetişiyor. “addClass mıydı, addClassName miydi?”, “ilk parametre mi dizi olacaktı ikinci parametre mi?” gibi sıkça kafamız karıştığı zamanlarda hemen Google’da arama yapmak yerine masamızın üzerindeki tek sayfalık kopya kağıdımıza bakmak çok daha hızlı ve verimli olacaktır.

İşte size Javascript uygulama geliştiricilerinin çok işine yarayacak bazı kopya kağıtlarını sunuyoruz:

Javascript Cheatsheet

JQuery Kopya Kağıdı (Cheatsheet)

Prototype Kopya Kağıdı (Cheatsheet)

Mootools Kopya Kağıdı (Cheatsheet)

Dojo Kopya Kağıdı (Cheatsheet)

Dojo 1.3 Temel API’si Kopya Kağıdı

YUI Kütüphanesi Kopya Kağıdı (Cheatsheet)

Yahoo! Kullanıcı Arabirimi Kütüphanesi Kopya Kağıdı (tüm özellikleri içeren tek bir zip dosyası)

Pixastic: Javascript Resim Editörü

Murat Çorlu — Tue, 23 Dec 2008 16:51:30 +0000

Pixastic, tarayıcıların canvas desteğini kullanarak, taracıyı üzerinde Photoshopvari resim manipülasyonları yapmaya yarayan bir javascript kütüphanesi.

Henüz beta aşamasında olan Pixastic Editör, Internet Explorer’ın canvas desteği olmadığı için şu anda Firefox 2+, Opera 9.5+, Webkit’li Safari ve Google Chrome tarayıcılarında çalışıyor. Pixastic aşağıdaki resim manipülasyon işlemlerini yapabiliyor:

Blur (Bulanıklaştırma)
Brightness/Contrast (Parlaklı ve zıtlık)
Crop (Kes)
Desaturate (Doygunluk)
Edge Detection (Keskinlik denetimi)
Emboss (Kabartma)
Flip Horizontally/Vertically (Yatay/Dikey çevir)
Glow (Parlat)
Histogram
Hue/Saturation/Lightness (Renk/Doygunluk/Aydınlık)
Invert (Ters çevir)
Laplace Edge Detection
Lighten (Aydınlat)
Noise (Gürültü, gren)
Posterize
Remove Noise (Gürültü temizleme)
Sepia (Sepya)
Sharpen (Keskinleştir)
Unsharp Mask
Color Adjust (Renk Doğrulama)
Mosaic (Mozaik)
Pointillize
Solarize

Kütüphanenin jQuery eklentisi sayesinde jQuery ile birlikte kullanmak da mümkün.

Websitesi: http://www.pixastic.com

Örnek: http://editor.pixastic.com/

Dokümantasyon: http://www.pixastic.com/lib/docs/

5 KB ile ücretsiz Javascript Slayt Gösterisi

Murat Çorlu — Tue, 23 Dec 2008 09:46:52 +0000

Animated JavaScript Slideshow, sadece 5 KB’lık dosya boyutu ve ücretsiz olmasıyla dikkat çeken bir Javascript slayt gösterisi kodu.

Resimlerle ilgili başlık ve açıklama metinlerini de resim üzerlerinde gösterebilen, küçük ve güzel geçiş animasyonlarına sahip uygulama, bir çok parametreyle kolayca özelleştirilebilir.

Kodlama çalışmak için herhangi bir Javascript Framework’e ihtiyaç duymuyor. Henüz ayrıntılı bir dokümasyona sahip değil ancak bu adresteki tanıtım metninde kullanılabilecek parametreler listelenmiş.

Websitesi: http://www.leigeber.com/2008/12/javascript-slideshow/

Örnek Uygulama: http://sandbox.leigeber.com/javascript-slideshow/

Kodu İndir: http://sandbox.leigeber.com/javascript-slideshow/TinySlideshow.zip

Mootools Resim Slayt Göstericisi: SlideItMoo

JSTürk — Mon, 22 Dec 2008 15:06:47 +0000

SlideItMoo, Mootools Framework’ü ile yapılmış bir resim slayt göstericisi.

Foroğrafları fare tekerleğiyle hareket ettirme, otomatik slayt, geçiş efekti gibi özelliklere sahip SlideItMoo’da stil verileri tamamen harici bir CSS dosyasından okunduğundan görsel yapısını kolayca değiştirme esnekliğine de sahip.

Websitesi: http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-image-slider-slideitmoo/

Örnek Uygulama: http://www.php-help.ro/examples/mootools_rotator/

Tarayıcı Uyumluluğu: IE6+, Firefox 2+, Operan9.5, Google Chrome 1

Gereksinimler: Mootools, Fx.Scroll