Ce tutoriel explique l’utilité des pseudo-classes fonctionnelles en CSS pour cibler des éléments de manière plus efficace et lisible :

• :is() : Permet de regrouper plusieurs sélecteurs (logique OU) pour appliquer les mêmes styles, réduisant la redondance.
  Exemple : :is(h1, h2, h3) { color: [#333](./add-tag/333); }

• :not() : Exclut un élément d’une sélection, utile pour appliquer des styles à tous sauf à quelques exceptions.
  Exemple : li:not(:last-child) { border-bottom: 1px solid [#ccc](./add-tag/ccc); }

• :where() : Similaire à :is(), mais avec une spécificité nulle, idéal pour des styles de base facilement surchargeables.
  Exemple : :where(header, main, footer) { margin: 1rem 0; }

• :has() : Cible un élément parent en fonction de ses descendants, une nouveauté puissante pour des sélections contextuelles.
  Exemple : article:has(img) { border: 2px solid red; }

Ces sélecteurs améliorent la concision et la maintenabilité du code CSS.

Une liste de sites sur lesquels acheter de la musique en haute qualité

Ce guide explique comment monter une partition Windows chiffrée avec BitLocker sous Linux, en utilisant Dislocker ou Cryptsetup. Idéal pour les dual-boot ou la récupération de données.

🔹 Outils : dislocker, cryptsetup, ntfs-3g
🔹 Astuce : Désactiver le Fast Startup de Windows pour éviter les problèmes.
🔹 Alternative : Utiliser cryptsetup (depuis la v2.3.0) si Dislocker pose problème.

Se motiver pour une tâche pénible ? (Ashley Janssen)

L’auteure compare cela à son vélo d’appartement détesté : on redoute avant, on est soulagé·e après. Ses astuces :

• Identifier le blocage (fatigue, peur, ennui) et agir dessus.
• Rendre la tâche moins désagréable : musique, récompense.
• Démarrer petit : 5 minutes suffisent souvent à lancer l’élan.
• Routine > motivation : planifier plutôt qu’attendre l’envie.

"La clé ? Commencer, même mal. Le reste suit."

Josh W. Comeau analyse la nouvelle règle CSS @starting-style, qui permet d’utiliser des transitions pour animer l’apparition d’éléments (ex: fondu, déplacement), là où on utilisait avant des @keyframes.

Le piège :
Contrairement aux @keyframes, les styles définis dans @starting-style ne sont pas prioritaires et peuvent être écrasés par des sélecteurs plus spécifiques (ID, styles inline). Résultat : l’animation ne se déclenche pas.

Exemple :
Un bouton génère des particules avec une transition sur transform. Si la position finale est définie en JavaScript (style inline), @starting-style est ignoré.

Solutions :

• Forcer avec !important (peu maintenable),
• Utiliser des variables CSS pour égaliser la spécificité,
• Revenir aux @keyframes, plus simples et compatibles.

Verdict :
@starting-style est pratique, mais les @keyframes restent souvent plus fiables.

Chaque modèle d’IA a ses spécificités : format préféré (XML pour Claude, Markdown pour GPT), sensibilité à la position des informations (les modèles retiennent mieux le début et la fin d’un texte), et une « personnalité » propre (prudence, concision, etc.). Plutôt que de forcer un modèle à sortir de ses biais, mieux vaut adapter ses prompts à ses particularités. Une approche qui optimise performance, coût et conformité, et transforme l’interaction avec l’IA en un véritable artisanat.

Dans cet article, Andy Clarke explore le concept d’animations ambiantes : des mouvements subtils et lents qui apportent de la vie à un design sans distraire l’utilisateur. Contrairement aux animations interactives ou narratives, les animations ambiantes se fondent dans l’arrière-plan, créant une atmosphère discrète mais immersive. Clarke illustre son propos en transformant une couverture de comic book statique en une animation CSS/SVG où les éléments (plumes, fumée, expressions) s’animent de manière naturelle et presque imperceptible. L’objectif ? Renforcer la personnalité d’une marque ou d’un projet sans nuire à l’expérience utilisateur, en privilégiant des transitions douces, des boucles fluides et une approche minimaliste.

L’auteur partage des conseils pratiques : privilégier les éléments qui bougeraient naturellement (feuilles, fumée, ombres), éviter les mouvements brusques, et respecter les préférences utilisateur (comme le mode prefers-reduced-motion). Il insiste sur l’importance de la modération et de la performance, en utilisant des SVG bien structurés et du CSS optimisé. Un exemple concret et un démo CodePen accompagnent l’article, montrant comment ces micro-interactions, bien dosées, ajoutent de la profondeur et du charme à un design.

L’IA excelle dans les tâches complexes et calculatoires (résoudre des équations, analyser des données), mais peine sur ce qui nous semble intuitif : reconnaître une ironie, plier une chemise, ou gérer l’imprévu. Ce paradoxe, identifié par Hans Moravec dès 1980, s’observe aujourd’hui dans l’automatisation du travail :

• Les métiers cognitifs routiniers (juristes juniors, traducteurs) sont menacés par l’IA, qui prend en charge les tâches répétitives.
• Les métiers manuels et relationnels (artisans, soignants, éducateurs) résistent, car ils reposent sur l’intuition, la motricité fine et le lien humain.

L’enjeu n’est pas de craindre l’IA, mais de l’utiliser comme une prothèse cognitive : automatiser le répétitif pour se recentrer sur la créativité, l’accompagnement et le sens. La vraie valeur du travail humain se déplace vers ce que les machines ne savent pas faire : interpréter, improviser, créer du lien.