Simple Table-Of-Contents in JavaScript (enhanced)

#16262

J’ai publié ce pen avec du JS pour faire un sommaire (TOC) dans une page. Le TOC est totalement automatique.

Ici j’ai aussi ajouté mon astuce pour ajouter des numéros (le « 2.1 » sur le sous titre 1 du titre 2 de la page), à la fois dans le TOC et dans les h1, h2…
Ces numéros sont entièrement en CSS (avec la propriété counter — ancienne mais peu utilisée), c’est pour ça qu’ils ne sont pas sélectionnables.

J’utilise tout ça sur la plupart de mes pages depuis longtemps :
https://lehollandaisvolant.net/tuto/gpg/
https://lehollandaisvolant.net/linux/checklist/
https://lehollandaisvolant.net/tuto/tor/
https://lehollandaisvolant.net/tuto/pagespd/
https://lehollandaisvolant.net/tuto/bin/
etc.

HTML5 Notes

#16227

En JS, utiliser le stockage local :

Écrire du contenu dans une "variable" « foo » :

var data = "bar";
localStorage.setItem('foo', data);

Lire la variable « foo » :

var data = localStorage.getItem('foo'); // contains "bar"

C’est tout !

Ça peut contenir du texte seulement.
On peut utiliser JOSN.stringify et JSON.parse, et bien-sûr aussi du Base64, si on veut.

Les données ne sont pas supprimées par le navigateur (sauf si vous le faites manuellement, ou si vous êtes en navigation privée).

Pour des données propres à la session il y a sessionStorage.

Le lien là, c’est une page « bloc notes » avec stockage local que j’ai faite.
C’est minimal, mais ça marche :).

https://lehollandaisvolant.net/tout/test/notes/

Supprimer le canal alpha d’une image - le hollandais volant

#16199

Juste un petit outil : donnez un PNG+alpha, cliquez et vous avez un fond blanc.

Oui c’est très con, mais quand on est sur un téléphone avec une image en noir sur fond alpha et que l’application pour voir les images remplace l’alpha par du noir, ben on ne peut plus rien lire du tout.

Du coup j’ai pondu ça. Ça marche en JS avec canvas, donc dans le navigateur.

(Et non je n’ai pas non plus envie de me retrouver avec photoshop sur mon téléphone, donc ce genre d’outils primitifs me va très bien.)

Trouver les informations de votre navigateur - le hollandais volant

#16129

J’ai refaite ma page, un peu.

J’ai ajouté quelques informations système, comme le niveau de batterie mais aussi une détection plus poussée du FAI (à l’aide d’une API externe, mais avec le fallback basique interne à PHP).

Peut-être j’ajouterai la détection du GPS (géolocalisation html5), une photo de la webcam (souriez !), et diverses informations hardware (j’ai vu qu’on pouvait avoir les capabilités GPU/CPU maintenant, et tout ce qui concerne les capteurs des smartphones : luminosité, orientation, accéléromètre…).

Tout ce que votre navigateur peut balancer sur vous - Korben

#16107

Niveau de batterie, réseaux wifi, localisation… Les nouvelles API en JS sont sympa, mais peuvent capter beaucoup de données.

Ici c’est fait à titre de démonstration. D’autres pages (ou scripts intégrés, hein, si vous voyez ce que je veux dire) peuvent récupérer tout ça sans votre consentement et à but lucratif…

http://korben.info/tout-ce-que-votre-navigateur-peut-balancer-sur-vous.html

Password visibility toggles | Kenan Yusuf

#16075

JavaScript will listen for a change on the checkbox input. Once toggled, the password field changes from having a "type" attribute of "password" to "text".

C’est tout.
Et qu’on nous foute la paix aussi avec les champs "email" en double.

https://kyusuf.com/post/password-visibility-toggles

GitHub - timovn/simple-js-toc: Creating a table-of-contents in a HTML file, based on h1, h2, h3… elements

#16044

Un bout de JS pour faire un TOC dans un document HTML.

Marre d’avoir seulement des scripts avec jQuery pour faire ça, ou alors des codes soit utilisant des regex, soit utilisant innerHTML (qui est lent) ou qui n’utilisent pas la gestion du dom correctement, soit utilisant des div/p, soit produisant un code non-valide.
Voici ce que j’ai et qui pallie à tous ces problèmes.

Résultat visible ici : http://lehollandaisvolant.net/linux/checklist

Une nouvelle méthode pour vous pister sur le web sans cookie - Tech - Numerama

#15409

Mais merde !

Ça utilise les API audio, et ça trace la l’empreinte sonore au repos de votre ordinateur.

Pas besoin du micro ici : c’est l’empreinte déterminée par votre machine (décalage entre enceintes gauche/droite, temps de réaction de l’API, ce genre de choses).

Faites un test là (mais attention : les informations récoltées sont conservées par les chercheurs à l’origine de la technique) : https://audiofingerprint.openwpm.com/

Solution : bloquer les scripts avec NoScript.

http://www.numerama.com/tech/171804-une-nouvelle-methode-pour-vous-pister-sur-le-web-sans-cookie.html

GitHub - Khan/KaTeX: Fast math typesetting for the web.

#15092

Une alternative à MathJax, beaucoup plus rapide.

MathJax se veut compatible avec le plus de navigateurs possible, y compris IE6 (ouais ouais) et inclut donc des polices woff, eot, svg, et même des PNG (un par caractère). En plus il est multilangues, gère plein de formats de formats (non seulement Tex, mais aussi MathML, SVG, HTML…), d’où sa lourdeur.

KaTeX est beaucoup plus rapide à charger mais aussi à s’afficher : il ne force pas le navigateur à faire des reflow (réarrangement de tous les éléments de la page).

Visiblement il est beaucoup plus strict dans la syntaxe des équations. On ne peut pas écrire « a×b », il faut mettre « a \times b » (syntaxe LaTeX pure et dure quoi).

Note : MathJAX lite

#15084

Parce fuck IE, fuck SVG, fuck les images et fuck tout, voici une "version" allégée de MathJAX, qui normalement fait 70 Mo qui ne pèse que 933 ko.

Il ne prend en entrée que du TEX et ne sort que du HTML/CSS (oubliez le SVG, MathML pour IE et le reste).

J’ai viré tous les modules dont je n’ai pas besoin, ainsi que les polices, images, et quelques lignes de JS et CSS à destination de vieux navigateurs.

C’est basé sur MathJax 2.3, ça renvoie quelques erreurs mais ça n’empêche pas les équations de s’afficher correctement.

Le ZIP : http://lehollandaisvolant.net/files/mathjax-light.zip

http://lehollandaisvolant.net/?mode=links&id=20160416214635