Auto-prefix URL — smulkmena, kuri sutaupo minutes

Nuorodų trumpinimo formulyje įvesite allegro.pl. Dauguma trumpintuvų jums pasakys, kad tai nėra teisingas URL, ir paprašys įvesti dar kartą su https:// priekyje. cutty.dev tiesiog pats pridės https:// ir tęs.

Tai skamba kaip funkcija, kuri vos pelnytu minimos dėmesio. Praktikoje tai skirtumas tarp:

• „įklijuojau, turiu trumpą nuorodą, uždaru langą“ (2 sekundės)
• „įklijuojau, klaida, skaitau pranešimą, pridedu https, dar kartą, turiu nuorodą“ (15-20 sekundžių)

Primeskite už kartus per mėnesį, kai įklijuojate URL, prie pridėkite frustraciją skaitalant klaidą ir momentą „ach, juk protokolas“. Smulkmena, kuri matuojama minutėmis per mėnesį vienam asmeniui.

Ką tiksliai daro cutty.dev

Įklijuojate tekstą į formą. Prieš siunčiant į serverį, JavaScript patikrina, ar jis prasideda kokia nors protokolu (http://, https://, ftp://, mailto: ir t.t.). Jei ne prasideda — sistema priima, kad tai tiesiog domenas be protokolo, ir prideda https:// priekyje.

Taigi:

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

O jei kažkas jau turi protokolą (net jei jis netinkamas), sistema palieka kaip yra ir tikrina toliau:

• http://example.com → lieka http://example.com (leistina)
• ftp://example.com → atmesta (tik http/https)
• javascript:alert(1) → atmesta (XSS apsauga)

Kodėl tai turiu aš, o kiti ne

Dauguma sutrumpintuvų naudoja standartinę URL validaciją per new URL(string). URL konstruktorius naršyklėje/JavaScript yra strict — jei nėra protokolo, jis išmeta klaidą. Neteisingas output dla new URL("allegro.pl") yra TypeError.

Tai teisinga elgsena daugumai programėlių. Tačiau nuorodų trumpinimo formai, kurioje vartotojas įklija adresu juostoje arba kitoje programėlėje nukopijuotą URL, ši griežtumas yra kliūtis, o ne pagalba.

Sprendimas užima penkis „JavaScript“ eilutes:

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

Penki kodų eilutės, keletas sekundžių mažiau frustracijos vienam vartotojui per dieną. Nezinu, kodėl didžioji rinkos dalis to nedaro. Galbūt todėl, kad „standartinis“ reiškia „taip veikia URL konstruktorius“.

UX smulkmenos yra neproporcingai svarbios

cutty.dev turi keliolika tokių dalykų, kurie nėra nė viename funkcijų sąraše (feature list), nes kiekvienas iš jų skamba trivialiai:

• Trim whitespace prieš validaciją — įklijuotas URL su tarpčiu gale nesukelia klaidos
• Hash zachowany — https://example.com/page#section išlaiko #section po trumpinimo
• Query strings zachowane — ?utm_source=test praeiną be nukirpimo
• Automatic protocol upgrade — http:// į https://, jei pradinis URL palaiko TLS (planuojama, dar ne LIVE)
• IDN domains — źdźbło.pl automatiškai konvertuojamas į punycode
• Polskie znaki w slug — automatiškai keičiami į ASCII kuriant savo galūnę (różowy-link → rozowy-link)
• Detect dangerous protocols — javascript:, data:, file:, mailto: atmetami su konkrečia žinute

Kiekviena iš šių detalių kažkam sutaupo 5–30 sekundžių ir akimirką sunirgudėjimo. Kartu tai skirtumas tarp „patinka ši programa“ ir „veikia OK“.

Kas toliau su UX detalėmis

Dažyras dalykų, kurių noriu padaryti ateityje:

• Smart paste — atpažink, kai vartotojas įklijuoja tekstą, pradedantį URL adresu tarp kitų žodžių, ir ištrauk patį URL
• Bulk paste — įklijuotas URL adresų sąrašas (vienas eilutėje) vienu metu sukuria daug trumpųjų nuorodų
• Suggested slugs — remiantis tikslingos puslapio antrašte, pasiūlyk 3 prekės ženklo galūnes pasirinkimui
• Auto-OG preview — rodyti Open Graph kortelių peržiūrą iškart įklijuojant URL, prieš paspaudžiant trumpinę nuorodą

Kiekviena iš šių yra taip pat „penklinio linijos funkcija, kuri atrodo kaip niekas“. Viskas kartu skiriasi tarp įrankio, kuris yra OK, ir įrankio, kurį nori naudoti kasdien.

Išbandyk patys

Įklijuokite ką nors — allegro.pl arba github.com arba news.ycombinator.com. Sistema pati pridės protokolą ir tęs kursą. Be laukimo, be klaidų, be „bandykte vėl“.

Jei šis UX detalio tipas jus domina — praneškite, kurią kryptį tęsti toliau. hello@cutty.dev.