Vue normale

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.
À partir d’avant-hierinformatique général
  • ✇Korben
  • TUIStudio - Pour désigner vos applications terminal
    Vous avez déjà essayé de dessiner une TUI (Interface utilisateur pour le Terminal) à la main dans votre IDE ? Genre, calculer les paddings d'une Box ANSI à la mano et compter les caractères Unicode pour aligner trois colonnes ? Pffff quelle galère !! Hé bien cette mauvaise expérience, Javier Alonso Gómez, Staff Design Technologist chez Docker, vient de la transformer en simple drag-and-drop avec son outil TUIStudio . En gros, c'est comme Figma mais pour vos applis terminal. Vous lancez l'éditeur

TUIStudio - Pour désigner vos applications terminal

Par : Korben ✨
15 mai 2026 à 09:35

Vous avez déjà essayé de dessiner une TUI (Interface utilisateur pour le Terminal) à la main dans votre IDE ?

Genre, calculer les paddings d'une Box ANSI à la mano et compter les caractères Unicode pour aligner trois colonnes ? Pffff quelle galère !! Hé bien cette mauvaise expérience, Javier Alonso Gómez, Staff Design Technologist chez Docker, vient de la transformer en simple drag-and-drop avec son outil TUIStudio .

En gros, c'est comme Figma mais pour vos applis terminal.

Vous lancez l'éditeur, vous balancez des composants sur un canvas, et un aperçu ANSI temps réel vous montre ce que ça donnera dans un vrai terminal. Il y a 21 composants prêts à l'emploi (Box, Button, TextInput, Table, Tree, Modal, Tabs, Spinner...), avec un moteur de layout qui supporte Absolute, Flexbox et Grid.

C'est du CSS pour le terminal si vous préférez et le truc cool, c'est que ça reste fidèle au rendu final, donc fini les tableaux qui débordent sans raison !

J'suis pas encore super doué !

Côté thèmes, vous avez également le droit à 8 palettes intégrées (Dracula, Nord, Solarized, Monokai, Gruvbox, Tokyo Night, Nightfox et Sonokai), et le canvas se met à jour live quand vous changez. Sympa, hein !

Niveau export, TUIStudio cible les frameworks Ink (TypeScript), BubbleTea (Go), Blessed (JavaScript), Textual (Python), OpenTUI (TypeScript) et Tview (Go) mais d'après ce que j'ai lu sur le site officiel, la fonction d'export vers tout ça n'est pas encore opérationnelle. Mais ça m'étonne car lors de mes tests, j'ai quand même pu voir que ça fonctionnait... Donc j'sais pas, peut-être que le site web n'a pas été mis à jour et que l'export est bien opérationnel ?

L'export

Ça tourne sur macOS Apple Silicon, Windows et Linux (.deb) et le code est sous licence MIT sur le repo GitHub .

Amusez-vous bien !

  • ✇Korben
  • 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

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

Par : Korben
26 février 2026 à 10: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 !

  • ✇Korben
  • Tiny SVG - Compressez vos SVG sans rien uploader
    Vous avez des SVG qui pèsent trop lourd pour votre site web ? C’est pas graaaave, parce qu’il y a Tiny SVG est un outil en ligne qui compresse vos fichiers vectoriels directement depuis votre navigateur comme ça, pas besoin d’uploader vos œuvres sur un serveur externe puisque vos fichiers ne quittent jamais votre machine. L’outil utilise SVGO en arrière-plan avec plus de 40 plugins configurables. Vous pouvez ainsi activer ou désactiver chaque optimisation selon vos besoins : Suppression des méta

Tiny SVG - Compressez vos SVG sans rien uploader

Par : Korben
24 novembre 2025 à 10:20

Vous avez des SVG qui pèsent trop lourd pour votre site web ?

C’est pas graaaave, parce qu’il y a Tiny SVG est un outil en ligne qui compresse vos fichiers vectoriels directement depuis votre navigateur comme ça, pas besoin d’uploader vos œuvres sur un serveur externe puisque vos fichiers ne quittent jamais votre machine.

L’outil utilise SVGO en arrière-plan avec plus de 40 plugins configurables. Vous pouvez ainsi activer ou désactiver chaque optimisation selon vos besoins : Suppression des métadonnées inutiles, fusion des paths, simplification des transformations, et plein d’autres trucs. Le tout avec une prévisualisation en temps réel qui montre le SVG avant et après compression.

J’ai testé sur mon logo mais comme il est déjà super optimisé, ça ne m’a fait gagné que -0,5 % mais les résultats sont plutôt impressionnants car sur certains fichiers, Tiny SVG peut réduire la taille jusqu’à 70%. Ça dépend évidemment de la complexité du SVG d’origine et des optimisations que vous activez, mais globalement c’est très efficace.

Et y’a pas que la compression puisque Tiny SVG génère aussi du code prêt à l’emploi pour vos frameworks préférés. Vous pouvez ainsi exporter votre SVG optimisé en composant React (JSX ou TSX), Vue, Svelte, React Native ou même Flutter. Trop pratique pour ne plus avoir besoin de convertir manuellement vos icônes en composants.

Y’a aussi des fonctionnalités de transformation telles que la rotation, flip horizontal et vertical, redimensionnement…etc et vous pouvez exporter en Data URI dans plusieurs formats, et également générer des PNG ou JPEG avec les dimensions de votre choix. Le diff viewer intégré permet aussi de comparer le code SVG avant et après optimisation pour voir exactement ce qui a changé.

Côté technique, c’est une Progressive Web App qui fonctionne même hors ligne et le traitement se fait via Web Workers pour ne pas bloquer l’interface. Le projet est développé par hehehai, distribué sous licence MIT, et le code source est sur GitHub donc vous pouvez l’héberger vous-même sur Vercel, Netlify ou Docker si vous préférez avoir votre propre instance.

A tester ici : Tiny SVG !

  • ✇Korben
  • Itoa - Pour convertir une image en ASCII Art
    Vous avez un iPhone qui prend des photos 48 mégapixels, un écran Retina qui affiche 254 pixels par pouce, et des GPU qui font tourner des jeux en 4K mais ce que vous n’avez pas c’est Itoa , un outil web qui fait exactement l’inverse puisqu’il transforme vos images haute-définition en une grille de caractères ASCII monochrome / couleur de 10 symboles maximum (Par exemple : .:-=+*#%@). Car l’ASCII art, c’est littéralement la mise à mort volontaire de l’image. Vous prenez quelque chose qui a besoi

Itoa - Pour convertir une image en ASCII Art

Par : Korben
19 novembre 2025 à 09:16

Vous avez un iPhone qui prend des photos 48 mégapixels, un écran Retina qui affiche 254 pixels par pouce, et des GPU qui font tourner des jeux en 4K mais ce que vous n’avez pas c’est Itoa , un outil web qui fait exactement l’inverse puisqu’il transforme vos images haute-définition en une grille de caractères ASCII monochrome / couleur de 10 symboles maximum (Par exemple : .:-=+*#%@).

Car l’ASCII art, c’est littéralement la mise à mort volontaire de l’image. Vous prenez quelque chose qui a besoin de millions de pixels pour exister et vous le réduisez à une poignée de caractères typographiques et en 2025, ça continue !

Sur que itoa (ça veut dire “image to ascii art”, au fait) fait ça très bien ! C’est donc, vous l’aurez compris, un convertisseur image-vers-ASCII codé en React et Vite qui tourne directement dans votre navigateur. Vous glissez dessus une image JPG, PNG ou GIF, et hop, l’outil vous la transforme en grille de caractères.

Deux modes sont dispo : monochrome pur et dur, ou couleur où chaque caractère hérite de la teinte du pixel d’origine. Vous pouvez aussi contrôler la taille de sortie (petit, moyen, grand) et exporter le résultat en PNG si vous voulez le partager ou l’imprimer.

Techniquement, itoa utilise l’API Canvas HTML5 pour analyser votre image. Ensuite, l’image est redimensionnée en gardant son ratio, puis chaque pixel est analysé. Pour le mode monochrome, l’algorithme calcule la luminance et ensuite l’outil mappe la valeur sur une échelle de caractères allant du plus clair (.) au plus foncé (@). Et pour le mode couleur, chaque pixel conserve sa couleur RGB d’origine via des balises HTML.

Bien sûr, itoa n’est pas le seul convertisseur ASCII du monde. Y’a pas exemple ManyTools.org qui fait le job depuis des années, Folge.me avec son interface moderne et ses options couleur, ou encore ASCII-Art-Generator.org qui peut exporter en SVG.

Bref, si vous aimez la nostalgie tech ou si vous voulez illustrer des .txt, c’est l’outil qu’il vous faut !

A découvrir ici !

  • ✇Korben
  • Ebook-demo – Le moteur de recherche de bouquins décentralisé
    Vous en avez ras le bol de chercher pendant des heures le bouquin que vous voulez lire sans le trouver dans le commerce ? Pourquoi ne pas le télécharger en ligne alors ? Mais oùùùù ? Et bien, j’ai peut-être une solution pour vous les amis et ça s’appelle sans chichi ebook-demo, un nouveau projet de moteur de recherche décentralisé pour les livres électroniques, inspiré de Liber3 (qui est un projet aux sources fermées). Imaginez un peu le truc : vous tapez le titre du livre que vous cherc

Ebook-demo – Le moteur de recherche de bouquins décentralisé

Par : Korben
21 avril 2024 à 09:00

Vous en avez ras le bol de chercher pendant des heures le bouquin que vous voulez lire sans le trouver dans le commerce ? Pourquoi ne pas le télécharger en ligne alors ? Mais oùùùù ?

Et bien, j’ai peut-être une solution pour vous les amis et ça s’appelle sans chichi ebook-demo, un nouveau projet de moteur de recherche décentralisé pour les livres électroniques, inspiré de Liber3 (qui est un projet aux sources fermées).

Imaginez un peu le truc : vous tapez le titre du livre que vous cherchez dans la barre de recherche, vous cliquez sur « Search » et BAM, les résultats s’affichent juste en dessous avec le titre et l’auteur de chaque bouquin correspondant. C’est simple, efficace et ça marche du tonnerre !

Mais attendez, c’est pas tout. Ce qui rend ce projet encore plus cool, c’est qu’il est basé sur des technologies comme React et le SDK Glitter (pour la blockchain du même nom qui sert de base de données décentralisée).

Bon, je vois déjà les petits malins qui se disent « Ok, c’est bien beau tout ça, mais comment ça s’installe concrètement ?« . Pas de panique, c’est là que ça devient un peu technique mais je vais essayer de vous expliquer ça simplement. Déjà, pour faire tourner ce projet sur votre machine, il vous faudra avoir installé Node.js en version 16.x minimum et npm en version 6.x minimum. Ensuite, vous devrez cloner le dépôt du projet depuis GitHub avec la commande

git clone https://github.com/j2qk3b/ebook-demo

puis vous placer dans le dossier du projet avec

cd ebook-demo

Là, vous lancez un petit

npm install

pour installer toutes les dépendances nécessaires et vous êtes prêt à démarrer le serveur de développement avec

npm run dev

Et voilà, si tout se passe bien, vous devriez pouvoir accéder à l’application sur http://localhost:5173.

Fastoche, non ? Ensuite, votre instance ira se connecter aux autres instances, et vous pourrez faire toutes les recherches qui vous passent par la tête. Imaginez un peu les possibilités offertes par un tel outil. Vous êtes étudiant et vous devez faire des recherches pour un mémoire sur la littérature française du 19ème siècle ? Pas de souci, en quelques clics vous pouvez retrouver les œuvres de Victor Hugo, Balzac ou Zola. Ou alors vous êtes un fan absolu de science-fiction et vous voulez découvrir de nouveaux auteurs ? Là encore, ce moteur de recherche sera votre meilleur ami pour dénicher les pépites du genre.

Mais le plus beau dans tout ça, c’est que ce projet est open source et que tout le monde peut y contribuer. Si vous avez des idées pour améliorer l’outil, des suggestions de nouvelles fonctionnalités ou même si vous voulez corriger des bugs. Puis comme c’est décentralisé, c’est le genre de truc incensurable.

Évidemment, comme tout projet en développement, il y a encore du boulot pour faire de ebook-demo l’outil ultime de recherche de livres électroniques. Mais avec une communauté motivée et des contributeurs talentueux, je suis sûr qu’il peuvent y arriver.

❌
❌