Blog de desarrollo web: Web Performance, CSS, JavaScript, React, Web Animation, Media Optimization y Creative Coding.https://joanleon.dev/https://joanleon.dev/posts/http-cache-partitioning-cross-origin-storage/https://joanleon.dev/posts/http-cache-partitioning-cross-origin-storage/Una página con un iframe cross-site pide la misma imagen desde el iframe y desde el padre. En Chrome se descarga dos veces; en Firefox y Safari, una. Por qué la cache key no es la misma en los tres motores, por qué compartir partición no garantiza el hit, y qué propone Cross-Origin Storage para solucionarlo.Tue, 25 Aug 2026 10:00:00 GMThttps://joanleon.dev/posts/modern-web-guidance-semantic-retrieval/https://joanleon.dev/posts/modern-web-guidance-semantic-retrieval/Modern Web Guidance no guarda el conocimiento en la skill, enseña al agente a recuperarlo. Búsqueda semántica local con MiniLM y TensorFlow.js, guías con grader propio y calibración empírica del contenido.Thu, 13 Aug 2026 10:00:00 GMThttps://joanleon.dev/posts/crux-28-day-window/https://joanleon.dev/posts/crux-28-day-window/Cómo funciona de verdad la ventana móvil de 28 días de CrUX, qué publica cada fuente y por qué el p75 tarda tanto en moverse aunque los datos solo tengan dos días de retraso.Tue, 11 Aug 2026 00:00:00 GMThttps://joanleon.dev/posts/trailing-slash-301-internal-navigation/https://joanleon.dev/posts/trailing-slash-301-internal-navigation/Un hallazgo real en skills.addy.ie: cada enlace interno provocaba una redirección 301 en Netlify por una barra final que faltaba. Qué le cuesta a la UX, cómo lo detecté en las DevTools, el fix rápido que se me ocurrió y la solución de fondo (Astro directory format + trailingSlash: 'always'). Con la evidencia de la pestaña Network antes y después.Sun, 19 Jul 2026 00:00:00 GMThttps://joanleon.dev/posts/keep-alive-cache-control-preconnect/https://joanleon.dev/posts/keep-alive-cache-control-preconnect/Un caso real de auditoría: dos imágenes pesadas (608 KB y 403 KB) bajo HTTP/1.1 con Connection: Keep-Alive pero sin Cache-Control. Por qué son cosas distintas, qué arregla HTTP/2 y cómo preconnect adelanta el handshake. Con demo interactiva del waterfall.Thu, 02 Jul 2026 10:00:00 GMThttps://joanleon.dev/posts/paint-flashing-document-layer/https://joanleon.dev/posts/paint-flashing-document-layer/Por qué la capa #document acumula cientos de repintados en reposo por culpa de un ticker animado con transform, cómo cazarlo con la pestaña Layers y Paint flashing, y cómo promocionar el elemento a su propia capa de composición con will-change.Sun, 21 Jun 2026 10:00:00 GMThttps://joanleon.dev/posts/antigravity-skills-advanced-config/https://joanleon.dev/posts/antigravity-skills-advanced-config/Los campos kind, model, temperature, max_turns y tools del frontmatter de SKILL.md permiten configurar con precisión cómo se ejecuta cada agente en Antigravity. Guía práctica con los campos extendidos que Google aún no documenta oficialmente.Sat, 13 Jun 2026 10:00:00 GMThttps://joanleon.dev/posts/webgpu-video-browser/https://joanleon.dev/posts/webgpu-video-browser/WebGPU permite aplicar efectos y transformaciones a vídeo en tiempo real en el browser. Implementación práctica con benchmarks y limitaciones reales.Tue, 28 Apr 2026 10:00:00 GMThttps://joanleon.dev/posts/forced-synchronous-layout/https://joanleon.dev/posts/forced-synchronous-layout/Cómo un reset de scroll tras una manipulación masiva del DOM provoca un Forced Synchronous Layout, cómo detectarlo en el Performance Panel y en Selector Stats de Chrome DevTools, y cómo corregirlo con requestAnimationFrame.Mon, 27 Apr 2026 10:00:00 GMThttps://joanleon.dev/posts/webgpu-ml-browser/https://joanleon.dev/posts/webgpu-ml-browser/Cómo usar WebGPU como backend de TensorFlow.js para ejecutar modelos de ML en el browser con rendimiento real. Benchmarks y casos prácticos.Tue, 21 Apr 2026 10:00:00 GMThttps://joanleon.dev/posts/chrome-devtools-mcp-cli/https://joanleon.dev/posts/chrome-devtools-mcp-cli/El paquete chrome-devtools-mcp incluye una CLI experimental que permite controlar Chrome directamente desde la terminal: navegar, interactuar, auditar rendimiento, analizar red y memoria, todo sin salir de la shell.Thu, 16 Apr 2026 10:00:00 GMThttps://joanleon.dev/posts/webgpu-image-processing/https://joanleon.dev/posts/webgpu-image-processing/Cómo usar WebGPU para aplicar filtros y transformaciones a imágenes en el browser. Benchmarks reales comparando con Canvas 2D.Tue, 14 Apr 2026 10:00:00 GMThttps://joanleon.dev/posts/webgpu-browser-performance/https://joanleon.dev/posts/webgpu-browser-performance/WebGPU expone la GPU directamente al browser y abre nuevas posibilidades para el procesamiento intensivo: imágenes, vídeo, ML y mucho más.Tue, 07 Apr 2026 10:00:00 GMThttps://joanleon.dev/posts/ai-web-performance-audits-scripts-reports/https://joanleon.dev/posts/ai-web-performance-audits-scripts-reports/Cómo combinar scripts determinísticos y agentes de IA para ir de la recopilación de métricas a un informe accionable, y sentar las bases del test de regresión continuo en rendimiento.Thu, 26 Mar 2026 10:00:00 GMThttps://joanleon.dev/posts/gemini-chrome-devtools-mcp-debugging/https://joanleon.dev/posts/gemini-chrome-devtools-mcp-debugging/Workshop práctico de diagnóstico de rendimiento con Gemini CLI conectada al navegador vía Chrome DevTools MCP: desde identificar un Long Task en código minificado hasta dejar que el agente cree la rama y prepare la PR con la solución.Wed, 18 Mar 2026 10:00:00 GMThttps://joanleon.dev/posts/ai-summary-chrome-summarizer-api/https://joanleon.dev/posts/ai-summary-chrome-summarizer-api/Cómo implementar un botón de resumen IA en un blog Astro usando la Chrome Summarizer API nativa del navegador, sin servidores ni APIs externas.Fri, 13 Mar 2026 11:10:58 GMThttps://joanleon.dev/posts/webperf-snippets-progressive-disclosure/https://joanleon.dev/posts/webperf-snippets-progressive-disclosure/Cómo aplicar el sistema de progressive disclosure de Anthropic (L1/L2/L3) para reducir el contexto cargado por las Skills de WebPerf Snippets y liberar espacio en la ventana de contexto del agente.Tue, 10 Mar 2026 10:00:00 GMThttps://joanleon.dev/posts/webperf-snippets-agent-first/https://joanleon.dev/posts/webperf-snippets-agent-first/Los scripts de WebPerf Snippets devuelven ahora JSON estructurado directamente desde evaluate_script() y se minifican en el build eliminando el código muerto, reduciendo el footprint de tokens de forma significativa.Sun, 08 Mar 2026 10:00:00 GMThttps://joanleon.dev/posts/webperf-snippets-agent-skills/https://joanleon.dev/posts/webperf-snippets-agent-skills/Los WebPerf Snippets se convierten en Agent SKILLs con scripts como herramientas determinísticas para agentes de IA, ejecutables directamente en el navegador via Chrome DevTools MCP.Wed, 04 Mar 2026 10:00:00 GMThttps://joanleon.dev/posts/webperf-snippets-webmcp/https://joanleon.dev/posts/webperf-snippets-webmcp/WebPerf Snippets expone sus herramientas de medición de rendimiento vía WebMCP, el nuevo protocolo que permite a los asistentes de IA interactuar con el navegador de forma nativa.Tue, 03 Mar 2026 10:00:00 GMThttps://joanleon.dev/posts/webassembly/webassembly-w3c-standard/https://joanleon.dev/posts/webassembly/webassembly-w3c-standard/WebAssembly es un estándar del W3C desde 2019, pero muchos desarrolladores aún lo desconocen. Qué es realmente, cómo funciona y por qué deberíais conocerlo.Sun, 01 Mar 2026 10:00:00 GMThttps://joanleon.dev/posts/svg-optimization/https://joanleon.dev/posts/svg-optimization/Inline, sprite con <use>, <object>, <img>... cada forma de cargar un SVG tiene implicaciones distintas en rendimiento, caché y renderizado. Un análisis práctico para elegir bien.Tue, 24 Feb 2026 10:00:00 GMThttps://joanleon.dev/posts/guia-practica-elemento-img/https://joanleon.dev/posts/guia-practica-elemento-img/El elemento <img> tiene atributos que marcan una diferencia real en rendimiento: loading, decoding, fetchpriority, srcset y sizes. Una guía práctica para usarlos bien.Sun, 22 Feb 2026 10:00:00 GMThttps://joanleon.dev/posts/yield-to-main-optimize-inp/https://joanleon.dev/posts/yield-to-main-optimize-inp/Guía práctica sobre cómo usar setTimeout, queueMicrotask y scheduler.postTask para dividir tareas largas y optimizar INP. Comparativa con ejemplos medibles.Wed, 18 Feb 2026 10:00:00 GMThttps://joanleon.dev/posts/consent-scripts-performance/https://joanleon.dev/posts/consent-scripts-performance/Los scripts de gestión del consentimiento (CMP) compiten con recursos críticos si no se priorizan bien. Una estrategia server-side para optimizar su carga según el tipo de visita.Fri, 13 Feb 2026 10:00:00 GMThttps://joanleon.dev/posts/chrome-devtools-debugging-2025/https://joanleon.dev/posts/chrome-devtools-debugging-2025/Una guía paso a paso de cómo utilizo Google Chrome DevTools para detectar problemas de Web Performance en una web, y validar algunas hipótesis para solventarlos.Fri, 02 Jan 2026 00:00:00 GMThttps://joanleon.dev/posts/content-visibility/https://joanleon.dev/posts/content-visibility/La propiedad CSS content-visibility mejora el rendimiento de renderizado. Caso práctico con métricas y snippets para detectar oportunidades.Sat, 27 Dec 2025 00:00:00 GMThttps://joanleon.dev/posts/analisis-media-queries-css/https://joanleon.dev/posts/analisis-media-queries-css/Descubre cómo analizar las media queries del CSS para detectar y optimizar estilos no utilizados en mobile, mejorando el rendimiento de tu web con un simple snippet de JavaScript.Tue, 02 Dec 2025 00:00:00 GMThttps://joanleon.dev/posts/loaf/mas-alla-del-inp/https://joanleon.dev/posts/loaf/mas-alla-del-inp/Descubre cómo LoAF va más allá de INP. Aprende a detectar scripts que bloquean el LCP y a distinguir entre JavaScript pesado y layout thrashing para aplicar la optimización correcta.Fri, 21 Nov 2025 00:00:00 GMThttps://joanleon.dev/posts/loaf/debugging-inp/https://joanleon.dev/posts/loaf/debugging-inp/Aprende a depurar el INP (Interaction to Next Paint) de forma efectiva. En este artículo vemos cómo correlacionar Event Timing con la API de Long Animation Frames (LoAF) para identificar los scripts culpables de las interacciones lentas, cómo optimizar la recolección de datos y cómo analizar la información para priorizar las tareas de optimización.Wed, 05 Nov 2025 00:00:00 GMThttps://joanleon.dev/posts/loaf/fundamentos/https://joanleon.dev/posts/loaf/fundamentos/Descubre cómo Long Animation Frames API (LoAF) resuelve el mayor problema al debuggear INP: saber exactamente qué código causó una interacción lenta. Fundamentos, código práctico y conceptos clave.Thu, 30 Oct 2025 00:00:00 GMThttps://joanleon.dev/posts/loaf/glosario/https://joanleon.dev/posts/loaf/glosario/Referencia rápida de términos, acrónimos y conceptos relacionados con LoAF y web performance.Thu, 30 Oct 2025 00:00:00 GMThttps://joanleon.dev/posts/charlas-2023/https://joanleon.dev/posts/charlas-2023/Un repaso a las charlas que he hecho durante el 2023Sun, 31 Dec 2023 00:00:00 GMThttps://joanleon.dev/posts/interpreta-bien-tus-metricas/https://joanleon.dev/posts/interpreta-bien-tus-metricas/El número de una métrica no es más que un número, hasta que sabes cómo interpretarlo.Sat, 04 Mar 2023 00:00:00 GMThttps://joanleon.dev/posts/chrome-devtools-user-flow/https://joanleon.dev/posts/chrome-devtools-user-flow/En Chrome 97 aparece una nueva herramienta en las DevTools para poder medir la performance en la experiencia de navegación e interación de las visitas a nuestra webMon, 08 Nov 2021 00:00:00 GMThttps://joanleon.dev/posts/tailwindcss/https://joanleon.dev/posts/tailwindcss/Los frameworks CSS basados en "Utility-First" están cogiendo mucha tracción, y en especial Tailwind CSS, ¿es una buena opción?Tue, 26 Jan 2021 00:00:00 GMThttps://joanleon.dev/posts/postcss/https://joanleon.dev/posts/postcss/Déjame que te explique el motivo de porqué prefiero PostCSS para escribir CSS.Fri, 08 Jan 2021 00:00:00 GMThttps://joanleon.dev/posts/css-maltratado/https://joanleon.dev/posts/css-maltratado/Con más de 24 años, CSS sigue siendo un lenguaje despreciado.Mon, 04 Jan 2021 00:00:00 GMThttps://joanleon.dev/posts/avif-in-css/https://joanleon.dev/posts/avif-in-css/Implementa el nuevo formato de imágenes AVIF en los `background-image` de tu CSS con este plugin PostCSS.Sun, 20 Dec 2020 00:00:00 GMThttps://joanleon.dev/posts/avif-css/https://joanleon.dev/posts/avif-css/Implementa el nuevo formato de imágenes AVIF en los `background-image` de tu CSS.Sun, 06 Dec 2020 00:00:00 GMThttps://joanleon.dev/posts/libros-css/https://joanleon.dev/posts/libros-css/Recopilación de libros CSS que te podrán ayudar a mejorar tus conocimientos en el arte de dar estilos a tus proyectos.Sat, 17 Oct 2020 00:00:00 GMThttps://joanleon.dev/posts/aprender-programar/https://joanleon.dev/posts/aprender-programar/Hay muchas metodologías y lenguajes para aprender a programar, por eso, lo primero que se encuentra una persona que quiere aprender a programar, es frente a la elección de un lenguaje o plataforma de desarrollo.Sat, 12 Sep 2020 00:00:00 GMThttps://joanleon.dev/posts/diseno-agil-con-tdd/https://joanleon.dev/posts/diseno-agil-con-tdd/En este artículo quiero compartir mi opinión del libro 'Diseño Ágil con TDD', del cual he podido aprender las bases del TDD.Mon, 24 Aug 2020 00:00:00 GMThttps://joanleon.dev/posts/clean-javascript/https://joanleon.dev/posts/clean-javascript/Os quiero recomendar el libro Clean JavaScript, de Miguel A. Gómoez, donde nos enseña a aplicar buenas prácticas, escribir código robusto y fácil de mantener. Con el objetivo de conseguir desarrollar buen software con JavaScript.Wed, 19 Aug 2020 00:00:00 GMThttps://joanleon.dev/posts/animaciones-css/https://joanleon.dev/posts/animaciones-css/Con las animaciones CSS tenemos mucho más control, que con las transiciones, para crear animaciones gracias a los @keyframes.Sun, 12 Jul 2020 00:00:00 GMThttps://joanleon.dev/posts/transiciones-css/https://joanleon.dev/posts/transiciones-css/Las Transiciones CSS permiten que los cambios de valor de una propiedad CSS se realicen progresivamente durante un período de tiempo especificado.Sun, 23 Feb 2020 00:00:00 GMThttps://joanleon.dev/posts/animacion-web/https://joanleon.dev/posts/animacion-web/Hace mucho tiempo que tenemos animación en la web, echemos un vistazo a las diferentes maneras de hacer animación web.Mon, 10 Feb 2020 00:00:00 GMThttps://joanleon.dev/posts/avif/https://joanleon.dev/posts/avif/AVIF es un formato de imágenes de nueva generación que reduce hasta un ~50% el peso de las imágenes JPEG.Mon, 10 Feb 2020 00:00:00 GMThttps://joanleon.dev/posts/finalmente-entiendo-jpg/https://joanleon.dev/posts/finalmente-entiendo-jpg/Traducción al castellano del gran artículo original "JPG endlich verstehen" de Christoph Erdmann.Tue, 04 Feb 2020 00:00:00 GMThttps://joanleon.dev/posts/css-pixel-art/https://joanleon.dev/posts/css-pixel-art/El Pixel Art es una técnica de diseño que se sigue utilizando como recurso en muchos video juegos. Con CSS podemos utilizar esta técnica de una manera muy sencilla.Sun, 12 Jan 2020 00:00:00 GMThttps://joanleon.dev/posts/css-houdini/https://joanleon.dev/posts/css-houdini/Para mucha gente CSS es cosa de magos, incluso habrá quien crea que es brujería, pero eso es por que no conocen los hechizos necesarios para tener un auténtico control sobre el CSS.Sat, 04 Jan 2020 00:00:00 GMThttps://joanleon.dev/posts/motion-craftsmanship/https://joanleon.dev/posts/motion-craftsmanship/Poco hay que decir de la importancia de la animación en webs y aplicaciones, los diseñadores y desarrolladores están concienciados de ello, simplemente con abrir el navegador o aplicaciones y podremos apreciarlo. Pero veamos qué se esconde bajo la definición Motion Craftsmanship.Sat, 04 Jan 2020 00:00:00 GMThttps://joanleon.dev/posts/por-donde-empiezo-para-optimizar-mis-imagenes/https://joanleon.dev/posts/por-donde-empiezo-para-optimizar-mis-imagenes/Como profesionales del desarrollo web, nos preocupamos de escoger el mejor framework, la librería más actual, aplicar buenas prácticas en Javascript y CSS, ser cuidadosos de la semántica en el HTML para mejorar el SEO, estamos mejorando la accesibilidad de nuestro contenido, empaquetamos y dividimos los archivos para optimizar la carga, pero ¿qué pasa con las imágenes?Sat, 04 Jan 2020 00:00:00 GMT