Gradient text gaps with CSS
I was reading an article recently that had some really nice graphic design examples. One piece that stood out was a poster that had a continuous gradient that filled the gaps between words in a block a text. I wondered if it could be achieved dynamically in CSS. Below is my result. Note that this […]
December 1, 2023
Blur gradient with CSS
The other day I came across a design on Layers that used a blur fade over an image as a backdrop for text in a card. It reminded me of a similar thing I attempted a couple years ago in CSS but wasn’t able to get working. I decided to have another go at it […]
November 30, 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
First blog redesign in 8 years, sort of
If you a reading this on purplesquirrels.com.au then you might not see any difference. If you are on benfoster.com.au then you will be seeing the new site. It’s hard to believe that the last redesign of my blog was all the way back in 2014. I made a few tweaks back in 2019, but for […]
November 28, 2023
Using SVG paths with CSS clip-path
If you have ever tried to use an SVG path for a CSS clip-path you would have likely ran into the issue where the SVG path doesn’t correctly scale and fill the DOM element to clip it.
July 4, 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
Getting WebSockets working with Node, Socket.io and Elastic Beanstalk
This is something that took me nearly a year to get working. Not full time obviously, but every now and then I would make another attempt at getting it working after the trauma of the previous attempt had faded. None of the examples that people had provided worked for me, and some were out dated […]
September 27, 2017