Aujourd’hui, j’ai fait la revue de code d’un collègue… Et il utilisait mal Bootstrap. Il avait oublié un principe fondamental de ce framework : le mobile-first. Quand j’ai vu ça dans son code 😅: 📌 Le problème : En Bootstrap, les classes de type col-md-6 ou col-lg-3 sont déjà mobile-first. Ça veut dire que : 👉col-md-6 signifie 100% de largeur en dessous de md, puis 50% à partir de md. 👉 col-lg-3 signifie 100% de largeur en dessous de lg, puis 25% à partir de lg. ⛔ Donc col-12 est totalement inutile. 📌 La bonne approche Il aurait juste fallu écrire : ✅ Le comportement reste le même sur mobile, sauf qu’on évite une classe redondante. 📌 Pourquoi c'est important ? 👉Moins de classes inutiles → Code plus propre. 👉Meilleure lisibilité → Plus facile à comprendre. 👉Respect du principe mobile-first → On exploite vraiment Bootstrap comme il a été conçu. Si tu utilises Bootstrap, retiens bien ça : 👉 Pas besoin d'ajouter col-12 si tu mets déjà col-md-* ou col-lg-*. Aujourd’hui, j’ai corrigé ça dans le code de mon collègue. Demain, tu feras peut-être attention dans le tien. 😊 Et toi ? Est-ce que tu faisais aussi cette erreur ?

Tu répètes les mêmes sélecteurs en CSS ? Alors il est temps que tu découvres ça ! Trop de développeurs CSS continuent d’écrire des sélecteurs longs, répétitifs et difficiles à maintenir. Mais avec :is() et :where(), tu peux simplifier ton code et le rendre plus lisible, plus efficace et plus flexible. 📌 :is() → Simplifie tes sélecteurs Le sélecteur :is() permet de regrouper plusieurs sélecteurs dans un seul. ⌚ Avant : button:hover, a:hover, input:hover { color: red; } 💪 Avec is : :is(button, a, input):hover { color: red; } ✅ Avantage : Plus besoin de répéter les sélecteurs, c’est plus propre et plus facile à maintenir. 📌 :where() → Comme :is(), mais sans impact sur la spécificité La différence entre :where() et :is() ? :where() fonctionne comme :is(), mais avec une spécificité toujours égale à 0. Exemple : :where(h1, h2, h3) { margin: 0; } 📌 Pourquoi c’est utile ? Parce que :where() te permet de définir des styles par défaut sans écraser d’autres styles plus spécifiques et te permets aussi d'éviter le fameux !important. 📌 Ce que tu dois retenir ✅ :is() → Regroupe plusieurs sélecteurs en un seul. ✅ :where() → Comme :is(), mais sans impact sur la spécificité. ✅ Résultat → Code plus propre, plus lisible et plus facile à maintenir. Si tu n’utilises pas encore :is() et :where(), tu compliques ton CSS pour rien. Fais simple. Si je t'ai appris quelque chose, n'hésitez pas à me le dire en commentaire 💪

🧠 Tu ajoutes encore * ou (optionnel) à la main dans tes formulaires ? Spoiler : tu perds du temps, et tu rends ton HTML plus dur à maintenir. Tu veux un code plus propre, plus accessible, et surtout… plus DRY ? 👉 Regarde ce petit hack CSS avec :has() et :after. Fini les duplications dans le HTML. Hello la maintenabilité et l'accessibilité ! Et si tu ne connais pas encore :has()… Il est peut-être temps de t’y mettre, non ? 😏 📸 Swipe pour voir la solution en image 💬 Et viens me dire en commentaire si tu ferais autrement ! #Angular #frontend #webdev #css #cleanCode #html #accessibility #formulaires #astuceDev #has #dry #maintainability #DevTips

Développeur Senior Front-End et tu ignores ces unités CSS ? Il est temps de te mettre à jour. Les unités de viewport comme vh/vw (100vh = 100% de la hauteur de l’écran) sont très pratiques. Mais elles ont un défaut majeur sur mobile : elles ne prennent pas en compte la barre d’outils du navigateur. Pour résoudre ce problème, de nouvelles unités sont disponibles : - Small viewport (svh/svw) : prend en compte la barre d’adresse et la barre d’outils. - Large viewport (lvh/lvw) : ne prend pas en compte la barre d’adresse et la barre d’outils. - Dynamic viewport (dvh/dvw) : s’adapte en fonction de la visibilité des barres d’outils. Ces nouvelles unités ne prennent pas en compte la barre de défilement. Selon la situation, il peut être préférable d'utiliser l'une de ces unités ou d'autres unités que les unités de viewport classiques. Avec ces nouvelles unités, tu peux améliorer l’expérience utilisateur sur les appareils mobiles en prenant en compte les éléments d’interface du navigateur. Et toi ? Tu connaissais ces nouvelles unités ?

🚀 Angular v20 est là et marque un tournant majeur pour le framework. Avec cette version, on ne parle plus simplement de "features", mais de vision à long terme : ✅ Signals officiellement stables ✅ Hydratation incrémentale en SSR ✅ Mode "zoneless" en preview ✅ Diagnostic DevTools intégré ✅ Syntaxe de template enrichie (in, void, **, etc.) Angular devient plus rapide, plus moderne, plus explicite. Et surtout : plus adapté aux standards du web d’aujourd’hui. 🌍 Ce que j’admire dans la communauté internationale Angular Des experts comme 👉 Minko Gechev (Angular team) 👉 Manfred Steyer (architecture, NX, standalone) 👉 Deborah Kurata (approche pédagogique et bonnes pratiques) partagent des contenus qui vont au-delà de la doc : cas d’usage concrets, best practices, architecture scalable… Et leur contenu donne envie de tester, d'apprendre, de pousser Angular plus loin. 🇫🇷 Et nous, côté francophone ? On a des talents solides et engagés. Des profils comme : 👉 Gérôme Grignon (créateur de contenus pédagogiques, contributeur régulier à la communauté Angular) 👉 Gaëtan Redin 👨🏼‍💻 (développeur passionné, formateur, et évangéliste Angular) 👉 Arthur Lannelucq (Tech Lead, très actif sur la veille, l’architecture et les bonnes pratiques Angular) Ils partagent, ils expliquent, ils expérimentent avec Angular et ça inspire. À travers eux (et bien d'autres), on sent une vraie expertise francophone émerger. Alors pourquoi ne pas élargir cette voix ? 🎯 Valoriser ce qu’on sait faire 🎯 Contribuer à la communauté 🎯 Faire rayonner Angular en français, avec exigence et passion 💬 Et vous, vous suivez qui dans le monde Angular ? Vous partagez déjà du contenu sur Angular v20 ? 📢 Mentionnez-moi : je relayerai avec plaisir ! #Angular #Angular20 #Signals #Zoneless #Frontend #WebDev #DevCommunautaire #NgFrance #NgCommunity #NgTips