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 😁

Sorry, your browser doesn't support embedded videos.

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!

A wonderful overview of why progressive enhancement and inclusive design go hand-in-hand, and why both are still necessary and deeply useful techniques for modern web development. I particularly liked Matthias' breakdown of why design tools should provide the ability to build/prototype designs progressively as well, so that designers can more easily understand how their work will actually end up deployed:

Because in order to practice progressive enhancement well, every member of the team has to be able to make well-informed decisions. If a designer never sees a design in its most basic form, how can she possibly improve this state of the system?

Dave has been running Netlify Analytics (server-side) and Fathom (client-side) for a few years, and the results are in: data integrity is hard. They offer a solid overview of why neither dataset should be trusted, but why neither is necessarily wrong, either. Still, the big takeaway for me is an old one: do not trust data blindly, and if your data is only coming from one source (and therefore cannot be verified independently), trust it even less 😉

On the differences between the datasets:

The data tells me I get somewhere between 12k and 26k visitors to my site who open anywhere between 18k and 333k pages.

On data integrity (or lack thereof):

My trust in analytics data is at an all-time low. Browser-level privacy improvements, ad blockers, and bot traffic have obliterated the data integrity.

On the perils of basing business decisions on data alone:

If I, or some hypothetical manager, put too much stock into these metrics I could see it causing a firestorm of reprioritization based on bot traffic. We’d be chasing the tail of a health check bot somewhere in Germany.

On what to do about it (and a nice use of the concept of a "sage"):

If your goal is to grow your product, you need a mixture of research (academic and applied), user tests, A/B tests, analytics, performance audits, accessibility audits, and a plethora of other considerations. Even if you have all those processes in place, I still think you need a human — a sage — who can read the tea leaves and interpret the data in a way that the business understands.

A very useful package for getting around the otherwise convoluted steps needed to upgrade npm on Windows. Just open up a PowerShell instance as Admin and use the following three commands (and only the last one if you need to do this again):

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install --global --production npm-windows-upgrade
npm-windows-upgrade

Simple and utterly painless 👏

Having spent the day affixing all manner of things to our walls, I figured it might be worth jotting down some tips and hard-learned lessons:

• Be careful when measuring with a tape measure; it's best to measure from the 10cm line and then just subtract the difference, as the end isn't always that accurate (or better yet, buy a proper ruler!);
• It's fine to tap a wall plug into a hole as much as you need to make the screw fit, particularly in plaster (screws don't seem to grip plaster too well, so the last bit isn't really that important);
• A reversed drill bit or arbitrary steel rod are useful (plus a hammer) for the above tapping;
• Without fail, our wall plugs ask for holes 1mm too large. If it says 7mm, use a 6mm drill bit; if it says 10mm, use 9mm, etc.
• Screw thickness does more for strength than length; length helps it grip more, though, and a combination of both is always preferable;
• If a screw is twisting at the end of insertion, it probably means the wall plug is too small; try the next size up;
• Screw holes being too long isn't much of an issue, really.
  

Probably nothing too spectacularly novel here, but potentially useful nonetheless.

I use emoji quite a lot on this site, which means I'm already aware of some of the more unusual browser/OS quirks. Don't ever use flag emoji (except pirate 🏴‍☠️) because Microsoft refuses to weigh in politically on the fact that Taiwan is a legitimate, autonomous country (there, see, is it really that hard?), avoid anything that isn't at least 2-3 releases old, and use an emoji font set for the very oldest glyphs, like 😊, if you really don't want them to appear as 2D, black and white equivalents.

Nolan digs a little deeper, providing some useful insight into extra quirks (Chrome on Linux doesn't deal with emoji well at all; "emoji" actually includes a lot of graphical representations of non-emoticon glyphs, like numbers and punctuation, so don't set emoji fonts for text blocks; etc.) and some pointers on how to improve cross-browser support.

At a time when web browsers have gained a staggering array of new capabilities – including Bluetooth, USB, and access to the filesystem – it’s still a struggle to render a smiley face. It feels a bit odd to argue in 2022 that “the web should have emoji support,” and yet here I stand, cap in hand, making my case

On the emoji characters you don't think about:

As it turns out, characters like the asterisk (*), octothorpe (#), trademark (™), and even the numbers 0-9 are technically emoji.

On how to deal with emoji:

Well, first you need a way to detect broken emoji. This is actually much harder than it sounds, and basically boils down to rendering the emoji to a <canvas>, testing that it has an actual color, and also testing that it doesn’t render as two separate characters.

On Mozilla's hidden Firefox trick:

Interestingly, this problem is actually solvable in Firefox, since they ship their own “Mozilla Twemoji” font

And Nolan's own emoji font set:

.emoji-fonts {
   font-family: "Twemoji Mozilla",
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji",
                "EmojiOne Color",
                "Android Emoji",
                sans-serif;
}