Align icons vertically to the center of the first line of text
I ran into an issue while implementing customisable text sizes into a UI. I had a Callout component which consists of a box containing an icon and a block of text – a layout similar to this: This component was built a few years ago and designed so the icon perfectly centered on the first […]
Bringing life back to old Flash content
When I started this blog nearly 15 years ago, Flash was at its peak and much of the content on this blog was related to Flash. Since the Flash player no longer exists, a lot of content had either been lost or old posts completely busted. There was even still some video embeds using old […]
Dynamic transparent color based on text color
Here is a small CSS snippet to calculate a transparent version of the current text color. This is useful in a themeable component system where semi-transparent elements like dividers, icons or backgrounds need to adapt to the surrounding text color. We can use the new color-mix function, which is now supported in all browsers, along […]
New blog design, again
I posted recently about an updated blog design, the first in 8 years. And now I’m doing another post about another redesign. My original intention was to build a front end in React+Remix and use WordPress headlessly as the backend. I ran into a few issues with this approach and it was going to be […]
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 […]
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.
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?
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 […]
Automatic typography substitution
After reading the series of Death to Typewriters articles on Meduim, I decided to have a go at implementing their automatic character substition rules in JavaScript. Following the guide provided at Death to Typewriters: Automatic replacement and clean-up, I created a simple function that can be called as you type, or when text is pasted, […]
New website for Nemen Visual
I have just launched a new website for Nemen Visual. The new site is a big departure from the old site which I created over 3 years ago. I took the redesign as an opportunity to explore some new techniques and modernise it a bit.