Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Material'ı Özelleştirmek ve Sürümler: Token Override'ları, Density, CDK ile Kendi Component'in ve Material 12'den 22'ye
Material'ı token'larla özelleştir: bir bölgeyi yeniden boyamak için class içinde yalnız color veren mat.theme 4.2 kB ekledi, eski all-component-themes alışkanlığı 53 kB; overlay'ler tema class'ının dışında kaldığı için class'ı overlay container'a da ver. Bookstore'un kurumsal portalında density ölçeğini, CDK Menu ile bir split button ve harness'ını, Material 12'den 22'ye değişimi ve eski .mat-* override'larının neden sıfır element'e uyduğunu ölçüyoruz.
CDK Scrolling ve Layout: Virtual Scroll ile Uzun Katalog, BreakpointObserver, Clipboard ve Diğer Yardımcılar
CDK virtual scroll 5.000 satırlık listede DOM'da yalnız 15 satır tuttu ve sayfayı 249 ms yerine 38 ms'de çizdi; bedeli Ctrl+F'in görünmeyen satırları bulamaması ve satır yüksekliğinin sabit olması gerekmesi. Bookstore'un stok listesinde virtual scroll, content-visibility ve düz listeyi, değişken yükseklikteki zıplamaları, BreakpointObserver ile menü ve bottom sheet seçimini, clipboard ve CdkListbox'ı ölçüyoruz.
CDK Drag and Drop: cdkDrag, cdkDropList, Sıralanabilir Liste ve Listeler Arası Taşıma
CDK Drag and Drop'ta cdkDropList ve cdkDrag sürüklemeyi yönetir, array'i sen değiştirirsin: moveItemInArray ve transferArrayItem'ı kopyaya uygulayıp signal'e set et, satırları kimlikle track et. CDK klavyeyle sıralama sunmaz; Bookstore'da okuma listesi ve kurumsal sevkiyat planına buton alternatifi ekliyor, taşınan satırda kaybolan focus'u, tutamak ve touch-action ile dokunmatik davranışı ve 500 satırda yeniden render maliyetini ölçüyoruz.
CDK Overlay ve Portal: Kendi Açılır Panelini Kurmak, Position Strategy'leri ve CSS Anchor Positioning ile Karşılaştırma
CDK Overlay'de paneli createOverlayRef ve ComponentPortal ile aç, FlexibleConnectedPositionStrategy'ye fallback pozisyonlar ve reposition scroll strategy'si ver, DestroyRef ile dispose et: etmeyince panel ve backdrop'u sayfa değiştikten sonra ekranda kaldı. Bookstore'da hızlı önizleme ve hesap paneli kuruyor; Tab ile focus kaybını, eager import'un 14.5 kB maliyetini ve aynı paneli popover + CSS anchor positioning ile ölçüyoruz.
Dialog, Snackbar ve Bottom Sheet: MatDialog ile Veri Alışverişi, afterClosed, CDK Dialog ve Native dialog Karşılaştırması
MatDialog'a yalnız id ver, kararı afterClosed() ile al ve closeOnNavigation: 'url-change' kullan: varsayılan değer yalnız geri/ileri tuşunda kapattığı için kod ile yapılan navigation'da dialog açık kaldı. Bookstore'da sipariş iptal dialog'u, Undo snackbar'ı ve toplu işlem bottom sheet'i kuruyor; değersiz mat-dialog-close'un '' döndürmesini, onaydan sonra focus kaybını, snackbar'ın initial bundle'a 34 kB eklemesini ve MatDialog, CDK Dialog ile native dialog farkını ölçüyoruz.
Material Veri Tablosu: mat-table, MatSort, MatPaginator, Filtre ve Server-side Sayfalama
Büyüyen bir listeyi MatTableDataSource ile tarayıcıda değil, sort, filtre ve sayfayı URL'de tutup API'de sayfalayarak göster: Bookstore'un 10.000 siparişi tarayıcıda 59 ms'de sıralanıyor ama 1,5 MB'lık cevap 10 Mbit/s'te 1,26 saniye sürüyor. URL'de olmayan param'ın input'a undefined gelmesini, filtre sonrası sayfayı sıfırlamamanın etkisini, linkedSignal ile yüklenirken boş tabloyu önlemeyi ve SelectionModel'i computed() içinde okumanın hatasını ölçüyoruz.
Material Form Component'leri: mat-form-field, matInput, mat-select, mat-autocomplete ve mat-datepicker
mat-error, varsayılan ErrorStateMatcher yüzünden yalnız alan touched olunca ya da submit sonrası görünür; Signal Forms'ta ShowOnDirty matcher'ı boş zorunlu alanın hatasını hiç göstermez. Bookstore'un kurumsal sipariş form'unda compareWith'siz mat-select'in boş görünmesini, debounce ile 8 request'in 1'e inmesini, native date adapter'ın 05.12.2026'yı 12 Mayıs okumasını, date-fns ile Türkçe tarihi ve 15 Aralık'ın UTC'de 14'üne kaymasını ölçüyoruz.
Angular Material ve CDK'ya Giriş: ng add, Component Kataloğu, M3 Teması ve Material mı, CDK mı, Angular Aria mı?
Material component'lerini tek bir shared module'den değil, standalone class olarak import et: Bookstore'un yönetim panelinde 35 module'ü export eden shared dosya lazy chunk'ı 173 kB'tan 682 kB'a çıkardı ve derleyici uyarmadı. ng add'in neleri değiştirdiğini, marka renginden M3 teması ve density ayarını, toolbar ve sidenav ile responsive panel iskeletini, iç class override'ının neden kırılgan olduğunu ve icon font'unu 325 KB'tan 1,4 KB'a indirmeyi ölçüyoruz.
Blazor'da .NET 8'den .NET 11'e Gelenler: Web App Modeli, RendererInfo, PersistentState, NotFound ve .NET 11 Yenilikleri
.NET 8 Blazor'u component başına render mode'lu tek bir Web App modeline taşıdı; .NET 9 ve 10 bu modelin boşluklarını kapattı, .NET 11 ise Static SSR'ı, URL tabanlı QuickGrid'i ve circuit auto-pause'u getirdi. Bookstore panelini .NET 11'e yükselttik: [ValidatableType] için bir using, yeni BL0013/BL0016 analyzer'ları, UseWebAssemblyDebugging'in kalkması ve .NET 10 LTS ile .NET 11 STS'nin aynı gün bitmesi.
Blazor'u Production'a Taşımak: WASM Boyutu, Trimming, AOT, Circuit Kaynakları, Reconnection UI ve Hosting
Blazor'u production'a taşırken iki maliyet ölçülür: WebAssembly'de ilk ziyarette inen veri (Bookstore panelinde 2,3 MB, AOT ile 4,3 MB ama CPU işinde yaklaşık altı kat hızlı) ve Server'da circuit başına bellek (stok sayfasında yaklaşık 800 KB, kapanan sekme üç dakika bellekte). Yazıda trimming ve relinking, fingerprint'li cache, CircuitOptions, ReconnectModal, nonce'lu Content Security Policy ve Nginx arkasında WebSocket ayarı gerçek ölçümlerle.
Blazor'da Authentication ve Authorization: AuthenticationStateProvider, AuthorizeView, Render Mode'a Göre Auth ve Passkey'ler
Blazor'da kullanıcı AuthenticationStateProvider'dan gelir: InteractiveServer'da circuit kurulurken cookie'den alınır ve sabit kalır, WebAssembly'ye ise yalnız name ve role claim'leri serileştirilir; bu yüzden AuthorizeView bir UI kararıdır, güvenlik endpoint'te ve API'de sağlanır. Bookstore panelinde Identity ile login, fallback policy, rol bazlı fiyat düzenleme, panelin imzaladığı token'larla korunan API ve .NET 10 template'indeki passkey desteği.
Blazor'da JavaScript Interop: IJSRuntime, Collocated JS Module, DotNetObjectReference ve .NET 10 Yenilikleri
Blazor'da JS, component'in yanındaki .razor.js module'ü olarak import edilip IJSObjectReference ile çağrılır; JS'ten .NET'e dönüş DotNetObjectReference ve [JSInvokable] ile yapılır, prerendering'de JS olmadığı için çağrılar OnAfterRenderAsync'te başlar. Bookstore panelinde Chart.js ile satış grafiğini .NET 10'daki InvokeConstructorAsync, GetValueAsync ve SetValueAsync ile kuruyor, ISBN kopyalama düğmesini, JSDisconnectedException'ı ve 32 KB mesaj sınırını gerçek çıktılarla gösteriyoruz.