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 !

  •  

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.

  •  

Node.js Path Traversal: Prevention & Security Guide

Un excellent et relativement long article (mais très complet) qui détaille comment limiter le risque qu'un attaquant accède à tout le système de fichier de votre serveur Node.js lors de l'upload d'un fichier.

Les conseils prodigués sont validé de manière générale, pas uniquement pour Node.


Permalink
  •  

Node.js Path Traversal: Prevention & Security Guide

Un excellent et relativement long article (mais très complet) qui détaille comment limiter le risque qu'un attaquant accède à tout le système de fichier de votre serveur Node.js lors de l'upload d'un fichier.

Les conseils prodigués sont validé de manière générale, pas uniquement pour Node.


Permalink
  •  

LibPDF - The PDF library TypeScript deserves

Une nouvelle lib TypeScript pour travailler avec les PDF en Node.js ou Bun. Elle permet notamment de gérer les formulaires, les signatures, etc.

Elle ambitionne également de générer des PDF à partir de HTML dans le futur.


Permalink
  •  

LibPDF - The PDF library TypeScript deserves

Une nouvelle lib TypeScript pour travailler avec les PDF en Node.js ou Bun. Elle permet notamment de gérer les formulaires, les signatures, etc.

Elle ambitionne également de générer des PDF à partir de HTML dans le futur.


Permalink
  •  
❌