Auto-prefix URL: un pequeño detalle que ahorra minutos

Escribes en el formulario allegro.pl. Haces clic. ¿Y qué?

En la mayoría de los acortadores recibes en ese momento un mensaje de error. Algo como "esta no es una URL válida". Porque no tiene https:// al principio. Así que retrocedes, añades el protocolo, haces clic de nuevo, y solo entonces tienes tu enlace corto.

cutty.dev no hace eso. Simplemente añade https:// y continúa como si nada.

Sé cómo suena. Como una funcionalidad que apenas merece un párrafo, por no hablar de una entrada completa. Y sin embargo, estoy aquí sentado escribiendo sobre ello, porque precisamente este pequeño detalle es para mí un pequeño manifiesto de cómo pienso en general sobre la construcción de la herramienta auto-prefix URL y el resto de estas facilidades invisibles.

Dos segundos contra veinte

Hagamos cuentas. De verdad, con números, porque de lo contrario es solo palabrería.

Primera ruta: pegas, tienes el enlace, cierras la ventana. Dos segundos. Tal vez tres.

Segunda vía: pegas, error, lees el mensaje (un segundo o dos para entender de qué se trata), añades el protocolo, haces clic de nuevo, solo ahora el enlace. Quince, veinte segundos. Más ese pequeño momento de irritación, ese silencioso "ah, es cierto, el protocolo", que no cuesta nada por separado, pero se acumula.

Ahora multiplica eso por cuántas veces al mes pegas alguna dirección. En mi caso, son decenas. Para alguien que gestiona enlaces profesionalmente, son cientos. De repente, ese detalle "apenas digno de mención" se acumula en minutos al mes. Por persona.

Esta es precisamente la aritmética que la mayoría de la gente pasa por alto, porque cada caso individual parece demasiado pequeño como para preocuparse por él.

Qué hay realmente debajo de eso

El mecanismo es banal y no lo oculto en absoluto. Pegas el texto en el campo. Antes de que nada se envíe al servidor, una parte de JavaScript comprueba si lo que has escrito comienza con algún protocolo — http://, https://, ftp://, mailto:, lo que sea. Si no comienza así, el sistema asume que te refieres a un dominio común y añade https:// al principio.

En la práctica:

• allegro.pl se convierte en https://allegro.pl
• github.com/twoj-profil/projekt en https://github.com/twoj-profil/projekt
• www.gazeta.pl en https://www.gazeta.pl

Y si el protocolo ya está allí, aunque sea extraño, el sistema no lo sobrescribe. Lo deja y sigue comprobando qué hacer con ello. http://example.com pasa (permitido). ftp://example.com va a la basura, porque solo aceptamos http y https. Y javascript:alert(1) sale disparado inmediatamente, porque esto no es una dirección, es un intento de inyectar algo desagradable (XSS clásico, gracias, pero no).

Por qué yo tengo esto y la mitad del mercado no

Aquí la cosa se pone interesante, porque la respuesta es un poco graciosa.

La forma estándar de validar una dirección en el navegador es el constructor new URL(string). Y este constructor es duro. Sin concesiones. Si no hay protocolo, lanza un error. new URL("allegro.pl") simplemente te devuelve un TypeError y ya está.

¿Y sabes qué? Este es el comportamiento correcto. Para la gran mayoría de las aplicaciones, esto es exactamente lo que quieres. Pero en un formulario para acortar enlaces, donde uno copia la dirección de la barra del navegador o de un mensaje de alguien, esta crudeza pasa de ser una ventaja a ser un obstáculo. De repente, una herramienta que debería ahorrarte tiempo te obliga a corregir algo que, después de todo, entiende perfectamente.

Evitar esto es literalmente unas pocas líneas:

function sanitizeUrl(input) {
  const trimmed = input.trim();
  const hasProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed);
  const normalized = hasProtocol ? trimmed : "https://" + trimmed;
  // dalej leci normalna walidacja przez new URL(normalized)
}

Cinco líneas. Unas cuantas decenas de segundos menos de fricción, al día, para cada persona que pega direcciones. Sinceramente, no sé por qué esto no es un estándar en todas partes. Sospecho que se trata de que "así funciona el constructor de URL" y nadie quiso molestarse en tocarlo. Inercia, no mala voluntad.

Una pequeña digresión sobre lo que significa "estándar"

Porque esta historia con new URL() es un gran ejemplo de algo más amplio. Muchas cosas que en el software se consideran "así es como se hace", son en realidad "así resultaron de la configuración por defecto de alguna biblioteca que nadie cuestionó". El modo estricto del constructor no es una decisión de los diseñadores de cutty ni de la competencia — es una decisión de los autores de la especificación URL, tomada en un contexto completamente diferente, para usos completamente diferentes.

Y luego todo el mercado hereda esta elección por defecto y lo llama "estándar". Tengo la impresión de que los mejores productos nacen exactamente en esos lugares donde alguien se detuvo y preguntó: un momento, ¿este comportamiento sirve a mi usuario o solo a mi biblioteca? La mayoría de las veces la respuesta es: a la biblioteca. Y entonces vale la pena cambiar de bando hacia el lado humano con cinco líneas de código.

Hay más de estos detalles de lo que parece

Auto-prefix es solo uno de los muchos elementos de este tipo que no encontrarás en ninguna lista de funciones. Porque si se incluyeran allí, cada uno por separado parecería ridículamente pequeño:

• recorte de espacios antes de la validación, para que un espacio accidental al final de la dirección pegada no lo arruine todo
• conservación del ancla, es decir, #section en https://example.com/page#section no desaparece tras el acortamiento
• los parámetros de consulta (?utm_source=test) se pasan íntegros, nada se corta en el camino
• dominios con caracteres polacos, źdźbło.pl, se convierten automáticamente a punycode
• letras polacas en el propio slug se cambian a ASCII (różowy-link se convierte en rozowy-link)
• protocolos peligrosos — javascript:, data:, file: — rechazados con un mensaje específico y comprensible

(Todavía se está planeando el redireccionamiento automático de http:// a https:// cuando el servidor de destino admite cifrado. Esto aún no funciona en vivo, así que no voy a pretender lo contrario.)

Cada uno de estos detalles le ahorra a alguien cinco, diez, treinta segundos y un suspiro. Por separado, nada. Juntos, marcan la diferencia entre "funciona bien" y "me gusta usarlo".

Lo que me gustaría añadir todavía

Lista de deseos para el futuro, porque pensar en ello simplemente me divierte:

• pegado inteligente — detectar una dirección oculta en medio de una frase y extraer solo la URL entre las palabras
• pegado masivo — lista de direcciones, una por línea, y generar inmediatamente un enlace corto separado para cada una
• finales sugeridos — proponer tres slugs de marca para elegir basándose en el título de la página de destino
• vista previa de Open Graph inmediatamente después de pegar, incluso antes de hacer clic en "acortar"

Cada una de estas es de nuevo una "función de cinco líneas que no parece nada". ¿Y todas juntas? Es precisamente esa frontera entre una herramienta que está bien y una a la que recurres todos los días sin pensarlo. Si quieres ver cómo funciona ahora, pega en cutty.dev cualquier cosa sin protocolo — allegro.pl, github.com, news.ycombinator.com — y verás que no te pone ningún obstáculo.

Para terminar, un poco personal

Pensé durante mucho tiempo que los productos ganaban con grandes funciones. Con esa única cosa impresionante que se puede mostrar en una diapositiva y de la que la gente escribirá. Y sí, a veces es así.

Cuanto más tiempo construyo cutty, más fuerte siento que la lealtad del usuario nace en otro lugar: en esos cientos de microsegundos que nadie nota conscientemente. No recuerdas que la herramienta añadió https:// por sí sola. Solo recuerdas la impresión general de que "es agradable de usar" o "no molesta". Esa impresión no surge de la nada. Se compone de decenas de decisiones de cinco líneas que, individualmente, nadie defendería ante sí mismo como "que valgan la pena el tiempo".

Tal vez en eso consiste el oficio. No en ese único gran movimiento, sino en la terquedad de ponerse una y otra vez del lado del ser humano frente al formulario — incluso si se trata de apenas dos segundos miserables. ¿Y tú? ¿Qué te ha molestado últimamente en alguna herramienta de forma tan pequeña que hasta da vergüenza admitirlo? Porque, por lo general, es precisamente ahí donde reside el mejor trabajo por hacer.