#18401

[PWA] fetch-serviceworkers.png (image) - 1354x1577px

Les Services Workers JS sont pratiques, mais bordel que c’est chiant à débugguer !

Je suis obligé de mettre des console.log() à toutes les lignes pour savoir ce qui se passe :o

Ici, c’est *juste* la fonction qui intercepte les requêtes réseau de la page (toutes les requêtes : XHR, mais aussi les fichiers scripts, les CSS, les fonts, les background-image()…).

La fonction permet de voir :
– si une requête doit être mise en cache (fichier, image) ou pas (requête de type json/ajax).
– si elle doit être mise en cache, alors on regarde si le fichier s’y trouve. Si oui ? retourne le fichier. Si non ? fait une connexion réseau. La connexion, fonctionne-t-elle ? Si oui : récupère la réponse et la met en cache, puis retourne la réponse. Si non, emet une erreur.

Le truc c’est que pour que le script puisse prétendre être une bonne PWA, aucune requête ne doit finir sur une erreur (404 ou autre). Si l’app est offline, la requête ne marchera pas, mais l’erreur doit être gérée (normale, me diriez-vous, mais c’est assez lourd quand-même).

Autrement, une fois qu’on a notre fonction, comme ça, c’est à peu près tout ce qu’il faut pour transformer n’importe quelle page web en PWA avec capacité de faire du offline (du moment qu’on séparre bien le shell de la page des données, d’où l’intérêt de travailler avec des requêtes Ajax qui envoie des données (json ou xml, html…) qui sont ensuite incorporées dans la page.

Le rendu est spectaculaire et 'achement rapide.

Regardez sur le site de Stéphanie Walter (sous Firefox) : c’est rapide comme l’éclair ! https://stephaniewalter.design/

Et pour cause : la gestion du cache est gérée par la page web (le service-worker) : il suffit de naviguer quelques pages pour que toutes les données soient mises en cache et après c’est super rapide : seulement 14 ko de données sont transférées pour la page d’accueil !

Et normalement ça fonctionne aussi en offline.

Oui, le navigateur a son propre cache… mais il est imprévisible, d’une part, et d’autre part il y a toujours des requêtes réseau de faites, qui vérifient si les cookies sont bons, si les ETAG sont modifiées, si le fichier n’a pas changé, etc.

Ici, les requêtes réseaux sont interceptées par le Service Worker.

Bien-sûr, ce n’est pas une raison pour se lâcher et arrêter d’optimiser ses pages : cette rapidité doit servir à permettre un usage offline du site (c’est pratique pour lecteur RSS en JS par exemple). J’ajoute simplement le raccourcis sur le bureau android (ou iOS, ou Windows 10 comme "webapp") et c’est bon !

Si je suis en ligne, il rapatrie les données mises à jour, autrement il utilise ce qu’il possède en cache.

En plus, les navigateurs utilisent des bases de données locales pour les données en cache : on peut donc très bien utiliser des BDD pour nos données (pas besoin de rester au JSON/XML).

https://lehollandaisvolant.net/img/35/fetch-serviceworkers.png

#18400

Redesigning Github repository page @ tonsky.me

Une proposition pour refaire le thème de Github.

Y a un peu de tout qui a été revisité : placement des éléments, taille des blocs, couleurs, pertinence de certains informations…

C’est vraiment pas mal. Espérons que Microsoft prenne en compte tout ça.

http://tonsky.me/blog/github-redesign/

#18399

Dick At Your Door | Send A Chocolate Dick to Anyone – Funny Gag Gifts and Pranks

Pour 20 $ (fdpout), on peut envoyer un pénis en chocolat à quelqu’un, de façon anonyme (différentes couleurs de chocolat, et ils proposent aussi une grosse merde en chocolat)

Dans le genre, y a aussi le service pour envoyer, pour 13 € (fdpin), de la bouse parmi une sélection d’animaux, à quelqu’un : https://www.shitexpress.com/ (j’aime beaucoup le nom : « shit-express »).

(C’est beau internet <3)

https://dickatyourdoor.com/

#18398

40% des start-up européennes d'intelligence artificielle n'utilisent pas d'intelligence artificielle

C’est tout ? 40 % ?

De toute façon, faudrait déjà avoir une définition claire et définie d’intelligence artificielle.
Faudrait déjà avoir une définition claire et définie d’intelligence.

http://www.lefigaro.fr/secteur/high-tech/2019/03/06/32001-20190306ARTFIG00121-40-des-start-up-europeennes-d-intelligence-artificielle-n-utilisent-pas-d-intelligence-artificielle.php

#18397

:empty - CSS : Feuilles de style en cascade | MDN

C’est tellement pratique ça !

Par exemple, je mets un <div id="error"></div> sur ma page, et si y a une erreur, JS/AJAX met l’erreur dedans. Si y a pas d’erreur, le nœud reste vide.

Ben suffit de faire ça :
#error { background: red }
#error:empty { display: none;}

Pas d’erreur ? Le nœud est vide, il est caché.
Une erreur ? Le nœud n’est pas vide, il s’affiche.

Pas besoin de s’emmerder à ajouter du JS pour faire des if/else, ni d’ajouter une classe, ni d’ajouter un nœud dynamiquement ou de le virer en cas d’absence d’erreur.

Si le code est conçu correctement, une erreur vide c’est une chaîne vide, et donc le :empty reste valable.

Vraiment, en plus de grid/flex (qui sont des grosses nouveautés du CSS), ce genre de petits truc est sympa aussi.

Même remarque pour le ":placeholder-shown" (sur un input/textarea). Il permet de contourner le "bug" qui fait qu’on peut pas utiliser de « input[value=""] » car la valeur détectée par CSS est celle de la source HTML, pas celle du DOM, et ajouter du texte dans un champ ne déclenche pas ce sélecteur CSS.

Et bien d’autres…

https://developer.mozilla.org/fr/docs/Web/CSS/:empty