#20255

Traduire une date - le hollandais volant

JavaScript contient une solution d’internationalisation assez puissant, qui permet de détecter la langue d’un texte ou de formater une date, un nombre…

Ici, j’utilise tout juste 10 lignes de JS pour capter une date entrée par l’utilisateur et la traduire dans la langue qu’il souhaite.

J’ai mis une liste immense de codes de langues, mais beaucoup ne sont pas supportées. Je vais peut-être faire un filtre pour les virer dynamiquement.

En attendant, vous pouvez essayer des langues un peu communes : anglais, allemand, danois… Même le perse, l’arabe ou le japonais sont supportés !

Et ça formate la langue correctement, avec les majuscules, les vigules et l’ordre tout comme il faut. Actuellement il n’y a pas les variantes (pour l’anglais, par exemple j’ai juste « anglais », sans distinguer anglais UK et anglais US).

J’étofferais ça probablement un jour, peut-être avec les émoji de drapeaux, etc. pour faire joli.

ÉDIT : on me signale qu’iOS aurait du mal avec cette page et affiche des "invalide date" partout. Je regarde ça dès que possible, mais comme c’est des fonctions internes à JS et au navigateur, il n’est pas garanti que je puisse trouver une solution. Au mieux je pourrais alors mettre un message de non support de la fonction dans le navigateur.

https://lehollandaisvolant.net/tout/tools/ln-date/

#20209

Spectrographe audio - le hollandais volant

Plus intéressant : le spectrographe d’une chanson.
Là aussi, avec un minimum de code.

C’est particulièrement joli avec des fichiers audio issus de fichier MIDI (comme ceux de vieux jeux vidéos – voir là).

Essayez aussi des morceaux de piano/classique, de métal, ou d’autres genres pour voir les différences. C’est très joli à voir. Ça fait des images sympa.

Au passage, il est possible de cacher des images dans des fichiers audio de cette manière, de façon plus ou moins subtile, plus ou moins audible dans l’audio finale.

(PS : ceux qui ont déjà joué au Konami sur mon site — ou sont en train ;) — savent où je vais cacher mes prochaines énigmes ;)).

(PPS : le code est également mis là : https://codepen.io/lehollandaisvolant/pen/GRmjKzd )

https://lehollandaisvolant.net/tout/tools/spectrum/spectrograph.php

#20194

Loading and playing a sound with the Web Audio API

Les API JS/HTML5 sont vraiment très puissantes.

Ici, on balance un MP3, et ça analyse le flux en direct. Le son est joué, mais l’analyse est dirigée vers une fonction et un canvas qui en trace le spectrgramme.

Autre exemple : https://codepen.io/ZachSaucier/pen/MbdoqQ?editors=0010
On donne un MP3 (ou autre) et ça trace le spectre en direct comme les visualisations dans un lecteur audio un peu fancy.

Encore un exemple : https://mdn.github.io/voice-change-o-matic/
Utiliser le son du micro pour l’amplifier, le déformer, le filtrer… ou appliquer n’importe fonction dessus.

~

De ce que j’ai compris de cette API, c’est qu’elle fait le lien entre des sources audio (micro, mp3…) et des destinations (haut parleurs — peut-être un fichier aussi ?).

On peut, si l’on veut, utiliser un analyser() en direct branché sur le buffer/flux audio. Cet analyser contient les données audio (le spectre en fait, dans un tableau). Dans le deuxième exemple ici, on envoit directement le tableau des fréquences sur un canvas. Ça prend une boucle for() et quelques lignes (en faisant abstraction de la grosse lib qu’il utilise).

Dans l’exemple de déformation de la voix, la « source » est le micro, mais la « destination » est null. On récupère dans un premier temps les données analysées. ces données sont déformées par un algo quelconque de déformation de la voix (bass boost, réverbération, mais on peut imaginer une voix d’alien ou de chipmunk). C’est ensuite cette voix déformée qui est balancée dans une « destination », c’est à dire le haut parleur.

La destination peut également être envoyée sur le réseau dans un flux WebRTC. On peut donc appeler quelqu’un avec une voix déformée (façon "grand méchant qui demande une rançon").

Pas mal non ?

J’ai mis du temps à comprendre tout ça, mais en simplifiant au maximum les différents scripts (et surtout en cherchant à les mettre à jour car les 3/4 des spéc et des scripts sont dépréciées…), je vais produire un petit outil en ligne pour tracer le spectre d’un fichier audio :-)

Et un pour le spectrographe aussi.

Faut savoir que 10 % de mes outils me servent tous les jours (comme de déminifier de code, ou le décodeur Base64), mais les 90 % me servent surtout à me familiariser avec les différentes techno HTML5/JS.

À chaque fois que je vois un truc sympa dans une page web, je suis toujours déçu car le code source est un bordel rempli avec 5 libs et des tas de dépendances. En épluchant la doc, ce que ces pages font en 5 Mo, je cherche à le faire en 50 lignes, sans lib, uniquement en pure-JS.

Par exemple, pour tracer le spectre d’un MP3, je l’ai fait en moins de 100 lignes.
Reste à ajouter quelques éléments d’UI et ça sera bon.

http://www.smartjava.org/examples/webaudio/example4.html

#20117

Create Conway's Game of Life in JavaScript - JavaScript Tutorial | Spicy Yoghurt

Hi,
I can’t seem to find how to leave a comment on your blog (the comment forms doesn’t show for some reason).

I just found a major way to improuve the performance of your script, that makes it run like 10 times faster, allowing it to run a grid of 200x100 every 50 ms or so.

What your script does is redrawing every single cell on everyloop. This is not required. You can only redraw the cells that have actually changed.
In the begin, about 50% or cells are alive, the rest is dead. As the gave evolves, many more cells are dead, and they remain dead most of the time, not changing theire state between most loops.

Just add a cell.redraw() when changing the .alive to the .nextAlive :

Instead of :

// Apply the new state to the cells
for (let i = 0; i < this.gameObjects.length; i++) {
    this.gameObjects[i].alive = this.gameObjects[i].nextAlive;
}

Do :

if (this.gameObjects[i].alive == this.gameObjects[i].nextAlive) {
    this.gameObjects[i].redraw = false;
} else {
    this.gameObjects[i].redraw = true;
    this.gameObjects[i].alive = this.gameObjects[i].nextAlive;
}

And in the draw() :

Replace :

// Draw a simple square
this.context.fillStyle = this.alive?'#ff8080':'#303030';
this.context.fillRect(this.gridX * Cell.width, this.gridY * Cell.height, Cell.width, Cell.height);

With :

if (this.redraw) {
    // Draw a simple square
    this.context.fillStyle = this.alive?'#ff8080':'#303030';
    this.context.fillRect(this.gridX * Cell.width, this.gridY * Cell.height, Cell.width, Cell.height);
}

This way, you will only redraw the cell (and invoke very costly canvas2D calls) when its needed.

In my instance of your script, I also change every for() loop from :

for (let i=0; i<array.length; i++) { … }

to

for (let i=0, len=array.length; i<len; i++) { … }

This avoids calling a (very) costly array.length() at each loop. Now it’s only called once.

I know nobody cares about performance theses days, but well… I do, I this makes you script much faster. As I said, I can go fullscreen on a 4K screen with 10px cells and still refresh every 50 ms, and on a Intel Integrated Graphics chip.

See it alive here : https://lehollandaisvolant.net/tout/tools/life/

https://spicyyoghurt.com/tutorials/javascript/conways-game-of-life-canvas

#19934

GitHub - graphicore/librebarcode: Libre Barcode: barcode fonts for various barcode standards.

Sick m’envoie cet outil, qui permet d’afficher un code barre à partir d’un texte. Merci à lui !
Plutôt utile : https://graphicore.github.io/librebarcode/

L’outil utilise une police spéciale, qui associe chaque lettre aux barres verticales du code barre. En plus de ça, l’outil calcule le caractère nécessaire (dans la police) pour les barres dédiées à la somme de contrôle et faire un code barre compatible EAN (la norme qui régit ça). Ceci nécessite du JS.

Je pensais le mettre dans ma collection d’outils.

Ça doit pas être bien lourd, hein ?

Mouais, sauf qu’on est en 2021 : c’est pas pèse pas une tonne, c’est que c’est nul. Par conséquent, sur la page Github du projet :

You'll need git, bash, python3.6, node […] nvm, with npm, bower and ttfautohint […]. Maybe you'll have to install the python3-venv module.

Et l’archive pèse 1,8 Mo. Et ça c’est l’archive compressée, car décompressé y en a pour 6,2 Mo.

6 397 706 octets d’octets pour créer un code barre

Je n’ai pas essayé de refaire l’outil (encore), mais 6,4 Mo, c’est plus que pour faire un moteur de blog qui fait aussi gestion des liens, de notes, de commentaires, de fichier, de contacts, agrégateur RSS et agenda… décompressé, tout compris.

Un créateur de code barre, ça devrait pouvoir tenir dans 6,4 KILO-octets.
HTML et CSS inclus.
Bordel.

Donc je vais voir si y a pas un outil similaire mais avec un poids décent, ou bien de couper à la hache les trucs qui vont pas là-dedans.

Pourquoi quand ils font les lib comme ça, ils font pas juste le fichier centrale du programme d’un côté, et éventuellement toute l’appli décorée bien fancy qui requiert cinq IDE différents, et 4 framework à la mode de l’autre ?

https://github.com/graphicore/librebarcode

#19619

Please stop using CDNs for external Javascript libraries – Terence Eden’s Blog

Y a enfin quelques voies qui se lèvent en présentant les inconvénients dans la pratique de ces choses là.

M’enfin son plus gros argument c’est surtout « évitez tant que possible d’utiliser des lib ». Je pense notamment à jQuery, souvent utilisé pour des broutilles et par habitude alors que ça alourdit considérablement la page à la fois au chargement et à l’exécution.

Quand j’ai fait cet outil par exemple la première chose que j’ai faite c’est retirer jQuery : ce dernier n’était utilisé que pour la gestion DOM de la lib avec la page, même pas dans la lib elle-même. Pourtant la vitesse d’exécution s’en est trouvée nettement améliorée !

https://shkspr.mobi/blog/2020/10/please-stop-using-cdns-for-external-javascript-libraries/

#19434

Adding A Scroll To Top Button Without JavaScript - Kev Quirk

Pas de 80 ko de JS ? Pas de jQuery juste pour un scroll ?

I like this shit !

(Par contre je n’aime pas le fait que l’on soit à faire des tutos pour des trucs aussi triviaux que ça… On en est vraiment là ? Faut croire que oui : voir ici ou )

https://kevq.uk/adding-a-scroll-to-top-button-without-javascript/#top

#19060

Un peu de Javascript… – 24 jours de web

jQuery a peut-être contribué à développer certains concepts, et à rendre le JS plus uniforme à travers les navigateurs à une époque où chaque nav avait ses propres limites, mais on est maintenant presque 15 ans après jQuery et les choses ont changées.

Hormis les applications très spécifiques, une bonne partie du langage JS (et même CSS et HTML) est nativement très bien supporté par les principaux moteurs de rendu (Blink et Gecko). jQuery n’est donc plus nécessaire, à moins de vouloir utiliser à tout prix supporter des systèmes obsolètes et dangereux (au coup d’une lenteur sans nom à l’exécution).

C’est donc un peu comme Flash : Flash a autorisé plein de choses à une époque, mais désormais les mêmes choses sont possibles sans Flash et il convient clairement de s’en passer et même de le bloquer.

Bref, les différents framework sont peut-être pratiques à un moment donnée, mais quand le moment vient où ils deviennent inutiles, il faut s’en débarrasser car ils deviennent des boulets, en terme de poids dans une page, de perfs, de technique…

Le web évolue. C’est peut-être chiant pour les grosses appli, mais aussi une bénédiction car ça permet d’avoir toujours de nouveaux trucs et ça lui permet de rester en vie.

https://www.24joursdeweb.fr/2019/un-peu-de-javascript/

#18987

C'est quoi tous ces divs ? | CommitStrip

Normalement on met le HTML à afficher sur une image, qu’on envoie au nav en base64 dans du JSON. Côté client, on utilise une lib de décodage base64 (pas que tous les nav ont ça désormais, mais c’est mieux avec une lib de 600 ko) puis un scanner OCR de 3 Mo et ses dépendances (2 Mo, dont une implémentation de pong en webGL que personne n’a demandé) avant d’incorporer ça dans le DOM.

http://www.commitstrip.com/fr/2019/09/20/whats-going-on-with-all-these-divs/