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