¿Cansado de montar servidores sólo para mostrar una imagen que cambia al pasar el ratón? Hoy te traigo la receta de un slider antes/después que vive en la nube, sin tocar una sola línea de infraestructura. Sí, has leído bien: gratis, sin VMs y con menos café requerido que un build de React Native.
El proyecto nace de un modder que quería exponer sus mejoras gráficas de Oblivion Remastered sin subir fotos a Instagram. La solución: un worker que sirve una página HTML con un control deslizante y dos imágenes, una al ‘antes’ y otra al ‘después’. Vamos a desmenuzar el proceso, paso a paso, con la dosis de sarcasmo que nos caracteriza.
Tabla de contenidos
- El problema del slider estático
- Cloudflare Workers al rescate
- Ejemplo de código
- Despliegue, testing y SEO
- Conclusión
- Referencias
El problema del slider tradicional
La mayoría de los sliders antes/después que encuentras en la web son simples GIFs o HTML estático. Eso funciona, pero cuando quieres que el usuario cambie la posición del control o que la imagen provenga de una CDN dinámica, la cosa se complica. Además, subir una página a GitHub Pages con recursos externos a veces genera CORS inesperados y un dolor de cabeza que ni el debugger de Chrome puede curar.
En resumen: necesitas un backend ligero que sirva HTML y, si quieres, que genere la URL de las imágenes a volar. Aquí es donde aparecen los Serverless Functions y, en particular, Cloudflare Workers.
Cloudflare Workers al rescate
Los Workers son básicamente JavaScript ejecutado en la periferia de la red de Cloudflare. No hay servidor que iniciar, ni Dockerfile que escribir, basta con subir una función y listo. Lo mejor es que el worker puede leer los parámetros de la URL y montar una página al vuelo, sin tocar un disco.
Para nuestro slider, basta con leer dos query params: before y after. Si alguno falta, podemos devolver una página de error amigable (una que incluya nuestro meme favorito de “404, but make it funny”).
Ejemplo de código
Aquí tienes el worker mínimo viable. Copia, pega y despliega con wrangler publish. Recuerda: en los Workers todo el código es ES Module, así que usamos export default.
export default {
async fetch(request) {
const url = new URL(request.url)
const before = url.searchParams.get('before')
const after = url.searchParams.get('after')
if (!before || !after) {
return new Response('Falta before o after
', {
status: 400,
headers: { 'Content-Type': 'text/html' }
})
}
const html = `
Slider antes/después
`
return new Response(html, {
headers: { 'Content-Type': 'text/html' }
})
}
}
Despliegue, testing y SEO
Una vez que el worker está publicado, la URL tendrá este aspecto:
https://mi-worker.nombre.workers.dev/?before=https://ejemplo.com/antes.jpg&after=https://ejemplo.com/despues.jpg
Los navegadores cargarán las imágenes directamente desde la CDN de origen, sin pasar por nuestro worker, lo que reduce coste y latencia. Además, puedes añadir encabezados Open Graph (OGP) en la respuesta HTML para que cuando compartas la URL en Twitter o Discord, aparezca una miniatura elegante del slider.
Para tests locales, wrangler dev crea un entorno que simula Cloudflare. Solo corre wrangler dev y abre http://localhost:8787 con los parámetros de ejemplo.
Conclusión
Usar Cloudflare Workers para servir un simple slider antes/después es una muestra perfecta de cómo la arquitectura sin servidor ha madurado: menos infra, menos ops y más tiempo para el café. Además, el código es lo suficientemente pequeño como para caber en un tweet (si no fuera por los placeholders de imagen).
Si tienes más ideas —por ejemplo, generar la imagen combinada en el propio worker usando Workers Image API—, adelante. El límite lo pones tú y la cuota de 100 ms de CPU.
