Auto-prefix URL — malenkost, ki prihrani minute

V obrazcu za skrajšanje povezave boste vpisali allegro.pl. Večina skrajševalnikov vam bo rekla, da to ni pravilna URL-spolga in vas bo prosila, da ponovno vpišete https:// na začetku. cutty.dev bo preprosto sam dodal https:// in nadaljeval.

To zveni kot funkcija, ki si komaj zasluži omembo. V praksi je to razlika med:

• "vstavil sem, imam kratek povezavo, zaprem okno" (2 sekundi)
• "vstavil sem, napaka, berem sporočilo, dodam https, še enkrat, imam povezavo" (15-20 sekund)

Pomnožite s številom gongov na mesec, ko prilepite URL, plus frustracijo ob branju napake, plus trenutek "ah ja, protokol". Detajl, ki se meri v minutah na mesec na osebo.

Kaj natančno naredi cutty.dev

V obrazec ste prilepili besedilo. Pred pošiljanjem na strežnik JavaScript preveri, ali se začne z določenim protokolom (http://, https://, ftp://, mailto: itd.). Če se ne začne — sistem predvide, da gre le za domeno brez protokola, in na začetek doda https://.

。

To pomeni:

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

Če ima nekaj že protokol (tudi če je napačen), sistem pusti tako, kot je, in preverja dalje:

• http://example.com → ostane http://example.com (allowed)
• ftp://example.com → zavrnjeno (le http/https)
• javascript:alert(1) → zavrnjeno (XSS protection)

Zakaj imam to jaz, drugi pa ne

Večina skrajševalcev ima standardno validacijo URL prek new URL(string). Konstruktor URL v brskalniku/JavaScriptu je strict — če ni protokola, vrže napako. Privzeto izhodno stanje za new URL("allegro.pl") je TypeError.

To je pravilno vedenje za večino aplikacij. Toda za obrazec za skrajševanje povezav, kjer uporabnik prilepi URL, kopiran iz pasica naslova ali druge aplikacije, je ta strogość ovira namesto pomoči.

Rešitev zaseda pet vrstic 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 vrstic kode, nekaj sekund manj frustracije na uporabnika na dan. Ne vem, zakaj večina trga tega ne počne. Morda zato, ker "standardno" pomeni "tako deluje graditelj URL".

Detajli v UX so nesrazmerno pomembni

cutty.dev ima nekaj takšnih stvari, ki niso v nobenem seznamu funkcij, ker se vsaka posebej zdi nepomembna:

• Trim whitespace pred validacijo — prilepljen URL s presledkom na koncu ne povzroča napake
• Hash ohranjen — https://example.com/page#section ohranja #section po skrajšavi
• Query strings ohranjeni — ?utm_source=test gre skozi brez podrežavanja
• Automatic protocol upgrade — iz http:// v https://, ko izvorni URL podpira TLS (načrtovano, še ni LIVE)
• IDN domains — źdźbło.pl se samodejno pretvori v punycode
• Poljski znaki v slug — pri ustvarjanju lastne končnice se samodejno zamenjajo v ASCII (różowy-link → rozowy-link)
• Detect dangerous protocols — javascript:, data:, file:, mailto: zavrnjeni z določenim sporočilom

Vsaka od teh podrobnosti nekomu prihrani 5–30 sekund in trenutek razdraženja. Skupaj to predstavlja razliko med »rad imam to aplikacijo« in »deluje OK«.

Kaj dalje z UX detajli

Seznam stvari, ki jih želim narediti v prihodnosti:

• Smart paste — zaznajte, ko uporabnik prilepi besedilo, ki vsebuje URL med drugimi besedami, in izvlecite samo URL
• Bulk paste — prilepljen seznam URL-ov (en na vrstico) ustvari več kratkih povezav hkrati
• Suggested slugs — na podlagi naslova ciljne strani predlagajte 3 značilne končnice po izbiri
• Auto-OG preview — prikažite predogled Open Graph kartice takoj po prilepitvi URL, še preden kliknete na skrajjšano povezavo

Vsaka od teh je prav tako "petovršična funkcija, ki ne izgleda ničesar". Vse skupaj loči med orodjem, ki je OK, in orodjem, ki ga želiš uporabljati vsak dan.

Poskusi sam

Vlepi nekaj — allegro.pl ali github.com ali news.ycombinator.com. Sistem bo sam dodal protokol in nadaljeval. Brez čakanja, brez napake, brez "poskusi ponovno".

Če vas zanima ta tip UX podrobnosti — mi sporočite, v katero smer se nadaljevati. hello@cutty.dev.