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 sám ju pridá. Znie to banálne. V praxi je to rozdiel medzi dvoma sekundami a kliknutím na „skúste to znova“.

V formulári na skracovanie linku napíšete allegro.pl. Väčšina skracovačov vám povie, že toto nie je správne URL a bude vás nútiť zadať to znova s https:// na začiatku. cutty.dev jednoducho sám pridá https:// a pokračuje.

To znie ako funkcia, ktorá si sotva zaslúži spomienku. V praxi je to rozdiel medzi:

  • "vložil som, mám krátky odkaz, zatváram okno" (2 sekundy)
  • "vložil som, chyba, čítam správu, pridávam https, ešte raz, mám odkaz" (15-20 sekúnd)

Pomnož početkrát v mesiaci, kedy vkladáš URL, plus frustráciu z čítania chyby, plus moment „ah áno, true protokol“. Drobnosť, ktorá sa meria minútami za mesiac na osobu.

Čo presne robí cutty.dev

Vložili ste text do formulára. Pred odoslaním na server JavaScript kontroluje, či nezačína nejakým protokolom (http://, https://, ftp://, mailto: atď.). Ak nezačína — systém predpokladá, že ide jednoducho o doménu bez protokolu, a pridá https:// na začiatok.

Čiže:

  • allegro.pl → https://allegro.pl
  • github.com/twoj-profil/projekt → https://github.com/twoj-profil/projekt
  • www.gazeta.pl → https://www.gazeta.pl

A ako má niečo už protokol (aj keď je nesprávny), systém to necháva tak, ako je, a pokračuje ďalej v kontrole:

  • http://example.com → zostáva http://example.com (allowed)
  • ftp://example.com → odmietnuté (iba http/https)
  • javascript:alert(1) → odmietnuté (XSS protection)

Prečo to mám ja, a ostatní nie

Väčšina skracovačov má štandardnú validáciu URL cez new URL(string). Konstruktor URL v prehliadači/JavaScript je strict — ak chýba protokol, vyhodí chybu. Predvolený output pre new URL("allegro.pl") je TypeError.

To je správne správanie pre väčšinu aplikácií. Ale pre formulár na skracovanie odkazov, kde používateľ vkladá URL skopírované z adresnej riadky alebo z inej aplikácie, je táto prísnosť prekážkou namiesto pomoci.

Riešenie zaberá päť riadkov JavaScriptu:

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

Päť riadkov kódu, niekoľko sekúnd menej frustrácie na používateľa za deň. Neviem, prečo to väčšina trhu nerobí. Možno preto, že „standardne“ znamená „takto funguje URL constructor“.

Drobné detaily v UX sú neproporcionalne dôležité

cutty.dev má niekoľko takýchto vecí, ktoré nie sú v žiadnom feature liste, pretože každá zvlášť znie banálne:

  • Trim whitespace pred validáciou — vložený URL s medzerou na konci nespôsobuje chybu
  • Hash zachovaný — https://example.com/page#section si ponecháva #section po skrátení
  • Query strings zachované — ?utm_source=test prechádza bez odrezania
  • Automatic protocol upgrade — z http:// na https://, ak zdrojové URL podporuje TLS (plánované, ešte nie LIVE)
  • IDN domains — źdźbło.pl sa automaticky konvertuje na punycode
  • Polské znaky v slug — automaticky nahradzované ASCII pri vytváraní vlastného konca (różowy-link → rozowy-link)
  • Detect dangerous protocols — javascript:, data:, file:, mailto: odmietnuté s konkrétnou správou

Každý z týchto detailov šetrí niekomu 5-30 sekúnd a okamih podráždenia. Spolu to predstavuje rozdiel medzi „mám rád túto aplikáciu“ a „funguje to OK“.

Čo ďalej s UX detailov

Zoznam vecí, ktoré chcem urobiť v budúcnosti:

  • Smart paste — zistite, keď používateľ vloží text obsahujúci URL medzi iné slová, a vytiahnete samotné URL
  • Bulk paste — vložený zoznam URL (jeden na riadok) vytvorí viac krátkych odkazov naraz
  • Suggested slugs — na základe názvu cieľovej stránky navrhne 3 značkové koncovky na výber
  • Auto-OG preview — zobrazte náhľad Open Graph kariet okamžite po vložení URL, ešte pred kliknutím na skrátenú dennú časť

Každý z týchto je tiež „päťriadková funkcia, ktorá vyzerá ako nič“. Všetko spolu sa líši medzi nástrojom, ktorý je OK, a nástrojom, ktorý chceš používať každý deň.

Skús to sám

Vlož niečo — allegro.pl alebo github.com alebo news.ycombinator.com. Systém si sám pridá protokol a pôjde ďalej. Bez čakania, bez chyby, bez "skúste to znova".

Ak ťa tento typ detailu UX zaujíma — daj vedieť, ktorým smerom pokračovať ďalej. hello@cutty.dev.