Bu seviyede sıfırdan kendi yazdığınız kodlar ile birşeyler oluşturmayı çözmüş durumdasınızdır. Ancak hala kodunuzun karmaşık ve dağınık(spagetti kod) olduğunu düşünüyorsunuzdur.

Bu aşamaya geçmeden önceki adımda şu 5 uygulamayı kendiniz yazmış olmalısınız:

  1. Off-canvas Menü
  2. Modal
  3. Akordiyon
  4. Tablar
  5. Kayan Resimler(Carousel)

Bu aşamada odaklanacağınız hedefler:

  1. Kendi kodlarınız ile daha fazla uygulama oluşturmak
  2. Daha iyi kod yazmak

Bu safhada kendi ihtiyaçlarınız için, eğlenceli bulduğunuz konularda, bir portföy oluşturmak için, başkalarına yardımcı olmak için ya da sizden ücretli olarak istenilen bir sorunu çözmek için devamlı olarak kod yazmaya devam ederek yeni uygulamalar geliştirmelisiniz. Hedef daha fazla uygulama geliştirmek, daha çok kod yazma pratiği kazanmak. Örneğin;

  • Bir hesap makinesi
  • Bir yapılacaklar listesi
  • Google Maps benzeri bir uygulama
  • Bir tarih seçici
  • Bir geri sayım sayacı gibi.

Bu noktada, ihtiyaç duyacağınız teknolojilerden biri olan Asenkron Javascript(Asynchronous JavaScript) kodlamayı da öğreneceksiniz. 

Bu aşamada bilmeniz gerekenler;

  1. Callbacks (bunu zaten biliyor olmalıydınız)
  2. Promises
  3. Fetch Kullanımı
  4. API’lerle çalışmak
  5. Async-await

Eğer mümkünse yeniden kullanılabilir bileşenler(components) kodlamaya da çalışın. Bu bir Arayüz Geliştiricisi(Frontend Developer) olarak programlamanın bilmeniz ve yapmanız gereken en önemli parçalarından biridir. 

İkinci hedefimiz olan daha iyi kod yazma konusuna odaklanmanız da önemlidir. Programlamada buna En İyi Uygulamalar(Best Practices) adı verilir. Esasında en iyi kodlama yöntemleri anlamını taşır. bu zor bir konudur, çünkü;

  1. Javascript için en iyi uygulamalara ulaşmanın kısa bir yolu yoktur.
  2. Kod yazan geliştiricilerin bu konuda çoğu zaman çelişen fikirleri olabilir..

En iyi kodlama yöntemleri 3 bölüme ayrılır:

  1. Temel
  2. Orta
  3. Gelişmiş

Temel olan da yöntem, deneme ve test etmedir. Örneğin, iki değeri katı eşitlik operatörü(===) ile karşılaştırmak gibi.

Orta seviye olan da yöntem biraz karmaşıklaşıyor. Ancak çoğu geliştirici aynı standartlara katılıyor, bu yüzden oldukça kullanılan bir yöntem. Örneğin:

  1. Yan etkileri azaltmalı
  2. Temiz fonksiyonlar yazmalı (yan etkileri de azaltır).
  3. Mutasyonları, Dönüşümleri azaltmalısınız (yan etkilere sebep olurlar).

Gelişmiş seviye olan yöntemler çok karmaşıktır, çünkü geliştiriciler bu konuda çok farklı fikirlere sahiptir.

Örneğin;

  1. Fonksiyonel(İşlevsel) Programlama mı yoksa Nesne Tabanlı Programlama kullanmalısınız (ya da her ikisini aynı anda mı kullanmalısınız).
  2. Javascript’te nesne tabanlı programlama yapmanın 4 yolu vardır. Hangisini kullanmalısınız? Neden?
  3. Kalıtım(Inheritence) yerine Kompozisyon(Composition) mu kullanmalısınız? Ne zaman tersi geçerlidir?

Maalesef bunlarla ilgili yön verebilecek kesin yargıya sahip makaleler pek yok.

Daha İyi Kod Yazmak İçin İpuçları

1: Yeni şeyler inşa ederken en iyi kodlama yöntemlerine takılmayın.

Tam olarak aşina olmadığınız en iyi kodlama yöntemlerini denerken yeni bir şeyler inşa etmeniz zordur. En iyi ihtimalle, okuması bile zor olan başarısız bir kodla son bulur. DAha da kötüsü tıkanır ve hiç bir şey ortaya çıkaramazsınız.

2: En iyi kodlama yöntemlerini eski kodlarınızı yeniden elden geçirirken ekleyin.

Yeniden elden geçirme(Refactoring) mevcut kodlarınızı geliştirmeye verilen isimdir. Ne yapılması gerektiğini zaten biliyorsunuzdur.  is improving existing code. You already know what needs to happen. Ne olması gerektiği hakkında mantıklı düşünmeye çalışmadan yapıyı iyileştirmek için en iyi uygulamaları uygulayabilirsiniz.

3: Mükemmel kod yazmaya çalışmayın

Asla mükemmelliğe ulaşamayız. Bu bir ütopyadır. 3 ay sonra bugün yazdığınız koddan utanacak ve yeniden elden geçirerek daha iyisini yazacaksınız. Ama durun daha bitmedi. Bilin bakalım ne olacak? 6 ay sonra ise 3 ay önce yazdığınız bu koddan utanırken bulacaksınız kendinizi. 

O halde, elinizden gelenin en iyisini yapın (daha iyi nasıl yapacağınızı öğrenene kadar). Sonra hayatınıza devam edin. Bir kaç ay sonra tekrar geri dönün ve neyi iyileştirebileceğinize bakın.

Ne zaman bu aşamada yeterince pişmiş olursunuz?

Bu seviye oldukça zor ve uzun bir yoldur. Hepsini kavramanız 3 aydan 3 yıla kadar, hatta belki daha uzun sürebilir.

Ama bu aşamada öncekilerden daha farklı bir durum söz konusudur; bir sonraki adıma geçmek için hepsinde ustalaşmanıza gerek yoktur. Sadece yeterli seviyede iyi anlamış olmanız kafidir. Aşağıdaki soruları cevaplamak konusunda kendinizi rahat hissediyorsanız bir sonraki adıma geçebilirsiniz;

  1. Asenkron Javascript(Asynchronous JavaScript)
    1. Senkron JavaScript nedir?
    2. Asenkron JavaScript nedir?
    3. Eylem döngüsü nedir?
    4. Eylem döngüsü nasıl çalışır?
    5. Callback nedir?
    6. Promise nedir?
    7. Callback, Promise, ve Async/Await nasıl yazarsınız?
    8. Promise’leri birbirine nasıl zincirleme bağlarsınız?
    9. Callback, Promise, ve Async/Await ile çalışırken hataları nasıl yakalarsınız?
    10. Fetch’i nasıl kullanırsınız?
    11. Get, Post, Put, Patch, ve Delete nedir?
    12. Create, Read, Update ve Delete nedir?
  2. Temel Nesneye Dayalı Programlama
    1. What is this in the 6 possible contexts?
    2. Yapılandırıcı(Constructor) nedir?
    3. Sınıf(Class) nedir?
    4. OLOO nedir?
    5. Fabrika Fonksiyon(Factory Function) nedir?
    6. Prototip(Prototype) nedir?
    7. Kalıtım(Inheritance) ne anlama gelir?
    8. Javascript’te bir şeyleri nasıl miras alabilirsiniz?
    9. Kompozisyon(Composition) ne anlama gelir?
    10. Javascript’te bir oluşturma(compose) işlemini nasıl yaparsınız?
  3. Temel Fonksiyonel Programlama
    1. Durum(state) nedir?
    2. Yan etkiler(side effects) nelerdir?
    3. Durum değişikliklerini neden azaltmaya çalışmalısınız?
    4. Saf Fonksiyon(pure function) nedir?
    5. Yan etkileri nasıl kontrol edersiniz?
    6. Neden nesneleri mutasyona uğratmamalısınız?
    7. Nesneleri nasıl mutasyona uğratmamalısınız?
    8. Dizileri nasıl mutasyona uğratmamalısınız?
  4. Erişebilirlik(Accessibility)
    1. WAI-ARIA nedir?
    2. Ekran okuyucular(screen readers) nedir?
    3. Voiceover nasıl kurulur?
    4. NVDA nasıl kurulur?
    5. aria rolleri nedir?
    6. Mümkün dönüm  noktası rolleri(possible landmark roles) nedir?
    7. Canlı bölgeler(live regions) nelerdir?
    8. Canlı bölgeleri(live regions) nasıl kullanırsınız?
    9. İçerik erişimini nasıl gizlersiniz?
    10. Tab odaklamasını nasıl yönetirsiniz?