Javascript

Cancellable async generators

I thought this was one of the more interesting things I’ve written recently. It seems pretty simple from the small amount of code but it combines a couple things that I rarely use – Generator functions and Abort Controllers (outside of Fetch). This is a cancellable async generator function that can be used to run […]

April 17, 2025

React and CSS View Transitions

If you want to use the web platform API for View Transtions in React there is an additional step you need to take in order to trigger the transition. First make sure your elements have a view transition name, this can be done dynamically if you have a list of elements: Or in CSS: The […]

January 8, 2025

Pragmatic Drag and Drop, the ultimate drag and drop library?

Ever since I started using React I have used react-dnd for any drag and drop interactions. It is super flexible and allows for handling files and drag across windows since it used the browser’s drag and drop API. For some reason, I never really clicked with the API and for me it never felt easy […]

May 10, 2024

Building a wide-gamut colour picker

Now that browsers support wide-colour gamuts with P3, I have been wanting to build a colour picker that could select colours from outside the standard sRGB gamut. As the feature became more broadly available in browsers I’d seen a few examples popup from various people such as Gradient.style, the ColorJS.io picker demo, and OKLCH.com. However, […]

December 14, 2023

Spray paint stencils

I wanted to do a little update on my spray paint stencil experiments using HTML and JavaScript. While it’s not a recent thing, I realised that I had never done a update with the last painting app I built. It was a couple years ago that I built Graffiti Monster, an experimental drawing app which […]

December 6, 2023

When arrays and booleans become a problem

There are two data types that I quite often run into issues with down the track when fixing bugs of implementing new features – Arrays and booleans.

November 29, 2023

How the latest version of Chrome broke my gradient editor

I recently discovered a strange issue where inserting colour stops in gradients with my colour picker was not inserting the correct color. It was slightly off, a bit darker than what was expected. I knew Chrome has recently released support for new colour spaces, could this be causing the problem? Turns out, yes. The same […]

June 25, 2023

Thoughts on the React rollercoaster

The longer you work in the web field the more you notice the pendulum swinging from one extreme to the other. Is this just the latest swing of the pendulum from the SPA to SSR extremes?

March 23, 2023

Getting headless Chrome to run on AWS Lambda Node

Today I needed to update a couple Lambda functions from the Node 8 runtime to use the Node 10.x runtime. These functions required headless Chrome because they are used to take screenshots. Unfortunately, moving from the Node 8 runtime to 10x runtime is not a simple as it sounds, because AWS have decided to change […]

October 29, 2019

Saving a Canvas element as an image

Here’s a little tip to allow your users download the contents of a canvas element as an image, without the need for a server. We can do this by using an Anchor tag with a download attribute. Start with creating <canvas> and <a> tags: The <a> tag’s download attribute can be set to a file […]

October 23, 2019