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, the picker demo, and 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

Capturing an image from your webcam using JavaScript

This post is a bit of an update on one of my popular posts from a few years ago – Webcam to Canvas or data URI with HTML5 and Javascript I thought I’d do an updated post on how to get an image from webcam using current web APIs. This time we’ll be using the […]

April 8, 2019

Processing an array in batches using generators

Generators in JavaScript are something that looks useful on the surface but I have really never found much use for them in my work. However one such use case I came across was processing a large mount of data in an array in batches. I needed to process and push data to a DynamoDB table, […]

April 2, 2019