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

Je suis complètement passé à côté car j'étais en vacances lors de leur dernière mise à jour... mais j'ai franchement halluciné en retombant sur NeoCities ces jours-ci. Si vous avez connu l'époque bénie de GeoCities , quand le web était moche mais vivant, alors vous allez kiffer.

NeoCities, c'est tout simplement l'héritier spirituel de cette époque... mais en mieux ! Leur philosophie c'est de redonner le contrôle aux gens et ramener la créativité brute sur le web, tout ça sans publicité, sans trackers ni cookies et sans vendre vos données à des IA aux dents pourries.

L'interface de NeoCities - sobre, efficace et sans fioritures ( Source )

Vous l'aurez compris parce que vous êtes malin, c'est un service d'hébergement de sites statiques. Vous lui balancez votre HTML, votre CSS et vos bouts de JavaScript, et hop, votre site est en ligne ! Comme ça on esquive le couple moteur + base de données PHP/MySQL qui rame ou qui se fait hacker tous les quatre matins. Là au moins c'est sécurisé, c'est rapide, et c'est surtout ultra-libre.

J'ai fait à peu près le même move moi-même en 2024, en migrant mon site dynamique sur une version statique. Et je pense que vous avez apprécié parce que le site est beaucoup plus rapide à charger, la navigation est beaucoup plus agréable, et chaque jour mon trafic augmente, ce qui est un bon signe quand même. Je viens justement d'en faire un petit retour d'expérience sur ma page LinkedIn Korben .

En effet, j'ai arrêté de partager mes articles sur mes réseaux sociaux il y a peu, et j'ai retiré la pub AdSense en juin dernier. Je pensais que cela aurait eu un impact négatif fort sur mon trafic, alors qu'en fait c'est tout le contraire qui s'est produit ! Et comme mes revenus ne sont plus corrélés à la quantité d'articles que je fais chaque jour, je n'ai plus aucune pression. Alors je m'amuse à écrire comme un porc ou pas du tout en fonction du temps dont je dispose, des idées folles qui me passent par la tête, et de mes problèmes de sommeil ^^.

Allez, je ferme la parenthèse pour revenir à NeoCities.

Déjà leur offre gratuite envoie du bois puisque vous avez le droit à 1 Go de stockage et 200 Go de bande passante par mois. C'est laaaaargement suffisant pour faire un site qui déchire avec des GIFs animés horribles et vos meilleures réflexions sur la vie. Je vous invite vraiment aller voir la galerie des sites ici , c'est incroyable.

Après vous pouvez aussi soutenir le projet et devenir un "Supporter" pour 5$/mois, vous passerez alors à 50 Go de stockage, 3 To de bande passante, et surtout la possibilité d'utiliser votre propre nom de domaine.

Si ça vous chauffe, je vous conseille vraiment de prendre l'option payante avec votre propre nom de domaine, parce que comme ça le jour où vous voudrez déménager vote site, ce sera beaucoup plus simple. Avoir son NDD à soi, c'est vraiment le truc que je conseille à tout le monde, parce que le jour où le service ferme, vous perdez votre communauté !

Ce qui est vraiment génial avec NeoCities c'est également l'aspect social. On retrouve les fameux "WebRings" comme à l'époque... Si vous n'avez pas connu, bande de bébés, c'était des sites qui se liaient les uns aux autres pour former des anneaux thématiques. C'était vraiment chouette. On retrouve aussi sur NeoCities un système de tags pour découvrir des trucs cool, comme à l'ancienne, bien loin des algo de réseaux sociaux qui vous enferment dans une bulle.

Là on explore le web comme on le faisait en 1998, avec curiosité et un max de sérendipité !

Et pour les plus barbus d'entre vous, sachez qu'il existe même un outil en ligne de commande (CLI) pour déployer vos fichiers au taquet sans passer par l'interface web. C'est nickel pour intégrer ça dans vos workflows de dev.

Forcément, ça me rappelle quand GeoCities a été supprimé . On a tous chialé nous les vieux parce que c'était un pan entier de l'histoire du net qui partait en fumée. Alors heureusement que des initiatives comme celle-là existent pour préserver cet esprit de liberté sur le web et permettre à tous, même ceux qui n'ont pas de compétences techniques, d'avoir un petit bout de web rien qu'à eux.

Ouais je déteste l'élitisme de certaines personnes qui, parce qu'elles maitrisent 2 ou 3 trucs sous Ubuntu, se la jouent chefaillon face aux gens normaux qui aimeraient bien juste partager des trucs à eux, sans forcément plonger dans la fosse à purin des services de microblogging ou devenir à leur tour un de ces "sapusépaslibré" qui se la racontent.

Et justement, Neocities est à la croisée des chemins. C'est pas auto-hébergé mais c'est pas un GAFAM, c'est éthique, c'est simple à utiliser, c'est payant oui mais c'est pas si cher que ça. C'est même open source ! Alors si vous avez un projet de site perso qui traîne, et que vous n'avez pas envie de vous fader la technique, c'est peut-être le moment de vous lancer comme à l'ancienne !

Mais attention, et c'est un webmaster qui a débuté en 1997 qui vous dit ça : Vous risquez d'y passer vos nuits !!!

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 :

Si vous aimez les globes 3D qui en jettent, j'ai un petit projet sympa à vous présenter. Ça s'appelle TerraGuessr et c'est Fred, un lecteur de longue date (coucou Fred !), qui m'a envoyé ça !

L'idée de Fred est assez géniale. Il propose d'utiliser un globe terrestre interactif pour visualiser la "déformation" du monde sous le poids des inégalités. En gros, au lieu de voir une sphère parfaite, vous voyez les continents s'étirer ou se contracter en fonction d'indicateurs comme la richesse, l'éducation ou encore la santé.

C'est ce que les profs de Géographie appellent un cartogramme en 3D. C'est hyper visuel et ça permet d'apprendre plein de choses !

Pour la petite histoire, Fred a codé tout ça... sans savoir coder au départ. Il a utilisé pour cela l'éditeur Cursor , Google AI Studio et ChatGPT. Et voilà, sa bonne idée s'est transformée avec un peu d'huile de coude et beaucoup de patience en ce site de carto incroyable.

L'interface de TerraGuessr - un globe 3D pour visualiser les data mondiales

Si vous allez sur son site, vous verrez concrètement comment ces outils d'IA tant critiqués permettent à des passionnés comme Fred et d'autres, de sortir des outils complexes qui n'auraient jamais vu le jour, hormis dans leurs rêves.

Et techniquement, ça envoie du bois puisque c'est basé sur Three.js. Fred s'appuie sur des sources de données sérieuses telles que la Banque Mondiale, Our World in Data et Gapminder. Et au final, il a réussi à mouliner tout ça pour nous proposer une expérience fluide et des stats enfin concrètes.

TerraGuessr propose plusieurs modes pour s'amuser (et s'instruire, du coup) :

• Des quiz et des "stories" pour mieux comprendre les statistiques mondiales.
• Un jeu "Ultimate Countries" pour deviner tous les pays du monde avec des niveaux de difficulté de débutant à légende.
• Et un mode "public" pensé pour les animations sur TikTok ou Insta .

Il propose même une API et un back-office à prix libre pour ceux qui veulent créer des quiz et des stories, tout ça connecté à LLM pour générer les textes. Le mec est fou !

Voilà, si vous avez déjà passé des heures à essayer de devenir un pro à GeoGuessr , vous allez adorer le concept sauf qu' au lieu de chercher un poteau électrique au fin fond de la toundra, vous allez vraiment apprendre des trucs sur l'état (catastrophique) de notre planète.

A découvrir ici : TerraGuessr.org et encore bravo à Fred !

Les boîtes à rythmes physiques des années 90 sont devenues de vraies antiquités... lol. Après moi j'ai grandi avec alors forcément je mesure pas trop l'évolution mais j'imagine des gamins qui découvrent ça... Ça doit être un grand moment de solitude pour eux.

Alors si vous avez toujours rêvé de posséder l'un de ces petits Pocket Operators de chez Teenage Engineering, j'ai ce qu'il vous faut.

Ça s'appelle Beats et c'est une drum machine qui tourne DIRECT dans votre navigateur.

L'interface épurée de Beats ( Source )

C'est développé par Alejandro AR a.k.a @kinduff, et ça utilise Tone.js pour le son et Stimulus.js pour l'interface. Vous avez à votre dispo une grille de 16 pas, un format ultra classique où vous activez / désactivez ensuite des cases pour créer votre propre rythme. Y'a du Kick, de la snare, du hi-hat...etc... tout y est.

Ce qui est cool c'est que vous arrivez sur la page vous cliquez sur "Play Beat" et PAF ça tourne. Vous pouvez modifier le BPM, changer de kit de batterie pour un truc plus trap ou house, lo-fi, boom bap, etc. et même sauvegarder vos créations via une URL pour les partager avec vos potes ou David Guetta ^^.

En tout cas, je trouve que c'est une SUPER porte d'entrée pour ceux qui voudraient comprendre comment fonctionne un séquenceur sans dépenser un rond. C'est visuel et on pige vite la logique de cette grille d'instruments (ce qui est LOIN d'être le cas avec certains DAW très typé usine à gaz pour donner un air intello à votre artiste préféré).

Et puis c'est parfait pour composer quelques idées quand on est loin de son setup habituel, genre si vous êtes au bureau entre 2 réunions Teams. Après faut pas s'attendre à produire un album tout de suite non plus. C'est + pour du prototypage rapide. M'enfin, vu le prix moins cher que gratuit, personne ne va se plaindre je pense ;).

Et si ce genre d'outil vous branche, ça me rappelle Drumbit dont je vous parlais il y a pas longtemps ou encore cet émulateur web Roland TB-303 & TR-808 pour les puristes de l'Acid House.

Ouais je fais genre je m'y connais ^^

Source

Si vous avez déjà vu des vidéos d'algorave, ces soirées où des mecs font danser des foules entières en tapant des lignes de code sur un écran géant, vous savez de quoi je parle. Le live coding musical, c'est hypnotique, c'est technique, et ça donne des résultats sonores assez dingues.

Est-ce que vous avez déjà rêvé de composer de la musique comme on code un programme ? Genre, écrire une boucle for et qu'elle génère un beat au lieu d'afficher des nombres dans la console ?

Hé bien, c'est exactement ce que propose Dittytoy . Et le truc de fou, c'est que ça tourne directement dans votre navigateur. Une simple URL et hop, vous voilà compositeur.

Vous allez sur le site, vous tapez du code JavaScript dans un éditeur, vous cliquez sur "Compile", et votre navigateur se transformera alors en synthétiseur. La plateforme utilise la Web Audio API pour générer le son en temps réel, ce qui donne des possibilités assez dingues côté créativité sonore.

Dittytoy repose sur 4 briques de base. D'abord les synthés qui génèrent le son brut via des fonctions mathématiques (sinus, carrée, triangle...). Ensuite les boucles qui répètent des patterns avec des commandes play() et sleep(). Puis les enveloppes pour contrôler l'attaque et le decay des notes. Et enfin les filtres pour sculpter le son avec des passe-bas, passe-haut et compagnie.

La syntaxe est inspirée de Sonic Pi , le fameux outil de programmation musicale utilisé dans les écoles pour apprendre le code aux gamins. Si vous avez déjà joué avec, vous serez en terrain connu. Sinon, la documentation est plutôt bien foutue avec des exemples qui fonctionnent direct.

Niveau fonctionnalités, y'a également de quoi faire. Plus de 70 gammes intégrées (majeure, mineure, pentatonique...), 50 types d'accords, et même un système d'entrées qui permet de créer des sliders pour tweaker les paramètres en temps réel. Vous pouvez aussi exporter vos créations en MP3, ce qui est quand même pratique pour les partager.

Perso, ce qui me plaît dans ce genre d'outils, c'est qu'ils démocratisent la création musicale pour les gens qui ont le cerveau câblé "code" plutôt que "solfège". Vous savez, ceux qui comprennent mieux un Math.sin(phase * 2 * Math.PI) qu'une portée avec des croches dessus.

Et puis y'a un côté hypnotique à voir son code se transformer en musique surtout avec leur visualiseur.

C'est un peu comme le Chipophone , mais version navigateur et sans avoir à recycler un vieil orgue.

Le créateur, Reinder Nijhoff, a même sorti un package npm pour les développeurs qui voudraient intégrer le moteur dans leurs propres projets.

C'est gratuit, le package npm est sous licence MIT, et les créations partagées sur la plateforme sont sous CC BY-NC-SA par défaut. De quoi vous la jouer compositeur de chiptune entre deux commits.

Bon, évidemment ça ne remplacera pas Ableton pour produire un album. Mais pour s'amuser, apprendre les bases de la synthèse sonore, ou juste épater vos collègues à la pause café en générant un beat avec 10 lignes de code, ça fait largement le taf.

Source

Et si l'OS lui-même ÉTAIT le jeu ?

C'est exactement le concept derrière Aurora OS.js , un projet open source complètement barré qui simule un système d'exploitation complet dans votre navigateur... avec des mécaniques de jeu de hacking intégrées.

Le truc, c'est que ce n'est pas juste une démo technique. Aurora OS.js embarque un vrai système de fichiers virtuel avec stockage persistant, un terminal avec des commandes type Linux (ls, cd, cat, mkdir...), un gestionnaire de fenêtres, un bloc-notes avec coloration syntaxique, et toute une architecture modulaire pour les applications. Bref, ça ressemble à un vrai OS, ça se comporte comme un vrai OS, mais ça tourne dans un onglet de votre navigateur.

Côté technique, les développeurs n'ont pas fait dans la demi-mesure. C'est à base de React 19, Electron 39, TypeScript 5, Tailwind CSS v4, et des animations fluides grâce à Framer Motion. Et le tout nécessite Node.js 24 minimum, ce qui montre qu'on est clairement sur des technos de pointe.

Le projet suit une roadmap en trois étapes. La version actuelle (v0.7.7) se concentre sur les fondations et l'utilisabilité. La v1.x apportera le gameplay solo de hacking. Et la v2.x ? Du multijoueur persistant où vous pourrez hacker d'autres joueurs. Ça va être trop incrrrr !

Si vous aimez les expériences dans le navigateur ou les projets qui repoussent les limites du web , Aurora OS.js mérite clairement un coup d'œil. Y'a une démo live sur GitHub Pages pour tester directement (user: guest / mdp: guest). Et comme c'est sous licence AGPL-3.0, vous pouvez fouiller le code et même contribuer si le cœur vous en dit.

Source