Performans hiç olmadığı kadar önemli bir hale geldi. Google’un arama sonuç sıralamasındaki en büyük etkenlerden birinin site hızı olduğunu açıkladıktan sonra performan işleri daha çok ön plana çıktı. Performansı arttırmanın farklı yolları var. Bu makalede bunlardan bir tanesi kullanılmayan CSS ve JS’leri bulup sayfadan yada siteden çıkarmayı göreceğiz.

Developer Tools Coverage Açma

Google Chrome Developer Tool’da sağdaki menüden More Tools - Coverage ile pencereyi açabilirsiniz. Daha kısa olarak Developer Tools’u açtıktan sonra ⌘+⌥+I (Mac) veya Control+Shift+I (Windows, Linux) basıp açılan menüde Show Coverage yazın ve enter’a basın.

Gelen ekrandan kayıt butonuna tıklayarak hesaplamayı başlatabilirsiniz. Burada dinamik olarak eklenen alanları açarak bu hesaplamanın daha iyi sonuçlar vermesini sağlayabilirsiniz. Gizle göster ile açılan alanlar vs. Kayıt butonuna tekrar basarak hesaplamayı bitirin. Sonuç listesi aşağıdaki gibi görünecektir.

Developer Tools Coverage

Listede sayfadaki kaynaklar ve bunların kullanım oranlarını var. Her bir linkin üzerine tıklayarak detayını Source (Kaynak) sekmesinde görebilrisiniz.

Detay sayfasını incelediğimizde kod satırlarının solundaki kırmızı çizgi kullanılmayan yerleri yeşil çizgiler ise kullanılan alanları göstermektedir.

Developer Tools Coverage

Örneği yaptığım fatihhayrioglu.com’da fontawesome’ın 7-8 yerde kullanıldığını gördüm. Bunların yerine satıriçi SVG ikon kullanıp fontawesome’ı kaldırdım. Başlangıçta %75 kullanılmayan kod varken fontawesome’ı çıkarınca %57.5’e düştü. Şimdilik bu kadar.

Developer Tools Coverage

Aynı şekilde Javascript kaynakları içinde sonuçlar var. Herbirini inceleyip kullanılmayan veya az kullanılan kaynakları sayfadan çıkararak sayfalarımızı hızlandırabiliriz.

Kalın sağlıcakla.

Kaynaklar

Daha önce bu konuda bir makale yazmıştım. CSS Editörleri başlığı ile yazdığım bu makaleye gelen bir yorum bu konuda tekrar bir yazı yazmam gerektiğini hatırlattı bana.

Yazının üzerinden 11 seneden fazla zaman geçmiş. Yazıda bahsettiğim Front Page, CoffeeCup HTML Editor ve TopStyle kapıya kilit vurmuş. Macromedia Dreamweaver olmuş Adobe Dreamweaver. Style Master’ın kullananı kalmamış. CSSEdit isim değiştirmiş Espresso olmuş. Microsoft® Expression ölü doğan projeler listesine eklenmiş. Geliştirici dünyası hız gelişiyor.

Ben bu yazıda sizlere güncel editörlerden bahsedeceğim.

Genel olarak kod yazma araçlarını ikiye ayırabilriz. Metin editörleri ve Tümleşik Geliştirme Ortamı diye Türkçe’ye çevirdiğimiz IDE’ler.

Sırası ile aşağıdaki editörleri inceleyeceğiz.

  • SublimeText
  • Visual Studio Code
  • Atom
  • Brackets
  • NotePad ++
  • Vim
  • WebStorm
  • Adobe Dreamweaver

SublimeText - sublimetext.com

sublime text

2008 yılında piyasa çıkan Sublime Text ilk inceleyeceğiz editör. Sublime Text metin editörü kategorisine giriyor.

Artılar

  • Süper hızlı
  • Kullanışlı Arayüz
  • Geniş eklenti yelpazesi
  • Geniş tema seçeneği ve tema üzerinde kolay düzenleme
  • Çoklu seçim ve düzenleme imkanı
  • Dosyalar ve komutlara hızlı erişim imkanı
  • Tanımlara erişim (Goto Defenation…)
  • Hızlı arama
  • Yerimi ekleme, çıkarma ve gezinme imkanı
  • Yüksek Çözünürlük desteği
  • Çoklu platform desteği. Windows, Mac ve Linux
  • Ücretsiz olarak limitsiz kullanma hakkı

Eksiler

  • 80$ ücret
  • Çok hızlı güncellenmiyor
  • Üçüncü parti bazı eklentilerin programı karasız hale getirmesi

Yorum

Uzun süredir Sublime Text kullanıyorum. Ara sıra diğer editörleri ve IDE’leri denesem de Sublime Text’ten va geçemiyorum. Hızı ve arayüzü beni etkileyen en önemli etkenler. Eklentilerin yardımyla bir arayüz geliştiricinin tüm ihtiyaçlarını karşılaycak bir araç oluyor.

Visual Studio Code - code.visualstudio.com

Visual Studio Code

Listedeki en yeni editör. Microsoft’un gelişmiş IDE’si Visual Studio’nun ismini kullansa da Electron alt yapısı ile tekar yazılan açık kaynaklı bir editör.

Artıları

  • Gelişmiş Otomatik tamamlama özelliği
  • Geniş tema seçeneği
  • Çoklu seçim ve düzenleme imkanı
  • Dosyalar ve komutlara hızlı erişim imkanı
  • Hızlı arama
  • Ücretsiz ve açık kaynak olması
  • Hata ayıklama özelliği
  • Gelişmiş Git desteği
  • Geniş eklenti yelpazesi
  • Hızlı güncelleme.
  • Yüksek Çözünürlük desteği
  • Çoklu platform desteği. Windows, Mac ve Linux

Eksiler

  • Performans sorunları
  • Kısıtlı arama imkanları
  • Arama sonuçlarını sol menüye sıkıştırması
  • Temaları düzenleme imkanı vermemesi

Yorum

Etkin olarak Sublime Text kullanıyor olsam da ara sıra diğer editörleri denerim. En sık denediğim editör VS Code diyebilirim. Her ay yeni sürüm çıkması çok güzel.

Arayüzünü Sublime Text’ten alıştığım temaya benzetememem ve herhangi bir dosyayı açtığımda kod renklendirmesini sonradan yapması beni düşündürüyor. Asıl önemli konu ise Sublime Text’teki hızı yakalayamamış olmam.

Atom - atom.io

Atom

Github tarafından Electron alt yapısı ile geliştirilmiş bir editör. 2014 senesinde çıkmış.

Artıları

  • Çoklu platform desteği. Windows, Mac ve Linux
  • Eklenti desteği
  • Akıllı ve esnek otomatik tamamlama özelliği
  • Kolay dosya yönetimi
  • Çoklu panel kullanma imkanı
  • Kullanışlı ara ve değiştir
  • Farklı tema seçenekleri
  • Kolay özelleştirebilme imkanı
  • Ücretsiz ve açık kaynak olması
  • Tümleşik Git ve Github desteği
  • Hızlı güncelleme
  • Yüksek Çözünürlük desteği

Eksiler

  • Yüksek boyutlu dosyalarda performans sorunları
  • Yüksek hafıza kullanımı
  • Yavaş başlangıç hızı

Yorum

Kullanmadığım için kendi tanımları ve internette gördüğüm eksilerini yazdım.

Brackets - brackets.io

Brackets

Adobe’un Atom ile aynı zamanda (2014) çıkardığı editörüdür.

Artıları

  • Çoklu platform desteği. Windows, Mac ve Linux
  • Tarayıcı üzerinde canlı önizleme
  • Hızlı CSS düzenleme imkanı
  • Eklenti desteği
  • Kullanışlı ara ve değiştir
  • Ücretsiz ve açık kaynak olması

Eksiler

  • Performas sorunu
  • Yüksek hafıza kullanım
  • Atom kadar hızlı güncellenmiyor

Yorum

Kullanmadığım için kendi tanımları ve internette gördüğüm eksilerini yazdım.

NotePad ++ - notepad-plus-plus.org

NotePad ++

Vim dışında bu listedeki en eski editör. 2003 senesinde çıkmış. Sadece Windows’ta çalışıyor.

Artıları

  • Hız
  • Kod renklendirme
  • Eklenti desteği
  • Ücretsiz
  • Çoklu seçim ve düzenleme imkanı
  • Çoklu panel kullanma imkanı

Eksiler

  • Sadce Windows’ta çalışması
  • Arayüzü eski ve kullanışsız
  • Limitli yeni dil ve kod desteği

Yorum

2003 yılından beri ayakta olamsını hızı ve basitliği ile sağlıyor. Diğer editörlere nazaran daha az özelliği olmasına karşın hız isteyenler için güzel bir seçenek. Tüm ihtiyaçlar için çözümlerinin olmaması kötü. Yeni çıkan teknolojilere çok hızlı destek gelmemesi de diğer kötü yanı.

Vim - vim.org

Vim

30 yılı aşkın ayakta kalan bir editör. Metin editörü kategorisinin en yalın hali. Son zamanlarda popülerliği tekrar artıyor. Ruby geliştiricileri arasında bayağı popüler.

Artılar

  • Hafif ve hızlı
  • SSH üzerinde komut satırnda çalışma imkanı
  • Yüksek performans
  • Linux’da başlangıçta kurulu gelmesi
  • Çoklu platform desteği. Windows, Mac ve Linux
  • Ücretsiz ve açık kaynak olması
  • Üçüncü parti paket desteği

Eksiler

  • Öğrenme zorluğu
  • Standart kurulumda bir çok özelliğin olmaması
  • Sistem kopyala/yapıştır özelliği sıkıntılı
  • Kaydırma çubuğu kullanımı zayıf

Yorum

Ben sahibinden.com’da çalışırken kullanmak zorunda kaldığım için mi bilmiyorum ama çok sevemediğim bir editör. Öğrenme eğrisi en yüksek editör diyebilirim. Uzak bilgisayarlar ile çalışanlar için kullanışlı bir editör.

WebStorm - jetbrains.com/webstorm

WebStorm

Şimiye kadar yazdıklarımız metin editörü kategorisindeydi. WebStorm ise Tümleşik bir araçtır.

Artıları

  • Bütünleşik kod kalitesi araçları
  • Gelişmiş kod tamamlama
  • Tanımlara erişim (Goto Defenation…)
  • Hata ayıklama
  • Bütünleşik komut satırı
  • Bütünleşik Git desteği
  • Bütünleşik test araçları
  • Hızlı güncelleme
  • Yeni nesil Javascript kütüphane desteği (vue, react, angular, node, require ve daha fazlası)
  • Öğretim görevlisi, öğrenciler veya edu maili olanlara ücretsiz (Bu bilg için Kadir‘e ve Akın‘a teşekkürlerimi sunarım.)

Eksiler

  • Ara sıra yaşanan performans sorunları
  • Karışık arayüz
  • Hız sorunları
  • İlk açılışı yavaş. Akın‘a teşekkürler
  • Yıllık 129$ fiyat ve 30 gün deneme imkanı

Yorum

2-3 kere denememe rağmen çok alışamadım. Bazı ayarları yapınca hızlandığı söyleyen arkadaşlarım var. Ancak Sublime Text hızını görünce geçemedim bir türlü. Arayüzü de beni cezbetmiyor.

Adobe Dreamweaver - adobe.com/tr/products/dreamweaver.html

Adobe Dreamweaver

WYSIWYG (What you see is what you get / Ne görürsen onu alırsın) bir editör olarak yukarıdaki araçlardan ayrılıyor.

Artılar

  • Web geliştirme seti
  • Otomatik tamamlama özelliği
  • Kod ve Tarayıcı görünümü aynı anda görme imkanı
  • Kod düzeltme
  • Hazır web sitesi şablonları

Eksiler

  • Yıllık 240$. Ücretsiz 30 gün deneme süresi
  • Öğrenmesi zaman alıyor
  • WYSIWYG çok iyi çalışmıyor
  • Performans sorunları

Yorum

Eski göz ağrım. Yavaşlığı ve bütünleşik yapıdaki kullanmadığım kısımları çıkaramamamdan dolayı vazgeçmiştim. Fiyatı da vaz geçememde önemli bir etken tabi.

Sonuç

Ben bu iki kategoriyi Tümevarım ve Tümden gelim felsefesi ile yorumluyorum. IDE’ler Tümden gelim ile bize bütünleşik özellikler sunarken metin editörleri tümevarım mantığı ile özellikleri ihtiyacımız oldukça yüklümemize olanak sağlıyor.

IDE’lerin tümleşik özelliklerini ayıklamaktansa metin editörlerinin ihtiyaç duydukça özellik ekleme mantığı bana daha mantıklı geliyor.

Yukarıdaki editörlerin hangisini tercih ederseniz edin muhakkak kısayollarını ezberleyin.

Editörlerin yeniliklerini takip edin.

Sizlerinde katkısını bekliyorum kullanıp memnun kaldığınız editörleri yorum kısmına yazın.

Kalın sağlıcakla.

Kaynaklar

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

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 %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

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