Vous avez déjà galéré à créer un mot de passe qui respecte les 42 règles imposées par un site un peu trop zélé ? Genre au moins 16 caractères, une majuscule, une minuscule, un chiffre, un caractère spécial, et surtout pas le prénom de votre chat ni votre date de naissance ?

C’est le genre de micro-agression qui peut flinguer une matinée ^^.

Heureusement, y’a un dev qui a eu une idée de génie en inversat complètement le problème grâce à la puissance brute des expressions régulières.

Son outil s'appelle RegExp Password Generator et comme son nom l'indique, c'est un générateur de mots de passe qui fonctionne avec des regex. Au lieu de cocher des cases un peu nazes dans une interface classique, vous définissez vos contraintes ligne par ligne sous forme d'expressions régulières.

Par exemple, vous balancez ^.{16,32}$ pour imposer une longueur entre 16 et 32 caractères, [0-9] pour exiger au moins un chiffre, and [A-Z] pour une majuscule. L’outil va alors calculer l’intersection de tous vos patterns pour vous sortir 5 mots de passe aléatoires qui matchent absolument toutes vos règles simultanément.

L'outil repose heureusement sur la bibliothèque TypeScript @gruhn/regex-utils. Pour ceux qui font du code, vous savez que manipuler des regex pour faire des intersections ou des compléments, c'est normalement une purge monumentale que la plupart des langages de programmation ne gèrent pas nativement.

C'est pourquoi ici, la lib fait tout le sale boulot de calcul d'ensemble pour s'assurer que vos contraintes ne sont pas contradictoires. Si vous demandez un truc impossible (genre un mot de passe qui doit être composé uniquement de chiffres ET uniquement de lettres), l’outil vous le dit direct au lieu de mouliner dans le vide.

Et tout tourne en local dans votre navigateur donc c'est cool pour la vie privée, par contre, gardez en tête que la lib supporte un sous-ensemble bien précis de la syntaxe RegExp de JavaScript. Inutile donc tenter des trucs ultra exotiques comme les lookbehinds complexes, l'outil risque de vous renvoyer une erreur.

Le côté pratique, c'est que vos contraintes sont directement encodées dans l'URL. Du coup, vous pouvez bookmarker une config précise pour un site spécifique ou la partager avec vos collègues sans avoir à tout retaper à chaque fois. Un petit compteur affiche même le nombre total de combinaisons possibles avec vos règles, histoire de vérifier que vous n'avez pas créé un mot de passe trop prévisible (ou au contraire, un truc tellement restrictif qu'il n'existe qu'une seule possibilité).

Bref, j'ai trouvé ça original !

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 :