Web yazıları
Günlükte web etiketiyle yer alan her şey.
2026
On bir kilobaytlık ana sayfa: statik siteler hâlâ iyi fikir
Önceden üretmenin size kazandırdıkları, karşılığında verdikleriniz ve siteyi küçük tutan build hattı, sayfa ağırlığı bütçesi ile cache kuralları.
Neredeyse her sitenin yaptığı iki erişilebilirlik hatası
Başlık seviyelerinin tasarıma göre seçilmesi ve görünen metni gizleyen aria-label. İkisi de klavye ve ses kullanıcısını engeller, ikisinin de çözümü ucuz.
2025
Kendi sunucunuzda font, gizlilik mevzuatı ve bir eksik istek
Dışarıdan gelen font stili, sayfanız çizilmeden önce her ziyaretçinin IP adresini başka bir şirkete verir. Kendi sunucunuza almak bunu ve bir turu siler.
Responsive images denetimi size aslında ne söylüyor
Denetim, gönderdiğiniz dosyayı cihazın ihtiyacı olan pikselle karşılaştırır: layout genişliği çarpı piksel oranı. Raporu okumanın ve düzeltmenin yolu.
Kapatılmayan akış yanıtı yüz saniye asılı kalıyor
Token'lar geliyor, cevap tamamlanıyor, istek açık kalıyor ve proxy onu kesiyor. Akışı doğru kapatmak ve gerçek alan adı üzerinden ölçmek.
Yanlış kurulan root, .env dosyanızı internete nasıl açıyor
Web root proje dizinini gösteriyorsa ve sunucu diskte var olan her dosyayı sunuyorsa, .env ve .git tek bir düz istek uzaklıktadır.
Satır içi ilk boyamayla katı bir içerik güvenlik politikası
Kritik CSS'i ve küçük bir script'i satır içi gömmek ilk boyama için iyidir, katı CSP için yasaktır. Çözüm hash, ama doğru anda hesaplanırsa.
Giriş animasyonunuz en büyük boyamayı geciktiriyor
opacity sıfırla başlayan öğe boyanmış sayılmaz. Fade in animasyonu, Largest Contentful Paint değerini gecikme kadar ve fazlası kadar öteler.
PNG’nin AVIF’i yendiği yer: sert noktalardan oluşan görseller
Kayıplı codec'ler fotoğraf için tasarlandı. Tram noktalı bir görselde indexed PNG her genişlikte AVIF'i yendi; bunu bilmenin tek yolu ölçmek.
Fontu alt kümele, yedek font metriğini eşle, kaymayı bitir
127 karakter basan bir sayfa 889 glyph indirmemeli. Build'de alt kümeleyin, yedek fontun metriğini eşleyin, swap anındaki kayma sıfırlansın.
Türkçe büyük harf tuzağı: kodda i, I ve noktalı İ
Türkçede i büyürken İ, I küçülürken ı olur. Case folding, CSS text-transform ve veritabanı collation'ı bunu varsayılan olarak yanlış yapar.
2024
Heceleme sözlüğü olmadan iki yana yaslı Türkçe metin
Chrome'da Türkçe heceleme sözlüğü yok, bu yüzden iki yana yaslı Türkçe sütunda boşluk nehirleri açılıyor. Çözüm: build sırasında yumuşak tire.
Kontrol paneli ile nginx dosyanız çeliştiğinde
Kontrol panelleri vhost dosyasını kendi şablonundan üretir, elle yapılan değişiklik sertifika yenilemesinde silinir. Değişikliği nereye yazmak gerekir.
Güvenlik başlıklarınızı sessizce düşüren nginx kuralı
nginx'te add_header yalnızca alt seviyede hiç add_header yoksa miras alınır. Bir location'a eklenen tek cache başlığı HSTS ve nosniff'i oradan siler.
Olmayan her sayfayı ana sayfaya yönlendirmek aramada neye mal oluyor
Olmayan sayfaları ana sayfaya yönlendirmek soft 404 üretir, tarama bütçesini yer ve kırık linkleri gizler. Bunun yerine gerçek 404 dönün.
Tarayıcıda önbelleğe alınan 301, yeniden tasarımdan sonra siteyi nasıl kırıyor
Tarayıcılar kalıcı yönlendirmeyi süresiz saklar. Yeni site eski 301'i ters çevirirse geri dönen ziyaretçi döngüye girer. Teşhisi ve kalıcı çözümü.