Le Hollandais Volant

Un quiz sur l’objet « Date » en JS.

Comme ils disent là :

because JavaScript is the best programming language, which was carefully assembled by computer experts and absolutely not monkeyed together in five days by some bloke at Netscape in the 90s. Nowhere becomes this more apparent than in aspects like JavaScript’s brilliantly designed Date class, which astounds people to this day with its elegant handling of JavaScript’s powerful type system. This is proudly demonstrated by the JS Date quiz by [Samwho].

Autant certains trucs peuvent être logique à cause du typage dynamique, produisant des résultats au lieu de produire une erreur, autant parfois y a des trucs qui ne sont pas logiques du tout.
Encore, si ça c’était régulier, mais même pas : parfois ça renvoie une erreur, parfois ça essayes de deviner des valeurs qui n’existent pas.

Une petite subtilité amusante et historique du JS :-)

For example,

const value = 1;
switch (value) {
// ...

that would match for:

case 1:

but not for

case '1':

Je n’avais jamais fait attention, mais donc en JS, l’opérateur switch utilise un comparateur strict.

Apparemment j’ai entendu (suite à ça).

Bientôt on pourra donc demander « Temporal.Now.plainDateTimeISO("America/New_York"); » pour avoir l’heure dans le fuseau de NYC.

Et je suppose qu’on pourra remplacer .now() par n’importe quelle heure.

Dans mon cas précis d’outil, je ferais donc :

let dateEntrée = Temporal.$dateInputValue.plainDateTimeISO($fuseauEntré);
let dateSortie = Temporal.$dateEntrée.plainDateTimeISO($fuseauSortie);

Et ça dira l’heure qu’il est dans $fuseauSortie lorsqu’il est $dateEntrée dans $fuseauEntrée.

Directement, sans hack pourris.

Ça ne m’empêche pas d’avoir réussis actuellement un truc qui fonctionne bien : https://lehollandaisvolant.net/tout/tools/tzconvert/

C’est juste que je dois concaténer une heure (yyyy-mm-ddThh:ii:ss.µµµ) avec un décalage (±hh:ii), pour que JS comprenne ça comme un instant donné qui soit différent du fuseau local de l’ordinateur (son référentiel par défaut).

(le gros du code dans l’outil est la gestion de la liste des fuseaux : je récupère la liste des fuseaux officiels internes à JS, regroupe (Paris, Madrid, Amsterdam, Berlin, etc… sont identique, je les regroupe par continent), puis que je trie (de −12 à +14, en tenant compte des fuseaux +3:30 ou +4:45 des dictatures farfelues qui veulent leur fuseaux à eux (Iran, Corée du Nord…), formate enfin puis affiche).

(Oh et j’espère qu’avec Temporal ils vont enfin corriger le truc dégueux qui fait que le premier mois de l’année est le mois 0 alors que le premier jour du moins et le 1).

Comment toggle la visiblement d’un élément avec un bouton, en JS, sans CSS :

button.addEventListener('click', function(){
element.hidden = !element.hidden;
});

(j’ajoute ça à la liste des trivialités que je découvre même après 10 ans)

Oh, je viens d’apprendre aujourd’hui, qu’on pouvait utiliser un switch() à l’envers :

Plutôt que faire le switch() sur $value et ensuite scinder les cas de figure en fonction de la valeur, on peut switch sur une condition (true, false…) et scinder sur des conditions :

switch (true) {
    case $value < 4: // code
    case $value > 4: // code
    default: // value is 4 // code
}

Avant je m’en passais naturellement avec des if/elseif/else, mais donc le switch() on peut aussi.

Cet exemple est là pour du JS, mais possible que d’autres langages le permettent également.

Oracle, it’s time to free JavaScript.

Je ne savais pas que JavaScript était une marque déposée par Oracle. Ça fait 30 ans, ceci dit, et ils ne l’utilisent plus.
Selon le droit américain, dans certaines conditions (qui semblent remplies ici), une marque peut être perdue. Cette lettre ouverte demande à ce que JavaScript soit abandonnée officiellement par Oracle.

On peut même la signer (avec son compte Github).

Un outil en JS qui utilise l’API Web Crypto pour produire et utiliser des clés de chiffrement (ici, RSA).

Vous pouvez commencer par produire une nouvelle paire de clés. Ensuite vous pouvez chiffrer du texte, et le déchiffrer.
Si vous récupérez les clés et que vous les importez sur la même page dans un autre navigateur, elles peuvent être réutilisées pour chiffrer ou déchiffrer du texte.

L’outil est également là pour me servir de mémo dans le code source :
– générer une clé publique et une clé privée
– les afficher
– les importer
– les utiliser pour chiffrer & déchiffrer

L’API Web Crypto peut aussi servir pour signer ou vérifier des contenus. Elle n’est également pas limité à des clés RSA.
Dans l’outil, j’exporte, affiche et importe les clés au format Base64 assez répandu. L’API permet aussi de les exporter autrement (JSON, binaire, etc.), ainsi que d’autres trucs.

L’implémentation est assez simple, le code source est très léger.

(Comme d’hab avec ces outils en JS : mon site n’enregistre absolument rien, ni les clés, ni les données avec lesquelles vous jouez ici. Votre navigateur, si, mais mon site non.)

Une version vanilla d’un outil de « todo listes ».

L’intérêt ici est de montrer que le Vanilla, ça marche.
Et même mieux que ça :

50% less time to load and 95% less bandwidth in this case

L’idée est aussi de se passer de frameworks tiers, qui d’un côté font 4000 % de ce que tu utilise dedans, mais aussi n’ont que 90 % de ce que tu as besoin. Sans parler du fait même de devoir reposer sur l’outil de quelqu’un d’autre :

I believe too little has been invested in researching practical, scalable methods for building web applications without third party dependencies.

C’est ce que je fais moi aussi dans oText, où tout est construit de zéro et on fini par quelque chose qui se charge et affichent tout instantanément, même sur un vieux PC. Pas besoin d’attendre que ça charge, et encore besoin d’alourdir ENCORE PLUS la page avec les « bootloaders » à la con censés nous faire patienter.

JS se pète les dents quand on peut split() une chaîne de caractères formés de caractères unicodes muti-octets :

'pizza🍕'.split(''); // [ 'p', 'i', 'z', 'z', 'a', '�', '�' ]

Il existe deux solutions :

// Using Spread
[...'pizza🍕']; // [ 'p', 'i', 'z', 'z', 'a', '🍕' ]

// Using Array.from
Array.from('pizza🍕'); // [ 'p', 'i', 'z', 'z', 'a', '🍕' ]

~

PHP aussi se casse les dents, mais il suffit de passer un flag à TRUE pour dire qu’on travaille en mutibyte, ou alors d’utiliser les fonctions mutibytes en « mb_ » :

mb_internal_encoding('UTF-8');
mb_substitute_character('none');

C’est utile quand on veut par exemple tronquer une chaîne à X caractères, et que parfois cette troncature se trouve au milieu d’un caractères. C’est ce qui casse parfois certains flux RSS qui tronquent leur contenu. On se retrouve alors avec un « � » dans le flux et les lecteurs RSS voient ça comme un flux pété.

La vrai question est « peut-on naviguer sur internet sans tomber sur des sites de merde. ».

Le JS est une techno sympa. Ce que des gens merdiques en font en fait de la merde.

Après tout, tous les sites web qui te trackent utilisent aussi le HTTP(S). Est-ce qu’on en entend se demander si on peut naviguer sans HTTP(S) ?
D’autre part, on peut aussi très bien tracker sans JS et trouver des mots de passe avec du CSS.

JS intègre des outils assez puissants de localisation, pour afficher les nombres, dates, monnaies… dans les formats d’un pays donné.

C’est tellement puissant que j’en ai fait un outil de traduction de dates : https://lehollandaisvolant.net/tout/tools/ln-date/

Dans cet outil, j’ai une longue liste de locales dans le code source, et le navigateur grise celles qu’il ne connaît pas.
On pourrait faire pareil pour les nombres, monnaies et même les différentes unités. On peut aussi décider de forcer un affichage scientifique, ou ingénieur, limiter ou forcer le nombre de chiffres significatifs, ajouter un zéro initial…

Voir là : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat

Bien-sûr, quand il s’agit de stocker les valeurs, je vous conseille d’utiliser le format de date au format ISO 8601, ou en tout cas un format facile à transcoder comme YYYYMMDD (et pas YYYYDDMM ou MMDDYY, sauf si vous souhaitez recréer un bug de l’an 2000).

Tiens, je ne savais pas cette magouille pour détecter si un logiciel est installé depuis une page web.

Il suffit que le logiciel vienne avec sa propre police d’écriture totalement inédite (et inutile), et que dans la page web, on utilise cette police sur un élément donné.
À savoir, dans les pages web, quand on déclare un police d’écriture on met « font-familly: "police1", "police2", "police générique"; ». On peut en mettre plusieurs dans l’ordre d’importance. Ici, si la première n’est pas installée, le navigateur cherchera la seconde. Si elle n’est pas utilisée non plus, il prendra une police générique par défaut du système.

Du coup si un programme installe une police1 et qu’on utilise le code ci dessus, il chargera et utilisera la police1. Et s’il n’est pas installé, il utilisera la police2.
En détectant (en JS) quelle police est effectivement utilisée, on sait si le logiciel est installé ou non.

Beaucoup de logiciels utilisent des polices à eux, à commencer par LibreOffice, LaTeX, qui sont libres, mais aussi Adobe, Microsoft Office… qui utilisent des polices pour leurs applications.
Dans le cas de TeamViewer, en revanche, la police n’est même pas utilisée et en prime elle ne contient que 8 lettres et 2 chiffres, ce qui la rend inutilisable pour à peu près tout. Hormis vous traquer, qui semble ici être sa seule utilité :

A quick query on GitHub reveals that many font fingerprinting libraries include references to the font names TeamViewer15, TeamViewer14, and TeamViewer13.

C’est fou ce qu’on peut faire avec un tweet long de code : https://twitter.com/KilledByAPixel/status/1517294627996545024

Et ça marche : essayez dans un Codepen (n’oubliez pas de cliquer sur la zone blanche après avoir collé le HTML).

(ceci est une note à moi-même)

Y a des subtilités dans cette API.
La DOC est très claire, mais faut quand-même faire gaffe.

Premier truc : un élément n’acceptera un "drop" (et l’événement "ondrop" ne se lancera) que si l’élément a un "onDragEnter" ET un "onDragOver". S’il n’a pas les deux, ça ne marchera pas.

Ensuite, ne confondez pas les variables :
– event.target : l’élément qui reçoit l’événement (le clic)
– event.currentTarget : l’élément à qui sont attachés les gestionnaires d’événements.

C’est subtil.

Imaginez un SPAN dans un DIV.
Le div est draggable, mais pas spécialement le span. On peut clic sur le span et commencer à le bouger. Dans ce cas, e.target sera le span, mais le vrai élément à considérer sera e.curentTarget, le div (car c’est lui — et son contenu, le span) qui est draggable.

C’est à utiliser aussi lors du drop.

Si on a un UL avec plein de LI que l’on drag-and-drop, il ne faudrait pas que l’on se retrouve avec un UL > LI > LI parce qu’on a drop un LI sur un LI, alors que la dropzone c’est le UL.

~