Bu siteyi kurarken tek bir kural koydum: ziyaretçinin tarayıcısı, içeriği görmek için benim yazdığım JavaScript'e ihtiyaç duymasın. Geri kalan her karar bunun sonucu.
Çerçeve yok, derleme var
Sitede React, Vue ya da benzeri bir çalışma zamanı çerçevesi yok. Yalnızca Vite ile derlenen düz JavaScript ve CSS var. Üretim paketinde ziyaretçiye giden üçüncü taraf çalışma zamanı kodu bulunmuyor; bağımlılıkların tamamı ya derleme zamanında çalışıyor ya da font paketlerinden ibaret.
Bunun ölçülebilir karşılığı küçük bir paket. Ama asıl kazanç başka: bağımlılık yüzeyi daralınca, sayfanın ne yaptığını okumak için tek bakmam gereken yer kendi kaynak kodum oluyor.
Sayfalar build sırasında yazılıyor
npm run build iki şey yapıyor. Önce Vite paketleri üretiyor, sonra kendi prerender adımım her sayfayı gerçek HTML olarak diske yazıyor:
npm run build
# vite build → dist/assets/*
# prerender → index.html, en.html, yazilar.html, yazilar/*.html,
# sitemap.xml, feed.xml, robots.txt, 404.htmlYani dist/ klasöründeki her adres, JavaScript hiç çalışmasa bile okunabilir metin döndürüyor. Tarayıcıda çalışan betik yalnızca hâlihazırda ekranda olanı zenginleştiriyor: mobil menü, kaydırma ile beliren bölümler ve dil değiştirme.
Statik üretimin en sevdiğim yan etkisi: kırılabilecek daha az şey var. Sunucu tarafında API yok, gizli anahtar yok, veritabanı yok.
Hareket bir tercih
Ana ekrandaki tel kafes formu WebGL değil, düz bir 2D canvas üzerinde çiziliyor. Üç davranışı var:
- Görünür alandan çıktığında çizmeyi bırakıyor
- Sekme arka plana alındığında duruyor
prefers-reduced-motion: reduceayarında hiç başlamıyor
Ayrıca köşesinde bir duraklat düğmesi var. Bir animasyonu durdurmak isteyen birinin sistem ayarlarına gitmek zorunda kalmaması gerektiğini düşünüyorum.
İki dil, iki gerçek adres
Türkçe ve İngilizce içerik ?lang= gibi bir parametreyle değil, ayrı adreslerle sunuluyor: / ve /en.html. Her sayfa kendi canonical adresini ve karşılıklı hreflang bağlantılarını taşıyor. Dil değiştirme bağlantıları JavaScript kapalıyken de çalışıyor, çünkü altlarında gerçek bağlantılar var.
Bu bölüm
Yazılar da aynı boru hattından geçiyor. content/writing/ altındaki Markdown dosyaları derleme sırasında okunuyor, HTML'e çevriliyor ve statik sayfa olarak yazılıyor. Markdown çevirici projenin kendi içinde; kod blokları dâhil her karakter, herhangi bir etiket üretilmeden önce kaçırılıyor.
Buraya yazacaklarım çoğunlukla üzerinde çalıştığım şeylerin notları olacak: zafiyet analizleri, araç geliştirirken karşılaştığım problemler ve laboratuvar çalışmalarından çıkan gözlemler.