# Joan León > Blog de desarrollo web: Web Performance, CSS, JavaScript, React, Web Animation, Media Optimization y Creative Coding. Los artículos se publican en castellano y en inglés. Cada uno tiene una versión en markdown en la misma URL con la extensión `.md`, que es la que enlaza este índice. ## Recursos para agentes - [Índice de artículos en JSON](https://joanleon.dev/api/posts.json): todos los artículos publicados, con título, descripción, idioma, tags, fechas y la URL de su markdown. - [Manifiesto WebMCP](https://joanleon.dev/.well-known/webmcp.json): las herramientas que la web registra para agentes que trabajan en el navegador. - [RSS](https://joanleon.dev/rss.xml): novedades en castellano. ## Artículos en castellano - [import() dinámico: el navegador ya cachea nuestros módulos](https://joanleon.dev/posts/dynamic-import-module-map.md): Llamar a import() cada vez que se usa una funcionalidad no vuelve a descargar ni a evaluar el módulo: el navegador lo reutiliza desde su module map. Qué garantiza, cuándo deja de ser el mismo módulo y qué pasa cuando la primera carga falla. - [WebMCP en un sitio estático: la web de GeeksCAT Conf 2026, lista para agentes](https://joanleon.dev/posts/webmcp-static-site-astro.md): La web de GeeksCAT Conf 2026 es un sitio estático con Astro y expone su agenda, sus ponentes y los datos del evento a agentes de IA con WebMCP. Tres capas: un manifiesto en /.well-known, endpoints JSON generados en build y registro de herramientas con document.modelContext. - [HTTP cache partitioning: la misma imagen, descargada dos veces](https://joanleon.dev/posts/http-cache-partitioning-cross-origin-storage.md): 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. - [Una skill que no sabe nada: la arquitectura de Modern Web Guidance](https://joanleon.dev/posts/modern-web-guidance-semantic-retrieval.md): 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. - [La ventana móvil de 28 días de CrUX](https://joanleon.dev/posts/crux-28-day-window.md): 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. - [Un 301 en cada clic: la trailing slash que ralentizaba toda la navegación interna](https://joanleon.dev/posts/trailing-slash-301-internal-navigation.md): 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. - [Keep-Alive no es Cache-Control: anatomía de una cascada de red](https://joanleon.dev/posts/keep-alive-cache-control-preconnect.md): 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. - [El misterio del #document que se repinta solo: Paint flashing y capas de composición](https://joanleon.dev/posts/paint-flashing-document-layer.md): 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. - [Antigravity Skills: configuración avanzada del frontmatter YAML](https://joanleon.dev/posts/antigravity-skills-advanced-config.md): 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. - [Edición de vídeo en el browser con WebGPU](https://joanleon.dev/posts/webgpu-video-browser.md): WebGPU permite aplicar efectos y transformaciones a vídeo en tiempo real en el browser. Implementación práctica con benchmarks y limitaciones reales. - [Forced Synchronous Layout: cómo detectarlo y analizarlo con DevTools](https://joanleon.dev/posts/forced-synchronous-layout.md): 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. - [ML en el browser con WebGPU: inferencia en tiempo real](https://joanleon.dev/posts/webgpu-ml-browser.md): 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. - [Automatiza el navegador desde la terminal con Chrome DevTools MCP CLI](https://joanleon.dev/posts/chrome-devtools-mcp-cli.md): 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. - [Procesamiento de imágenes en el browser con WebGPU](https://joanleon.dev/posts/webgpu-image-processing.md): Cómo usar WebGPU para aplicar filtros y transformaciones a imágenes en el browser. Benchmarks reales comparando con Canvas 2D. - [WebGPU: el nuevo motor de rendimiento del navegador](https://joanleon.dev/posts/webgpu-browser-performance.md): WebGPU expone la GPU directamente al browser y abre nuevas posibilidades para el procesamiento intensivo: imágenes, vídeo, ML y mucho más. - [IA en auditorías de Web Performance: medición determinística e informes accionables](https://joanleon.dev/posts/ai-web-performance-audits-scripts-reports.md): 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. - [AI-Driven Performance Debugging: Gemini + Chrome DevTools MCP](https://joanleon.dev/posts/gemini-chrome-devtools-mcp-debugging.md): 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. - [Añadiendo un resumen IA a los posts del blog con la Chrome Summarizer API](https://joanleon.dev/posts/ai-summary-chrome-summarizer-api.md): 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. - [WebPerf Snippets: progressive disclosure en Claude Skills](https://joanleon.dev/posts/webperf-snippets-progressive-disclosure.md): 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. - [WebPerf Snippets agent-first: retornos estructurados y tokens mínimos](https://joanleon.dev/posts/webperf-snippets-agent-first.md): 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. - [WebPerf Snippets y Agent SKILLs: auditorías determinísticas con Chrome DevTools MCP](https://joanleon.dev/posts/webperf-snippets-agent-skills.md): 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. - [WebPerf Snippets + WebMCP: métricas web que entiende la IA](https://joanleon.dev/posts/webperf-snippets-webmcp.md): 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. - [WebAssembly: el estándar olvidado del W3C](https://joanleon.dev/posts/webassembly/webassembly-w3c-standard.md): 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. - [SVGs en la web: comparativa de rendimiento según cómo los cargas](https://joanleon.dev/posts/svg-optimization.md): Inline, sprite con , , ... cada forma de cargar un SVG tiene implicaciones distintas en rendimiento, caché y renderizado. Un análisis práctico para elegir bien. - [Guía práctica del elemento : de lo básico a LCP](https://joanleon.dev/posts/guia-practica-elemento-img.md): El elemento tiene atributos que marcan una diferencia real en rendimiento: loading, decoding, fetchpriority, srcset y sizes. Una guía práctica para usarlos bien. - [Yield to Main: setTimeout vs queueMicrotask vs scheduler.postTask](https://joanleon.dev/posts/yield-to-main-optimize-inp.md): Guía práctica sobre cómo usar setTimeout, queueMicrotask y scheduler.postTask para dividir tareas largas y optimizar INP. Comparativa con ejemplos medibles. - [Optimización de scripts de consentimiento para Core Web Vitals](https://joanleon.dev/posts/consent-scripts-performance.md): 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. - [Chrome DevTools para depurar el rendimiento de una web](https://joanleon.dev/posts/chrome-devtools-debugging-2025.md): 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. - [Optimiza el renderizado con content-visibility](https://joanleon.dev/posts/content-visibility.md): La propiedad CSS content-visibility mejora el rendimiento de renderizado. Caso práctico con métricas y snippets para detectar oportunidades. - [Análisis de Media Queries en CSS para Optimizar el Rendimiento](https://joanleon.dev/posts/analisis-media-queries-css.md): 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. - [Más Allá de INP: LCP y el 90% invisible del rendimiento](https://joanleon.dev/posts/loaf/mas-alla-del-inp.md): 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. - [Debugging de INP: Del 'algo va lento' al 'esto es lo que lo rompe'](https://joanleon.dev/posts/loaf/debugging-inp.md): 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. - [Fundamentos de Long Animation Frames API](https://joanleon.dev/posts/loaf/fundamentos.md): 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. - [Glosario de Términos: Long Animation Frames API](https://joanleon.dev/posts/loaf/glosario.md): Referencia rápida de términos, acrónimos y conceptos relacionados con LoAF y web performance. - [Charlas 2023](https://joanleon.dev/posts/charlas-2023.md): Un repaso a las charlas que he hecho durante el 2023 - [Interpreta bien tus métricas](https://joanleon.dev/posts/interpreta-bien-tus-metricas.md): El número de una métrica no es más que un número, hasta que sabes cómo interpretarlo. - [Analizando la Web Performance del flujo de usuarias/os con Chrome DevTools](https://joanleon.dev/posts/chrome-devtools-user-flow.md): 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 web - [Mi opinión sobre Tailwind CSS](https://joanleon.dev/posts/tailwindcss.md): Los frameworks CSS basados en "Utility-First" están cogiendo mucha tracción, y en especial Tailwind CSS, ¿es una buena opción? - [Yo prefiero PostCSS](https://joanleon.dev/posts/postcss.md): Déjame que te explique el motivo de porqué prefiero PostCSS para escribir CSS. - [Es curioso cómo de olvidado y maltratado está el CSS](https://joanleon.dev/posts/css-maltratado.md): Con más de 24 años, CSS sigue siendo un lenguaje despreciado. - [AVIF in CSS con PostCSS](https://joanleon.dev/posts/avif-in-css.md): Implementa el nuevo formato de imágenes AVIF en los `background-image` de tu CSS con este plugin PostCSS. - [Detecta el soporte AVIF para las imágenes de tu CSS](https://joanleon.dev/posts/avif-css.md): Implementa el nuevo formato de imágenes AVIF en los `background-image` de tu CSS. - [Libros CSS](https://joanleon.dev/posts/libros-css.md): Recopilación de libros CSS que te podrán ayudar a mejorar tus conocimientos en el arte de dar estilos a tus proyectos. - [Aprender a programar con Processing y P5js](https://joanleon.dev/posts/aprender-programar.md): 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. - [Diseño Ágil con TDD](https://joanleon.dev/posts/diseno-agil-con-tdd.md): 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. - [Clean JavaScript: Código Limpio, SOLID y Testing](https://joanleon.dev/posts/clean-javascript.md): 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. - [Animaciones CSS](https://joanleon.dev/posts/animaciones-css.md): Con las animaciones CSS tenemos mucho más control, que con las transiciones, para crear animaciones gracias a los @keyframes. - [Transiciones CSS](https://joanleon.dev/posts/transiciones-css.md): Las Transiciones CSS permiten que los cambios de valor de una propiedad CSS se realicen progresivamente durante un período de tiempo especificado. - [Animación Web](https://joanleon.dev/posts/animacion-web.md): Hace mucho tiempo que tenemos animación en la web, echemos un vistazo a las diferentes maneras de hacer animación web. - [AVIF, el formato de imagen definitivo?](https://joanleon.dev/posts/avif.md): AVIF es un formato de imágenes de nueva generación que reduce hasta un ~50% el peso de las imágenes JPEG. - [Finalmente entiendo JPG](https://joanleon.dev/posts/finalmente-entiendo-jpg.md): Traducción al castellano del gran artículo original "JPG endlich verstehen" de Christoph Erdmann. - [CSS Pixel Art](https://joanleon.dev/posts/css-pixel-art.md): 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. - [CSS Houdini, algo más que magia](https://joanleon.dev/posts/css-houdini.md): 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. - [Motion Craftsmanship](https://joanleon.dev/posts/motion-craftsmanship.md): 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. - [Por dónde empiezo para optimizar mis imágenes](https://joanleon.dev/posts/por-donde-empiezo-para-optimizar-mis-imagenes.md): 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? ## Posts in English - [Dynamic import(): the browser already caches our modules](https://joanleon.dev/en/dynamic-import-module-map.md): Calling import() every time a feature is used doesn't download or evaluate the module again: the browser reuses it from its module map. What it guarantees, when the same module stops being the same, and what happens when the first load fails. - [WebMCP on a static site: the GeeksCAT Conf 2026 website, ready for agents](https://joanleon.dev/en/webmcp-static-site-astro.md): The GeeksCAT Conf 2026 website is a static Astro site that exposes its schedule, speakers and event details to AI agents through WebMCP. Three layers: a manifest in /.well-known, JSON endpoints generated at build time, and tool registration with document.modelContext. - [HTTP cache partitioning: the same image, downloaded twice](https://joanleon.dev/en/http-cache-partitioning-cross-origin-storage.md): A page with a cross-site iframe requests the same image from the iframe and from the parent. Chrome downloads it twice; Firefox and Safari, once. Why the cache key differs across the three engines, why sharing a partition does not guarantee a hit, and what Cross-Origin Storage proposes to fix it. - [A skill that knows nothing: the architecture of Modern Web Guidance](https://joanleon.dev/en/modern-web-guidance-semantic-retrieval.md): Modern Web Guidance doesn't keep the knowledge in the skill, it teaches the agent to retrieve it. Local semantic search with MiniLM and TensorFlow.js, guides with their own grader, and empirical calibration of the content. - [The CrUX 28-day rolling window](https://joanleon.dev/en/crux-28-day-window.md): How the CrUX 28-day rolling window actually works, what each source publishes, and why p75 takes so long to move even though the data is only two days old. - [A 301 on every click: the trailing slash that slowed down all internal navigation](https://joanleon.dev/en/trailing-slash-301-internal-navigation.md): A real finding on skills.addy.ie: every internal link triggered a 301 redirect on Netlify because of a missing trailing slash. What it costs the UX, how I spotted it in DevTools, the quick fix I first thought of, and the underlying solution (Astro directory format + trailingSlash: 'always'). With Network panel evidence before and after. - [Keep-Alive is not Cache-Control: anatomy of a network waterfall](https://joanleon.dev/en/keep-alive-cache-control-preconnect.md): A real audit case: two heavy images (608 KB and 403 KB) over HTTP/1.1 with Connection: Keep-Alive but no Cache-Control. Why they are different things, what HTTP/2 fixes and how preconnect gets ahead of the handshake. With an interactive waterfall demo. - [The mystery of the self-repainting #document: Paint flashing and composited layers](https://joanleon.dev/en/paint-flashing-document-layer.md): Why the #document layer racks up hundreds of repaints at rest because of a ticker animated with transform, how to catch it with the Layers tab and Paint flashing, and how to promote the element to its own composited layer with will-change. - [Antigravity Skills: advanced YAML frontmatter configuration](https://joanleon.dev/en/antigravity-skills-advanced-config.md): The kind, model, temperature, max_turns and tools fields in SKILL.md frontmatter let you precisely control how each agent runs in Antigravity. A practical guide to the extended fields that Google hasn't officially documented yet. - [Video editing in the browser with WebGPU](https://joanleon.dev/en/webgpu-video-browser.md): WebGPU enables real-time video effects and transformations in the browser. Practical implementation with benchmarks and real-world limitations. - [Forced Synchronous Layout: how to detect and analyze it with DevTools](https://joanleon.dev/en/forced-synchronous-layout.md): How a scroll reset after mass DOM manipulation triggers a Forced Synchronous Layout, how to detect it in the Performance Panel and Selector Stats in Chrome DevTools, and how to fix it with requestAnimationFrame. - [ML in the browser with WebGPU: real-time inference](https://joanleon.dev/en/webgpu-ml-browser.md): How to use WebGPU as the TensorFlow.js backend to run ML models in the browser with real performance. Benchmarks and practical use cases. - [Automate the browser from the terminal with Chrome DevTools MCP CLI](https://joanleon.dev/en/chrome-devtools-mcp-cli.md): The chrome-devtools-mcp package includes an experimental CLI that lets you control Chrome directly from the terminal: navigate, interact, audit performance, analyze network and memory, all without leaving the shell. - [Image processing in the browser with WebGPU](https://joanleon.dev/en/webgpu-image-processing.md): How to use WebGPU to apply filters and transformations to images in the browser. Real benchmarks comparing with Canvas 2D. - [WebGPU: the browser's new performance engine](https://joanleon.dev/en/webgpu-browser-performance.md): WebGPU exposes the GPU directly to the browser, opening new possibilities for intensive processing: images, video, ML, and more. - [AI in Web Performance Audits: Deterministic Measurement and Actionable Reports](https://joanleon.dev/en/ai-web-performance-audits-scripts-reports.md): How to combine deterministic scripts and AI agents to go from metrics collection to an actionable report, and lay the foundations for continuous regression testing in performance. - [AI-Driven Performance Debugging: Gemini + Chrome DevTools MCP](https://joanleon.dev/en/gemini-chrome-devtools-mcp-debugging.md): A hands-on workshop for performance debugging with Gemini CLI connected to the browser via Chrome DevTools MCP: from identifying a Long Task in minified code to having the agent create the branch and open the PR. - [Adding an AI summary to blog posts with the Chrome Summarizer API](https://joanleon.dev/en/ai-summary-chrome-summarizer-api.md): How to add an AI summary button to an Astro blog using the browser's native Chrome Summarizer API, without servers or external APIs. - [WebPerf Snippets: progressive disclosure in Claude Skills](https://joanleon.dev/en/webperf-snippets-progressive-disclosure.md): Applying Anthropic's progressive disclosure system (L1/L2/L3) to reduce the context loaded by WebPerf Snippets Skills and free space in the agent's context window. - [WebPerf Snippets agent-first: structured returns and minimal tokens](https://joanleon.dev/en/webperf-snippets-agent-first.md): WebPerf Snippets scripts now return structured JSON directly from evaluate_script() and are minified at build time with dead code elimination, significantly reducing token footprint. - [WebPerf Snippets and Agent SKILLs: deterministic audits with Chrome DevTools MCP](https://joanleon.dev/en/webperf-snippets-agent-skills.md): WebPerf Snippets become Agent SKILLs with scripts as deterministic tools for AI agents, executable directly in the browser via Chrome DevTools MCP. - [WebPerf Snippets + WebMCP: web metrics that AI understands](https://joanleon.dev/en/webperf-snippets-webmcp.md): WebPerf Snippets exposes its performance measurement tools via WebMCP, the new protocol that lets AI assistants interact with the browser natively. - [WebAssembly: the W3C's forgotten standard](https://joanleon.dev/en/webassembly/webassembly-w3c-standard.md): WebAssembly has been a W3C standard since 2019, but many developers still don't know about it. What it really is, how it works, and why you should know about it. - [SVGs on the web: performance comparison based on how you load them](https://joanleon.dev/en/svg-optimization.md): Inline, sprite with , , ... each way of loading an SVG has different implications for performance, caching and rendering. A practical analysis to help you choose well. - [Practical guide to the element: from the basics to LCP](https://joanleon.dev/en/guia-practica-elemento-img.md): The element has attributes that make a real difference in performance: loading, decoding, fetchpriority, srcset and sizes. A practical guide to using them well. - [Yield to Main: setTimeout vs queueMicrotask vs scheduler.postTask](https://joanleon.dev/en/yield-to-main-optimize-inp.md): A practical guide on how to use setTimeout, queueMicrotask and scheduler.postTask to break up long tasks and optimize INP. Comparison with measurable examples. - [Optimizing Consent Scripts for Core Web Vitals](https://joanleon.dev/en/consent-scripts-performance.md): Consent management scripts (CMP) compete with critical resources if not prioritized correctly. A server-side strategy to optimize loading based on visit type. - [Chrome DevTools for Debugging Web Performance](https://joanleon.dev/en/chrome-devtools-debugging-2025.md): This article is available in English on the original source at PerfPlanet Performance Calendar 2025. - [Optimize rendering with content-visibility](https://joanleon.dev/en/content-visibility.md): The CSS property content-visibility improves rendering performance. Practical case with metrics and snippets to detect opportunities. - [CSS Media Queries Analysis to Optimize Performance](https://joanleon.dev/en/css-media-queries-analysis.md): Learn how to analyze CSS media queries to detect and optimize unused styles on mobile, improving your website's performance with a simple JavaScript snippet. - [Talks 2023](https://joanleon.dev/en/talks-2023.md): A review of the talks I gave during 2023 - [Interpret Your Metrics Correctly](https://joanleon.dev/en/interpret-your-metrics-correctly.md): A metric number is just a number, until you know how to interpret it. - [Analyzing User Flow Web Performance with Chrome DevTools](https://joanleon.dev/en/chrome-devtools-user-flow.md): In Chrome 97 a new tool appears in DevTools to measure performance in the navigation and interaction experience of visitors to our website - [My Opinion on Tailwind CSS](https://joanleon.dev/en/tailwindcss.md): Utility-First CSS frameworks are gaining a lot of traction, especially Tailwind CSS. Is it a good option? - [I Prefer PostCSS](https://joanleon.dev/en/postcss.md): Let me explain why I prefer PostCSS for writing CSS. - [It's Curious How Forgotten and Mistreated CSS Is](https://joanleon.dev/en/css-mistreated.md): At over 24 years old, CSS continues to be a despised language. - [Detect AVIF Support for Your CSS Images](https://joanleon.dev/en/avif-css.md): Implement the new AVIF image format in your CSS `background-image`. - [CSS Books](https://joanleon.dev/en/css-books.md): A compilation of CSS books that can help you improve your knowledge in the art of styling your projects. - [Learning to Program with Processing and P5js](https://joanleon.dev/en/learning-to-program.md): There are many methodologies and languages for learning to program, which is why the first thing a person who wants to learn to program faces is choosing a language or development platform. - [Agile Design with TDD](https://joanleon.dev/en/agile-design-with-tdd.md): In this article I want to share my opinion of the book 'Agile Design with TDD', from which I've been able to learn the foundations of TDD. - [Clean JavaScript: Clean Code, SOLID and Testing](https://joanleon.dev/en/clean-javascript.md): I want to recommend the book Clean JavaScript, by Miguel A. Gómez, where he teaches us to apply good practices, write robust and easy-to-maintain code. With the aim of developing good software with JavaScript. - [CSS Animations](https://joanleon.dev/en/css-animations.md): With CSS animations we have much more control than with transitions to create animations thanks to @keyframes. - [CSS Transitions](https://joanleon.dev/en/css-transitions.md): CSS Transitions allow property value changes to occur progressively over a specified period of time. - [AVIF, the Definitive Image Format?](https://joanleon.dev/en/avif-definitive-image-format.md): AVIF is a next-generation image format that reduces JPEG images by up to ~50%. - [Web Animation](https://joanleon.dev/en/web-animation.md): We've had animation on the web for a long time, let's take a look at the different ways to do web animation. - [Finally Understanding JPG](https://joanleon.dev/en/finally-understanding-jpg.md): This article is available in English on the original source by Christoph Erdmann. - [CSS Pixel Art](https://joanleon.dev/en/css-pixel-art.md): Pixel Art is a design technique that continues to be used as a resource in many video games. With CSS we can use this technique in a very simple way. - [CSS Houdini, More Than Magic](https://joanleon.dev/en/css-houdini-more-than-magic.md): For many people CSS is a magician's thing, some might even believe it's witchcraft, but that's because they don't know the necessary spells to have real control over CSS. - [Motion Craftsmanship](https://joanleon.dev/en/motion-craftsmanship.md): Little needs to be said about the importance of animation in websites and applications, designers and developers are aware of it, just by opening the browser or applications we can appreciate it. But let's see what's hidden under the definition of Motion Craftsmanship. - [Where to Start Optimizing My Images](https://joanleon.dev/en/where-to-start-optimizing-images.md): As web development professionals, we worry about choosing the best framework, the most current library, applying best practices in JavaScript and CSS, being careful with HTML semantics to improve SEO, improving our content's accessibility, bundling and splitting files to optimize loading, but what about images? ## Páginas - [Sobre mí](https://joanleon.dev/about) - [Tags](https://joanleon.dev/tags) - [Archivo](https://joanleon.dev/archives) - [Buscador](https://joanleon.dev/search)