Ange Chierchia

Développeur Web full-stack

javascript

  • Creating CSS Theme Variables from a JS file

    Bookmarked CSS { In Real Life } | 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.

  • Web Components: Working With Shadow DOM

    Bookmarked Web Components: Working With Shadow DOM — Smashing Magazine.

    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

  • Les composants Web pour les nuls

    Bookmarked https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/.

    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…)

  • Une présentation vidéo en HTML, CSS et JS

    Il y a déjà quelques mois, j’ai eu la tâche de trouver un moyen de présenter différent aspects d’une application que mes collègues et moi développons chez Ibakus Europe.

    L’idée était de faire une sorte de présentation vidéo expliquant les différents menus de l’application et que l’on puisse « naviguer » dans celle-ci, un peu comme une sorte de PowerPoint vidéo. (suite…)