Blog

Screenshot a node with JavaScript

One of my kids wanted a way to record their sports predictions and their notes app system was getting unwieldy, so I built a website for them. It’s on a Netlify subdomain with no search engine indexing as it’s a personal record, not a way to show off how good the predictions are, and they have no interest in monetising it. That means they’d rather not share pages with other fans, but screenshots. If it’s a big event with multiple predictions it extends beyond the viewport, so a regular OS screenshot won’t work.

February reading

For the second month in a row I’ve surprised myself and read 2 (two) books. This time one was non-fiction: Engineering Management for the Rest of Us by Sarah Drasner. For my sins I’m a manager now and, having been a fan of Sarah’s work and writing for years I wanted to read it.

Reading

I’ve finished two books this year so far, although I started one of them in December. It was The Táin: From the Irish Epic Táin Bó Cuailnge translated by Thomas Kinsella. Táin Bó Cuailnge translates as the cattle raid of Cooley.

UI

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.