Kod yazarken gözümden kaçan yazım hatalarını sonradan düzeltmek can sıkıyor. Bu sorunum için bir çözüm aramadım hiç ama bu eklentiyi görünce tam benim ihtiyacım olan eklenti deyip yükledim. İngilizce ve Türkçe desteği de var.

Code Spell Checker

Code Spell Checker eklentisi yazdığımız kod içindeki hatalı olan yazımları bize gösteriyor. Ayrıca düzgün halini öneriyor. Türkçe kısmında biraz sorunlu çalışsa da iş görüyor.

brokenlinkcheck.com sitesi üzerinden sitemi kontrol ettim. Ciddi kırık bağlantılar çıktı. 500’den fazla bağlantıda sorun çıktı. Özetlersem;

Önce yahoo’nun yui sonra jquery ve de ajax topluluğuna ait birçok makale silinmiş.

  • mozilla (mdn) adreslerini değiştirmesi çok kötü bir hamle olmuş tüm mozilla bağlantılarını düzeltmekle uğraştım.

  • sitepoint.com bir çok makalesi silinmiş görünüyor.

  • oli.jp gibi çok güzel içerik üreten bir sitenin kapanmış olması üzdü.

  • adobe.com ve tv.adobe.com’den bazı makaleleri silmiş.

  • devblogs.microsoft.com kapanmış internet explorer’un sonuyla birlikte kaynaklarda kapanmış gibi.

  • 456bereastreet.com sitesini severek takip ediyordum birçok makalesini

  • http://leaverou.me adresi değişmiş, http://lea.verou.me olmuş yenisi.

  • Zamanında bildirgec.org, nuricankaya.com çok iyi içerikler sunuyordu.

  • positioniseverything.net gibi muazzam site kapanmış.

  • andybudd.com makaleleri silmiş galiba

  • devblogs.microsoft.com gibi bir adreslerin kırık olması ilginç.

  • labs.sahibinden.com adresinden zamanında güzel makaleler ve veriler paylaşıyorduk o da kapanmış.

  • veerle.duoh.com gibi tasarımı ve CSS yazıları çok üst seviyedeki bir sitenin eski yazıları kaldırması üzücü.

resim kaynağı: metup.it

Karşılaştırmaya girmeden bir önceki Grid ile Uyumlu(Responsive) Sayfalar Yapmak yazısının girişinde yazdığımız aşağıdaki paragrafları tekrar hatırlayalım.

CSS grid modülü çıkana kadar sayfa planlama biz geliştiricilere modül, özellik grubu veya tanım olarak bir çözüm sunmamıştı. Geliştiriciler mevcut şartları sağlayacak özellikleri sayfa planlaması için kullandı.

İlk olarak <table> etiketiyle ve position tanımlarıyla HTML yoğunluklu çözmeye çalıştık. Daha sonra <div> etiketi ve float, width tanımlarıyla CSS yoğun çözümlerle çözmeye çalıştık. Daha sonra flex ile çözmeye çalıştık ancak bunların hiçbiri W3C’nin sayfa planlama için çıkardığı özellikler değildi. Belli bir amaca hizmet ediyordu ve geliştiriciler tarafından sayfa planlama için kullanıldı.

İlk defa sayfa planlama için bir modül olarak grid modülünü biz geliştiricilere sundu. Tüm ihtiyaçları gidermesi zor olsa da birçok ihtiyacı karşılıyor. Yeni eklenen subgrid özelliği de sayfa planlamadaki ihtiyaçları karşılamaya yönelik. Ayrıca daha yeni eklenen grid masonry özelliği standart koyucuların ihtiyaçlara göre çözüm üretme eğiliminde olduğunu gösteriyor.

Yani kısaca sayfa planlama grid’in işi. Artık sayfa planında grid kullanacağız. Sadece planlama mı? Yazının devamında detaylarına bakalım.

CSS Grid ilk çıktığı günden beri flex ile karşılaştırılıyor. Flex önceki döneme(float ile sayfa planladığımız zamanlar) göre bize avantajlar sağladığı için bir çok geliştrici çabuk benimsedi ve kullanmaya başladı. CSS Grid öğrenilmesi biraz daha zor olan bir konu olduğu için geliştiriciler flex ile sayfa planlamaya devam ediyorlar. Sadece geliştiriciler değil React Native bile hala CSS Grid özelliklerini adapte edebilmiş değil. React Native geliştirmesi istenilen özellikler listesinde başlarda sırasını bekliyor.

Bu makalede ne paylaşacağımızı açıkladıktan sonra bilgilerimizi tazeleme zamanı.

Bu karşılaşmayı yapmadan önce flex

ve CSS grid ile olarakta;

Okumanızı öneririm. Şimdi aradaki önemli farkları inceleyelim.

Eksen farkı

Daha önceki grid yazılarımda da bahsetmiştim, flex tek eksende(dikey veya yatay) etki yaparken grid iki eksende etki eder.

iki eksenli planlama Daha önceleri tek eksenli sayfa kodlamaları yaptığımız için uyumlu web sayfalarındaki bazı yer değiştirmeleri zor oluyordu, bazı tasarımları gerçekleştirme imkanı olmadığı için bazı kod bloklarının iki kopyasını oluşturduğumuz oluyordu. Bu durum grid’in iki eksenli yapısıyla tarihe karıştı.

Zingat’ta ilan detay sayfasında breadcrumb’ın yeri sorun olmuştu. Mobilde resmin altında olan breadcrumb desktopta tüm içerik ve sağ kolonun üzerinde konumlandırılmak istenmişti. Tek eksenli bir düşünce ile bu işi halletmek çok zor bir iş olduğu için biz içeriği iki kere sayfaya ekleyip mobilde birini desktop’ta diğerini göstererek geçmiştik. Şimdi iki eksenli bir grid ile bu işi nasıl yaparım diye düşününce nispeten basit ve tek içerik ile bu durumu çözebiliyoruz.

Responsive zorluklarını bir anda kolaylaştıran bir özellik.

İçerik eksenli yaklaşım / sayfa planlama eksenli yaklaşım

Flexbox ve Grid arasındaki bir diğer önemli fark, Flexbox’ın içerik temelli bir yapısı varken Grid’in sayfa planını temelli bir yapısının olmasıdır.

flex vs Grid

Flexbox tek yönlü olduğu için, flex tanımladığımız kapsayıcının içeriği kolon/sütun planın nasıl olacağını belirler.

Grid’de ise display:grid tanımladığımız kapsayıcının içindeki öğelerini satır ve sütun sayılarını belirleyerek ögelerin sayfa planını belirleriz. İçeriğin ne olduğundan bağımsız planı uygularız.

Yukarıdaki örnekteki gibi ızgara yapısına ters tasarımlar için flex daha mantıklı tercih olur.

Sonuç

CSS grid flex’in yerine gelen bir modül değil, birlikte kullanılacak iki özellik. İhtiyacımıza göre tercihimiz yapıp kodlayacağız. Her ikisinin kendine göre avantajlı olduğunu durumlar var. Kullandığımız sayfa, komponente hangisi uygunsa onunla kodlayacağız.

Kalın sağlıcakla.

Kaynaklar