Ana içeriğe geç

Blog

React, Next.js, TanStack ve frontend mimarisi üzerine teknik yazılar. RSS

2026

Erişilebilirlik Genelgesi: Frontend için WCAG 2.2 Rehberi

2025/10 sayılı genelge kimleri kapsıyor, A seviyesi ne istiyor ve WCAG 2.2'nin frontend'e dokunan yenilikleri neler? Kaynaklarıyla topladım.

CSSHTMLFrontend

Barrel File: index.ts Dosyası Gerekli mi?

Barrel file'lar import yollarını kısaltıyor ama modül grafiğini şişiriyor. Atlassian, Vercel ve TkDodo'nun ölçümlerine bakıp fikrimi neden değiştirdim.

TypeScriptFrontend

Kişisel Site Denetimi: Ölçerek Düzelttiklerim

Sitemi Claude Code ile denetleyip ölçerek düzelttim: koyu temada beyaz ekran, gereksiz byte'lar, llms.txt ve kırmızı CI.

FrontendSite Yenileme

Canonical ve Yönlendirme: Lighthouse'ın Görmediği SEO Hatası

Lighthouse SEO puanım 100 iken canonical adresim başka bir adrese yönleniyordu. Sorunu, Google için anlamını ve 307 ile 308 farkını anlattım.

FrontendSite Yenileme

ViraStack Academy: Frontend için Ücretsiz Rehberler

Temellerden yapay zekâya, resmi dokümanlardan süzülmüş ücretsiz frontend rehberleri. Hangi sırayla ne öğreneceğini gösterir.

ViraStackReactYapay Zekâ
İnteraktifMedium

ViraStack Password: Erişilebilir Şifre Görünürlüğü

Şifre göster/gizle davranışını erişilebilir varsayılanlarla sunar; ikon veya metin etiketleriyle özelleştirilebilir.

ViraStackReact
İnteraktifMedium

ViraStack Mask: React Hook Form için Input Maskeleme

Kart, telefon, IBAN ve TCKN gibi alanlar için hazır maske ve doğrulama sunar; React Hook Form ile formatlı görünümü ham form state'inden ayırır.

ViraStackReact
Medium

ViraStack Start (CLI): Next.js ve TanStack Start Şablonları

Tek komutla üretime hazır, AI kurallarıyla donatılmış Next.js ve TanStack Start projeleri oluşturun.

ViraStackNext.js
Öne çıkanMedium

TanStack Start mı, Next.js mi? 2026 Karşılaştırması

RSC-first Next.js ile tip güvenli TanStack Start arasında kazanan değil; mental model, olgunluk ve trade-off üzerinden bir karşılaştırma.

Next.jsTanStack
Öne çıkanMedium

Feature-Driven Proje Yapısı

Projeler büyüdükçe yönetilemez hale gelen klasör yapılarına karşı, kodu işlevsel özelliklere göre gruplayan feature-driven mimari yaklaşımı.

React

Zustand ve React Context

Global Zustand store'larının sınırlamalarını aşmak için React Context ile entegrasyonu ve encapsulated state yönetimi.

React
Öne çıkan

TanStack Router ve Query'yi Birlikte Kullanmak

TanStack Router loader cache'i ile TanStack Query'nin rollerini ayırır; loader–Query entegrasyonunu ve hangi verinin nereye konması gerektiğini açıklar.

TanStack