Alors si vous cherchez un truc pour procrastiner intelligemment ce soir ou demain, j’ai exactement ce qu’il vous faut. Play.ertdfgcvb.xyz , c’est un terrain de jeu ASCII interactif où vous pouvez coder des animations directement dans votre navigateur. Et c’est hyper hypnotisant, vous allez voir !

Derrière ce nom imprononçable “ertdfgcvb” se cache Andreas Gysin , un artiste suisse basé à Lugano qui fait du code et du design et son playground ASCII, c’est une interface épurée au maximum composée d’un éditeur de code à gauche, d’une fenêtre de prévisualisation à droite, et c’est tout. Pas de fioritures, pas de boutons partout, juste l’essentiel. Vous tapez Cmd+Enter (ou Ctrl+Enter sur PC) et votre code s’exécute en temps réel.

Le principe de son code en live est inspiré des fragment shaders GLSL , sauf qu’au lieu de pixels colorés, vous manipulez des caractères. Vous avez accès à des fonctions spécifiques telle que boot() qui s’exécute une fois au démarrage, pre() pour préparer vos données, main() qui est appelée pour chaque cellule de l’écran, et post() pour les modifications finales.

Voici un exemple simple en javascript pour comprendre le délire :

export function main(coord, context){ return String.fromCharCode((coord.y + coord.x) % 32 + 65) }

Ce bout de code génère un pattern de lettres qui change selon la position X et Y sur l’écran. C’est tout con mais c’est beau.

Le playground propose également des dizaines d’exemples triés par catégorie. Vous avez les basiques pour apprendre, des démos plus complexes comme “Doom Flame” qui recrée l’effet de flamme du jeu Doom en ASCII, ou encore “Donut” qui fait tourner un donut en 3D avec juste des caractères. Y’a même une section “camera” où vous pouvez manipuler votre webcam et la transformer en ASCII art en temps réel.

D’après le GitHub du projet , Andreas a créé ça comme un hommage à tous les artistes, poètes et designers qui utilisent le texte comme medium. C’est un projet minimaliste, avec presque pas d’interface, juste le code et le résultat. Même les marges et les numéros de ligne ont été virés.

Et tout ça tourne de manière fluide dans le navigateur et pour les dev qui veulent comprendre comment ça marche sous le capot, tout le code source est sur GitHub, et vous pouvez vraiment faire des trucs de ouf avec, par exemple des fractales, des simulations de fluides…etc. C’est complètement barré.

Mais pour commencer, le plus simple c’est d’explorer les exemples. Le classique “10 PRINT” recrée le fameux one-liner du Commodore 64 qui génère un labyrinthe infini. Les exemples SDF (Signed Distance Fields) montrent comment faire de la 3D avec des maths et des caractères. Et si vous êtes chaud, vous pouvez lui envoyer vos propres créations qui rejoindront la section “contributed”.

Andreas enseigne ces techniques dans ses cours, et apparemment les étudiants adorent. C’est vrai que c’est une approche super pédagogique du creative coding où on se prend pas la tête avec du WebGL ou des frameworks complexes… Non, faut juste pondre du code simple qui produit des résultats visuels immédiats.

Bref, play.ertdfgcvb.xyz c’est le genre de site qu’on bookmark et qu’on ressort quand on veut se vider la tête en codant des trucs rigolos. C’est gratuit, c’est open source, et c’est une belle démonstration que l’art et le code peuvent cohabiter sans avoir besoin de millions de polygones et de shaders complexes.

Un grand merci à Lorenper pour m’avoir fait découvrir cette pépite !

Si vous êtes comme moi, que vous êtes parent et que vous pensez que le contrôle parental de votre box internet protège Junior des méchants sites du web, hé bien j’ai une mauvaise nouvelle. Car pendant que vous réglez minutieusement vos filtres, des ados développent des proxys web tellement sophistiqués que même les admins réseau en sueur n’arrivent plus à suivre.

Prenez Scramjet par exemple… c’est le dernier né de cette course à l’armement, et c’est vraiment bien fichu. Développé par Toshit pendant le Hack Club Summer of Making , Scramjet n’est pas juste un énième proxy pour regarder YouTube en cours de maths. Non non, c’est un véritable système d’interception basé sur JavaScript et WebAssembly qui réécrit le code des sites web à la volée.

Cela signifie que le proxy intercepte littéralement le JavaScript des sites, le modifie en temps réel pour contourner les restrictions, puis vous le sert tout chaud sans blocage. Techniquement, c’est brillant, je trouve.

Scramjet est en réalité le successeur officiel d’ Ultraviolet , un autre proxy que vous avez peut-être croisé si vous traînez dans les forums étudiants, mais celui-ci est désormais considéré comme obsolète. Pour sa part, Scramjet est encore maintenu, beaucoup plus moderne et surtout, son architecture est plus robuste. Il fonctionne déjà avec Google, YouTube, Discord, Reddit et quelques autres site. je l’ai testé avec mon site, ça passe aussi, même si c’est pas encore parfait. En tout cas, ça progresse vite.

Au temps jadis, où j’étais encore étudiant, on utilisait des proxys tout moisis qui affichaient les sites sans style et plantaient à la moindre iframe. Et aujourd’hui, des gamins développent des outils en WebAssembly et utilisent des Service Workers. MercuryWorkshop , le collectif derrière Scramjet, a en tout cas créé un outil technique impressionnant qui rivalise même avec certaines solutions commerciales.

Alors comment ça marche ?

Et bien au lieu de simplement faire du proxy classique (je demande la page pour toi et je te la renvoie), Scramjet intercepte TOUT. Les requêtes JavaScript, les WebSockets, les workers, même les tentatives de détection de proxy. Le code source montre qu’ils utilisent Rust pour compiler en WebAssembly les parties critiques, ce qui donne une performance de furieux. Tout se passe via un mini-navigateur dans votre navigateur qui traduit tout en temps réel pour éviter la détection.

L’installation est ridiculement simple comparée à Ultraviolet. Un pnpm install, un pnpm build, et hop, vous avez votre proxy qui tourne en local. Les développeurs ont même pensé aux noobs avec une UI basique pour tester. Bon, elle est moche, mais c’est pas le but. Le but c’est de bypasser les restrictions, pas de gagner un prix de design. Vous pouvez tester la démo ici !

On a donc des écoles et des entreprises qui dépensent des fortunes en solutions de filtrage web telles que Fortinet, Sophos, tous ces gros machins qui coûtent un bras et promettent de “protéger” les utilisateurs. Et en face, on a des ados brillants qui développent des contre-mesures en quelques mois pendant leurs vacances d’été. C’est beau !

Surtout que ce genre d’outil peut également servir dans des pays où l’information est vraiment censurée.

Bref, Scramjet c’est un super outil, open source, documenté, et accessible à tous et si vous voulez tester (pour la science, évidemment), le code est sur GitHub . Mais attention, l’utiliser pour contourner les règles de votre école ou entreprise, c’est à vos risques et périls.

Moi je vous ai rien dit, je fais juste de la veille tech…

Merci à Lilian pour le partage !

Alors rien à voir avec le logiciel de streaming, mais sachez que Harry Roberts, le consultant en performance web derrière CSS Wizardry (et accessoirement un mec qui a bossé avec Google, la BBC et l’ONU), vient de sortir Obs.js .

L’idée de ce truc, c’est de transformer votre site web en véritable caméléon. Au lieu de servir la même expérience à tout le monde, la bibliothèque va détecter en temps réel les conditions de navigation de chaque visiteur. Batterie presque vide ? Connexion 2G pourrie ? Le site s’adapte automatiquement.

Pour cela, Roberts utilise des APIs natives du navigateur qui existent depuis des années mais que presque personne n’exploite vraiment. La Battery Status API et la Network Information API sont là, dans Chrome et consorts, à attendre qu’on leur trouve une utilité. Et voilà, Obs.js débarque et les combine de façon intelligente pour créer quelque chose de vraiment utile.

Mais alors concrètement, ça donne quoi ?

Et bien ce script ajoute des classes CSS directement sur votre balise <html>, comme ça…

<html class="has-latency-low
 has-bandwidth-high
 has-battery-charging
 has-connection-capability-strong
 has-conservation-preference-neutral
 has-delivery-mode-rich">

.has-battery-critical * {
 animation: none !important;
 transition: none !important;
}

body {
 background-image: url('banner-4k.jpg');
}

.has-delivery-mode-lite body {
 background-image: url('banner-optimized.jpg');
}

Vous vous souvenez de ces autocollants holographiques qu’on trouvait à tous les coins de rue dans les années 90 ? Mais siiiii, ces machins brillants qui changeaient de couleur selon l’angle de vue et qui scintillaient de mille feux grâce à leurs petites paillettes métalliques ? Eh bien, un développeur a réussi à reproduire cet effet en WebGL et en a fait un générateur. Et je dois dire que le résultat est plutôt bluffant.

Le projet en question part d’une observation simple qui est que ces autocollants jouent sur deux phénomènes visuels. D’abord l’iridescence, ce changement de couleur selon l’angle de vue qui rappelle les bulles de savon ou les ailes de papillon. Et ensuite ces minuscules paillettes métalliques qui captent la lumière et créent ces points brillants qui semblent danser à la surface.

Ce qui est vraiment cool du coup, c’est que le développeur a réussi à reproduire ces effets sans simulation physique complexe. Pas de calculs d’interférence de films minces, pas de modélisation de microfacettes métalliques. À la place, une approche purement visuelle qui approxime le rendu final avec des techniques de shader astucieuses.

Le vertex shader gère en réalité un effet de “pelage” de la géométrie en utilisant la formule de rotation de Rodrigues . Pour ceux qui ne connaissent pas, c’est une méthode mathématique élégante pour faire tourner des vecteurs dans l’espace 3D autour d’un axe arbitraire. Ici, elle permet de simuler le décollage progressif de l’autocollant, avec des calculs d’occlusion ambiante et d’intensité de pelage qui donnent cette impression de matière qui se décolle vraiment.

Du côté du fragment shader, c’est là que la magie opère vraiment. Le bruit procédural génère ces fameuses paillettes métalliques. Ainsi au lieu de placer manuellement des milliers de petits points brillants, l’algorithme crée des patches aléatoires de luminosité qui ressemblent à s’y méprendre à des flocons métalliques qui accrochent la lumière. L’échantillonnage de la carte d’environnement ajoute les reflets réalistes, pendant que le calcul d’iridescence utilise des ondes sinusoïdales pour décaler la teinte en fonction de l’angle de vue.

L’effet Fresnel, ce phénomène qui rend les surfaces plus réfléchissantes sur les bords, complète l’illusion. C’est ce qui donne cette impression que l’autocollant “s’allume” différemment selon comment on le regarde. Enfin, le shader combine tout ça avec un contrôle fin de la réflectivité métallique, la taille des paillettes, leur intensité, et même le rendu de la face arrière avec des ombres.

En plus, le dev a tout mis sous licence Creative Commons BY-NC 4.0 donc vous pouvez donc l’utiliser, le modifier, l’adapter à vos projets, tant que c’est non-commercial et que vous créditez l’auteur.

Sérieux, qui aurait cru qu’un jour on pourrait recréer la magie des autocollants holographiques de notre enfance directement dans le navigateur ?

Source

Combien d’entre vous ont déjà ouvert Vim par accident en suivant un tuto et se sont retrouvés coincés dedans ? Moi, j’ai dû passer une bonne dizaine de minutes à tâtonner pour trouver une porte de sortie la première fois et après je suis passé sous “nano”. Heureusement, un génie du nom de renzorlive a conçu VimMaster , un jeu gratuit qui transforme cet apprentissage en une aventure ludique des plus passionnantes.

La beauté de VimMaster c’est qu’au lieu de vous assommer avec un pavé de 500 pages de documentation à la con ou de vous forcer à mémoriser des commandes abstraites, il vous fait tout simplement… jouer. Ce jeu comprend donc 16 niveaux progressifs et chaque défi vous permet de maîtriser une nouvelle compétence. Le petit plus c’est que vous pouvez y jouer directement dans votre navigateur, sans avoir à installer quoi que ce soit.

C’est du pur HTML/CSS/JavaScript, pas de framework à la mode, pas de dépendances npm lourdes comme un éléphant. Juste du code propre qui fait le job et au niveau du gameplay, c’est bien pensé. Car contrairement à d’autres outils qui se contentent de vérifier si vous appuyez sur les bonnes touches, VimMaster valide le résultat de chacune de vos actions.

Vous pouvez même arriver à un résultat identique et valide de différentes manières, comme dans le vrai Vim. Il y a même un mode Challenge chronométré pour ceux qui veulent se la jouer speedrun, et un Cheat Mode accessible avec Ctrl+/ pour les moments de désespoir.

Parmi les alternatives disponibles, on a Vim Adventures qui devient payant après quelques niveaux, VimGenius qui propose des flashcards chronométrées, ou VimHero avec ses tutoriels interactifs. Mais VimMaster se démarque surtout par sa simplicité et sa gratuité totale.

En plus, le système de progression est bien ficelé. Vous avez un profil avec des achievements, des badges à débloquer, et même la possibilité d’exporter/importer votre progression. Les cartes d’achievements sont générées dynamiquement en Canvas API et vous pouvez les partager sur les réseaux sociaux pour vous la raconter un petit peu.

Bref, si vous avez toujours voulu apprendre Vim sans vous arracher les cheveux, c’est le bon moment !

Y’a quelques mois, je me suis amusé à reprendre le projet DeepSite d’Enzostvs et à le transformer complètement pour fonctionner en 100% local. J’ai baptisé ça LocalSite , et ça permet en gros de générer des pages web ou des éléments HTML / CSS / JS à l’aide d’une IA mais en local.

Ça s’appuie donc sur Ollama pour faire tourner les modèles d’IA directement sur votre ordinateur, comme ça, pas de connexion cloud, pas d’abonnement à payer, pas de données qui partent on ne sait où en Chine ou ailleurs. Vous tapez une description de ce que vous voulez, vous sélectionnez un modèle Ollama, et hop, votre site web se génère sous vos yeux.

L’installation est assez simple. Il vous faut d’abord Ollama installé sur votre machine et ensuite, vous récupérez un modèle, par exemple deepseek-r1:7b avec la commande

ollama pull deepseek-r1:7b.

Et une fois Ollama lancé avec

ollama serve

il ne reste plus qu’à installer LocalSite avec npm :

git clone https://github.com/Korben00/LocalSite.git
npm instal
npm run dev

Ensuite, direction localhost:3001 et c’est parti.

Pour l’interface, vous avez donc un éditeur Monaco intégré (le même que dans VS Code), une preview en temps réel qui s’adapte aux différentes tailles d’écran (desktop, tablette, mobile), et la possibilité de basculer entre génération et édition manuelle du code. C’est super pratique pour peaufiner le résultat une fois que l’IA a fait le gros du travail.

Pour ceux qui se demandent quels modèles utiliser, d’après les benchmarks 2025 , CodeLlama 34B reste une référence pour la génération de code HTML/CSS/JavaScript. Mais si votre machine est plus modeste, les versions 7B ou 13B font déjà très bien le job. Qwen2.5-Coder est aussi une excellente alternative, surtout si vous voulez intégrer du code plus complexe dans vos pages. Vous pouvez aussi tenter avec des modèles “Thinking” comme GPT OSS si ça vous chauffe…

Bref, là où DeepSite original nécessite obligatoirement une connexion à Hugging Face et utilise les serveurs API de DeepSeek (donc ça coûte aussi des sous), mon petit LocalSite fait tout en local. Vos données restent chez vous, vous pouvez bosser offline, et surtout, pas de limite d’utilisation. Vous pouvez donc générer autant de sites que vous voulez, tester différents modèles, expérimenter sans compter comme dirait Macron.

L’aspect vie privée n’est pas négligeable non plus car ça permet de prototyper rapidement, et avoir une solution 100% locale évite pas mal de questions juridiques sur la confidentialité des données.

Techniquement, l’architecture repose sur Node.js côté serveur et communique avec Ollama via son API locale. Le code généré est du pur HTML/CSS/JavaScript vanilla, donc compatible partout. Et vous pouvez directement copier-coller le résultat ou télécharger le projet HTML complet (j’ai ajouté un import / export de projets zip). Pas de framework lourd, pas de dépendances obscures, juste du code web standard.

Pour les développeurs qui veulent pousser plus loin, le code source est bien sûr disponible et modifiable. Vous pouvez ajouter vos propres templates, personnaliser les prompts système, ou même intégrer d’autres modèles compatibles avec Ollama.

Il vous faudra quand même un minimum de RAM pour faire tourner les modèles (comptez 8 Go pour les modèles 7B, 16 Go pour les 13B, et 32 Go pour les gros modèles 33B+) mais vu les capacités de génération et l’indépendance totale vis-à-vis du cloud, ça vaut le coup surtout que les modèles dispo dans Ollama progressent rapidement et deviennent de plus en plus optimisés. Je pense par exemple à GPT-OSS.

Bref, j’ai pris une idée cool (DeepSite), et je l’ai réadapté à l’aide de Claude Code et de mes maigres connaissances, pour la rendre accessible et respectueuse de la vie privée et du coup, je trouve ça encore plus cool ^^. Par contre, je suis un garçon assez occupé et je ne suis pas mainteneur de projet open source donc si vous voulez des modifs dedans ou si vous voyez des bugs, faudra vous y coller vous-même ^^.

Si ça vous dit de tester, c’est par ici.

Vous savez ce qui m’a plu en découvrant aujourd’hui MathJax 4.0 ?

Ce n’est pas tant les nouvelles fonctionnalités (pourtant impressionnantes) que le chemin parcouru depuis 2009. Car il y a 15 ans, afficher une simple équation mathématique sur une page web relevait du parcours du combattant et aujourd’hui, avec MathJax c’est tout ce qu’il y a de plus trivial.

Alors pour ceux qui ne connaissent pas, MathJax c’est LE moteur JavaScript open-source qui permet d’afficher des équations mathématiques sur n’importe quel navigateur. Sans plugin, sans galère, juste du JS pur.

Et cette v4 règle enfin des problèmes qu’on traîne depuis des années. Prenez par exemple le retour à la ligne automatique… Jusqu’à présent, si vous aviez une équation trop longue, tant pis pour votre mise en page. Et bien avec la v4, MathJax gère maintenant le line-breaking intelligent, aussi bien pour les équations en ligne que pour celles en bloc.

Les performances ont aussi pris un coup de boost considérable grâce à l’équipe qui a déplacé la génération de la synthèse vocale dans des web workers séparés. Concrètement, ça veut dire que même sur des pages bourrées d’équations complexes, votre navigateur reste réactif. Fini les freezes quand vous chargez un document de 200 pages avec des maths partout.

Côté typographie, c’est également du très lourd puisque MathJax 4.0 introduit un nouveau système de fonts par défaut avec une couverture de caractères bien plus étendue. Vous pouvez maintenant choisir parmi plusieurs polices mathématiques selon vos besoins.

L’intégration HTML dans les expressions LaTeX et MathML, sont également très cool car ça permet d’inclure des éléments HTML directement dans vos formules mathématiques. Des liens cliquables dans une équation, des tooltips interactifs, des animations… Les possibilités sont énormes pour créer des contenus éducatifs vraiment engageants.

Pour l’utiliser, il vous suffit d’inclure l’appel vers ce JS dans votre page HTML :

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>MathJax example</title>
 <script id="MathJax-script" async
 src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js">
 </script>
</head>
<body>

 When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
 \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

</body>
</html>