Auto-prefixa URL-adresser – en detalj som sparar minuter

I formuläret för länkförkortning skriver du in allegro.pl. De flesta länkförkortare kommer att säga att det inte är en giltig URL och be dig ange den igen med https:// i början. cutty.dev lägger helt enkelt till https:// automatiskt och fortsätter.

Det låter som en funktion som knappt förtjänar att nämnas. I praktiken är det skillnaden mellan:

• "klistrade in, fick en kort länk, stängde fönstret" (2 sekunder)
• "klistrade in, felmeddelande, läste meddelandet, lade till https, igen, fick en länk" (15–20 sekunder)

Multiplicera med antalet gånger per månad som du klistrar in en URL, plus frustrationen av att läsa felmeddelandet, plus ögonblicket "ah, ja, protokollet". En detalj som mäts i minuter per person och månad.

Vad gör cutty.dev exakt

Du har klistrat in text i formuläret. Innan den skickas till servern kontrollerar JavaScript om den börjar med något protokoll (http://, https://, ftp://, mailto: osv.). Om den inte börjar med ett sådant antar systemet att det bara är en domän utan protokoll och lägger till https:// i början.

Alltså:

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

Och om något redan har ett protokoll (även om det är felaktigt), lämnar systemet det som det är och fortsätter att kontrollera:

• http://example.com → blir http://example.com (tillåten)
• ftp://example.com → avvisad (endast http/https)
• javascript:alert(1) → avvisad (XSS-skydd)

Varför har jag det och andra inte

De flesta URL-förkortare har standardiserad URL-validering genom new URL(string). Konstruktorn URL i webbläsaren/JavaScript är strict — om det saknas ett protokoll kastas ett fel. Det förväntade utdata för new URL("allegro.pl") är TypeError.

Detta är korrekt beteende för de flesta applikationer. Men för en länkkortningsformulär, där användaren klistrar in en URL kopierad från adressfältet eller från ett annat program, är denna strikthet ett hinder snarare än hjälp.

Lösningen kräver fem rader 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 rader kod, ett par sekunder mindre frustration per användare per dag. Jag vet inte varför de flesta på marknaden inte gör detta. Kanske för att ”standard” betyder ”så här fungerar URL-konstruktorn”.

Detaljerna i UX är oproportionerligt viktiga

cutty.dev har ett par sådana saker som inte finns med i någon funktionslista, eftersom de var för sig låter obetydliga:

• Trimma mellanslag innan validering — en klistrad URL med ett mellanslag i slutet orsakar inget fel
• Hash bevarad — https://example.com/page#section behåller #section efter förkortning
• Query strings bevarade — ?utm_source=test passerar utan att beskäras
• Automatisk protokolluppgradering — http:// till https:// när käll-URL:en stöder TLS (planerat, ännu inte LIVE)
• IDN-domäner — źdźbło.pl konverteras automatiskt till punycode
• Polska tecken i slug — ersätts automatiskt med ASCII vid skapande av en egen slutning (różowy-link → rozowy-link)
• Upptäck farliga protokoll — javascript:, data:, file:, mailto: avslås med ett specifikt meddelande

Varje detalj sparar någon 5–30 sekunder och en stund av irritation. Tillsammans gör det skillnaden mellan "jag gillar den här appen" och "den fungerar bra".

Vad händer med UX-detajlerna

Lista över saker jag vill göra i framtiden:

• Smart paste — upptäck när en användare klistrar in text som innehåller en URL bland andra ord, och extrahera endast URL:en
• Bulk paste — en klistrad lista med URL:er (en per rad) skapar flera korta länkar samtidigt
• Suggested slugs — baserat på målsidans titel, föreslå 3 varumärkesanpassade slutningar att välja mellan
• Auto-OG preview — visa en förhandsgranskning av Open Graph-kort direkt efter att URL:en har klistrats in, innan länken förkortas

Varje en av dessa är också en "femradig funktion som ser ut som ingenting". Sammanlagt skiljer det sig mellan ett verktyg som är OK och ett verktyg som du vill använda varje dag.

Försök själv

Klistra in något — allegro.pl eller github.com eller news.ycombinator.com. Systemet lägger till protokollet automatiskt och fortsätter. Utan väntan, utan felmeddelande, utan "försök igen".

Om du är intresserad av denna typ av UX-detalj – låt mig veta vilken väg vi ska gå vidare. hello@cutty.dev.