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