Le Hollandais VolantOracle, 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…
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.
~
Des démos en 140 caractères de JS.
Y a des jolis trucs, principalement dans des HTML Canvas.
C’est fou que les standards HTML ne permettent pas ça :o
Il y a l’élément <input type=range> qui permet d’avoir un slider/curseur pour choisir une valeur, mais il n’y a pas de possibilité de choisir l’échelle (log, par exemple).
Ici c’est chose faite simplement en JS, même si c’est loin d’être parfait.
Une lib qui permet d’utiliser l’API Drag-and-Drop du HTML5 sur mobile.
Le DnD entre éléments HTML (déplacer à la souris des éléments du DOM) en fonctionne pas sur tactile. Cette lib, simplement à intégrer dans son script, le rend fonctionnel sur tactile.
word = word.normalize("NFD").replace(/\p{Diacritic}/gu, "");
Permet de retirer les accents des mots.
Exemples :
— forêt → foret
— étoile → etoile
— ça → ca
— là → la
Tiens c’est vrai ça : l’argument du « une lib à télécharger pour tous les sites » ne tient plus du tout depuis que les navigateurs mettent chaque site dans un sandbox à part maintenant.
(sans compter que y a pas deux sites sur Terre avec les mêmes versions des lib qu’ils utilisent…)
Bref, hébergez tout vous même.
Parce qu’il n’y a pas que « console.log() » dans la console d’un navigateur, mais aussi console.warn(), console.trace() ou encore console.table()…
Je n’en connaissais pas la moitié, beaucoup de choses pourraient être pratiques.