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 ?

🛑 Elon Musk n’est plus propriétaire de X (Twitter) ‎ Je disais hier, ce monsieur m’épate 🤯 Et là… il a encore frappé. Sa société d’IA, xAI, vient de racheter X dans une opération à 33 milliards de dollars. Un simple jeu d’écriture pour les médias. Mais quand tu creuses : Musk vient peut-être de prendre de vitesse toute l’industrie de l’IA. 💥 Pourquoi c’est un move stratégique : ➡️ X = valorisé 33 milliards ➡️ xAI = valorisé 80 milliards ➡️ Deal 100 % en actions, sans la dette de 12 milliards de X ➡️ Musk garde le contrôle complet des deux Mais surtout… il gagne un trésor que les autres n’ont pas : Un flux massif de données humaines en temps réel. 💬 600M d’utilisateurs → opinions, émotions, comportements → mis à jour chaque seconde. C’est exactement ce qu’il faut pour entraîner des modèles IA vraiment humains. Pendant que les autres scrapent Reddit ou Common Crawl… Musk a branché directement le cerveau collectif mondial sur ses serveurs. Et maintenant ? ✅ Des modèles plus réalistes ✅ Une IA connectée à la vraie vie ✅ Une longueur d’avance sur OpenAI, Anthropic et Google Et ce n’est pas pour intégrer un assistant IA dans X. C’est pour changer les règles du jeu. 🧠 Musk ne joue pas au même jeu que les autres. Il est en train de redéfinir la chaîne de valeur de l’intelligence artificielle. Tu valides ce move ou pas du tout ? 👇 #IA #xAI #ElonMusk #Twitter #Données #TechNews #BusinessStrategy #DataDriven #OpenAI #ProductThinking #StratégieDigitale #ReconversionTech

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 ?