Playing Uno and writing CSS

We just released React, Visualized. It’s a free, gentle introduction to React – but visualized.

To increase exposure to react.gg so we can make more money celebrate the launch, we’re giving away AirPods Pro to 3 of you who RT this tweet 🫶. We’ll announce the winners next week. GLHF.

Today’s issue: The Vite-ification of Atomic CSS, slightly less AI doomerism, and Meta’s OSS learnings from Paul Blart: Mall Cop.

Welcome to #177.

---

The draw-4 wildcard of Atomic CSS

Playing Uno and writing CSS have both taught me some valuable life lessons — mostly that happiness is fleeting and pain is inescapable.

So when I saw all the buzz around a fast-growing Atomic CSS engine called UnoCSS, I knew I had to look into it (and hopefully process some unresolved trauma along the way).

Quick background: UnoCSS was created by Anthony Fu, a prolific OSS author who has helped create and maintain projects like Vite, Vue, Nuxt, and lots more. The idea for Uno was planted a few years ago, when Anthony was creating Vitesse, a popular Vite starter template that originally used Tailwind.

Back then, Tailwind followed the traditional Atomic CSS model — it provided you with all of the CSS utilities you could possibly need, then used PurgeCSS to scan your bundle and remove what you didn’t use. The problem is, this approach can be pretty slow (especially in development) — which is the worst possible insult you can give to a Vite dev.

In 2021, Tailwind addressed this problem by introducing an on-demand JIT engine, which pre-scans your source code and only generates the utilities you need. But because Tailwind’s API and plugin system were still designed for “traditional” Atomic CSS, Anthony felt like there was an opportunity to reimagine Atomic CSS from the ground up. So he did.

Most of what makes UnoCSS unique comes from the fact that it’s a slightly lower level engine, not a framework. Here’s what that gets you:

• More flexibility — It has first-class integrations with various build tools and can be used in lots of different places.

• Easy to customize — It’s less opinionated and has no core utilities; all functionality come from presets.

• Better performance — No parsing, no AST, and no scanning make it 5x faster than Tailwind JIT.

Bottom Line: This strategy of “go one layer down the stack and make it faster/more flexible from there” has worked out great for Vite. Will it work for UnoCSS too? Early returns have been looking good.

---

Dynaboard helps you build legit apps 10x faster

What’s the #1 hardest thing about starting a new web dev project?

Actually getting started. We’re all terrified of a blank canvas (or empty text editor) — and it’s easy to waste hours procrastinating “researching,” instead of just building the damn thing.

Thankfully, there’s Dynaboard. It’s a web app builder that combines the convenience of a drag and drop editor with the flexibility of a code-first UI framework. And it’s surprisingly powerful. Here’s how it works:

• Start fast by forking one of their app templates, or use their customizable component libraries — without worrying about frameworks, boilerplate, or dependencies.

• Add custom code wherever you want, on both the client and the server. Dynaboard is powered by Wasm and supports all ES2020 syntax to give you max flexibility.

• Build and edit with your whole team in real time with their multiplayer mode.

Check out their free tier — and build any web app 10x faster, no matter how complex.

---

Have a job you want to fill?

---

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

const user = {
  name: 'Tyler',
  age: 32,
  created: new Date(),
}

const copiedUser = deepCopy(user)

---

1. React, Visualized is a free, gentle introduction to React – but visualized.

2. CarbonQA provides high-quality QA services for dev teams, so you’ll never have to do it yourself again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]

3. Buck2 is a new, large-scale build system from Meta that can complete builds twice as fast as Buck1. Much like Paul Blart: Mall Cop 2, this was a sequel that nobody asked for, but I’m still intrigued.

4. Magicast lets you programmatically modify JavaScript and TypeScript source code with a simple and familiar syntax. This is yet another Anthony Fu project, and now that I’ve pointed him out, you’re going to see him everywhere. There’s no going back.

5. Simon Willison wrote a refreshingly optimistic article about AI called, AI-enhanced development makes me more ambitious with my projects.

6. There’s lots of discussion going on in this RFC about Angular Signals. I did not predict Angular becoming the most talked about JavaScript framework of 2023, but here we are.

7. Server components are coming to Bun v0.6.0.

8. Chrome 113 will ship WebGPU, which enables high-performance 3D graphics and data-parallel computation. This is going to take my Paul Blart fan-fic blog to the next level.

---

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj))
}

const user = {
  name: 'Tyler',
  age: 32,
  created: new Date()
}

const copiedUser = deepCopy(user)

A deep copy of an object is a copy whose properties do no share the same references as those of the source object from which the copy was made. One approach for deep copying in JavaScript is using JSON.stringify and JSON.parse.

This kind of works in our case, but it will convert created to a string. To prevent that, you can use window.structuredClone instead (assuming browser support).

function deepCopy(obj) {
  return window.structuredClone(obj)
}