Teknoloji

Görünen kısım makaleler. Asıl iş, o makalelerin her cihazda çalışmasını sağlayan katmanda.

Basementonfire'ın çözdüğü teknik problem şu: bir fizik veya tarih simülasyonunu, kurulum istemeden, orta-düşük donanımlı bir telefonda akıcı çalıştırmak. Bu sayfa bunu nasıl yaptığımızı anlatıyor.

Kod ölçümleri 29 Temmuz 2026 itibarıyla.

1 · Simülasyon motoru

Makalelerdeki etkileşimli modüller hazır bir oyun motoruna değil, doğrudan WebGL üzerine kurulu. Her makale kendi sahnesini taşıyor: kuşatma simülasyonu, çift yarık deneyi, kamuflaj seçilimi, kuvvet laboratuvarı, bozunma zinciri, Möbius şeridi, dünyanın iç yapısı.

• Sahne başına motor seçimi. Ağır geometri gereken sahnelerde three.js, tek nesnelik hafif sahnelerde çok daha küçük olan ogl kullanılıyor. Amaç, her makalenin yalnızca ihtiyacı kadar kod indirmesi.
• Tembel yükleme. Ağır modüller sayfayla birlikte inmiyor; ekrana yaklaştıklarında yükleniyor ve o ana kadar yerlerinde statik bir SVG önizleme duruyor.
• Ekran dışında durma. Uzun ömürlü çizim döngüleri, bölüm ekrandan çıkınca duruyor. Kaydırma akıcılığının asıl kaynağı bu.

2 · Uyarlanabilir performans katmanı

Asıl özgün kısım burası. Bir sahnenin zayıf bir telefonda kasıp kasmayacağını tahmin etmiyoruz — ölçüyoruz. İki katman var:

Katman 1 — cihaz sınıfı

Sahne kurulmadan önce cihaz kabaca sınıflanır: işlemci çekirdek sayısı, bellek, işaretleyici türü (dokunmatik mi) ve ekran kısa kenarı. Sonuca göre sahne daha ucuz kurulur: piksel oranı, geometri yoğunluğu, parçacık sayısı ve pahalı materyal katmanları buna göre belirlenir. Tarayıcı bu ipuçlarını vermiyorsa güvenli orta sınıfta kalınır.

Retina ekranlarda bile 4× piksel boyamanın görsel karşılığı yok; tavan koymak tek başına kayda değer bir kazanç.

Katman 2 — kare süresi bekçisi

Sınıflandırma kaba bir tahmindir; gerçek karar sahne çalışırken veriliyor. Bekçi her karenin süresini ölçer ve iki kademeli müdahale eder:

• Isınma penceresi: ilk 60 kare sayılmaz. O kareler hidrasyon, görsel çözme ve animasyon kurulumuyla çakışır; her cihazda yavaştır. Ölçseydik sağlam telefonları da haksız yere kısıtlardık.
• Aykırı değer ayıklama: 200 ms'yi aşan kare aralıkları çizim maliyeti değildir (arka plan sekmesi, çöp toplama, kaydırma takılması) — ortalamaya katılmaz.
• Birinci kademe: 90 karelik pencerede ortalama 26 ms'yi aşarsa (≈38 fps altı) çözünürlük düşürülür.
• İkinci kademe: hâlâ 30 ms'yi aşıyorsa (≈33 fps altı) animasyon dondurulur — son kare ekranda kalır, sahne durağan bir görsele dönüşür.

3 · Ölçüm ve kanıt katmanı

Bir eğitim içeriğinin okunması yetmez, kaldığının ölçülmesi gerekir. Site bunun için dört sinyal topluyor: makale okuma ilerlemesi, makale sonu quiz cevapları, günün sorusu ve makale içi karar noktalarında verilen oylar. Bu veriler kişiye özel öğrenme yolunu kurmanın ve içeriğin hangi bölümünde okuyucunun kaybolduğunu görmenin temeli.

Editöryel tarafta ise kaynak çelişkilerini gizlemek yerine yan yana gösteren ortak bir bileşen var: aynı olay için farklı kaynakların verdiği farklı sayılar aynı ekranda karşılaştırılıyor.

4 · Yayın mimarisi

Makalelerin tamamı statik üretilir: kök yerleşim oturum bilgisi okumaz, bu yüzden makale sayfaları derleme anında hazırlanıp kullanıcıya en yakın uç düğümden servis edilir. Dinamik yüzeyler (akış, keşfet) artımlı statik yeniden üretim (ISR) ile çalışır — sayfa önceden üretilmiş hâliyle anında gelir, arkada tazelenir.

Girişli/çıkışsız ayrımı, statik sayfayı bozmadan, sunucuda oturum okumadan yapılıyor. Bunun ölçülen karşılığı, ağır bir sosyal akış sayfasının bile saniyenin altında açılması.

5 · Gizlilik-öncelikli ölçüm

• Çerezsiz ziyaretçi sayacı. Kendi trafik ölçümümüz çerez yerleştirmez ve ham IP adresi saklamaz; tekil ziyaretçi geri döndürülemez bir özetle sayılır.
• Onaya bağlı analitik. Üçüncü taraf analitik, onay verilene kadar çerezsiz ve kısıtlı modda çalışır (Consent Mode v2).
• Veritabanı tarafında yetki. Erişim kuralları satır düzeyinde veritabanında tanımlı; gizli hesap içeriği listeleme yüzeylerinde ayrıca süzülür.
• Kullanıcı yazılımı yalıtımı. Kullanıcıların kendi makalelerine gömdüğü etkileşimli içerik, sitenin geri kalanına erişemeyen yalıtılmış bir çerçevede çalışır.

Teknoloji yığını

Açık kaynak

Bu site açık kaynak projelerin üzerine kurulu: React, Next.js, three.js, ogl, GSAP, PostgreSQL, Supabase ve daha fazlası. Emeği geçen herkese teşekkürler.

Teknik ayrıntı, işbirliği veya kurumsal kullanım için iletişim sayfası →

Son güncelleme: 29/07/2026