Frontend & UI
Frontend ve UI kategorisi, kullanıcının gerçekten dokunduğu katmanla ilgili: CSS mimarisi, animasyon ve geçişler, erişilebilirlik, duyarlı tasarım ve tarayıcı performansı. Bir arayüzün "iyi hissettirmesi" tesadüf değil — hangi özelliği animasyona verdiğin, bir geçişin kaç milisaniye sürdüğü, klavyeyle gezinen birinin odak halkasını görüp göremediği gibi ölçülebilir kararların toplamı. Buradaki yazılar hem bu ayrıntıları hem de daha büyük resmi ele alıyor: layout kaymasını nasıl önlersin, WebGL ya da ağır bir efekt mobilde nereden başlayıp nerede durmalı, erişilebilirliği sonradan yamamak yerine baştan nasıl kurarsın. Örneklerin çoğu bu sitenin arayüzünden geliyor.
Scroll Animasyon: Intersection Observer ile Performanslı Efektler
Scroll animasyon kurmanın modern yolu: Intersection Observer ile öğeler görünüme girince tetiklenen, akıcı ve performanslı efektler.
CSS position: relative, absolute, sticky ve fixed
CSS position değerlerini (static, relative, absolute, fixed, sticky) örneklerle netleştiren, kafa karışıklığını gideren pratik bir rehber.
Web Sayfa Hızı: Yükleme Süresini Hızlandırma Rehberi
Web sayfa hızını lazy load, minify ve caching ile artırın; Core Web Vitals'ı iyileştirip yükleme süresini saniyeler değil milisaniyeler yapın.
CSS Dark Mode: prefers-color-scheme ve Toggle Rehberi
CSS dark mode'u CSS değişkenleri, prefers-color-scheme ve küçük bir toggle ile nasıl kurarsın? Flicker'sız, kalıcı tema rehberi.
Three.js Animasyon: Canlı 3B Sahne Yapımı
Three.js animasyon temelleri: sahne, kamera, render döngüsü ve dönen nesnelerle adım adım canlı bir 3B sahne kurun.
Three.js Giriş: Tarayıcıda İlk 3B Sahne
Three.js giriş rehberi: WebGL'in ne olduğunu öğren ve sahne, kamera, renderer ile tarayıcıda ilk dönen 3B küpünü oluştur.
Web Erişilebilirlik: Klavye, ARIA ve Kontrast Rehberi
Web erişilebilirlik temelleri: klavye gezinmesi, doğru ARIA kullanımı ve WCAG kontrast oranlarıyla herkesin kullanabileceği arayüzler.
CSS Değişkenleri: Tema ve Tekrar İçin Pratik Rehber
CSS değişkenleri ile tema kurmayı, renkleri tek yerden yönetmeyi ve tekrarı azaltmayı gerçek örneklerle öğrenin.
CSS Media Query Rehberi: Responsive Tasarım
CSS media query ile mobil öncelikli breakpoint stratejisi kurmayı, en sık hataları ve modern responsive tekniklerini pratik örneklerle öğren.
CSS Animasyon: transition ve keyframes rehberi
CSS animasyon temelleri: transition ile akıcı geçişler, @keyframes ile hareket, performans ipuçları ve gerçek örnekler.
CSS Grid ile Modern Sayfa Düzeni Rehberi
CSS Grid ile iki boyutlu, esnek ve bakımı kolay sayfa düzenleri kurmayı satır/sütun şablonlarıyla adım adım öğren.
CSS Flexbox ile Hizalama ve Düzen
CSS Flexbox temellerini öğren: ana eksen ve çapraz eksen, justify-content, align-items, gap, flex-grow/shrink/basis ve gerçek düzen kalıpları.