A surprisingly detailed identification guide to the snakes of South (and Southern) Africa, including diagnostics, multiple photos, species ranges, and (usefully) relative danger to humans.

An interesting discussion from the peeps on Cortex on the mindset it takes to achieve big goals (around the 50-minute mark). Lots of people talk about "writing their novel" or "fixing x political issue", but are they actually serious about it? How are they spending their time? Are they working on the things that provide the biggest impact for the least input; the kind of stuff that might actually move the dial? Or are they working on the frivolous, busy work around the edge. Are they writing short stories and trying to get them published? Or are they attending a bunch of creative writing seminars or English lit classes?

Are you serious? Like, really serious? Or are you just doing things that make it look like you're serious? That feel like progress. (In other words, are you procrastinating with secondary objectives). Feels like a useful mindset to just check that the thing you're working on aims you at your goals or whether it just distracts from the hard work.

Are these people actually serious about trying to achieve objective X?... This group looks like they were trying to achieve objective X... but are the steps they're taking the steps you would do if you were serious and making a world where X was possible?

I was not expecting to find browsing the web with a keyboard so damn tricky on macOS, but here we are 😂 The tl;dr of the situation is:

• Enable "Use keyboard navigation to move focus between controls" in System Preferences --> Keyboard --> Shortcuts;
• In Safari, turn on "Press tab to highlight each item on a webpage" in Preferences --> Advanced;
• In Chrome, turn on "Pressing Tab on a webpage highlights links..." in Settings --> Appearance;
• In Firefox, open a new tab and enter about:config into the URL bar; create a new "integer" value; give it the name accessibility.tabfocus; and set the value to 7 (who knows what black magic that actually does, but it works 😅)

It's best to enable everything and then restart each program. I didn't need to restart the Mac itself, but it's always worth a try too, I guess.

I often find myself a little unsure of when to use a number input, but Kilian has put together a detailed (yet brief) overview of exactly when it is (and isn't) appropriate. The tl;dr is beautifully summed up as:

If you're dealing with an identifier that just happens to use digits, or a number that represents something completely different once you increment or decrement it by one then you want a regular old text input, not a number input.

That means things like credit cards, passport or ID numbers, or 2FA codes are better to be used with text inputs. Still want the nice numeric keyword on operating systems that support it? Use inputmode=numeric instead.

Of course, there are still times that number inputs are valid. As Kilian mentions, one key use case is for improved validation and refinement of options within numeric ranges and with specific steps:

Secondly they let you use built-in validation logic like input.checkValidity(), and that will make sure that the value is indeed numerical, within the given bounds, and matching to any step you specified.

A very interesting rundown of some common performance checks and techniques that Ben went through to boost their lighthouse score from <50 to >95! I was particularly interested that font subsetting didn't have a huge impact on the score, despite reducing the download size by 44%, but that's still a significant saving and well worth it in my book. Equally, the impact of the native YouTube embed was slightly terrifying, and I'll definitely consider lite-youtube-embed for any future projects that need similar integration:

This move away from YouTube's proprietary embeds ended up being a huge lift for my performance, bringing my homepage's Lighthouse performance score from a poor 48 up to a respectable 81 out of 100. I'd heard just how devastating third-party scripts and trackers can be for a site's performance, and this change really hammered that home for me.

The idea of bringing a small slice of beaver fenland to the stereotypically prim, proper, and incredibly overly managed Chelsea Flower Show is a great one, and serious props to the team for not only managing it, but for doing it so damn well. This is a beautiful project with plenty of ideas that anyone with a garden can take inspiration from. I'm really glad to see that the team at Chelsea agreed, and congratulations to Rewilding Britain and partners on their deserved award.

A great (and niche) website that lets you look up the history of any given Last.fm account. For example, here's my stats page: theAdhocracy's Last.fm stats. There are lots of great data visualisations and graphs, but I'm a complete sucker for those "bar charts over time" sequences, so obviously that's my favourite 😁

Video description: top 25 artists are shown between May 2011 and May 2022, ranked by how many scrobbles they each have. Every second, time jumps forward around 3-6 months and the artists rearrange themselves. At the start, artists like Spose, Howard Shore, The Qemists, and The Cat Empire are at the top; by the end, Lazy Habits are way out ahead, with Watsky in second, MC Xander in third, and then close competition between Bonobo, Goldfish, The Offspring, Howard Shore, and The Cat Empire. The minimum number of scrobbles changes from 8 at the start (The Killers) to 329 at the end (Coco and the Butterfields), whilst the maximum goes from 151 to 1,223.

The Accessible Icon Project are an interesting group of designers and disability advocates that have developed an alternative, modernised take on the standard "disabled access" icon. The result is clean and modern, whilst still evoking a similar aesthetic as the original, but I particularly like their decision to make the person active, and acting under their own power. That's a really nice touch and shows how much thought and care (and community involvement) has gone into the design.

Their site has a great write-up on it as well, both about the history of the icon, the process behind the design, and some common FAQs around it. Most importantly, they directly address the issue that one specific accessibility tech (a wheelchair) has been chosen to fit the entire community, but I think their reasoning is well argued:

But consider the importance of a highly standardized and internationally
recognizable symbol. It guarantees that its use will signal the
availability of similar accommodations wherever it appears, and its
reliable color combination and scale make it easy to spot on a crowded
city street, or in an airport. Icons are standardized, 2D, and high
contrast for a reason: to make them readily visible to anyone, anywhere.
There’s power in that.

DPReview is one of my go-to sites for photography reviews or news, but every time I start thinking about a new camera I forget about their excellent hardware searching functionality. You can sort my camera type, sensor, resolution, brand, and then filter based on necessary functionality, letting you quickly find which cameras on the market actually meet your baseline needs. Then, you can pull up multiple cameras in a comparison view and compare functionality directly. Super useful!

An excellent overview from Josh of the pitfalls of using UI frameworks. I particularly enjoyed their focus on why developers often advocate for these tools, and how those needs are often misplaced. It's an even-handed appraisal, making a clear distinction between tools like Tailwind (which feel more like tooling than actual UI) and Bootstrap (a traditional framework), as well as pointing out where/when UI frameworks may still be useful.

On what Josh says when asked which UI framework to use:

I don’t use them, and I don’t think they should be used for most consumer-facing products. 😅

On how frameworks are often only properly understood by the teams that built them:

I remember hearing a designer say that only Google can make Material Design apps that look good. The Android App Store is full of third-party apps that use the same professionally-designed components but don’t look professional at all.

On why custom UI may take longer to get going with, but often leads to significant time savings in the long run:

Writing your own styles feels a bit to me like writing tests: it’s a bit slower at first, but that early effort pays off. In the long run, you’ll save a lot of time, energy, and frustration.

On the one reason that developers should reach for third-party components (but preferably unstyled ones, like those from Headless UI or Reach UI):

The web doesn’t have a very robust “standard library” when it comes to things like modals, dropdowns, and tooltips.

Nobody should be building a modal from scratch in the year 2022, but that doesn’t mean you need an enormous styles-included UI framework!

On the importance of developers learning about design:

Even if you’re not that interested in design, I think building a design intuition is a critical skill for front-end developers. Believe it or not, we’re constantly making design decisions in our work.

Developers seem to have invented a thousand different ways to avoid using HTML forms these days, which constantly makes me think we're all reinventing the wheel. Surely there's a simpler, more grounded way to capture form data that uses the foundations that HTML already provides us? Yep, there is: the FormData() API!

Bramus has done a great job of outlining the issue and solution in this post, which roughly boils down to this quote:

As FormData captures all the form’s key-value pairs, applying Progressive Enhancement on forms becomes pretty easy:

1. Build a regular HTML form that submits its data to somewhere
2. Make it visually interesting with CSS
3. Using JavaScript, hijack the form’s submit event and, instead, send its contents — captured through FormData — using fetch() to the defined endpoint.

They also touch on how to convert the form data to JSON and some other quick tricks. The whole experiment can be seen on CodePen.

A beautifully animated and incredibly well-scored short film about the K/T extinction, and the legacy it left. Incredibly, this turns out to be the final in a series of animated shorts, Dinosauria, which are currently all available as a playlist, and are all equally expertly crafted. 2022 truly is a new golden age of palaeoart!