Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Native Interaktif Element'ler 1: details/summary, dialog, popover ve Invoker Commands
Modal, popover ve accordion artık HTML'de var: Invoker Commands (command/commandfor, Baseline 2025-12) ile dialog ve popover tek satır JavaScript yazmadan açılıp kapanıyor, odak ve inert'i tarayıcı yönetiyor. Bu yazıda Bookstore'un "Kitabı sil" onayını, mini sepetini ve SSS accordion'unu Chromium'da ölçüyor; returnValue tuzağını, requestClose()'u, :open'ı ve Safari'de olmayan closedby, popover="hint" ve hidden="until-found"'ı progressive enhancement olarak ele alıyoruz.
HTML Form'ları 2: Native Validation, Constraint Attribute'ları, :user-invalid ve Server ile İş Bölümü
Tarayıcı required, pattern, min/max ve input type kurallarını JavaScript'siz uygular, ama bu doğrulama kullanıcı deneyimi içindir, güvenlik değil; hata stili için :invalid yerine kullanıcı dokunduktan sonra eşleşen :user-invalid kullanılır. Bu yazıda checkout form'unda native mesajların tarayıcı diline bağlı olduğunu, formnovalidate'i, "Şule"yi reddeden pattern'i ve v flag tuzağını, field-sizing ile büyüyen textarea'yı Chromium ve WebKit'te ölçüyoruz.
HTML Form'ları 1: Input Type'ları, label, fieldset, autocomplete ve inputmode
Erişilebilir ve hızlı doldurulan bir form'un temeli her alanda görünen bir label, doğru input type'ı ve spec'teki autocomplete token'larıdır; posta kodu için type="number" baştaki sıfırı kaybeder, type'ı yazılmamış button ise form'u gönderir. Bu yazıda Bookstore'un checkout form'unu fieldset/legend, inputmode, enterkeyhint, autocorrect (Baseline 2026-09) ve form attribute'uyla kuruyor, her davranışı Chromium'da gerçek bir testle ölçüyoruz.
Metin Semantiği: Heading, Paragraph, List, Link, Button ve Inline Element'ler
Kullanıcıyı başka bir adrese götüren şey a, sayfada bir aksiyon yapan şey button'dır; href="#" ve tıklanabilir div klavyeyle ya hiç ya da yarım çalışır. Bu yazıda strong/em ile b/i farkını, dl ile kitap künyesini, time, abbr, code/kbd/samp, blockquote/q/cite ve figure'ı Chromium'un accessibility tree'sinde görüyor, link ile button farkını gerçek bir klavye testiyle ve target="_blank"'in implicit noopener davranışını iki motorda ölçüyoruz.
Semantic HTML ve Landmark'lar: header, nav, main, article, section, aside, footer ve search
Semantic element'ler accessibility tree'de landmark'a dönüşür; ama adsız section region olmaz, article içindeki header banner olmaz ve section içindeki h1 hâlâ birinci seviyedir. Bu yazıda Bookstore'un kitap detay sayfasını div soup'tan semantic yapıya taşıyor, her adımı Chromium'un accessibility tree'sinden okuyor, section/article/div kararını, search element'ini, tek main kuralını ve outline algoritması olmadan heading hiyerarşisini kuruyoruz.
HTML Nasıl Çalışır? Living Standard, Document Yapısı ve Parser'ın Hatayı Affetmesi
HTML'in sürümü yok: WHATWG'nin sürekli güncellenen Living Standard'ı esas, bir özelliği kullanıp kullanamayacağını ise Baseline söyler. Bu yazıda minimum geçerli document'ı, element/attribute/void element/content model kavramlarını ve parser'ın hatalı markup'ı nasıl sessizce düzelttiğini Chromium ve WebKit'te gerçek DOM çıktısıyla görüyor, hataları Nu Html Checker ile yakalıyoruz.
TypeScript 7 ve Sonrası: Go ile Yazılan Derleyici ve Yeni Varsayılanlar
Go ile yazılan TypeScript 7 derleyicisini, 6.0 ile gelen varsayılanları, 7.0'da kaldırılan ayarları, isolatedDeclarations'ı, TC39 Type Annotations önerisini ve 7.1 betasının getirdiklerini görüyoruz.
JavaScript'ten TypeScript'e Geçiş: checkJs, JSDoc ve Kademeli strict
Bir JavaScript projesini TypeScript'e kademeli geçirmeyi görüyoruz: allowJs, checkJs ve // @ts-check, JSDoc ile tip yazmak, TypeScript 7'deki JSDoc değişiklikleri, kademeli strict ve @ts-expect-error.
TypeScript'te Tip Seviyesinde Programlama: type-challenges Kolay Seviye Çözümleri
type-challenges'ın kolay seviyesinden on soruyu (MyPick, MyReadonly, TupleToObject, First, Length, MyExclude, MyAwaited, If, Concat, Includes) Equal ve Expect ile yazılmış tip seviyesinde testlerle çözüyoruz.
TypeScript'te using ve await using: Symbol.dispose ile Kaynak Yönetimi
TS 5.2 ile gelen using ve await using'in TypeScript tarafını görüyoruz: Disposable type'ları, gereken lib ayarı, derleyicinin kontrolleri, DisposableStack ve tsc'nin ürettiği JavaScript'in Node ile Safari'de ne anlama geldiği.
TypeScript'te Decorator'lar: Standart TC39 Decorator'ları ve context Object'i
TS 5.0 ile gelen standart decorator'ları; method, class, field ve accessor decorator'larını, context object'ini, neden erasable olmadıklarını ve eski experimentalDecorators ayarından farklarını görüyoruz.
TypeScript'te Branded Tipler: CustomerId ile OrderId'yi Karıştırmamak
Structural typing'in aynı şekle sahip ama anlamı farklı değerleri ayıramadığı yerde brand'leri, doğrulama fonksiyonlarıyla brand üretmeyi ve unique symbol ile daha sağlam bir Brand yardımcısı yazmayı görüyoruz.