Nappes d’eau souterraine au 1er avril 2023 et risques de sécheresse estivale
Article du BRGM
▻https://www.brgm.fr/fr/actualite/communique-presse/nappes-eau-souterraine-au-1er-avril-2023-risques-secheresse-estivale
PS : les .webp sur Seenthis, il n’y avait pas un projet de les supporter ?
Web Vitals
▻https://web.dev/patterns/web-vitals-patterns
Des modèles « optimisés Google » pour les composants fréquents des pages web (slider, image et vidéo, infinite scroll...)
A propos de Web Vitals , le dernier avatar de Big brother pour imposer ses diktats sur l’architecture/référencement des sites web :
Overview
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
Google has provided a number of tools over the years to measure and report on performance. Some developers are experts at using these tools, while others have found the abundance of both tools and metrics challenging to keep up with.
Site owners should not have to be performance gurus in order to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.
#web_vitals #slider #image_responsive #Infinite_scroll #google
Troll hunter - Le Monolecte
▻https://blog.monolecte.fr/2021/02/14/troll-hunter
▻https://blog.monolecte.fr/wp-content/uploads/2021/02/eliandstevePT.webp
Sur internet, il n’y a personne et en même temps, il y a tout le monde. Tu peux éclater la gueule de quelqu’un à grands coups d’insultes ou de rhétorique tordue, tu peux harceler ou invisibiliser, tu peux démolir systématiquement une personne, son œuvre, sa pensée, sa vie, comme ça, bien tranquille derrière ton clavier, sans aucune espèce de conscience, sans ne jamais être exposé aux conséquences. Tu peux décharger ta frustration, ta colère, ta haine, ton trop-plein de merditude, sans l’impact sourd du gnon dans la bidoche, sans les cris qui pètent le tympan, sans le sang et les ratiches qui te sautent à la gueule. Tu peux boxer sans te niquer les jointures et sans risquer de te faire éclater la tronche ou réajuster le portrait.
Sauf que ce n’est pas aussi simple que ça.
Tiens, j’ai essayé un format .webp, ça affiche moyen…
@seenthis, on peut rendre le format d’#image #webp affichable ici ? Je teste pour la première fois. Les gens du #web_design, des avis sur ce format ?
De mon côté, je travaille énormément avec le format WebP, mais uniquement comme alternative (automatisée) au Jpeg ou au PNG. Je ne fabrique jamais moi-même une image WebP depuis un logiciel sur ma machine, et je n’installe jamais une telle image WebP dans le CMS ou sur un site Web.
En revanche, je configure mon CMS (en l’occurence SPIP avec mon plugin image_responsive) pour fabriquer automatiquement la version WebP à partir de la version Jpeg, et créer le code HTML qui permet de présenter les deux versions au navigateur. De cette façon les navigateurs compatibles chargent la version WebP (plus légère) et sinon c’est la JPEG qui est utilisée.
Selon CanIuse, 92% des visiteurs seraient capables d’afficher Webp. C’est bien, mais c’est pas parfait. Mais la principale difficulté ici, c’est que si ton navigateur n’affiche pas WebP, et que ton code ne propose pas la version Jpeg, alors rien ne s’affiche (alors que dans les principes du HTML, on s’arrange pour que quelque chose s’affiche, même si c’est pas aussi joli qu’avec un navigateur dernier cri). Donc il vaut mieux laisser ton CMS fabriquer et diffuser l’image dans les deux formats, pour être certaine que ça s’affiche partout.
@monolecte on a un ticket à ce sujet par ici ►https://github.com/seenthis/seenthis_squelettes/issues/13 et SPIP 3.3 prendra en charge le webp nativement cf ▻https://git.spip.net/spip/spip/commit/57914b92f9ca756c13bfe488a0e59eb2de0e6884
Mais il faudra attendre qu’on travaille à la migration de seenthis en 3.3 :)
Pour revenir au vrai sujet de ce seen, j’ai regardé hier soir les 5 épisodes de ce documentaire :
▻https://www.france.tv/documentaires/societe/trolls/2156419-episode-1.html
via @val_k
Interessante cette série @james je viens juste de la visionner.
L’omniprésence masculine me frappe en premier, le fait que leur cible privilégié soit les féministe. Dès le début il y a foule de paradoxe :
– le fait qu’ils prétendent troller pour donner une lecon aux autres, faire de la pédagogie
– le fait de dire qu’ils ont une éthique du troll et que leur troll est sérieux
– le fait de dire qu’ils sont là uniquement pour rigolé mais ont besoin de justice tout en dénonçant les justiciers et réclamer la justice quand leur troll leur retombe dessus (surtout sur la gosse et l’épouse du troll en fait)
– le fait de dénoncé les gens qui se prennent pour ce qu’ils ne sont pas - tout en se prenant pour sèneque dans son jardin...
– le besoin de se divertir en mettant une ambiance de merde et rendre les autres fous
– le fait de dire qu’ils ne vendent rien tout en vendant des videos, bouquins, expos, œuvres et gagnant de la notoriété ;
– les exemple de personnes à troller énumérés ; mon gosse, ma femme, mon lapin et « je pisserai exprès sur moi pour toller les infirmières en ephad » ...
à un moment il est question d’absence d’empathie - les trolls se revendique de ne pas en avoir et disent pouvoir etre un bon prof tout en ayant zero empathie...
– le fait d’en vouloir à ceux qui ont de la notoriété en utilisant le troll, tout en utilisant le troll sois même ...
– le fait de détruire la carrière de femmes journalistes, d’artistes pour le lol
et tout ca on ne peu rien en dire car ces paradoxes sont du troll en soi, tout ce qui est dit par ces trolls peut etre dénié en disant que c’était du troll.
La seul chose qui reste c’est le masculinisme, le surplomb, les dominants qui trompe l’ennuie en utilisant les autres et l’absence d’empathie.
Tout est vanité...
J’ai pas donné mon avis, mais ça m’a sidéré...
« Le Web, tout le monde s’en sert et beaucoup en sont très contents. Mais, même parmi ceux et celles qui sont ravi·es de l’utiliser, il y a souvent des critiques. Elles portent sur de nombreux aspects et je ne vais pas essayer de lister ici toutes ces critiques. Je vais parler d’un problème souvent ressenti : le Web n’est-il pas devenu trop compliqué ? »
►https://framablog.org/2020/12/30/le-web-est-il-devenu-trop-complique
#Avenir_du_Web #obésiciel #sobriété_numérique #Dillo #NoScript #bloqueur_de_publicité #Gemini
Modif de mon script de détection de la compatibilité #WebP du navigateur dans mon #plugin #SPIP image_responsive :
►https://git.spip.net/spip-contrib-extensions/image_responsive
Jusqu’à présent, je me contentais d’un test synchrone en Javascript, avec un code assez simple. Le hic : Firefox compatible avec WebP n’était pas détecté comme compatible. Et re-hic avec les mises à jour récentes de MacOs et iOS, Safari a le même souci.
La nouvelle méthode : je fais le teste synchrone. Si le test synchrone dit que le navigateur est compatible, tant mieux, on s’arrête là, c’est oui.
Si le test synchrone échoue (peut-être Safari ou Firefox), alors je balance un test asynchrone. En attendant, pour cette première page, tant pis, les scripts considèrent que le navigateur n’est pas compatible, et on travaille avec JPEG ou PNG à la place de WebP.
Mais à la fin du teste asynchrone, je stocke le résultat (oui/non) en LocalStorage. Et ainsi, à la page suivante, je récupère directement le résultat du localstorage, et j’affiche ou non le WebP sans refaire de test de compatibilité. Et ça fonctionne nickel avec Safari et Firefox (à partir de la seconde page donc).
Et au passage, j’introduis exactement la même méthode pour le format #Avif (pour le coup, ça détecte bien Chrome, qui pourtant ne passe pas non plus le test synchrone – même bug bizarre sur le MimeType de image/avif qui est détecté comme image/png).
Is #WebP really better than #JPEG ? - siipo.la
▻https://siipo.la/blog/is-webp-really-better-than-jpeg
Is WebP better than JPEG?
So, is WebP better than JPEG? It depends if you are using the reference libjpeg library or the improved MozJPEG encoder.
WebP seems to have about 10% better #compression compared to libjpeg in most cases, except with 1500px #images where the compression is about equal.
However, when compared to MozJPEG, WebP only performs better with small 500px images. With other image sizes the compression is equal or worse.
I think MozJPEG is the clear winner here with consistently about 10% better compression than libjpeg.
Since most of the time WebP is used alongside JPEG fallback, by using WebP you will essentially double your storage costs with little benefit.
J’aimerais savoir comment on fait pour utiliser MozJpeg dans mon CMS de prédilection, celui-ci utilisant classiquement GD et LibJpeg pour fabriquer les images.
Apparemment l’API est compatible et ya des paquets qui remplacent les liens symboliques (dans GD par ex) vers la lib de mozilla :
▻https://www.getpagespeed.com/server-setup/mozjpeg-as-drop-in-replacement-for-libjpeg-in-centos-redhat-amazon-lin
Mais faut trouver comment faire suivant les systèmes…
We Analyzed 11.8 Million Google Search Results Here’s What We Learned About SEO
Analyse très intéressante sur le #référencement.
Important:
–Domain Rating
–Short URLs
–Page authority
–Comprehensive content
–Backlinks
Not Important:
–Schema
–Site speed
–Word count
–Title tags
https://backlinko.com/search-engine-ranking
Via le seen de @tofulm : https://seenthis.net/messages/849786
RFC 8752 : Report from the IAB Workshop on Exploring Synergy between Content Aggregation and the Publisher Ecosystem (ESCAPE)
Ce #RFC est le compte-rendu d’un atelier de l’IAB qui s’est tenu en juillet 2019 au sujet du #WebPackaging, une proposition technique permettant de regrouper un ensemble de pages Web en un seul fichier, pouvant être distribué par des moyens non-Web, tout en étant authentifié. Cela pose des questions nombreuses sur le copyright, l’authentification, la gouvernance, le rôle des intermédiaires (WebPackaging peut changer le rapport de force entre créateurs de contenu et GAFA) , etc. Un concentré d’enjeux et défis actuels.
https://www.bortzmeyer.org/8752.html
Bien que pas mal de gens ici font du Web, je n’ai pas trouvé d’article sur le WebPackaging sur SeenThis, qui, en tant qu’intermédiaire, pourrait être intéressé. Alors je mets d’autres liens :
La page de l’atelier, avec les textes soumis : https://www.iab.org/activities/workshops/escape-workshop
La page du projet WebPackaging : https://github.com/WICG/webpackage
Le groupe de travail IETF : https://datatracker.ietf.org/wg/wpack/documents
Google confirme : le temps de chargement des pages est un critère de pertinence de très faible poids
https://www.abondance.com/20200430-42659-google-confirme-le-temps-de-chargement-des-pages-est-un-cr
Après John Mueller le mois dernier, c’est cette semaine au tour d’un autre porte-parole SEO, en l’occurrence Gary Illyes, de confirmer le poids très faible qu’a le critère du temps de chargement des pages dans l’algorithme de pertinence de Google
17 ways to make your website more energy efficient
▻https://www.wholegraindigital.com/blog/website-energy-efficiency
Mostly good advices for webmasters but be careful, some advices are questionable. Most are correct but will not be followed by corporations ("less tracking").
Suite à la discussion à propos du site LOW←TECH MAGAZINE et du format d’image qu’il utilise cf ►https://seenthis.net/messages/809252 je me suis amusé avec imagick pour ajouter un filtre image_tramer pour #SPIP :
▻https://zone.spip.net/trac/spip-zone/changeset/120905
Ça permet donc de générer des images « tramées » en mode « ordered dithering » qu’on peut ensuite décorer à coup de css mix-blend-mode: hard-light; sur une couleur d’arrière plan.
Exemples d’images générées par le filtre (en mode natif sans couleur d’arrière plan) :
PS : les trois premières images ont les mêmes dimensions que l’originale, je les ai affiché en mode pleine largeur uniquement pour mieux montrer les détails de l’effet obtenu par le filtre.
Uniquement sous imagick, mais on peut imaginer d’ajouter un fallback sous gd, faut juste trouver le bon trick pour obtenir un résultat similaire.
Lors de mes essaie j’ai joué avec la lib ▻https://github.com/ccpalettes/gd-indexed-color-converter mais ça n’utilise pas la même méthode « Floyd–Steinberg » VS « ordered dithering » et le résultat ne me convenait pas aussi bien côté rendu que poids de l’image générée, exemple :
PS : une piste par ici ▻https://github.com/kosinix/grafika/blob/master/src/Grafika/Gd/Filter/Dither.php#L135
J’ajoute les liens qui m’ont été utiles en vrac pour référence si jamais quelqu’un veut s’y recoller un jour :
▻https://github.com/lowtechmag/solar-plugins/blob/master/dither/dither.py
▻https://bisqwit.iki.fi/story/howto/dither/jy
▻https://en.wikipedia.org/wiki/Ordered_dithering
▻https://web.archive.org/web/20070927122512/http://www.efg2.com/Lab/Library/ImageProcessing/DHALF.TXT
▻https://imagej.net/Dithering
Et mon squelette de debug et ses fonctions qui contiennent mes essais non achevés pour le faire avec GD cf image_tramer_floydsteinberg() & image_tramer_gd() :
▻https://gist.github.com/brunob/055fac68c1283b6d89ee7a1e3f2a9fd6
tiens d’ailleurs ça se passe comment quand on utilise un filtre qui n’est pas multi-librairie, que pour une, mais qu’on est sur une autre ? ça fait rien, ou ça fait une erreur ?
Je ne comprends pas ta question @rastapopoulos ^^
un filtre qui n’est pas multi-librairie, que pour une, mais qu’on est sur une autre
Gné ?
bah librairie d’image, un filtre qui au final ne marche qu’avec telle librairie précise. La plupart des filtres fournis marchent avec toutes les librairies, donc on se dit qu’on peut tous les utiliser, mais ça fait quoi si on est sur une autre du coup ?
’k, ben ça ne fait rien à part renvoyer l’image d’origine cf le test if (method_exists('Imagick', 'orderedPosterizeImage')) {, pas de génération d’erreur donc, si c’était ta crainte.
Pour référence, un article au sujet du tramage/dithering :
Sur la plupart des serveurs, j’ai besoin d’allonger la durée indiquée de conservation en cache des éléments intégrés aux pages, pour faire plaisir à PageSpeed Insights.
Je me note le code ici :
ExpiresActive on
ExpiresByType text/css A31557600
ExpiresByType application/x-javascript A31557600
ExpiresByType application/javascript A31557600
ExpiresByType text/javascript A31557600
ExpiresByType image/webp A31557600
ExpiresByType image/jpeg A31557600
ExpiresByType image/png A31557600
ExpiresByType image/gif A31557600
ExpiresByType image/svg+xml A31557600
ExpiresByType application/x-shockwave-flash A31557600
AddType application/font-woff .woff
ExpiresByType application/font-woff A31557600
AddType application/font-woff2 .woff2
ExpiresByType application/font-woff2 A31557600Par rapport à ce qu’on trouve usuellement en ligne, il y a aussi le WebP et le woff/woff2, que j’utilisent désormais systématiquement.
Cadeau, un lien déjà cité ici mais toujours utile : ▻https://technique.arscenic.org/lamp-linux-apache-mysql-php/apache-le-serveur-http/optimisations/article/expire-headers
ping @kent1
Welcome to the wonderful world of Web Performance
►https://www.sitespeed.io
Suite d’outils libres pour monitorer la performance des sites, tout installable en docker ou npm.
Let’s Make Our Bundle Size Even Smaller
▻https://hackernoon.com/lets-make-our-bundle-size-even-smaller-7a5727bb110?source=rss----3a8144e
If you ever developed a SPA (Single-Page-Application), where ever it was on Angular, #react, Vue or something else, You probably noticed that all the hard work you’ve put into your app goes to one minified .js file and one .css file. Those files contain all your dependencies and functionalities of the app.sometimes, those files could become quite big and increase the loading time of your app this something I stumbled upon during my work.With #webpack for example, the files are made after “Tree-shaking “ and Uglify.Tree-shaking is the process of removing all the unused function and variables from the code, which makes our app a lot smaller (basically we only use a small part of our dependencies and a large part of the code isn’t even being called).Uglify (as it sounds like) is the process of (...)
#javascript #npm #coding
Deploying a Node.js #twitter Bot on AWS Lambda using #webpack
▻https://hackernoon.com/deploying-a-node-js-twitter-bot-on-aws-lambda-using-webpack-df6e2e187a78
I recently had an idea for a Twitter bot for the #LearnInPublic community, which I thought would be a fun project with half a day worth of work. Moreover, I wanted to use AWS Lambda function for the sake of learning. Why AWS Lambda? Because it’s practically free for maintaining a twitter bot and I got hands on experience with a seemingly complex tool used widely in the industry. You get 1,000,000 free requests and 400,000 seconds of compute time per month for AWS Lambda. My bot uses 0.02% of the above numbers.In the process I found a cool use-case Webpack. I had fun reading the webpack docs and figuring learning about the gotchas. Even though it was a very primitive use-case, felt like a true Sean Larkinn for a day. Here is a detailed article on how you could do the same.A little about (...)
#carlo development on a Web server
▻https://hackernoon.com/carlo-development-on-a-web-server-626ee0aeae1c?source=rss----3a8144eabfe
Originally posted on blog.agney.inCarlo is a headful Node app framework for building desktop applications.How is it different from Electron, Proton Native?While these other frameworks, bring their own runtime into the equation, Carlo uses the Chrome instance already installed on a users computer.Why would you want it on a web server?Using #webpack to bundle all your files makes it easier to use the developer ecosystem that the javascript community already provides. Like Babel, SCSS or ESLint.What is about to be assumed?You already know how to setup a normal webpack server.Is there a shortcut?Yes, Electrojet CLI provides a single command to setup a carlo project using webpack:npm init electrojet <project-name> —template=carloHow do I set Carlo to listen to the webpack dev server?Carlo (...)
#webpack, #babel, and #react from Scratch — BUT WHY ?
▻https://hackernoon.com/webpack-babel-and-react-from-scratch-but-why-889a385ff32f?source=rss----
Webpack, Babel, and React from Scratch — BUT WHY?Webpack, Babel, and ReactIn between graduate school and other things, I have been me digging deeper into the #javascript ecosystem. As a person who loves React, I got curious with create-react-app. With a simple npm install -g create-react-app on your command line, you will be able to install the most popular React starter pack. However, have you ever wondered how create-react-app works? Or how they make these apps run fast on the browser with relatively smaller network requests? Maybe perhaps how bundling and generating static files happens after running npm run build? These things are intriguing. Under the veil of magic these open source projects carry are simple lines of code that you and I can learn and understand.I decided to build a (...)
#node
Improving the #performance of #javascript Applications
▻https://hackernoon.com/improving-the-performance-of-javascript-applications-c05385185f9f?source
As developers we all tend to have our own views regarding technologies, languages and frameworks. We argue a lot about code style, indentation and best practices. However, If there is one thing that we can all agree on, it is that performance is of the upmost importance.As we know the average timespan of a person tends to get lower and lower. We focus on sending a loader or something as soon as we can so we can grab the user’s attention and prevent him from bouncing from our page. It doesn’t matter how good our code is if the user doesn’t get the chance to even load the app in the first place.Front-end development is incredibly dynamic. Thanks to that, we now have an abundance of incredible tools that can help us improve the performance of our web applications.While some of the concepts (...)
The status of #javascript outside of the browser: 2018 & beyond.
▻https://hackernoon.com/the-status-of-javascript-outside-of-the-browser-2018-beyond-ee0b79ee059f
The JavaScript doesn’t stay just only in inside of browser as many could think. It’s showing a great power in various area and sometimes it’s more potential from outside of the browser.Bear in mind: The content of this article is by May of 2018 and will not likely reflecting newest updates as well and may contain some personal perspectives.Node.jsAs the year of 2017, continuously demonstrated a shiny progress as it was. 250 million downloads happened on last year, and this is equivalent of 700K downloads per day!It’s growing tremendously every year, the monthly downloads of the year 2017 was increased as 70~80K more compared with the monthly downloads from 2016.node by numbersMany companies adopted Node.js last year. For those who needed to provide new digital experiences to customers in (...)
#nodejs #webpack #react-native #pwa
#react with #typescript and #webpack
▻https://hackernoon.com/react-with-typescript-and-webpack-654f93f34db6?source=rss----3a8144eabfe
The feeling, when you react, script and pack.Why am I writing thisAt the time of writing this article, the popularity of React has already shot off the roof, that of Typescript is on the rise and it is safe to say that Webpack is the most preferred modern module bundler for an application. However, there is still an underlying dearth of a good example of the best possible way to start a project in React with Typescript and Webpack. Having said that, there are good resources out there if you want to use create-react-app cli or any other react starter kit out there. But there are very few ones if you want to have control over the configurations of your application.The downside of using a cli like create-react-app are that you have to rely on the following tools the same way (...)
Design for mobile: why we need to think beyond the West
▻https://www.creativebloq.com/mobile/design-mobile-why-we-need-think-beyond-west-81412655
“We tend to measure performance by our own standards, or by some average fairly close to them. Then it hits you, next time you go on holiday: the super fast site you built the other week suddenly performs poorly and takes way too long to load.”
Full Stack Web Application using #react, Node.js, Express and #webpack
▻https://hackernoon.com/full-stack-web-application-using-react-node-js-express-and-webpack-97dbd
Create React App is a quick way to get started with React development and it requires no build configuration. But it completely hides the build config which makes it difficult to extend. It also requires some additional work to integrate it with an existing Node.js/Express backend application.In this guide, we will walk through the set up of a simple full stack React application with a Node.js and Express backend. Client side code is written in React and the backend API is written using Express. This application is configured with Airbnb’s ESLint rules and formatted through prettier.Source code for this application can be found here.Quick Start# Clone the repositorygit clone ▻https://github.com/crsandeep/simple-react-full-stack# Go inside the directorycd simple-react-full-stack# Install (...)
A tale of #webpack 4 and how to finally configure it in the right way
▻https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e9
Spoiler: there is no right way. #justwebpackthingsOriginal photo: ▻https://www.instagram.com/p/BhPo4pqBytk/?taken-by=riittagirlThanks for giving my tutorial so much feedback. I am proud to say that Webpack has twitted about it the other day and it was officially approved my a couple of contributors!thanks!There are a million tutorials online, so you probably have seen a thousand different ways to configure Webpack file. And all of them will be working examples. Why is it so? Webpack itself has been evolving really fast and a lot of loaders and plugins have to keep up. This is a major reason why the #configuration files are so different: with a different version combination of the same tools things might work, or break.Let me just say one thing, and this is my sincere opinion: a lot of (...)
#javascript #css #postcss
Comment Rue du commerce optimise sa performance web... et son SEO
▻https://www.journaldunet.com/solutions/dsi/1207646-comment-rue-du-commerce-optimise-sa-webperf-et-son-seo
« Dans l’optique de faire progresser encore sa webperf, Rue du commerce compte actionner plusieurs autres leviers dans les mois qui viennent. Via l’outil TagCommander, le site marchand optimisera l’ordonnancement du chargement des tags et surtout supprimera ceux qui se révèlent inutiles et alourdissent les pages. »
Financial Times increases engagement with personalisation, speed
▻https://www.inma.org/blogs/ideas/post.cfm/financial-times-increases-engagement-with-personalisation-speed
“Through a rough a series of A/B tests, we slowed the site down to see how site speed correlates to loss of engagement and revenue. Test results showed that for every one second increase in speed, our engagement score increased by 5%. In subscription and ads inventory, this translates into millions in revenue. Speed therefore became a principal element of the site.”