Le Hollandais Volant

Mh… un petit jeu façon "détective" pour savoir d’où vient un bug (en JS, ici).

Y en a quelques autres là : https://mysteries.wizardzines.com/

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 ?

Hahaha !

Sinon… Utiliser « array.* » pour trier une « liste » : lol ? :-D

Faut savoir qu’en JS, il y a des tableaux, des listes, des collections, des objets… et tous n’acceptent pas d’être traités comme des tableaux. C’est parfois casse gueule.

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 !

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 là)

C’est si beau.

Y en a plein, des pages qui produisent des fractales en JS.

Je vais essayer d’en faire une, parmi mes outils (probablement à partir d’un script existant, par exemple).

Un simulateur en ligne de la machine Enigma.

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.

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.

Petit mémo.

Par contre, ne vous mélangez pas les pinceaux entre array / objects / nodeList / elementCollection et je ne sais quoi d’autre : tous ne sont pas des tableaux et ne fonctionnent pas pareil.

Tellement ça.

… et dans 5 ans on verra apparaître des millions de questions sur Stackoverflow qui demandent comment on traduit tel truc de typescript vers du javascript, comme ça se fait aujourd’hui avec jQuery.

Parfois, c’est vraiment des demeurés ceux qui font les spec JS.

"URL" c’est la nouvelle API pour produire/parser une URL. C’est l’équivalent de « pathinfo() » en PHP.

On peut récupérer le chemin, le domaine, le port, l’utilisateur, le mot de passe, le protocole, le hash, les paramètres…
…mais pas le nom du fichier courant.

Yup, ils y ont tout mis… sauf le "basename".

Du coup on est obligé de mettre un

url.pathname.substring(url.pathname.lastIndexOf('/')+1)

Normalement, faut pas ajouter des méthodes aux prototypes, mais je pense que je vais faire une exception ici. Cette lacune est ridicule.

Un color picker en JS.

Sympa.

Sauf qu’à première vue, les 10 lignes de JS ne sont pas tout : y a une lib qui est incluse (voir les settings). Et la lib seule fait 30 ko…

Ouais, à ce tarif, je préfère mon color picker JS/CSS : https://lehollandaisvolant.net/tout/tools/color/
Ça fait 15 ko (HTML + JS + CSS), et il convertit en RGB/HSL/CMYK/HEX dans n’importe quel sens.
Bon par contre, ça fonctionne pas dans IE.

Des exemples du fonctionnement du "==" en JS, sachant que « 2 == "2" » retournera true, il y a tout un tas de procédures qui entrent en jeu pour convertir les deux membres jusqu’à obtenir un résultat.

(PS : connaître le fonctionnement interne d’un ordi, d’un CPU, d’un langage ou d’un environnement d’exécution peut beaucoup aider pour optimiser ses scripts)