The mitochondria of the web

Today’s issue: New ways to feel bad about your perf metrics, the mitochondria of the web, and your internet civic duty.

Welcome to #162.

---

Uncontainable affection

On Valentine’s Day, web developers were feeling the love when the Chrome team announced that container queries are now supported in all stable browsers — thanks to the latest Firefox release ❤️‍🔥.

This was one of 26 focus areas in 2023 for Interop — our favorite little polycule working group of browser vendors tasked with improving browser compatibility.

So what exactly are container queries and why’s everyone so excited?

Container queries let you apply styles to specific items on the page, based on the size of their predetermined container. This will often replace the use of media queries, which were first introduced over a decade ago to modify styles for an entire page based on viewport sizing.

The problem with media queries is that for component-centric web development in 2023, this viewport-driven approach can get janky — requiring you to write complex CSS, modifier classes, and/or client-side JS to get the responsive layouts and components you want.

But container queries make all those problems disappear. All you need to do is define container-type on the container itself, use @container, and start querying. Once that condition is met, the CSS will apply to the component within that container.

Bottom line: It’s cool to see the Interop team work together to get genuinely helpful platform features supported by all the major browser vendors. Next on the list? Adding support for CSS Style Queries, which let you query the style of a container, rather than just the size. Chrome’s v111 beta just started supporting it, so hopefully it’s just a matter of time.

---

Sleuth’s milestone checklist will help your team ship software like Amazon and Atlassian

What would happen if your manager came to your team and said you had to start deploying 100 times a day? Chaos and disbelief? Rebellion and anarchy?

This idea of “Continuous Delivery” can be a scary buzzword, but that’s why Sleuth’s CEO & Co-founder, Dylan Etkin, created the Zero to a Hundred Deploys Milestone Checklist.

It’s a free toolkit that walks through how teams at Google, Amazon, and Atlassian slowly worked their way up to deploying 100 times a day — while increasing developer happiness and satisfaction. Dylan breaks that process into small pieces with a checklist that seems *actually doable*, no matter what size your team is.

“But what does Mr. Fancy CEO Man know about deploying software?” Quite a bit, actually. Before starting Sleuth, Dylan was one of the first 20 employees at Atlassian and the first architect of Jira. So yeah, he knows his stuff.

Check it out.

---

Have a job you want to fill?

---

Speaking of container queries, it’s time for a pop quiz (don’t run from the grind bb 😘).

How would you target containers that are smaller than 400px?

---

1. In So, what’s next?, the creator of Core-js shares a complicated story about the challenges he’s faced while maintaining one of the most ubiquitous OSS projects in the world. This topic requires more nuance than we can give it here, but it highlights some of the challenges of funding OSS — especially for lower-level packages.

2. Retool is like a magic genie that lets you build business software 10x faster. You can easily connect it to any data source, throw together a slick UI, and BOOM — all your wishes come true (as long as you wished for an easier way to do your job). [sponsored]

3. Remix v1.13.0 comes with built-in support for PostCSS and Tailwind. And if you have strong feelings about either of those technologies, remember — it’s your civic duty to convince every single person on the internet to agree with you.

4. The popular React Hook Form library is now framework-agnostic, which means it is legally obligated to change its name to TanStack Hook Form.

5. Our very own Lynn Fisher (💚) wrote this awesome case study about how she incorporated some new CSS features when refreshing her award-winning personal site. Can’t wait for y’all to see what we’ve been cooking up together 👀.

6. Lighthouse 10.0 just came out with even more effective ways for Google to show JUST how badly Tag Manager is killing your site’s performance.

7. On The GitHub ReadME Project, Klint Finley wrote about how CSS is The modern web’s underrated powerhouse — or as I like to call it, the web’s mitochondria. (JavaScript is obviously the endoplasmic reticulum.)

8. “I will not harm you unless you harm me first” is a real thing that the new, AI-powered Bing search said to a user this week. Simon Willison wrote about that, and some of the other semi-aggressive, blatantly incorrect, and almost basilesque things it said last week. AI revolution going great so far 🫠.

---

How would you target containers that are smaller than 400px?

By using the @container at-rule you can easily apply styles to any container that matches the query.

.banner {
  /* some banner styles */
}

@container (width < 400px) {
  .banner {
    /* apply some styles here */
  }
}

The example above applies to all containers, but if you want even more fine tuned control over what elements are selected, you can use named container contexts.

.banner-container {
  container-type: inline-size;
  container-name: banner; /* apply named container context */
}

@container banner (width < 400px) {
  .banner {
    /* apply some styles here */
  }
}

Container queries can also evaluate the computed styles of a container element 🤯 (note: this part of the spec isn’t fully supported). This makes it possible to do some wild stuff.

@container style(color: blue) {
  * {
    color: red;
  }
}

It’s a lot to take in, but container queries are truly a game changer for component based web design. If you need a little more inspiration check out Ahmad Shadeed’s container query examples.