WebAudio Deep Note, part 4: multiple sounds

Previously in this series: intro play a sound 2.1. kick and snare (a fun distraction from the main series) loop and change pitch We need to play 30 sounds at the time, that is 30 instances of the same cello sample, all pitched all over the place and over time. (If that sounds odd, please […]

October 20th, 2019
Tags: JavaScript, WebAudio

WebAudio Deep Note, part 3: loop and change pitch

This journey started here, then continued, then took a slight turn, just for giggles, and now we’re back. After you learned how to play a sound, now let’s loop it, because the DeepNote goes on for about 25 seconds and we play the exact same sample of a cello that is under a second long. […]

October 11th, 2019
Tags: JavaScript, WebAudio

WebAudio Deep Note, part 2.1: Boots and Cats

In the previous installment we came across the idea of creating noise via an oscillator and via a buffer filled with your own values (as opposed to values being read from a pre-recorded file). I thought a bit of elaboration is in order, even though we’re not going to use these ideas for the Deep […]

October 3rd, 2019
Tags: JavaScript, WebAudio

A bookmarklet: dataURI, please!

Ever had a string of a data URI image and you want to see said image? Simple: type data:image/png;base64, followed by the base 64 string. Except… it’s too much syntax to remember. I mean c’mon: colon, semi-colon, comma. And you probably don’t do this often enough. A bookmarklet is called for to aid the memory. […]

September 30th, 2019
Tags: bookmarklets

WebAudio Deep Note, part 2: play a sound

(Part 1 (intro) is here.) Now that we know what to do, let’s go for it! First rule of business: load an audio file and play it. UI Let’s build a simple HTML page (demo) to test things: <button onclick=”play()”>▶ play</button> <button onclick=”stop()”>STOP!!!!</button> Now let’s implement this play() function. Fetch… Loading means fetching from the […]

September 28th, 2019
Tags: JavaScript, WebAudio

WebAudio Deep Note, part 1: intro

You’ve heard of WebAudio, but have you done any experimenting with it? This is a series of posts on exploring and discovering various APIs that WebAudio has to offer, by doing something concrete, namely recreate the THX Deep Note sound. If you cannot wait for me to write up everything, the code and slides (these […]

September 18th, 2019
Tags: JavaScript, WebAudio

Exploring prefers-reduced-motion

Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don’t want your site to cause motion sickness and dizziness, right? Luckily, most modern […]

August 13th, 2019
Tags: CSS, JavaScript

Integrating React Profiler

Say hello to the new perf hotness – a profiler built into React. This announcement blog post shows how to use it as a Chrome Extension, but you can also use it in your code, to get insight into real world interactions, even in production. Let’s see how. Create a new react app If you’re […]

February 21st, 2019
Tags: react

Prettier in TextMate

Prettier is a code formatter, great for following consistent coding conventions with 0 effort. Here’s how to add it to TextMate, my text editor of choice. Install Prettier Globally, so you take advantage of it in any old directory. npm install –global prettier Config This is the one I use, I stole it from React […]

February 12th, 2019
Tags: tools

Asynchronous inline scripts via data: URIs

Inline scripts are synchronous. “Well, duh!” you may say. That’s a feature, not a bug. Because accessing a variable after an inline script should succeed. And that’s fine. But not great. When is this bad? Well, inline scripts cause stylesheets to be blocking. Wait, what? Steve explained it 10 years ago, and it’s still relevant […]

February 9th, 2019
Tags: browsers, CSS, JavaScript

Defining user styles

User styles have been around since the early days of the web. They are a way for users to specify their browsing preferences using CSS cascade. I remember way back when this option was fairly prominent in Internet Explorer settings. Now, I don’t even know how to find it in most browsers. But I did […]

February 5th, 2019
Tags: browsers, CSS, firefox

Using ESLint in a script

Instead of running ESLint on the command line and passing files to it, I wanted to require() and use it with code from strings. That is because I want to lint and unit-test the code from the book I write in AsciiDoc. (Will post the complete script once it’s running properly, some taste) Had to […]

August 29th, 2018
Tags: JavaScript

Organizing a React component these days (H1/2018)

I started typing an answer to a question by @alexharrisonsax since my React book is written for the recent past (React 14) and things change. Twitter is not great for code discussions, so here goes. Import dependencies import React, {Component, Node} from ‘react’; Declare the component class App extends Component {} Unless it’s functional stateless […]

May 25th, 2018
Tags: react

This page loaded in X seconds

I was just admiring Tim Kadlec eye-pleasing site. Nice, simple, see what I’m talkin’ ’bout. The feature I liked most was the footer that said “This page loaded in 0.186 seconds”. First of all – fast! Second – I thought all sites should have that. And what better way than an on-demand bookmarklet you carry […]

March 27th, 2018
Tags: bookmarklets, JavaScript, performance

Do Search Engines speak JavaScript?

A quick survey… So my onlinemusictools.com is a bunch of little React apps. I was wondering – is the JS-generated content of the apps visible in search engines? A quick survey was in order. The answer is – out of Google, Bing, DuckDuckGo, Yandex, only Google search crawler speaks the lingua JavaScript. Google screenshot below. […]

March 16th, 2018
Tags: JavaScript

OnlineMusicTools.com

Finally managed to cobble together an index page for the bunch of tools I’ve been hacking on in the past year as I progress through my music education. Is it better UX than the Apache default file listing? Hmm… Say hello to onlinemusictools.com! Not the best domain name, I know. But everything is bloody taken […]

March 16th, 2018
Tags: Music, react, tools

How it’s made: flashcards with Italian slang for musicians

Update: Now in French too Update 2: and in German Update 3: now with Web Speech API (scroll to the bottom) Here’s a little app that gives you flashcards of Italian words used in music: https://www.onlinemusictools.com/italiano/ It also pronounces the words in four different voices. The code for the tool: https://github.com/stoyan/italiano A few implementation notes […]

March 7th, 2018
Tags: ffmpeg, Music, react, tools

Say Yuri, or How to kill an hour on a rainy afternoon

How to kill an hour on a Mac on a rainy afternoon? open Terminal.app say -v ? (to list all the voices installed) or say -v ? | grep en_ (for English-only) say -v Fred Fitter. Happier. More productive. Replace Fred with Yuri. Repeat. And if you want more voices, or better ones (some do […]

March 4th, 2018
Tags: mac, tools

ffmpeg to mix audio files

Here’s how to mix three audio files into one: ffmpeg -i alex.aiff -i fred.aiff -i whisper.aiff -filter_complex “[0:0][1:0] amix=inputs=3:duration=longest” out.mp3 Note the inputs=3 part as we’re mixing three files. And this mixes only two files putting one on the left and one on the right: ffmpeg -i alex.aiff -i fred.aiff -filter_complex amerge out.mp3

March 2nd, 2018
Tags: ffmpeg, tools

Minimum Viable Sharing Meta Tags

MVSMT for short… yeah, like this is going to catch up. So anyway. Before starting publishing the Web Performance Calendar this year I though: hey, them articles should show up nicer when shared in the most Social of Medias. You know, a big ol’ image and that. (It’s not really how I talk actually, even […]

December 28th, 2017
Tags: (x)HTML(5), WordPress

Taking Mozilla’s DeepSpeech for a spin

Speech-to-text, eh? I wanted to convert episodes of my favorite podcast so their invaluable content is searchable. I’m moderately excited with the results but I’d like to document the effort nonetheless. DeepSpeech First thought – what open-source packages exist out there? Checking out wikipedia I see a brand-new one from Mozilla – DeepSpeech. Intriguing. Install […]

December 1st, 2017
Tags: ffmpeg, misc hackery

Performance calendar ’17 call to all

Helloooo! It’s time to sit down and write an article for the performance calendar. You have until Nov 30 to send me your piece. Details. What do you want to write about? Some ideas: Hello, 2007 called! Do I still shard domains to load resources from? Do I still package all JS in one big […]

November 11th, 2017
Tags: performance

Browser remembers your password, but you don’t? Take it back!

We’ve all seen something like this: But you have no idea what the password is. How to get the human-readable version of *******? Method 1: use the browser’s developer tools Provided you have a reasonably recent browser, just open the Developer tools by right-clicking the input field with the password and then select “Inspect Element”. […]

November 5th, 2017
Tags: bookmarklets, qa

hg revert a single file from the repo

Revert hg revert -r .^ filename What’s in a commit? hg tip -vp Forget these untracked files hg purge

October 9th, 2017
Tags: qa

Stylelint + TextMate integration

Naturally, you want your lint tools integrated with your text editor. Here’s what I did to integrate Stylelint (hello!) with TextMate. New Bundle In TextMate… menu Bundles / Edit Bundles…. I didn’t see a way to add a new Command, so I right-clicked an existing one (one with a C icon for Command), selected Find […]

October 1st, 2017
Tags: CSS, tools