Auto-prefix URL — en lille detalje, der sparer minutter

I linkforkorter-formularen vil du indtaste allegro.pl. De fleste forkortere vil fortælle dig, at det ikke er en korrekt URL og bede dig skrive det igen med https:// foran. cutty.dev tilføjer blot selv https:// og fortsætter.

Det lyder som en funktion, der knap nok fortjener at blive nævnt. I praksis er det forskellen mellem:

• "jeg indsatte det, jeg har et kort link, lukker vinduet" (2 sekunder)
• "jeg indsatte det, fejl, læser beskeden, tilføjer https, igen, jeg har linket" (15-20 sekunder)

Multiplicer med antallet af gange om måneden, hvor du indsætter en URL, plus frustrationen ved at læse en fejlmeddelelse, plus øjeblikket "ah ja, rigtigt, protokollen". En lille detalje, der måles i minutter pr. måned pr. person.

Hvad gør cutty.dev præcis

Du har indsat tekst i formularen. Før den sendes til serveren, tjekker JavaScript, om den starter med en bestemt protokol (http://, https://, ftp://, mailto: osv.). Hvis den ikke starter med det — antager systemet, at det blot er et domæne uden protokol, og tilføjer https:// foran.

Det vil sige:

• 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 noget allerede har en protokol (selv hvis den er forkert), lader systemet det være og fortsætter med at kontrollere:

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

Hvorfor har jeg det, og andre ikke

De fleste URL-forkortere har en standard URL-validering via new URL(string). URL-konstruktøren i browseren/JavaScript er strict — hvis der ikke er nogen protokol, kastes en fejl. Standard output for new URL("allegro.pl") er TypeError.

Dette er den korrekte adfærd for de fleste applikationer. Men for en link-forkorter-formular, hvor brugeren indsætter en URL kopieret fra adresselinjen eller fra en anden applikation, er denne strenghed en hindring i stedet for en hjælp.

Løsningen tager fem linjer 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 kode, et par sekunder mindre frustration per bruger per dag. Jeg ved ikke hvorfor det meste af markedet ikke gør det. Måske fordi "standardmæssigt" betyder "sådan fungerer en URL-konstruktør".

Detaljer i UX er uforholdsmæssigt vigtige

cutty.dev har et dusinvis af sådanne ting, som ikke er med i nogen feature-liste, fordi hver især lyder ubetydelig:

• Trim whitespace før validering — indsat URL med et mellemrum til sidst forårsager ikke en fejl
• Hash bevaret — https://example.com/page#section bevarer #section efter afkortning
• Query strings bevares — ?utm_source=test går igennem uden at blive beskåret
• Automatic protocol upgrade — http:// til https://, når den oprindelige URL understøtter TLS (planlagt, endnu ikke LIVE)
• IDN domains — źdźbło.pl konverteres automatisk til punycode
• Polske tegn i slug — ændres automatisk til ASCII ved oprettelse af en brugerdefineret slutning (różowy-link → rozowy-link)
• Detect dangerous protocols — javascript:, data:, file:, mailto: afvises med en specifik meddelelse

Hver af disse detaljer sparer nogen for 5-30 sekunder og et øjebliks irritation. Samlet set er det forskellen mellem "jeg kan lide denne app" og "den virker OK".

Hvad er det næste skridt for UX-detaljer

Liste over ting, jeg gerne vil gøre i fremtiden:

• Smart paste — registrer når en bruger indsætter tekst, der indeholder en URL blandt andre ord, og udtræk kun URL'en
• Bulk paste — en indsat liste af URL'er (én per linje) opretter mange korte links samtidigt
• Suggested slugs — foreslå 3 brandede slutninger til valg baseret på destinationssidens titel
• Auto-OG preview — vis Open Graph-kort preview med det samme efter indsættelse af en URL, før der klikkes på forkortelsen

Hver af disse er også en "fem-linjers funktion, der ikke ligner noget". Alt sammen er forskellen på et værktøj, der er OK, og et værktøj, som du ønsker at bruge hver dag.

Prøv selv

Indsæt noget — allegro.pl eller github.com eller news.ycombinator.com. Systemet tilføjer selv protokollen og fortsætter. Uden ventetid, uden fejl, uden "prøv igen".

Hvis denne type UX-detalje interesserer dig — så lad mig vide, hvilken retning jeg skal gå videre i. hello@cutty.dev.