Idi na sadržaj
cutty.dev
All posts

Auto-prefix URL — sitnica koja štedi minute

cutty.dev prepoznaje kada zalijepiš adresu bez https:// i sam je dodaje. Zvuči banalno. U praksi, to je razlika između dvije sekunde i klika na 'pokušaj ponovno'.

Unosite u obrazac allegro.pl. Kliknete. I što?

U većini skraćivača u tom trenutku dobivate poruku o pogrešci. Nešto u stilu "ovo nije ispravna URL adresa". Jer nedostaje https:// na početku. Pa se vratite, dodate protokol, kliknete još jednom, i tek tada imate svoju kratku poveznicu.

cutty.dev to ne radi. Jednostavno sam dodaje https:// i nastavlja dalje, kao da se ništa nije dogodilo.

Znam kako to zvuči. Kao značajka koja jedva zaslužuje vlastiti odlomak, a kamoli cijeli unos. Ipak, sjedim i pišem o tome jer je upravo ta sitnica za mene mali manifest onoga kako uopće razmišljam o izgradnji alata auto-prefix URL i ostatka svih tih nevidljivih olakšanja.

Dvije sekunde protiv dvadeset

Prebrojimo. Zaista, na brojevima, jer inače je to samo pričanje.

Prva staza: zalijepiš, imaš link, zatvoriš prozor. Dvije sekunde. Možda tri.

Druga staza: zalijepiš, pogreška, pročitaš poruku (sekunda ili dvije da shvatiš o čemu se radi), dopišeš protokol, klikneš još jednom, tek sada link. Petnaest, dvadeset sekundi. Plus onaj mali trenutak iritacije, onaj tihi "a da, protokol", koji pojedinačno ne košta ništa, ali se nakuplja.

A sada pomnožite to s onim koliko puta mjesečno zalijepite neku adresu. Kod mene je to desetke. Kod nekoga tko profesionalno upravlja poveznicama — stotine. Odjednom se ta sitnica koja je "jedva vrijedna spomena" akumulira u minute mjesečno. Po osobi.

To je upravo ta aritmetika koju većina ljudi zanemaruje jer svaki pojedinačni slučaj izgleda premalo da bi se o njemu brinula.

Što zapravo leži ispod toga

Mehanizam je banalna stvar i to uopće ne skrivam. Zalijepite tekst u polje. Prije nego što bilo što ode na poslužitelj, komadić JavaScripta provjerava počinje li ono što ste upisali nekim protokolom — http://, https://, ftp://, mailto:, bilo što. Ako ne počinje, sustav pretpostavlja da mislite na običnu domenu i dodaje https:// na početak.

U praksi:

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

A ako je protokol već tamo, čak i ako je čudan, sustav ga ne prepisuje. Ostavlja ga i nastavlja provjeravati što dalje učiniti s tim. http://example.com prolazi (dopušteno). ftp://example.com ide u smeće, jer prihvaćamo samo http i https. A javascript:alert(1) izbacuje se odmah, jer to nije adresa, već pokušaj ubrizgavanja nečeg zlonamjernog (klasični XSS, hvala, ne).

Zašto ja to imam, a polovina tržišta ne

Ovdje postaje zanimljivo, jer je odgovor malo smiješan.

Standardni način validacije adrese u pregledniku je konstruktor new URL(string). I taj je konstruktor tvrd. Bez kompromisa. Nema protokola — baca pogrešku. new URL("allegro.pl") vraća ti jednostavno TypeError i to je to.

I znaš što? To je ispravno ponašanje. Za ogromnu većinu aplikacija to je upravo ono što želiš. Ali u obrascu za skraćivanje poveznica, gdje čovjek kopira adresu iz trake preglednika ili iz nečije poruke, ta sirovost pretvara se iz prednosti u prepreku. Odjednom alat koji ti treba štedjeti vrijeme, prisiljava te da ispravljaš nešto što, ipak, savršeno razumije.

Zaobilaženje ovoga je doslovno nekoliko linija:

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)
}

Petak redaka. Nekoliko sekundi manje trenja, dnevno, za svakoga tko zalijepi adrese. Iskreno ne znam zašto to nije standard svugdje. Sumnjam da je stvar u tome što "URL konstruktor jednostavno tako radi" i nikome se nije dalo to dirati. Inercija, a ne loša volja.

Mala digresija o tome što znači "standardno"

Jer ta priča s new URL() odličan je primjer nečeg šireg. Mnogo stvari u softveru koje se smatraju "tako se to radi" zapravo su "tako je ispalo zbog podrazumijevanih postavki neke biblioteke koju nitko nije preispitivao". Konstruktor u strict modu nije odluka dizajnera cutty niti konkurencije — to je odluka autora URL specifikacije, donesena u potpuno drugačijem kontekstu, za potpuno druge primjene.

A zatim cijelo tržište nasljeđuje taj zadani izbor i naziva ga "standardom". Imam dojam da se najbolji proizvodi rađaju upravo na onim mjestima gdje je netko zastao i zapitao: čekaj, služi li to ponašanje baš mom korisniku ili samo mojoj biblioteci? Najčešće odgovor glasi: biblioteci. I tada vrijedi s pet redaka koda prijeći na stranu čovjeka.

Ovih sitnica ima više nego što se vidi

Auto-prefix je samo jedan od mnogih takvih elemenata koje nećete pronaći ni na jednom popisu značajki. Jer da ih tamo ispišemo, svaki bi pojedinačno izgledao smiješno sitno:

  • uklanjanje razmaka prije validacije, kako slučajni razmak na kraju zalijepljene adrese ne bi pokvario sve
  • očuvanje sidra, odnosno #section u https://example.com/page#section ne nestaje nakon skraćivanja
  • parametri upita (?utm_source=test) prolaze u potpunosti, ništa se ne odsijeca usput
  • domeni s poljskim znakovima, źdźbło.pl, automatski se pretvaraju u punycode
  • poljska slova u vlastitoj ekstenziji zamjenjuju se s ASCII (różowy-link postaje rozowy-link)
  • opasni protokoli — javascript:, data:, file: — odbijeni su uz konkretnu, razumljivu poruku

(Još se planira automatsko nadograditi http:// u https://, kada odredišni poslužitelj podržava enkripciju. To još uvijek ne radi uživo, pa se neću pretvarati.)

Svaki od ovih detalja štedi nekome pet, deset, trideset sekundi i jedan uzdah. Pojedinačno ništa. Zajedno to je razlika između "radi OK" i "volim ovo koristiti".

Što bih još želio nadraditi

Lista želja za budućnost, jer me razmišljanje o tome jednostavno zabavlja:

  • inteligentno lijepljenje — detektirati adresu skrivenu unutar rečenice i izvući samo URL između riječi
  • masovno lijepljenje — popis adresa, jedna po liniji, i odmah za svaku zaseban kratki link
  • predloženog nastavka — na temelju naslova odredišne stranice predložiti tri brendirana slugga za odabir
  • Open Graph pregled odmah nakon lijepljenja, još prije nego što kliknete "skrati"

Svako od ovoga je opet "petokratna funkcija koja izgleda kao ništa". A sve zajedno? To je upravo ona granica između alata koji je u redu i onog koji posežeš svaki dan bez razmišljanja. Ako želiš vidjeti kako to radi sada, zalijepi u cutty.dev bilo što bez protokola — allegro.pl, github.com, news.ycombinator.com — i vidi da ti ništa ne stoji na putu.

Na kraju, malo osobno

Dugo sam mislio da proizvodi pobjeđuju velikim značajkama. Tom jednom upečatljivom nečim što se može pokazati na slajdu i o čemu će ljudi pisati. I uistinu, ponekad je tako.

Što duže gradim cutty, to jače osjećam da se lojalnost korisnika rađa drugdje — u onih stotinama mikrosekundi koje nitko svjesno ne primjećuje. Ne sjećaš se da je alat sam dodao https://. Sjećaš se samo općeg dojam da se "nekako dobro koristi", da "ne nervira". Taj dojam ne dolazi niotkuda. Sastoji se od desetina petolinijskih odluka koje pojedinačno nitko ne bi obranio pred samim sobom kao "vrijedne vremena".

Možda se upravo u tome sastoji zanat. Ne u tom jednom velikom pokretu, već u upornosti da se iznova i iznova stane na strani čovjeka kod obrasca — čak i ako se radi o jadna dva sekunda. A ti? Što te je nedavno iznerviralo u nekom alatu toliko sitno da je gotovo i sramota priznati? Jer obično upravo tamo leži najbolji posao koji treba obaviti.