Who amongst us has not created a blogging software of some fashion or another? I know I have, many times. My latest (joke-y) attempt was Lizzy.js. The desire to go into a writing mode and don’t worry about anything else is always strong. Even a dead simple self-hosted WordPress is often too much. Just give […]

This is part 4 of a series about hacking on sightread.org with minimal tooling/building and maximum web platform-ing: Part 1: Import JavaScript like it’s 2026 Part 2: Maximally Minimal Build Process Part 3: Do It Yourself: code coverage and testing Now let’s talk about types, the type of types that check if you made a […]

This is what turns out to be a part 3 of a series about building sightread.org with minimal tooling: Part 1: Import JavaScript like it’s 2026 Part 2: Maximally Minimal Build Process The previous posts covered how I structure js modules for parallel loading and how to build a production-ready app with a 200-line build […]

In my previous post I described how I set up sightread.org with no build process and modern JavaScript. The goal was raw ES modules, no transpilation, no bundling, just <script type=”module”> and we’re off. That worked great for a minute but I wanted just one more thing: long-lived immutable JS resources that can be cached […]

I started this new project called sightread.org to generate music to practice sight reading. (Still early days, it works with rhythms only). I wanted to go for no build process and modern JS and modern HTML. How modern is modern? IE8? IE10? In my head when I think “modern” it always brings an image of […]

I created this joke-y “framework” to build a website, or a blog if you will, from markdown files. The idea is to (ab)use Apache’s default directory listing. The “index” page reads the Apache’s HTML of a given directory and produces a list of articles. When the user clicks, the markdown file (corresponding to an article) […]

You’ve seen some of these UIs as of recent AI tools that stream text, right? Like this: I peeked under the hood of ChatGPT and meta.ai to figure how they work. Server-sent events Server-sent events (SSE) seem like the right tool for the job. A server-side script flushes out content whenever it’s ready. The browser […]

Today I gave a talk on memory leaks in web apps at the wonderful dotJS conference in Paris’ Folies Bergère theater. It was only 5 minutes, so not much time for links and such. Here’s more or less what I said including the links. Bonjour à toutes et à tous, who’s excited about… Memory Leaks!? […]

Do you hate it when sites open new tabs, for example from search results? Yeah, me too. So I thought a good idea would be to have a right-click “Open in this tab” similar to “Open in a new tab” option. Voilà, a new Chrome extension. You can install it from the store. How it […]

I recently saw someone sharing a blog post on social media using a video that just scrolls through the blog post. I wondered if a video like this can be created easily and automatically. Using a simple bookmarklet. Turns out yes! I ended up with two bookmarklets because they do different and independent things: one […]

One of my esteemed professors from Santa Monica College, Dr. Driscoll asked for an opinion on how one can use a sheet of music and reshuffle some measures to generate a unique exercise for each student. This turned out more fun than anticipated and here’s a solution I came up with using the free notation […]

tl;dr: Add data-lazy=”true” to your Facebook social plugins that are below the fold and reap the benefits. In code: // before <div class=”fb-like” data-href=”https://phpied.com”></div> // after <div class=”fb-like” data-href=”https://phpied.com” data-lazy=”true”></div> The following 18 seconds video demonstrates the difference. Where currently your visitors load Facebook iframe content even if it’s way down the page, after you […]

Previously on “Deep Note via WebAudio”: intro play a sound 2.1. boots and cats loop and change pitch multiple sounds nodes In part 4 we figured out how to play all 30 sounds of the Deep Note at the same time. The problem is that’s way too loud. Depending on the browser and speakers you […]

Previously on “Deep Note via WebAudio”: intro play a sound 2.1. boots and cats loop and change pitch multiple sounds Nodes WebAudio makes a heavy use of the concept of nodes. A node is something that does a thing (I know, very helpful), for example makes noise or manipulates sound somehow. Then you connect the […]

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 […]

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. […]

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 […]

(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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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. […]

Maybe you’re an attacker who sneaked in a little JavaScript to an unsuspecting site and would like to, well, sneak. Or maybe you want to know what exactly all these third-party analytics scripts are “calling home”. Or maybe just for fun – wouldn’t it be cool to intercept and log all requests made with new […]