Archives

La propiedad CSS content-visibility mejora el rendimiento de renderizado. Caso práctico con métricas y snippets para detectar oportunidades.

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.

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.

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.

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.

Referencia rápida de términos, acrónimos y conceptos relacionados con LoAF y web performance.

Un repaso a las charlas que he hecho durante el 2023

El número de una métrica no es más que un número, hasta que sabes cómo interpretarlo.

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

Los frameworks CSS basados en "Utility-First" están cogiendo mucha tracción, y en especial Tailwind CSS, ¿es una buena opción?

Déjame que te explique el motivo de porqué prefiero PostCSS para escribir CSS.

Con más de 24 años, CSS sigue siendo un lenguaje despreciado.

Implementa el nuevo formato de imágenes AVIF en los `background-image` de tu CSS con este plugin PostCSS.

Implementa el nuevo formato de imágenes AVIF en los `background-image` de tu CSS.

Recopilación de libros CSS que te podrán ayudar a mejorar tus conocimientos en el arte de dar estilos a tus proyectos.

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.

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.

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.

Con las animaciones CSS tenemos mucho más control, que con las transiciones, para crear animaciones gracias a los @keyframes.

Las Transiciones CSS permiten que los cambios de valor de una propiedad CSS se realicen progresivamente durante un período de tiempo especificado.

Hace mucho tiempo que tenemos animación en la web, echemos un vistazo a las diferentes maneras de hacer animación web.

AVIF es un formato de imágenes de nueva generación que reduce hasta un ~50% el peso de las imágenes JPEG.

Traducción al castellano del gran artículo original "JPG endlich verstehen" de Christoph Erdmann.

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.

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.

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.

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?