Yaklaşık olarak 1 senedir ReactJS(Yazının devamında React olarak geçecek) ile geliştirme yapmaya çalışıyorum. Bu bir senelik süreçte yaşadıklarımdan çıkardığım genel fikrimi bu yazıda yazmaya çalışacağım.

React kullanıcı arayüzü (UI) geliştirmek için üretilmiş bir Javascript kütüphanesidir. Nedir bu kullanıcı arayüzü? Aslında düşündüğümde Önyüz (front-end) dediğimiz alanın tamamıdır diyebiliriz. CSS, HTML ve Javascript.

İlk React’ı duyduğumda CSS ve HTML’in Javascript yani React içinde yazılıyor olması benim hoşuma gitmemişti. Hala CSS’in react içinde yazılmasına alışamadım. (SASS kullanıp import ederek de bu sorun aşılabiliyor), HTML’in react içinde yazılıyor olması aslında uzun süredir hayatımızda olan template kodlarıyla(swig, pug, handlebars, vb.) zaten hayatımızdaydı. Tabi react ile bu biraz daha abartılı kullanılıyor.

Şimdi genel başlıklar altında react hakkında görüşlerimi yazmaya çalışacağım.

Topluluğunun Zengin olması

Bu çok önemli bir konu. Javascript kütüphanelerinin yeni ortaya çıktığı dönemlerde mootols diye bir kütüphane vardı animasyon kısmı çok güzel diye bir kaç projede kullanmıştım, jquery’ye olan ilgi daha fazla olunca mootols silindi gitti. Yeterli sayıda geliştiriciyi arkasına alamayınca zamanla kayboldu canım kütüphane.

Benzer bir durum React’ta da var. React topluluğu ve geliştirici desteği çok fazla bundan dolayı aradığınız bir çok eklentiyi ve yardımı bulmak çok kolay. Bu bir anaçatı için çok önemli. Bu sayede ayakta kalıp gelişimini devam ettiriyor.

Aşağıda Stackoverflow anketinde geliştiricilerin sevdikleri kütüphaneler ve yüzdeleri yer alıyor.

Stackoverflow react en sevilen

Burada facebook’un desteğini de unutmamak gerekiyor. Kendi kullanıp geliştirmesi çok büyük avantaj. Angular’ın bu konuda bir dezavantajı var. Google aktif bir şekilde tüm projelerinde angular’ı tercih etmemesi düşündürücü.

Aşağıdaki grafikte npm tends sitesinde 3 kütüphanenin grafiği görülüyor.

npm trends react

https://www.npmtrends.com/react-vs-vue-vs-@angular/core

Yazılım felsefesinin olması

Fonksiyonel programlama paradigmasını ve kurallarını ilk olarak react kullanmaya başlayınca öğrendim. Evet aslında kullandığımız kurallar ancak bir kabul ile uygulamadığımız için eksik kalıyordu. Yazdığımız javascript’in nesne tabanlı kod olduğunu sanıyorduk ancak javascript’in aslında tam bir nesne tabanlı dil olmadığını öğrendik.

Bir programlama paradigmasına bağlı kalmak ve bu yolda ilerlemek ufuk açan kazanımlara neden oluyor. Eski alışkanlıklar mı dersiniz yoksa kolayımımazı geliyor dersiniz bilemiyorum ama bazen yine eskisi gibi kurallara uymadan yazdığımız yerlerde oluyor. Yeniden yazım(refactor) şart. :)

Hızlı yenilenme

Facebook geliştiricileri ve topluluğun geniş olmadığı birçok konuda yaşanan sorunları hızlıca çözme ve yeniliklere adapte olma imkanı sağlıyor.

Javascript topluluğuyla olan yakın ilişkisiyle bir çok yeni javascript özelliği react ile kullanılıyor. Kütüphane sizi buna yönlendiriyor. Diğer kütüphanelerde bu tamamen sizin insiyatifinizde. İsterseniz kullanıyorsunuz istemezseniz eski standartla devam edebiliyorsunuz.

Mesela ES6 yeni özellikleri ilk aşamasından itibaren react içinde kullanılıyor olması çok büyük avantaj. Bu nedenle birçok react kaynağında ilk dersleri ES6 üzerine oluyor.

Yaşam döngüsü metotları(React Lifecycle Methods) çok karışık bir yapıydı Hook ile bu soruna çözüm getirdiler. Artık basitçe buradaki ihtiyaçlarımızı giderebiliyoruz.

Öğrenme zamanı

jQuery ve Vuejs’e göre öğrenilmesi daha çok zaman alan bir kütüphane olduğunu kabul etmek lazım. Angular’a kıyasla daha az diye bilirim. Tabi burada ilk öğrendiğim SPA(Single Page Application / Tek sayfalık siteler) Angular olmasının etkisi olabilir.

Birçok kaynaktan yararlanılabiliyor olmak ve react blog sitesinin güzel içerik sunuyor olması avantaj. Yakın zamanda React blog sitesine Türkçe dil desteği de geldi.

Bu süreçte görsel ve yazılı birçok kaynaktan faydalandım ve faydalanıyorum, bunlardan aklımda kalan önemli iki tanesi:

İş imkanı

Son 2-3 senedir ciddi bir React geliştirici arayışı var. Yurtiçi ve yurtdışında bu konuda birçok şirket react ve react native geliştirici arayışında.

Aşağıdaki kaynakta Angularjs ve Reactjs iş imkanlarının artarak devam ettiğini gösteriyor. Benim piyasada gördüğüm Reactjs’in daha fazla iş arayışı olduğu.

İş olanakları

https://www.hiringlab.org/2019/12/12/big-picture-tech-skill-trends/

Esneklik

Angular gibi tüm ihtiyaçlarını beraberinde getiren bir kütüphane değil React. Bu bazı durumlarda dezavantaj bazı durumlarda avantaj olabilir. Şöyle açıklamaya çalışayım. Eğer topluluğunuz yeteri kadar büyük değilse tümleşik yapılar daha avatajlı ancak topluluğunuz genişse ve yeterli desteği veriyorsa ihtiyaçlar konusındaki çeşitlilik, esneklik tabiki avantaj. Bu konuda React avantajlı konumda.

Sonuç

Genel anlamda react önyüz geliştiricilerinin tüm ihtiyaçlarını karşılıyor. Yazımda bahsetmediğim react native kısmı da ayrı bir avantaj. Ben henüz react native ile bir geliştirme yapmadığım için bu konuya girmedim.

Hiç mi sorunu yok derseniz elbette bazı sorunları var.

  • CSS’in Javascript içinde yazılması. SASS ile çözüm var ancak birçok yerde ve örnekte javascript içinde CSS tercih ediliyor olması sorun bence.
  • State yönetmek için Redux yapısı güzel ancak çok fazla dosyada (constants, actions, saga, reducer, selector) işlem yapıyor olmak sorun.
  • Bileşenler ve alt bileşenlere prop’lar ile veri göndermek sorun. Bunun için Context API var çözüm olarak ancak onun içinde bazı çekinceler var diyorlar.

React hakkında zamanım oldukça ve daha çok kavradıkça birşeyler yazmayı düşünüyorum.

Kalın sağlıcakla.

  1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas
  6. Explicit(belirlenmiş) ve implicit(belirlenmemiş) grid ögeleri
  7. CSS minmax işlevsel değeri
  8. repeat() işlevi, auto-fill ve auto-fit değerleri
  9. CSS Grid öge özellikleri
  10. Grid hizalama ve sıralama işlemleri
  11. CSS Grid kısayolları - grid-template ve grid
  12. CSS grid ile ögeleri üst üste bindirme

CSS grid yazılarımızın 13.sindeyiz. Buraya kadar sizlere grid teorisi hakkında bilgi vermeye çalıştık. Bu yazımızdaysa grid kodlarken yararlanabileceğimiz araçlardan bahsedeceğiz.

Grid yazılarımızın ilkinden itibaren 17 adet tanımın olduğunu ve bu nedenle öğrenme eğrisinin daha yüksek olduğunu söylemiştik. Nasıl daha kolay öğreniriz ve uygularız için birkaç araç var bu yazımızda.

Bu yazıyı 3 başlık altında inceleyeceğiz.

  • Tarayıcı geliştirme araçlarında grid
  • Grid özelliklerinin hepsinin bir arada olduğu kopya kağıtları
  • Grid özelliklerini pekiştirmek için yapılan oyunlar

Bu araçların hepsinde grid tanımlarının çokluğu nedeniyle hangi özellik hangi amaçla kullanıldığını hatırlayamamamız nedeniyle çıkmıştır. CSS grid özellik bilinirliğini arttırmaya yarar. Ama en önemlisi olan tarayıcıların grid araçlarıdır ki bize grid kodlarken, düzenleme yaparken ve hataları bulup çözerken çok büyük yardımı olur.

Tarayıcı geliştirici araçlarında grid

Bu başlık önemli. Geliştiriciler olarak hayatımız tarayıcılar ve tarayıcı geliştirme araçlarıyla geçmektedir. Kod yazarken geliştirici araçlarından yararlanıyoruz. Peki CSS grid kullandığımızda bu araçlar bize nasıl bir avantaj sağlıyor? Firefox burada diğer tarayıcılara fark atıyor, Firefox’un grid için geliştirilen araçları çok kullanışlı.

Firefox grid aracıyla düzenleme yapma, değişiklik yapma, hata ayıklama işlemlerini yapmak çok kolay.

Firefox Grid Alanı

  • Grid alanını görünür hale getirir.
  • Grid satır çizgilerini gösterir. Rakamlarını ve isimlerini gösterir.
  • Grid çizgilerinin renklerini değiştirme imkanıyla görünürlüğünü arttırma imkanı sağlar.
  • Grid kısayolarının açık hallerini gösterir.
  • Grid tanımlarının otomatik tamamlamayla hatırlamamızı ve kodlamamızı kolaylaştırır.
  • Tanımlı ve tanımsız alan farkını gösterir.
  • Grid gibi subgrid’leri de gösterir.

grid görüntüleme

Grid alanını görüntülemek için 2 seçeneğimiz var.

Firefox HTML panel

HTML panelinden ilgili elemanın yanında görünen grid yazısını tıklayarak ya da CSS rule panelinden ilgili seçicinin yanındaki ızgara ikonuna tıklayarak görebiliriz.

Firefox CSS Panel

ızgara çizgileri görünür.

Firefox grid satır numaraları

grid paneli

Firefox Layout panel

Layout içine yerleştirilen grid panelinde sayfadaki tüm gridler gösterilir.

Firefox overlay grid

Overlay grid başında işaret kutuları olan grid tanımlarını gösterir. Baştaki işaret kutularının işareti klenip kaldırılarak hangi elemanı etkilediği görülebilir.

Firefox Grid Display

Grid Display settings

  • Display line number: grid ögelerini konumlandırmak için kullandığımız satır numaralarını göstermek için Firefox grid satır numaraları
  • Display area name: grid ögeleri tanımlarında satır veya kolon numaraları kullanıldığı gibi bizim belirlediğimiz isimler de kullanılabilir. Eğer isim kullanıyorsak bu alan ile gösterip gizleyebiliyoruz. Fİrefox grid isimleri
  • Extend lines infinitely: Başlagıç değeri olarak sadece grid içindeki çizgilerin gösterimi yapılırken bu işaret seçilrse çiiler sayfa boyunca gösterilecktir.
  • Mini grid view: Seçilen grid elemanın öngörünüm olarak gösterilir. Grid ögeleri üzene geldiğimizde sayfadaki karşılıkları ön plana çıkacak şekilde görünür.

Aşağıdaki hareketli gif bize mini grid görünümünü daha iyi açıklayacaktır.

Firefox mini grid görünümü

Chrome için Gridman eklentisi var ama Firefox’un grid aracının çok gerisinde.

Grid özellik listeleri

Bu tip sayfalar bize tüm özellikleri bir arada sunarak daha hızlı erişim imkanı verir. Özellikleri hatırlamakta çok sorun yaşıyorsak çıktısını alıp yakınımızda bir yere asmak mantıklı.

http://grid.malven.co/

grid malven

https://github.com/alsacreations/guidelines/blob/master/grid-cheatsheet.pdf

grdi kopyası

https://devhints.io/css-grid

devhints

https://www.cheatography.com/idvali/cheat-sheets/css-grid/

Grid kopya

Grid oyunları

Oyun olarak cssgridgarden’ı denedim. Özellik hatırlama konusunda çok iyi bence.

https://cssgridgarden.com/#tr

CSS garden

https://www.gridcritters.com/ Ücretli

grid critters

Kaynaklar

  • https://www.smashingmagazine.com/2017/12/grid-inspector/
  • https://scotch.io/tutorials/debugging-css-grid-with-firefox-dev-tools
  • https://www.youtube.com/watch?v=16enLRDbOyY (Announcing CSS Grid & the Firefox Grid Inspector Tool)
  • http://grid.malven.co/
  • https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
  • https://www.quackit.com/css/grid/tutorial/inspect_a_grid.cfm
  • https://mozilladevelopers.github.io/playground/css-grid/03-firefox-devtools
  • https://www.mozilla.org/en-US/developer/css-grid/
  • https://www.joomlashack.com/blog/joomla-news/css-grid-additional-concepts/
  • https://umaar.com/dev-tips/157-css-grid-debugging/
  • https://morioh.com/p/caebd9f65e10
  • https://www.sitepoint.com/css-grid-generators/
  • https://medium.com/better-programming/debug-css-grid-with-firefox-devtools-949f328aab88
  • https://gridbyexample.com/learn/2016/12/17/learning-grid-day17/

  1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas
  6. Explicit(belirlenmiş) ve implicit(belirlenmemiş) grid ögeleri
  7. CSS minmax işlevsel değeri
  8. repeat() işlevi, auto-fill ve auto-fit değerleri
  9. CSS Grid öge özellikleri
  10. Grid hizalama ve sıralama işlemleri
  11. CSS Grid kısayolları - grid-template ve grid

CSS ile ögeleri diğer ögelerin üstüne çıkarmak için genelde postion:absolute özelliğini kullanırız. Ancak bu yöntemin şöyle bir sıkıntısı vardır. position: absolute tanımlanmış öge normal akıştan çıktığı için genişliğinin ve yüksekliğinin hesaplanması her zaman problemdir. CSS grid modülü, bu soruna da çözüm oldu.

Plandaki iki ögeye aynı grid hücresinin tanımı yapılıp üst üste binmesi sağlanabilir. Hangi ögenin önde hangi ögenin arkada olması gerektiğini de z-index değeriyle belirleyebiliriz.

Bir örnek verelim.

.oge1 {
    grid-row: 1 / span 4;
    grid-column: 1 / span 4;
    background: lime;
}
.oge2 {
    grid-row: 4 / span 4;
    grid-column: 2 / span 4;
    background: rgba(255, 192, 203, .9);
    z-index: 1;
}
.oge3 {
    grid-row: 7 / span 4;
    grid-column: 7 / span 4;
    background: lightblue;
}
.oge4 {
    grid-row: 4 / span 7;
    grid-column: 3 / span 2;
    background: rgb(255, 255, 0, .7);
}
.oge5 {
    grid-row: 2 / span 3;
    grid-column : 4 / span 5;
    background: rgba(128, 0, 128, .8);
}

Yukarıda görüldüğü üzere kullanılan elemanlara yapılan tanımlarla grid hücrelerini birden fazla öge kullanabiliyor. Bu şekilde üst üste binen alanlar oluşturuluyor. oge2 elemanında yaptığımız gibi z-index tanımıyla istediğimiz ögeyi üste çıkarabiliyoruz. Bu şekilde üste çıkarılan ögeler normal akışta bulunduğu için position: absolute tanımı gibi yükseklik ve genişlik sorunları yaşamıyoruz. Diyeceksiniz ki artık position: absolute tanımına gerek var mı? Hayır. Normal akışın dışına çıkarmak istediğimiz durumlar için ve grid kullanmadığımız durumlar için position: absolute tanımına ihtiyacımız var.

Grid ile birlikte popüler olan magazin tipi sayfalarda genelde gördüğümüz üzerine binme işlerini bu şekilde kolayca halledebiliriz.

Jen SIMMONS‘ın verdiği örnek üzerinden gidelim.

grid üst üste binme

Bir resim ve üzerinde bir başlık ve açıklama alanını kodlayalım.

article {
    display: grid;
    grid-template-columns: 1fr minmax(0, 30ch) 1fr;
    grid-template-rows: 20% 2fr auto auto 1fr;
}

3 kolon 5 satırlık bir plan yapalım.

grid üst üste binme

Resmi (<img>) 1. ve 3. kolon aralığına, 1. ve 6. satır aralığına koyalım.

img {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
}

Başlığı (<h1>) 2. ve 4. kolon aralığına, 3. ve 4. satır aralığına koyalım. Ayrıca satır ve kolon sonuna hizalayalım.

h1 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
  align-self: end;
}

Son olarak da detay yazısını (<p>) 2. ve 4. kolon arasına, 4. ve 5. satır arasına yerleştirelim. Hizalama olarak da bu hücrelerin başına hizlayalım ki başlık ile alt alta gelsin.

Yukarıda dikkat ederseniz ögeler 2. kolon ve 3. ve 4. satrıları ortak kullanıyorlar. Resmi diğer ögelerin altına almak için z-index: -1 tanımlayalım.

img {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
  z-index: -1;
}

Sonuç aşağıdaki gibi olacaktır.

Absolute‘a göre en büyük avantajı belirttiğimiz gibi içeriğin veya başlığı uzun veya kısa gelmesi duruma göre ayrıca iş yapmamıza gerek yoktur.

Bir başka örnekte daha önce çalıştığım bir projede zamanımı alan bir konuda grid ile çok basit ve kolay çözmek oldu.

İlk bölümde resmin yarısından başlayıp sayfanın en sonuna kadar uzanan ardalan eklemek için biraz zaman harcamıştım. Şimdi grid ile daha az kod ile daha kolay çözdüm.

Kaynaklardaki örnekleri de incelemenizi öneriyorum.

Daha önce CSS ile çözümü olmayan bir konuya grid çözüm sağlayarak bizleri bir kez daha sevindirdi. :)

Yardımlarından dolayı Serkan Bektaş‘a teşekkürlerimi sunarım.

Sağlıcakla kalın.

Kaynaklar

  • https://gedd.ski/post/overlapping-grid-items/
  • https://bricampgomez.com/blog/how-to-overlap-images-in-css/
  • https://www.joomlashack.com/blog/tutorials/layering-items-within-css-grid/
  • https://medium.com/@JonWongCodes/overlapping-and-positioning-using-css-grid-5de7b1f09335
  • https://www.cmuir.co.nz/post/overlapping-elements-with-css-grid/
  • https://twitter.com/wesbos/status/1189603952230371332?s=20
  • https://twitter.com/shshaw/status/1189610604757213185?s=20
  • https://youtu.be/EashgVqboWo
  • https://codepen.io/GD_Design/pen/vPXQem (örnek katman)
  • https://codepen.io/dannievinther/pen/LevJxp (Örnek sayfa)
  • https://cdpn.io/maddesigns/debug/GjKkAd