tarihinde Fatih Hayrioğlu

hide() metodunun yavaşlığı ile ilgili daha önce gördüğü test’te 25 kat daha yavaş diye bir ibare geçiyordu. O testin adresini bulamadım ama benzer testler var bu konuda bu testte https://jsperf.com/vanilla-js-v-jquery-hide/3 %98 daha yavaş diyor.

Şimdi bir konuda arama yaparken Paul Irish’in yazdığı yoruma denk geldim.

Böyle küçük bir kod da bile bu kadar ciddi bir performans sorunu yaratıyorsa jQuery kullanıp kullanmayacağımızı cidden düşünülmeliyiz.

hide() metodunun yavaşlığı konusuna bakarken Can Duruk’un Quaro‘da yazdığı yazıdan anlaşılıyor ki tanımlanan elemanın önceki durumunu data özniteliğinde tuttuğu için sorun oluyor. Seçici eğer çok fazla elemanı etkliyorsa ciddi performans sorununa neden oluyor.

jQuery 3. sürümünde bu durumu çözmüş. Bizim gibi eski sürüm kullanan ve güncelleme maliyeti yüzünden sürümü güncellemeyenler için normal javascript çözüm oluşturmak mantıklı geldi bana.

Basit bir eleman gizle göster işini jQuery ile aşağıdaki gib yapıyoruz.

// elemanı gizle
$element.hide();

// elemanı göster
$element.show();

Basit kullanımı hoş, ama performans kısmı yukarıdaki sebeplerden sıkıntılı.

Peki biz bu işi nasıl yaparız. Bu işi yapmanın birçok yolu var. İster bir CSS sınıfı tanımlayıp, sınıfı kaldırıp ekleyerek yapabilirsiniz. İsterseniz elemanın style.display özelliğini tanımlayıp yapabilirsiniz.

İsterseniz HTML5 hidden özniteliğini ekleyip çıkararak yapabilirisiniz.

HTML5 hidden özniteliği desteği %96 olarak görünüyor.

element.setAttribute('hidden', '');

Javascript ile bir elemanın başlangıç değerini atamak için boş bir string’e eşitlemek gerekiyor.

Göstermek içinde hidden özniteliğini kaldırmak yeterli oluyor.

element.removeAttribute('hidden');

Tabi bir elemanda bu özniteliğin olup olmadığını bilmemiz gerekiyor ki ona göre kaldıralım. Oda basit;

element.hasAttribute('hidden');

Bu kadar basit.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Daha önce bu konuda bir yazı yazmıştım. Sayfa Dibine Yapışık Alt Alanlar (Sticky Footer) Yazının tarihi 2009. Flex ile bu işin daha kolay yapıldığını daha önce görmüştüm ama bir türlü zaman ayırıp bir yazı yazamamıştım. Nasip şimdiyeymiş.

sticky footer

2009’daki yazıyı incelerseniz kodlar biraz hack içeriyor. Flex ise bu konuya basit bir şekilde çözüm üretiyor. Dün yazdığım yazıdaki çözüm ile bir çözüm oluşturuyoruz. margin-top: auto güzel bir kullanım.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin: auto 0 0 0;
}

Bu kadarcık kod işimizi gördü.

Bir başka çözüm de içerik alanının alt alan kadar uzayan bir ardalan rengi istiyorsak.

Koddaki fark alt alandaki margin değerini kaldırıp içerik alanına flex tanımı yapmamız.

main {
  flex: 1 0 auto;
}

Yerine göre kullanım tercihi edebilirsiniz.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Yaklaşık bir hafta önce flex hakkında Bursa’da Girişimci Engelliler Derneği’nin davetlisi olarak bir seminere gittim. Seminer çok güzel geçti. Seminer için Bülent Sakarya ve Samet Şahin’e teşekkürler. Seminere katılan arkadaşlara bir şeyler anlatmak için hazırlanırken ben bir şeyler öğrendim. Bu makalede bunları sizlerle paylaşacağım.

Flex’in bize kazandırdığı en güzel özelliklerden birisi de hizalama özellikleri. Burada anlatacağım konu flex ile margin tanımının auto değerinin birlikte kullanımı ile ortaya çıkan süper bir özellik.

flex ve margin auto

zingat.com‘dan bir örnek ile bu konuyu anlatmaya başlıyayım. Yukarıda gördüğünüz sonucu normal float ile oluşturmak için bazı değişiklikler yapmak gerekiyor. Örneğin ikonları sahte elemanlarda kullanmak zorunda olmamız gibi. Flexi le bunu yapmanın kolay bir yolu var.

Kapsayıcı elemana flex tanımı yaptığımızda ögelerin her birini yan yana dizildi. Bizim istediğimiz ise harita (map) ikonu ve kilometre bilgisini sağa tarafa hizalaması. Burada ortaya margin-left: auto; ile ikon ve yazıyı sağ tarafa hizalıyoruz. Daha doğru bir tanım ile harita ikonunun sol yanını autoya çekiyoruz.

Sonuç istediğimiz gibi. Bunu tek satır css kodu ile yaptık.

Aynı mantıkla başka bir örnek yapalım. Örneğimizde bir menü yaptığımızı düşünelim. Seminerde twitter menüsünü örnek vermiştim. Örneği burada da paylaşayım.

Kodun can alıcı kısmı

.twitter {
  margin-left: auto;
  margin-right: auto;
}

kısmıdır. Flex ile sıraladığımız menü elemanlarından twitter sınıfı tanımlı olanı ortada kalan boşlukta ortalamak için sadece iki satır kod yazdık. :)

Dikey örnekler

Dikeyde benzer örnekler yapabiliriz. Zamanında uğraştığım için iyi biliyorum. livego’da çalışırken sol menü yapımında bu tip bir kod çok ihtiyaç duymuştum. Çok ciddi zamanımı almıştı sol ve sağ kolonlar.

livego flex ve margin auto

Şimdi aynı sonucu elde etmek sadece iki satır kod.

Menü yüksekliğini ekran yüksekliğine eşitlemek için height: 100vh verdik. Yatayda kullandığımız gibi ilgili ögenin (.add-account) margin değerini auto yaptık. Bu sefer alta hizalamak için margin-top: auto tanımladık.

Bu yöntemi birçok yerde kullanabiliriz. Süper bir kazanım.

Kalın sağlıcakla.

Kaynaklar