Bytes #87 - wtf is a state machine?

wtf is a state machine?

Issue #87.February 14, 2022.2 Minute read.

Happy Valentines day to those who celebrate! And happy Monday to those Gatsby devs who are incapable of feeling love.

This week, we've got some next-level Rome swag, a parade float in the shape of Evan You's head, and Google devs coding inside gas station bathrooms. Welcome to #87.


Meme of vc funding leading to Rome's duck swag

Those eyelashes though

Is Rome Prettier with Rust?

It's been over a year since we were introduced to Rome, the "spiritual successor" to Babel. If you've been wondering what they've been up to, let me remind you that Rome wasn't built in a day. First, they had to write it in TypeScript... so that they could turn around and re-write it in Rust.

So what does all this work get you? Well, to demonstrate the full power of Rust, they shipped out swag to everyone who "donated" to their fundraising campaign (which reminds me... still haven't gotten those hoodies yet, Remix). They also announced a new code formatter inspired by rustfmt (think Prettier, but more blazing).

If you find yourself thinking "oh great, another decision I have to make for my app," you'll be happy to know that they're working to align with Prettier 🙏. Can you use this new functionality today? No. But rest assured, there is a VSCode extension coming your way in "the next few months" (or right after they finish re-writing VSCode in Rust).

In addition to formatting, we're excited about Rome's vision of an all-in-one tool that includes:

  • linter ✅
  • formatter ✅
  • compiler 🔜
  • bundler 🔜
  • minifier 🔜
  • test runner 🔜

Bottom line: Even though they're down a co-founder, Rome is going to fight to make your software a little more blazing, one tool at a time.


Clerk meme

The jank is... inevitable [sponsored]

Clerk.dev -- user management, now with less pain!

There's only one lesson I hope my kids learn from me: "the best code is the code that you don't have to write/maintain." ("Be a good person" was a close second place.)

So if any of my offspring ever builds an app, they better use Clerk.dev for all their user management stuff.

Clerk has all the front-end components and back-end logic you need to quickly set up all types of auth, session management, user profiles, B2B features, etc.

It also integrates super smoothly with React, Expo, Next, and Gatsby to save you even more time.

Your users don't care how your user management system works -- they just want it to work, so they can get busy losing money on NFTs, gambling on virtual horses, or whatever it is your app does.

👉 Check out Clerk.dev's free tier and stop worrying about the boring code nobody cares about.


Friends meme of Ross guessing all the states

The OG State Chart

Stately AI -- the future of No-Code?

The Piano Man himself is bringing statecharts to the masses with Stately -- a new statechart editor that just entered public beta.

Sounds cool, but wtf is a statechart? It's basically a collection of state machines with some helpful organizational features, so that you don't lose your mind when working with nested states, parallel states, remembered states, etc.

Sounds cool, but wtf is a state machine? You've probably created them before without even realizing it -- any time a part of your app transitions between specific states in response to an event, that's a state machine. A classic example is handling HTTP requests: the state transitions from idle to loading and ends as either resolved or error.

With Stately, David K (who's also the creator of XState and whose last name isn't actually Piano) is on a mission to make all that app logic accessible to everyone on your team -- including designers, PM's, and marketers (yes, those people are technically on your team).

Stately's visual editor makes it easy for any of those folks to create, modify, and test state logic for an app without writing code. In theory, it'll also make collaboration a lot tighter: when you edit code, it updates the editor's state diagram in real time -- and if you (or someone else on your team) makes changes to the editor's diagram, you'll see the code updated in real time (if you're using the XState VS Code extension). What could possibly go wrong?

Tools like WebFlow and Wix have led the no-code revolution when it comes to designing websites. Maybe Stately will be able to do the same for defining application logic and behaviors. And it's all possible because of the greatest force in the universe: ~~love~~ state machines and statecharts.

Bottom Line: Sounds cool, but how many branded rubber duckies have they shipped?


🔬 Spot the Bug -- Sponsored by WorkOS

WorkOS gives you Lego bricks for adding enterprise features to your app. You can use their modern API’s to add stuff like Single Sign-On (SAML) and SCIM user provisioning in a few minutes, instead of a few months.

function makeCamelCase(text) {
  const changeCase = import('https://cdn.skypack.dev/change-case')

  return changeCase.camelCase(text)
}

Cool Bits

  1. The Netlify team created oss.love -- the perfect way to send a virtual valentines to your favorite OSS authors (or your partner, if they already have low expectations of you).

  2. As a front-end developer, I'm casually allergic to creating and scaling back-ends. That's why I'm stoked on ChiselStrike - which allows you to create serverless backends (including the DB) from TypeScript. It feels like it could be the next iteration in BaaS and puts me one step closer to my goal of never learning kubernetes. Here's a write-up about what you can expect today and how to join the beta.

  3. Klint Finley from the GitHub ReadME Project wrote about how back-end languages are coming to the front end, thanks to new server-side tools like Phoenix (an Elixir framework). If I'm writing a Phoenix newsletter five years from now, please call my mom and tell her to come get me.

  4. Nora Georgieva wrote a great article on 5 reasons not to write your data grid from scratch, or what JavaScript grids have in common with black holes. And no, it's not just that they're both big and heavy. [Sponsored]

  5. Griffel is a new CSS-in-JS solution created by a Microsoft team that has AOT compilation, SSR support, and styles defined with JavaScript objects. It was created by a team at Microsoft and was (apparently) named after this little German Pokémon. I'm still trying to grasp the metaphor.

  6. Evan You, aka Lord-of-the-Vue, has proclaimed that Vue 3 is now the official default, a mere 18 months after it was first released. And all the Vue townspeople threw a parade with giant floats in the shape of their benevolent dictator's face.

  7. The team behind Nx created monorepo.tools, an aesthetically pleasing website that's kind of like your 9th-grade health teacher -- but instead of teaching you all about mono (and how kissing is an evil urge from Satan), this website teaches you all about monorepos.

  8. Google just released v5.0 of zx -- a tool for writing scripts that's easier to use than bash. Why is it called zx? Word on the street is that it's because Anton Medvedev wrote the first prototype inside a bathroom at a ZX gas station somewhere off Highway 70. But wait, isn't Anton from Switzerland? Why was he coding in the bathroom of a local gas station chain in rural Missouri? We'll let you know once we've heard back from the P.I. we hired.


🔬 Spot the Bug -- Solution

This import statement is actually a dynamic import. When it's first called, it will fetch the module's code from the CDN url and parse it asynchronously, which means import() returns a promise. We either need to use the .then() method or async/await to access the module.

async function makeCamelCase(text) {
  const changeCase = await import('https://cdn.skypack.dev/change-case')

  return changeCase.camelCase(text)
}

Join Bytes

Delivered to 105,502 developers every Monday