#javascript

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)

#PWA #progressive_web_app #javascript #service_worker

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.

#web #www #html #css #javascript #SPIP

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.

#javascript

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

https://code-garage.fr/content/images/2022/03/let-var-const-3.png

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

https://media.24joursdeweb.fr/2021/12/no-preload-all-network.png

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

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

#clojure #javascript #database #datomic #datalog

« 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 !

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

#slide #javascript #esm #cjs #modules #babel

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

https://cdn.arstechnica.net/wp-content/uploads/2016/08/eve-online-640x360.jpg

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 #resize #observer

« 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. […] »

#javascript #reference #wat

« Wat — A lightning talk » by Gary Bernhardt, CodeMash 2012
►https://www.destroyallsoftware.com/talks/wat

#javascript #wat #fun

« 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

#javascript #wat #reference

voir aussi: ▻https://dorey.github.io/JavaScript-Equality-Table/unified

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.

#javascript #graph #visualization

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() :)

#devtools #debug #javascript

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

#Pagedjs #pagination #générateur_PDF #PDF #javascript

Vizzu Library
▻https://vizzuhq.com/index.html

https://vizzuhq.com/images/logo/vizzu-twitter.png

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

SortableJS
▻https://sortablejs.github.io/Sortable

la documentation de la lib Sortable.js intégrée dans SPIP 4.0 (en remplacement de la partie sortable du plugins-dist JQuery UI)

#sortable #javascript #documentation #SPIP #JQuery_UI

Push v1.0 | Javascript Notification Framework
▻https://pushjs.org

What is Push?
Push is the fastest way to get up and running with Javascript desktop notifications. A fairly new addition to the official specification, the Notification API allows modern browsers such as Chrome, Safari, Firefox, and Edge to push notifications to a user’s desktop. Push acts as a cross-browser solution to this API, falling back to use older implementations if the user’s browser does not support the new API.

Documentation : ▻https://pushjs.org/docs/quick-start
Repo Github : ▻https://github.com/Nickersoft/push.js

#pushjs #notification #javascript

#Package Quality Score - Skypack Docs
▻https://docs.skypack.dev/package-authors/package-checks

- Recommended: Your package.json contains an ESM export, e.g.: "exports": { "import": "./path/to/entry.js" } or "exports": { ".": { "import": "…" } }
– Your package.json contains "type": "module"
– Your package.json contains a "module": "./path/to/entry.js" entry (not officially supported by Node.js, but an organic community convention we respect).

This field ensures that you’re shipping modern, standards-compliant JavaScript that works best for users. This ensures your package has more longevity and can be used in more environments, from browsers to #Node to newer projects like Deno. Even traditional web bundlers can benefit from #ESM for more accurate tree-shaking and code analysis.

#javascript_hell

</> htmx - high power tools for html
▻https://htmx.org

htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

Une tentative de simplification pour la gestion de toutes les interactions dans les pages HTML : utiliser des attributs de balises (préfixés par hx-) à la place du javascript (open-source licence BSD).
Voir aussi :
– la présentation du concept sur : ▻https://htmx.org/docs
– le Github du projet : ▻https://github.com/bigskysoftware/htmx
– son prédécesseur : ▻https://intercoolerjs.org

#htmx #javascript #HTML #attribut_html