David K. 🎹
@davidkpiano.bsky.social
State machine. Building stately.ai
Reposted by 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
➡️ code-puzzle.sandroroth.com
Built with #React and #XState
October 2, 2025 at 7:18 PM
🧩 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
➡️ code-puzzle.sandroroth.com
Built with #React and #XState
Reposted by David K. 🎹
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...
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...
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...
css-tricks.com
August 29, 2025 at 2:14 PM
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...
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...
Reposted by David K. 🎹
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
@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?
codetv.link
July 15, 2025 at 7:12 PM
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
@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
Reposted by David K. 🎹
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
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
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?
codetv.link
July 14, 2025 at 3:53 AM
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
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
Reposted by David K. 🎹
helping the Keyframers reunion happen over here @davidkpiano.bsky.social @shaw.city
June 18, 2025 at 9:06 PM
helping the Keyframers reunion happen over here @davidkpiano.bsky.social @shaw.city
⚛️ 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-...
→ atom.get()
→ atom.set(…)
→ Derived atoms (reactive)
→ Async atoms
→ Stores are atoms too!
npm i @xstate/store
stately.ai/docs/xstate-...
May 13, 2025 at 2:38 PM
⚛️ 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-...
→ atom.get()
→ atom.set(…)
→ Derived atoms (reactive)
→ Async atoms
→ Stores are atoms too!
npm i @xstate/store
stately.ai/docs/xstate-...
Reposted by David K. 🎹
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
January 7, 2025 at 11:48 PM
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
Reposted by David K. 🎹
That's it, I'm switching to xstate store
December 26, 2024 at 10:06 PM
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 ✍️
Planning for the next major version, and would love to hear your thoughts and ideas ✍️
December 18, 2024 at 5:32 PM
How would you simplify XState?
Planning for the next major version, and would love to hear your thoughts and ideas ✍️
Planning for the next major version, and would love to hear your thoughts and ideas ✍️
Reposted by David K. 🎹
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
🍎https://apple.co/4ipNHcP
🟢 spoti.fi/3VxlGGq
December 9, 2024 at 11:31 PM
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
🍎https://apple.co/4ipNHcP
🟢 spoti.fi/3VxlGGq
I now *really* enjoy reading articles that are so obviously human-written, mistakes and all
December 7, 2024 at 10:43 PM
I now *really* enjoy reading articles that are so obviously human-written, mistakes and all
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.
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.
December 5, 2024 at 6:50 PM
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.
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.
Reposted by David K. 🎹
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.
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.
December 1, 2024 at 9:24 PM
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.
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.
🔲 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
🔲 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
December 2, 2024 at 4:16 AM
🔲 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
🔲 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
Reposted by David K. 🎹
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-...
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-...
How to Grow Professional Relationships
A practical, science-backed model for growing quality professional relationships.
tej.as
November 28, 2024 at 4:05 PM
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-...
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-...
Reposted by David K. 🎹
Component State Management in React:
- useState
- useMachine
That's it. That's all I use anymore.
- useState
- useMachine
That's it. That's all I use anymore.
November 21, 2024 at 4:08 PM
Component State Management in React:
- useState
- useMachine
That's it. That's all I use anymore.
- useState
- useMachine
That's it. That's all I use anymore.
Reposted by David K. 🎹
FSMs are the best way to model UI state. What can we do to indoctrinate people to this fact?
November 9, 2024 at 12:51 AM
FSMs are the best way to model UI state. What can we do to indoctrinate people to this fact?
Hello again, world
This place seems cool
This place seems cool
October 30, 2024 at 2:07 PM
Hello again, world
This place seems cool
This place seems cool
Software estimation is hard
May 5, 2023 at 9:03 PM
Software estimation is hard
I love TODO comments. They're like little reminders of the ambitious developer you thought you'd eventually become.
April 28, 2023 at 12:41 PM
I love TODO comments. They're like little reminders of the ambitious developer you thought you'd eventually become.
I'm not actually a piano
April 23, 2023 at 11:01 PM
I'm not actually a piano