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!
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.
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.
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.
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!
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
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.
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!
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!
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...
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.
