Tags: frontend

I first spoke at CSS Day in Amsterdam back in 2016. Well, technically it was the HTML Day preceding CSS Day, when I talked about the A element. I spoke at CSS Day again last year, when I gave a presentation about alternative histories of styling.

One of the advantages to having spoken at the event in the past is that I’m offered a complementary ticket to the event every year. That’s an offer I’ve made the most of.

I’ve just returned from the latest iteration of CSS Day. It was, as always, excellent. I’ve said it before and I’ll say it again, but I just love the way that this event treats CSS with the respect it deserves. I always attend thinking “I know CSS”, but I always leave thinking “I learned a lot about CSS!”

The past few years have been incredibly exciting for the language. We’ve been handed feature after feature, including capabilities we were told just weren’t possible: container queries; :has; cascade layers; view transitions!

As Paul points out in his write-up, there’s been a shift in how these features feel too. In the past, the feeling was “there’s some great stuff arriving and it’ll be so cool once we’ve got browser support.” Now the feeling is finally catching up to the reality: these features are here now. If browser support for an exciting feature is still an issue, wait a few weeks.

Mind you, as Paul also points out, maybe that’s down to the decreased diversity in rendering engines. If a feature ships in Chromium, Webkit, and Gecko, then it’s universally supported. On the one hand, that’s great for developers. But on the other hand, it’s not ideal for the ecosystem of the web.

Anyway, as expected, there was a ton of mind-blowing stuff at CSS Day 2023. Most of the talks were deep dives into specific features. Those deep dives were bookended by big-picture opening and closing talks.

Manuel closed out the show by talking about he’s changing the way he writes and thinks about CSS. I think that’s a harbinger of what’s to come in the next year or so. We’ve had this wonderful burst of powerful new features over the past couple of years; I think what we’ll see next is consolidation. Understanding how these separate pieces play well together is going to be very powerful.

Heck, just exploring all the possibilities of custom properties and :has could be revolutionary. When you add in the architectural implications of cascade layers and container queries, it feels like a whole new paradigm waiting to happen.

That was the vibe of Una’s opening talk too. It was a whistle-stop tour of all the amazing features that have already landed, and some that will be with us very soon.

But Una also highlighted the heartbreaking disparity between the brilliant reality of CSS in browsers today versus how the language is perceived.

Look at almost any job posting for front-end development and you’ll see that CSS still isn’t valued as its own skill. Never mind that you could specialise in a subset of CSS—layout, animation, architecture—and provide 10× value to an organisation, the recruiters are going to play it safe and ask you if you know React.

Rachel Nabors and I were chatting about this gap between the real and perceived value of modern CSS. She astutely pointed out that CSS is kind of a victim of its own resilience. The way you wrote CSS ten years ago still works, and will continue to work. That’s by design. Yes, you can write much better, more resilient CSS today, but if those qualities aren’t valued by an organisation, then you’re casting your pearls before swine.

That said, it’s also true that the JavaScript you wrote ten years ago also continues to work today and will continue to work in the future. So why is it that devs seem downright eager to try the latest JavaScript hotness but are reluctant to use CSS that’s been stable for years?

Or perhaps that’s not an accurate representation of the JavaScript ecosystem. It may well be that the eagerness only extends to libraries and frameworks. There’s reluctance to embrace native JavaScript APIs like Proxy or web components. There’s a weird lack of trust in web standards, and an underserved faith in third-party libraries.

Una speculated that CSS needs a rebranding, like we did back in the days of CSS3, a term which didn’t have any technical meaning but helped galvinise excitement.

I’m not so sure. A successful rebranding today becomes a millstone tomorrow. Again, see CSS3.

Una finished with a call-to-action. Let’s work on building the CSS community.

She compared the number of “front-end” conferences dedicated to JavaScript—over 50 listed on one website—to the number of conferences dedicated to CSS. There’s just one. CSS Day.

Heydon wrote:

It occurs to me there are two types of web conferences: know-your-craft conferences and get-ahead conferences. It’s no coincidence there are simultaneously more get-ahead conferences and more JS-framework conferences.

Una encouraged us to organise more gatherings. It doesn’t need to be a conference. It could just be a local meet-up.

I think that’s an excellent suggestion. As Manuel puts it:

My biggest takeaway: The CSS community needs you!

For me, the value of CSS Day was partly in the excellent content being presented, but it was also in the opportunity to gather with like-minded individuals and realise I’m not alone. It’s also too easy to get gaslit by the grift of “modern web development”, which seems to be built on a foundation of user-hostile priorities that don’t make sense to me—over-engineering, intertwingling of concerns, and developer experience über alles. CSS Day was a welcome reminder to fuck that noise.

In just a couple of weeks, I’ll be heading to Bristol for Pixel Pioneers. The line-up looks really, really good …with the glaring exception of the opening talk, which I’ll be delivering. But once that’s done, I’m very much looking forward to enjoying the rest of the day’s talks.

There are still tickets available if you fancy joining me.

This will be my second time speaking at this conference. I spoke at the inaugural conference back in 2017 when I gave a talk called Evaluating Technology. This time my talk is called Declarative Design.

A few weeks back, Oliver asked me some questions about my upcoming talk. I figured I’d post my answers here…

Welcome back to Pixel Pioneers! You return with another keynote - how do you manage to stay so ever-enthusiastic about designing for the web?

Well, I’d say my enthusiasm is mixed with frustration. And that’s always been the case. Just as I’ve always found new things that excite me about the World Wide Web, there are just as many things that upset me.

But that’s okay. Both forces can be motivating. When I find myself writing a blog post or preparing a talk, the impetus might be “This is so cool! Check this out!” or it might be “This is so maddening! What’s happening!?” …or perhaps a mix of both.

But to answer your question, the World Wide Web never stays still so there’s always something to get excited about. Equally, the longer the web exists, the more sense it makes to examine the fundamental bedrock—HTML, accessibility,progressive enhancement—and see how they’re just as important as ever. And that’s also something to get excited about!

Without too many spoilers, what can we expect to take away from your talk?

I’m hoping to provide people with a lens that they can use to examine their tools, processes, and approaches to designing for the web. It’s a fairly crude lens—it divides the world into a binary split that I’ve borrowed from the world of programming; imperative and declarative languages. But it’s a surprisingly thought-provoking angle.

Along the way I’ll also be pointing out some of the incredible things that we can do with CSS now. In the past few years there’s been an explosion in capabilities.

But this won’t be a code-heavy presentation. It’s mostly about the ideas. I’ll be referencing some projects by other people that I’m very excited by.

What other web design and development tools, techniques and technologies are you currently most excited about?

Outside of the world of CSS—which is definitely where a lot of the most exciting developments are happening—I’m really interested in the View Transitions API. If it delivers on its promise, it could be a very useful nail in the coffin of uneccessary single page apps. But I’m a little nervous. Right now the implementation only works for single page apps, which makes it an incentive to use that model. I really, really hope that the multipage version ships soon.

But honestly, I probably get most excited about discovering some aspect of HTML that I wasn’t aware of. Even after all these years the language can still surprise me.

And on the flipside, what bugs you most about the web at the moment?

How much time have you got?

Seriously though, the thing that’s really bugged me for the past decade is the increasing complexity of “modern” frontend development when it isn’t driven by user needs. Yes, I’m talking about JavaScript frameworks like React and the assumption that everything should be a single page app.

Honestly, the mindset became so ubiquitous that I felt like I must be missing something. But no, the situation really has spiralled out of control, much to the detriment of end users.

Luckily we’re starting to see the pendulum swing back. The proponents of trickle-down developer convenience are having to finally admit that it’s bollocks.

I don’t care if the move back to making websites is re-labelled as “isomorphic server-rendered multi-page apps.” As long as we make sensible architectural decisions, that’s all that matters.

What’s next, Jeremy?

Right now I’m curating the line-up for this year’s UX London conference which is the week after Pixel Pioneers. As you know, conference curation is a lot of work, but it’s also very rewarding. I’m really proud of the line-up.

It’s been a while since the last season of the Clearleft podcast. I hope to remedy that soon. It takes a lot of effort to make even one episode, but again, it’s very rewarding.

Web performance is an unalloyed good. No one has ever complained that a website is too fast.

So the benefit is pretty obvious. Users like fast websites. But there are other benefits to web performance. And they don’t all get equal airtime.

Business

A lot of good web performance practices come down to the first half of Postel’s Law: be conservative in what send. Images, fonts, JavaScript …remove what you don’t need and optimise the hell out of what’s left.

That can translate to savings. If you’re paying for the bandwidth every time a hefty file is downloaded, your monthly bill could get pretty big.

So apart from the indirect business benefits of happy users converting to happy customers, there can be a real nuts’n’bolts bottom-line saving to be made by having a snappy website.

Sustainability

This is related to the cost-savings benefit. If you’re shipping less stuff down the wire, and you’re optimising what you do send, then there’s less energy required.

Whether less energy directly translates to a smaller carbon footprint depends on how the energy is being generated. If your servers are running on 100% renewable energy sources, then reducing the output of your responses won’t reduce your carbon footprint.

But there’s an energy cost at the other end too. Think of all the devices making requests to your server. If you’re making those devices work hard—by downloading, parsing, executing lots of JavaScript, for example—then you’re draining battery life. And you can’t guarantee that the battery will be replenished from renewable energy sources.

That’s why sites like the website carbon calculator have so much crossover with web performance:

From data centres to transmission networks to the billions of connected devices that we hold in our hands, it is all consuming electricity, and in turn producing carbon emissions equal to or greater than the global aviation industry. Yikes!

Inclusivity

There comes a point when a slow website isn’t just inconvenient, it’s inaccessible.

I’ve always liked the German phrase for accessible: barrierefrei—free of barriers. With every file you add to a website’s dependencies, you’re adding one more barrier. Eventually the barrier is insurmountable for people with older devices or slower internet connections. If they can no longer access your website, your website is quite literally inaccessible.

Making the case

I’ve noticed that when it comes to making the argument in favour of better web performance, people often default to the business benefits.

I get it. We’re always being told to speak the language of business. The psychology seems pretty straightforward; if you think that the people you’re trying to convince are mostly concerned with the bottom line, use the language of commerce to change their minds.

But that’s always felt reductive to me.

Sure, those people almost certainly do care about the business. Who doesn’t? But they’re also humans. I feel like if really want to convince them, speak to their hearts. Show them the bigger picture.

Eliel Saarinen said:

Always design a thing by considering it in its next larger context; a chair in a room, a room in a house, a house in an environment, an environment in a city plan.

I think the same could apply to making the case for web performance. Don’t stop at the obvious benefits. Go wider. Show the big-picture implications.

While I’m talking about the SVGs on The Session, I thought I’d share something else related to the rendering of the sheet music.

Like I said, I use the brilliant abcjs JavaScript library. It converts ABC notation into sheet music on the fly, which still blows my mind.

If you view source on the rendered SVG, you’ll see that the path and rect elements have been hard-coded with a colour value of #000000. That makes sense. You’d want to display sheet music on a light background, probably white. So it seems like a safe assumption.

Ah, but when it comes to front-end development, assumptions are like little hidden bombs just waiting to go off!

I got an email the other day:

Hi Jeremy,

I have vision problems, so I need to use high-contrast mode (using Windows 11). In high-contrast mode, the sheet-music view is just black!

Doh! All my CSS adapts just fine to high-contrast mode, but those hardcoded hex values in the SVG aren’t going to be affected by high-contrtast mode.

Stepping back, the underlying problem was that I didn’t have a full separation of concerns. Most of my styling information was in my CSS, but not all. Those hex values in the SVG should really be encoded in my style sheet.

I couldn’t remove the hardcoded hex values—not without messing around with JavaScript beyond my comprehension—so I made the fix in CSS:

[fill="#000000"] {
  fill: currentColor;
}
[stroke="#000000"] {
  stroke: currentColor;
}

That seemed to do the trick. I wrote back to the person who had emailed me, and they were pleased as punch:

Well done, Thanks!  The staff, dots, etc. all appear as white on a black background.  When I click “Print”, it looks like it still comes out black on a white background, as expected.

I’m very grateful that they brought the issue to my attention. If they hadn’t, that assumption would still be lying in wait, preparing to ambush someone else.

Two weeks ago, I wrote:

I woke up today to a very annoying new bug in Firefox. The browser shits the bed in an unpredictable fashion when rounding up single pixel line widths in SVG. That’s quite a problem on The Session where all the sheet music is rendered in SVG. Those thin lines in sheet music are kind of important.

Paul Rosen, who makes abcjs, the JavaScript library that renders sheet music on The Session, managed to get a fix out pretty quickly. But I use an older version of the library and updating it would introduce some side-effects that would take me a while to work around. So that option wasn’t available to me.

In this situation, when the problem is caused by a browser bug, the correct course of action is to file a bug with the browser. That had already been done. Now all I could do was twiddle my thumbs and wait for the next release of the browser, which would hopefully ship with the fix.

But I figured I may as well try to find a temporary workaround in the meantime.

At first, I looked at diving into the internals of the JavaScript—that’s where the instructions are given for drawing the SVGs.

But then I stopped and thought, “If the problem is with the rendering of the SVG, maybe CSS can help.”

I started messing around with SVG-specific CSS properties like stroke, fill, and so on. With dev tools open, I started targeting the paths that acted as bar lines in the sheet music, playing around with widths, opacities, and fills.

It was the debugging equivalent of throwing spaghetti at the wall. Remarkably, it actually worked.

I found a solution with this nonsensical bit of CSS:

stroke: currentColor;
stroke-opacity: 0;

For some reason, rather than making all the barlines disappear, this ensured they were visible.

It’s the worst kind of hacky fix—the kind where you have no idea why it works, but it does.

So I shipped it.

And at pretty much exactly the same time, a new version of Firefox dropped …with the bug fixed.

I can’t deny that there was a certain satisfaction in being able to work around a browser bug. But there’s much more satisfaction in deleting the hacky workaround when it’s no longer needed.

The most cartoonish misrepresentation of progressive enhancement is that it means making everything work without JavaScript.

No. Progressive enhancement means making sure your core functionality works without JavaScript.

In my book Resilient Web Design, I quoted Wilto:

Lots of cool features on the Boston Globe don’t work when JS breaks; “reading the news” is not one of them.

That’s an example where the core functionality is readily identifiable. It’s a newspaper. The core functionality is reading the news.

It isn’t always so straightforward though. A lot of services that self-identify as “apps” will claim that even their core functionality requires JavaScript.

Surely I don’t expect Gmail or Google Docs to provide core functionality without JavaScript?

In those particular cases, I actually do. I believe that a textarea in a form would do the job nicely. But I get it. That might take a lot of re-engineering.

So how about this compromise…

Your app should work in a read-only mode without JavaScript.

Without JavaScript I should still be able to read my email in Gmail, even if you don’t let me compose, reply, or organise my messages.

Without JavaScript I should still be able to view a document in Google Docs, even if you don’t let me comment or edit the document.

Even with something as interactive as Figma or Photoshop, I think I should still be able to view a design file without JavaScript.

Making this distinction between read-only mode and read/write mode could be very useful, especially at the start of a project.

Begin by creating the read-only mode that doesn’t require JavaScript. That alone will make for a solid foundation to build upon. Now you’ve built a fallback for any unexpected failures.

Now start adding the read/write functionally. You’re enhancing what’s already there. Progressively.

Heck, you might even find some opportunities to provide some read/write functionality that doesn’t require JavaScript. But if JavaScript is needed, that’s absolutely fine.

So if you’re about to build a web app and you’re pretty sure it requires JavaScript, why not pause and consider whether you can provide a read-only version.