Más recientes
    ideas·oficio·diseño

    La patinadora entera no cabe

    Llevamos décadas con pantallas rectangulares y seguimos sin ponernos de acuerdo en qué dirección va el rectángulo. Una reflexión sobre proporciones, encuadres imposibles y la ceguera espacial que todos tenemos en algún sitio.

    Leer
    apuntes·juegos·javascript·canvas

    Cómo programar el juego de Tetris desde cero

    Un tutorial paso a paso para construir el clásico Tetris en una sola página web. Es la pieza más completa de la serie hasta ahora: rotación de matrices, gravedad por turnos, y la lógica de eliminación de líneas, que es el corazón del juego y sigue siendo, cuarenta años después, una de las invenciones más limpias de la historia de los videojuegos.

    Leer
    apuntes·desarrollo web·lume

    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
Más del archivo
    ideas·oficio·desarrollo web·lume

    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
    lume·técnicas

    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
    css·layout·técnicas

    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
Aún más entradas
  1. ideas 19 entradas
  2. desarrollo web 13 entradas
  3. oficio 12 entradas
  4. javascript 11 entradas
  5. apuntes 10 entradas
  6. juegos 8 entradas