Y'a un truc qui me rend joyeux avec le web, c'est quand des devs décident de pousser les technos dans leurs retranchements juste pour prouver que c'est possible.

Et VoxCSS , c'est totalement ça : une bibliothèque JavaScript qui permet de faire du rendu voxel complet en utilisant uniquement le DOM et le CSS. Alors attention, quand je dis "uniquement", je veux dire sans WebGL et sans l'élément <canvas>. Juste des éléments HTML empilés intelligemment qui tirent parti de l'accélération matérielle du navigateur pour les transformations 3D.

Pour cela, VoxCSS utilise des grilles CSS superposées sur l'axe Z pour créer un espace volumétrique. Chaque niveau de profondeur est une grille CSS classique, décalée avec des translations 3D. Les voxels eux-mêmes sont des cuboïdes HTML composés de plusieurs faces positionnées avec des rotations CSS.

Par défaut, la scène utilise une perspective de 8000px et le fameux transform-style: preserve-3d pour que la magie opère... Un pur hack de génie qui transforme votre navigateur en moteur 3D sans passer par les API habituelles !

Et le rendu n'est pas dégueu du tout puisque le moteur gère les couleurs, les textures, et même différentes formes comme des rampes, des pointes ou des coins pour sortir du simple cube de base. Pour ceux qui se demandent comment ça se passe pour les ombres, VoxCSS simule également un éclairage en jouant sur l'opacité des faces, ce qui donne ce petit relief indispensable au style voxel. Vous pouvez même choisir entre différentes projections (cubique ou dimétrique) pour donner le look que vous voulez à votre scène.

Côté performances, même si on parle de manipuler potentiellement des milliers d'éléments DOM, l'équipe de Layoutit Studio a bien bossé. Y'a un système de "culling" pour ne pas calculer les faces cachées (on n'affiche que la surface extérieure, quoi) et une option de fusion (le mergeVoxels) qui permet de regrouper les cubes adjacents pour alléger la structure HTML. C'est pas activé par défaut, mais c'est indispensable dès que votre château Minecraft commence à prendre de l'embonpoint.

L'installation se fait via

npm install @layoutit/voxcss

La lib est hyper flexible puisqu'elle propose des wrappers pour React, Vue et Svelte, tout en restant utilisable en vanilla JS.

Vous posez votre caméra (<voxcamera>) pour gérer le zoom et la rotation, vous injectez votre scène (<voxscene>), et roule ma poule. Cerise sur le gâteau pour les artistes, VoxCSS inclut un parser pour charger directement vos fichiers .vox créés dans MagicaVoxel.

Si vous voulez tâter la bête sans coder, allez faire un tour sur Layoutit Voxels, l'éditeur qui sert de démo technique. Ils ont aussi sorti Layoutit Terra qui génère des terrains entiers avec la même techno.

Franchement, pour un gros jeu en prod, OK pour du WebGL, mais pour créer des éléments interactifs stylés, des petites scènes 3D ou juste pour la beauté du geste technique, c'est un sacré bel outil.

Et puis, faire de la 3D sans toucher à un seul shader, ça a un petit côté cool je trouve.

Est-ce que vous avez déjà eu cette envie soudaine de composer de la techno tout en ayant l'air d'un hacker qui pirate le Pentagone dans un film des années 90 ?

Si oui, j'ai le truc parfait pour vous : Strudel .

Pour ceux qui débarquent, le live coding musical dont je vous ai déjà parlé y'a pas longtemps avec Loopmaster , c'est l'art de créer du son en écrivant du code en temps réel.

En gros, on tape des lignes, on valide, et hop le rythme change en direct. Strudel rend ce concept ultra accessible puisqu'il tourne entièrement dans votre navigateur préféré, sans chichi et surtout sans avoir besoin d'installer des usines à gaz comme SuperCollider ou de configurer des environnements de dev à n'en plus finir.

L'interface de Strudel - sobre mais efficace ( Source )

Le projet est d'ailleurs un port officiel du langage de patterns de TidalCycles vers JavaScript. TidalCycles , c'est un peu la référence absolue dans le monde du live coding, mais ça demandait pas mal de bidouille (Haskell, etc.) pour fonctionner correctement. Avec Strudel, vous ouvrez une page web, vous tapez du code et c'est parti mon kiki !

Le principe repose sur des motifs rythmiques qui occupent toujours le même espace temporel (appelé "cycle"). Contrairement à un séquenceur classique où on empile des notes, ici on définit des structures qui se compressent ou s'étirent automatiquement. C'est un peu déroutant au début mais une fois qu'on a pigé le truc, on peut sortir des beats qui tabassent en seulement trois lignes de code. Perso, je trouve ça assez hypnotique (oui j'aime le comique de répétition).

Côté technique, l'outil s'appuie sur l'API Web Audio et intègre un synthé/sampler baptisé Superdough. C'est assez costaud et ça permet déjà de s'amuser avec plein d'effets sans quitter le browser. Et pour les plus barbus d'entre vous qui voudraient piloter leur propre setup SuperCollider , c'est possible aussi via OSC , mais attention, il faudra quand même lancer un petit serveur relais en Node.js pour faire le pont entre le navigateur et votre machine.

Y'a même un workshop interactif vraiment bien foutu pour apprendre les bases. En quelques minutes, vous allez comprendre comment balancer des snares et des kicks avec une précision chirurgicale. Et le petit plus qui fait plaisir, vous pouvez partager vos chefs-d'œuvre en copiant simplement l'URL, puisque tout votre code est encodé dedans. C'est direct in the pocket !

La Reine de Strudel c'est évidemment Switch Angel :

Après l'attaque massive de septembre 2025 qui a vérolé 18 packages ultra-populaires (coucou debug et chalk ) et la campagne Shai-Hulud 2.0 qui a siphonné les credentials cloud de 25 000 dépôts GitHub, on peut le dire, on est officiellement dans la sauce. Surtout si vous êtes du genre à faire un npm install comme on traverse l'autoroute les yeux bandés ! Il est donc temps de changer vos habitudes parce qu'entre les crypto-stealers qui vident vos portefeuilles en 2 heures et les malwares qui exfiltrent vos clés AWS, l'écosystème JavaScript ressemble de plus en plus à un champ de mines.

Le rayon d'action de la campagne Shai-Hulud 2.0 - une véritable moisson de secrets ( Source )

D'ailleurs, beaucoup se demandent comment savoir si un package npm est vraiment sûr. Et la réponse classique, c'est de lire le code de toutes les dépendances. Ahahaha... personne ne fait ça, soyons réalistes. Du coup, on se base sur la popularité, sauf que c'est justement ce qu'exploitent les attaques supply chain en ciblant les mainteneurs les plus influents pour injecter leurs saloperies.

C'est là qu'intervient safe-npm , une petite pépite qui va vous éviter bien des sueurs froides. Cela consiste à ne jamais installer une version de package publiée depuis moins de 90 jours. Pourquoi ? Parce que l'Histoire nous apprend que la plupart des compromissions massives sont détectées et signalées par la communauté dans les premiers jours ou semaines. Ainsi, en imposant ce délai de "quarantaine", vous laissez aux experts en sécurité le temps de faire le ménage avant que le malware n'arrive sur votre bécane.

Et hop, un souci en moins !

La supply chain npm, le nouveau terrain de jeu préféré des attaquants ( Source )

Concrètement, si vous voulez react@^18 et que la version 18.5.0 est sortie hier, safe-npm va poliment l'ignorer et installer la version précédente ayant passé le test des 90 jours.

Pour l'installer, c'est du classique :

npm install -g @dendronhq/safe-npm