Prejsť k obsahu
cutty.dev
All posts

Auto-prefix URL — maličkosť, ktorá šetrí minúty

cutty.dev rozpozná, keď vložíš adresu bez https://, a automaticky ju pridá. Znie to banálne. V praxi je to rozdiel medzi dvoma sekundami a kliknutím na „skúste to znova“.

Do formulára napíšete allegro.pl. Kliknete. A čo?

Vo väčšine skracovačov dostanete v tomto momente chybovú správu. Niečo ako „toto nie je správna URL adresa“. Pretože chýba https:// na začiatku. Takže sa vrátiš späť, dopíšeš protokol, klikneš ešte raz a až teraz máš svoj krátky odkaz.

cutty.dev to nerobí. Jednoducho si sám prilepí https:// a ide ďalej, akoby sa nič nestalo.

Viem, ako to znie. Ako funkcia, ktorá si sotva zaslúži odsek, nehovoriac o celom príspevku. A predsa tu sedím a píšem o tom, pretože práve táto drobnosť je pre mňa malým manifestom toho, ako vôbec premýšľam o budovaní nástroja auto-prefix URL a celej zvyšky tých neviditeľných uľahčení.

Dve sekundy proti dvadsiatim

Poďme na to. Skutočne, na číslach, lebo inak je to len reč.

Prvá cesta: vložíš, máš odkaz, zatvoríš okno. Dve sekundy. Možno tri.

Druhá cesta: vložíš, chyba, čítaš správu (sekunda či dve, aby si pochopil, o čo ide), dopíšeš protokol, klikneš ešte raz, až teraz odkaz. Pätnásť, dvadsať sekúnd. Plus tá malá chvíľa podráždenia, to tiché „ach áno, protokol“, ktoré samo o sebe nič nestojí, ale narastá.

A teraz vynásob tým, koľkokrát za mesiac vkladáte nejakú adresu. U mňa je to desiatky. U niekoho, kto spravuje odkazy profesionálne — stovky. Nájde sa, že tá táto „takmer nepodstatná“ drobnosť sa odkladá na minúty mesačne. Na osobu.

To je práve tá aritmetika, ktorú väčšina ľudí vynecháva, pretože každý jednotlivý prípad sa zdá byť príliš malý na to, aby sa oň starali.

Čo tam vlastne sedí pod povrchom

Mechanizmus je banálny a vôbec to neukrývam. Vložíte text do poľa. Skôr než sa čokoľvek odoslanie na server, kúsok JavaScriptu skontroluje, či to, čo ste napísali, nezačína nejakým protokolom — http://, https://, ftp://, mailto:, čokoľvek. Ak nezačína, systém predpokladá, že máte na mysli obyčajnú doménu, a prilepí https:// na začiatok.

V praxi:

  • allegro.pl sa mení na https://allegro.pl
  • github.com/twoj-profil/projekt na https://github.com/twoj-profil/projekt
  • www.gazeta.pl na https://www.gazeta.pl

A ak tam protokol už je, aj keby bol zvláštny, systém ho neprahne prepísať. Necháva ho a pokračuje v kontrole, čo s ním ďalej robiť. http://example.com prechádza (povolené). ftp://example.com ide do koša, pretože akceptujeme len http a https. A javascript:alert(1) vypadáva okamžite, pretože to nie je adresa, ale pokus o vstreknutie niečoho hnusného (klasický XSS, ďakujeme, nie).

Prečo to mám ja, a polovica trhu nie

Tu sa to deje zaujímavé, pretože odpoveď je trochu smiešna.

Standardný spôsob validácie adresy v prehliadači je konštruktor new URL(string). A tento konštruktor je tvrdý. Kompromisom neustupujúci. Ak chýba protokol — vyhodí chybu. new URL("allegro.pl") ti jednoducho vráti TypeError a to je všetko.

A vieš čo? Toto je správne správanie. Pre obrovskú väčšinu aplikácií je to presne to, čo chceš. Ale pri formulári na skracovanie odkazov, kde človek kopíruje adresu z panely prehliadača alebo z niečího správy, sa táto prísnosť mení zo výhody na prekážku. Zrazu nástroj, ktorý ti má šetriť čas, ti pripomína opraviť niečo, čo predsa doskonale rozumie.

Obchádzanie tohto je doslova niekoľko riadkov:

function sanitizeUrl(input) {
  const trimmed = input.trim();
  const hasProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed);
  const normalized = hasProtocol ? trimmed : "https://" + trimmed;
  // dalej leci normalna walidacja przez new URL(normalized)
}

Päť riadkov. Pätnásť sekúnd menej trenia denne pre každého, kto vkladá adresy. Úprimne neviem, prečo to nie je štandardom všade. Podozrievam, že ide o to, že „URL constructor takto jednoducho funguje“ a nikomu sa do toho nechcelčka dotknúť. Inertia, nie zlý úmysel.

Malá digresia o tom, čo znamená „standardne“

Bo táto história s new URL() je skvelým príkladom niečo širšieho. Mnohé veci v softvére, ktoré sa považujú za „tak sa to robí“, sú v skutočnosti len „tak to vyšlo z predvolených nastavení nejakej knižnice, ktorú nikto nespochybňoval“. Strict mode konštruktora nie je rozhodnutím dizajnérov cutty ani konkurencie — je to rozhodnutie autorov špecifikácie URL, prijaté v úplne inom kontexte, pre úplne iné použitia.

A potom celý trh dziedzíci túto predvolenú voľbu a nazýva ju „štandardom“. Mám pocit, že najlepšie produkty vznikajú presne na tých miestach, kde sa niekto zastavil a opýtal: chvíľu, slúži toto správanie práve môjmu používateľovi, alebo len mojej knižnici? Najčastejšia odpoveď znie: knižnici. A vtedy sa oplatí piatimi riadkami prejsť na stranu človeka.

Týchto drobností je viac, než sa vidí

Auto-prefix je len jedným z mnohých takýchto prvkov, ktoré nenajdete v žiadnom zozname funkcií. Pretože keby sa tam zapísali, každý zvlášť by vyzeral smiešne malý:

  • orezávanie medzier pred validáciou, aby náhodná medziera na konci vloženého adresy všetko nepokazila
  • zachovávanie kotvy, teda #section v https://example.com/page#section nezaniká po skrátení
  • parametre dopytu (?utm_source=test) prechádzajú v celku, nič sa cestou neorezáva
  • domény s poľskými znakmi, źdźbło.pl, automaticky prechádzajú na punycode
  • poľské písmená vo vlastnej koncovke sa menia na ASCII (różowy-link sa stáva rozowy-link)
  • nebezpečné protokoly — javascript:, data:, file: — blokované s konkrétnou, zrozumiteľnou správou

(Je ešte plánované automatické presmerovanie http:// na https://, keď cieľový server podporuje šifrovanie. Toto práve ešte nefunguje v praxi, takže to nebudem predstierať.)

Každý z týchto detailov niekomu šetrí päť, desať, tridsať sekúnd a jedno povzdychnutie. Po jednom nič. Spolu je to rozdiel medzi „funguje OK“ a „rada to používam“.

Čo by som chcel ešte dopísať

Zoznam prianí do budúcnosti, pretože premýšľanie o tom mi jednoducho robí radosť:

  • inteligentné vkladanie — zobraziť adresu skrytú uprostred vety a vytiahnuť samotný URL medzi slovami
  • hromadné vkladanie — zoznam adries, jedna na riadok, a z každej okamžite samostatný krátky odkaz
  • navrhované koncovky — na základe názvu cieľovej stránky navrhnúť tri typické slugy na výber
  • Open Graph náhľad okamžite po vložení, ešte predtým, než kliknete na "skrátiť"

Každý z týchto je znova „piatiletá funkcia, ktorá vyzerá na nič“. A všetci spolu? To je práve tá hranica medzi nástrojom, ktorý je v poriadku, a takým, po ktorom siahate každý deň bez zaváhania. Ak chcete vidieť, ako to funguje teraz, vložte do cutty.dev čokoľvek bez protokolu — allegro.pl, github.com, news.ycombinator.com — a uvidíte, že vám nič nestavia do cesty.

Na záver, trochu osobne

Dlho som si myslel, že produkty vyhrávajú veľkými funkciami. Tým jedným efektívnym niečím, čo sa dá ukázať na slajde a o ktorom ľudia budú písať. A áno, niekedy to tak je.

Čím dlhšie budujem cutty, tým silnejšie cítim, že lojalita používateľa vzniká inde — v tých stovkách mikrosekúnd, ktoré si nikto uvedomele nevšimne. Nepamätáš si, že nástroj ti sám pridal https://. Pamätáš si len celkový dojem, že sa to "nejako dobre používa", "neštve". Tento dojem nevzniká z ničoho. Skladá sa z desiatok päťriadkových rozhodnutí, ktoré by nikto jednotlivo nezobudoval pred sám sebou ako "hodné času".

Možno práve v tom spočíva remeslo. Nie v tom jednom veľkom pohybe, ale v vytrdalosti, aby si čas za čas stál na strane človeka pri formulári — aj keď ide o mizerné dve sekundy. A ty? Čo ťa naposledy v nejakej nástroji naštvalo tak drobne, až je hanba priznať? Pretože zvyčajne práve tam čaká tá najlepšia práca, ktorú treba urobiť.