#javascript

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)

Inspect this snake
▻https://matthewrayfield.com/goodies/inspect-this-snake
( you know.. with right click )

#javascript

Tina is Not a CMS · TinaCMS
▻https://tinacms.org/docs/getting-started/introduction

https://res.cloudinary.com/forestry-demo/video/upload/du_16,w_700,e_loop/v1571159974/tina-hero-demo.gif

Tina is optimized for next-gen JAMstack tools. It is written in JavaScript and easily adapted to multiple different frameworks.

Tina currently supports React-based frameworks, including:

Create-React-App
Gatsby
NextJS

#CMS

Apprendre à coder en JavaScript | Cours complet (2019) - Pierre Giraud
▻https://www.pierre-giraud.com/javascript-apprendre-coder-cours

un cours complet pour commencer avec Javascript

#tutoriel #javascript #cours_en_ligne

▻https://github.com/jwilber/roughViz

roughViz.js is a reusable #JavaScript library for creating sketchy/hand-drawn styled #charts in the browser, based on D3v5, roughjs, and handy.

https://raw.githubusercontent.com/jwilber/random_data/master/roughViz.gif

#d3.js

The “One HTML Page Challenge”, a great example of view-source culture / Boing Boing
►https://boingboing.net/2019/08/23/the-one-html-page-challenge.html

When I was interviewing developers for my latest book Coders, all the ones who grew up during the late 90s and early 00s web talked about how powerful view-source was in teaching themselves to code and make stuff online.

But web development these days has grown byzantine in its complexity; if newbie is trying to learn, view-source is liable to just cough up a slurry of incomprehensible, minified javascript. It closes off the easy onramps that existed back in the earlier days of the web.

So, projects like this one-page challenge are awesome, because the whole goal is to encourage the writing of web-site code that’s more legible and tractable.

#programmation #développement #HTML #Javascript #CSS #éducation

▻https://azlejs.com

Azle is a Javascript library for rapidly prototyping the front-end of an application. Azle uses layouts to arrange UI elements on the screen, where styling and events can be added to create full-featured applications.

#JavaScript #prototype #ui

« A personal checklist for publishing web components to npm » par Justin Fagnani, auteur de LitElement
▻https://twitter.com/justinfagnani/status/1156603227854405632?s=21 #javascript #modules #npm

Point de vue particulièrement intéressant, lorsque l’on publie des librairies sous forme de modules JS (au sens ES6+), plutôt que des bundles avec loaders universels.