UI stands for “user interface”. Designers create UIs, UI designer jobs are advertised, people say they “do UX/UI”. It’s thrown around like everyone knows exactly what it means, but I’m not so sure.

Preloading responsive images

tl;dr use an empty href attribute in responsive image preloads for the best results across all browsers, like so: <link rel="preload" href="" imagesrcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" imagesizes="100vw">.

does-not-prefer-color-scheme: dark but gets it anyway

Confession time: I really don’t like dark mode except in my text editor, and even then only if the weather’s not good enough to work outside. I’ve never activated dark mode on my phone but Android turns it on automatically when battery saver is on, which is fair enough.

Web Components and NPM

I’ve been using this article series to learn about web components for the first time this week, and I would highly recommend it. I’ve applied what I learned by creating a basic web component that counts down the days, hours, minutes and seconds to a specified date.

The next billion users

Very few ideas grid my gears as much as the way this one is presented (or misrepresented, take your pick). It’s a shitty excuse to get out of work you don’t like doing.

Not quite responsive in one line

Bryan Rieger delivered a presentation called Rethinking the Mobile Web in 2010, just a few months after the invention of responsive web design. One of the most repeated points of that talk is, “the absence of support for @media queries is in fact the first media query”.

Using CSS grid and flexbox together

I’ve noticed a bit of confusion about CSS layout with grid and flexbox. Some people seem to be thinking they are different tools for the same job, or that grid is a replacement for flexbox.

Getting more from git

This post is based on an internal workshop I delivered at a previous job, where we used a modified version of gitflow. This post will contain faint reflections of that strategy, and although I’d recommend reading up on gitflow it’s not necessary.

Skiplinks in Opera Mini

Usually when I build a navigation it is at the end of the source and a skiplink appears at the top of small viewports linking to it. I then enhance it using CSS and JavaScript so that most devices and browsers get something nicer—an off-canvas interaction perhaps.

Responsive images with WordPress Advanced Custom Fields

Advanced Custom Fields is an amazing (and free) WordPress plugin that turns it into a proper CMS and gives developers fine-grained control over how data entered by content administrators is handled and displayed. I love it.