Auto-prefix URL — un detall que estalvia minuts

Al formulari de reducció d'enllaços escriureu allegro.pl. La majoria dels reductors us diran que no és una URL correcta i us demanaran que la torneu a introduir amb https:// al principi. cutty.dev simplement afegeix el https:// ell mateix i continua.

Sembla una funcionalitat que difícilment mereix ser esmentada. En la pràctica, és la diferència entre:

• "he enganxat, tinc un enllaç curt, tanco la finestra" (2 segons)
• "he enganxat, error, llegeixo el missatge, afegeixo https, una altra vegada, tinc l'enllaç" (15-20 segons)

Multiplica per la quantitat de vegades al mes que enganxes una URL, més la frustració de llegir l'error, més el moment "ah, és veritat, el protocol". Un detall que es mesura en minuts al mes per persona.

Què fa exactament cutty.dev

Has enganxat el text al formulari. Abans d'enviar-lo al servidor, JavaScript comprova si comença amb algun protocol (http://, https://, ftp://, mailto: etc.). Si no comença — el sistema assumeix que és simplement un domini sense protocol i afegeix https:// al principi.

Així que:

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

I si alguna cosa ja té un protocol (encara que sigui incorrecte), el sistema la deixa tal com està i continua comprovant:

• http://example.com → es queda http://example.com (allowed)
• ftp://example.com → rebut (només http/https)
• javascript:alert(1) → rebut (XSS protection)

Per què això el tinc jo i els altres no

La majoria d'acortadors tenen una validació d'URL estàndard mitjançant new URL(string). El constructor URL al navegador/JavaScript és strict — si no hi ha protocol, llança un error. L'output per defecte de new URL("allegro.pl") és TypeError.

Aquest és el comportament correcte per a la majoria d'aplicacions. Però per a un formulari de reducció de lliure, on l'usuari enganxa una URL copiada de la barra d'adreces o d'una altra aplicació, aquesta rigorositat és un obstacle en lloc d'una ajuda.

La solució ocupa cinc línies de 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)
}

Cinc línies de codi, diverses segons menys de frustració per usuari per dia. No sé per què la majoria del mercat no ho fa. Potser perquè "estàndard" significa "així funciona el constructor d'URL".

Els detalls en UX són desproporcionadament importants

cutty.dev té una dotzena de coses com aquesta que no apareixen en cap llista de funcions, perquè cada una per si sola sembla insignificant:

• Eliminar espais en blanc abans de la validació — una URL enganxada amb un espai al final no provoca cap error
• Hash preservat — https://example.com/page#section manté el #section després de l'acortament
• Query strings preservats — ?utm_source=test passa sense ser tallat
• Automatic protocol upgrade — de http:// a https:// quan la URL d'or suporta TLS (planificat, encara no LIVE)
• IDN domains — źdźbło.pl es converteix automàticament a punycode
• Caracterductors polonèsos en el slug — es converteixen automàticament a ASCII en crear la propi final (różowy-link → rozowy-link)
• Detect dangerous protocols — javascript:, data:, file:, mailto: rebuats amb un missatge específic

Cada un d'aquests detalls estalvia a algú entre 5 i 30 segons i un moment d'irritació. En conjunt, és la diferència entre "m agrada aquesta aplicació" i "funciona bé".

Què passa amb els detalls de l'UX

Llista de coses que vull fer en el futur:

• Smart paste — detecta quan l'usuari enganxi un text que conté una URL entre altres paraules, extreure només la URL
• Bulk paste — la llista de URLs enganxada (una per línia) crea molts enllaços curts alhora
• Suggested slugs — basant-se en el títol de la pàgina de destí, proposar 3 finalitzacions de marca per triar
• Auto-OG preview — mostra la previsualització de les targetes Open Graph immediatament després d'enganxar la URL, abans de fer clic per acurtar

Cada un d'aquests també és una "funcions de cinc línies que no sembla res". Tot conjunt divergeix entre l'eina que està OK i l'eina que vols utilitzar cada dia.

Prova-ho tu mateix

Enganxa alguna cosa — allegro.pl o github.com o news.ycombinator.com. El sistema afegirà automàticament el protocol i continuarà. Sense esperes, sense errors, sense "torna a intentar-ho".

Si aquest tipus de detall de UX t'interessa — fesme saber per on seguir avançant. hello@cutty.dev.