Le Hollandais Volant

..- -. -. --- ..- ...- . .-.. --- ..- - .. .-.. .--. --- ..- .-. -.. . -.-. --- -.. . .-. -.. ..- -- --- .-. ... . ---... -.--.-

Woah, une page avec des circuits logiques interactifs.

Prenez par exemple la NAND : https://lodev.org/logicemu/#id=nand_logic

Et vous pouvez voir les portes AND, OR, XOR… à l’œuvre. Amusez-vous à cliquer sur les entrées, pour voir comment les valeurs en sortie réagissent en fonction de leur état (allumé / éteint) et du type de porte (tous ont un comportement différent).

En prime, c’est tout en offline en JS dans le navigateur, pas dans le cloud.
C’est très Web 1.0, mais c’est absolument génial.

(Merci Newa pour le lien !)

Vous jouez à Wordle / Sutom ? Vous ne connaissez pas tous les mots en français ?

Je vous ait fait un z'outil (pas encore terminé) !.

Exemple, si le mot est « R . . . . . .S », tapez « R......S » et il vous sort tous les mots possibles (c’est en regex, donc le joker c’est le point).
Dans l’outil, le début est fixe (le « ^ » est implicite) mais pas la fin (le « $ » peut être rajouté à votre texte). En vrai il faut donc mettre «R......S$ ».

Le dictionnaire de mots utilisé fait 336 411 mots (y a les singuliers, les pluriels, les conjugaisons…) et pèse un peu. Attendez que le chargement se finisse avant de lancer la recherche.

Pour les plus férus, vous pouvez créer et taper la régex parfaite qui permettra à partir des lettres bonnes (en rouge) et les lettres déplacées (en jaune) =) de filtrer suffisamment pour réduire la recherche à tout juste quelques mots.

Il ne resterait plus qu’à utiliser le dictionnaire interne de Sutom et à faire un script qui analyse et automatise la résolution du jeu :-D.
Après tout, c’est de la pure logique, ça doit pouvoir se faire. On fait bien des solveurs de Sudoku ou de Rubik's-Cube.

En dehors de ça, cet outil peut aussi servir pour les mots croisés (toujours en exploitant la puissance des régex pour filtrer au nombre de lettres (avec « .{5}$ » par exemple).

(PS : ceux qui pensent que c’est de la triche, c’est votre droit, mais ne vous fatiguez pas : si vous n’êtes pas programmeur, vous ne comprendriez pas le fun de faire un script qui fait tout à votre place, y compris répondre une fois par jour à un jeu gratuit où y a rien à gagner ou à perdre :p)

Le "tout web" est vraiment une abomination.

*Le “tout web” mal fait.

Je fais le même constat, hein, mais Microsoft est un cas à part. Tu regarderas : tout leur site est d’une lenteur pas possible. Probablement parce que ça tourne sous Windows, avec ASP et Typescript. Trois technos à eux qui sont — en gros — trois merdes.
Les mêmes outils sous Linux, PHP et Vanilla-JS seraient bien plus rapide.

Ensuite, avec des gros sites, ils doivent supporter tout le monde. Et chez MS, va jusqu’à supporter IE8, donc forcément c’est lent…
Pour ce qui est d’Outlook, Microsoft paye en 2021 la merde d’IE d’il y a 15 ans. Le Karma :D

Enfin, quand on intègre des lib JS qui n’apportent rien comme jQuery ou TypeScript (oui : ces job n’apportent rien : à part traduire du code écrit par un dev en Vanilla JS, ça ne fait rien du tout), ça ne peut pas être rapide.

Des choix ont été fait chez eux, mais ils priorisent la compatibilité et des schémas d’architecture pensés pour tout sauf la rapidité.

Je vais pas citer mes outils (j’ai moi-même mon lecteur RSS, notes et agenda en Vanilla, en ligne et tout est absolument instantané), mais on peut comparer par exemple les libs d’affichage d’équations en HTML.

À savoir KaTeX et MathJaX : https://katex.org/ → ils montrent la comparaison de la vitesse de rendu et c’est spectaculaire. Et le pire, c’est qu’il y a encore plus rapide que KaTeX.

Alors certes, MathJax est le plus compatible et a quelques fonctions en plus. Mais les 3/4 du temps, personne n’a besoin de ça et c’est surtout incroyablement lent. Mais on doit se coltiner tout ça à chaque affichage d’une page…

Pour terminer, le pire dans tout ça, je dirais que tout le monde est habitué à la lenteur : la médiocrité est devenue un standard. Donc personne ne se pose de question quant à savoir si c’est normal ou pas. Pour les Michus, c’est normal : faut attendre.
Alors pour ceux qui ont commencé avec un client natif sous Linux où tout va vite, ben nous on voit la différence. Mais on représente 0,79 % de part de marché, qui plus est un concurrent de Microsoft.

(D’ailleurs, si tu as Vivaldi d’installé, essayes de changer l’User-Agent de Vivaldi pour celui de Edge (Vivaldi ne devrait pas poser problème vu qu’il partage son moteur de rendu). Tu pourrais avoir des surprises. Après tout, Google sabote la vitesse de ses sites pour tout ce qui n’est pas Chrome. Microsoft avec ses pratiques qui puent pourraient bien faire pareil).

Truc tout con, mais que je n’avais pas.

Notes :

— il n’affiche pas d’erreur si l’on met une température sous le zéro absolu, mais personne ne serait tenté de faire ça de toute façon. N’est-ce pas, bande de filous ?
— Y a beaucoup de choses à dire sur ces échelles. Un jour faudra aussi que je fasse un post pour dire pourquoi on met des degrés partout sauf à Kelvin (et Rankine, même si pour lui, l’usage fait qu’on parle de « degré Rankine » tout de même).
— L’échelle Rankine est à l’échelle Fahrenheit, ce que l’échelle Kelvin est à l’échelle Celsius.
— Je n’ai pas mis l’échelle centigrade. Je n’ai mis que les définitions modernes (sinon il y a au moins 3 échelles Fahrenheit et autant pour Celsius).
— Je n’ai pas mis de majuscule à « kelvin » dans la liste déroulante. C’est normal : les unités ne s’écrive pas avec des majuscules. Je répète : les unités ne prennent pas de majuscules, même si elles proviennent d’un nom propre. Les symboles, oui, les unités, non.

Je viens de rajouter le Y'CbCr sur ce sélecteur. C’est le format d’encodage de la couleur utilisée par exemple dans le format JPEG (voir là : https://lehollandaisvolant.net/science/jpg/ )

C’est un dérivé du Y'UV, lui-même étant une correction gamma du YUV (format qui sépare la luminance de la chrominance sur une couleur). Le Y'CbCr est utilisé en transmission numérique (YUV étant surtout analogique).

C’est censé appliquer des coefficients de pondération de la couleur à la fois pour les yeux humains et pour les luminophores des écrans, donc la formule est pleine de paramètres numériques.

C’est pas très facile à utiliser sur tous les sites que j’ai trouvé, y en a pas deux qui utilisent les mêmes coefficients. Et plus, il y a clairement des confusions entre YUV et Y'UV, et même RGB / R'G'B' / rgb… De ce que j’ai compris, et j’ai fini par appliquer ça :

– rgb : minuscules, donc valeurs ramenées sur une échelle 0..1
– RGB : valeurs entre 0..255
– R'G'B' : RGB avec correction gamma.

Aussi, vous verrez sur la page, il y a plusieurs types de Y'CbCr : une échelle complète (utilisée seulement pour les conversions et les fichiers), une échelle réduite (de 16..235 au lieu de 0..255, utilisée pour l’affichage, de façon à maintenir une marge d’erreur aux extrémités de l’échelle). Cette dernière se divise elle aussi en plusieurs normes, selon que ce soit pour la transmission vidéo SDTV ou HDTV (voire d’autres, j’ai pas été au delà).

Je vais les rajouter peu à peu (j’aime avoir quelque chose de complet).

Faut aussi que je rajouter YIQ, Y'DrDb, Y'PbPr…

On est vraiment obligé de tout faire soi-même en ligne de nos jours. C’est chiant. Mais d’un côté ça permet d’apprendre, donc bon.

Je voulais convertir un timestamp en date. Je cherche dans Google « timestamp to date ».

Les premiers sites que j’obtiens, dans l’ordre 
— https://www.epochconverter.com/ → 768 ko, 7 domaines connectés, 6 trackers. Et une interface composée d’une quinzaine de boutons.
— https://timestamp-tool.fr/ → 665 ko, 9 domaines, 4 trackers. Et 3 paragraphes pour expliquer ce qu’est le timestamp…
— https://www.infowebmaster.fr/outils/timestamp-date.php → 172 ko, 5 trackers, 4 domaines.
— https://timestamp.online/ → 218 ko, 4 trackers 7 domaines.

Aucun site.
AUCUN putain de site ne peut plus se passer de trackers de nos jours ?!

Ah et le poids des pages là, c’est avec AdBlock.
La première page met 7 secondes à s’afficher chez moi, depuis qu’Orange a décidé de se foutre de l’état des lignes cuivre vu qu’ils prévoient de fibrer la zone (ça fait un an qu’on attend).

Du coup j’ai amélioré mon outil à moi :
https://lehollandaisvolant.net/tout/tools/timestamp/

Avant il se contentait de donner le timestamp. Maintenant il le converti.
Zéro trackers. Zéro domaines tiers.
Et 50 ko.

Voilà.
C’est si difficile à faire ?

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.

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 )

Lire un fichier audio en affichant une visualisation sous forme de spectre audio.

… en 56 lignes de JS.

À l’image du générateur de figures de Mandelbrot et des figures de Julia, en voici une avec les « figures en papillon », que j’appelle « figures de Lorenz ».

Je ferais un article pour discuter de ce qu’on voit`exactement (probablement en fin d’année, vu que j’en ai un tas d’autres prévus), mais je viens de finir ça et même si l’outil n’est pas encore fini ni au point (certains boutons ne marchent pas encore), je ne peux m’empêcher de partager ça :-)

Essayez de mettre un nombre de points très important (100 000 à 500 000) et un trait très fin (0,25 px). Selon votre ordi, ça prendra ~5 secondes pour charger, mais le résultat est bô. J’ajouterais un bouton pour voir le tracé se faire lentement, façon "écran de veille".

Comme pour les Mandelbrot, toute la « magie » se passe sur seulement 3 lignes de code, correspondant au calcul des 3 équations différentielles d’un attracteur de Lorenz (la fonction mathématique dont la représentation est cette figure).

Sous le coude, même si perso j’utilise https://www.pdfescape.com/open/

Le premier (probablement pas le seul) que j’ai trouvé et qui permette de tourner une page parmi d’autres, d’annoter, de dessiner, ou de virer des pages.

J’aurais aimé que ça soit un outil en JS, mais visiblement le PDF est trop complexe pour ça.

Parce que j’en ai marre d’avoir à ouvrir Twitter pour avoir accès à un emoji quelconque.

Note : selon le système où vous affichez cette page, toutes les emojis ne sont peut-être pas disponibles, ni affichés correctement. Ça dépend en partie de la police utilisée par le système. Sur les systèmes récents, ça ne devrait pas poser trop de soucis.

Sous windows, il y aurait eu aussi « Win + ; ».

Voilà.

Oui c’est un outil de feignasse.

Un article sur le concept de « petits sites » en poids total.

J’y découvre ce genre de listes :
— https://1mb.club/ (liste de sites faisant moins de 1 Mo)
— https://512kb.club/ (liste de sites faisant moins de 512ko)
— https://10kbclub.com/ (sites de moins de 10 ko (!!))

C’est amusant :D

~

Pour info, pas besoin de beaucoup d’espace disque pour faire beaucoup de choses.

Je ne dis pas que mes outils sont hyper optimisés, et je me permets d’être relativement « fancy », mais voici quelques exemples d’outils en ligne légers : https://lehollandaisvolant.net/tout/tools/

J’avais démarré ces outils juste parce que j’en avais plein le cul d’avoir des outils simples dans des pages de 5 Mo pleines de pub, de trackers, et codés avec les pieds (genre celui-ci par exemple : l’outil initial utilisait jQuery et était lent comme les pieds ; j’ai refait l’interface sans jQuery et là c’est rapide).

Typiquement, une page pour créer un QRcode, décoder du Base64, ou calculer une MD5 en ligne. Ce genre d’outils. Si vous ne les connaissez pas, la grande majorité de ces outils fonctionnent dans le navigateur (rien n’est alors envoyé chez moi ou en ligne).

Je suis le premier utilisateur de ces outils et je suis content de les avoir fait.