Ange Chierchia

Développeur Web full-stack

css

  • Un-Sass’ing my CSS

    Bookmarked Un-Sass’ing my CSS | Always Twisted.

    Ça m’a fait sourire. On a tous eu notre période Sass : mixins partout, variables, nesting à outrance. C’était grisant, ça donnait l’impression d’être plus « pro ». Mais le temps passe, le CSS a grandi, et beaucoup de ces artifices ne servent plus à grand-chose.

    L’article raconte ce cheminement : désapprendre Sass pour réapprendre le CSS brut. Pas comme une régression, mais comme un gain de clarté. Quand tu enlèves la couche intermédiaire, tu te rends compte que ton code respire mieux, que le navigateur fait déjà pas mal de choses tout seul.

    Ça m’a fait réfléchir à ma propre boîte à outils. On accumule, on optimise, on complexifie… et puis un jour on redécouvre que la simplicité, c’est aussi une forme de puissance. Peut-être qu’au fond, le vrai luxe en dev, c’est d’avoir moins à maintenir.

    Un rappel utile : parfois, coder mieux, c’est surtout coder moins.

  • 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

    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.

  • Bringing Back Parallax With Scroll-Driven CSS Animations

    Bookmarked https://css-tricks.com/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.

  • Tous les éditeurs de code que j’ai utilisé

    Ceci est un post que j’ai eu envie d’écrire pour aucune autre raison que celle d’être tombé sur l’un des premiers article du blog de Paweł Gryzbek. Je ne vais pas partager mon « setup » mais plutôt tous les IDE, au sens large, que j’ai utilisé jusqu’à maintenant pour le développement Web.

    • Microsoft FrontPage 🤢
    • Dreamweaver MX
    • Komodo Edit
    • Espresso
    • Coda
    • Adobe Brackets
    • Sublime Text 2
    • Sublime Text 3
    • Atom
    • Visual Studio Code

    J’ai adoré utiliser Espresso pour le CSS et Coda pour le PHP, mais j’avoue que mon préféré jusqu’ici c’est VSCode. Déjà avant que GitHub soit racheté par Microsoft j’adorais coder dans Atom. Ça fait maintenant plus de 6 ans que je code dans VSCode et je ne compte pas changer !

  • Should masonry be part of CSS grid? – Ahmad Shadeed

    Bookmarked Should masonry be part of CSS grid? by Ahmad Shadeed.

    If we go with the new syntax (display: masonry), it will need a few years to become supported in all major browsers. Let’s be honest, a layout is a major part of a web page that makes it hard to apply progressive enhancement. You either have a masonry or not, right?

    Making it part of CSS grid will at least guarantee that the layout will work, but without the masonry stuff.

  • CSS Cap Unit – Ahmad Shadeed

    Bookmarked CSS Cap Unit by Ahmad Shadeed.

    A look at how I solved a design problem with CSS cap unit.

  • Double your specificity with this one weird trick – Cirrus’s Realm

    Bookmarked Double your specificity with this one weird trick | Cirrus’s Realm.

    Je me souviens avoir déjà utilisé cette technique par le passé, mais c’était un rappel nécessaire pour moi. J’utilise beaucoup trop souvent !important à mon goût.

    Une autre technique que j’utilise c’est d’ajouter un sélecteur d’attribut en plus, mais c’est moins joli.

  • Guillemets, quotes, etc.

    Bookmarked How to display language-specific quotes in CSS | Stefan Judis Web Development.

    Je viens de tomber sur cet article de Stefan Judis et ça m’a rendu fou ! Fou parce que depuis quelques années je fais beaucoup d’intégrations multilingues en anglais, allemand et français et je n’ai jamais eu connaissance de ces valeurs open-quote/close-quote.

    J’ai hâte de les utiliser dans mes futures intégrations !

  • É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

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