Priorización de recursos

¿Si estamos en React, y usamos algo como Styled components, que se puede usar allí para emular este comportamiento?

💇‍♀️ Priorización de recursos

Se debe tener un balance entre lo que necesita la app y como le podemos ayudar al navegador

Todas las herramientas que serán vistas dentro de todo el curso serán de doble filo como podemos ayudar al navegador también podemos hacer que su trabajo sea más duro

• No todos los recursos tienen la misma prioridad
• Por ejemplo, en el CSS pasa que metemos todos los estilos para todos los casos que se pueden llegar a dar
  • Estilos dark mode
  • Estilos de desktop
  • Estilos de tablet
  • Estilos de mobile
• Pénesenos en el caso de alguien que navega en el móvil, el deberá descargar todos estos estilos, así no le sea de interés o relevantes
• Con la priorización de recursos en CSS podemos ayudarle a navegador a darles “pistas” para decirle cual tiene mayor prioridad

<!-- Especificamos el atributo media -->
<link
  rel="stylesheet"
  href="/desktop.css"
  media="screen and (min-width: 600px)"
/>

• Esta técnica es simple pero eficiente
• Nos ayuda bastante a decirle al navegador que puede ser importante que cargue y que no
• Se debe considerar que cada vez que hagamos esto sera un nuevo request que debamos hacer hacia el servidor

RESUMEN: Podemos decirle al navegador que recursos tengan una prioridad mayor con el atributo media en los elementos link, pero se debe tener cuidado porque cada archivo nuevo sera una nueva petición HTTP

Lo bueno que si utilizamos http2 eso favorece a la descarga asíncrona de varios archivos a la vez. Cosa que antes no sucedia y que mejor era recomendable tener la menor cantidad de requests posibles. Obvio, en algunas cosas siempre aplica lo de menos es más.

Yo siempre había colocado los medias al final del css. Siempre hay algo nuevo que aprender.

Yo creo que no es necesario hacerlo siempre y cuando los códigos de css en la media query para desktop sean muchos, si son unas simples líneas no hay necesidad de hacerlo!

WOOOOOWWWm esto no lo sabia, que genial

El código que utilizó el maestro para el dark mode es:

<link media="(prefers-color-scheme: dark)" rel="stylesheet" href="/css/dark.css">

Es la misma media query pero con diferente valor.

wooooo, el profe es una máquina, su sitio web esta increible

Increíble clase, en resumen, un gran poder conlleva una gran responsabilidad.

Si conocia lo de los media queries en los link, pero no sabia lo de la prioridad

instale un plugin en el navegador que cambia el tema de los sitios webs y miren como se ve platzi

esta genial, como se haria esto con webpack?

excelente herramienta las aplicadas… voy a trabajar en eso

Tengo el siguiente error, ¿a qué se deberá?

👌