Tags: spec

Here Come the Lionfish – James Bridle

A terrific article by James.

CSS wants to be a system - daverupert.com

CSS wants you to build a system with it. It wants styles to build up, not flatten down.

Truth!

Your CSS reset should be layered

This makes sense:

Wrap everything in your CSS reset with a @layer rule.

When you place any styles inside a layer, these styles automatically have lower priority compared to all unlayered styles on the page. Think of it like an !unimportant block. You don’t need to worry about specificity or order of stylesheets at all.

Help us choose the final syntax for Masonry in CSS | WebKit

I really like the way that the thinking here is tied back to Bert Bos’s original design principles for CSS.

This is a deep dive into the future of CSS layout—make a cup of tea and settle in for some good nerdiness!

After I wrote positively about the speculation rules API I got an email from David Cizek with some legitimate concerns. He said:

I think that this kind of feature is not good, because someone else (web publisher) decides that I (my connection, browser, device) have to do work that very often is not needed. All that blurred by blackbox algorithm in the browser.

That’s fair. My hope is that the user will indeed get more say, whether that’s at the level of the browser or the operating system. I’m thinking of a prefers-reduced-data setting, much like prefers-color-scheme or prefers-reduced-motion.

But this issue isn’t something new with speculation rules. We’ve already got service workers, which allow the site author to unilaterally declare that a bunch of pages should be downloaded.

I’m doing that for Resilient Web Design—when you visit the home page, a service worker downloads the whole site. I can justify that decision to myself because the entire site is still smaller in size than one article from Wired or the New York Times. But still, is it right that I get to make that call?

So I’m very much in favour of browsers acting as true user agents—doing what’s best for the user, even in situations where that conflicts with the wishes of a site owner.

Going back to speculation rules, David asked:

Do we really need this kind of (easily turned to evil) enhancement in the current state of (web) affairs?

That question could be asked of many web technologies.

There’s always going to be a tension with any powerful browser feature. The more power it provides, the more it can be abused. Animations, service workers, speculation rules—these are all things that can be used to improve websites or they can be abused to do things the user never asked for.

Or take the elephant in the room: JavaScript.

Right now, a site owner can link to a JavaScript file that’s tens of megabytes in size, and the browser has no alternative but to download it. I’d love it if users could specify a limit. I’d love it even more if browsers shipped with a default limit, especially if that limit is related to the device and network.

I don’t think speculation rules will be abused nearly as much as client-side JavaScript is already abused.

The deskilling of web dev is harming the product but, more importantly, it’s damaging our health – this is why burnout happens – Baldur Bjarnason

A depressing but accurate description of the economics of web development.

There’s a new addition to the latest version of Chrome called speculation rules. This already existed before with a different syntax, but the new version makes more sense to me.

Notice that I called this an addition, not a standard. This is not a web standard, though it may become one in the future. Or it may not. It may wither on the vine and disappear (like most things that come from Google).

The gist of it is that you give the browser one or more URLs that the user is likely to navigate to. The browser can then pre-fetch or even pre-render those links, making that navigation really snappy. It’s a replacement for the abandoned link rel="prerender".

Because this is a unilateral feature, I’m not keen on shipping the code to all browsers. The old version of the API required a script element with a type value of “speculationrules”. That doesn’t do any harm to browsers that don’t support it—it’s a progressive enhancement. But unlike other progressive enhancements, this isn’t something that will just start working in those other browsers one day. I mean, it might. But until this API is an actual web standard, there’s no guarantee.

That’s why I was pleased to see that the new version of the API allows you to use an external JSON file with your list of rules.

I say “rules”, but they’re really more like guidelines. The browser will make its own evaluation based on bandwidth, battery life, and other factors. This feature is more like srcset than source: you give the browser some options, but ultimately you can’t force it to do anything.

I’ve implemented this over on The Session. There’s a JSON file called speculationrules.js with the simplest of suggestions:

{
  "prerender": [{
    "where": {
        "href_matches": "/*"
    },
    "eagerness": "moderate"
  }]
}

The eagerness value of “moderate” says that any link can be pre-rendered if the user hovers over it for 200 milliseconds (the nuclear option would be to use a value of “immediate”).

I still need to point to that JSON file from my HTML. Usually this would be done with something like a link element, but for this particular API, I can send a response header instead:

Speculation-Rules: “/speculationrules.json"

I like that. The response header is being sent to every browser, regardless of whether they support speculation rules or not, but at least it’s just a few bytes. Those other browsers will ignore the header—they won’t download the JSON file.

Here’s the PHP I added to send that header:

header('Speculation-Rules: "/speculationrules.json"');

There’s one extra thing I had to do. The JSON file needs to be served with mime-type of “application/speculationrules+json”. Here’s how I set that up in the .conf file for The Session on Apache:

<IfModule mod_headers.c>
  <FilesMatch "speculationrules.json">
    Header set Content-type application/speculationrules+json
   </FilesMatch>
</IfModule>

A bit of a faff, that.

You can see it in action on The Session. Open up Chrome or Edge (same same but different), fire up the dev tools and keep the network tab open while you navigate around the site. Notice how hovering over a link will trigger a new network request. Clicking on that link will get you that page lickety-split.

Mind you, in the case of The Session, the navigations were already really fast—performance is a feature—so it’s hard to guage how much of a practical difference it makes in this case, but it still seems like a no-brainer to me: taking a few minutes to add this to your site is worth doing.

Oh, there’s one more thing to be aware of when you’re implementing speculation rules. You have the option of excluding URLs from being pre-fetched or pre-rendered. You might need to do this if you’ve got links for adding items to shopping carts, or logging the user out. But my advice would instead be: stop using GET requests for those actions!

Most of the examples given for unsafe speculative loading conditions are textbook cases of when not to use links. Links are for navigating. They’re indempotent. For everthing else, we’ve got forms.

An alternative proposal for CSS masonry  |  Blog  |  Chrome for Developers

Rachel responds to Jen’s recent post with the counter-argument; why masonry should be separate from grid.

I’m not entirely convinced. We heard performance issues as a reason why we could never have container queries or :has, but here we are. And the syntax for a separate masonry spec borrows so heavily from grid that it smells of redundancy.

Help us invent CSS Grid Level 3, aka “Masonry” layout | WebKit

This is a wonderful in-depth article by Jen, with lots of great demos.

She makes a very strong case for masonry layouts being part of the grid spec (I’m convinced!). If you have strong feelings one way or the other, get involved

Generated content is an invasive species in the online ecosystem – Tracy Durnell

This seems like a good analogy to me.

Pipe Dreams: The life and times of Yahoo Pipes

Yahoo PIpes was ahead of its time. Here’s a nostalgic retrospective by Glenn Fleishman.

Emily F. Gorcenski: How I Read 40 Books and Extinguished the World on Fire

I’ve found that there’s way more good people than bad. There’s way more people willing to help than willing to hurt. Some things are really scary but there’s way more people out there willing to guide us through the darkness than we think. The cynic in me wants to say that the “powers that be” want us to be endlessly doomscrolling and losing hope and snuffing out optimism. We shouldn’t give them what they want. There’s a lot of beauty in the world still within our grasp. We’re better when we’re poets, when we’re learners and listeners, when we’re builders and not breakers.

Get it shipped — building better relationships with Devs

This advice works both ways:

1. Collaboration
2. Communication
3. Respect

My week at the Belfast TradFest culminated in a cathedral.

Everyone who has been taking classes during the week made their way to Belfast cathedral for a communal finish. Every class played a short piece to round out their week of workshops.

The whole experience was quite lovely. At one point, I was unexepectedly moved to tears by the performance of the cello class (not a common instrument in Irish traditional music).

When I got home, I decided to send a message to Neil Martin who taught that class. It was just a quick line or two to tell him how special it was.

He responded, saying he found the whole experience of the closing concert very moving and powerful.

I was glad I sent that note of thanks.

Then, a day later, I received my own note of thanks. It wasn’t music-related. Someone I had met and chatted with at a conference last year told me that they had just watched the video of my talk, The State Of The Web. They were very moved by it. Then they took the time to send me an email to tell me. As you can imagine, I was really touched to be on the receiving end of that.

I resolved that I would do it more myself. Whether it’s a piece of music, writing, or anything else, I’m going to try to remember to pass on my appreciation more often.

That’s a good place to end, isn’t it? A nice heart-warming reminder that small acts of thoughtfulness can make a big difference to someone else’s well-being.

But there’s a corollary to that lesson. Acts of thoughtlessness will almost certainly make a very big difference to someone else’s well-being.

This is something I know in theory but struggle with in practice. I’ve experienced the regret of wishing I hadn’t acted so stupidly in my dealings with work colleagues, for example.

There’ll be some discussion happening on a topic that I might have strong feelings about, and I let those strong feelings take over my behaviour. Quite frankly, I act like a dickhead.

Sure, I can analyse it in hindsight and identify what causes this unintended behaviour, but that sounds an awful lot like excusing it. In the end, it doesn’t matter what my intentions were or what the circumstances were. It’s my actions that matter. More specifically, it’s the effect of my actions on other people that matter.

So, yeah, I am going to try to do more of those small thoughtful acts, like sending thank-you messages to people. But frankly, that’s a stretch goal. The shamefully low bar I first have to pass is to simply treat people with the respect they deserve. To paraphrase the Hypocratic oath: first, don’t be an asshole.

There’s an oft-quoted adage:

They may forget what you said, but they will never forget how you made them feel.

This is usually applied in the inspirational, positive sense: get out there and make people feel good! But it works equally well as a warning.

I tried watching a classic Western this weekend, How The West Was Won. I did not make it far. Let’s just say that in the first few minutes, the Spencer Tracy voiceover that accompanies the sweeping vistas sets out an attitude toward the indigenous population that would not fly today.

It’s one thing to be repulsed by a film from another era, but it’s even more uncomfortable to revisit the films from your own teenage years.

Tim Carmody has written about the real hero of Top Gun:

Iceman’s concern for Maverick and the safety of his fighter unit is totally understandable. He tries, however awkwardly, to discuss Goose’s death with Maverick. There’s no discussion of blame. And when they’re assigned to fly into combat together, Iceman briefly and discreetly raises the issue of Maverick’s fitness to fly with his superior officer and withdraws his concern once a decision is made.

I know someone who didn’t watch Ferris Bueller’s Day Off until they were well into adulthood. Their sympathies lay squarely with Dean Rooney.

And I think we can all agree in hindsight that Walter Peck was completely correct in his assessment of the dangers in Ghostbusters.

Oh, and The Karate Kid was the real bully.

This week, George wrote I’ve fallen out of love with Indiana Jones. Indy’s attitude of “it belongs in a museum” is the same worldview that got the Parthenon Marbles into the British Museum (instead of, y’know, the Parthenon where they belong).

Adrian Hon invites us to imagine what it would be like if the tables were turned. He wrote a short piece of speculative fiction called The Taking of Stonehenge:

We selected these archaeological sites based on their importance to our collective understanding of human and galactic history, and their immediate risk of irreparable harm from pollution, climate change, neglect, and looting. We are sympathetic to claims that preserving these sites in their “original” context is important, but our duty of care outweighs such emotional considerations.

Harnessing groupthink: fine-tuning CSS specifications | Clearleft

In order to thoroughly attend to every pertinent aspect of the spec, fantasai asked us each to read one sentence aloud to the group. At which point we were all asked whether we thought the sentence made sense, and to speak up if we didn’t understand any of it or if it wasn’t clear.

Rich documents the excellent and fascinating process used in a recent W3C workshop (though what he describes is the very opposite of groupthink, so don’t let the title mislead you):

I’d never come across the person-by-person, sentence-by-sentence approach before. I found it particularly effective as a way of engaging a group of people, ensuring collective understanding, and gathering structured feedback on a shared document.

Why we need CSS Speech - Tink - Léonie Watson

I was talking about this with Léonie just yesterday. I, for one, would love to have CSS speech support. You know who else would love it? Content designers!

In these days of voice interaction on every platform, there is a growing expectation that it should be possible to design that experience just like we can the visual experience. In the same way an organisation chooses a logo and colour palette for its website, it stands to reason that they may also choose a particular voice that represents their brand.

It’s wild that there’s no way to do this on the web.

The Dangerous Populist Science of Yuval Noah Harari ❧ Current Affairs

We have been seduced by Harari because of the power not of his truth or scholarship but of his storytelling. As a scientist, I know how difficult it is to spin complex issues into appealing and accurate storytelling. I also know when science is being sacrificed to sensationalism. Yuval Harari is what I call a “science populist.” (Canadian clinical psychologist and YouTube guru Jordan Peterson is another example.) Science populists are gifted storytellers who weave sensationalist yarns around scientific “facts” in simple, emotionally persuasive language. Their narratives are largely scrubbed clean of nuance or doubt, giving them a false air of authority—and making their message even more convincing. Like their political counterparts, science populists are sources of misinformation. They promote false crises, while presenting themselves as having the answers. They understand the seduction of a story well told—relentlessly seeking to expand their audience—never mind that the underlying science is warped in the pursuit of fame and influence.

This tracks.

Harari has seduced us with his storytelling, but a close look at his record shows that he sacrifices science to sensationalism, often makes grave factual errors, and portrays what should be speculative as certain.

Here’s what I didn’t know about :where() - Manuel Matuzović

I feel like I’m starting to understand how the CSS :where pseudo-class works and why it’s useful. The cogs are slowly turning in my brain.

Back in April I gave a talk at An Event Apart Spring Summit. The talk was called The State Of The Web, and I’ve published the transcript. I’ve also published the video.

I put a lot of work into this talk and I think it paid off. I wrote about preparing the talk. I also wrote about recording it. I also published links related to the talk. It was an intense process, but a rewarding one.

I almost called the talk The Overview Effect. My main goal with the talk was to instil a sense of perspective. Hence the references to the famous Earthrise photograph.

On the one hand, I wanted the audience to grasp just how far the web has come. So the first half of the talk is a bit of a trip down memory lane, with a constant return to just how much we can accomplish in browsers today. It’s all very positive and upbeat.

Then I twist the knife. Having shown just how far we’ve progressed technically, I switch gears the moment I say:

The biggest challenges facing the World Wide Web today are not technical challenges.

Then I dive into those challenges, as I see them. It turns out that technical challenges would be preferable to the seemingly intractable problems of today’s web.

I almost wish I could’ve flipped the order: talk about the negative stuff first but then finish with the positive. I worry that the talk could be a bit of a downer. Still, I tried to finish on an optimistic note.

I won’t spoil it any more for you. Watch the video or have a read of The State Of The Web.