Modern CSS superpowers
Modern CSS is incredible. It has come so far in the last 10 years and the toolbox has something I can reach for for nearly every tricky situation I come across these days. It’s a breath of fresh not having to think about hacky work-arounds. Here’s a list of features I think are critical when […]
Keeping up in web development
The lh unit in CSS something that I originally read about a couple years ago, and at the time thought ‘I don’t see how that would be useful’. Earlier this year I had a UI problem to solve with alignment, and the lh was the perfect answer. I do this all the time, it’s not […]
Interesting finds on the new ABC News website
This week the Australian broadcaster ABC released the new branding for their News broadcast graphics and News website. Whenever a site I’m familliar gets updated, the first thing I do is inspect it with the browser dev tools to see what technology and techniques they have used. I thought I’d write down some of the […]
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?