Saltar al contenido
Development

Cerrar el círculo de la sección Open Source, y el 404 que no podía correr código de servidor

Por Victor Da Luz
astrocloudflarei18ndev-logsite

Dos problemas pequeños, atendidos uno detrás del otro porque ambos eran cabos sueltos de la sección Open Source recién terminada: una página 404 que nunca se había traducido, y un blog que no sabía que la sección existía.

La página 404 que no podía correr código de servidor

Este sitio corre en Cloudflare Workers con recursos estáticos. Cuando un build tiene una página prerenderizada a un archivo HTML plano, una solicitud para cualquier cosa que no coincida con una ruta real cae en una única respuesta 404 integrada, servida directamente desde el borde sin invocar nunca el código de la aplicación. Esto ya se había confirmado semanas antes con cuatro pruebas separadas: archivos 404 anidados por idioma, archivos literales puestos a mano, banderas de configuración explícitas. Nada de eso importaba. La capa de recursos estáticos sirve un solo 404.html, punto.

La solución real es una bandera llamada run_worker_first, que enruta cada solicitud a través del Worker en vez de dejar que el borde responda directamente desde archivos estáticos. Eso es una compensación genuina: más latencia y costo en cada carga de página, no solo en el raro 404, para todo el sitio. No es una decisión para tomar en silencio dentro de lo que parecía un arreglo de copy de dos líneas.

Así que no se activó. En su lugar, la página 404 se dejó tan estática como antes y la localización se movió al navegador. Los textos de los tres idiomas se envían embebidos en la página como JSON plano. Un pequeño script en línea lee la ruta de la URL, determina si empieza con un segmento /es/ o /pt/, y cambia el título, la descripción, el texto y el enlace del botón, el título de la página, y el atributo html lang, todo del lado del cliente. Costo de servidor cero, porque no hay ningún servidor involucrado para esa página.

La parte que casi salió mal: hacer coincidir con el segmento de la URL, no solo verificar si la ruta empieza con “/es”. Una página real llamada /estimates también empieza con esas dos letras. Dividir la ruta en segmentos y verificar el primero de forma exacta evitó ese falso positivo. Esto solo se detectó porque se probó esa ruta específica a propósito, no porque algo hubiera fallado de forma ruidosa si no se hacía.

El blog que no sabía que la sección existía

Por otro lado: el dev log y la nueva sección Open Source se construyeron de forma aislada uno del otro, sin ningún enlace entre ambos más allá de la navegación y el pie de página. Se agregó un puntero en el índice del blog y se conectó algo más interesante: los nombres de paquetes ahora pueden ser etiquetas de entradas del blog, y si una entrada lleva una, su etiqueta se renderiza como un enlace real a la página de ese paquete. La página del paquete, a su vez, lista cualquier entrada del dev log etiquetada con su nombre, la misma forma que las rutas filtradas por proyecto que ya existen en el sitio.

Acá está la parte que vale la pena decir con honestidad: por ahora, ese mecanismo no hace nada. Ni una sola entrada existente lleva la etiqueta de un nombre de paquete, así que la sección “From the dev log” en cada página de paquete está vacía y no hay ninguna etiqueta en ningún lado que apunte de vuelta. Se construyó de todos modos, porque la alternativa era esperar a que existiera la entrada correcta antes de escribir el código que la mostraría, lo cual es al revés. Se activa en el momento en que una entrada recibe la etiqueta. Hasta entonces es infraestructura silenciosa, no una funcionalidad en uso.

La verificación de a11y que detectó algo

El nuevo enlace del índice del blog estaba dentro de una oración completa de texto gris apagado, con subrayado que solo aparecía al pasar el cursor. El verificador de accesibilidad lo marcó de inmediato: un enlace que solo se distingue visualmente cuando ya se lo está pasando el cursor por encima no es distinguible para quien no puede ver diferencias de color, ni para quien no lo está pasando en absoluto.

Había un enlace de apariencia idéntica en otra parte del sitio que aparentemente pasaba la misma verificación, y el primer instinto fue copiar sus clases exactas. Después se notó que en realidad no se sabía por qué aquel había pasado, y se estaba a punto de llevar una suposición como si fuera un hecho. El arreglo real fue más simple que perseguir la suposición: hacer el subrayado permanente en vez de solo al pasar el cursor. Ese es el arreglo que es demostrablemente correcto, no el que resulta parecerse a algo que funcionó una vez.

Lecturas relacionadas

Development

Traducir una página de marketing sin duplicarla

La página en español existía, tenía una URL, aparecía en hreflang, y cada palabra estaba en inglés. La solución que casi se implementó era 130 líneas duplicadas esperando a desalinearse.

Leer