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
« 2016 – the year of web streams » by Jake Archibald, 25.01.2016
►https://jakearchibald.com/2016/streams-ftw
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...)
@cy_altern c’est ça que tu cherches ?
– un simple ` pour du code inline
– trois ` pour un bloc de code
et hop, c’est cadeau :)
oui mais non : regarde dans mon message ci-dessus : les 3 `
ne semblent pas fonctionner pour le bloc de code... (on voit les 2 `non pris en compte en début et fin)
Il faut sauter une ligne après les ` d’ouverture et avant ceux de fermetures et hop.
un truc comme ça alors :
première ligne de code
deuxième ligne
...
Paper Programs
▻https://paperprograms.org
le logiciel de #dynamicland recréé en #javascript
(le projet a l’air un peu en sommeil)
Inspect this snake
▻https://matthewrayfield.com/goodies/inspect-this-snake
( you know.. with right click )
Tina is Not a CMS · TinaCMS
▻https://tinacms.org/docs/getting-started/introduction
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
▻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.
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
le site du challenge : ▻https://onehtmlpagechallenge.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.
« 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.
The vector heat method - Nicholas Sharp, Yousuf Soliman, Keenan Crane
Carnegie Mellon University
▻http://www.cs.cmu.edu/~kmcrane/Projects/VectorHeatMethod/index.html
en 30s
▻https://www.youtube.com/watch?v=UwPkWXQ6ORY
ou en 50 min
▻https://www.youtube.com/watch?v=4IZ-ykGnIRc
c’est des #maths un peu trop dures pour moi, mais les démos en #JavaScript sont super et le code est libre
▻https://geometrycollective.github.io/geometry-processing-js
#voronoi #géométrie #algorithmes #distance #diffusion #poisson #chaleur #pde
application à des nuages de points :
▻https://vimeo.com/348288232
Projects | Knight Lab
▻https://knightlab.northwestern.edu/projects
The Lab develops prototypes, projects and services that help make information meaningful and promote quality journalism, storytelling and content on the internet
Storytelling, Beta, Prototypes, Experiments and Past Projects
Learn.KnightLab.com
▻https://learn.knightlab.com
The web is a journalist’s medium. It influences every part of the journalistic process, from how we find and gather information, to how we craft our stories, to how we track the far reaches of our content. Understanding how it works can only make us better journalists. The best way to know the web is to take charge of it. We’re using open web technologies to build stories, apps, tools, and sites. You can too. If there’s one thing we understand, it’s that learning is a messy process. Come roll around in the mud with us.
Leaflet - a JavaScript library for interactive maps
►https://leafletjs.com
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
Scrollame
▻https://github.com/russellgoldenberg/scrollama
Scrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
Important Changes
Version 2.0.0+: .onContainerEnter and .onContainerExit have been deprecated in favor of CSS property position: sticky;. How to use position sticky.
Version 1.4.0+: you must manually add the IntersectionObserver polyfill for cross-browser support. See installation for details.
Jump to examples.
Why?
Scrollytelling can be complicated to implement and difficult to make performant. The goal of this library is to provide a simple interface for creating scroll-driven interactives. Scrollama is focused on performance by using IntersectionObserver to handle element position detection.
Export Google Maps Route to KML/GPX - Geographic Information Systems Stack Exchange
▻https://gis.stackexchange.com/questions/152571/export-google-maps-route-to-kml-gpx
Since Google pulled the plug on Google Maps Classic, I’m reluctantly moving to its Google Maps New application.
However, I didn’t find how to export a route to a GPX or KML file so it can be copied onto my smartphone.
Can it do this? If not, is there a third-party solution?
« How to not break the internet with this one weird trick — If you write JavaScript tools or libraries, you should bundle your code before publishing » by Rich Harris
▻https://link.medium.com/J89QIlT8RX #javascript #build
About JSHint
▻https://jshint.com/about
JSHint is a community-driven tool that detects errors and potential problems in JavaScript code. Since JSHint is so flexible, you can easily adjust it in the environment you expect your code to execute. JSHint is open source and will always stay this way.
La documentation : ▻https://jshint.com/docs
Toutes les options : ▻https://jshint.com/docs/options
Testé un peu, j’ai tenté de basculer ma conf #eslint ▻https://github.com/brunob/leaflet.fullscreen/blob/master/.eslintrc vers #jshint sans succès pour l’insntant, donc je reste sur eslint...
Iván Sánchez Ortega / Leaflet.TileLayer.GL · GitLab
▻https://gitlab.com/IvanSanchez/Leaflet.TileLayer.GL
With this plugin, you can apply colour transforms to your tiles, merge two or more tiles with a custom function, perform on-the-fly hillshading, or create synthetic tile layers based only on the map coordinates.
See several examples and edit them :
▻http://ivansanchez.gitlab.io/Leaflet.TileLayer.GL/demo/repl.html
Why?
#Leaflet has been lagging behind when it comes to #WebGL technology. Other map libraries (such as OpenLayers 3 and most notably Tangram) can already use WebGL shaders to apply transformations to map tiles and do fancy stuff.
The inflexion point are MapBox’s “Terrain-RGB” tiles. WebGL manipulation of these tiles can provide real-time terrain relief and hill shading.
This takes some inspiration from shadertoy.com, in the sense that the shaders work on two triangles with some predefined attributes and uniforms.
#map
#cartographie #développement #web #leaflet #javascript et surtout : #glitter, le plus important
mermaid · GitBook
▻https://mermaidjs.github.io
Generation of diagrams and flowcharts from text in a similar manner as markdown.
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
Un générateur (javascript) de diagrammes à partir de sources en markdown.
Basé sur le moteur de rendu de #3djs, utilise la syntaxe de js-sequence-diagram (▻https://bramp.github.io/js-sequence-diagrams)
A tester : l’éditeur en ligne ▻https://mermaidjs.github.io/mermaid-live-editor
Plusieurs éditeurs de code supportant le markdown proposent des plugins pour la prévisualisation (VS Code, Sublime text, VIm...).
Un plugin Gitlab permet d’afficher les schémas intégrés dans les fichiers .md (en particulier le Readme.md) : idéal pour des schémas intégrés à la documentation
(à intégrer dans le plugin markdown de SPIP ?)
#diagramme #javascript #markdown #gitlab #js-sequence-diagram #documentation
Serving #react and Koa together
▻https://hackernoon.com/serving-react-and-koa-together-720ba6668298?source=rss----3a8144eabfe3--
Reactjs and #koajs are two great frameworks of #javascript. I wonder how to serve React and Koa projects in the same server and same port! Finally, I’ve reached a solution and today I’ll discuss it.In this article, we’ll create an API using koa and a React project (frontend) which will consume the API. The idea is very simple, React will fetch some book names from the backend (koa) and render them.Backend (Koa) projectKoa uses async functions, this gives an advantage over callback functions. By default, Koa does not come with any middlewares. That makes Koa very minimal and elegant.At first, we need to install node (koa requires node v7.6.0 or higher). Then install koa using : npm i koaCreate a project directory named “book” and run npm init -y.As koa doesn’t come with any middlewares and we need (...)
How I configure VSCode for Everything
▻https://hackernoon.com/how-i-configure-vscode-for-everything-7df65a316a52?source=rss----3a8144e
Credits: Unsplash/Joshua AragonRecently, I was at the Boryspil Airport, Ukraine, working on a blog article when suddenly my VSCode stops working. It actually got crashed! Not once, but twice under 30 minutes. Some of the content was autosaved, some of it was gone forever…I was frustrated at first as to why it had to crash at that moment! Next, after re-opening the editor, I was angry with myself for I had to write some of the stuff again that didn’t get saved.Also, at times, previous this experience, it did feel that I have bloat of extensions that I am not using since I have stopped working with some of the frameworks in recent months (example, Angular).What did I do? After none of the emotions helped, I had to find a way to cope better. On a network that was not so crappy, but did have (...)
#react #programming #javascript #hackernoon-top-story #productivity
#javascript Array.reduce()
▻https://hackernoon.com/javascript-array-reduce-50403c421968?source=rss----3a8144eabfe3---4
How do I loathe thee? Let me count the ways…The Array.reduce() method has been around awhile. Like map(), filter() and find(), it operates upon an array of values by invoking a callback function.Here’s an example from the developer.mozilla.org site:const array1 = [1, 2, 3, 4];const reducer = (accumulator, currentValue) => accumulator + currentValue;// 1 + 2 + 3 + 4console.log(array1.reduce(reducer));// expected output: 10// 5 + 1 + 2 + 3 + 4console.log(array1.reduce(reducer, 5));// expected output: 15Seems straightforward, right? On with the grievances:0. It doesn’t do what you expectLet’s look at this again:const array1 = [1, 2, 3, 4];const reducer = (accumulator, currentValue) => accumulator + currentValue;// expected: 1 + 2 + 3 + 4 === 10Now I’ll modify the reducer function to add 1 (...)