Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Günlük Utility Aileleri 2: Typography, Renk, Border, Shadow, Effect, Transform ve Form Utility'leri, typography ve forms Plugin'leri
Tailwind v4'te border ve ring varsayılan olarak currentColor kullanır, ring 1px'tir, scale/rotate/translate bağımsız transform property'lerine yazar ve @tailwindcss/forms eklendiğinde accent-* artık checkbox'ı boyamaz. Bookstore'un kitap kartında hover gölgesi ve kapak scale'i, stokta yok durumunda grayscale, checkout form'unda native kontrollerle forms plugin'ini ve CMS gövdesinde prose class'ını Playwright ile ölçüyoruz.
Günlük Utility Aileleri 1: Layout, Flex, Grid, Spacing, Sizing ve Position Utility'leri
Tailwind'in layout utility'leri CSS'e bire bir karşılık gelir ve sayısal değerler tek bir --spacing değişkeninden türer; zor kısım hangi CSS'i seçeceğini bilmek. Bookstore'un katalog grid'ini, kitap kartını ve iki kolonlu sepet sayfasını hem utility'lerle hem düz CSS ile kuruyor, iki sayfanın kutularını üç genişlikte Playwright ile karşılaştırıyor (fark 0px), space-x'in wrap olan satırlardaki hatasını, eksik min-w-0'ı ve auto-fill ile auto-fit farkını ölçüyoruz.
Tailwind'de Ölçek, Bakım ve Sürümler: Component Pattern'leri, Class Sıralama, tailwind-merge ve v3'ten v4'e Migration
Çakışan iki utility'den class attribute'unda sonra yazılan değil, CSS'te sonra gelen kazanır; bu yüzden component'ler variant'ları tam adlı bir class map'le vermeli ve dışarıdan gelen class'ları tailwind-merge ile birleştirmelidir. bookstore-web'in butonunda bunu kuruyor, tailwind-merge'ün özel token tuzağını, Prettier ile sıralamayı, npx @tailwindcss/upgrade'in v3 sayfasında neyi çevirip neyi kaçırdığını Playwright ile ölçüyor ve v4.0–v4.3 sürüm haritasını çıkarıyoruz.
Angular ile Tailwind: ng add tailwindcss, Component Style'larında @reference, Dinamik Class'lar ve Headless Component'ler
Angular'da Tailwind global styles.css'te çalışır; component CSS'leri ayrı işlendiği için @apply orada @reference ister ve her component'e yedek değerler ile @property blokları taşır. bookstore-web'de ng new --style tailwind ve ng add'in ne yaptığını, 40 component'le @reference'ın bundle ve build bedelini, SCSS'te Tailwind syntax'ının neden kırıldığını, signal'larla tam adlı dinamik class'ları ve Angular Aria Listbox'ı aria-selected ile stillemeyi gösteriyoruz.
Variant'lar, Özel Utility'ler ve Modern CSS: group/peer, data-*/aria-*, @container, starting:, @utility ve @variant
Tailwind'de her variant bir selector ya da at-rule ekler; group-hover iç içe group'larda dıştaki hover'a da tepki verir, bu yüzden group/card gibi isimli group gerekir. Bookstore'un filtre ve kart örneklerinde peer, has-*, not-*, in-*, aria-expanded ve data-[state] ile headless stil, @container ve v4.3'ün @container-size'ı, starting: ile popover animasyonu, logical ve scrollbar utility'leri, @utility (--default), @variant ve @custom-variant'ı Playwright ile ölçüyoruz.
Theme ve Design Token'lar: @theme Namespace'leri, Özel Renk/Font/Breakpoint ve Dark Mode
@theme bloğundaki her değişken hem bir utility hem de :root'ta bir CSS değişkeni üretir; değişkenin namespace'i hangi utility'nin doğacağını belirler. Bookstore.Web'de marka token'larını tanımlıyor, varsayılan temayı genişletmek ile --color-*: initial ile sıfırlamayı karşılaştırıyor, @theme inline'ın kurum bazlı renkte neden gerektiğini ve @theme static'i ölçüyor, semantic değişkenler ve head script'iyle FOUC'suz dark mode kuruyor, DTCG token'larından Style Dictionary ile @theme üretiyoruz.
Tailwind v4 Kurulumu ve CSS-first Configuration: @import "tailwindcss", @source ve Oxide Engine
Tailwind v4'te configuration CSS'te durur: @import "tailwindcss" theme, Preflight ve utility'leri üç layer'a koyar, Oxide engine kaynakları düz metin olarak tarar ve yalnız tam adını gördüğü class'ları üretir. Bookstore.Web'de CLI ile input.css → site.css zincirini --watch ve --minify ile kuruyor, BeforeTargets="Build" yüzünden temiz publish'te site.css'in neden 404 döndüğünü, .gitignore'un taramaya etkisini, @source not/inline'ı ve --cat-color ile dinamik renkleri gösteriyoruz.
Utility-first Yaklaşım: Tailwind Neyi Çözer, Bedeli Nedir ve Ne Zaman Kullanılmamalı?
Utility-first, stili component'in içinde token'a bağlı küçük class'larla yazar; CSS boyutu component sayısıyla değil farklı class sayısıyla büyür, bedeli uzun class listeleri ve öğrenme eğrisidir. Bookstore'un üç component'inde iki modelin CSS ve HTML maliyetini ölçüyor, tekrarı Razor partial ile çözüyor, @apply'ın neden son çare olduğunu, CMS içeriğinde Preflight'ın etkisini ve layer'sız eski CSS'in utility'leri neden ezdiğini gösteriyoruz.
React 18'den 19.3'e: Concurrent Rendering, Actions, use(), ref as prop, Activity, useEffectEvent, ViewTransition ve Fragment Ref'leri
React 18 concurrent rendering'in temelini (createRoot, batching, transition'lar), 19 Actions, use() ve ref'in props olmasını, 19.2 Activity ve useEffectEvent'i, 19.3 ise stable ViewTransition ve Fragment ref'lerini getirdi. Bookstore'a ViewTransition ve Fragment ref ekliyor, React Router 8.5'in deprecation'ını uyguluyor ve küçük bir React 18 projesini 18.3 uyarıları, TypeScript codemod'u ve elle düzeltmelerle 19.3'e yükseltiyoruz.
Next.js'e Kısa Bakış: Server Components, App Router, Server Action'lar, Cache Components ve Ne Zaman SPA Yeter?
Next.js, React'i sunucuda çalıştırır: Server Component'ler veriyi doğrudan await eder ve kodları tarayıcıya inmez, Cache Components ile neyin cache'leneceğini 'use cache' ve cacheLife ile sen seçersin, her Server Function ise doğrulama ve yetki kontrolü isteyen public bir endpoint'tir. Bookstore'un kitap detayını Next.js 16.4 ile Partial Prerender olarak sunuyor, curl ile Server Function'ı doğrudan çağırıyor ve SPA'nın ne zaman yettiğini tartışıyoruz.
Bookstore SPA'yı Uçtan Uca Bitirmek: Feature Klasörleri, Authentication, Environment'lar ve Deploy
Bir React SPA'yı production'a hazırlamak, feature sınırlarını lint kuralıyla korumak, VITE_ değişkenlerinin build sırasında bundle'a yazıldığını bilip secret'ı tarayıcıdan uzak tutmak ve oturumu token yerine HttpOnly cookie taşıyan bir BFF'e vermek demek. Bookstore'a ASP.NET Core ve YARP ile küçük bir BFF ekliyor, sign in akışını, SPA fallback'i, cache header'larını, nginx yapılandırmasını ve bundle analizini gerçek çıktılarla gösteriyoruz.
React'te Test: Vitest, React Testing Library ve MSW ile API Mock'lamak
React'i test etmenin pratik yolu, kodu kullanıcı gibi sorgulayan React Testing Library'yi Vite'la aynı config'i kullanan Vitest'le çalıştırmak ve API'yi kodu değiştirmeden network seviyesinde MSW ile taklit etmek. Bookstore'da saf applyChange fonksiyonunu, renderHook ile useDebouncedValue ve useCart'ı, user-event ile BookCard'ı ve memory router'daki gerçek route ağacıyla katalog ve checkout ekranlarını test ediyor; getBy/findBy farkını ve store sızmasını gerçek hata çıktılarıyla gösteriyoruz.