front-end

  • CSS Relative Colors

    Bookmarked CSS Relative Colors by Ahmad Shadeed.

    Le “Relative Color Syntax” change la façon dont on pense nos palettes : on ne stocke plus des variantes figées, on décrit des relations. En clair : une seule source (–brand) et des dérivés cohérents pour hover, focus, borders, badges… avec color(from …). Tu ajustes luminosité, saturation, alpha ou canal par canal sans bricoler des HSL magiques ni multiplier les tokens.

    Ce que j’aime dans l’article : il reste ancré dans le réel. Des exemples lisibles, des patterns qu’on rencontre tous les jours (états de boutons, overlays, dégradés, dark mode) et surtout une logique de design system : la couleur devient une fonction, pas une valeur. Tu peux faire évoluer ta teinte de base sans réécrire la moitié du CSS. Et les deltas (légèrement plus sombre, un peu plus saturé) gardent la cohérence de marque.

    Pragmatiquement, je vois trois gains : 1) moins de variables à maintenir, 2) des thèmes plus fiables, 3) une accessibilité plus maîtrisée (contrastes ajustables sans casser l’identité). Mon conseil : commence petit. Définis 1–2 couleurs sources, dérive –brand-hover, –brand-outline, –surface-elevated avec color(from …), et observe la simplification. Une base solide, des variantes “calculées”, et un design qui respire.


  • Creating CSS Theme Variables from a JS file

    Les design tokens, c’est la promesse d’une cohérence. Mais dans la pratique, on se retrouve souvent avec un fichier SCSS, un fichier JS, un fichier Figma… et des incohérences qui s’accumulent. L’idée proposée ici est toute bête mais super efficace : un seul fichier JavaScript, qui définit tes tokens (couleurs, tailles, etc.), et qui crache directement des variables CSS prêtes à l’emploi. Plus besoin de jongler, tout le monde boit à la même source.

    Ce que j’aime, c’est la simplicité. Pas besoin de grosse usine à gaz ni de tooling lourd façon “style dictionary”. Tu écris tes valeurs une fois, tu génères les :root { –variable: valeur }, et basta. Côté dev, tu consommes les tokens en JS et en CSS sans jamais les dédoubler.

    Ça ne remplacera pas une infra complète pour une grosse équipe produit, mais pour un projet à taille humaine, c’est pile le bon compromis : un point de vérité unique, une synchro JS/CSS sans douleur, et une dette technique évitée dès le départ. Bref, ça mérite d’être testé sur ton prochain side project.


  • Bringing Back Parallax With Scroll-Driven CSS Animations

    Franchement, j’avais enterré le parallax avec les carrousels autoplay et les splash pages en Flash. Mais là, j’ai été surpris.

    Avec les scroll-driven animations, le truc retrouve une seconde vie : fluide, natif, et surtout sans les usines à gaz JS d’avant.

    L’article de CSS-Tricks décortique la méthode avec pédagogie en mode : t’as une timeline liée au scroll, tu cales tes keyframes dessus, et roule ma poule.

    Ce que j’ai aimé, c’est qu’on n’est plus dans le « waouh » pour faire waouh.

    C’est clean, subtil, et ça s’intègre bien dans un design qui respecte l’utilisateur.

    Tu peux même jouer avec la perspective ou l’échelle d’un élément selon sa progression dans la page, sans flinguer les perfs.

    Bref, si t’avais lâché l’affaire avec le parallax, c’est le bon moment pour t’y remettre.


  • Web Components: Working With Shadow DOM

    Je suis longtemps passé à côté du Shadow DOM. Trop abstrait, trop “spec moderne” pour mes besoins du quotidien.

    Mais cet article m’a recadré.

    Il explique comment le Shadow DOM te permet d’encapsuler un composant comme un vrai bloc isolé : pas de fuite de styles, pas de conflits de noms, pas de comportements JS qui partent en sucette.

    Et ça, dans une époque où chaque lib veut imposer sa logique, ça fait du bien de voir un truc standard qui tient la route.

    On n’est pas obligés de tout reconstruire avec Web Components demain matin, mais piger comment le Shadow DOM fonctionne, c’est clairement un level-up pour écrire du code plus robuste — et plus pérenne


  • Accessibility essentials every front-end developer should know


  • Navigations on the Web – Jim Nielsen’s Blog

    Bookmarked Navigations on the Web by Jim Nielsen.

    […] a button inside a form, like a link, triggers a round-trip request to the server for a new document — a navigation.


  • Belle trouvaille

    Bookmarked Who knows? by Jeremy Keith.

    Had you heard of these bits of CSS? Me too/neither!

    https://adactio.com/journal/21007

    Je viens de découvrir à mon tour la propriété text-emphasis et le sélecteur ::file-selector-button dont parle Jeremy. Je pense que je vais pouvoir utiliser ce dernier sélecteur dans mon projet actuel.


  • Éviter le soulignement des pseudo-éléments dans un lien

    Je viens de découvrir qu’en ajoutant display: inline-block sur le pseudo-élément ::before ou ::after d’un lien <a></a>, on peut annuler l’affichage du style text-decoration: underline sur le pseudo-élément même si on le veut sous l’élément en lui-même…

    C’est bien après plus de 10 ans de carrière dans le Web…

    https://codepen.io/nighcrawl/pen/dyLvYoV


  • Les interrupteurs « on/off » arrivent nativement !

    Les interrupteurs « on/off » arrivent nativement !

    Le truc que je préfère avec la sortie de Safari 17.4 ? L’attribut switch sur les <input type="checkbox"> !

    On aura plus besoin de gérer l’accessibilité et les styles bien relous à mettre en place sur les cases à cocher qu’on veut afficher comme des interrupteurs pour faire « comme sur iPhone, parce que c’est trop beau ! ».

    Bonne nouvelle donc, hâte de voir les autres navigateur l’implémenter


  • Les composants Web pour les nuls

    En parcourant mon Feedbin ce midi je suis tombé par hasard sur un article d’Eric Meyer concernant les composants Web et grâce à lui j’ai compris comment ils fonctionnent et tout me parait un peu moins flou maintenant.

    Si comme moi vous n’aviez pas encore pu saisir leur intérêt, je vous conseille vivement d’aller le lire ! J’espère pouvoir appliquer ça dans un futur projet au boulot et me faire les dents dessus 🙂

    Je n’ai rien d’autre à ajouter. Juste, lisez le.


  • Modifier l’état d’une checkbox en fonctions de ses checkboxes filles

    Cette semaine je travaillais sur un projet dans lequel une page affiche une liste de documents que l’on peut filtrer à l’aide de checkboxes. Dans cet article je vais vous exposer un cas d’usage que j’ai rencontré et comment je l’ai solutionné.

    (suite…)

  • Mettre en place un « dark mode » simplement

    Cela fait un moment que j’avais mis en place la possibilité de choisir entre un thème sombre et un thème clair pour lire mon blog. Et ça fait presque aussi longtemps qu’il était éclaté au sol, dans le sens où même si on choisissait l’un des modes, les préférences du système prenaient de nouveau le dessus au rechargement de page. On va voir ensemble ce qui n’allait pas et donc ce qu’il ne faut pas faire. (suite…)