İşe Yarar Eklentiler

Webmagazin.co sitesinden alıntıdır.

Intro.js

Web projelerinde, eğer standart bir layouta sahip web sitesi değilse; kullanıcılara neyin ne olduğunu, nerede ne bulabileceklerini, akışın nasıl olması gerektiğini anlatabilmeniz için kullanışlı, 2kb’lık bir javascript eklentisi. Özellikle, “Çok güzel bir site/proje/uygulama yaptık ama arayüz kullanıcılara çok yabancı geldi, sanırım pek user-friendly değil bu tasarım, değiştirmeliyiz” demeden önce denemekte fayda var.

Imageloader

Bazı insanların, hayvanların yada nesnelerin kendileri, isimlerinin yarattığı beklentiyi karşılamaz;  örneğin vasistas, vavien ya da uzun ve haşmetli isme sahip ama aslında ufak tefek ve zararsız olan dinozorlar. Ancak Imageloader, ismi ile kendisini çok net ve doğru bir şekilde ifade eden bir jQuery eklentisi. Kendisine bir array olarak verdiğiniz imajları sessiz sakin yüklüyor ve ne yapmasını istediğinizi söylemenizi bekliyor.

Antwort

Web işleri arasında en sevmediğim mailing kodlamaktır! Çünkü, pek kıymetli mail programlarının en çok kullanılanları (gmail, outlook, hotmail, yahoo…yahoo mail kullanan kaldı mı?) hala 10 sene öncesi css standartlarını sevip saydıkları için table table içinde table onun içinde kimse float etmesin mantığında yazmak zorunda kalırız ve asla tasarımda durduğu gibi durmaz. Responsive zaten uzak ihtimal gelir. Antwort böyle baş ağrıları için çözüm sunan, responsive email layout framework’ü.

jQuery Nested

Pinterest ile tanışıklığımızın had safhalara ulaştığı, Masonry eklentisi ile daha başka pek çok projede gördüğümüz yapı için bir başka eklenti Nested. Kendi tanımları ile diğerlerinden farkı boşluksuz olabilmesi. Dolmuş, otobüs ve metrobüs şöförlerinin favorisi olabilecek bu özellik sayesinde, boşluklara göre oluşan matriksi tekrar hesaplayıp elementleri tekrar diziyor ve eğer isterseniz tam dolu bir görünüm için sonlardaki elementlerin boyutlarını boşlukları dolduracak şekilde genişletiyor.

Unslider

Unslider, dokunmatik desteği olan, responsive, küçük ve kullanımı oldukça basit, jQuery ile çalışan bir slider. Bol bol aynı sliderları kullanmaktan (Nivo, Flexslider, BxSlider vb.) sıkılanlara güzel bir alternatif.

iCheck

Arayüz giydirmesi ile uğraştığım anlarda, en sevmediğim durum standartın dışında bir tasarıma sahip checkbox, radio button ve select menüler oluyor. Sınırlı CSS desteği yüzünden genellikle javascript ile çözüm bulunuyor, bu çözümlerin çoğunda da orası böyle burası şöyle olsun demek pek rahat olmayabiliyor. iCheck, bu örnekler arasında uzun süredir gördüklerimin en güzeli. Mobil cihazların da destekleniyor olması önemli bir avantaj. O kadar övmüşken sitesini de övmeden geçmeyelim, çok kullanışlı ve şık gözüküyor.

Chart.js

Grafikleri seviyorum özellikle de IE8′in ve IE7′nin azalarak gittiği  bu grafik favorim. Bu grafikten bağımsız olarak da Chart.js ile projelerinizde HTML5 tabanlı grafikler yerleştirebilirsiniz. Oldukça rahat bir kullanımı var ve IE7/8′i bile çeşitli polyfill’ler yardımıyla destekliyor.

Sabah aldığım simitten kimin ne kadar otlandığını Chart.js ile kolayca görselleştirebildim

Sabah aldığım simitten kimin ne kadar otlandığını Chart.js ile kolayca görselleştirebildim

Superhero.js

Superhero.js‘yi okumalıklar kategorisine mi koyamalıyım buraya mı koymalıyım kararsız kaldım ama sanırım burası daha doğru. Daha önceki haftalarda bahsettiğim Jsdb.io yada Unheap gibi javascript kütüphanesi kütüphanelerini görmüşsünüzdür. Superhero.js de bu javascript bolluğunda güzelce kategorilendirilmiş – adeta müfredatlandırılmış – kaynak kütüphaneciliği yapıyor. Ayrıca sitenin tasarımı ve kullanılan çizimler çok başarılı.

WBench

Çağımızın vebası düşük front-end performansı son dönemde web projelerinde önemli gündem konularından. Envato’daki Keith Pitt ve Mario Visic, bir Ruby konferansında sunmak üzere http://www.giftoppr.co/ isimli bir proje yapmışlar ve hedef olarak da 2 saniyenin altında bir açılış süresi (page load) belirlemişler.

WBench, bu süreçte Ruby ile geliştirdikleri bir test aracı. Web sayfasını browser üzerinde 10 kere açıp; açılış süreleri, içerik yüklenme süreleri gibi verileri topluyor. Dikkat edilmesi gerek, takıntı ve bağımlılık yapabilen bir araç. Ben, bu sistemi kurup sunumlarını inceledikten sonra, kendi sitem (borayalcin.me) üzerinde denedim. Cloudflare’e taşınma, cache kullanımı, javascript ve css dosyalarının minify edilmesi gibi uğraşların ardından 8-9 saniye civarından, 3-4 saniye civarına düşürdüm. Pek çok cache yöntemini kullanamadığım bir shared hosting üzerinde bir site için pek de fena değil sanırım :)

Konu ile ilgili yazı ve video, Slaytlar (video uzun geldiğinden ben yalnızca bunu inceledim ama konuyu anlamak için yeterli)

jQuery Pin

Screen Shot 2013-04-17 at 10.12.48 AM

jQuery Pin’e en güzel örnek sanırım 9gag’den verilebilir. Aşağıya doğru sayfayı indirirken resim iner ama sağdaki başlık resim bitene kadar sabit kalır ya. İşte tam olarak bunu yapan bir jQuery eklentisi.

QueryLoader2

Web sitenizde bir sürü resim, grafik gibi ağır ağır açılan şeyler varsa ve sabırsız ziyaretçileriniz ‘Açılmıyor bu’ deyip kaçmasın, hemen bir şeyleri beklediklerini bilsinler istiyorsanız; önyükleme için kullanabileceğiniz güzel ve kolay bir jQuery plugini.

jResize

Responsive arayüz kodlamalarınız sırasında güzel bir yardımcı.

DropzoneJS

Screen Shot 2013-04-28 at 2.43.33 PM

Sürükle bırak dosya yükleyicilerinin en yeni üyelerinden, son teknoloji API’leri kullanan bir eklenti dropzonejs. Son zamanlarda genellikle Plupload kullandığım dosya yükleme işleri için güzel bir alternatif. Tek handikapı, eğer explorer kullananlar dosya yüklemese de olur diyeceğiniz bir proje değilse IE10 altına desteğinin olmaması.

 

 

 

jQuery PrintIt

Arayüz Geliştiriciler grubunda gördüğüm, Taner Doğan tarafından yazılmış, ufak ama oldukça işe yarayabilecek bir eklenti. PrintIt ile sayfa üzerinde basılmasını istediğiniz bir elementi print sayfasında açıp çıktısını alabiliyorsunuz. Örneğin, bir ürün sayfasında yada fiyat karşılaştırma tablosunun olduğu bir sayfada tüm sayfanın çıktısı yerine yalnızca özellikler tablosu, karşılaştırma tablosu gibi kısımların çıktılarını aldırabilmek için kullanışlı.

TurkeyMap

TurkeyMap, yaptığımız bir projede kullanmak üzere illere göre interaksiyonlu Türkiye haritası ararken bulduğum, Raphael JS kullanılarak, Selen Gora tarafından hazırlanmış bir harita eklentisi. Daha sonrasında üstteki PrintIt eklentisini yazan Taner Doğan tarafından da fork edilerek modal boxlar da eklenmiş. En son altı ay öncesinde güncellenmiş bir repo ancak belki sonrasında devamı gelir.

Bunun dışında haritalarla ilgileniyorsanız, githubdaki Stately projesinden etkilenip Türkiye versiyonunu Erkmen Altuntaş ile yazmaya başladığımız sembol fontlarla yapılmış bir harita da bu adreste mevcut.

Bootply

An geçmiyor ki Bootstrap bir yerlerden daha başgöstermesin. Arayüzün jQuery’si olmaya başladı desem sanırım yanlış bir tabir olmaz. Jsfiddle yada codepen kullanarak html-css-js ile bir şeyler deneyebiliyorsak Bootply kullanarak da Bootstrap ile denemeler, geliştirmeler yapabiliyor, arkadaşlarımızla, sevdiklerimizle paylaşabiliyoruz

SnapJs

Güzel, kullanışlı, facebook mobilvari menü rafları yapabilirsiniz. Üstelik jQuery gibi bir kütüphaneye de bağlı olmadan kendi ayakları üzerinde durabilen 10 KB’lık bir eklenti olan SnapJs ile. Nasıl oluyor izlemek de isterseniz video demosu da burada.

Bilgisayardan alınan screenshot bir sırıttı galiba

Kaynak:

http://webmagazin.co/web-dunyasinda-neler-oluyor-2/

http://webmagazin.co/web-dunyasinda-neler-oluyor-3/

http://webmagazin.co/web-dunyasinda-neler-oluyor-4/

http://webmagazin.co/web-dunyasinda-neler-oluyor-5/

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

w

Connecting to %s