Vue lecture

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

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 !

  •  

Dwitter Beta - Le creative coding en 140 caractères

C'est fou ce qu'on peut faire avec trois bouts de ficelle et un peu de jugeote. Ou plutôt, avec 140 caractères de JavaScript et un élément . Si vous ne connaissez pas encore Dwitter , c'est le moment de sortir de votre grotte les amis... surtout si vous aimez les challenges et le code !

Le concept c'est que vous avez une fonction u(t)t est le temps qui passe, et vous devez pondre un truc visuellement bluffant sans dépasser la taille d'un tweet (époque pré-Elon, le fameux 140 caractères). Et là, c'est la claque car les mecs qui participent à ce défi arrivent à caser des univers entiers, des forêts en parallaxe ou des simulations de colonies de fourmis dans un mouchoir de poche.

Et c'est du code pur jus, généré en temps réel par votre propre navigateur. J'ai d'ailleurs testé le fameux "Ants!" et on sent que KilledByAPixel (le boss final du site) a poussé l'optimisation dans ses derniers retranchements avec des astuces de sagouin comme eval(unescape(escape...)).

Dwitter, c'est né en 2016 lors de la demoparty Solskogen où son créateur lionleaf a d'ailleurs remporté la Wild Compo. Le projet est totalement open source (disponible sur GitHub pour les curieux) et la communauté est super active sur Discord.

En jetant un oeil au top de l'année sur la version Beta (beta.dwitter.net), on tombe sur des perles comme "Solar Orbit" qui vous colle un système planétaire en quelques octets :

Ou encore ce genre de forêts qui défile en parallaxe :

Le plus cool, c'est que tout est lisible et modifiable en direct. Vous voyez un truc qui vous plaît ? Hop, vous cliquez sur le code, vous changez une variable au pif et vous regardez le chaos s'installer. C'est l'école du partage version demoscene mais évitez quand même d'ouvrir 50 onglets en même temps si votre CPU date un peu, car certains shaders déguisés en JS peuvent être assez violents.

Bref, si vous avez 5 minutes à perdre (ou 2 heures, je vous connais), allez faire un tour sur le site. Ça vide la tête, ça pique un peu les yeux parfois, mais ça redonne foi en la créativité humaine !

Amusez-vous bien !

  •  

Détectez les articles qui veulent vous énerver

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 ?

  •  

Éditer des documents Word en local dans votre navigateur

Si vous avez déjà essayé d'intégrer une fonction d'édition de documents Word dans une application web, vous savez que c'est souvent la croix et la bannière. En fait, pour obtenir un truc correct, on finit souvent par s'appuyer sur des solutions lourdes côté serveur ou des APIs propriétaires qui coûtent un bras. Mais ça, c'était avant que je tombe sur docx-js-editor.

Ce petit bijou open source est un éditeur WYSIWYG conçu spécifiquement pour l'écosystème React qui permet d'ouvrir, de modifier et d'enregistrer des fichiers .docx directement dans le navigateur. Le gros point fort revendiqué par le projet, c'est l'absence de dépendance serveur pour toute la partie édition. Tout le boulot se fait donc en local chez le client, ce qui est plutôt classe côté confidentialité des données puisque vos documents ne transitent pas par un backend obscur.

Techniquement, l'outil s'appuie sur un système qui semble proche de ProseMirror (il permet d'ailleurs d'y injecter des plugins ProseMirror). Perso, j'ai choisi de vous en parler parce que la gestion native du format DOCX est ici au cœur du moteur, et pas juste une couche d'export rajoutée à l'arrache. Le rendu est assez propre d'ailleurs et le projet vise une compatibilité maximale avec Microsoft Word.

On y retrouve l'essentiel évidemment : formatage de texte (gras, italique, polices, couleurs), gestion des tableaux, des images et des hyperliens. Bref, tout ce qu'il faut pour faire un vrai traitement de texte sans avoir à sortir l'artillerie lourde. (et c'est pas peu dire !)

Pour l'installer, c'est hyper fastoche : un petit npm install @eigenpal/docx-js-editor et hop, le dossier débarque dans votre node_modules/ et c'est réglé. D'ailleurs, l'architecture est extensible. Y'a même un plugin pour le surlignage syntaxique des tags docxtemplater, ce qui facilite grandement la vie si vous bossez sur des modèles de documents complexes. C'est très pratique pour les applis métier qui génèrent par exemple des factures ou des contrats à la volée !

Du coup, si vous cherchez une solution open source (licence MIT) pour manipuler des documents Word sans passer par une usine à gaz, allez jeter un œil à ce projet. C'est aussi un bon complément pour ceux qui utilisent déjà des scripts pour organiser leurs fichiers et qui ont besoin d'une interface d'édition rapide.

Ah et y'a une démo live qui tourne et le code est dispo sur GitHub .

Amusez-vous bien !

  •  

Web Flight Simulator - Pilotez un F-15 dans votre navigateur

Survoler la Terre entière depuis son navigateur web, sans RIEN installer, c'est possible et en plus c'est gratuit !

Web Flight Simulator c'est un simulateur de vol qui tourne directement dans votre browser, et qui vous colle aux commandes d'un F-15 au-dessus de la planète entière. Un vrai terrain 3D avec des données satellites, du relief, des textures... le tout grâce à CesiumJS pour la partie géospatiale et Three.js pour le rendu 3D. Du coup vous pouvez survoler n'importe quel coin du monde, que ce soit les Alpes, Manhattan ou le désert australien.

Le cockpit du F-15 avec HUD, minimap et terrain satellite en temps réel

Et contrairement à un Microsoft Flight Simulator où faut limite un brevet de pilote pour décoller, là c'est ARCADE à fond. Flèches directionnelles pour piloter, W/S pour les gaz, Espace pour l'afterburner... hop, vous êtes en l'air en 10 secondes. Pas de checklist de 45 items avant le décollage (oui oui, les vrais pilotes comprendront).

D'ailleurs le F-15 est équipé d'un canon Vulcan et de missiles Sidewinder. Y'a même des leurres thermiques si vous vous sentez d'humeur Top Gun. Les ennemis IA sont encore en développement, mais le système de combat est déjà fonctionnel. Perso, j'aime bien mitrailler dans le vide au-dessus de la Tour Eiffel, chacun ses hobbies...

Le HUD est pas mal foutu avec l'altitude, la vitesse, un compas et même une minimap satellite. Côté son, le moteur réagit aux gaz, y'a du vent aérodynamique et surtout l'alarme GPWS qui vous gueule "PULL UP" quand vous foncez dans une montagne.

Si vous êtes curieux de savoir comment ça marche sous le capot, c'est un mix assez malin de CesiumJS qui gère le streaming du terrain à l'échelle planétaire et de Three.js qui s'occupe de l'avion, des particules et des effets visuels. Le tout tourne avec Vite en dev, du JavaScript pur, et c'est open source avec une licence non commerciale. J'ai préféré tester sur Firefox plutôt que sur Chrome, parce que le WebGL y est mieux géré, et ça tourne nickel sur mon MacBook Air M2.

Attention quand même, sauf si vous avez une machine un peu costaud, ça peut ramer dans les zones urbaines denses. Sur un vieux laptop avec une carte graphique intégrée... ça plantera pas, mais ce sera plus un diaporama.

Pour ceux qui connaissent FlightGear qui est un des simulateurs de vol libres les plus connus, là on est sur un truc complètement différent. FlightGear c'est pour les passionnés qui veulent apprendre le vrai pilotage, alors que Web Flight Simulator c'est pour se marrer 5 minutes (ou 2 heures, je juge pas ^^). Et si vous voulez un peu de nostalgie, allez voir l'histoire des premiers Microsoft Flight Simulator de 1982 à 1989... on a fait du chemin depuis.

Une version Lune et Mars ce serait le pied. D'ailleurs CesiumJS propose déjà des datasets Moon Terrain et Mars depuis 2024-2025... donc affaire à suivre côté Web Flight Simulator.

Bref, allez tester , c'est gratuit et ça marche sur n'importe quel navigateur qui gère le WebGL.

  •  

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

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 !

  •  
❌