URL con prefisso automatico: un dettaglio che fa risparmiare minuti

Nel modulo di accorciamento del link inserirai allegro.pl. La maggior parte degli accorciatori ti dirà che non è un URL valido e ti chiederà di reinserirlo con https:// all'inizio. cutty.dev invece aggiungerà automaticamente https:// e procederà.

Questo sembra un feature che a malapena merita una menzione. In pratica, è la differenza tra:

• "ho incollato, ho un link breve, chiudo la finestra" (2 secondi)
• "ho incollato, errore, leggo il messaggio, aggiungo https, di nuovo, ho il link" (15-20 secondi)

Moltiplica per il numero di volte al mese in cui incolli l'URL, più la frustrazione nel leggere l'errore, più il momento "ah sì, il protocollo". Una sciocchezza che si misura in minuti al mese per persona.

Cosa fa esattamente cutty.dev

Hai incollato il testo nel modulo. Prima dell'invio al server, JavaScript verifica se inizia con un determinato protocollo (http://, https://, ftp://, mailto: ecc.). Se non inizia — il sistema presume che si tratti semplicemente di un dominio senza protocollo e aggiunge https:// all'inizio.

Cioè:

• allegro.pl → https://allegro.pl
• github.com/tuo-profilo/progetto → https://github.com/tuo-profilo/progetto
• www.gazeta.pl → https://www.gazeta.pl

E se qualcosa ha già un protocollo (anche se errato), il sistema lascia tutto com'è e continua a controllare:

• http://example.com → rimane http://example.com (consentito)
• ftp://example.com → rifiutato (solo http/https)
• javascript:alert(1) → rifiutato (protezione XSS)

Perché l'ho io e gli altri no

La maggior parte degli accorciatori di URL effettua una convalida standard tramite new URL(string). Il costruttore URL in browser/JavaScript è strict: se manca il protocollo, genera un errore. L'output predefinito per new URL("allegro.pl") è TypeError.

Questo è il comportamento corretto per la maggior parte delle applicazioni. Tuttavia, per un form di accorciamento dei link, dove l'utente incolla un URL copiato dalla barra degli indirizzi o da un'altra applicazione, questa rigidità è un ostacolo invece che un aiuto.

La soluzione richiede cinque righe di 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)
}

Cinque righe di codice, una decina di secondi in meno di frustrazione per utente al giorno. Non so perché la maggior parte del mercato non lo faccia. Forse perché “standard” significa “funziona così il costruttore URL”.

I dettagli in UX sono sproporzionatamente importanti

cutty.dev ha una decina di cose che non compaiono in nessun elenco delle funzionalità, perché ognuna presa singolarmente sembra insignificante:

• Rimozione degli spazi bianchi prima della convalida — un URL incollato con uno spazio alla fine non causa errori
• Hash conservato — https://example.com/page#section mantiene #section dopo il troncamento
• Stringhe di query conservate — ?utm_source=test passa senza essere tagliato
• Aggiornamento automatico del protocollo — http:// diventa https:// quando l'URL di origine supporta TLS (in pianificazione, non ancora LIVE)
• Domini IDN — źdźbło.pl viene convertito automaticamente in punycode
• Caratteri polacchi nello slug — convertiti automaticamente in ASCII durante la creazione del suffisso personalizzato (różowy-link → rozowy-link)
• Rilevamento di protocolli pericolosi — javascript:, data:, file:, mailto: rifiutati con un messaggio specifico

Ogni dettaglio di questi risparmia a qualcuno da 5 a 30 secondi e un momento di irritazione. Insieme, fa la differenza tra "mi piace questa app" e "funziona bene".

Cosa succede dopo con i dettagli UX

Lista delle cose che voglio fare in futuro:

• Incolla intelligente — rileva quando l'utente incolla del testo contenente un URL tra altre parole, estrai solo l'URL
• Incolla in blocco — una lista di URL incollati (uno per riga) crea molti link corti contemporaneamente
• Slug suggeriti — in base al titolo della pagina di destinazione, proponi 3 suffissi personalizzabili tra cui scegliere
• Anteprima OG automatica — mostra l'anteprima delle card Open Graph immediatamente dopo aver incollato l'URL, prima di creare il link corto

Ognuna di queste è anche una "funzione a cinque righe che sembra non fare nulla". Nel complesso, la differenza sta tra uno strumento che va bene e uno che vuoi usare ogni giorno.

Prova da solo

Incolla qualcosa — allegro.pl o github.com o news.ycombinator.com. Il sistema aggiungerà automaticamente il protocollo e procederà. Senza attese, senza errori, senza "riprova".

Se questo tipo di dettaglio UX ti interessa, fammi sapere in che direzione procedere. hello@cutty.dev.