Date.prototype.toLocaleDateString() - JavaScript | MDN

#16856

Ça en revanche c’est quelque chose de génial !

var d = new Date();
console.log(d);
// 2017-10-07T16:53:48.160Z
console.log(d.toLocaleDateString('fr-FR', {weekday: "long", year: "numeric", month: "long", day: "numeric"}))
// "samedi 7 octobre 2017"
console.log(d.toLocaleDateString('de-DE', {weekday: "long", year: "numeric", month: "long", day: "numeric"}))
// "Samstag, 7. Oktober 2017"
console.log(d.toLocaleDateString('ko-KR', {weekday: "long", year: "numeric", month: "long", day: "numeric"}))
// "2017년 10월 7일 토요일"

Les libs de localisation sont déjà incluses dans JS, pas besoin de refaire des trucs dans son propre code (chose que je faisais, en PHP, pour l’avoir en JS).

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString

Date.prototype.getTimezoneOffset() - JavaScript | MDN

#16855

gnîîîîî !

Encore ces incohérences entre JS et PHP.
Ici sur la sortie d’une date en une chaîne au format ISO 8601 : en PHP, la chaîne prend en compte le décalage par rapport à l’UTC. En JS, il n’y a pas de décalage : tout est en UTC.

Quant à calculer ce décalage : un UTC+2 (correspondant à Paris en été, par exemple), il est positif pour PHP (logique) mais négatif en JS (probablement car UTC est 120 minutes de moins que l’heure locale).

Javascript createElement and appendchild in one step - Stack Overflow

#16805

Ah bien !

Une méthode pour faire des .appendChild() embriqués, sans passer par des variables supplémentaires :

Au lieu de faire :

var ul = document.createElement('ul'); 
var li = document.createElement('li');
li.appendChild(document.createTextNode('du texte');
ul.appendChild(li);

Faire :

ul.appendChild(  (document.createElement('li')).appendChild(document.createTextNode('du texte')).parentNode  );

L’astuce ici est le .parentNode à la fin. Le .appendChild retourne l’élément ajouté. Donc sans l’astuce, il enverrait le texte directement au UL. Ici, on revient sur le parentNode du texte, donc le LI, que l’on envoie au UL. Brillant.

https://stackoverflow.com/a/11252478/5099624

Date.prototype.getMonth() - JavaScript | MDN

#16800

Donc…
En JS, les mois vont de 0 à 11.
En PHP, les mois vont de 1 à 12.

Et les jours ?
En JS, les jours vont de 1 à 31.
En PHP, les jours vont de 1 à 31.

Le JS c’est à se taper la tête contre les murs, vraiment. Et là c’est juste une broutille (suffit de faire un −1 entre les deux langages [oui car mon PHP écrit du JS]). Mais parfois c’est bien plus chiant à corriger…

Without JavaScript — David Larlet

#16609

:/

Perso je ne bloque pas le JS, je n’ai jamais bloqué le JS. Je bloque plutôt des ressources distantes.

Le JS fait partie du web. Bloquer ça revient au même que de bloquer le CSS ou les PNG.

Je pars du principe que si un site choisit d’utiliser JS pour voler vos informations personnelles, alors c’est à moi de me demander ce que je fous encore sur ce site.
Mais à part ça, bloquer le JS pour bloquer le JS, parce que c’est du JS, je trouve ça simplement bête.

https://larlet.fr/david/blog/2017/without-javascript/

gpu.js - GPU Accelerated JavaScript

#16600

Une lib qui donne votre JS au module WebGL afin de le faire traiter par le GPU plutôt que par le CPU.

C’est bourrin, mais avec leur test là, c’est beaucoup plus rapide !

Ça ne marche pas dans tous les cas, typiquement juste dans les cas où les calculs sont parallélisables (chose que le GPU font plus vite), mais why not.

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