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.
Lighthouse ile Frontend Performans Denetimi
Lighthouse raporunu doğru okuyup LCP, CLS ve TBT darboğazlarını adım adım gidererek sitenizi nasıl hızlandıracağınızı anlatıyorum.
CSS clamp() ile Akıcı (Fluid) Tipografi Kurmak
CSS clamp() ile ekran boyutuna göre akıcı şekilde ölçeklenen yazı boyutları kurmayı, formülü ve erişilebilirlik tuzaklarını öğrenin.
Sticky Header: Kaydırmada Sabit ve Gizlenen Başlık
Sticky header nasıl yapılır? Kaydırmada sabit kalan, aşağı inerken gizlenip yukarı çıkarken görünen başlık çubuğunu CSS ve JS ile kurma rehberi.
Glassmorphism CSS: backdrop-filter ile Buzlu Cam Efekti
Glassmorphism CSS efektini backdrop-filter, yarı saydam arka plan ve ince kenarlıkla adım adım, performanslı ve erişilebilir şekilde oluşturmayı öğren.
Web Font Optimizasyon: font-display ve FOUT/FOIT
Web font optimizasyon rehberi: font-display, preload, WOFF2 ve subsetting ile FOUT/FOIT yönetip yükleme hızını artırın.
CSS Transform: 2B ve 3B Dönüşümler Rehberi
CSS transform ile translate, rotate ve scale kullanarak GPU hızında, akıcı 2B ve 3B efektleri nasıl yazacağını öğren.
Hamburger Menü Yapımı: Erişilebilir Mobil Menü
Hamburger menü ile erişilebilir, akıcı bir mobil navigasyonu CSS ve JavaScript ile sıfırdan adım adım nasıl yaparsınız?
CSS Specificity: Hangi Kural Kazanır?
CSS specificity nasıl hesaplanır, cascade neye göre karar verir ve !important ile inline stil sıralamayı nasıl bozar? Net örneklerle.
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ı.