SortTable.js

#17934

Un petit code pour trier des tableaux HTML.

Ça n’est pas universel et il faut que le tableau possède un <thead> mais ça marche pas mal : ça trie de façon numérique pour les colonnes numériques et de façon naturelle (alphabétique) le reste du temps.

Le JS fait moins de 50 lignes (non minifié et légèrement commenté).

Pour l’utiliser :
– utilisez le JS
– prenez aussi le CSS (pour les petites flèches)
– mettez un "id="sortMe" sur votre tableau (le code est à adapter pour mettre plusieurs tables dans une page)
– ajoutez "data-do-sort="1"" sur les <th> des colonnes que vous voulez rendre triables

Et c’est bon.

Ça marche sur Firefox, Chrome/Vivaldi. Pas essayé le reste.

https://lehollandaisvolant.net/tout/examples/table-sort/

Use lazysizes to lazyload images  |  web.dev - Le Hollandais Volant

#17912

Si vous voulez d’autres codes JS ultra-simples, checkez mon codepen :

Un générateur de sommaire (1 ko)
https://codepen.io/lehollandaisvolant/pen/BWpKRG

Un slider d’images (470 octets)
https://codepen.io/lehollandaisvolant/pen/PQEKWP

Un code pour détecter le sens du scroll et l’afficher (475 octets) :
https://codepen.io/lehollandaisvolant/pen/ryrrGx

Le reste c’est du CSS, dans la même veine (super léger).

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

Use lazysizes to lazyload images  |  web.dev

#17911

Un script de 6.62 ko minifié pour faire du lazyload sur des images.
Et Google recommande ça.

Are you fucking kidding me ? AYFKM ?

Vous pariez que je peux le faire en moins de 1 ko non-minifié ?

ÉDIT :
@Google
@Microsoft
@Vivaldi
@Opera
@Mozilla : À quand un attribut « lazyload="" » automatiquement implémenté dans les navigateurs ? Ou au moins dans vos paramètres de navigateur ?

(~Je reviens~)

ÉDIT :
Voilà.

531 octets.
CINQ CENT TRENTE-ET-UN OCTETS.

Chez moi :
https://lehollandaisvolant.net/tout/examples/lazy-lazyload/ pour la version simple (531 o)
https://lehollandaisvolant.net/tout/examples/lazy-lazyload/lazy-lazyload_optim.html pour une version optimisée pour le CPU (803 o)

Et je l’ai aussi mis sur CodePen
https://codepen.io/lehollandaisvolant/pen/RqKYKp

Ça marche sur Firefox, Chrome, Vivaldi, Edge et IE11.

Enjoy.

Maintenant allez bien vous faire foutre avec vos libs à la con de 6.62 ko.

(PS : on me signale que la version "normale" non minifiée du code initial fait 17 ko *facepalm*)

https://web.dev/fast/use-lazysizes-to-lazyload-images

math-as-code/README.md at master · Jam3/math-as-code · GitHub

#17789

Très intéressant : une lib qui transforme du code JS en équations (façon LaTeX).

L'idée est d'enseigner la prog à ceux qui connaissent déjà la notation mathématique.

Par ex la notation Somme(0,50)(x) est équivalent à for(i=0;i<=50;i++) somme+=i.

https://github.com/Jam3/math-as-code/blob/master/README.md

JavaScript Clone Array

#17722

(je_rale_contre_JS pour la 25436e fois)

Comment dupliquer un tableau en JS.

Ça ?

var new_table = old_table

Nope, car si on modifie old_table, alors le new_table s’en trouvera également modifié : ce n’est pas une duplication de la variable mais une référence à l’ancien tableau : c’est comme si les mêmes données sont accessibles sous deux noms.

Pour dupliquer un tableau à une seule dimension, il faut faire :

for (var i in table) {
    new_table[i] = table[i];
}

Mais si le tableau est un tableau d’objets, ou même un objet d’objets (donc de plus d’une dimension) ?
Ben la méthode précedente ne marche pas : si table[i] contient un objet, alors cet objet sera rendu accessible dans new_table[i], mais sans y être copié !

Modifier table[i] changera donc également new_table[i].

La seule méthode que j’ai trouvé (dans le lien) qui tienne en une ligne c’est ça :

var clone = JSON.parse( JSON.stringify( myArray ) );

On prend le tableau, on le transforme en une représentation textuelle JSON (à ce stade c’est juste du texte, sans objets, références, indexes…) puis on le retransforme entièrement en tableau. Là il sera dupliqué totalement, même si le tableau fait 15 dimensions.

C’est farfelu, oui.

https://davidwalsh.name/javascript-clone-array

for...of - JavaScript | MDN

#17719

Si je comprends bien, en JS, la différence entre for..in et for..of c’est un comme la différence entre foreach ($table => $element) et foreach ($table as $element) du PHP.

L’un place dans $element la clé, et l’autre la valeur.
En PHP, on peut même faire $table => $key as $value, où l’on obtient la clé et la valeur en même temps.

Sauf qu’en JS, on a aussi le for, forEach, .each(), et bien d’autres trucs…

Note : optimiser les boucles en programmation

#17705

J’ai décidé d’implémenter ça : https://sciencetonnante.wordpress.com/2015/11/06/la-machine-a-inventer-des-mots-version-ikea/ en javascript (pour un faire un petit générateur de mots dans une page web).

Y a une chose sur laquelle je reviens, et c’est pas la première fois, et ça semble trivial, mais ça change tout.

Dans ce script, en gros, j’ai 80 000 mots et je chercher les occurrences de triplets de lettres là-dedans. Donc en fait, j’ai 3 boucles imbriquées (de A à Z) sur chacun des 80 000 mots.

Question tout con : quel est le plus rapide,
– boucler sur les mots, puis sur les lettres ?
Comme ça :

for (w in words) {
    for (i in alphabet) {
        for (j in alphabet) {
            for (k in alphabet) {
                check(ijk, w)
            }
        }
    }
}

– boucler sur les lettres puis les mots ?
Comme ceci :

for (i in alphabet) {
    for (j in alphabet) {
        for (k in alphabet) {
            for (w in words) {
                check(ijk, w)
            }
        }
    }
}

Mathématiquement, dans les deux cas, on fait 80 000 × 26³ = 1,4 milliards de boucles.

Pourtant, avec une toute petite astuce, on peut rendre le premier code beaucoup plus rapide.
L’idée est qu’il y a 26 lettres dans l’alphabet. Mais les mots font rarement 26 lettres, et quand ils le font, c’est rarement avec toutes les lettres.

On va donc, à chaque boucle, commencer par vérifier si la lettre sur laquelle on est est contenue dans le mot.
Si il n’y est pas, c’est inutile de faire les deux autre boucles internes : la suite contenant la première lettre n’y sera pas non plus. Dans ce cas, on économise 26² boucles pour ce mot :

for (w in words) {
    for (i in alphabet) {
        if (check(i, w)) {
            for (j in alphabet) {
                if (check(ij, w)) {
                    for (k in alphabet) {
                        check(ijk, w)
                    }
                }
            }
        }
    }
}

Sachant que les mots font autour de ~8 lettres, ça représente (26-8)×26² = 12 168 boucles par mot !

Du coup, au lieu de 1,4 milliards de boucles, on réduit ça directement à 432 millions.
Ensuite, on économise encore sur le test de la chaîne "ij" (si la seconde lettre "j" ne se trouve pas dans le mot, alors on économise 26 boucles par mot : on passe en dessous des 400 millions.

La différence est grande : on a divisé le temps par 3~4 juste avec ça.
Et ça c’est juste une estimation grossière : en français, les mots — surtout les longs — ont plutôt des lettres en doubles que seulement des lettres différentes.

En pratique, je passe d’un temps d’éxécution de ~2 minutes à seulement 3 secondes… J’ai divisé le temps par 40.

Tout ceci est tout bête, tout con, mais pensez-y : parfois une ligne de code en plus, un simple "if" juste avant une fonction lourde peut tout changer.
Ok, fait un test « if » c’est une condition en plus et donc un calcul en plus. Mais si ça permet d’économiser sur une fonction qui prend 40 fois plus de temps… Alors ça en vaut la même. En l’occurrence, si ma fonction prend vraiment 40 fois plus de temps qu’un "if", alors je serait gagnant dès qu’on mot fait moins de 25 lettres différentes, ce qui est toujours le cas en français.

%%

Autre exemple dans mon code : pour faire le teste de présence d’un triple de lettres consécutifs dans un mot, j’utilisais les regex. C’est lourd et lent.
À la place, j’ai opté pour une fonction avec un simple "str.indexOf()", qui regarde si une souschaîne est contenue dans une chaîne. C’est bien plus rapide qu’un regex. Là, le temps a été divisé par un facteur 100 environ.

Sur une page normale, j’imagine qu’on n’aurait gagné que des micro-secondes. Mais quand on boucle 26³ fois sur chacun de 80 000 mots, le gain de temps est monstre.

Why You Shouldn't Use A Web Framework - DEV Community 👩‍💻👨‍💻

#17630

It's easier for beginners to use a framework

Sure, if you're a Sith.

Déjà que JS lui même vient, de base dans les navigateurs, avec une panoplie énorme de fonctionnalités, donc les 3/4 ne seront jamais utilisés dans quelque programme que ce soit, alors ajoute une sur-couche pour reformuler toutes ces fonctions de façon différente, à quoi bon ?

https://dev.to/gypsydave5/why-you-shouldnt-use-a-web-framework-3g24

What’s wrong with CSS-in-JS? | Brad Frost

#17373

J'ai jamais été fan du full-CSS-in-JS, et je rejoins ce que disait Daniel Glazman ici : les arguments généralement invoqués pour dire "non au CSS" ne tiennent juste pas debout et tendent même plutôt à démontrer que CSS a de bon nombre de points communs avec des langages de programmation !

Le mieux quand on vient se greffer sur un projet déjà existant c'est évidement de respecter la structure de l'existant, mais s'il est nécessaire de tout recommencer ou de créer un truc nouveau, je préfère utiliser les différentes techno pour ce qu'elles ont été prévues :

- HTML pour le code source de la page et le contenu
- CSS pour la décoration
- JS pour l'interaction et l'interface .

On peut utiliser JS pour modifier le CSS ou le HTML, mais généralement c'est à éviter.
Quand il faut modifier ce qui s'affiche à l'écran, je ne touche pas aux éléments HTML : je fais switcher des classes et je laisse le CSS faire le reste.

Ça me semble être la solution la plus propre : sans CSS le HTML s'affiche et le contenu est visible, et sans JS aussi, donc le contenu reste accessible. Ce n'est pas toujours la solution la plus légère par contre...