If you’re starting out with object and array manipulations in JavaScript these handy tools by Sarah Drasner might come in handy. The reason they work so well is that it’s one page, and it’s driven by natural language. JavaScript Object Explorer →JavaScript Array Explorer → Do not however that the yielded code mutate the original …
Tag Archives: javascript
Scrollama – Scrollytelling with IntersectionObserver
Scrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events. The code that accompanies the markup pictured above: // instantiate the scrollama const scroller = scrollama(); // setup the instance, pass callback functions scroller .setup({ container: ‘.scroll’, // wrapping container step: ‘.scroll__text .step’, // all steps graphic: ‘.scroll__graphic’, …
Continue reading “Scrollama – Scrollytelling with IntersectionObserver“
Feeding the Audio Graph – Using Web Audio’s AnalyserNode
Good article on 24ways (yes, that still is a thing) on using Web Audio’s AnalyserNode. const waveform = new Uint8Array(analyser.fftSize); const frequencies = new Uint8Array(analyser.frequencyBinCount); const ctx = canvas.getContext(‘2d’); const loop = () => { requestAnimationFrame(loop); analyser.getByteTimeDomainData(waveform); analyser.getByteFrequencyData(frequencies); ctx.beginPath(); waveform.forEach((f, i) => ctx.lineTo(i, f)); ctx.lineTo(0,255); frequencies.forEach((f, i) => ctx.lineTo(i, 255-f)); ctx.stroke(); } loop(); I especially …
Continue reading “Feeding the Audio Graph – Using Web Audio’s AnalyserNode“
Getting started with Mapbox GL JS
Good intro by Arden de Raaij on setting up a basic Mapbox GL JS map with clickable markers that zoom upon getting clicked. Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. It’s my favorite alternative to Google’s service and in this article I’ll …
Wes Bos – Async + Await
Developing TV Apps with React-TV
TVs usually have limited graphics acceleration, single core CPUs and high memory usage for a common TV App. These restrictions make super responsive 60fps experiences especially tricky. React-TV is an ecosystem for React Applications on TVs. Includes a Renderer and a CLI tool for building applications. Focused on be a better tool for building and …
Cancel a JavaScript Promise with AbortController
In How to Cancel Your Promise Seva Zaikov has done a nice writeup exploring several attempts on how to cancel promises. After also touching generators and async/await the conclusion is that you can’t actually cancel a promise with the techniques mentioned (you may introduce some workarounds to track the cancelled state yourself, yet that won’t …
Continue reading “Cancel a JavaScript Promise with AbortController“
Parcel: A blazing fast, zero configuration web application bundler
Earlier this week Parcel got dropped and it received quite some attention, because it tackles two important things when compared to other bundlers such as Webpack: The first reason I was motivated to build a new bundler was performance. I’ve worked on some pretty large apps with thousands of modules, and was always disappointed with …
Continue reading “Parcel: A blazing fast, zero configuration web application bundler”
JavaScript’s setTimeout “other” arguments
When using setTimeout, it’s not needed to wrap a function with arguments into an anonymous function and call it from there. What you can do instead is pass the function in via its name (as you would do with a function that has no arguments), and pass in the arguments via the 3rd, 4th, 5th, …
Continue reading “JavaScript’s setTimeout “other” arguments”
Implement FLIP transitions easily with flipping
Back in 2015 Paul Lewis published a brilliant article named FLIP your animations, a technique to getting smooth animations on the web. FLIP stands for First, Last, Invert, Play First: before anything happens, record the current (i.e., first) position and dimensions of the element that will transition. You can use element.getBoundingClientRect() for this, as will …
Continue reading “Implement FLIP transitions easily with flipping”