De superbes illustrations fautes uniquement en CSS

Très intéressante comparaison entre Tailwind et Bootstrap.

Tailwind n'est pas un UI kit opinated comme Bootstrap mais plutôt une librairie de styles/widgets pour créer des composants.

Si je devais faire un parallèle avec Vue.js:

• Bootstap => Composant API
• Tailwind => Composition API

Tailwind permet donc d'avoir plus de flexibilité dans le design d'une application même si il demande un effort plus conséquent au démarrage.

(Merci Théo et Seb)

Des conseils pour offrir la meilleure expérience possible lorsqu'on utilise des polices de caractères personnalisées.

• Utilisez des petites polices (20-40Kb)
• Servez les vous même (pitié pas Google Font..)
• Ne proposez pas de polices intermédiaires (font-display: block;)
• Indiquez au browser de pré-charger les polices (<link rel="preload" ...>)

Le but est de charger les polices au plus vite car aucun texte ne s'affiche avant et c'est volontaire pour éviter le layour shift (des éléments qui changent de place quand la police est chargée si elle ne fait pas exactement la même taille que la temporaire)

Un guide alternative pour comprendre comment fonctionne les flexbox en CSS.

L'auteur d'une lib de CSS in JS pour React explique les désavantages de ce fonctionnement.

Les deux principaux désavantages sont le poids supplémentaire des libs nécessaires et l'impact non négligeable sur les performances de rendu.

Après la lib offre quand même une DX très confortable donc à chacun de faire ses compromis.

(Merci Ludo pour le partage)

Je savais pas qu'il existe des fonts dont on peut faire varier les couleurs en CSS!