📝 CSS-Tricks 272: Jams

View this newsletter on the web.

[Robin]: Jamstack Conf 2021 wrapped earlier this week and I’m slowly catching up on the videos from the event. There’s lots of good stuff in there, so make sure to bookmark that for later, but here are some quick notes from what I’ve watched so far.

I enjoyed watching Zach Leatherman’s talk about The State of Eleventy in 2021 and everything that’s new and fancy, particularly the very first Eleventy 1.0 beta release. I also really enjoyed Matthew Phillips walkthrough of Astro, which we’ve written excitedly about over the past few months.

An interesting slide that caught my eye was this one though:

This is taken from a blog post by Jason Miller called “Islands Architecture” where he writes:

The general idea of an “Islands” architecture is deceptively simple: render HTML pages on the server, and inject placeholders or slots around highly dynamic regions. These placeholders/slots contain the server-rendered HTML output from their corresponding widget. They denote regions that can then be “hydrated” on the client into small self-contained widgets, reusing their server-rendered initial HTML.

Thinking about these different sections as apps feels buck wild but also correct to me? I love that with Astro you can create these islands of server-rendered HTML and then other, separate islands in the UI that are partially hydrated with JavaScript.

Perhaps my favorite talk so far is Rich Harris talking about Transitional Apps. First up, he explains how there’s a big argument going on right now between multi-page apps—typically a server-rendered website but one that struggles when it comes to adding stateful or JavaScript-sprinkled interactivity on top of it—and single-page apps—enormous behemoths created all on the front-end where we hurl megabytes of inaccessible JavaScript at our readers and forget about the markup altogether (these are the caricatures that we have of these approaches, at least).

Rich makes a list of the pros and cons…

…and then bemoans the current state of the web:

If the best front-end engineers in the world can’t make text and images work without 5mb of JavaScript, perhaps we should give up on the web platform.

Oof. And as Rich argues in his talk, we can dunk on each other all day long and yet it’s hard to argue that there aren’t benefits and problems with each approach. Instead, we should focus on the middle ground between these approaches rather than create all these caricatures and flame wars.

That’s where this “Transitional App” stuff comes into play. The idea here is that we don’t have to pick sides but instead we should build websites with the advantages of Multi-Page apps and Single-Page apps together. Rich explains how by digging into the tooling that’s coming down the pipeline to make that easier, including his own work on Svelte which incorporates some of these ideas, too.

Anyway, all this is super interesting stuff and Jamstack Conf reminds me that we’re in a real exciting time when it comes to static site generators, sure, but most importantly I think it’s an exciting time because folks are reimagining how they build websites from the ground up. We’re reimagining what websites even are to begin with. And that’s just neat.

Issue 323

Intrinsic sizing keywords, prefers-color-scheme, logical focus order, and modern image formats.

CSS Layout News
Issue 323
By Rachel Andrew – 07 Oct 2021 – View online →
I’m late sending this out this week mostly due to the mess caused by working across two devices as I settle into my new role at Google. As a long-time freelancer, everything has always just been linked to my personal computer and accounts. Having a work computer means disentangling work and personal stuff. It’s probably a good thing long-term to be able to close the lid on work, however getting everything where I need it to be might take a while!

This week I’ve also hopped onto the line-up for An Event Apart, which is happening next week. Use the code AEACSSL21 to save $100 on a multi-day pass.

Rachel Andrew

📝 CSS-Tricks 271: Who, what, why, @when

View this newsletter on the web.

[Robin]: Here’s my photo of the week: a picture from a 2015 blog post by Paul Irish of the Wikipedia team walking through an enormous printed version of their performance timeline:

As bananas as this might seem at first, I think this is a wonderful idea! Once you print this thing out, all of a sudden these bottlenecks in the performance timeline are bound to feel like real, physical problems that you need to resolve. And you can scribble ideas on it, add sticky notes about what this particular problem might be or how long it might take to fix this thing, etc.

If I was running a performance workshop then something like this is probably where I’d start.

Issue 322

Container Units, Accessible Palette, @layer, and animating the box model.

CSS Layout News
Issue 322
By Rachel Andrew – 29 Sep 2021 – View online →
I had a fun couple of hours co-hosting two sessions of Inclusive Design 24. The team did an amazing job of keeping that show on the road for 24 hours, and all of the content is now available to watch.

A bit of a short list this week, I’ve had precious little time for reading, but hopefully something of interest.

Rachel Andrew

📝 CSS-Tricks 270: Where’s your head at?

View this newsletter on the web.

[Robin]: Harry Roberts has been doing a ton of interesting work when it comes to the <head> element and—no! stop yawning!—there’s good reason for that; it’s the place where all performance problems begin. Or, as Harry says in “Get Your Head Straight”:

The <head> is the biggest single render-blocking part of a page.

I’d venture a guess and say that the <head> is one element that front-end folks pay the least attention to. But it’s super important! How you load your styles, how you load fonts, how your scripts are loaded; it all directly affects the user experience. And all that goes in the <head>. And Harry, in that talk, suggests to…

Remove as Much as Possible

  • Move low-priority scripts to the closing body tag
  • Utilise in-body CSS
  • Reduce in-head payloads—external or inlined
  • Kill any inefficiencies such as redirects

All that advice is handy and all but the most handiest of things is this tool that Harry built called ct.css. Once you drag and drop a link into your bookmarks bar and click it, it runs a series of tests and highlights all the problems with your website’s <head>.

Here’s me running it on CSS-Tricks where it injects a list of suggestions to the top of the page:

The red boxes highlight stuff that you should probably fix—third-party scripts and stylesheets, for example—and the good stuff is highlighted in green. It’s a nifty tool that I’m going to keep in my back pocket since I find that performance fixes in the <head> are often some of the easiest to fix (sometimes).

Issue 321

Chrome 94, more CSS Paint API, gaps, focus outlines, and cascade layers.

CSS Layout News
Issue 321
By Rachel Andrew – 22 Sep 2021 – View online →
Welcome to another issue of CSS Layout News. My own layout news is that last week the CSSWG resolved that CSS Multi-column Layout could transition to Candidate Recommendation (CR) status. This is the specification I edit, and I’m very happy to see it move on. I need to spend some more time doing some test suite wrangling, in order that it can eventually become a Recommendation.

Other than that I’m preparing to start my new role at Google, trying not to leave a mass of unclosed issues and PRs from other things in my wake! I’ve been documenting WebCodecs recently on MDN, if you are interested in web audio and video, this API landed in Chrome 94 and is worth checking out. Also, see the article on VideoNG over on the Chrome Developers blog.

Rachel Andrew

📝 CSS-Tricks 269: The Color Blue, Neat Design Patterns, and Problems with Scrolling on the Web

View this newsletter on the web.

[Robin]: Let’s start this week off with something odd and fun. I stumbled upon this interesting form pattern by Hakim El Hattab:

This is neat because I’ve never thought that a focus state could have flair and a personality—I’ve always seen those states as accessibility guides to help people quickly navigate around and understand where they are on the page. But nope! I was dead wrong here: focus states can be bubbly and quirky and weird!

Issue 320

CSS mix-blend-mode and clip-path, the W3C design system, flexible components, and my job news!

CSS Layout News
Issue 320
By Rachel Andrew – 15 Sep 2021 – View online →
I’ll start this week with some personal news, which, if you follow me on Twitter, you may already know. After 20 years of self-employment (aka refusing to have a proper job), I’ve accepted a new role at Google. I’ll be working on web.dev, and I am really excited about all the great content I can help folk create for the web development community as part of a bigger team.

This newsletter will continue, however! At 320 weekly issues, it would be a terrible shame to break the chain now, so while there is layout news to share, I’ll keep posting it.

📝 CSS-Tricks 268: Just in Time CSS, the EyeDropper API, and the problem with iOS

View this newsletter on the web.

[Robin]: One of the criticisms thrown at writing Atomic CSS is that it generates a ton of classes that your users don’t need. Let’s say you want to add some padding to the top of an element, like this:

<div class="pt-20"></div>

This is all fine and dandy—and it sure is neat that I don’t have to write a custom CSS class just to add padding and all—but with a lot of frameworks you’d have all the classes for up, down, left, and right padding in your CSS like this:

.pr-20 { padding-right: 20px; } .pt-20 { padding-top: 20px; } .pb-20 { padding-bottom: 20px; } .pl-20 { padding-left: 20px; } 

Now let’s say we don’t use the other three classes in our codebase, well, we’re now potentially sending a ton of code down the wire that the user never needs. Multiply that by all the classes in these sorts of frameworks and that could become a genuine performance concern.

This is where tools such as acss.io comes in. As Chris wrote about the other day, with acss.io you can write some HTML…

<div class="C(#333) P(20px)"> text </div>

…and these declarations will then create CSS like this under the hood for you:

.C\(\#333\) { color: #333; } .P\(20px\) { padding: 20px; }

(Those selectors only look weird because you have to escape certain characters in CSS selectors).

It sounds like folks are calling this “Just in Time” CSS and both the idea and the name makes a whole bunch of sense to me. For example, Assembler CSS leans into this hard:

And Tailwind supports it now, too:

My hunch is that this “Just in Time” CSS stuff is how folks will primarily use Atomic CSS in the future—which is good for us as developers and our users. The alternative, if you’re using utility classes / atomic CSS, is to purge the unused stuff. Gotta do one or the other to avoid sending far too much CSS and doing exactly the opposite of what you’re trying to do (ship more CSS instead of less).