En 2021, Mozilla a estimé que le mode compact de Firefox intéressait trop peu de monde pour mériter sa place dans l'interface. Le bug qui actait sa suppression a énervé pas mal de monde, mais la justification à l'époque, c'était que cette densité est "difficile à découvrir, et on suppose qu'elle est peu utilisée".

Faut dire que ce mode compact réduit sacrément l'espacement des barres d'outils et des onglets pour gagner de la place à l'écran. Mozilla le destine explicitement aux petits écrans.

Mais devant la levée de boucliers, Mozilla a dû faire machine arrière mais à moitié ^^. En avril 2021, un second bug acte le compromis : ceux qui utilisaient déjà le mode compact le gardent, les autres doivent aller l'activer à la main dans about:config via browser.compactmode.show.

Puis au bout d'un moment dans le menu de personnalisation, l'option réapparaît en juin 2021 dans Firefox 89 sous le doux nom de "Compact (not supported)". C'est la version qui embarquait la refonte Proton dont je vous parlais à l'époque .

Nous sommes 5 ans plus tard, et Mozilla remet le couvert avec le mode compact ! En effet, le nouveau design de Firefox est arrivé aujourd'hui dans Nightly, et ce mode compact fait partie du package. "Les gens nous ont dit que ça leur manquait, et on les a écoutés", explique l'équipe.

Sauf que ce n'est pas exactement un retour à la case départ. Dans le code de Nightly 155, le mode compact ne revient pas dans le menu de personnalisation. En réalité, il déménage dans les réglages, sous une rubrique "Window density" qui propose Automatique, Standard, Compact et Tactile.

Mais surtout Firefox sait maintenant basculer en compact tout seul. C'est une préférence fraîchement débarquée, browser.compactmode.auto.threshold, qui fixe le déclencheur à 0.05. Cela veut dire que si la barre d'onglets s'apprête à bouffer plus de 5 % de la hauteur de votre fenêtre, le navigateur passe en densité réduite sans rien vous demander.

Même logique sur la largeur avec la barre latérale repliée avec un garde-fou plutôt propre qui fait que si un utilisateur a choisi lui-même une densité, il ne se fait jamais écraser son réglage.

Le reste de la refonte, baptisée Project Nova en interne , n'est pas mal non plus. Les onglets prennent une forme plus douce avec un léger dégradé sur l'onglet actif, la palette s'inspire du feu avec des violets fumés, et les icônes sont redessinées pour tenir la route en thème clair comme en sombre. Mozilla a d'ailleurs publié les teintes avec leurs codes, du Cream #FFF4EE au Midnight Purple #210340.

Les réglages sont réorganisés au passage, avec une entrée dédiée aux contrôles IA pour couper entièrement ces fonctions, et un réglage du niveau de protection contre le pistage. Mozilla annonce aussi 9 % de gain sur les temps de chargement du contenu principal des pages sur un an.

Bon voilà, ce que je peux vous dire, c'est que comme d'habitude, avec Firefox, les gens vont encore gueuler pour rien. En 2014, la refonte Australis avait provoqué le même genre de problème, au point qu' une extension entière avait été codée pour restaurer l'ancienne apparence .

La différence, cette fois, c'est que Mozilla range la personnalisation du côté des réglages officiels au lieu de la laisser aux extensions et à about:config.

Pour voir tout ça, il vous faut la version Nightly et rien d'autre. Dans le code source, la préférence globale browser.nova.enabled n'est activée que sur les builds Nightly, elle reste à false partout ailleurs. Le déploiement large est annoncé pour cette année, sans date. En attendant, la branche stable continue d'avancer de son côté avec les conteneurs natifs arrivés dans Firefox 153 .

Source

Je déménage bientôt, et comme je quitte ma jolie campagne pour aller dans un endroit plus petit et sans nature (ouin), je dois me débarrasser de pas mal de matériel... Ponceuse, débroussailleuse, taille-haie, tronçonneuse, canapé, tracteur tondeuse.... la totale quoi. Et Le Bon Coin, même si à un moment, je vais devoir y passer, ça me stresse. Je me suis déjà fait menacer par un connard, quand je vendais ma Clio y'a longtemps et entre les acheteurs fantômes et les négociateurs relous, je trouve que les gens s'y comportent comme des bêtes. Du coup, pour commencer en douceur, j'ai choisi la méthode old school à savoir faire un petit catalogue recto verso glissé dans les boîtes aux lettres des voisins.

Sauf qu'aligner des colonnes sur un logiciel de mise en page un soir de semaine, ça heurte très violemment ce que je peux encaisser émotionnellement en ce moment ^^. L'idée m'est donc venue de prendre un petit abonnement et de tester Figma MCP (la passerelle qui laisse un agent IA piloter Figma à votre place) branché à Claude Code : vous donnez votre brief (idées, textes, prix) et un dossier de photos, et l'agent construit la mise en page à votre place.

Comme ça, plus besoin de toucher à rien.

Et si je fais cet article, c'est parce que j'ai été impressionné ! Ça fonctionne super bien. J'ai pas eu besoin de faire 50 aller-retour du genre "décalle ce truc de 2 px vers la gauche" et l'IA s'est démerdée pour tout faire rentrer sur un A4 recto verso.

Puis après, j'ai fait le même tour de magie avec la plaquette commerciale qui sert à vendre du sponsoring sur le site (le Patreon , aussi généreux soit-il, ne permet pas encore d'en vivre sans annonceurs, sniiiif). Je lui ai donné mes data, je lui ai dit ce que je voulais et Claude Code a réalisé le design et assemblé les slides à partir de tout ça.

Figma MCP, pour ceux qui débarquent, ça désigne le Model Context Protocol appliqué à Figma. C'est un standard ouvert qui permet à un agent IA comme Claude Code de discuter directement avec un logiciel, ici Figma. En clair, l'agent peut lire ce qui se passe dans votre fichier ET écrire dessus, créer des frames, poser du texte, aligner des composants, un peu comme si vous étiez aux commandes vous-même, sauf que c'est vous qui donnez les instructions et lui qui exécute.

Pour l'activer, ouvrez Figma desktop, créez un nouveau document DESIGN

Puis basculez en Dev Mode (raccourci Shift+D ou le bouton tout en bas de l'écran) où la section MCP server du panneau d'inspection permet d'activer un serveur local, à l'adresse http://127.0.0.1:3845/mcp.

Ensuite, pour que Claude Code construise et modifie réellement votre design comme je l'ai déjà fait pour mon catalogue, vous devrez le connecter au MCP de Figma depuis votre terminal avec cette commande :

claude mcp add --transport http figma https://mcp.figma.com/mcp

Une fenêtre d'authentification s'ouvre, vous validez avec votre compte Figma, et c'est plié ! Anthropic propose aussi un plugin tout-en-un si taper la commande à la main vous gonfle. Notez que cette connexion gratuite est en bêta, et Figma a prévenu que ça basculera un jour sur un modèle payant à l'usage. C'est tellement dommage de faire payer pour ça...

Reste ensuite à coller le lien du document Design dans votre prompt (ou à sélectionner le bon frame), et l'agent saura exactement où écrire.

Pour faire un peu de PAO, un petit design ou une présentation à monter vite fait, c'est super fluide. Moi j'ai branché mon outil Kassis (anciennement VoxDrop), j'ai tout dicté dans Claude Code et j'ai obtenu ce que je voulais sans effort. Claude est même parti chercher des infos sur le matos en ligne.

Figma est un chouette outil et il n'a pas l'air si complexe que ça mais quand on n'a pas envie d'apprendre à maîtriser toute cette machinerie pour faire un mini truc, ce MCP est bien pratique. Il sait tout gérer, les calques, composants, auto-layout, et compagnie et ça annihile totalement cette courbe d'apprentissage qui m'aurait fait perdre du temps sur d'autres projets plus importants.

Si vous bossez régulièrement sur des prez, des maquettes ou tout ce qui ressemble à de la PAO, ça vaut clairement le coup d'essayer en tout cas, même si vous maîtrisez Figma.

Shuffle , c'est un outil qui vous propose de redesigner votre site web avec 4 modèles d'IA différents. Vous collez votre URL, vous décrivez ce que vous voulez... et boom, Claude Opus 4.6, GPT-5.2, Gemini 3 Pro et Kimi K2.5 vous pondent chacun leur version. J'ai testé sur ma home. Verdict : c'est moche de fou !

Vous arrivez sur la page, vous entrez l'adresse de votre site, vous tapez un petit prompt du genre "modernise mon blog tech" et vous lancez la machine. Les 4 modèles bossent alors en parallèle et au bout de 30 secondes environ, vous avez 4 propositions de redesign à comparer côte à côte.

Je trouvais le concept cool, sauf que dans la pratique, c'est une autre histoire. Comme je vous le disais en intro, j'ai testé sur korben.info, et les 4 IA ont eu exactement la même idée lumineuse : tout foutre en thème sombre. QUATRE sur QUATRE ! Pas un seul n'a osé proposer autre chose qu'un fond #1a1a2e dégeu avec des accents néon bleu-vert. Original, hein !!

Les 4 propositions de redesign de korben.info... toutes en dark mode. Désolé si votre site ressemble à ça.

On dirait que pour les IA, "blog tech" = "dark mode obligatoire"... et du coup ça ressemble à tous les médias tech génériques qu'on retrouve partout. Sauf si vous précisez "fond clair" dans le prompt, mais même là, c'est pas garanti.

Claude Opus a pondu une esthétique "hacker" avec du code Matrix en fond vert (carrément, on se laaache). GPT-5.2 a carrément rebaptisé le site "KORBEN NEXT" avec une baseline inventée de toute pièce, "La veille tech qui va droit au but"... euh, merci mais non merci j'aime pas le foot. Gemini 3 Pro a opté pour un style magazine éditorial et Kimi K2.5 (le modèle chinois de Moonshot AI) a sorti le gradient hero classique, propre... ou plutôt fade.

Bah ouais, les IA analysent la structure, les catégories, les images... mais le résultat c'est finalement toujours le même template sombre "tech media 2024" qu'on a vu un million de fois. Alors que pour moi, Korben.info c'est pas du tout cette ambiance.

Mais l'outil a quand même des qualités puisque l'éditeur visuel permet de modifier le résultat en drag-and-drop sans toucher au CSS, et vous pouvez même exporter le code dans 4 formats : Next.js, Laravel, WordPress ou HTML classique. En fait, ça peut servir de très bon point de départ si vous avez la flemme de partir d'une page blanche et si votre webdesigner est devenu injoignable depuis qu'il est parti à Punta Cana.

Côté prix, y'a une version gratuite mais limitée à quelques générations, et après puis c'est 24 dollars par mois...etc.

Ça aurait pu être un excellent outil mais malheureusement, les modèles sont formatés sur les mêmes tendances, les mêmes palettes, les mêmes layouts. C'est dommage je trouve. Voilà, après je pourrais vous faire une conclusion bien neuneu genre "C'est pas demain qu'une IA remplacera un vrai directeur artistique qui comprend l'identité d'une marque." mais la réalité, c'est que un humain moyen motivé qui sait ce qu'il veut peut avoir un truc incroyablement bien généré par IA s'il prend le temps le temps de se former et qu'il ne lâche rien ! Tenez par exemple, 100% du template graphique de mon site a été généré à l'aide de l'IA et moi derrière pour la fouetter...

Voilà, si vous voulez rigoler un peu, allez tester votre site sur Shuffle mais ne vous attendez pas à un miracle !

Vous voyez ces poignées de porte toutes lisses qui s’escamotent dans la carrosserie pour faire genre “je suis une voiture du futur” ? C’est ce qu’il y a sur les Tesla et sur les Ioniq 5 . Hé bien la Chine en a marre de ce design qui privilégie le look au détriment de la sécurité, et a décidé d’agir !

En effet, les régulateurs chinois planchent sur une interdiction pure et simple des poignées entièrement rétractables dès juillet 2027. L’idée c’est d’imposer un système de secours mécanique sur toutes les bagnoles, parce que oui, quand votre voiture électrique prend feu et que le système électronique tombe en rade… Bah bonne chance pour sortir mes petites merguez !

Le problème n’est pas nouveau, mais les drames s’accumulent. Plusieurs passagers de Tesla sont morts brûlés vifs après des accidents parce que les portes refusaient de s’ouvrir et en novembre 2024, cinq personnes sont décédées dans un Model S au Wisconsin après avoir percuté un arbre… Les témoins ont entendu leurs cris durant 5 minutes. Horrible ! Et dernièrement, en Californie, trois ados sont morts carbonisés dans un Cybertruck la veille de Thanksgiving. Les poignées électroniques avaient cramé avec le reste.

Heureusement, le NHTSA (le régulateur américain) a enfin ouvert les yeux et demande des comptes à Tesla avant le 10 décembre. L’enquête qui visait 174 000 Model Y s’étend maintenant à d’autres modèles, ce qui est parfaitement normal et rassurant vu qu’ils ont déjà recensé au moins 9 cas de personnes coincées à l’intérieur pendant que des passants tentaient de casser les vitres pour les sortir.

Et le pire dans cette technologie de poignées du tur-fu, c’est que le gain aérodynamique est ridicule. Selon les ingénieurs , une réduction de 0,01 du coefficient de traînée, ça économise à peine 0,6 kWh pour 100 km… Soit que dalle. En plus, le surpoids des moteurs et mécanismes (7-8 kg) annule quasiment ce maigre bénéfice. Voilà, tout ça pour pouvoir dire que sa caisse fait 0,23 au lieu de 0,24 de Cx (C’est le coefficient de traînée aérodynamique).

Franz von Holzhausen, le designer en chef de Tesla, a admis à Bloomberg qu’ils bossent sur un redesign pour rendre les poignées “plus intuitives pour les occupants en situation de panique”. Youpi !

La bonne nouvelle c’est que les poignées semi-rétractables resteraient autorisées en Chine , du moment qu’elles ont un backup mécanique. Volkswagen a toujours opté pour ce compromis, et Audi propose désormais un câble rouge de secours qui se déploie automatiquement en cas de crash. Comme quoi, c’était pas si compliqué.

Voilà… On n’est encore sûr de rien mais si la Chine passe cette loi, y’a de grandes chances que ça impacte les designs mondiaux… Pas le choix quand on veut vendre sur le plus gros marché automobile de la planète. Mais quoiqu’il en soit, je trouvais que c’était une bonne nouvelle pour la sécurité de tout le monde !

Source

Vous vous souvenez de la dernière fois où vous avez dû redémarrer un container Docker en urgence depuis votre téléphone, planqué dans les chiottes du resto un jour de St Valentin ?

Le minuscule clavier, la connexion SSH qui rame, les commandes qu’on tape mal parce que l’autocorrect veut absolument transformer “docker ps” en “docker pas”, l’écran trop petit pour lire les logs… Bref, la grosse merde !!

Heureusement, Docker Manager débarque pour transformer ce cauchemar en expérience qui fait plaisir aux yeux. C’est une app Android qui gère vos containers Docker à distance, et c’est tellement bien foutu que vous allez enfin arrêter d’ouvrir votre laptop n’importe où juste pour faire un simple restart.

C’est vrai que faire du SSH depuis un smartphone, ça a toujours été possible. Y’a même plein d’apps terminal mobiles, de clients fait pour ça, même des bidouilles pour se connecter à vos serveurs. Mais “possible” et “agréable”, c’est pas vraiment la même chose.

Grâce à Docker Manager ce sera donc possible ET agréable ! Vous gérez déjà Docker, vous connaissez déjà les commandes, vous savez ce que vous faites mais au lieu de vous faire taper des commandes dans un terminal de 5 pouces, l’app vous offre une interface utilisateur carrée avec des boutons, des statistiques en temps réel, des logs lisibles, et même un shell interactif quand vous en avez vraiment besoin !

Vous connectez donc vos serveurs via SSH (mot de passe ou clé, comme d’hab), et hop, vous aurez accès à tout. Start/stop/restart de containers, inspection des images, gestion des volumes et des networks, stats CPU/RAM en direct… Tout ce que vous feriez normalement en SSH, mais sans vous arracher les yeux sur un terminal mobile.

Autre truc sympa, l’app supporte plusieurs serveurs, donc vous pouvez switch entre votre VPS perso, votre homelab, et votre serveur de prod en deux tapotages ^^. Elle gère aussi les VPN comme Tailscale, donc si vos serveurs sont derrière un réseau privé, pas de problème. Elle propose même des thèmes light/dark, parce que oui, même en pleine nuit à 3h du matin quand un container plante, vous avez le droit à votre petit confort visuel.

L’app supporte aussi Podman. Vous configurez juste votre CLI Docker custom, et ça marche ! Et en plus, c’est open source ! Vous pouvez même faire du cleanup système pour virer les images et containers qui traînent histoire de faire un peu de ménage.

L’app est dispo sur le Play Store et sur GitHub pour ceux qui veulent build depuis les sources ou juste regarder le code. Testez, vous verrez, ça change la vie.

Merci à Friendly_0day pour le partage !

J’sais pas si vous avez vu, mais Google a sorti en beta, encore un truc qui va mettre les experts UX/UI au chomdu ! Son petit nom c’est Stitch (rien à voir avec Lilo) et vous pouvez le découvrir sur stitch.withgoogle.com . En gros, Stitch c’est une boîte à outils expérimentale qui utilise de l’IA pour transformer vos idées de site ou d’appli mobiles en interfaces utilisateur fonctionnelles en un rien de temps.

Le principe c’est comme d’hab, vous entrez une description en langage naturel du style “Vazy crée-moi une app mobile dark theme avec une navbar, une carte de profil et un bouton d’action flottant, wesh”, et hop ! Stitch vous sort de son chapeau l’interface complète avec le code HTML/CSS qui va bien. C’est annoncé officiellement depuis mai sur le blog Google Developers depuis Google I/O 2025. Oui, je sais, j’suis pas pressé. J’ai un métier moi (non).

Et si vous n’êtes pas inspiré, mais que vous trouver l’app ou le site d’un concurrent sexy, vous pouvez également uploader une capture écran de son interface ou d’un gribouillis de votre cru, ou même un wireframe fait à l’arrache. Et Stitch analysera l’image et vous crachera une version propre et fonctionnelle.

Gemini 2.5 est bien sûr le maître d’œuvre et Stitch vous propose deux modes : Gemini 2.5 Flash pour la rapidité (350 générations par mois), ou Gemini 2.5 Pro pour des résultats plus sophistiqués (50 générations par mois). Notez que le mode Pro est particulièrement bon quand vous travaillez avec des inputs visuels complexes.

L’intégration avec Figma est aussi un vrai plus. Vous pouvez donc exporter directement votre design dans Figma tout en préservant les calques et les composants ce qui est pratique pour les designers qui veulent peaufiner le résultat ou pour les équipes qui bossent déjà avec cet outil. Par contre, moi j’y ai pas accès, donc je pense qu’il faut un abonnement pro pour profiter de cette option.

Pour les développeurs, le code généré est également plutôt propre et bien structuré. Moi j’ai testé en demandant une interface pour une potentielle application Korben sur iOS / Android (j’suis pas sûr qu’il y ait un vrai besoin cela dit) et il m’a pondu un truc assez classique mais très propre, basé sur Tailwind CSS.

Et évidemment, chez Google, ils vous diront que l’objectif n’est pas de remplacer Figma ou Adobe XD, mais plutôt de faciliter la phase initiale de prototypage qui peut être fastidieuse. Mais bon, à terme, je pense que ce sera la fin pour ce genre d’outils sauf s’ils embrassent eux aussi, l’IA générative.

L’outil propose évidemment un chat interactif pour affiner le design, des sélecteurs de thèmes, et la possibilité de modifier le résultat en temps réel. Vous pouvez aussi jongler entre les versions web et mobile de votre interface en un clic. Pour l’instant, c’est gratuit mais avec des limitations mensuelles. Il vous faut un compte Google et c’est disponible dans 212 pays, uniquement en anglais.

C’est donc parfait pour les débutants avec des idées d’apps, les développeurs qui veulent prototyper rapidement, et les designers qui cherchent à explorer des variantes rapidement avec une bonne UX/UI faite dans les règles de l’art.

Mais attention quand même… Pour ma part, j’ai testé le bouton de téléchargement pour récupérer un design et ça n’a pas fonctionné… preuve que c’est vraiment encore en beta !

Voilà, donc si vous voulez tester, rendez-vous sur stitch.withgoogle.com . Ça peut vous faire gagner du temps sur les phases de brainstorming et de prototypage rapide.

Merci à Rpc2dot0 pour la découverte !

Vous cherchez les couleurs et polices idéales pour votre site web ? Avec Realtime Colors, vous allez pouvoir choisir très vute puisque cet outil ingénieux distribue vos teintes sur un vrai site, ce qui permet de rendre tout ça beaucoup plus concret.

Fini les palettes avec lesquelles il est difficile de se projeter puisqu’en quelques clics, vous obtiendrez votre identité visuelle sur mesure, prête à être exportée. Realtime Colors cartonne aussi sur Figma, où son plugin compte plus de 19 000 aficionados.

Bref, une fois sur le site, commencez par choisir deux couleurs neutres pour le texte et le fond. Ensuite, choisissez vos teintes primaires et secondaires (pour les CTAs et sections importantes, puis les boutons et encarts moins cruciaux). Enfin, ajoutez une touche finale avec une couleur d’accentuation qui viendra rehausser images, liens, etc.

Et voilà, en quelques instants, vous avez votre combo couleurs et polices parfaitement assorti et harmonieux, sans prise de tête ! Plutôt cool non ?

Et si le résultat vous botte, hop, cliquez sur « Exporter » pour récupérer les CSS, les Tailwind, le code custom, les shades, gradients…etc. Et petit bonus qui a son importance : Realtime Colors intègre aussi un vérificateur de contraste pour s’assurer que vos textes seront toujours lisibles.

Bref, si vous en avez assez de galérer pour habiller votre site et désirez un rendu professionnel sans effort, foncez sur Realtime Colors. Merci Lorenper pour cette super découverte !

• lien nᵒ 1 : Lien vers l'épisode
• lien nᵒ 2 : S'abonner au podcast
• lien nᵒ 3 : Le site de Maiwann
• lien nᵒ 4 : Suivre le podcast

Commentaires : voir le flux Atom ouvrir dans le navigateur

Vous rêvez de créer des visuels de fou pour vos réseaux sociaux ?

Ne cherchez plus, SocialScreenshots est là ! Développé par Gabriel, un jeune développeur toulousain de 29 ans, cet outil ingénieux vous permet de capturer, recadrer et améliorer vos captures d’écran en quelques clics, directement depuis votre navigateur.

Inspiré par l’interface de Screen Studio, Gab a développé son site uniquement avec ReactJS et canvas, en créant lui-même tout l’habillage et le résultat est très sympa !

Grâce à ce site, vous pouvez créer un screenshot directement depuis un site web, puis le recadrer automatiquement au format voulu (Pour X, Facebook, Instagram, Linkedin et les résolutions d’écran classiques), et l’améliorer grâce à l’éditeur afin d’obtenir des rendus dignes d’un graphiste en herbe en ajoutant une ombre, en arrondissant les coins, et en choisissant un joli fond ou un dégradé pour l’arrière-plan.

C’est gratuit, y’a pas de filigrane ni de limite de temps, vous n’avez rien à installer et pas même besoin de créer un compte. Et toutes les manipulations se font localement dans votre navigateur, pour un maximum de simplicité et de confidentialité.

À découvrir ici

Attention, pépite de l’espace à vous faire découvrir aujourd’hui ! Ça s’appelle Durdraw et c’est un éditeur de folie pour créer de l’art ASCII, ANSI et Unicode dans votre terminal !

Imaginez pouvoir dessiner des animations old school avec une palette de 16 ou 256 couleurs, en mixant allègrement les caractères CP437 de l’époque MS-DOS avec de l’Unicode moderne. Le tout avec le support de thèmes customisés et de l’export en HTML et mIRC.

Si comme moi vous avez grandi avec des softs de légende comme TheDraw et PabloDraw, vous allez retrouver direct vos repères, mais avec la puissance et la souplesse du monde Unix en plus.

Durdraw est codé en Python donc pour l’installer c’est ultra simple, un petit coup de pip ou de git clone et vous êtes parés pour entrer dans la 4ème dimension de l’ANSI art 😎.

git clone https://github.com/moneamis/durdraw-demo

cd durdraw-demo

./setup.sh

durdraw -p demo.dur

Les devs ont même pensé à inclure une config d’exemple et des thèmes bien sentis pour pas être largué en arrivant. Une fois lancé, préparez-vous à entrer dans la matrice : ça fourmille de raccourcis clavier dans tous les sens pour éditer au caractère et à la couleur près. Les nostalgiques des BBS apprécieront les commandes à base d’échappement, pendant que les plus modernes pourront même utiliser la souris pour peaufiner leurs chef d’oeuvres.

Et là où Durdraw se pose, c’est qu’il gère les animations image par image avec un contrôle total du timing. Fini l’époque où on dépendait du débit du modem, maintenant on créé des petits flip book ASCII qui restent stables même quand on redimensionne le terminal à la volée. Ça c’est de la qualité mes p’tits potes !

Bon après faut pas se leurrer, Durdraw ne rendra pas votre minitel compatible avec Unreal Engine 5 hein. Mais entre nous, est-ce qu’on a vraiment besoin d’aller jusque là quand on peut déjà pousser l’art ANSI dans ses derniers retranchements ? En plus l’auteur est hyper réactif sur GitHub pour améliorer son bébé au fil des contributions. C’est ça aussi la magie de l’open-source !

Bref, foncez sur https://durdraw.org, et lâchez-vous dans les créations bien rétro !

Merci à Lorenper pour l’info.

Vous êtes accros aux logiciels de retouche photo et de création graphique mais vous en avez marre de vider votre compte en banque pour des licences hors de prix ? Et si je vous disais qu’une solution très sympa open source et totalement gratuite était en train de voir le jour ? Laissez-moi vous présenter Graphite, un projet de dingue porté par une communauté de développeurs et d’artistes passionnés.

Alors, qu’est-ce que c’est que ce truc ? En gros, le but c’est de pondre une appli de graphics editing nouvelle génération qui coche toutes les cases : retouche photo, dessin vectoriel, peinture numérique, PAO, compositing, motion design… Rien que ça ! On est clairement sur un couteau suisse de la création 2D.

Bon, je vous vois venir avec vos gros sabots : « Ouais mais c’est encore un énième logiciel qui va essayer de faire comme Photoshop et cie mais en moins bien ! » Eh bah non, justement ! L’idée c’est pas de copier bêtement ce qui existe déjà mais d’innover en s’inspirant de ce qui se fait de mieux dans d’autres domaines, comme la 3D.

Le truc de malade dans Graphite, c’est qu’il est construit autour d’un node graph, une sorte de « compo visuel » où on branche des nœuds entre eux pour manipuler nos calques et leur appliquer des filtres et des effets à l’infini. Ça permet de garder la main à chaque étape et de pouvoir revenir en arrière sans perdre en qualité, ce qui est juste im-po-ssible dans les logiciels de retouche photo traditionnels. On appelle ça du non-destructif.

Autre point fort : Graphite gère aussi bien les images matricielles (bitmap) que vectorielles, et le tout avec une qualité d’affichage toujours au taquet, même si on zoom dans tous les sens ! Plus besoin d’avoir 36 000 applis et de jongler entre elles. C’est un peu le mix parfait entre le pixel et le vecteur (avec un soupçon de génération procédurale en plus).

Bon, alors, il sort quand ce petit bijou ? Figurez-vous que Graphite est déjà dispo en version alpha et qu’on peut le tester directement dans son navigateur. Pas besoin d’install, ça tourne full JavaScript côté client. Évidemment, à ce stade, c’est encore un peu brut de décoffrage et y’a pas mal de features prévues sur la roadmap qui ne sont pas encore implémentées. Mais ça donne déjà un bon aperçu du potentiel de la bête !

Et en parlant de potentiel, vous allez voir que les possibilités de création sont assez dingues. Vous pouvez par exemple générer des centaines de cercles de façon procédurale pour obtenir des motifs super stylés. Ou encore créer des structures complexes qui s’adaptent automatiquement, comme ces guirlandes de Noël dont les ampoules se replacent toutes seules quand on déforme le chemin. Magique !

Donc, si vous voulez voir ce projet de dingue prendre son envol, n’hésitez pas à mettre la main au portefeuille et à faire un don. C’est vous qui voyez, mais je pense que ça en vaut carrément le coup ! En tout cas, moi, j’ai déjà mis une étoile sur le repo Github 😉

— En partenariat avec Penpot —

Depuis mon dernier article sur Penpot et ses fonctionnalités de Flex Layout, l’outil n’a cessé d’évoluer pour offrir encore plus de possibilités aux designers et développeurs. Aujourd’hui, je souhaite vous présenter en détail une fonctionnalité très attendue : les CSS Grid Layout.

Pour rappel, Penpot est un outil libre et open source de conception d’interfaces pour applications web et mobiles. Intuitif et puissant, il permet de créer rapidement des prototypes et maquettes interactives, tout en générant le code CSS correspondant, prêt à être intégré dans vos projets.

Si les Flex Layout permettaient déjà de créer des designs responsives en adaptant les éléments à la taille de l’écran, les CSS Grid Layout vont encore plus loin en offrant un contrôle total sur le positionnement et le dimensionnement des composants. Concrètement, les CSS Grid Layout vous permettent de définir une grille sur laquelle placer vos éléments. Vous pouvez spécifier le nombre de lignes et de colonnes, leur taille, les gouttières entre elles. Chaque élément peut alors occuper une ou plusieurs cases de cette grille, s’étendre sur plusieurs lignes ou colonnes.

Cette approche offre une grande flexibilité pour créer des mises en page complexes et adaptatives. Vous pouvez par exemple concevoir facilement une page avec un header sur toute la largeur, une sidebar sur la gauche, un contenu principal au centre et un footer en bas, le tout en quelques clics et sans une ligne de CSS.

Autre atout des CSS Grid Layout : la possibilité de nommer chaque zone de votre grille. Fini les .col-md-4 ou .row-2 peu parlants, vous pouvez utiliser des noms comme « header », « main-content » ou « sidebar » pour structurer votre design de façon sémantique.

Pour vous aider à prendre en main cette fonctionnalité, je vous ai préparé une nouvelle vidéo tuto dédiée aux CSS Grid Layout. Je vous y montre comment créer vos premières grilles, les configurer, placer vos éléments et profiter de la puissance des CSS Grid Layout dans vos conceptions. Même si vous n’êtes pas familier avec le CSS Grid, vous verrez que Penpot rend son utilisation très intuitive.

Découvrez la vidéo ici ! Et pour vous inscrire sur Penpot, c’est par ici !

On n’a pas tous la chance d’être suffisamment en souffrance dans nos vies pour aimer faire de la CSS. Sauf que voilà, à un moment, y’en a forcément besoin. Surtout quand on veut mettre en place des éléments d’interfaces sympas et compatibles avec tous les navigateurs.

Que ce soit en CSS pure ou en Tailwind, sachez que vous trouverez forcement votre bonheur sur Uiverse (jeu de moooots), un site qui regroupe des milliers d’éléments d’interface que vous n’aurez plus qu’à copier coller, et éventuellement modifier un peu, avant de les mettre sur votre site web.

On y retrouve donc des boutons, des checkbox, des champs de saisie, des boutons radio, des éléments de formulaires, des animations de chargement et j’en passe. Et le plus beau là-dedans, c’est que tout ça est filtrable / triable par type de techno (CSS / Tailwind) mais également par thème ou nombre de téléchargements…etc.

Une fois que vous cliquez sur un élément UI qui vous intéresse, vous pouvez alors récupérer son code, la mettre en favoris pour plus tard ou carrément le balancer dans un de vos projets Figma.

Elle n’est pas belle la vie ?

Bref, si vous cherchez de quoi agrémenter vos interfaces gratuitement, ça se passe par ici.

Ça fait un petit moment que ça existe et je n’avais pas encore pris le temps de vous en parler. En plus, ça a bien évolué, donc je pense qu’il est temps !

Il s’agit de Microsoft Designer, un outil qui va vous permettre de « bosser » sur vos meilleures idées d’images sans avoir de compétence en graphisme. Et pour cela, Microsoft nous offre différents outils à base d’IA qui permettront de faire tout un tas de trucs rigolos.

Bon, déjà, il y a le Image Creator qui permet de générer des images à partir d’un prompt de votre choix. Toutefois, pour ceux qui ont l’imagination d’un parpaing, il y a surtout des tonnes d’exemples de prompts très cools permettant de faire des tas d’illustrations aux styles dont « toute ressemblance existante ou ayant existé avec le style d’un artiste, ne serait que fortuite, évidemment« .

Vous pouvez par exemple avoir un template pour faire votre propre image de figurine Funko.

Voici ce que ça donne avec moi :

Rigolo non ?

Mais Designer va encore plus loin, puisqu’il permet de concevoir à l’aide d’un prompt, un design complet comme vous le feriez sur Canva. Mais également supprimer des éléments sur une images, étendre votre image (outpainting), virer le fond d’une image…

Sans oublier un générateur de kit pour votre marque ou d’album photo, ou encore de stickers. Et c’est gratuit, c’est ça qui est fou !

Voici ce que donnerait mon kit de marque Korben. Bon je suis pas convaincu mais c’est sympa quand même.

Voilà, vous l’aurez compris, Microsoft vient totalement d’éradiquer une profession à l’aide d’un simple site web.

Pour tester c’est par ici que ça se passe.

Il y a des jours où on se réveille avec une certaine nostalgie pour les choses du passé. Rappelez-vous les années 2010, lorsque Twitter était encore ce petit oiseau bleu en pleine croissance, sans trop de haine, avec que des gens du web qui discutaient de manière courtoise ?

Eh bien, mes amis, il semblerait que ce jour soit de retour pour moi (enfin presque) grâce à l’extension Chrome / Firefox / Opera / Edge : Old Twitter Layout 2023.

Ce plugin une fois installé va vous ramener à la version tant appréciée de 2015, avec quelques fonctionnalités intéressantes à la clé !

Vous retrouverez ainsi l’apparence de Twitter de 2015 en 2024, sans couche CSS supplémentaire. Et ce qui est génial, c’est qu’elle est personnalisable avec une classement chronologique par défaut, un mode sombre, la suppression de publicités, et même le téléchargement de vidéos et GIFs. Cerise sur le gâteau, le code source est disponible sur GitHub. Et en plus, ça booste la rapidité de l’interface.

Et bien sûr, vous aurez toujours la possibilité d’éditer manuellement la CSS du site si vous souhaitez apporter vos propres customisations.

Pour installer l’extension Old Twitter, il suffit de vous rendre sur ce lien.

En plus de tout cela, l’extension propose des raccourcis clavier pour naviguer facilement sur Twitter, notamment pour faire des recherches, poster un message, ouvrir des menus et interagir avec les tweets. Certains raccourcis sont dédiés aux réponses, aux citations (Les RT quoi) et la lecture des médias. Pour les polyglottes, l’extension est disponible en plusieurs langues, dont le français, le portugais, l’espagnol et le grec.

Bref, si vous êtes comme moi et que vous ressentez la nostalgie de l’ancien Twitter, avant que ça ne s’appelle X et que ça devienne moche, ne perdez plus une seconde et installez Old Twitter Layout 2023.