Vous bossez sur un projet et vous vous dites "Tiens, le site de [insérez ici une grosse boîte] a un design plutôt bien foutu, j'aimerais bien voir comment ils ont structuré leurs css".

Hé bien y'a un outil pour ça, et il s'appelle Dembrandt .

Dembrandt en action

En gros, c'est un petit outil en ligne de commande qui va analyser n'importe quelle URL et en extraire tout le design system : les couleurs (primaires, secondaires, variables CSS), la typographie (familles, tailles, graisses), les espacements, les bordures, les ombres et même les patterns de composants UI.

Le truc s'installe en une ligne avec npm (npm install -g dembrandt) et après vous avez juste à taper dembrandt stripe.com par exemple. En moins d'une seconde, l'outil va alors faire un rendu de la page avec Playwright, analyser le DOM, détecter les styles et vous ressort tout ça bien structuré avec des scores de confiance pour chaque couleur.

Ce que j'aime bien, c'est que ça exporte directement en JSON ou au format W3C Design Tokens si vous voulez l'utiliser avec Style Dictionary. Pratique pour alimenter votre propre design system ou pour documenter celui d'un client qui n'a jamais pris le temps de le faire... (il en faut)

Y'a aussi quelques options sympas comme --dark-mode pour extraire la palette sombre, --mobile pour simuler un viewport iPhone, ou --browser=firefox si le site que vous voulez analyser a des protections Cloudflare qui bloquent Chromium.

Bon, ça marche pas sur les sites qui utilisent Canvas ou WebGL pour le rendu, et faut pas s'attendre à des miracles sur les SPA qui chargent tout en async. Mais pour la majorité des sites, c'est vraiment efficace.

Le projet est open source sous licence MIT, donc vous pouvez l'auditer, le forker, le modifier comme bon vous semble. Et niveau légalité, analyser du HTML/CSS public pour de la veille concurrentielle ou de la documentation, c'est considéré comme du fair use dans la plupart des juridictions, donc vous êtes good !

Bref, si vous faites du design system, de l'audit UX ou juste de la veille sur ce que font les autres, c'est un outil à garder sous le coude.

Merci à Lorenper pour le partage !

Vous développez un truc en local et vous avez besoin de le montrer à quelqu'un au travers d'Internet, genre pour tester un webhook, faire une démo rapide, ou juste impressionner votre collègue à distance ? Hé bien au lieu de vous farcir une config nginx + certificats SSL + ouverture de ports sur le routeur (Beurk !), y'a Tunnl.gg qui fait tout ça en une SEULE ligne de commande.

Vous tapez une commande SSH, et hop, vous avez une URL publique qui pointe vers votre serveur local. Pas de client à installer, pas de compte à créer, pas de token à configurer, juste SSH, que vous avez forcément déjà sur votre machine.

Donc pour exposer votre app qui tourne sur le port 8080, vous faites :

ssh -t -R 80:localhost:8080 proxy.tunnl.gg

Et c'est parti ! Le service vous file une URL avec un sous-domaine aléatoire, genre abc123.tunnl.gg, et tout ce qui arrive dessus est redirigé vers votre localhost:8080. Et magie magie, HTTPS est automatique, donc pas besoin de vous soucier des certificats.

Du coup, si vous connaissez déjà ce genre d'outils, vous pensez peut-être à Bore que j'ai présenté il y a pas longtemps, ou Portr qui fait sensiblement la même chose, ou encore Chisel pour les amateurs de tunnels TCP/UDP via HTTP. Tous ces outils font du tunneling, mais Tunnl.gg se distingue par son approche "zéro friction" sans binaire à télécharger, et sans compte à vous créer.

Pour le moment, le service est gratuit pour un usage personnel mais les développeurs prévoient des plans payants plus tard avec des features comme les domaines personnalisés, les sous-domaines persistants et des limites de débit plus élevées. On verra bien mais en attendant, pour tester un truc vite fait ou faire une démo, la version gratuite suffira largement.

Bon, y'a quand même quelques trucs à savoir. Primo, ça ne marche qu'avec du trafic HTTP/HTTPS pour l'instant. Deuxio, le TLS est côté serveur, donc techniquement ils peuvent voir votre trafic même s'ils disent ne pas l'inspecter. Donc pour des données vraiment sensibles, gardez ça en tête. Et tertio, comme tout service de ce type, y'a des limites de fair-use pour éviter les abus.

Bref, si vous cherchez un moyen rapide d'exposer un port local sans vous prendre la tête avec la config, Tunnl.gg fera le taf. Au pire vous aurez découvert une alternative de plus à ngrok , au mieux ça deviendra votre outil par défaut pour les démos express...

Merci à Lorenper pour le partage !