Note : détecter un navigateur mobile en JS

#16322

Généralement j’ai besoin de savoir si je suis sur mobile ou pas à cause des différences d’interaction entre mobile et desktop (pas de drag-n-drop possible sur mobile par exemple).

Ma méthode c’est de tester une propriété CSS en JS.
Vu que j’utilise les mediaQueries en CSS, quand je suis sur mobile, le CSS appliqué est changé et je détecte ça en JS.


body {
    color: blue;
}
@media (max-width: 700px) {
    body {
        color: red;
    }
}

var isMobile = (window.getComputedStyle(document.body).color != 'red') ? true : false;

Il suffit soit de détecter une propriété dont on est sûre qu’elle sera appliquée sur mobile, soit d’appliquer spécifiquement un bout de CSS bidon sur un élément bidon en CSS, spécifiquement pour cet usage.

Par exemple comme ça :


html {
    color: red;
}
body {
    color: black;
}
@media (max-width: 700px) {
    html {
        color: blue;
    }
}

Ici la page sera toujours en noir, à cause du body, prioritaire sur le html. Mais la couleur sur le html joue le rôle d’un flag.
Bien-sûr, ceci n’est valable que pour la majorité des cas et reste une détection basée sur la taille de l’écran (ou du viewport plutôt).

Si vous avez un écran tactile de 15 pouces, c’est sûr que ça restera le même CSS que sur un écran de PC de 15 pouces alors qu’au fond l’UX sera différente.

On peut toujours détecter la taille de l’écran directement en JS, mais c’est parfois difficile à cause des pixel ratio qui sont intégrées ou non (suivant le nav) dans la taille de l’écran détecté en JS.
Regardez la taille de l’écran sur un mobile sur cette page, vous verrez que ça n’est pas toujours la taille réelle en pixels de votre écran.

Mais ça peut suffire dans la plupart des cas et c’est léger.

https://lehollandaisvolant.net/?mode=links&id=20170326164213

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).