#javascript

« 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

A re-introduction to JavaScript (JS tutorial) - JavaScript (https:/...
▻https://diasp.eu/p/11292934

A re-introduction to JavaScript (JS tutorial) - JavaScript | #javascript #tutorial

websanova/vue-store: A simple light-weight Vue “store” alternative to vuex.
▻https://github.com/websanova/vue-store

Vue Store: a simple easy access store utility for Vue.js

#vuejs #store #javascript #json

WebKit › Web Inspector Reference
› Console Command Line API
▻https://webkit.org/web-inspector/console-command-line-api
#javascript #console #debug

wavesurfer.js
▻https://wavesurfer-js.org

Un player audio open-source avec visualisation à la « sound cloud » (waveform) avec plein d’habillages possibles.
Exemples : ▻https://wavesurfer-js.org/examples
Plugins : ▻https://wavesurfer-js.org/plugins
Le repo sur Github : ▻https://github.com/katspaugh/wavesurfer.js

Voir aussi : ▻https://github.com/michaeldzjap/waveplayer.js/tree/master

(un petit plugin SPIP ?)

#player_audio #waveform #javascript #wavesurfer #SPIP #sound_cloud

La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
▻https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

Utiliser les media query en javascript
Voir aussi :
– la doc MDN : ▻https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
– des exemples : ▻https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Tester_les_media_queries

#javascript #media_query #matchMedia

« 2016 – the year of web streams » by Jake Archibald, 25.01.2016
►https://jakearchibald.com/2016/streams-ftw

#webstreams #javascript

What is the underlying data-structure transporting content? It is Uint8Array.

« composed: true considered harmful? » by Johnson Westbrook, 07–08.11.2019
▻https://dev.to/open-wc/composed-true-considered-harmful-5g59
#webComponents #events #javascript

Detailed description of event propagation with various use cases; and description of one pattern, for event propagation in the DOM and web apps. I would not much recommend using this pattern, yet the article triggers reflection on those patterns and spawned an interesting discussion on Twitter.

« Managing events in your custom elements » by Open WC, 03.01.2020 (collective)
▻https://open-wc.org/faq/events.html
#webComponents #events #javascript

« 🎉👨‍👩‍👧‍👧 JavaScript Visualized: Prototypal Inheritance » by Lydia Hallie, 03.01.2020
▻https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co
#javascript #fundamentals #reference

What is the !! (not not) operator in JavaScript ? - Stack Overflow
▻https://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript

!! : écriture raccourcie pour forcer une valeur booléenne en javascript
Exemple :
console.log(navigator.userAgent.match(/MSIE 8.0/));
// returns either an Array or null
console.log(!!navigator.userAgent.match(/MSIE 8.0/));
// returns either true or false

@seenthis : ça serait pratique d’avoir un balisage permettant de formater un bloc de code sur plusieurs lignes ?
Par exemple
```ici un bloc de code [...]
sur plusieurs lignes```
(comme dans Discord...)

#javascript #les_joies_du_code

WebGLStudio
▻https://webglstudio.org/demo

#waouw #3D #javascript

Via @sebsauvage #forcément

Paper Programs
▻https://paperprograms.org

https://paperprograms.org/og-image.jpg

le logiciel de #dynamicland recréé en #javascript

via @severo
cc @0gust1

(le projet a l’air un peu en sommeil)