Çok sık olmasa da ara sıra kullandığım editörden daha iyi bir editör arayışım olur. Uzun senelerdir Sublime Text kullanıyorum. Hızı ve bazı özellikleri beni etkilediği için Sublime Text ile devam ediyorum. Ancak belli aralıklarla diğer editör ve IDE’leri deniyorum.

Daha önceki denemelerimde yaşadığım sıkıntılar nedeniyle vazgeçtiğim Visual Studio Code editörüne geçişimi bu sefer

Bu twitteki Javascript otomatik tamamlamadaki sorunların yeni sürümde düzeldiği haberiyle tekrar denemeye karar verdim.

1. gün

Terminaldeki ilk izlenimlerin gayet güzel. Daha önce istediğim özellikleri bu sefer kolayca ekleyebildim. Böylelikle iTerm kullanımıma son verebilirim.

2. gün

  • İkinci günün başında bir sorun ile karşılaştım. Otomatik tamamlama çok yavaş çalışıyordu. Kodu belli kısmını gizleyen eklentiyi kaldırdım region folding for VS Code düzeldi.
  • Sublime Text’in araması çok hızlı diyordum. Bugün fark ettim ki Visual Studio Code çok daha hızlı.
  • Sublime’da alıştığım girintili yapıştırma kısayolu sorun çıkarıyor her seferinde. Çünkü Visual Studio Code normal yapıştırmaya da kendi otomatik girintiliyor kodu. (Uzun içeriklerde bazen sorun çıkarıyor)

3. gün

Daha önce vazgeçmeme sebep olan - Yavaş arama sonuçları çözülmüş - Terminal’de istediğim özellikler eklenmiş (tıkla kopyala, renk değiştirme, otomatik tamamlama) - Açılıştaki gecikme giderilmiş.

  • Terminalden istediğim dosyası Visual Studio Code açmak için Command Palette (⇧⌘P) shell ve çıkan sonuçlardan Shell Command: Install 'code' command in PATH enter a basmak yeterli. Artık terminalde code dosya_adi.css yazıp istediğim dosyayı açabiliyorum. Detaylı bilgi için tıklayınız.

4. Gün

  • Javascript otomatik tamamlamada sorun olduğu için projeyi aç/kapa yaptım düzeldi :(
  • Terminali tam ekran açmak için cmd+shift+T kısayolu atadım. Terminale de iyice alıştım :)
  • İkinci bir projeyi açtım. New Windows (Pencere demesi ilginç, gerçi Windows işte :)
  • İki proje arasında geçiş için ctrl + r (kntrl + r) sonra ilgili projeyi seçip enter

5. Gün

Yeni bir dosyayı açtığımda anlık açıp başka bir dosyaya geçince onu kapatması sevimli değil. Sublime Text’te de vardı bu bi yerden kapatmıştım. Visual Studio Code’da bulamadım henüz ama can sıkıyor. Buldum. cmd+k+enter ile sabitleniyormuş.

  • Bir şey arayıp sonra ilgili sayfada onu sildiğimde arama sonucunun anlık güncellemesi hoş.
  • Otomatik tamamlama ile log yazıp console tamamlaması yavaş çalışıyordu. Bende çözümü daha gelişmiş bir consol.log ekleyici eklenti ile çözdüm.

İkinci haftaya geçtim ve hala Sublime Text’e geçmediğime göre işler iyi gidiyor demektir. Visual Studio Code hızlı güncellenmesi ve eklentilerinin Sublime Text’e göre daha çok ve hızlı güncelleniyor olması cezbedici. Terminal için iTerm kullanıyorum, Visual Studio Code kullanırken iTerm kullanımımı sıfıra indirdi. Şimdiye kadar eksikliğini hissettiğim tek şey iyi bir javascript ve react otomatik tamamlamasını henüz gerçekleştiremedim. (Airbbnb React Snippet ve Javascript ES6 code snippet yüklü)

Son bir şey daha arama yaptıktan sonra arama ekranı ve sonuçları Esc tıklayınca kapatan bir kısayol tanımı bulamadım. Bilen varsa yorum olarak yazarsa sevinirim.

Niye Sublime Text’i bıraktığımı düşündüm, en bariz aklımda kalan güncellemelerin çok seyrek olması. VSCode ile gelen başarılı bir terminalin olması da bir artı.

Visual Studio Code ile devam. Bundan sonra yaşadıklarımı paylaşmaya çalışacağım.

Kalın sağlıcakla.

Kaynaklar

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/