Kendi başına yapabilir misin?

Sırayla: (1) adres ayrıştırılır — parça (#) sunucuya gitmez, HSTS listesindeyse doğrudan HTTPS'e geçilir; (2) ad çözümleme — tarayıcı ve işletim sistemi önbelleği, hosts, sonra özyineli çözümleyici ve gerekirse kök → TLD → yetkili sunucu; (3) TCP el sıkışması ve HTTPS ise TLS el sıkışması (TLS 1.3'te bir gidiş-dönüş; SNI ile alan adı, ALPN ile HTTP sürümü seçilir); (4) HTTP isteği — önbellek geçerliyse hiç ağa çıkılmaz ya da ETag ile 304 alınır; (5) tarayıcı HTML'den DOM'u, CSS'ten CSSOM'u kurar, birleştirip render ağacını çıkarır; (6) yerleşim, boyama ve birleştirme ile ekrana kare çıkar; (7) betikler çalışır, ek kaynaklar yüklenir. Kritik ayrıntılar: CSS render engelleyicidir; klasik <script> ayrıştırmayı durdurur ve önündeki CSS'i bekler; ön yükleme tarayıcısı ayrıştırma dururken bile kaynakları keşfeder — bu yüzden görselleri JavaScript ile eklemek onları geciktirir. Ölçmek gerekirse Network panelindeki zaman dökümüne (TTFB mi, indirme mi, bağlantı mı) ve LCP/INP/CLS'e bakarım.

Flexbox tek boyutludur ve içerikten yerleşime çalışır: ögelerin boyutunu içerikleri belirler, tek eksende dizilir. Grid iki boyutludur ve yerleşimden içeriğe çalışır: ızgarayı ben tanımlarım, içerik hücrelere oturur. Karar: üst bar, düğme grubu, etiket–değer satırı ve bir kartın iç dizilimi → Flexbox; sayfa iskeleti, kart ızgarası, form etiket–alan hizalaması → Grid. Tipik bir sayfada dış iskelet Grid, iç bileşenler Flexbox olur. Duyarlı kart ızgarası için tek satır yeter: grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) — sütun sayısına tarayıcı karar verir, medya sorgusu yazmam. auto-fit boş izleri daraltır, auto-fill korur; fark yalnız öge sayısı sütun sayısından azken görünür. İki tuzağı da bilirim: Grid'de 1fr aslında minmax(auto, 1fr)'dir ve içinde uzun bir URL olan sütun daralmaz — minmax(0, 1fr) gerekir; Flexbox'ta aynı sorun varsayılan min-width: auto'dan gelir ve min-width: 0 ile çözülür. Ayrıca order ve grid-area görsel sırayı değiştirir ama klavye ve ekran okuyucu DOM sırasını izler; sırası anlamlı içerikte kullanmam.

Kapanış, bir fonksiyonun tanımlandığı kapsamı — o kapsam sona erdikten sonra bile — hatırlamasıdır. function sayacYap(){ let s = 0; return () => ++s; } örneğinde dönen fonksiyon s'yi canlı tutar ve her sayacYap() çağrısı kendi bağımsız kapanışını üretir. Kullanımı: özel durum tutmak, fabrika fonksiyonu, debounce/throttle. Bedeli kapattığı kapsamı canlı tutmasıdır — kaldırılmayan dinleyiciler ve zamanlayıcılar bu yüzden bellek sızdırır; React'te aynı şey "bayat kapanış" olarak karşıma çıkar. this ise fonksiyonun nasıl çağrıldığına göre belirlenir: new ile yeni nesne, call/apply/bind ile açıkça verilen, nesne.fn() ile noktanın solundaki, serbest çağrıda sıkı modda undefined. Ok fonksiyonlarının kendi this'i yoktur, dıştakini alır. İkisinin birleştiği klasik yer: bir nesne metodunu setTimeout'a referans olarak geçmek — nokta kaybolduğu için this gider; çözüm ok fonksiyonuyla sarmalamak ya da bind. Ve bind her çağrıda yeni bir fonksiyon döndürdüğü için removeEventListener ile kaldırırken referansı saklamak (ya da AbortController kullanmak) gerekir.

Beş başlıkta anlatırım. (1) Durumlar: ekranın beş hâli vardır — yükleniyor (iskelet; göstergeci 300 ms'den önce göstermem), boş (ne yapılacağını söyleyen metin), hata (tekrar dene düğmesiyle), kısmi ve dolu. Çoğu ekip yalnız "dolu" durumu tasarlar. (2) İstek: fetch HTTP hatalarında reddetmez, bu yüzden yanit.ok kontrolünü elle yazar ve durum kodunu taşıyan bir hata sınıfı fırlatırım; zaman aşımı yerleşik olmadığı için AbortSignal.timeout eklerim; yeniden denemeyi yalnız idempotent isteklerde, üstel geri çekilmeyle yaparım. (3) Paralellik: birbirine bağlı olmayan istekleri arka arkaya await etmem, Promise.all ile paralel çalıştırırım; kısmi sonuç göstereceksem allSettled kullanırım. (4) Yarış koşulu: filtre ya da arama hızlı değişiyorsa debounce + AbortController ile iptal + sıra numarası kullanırım; yoksa geç gelen eski yanıt yeni sonucu ezer. (5) Çizim ve erişilebilirlik: satırları DocumentFragment ile tek seferde eklerim, kullanıcı verisini textContent ile yazarım, düğmeleri satır satır bağlamak yerine olay devretme kullanırım (yeniden çizimde bozulmaz), sonuç sayısını role="status" ile duyurur ve silme sonrası odağı kaybetmem. Sıralama ve sayfalama sunucudaysa ikisini de sunucuda yaparım; Türkçe sıralama gerekiyorsa Intl.Collator("tr") kullanırım.