HTML
Hydration hooks
İstemci tarafı framework'ler için id ve data-* köprüsü yazarsın.
Hydration hook nedir?
Bir sayfa sunucuda kurulup tarayıcıya geldikten sonra, JavaScript bazen bu HTML'i canlandırıp etkileşimli hale getirir. Bu adıma hydration denir. JavaScript'in tutacağı noktalara da hydration hook (köprü) denir: genelde id ve data-* öznitelikleri bu işi görür.
Örneğin sunucu <div id="tabs"> gönderir; JavaScript bu id'yi bulur ve sekme davranışını bağlar. Yine <button data-target="#profile"> düğmesi, hangi paneli açacağını data-target ile bildirir. Bu köprüler sayesinde HTML önce, davranış sonra gelir.
id ve data-* birlikte
Hydration hook'larında iki öznitelik farklı işler yapar. id tekil bir nokta seçer: sayfada bir kez bulunur, JavaScript onu doğrudan yakalar. data-* ise bağıntı taşır: bir düğmenin hangi paneli açacağını, bir kartın hangi kaydı temsil ettiğini söyler.
İkisini birlikte kullanmak yaygındır. Örneğin <div id="profile-panel" data-role="panel"> hem tekil bir nokta hem de bir rol taşır. Dikkat: id her sayfada bir kez geçer; çoğaltma. data-* ise istediğin kadar öğeye aynı adla verilebilir.
Erişilebilir hook'lar
Hook'lar yalnızca JavaScript için değil, erişilebilirlik için de iş görür. id, <label for> ve aria-labelledby gibi ilişkilerin temelidir. <button aria-controls="profile-panel"> düğmesinin hangi paneli yönettiğini hem ekran okuyucuya hem JavaScript'e bildirir.
Yani iyi bir hook, birden çok amaca hizmet eder: JavaScript'i bulur, ekran okuyucuya ilişkiyi açıklar, test yazarken de sabit bir nokta verir. Böylece HTML hem canlanır hem de erişilebilir kalır. Hook'u yazarken bu üç amacı birlikte düşün.
Uygulama Bir sekme iskeleti yaz
Body içine bir sekme iskeleti yaz: bir <div id="tabs"> kökü, içinde data-target="#panel-profil" özniteliği ve dolu metni olan bir <button>, ardından id="panel-profil" özniteliğine sahip bir <section>. Section içinde dolu bir <h2> olsun. Button'ın aria-controls özniteliği de panel-profil değerini taşısın.
Örnek çözümü göster
<body>
<div id="tabs">
<button data-target="#panel-profil" aria-controls="panel-profil">Profil</button>
<section id="panel-profil">
<h2>Profil Bilgisi</h2>
</section>
</div>
</body>
Kendini test et
-
Hangisi iyi bir hydration hook'tur?
- Rastgele bir sınıf adı
- Yinelenen bir metin
- Bir renk kodu
- Sayfa içinde tekil bir id
Cevabı göster
Sayfa içinde tekil bir id — Doğru. Tekil id, JavaScript'in tam noktayı bulmasını sağlar.
-
Hook cümlesini tamamla
<p>JavaScript, sunucudan gelen ____ ile köprüyü kurar.</p>
Cevabı göster
<p>JavaScript, sunucudan gelen id ve data-* ile köprüyü kurar.</p>
-
Hook'u rolüyle eşleştir
- id
- Tekil nokta seçer
- data-target
- Hedef öğeyi işaret eder
- data-action
- Yapılacak işi taşır
- data-state
- Durum bilgisini taşır
Sıradaki ders: Noscript ve progressive
