The deep magic of state machines

Today’s issue: CSS support groups, the perfect meal plan for hitting your JS macros, and isomorphic pseudonyms.

Welcome to #192.

---

The deep magic of state machines

When we first wrote about XState’s state management and orchestration solution back in February 2022, we made the same joke 4 different times about how no one knows “wtf a state machine is.” (Subtle, I know.)

Well, it appears that David K. and the XState team have heard our prayers sarcasm, because a major focus of their XState v5 (beta) launch is on “flattening the learning curve” to make XState more approachable for the average developer.

But before we cover how they plan to educate the unwashed masses, let’s do a quick review to make sure we’re all on the same page.

State machines model your application logic by showing you how a process transitions from state to state when an event occurs. You’ve probably created them before without realizing it. A classic example is handling HTTP requests — the state transitions from idle to loading and ends as either resolved or error.

Statecharts are basically a collection of state machines with some helpful organizational features, so you don’t lose your mind when working with nested states, parallel states, remembered states, etc. And XState helps you handle all of that complex logic in predictable, visual ways for your JS/TS apps.

Here’s how XState 5 is trying to flatten the learning curve:

• Simplifying terminology — The basic unit of abstraction will now always be known as the “actor”, and they’re removing confusing terms like “service”, “transient transitions”, and more.

• Reducing API surface area — Simplifying existing features and removing redundant functionality.

• New, interactive docs — Lots of new examples to help you understand how to use XState for your own use cases and get up and running asap.

Bottom Line: It’s cool to see the XState team take a step back to focus on usability and DX, rather than just pumping as many new features as possible into this release. Hopefully, that’ll help drive more adoption and help us all learn the deep magic of state machines.

---

highlight.io shows you WHY bugs happen

Your manager still sounds a little tipsy on the phone — probably from all the Applebee’s cocktails your team ordered to celebrate the big launch.

“A bunch of Safari users keep getting the same bug, but I can’t reproduce it. Can you hop on tonight and check it out?” It’s 10:30 pm …and you can suddenly feel that last Mai Tai making a comeback in your stomach.

If only your team had used highlight.io — the fullstack monitoring platform that gives you everything you need to catch bugs early and fix them fast:

• Session replay — Lets you debug from the user’s perspective, so you can understand the real reason why bugs are happening.

• Error Monitoring — Notifies you of exceptions across your app before they become a problem.

• Logging — Lets you search for and set alerts for logs being written throughout your stack.

Check it out — and never worry about celebrating too early again.

---

If you’re like me, you use one of these strategies for logging a value to the console.

const name = 'Tyler'

console.log('name', name) // name Tyler
console.log('HERE', name) // HERE Tyler
console.log('sefkjse', name) // sefkjse Tyler
console.log('wakawaka', name) // wakawaka Tyler

Believe it or not, there’s a better way and it utilizes object destructuring.

const name = 'Tyler'

console.log({ name }) // {name: 'Tyler'}

Wow.

---

1. We created useHooks — a collection of 50 modern, server-safe React hooks with a fun landing page that I think you’ll like but if you don’t just pretend you do because we worked hard on it.

2. Bun just released JavaScript Macros, which are a mechanism for running JavaScript functions at bundle-time. Jarred wanted to make sure you had no excuse for not hitting your macros.

3. Tom Preston-Warner wrote about how RedwoodJS is All In on React Server Components.

4. 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]

5. Stephanie Eckles created SuportsCSS, which gives you live, in-browser feature detection of modern CSS and is not (as far as I can tell) a CSS support group.

6. Delba de Oliveira hosted a React roundtable discussion with her two Vercel co-workers, Andrew Clark and Sebastian Markbåge. Blink twice if you’re tired of being forced to wear black, Vercel folks.

7. Stephan Meijer wrote about Isomorphic Development and how RSCs won’t necessarily make our jobs easier. From what I can tell, this is not a secret pseudonym for the author of the Twilight series.

8. Next.js Enterprise Boilerplate is a new, opinionated starter template for Next projects. Because it’s Enterprise ready, it also comes bundled with Microsoft 365™ and a general lack of upward mobility.