Uzun seneler web siteleri kodlarken nimetlerinden yararlandığımız jQuery, mobilin yükselişi ile gündemin ana maddesi olan performans sonrası yerini sorgulatıyor. Acaba normal javascript ile ben jquery’nin yaptıklarını yapamaz mıyım. Aslında Javascript’in hızlı yenilenmesi ile birlikte bir çok özelliği, metodu, fonksiyonu normal javascript ile yapabiliyoruz.

Bu yazı dizisini de şu an üzerinde çalıştığım zingat.com‘da üzerine uzun süredir kafa yorduğumuz performans işlerinin bir sonucu olarak “acaba jQuery kaldırsak daha mı hızlanırız?” sorunundan sonra başladım.

Jquery’nin sağladığı avantajları bilip bunlara karşı çözümler aramalıyız.

  • Kolay yazım
  • Tarayıcı desteği
  • Geniş topluluk desteği
  • jQuery kütüphanelerinin yaygınlığı
  • Dokümantasyon ve makale bolluğu

Kolay yazım

jQuery bir çok işimizi kolaylaştıran seçiciler, manipülasyon işleri ve kullanışlı metotlar sayesinde kod yazanlara kolaylıklar sağlar.

Gelişen javascript sürümleri ile jQuery ile yaptığımız kolaylıkta bu işleri artık javascripte yapabiliyoruz.

Tarayıcı desteği

Farklı tarayıcılar için çözüm oluşturmak için jQuery birebir.

Tarayıcıların otomatik güncellenmesi ile bu sorun büyük oranda azaldı.

Geniş topluluk desteği, jQuery kütüphanelerinin yaygınlığı ve Dokümantasyon ve makale bolluğu

jQuery geliştiren ve çözüm üreten bir çok insan var.

Performans sorunları sonrası bu ibre normal javascript tarafına yöneliyor.

Şimdi jquery ile yaptığımız işleri native javascript ile nasıl yapacağımıza tek tek bakalım.

İlk konu basit olsun. Javascript DOM işleri ile uğraştığımız için javascript’in çalışması için genelde DOM’un yüklenmesini bekleriz.

Meşhur jquery girişi:

$(document).ready(function() { 
  // DOM hazır
});

veya kısa şekli

$(function() {
  // DOM hazır
});

Peki bu kodu javascript ile nasıl yaparız. İki yöntem var tercih sizin.

DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
  // DOM hazır
});

onreadystatechange

document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    // DOM hazır
  }
}

Nasıl güzel değil mi?

Kalın sağlıcakla.

Kaynaklar

HTML nesneleri üzerinde veri taşıma alışkanlığımız HTML5 öncesine dayanıyor. HTML5 bunu standart hale getirdi ve kullanımı yaygınlaştı. Bir ögeye ait verilerin ögenin üzerinde taşıması bize bazı durumlarda çok büyük katkı sağlıyor. İşi abartmamakta yara var :) Hemen örnek ile devam edelim.

<ol>
 <li data-length="2m11s">Deniz kenarı</li>
 ...
</ol>

bu veriyi javascript tarafında yakalamak için jQuery’nin güzel bir metodu var. data()

$(this).data('length') // 2m11s

veri atamak için

$(this).data('lat', '41.015137')

çok kullanışlı bir kod ve kolay bir kullanım.

İnsan normal javascript’te de aynı şeyi arıyor. Arayan buluyor :)

classList benzeri bir kolay erişim özelliği olarak HTML5 dataset özelliği var. Kullanımı jQuery gibi kolay.

<div id="user" data-id="33" data-user="kucka" data-date-of-birth>John Doe</div>

veri yakalamak için

let el = document.querySelector('#user');

el.dataset.id // '33' değerini verir
el.dataset.user // 'kucka' değerini verir

el.dataset.dateOfBirth = '26-02-1987'; // veriyi atayalım

jQuery ile ilişkimizi sonlandırmaya kararlıyım. Tarayıcı desteğini bizim site için güzel IE11 ve sonrası. Daha eski tarayıcılara destek verenler için getAttribute denenebilir.

Can I Use dataset? Data on support for the css-line-clamp feature across the major browsers from caniuse.com.

Kalın sağlıcakla

Kaynaklar

Başlığa bakınca sanki bir aile olayına dair bir yazı geçecek anlamı çıkarmayın. HTML’deki elemanların birbiriyle olan ilişkilerini anlatmak için soyağacı benzetmesi yaparız ve birçok yerde kullanırız. Ebeveyn, çocuk, kardeş seçicileri gibi. Bu yazımın konusunda CSS’in seçicileri ile ilgili olacaktır.

CSS ile aynı seviyedeki elemanların ilişkilerini kullanarak bazı seçme işleri yaparız. Bu durumlar için iki adet seçicimiz vardır. Bitişik kardeş seçicisi (+) artı işareti ile kullandığımız ve genel kardeş seçicisi (~) tilda işareti ile kullandığımız. Gayet kullanışlı seçiciler olan bu kardeş kökenli seçicilerimizin bir sorunu var. Sorunu yine soyağacı benzetmemiz üzerinden tanımlarsak, büyük kardeşe erişememe sorunumuz vardır. Belirlediğimiz bir elemanın öncesindeki kardeşi seçecek bir CSS seçicisi yoktur. Sorunu anladığımıza göre benim bu sorunu tekrar hatırlamama neden olan durumu da açıklayayım size.

zingat.com kutular

zingat.com anasayfasındaki büyük resmin üzerindeki gri kutuların hepsi gri yani pasif görünüyordu. Üzerine gelince büyüyor, rengi değişiyor. Yeni istek ise, ilki aktif gözüksün, diğerlerinin üzerine gelince ilki pasif olsun. İş küçük bir iş gibi görünse de ilk olarak aklıma CSS ile bunu yapmanın imkanı yok javascript ile yapmak lazım dedim. Sonra işi flex ve order yardımı ile yapabileceğim fikri aklıma geldi ve bu yazı ortaya çıktı.

Mantık şöyle; CSS önceki elemana erişemiyorsa bende ilk elemanı sona atarım ve CSS ile işimi çözerim.

flex tanımlı bir kapsayıcı içindeki kutuları order ile sona atarsam artık CSS ile erişilebilir hale getirmiş oluyorum. Kod örneği aşağıdaki gibi.

Belki sizin de işinize yarar.

Kalın sağlıcakla.

CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz.

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
}

Peki bu kontrolleri javascript tarafında nasıl yaparız diye araştırınca window.matchMedia ile karşılaştım. Bildiğimiz CSS medya kulanımının aynısını yapabiliyoruz.

var ms = window.matchMedia("SORGU");

SORGU yazan kısma CSS’de yazdığımız kısmı birebir yazıp kontrol edebiliyoruz.

var ms = window.matchMedia("screen and (min-width:720px)");

Sonra kontrolümüzü yapalım.

if (ms.matches) {
  // ekran genişliği en az 720px
} else {
  // ekran genişliği 720px den büyük olanlar.
}

Tarayıcı desteğinin %100’e yakın olması da ayrı bi güzellik.

Kaynaklar

Arayüz geliştiriciler için yeniliklerin takibi çok önemlidir. Yeniliklerin takibi içinde İngilizce önemlidir. İngilizce seviyeniz yeniliklerin takibinde belirleyici etkendir. Bu işe yeni başlayan bir çok insanda bu sorunlara neden oluyor.

Google Çeviri hizmeti daha önce çok iyi sonuçlar vermiyordu. Genelde İngilizce - Türkçe sözlük için kullanıyorduk. Yenilenen Google Çeviri hizmeti artık daha iyi sonuçlar veriyor. Google’un Nöral Makine Çevirisi olarak tanımladığı yeni çeviri hizmeti gayet anlaşılır sonuçlar veriyor.

Nöral sistem, bütün cümleleri birer birer çevirmek yerine bir defada çevirerek bu kapsamlı içeriği, en yakın çeviriyi bulabilmek için uygun bir dilbilgisi ile insan konuşmasına benzer şekilde yeniden ayarlıyor. Böylece her cümleyi anlamak daha kolay olduğundan çevrilmiş paragraflar ve makalelerin okunması çok daha kolay hale geliyor.

Benim açımdan çok güzel bir gelişme. Okuma hızımın yavaş olması nedeni ile bazı makaleler tarayıcımın bir sekmesinde haftalarca bekliyordu. Artık Google Çeviri sayesinde daha hızlı okuyarak bu sorunu azaltmış oldum.

Bir örnek vereyim.

“Of course, there’s real value in using widely-adopted design patterns. If a symbol like the hamburger icon is familiar to your users because they’ve used it elsewhere, it can lower the barrier of entry, and make your navigation more intuitive to them. And that’s not something we should devalue lightly: the familiarity of an element can be a powerful benefit, both to our sites and to our audiences. However, we shouldn’t evaluate the utility of design patterns on their ubiquity alone. Patterns are, after all, just patterns: they’re not rules or defaults. In fact, there are some rather novel alternative navigation patterns out there. Let’s take a look at a few of them.” - Responsive design patterns principles

Eski çeviri “Tabii ki, çok benimsenen tasarım kalıplarını kullanarak gerçek değer var. onlar başka bir yerde kullandım çünkü hamburger simgesi gibi bir sembol kullanıcılarının aşina ise, giriş bariyer düşük ve onlara navigasyon daha sezgisel yapabilirsiniz. Ve biz hafifçe devalüasyon gereken bir şey değil: Bir elemanın aşinalık güçlü bir yararı olabilir, bizim sitelere ve kitlelere hem. Ancak, yalnız kendi aynı anda her yerde tasarım desenleri yararını değerlendirmek gerekir. Desenler sadece desen, tüm sonra,: bunlar kurallar veya varsayılan değiliz. Aslında, orada bazı oldukça yeni bir alternatif navigasyon desenler vardır. onlardan bir kaç bir göz atalım.”

Yeni çeviri “Elbette, yaygın olarak benimsenen tasarım kalıplarının kullanılmasında gerçek bir değer var. Hamburger simgesi gibi bir simge, kullanıcılarınıza başka yerlerde kullandıklarından dolayı tanıdıklarsa, giriş engelini azaltabilir ve gezinmeyi daha sezgisel yapabilirsiniz. Bu hafifçe devalüasyon yapmamız gereken bir şey değildir: Bir unsurun aşinalık olması hem sitelerimize hem de izleyicilerimize güçlü bir fayda sağlayabilir. Bununla birlikte, tasarım modellerinin tek başına her yerde kullanımını değerlendirmemeliyiz. Sonuçta, kalıplar sadece kalıplardır: kurallar veya varsayılanlar değildir. Aslında, orada oldukça yeni alternatif gezinti modelleri var. Şimdi bunlardan birkaçına bir göz atalım.”

Gayet başarılı bence. Ayrıca kendini geliştirme özelliği sayesinde ileride mükemmele yakın çeviriler alacağımızı ümit ediyorum.

Tek sıkıntı 5000 karakter limiti olması. Ben Chrome’un translate eklentisini kullanıyorum. Normalde tooltip ile hızlıca çeviriye erişme imkanı tanısa da 5000 karakterden sonrası için sağ üstteki eklenti ikonunu tıklamamı istiyor. Umarım ilerde bu sınır kaldırılır.

Kalın sağlıcakla.

Kaynaklar