Destacado
LQIP en Lume: placeholders inline generados en build
Cómo genero placeholders de baja calidad para imágenes durante la compilación con un script Deno, los incrusto en base64 y dejo que el navegador haga el cross-fade sin JavaScript.
// Bitácora
Proyectos, experimentos y descubrimientos técnicos. Lo que construyo y lo que aprendo por el camino.
Migrar de Eleventy a Lume: lo que nadie te cuenta
Tres problemas reales que encontré al migrar este sitio de Eleventy a Lume, y cómo los resolví. Includes rotos, tags que desaparecen y un sistema de bundling que no existe.
Imágenes Open Graph automáticas con Lume
Cómo generar automáticamente imágenes de vista previa para redes sociales en cada post, usando un generador TypeScript, SVG y resvg-wasm.
Migrando paigar.es de Eleventy a Lume
Por qué decidí migrar este sitio de Eleventy a Lume, qué cambió en la arquitectura y qué se ganó en el proceso.
Un sistema de layout con CSS Grid y columnas nombradas
Cómo construir un sistema de anchos de contenido flexible usando CSS Grid con líneas nombradas. El patrón que uso en todos mis proyectos.
Anatomía de .visually-hidden — cada propiedad tiene su razón
Desglose línea por línea del patrón CSS visually-hidden: por qué cada propiedad existe, qué problema resuelve, y por qué no puedes simplemente usar display:none.
prefers-reduced-motion: respetar al usuario que no quiere animaciones
Cómo usar la media query prefers-reduced-motion para desactivar animaciones cuando el usuario lo ha pedido. Con ejemplos prácticos y la filosofía detrás.
El selector :has() — el selector padre que CSS siempre necesitó
Casos prácticos del selector :has() de CSS: formularios reactivos, navegación contextual y layouts que responden al contenido. Sin JavaScript y con progressive enhancement.
Eleventy y Decap CMS: cuando el cliente quiere editar
Las ventajas y los problemas reales de usar un CMS headless con un generador estático. Qué pasa cuando un cliente sin perfil técnico gestiona su propio contenido.
Animaciones ligadas al scroll con una sola línea de JavaScript
Cómo usar una variable CSS alimentada por el scroll del navegador para crear animaciones complejas sin librerías. La técnica detrás de la versión anterior de paigar.es.
Un indicador de scroll con CSS puro
Cómo crear una barra de progreso de lectura sin una sola línea de JavaScript, desde el truco clásico del gradiente diagonal hasta scroll-driven animations.
Rendimiento en webs estáticas: lo que ya haces bien y lo que puedes mejorar
Una web estática no es automáticamente rápida. Técnicas concretas para que tu sitio generado con Eleventy cargue en milisegundos.
Imágenes responsive con picture y srcset: la guía práctica
Cómo servir la imagen correcta para cada dispositivo sin cargar bytes innecesarios. picture, srcset, sizes, lazy loading y formatos modernos.
Nunjucks como motor de plantillas: lo bueno y lo mejorable
Mi experiencia usando Nunjucks con Eleventy tras varios años y varios proyectos. Qué me gusta, qué me frustra y qué alternativas he considerado.
Implementar un tema claro/oscuro con CSS custom properties
Cómo construir un sistema de temas sin frameworks ni JavaScript innecesario. Solo custom properties, un atributo data y un par de líneas de JS.
Desplegar webs estáticas: opciones reales para 2025
Comparación práctica de las plataformas de hosting para sitios estáticos. De Netlify a Bunny CDN, pasando por StaticHost.eu — mi recorrido y dónde he terminado.
JavaScript vanilla es suficiente para tu web
Por qué no necesitas React, Vue ni ningún framework JavaScript para la mayoría de sitios web. Con ejemplos de lo que puedes hacer con el lenguaje nativo del navegador.
Accesibilidad web: el mínimo que todo desarrollador debería cumplir
No hace falta ser experto en WCAG para hacer webs accesibles. Estas son las prácticas básicas que marcan la diferencia y que no tienen excusa para no implementarse.
Tipografía fluida con clamp(): adiós a las media queries para tamaños
Cómo usar clamp() para crear una escala tipográfica que se adapta al viewport sin necesidad de breakpoints. Con ejemplos prácticos y la lógica detrás de los valores.
CSS custom properties vs variables Sass: por qué ya no necesito un preprocesador
Las custom properties de CSS hacen innecesario Sass para la mayoría de proyectos. Comparación práctica con ejemplos de lo que puedes hacer con CSS nativo que antes requería un preprocesador.
Web fonts: carga eficiente sin sacrificar el diseño
Estrategias para usar tipografías web sin penalizar el rendimiento. font-display, preload, subsetting y cuándo usar system fonts.
Construyendo paigar.es con Eleventy
Cómo y por qué he reconstruido mi web personal desde cero con Eleventy, CSS puro y muy pocas dependencias.