I'm running for Mayor of CSS Town

Today’s issue: PTSD from The Pagemaster movie, locals-only development, and a very sultry opportunity for Chris Coyier.

Welcome to lucky #222.

---

State of the Union Cascade

My fellow Div-Lords… we are gathered here today to review the results of the 2023 State of CSS survey and discuss the past, present, and future of this great language.

Sadly, the CSS world doesn’t breed quite as much drama and tribalism as the JavaScript ecosystem — but don’t worry, there’s still a lot to talk about.

Here are our 5 biggest takeaways:

1. Developers love CSS variables. For the fourth year in a row, Custom Properties came in at #1 among all CSS features for both “highest usage” and “highest awareness.” Turns out, developers really love reusing the same value, instead of having 36 variations of “lightgrey” in their codebase (thanks, design team 🙄).

But for the first time, we’re seeing the gap between variables and other popular CSS features start to close, because…

2. The gap property is coming on strong. Its usage has grown from 55% of survey respondents in 2021, to 90% this year. I think everyone’s just happy we don’t have to do :last-child { margin-left: 0 } just to get even spacing anymore 🙏.

3. CSS-in-JS is trending down. Once the belle of the ball, libraries like styled-components, Emotion, and Stitches (which is no longer maintained) have really fallen off in the last couple years. But Panda CSS is doing its best to lead a CSS-in-JS comeback with faster performance, type-safety, and RSC compatibility.

4. CSS Tricks is still top dog when it comes to CSS learning resources, and it isn’t close. This, despite the fact that it’s now plastered with Digital Ocean banners (who acquired the site last year), and it hasn’t uploaded new content since April. Look how they massacred my boy 😭.

5. We all just want peace and harmony — between the browsers. We’ve all been spoiled to see the web platform add tons of great CSS features in the last couple years, but the #1 pain point (by far) for CSS devs in the survey was lack of browser compatibility for all of those features.

Bottom Line: It’s a tough problem to solve, but if you elect me as Mayor of CSS Town, I promise that every browser will support the :has() selector and CSS Nesting — and all our drinking fountains will be filled with soda. #VoteForTyler

---

Create the perfect file import experience with Flatfile

Unlike my favorite underwear brand, there is no “one-size-fits-all” approach to building file imports.

That means someone on your team will get stuck building a bunch of custom software that will probably definitely break prod.

Thankfully, Flatfile’s Data Exchange Platform can help. It gives you a simple and secure way to build your own ideal solution for importing CSV, Excel, or other data files.

Here’s how:

• Their event-driven architecture and rich API library allow you to build customizable file-based data imports, validation, transformations, and workflows. (See the docs.)

• Their advanced data import functionality lets you collect any file type from any data source, and perform AI-powered data matching, along with automated formatting, cleaning, and validating.

• It comes with enterprise-scale support and security built in, and is already used by tons of Fortune 500 companies.

Try it out free — and never wrestle with file imports again.

---

How could this code be improved?

document.getElementById("thumbnail").addEventListener("click", () => {
  const img = new Image();
  img.src = "path_to_high_res_image.jpg";
  document.getElementById("gallery").appendChild(img);

  img.onload = async () => {
    const metadata = await fetch("path_to_metadata_API").then((res) =>
      res.json()
    );
    document.getElementById("metadata").innerText = metadata.description;
  };
});

---

1. v0 is a (still alpha) generative UI system by Vercel Labs that’s powered by AI. It generates copy-paste React code based on Shadcn UI and Tailwind CSS and definitely won’t put any of us out of a job (right?).

2. Chris Coyier (creator of CSS Tricks and CodePen) went on the Bad at CSS podcast to discuss what CSS he is bad at. He also missed a golden opportunity to sing us a real sultry version of “I Did Something Bad” by Taylor Swift. Next time.

3. Are you doing configuration management all wrong? If you’re not using a configuration-as-code approach, Configu says you are. And they’ve developed an open-source project to help you make it right. Check out the GitHub repo. [sponsored]

4. Marz is a fast and lightweight React Server Components framework for Bun that’s still “very early on in development.” That’s why I already shipped it in three different production apps.

5. Matteo Collina (a Node.js maintainer) wrote His thoughts about Bun 1.0, including why he’s “a bit frustrated by their compatibility claim with Node.js.”

6. Emil Kowalski, a design engineer at Vercel, wrote about some of the lessons they learned when Building a Toast Library for React. I’m still waiting for someone to make the first Eggo waffle library.

7. Kyle Mathews (Gatsby creator, friend) wrote Some notes on local-first development. Locals only, brah.

8. Fundrise’s Innovation Fund lets you invest alongside top VC’s in the most exclusive AI startups — without needing to be an accredited investor. Their past funds have backed some of the biggest startups of the decade, and they’re now allowing you to get in on the action, no minimums required. Learn more here. [This endorsement sponsored by Fundrise]

9. Pagefind just launched v1.0 of its fully static search library that’s meant for scale. Here’s hoping it doesn’t give me as many nightmares as the Pagemaster movie did back in the ’90s.

10. Maxime Heckel wrote a super in-depth, visual article called Painting with Math: A gentle study of Raymarching. On the one hand, it’s easy to say that a super long article about “painting with math” seems incredibly nerdy — but on the other hand, I just made a Pagemaster reference in a long JavaScript newsletter, so I won’t be pointing fingers.

---

Whenever you ask “how could this code be improved?”, you open the (email) floodgate. But…

One way is that instead of waiting for the image to load before fetching the metadata, we can start fetching the metadata immediately by moving the fetch call outside of the onload handler. This will allow the metadata to load in parallel with the image.

document.getElementById("thumbnail").addEventListener("click", () => {
  const metadataPromise = fetch("path_to_metadata_API").then((res) =>
    res.json()
  );

  const img = new Image();
  img.src = "path_to_high_res_image.jpg";
  document.getElementById("gallery").appendChild(img);

  img.onload = async () => {
    const metadata = await metadataPromise;
    document.getElementById("metadata").innerText = metadata.description;
  };
});