1. apuntes·desarrollo-web

    LQIP en Lume: placeholders inline generados en build

    LQIP llena el hueco que deja una imagen mientras descarga: una versión diminuta y borrosa que se sustituye con un cross-fade cuando la real entra. Aquí cuento cómo lo implementé en Idenautas con un script Deno de cien líneas que genera los placeholders en build y los incrusta inline en el HTML, sin un solo byte de JavaScript de cliente más allá del onload del propio img.

    Leer LQIP en Lume: placeholders inline generados en build
  2. ideas·oficio·desarrollo-web·dependencia tecnológica

    Cuando tu herramienta favorita cambia de rumbo

    Eleventy —el generador de sitios estáticos al que tantos hemos sido fieles— ha confirmado que se renombra a Build Awesome y entra al catálogo freemium de Font Awesome. La versión gratuita sigue existiendo, pero la promesa original —proyecto pequeño, independiente, sin agenda comercial— deja de estar sobre la mesa. Toca empezar a mirar el horizonte.

    Leer Cuando tu herramienta favorita cambia de rumbo
  3. técnicas·desarrollo-web

    Imágenes Open Graph automáticas con Lume

    Cuando compartes un enlace en redes sociales, lo primero que ves es una imagen. Crear esas imágenes a mano para cada post es tedioso, y conectar un servicio externo es sobredimensionar el problema. La solución está en el propio build: un generador TypeScript produce un SVG por post, y resvg-wasm los convierte a PNG durante la compilación. Sin servicios externos, sin imágenes que mantener a mano.

    Leer Imágenes Open Graph automáticas con Lume
  4. técnicas·desarrollo-web

    Un sistema de layout con CSS Grid y columnas nombradas

    El problema clásico: el texto va a 65 caracteres, pero las imágenes quieren ancho completo y las citas se quedan más estrechas. La solución habitual acumula divs wrapper sin semántica. Con un grid de columnas nombradas basta con una clase en el elemento hijo para que decida su propio ancho — sin wrappers, sin media queries, sin max-width repetidos por todo el CSS.

    Leer Un sistema de layout con CSS Grid y columnas nombradas
  5. desarrollo-web·apuntes

    Tres mil fotos en una página: el problema del DOM y cómo lo resuelve pig.js

    Poner tres mil imágenes en una página web con una etiqueta img por foto es una idea que parece razonable hasta que el navegador intenta ejecutarla. Aquí cuento qué pasa exactamente, cómo lo resuelve pig.js con un truco de renderizado virtual, y qué añadí yo encima para tener un visor con animación y navegación.

    Leer Tres mil fotos en una página: el problema del DOM y cómo lo resuelve pig.js

Volver al feed completo