tarihinde Fatih Hayrioğlu

Baştan belirtmeliyim ki bu anlatacaklarım sadece MacOS kullancıları için geçerlidir. Maalesef Windows için böyle bir çözüm yok. En azından benim bildiğim yok. Bildiğiniz Windows çözümü varsa yazının altındaki yorum satırlarına yazarark hem bana hemde diğer okuyuclara yardım etmiş olursunuz.

Mobil dünyanın gelişmesi ile siteler için gelen hataların bir çoğu artık mobilden geliyor. Bunların arasında Safari üzerinden gelen hataların oranı ciddi derecede çok. Peki sitemizdeki hataları mobil şartlarda nasıl yakalarız ve düzeltiriz. Bunun iki yolu var. İlki bir iPhone telefon bulup bilgisayarınıza bağlayarak yapmak. İkinci yöntem Mac OS kullananlar için Xcode - Simulator yardımyla yapmak. Bu makale de size Simulator yardımı ile nasıl hata ayıklarız bundan bahsedeceğim. 4 adımda halledeceğiz bu işi.

1. Adım Xcode kurulumu

Mac Os kullanıyorsanız Xcode başta kurulu gelmiyor. İlk olarak Xcode kurmanız gerekiyor. Ücretsiz bir program olan Xcode’u ister App Store’dan isterseniz internetten kurabilirsiniz.

xcode install

Bende yüklü olduğu için buton metni open şeklinde ama siz ilk yüklüyorsanız install olması lazım.

https://developer.apple.com/xcode/

2. Adım Safari Ayarları

Masaüstü Safari tarayıcısında geliştirici menüsü kapalı geliyor. Açmak için Safari > Preferences menüsüne tıklıyoruz. Gelen pencerede Advanced sekmesindeki Show Develop menu in menu bar işaret kutusunu işaretli hale getiriyoruz.

Safari Advanced

Artık üst menüde Develop geldi. Masaüsütü testlerimizi yapmak içinde bu ayarı yapmak gerekiyor.

3. Adım Web Inspector açmak

İlk olarak Simulator uygulamasını açıyoruz.

Sonra simülatörde Web Inspector açmak için Settings > Safari > Advanced ve Web Inspector aktifleştiriyoruz.

web inspector

4. Adım Hata ayıklamak

Ayarlar bittikten sonra iOS simülatöründe Safari adres çubuğuna inceleyeceğimiz adresi yazıyoruz. Ben fatihhayrioglu.com yazdım.

Safari inpect

Sonra bilgisayarımızdaki Safari tarayıcısını açıp. Üst menüden Develop > Simulator > fatihhayrioglu.com şeklinde görünecektir. Tıklayarak geliştirici aracını açıyoruz.

Safari inpect

Safari Developer Tool’u açılacaktır. Artık kodunuzu incelemeye başlayabilirsiniz. Tüm geliştirme araçları nimetlerinden yararlanabilirsiniz. Elemanları denetleyebilir, js ile kesme noktaları koyup javascript hatalarını ayıklayabilir, ağ sekmesinden site kaynaklarının yüklenme zamanları ve sırasını görebilirsiniz. Geliştirme araçlarındaki diğer işlerini de aynı şekilde yapabiliyoruz.

Xcode Simulator’ün üst menüsünden bir çok ayar yapabiliyoruz. Kullandığınız cihazı değiştirebilirsiniz, ana ekrana geçi yapabilirsiniz, yataya çevirebilirsiniz ve diğer işleri de ypabilirsiniz.

Her şey güzel ancak bazen Masaüstü Safari’de Simulator inceleme çıkmıyor. Geçenlerde twitter’da bahsetmiştim.

Bu twitimden sonra sağolasun Cenk, Oğuzcan ve Tuna‘nın yardımlarıyla sorunu çözdük. Apple işletim sisteminiz güncel değilse bu tip sorunlar çıkarabiliyor. İşletim sistemimi güncelleyince çözüldü.

iPhone veya iPad cihazınızı bilgisayarınıza bağlayarakta benzer işleri yapabilirsiniz. Tek fark 1. adımı es geçmek yani Xcode - Simulator kurulumuna gerek yok. :)

Kalın sağlıcakla.

Kaynaklar

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