Auto-prefix URL — en liten detalj som sparer minutter

I feltet for forkorting av lenker skriver du inn allegro.pl. De fleste forkortere vil si at dette ikke er en gyldig URL og be deg skrive den inn på nytt med https:// foran. cutty.dev legger bare til https:// selv og fortsetter.

Dette høres ut som en funksjon som knapt fortjener å bli nevnt. I praksis er det forskjellen mellom:

• "limte inn, har en kort lenke, lukker vinduet" (2 sekunder)
• "limte inn, feil, leser meldingen, legger til https, prøver igjen, har lenken" (15-20 sekunder)

Multipliser med antall ganger i måneden du limer inn en URL, pluss frustrasjonen ved å lese feilmeldingen, pluss øyeblikket "å ja, riktig, protokollen". En bagatell som måles i minutter per måned per person.

Hva gjør egentlig cutty.dev nøyaktig

Du har limt inn tekst i skjemaet. Før den sendes til serveren, sjekker JavaScript om den starter med et bestemt protokoll (http://, https://, ftp://, mailto: osv). Hvis den ikke starter med det — antar systemet at det bare er et domenenavn uten protokoll og legger til https:// foran.

Det vil si:

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

Og hvis noe allerede har en protokoll (selv om den er feil), lar systemet det være som det er og fortsetter å sjekke:

• http://example.com → forblir http://example.com (allowed)
• ftp://example.com → avvist (kun http/https)
• javascript:alert(1) → avvist (XSS protection)

Hvorfor har jeg dette, mens andre ikke har det

De fleste URL-forkortere har standard URL-validering via new URL(string). URL-konstruktøren i nettleseren/JavaScript er strict — hvis protokollen mangler, kastes en feil. Standard output for new URL("allegro.pl") er TypeError.

Dette er korrekt oppførsel for de fleste applikasjoner. Men for et skjema for forkorting av lenker, der brukeren limer inn en URL kopiert fra adressefeltet eller fra en annen applikasjon, er denne strengheten et hinder i stedet for en hjelp.

Løsningen tar fem linjer med JavaScript:

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

Fem linjer med kode, noen sekunder mindre frustrasjon per bruker per dag. Jeg vet ikke hvorfor det meste av markedet ikke gjør dette. Kanskje fordi "standard" betyr "slik fungerer en URL-konstruktør".

Små detaljer i UX er uforholdsmessig viktige

cutty.dev har et dusinvis av slike ting som ikke står i noen feature-liste, fordi hver enkelt høres ubetydelig ut:

• Trim whitespace før validering — limt inn URL med mellomrom på slutten forårsaker ikke feil
• Hash bevart — https://example.com/page#section beholder #section etter forkorting
• Query strings bevart — ?utm_source=test går igjennom uten å bli kuttet
• Automatic protocol upgrade — http:// til https:// når kilde-URL støtter TLS (planlagt, ikke LIVE ennå)
• IDN domains — źdźbło.pl blir automatisk konvertert til punycode
• Polske tegn i slug — erstattes automatisk med ASCII ved opprettelse av egen suffix (różowy-link → rozowy-link)
• Detect dangerous protocols — javascript:, data:, file:, mailto: avvises med en spesifikk melding

Hver av disse detaljene sparer noen for 5-30 sekunder og et øyeblikk med irritasjon. Sammen utgjør dette forskjellen mellom "jeg liker denne appen" og "den fungerer OK".

Hva er neste steg for UX-detaljer

Liste over ting jeg ønsker å gjøre i fremtiden:

• Smart paste — oppdag når brukeren limer inn tekst som inneholder en URL mellom andre ord, og trekk ut kun selve URL-en
• Bulk paste — en limt inn liste med URL-er (én per linje) lager mange korte lenker samtidig
• Suggested slugs — basert på tittelen til landingssiden, foreslå 3 merkevare-slutter å velge mellom
• Auto-OG preview — vis forhåndsvisning av Open Graph-kort umiddelbart etter at URL-en er limt inn, før du klikker på forkortelsen

Hver av disse er også en "femlinjers funksjon som ikke ser ut som noe". Alt sammen skiller mellom et verktøy som er OK og et verktøy du ønsker å bruke hver dag.

Prøv selv

Lim inn noe — allegro.pl eller github.com eller news.ycombinator.com. Systemet vil legge til protokollen selv og fortsette. Uten venting, uten feil, uten "prøv på nytt".

Hvis denne typen UX-detalj interesserer deg — gi beskjed om hvilken retning vi skal gå videre i. hello@cutty.dev.