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

Read post

More posts

All CSS JavaScript Web development User interface Motion

Overfit and Eigensolutions

Overfitting is a term used to describe building products or features that are far too specifc to a use case and don’t allow flexibilty for new or unexpected use cases. It doesn’t apply to all types of apps, but it’s particularly important for creative tools. I have been building creative tools for over 10 years […]

July 10, 2024

My favourite sessions from Config 2024

Here is a selection of my favourite sessions from Figma’s Config 2024. Go check them out! A look inside teenage engineering An inspiring interview with Jesper Kouthoofd, the CEO of teenage engineering and Chief Design Officer of Rabbit. Lost Found in the details I’m a big fan of Jessica Hische, and this talk was fantastic […]

July 8, 2024

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

May 10, 2024

Simple tips to improve your UI design

The following are some tips I have found to be most impactful when either designing new, or cleaning up and modernising a user interface. These aren’t hard rules, I find that what ‘feels right’ can often better than sticking to rigid rules or systems, but these are a good guide. 1. Reduce borders The more […]

March 13, 2024

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

January 25, 2024

Simple, yet powerful

Simple, yet powerful. This is one of my guiding principles when designing and building a user-interface. Your app should be simple enough that your users can get started easily without much friction, but provide the ability for power-users to thrive. Simple Powerful You will need to find your balance of simple/powerful to empower all your […]

January 8, 2024

Come for the features, stay for the details

I highly recommend watching this talk from Rasmus Andsersson. One quote that stood out to me that I think rings very true is “your users come for the features, but stay for the details”. You can have all the features in the world, but if they aren’t well thought out, lack attention to detail or […]

December 24, 2023

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

December 21, 2023

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

December 19, 2023