CSS Triggers: layout, paint y composite

Este curso es lo máximo. Lo único malo es que si no viste la peli te comes spoilers 😄

• Composite: Ordena las partes de la página. Propiedades como opacity y transform.

• Paint: Rellena píxeles. Implica colores, imágenes, textos, sombras…

• Layout: Diseño de la página. Ancho, margin, padding, border…

Hay una extensión de VSCode donde te muestra su procesamiento que debe utilizar el navegador para que se ejecute en nuestra pantalla. La extensión se llama CSS Triggers

Aquí la pagina que la profe usa
👇
CSS Triggers

Notas de la clase

Recomiendo ver esta lectura, cuenta con GIF y ilustraciones que te permitirán entender mejor como funcionan los procesos.
link: https://developers.google.com/web/updates/2018/09/inside-browser-part3

Resumen de la clase

Existen algunas propiedades en css que hacen que las paginas tarden mas en cargar. Esto se debe a que tienen que pasar por ciertas “capas” de renderizado hasta que se pinten en la pantalla.
.
En pocas palabras, las propiedades que tengan relacion con una gran cantidad de pixeles nos van a afectar en el performance de la pagina web. Por eso el background afecta al desempeño de la pagina web.
.
Este tema también se ve en el curso pasado, aunque no se toca muy a fondo.

CSS Triggers

Estos son los procesos que influyen en el renderizado de la web, podemos centrarnos principalmente en:

• Layout → Este se encarga del diseño de nuestra pagina, sus dimensiones y organizacion.
• Paint → Se encarga de rellenar todos los pixeles, entra en juego el tema de colores, imagenes, sombras y mas.
• Composite → Este se encarga de ordenar todas las partes de nuestra pagina, podemos relacionarlo con propiedades como transform u opacity

El LCP (Largest Contentful Paint) mide la velocidad de despliegue del contenido más extenso de una página web. Es decir, marca el tiempo que tarda en renderizar la imagen o el bloque de texto más grande con relación al momento en que comenzó a cargarse la página

¿Qué es CLS? # CLS es una medida de la ráfaga más grande de las puntuaciones de cambio de diseño para cada cambio de diseño inesperado que se produce durante toda la vida útil de una página. Se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente

• Layout: Es el proceso de determinar la posición y tamaño de los elementos en la página web, así como su relación entre ellos. Este proceso es importante para definir la estructura de la página y se realiza mediante propiedades CSS como display, position, float, flexbox y grid.
• Paint: Es el proceso de dibujar los píxeles en la pantalla basándose en el diseño establecido en el proceso de layout. En esta etapa se aplica el color, sombras, bordes, entre otros estilos a los elementos. Este proceso puede ser costoso en términos de rendimiento, por lo que es importante tener en cuenta las propiedades CSS que influyen en esta etapa, como background-color, box-shadow, border y transform.
• Composite: Es el proceso de combinar todos los elementos de la página en una sola imagen para mostrarla en la pantalla. En esta etapa se determina el orden en que se superponen los elementos, se aplican las transparencias y se muestran los elementos que están en la misma capa. En este proceso se utilizan propiedades CSS como z-index, opacity y transform.

Les comparto mi proyecto, lo único es que no sé por qué en celular el score no funciona, como debería, solo aparece la cuenta si cambio de pantalla y luego vuelvo al navegador.
Si alguien sabe que pasa se lo agradezco.
Proyecto: https://mateorol9.github.io/bunny-game/

Y los spoilers 🤔 , alguien quiere pensar en los spoilers 😥

no se si a todos les pasa pero no me deja reproducir la clase numero 9 y 10 😕

siempre veo mis clsases en el ordenador, lo intente ver por la APP y nada 😦