Styling the Navigation: Declarative Route and Navigation Matching in CSS – Bram.us
I really, really, really like this proposal! This would absolutely turbo-charge cross-document view transitions with nary a line of JavaScript in sight.
I really, really, really like this proposal! This would absolutely turbo-charge cross-document view transitions with nary a line of JavaScript in sight.
I really like the thinking that goes into this approach. It seems so counter-intuitive at first, but there’s no arguing with the snappy resilient results.
Turns out, if you have a website and you think of the browser as a way to navigate documents — rather than a runtime to execute arbitrary code and fetch, compile, and present them — things can be a lot simpler than our tools often prime us to make them.
The conference circuit is in a slump these days. That won’t change as long as people don’t buy tickets. And a good conference circuit is typically something that you start to miss only when it’s too late.
Patricia Lockwood’s No One Is Talking About This knocked me for six when I read it back in 2022:
It’s like a slow-building sucker punch.
Like my other favourite book of that year—A Ghost In The Throat by Doireann Ní Ghríofa—it’s hard to classify. I think it’s autofiction. Not quite autobiography. Not quite fiction.
Will There Ever Be Another You is also autofiction. I think. It might also be poetry (which shouldn’t be surprising as Patricia Lockwood is a poet after all).
I can’t say that this one had the same emotional impact of No One Is Talking About This for me but then again, very little could.
The writing feels very impressionistic, with each chapter trying on a different mode. It’s kinda Joycean …if James Joyce was stuck indoors during a global pandemic.
The narrative—such as it is—revolves around The Situation from 2020 onwards. That was a surreal bizarre time so it makes sense that this is a surreal bizarre book.
I think I liked it. I can’t quite tell. I just let the language wash over me.
When I was talking about monitoring web performance yesterday, I linked to the CrUX data for The Session.
CrUX is a contraction of Chrome User Experience Report. CrUX just sounds better than CEAR.
It’s data gathered from actual Chrome users worldwide. It can be handy as part of a balanced performance-monitoring diet, but it’s always worth remembering that it only shows a subset of your users; those on Chrome.
The actual CrUX data is imprisoned in some hellish Google interface so some kindly people have put more humane interfaces on it. I like Calibre’s CrUX tool as well as Treo’s.
What’s nice is that you can look at the numbers for any reasonably popular website, not just your own. Lest I get too smug about the performance metrics for The Session, I can compare them to the numbers for WikiPedia or the BBC. Both of those sites are made by people who prioritise speed, and it shows.
If you scroll down to the numbers on navigation types, you’ll see something interesting. Across the board, whether it’s The Session, Wikipedia, or the BBC, the BFcache—back/forward cache—is used around 16% to 17% of the time. This is when users use the back button (or forward button).
Unless you do something to stop them, browsers will make sure that those navigations are super speedy. You might inadvertently be sabotaging the BFcache if you’re sending a Cache-Control: no-store header or if you’re using an unload event handler in JavaScript.
I guess it’s unsurprising the BFcache numbers are relatively consistent across three different websites. People are people, whatever website they’re browsing.
Where it gets interesting is in the differences. Take a look at pre-rendering. It’s 4% for the BBC and just 0.4% for Wikipedia. But on The Session it’s a whopping 35%!
That’s because I’m using speculation rules. They’re quite straightforward to implement and they pair beautifully with full-page view transitions for a slick, speedy user experience.
It doesn’t look like WikiPedia or the BBC are using speculation rules at all, which kind of surprises me.
Then again, because they’re a hidden technology I can understand why they’d slip through the cracks.
On any web project, I think it’s worth having a checklist of The Invisibles—things that aren’t displayed directly in the browser, but that can make a big difference to the user experience.
Some examples:
meta elements in the head of documents so they “unroll” nicely when the link is shared.Speculation-Rules header that points to a JSON file.lang attribute on the body of every page.If you’ve got a checklist like that in place, you can at least ask “Whose job is this?” All too often, these things are missing because there’s no clarity on whose responsible for them. They’re sorta back-end and sorta front-end.
Why single-page apps are just not worth it:
Here’s the problem: your team almost certainly doesn’t have what it takes to out-engineer the browser. The browser will continuously improve the experience of plain HTML, at no cost to you, using a rendering engine that is orders of magnitude more efficient than JavaScript.
Meanwhile, the browser marches on, improving the UX of every website that uses basic HTML semantics. For instance: browsers often don’t repaint full pages anymore.
It’s official. No matter how many annoying cookie consent banners you slap on a website, real-time bidding for behavioural adverts is illegal in Europe.
And before you go crying about advertising-supported businesses, this only applies to behavioural advertising, not contextual advertising …which works better anyway.
Here’s some code to show the distance to the nearest airports on a map.
Here’s a modified version that shows the distance to the nearest Gregg’s. The hub-and-spoke visualisation overlaid on the map changes as you pan around, making it look like a spider bestriding the landscape.
Jonty’s version shows the distance to the nearest Pret a Manger.
I got nerdsniped by someone saying:
@adactio This would be cool for sessions 😉
He’s right, dammit! So here you go:
Now you can see how far you are from the nearest traditional Irish music sessions.
It’s using data from the weekly data dumps from thesession.org—I added a GeoJSON file in there.
Pure silliness, but it does make me wonder what kind of actually good data visualisations could be made with all this scrumptious data.
Overall, consistency, user control, and actual UX innovation are in decline. Everything is converging on TikTok—which is basically TV with infinite channels. You don’t control anything except the channel switch. It’s like Carcinisation, a form of convergent evolution where unrelated crustaceans all evolve into something vaguely crab-shaped.
My favourite bit of the archive on this site is the link that says “on this day”. It’s of no interest to anyone except me, but I love going through this little time tunnel.
Using that link this month gives me a flashback to March five years ago when The Situation was unfolding.
I remember the build-up at the end of February. We were in Galway for a birthday weekend getaway. One morning in the hotel I saw the papers were running a story that seemed so Irish to me: because of this emerging virus, people were no longer to give the “sign of peace” at mass (that’s the bit where you awkwardly shake hands with the people around you). I chuckled. Nervously.
Then we were leaving Ireland, in the taxi to the airport in Dublin the radio was on. A medical professional was urging the cancellation of the St. Patrick’s Day parade because a grand total of 2 or 3 people in the country had this virus. The DJ reacted with incredulity. It sounded like a pretty far-fetched idea to me too, because St. Patrick’s Day was just over two weeks away.
The St. Patrick’s Day parade was cancelled.
Throughout The Situation I was keeping track of things in Ireland. It was like seeing an A/B test unfolding. Everything that England was doing wrong, Ireland was doing the opposite. It wasn’t quite New Zealand, but they put scientists front and centre of their decision-making precision. Whereas here, policy was driven by wishful thinking.
I was writing about it all here on my website. I also started recording a tune every day for 200 days. Here’s the first one. See how fresh-faced I am? I decided to stop shaving during lockdown. After six weeks, I looked like this.
But to really recall what that time was like, I recommend reading Jessica’s account of 2020. The first entry is called A Journal of the Plague Week and it was published five years ago. The final entry was A Journal of the Plague Week 52 a year later.
And by LLMS I mean: (L)ots of (L)ittle ht(M)l page(S).
I really like this approach: using separate pages instead of in-page interactions. I remember Simon talking about how great this works, and that was a few years back, before we had view transitions.
I build separate, small HTML pages for each “interaction” I want, then I let CSS transitions take over and I get something that feels better than its JS counterpart for way less work.
This is one way of putting things into perspective.
A ban on tracking-based personalised advertising will provide an incentive to reinforce sustainable alternative models and, in fact, will be a condition for making them viable. The advertising industry already has sustainable, proven concepts for effective online advertising that do not require targeted tracking and personalisation (e.g. contextual advertising).
The same small dataset visualised in a hundred different ways, with notes on the strengths and weaknesses of each one.
Contextual advertising works. Targeted advertising? Who knows!
Let’s see all that proof that 400+ requests for thirsty ass always-running JavaScript is just what we have to do to make advertising good.
This is disgusting, if unsurprising: Google aren’t going to deprecate third-party cookies after all.
Make no mistake, Chrome is not a user agent. It is an agent for the behavioural advertising industry.
Back when South by Southwest wasn’t terrible, there used to be an annual panel called Browser Wars populated with representatives from the main browser vendors (except for Apple, obviously, who would never venture onto a stage outside of their own events).
I remember getting into a heated debate with the panelists during the 2010 edition. I was mad about web fonts.
Just to set the scene, web fonts didn’t exist back in 2010. That’s what I was mad about.
There was no technical reason why we couldn’t have web fonts. The reason why we didn’t get web fonts for years and years was because browser makers were concerned about piracy and type foundries.
That’s nice and all, but as I said during that panel, I don’t recall any such concerns being raised for photographers when the img element was shipped. Neither was the original text-only web held back by the legimate fear by writers of plagiarism.
My point was not that these concerns weren’t important, but that it wasn’t the job of web browsers to shore up existing business models. To use standards-speak, these concerns are orthogonal.
I’m reminded of this when I see browser makers shoring up the business of behavioural advertising.
I subscribe to the RSS feed of updates to Chrome. Not all of it is necessarily interesting to me, but all of it is supposedly aimed at developers. And yet, in amongst the posts about APIs and features, there’ll be something about the Orwellianly-titled “privacy sandbox”.
This is only of interest to one specific industry: behavioural online advertising driven by surveillance and tracking. I don’t see any similar efforts being made for teachers, cooks, architects, doctors or lawyers.
It’s a ludicrous situation that I put down to the fact that Google, the company that makes Chrome, is also the company that makes its money from targeted advertising.
But then Mozilla started with the same shit.
Now, it’s one thing to roll out a new so-called “feature” to benefit behavioural advertising. It’s quite another to make it enabled by default. That’s a piece of deceptive design that has no place in Firefox. Defaults matter. Browser makers know this. It’s no accident that this “feature” was enabled by default.
This disgusts me.
It disgusts me all the more that it’s all for nothing. Notice that I’ve repeatly referred to behavioural advertising. That’s the kind that relies on tracking and surveillance to work.
There is another kind of advertising. Contextual advertising is when you show an advertisement related to the content of the page the user is currently on. The advertiser doesn’t need to know anything about the user, just the topic of the page.
Conventional wisdom has it that behavioural advertising is much more effective than contextual advertising. After all, why would there be such a huge industry built on tracking and surveillance if it didn’t work? See, for example, this footnote by John Gruber:
So if contextual ads generate, say, one-tenth the revenue of targeted ads, Meta could show 10 times as many ads to users who opt out of targeting. I don’t think 10× is an outlandish multiplier there — given how remarkably profitable Meta’s advertising business is, it might even need to be higher than that.
Seems obvious, right?
But the idea that behavioural advertising works better than contextual advertising has no basis in reality.
If you think you know otherwise, Jon Bradshaw would like to hear from you:
Bradshaw challenges industry to provide proof that data-driven targeting actually makes advertising more effective – or in fact makes it worse. He’s spoiling for a debate – and has three deep, recent studies that show: broad reach beats targeting for incremental growth; that the cost of targeting outweighs the return; and that second and third party data does not outperform a random sample. First party data does beat the random sample – but contextual ads massively outperform even first party data. And they are much, much cheaper. Now, says Bradshaw, let’s see some counter-evidence from those making a killing.
If targeted advertising is going to get preferential treatment from browser makers, I too would like to see some evidence that it actually works.
Further reading:
Here’s a nifty demo of popover but it’s not for what we’d traditionally consider a modal dialog.
As designers creating images to communicate complex ideas, we rationalize our processes, we bring objectivity to our craft, we want our clients to think that our decisions are based on reasoning. However, we should also defend our intuitions, our subjectivity. We should also defend pursuing beauty as it is one of our most powerful tools.