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

______________________________________

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

Vanilla-Tilt - A smooth 3D tilt #javascript library forked from Tilt.js (jQuery version)
▻https://micku7zu.github.io/vanilla-tilt.js

(Je me le note notamment pour son effet de reflet – glare – en fonction de l’inclinaison de l’élément.)

« Async Iteration & Streams — Why Async Iterators Matter » par Benjamin Gruenbaum, 08.04.2016 (présentation, 54 slides)
▻https://docs.google.com/presentation/d/1r2V1sLG8JSSk8txiLh4wfTkom-BoOsk52FgPBy8o3RM/edit

Démystifie les sujets « foreach over asynchronous streams » et « async await » dans leur implémentation en JavaScript. Contient également en préambule une série de slides — masqués, pourtant intéressants — avec une présentation des Promises.

#javascript #programming #promises

« We have a problem with Promises » par Nolan Lawson, 18.05.2015
▻https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

Quoiqu’il date, l’article est encore une lecture utile. Dans nos rencontres Gōng-fu I/O, je le cite à l’occasion, en rappelant qu’avec les Promise en JS, il faut essentiellement se souvenir de ces deux règles :

1. les clauses .then() et .catch() prennent une fonction comme argument ; rien d’autre (cf. section « Advanced mistake #5 : promises fall through ») ;
2. les fonctions qu’on passe à ces clauses .then() et .catch() (ou à la forme new Promise(…,…)) ne peuvent/doivent faire que ces trois choses-ci :

a. retourner une nouvelle Promise ;
b. retourner une valeur scalaire (primitive ou objet JS) ;
c. soulever une exception avec throw.

Une grande part des problèmes avec les Promise sont réglés en pratique par la vérification de ces deux règles.

#javascript #programming #promises

« MDN › Hoisting »
▻https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Les subtilités des déclarations qui sont hoisted (déclarations var et de fonctions) ou non (let, const) durant la phase de compilation.

#javascript #programming

« Javascript : Named vs Anonymous Functions » de Chris Ng, 01.05.2017 ▻https://www.linkedin.com/pulse/javascript-named-vs-anonymous-functions-chris-ng

#javascript #programming

#Galène

Galène is a #videoconferencing_server that is easy to deploy (just copy a few files and run the binary) and that requires moderate server resources. It was originally designed for lectures and conferences (where a single speaker streams audio and video to hundreds or thousands of users), but later evolved to be useful for student practicals (where users are divided into many small groups), and meetings (where a few dozen users interact with each other).

Galène’s server side is implemented in #Go, and uses the #Pion implementation of #WebRTC. The server is regularly tested on Linux/amd64 and Linux/arm64, and has been reported to run on Windows; it should in principle be portable to other systems, including Mac OS X. The client is implemented in #Javascript, and works on recent versions of all major web browsers, both on desktop and mobile (but see below for caveats with specific browsers).

While traffic is encrypted from sender to server and from server to client, Galène does not perform end-to-end encryption: anyone who controls the server might, in principle, be able to access the data being exchanged. For best security, you should install your own server.

Galène’s is not the only self-hosted WebRTC server. Alternatives include Janus, Ion-SFU, and Jitsi.

Galène is free and #open_source #software, subject to the MIT licence. Galène’s development is supported by Nexedi, who fund Alain Takoudjou’s work on the user interface.

▻https://galene.org
#alternatives #alternative #zoom #microsoft_teams #teams #vidéoconférences #visioconférences #visio-conférences #vidéo-conférences #logiciel #galene

pas utilisé... mais peut-être utile et intéressant à tester ?

JSON Lines
▻https://jsonlines.org

un format de stockage/échange pour JSON (semble un peu manquer d’implémentations dans les langages courants)
Convertisseur vers JSON (npm) : ▻https://www.npmjs.com/package/jsonlines2json

#json #javascript

Window.postMessage - Référence Web API | MDN
▻https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage

Une méthode pour la communication entre fenêtres/onglets de navigateur :

La méthode window.postMessage, quand elle est appelée, provoque l’envoi d’un MessageEvent à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d’évènements restants si window.postMessage est appelée depuis un gestionnaire d’évènement, des timeouts en attente enregistrées auparavant, etc.) Le MessageEvent est de type message, a une propriété data qui est initialisée à la valeur du premier argument passé à window.postMessage, une propriété origin correspondant à l’origine du document principal de la fenêtre appelant window.postMessage au moment où window.postMessage a été appelée, et une propriété source qui est la fenêtre depuis laquelle window.postMessage est appelée. (les autres propriétés standard d’évènement sont présentes avec leurs valeurs attendues).

...et les précautions de sécurités préconisées :

Précautions de sécurité
– Si vous ne prévoyez pas de recevoir de messages depuis d’autres sites, n’ajoutez pas de gestionnaire d’évènement pour les évènements message. C’est un moyen sûr d’éviter les problèmes de sécurité.
– Si vous prévoyez de recevoir des messages depuis d’autres sites, vérifiez toujours l’identité de l’expéditeur à l’aide des propriétés origin et si possible source. Toute fenêtre (y compris, par exemple, ▻http://evil.example.com) peut envoyer un message à toute autre fenêtre, et vous n’avez aucune garantie qu’un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l’identité, vous devriez toujours vérifier la syntaxe du message reçu. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.
– Spécifiez toujours explicitement une origine de destination, jamais *, quand vous utilisez postMessage pour envoyer des données à d’autres fenêtres. Un site malicieux peut changer l’adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l’aide de postMessage.

#postMessage #javascript #politique_de_sécurité #Same_Origin_Policy #SOP

Chaînage optionnel (optional chaining) - #JavaScript | MDN
▻https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining

L’opérateur de chaînage optionnel ?. permet de lire la valeur d’une propriété située profondément dans une chaîne d’objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L’opérateur ?. fonctionne de manière similaire à l’opérateur de chaînage ., à ceci près qu’au lieu de causer une erreur si une référence est null ou undefined, l’expression se court-circuite avec undefined pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne undefined si la fonction donnée n’existe pas.

Découvert dans les notes de version de codium cf :

Use the new convert to optional chain refactoring to quickly convert a sequence of expressions such as a && a.b && a.b.c() to instead use optional chaining: a?.b?.c(). Just select an expression to use it:

https://code.visualstudio.com/assets/updates/1_49/ts-convert-chain.gif

#optional_chaining #object #property #test

Utiliser Fetch - Référence Web API | MDN
▻https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch

L’API Fetch fournit une interface JavaScript pour l’accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale fetch() qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.
Ce genre de fonctionnalité était auparavant réalisé avec XMLHttpRequest. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme Service Workers. Fetch fournit aussi un endroit unique et logique pour la définition d’autres concepts liés à HTTP comme CORS et les extensions d’HTTP.

#fetch #javascript #httpRequest #asynchrone

pqina/filepond : 🌊 A flexible and fun JavaScript file upload library
▻https://github.com/pqina/filepond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
[...]
Core Features
– Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
– Drop files, select on filesystem, copy and paste files, or add files using the API.
– Async uploads with AJAX, supports chunk uploads, can encode files as base64 data and send along form post.
– Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
– Image optimization, automatic image resizing, cropping, filtering, and fixes EXIF orientation.
– Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

Voir aussi sur le site officiel :
– la documentation : ▻https://pqina.nl/filepond/docs
– les exemples : ▻https://pqina.nl/filepond/#examples

#upload #SPIP #bigupload #javascript #redimensionner_image #EXIF

“#5G Will Definitely Make the Web Slower, Maybe”

▻https://www.filamentgroup.com/lab/5g

“During the years 2011 through 2019, 4g coverage spread from 5% to 79% of the world. During that same time period, the median average JavaScript transfer size to mobile devices increased by 611%, from 52kb to 372.9 KB.”

zurb/tribute : ES6 Native mentions
▻https://github.com/zurb/tribute

A cross-browser @mention engine written in #ES6, no dependencies.

demo : ▻https://zurb.github.io/tribute/example

#javascript #autocomplete

Flickity · Touch, responsive, flickable carousels
▻https://flickity.metafizzy.co

script JS pour faire des carrousels responsives : léger et plein d’options (config en json) sans être trop bling-bling.
(licence Open source pour les développements qui le sont aussi)

#carousel #javascript #flickity