Vue normale

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.
À partir d’avant-hierFlux principal

Onlook - Fini les allers-retours entre Figma et le code

Par : Korben
26 février 2026 à 09:23

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.

Pour ceux qui connaissent Bolt.DIY ou qui se souviennent d' Amplify Studio (le truc de AWS qui tentait de faire le pont Figma vers React), Onlook prend le problème dans l'autre sens. Au lieu de partir du design pour générer du code, on part du code existant et on le modifie visuellement. Du coup, pas de code généré bancal à maintenir, c'est finalement VOTRE codebase qui est éditée.

Le projet est open source sous licence Apache 2.0 sur GitHub et la version open source est gratuite et self-hostable, donc vous pouvez la faire tourner chez vous sans débourser un centime. Après pour ceux qui veulent du cloud managé avec collab temps réel, y'a des plans payants.

Après attention, c'est encore jeune et le support se limite à React et Next.js pour l'instant, donc si votre stack c'est Vue ou Svelte, ça ne marchera pas. Et l'IA mouline un peu sur les layouts complexes mais le projet avance vite, la communauté est active, et pour un outil gratos qui fait le lien entre design et code en open source, y'a pas grand-chose d'équivalent.

Bref, à tester, c'est gratos.

Et merci à Lorenper !

Détectez les articles qui veulent vous énerver

Par : Korben
12 février 2026 à 11:21

Si vous avez l'impression que tout ce que vous lisez en ligne est conçu pour vous énerver... vous avez probablement raison ! Le rage bait, élu mot de l'année 2025 par Oxford, c'est exactement ça. Et RageCheck , un outil gratuit lancé début janvier, se propose justement de le détecter pour vous.

En gros, le principe c'est de coller l'URL d'un article ou d'un connard de réseau social quelconque dans le champ de saisie de ragecheck.com, et l'outil le passe au peigne fin en 3-4 secondes pour repérer les techniques de manipulation émotionnelle. Du langage chargé, du framing "nous contre eux", des formulations catastrophistes... tout ce qui est conçu pour vous faire cliquer en jouant sur l'indignation plutôt que sur l'information.

En fait, RageCheck analyse le texte selon 5 catégories pondérées. Le langage "inflammatoire" et les formulations de type panique/menace pèsent chacun 25% du score final, l'appât à engagement 20%, et les patterns absolutistes ("toujours", "jamais", "TOUS") plus le framing clivant comptent pour 15% chacun.

Du coup, un article qui accumule les "c'est SCANDALEUX" et les "ils veulent DÉTRUIRE votre vie privée"... ça peut vite monter dans le rouge !

Le score va de 0 à 100. De 0 à 33, c'est clean. De 34 à 66, y'a du contenu manipulatoire modéré, et à partir de 67, c'est du putaclic assumé (et vous devriez probablement fermer l'onglet). Le truc bien pensé, c'est que l'outil vous montre EXACTEMENT quels passages ont déclenché l'alerte, avec le détail par catégorie. Par contre, attention, ça ne marche qu'avec des URLs publiques... donc si l'article est derrière un paywall, c'est muerto.

Chez moi c'est toujours supergreen, désolé ^^

Attention, RageCheck ne fait PAS de fact-checking. Il ne vous dira pas si un article dit vrai ou faux. Il se content de détecter les patterns de manipulation, mais pas le mensonge. La nuance est importante, parce que un article parfaitement factuel peut utiliser du framing manipulatoire pour orienter votre réaction.

Notez que le code source est dispo sur GitHub sous licence MIT donc y'a moyen de pousser le concept encore plus loin. Moi j'en ferais bien une extension navigateur qui viendrait automatiquement masquer les contenus problématiques... Ma tension artérielle ne s'en portera que mieux je pense...

En tout cas, j'apprécie que le scoring soit transparent et que ce ne soit pas une boîte noire. Chaque catégorie est modifiable dans le code ce qui permet d'ajuster les dictionnaires de détection par contre, le dico de détection est uniquement en anglais pour l'instant, donc sur des articles francophones ça marche moins bien.

Et vu comment certaines plateformes récompensent carrément la désinformation à l'engagement , avoir un outil qui décortique les ficelles de la manipulation, c'est pas du luxe ! Le rage bait est devenu une INDUSTRIE et les algorithmes adorent ça parce que la colère, ça génère des clics comme un distributeur de bonbons pour les accros au sucre.

Bref, c'est gratuit, c'est open source et surtout ça permet de retourner les techniques des putaclics contre eux-mêmes. Elle est pas belle la vie ?

UxNote - Annotez vos maquettes web sans prise de tête

Par : Korben
1 février 2026 à 18:08

Il y a quelques jours, un lecteur (merci Benjamin !) m'a envoyé un outil qu'il a bricolé lui-même avec Codex d'OpenAI et ça touche une petite corde sensible chez moi, d'où le fait que je vous en parle.

C'est pas souvent que je bosse avec des clients sur autre chose que des articles mais il m'est arrivé par le passé qu'un client m'envoie ses retours par mail, avec des captures d'écran floues, des flèches rouges partout et des commentaires du genre "le truc là, à gauche, je sais pas trop ??".

Alors de mon côté, j'ai testé pas mal de solutions pour évier ça mais j'ai rien trouvé de foufou... Figma par exemple c'est top pour les retours mais faut que le client crée un compte (et ça, c'est jamais gagné), Marker.io c'est bien fichu mais c'est payant. J'avais même essayé Loom à un moment, mais bon, leur demander d'enregistrer leur écran c'était trop compliqué.

Alors que UxNote, lui, règle exactement ce problème sans rien de tout ça !

En fait, ça permet d'intégrer une balise JavaScript dans votre page (juste avant le </body>) et hop, une petite toolbar apparaît.

<script src="https://github.com/ninefortyonestudio/uxnote/releases/download/v1.0.0/uxnote.min-v1.0.0.js"></script>

Votre client peut alors surligner du texte, épingler des éléments avec des badges numérotés, ajouter des commentaires... et surtout, exporter tout ça proprement en JSON ou l'envoyer direct par mail.

Comme ça, fini le chaos habituel des retours clients façon "j'ai annoté le PDF que j'ai imprimé puis scanné". Là, les commentaires sont directement contextualisés sur la page, exactement là où ils doivent être. C'est vrai que des outils d'annotation web existent depuis des lustres, mais UxNote a choisi le stockage 100% local (via le localStorage) plutôt que de monter un backend avec des comptes utilisateurs. Et c'est ce qui fait toute la différence niveau simplicité, avec les autres outils.

Par contre attention, si votre client vide son cache navigateur, il perd ses annotations... Perso je vous recommande donc de faire l'export JSON dès que possible pour éviter les mauvaises surprises.

L'outil propose aussi un mode "assombrissement" qui met en évidence la zone annotée (pratique pour se concentrer), des couleurs personnalisables, et même la possibilité de bloquer certains éléments de l'annotation avec l'attribut data-uxnote-ignore. Ça fonctionne sur les environnements de staging, en local, et même sur les SPA ... sauf si vous avez une CSP ultra stricte, auquel cas faudra autoriser le script et les styles inline dans votre config.

Bref, si vous bossez avec des clients qui ont du mal à exprimer leurs retours autrement qu'en pièces jointes de 15 Mo, UxNote pourrait bien sauver les quelques cheveux qu'il vous reste. Et en plus c'est gratuit, open source et disponible sur GitHub .

Que demande le peuple ???

Merci Benjamin !

❌
❌