Learn #JavaScript | web.dev
▻https://web.dev/learn/javascript
An in-depth course on the basics of JavaScript.
#documentation pour revoir les bases
Learn #JavaScript | web.dev
▻https://web.dev/learn/javascript
An in-depth course on the basics of JavaScript.
#documentation pour revoir les bases
The untold history of web development:
▻https://functional.cafe/@juliobiason/111613996060167180
The untold history of web development:
1990: HTML invented
1994: CSS invented to fix HTML
1995: JS invented to fix HTML/CSS
2006: jQuery invented to fix JS
2010: AngularJS invented to fix jQuery
2013: React invented to fix AngularJS
2014: Vue invented to fix React & Angular
2016: Angular 2 invented to fix AngularJS & React
2019: Svelte 3 invented to fix React, Angular, Vue
2019: React hooks invented to fix React
2020: Vue 3 invented to fix React hooks
2020: Solid invented to fix React, Angular, Svelte, Vue
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid
2021: React suspense invented to fix React, again
2023: Svelte Runes invented to fix Svelte
2024: jQuery still used on 75% of websites
(by @fireship_dev on Birdsite)
Comment rendre une PWA installable ?
▻https://developpeur-freelance.io/pwa-installable
Tutoriel pour la gestion de l’installation d’une PWA (service-worker + JavaScript)
Carl Guderian sur Flickr
▻https://www.flickr.com/photos/bjacques
Découvert pendant une recherche pour documents sur #Octave_Mirbeau et #Le_jardin_des_supplices. Ce photostream contient plein d’images historiques sur notre passé colonial et les racines de l’exotisme sous licence #CC-BY-SA. Vu l’ages des prises de vue initiales il me semble que la plupart des images sont libres de droits.
▻http://mirbeau.asso.fr/rlejardin.htm
▻https://www.flickr.com/photos/bjacques/sets/72157626708159505
A propos
▻https://fr.wikipedia.org/wiki/Le_Jardin_des_supplices
Texte
▻https://fr.wikisource.org/wiki/Le_Jardin_des_supplices
▻https://commons.wikimedia.org/wiki/Category:Le_jardin_des_supplices?uselang=fr
►https://creativecommons.org/licenses/by-nc-sa/2.0
#photos #histoire #archives #colonialisme #exotisme #Java #Hollande #CC #public_domain
Lighthouse overview - Chrome Developers
▻https://developer.chrome.com/docs/lighthouse/overview
Est-ce que vous avez une opinion à propos de cet outil ?
Je me contente toujours de validator.w3.org et de Lynx (en plus de Firefox, Chrome et Safari sous des OS divers) pour tester mes sites. C’est déjá assez coûteux quand tu fabriques du code propre (validator) et des pages facilement accessibles (des textes bien structurés, pas de menus interminables en haut de page, des alt/titre pour les images et vidéos, des liens parlants etc.). Avec l’inspecteur de code de Firefox et les autres outils (SPIP) je me sens à l’aise, alors quel argument est-ce qu’il y a pour ajouter Lighthouse à ma boîte d’outils (dans ungoogled Chromium ) ?
Je m’en fous du nombre de visiteurs répertoriés car je ne travaille plus du tout pour les commerciaux, et toute la magie noire SEO ne m’intéresse plus que pour m’amuser.
Merci pour vos idées.
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
Lighthouse logo
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
You can also use Lighthouse CI to prevent regressions on your sites.
Je les utilise. Par habitude j’utilise plutôt la version Web PageSpeed Insights :
►https://pagespeed.web.dev
mais il me semble que ce sont exactement les mêmes indicateurs.
En gros de base on obtient des scores très corrects avec un SPIP bien configuré. Et ça indique comment faire pour passer à plus de 90/100 relativement facilement.
Un intérêt : c’est souvent utile pour montrer à un client que ce qu’il réclame, ça va faire « du mal » à son site. Parce qu’expliquer « nan mais faut pas faire ça, c’est un mauvais usage du Web », tous les clients s’en foutent, il y a forcément un petit cousin, une boîte de comm, un spécialiste de je-ne-sais-quoi qui va revenir à la charge pour lui expliquer que « si si, c’est ça qu’il faut faire ». Alors tu fais un coup de PageSpeed sur ta version, tu fais conserve une copie d’écran, ensuite tu implémentes le truc en question, ou bien tu vas sur une page qui l’a déjà implémenté, et tu fais passer PageSpeed là-dessus, et tu montres les scores qui passent en dessous des 50/100 et les voyants qui deviennent rouges, c’est généralement très convaincant… :-)
Ah, c’est un truc pour les pros. Je ne me considère pas comme faisant partie de cette catégorie de créateurs de sites. #merci @arno
Pour moi qui ne fait des sites web que pour des « clients » qui me font confiance et qui ne se laissent pas influencer par les « petits cousins » cela veut dire que oui, c’est utile mais ...
– c’est l’outil que j’utiliserai après tous les autres tests
– s’il y aura un problème de rapidité d’affichage que je n’arriverai pas à cerner.
:-)
TIL about the optional chaining operator.
The optional chaining operator (?), allows you to read the value of a property located deep in a chain of connected objects without having to check every single reference in the chain.
▻https://blog.gogrow.dev/say-bye-bye-to-bad-javascript-practices-5971688ba80a
Quelles sont les différences entre #var, #let et #const en #Javascript ? - Blog - Code-Garage
▻https://code-garage.fr/blog/quelles-sont-les-differences-entre-var-let-et-const-en-javascript
Si l’on devait résumer la définition de ces deux nouvelles manières de déclarer des variables, on pourrait dire que :
– let sert à définir une variable locale
– const sert à déclarer une référence constante
Attention, une référence constante ne veut pas dire que la valeur derrière la référence est « immutable », mais que la référence elle-même est immutable.
Performance #web : l’intégrateur, ce héros
J’ai envie de pousser un concept absolument nouveau : l’amélioration progressive (ah pardon on me dit que ça date de 2003). Au minimum c’est la clé d’un premier affichage éclair car on peut se passer de #JavaScript quelques secondes.
Puis abordons le gros sujet des images : comment les charger rapidement, sans toucher aux fichiers eux-même ? Il y a eu quelques nouveautés ces deux dernières années, mais on va voir que même sur des choses que l’on peut croire acquises comme le lazy loading, il y a quelques pièges qui peuvent être contre-productifs.
Enfin terminons avec un petit résumé sur les polices : elles tapent dans l’œil mais il faut en garder le contrôle si l’on veut un bon CLS (une des métriques Google dont on va reparler).
Article intéressant sur les optimisations au moment de l’#intégration web. Ça parle (un peu) performance mais surtout #UX, #ergonomie, #HTML, #CSS, #javascript...
▻https://www.24joursdeweb.fr/2021/performance-web-lintegrateur-ce-heros
Ya des gens qui trouvent ça enthousiasmant, comme plein de techniciens qui sont à fond dans leur petite spécialité technique, mais moi ça me terrifie, ça devrait pas exister du temps à passer sur ça :D
Et surtout encore moins devoir s’en préoccuper à chaque intégration (plutôt que ce soit les gens qui font le CMS, langage de template, plugins de lazy, etc, et qu’ensuite pour un site précis à intégrer on n’y pense presque plus).
Oui, l’article est intéressant en tant que ressources, pour choisir les plugins qu’on utilise (par ex Adaptive images qui gère le WebP et le lazy loading nativement), faire ses boilerplates persos (préchargement des polices et font-display: swap;
), les optimisations côté CMS (chargement JS en asynchrone)... etc, évidemment dans l’idée d’automatiser au maximum.
Et aussi, se rendre compte que #SPIP gère une bonne partie de tout ça <3
Home | The Component Gallery
▻https://component.gallery
Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of #interface #components based on examples from the world of #design_systems
Les voitures électriques déforestent et augmentent les émissions carbone en Indonésie
Walhi, la plus influente ONG environnementale indonésienne, demande à #Tesla de suspendre son projet d’investissement dans l’extraction de #nickel, destiné aux batteries de ses voitures électriques. Elle explique dans “Tempo” pourquoi l’extraction de ce #minerai, très polluant, n’est pas l’avenir de l’#énergie_verte.
"Notre préoccupation se fonde sur des conclusions d’études prouvant que l’industrie du nickel et sa chaîne d’approvisionnement ont causé des dommages environnementaux à grande échelle, ont marginalisé des #peuples_autochtones et ont violé la loi." Tel est le communiqué que l’ONG environnementale indonésienne Walhi a envoyé à Telsa et a fait suivre à l’hebdomadaire indonésien Tempo, début août.
Le gouvernement indonésien a en effet annoncé que la société détenue par Elon Musk souhaite investir sur l’île de #Java dans l’extraction de nickel, minerai qui permet le stockage d’#énergie dans les #batteries_électriques, dont dépendent ses voitures.
Ce #minerai semble porter l’avenir de l’#industrie_automobile, selon l’Agence internationale de l’énergie. « Dans le scénario des engagements zéro émission nette de carbone, 60 nouvelles mines de nickel seront requises d’ici à 2030 », indique le document cité par Tempo.
Alors qu’une partie importante de l’exportation de nickel russe est bloquée par la guerre, les constructeurs automobiles mondiaux se ruent vers d’autres pays. Or l’Indonésie possède près de 40 % des réserves mondiales de nickel de classe II. Seulement, ce dernier, en plus de son #extraction, nécessite une #transformation lourde et coûteuse pour être exploitable dans les batteries.
Rere Christianto, directeur de campagne de Walhi sur les questions minières et énergétiques, a déclaré au magazine que, "sur les 900 000 hectares de zones d’extraction du nickel, 673 000 sont situées dans des zones forestières de l’archipel".
Le militant écologiste souligne aussi le problème des émissions carbone : l’industrie de traitement du nickel utilise encore le #charbon comme combustible dans les #fonderies. "Il faut recalculer si les émissions de gaz à effet de serre des véhicules électriques sont inférieures ou supérieures aux véhicules conventionnels lorsque les facteurs de déforestation ou d’utilisation d’énergie sale sont pris en compte." Il poursuit :
"Ne laissons pas les efforts de #décarbonation de certains pays conduire à une augmentation des émissions de gaz à effet de serre en Indonésie et à la violation des droits des communautés autochtones sur leurs terres ancestrales." Voeu pieux
Selon Tempo, le directeur exécutif de l’Institut pour la réforme des services essentiels, Fabby Tumiwa, reconnaît que l’extraction du nickel a un impact environnemental énorme. Mais de nombreux constructeurs automobiles ont déclaré qu’ils n’achèteraient que du nickel provenant d’exploitations minières durables.
"L’#exploitation_minière_durable a été introduite depuis longtemps via l’association #Initiative_for_Responsible_Mining_Assurance. Ses membres sont des industriels, des consommateurs et des organisations de la société civile. Tesla s’est également joint à cette initiative", affirme-t-il.
▻https://www.courrierinternational.com/article/pollution-les-voitures-electriques-deforestent-et-augmentent-
#pollution #déforestation #forêt #voitures_électriques #CO2 #émissions #extractivisme #batteries
Qaop/JS emulator info
▻http://torinak.com/qaop/info
Qaop/JS – ZX Spectrum emulator
This is Sinclair ZX Spectrum emulator written in JavaScript. Models 48K and 128 supported.
ZX Spectrum Games
▻http://torinak.com/qaop/games
#jeu_vidéo #jeux_vidéo #spectrum_zx #émulateur #javascript #en_ligne #online #archive #archéologie #rétro #rétrogaming #préservation
« A shallow dive into DataScript internals » by Nikita Tonsky, 23.02.2015
▻https://tonsky.me/blog/datascript-internals
Excellent article, concis et instructif, par l’auteur et contributeur principal de Datascript.
An overview of DataScript code base. Without going into much detail, it paints the overall picture of how code is structured, what parts it’s built of and what purpose they serve. If you’re interested in studying DataScript sources, this is a great place to start.
For those who are using DataScript this post may help to get better understanding of machinery behind public APIs and make better use of them. […]
Autres articles utiles pour mettre le pied à l’étrier:
@tonsky/datascript › Wiki › Getting started
▻https://github.com/tonsky/datascript/wiki/Getting-started
@tonsky/datascript › Wiki › API Overview
▻https://github.com/tonsky/datascript/wiki/API-overview
« Aaaaaaaaaaaaaah, They’re Here ! ES Modules in Node.JS » par Gil Tayar (@giltayar), 03.2020 @ NodeTLV
▻https://docs.google.com/presentation/d/1O1-PF35FXVWnW-V-8QGPWO_5A0LQ3WGABVreOcZs1rw
Rappels utiles, s’agissant de migrer du code CJS vers ESM ; j’ai récemment buté sur l’intégration d’une base de code AMD dans ObservableHQ :
ESM vs CJS
1. ESM is strict / CJS is not
2. ESM is browser compatible / CJS is not
3. ESM is statically parsed / CJS is not
4. ESM is async, and supports top-level await / CJS is not
ESM vs Babel
1. ESM is strict / Yeah, OK, so is Babel
2. ESM is browser compatible / Babel transpilation is not
3. ESM is statically parsed / Babel transpilation is not
4. ESM is async, and supports top-level await / Babel transpilation is not, and does not
5. ESM is native / Babel is transpiled 🤢
Conditional Exports ! Both ESM and CJS !
{
"exports": {
".": {
"import": "./main.mjs",
"require": "./main.js"
}
}
La présentation contient aussi un historique succinct de l’introduction des modules, qui aide à se replacer dans le contexte de CJS et AMD.
Code source des exemples de la présentation : ▻https://github.com/giltayar/ah-theyre-here-esm-nodejs
Documentation de référence sur les modules : ▻https://exploringjs.com/impatient-js/ch_modules.html#cheat-sheet-modules
La présentation est truffée de mèmes cinématographiques, sans doute destinés à rafraîchir l’esprit et soutenir l’attention d’un auditoire — hors de ce contexte, il faut toutefois être bien luné et manifester quelqu’indulgence :)
Eve Online fans literally cheer Microsoft Excel features at annual Fanfest | Ars Technica
▻https://arstechnica.com/gaming/2022/05/eve-onlines-ms-excel-partnership-makes-spreadsheets-in-space-official
There aren’t many games for which built-in integration with Microsoft Excel would be a major feature whose announcement would draw literal cheers from fans. But Eve Online showed itself to be the exception when developer CCP announced coming Excel integration during its Eve Fanfest keynote this morning.
Through an official partnership with Microsoft, CCP said it is creating a JavaScript API that will allow players to “seamlessly export data from Eve Online” into the popular spreadsheet program. That “will help players access and calculate everything from profit margins to battle strategy, making day-to-day Eve operations easier to execute,” the company said in a press release.
“It’s not April fools; this is real,” Eve Online Creative Director Bergur Finnbogason said on the Fanfest stage, receiving bemused laughter in response. “I’m not lying—we actually reached out to [Microsoft] and they were like, ’Oh my god, We love Eve!’”
#jeux_vidéo #jeu_vidéo #jeu_vidéo_eve_online #ccp #microsoft #microsoft_excel #excel #bergur_finnbogason #tableur #data #données #api #api_javascript #javascript #data_science #larrikin
« ResizeObserver: it’s like document.onresize for elements » by Surma and Joe Medley, web.dev, 07.10.2016 updated 26.05.2020
« […] ResizeObserver reacts to changes in size of any of the observed elements, independent of what caused the change. It provides access to the new size of the observed elements too. »
« JavaScript type coercion explained » by Alexey Samoshkin, freeCodeCamp, 17.01.2018
« This article goes in-depth on how type coercion works in JavaScript, and will arm you with the essential knowledge, so you can feel confident explaining what following expressions calculate to. […]
Type coercion is the process of converting value from one type to another (such as string to number, object to boolean, and so on). Any type, be it primitive or an object, is a valid subject for type coercion.
To recall, primitives are: number, string, boolean, null, undefined + Symbol (added in ES6). […]
The first rule to know is there are only three types of conversion in JavaScript: to string; to boolean; to number.
Secondly, conversion logic for primitives and objects works differently, but both primitives and objects can only be converted in those three ways. […] »
« Wat — A lightning talk » by Gary Bernhardt, CodeMash 2012
►https://www.destroyallsoftware.com/talks/wat
#javascript #wat #fun
Ici aussi en 2012 ▻https://seenthis.net/messages/52383 :p
« JavaScript equality comparison is a crazy thing, sometimes. When in doubt, use three equals signs. » by dorey, 06.2013–02.2015
▻https://dorey.github.io/JavaScript-Equality-Table
voir aussi: ▻https://dorey.github.io/JavaScript-Equality-Table/unified
Freecats est une nouvelle application Android, la première application destinée aux associations de protection animale qui nourrissent des chats libres sur le terrain. Freecats permet de suivre l’historique des nourrissages et de gérer les différents points de distribution. Elle inclut aussi une liste de contacts, une checklist du nécessaire à ne pas oublier avant de partir, et une liste des noms commençant par la lettre de l’année en cours. ▻https://play.google.com/store/apps/details?id=com.kdjwebdesign.freecats #android #java #osm #protectionanimale #chats
PrinceJS
▻https://princejs.com
Prince of Persia émulé en JavaScript, jouable dans le navigateur.
#jeu_vidéo #jeux_vidéo #jeu_vidéo_prince_of_persia #javascript #navigateur
neovis.js — Graph visualizations in the browser with data from Neo4j
▻https://github.com/neo4j-contrib/neovis.js
Il me semble que cette librairie a sensiblement évolué, offrant davantage de nuances sur la mise en forme des liens (épaisseur, vignette) et permettant de décrire une visualisation simple de graphe de façon déclarative.
24 Novembre 2021
L’Afrique du sud dit à pfizer qu’elle ne veut plus de livraisons du vaccin.
26 Novembre 2021
L’OMS déclare que la variante omicrons a été découverte en Afrique du sud le 24 Novembre.
A partir du 26 Novembre 2021 de nombreux pays se précipitent pour interdire les vols et l’immigration en provenance d’Afrique du sud.
Mince alors !
j’ai peut-être dérangé métroet+ avec mon babil technologique ; ou serait-il un bot mal configuré ? pour le coup, comme il cite Pierre Desproges, je ne lui en voudrais pas.
Developer Tools secrets that shouldn’t be secrets | Christian Heilmann
▻https://christianheilmann.com/2021/11/01/developer-tools-secrets-that-shouldnt-be-secrets
Je découvre console.log(width)
VS console.log({width})
qui est bien plus pratique & console.trace()
:)
Paged.js — About Paged.js
▻https://www.pagedjs.org/about
Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!
Une librairie javascript pour paginer le HTML pour générer du PDF « joli »
– le repo Gitlab : ▻https://gitlab.pagedmedia.org/tools/pagedjs
– la documentation : ▻https://www.pagedjs.org/documentation
– les spécifications CSS « Paged Media Module Level 3 » supportées : ▻https://www.pagedjs.org/documentation/cheatsheet
– une étude de cas complète pour la création/mise en page d’un livre : ►https://polylogue.org/apres-la-page-la-double-page
– rendu testable sur ►https://printcss.live
How to Use Mass Suppression in PVS-Studio for #java?
▻https://hownot2code.com/2021/10/27/how-to-use-mass-suppression-in-pvs-studio-for-java
Have you just run the analyzer and now you have no idea what to do with all this abundance of warnings? 📜 Nothing to worry about – we made a special mechanism that can help you deal with them 💪🏻 In this #Video, you’ll learn about the inner workings of mass warnings suppression mechanism in … Continue reading How to Use Mass Suppression in PVS-Studio for Java?
#Tips_and_tricks #bugs #coding #development #masssuppression
►https://1.gravatar.com/avatar/a7fa0bb4ebff5650d2c83cb2596ad2aa?s=96&d=identicon&r=G
Vizzu Library
▻https://vizzuhq.com/index.html
Vizzu is a free, open-source #Javascript/C++ library utilizing a generic #dataviz engine that generates many types of #charts and seamlessly animates between them. It can be used to create static charts but more importantly it is designed for building animated data stories and interactive explorers as Vizzu enables showing different perspectives of the data that the viewers can easily follow due to the animation.
Main features:
– Designed with animation in focus;
– Defaults based on data visualization guidelines;
– Automatic data aggregation & data filtering;
– #HTML5 #canvas rendering;
– Written in C++ compiled to WebAssembly;
– Dependency-free.
Via @fil sur github
@fil huhu, c’est bien le problème du côté « social » de github...