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
#javascript
-
-
« ‹script› async, defer, async defer, module, nomodule, src, inline - the cheat sheet » by github/jakub-g
▻https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6#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 ; et voir l’article de Jake Archibald, si cette synthèse est trop touffue, l’article met les 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-scrollytellingScrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
►https://github.com/russellgoldenberg/scrollamaScrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
▻https://projects.lukehaas.me/scrollifyScrollStory 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/scrollstoryVivus 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/vivusgraph-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-scrollenter-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-viewProjects | Knight Lab partagé par @klaus
▻https://seenthis.net/messages/792645revealjs 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
-
Gaffe : dans un très grand nombre d’exemples, l’affichage n’est pas du tout responsive. C’est tout de même dommage de nos jours.
-
Oui, c’est une contrainte forte à intégrer, c’est clair !
-
Voici un outil qui pourrait être utile : ►https://revealjs.com
-
Un jour il faudra que je développe ces idées, parce que ça me tient à cœur, mais rapidement, sur les limites de ces formats :
– les longforms ont été popularisés vers 2011 à partir du NY Times ; donc toute une partie des développements techniques s’est fait sans trop se poser la question du responsive, pas encore totalement à la mode à l’époque ;
– faire ça bien, ça coûte bonbon. Donc le NY Times n’en fait presque plus ; et les autres ont repris les usages les plus simples et plus « automatisables ». Genre des effets de parallaxe et les images en fond
fixed, souvent pas bien jolis, et qui donnent plus envie de vomir qu’autre chose. Les longforms du Monde, à un moment, c’était quasiment que ça.– et on est toujours dans une logique de CMS tout-automatique et de réduction des coûts. Les « art directed articles », comme le nom l’indique, ça implique qu’il y a une direction artistique (donc une personne dont c’est le métier) pour chaque article. Et mon constat : il n’y a pas vraiment de gens prêts à payer pour ça.
– l’idéologie de l’édition sur le Web n’est plus de faire des pages Web super-belles avec de super-articles longs qui attireraient les gens, mais de partager sur les supports avec un maximum d’audience. Une grosse partie des médias, ces dernières années, s’est engouffré d’abord sur les formats courts (à une époque, on a même eu l’idée de découper les articles en plusieurs pages pour multiplier les paves vues…), puis les « pages » Facebook, puis que les formats « AMP » de Google ; certes ils en reviennent, mais c’est plus avec ce genre de tendances que tu vas avoir des développements du côté de la narration enrichie sur le Web…
– et dernier écueil : ça demande des graphistes avec des compétences techniques, et des informaticiens avec des compétences graphiques, et ça ce sont des animaux mythologiques dont l’existence est encore discutée par les archéologues du Web.
-
Autre exemple, ce que l’on avait fait il a quelques années avec @drbouvierleduc pour la région Limousin, des « expos virtuelles » dans le site Géoculture (toute la rubrique Focus) :
►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousinEn gros 100% avec le Noizetier. Dans l’idée ça peut soit être un unique contenu SPIP avec des centaines de noisettes, soit comme on l’a fait là, une page qui agrège les noisettes de plusieurs Rubriques/Sous-rubriques ce qui permet de gérer le chapitrage plus simplement (cf le menu chapitre en haut).
Et c’est responsive :pPour moi le noizetier est une des manières les plus souples/complètes de faire ça. Vu que tu peux en inventer autant que tu veux, suivant ce qui a été décidé avec la direction artistique de permettre de faire.
Ça évite d’être lié à un contenu SPIP, et à seulement 2 ou 3 choix possibles, car sinon faudrait ajouter 12000 champs. On doit pouvoir reproduire les long forms de @arno assez facilement à priori.
Par ailleurs tu peux les utiliser aussi bien vraiment toutes seules (le contenu vient de champs de config des noisettes) ou en utilisant le « vrai » contenu éditorial du site (le contenu de telle noisette venant du contenu d’un article, d’un événement, etc).
Le plugin ne fait rien lui-même hein : tout dépend vraiment de ton « jeu de noisettes », càd ce que vous permettez de faire aux gens. C’est à peu près infini comme possibilités, vu que tu peux parfaitement avoir des noisettes « cartes », des noisettes « frise chrono », ou tout autre animation kikou un peu complexe, que tu intercales avec d’autres contenus plus simple, des textes, des images, etc.
-
-
Merci pour vos retours forts inintéressants :)
-
Purement graphique et avec un travail de design sonore mais seulement dans une app
Phallaina, le roman graphique
▻https://youtu.be/GIqQIpmhJGQ
–
j’ai en ai développé plusieurs avec des étudiant.es des Beaux-arts de Bordeaux ou j’enseigne.
Ce ne sont que des images et ce n’est pas connecté à une base de donnée, par manque de temps pour un simple projet pédagogique, mais c’est faisable.
▻https://design-ebabx.fr/webapp/seahot
▻https://design-ebabx.fr/webapp/affluence -
-
-
nodeca/pica : Resize image in browser with high quality and high speed
▻https://github.com/nodeca/picaUn 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/beersliderUn 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-
à intégrer dans ce vieux truc que j’avais pondu sans jamais l’utiliser ▻https://git.spip.net/spip-contrib-extensions/images_compare ?
-
-
-
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/editDé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.
-
« We have a problem with Promises » par Nolan Lawson, 18.05.2015
▻https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.htmlQuoiqu’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 formenew 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 avecthrow.Une grande part des problèmes avec les Promise sont réglés en pratique par la vérification de ces deux règles.
-
« MDN › Hoisting »
▻https://developer.mozilla.org/en-US/docs/Glossary/HoistingLes subtilités des déclarations qui sont hoisted (déclarations var et de fonctions) ou non (let, const) durant la phase de compilation.
-
« Javascript : Named vs Anonymous Functions » de Chris Ng, 01.05.2017 ▻https://www.linkedin.com/pulse/javascript-named-vs-anonymous-functions-chris-ng
-
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 #galenepas utilisé... mais peut-être utile et intéressant à tester ?
-
J’ai testé et... franchement... simple et très bien pour les visioconférences (on se voit bien et entend bien, on peut partager l’écran et converser dans une boîte « conversation »).
Possible de l’essayer ici :
▻https://galene.org:8443/group/public
-
-
JSON Lines
▻https://jsonlines.orgun 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-
C’est pareil que ndjson ?
Mike Bostock l’utilisait dans ses super articles sur l’utilisation de la ligne de commandes pour manipuler des données géographiques :
▻https://medium.com/@mbostock/command-line-cartography-part-2-c3a82c5c0f3
-
-
-
Window.postMessage - Référence Web API | MDN
▻https://developer.mozilla.org/fr/docs/Web/API/Window/postMessageUne 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_chainingL’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 refactoringto quickly convert a sequence of expressions such asa && a.b && a.b.c()to instead use optional chaining:a?.b?.c(). Just select an expression to use it:-
par contre ça vaut que pour les navs relativement récents (cette année seulement), donc quand c’est pour du dev JS côté serveur ou cli, genre avec node, ça va, mais si c’est pour du code exécuté par les navs, ça fera des erreurs chez encore pas mal de monde
-
@RastaPopoulos : l’écriture semble tellement pratique que tu peux outrepasser le problème des navigateurs en codant en ES6 avec (par exemple) Gulp.babel pour générer le code « JS old style » :
if (toto?.titi?.tata === 'patate') {
est transformé en :if ((toto === null || toto === void 0 ? void 0 : (_toto$titi = toto.titi) === null || _toto$titi === void 0 ? void 0 : _toto$titi.tata) === 'patate') {
Gulp + babel : ▻https://cobwwweb.com/compile-es6-code-gulp-babel-part-1
-
-
Utiliser Fetch - Référence Web API | MDN
▻https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_FetchL’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. -
pqina/filepond : 🌊 A flexible and fun JavaScript file upload library
▻https://github.com/pqina/filepondA 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.”
-
Voir aussi la carte mondiale du déploiement de la 5G : ▻https://www.speedtest.net/ookla-5g-map
-
-
zurb/tribute : ES6 Native mentions
▻https://github.com/zurb/tributeA cross-browser
@mentionengine written in #ES6, no dependencies. -
Flickity · Touch, responsive, flickable carousels
▻https://flickity.metafizzy.coscript 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)-
aaaah ? enfin un remplaçant solide à Slick ?
-
Y a une licence pour les usages commerciaux : ▻https://flickity.metafizzy.co/license.html
The Flickity Commercial Developer License is for individual developers. Each individual developer or team member needs to purchase a separate license.
– Flickity Commercial Developer License for 1 developer $25The Flickity Commercial Team License is for up to 8 team members.
– Flickity Commercial Team License for up to 8 developers $110The Flickity Commercial Organization License is for an unlimited number of team members. This license covers the entire team no matter how many people are working on it.
– Flickity Commercial Organization License for Unlimited developers $320 -
Semi-libre donc, mais il faut comprendre la notion de « site commercial », en effet, c’est le cas explicitement d’un site de e-commerce : dans ce cas on doit payer la librairie il me semble. Mais un site de présentation d’une entreprise, c’est uniquement de l’information. Ils n’explicitent pas vraiment ces notions. Mais de ce que je comprends pour l’instant, c’est plutôt quand tu veux utiliser leur librairie dans un produit fermé et commercial, un produit dont on ne verra pas le code. Ce qui n’est donc pas le cas d’un site de présentation de quoi que ce soit.
-
-
A re-introduction to JavaScript (JS tutorial) - JavaScript (https:/...
▻https://diasp.eu/p/11292934A 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-storeVue 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.orgUn 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.jsVoir 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.htmlUtiliser 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 -
« 2016 – the year of web streams » by Jake Archibald, 25.01.2016
►https://jakearchibald.com/2016/streams-ftwWhat is the underlying data-structure transporting content? It is Uint8Array.
