Chris Burnell vo svojom článku opisuje developera, ktorý strávil dva dni písaním vlastného color pickera. Vlastný canvas, vlastná logika pre RGB/HEX prevod, vlastné drag ovládanie kruhu. Vyzeralo to skvele. Problém bol v tom, že prehliadač to isté vie spraviť jedným riadkom:
<input type="color">A nie je to ojedinelý prípad. Je to skôr vzorec správania, ktorý sa v IT — a nielen v IT — opakuje stále dokola.
Skrutkovač, ktorý si niekto vyrobil sám
Predstav si remeselníka, ktorý namiesto toho, aby siahol do kufríka po skrutkovači, si ho začne najprv vyrábať. Vytesá rukoväť, vybrúsi hrot, zakalí ho. O tri dni má funkčný skrutkovač. Susedova dielňa ho má hotový už dvadsať rokov, visí na stene, stačí siahnuť.
Znie to absurdne. Presne to isté sa ale bežne deje pri tvorbe webu. Namiesto toho, aby sme siahli po niečom, čo má prehliadač už vstavané, začneme to stavať od nuly — s vlastným JavaScriptom, vlastným CSS, vlastnými edge-case bugmi, ktoré potom treba mesiace opravovať.
Čo všetko má prehliadač „vo výbave“
Rozbaľovacia sekcia. Namiesto vlastného accordion komponentu s JS listenermi:
<details>
<summary>Viac informácií</summary>
<p>Obsah po kliknutí.</p>
</details>Funguje to hneď, vrátane klávesovej navigácie, ktorú by si inak musel dopisovať ručne.
Slider. Namiesto custom draggable prvku s výpočtom pozície myši:
<input type="range" min="0" max="100">Dátum a čas. Namiesto sťahovania knižnice, ktorá pridá do bundlu desiatky kilobajtov:
<input type="date">Na mobile sa navyše automaticky otvorí natívny kalendár, aký používateľ pozná zo svojho telefónu — nie web widget, ktorý sa mu bude zdať cudzí.
Modálne okno. Namiesto frameworku na modaly len kvôli jednému popupu:
<dialog id="modal">
<p>Obsah dialógu</p>
</dialog>Editovateľný text. Základ, na ktorom stoja aj nástroje ako Notion:
<div contenteditable="true">Klikni a píš.</div>Prečo sa to oplatí
Nejde len o ušetrený čas. Skrutkovač z dielne má aj inú výhodu — je odskúšaný tisíckami ľudí, roky sa ladil, sedí v ruke presne tak, ako má. Presne to platí aj o natívnych HTML prvkoch:
- Fungujú so screen readerom bez toho, aby si musel dolaďovať ARIA atribúty.
- Nepridávajú závislosť, ktorú treba časom aktualizovať kvôli bezpečnostným dieram.
- Vyzerajú a správajú sa „domáco“ na každom zariadení — presne tak, ako to používateľ z iných appiek pozná.
Kedy sa vlastné koleso predsa oplatí
Nie vždy je hotové riešenie tým správnym. Ak potrebuješ presne definovaný vizuál slidera naprieč všetkými prehliadačmi, natívny <input type="range"> ťa v štýlovaní obmedzí. Ak cielia na staršie verzie Safari, niektoré novšie prvky ako <dialog> môžu robiť problémy. A komplexnú logiku — validácie, previazané polia, animácie — HTML samo nikdy nevyrieši, na to tam JavaScript patrí.
Otázka teda neznie „má sa toto robiť vlastnoručne, alebo nie“. Otázka znie: skontroloval som najprv, čo už mám vo výbave?
Rovnako ako pri tom skrutkovači — niekedy sa vlastná verzia oplatí, lebo potrebuješ presne definovaný tvar. Ale to má byť vedomé rozhodnutie, nie dôsledok toho, že si sa ani nepozrel, čo visí na stene.
Inšpirované článkom HTML Can Do That od Chrisa Burnella.
