Auto-prefix URL — sitnica koja štedi minute

U obrascu za skraćivanje poveznice upisat ćete allegro.pl. Većina skraćivača reći će vam da to nije ispravna URL adresa i tražit će da ponovno upišete s https:// na početku. cutty.dev će jednostavno sam dodati https:// i nastaviti.

To zvuči kao značajka koja jedva zaslužuje spomen. U praksi to je razlika između:

• "zalijepio sam, imam kratki link, zatvaram prozor" (2 sekunde)
• "zalijepio sam, pogreška, čitam poruku, dodajem https, još jednom, imam link" (15-20 sekundi)

Pomnožite s brojem puta u mjesecu kada zalijepite URL, plus frustraciju zbog čitanja pogreške, plus trenutak "ah da, protokol". Sitnica koja se mjeri minutama mjesečno po osobi.

Što točno radi cutty.dev

Zalijepili ste tekst u obrazac. Prije slanja na poslužitelj, JavaScript provjerava počinje li on nekim protokolom (http://, https://, ftp://, mailto: itd). Ako ne počinje — sustav pretpostavlja da je to jednostavno domena bez protokola i dodaje https:// na početak.

Dakle:

• 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 nešto već ima protokol (čak i ako je nepravilan), sustav ga ostavlja kakav jest i provjerava dalje:

• http://example.com → ostaje http://example.com (allowed)
• ftp://example.com → odbijeno (samo http/https)
• javascript:alert(1) → odbijeno (XSS protection)

Zašto ja to imam, a drugi ne

Većina skraćivača ima standardnu validaciju URL-a putem new URL(string). Konstruktor URL u pregledniku/JavaScriptu je strict — ako nema protokola, baca pogrešku. Zadan output za new URL("allegro.pl") je TypeError.

To je ispravno ponašanje za većinu aplikacija. Ali za obrazac za skraćivanje poveznice, gdje korisnik zalijepi URL kopiran iz adresne trake ili iz druge aplikacije, ta strogoća je prepreka umjesto pomoći.

Rješenje zauzima pet linija JavaScripta:

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

Pet linija koda, nekoliko sekundi manje frustracije po korisniku dnevno. Ne znam zašto većina tržišta to ne radi. Možda zato što "standardno" znači "tako radi URL konstruktor".

Sitnice u UX-u su neproporcionalno važne

cutty.dev ima desetak takvih stvari koje nisu ni u jednom popisu značajki, jer svaka pojedinačno zvuči beznačajno:

• Trim whitespace prije validacije — zalijepljeni URL sa razmakom na kraju ne uzrokuje pogrešku
• Hash zadržan — https://example.com/page#section zadržava #section nakon skraćivanja
• Query strings zadržani — ?utm_source=test prolazi bez rezanja
• Automatic protocol upgrade — http:// u https:// kada izvorni URL podržava TLS (planirano, još nije LIVE)
• IDN domains — źdźbło.pl se automatski pretvara u punycode
• Poljski znakovi u slugu — automatski se zamjenjuju u ASCII prilikom stvaranja vlastitog nastavka (różowy-link → rozowy-link)
• Detect dangerous protocols — javascript:, data:, file:, mailto: odbijeni uz specifičnu poruku

Svaki od ovih detalja štedi nekome 5-30 sekundi i trenutak iritacije. Zajedno, to je razlika između "sviđa mi se ova aplikacija" i "radi OK".

Što dalje s UX detaljima

Lista stvari koje želim učiniti u budućnosti:

• Smart paste — detektiraj kada korisnik zalijepi tekst koji sadrži URL između drugih riječi, izvuci samo URL
• Bulk paste — zalijepljena lista URL-ova (jedan po liniji) stvara više kratkih linkova istovremeno
• Suggested slugs — na temelju naslova odredišne stranice, predloži 3 brendirana nastavka za odabir
• Auto-OG preview — prikaži Open Graph preview odmah nakon lijepljenja URL-a, prije klika na skraćenu poveznicu

Svaka od ovih je također "funkcija od pet linija koja ne izgleda kao ništa". Sve zajedno razlikuje alat koji je OK od alata koji želiš koristiti svakodnevno.

Pokušaj sam

Zalijepi nešto — allegro.pl ili github.com ili news.ycombinator.com. Sustav će sam dodati protokol i nastaviti dalje. Bez čekanja, bez pogreške, bez "pokušajte ponovno".

Ako te zanima ova vrsta UX detalja — javi mi u kojem smjeru dalje ići. hello@cutty.dev.