Auto-prefix-URL: een klein detail dat minuten bespaart

In het linkverkortingsformulier voer je allegro.pl in. De meeste verkorters zullen zeggen dat dit geen geldige URL is en vragen je om opnieuw te typen met https:// ervoor. cutty.dev voegt echter gewoon automatisch https:// toe en gaat door.

Dit klinkt als een feature die amper de vermelding waard is. In de praktijk is het het verschil tussen:

• "plakken, korte link krijgen, venster sluiten" (2 seconden)
• "plakken, foutmelding, bericht lezen, https toevoegen, opnieuw plakken, link krijgen" (15-20 seconden)

Vermenigvuldig met het aantal keren per maand dat je de URL plakt, plus de frustratie van het lezen van de foutmelding, plus het moment van "ah ja, het protocol". Een kleinigheidje dat per persoon per maand in minuten wordt gemeten.

Wat doet cutty.dev precies

Je hebt tekst in het formulier geplakt. Voordat deze naar de server wordt verzonden, controleert JavaScript of deze begint met een bepaald protocol (http://, https://, ftp://, mailto: enz.). Als dit niet het geval is — gaat het systeem ervan uit dat het gewoon een domeinnaam zonder protocol is en voegt het https:// toe aan het begin.

Dus:

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

En als er al een protocol is (zelfs als het onjuist is), laat het systeem het zoals het is en controleert verder:

• http://example.com → blijft http://example.com (toegestaan)
• ftp://example.com → afgewezen (alleen http/https)
• javascript:alert(1) → afgewezen (XSS-beveiliging)

Waarom heb ik dit, en anderen niet?

De meeste URL-verkorters hebben een standaard URL-validatie via new URL(string). De URL-constructor in de browser/JavaScript is strict — als er geen protocol is, gooit het een fout. De standaarduitvoer voor new URL("allegro.pl") is TypeError.

Dit is het juiste gedrag voor de meeste applicaties. Maar voor een linkverkortingsformulier, waar de gebruiker een URL plakt die gekopieerd is vanuit de adresbalk of een andere applicatie, is deze strictness een hindernis in plaats van hulp.

De oplossing bestaat uit vijf regels 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)
}

Vijf regels code, een tiental seconden minder frustratie per gebruiker per dag. Ik weet niet waarom de meeste markt dit niet doet. Misschien omdat "standaard" betekent "zoals de URL-constructor werkt".

Details in UX zijn disproportioneel belangrijk

cutty.dev heeft een paar dingen die niet in de featurelijst staan, omdat ze elk op zich onbeduidend klinken:

• Witruimte trimmen voor validatie — een geplakte URL met een spatie aan het einde veroorzaakt geen fout
• Hash behouden — https://example.com/page#section behoudt #section na inkorten
• Querystrings behouden — ?utm_source=test gaat door zonder afkappen
• Automatische protocolupgrade — http:// naar https:// wanneer de bron-URL TLS ondersteunt (gepland, nog niet LIVE)
• IDN-domeinen — źdźbło.pl wordt automatisch geconverteerd naar punycode
• Poolse tekens in slug — automatisch omgezet naar ASCII bij het maken van een aangepaste eindstring (różowy-link → rozowy-link)
• Gevaarlijke protocollen detecteren — javascript:, data:, file:, mailto: afgewezen met een specifieke melding

Elk van deze details bespaart iemand 5-30 seconden en een moment van irritatie. Samen maakt dit het verschil tussen "ik vind deze app leuk" en "het werkt prima".

Wat nu met UX-details?

Lijst van dingen die ik in de toekomst wil doen:

• Slim plakken — detecteer wanneer een gebruiker tekst plakt die een URL bevat tussen andere woorden, en haal alleen de URL op
• Bulk plakken — geplakte lijst van URLs (één per regel) maakt meerdere korte links tegelijk aan
• Voorgestelde slugs — stel op basis van de titel van de bestemmingspagina 3 merk-specifieke eindingen voor om uit te kiezen
• Auto-OG preview — toon direct na het plakken van een URL een preview van de Open Graph-kaart, voordat je de link inkort

Elk van deze is ook een "vijfregelige functie die er als niets uitziet". In totaal maakt het verschil uit tussen een tool die oké is en een tool die je dagelijks wilt gebruiken.

Probeer het zelf

Plak iets — allegro.pl of github.com of news.ycombinator.com. Het systeem voegt automatisch het protocol toe en gaat verder. Geen wachttijd, geen foutmelding, geen "probeer opnieuw".

Als dit type UX-detail je interesseert, laat het dan weten welke kant we op moeten gaan. hello@cutty.dev.