David K. 🎹

🧩 Code Puzzle, a little side project I made. Each level gives you a JS snippet split into pieces. Arrange them in the right order with drag and drop to solve the puzzle.

➡️ code-puzzle.sandroroth.com

Built with #React and #XState

Whoa

CSS Elevator: A Pure CSS State Machine With Floor Navigation | CSS-Tricks In this article, author Chris Sabourin walk through how modern CSS features can build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get...

A dash of modern CSS accomplishes so many things that used to require abstractions, dependencies, and tricks (wink, wink).

This one from Christian Sabourin is a great example: custom properties, clamp()-ing, calc()-ing, counters, relational pseudo selectors, etc.

css-tricks.com/css-elevator...

Build the Future of AI-Native UX in 4 Hours | Web Dev Challenge Season 2 How will websites evolve if it's all powered by AI?

the latest Web Dev Challenge is available to everyone!

@algolia.bsky.social asked 3 teams of devs to imagine what the UX of an AI-native web app might look like. featuring @davidkpiano.bsky.social, @shaw.city, Nadirah, @aguywhocodes.com, Syscily, and Camille, with @chuckm.bsky.social

Build the Future of AI-Native UX in 4 Hours | Web Dev Challenge Season 2 How will websites evolve if it's all powered by AI?

new Web Dev Challege is up early for supporters!

watch Syscily, Camille, Nadirah, @aguywhocodes.com, @shaw.city, and @davidkpiano.bsky.social as they imagine what UX might look like in an AI-native app, sponsored by @algolia.bsky.social with @chuckm.bsky.social as our advisor

codetv.link/wdc/s2e6

Stephen and David of the Keyframers working at desks in CodeTV Studio

helping the Keyframers reunion happen over here @davidkpiano.bsky.social @shaw.city

Great to hear! Open to any suggestions or ideas

Yes it does! Since stores are atoms, you can combine/derive state from stores and other atoms.

In the future, atoms can be used inside store context reactively.

Yes, like Zustand and Jotai combined, but framework agnostic

// Regular atoms const countAtom = createAtom(1); countAtom.get(); // 1 const flavorAtom = createAtom('chocolate'); // Derived atom that combines both const donutMessageAtom = createAtom(() => { const count = countAtom.get(); const flavor = flavorAtom.get(); return `${count} ${flavor} donut${count === 1 ? '' : 's'}`; }); console.log(donutMessageAtom.get()); // "1 chocolate donut" countAtom.set(3); console.log(donutMessageAtom.get()); // "3 chocolate donuts" flavorAtom.set('strawberry'); console.log(donutMessageAtom.get()); // "3 strawberry donuts"

import { createAsyncAtom } from '@xstate/store'; const donutOrderAtom = createAsyncAtom(async () => { const order = { flavor: 'glazed', quantity: 12 }; const data = await submitDonutOrder(order); return data; }); donutOrderAtom.subscribe((state) => { if (state.status === 'pending') { console.log('🧾 Placing your order...'); } else if (state.status === 'done') { console.log('🍩', state.data); } else if (state.status === 'error') { console.log('😢 Order failed:', state.error); } });

⚛️ XState Store now has atoms, and they're *really* simple.

→ atom.get()
→ atom.set(…)
→ Derived atoms (reactive)
→ Async atoms
→ Stores are atoms too!

npm i @xstate/store

stately.ai/docs/xstate-...

Yes, there's a guide here:

stately.ai/docs/xstate-...

May even make a codemod 🤔

XState Store!

I like state machines. I still struggle a bit to get my mind bent into state machine shape, but I’m always so happy with the quality of what I build when I do

Fixing that soon!

That's it, I'm switching to xstate store

How would you simplify XState?

Planning for the next major version, and would love to hear your thoughts and ideas ✍️

Would love to hear your ideas!

The Angular+ Show logo. S8E811. “State Machines and XState in Angular with David Khourshid. Hosts Q, Lara Newsom, Jan-Niklas Vortmann, Chau Tran and Brian Love." Photos of the hosts. Photo of David .

Join us on today's episode as we interview David Khourshid @davidkpiano.bsky.social. We will learn about state machines and how XState plays nice with #Angular right out of the box! #ngconf
🍎https://apple.co/4ipNHcP
🟢 spoti.fi/3VxlGGq

I now *really* enjoy reading articles that are so obviously human-written, mistakes and all

I'd love to! Next year.

I don't like default exports.

They exist in JS because they're "simpler", even though they're more verbose:

export default Thing
import Thing from './thing'

vs.

export { Thing }
import { Thing } from './thing'

Just use consistent naming & don't be afraid of typing curly braces.

Updated demo of Decode generating state-machines from diagrams, this time with streaming generation support

Then I do the reverse, generating a diagram from an implementation.

The diagram auto-layout is still rough. I'll work work on more robust auto-layout soon.

This is incredible

🔲 Merge Conflict: Accept All Current
🔲 Merge Conflict: Accept All Incoming
☑️ Merge Conflict: Accept the things I cannot change, the courage to change the things I can, and the wisdom to know the difference

How to Grow Professional Relationships A practical, science-backed model for growing quality professional relationships.

I wrote an essay about relationships that may be helpful for personal career development (and maybe devrel).

Mentioned in the post (by name): @davidkpiano.bsky.social, @kentcdodds.com, @joshuakgoldberg.com, @jennytru.bsky.social, @acemarke.dev, and others

tej.as/blog/how-to-...

I love it

2025?

Component State Management in React:
- useState
- useMachine

That's it. That's all I use anymore.

AI is trained on all code, not good code

Oh my God