The comment that you read from the chat mid-video about capturing mousedown on the wrong element was actually correct. David was right that you want to capture mouseup on the body (not on the box) but you definitely need mousedown to be on the box or else you have no way to tell which element to drag.
I've coded a complete state machine in context+reducer in React (no redux to avoid another learning curve)… and boy it helped a lot to get rid lots of bugs and defensive coding and not knowing what was going on in the app. and yes the core is a humongous switch and typed events and state@context.
Please share how it went. State Machines have helped me at front and backend but they have been coded in some other thing (context at React, Workflow Symfony at back). But only recently I'm gonna use XState with Angular.
This tutorial really worked for me. The questions mpj asked were the some of same ones I would have so it really enforced the whys of the concepts. Great work!
Correct me if i am wrong but this looks like a perfect use case for Pointer Events, ...they allow you to "lock" the mouse to the element in interest and control it even if your cursor is outside of the window ... developer.mozilla.org/en-US/docs/Web/API/Pointer_events BTW ... excellent tutorial...
Hey MPJ, I wonder why are you NOT using a ligaturized font, which (in my humble oppinion) would rock it even more. I'm kind of obsessed with how good ligatures in code look to me. I could recommend you some cool font families for that matter: Fira Code Retina (comes bundled in Jetbrains' IDEs), Iosevka font family, PragmataPro, and there are some more and some monospaced font which were ported to have ligatures in them, just like Fira Code Retina (in fact, many converted fonts have been added Fira's ligatures). So: Your Quokka evaluating all over the place + ligaturized font = Epic win. Hugs!
Hi guys Thank you for the video! The only question is how did you get to render body dataset values by doing > body.dataset.status = state.toStrings().join(); I'm pretty sure that this line does not render them directly on the page. But how did you do it?! Thank you!
You can totally do the same with a single key in your context, I've called mine stage to not confusing our team with same name for two logic places (i.e. don't use "state inside state"). And the evaluation of an action triggers a transition to another stage or just updates another parts of the context is in the big damn switch. We actually splitter context in two reducers that could be refactored to two machines with XState.
Great video but switching between light browser and dark ide is not very comfortable for the eyes ;) I’d be glad if you guys use light ide or dark background for the webpage
Since David is also an Expert in RxJs - How about combining Xstate with RxJs? Did you consider RxJs when you create Xstate? Xstate will become part of the toolset like Typescript and RxJs! Visualizing Xstate is brilliant!
Maybe because that complete api is not yet supported by all browsers. So it's an example of something that would work anywhere. There are also limitations to that api. Using mouse movements for dragging is more arbitrary. You could also use this sort of dragging, and dropping on shapes in an HTML canvas where DOM rules don't apply.
It would probably be better if you learned the theory of state machines. The theory is more universal, and applicable everywhere. It doesn't necessarily make things easier. It's more like it makes some things possible that are not possible with garden variety programming. It makes making artificial intelligence easier for example. It's nice to think of FSM as you making "if" statements behave how you want them instead of how the programming language dictates. Inside the FSM is a way to determine what state you'll be in which is functionally like using an "if" statement to make a decision. But in an abstract sense the state of an "if", and the state of an FSM are different. The state of an "if" statement is in the brackets after the "if" statement. In an FSM the state is in a duration of time some time during program execution. Instead of state lasting through brackets after "if" you may, while using an FSM, have a state that could theoretically last for days. Or, to put it another way, with an FSM if you want a state to be active for whatever duration you are in control of that. So it's not necessarily about ease, but more about what FSMs allow that normal programming doesn't allow. But you should google it to find out specifics.
I was looking for a good XState tutorial to learn from, for days. Finally, I found the perfect one. And clicked as the notification popped.
what's stopping you from going to docs? they're pretty good one
The comment that you read from the chat mid-video about capturing mousedown on the wrong element was actually correct. David was right that you want to capture mouseup on the body (not on the box) but you definitely need mousedown to be on the box or else you have no way to tell which element to drag.
The 🎹 man. Great! Been waiting for this. Thank you for sharing. 😀👍
I've coded a complete state machine in context+reducer in React (no redux to avoid another learning curve)… and boy it helped a lot to get rid lots of bugs and defensive coding and not knowing what was going on in the app. and yes the core is a humongous switch and typed events and state@context.
I’ve got a little generic state machine you can programme with a tiny DSL I designed. It’s nothing fancy. Yet 😛
This was useful - thanks for the great intro. I'm starting my first big project using XState in January and I'm excited to use it!
Please share how it went. State Machines have helped me at front and backend but they have been coded in some other thing (context at React, Workflow Symfony at back). But only recently I'm gonna use XState with Angular.
The state machine is pure/immutable, the state service is impure/mutable. I think that's the simplest explanation.
This tutorial really worked for me. The questions mpj asked were the some of same ones I would have so it really enforced the whys of the concepts. Great work!
GoF State Pattern =)
Correct me if i am wrong but this looks like a perfect use case for Pointer Events,
...they allow you to "lock" the mouse to the element in interest and control it even if your cursor is outside of the window ...
developer.mozilla.org/en-US/docs/Web/API/Pointer_events
BTW ... excellent tutorial...
I WANT MORE!!!! PLEASE!! thanks for the video. Any suggestions for a Xstate react tutorials ?
see: ua-cam.com/video/kgdjsON25KQ/v-deo.html
18:00 would be coupling of state to ui directly if it would ;P
Hey MPJ, I wonder why are you NOT using a ligaturized font, which (in my humble oppinion) would rock it even more. I'm kind of obsessed with how good ligatures in code look to me. I could recommend you some cool font families for that matter: Fira Code Retina (comes bundled in Jetbrains' IDEs), Iosevka font family, PragmataPro, and there are some more and some monospaced font which were ported to have ligatures in them, just like Fira Code Retina (in fact, many converted fonts have been added Fira's ligatures).
So: Your Quokka evaluating all over the place + ligaturized font = Epic win.
Hugs!
2:00 Banana time
* Serios look *
* Chews on banana *
Hi guys
Thank you for the video!
The only question is how did you get to render body dataset values by doing
> body.dataset.status = state.toStrings().join();
I'm pretty sure that this line does not render them directly on the page.
But how did you do it?!
Thank you!
53:08.
It is set in css:
body::before {
content: attr(data-state);
}
Still wondering when would someone use state machines over redux/context api/zustand/jotai etc in react and pinia/vuex/composition api in vue?
You can totally do the same with a single key in your context, I've called mine stage to not confusing our team with same name for two logic places (i.e. don't use "state inside state"). And the evaluation of an action triggers a transition to another stage or just updates another parts of the context is in the big damn switch. We actually splitter context in two reducers that could be refactored to two machines with XState.
Great video but switching between light browser and dark ide is not very comfortable for the eyes ;) I’d be glad if you guys use light ide or dark background for the webpage
Missing #fff
Thank you guys, I'm starting to get really curious about XState!
So to go state machines, we need more data about the states.
would it better to use invoke instead of interperate
Since David is also an Expert in RxJs - How about combining Xstate with RxJs? Did you consider RxJs when you create Xstate? Xstate will become part of the toolset like Typescript and RxJs! Visualizing Xstate is brilliant!
Good video, anyone knows what wireless earpiece he uses? :)
It's just a PowerBeats Wireless Pro. I don't particularly recommend them for this use case, it's just what I happen to have.
now new, fresh and good content!
Why not use the html drag and drop api?
Maybe because that complete api is not yet supported by all browsers. So it's an example of something that would work anywhere. There are also limitations to that api. Using mouse movements for dragging is more arbitrary. You could also use this sort of dragging, and dropping on shapes in an HTML canvas where DOM rules don't apply.
@@spacedoohicky thanks. i had no recollection of making this comment
@@_7__716 You're welcome. I also forget most of my comments. :)
Noiceee.
It's insane how smart David Khourshid is. He's like 10 steps ahead in solving the bugs. No shade to you, but David is so brilliant
He also wrote the library, and he has used the library for this very problem of drag and drop. It's unlikely he found it this easy at first.
sooo, i have to spent an hour to learn another "very usefull" addition that will make my life "easier"? NO, thanks
Dmitriy Barracuda lol, when you were in school, did you leave the classroom 10 minutes into each class period?
It would probably be better if you learned the theory of state machines. The theory is more universal, and applicable everywhere. It doesn't necessarily make things easier. It's more like it makes some things possible that are not possible with garden variety programming. It makes making artificial intelligence easier for example. It's nice to think of FSM as you making "if" statements behave how you want them instead of how the programming language dictates.
Inside the FSM is a way to determine what state you'll be in which is functionally like using an "if" statement to make a decision. But in an abstract sense the state of an "if", and the state of an FSM are different. The state of an "if" statement is in the brackets after the "if" statement. In an FSM the state is in a duration of time some time during program execution. Instead of state lasting through brackets after "if" you may, while using an FSM, have a state that could theoretically last for days. Or, to put it another way, with an FSM if you want a state to be active for whatever duration you are in control of that.
So it's not necessarily about ease, but more about what FSMs allow that normal programming doesn't allow. But you should google it to find out specifics.