#javascript

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

Prefix free : Break free from CSS vendor prefix hell !
▻https://projects.verou.me/prefixfree/#

Un script JS Open Source qui se charge de générer les préfixes navigateurs dans les CSS et les style inlines.
Le repo Github : ▻https://github.com/LeaVerou/prefixfree
(une alternative quand on ne peut pas avoir Gulp qui le fait en amont...)

#CSS #préfixe_navigateur #javascript #web_dev

SVG-Edit/svgedit: Powerful SVG-Editor for your browser
▻https://github.com/SVG-Edit/svgedit

un éditeur de SVG en JS, open-source
A tester sur ▻https://svg-edit.github.io/svgedit/dist/editor/index.html

#svg #editeur #web_based #appli_web #javascript

« ‹script› async, defer, async defer, module, nomodule, src, inline - the cheat sheet » by github/jakub-g
▻https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6

function isDeferred(script: HTMLScriptElement) {
return script.defer || script.type === "module"; // modules are implicitly deferred
}

#javascript #programming #async #defer

Charger les scripts JS dans une page web, malgré le temps, je le fais toujours un peu de travers. Voilà une synthèse qui aide ; voir l’article de Jake Archibald aussi, si la synthèse présentée dans ce Gist était trop touffue, l’article de Jake Archibald met bien ces sujets en contexte.

En préparation d’un (potentiel) projet avec une compagnie de théâtre dont le site fera partie intégrante de la création finale, j’ai commencé à recenser des exemples et outils (dont certains trouvé ici même) pour mettre en place une narration sur le web.

Si vous avez des exemples et des outils à ajouter, je suis preneur.

______________________________________

LES EXEMPLES

▻http://www.framescollection.com/tunnelrats.html
Peu de technique, mais une narration forte illustrée et rythmée graphiquement

▻http://www.framescollection.com/manly.html
essentiellement graphique mais peu adaptable sur mobile

▻https://projects.lukehaas.me/scrollify/examples/apple
principalement des animations visuelles et peu de texte

▻https://projects.lukehaas.me/scrollify/examples/layered-scrolling
joue principalement sur les fonds (image ou vidéos) et peu de texte

►http://computer-grrrls.gaite-lyrique.net
joue principalement sur le rythme des blocs de contenu

▻https://brest1937.kubweb.media/episode/heritage
alterne animations et contenus textes/vidéos

▻https://www.nytimes.com/interactive/2015/09/17/nyregion/st-patricks-cathedral-pope-francis-visit.html
très simple, repose sur l’image

▻https://www.liberation.fr/apps/2019/02/paris-populaire
moins linéaire, on doit se balader sur la carte pour avoir accès aux contenus

►https://fabre.montpellier3m.fr/Correspondance d’@arno
pour l’alternance de texte à lire (défilement vertical) et des photos des pages manuscrites (défilement horizontal)

▻https://www.bloomberg.com/graphics/2015-auto-sales
haut niveau, avec animation de #SVG et tout

▻https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
idem, gros niveau, The Guardian quoi

►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)
Site plus archivé mais tjs visible via ►https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin

►https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
Pour l’intro et le zoom sur le carte

►https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html
pour la navigation dans la carte

►https://www.women-in-type.com
Pour les animations sur les images dans le déroulé de la page (entête et diaporama) et le filtrage des listes (menu en « sticky ») qui identifie bien les parties

______________________________________

LES OUTILS

How to implement #scrollytelling with six different libraries partagé par @fil
►https://pudding.cool/process/how-to-implement-scrollytelling

Scrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
►https://github.com/russellgoldenberg/scrollama

Scrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
▻https://projects.lukehaas.me/scrollify

ScrollStory is a jQuery plugin for building scroll-based stories. Rather than doing a specific task, it aims to be a tool to help solve general problems.
▻https://sjwilliams.github.io/scrollstory

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
►https://maxwellito.github.io/vivus

graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart’s state.
▻https://github.com/1wheel/graph-scroll

enter-view . Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank.
▻https://github.com/russellgoldenberg/enter-view

Projects | Knight Lab partagé par @klaus
▻https://seenthis.net/messages/792645

revealjs The HTML Presentation Framework partagé par @alexcorp en commentaire
►https://revealjs.com

______________________________________
TAGS SUR SEENTHIS

#art_directed_article / #scrollytelling, #narration et #Nouvelles_narrations / #webdoc / #longforms

#webdev #spip_recette

nodeca/pica : Resize image in browser with high quality and high speed
▻https://github.com/nodeca/pica

Un script JS pour redimensionner une image dans le navigateur :

Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technologies: webworkers, webassembly, createImageBitmap, pure JS.
With pica you can:
– Reduce upload size for large images, saving upload time.
– Saves server resources on image processing.
– Generate thumbnails in browser.

#image #redimensionner #upload #javascript #client-side #SPIP

pehaa/beerslider : A vanilla JS keyboard accessible plugin for any before-after comparison
▻https://github.com/pehaa/beerslider

Un script JS pour réaliser un effet « avant / après » sur une image
La démo : ▻https://pepsized.com/wp-content/uploads/2018/09/beerslider/demo/index.html

#avant_après #beerslider #javascript