İş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’ü. Okumaya devam et

IE’nin eski sürümlerini desteklerken modern siteler geliştirmek için 20 ipucu

Jquery Foundation Başkanı Dave Methvin yazısının çevirisidir.

Dave Methvin, jQuery Foundation’ın Başkanı, jQuery Core ekibinin baş geliştiricisi ve 2006’dan bu yana jQuery topluluğunun katılımcısı. 1996’dan beri JavaScript ve HTML web çözümleri üretiyor.

Blog: http://blog.methvin.com/

Son birkaç yıldır web geliştiricileriyle konuşmaya epey zaman ayırdık ve en çok duyduğumuz şeylerin başında değişik tarayıcı sürümlerinin ve aygıtların tümünde çalışan siteler geliştirmenin ne kadar güç olduğu geliyor. jQuery projesinin kodunu yazarken kendimiz de bu sorunu yaşadık. Bu yüzden katıldığımız sayısız konferanstan ve okuduğumuz yüzlerce öğretici metinden topladığımız en çok kullanılan 20 kodlama şeklinin ve yönteminin bir listesini derledik. Geliştirme sırasında daha az zamanı boşa harcamanızı (ve başınızın daha az ağrımasını) sağlayacağını umuyoruz.

Tarayıcılar arası çalışmanın temel ilkeleri

  1. Sitelerin tüm tarayıcılarda aynı şekilde görünmeleri gerekmez

    Geliştiriciler arasında yaygın bir kaygı, sitelerinin, modern olmayanlar dahil tüm tarayıcılarda aynı görünmesini sağlama. Bu her zaman gerekli değil. Daha iyi bir yol, tarayıcısı modern olmayan kullanıcılara temel bir deneyim; tarayıcısı modern olanlara ise daha zengin bir kullanıcı arabirimi sunarak sitenizi giderek daha fazla zenginleştirme.

  2. Geliştirmeyi basitleştirmek için katı bir şablonla başlayın..

    Bu ipuçlarının çoğu, zaman kazanmanız için HTML5 Şablonu gibi şablonların tasarımına yerleştirilmiştir. Bu kurallar, modern tarayıcılara yönelik projelerde olduğu kadar sürümü IE6’ya kadar giden destek gerektiren eski tarayıcılara yönelik olanlarda da iyi sonuç vermektedir.

  3. Kalıcı standartlara odaklanın

    Yeni ve çekici bir özellik çıktığında hemen heyecanlanmanız çok normal; ancak bunlardan bazıları henüz deneme aşamasında ve belirtim henüz geliştiriliyor olabilir. Teknik belirtim hazırlığının erken aşamalarında olan özelliklerin değişmesinin olası olduğunu, bunun sitenizin kullanılabilirliğini ve müşterinizin deneyimini etkileyebileceğini akılda tutmak önemli. Yerleşmiş standartlara odaklanmakla müşterilerinizin bekledikleri deneyimi almalarını ve sitenizin daha kolay sürdürülebilir olmasını sağlamış olursunuz.

  4. Sitenizi standartlara dayanan koda geçirmek için IE Compat Inspector’ı kullanın

    Standartlar Internet Explorer 10’un çok önemli bir parçasıdır ve geliştiricilerin kodlarını bundan yararlanmak üzere yeni sürüme geçirmelerini sağlamak IE mühendislik ekibi için olağanüstü önemlidir. Sitenizi gerçek zamanda çözümleyebilen, sık yaşanan sorunları topluca belirleyen ve çözümler sunan IE Compat Inspector‘ı bu yüzden geliştirdiler. Kodunuza basit bir JavaScript dosyası dahil ederek doğrudan sayfanızda görsel sonuçlar elde edeceksiniz. Araç ayrıca Fiddler HTTP çözümleme aracıyla da tümleştirilebilmektedir.

  5. “Polyfill” ve “shim” öğelerini olabildiğince az kullanın

    Tüm tarayıcılarda kesinlikle aynı deneyimi sunmanız gerekiyorsa, “polyfill” ve “shim” öğeleri, standartlara dayanan API’lere ve işlevselliğe benzemeye yardımcı olabilecek kod ve etiketler sunar. Burada unutulmaması gereken şey, kullanım amacınıza uyduğundan ve ileride destekleyebileceğinizden emin olmak için kodunuzu düzgün biçimde test etmeniz gerektiğidir.

  6. Geliştirirken birden çok tarayıcıda test edin.

    Modern tarayıcılar, geçmişten farklı olarak tek bir standarda daha yakın olsa da, tarayıcılar arasında hala farklar vardır. Geliştirme sırasında ara sıra kodun birden çok tarayıcıda denenmesi, son dakikada; daha da kötüsü site yayınlandığında, ciddi tarayıcılar arası sorunların ortaya çıkmamasını sağlayabilir. Herhangi bir hata veya uyarı iletisi olup olmadığını görmek için, IE’deki F12 Geliştirme Araçları gibi tarayıcı konsollarına bakmayı unutmayın. IE7 gibi yerleşik konsolu olmayan eski tarayıcılarda konsol sunmak için Firebug Lite gibi araçları kullanabilirsiniz. Diğer bir yol da BrowserStack gibi barındırılan tarayıcılar arası bir çözüm sunmaktır.

  7. Hataları denetlemek ve dosyaları küçültmek için araçlı bir derleme işlemi kullanın.

    HTML doğrulayıcılar, CSS doğrulayıcılar, Uglify ve JSHint ya da GruntJS gibi nitelikli derleme araçları örtülü sorunları bulabilir, proje kodu standartlarını uygulatabilir ve performansı iyileştirmek için dosya boyutunu küçültebilir. IDE’niz veya kod düzenleyiciniz bunları destekliyorsa bu aşamaların engel çıkarmaması gerekir. Örneğin Visual Studio, derleme işlemi sırasında dış araçlar çalıştırmayı ve /sıkıştırılmış betik dosyalarını birleştirmeyi destekler.

HTML

  1. Süslemeler Modu’ndan kaçınmak için her zaman standartlara dayanan bir belge türü kullanın.

    <!DOCTYPE html> ile başlayın. Modern web’de, 1990’ların ortalarında çıkan web sayfalarının IE6 ve Firefox 2 gibi “modern” yüzyıl başı tarayıcılarında çalışması için tasarlanmış olan Süslemeler Modu’na yer yok. Günümüzün web sayfalarının çoğu, geçersiz bir “doctype” kullanılması veya doctype’tan önce dış metin kullanılması gibi nedenlerle kendisini yanlışlıkla Süslemeler Modu’nda buluyor. Bu, gidermesi güç olan garip sayfa düzeni sorunlarına neden olabiliyor.

  2. HTML5 etiketlerinin geriye doğru uyumluluk sınırlamalarını anlayın.

    <section>, <header> ve <footer> gibi yeni HTML5 etiketleri, işaretlemenin semantiğini geliştiriyor ancak Internet Explorer 6, 7 ve 8’de çalışmak için bir “shiv” betiği gerektiriyor; yoksa tanınmıyor. Betikler devre dışı bırakıldığında bile bu eski tarayıcılarla çalışması gereken sayfalar yeni HTML5 etiketlerini kullanamaz. Bu durumlarda normal

    öğeleri ve sınıflar kullanmak, genellikle daha güvenli bir yol.
  3. CSS dosyası başvurularını HTML dosyasının üst kısmına koyun.

    CSS dosyalarını gövdeye koymak, CSS yüklenene kadar tarayıcının boş bir sayfa göstermesine neden olabilir. Tarayıcının olabildiğince erken alabilmesi için CSS dosyaları HTML belgesinin başına yerleştirilmelidir.

  4. JavaScript dosyası başvurularını HTML dosyasının alt kısmına koyun.

    JavaScript dosyası sayfaya yeni işaretler yazabileceğinden, dosyanın geri kalanını ayrıştırmaya geçebilmesi için tarayıcının önce HTML işaretlemesindeki bir betik dosyasını alması, ayrıştırması ve yürütmesi gerekir. Betikler sayfanın alt kısmında olduğunda, kullanıcının sayfanın daha hızlı yüklendiğini algılaması için, betikler daha tamamlanmadan bile tarayıcı genellikle sayfayı ekrana yazabilir.

  5. HTML işaretlemesinde satır içi JavaScript etiketlerinden kaçının.

    Dış betik başvurularında olduğu gibi satır içi betik de tarayıcının HTML’yi ayrıştırmayı durdurmasını gerektirir ve sayfadaki başka kaynakların da paralel olarak yüklenmesini engelleyebilir. Bu, sayfanın ilk yüklenişini ciddi olarak yavaşlatabilir ve kullanıcıya herkesin korktuğu “boş sayfa” görüntüsünü yaşatabilir. Etiketler arasına serpiştirilen betiklerin bakımı da güçtür.

  6. HTML işaretleri içinde satır içi JavaScript olayları kullanmayın.

    Örnek: <button onclick=”validate()”>Validate</button>. Bu uygulama etiketleme, sunum ve davranış arasındaki net ayrışmayı bozar. Ayrıca, betikler sayfanın alt kısmında yüklenirse, kullanıcının sayfa ile etkileşip henüz yüklenmemiş bir betiği çağırmaya kalkışan bir olayı tetiklemesi ve bir hataya neden olması da olasıdır.

CSS

  1. CSS basamak kurallarını öğrenin ve kullanın.

    Basit “id” ve “class” seçiciler kullanışlıdır, ancak yalnızca bunların kullanılması işaretlemenin daha karmaşıklaşması ve gereksiz “id” ve “class” değerleriyle daha az yeniden kullanılabilir hale gelmesi demektir. Sınırlı sayıda “id” ve “class” ile “tag”, “descendant”, “child”, “sibling” ve “attribute” seçicilerinin kullanılması hem işaretlemeyi hem de CSS’yi daha basit ve daha genel amaçlı yapar. Her durumda “!important” kuralını kullanmaktan kaçının.

  2. Gelecekte sorun yaşamamak için üreticiye özgü CSS özelliklerine tam önekler getirin.

    Taslak halindeki yeni standartlar ilerlerken, tarayıcı üreticiler bazen önekli özelliklerle bunlara destek vererek standardı hemen kullanmaya başlarlar. CSS’nin gelecekte çalışacağından emin olmak için öneksiz adın yanı sıra üreticiye özgü önekli tüm adları kullanın. Bu blog yazısı düz JavaScript ile sağlanan bir seçenek sunmaktadır.

  3. Uyumluluk sorunlarını CSS ayrıştırma numaraları ile değil geçerli CSS kuralları ile çözün.

    Tarayıcılar güncellendiğinde geçerliliklerini yitirebileceklerinden CSS ayrıştırma numaraları güvenilir değildir. Bunun yerine “html” veya “body” etiketine stil sayfası kurallarında kullanılabilecek sürüme özgü sınıflar eklemeyi deneyin. Ayrıca, gerek duyan sürümler için tarayıcıya özgü bir CSS dosyasını dahil etmek üzere koşullu yorumlar da kullanılabilir.

JavaScript

  1. Tarayıcı (navigator.userAgent) algılama yerine her zaman özellik algılama kullanın.

    userAgent dizesi belirli bir özelliğin (veya böceğin) sayfada olup olmadığını anlamak için yetersizdir. Sorunu daha da güçleştiren şey ise userAgent’ı yorumlayan çoğu kodun bunu yanlış olarak yapmasıdır. Örneğin bir tarayıcı tanıma kitaplığı büyük sürümün tek bir rakam olmasını beklediğinden Firefox 15’i Firefox 1 olarak, IE 10’u ise IE 1 olarak bildiriyordu! Özelliği veya sorunu doğrudan algılamak daha güvenilirdir; kod dallanmalarında bu kararın ölçütlerini kullanın. Özellik algılamayı gerçekleştirmenin en kolay yolu olarak Modernizr kullanmanızı öneririz.

  2. Belge hazır olduğunda olabildiğince az betik kullanın.

    jQuery’nin $(document).ready() işlevi gibi teknikler, güvenli olarak çalışabileceği en erken an olduğundan betiği sayfadaki HTML yüklenir yüklenmez çalıştırmayı kolaylaştırır. Ancak bu noktada çok miktarda karmaşık betik çalıştırmak sayfanın yavaş geldiği izlenimini verebilir ve kullanıcının sayfa ile hemen etkileşime geçmesini engelleyebilir. Genellikle bir araç ipucu veya bir iletişim kutusu gibi şeylerin ilk değerlerinin verilmesi, farkedilebilir bir gecikme olmadan bu öğeler yükleninceye kadar ertelenebilir.

  3. Kullanıcının sayfa ile etkileşimi açısından kritikse AJAX isteklerini olabildiğince erken başlatın.

    Bir AJAX isteği uzun zaman alabileceğinden, isteği başlatmadan önce HTML sayfasının hazır olmasını beklemeye gerek yoktur. Bunun yerine $(document).ready() çağrısını AJAX tamamlanma işlevinin içine yerleştirin.

  4. Önemli olmayan betikleri (Facebook Like, Google +1, Twitter gibi) geciktirerek yükleyin.

    Herkes sayfasının sosyal ağlarda popüler olmasını istiyor, ancak sosyal ağ betikleri büyük olma eğiliminde ve kullanıcının aldığı yanıtların yavaş olmasına neden olabiliyor. Bu betikleri istemeden önce sayfanın yüklenmesini beklemek, sayfanın kullanıcıya daha erkenden yanıt vermesini sağlayabilir. Hatta bu düğmeler gerekli mi, bunlar sayfanın genel deneyimini iyileştiriyor mu diye düşünmekte de yarar var.

Alıntı adresi : http://www.modern.ie/tr-tr/cross-browser-best-practices

İnternet Explorer Eski Sürümler İçin Html5 Css3 Desteği

Bu konu hakkında Fatih Hayrioğlu’nun güzel bir makalesi var. Gerçekten işime yaradı ve sizlerle paylaşmak istiyorum.

En önemlisi şu:

<!–[if lt IE 9]> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt; <![endif]–>

Bu şartlı kod ile ie9’dan daha eski tarayıcılarla girildiğinde bu javascript dosyasını çağırıyoruz. Böylece eski ie sürümlerine de html5 css3 desteğini sağlamış oluyoruz.

Daha detaylı bilgi için Fatih Hayrioğlunun yazısına gidelim :)