URL con prefijo automático: un detalle que ahorra minutos

En el formulario de acortamiento de enlaces, escribirás allegro.pl. La mayoría de los acortadores te dirán que no es una URL válida y te pedirán que la ingreses nuevamente con https:// al principio. cutty.dev simplemente añade automáticamente https:// y continúa.

Esto suena como una función que apenas merece la pena mencionar. En la práctica, es la diferencia entre:

• "pegué, tengo un enlace corto, cierro la ventana" (2 segundos)
• "pegué, error, leo el mensaje, añado https, de nuevo, ya tengo el enlace" (15-20 segundos)

Multiplica por la cantidad de veces al mes que pegas la URL, más la frustración de leer el error, más el momento de "ah, sí, claro, el protocolo". Un detalle que se mide en minutos al mes por persona.

Qué hace exactamente cutty.dev

Has pegado el texto en el formulario. Antes de enviarlo al servidor, JavaScript verifica si comienza con algún protocolo (http://, https://, ftp://, mailto:, etc.). Si no comienza con uno, el sistema asume que es simplemente un dominio sin protocolo y añade https:// al principio.

Es decir:

• allegro.pl → https://allegro.pl
• github.com/tu-perfil/proyecto → https://github.com/tu-perfil/proyecto
• www.gazeta.pl → https://www.gazeta.pl

Y si algo ya tiene un protocolo (incluso si es incorrecto), el sistema lo deja como está y continúa verificando:

• http://example.com → se queda http://example.com (permitido)
• ftp://example.com → rechazado (solo http/https)
• javascript:alert(1) → rechazado (protección XSS)

¿Por qué lo tengo yo y los demás no?

La mayoría de los acortadores de URLs realizan una validación estándar mediante new URL(string). El constructor URL en el navegador/JavaScript es strict: si no hay protocolo, lanza un error. La salida predeterminada para new URL("allegro.pl") es TypeError.

Este es el comportamiento correcto para la mayoría de las aplicaciones. Pero para un formulario de acortamiento de enlaces, donde el usuario pega una URL copiada desde la barra de direcciones o desde otra aplicación, esta estrictitud es un obstáculo en lugar de una ayuda.

La solución ocupa cinco líneas 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)
}

Cinco líneas de código, una docena de segundos menos de frustración por usuario por día. No sé por qué la mayoría del mercado no lo hace. Quizás porque «estándar» significa «así funciona el constructor de URL».

Los detalles en UX son desproporcionadamente importantes

cutty.dev tiene varias de estas cosas que no aparecen en ninguna lista de características, porque cada una por separado suena insignificante:

• Eliminar espacios en blanco antes de la validación: una URL pegada con un espacio al final no provoca un error
• Hash conservado: https://example.com/page#section conserva #section después del acortamiento
• Cadenas de consulta conservadas: ?utm_source=test pasa sin ser recortado
• Actualización automática del protocolo: http:// se convierte a https:// cuando la URL original admite TLS (planificado, aún no en producción)
• Dominios IDN: źdźbło.pl se convierte automáticamente a punycode
• Caracteres polacos en el slug: se convierten automáticamente a ASCII al crear un sufijo personalizado (różowy-link → rozowy-link)
• Detectar protocolos peligrosos: javascript:, data:, file:, mailto: son rechazados con un mensaje específico

Cada uno de estos detalles ahorra a alguien entre 5 y 30 segundos y un momento de irritación. En conjunto, esto marca la diferencia entre "me gusta esta aplicación" y "funciona bien".

¿Qué sigue con los detalles de UX?

Lista de cosas que quiero hacer en el futuro:

• Pegado inteligente — detecta cuando el usuario pega texto que contiene una URL entre otras palabras y extrae solo la URL
• Pegado masivo — una lista de URLs pegadas (una por línea) genera varios enlaces cortos simultáneamente
• Sugerencias de slugs — basándose en el título de la página de destino, sugiere 3 extensiones de slug para elegir
• Vista previa automática de OG — muestra la vista previa de las tarjetas Open Graph inmediatamente después de pegar la URL, antes de hacer clic en acortar

Cada una de ellas es también una “función de cinco líneas que parece no ser nada”. Todo en conjunto marca la diferencia entre una herramienta que está bien y una que quieres usar a diario.

Pruébalo tú mismo

Pegar algo — allegro.pl o github.com o news.ycombinator.com. El sistema añadirá automáticamente el protocolo y continuará. Sin esperas, sin errores, sin "inténtalo de nuevo".

Si este tipo de detalle de UX te interesa, avísame por qué dirección seguir adelante. hello@cutty.dev.