sur les SPA<\/a>
\nqui chargent tout en async. Mais pour la majorit\u00e9 des sites, c’est vraiment efficace.<\/p>\nLe projet est open source sous licence MIT, donc vous pouvez l’auditer, le forker, le modifier comme bon vous semble. Et niveau l\u00e9galit\u00e9, analyser du HTML\/CSS public pour de la veille concurrentielle ou de la documentation, c’est consid\u00e9r\u00e9 comme du fair use dans la plupart des juridictions, donc vous \u00eates good !<\/p>\n
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 \u00e0 garder sous le coude.<\/p>\n
Merci \u00e0 Lorenper pour le partage !<\/p>\n","protected":false},"excerpt":{"rendered":"
Vous bossez sur un projet et vous vous dites “Tiens, le site de [ins\u00e9rez ici une grosse bo\u00eete] a un design plut\u00f4t bien foutu, j’aimerais bien voir comment ils ont structur\u00e9 leurs css”. H\u00e9 bien y’a un outil pour \u00e7a, 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\u00eame les patterns de composants UI. Le truc s’installe en une ligne avec npm (npm install -g dembrandt) et apr\u00e8s vous avez juste \u00e0 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\u00e9tecter les styles et vous ressort tout \u00e7a bien structur\u00e9 avec des scores de confiance pour chaque couleur. Ce que j’aime bien, c’est que \u00e7a 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, \u00e7a marche pas sur les sites qui utilisent Canvas ou WebGL pour le rendu, et faut pas s’attendre \u00e0 des miracles sur les SPA qui chargent tout en async. Mais pour la majorit\u00e9 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\u00e9galit\u00e9, analyser du HTML\/CSS public pour de la veille concurrentielle ou de la documentation, c’est consid\u00e9r\u00e9 comme du fair use dans la plupart des juridictions, donc vous \u00eates 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 \u00e0 garder sous le coude. Merci \u00e0 Lorenper pour le partage !<\/p>\n","protected":false},"author":1,"featured_media":2006,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-2005","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/2005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=2005"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/2005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/2006"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=2005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/dembrandt-extraction-design-system-cli\/dembrandt-extraction-design-system-cli-2.png\")
<\/p>\n