Bonne nouvelle pour ceux qui en ont ras la casquette de se taper des allers-retours entre Figma et VS Code ! Parce qu'avec Onlook , l'éditeur visuel open source qui vous permet de modifier le design de vos apps React directement dans le navigateur, vous allez pouvoir cliquer simplement sur un élément de design, et en changer la couleur, la typo...etc et hop, ça modifiera le code derrière.

Pas mal, non ?

Vous ouvrez votre projet Next.js dans Onlook, et vous vous retrouvez avec une interface à la Figma, sauf que c'est branché sur votre code source. Vous sélectionnez un titre, un bouton, n'importe quel composant, et vous modifiez son style visuellement... couleurs, padding, marges, polices, tout y passe.

Et en fait, le truc qui change tout par rapport à un inspecteur CSS classique, c'est que quand vous cliquez sur "Publish", les modifications atterrissent DIRECTEMENT dans vos fichiers .tsx. C'est donc du vrai code propre, pas du CSS inline dégueulasse.

Côté technique, l'outil gère nativement TailwindCSS (parce que bon, en 2026, si vous faites du React sans Tailwind, vous aimez forcément le cuir qui claque et la souffrance). Vous éditez en mode visuel, ça génère les bonnes classes Tailwind, et vous gardez un contrôle total. Y'a aussi un mode LLM intégré... "rends ce bouton bleu avec des coins arrondis" et hop, c'est fait. Comme ça, pas besoin de chercher si c'est rounded-lg ou rounded-xl dans la doc.

L’accessibilité web c’est comme le tri sélectif… tout le monde dit que c’est génial mais azy, j’ai pas le temps. Et pourtant, c’est super important car près de 80% des pages web ont des problèmes de contraste de texte.

C’est le souci noumber ouane détecté sur le million de sites analysés chaque année par WebAIM . En gros, si vous avez un site, y’a de fortes chances que certains visiteurs galèrent à lire votre contenu, et je ne vous parle pas uniquement des personnes malvoyantes, hein… y’a aussi le daltonisme qui touche environ 8% des hommes et 0,5% des femmes. Rajoutez à ça les gens qui lisent leur téléphone en plein soleil, ceux qui ont une dalle de laptop toute pourrie, et vous comprendrez vite que le problème concerne pas mal de monde.

Alors est ce que vous connaissez les normes WCAG ?

Hé bien c’est le standard international pour l’accessibilité web. Ainsi pour être conforme au niveau AA (le minimum recommandé), votre texte doit avoir un ratio de contraste d’au moins 4,5:1 avec son arrière-plan. Pour le niveau AAA (l’idéal), c’est 7:1. Et là vous vous dites “super, je vais calculer ça à la main pour mes 47 couleurs de palette, mais va bien te faire cuire le cul, Korben”. (Oui, c’est comme ça que je vous imagine quand vous lisez mes articles).

Heureusement, y’a un outil qui vient de sortir et qui va vous changer la vie : CM-Colors . Vous lui donnez vos couleurs, et il les ajuste automatiquement pour qu’elles soient accessibles, le tout en modifiant les teintes le moins possible pour garder votre design intact.

L’installation est super fastoche…. C’est du Python donc un petit pip install cm-colors et hop c’est réglé. Ensuite, vous pouvez l’utiliser soit en ligne de commande directement sur vos fichiers CSS, soit via l’API dans votre code. Par exemple, vous avez un gris #5f7887 sur un fond #e6f0f5 qui passe pas les tests, hop, CM-Colors le transforme automatiquement en #5c6f7b et maintenant c’est conforme AA. Et la différence à l’œil nu est quasi invisible. Bref, c’est nickel pour l’accessibilité !

from cm_colors import ColorPair

# Your colors
pair = ColorPair("#999999", "#ffffff")

# Fix them and preview in the terminal
fixed_color, success = pair.make_readable(show=True)

print(f"Use {fixed_color} instead of #999999")
# Output: Use #8e8e8e instead of #999999

Le truc vraiment cool, c’est que l’outil gère plusieurs niveaux de lisibilité. Y’a “Readable” qui correspond au AA, “Very Readable” pour le AAA, et même une option large_text=True pour les gros titres qui ont des exigences moins strictes. Vous pouvez donc adapter selon vos besoins et pour les devs qui bossent sur de gros projets, y’a aussi une fonction make_readable_bulk qui permet de corriger plusieurs paires de couleurs d’un coup.

from cm_colors import make_readable_bulk

my_colors = [
 ("#777", "#fff"),
 ("#888", "#000"),
]

results = make_readable_bulk(my_colors)

for color, status in results:
 print(f"{color} is {status}")

Vous lui balancez une liste de tuples (texte, fond) et il vous retourne tout ça au propre. Et si vous voulez traiter directement vos fichiers CSS, la commande cm-colors styles.css génère un nouveau fichier styles_cm.css avec toutes les couleurs corrigées. L’outil peut même générer des rapports HTML pour visualiser les changements avant/après.

Alors oui, je sais, se taper de l’accessibilité c’est un peu relou car on a toujours l’impression que c’est du temps perdu sur des détails. Mais dites vous que ça impacte vraiment l’expérience de millions d’utilisateurs, donc ça vaut le coup d’y passer 5 minutes, surtout avec un outil automatisé !

Bref, CM-Colors c’est gratuit, c’est open source sous licence GPL-3, et ça peut vous éviter pas mal de galères. Toute la documentation est ici et y’a même une démo interactive sur leur site si vous voulez tester avant d’installer.

Si vous aimez tout ce qui est rétro, vous avez peut-être déjà essayé de donner un look MS Dos , Windows 95 , Windows 98 , Windows XP ou encore Windows 7 à votre site web.

Ce que vous n’avez jamais osé faire, c’est de lui donner un look Apple System 6 !

Et ça c’est quand même un OS qui est sorti en 1988 soit 7 ans avant Windows 95 et ce qui est incroyable c’est qu’il avait déjà une interface parfaitement mature avec des fenêtres, des icônes, des menus déroulants et tout ça était en noir et blanc, mais c’était pas moche, bien au contraire !

Et ce qu’on oublie c’est que Windows 3.0 a débarqué deux ans plus tard en 1990 avec une interface… étrangement familière. Alors on ne va pas se mentir, Microsoft s’est LARGEMENT inspiré de ce qu’Apple faisait depuis 1984 avec le premier Macintosh qui se sont eux-mêmes inspiré des interfaces vues lors de la visite de Steve Jobs au Xerox PARC.

Apple qui ne doute de rien, a même attaqué Microsoft en justice pour ça en 1988. Le procès a été perdu, mais bon, l’histoire retient qui a copié qui !

Du coup, plutôt que de continuer à cloner les clones, system.css ferme la boucle en revenant à la source. Ce projet est développé par Saket Choudhary et prend son inspiration directe des guidelines de design d’Apple pour System 6, la dernière version monochrome de macOS avant l’arrivée de System 7 en couleur en 1991.

Le truc cool avec system.css, c’est que ça fonctionne exactement comme 98.css. Y’a aucun JavaScript… Vous incluez juste le fichier CSS via CDN ou npm, et hop, tous vos composants HTML prennent instantanément l’apparence d’une interface Macintosh de 1988. Des boutons arrondis, des fenêtres avec une bordure de 19 pixels, des barres de titre, des menus déroulants incroyables, des checkboxes carrées, des boites de dialogues avec double bordure. Tout est là !

L’installation se fait en deux lignes. Via CDN, vous balancez ce code dans votre HTML:

<link rel="stylesheet" href="https://unpkg.com/@sakun/system.css">

`npm i @sakun/system.css`

Alors rien à voir avec le logiciel de streaming, mais sachez que Harry Roberts, le consultant en performance web derrière CSS Wizardry (et accessoirement un mec qui a bossé avec Google, la BBC et l’ONU), vient de sortir Obs.js .

L’idée de ce truc, c’est de transformer votre site web en véritable caméléon. Au lieu de servir la même expérience à tout le monde, la bibliothèque va détecter en temps réel les conditions de navigation de chaque visiteur. Batterie presque vide ? Connexion 2G pourrie ? Le site s’adapte automatiquement.

Pour cela, Roberts utilise des APIs natives du navigateur qui existent depuis des années mais que presque personne n’exploite vraiment. La Battery Status API et la Network Information API sont là, dans Chrome et consorts, à attendre qu’on leur trouve une utilité. Et voilà, Obs.js débarque et les combine de façon intelligente pour créer quelque chose de vraiment utile.

Mais alors concrètement, ça donne quoi ?

Et bien ce script ajoute des classes CSS directement sur votre balise <html>, comme ça…

<html class="has-latency-low
 has-bandwidth-high
 has-battery-charging
 has-connection-capability-strong
 has-conservation-preference-neutral
 has-delivery-mode-rich">

.has-battery-critical * {
 animation: none !important;
 transition: none !important;
}

body {
 background-image: url('banner-4k.jpg');
}

.has-delivery-mode-lite body {
 background-image: url('banner-optimized.jpg');
}

Y’a quelques mois, je me suis amusé à reprendre le projet DeepSite d’Enzostvs et à le transformer complètement pour fonctionner en 100% local. J’ai baptisé ça LocalSite , et ça permet en gros de générer des pages web ou des éléments HTML / CSS / JS à l’aide d’une IA mais en local.

Ça s’appuie donc sur Ollama pour faire tourner les modèles d’IA directement sur votre ordinateur, comme ça, pas de connexion cloud, pas d’abonnement à payer, pas de données qui partent on ne sait où en Chine ou ailleurs. Vous tapez une description de ce que vous voulez, vous sélectionnez un modèle Ollama, et hop, votre site web se génère sous vos yeux.

L’installation est assez simple. Il vous faut d’abord Ollama installé sur votre machine et ensuite, vous récupérez un modèle, par exemple deepseek-r1:7b avec la commande

ollama pull deepseek-r1:7b.

Et une fois Ollama lancé avec

ollama serve

il ne reste plus qu’à installer LocalSite avec npm :

git clone https://github.com/Korben00/LocalSite.git
npm instal
npm run dev

Ensuite, direction localhost:3001 et c’est parti.

Pour l’interface, vous avez donc un éditeur Monaco intégré (le même que dans VS Code), une preview en temps réel qui s’adapte aux différentes tailles d’écran (desktop, tablette, mobile), et la possibilité de basculer entre génération et édition manuelle du code. C’est super pratique pour peaufiner le résultat une fois que l’IA a fait le gros du travail.

Pour ceux qui se demandent quels modèles utiliser, d’après les benchmarks 2025 , CodeLlama 34B reste une référence pour la génération de code HTML/CSS/JavaScript. Mais si votre machine est plus modeste, les versions 7B ou 13B font déjà très bien le job. Qwen2.5-Coder est aussi une excellente alternative, surtout si vous voulez intégrer du code plus complexe dans vos pages. Vous pouvez aussi tenter avec des modèles “Thinking” comme GPT OSS si ça vous chauffe…

Bref, là où DeepSite original nécessite obligatoirement une connexion à Hugging Face et utilise les serveurs API de DeepSeek (donc ça coûte aussi des sous), mon petit LocalSite fait tout en local. Vos données restent chez vous, vous pouvez bosser offline, et surtout, pas de limite d’utilisation. Vous pouvez donc générer autant de sites que vous voulez, tester différents modèles, expérimenter sans compter comme dirait Macron.

L’aspect vie privée n’est pas négligeable non plus car ça permet de prototyper rapidement, et avoir une solution 100% locale évite pas mal de questions juridiques sur la confidentialité des données.

Techniquement, l’architecture repose sur Node.js côté serveur et communique avec Ollama via son API locale. Le code généré est du pur HTML/CSS/JavaScript vanilla, donc compatible partout. Et vous pouvez directement copier-coller le résultat ou télécharger le projet HTML complet (j’ai ajouté un import / export de projets zip). Pas de framework lourd, pas de dépendances obscures, juste du code web standard.

Pour les développeurs qui veulent pousser plus loin, le code source est bien sûr disponible et modifiable. Vous pouvez ajouter vos propres templates, personnaliser les prompts système, ou même intégrer d’autres modèles compatibles avec Ollama.

Il vous faudra quand même un minimum de RAM pour faire tourner les modèles (comptez 8 Go pour les modèles 7B, 16 Go pour les 13B, et 32 Go pour les gros modèles 33B+) mais vu les capacités de génération et l’indépendance totale vis-à-vis du cloud, ça vaut le coup surtout que les modèles dispo dans Ollama progressent rapidement et deviennent de plus en plus optimisés. Je pense par exemple à GPT-OSS.

Bref, j’ai pris une idée cool (DeepSite), et je l’ai réadapté à l’aide de Claude Code et de mes maigres connaissances, pour la rendre accessible et respectueuse de la vie privée et du coup, je trouve ça encore plus cool ^^. Par contre, je suis un garçon assez occupé et je ne suis pas mainteneur de projet open source donc si vous voulez des modifs dedans ou si vous voyez des bugs, faudra vous y coller vous-même ^^.

Si ça vous dit de tester, c’est par ici.

Theme Park est une méga collection de thèmes CSS pour donner un coup de pep’s à tous vos outils chouchous : Deluge, Emby, Flood, Jackett, Jellyfin, Lidarr, Nzbget, Nzbhydra2, Ombi, Organizr, Overseerr, Plex, Portainer, Prowlarr, Qbittorrent, Radarr, Readarr, Rutorrent, Sabnzbd, Sonarr, Tautulli, Transmission, Unraid, Whisparr, et une tripotée d’autres.

Y’en a pour tous les goûts, du plus classieux au plus funky. Avec juste quelques lignes de code, vous allez pouvoir affirmer votre style unique.

Adieu la grisaille, bonjour les couleurs flashy et les designs innovants !

Et le kif, c’est que c’est hyper simple à mettre en place. Vous avez l’embarras du choix niveau installation : Docker, scripts personnalisés, Nginx, Apache… Bref, que vous soyez un newbie ou un pro du terminal, vous allez pouvoir en profiter en deux temps trois mouvements. Et si vous avez besoin d’un coup de main, la doc est là pour vous guider pas à pas.

Un exemple avec Plex :

Ou encore une personnalisation de Bitwarden :

Mais attendez, c’est pas fini ! Le vrai plus de Theme Park, c’est sa communauté de passionnés. On parle de vrais artistes qui partagent leurs créations avec générosité. Vous allez pouvoir piocher dans un catalogue de thèmes toujours plus étoffé, ou même proposer vos propres chefs-d’œuvre.

Si ça vous intéressez, rendez-vous sur https://theme-park.dev/ et vous pourrez commencer à bidouiller et personnaliser vos apps pour les rendre unique.

Et si aujourd’hui, on parlait un peu de l’extension CSS Compatibility Checker pour Visual Studio Code ? Un outil juste dingue qui va vous aider à voir en un clin d’œil si votre code est compatible avec tous les navigateurs. Plus besoin de passer des heures à éplucher la doc ou de croiser les doigts en espérant que ça passe, cette petite merveille va vous changer la vie !

Imaginez un peu le topo : vous êtes tranquillou en train de tapoter votre CSS, vous balancez une propriété backdrop-filter pour flouter votre background avec classe et là bim 💥, l’extension vous remonte direct que c’est pas compatible avec certaines vieilles versions de navigateurs.

Ou alors vous utilisez un mot-clé un peu exotique genre unset et hop, elle vous alerte que c’est potentiellement casse-gueule. C’est ti pas beau ça ?

CSS Compatibility Checker s’adresse donc aux développeurs frontend un peu soucieux de la compatibilité de son code. Je sais, ils ne sont pas nombreux ^^. En un survol de souris, vous avez accès à toutes les infos dont vous avez besoin : si telle syntaxe, fonction ou propriété est dépréciée, non-standard, expérimentale ou pas supportée partout. Et c’est valable pour un tas de versions de navigateurs différentes !

Pour en profiter, vous devrez installer l’extension depuis la marketplace de VS Code, et ensuite il vous suffit d’ouvrir un fichier CSS, SCSS ou LESS et de laisser le curseur survoler l’élément qui vous intéresse. Et là, magie, une petite bulle s’affiche avec toutes les infos de compatibilité. De quoi prendre les bonnes décisions pour votre projet !

Alors certes, CSS Compatibility Checker ne va pas non plus révolutionner le monde du développement web du jour au lendemain mais pour tous ceux qui en ont un peu ras la casquette de se farcir des heures de tests sur 15 versions d’Internet Explorer, c’est définitivement une extension à avoir sous la main. Et puis c’est gratuit et open-source en plus, alors que demande le peuple ?

Merci à Lorenper pour le partage !

— En partenariat avec Penpot —

Depuis mon dernier article sur Penpot et ses fonctionnalités de Flex Layout, l’outil n’a cessé d’évoluer pour offrir encore plus de possibilités aux designers et développeurs. Aujourd’hui, je souhaite vous présenter en détail une fonctionnalité très attendue : les CSS Grid Layout.

Pour rappel, Penpot est un outil libre et open source de conception d’interfaces pour applications web et mobiles. Intuitif et puissant, il permet de créer rapidement des prototypes et maquettes interactives, tout en générant le code CSS correspondant, prêt à être intégré dans vos projets.

Si les Flex Layout permettaient déjà de créer des designs responsives en adaptant les éléments à la taille de l’écran, les CSS Grid Layout vont encore plus loin en offrant un contrôle total sur le positionnement et le dimensionnement des composants. Concrètement, les CSS Grid Layout vous permettent de définir une grille sur laquelle placer vos éléments. Vous pouvez spécifier le nombre de lignes et de colonnes, leur taille, les gouttières entre elles. Chaque élément peut alors occuper une ou plusieurs cases de cette grille, s’étendre sur plusieurs lignes ou colonnes.

Cette approche offre une grande flexibilité pour créer des mises en page complexes et adaptatives. Vous pouvez par exemple concevoir facilement une page avec un header sur toute la largeur, une sidebar sur la gauche, un contenu principal au centre et un footer en bas, le tout en quelques clics et sans une ligne de CSS.

Autre atout des CSS Grid Layout : la possibilité de nommer chaque zone de votre grille. Fini les .col-md-4 ou .row-2 peu parlants, vous pouvez utiliser des noms comme « header », « main-content » ou « sidebar » pour structurer votre design de façon sémantique.

Pour vous aider à prendre en main cette fonctionnalité, je vous ai préparé une nouvelle vidéo tuto dédiée aux CSS Grid Layout. Je vous y montre comment créer vos premières grilles, les configurer, placer vos éléments et profiter de la puissance des CSS Grid Layout dans vos conceptions. Même si vous n’êtes pas familier avec le CSS Grid, vous verrez que Penpot rend son utilisation très intuitive.

Découvrez la vidéo ici ! Et pour vous inscrire sur Penpot, c’est par ici !

Écrire de la CSS, c’est comme frotter ses doigts sur une râpe à fromage. C’est délicat.

Et quand notre feuille de style est finie, on est content de nous, on s’ouvre une bière et on se dit qu’on a vraiment fait du bon boulot et que finalement, y’avait pas besoin de payer cet intégrateur freelance.

GRAVE ERREUR ! Car en soumettant votre site à l’analyse de Wallace, vous verrez toutes les boulettes que vous avez commises dans votre CSS. En effet, Wallace est ce genre de petit outil en ligne bien pratique qui à partir d’une simple URL de site web, analyse en profondeur l’ensemble de votre feuille de style pour vous fournir des stats d’abord, mais également des critiques (constructives, rassure-vous) sur la qualité de votre code.

Vous pouvez même cliquer sur les éléments mis en avant par Wallace et celui-ci vous les montrera directement dans votre CSS.

Ainsi, en suivant ses recommandations, vous saurez ce qu’il vous reste à faire pour optimiser encore un peu plus votre CSS et la faire ressembler à une oeuvre d’art plutôt qu’à la version papier de France Souar.

Comme ça, vous pourrez même tenter d’améliorer les notes de maintenabilité, de complexité et de performances qu’il vous donne. Voici celles de mon site, sans n’avoir rien changé. Paaaas maaaal. :

Voilà, c’est un excellent outil d’analyse de CSS qui non seulement permet d’augmenter les performances de chargement de votre site, mais surtout vous aider à alléger la complexité de celle-ci pour en faciliter la maintenance. Et pour les plus fifous qui aiment passer par le terminal ou automatiser ce genre d’analyse, il existe même un projet Wallace en ligne de commande ici.

Merci à Maitre Tofu pour l’info !