David K. 🎹

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

FSMs are the best way to model UI state. What can we do to indoctrinate people to this fact?

🤝

Sorry, got stuck in traffic