You're listening to syntax, the podcast with the tastiest web development treats out there. Just grab yourself in and get ready. Here's Scott Zelensky and West Boss. Ooh, welcome to syntaxes the podcast with the tastiest web development treats out there.
Today we've got a banger of an episode where we have a guest on. We're going to learn all about state machines, which is really exciting. They apply to CSS. They apply to JavaScript.
They apply to React and view. And it's just a really cool thing that seems to be getting some serious, it's like a, well, we'll talk about it. It's like really old concept, but it's getting some serious traction in our web development industry lately. So let's do some sponsors real quick and then we'll dive into it.
Our first sponsor today is Sanity. They are a structured content CMS and second one is Sentry, which is going to do all of your air and exception tracking with me today is Mr. David K. Piano and Scott as always, but let's talk to Mr.
David today. How are you doing? Doing good. How are you?
I'm doing good. I'm just about to launch my course I've been working on for like a year and I cannot wait to get the sucker out. So it's a I've been just heads down on that for like a year, but like building the website for a couple of days now, I'm pretty excited about it. How are you doing today, Scott?
Doing good. Yeah. Now I finished my month course. I'm working on the next month's course.
You know, as always, for this by the time this episode comes out, be ready for the new year, which is kind of crazy. So just getting all that stuff. We're working hammer. We got like a foot and a half of snow last night.
So it is extreme weather territory out here in Colorado. Where are you from, David? I'm from Orlando. So we have no such snow problems to do.
Have you ever had snow in Orlando? There have been times where very early in the morning you have like these tiny little flurs that don't really stick, but they technically call it like a snow in Orlando. That's great. Yeah.
Colorado is beautiful with the snow because the elevation is so high that like the sun's pretty intense. So when the sun comes out like tomorrow, inevitably the roads will all be dry and warm and whatever. And we won't have that lingering like ice snow that you get in some other parts of the country. So yeah.
Yeah. Yep. Okay. So, uh, stay machines.
Do you want to get into those? Or do you want to get into CSS perspective first? Yeah. Well, actually, so I've got two questions first.
I want to like allow you to introduce yourself. And the second of all, I know that you're really good at CSS. So I just, I was working on something like two minutes before this. I was like, we should ask David.
I bet he knows, but like, do you want to give yourself an introduction? I know I've known you for, I don't know, maybe four or five years now. Yeah. So that's the best conference talks that I have ever seen.
Yeah. Like it's very rare that I go to a conference talk and I go home being like, oh, I'm going to try that. And I believe you had a conference talk on flip animation. Oh, that was one.
One ago. Yeah. So we met at a CSS dev conference, right? I believe that's the first place we met.
Yeah. In the San Antonio or New Orleans, New Orleans. Yeah. Very long.
That was probably like 60 years ago. It's a long time ago. And I'm not sure if that's where the talk was, but I love that talking. I went home and built something in flip animations right after that.
Yeah. So, you know, a lot of work that I do actually stems from just thinking about animations just because I used to be really bad at JavaScript. I still am, but, you know, also used to. So now I think about a lot of the things in terms of animations.
And when you have an animation, you have certain states that something can be in. And then an animation is just literally between between those states. And so I apply that to application design and logic and everything. And I'm like, well, everything seems to just be a transition between states if you really think about it.
Totally. Did you have a background in animation prior to web? Because I personally worked quite a bit after facts before becoming a web dev. And that was sort of my introduction to animating on the web.
You have your initial state, your end state. And then you between it, did you have a background, anything like that? I did not. I made some silly animations in Flash back in the day, but that's pretty much it.
I actually miss it. There are things when I miss it. There are small parts of it. Yeah.
Yeah. Yeah. You have a whole code pen, I think. Is that where people can go to view some of the stuff you've worked on before?
They can. They can go to code pen.io slash David KPM and then we just see a bunch of stuff. A lot of animated dogs, a lot of just other things, even some things relate to UI, I'm sure somewhere in there. The one that always stands out to me is, oh, the husky.
Did you do this? Husky? Yeah. Oh man.
I'm just going to go to the house and views on it. Yeah. When you move your mouse around, there's a husky that just looks around and watches you. Oh yeah.
So that was a reactive version of the original, which was just a, you know, just a normal animation, but decides to throw in some RxJS and they're in half it, follow the mouse cursor around and all of that. Man, that's so cool. Well, you're listening to this podcast. If you're not driving, go to code pen.io forward slash David KPM.
You'll get to see it. The one that I have, I always think of is this room selector where you have a house. Yeah, that's exactly where I was going to go. The house responsive house.
Yeah. Yeah. It's like a slider. It animates itself from like the number of windows and it's so cool.
Like how did you build that? Do you want to like maybe give us a rundown of that? That's using RxJS, right? Not exactly.
Maybe a tiny hint of it, but just to get the values in place. So that was an original animation by Galishier, who's a very talented designer from Israel, makes all of these cool animations. And if you follow him on Instagram, you actually see him drawing things in procreate and it's really, really satisfying to just watch him work. So this was one of the animations that he made and I looked at it and I was like, there has to be a way to do this in CSS.
And so what I did was I first just designed everything based on how many rooms there are and I worried about the in between states later. And so you have three, four, five or six rooms. And then I had to figure out like, well, there's so many different ways you could go from like three to five rooms, four to six rooms, four to five, et cetera. And so that's when I used Flipping, which is my library.
I'm working on a V2 of it, but basically it's a way that allows you to go from one state to another state like visually and sort of apply that flip animation, which gives it the illusion of moving from any location to any other location in a smooth way. That's cool. I'm using flip on the podcast before. It's probably right after I saw your talk because I thought I bet you can use this flip idea with CSS grid because, you know, you can't animate much of grid or any of grid and flex box in Firefox.
You can't, but not yet at the time there was nothing in CSS grid. And so if you make like multiple versions of something, like you said, you have every instance of that and you can just tween from from one to another. Right. That's amazing.
This is so cool. This is the kind of stuff that blows my mind when you're looking at like, wow, I had no idea you could do that with just CSS and JavaScript. Yeah. And only a little bit of JavaScript.
And that's why CSS variables are so powerful because you can just define them in JavaScript and then use it wherever you want in your styles. And I found that a lot easier than, you know, the old jQuery way of like doing dot CSS and doing all those styles on every single elements that that's or sucked. Yeah. I mean, CSS custom properties more than anything have changed to my workflow.
I just absolutely was one of the, it was an unexpected like killer feature for me because you come from SAS or less or any of these, you know, stylists and you think, oh, I already know variables, but there's so much more useful than a preprocessor variable because of how you can control them. And it's just opens up the door to so much. Yeah, big fan. So state machines, do you want to maybe give us an just at a high level view, what is the state machine?
What is the idea behind it? And then we'll dig into like, how do you actually use it as part of our web development? Sure. So I'll tell you first of all, if you Google state machine and find the Wikipedia article on it, don't read that first.
You're going to be so terribly lost because the first thing you're going to read is it's this mathematical model of computation, blah, blah, blah. But that goes to say that state machines are very, very old. In fact, electronics nor computers would exist without them. Like finite state machines are a model for just determining what state you could be in.
And so what a finite state is, is just a well defined state that expresses what something is in. For example, I'm awake right now. I could be either awake or asleep. I can't speak both at the same time unless you can't sleepwalking or something like that.
But I'm only in one of those states or I'm hungry or not hungry. And it's not necessarily Boolean as well. You could be like a traffic like that's a classic example. The traffic like could be green or yellow or red.
It can't be more than one of those at the same time. Otherwise you have some serious accidents. And they're not going to be a good thing. So a financing machine, that's the final part of it.
The whole machine part is how you transition between those states. So let's take a traffic light again, for example. It goes green to yellow and then yellow to red and then red to green, right? And it's always going to go in that specific order, which is really important.
Again, you want to avoid accidents. So these things need to be predictable. Now, this is why I wouldn't trust a JavaScript developer to code a traffic light is because you don't want to have something like set yellow or light equals yellow or light equals red. Instead, you want to send an event that says, when I'm on green, I send you this trigger event and that will determine what the next light is.
So now there's impossible transitions. So you cannot go directly from green to red or from red to yellow. Everything happens in a very specific way. So a state machine is just describing a way that finite states can transition between each other in a very deterministic way.
It's a lot less complex than it sounds, I promise. Yeah, totally. I think the traffic light model is a really, it's an explanation of it that everybody is your greenhouse of traffic light is, right? Yeah.
So it's really like a killer example in terms of just getting the idea out there. So another example too, like actually more practical example, let's say you're fetching data, right? You're, you're trying to show something loading on the screen. So you might be in the state of not loading and then once a request is made, now you're in the state of loading and then after a while, you could be in a state of success or in a state of failure, whether the request succeeded or not.
And so the typical way that we code our applications is we, you know, we say is loading is true or is loading as false, you probably use that variable a bunch of times. Yeah. So the question comes, if is loading is false, what exactly does that mean? Does that mean that it didn't start loading yet?
Does it mean that the loading succeeded? Does it mean that the loading failed? You know, what exactly does that mean? Sure.
I wrote some code probably a couple months ago that says if it is loading and it has fired initially, like there's, then I had another variable that like has wired and then I have all these things like if there's no error, but it isn't loading it, but it has fired, then go ahead and show them like, Oh, there's got to be a better way. Yeah. Yeah. So the easy way to see why those Boolean variables and flags everywhere could be so problematic, but let's multiply them.
Let's say you have three two times two times two is eight. Now you have eight possible things to do with add another Boolean flag. Now that's 16 32 64. It's like it's going to get messy really quickly.
Yeah. This is something I think I'd improve my own code base because one of the things you run into specifically with Apollo is you have a situation where loading is equal to, uh, loading is equal to false as in this isn't, isn't loading any longer, but the data might not be there for any particular reason. And then you have to either optional chaining, mil check, whatever, or air checking for every single time you're doing any sort of queer component decide how you want to do those things, but not having, you still don't have explicit states because there are states where the data might not be what you're expecting or the data might not come in correctly. And it's still loading is equal to false.
So the Boolean's right. It's not trustworthy. Right. Exactly.
And that's why yeah, Boolean's cannot express all the possible things that can happen in your application. And so if a designer or someone else comes to you and it's like, what are the possible states that this could be in? You can't just say it's either loading or not. It's like there's a lot more to it than that.
And that's why even like just a very small stepping stone to start thinking in these finite states is maybe use a status variable instead, like status is loading or status is idle or status is success or failure. Ah, in fact, I was doing this the SSS animation today, which I'll probably post on Twitter sometime. And I noticed that there was a property like I wanted to know how do I control whether the animation is playing or not? I can't say animation loading true or animation playing true or animation playing false.
Instead, they have a property called animation play state. And so that's, you know, it's either running or pause. And so that defines like each of the possible states that the animation could be in. And so that's a lot more clear, at least to me.
Sure. Yeah, totally. So the idea with this is that like you just think ahead of time what possible states there will be. Yeah.
And then like if we go back to that traffic light example, how does that relate to programming where you can only go through, like you said, to transition between them, there has to be ideas. So like maybe take the example of Apollo where you have like you've got data, you have loading, you have potential errors and you have potential not like how does that apply that idea apply to programming? Have you ever run into a user interface where you have a screen and it says like it shows a loading spinner for a while and then it says, hey, success and then like a split second leader, it shows an error like, oh, wait, it actually can't. Yeah.
Yeah. The current Reddit is the opposite. It's like there's no. And then it, there are post JK.
That was just the example, you know, I was thinking up or sometimes you'll have a success with a loading spinner like still happening. It's like, what are you loading? Like what's happening? Or what I, what I like to call the phantom error where let's say you know your internet connection is solid.
You have a loading spinner going and you're like, this has been going on for a while. So you decide I'm going to open up the dev tools and see what's going on. And there's a big red error, but the loading spinner is still spinning. So anyway, the way we apply this to programming is that we make impossible states impossible.
Like it should be impossible for it to be both a success and a failure at the same time. That makes no sense or even success while loading at the same time. Totally. And so it's just a different way of thinking through your different states.
That makes a lot of sense. And the interesting thing too is designers actually naturally think like this. I don't know if you all do any design, but if you use programs such as, I don't know, Envision or even Framer, Framer X, things like that. You have each of your mockups in the separate screen, right?
And you might have an error that connects like, all right, when you click this button, it's going to this mockup, when you click that it goes to there or it could go here. And you have like this sort of user flow diagram, whatever you want to call it, of all of the possible states your application can be in. So designers naturally think like this, which is great. Yeah.
Yeah, totally. I mean, you even think about how those apps are made, right? Like Figma or whatever. You have the two frames, they're the two states.
I mean, so totally. Yeah. And then explain the, I'm just looking at the example that you have here. So X date is a state machine library that you have developed.
Yes. Looks pretty interesting. I'm just looking at the example here. Like you obviously you define the states ahead of time.
And then how do you go about actually changing that state or is that an implementation detail of each library? Sort of. So are you familiar with Redux? Sure.
Yeah. So in Redux, you have a reducer. That reducer takes the current state, the action that just happened, it's really in events, but we haven't come into that. They say that one, but you take the events that just happened and it returns you what the next data is going to be.
And so you're never directly sending state. Instead, you're sending it some sort of signal or message and it's like, hey, given this data in this event, what's the next state going to be? X date works exactly the same way. So the machine file transition function, you give it the current state, some event, and it tells you what the next state is going to be.
And then you can actually have it be a runner where you know, you just say, all right, instead of telling you what the next data is going to be, just keep track of all that for me and all subscribed to state changes. But anyway, in theory, it's exactly the same as what Redux would be just defining when you have a state. And so that's what the JSON configuration object looking thing is, is you telling it when I'm in this state, in this event happens, here's what the next data is going to be. Okay.
Okay. That was a big aha moment for me. I'm seeing it right now is that you are sending an event of toggle. That's the event that happens.
And then you say, when I'm in the inactive state, then toggle does this. It makes it active. And then you went ahead and described it a total another one, which is when I'm in active state and toggle happens, then make it inactive. So you go ahead and you describe what to do to these things when the events happen in every single state.
So you might have three or four of them. I just think of like a, like a form would have lots of different states as well, right? Oh, yeah. Oh, yeah.
And so if you're coming from Redux, there's a tiny bit of a mental shift here in Redux, you're saying when an event happens, here's the next dates. The problem is sometimes the events might do something different based on what state you are. So people in Redux, when they write their switch case statements, they would say, when this event happens, this data is this, do this if state is that to that. So X-State sort of reverses that.
It says when you're in the state, then when this event happens, here's what the next one is. So it eliminates all of those if, you know, if statements. Yeah, that's cool. Is this similar to how RxJS works as well?
Sort of. So RxJS, it's a little bit different because it's, you know, it's for subscribing to observables and all of this dreaming data. And in fact, X-State, when you interpret a machine and you start running and you're subscribing to those states, that that's also observable as well. I like to think of RxJS as like low dash for, you know, for observables in this stream of data.
So it doesn't exactly do the same thing as X-State, but you could use it with X-State or you could even build your own X-State with it. Okay. And so when I talk about using state machines in applications and stuff like that, I don't mean like, hey, you need to use my library. You need to use X-State.
That's the only way you could do this. You could describe a state machine using a simple switch case statement. And that's what programmers have been doing for literally decades is building state machines exactly like that. And so X-State just gives you a lot of extra capabilities on top of that.
Interesting. So that's why it's important to just describe what it is and the idea behind it because if you're just doing a little vanilla JS example, you can pretty easily do that. Like even in CSS, like how would state machine work in CSS? Do you have any examples of that?
Yeah, I do. In fact, I keep a talk over at it's called FinchConf and also at CSS Conf, we did a pest about that, about using the idea of finite states within CSS. And so my favorite, and we do this all the time on the key framers, by the way, but my favorite's data attribute property to just put everywhere is data states. And it's because this data state, instead of, and I'm so guilty of this, but if you put like a class equals loading or something on the button or class equals disabled, instead, by having a single data state attribute, you're saying there's only one possible state or one possible value that could go in this data state attribute.
So it's like data state equals loading or data state equals success. And so you don't have like this mess up, you know, try to figure it out from the class name. And also working with data attributes and CSS and JavaScript is so downright easy. Yeah.
I don't ever want to mess with the class list again. Yeah. You know what, it sold me entirely on the data attribute. This seems weird about React testing library more than anything.
I mean, I've used data attributes before, but once you fire open React testing library and you do everything via data attributes, you just say, oh, these actually are really nice to work with in general, but you just sort of see the utility of them beyond maybe what I would have thought in the past. So it definitely can, I don't know, data attributes overall. It's a low key, awesome addition to HTML. Yeah.
Because they're super easy to work with in JavaScript. You just have this data set object available to you. You can use them to style. You use attribute selectors in CSS, man.
It's great. I just wrapped up my beginner JavaScript course and even in my JavaScript 30 course, we use them all throughout that course. That's awesome. Just how helpful they are.
Yeah. Like some people are like, oh, that's weird. Like that you just make up your own attributes, but big fan of them. I'm glad to hear that.
You think so as well. Oh, yeah. I mean, it's what they're for. Really?
Yeah. Yeah. Exactly. I just remember the jQuery days were all class names everywhere.
Yeah. It was painful. Yeah. Because like if you, it's such a perfect example of like you would sometimes have multiple classes or like you would have some like data in your class name that you had to like strip the class name and like parse out the data from the class name and oh man, so much better now.
Yeah, it was bad. Here's a totally unrelated question, but we had a question the other day where somebody was coding, so part of our potluck where we asked questions. Somebody asked like, what do you think about instead of using classes to style things, just use all data attributes and they pointed us to this website that was, there was not a single class on a thing. It was all like data dash header equals top and things like that.
And I could not figure out why. Yeah. Where's the ability there? Yeah.
Oh, gosh. I think that goes into the the atomic style category where you're just like putting all of those. And so there are some great libraries to do that. Like tailwind and things like that.
Yeah. This or comes back to states too, but the way I like to style my components is just I know my component has a certain set of base styles and I know that my component could also be in a certain number of states. So if I have a button, I will style the disabled button. I will style the loading if it's a special loading button that loads data or something.
And I would use that as a state in order to do that instead of having all of these like pollute the HTML. I'm not a fan of that. Yeah. I don't use it myself for those.
I mean, I would rather build utilities within my CSS rather than utility classes that I'm just applying. Yeah. You're awakening the dragon. You know, I don't think about how I didn't use tailwind on an episode and a lot of people got me.
I'm sort of split on that. So like I've been doing CSS for a long time. I love CSS. So I would never use like atomic styles or anything like that.
And so that's why at first my opinion was so strong, it's like I don't want to use atomic styles. And then I started thinking about, well, hold on, there's other people like heavy JavaScript developers who might not know that much about CSS. Unfortunately, and so in that case, I feel like I just use the atomic style. At least I could deal with that rather than whatever you come up with in CSS.
Yeah. tutorials too because it's easy to just say while you're in the, you know, not have to focus anytime on either having pre-rein styles or having to write CSS in a tutorial that's not about CSS, you can just throw some classes and mock up something in two seconds when you're teaching it. But yeah, if I'm doing my own project, I'm not reaching for them necessarily. And to be fair, tailwind is beautiful.
Oh yeah, no, no, it looks great. What that creates, yeah. I use it as an inspiration for a lot of CSS in general, and just styling things overall, but I just don't use the library. Yeah.
Right. So a lot of what we're talking about with states really comes from working with data in general, right? You have your loading, your error, whatever. And one of the services that we like to use to load data and query for data and access data without having to have our own server is sanity at sanity.io with more on one of their query languages is Wes.
Yes. So, sanity, we've talked about them hundreds times on this podcast. They are a structured content CMS. It's pretty cool because you can run your own React components in it.
You get it all up and running locally and it just talks to the sanity servers. One neat thing that they just launched is this website, grok.dev, g-r-o-q.dev. And so the query language that sanity uses to pull in the data to your, let's say you're writing a React component and you want to pull in a list of blog posts. The query language that you use is called grok, which is a query language for querying JSON.
And it's pretty cool because you can do a lot of filtering, a lot of really neat selects with it. And it's an open specification that they have developed and then just open source so other people can implement this as well. And they just released this grok.dev, which allows you to load in some JavaScript and then start querying it and see what the results will be. So if you're not sure how this query language works, they have a bunch of example queries in there and you can just get it up and running.
You can load in your own data, start writing your own queries and that'll get you comfortable with it. It's pretty nifty. So check that out, grok.dev, g-r-o-q.dev. And then also make sure you check out sanity.io4.
syntax. That's where super secret URL, you're going to get double what the free plan on sanity normally gets. Thanks so much for sanity for sponsoring. All right, so you know a lot about CSS, right?
Can I ask you just a random CSS question? Sure, go for it. So I'm just working on a website right here and I'm working on the cards and I have rotated x like 40 degrees just so like it looks like the card is kind of swinging out towards the user. And in order to get it to look like it's swinging off of the page, you need to put a perspective on the parent.
And I was just sitting here with Scott and I was like, what is this perspective number? I always just ran a amount of pixels in until it looks good. You just keep it all up. Right.
Do any idea what that is? Sorry, go ahead. Yeah, sure. So with CSS, you don't really, there's not really this concept of death.
And so you sort of have to that. That's why perspective exists, you know, sort of added on as part of CSS three and all of that. So perspective is basically when you define like a translate Z, you're telling it like how stretch it like do you want it like isometric? So that would be a smaller or I think would be a smaller one or maybe it would be an infinite one.
I forget what it is. But it's like how stretched out are the, you know, those Z value pixels. So in fact, yeah, so I've been wrestling with perspective two for a while and like just trying to figure out what those numbers are. What I do at first now, I just leave it at whatever the default is because a lot of times I'm doing a like nested transforms.
So I'll have a 3D transform on something and then a 3D transform off of that because I'm doing ridiculous 3D stuff in CSS for no good reason. And that I just, you know, I played around with different perspective values. That's one of those magic numbers type of things though. But generally a higher value is going to be your more realistic value.
At least I think so. Yeah, because if you do like perspective of 10px, it looks like that thing is flying off the screen to you. Like, and if you do like a thousand pixels, it seems a lot more normal. So I'm just, I thought it would be the other way around though.
Cause like isn't a thousand pixels like, is that how much it's stretching off the screen towards you? I think it's how much is, how much fits within a certain thing. So obviously like let's say from where your face is to a foot away from you fitting 10 pixels in there versus 1000 pixels in there. So 1000 pixels in there.
Yeah, at least that's what I think about when I think about perspective. CSS. That's a great perspective. Oh, gosh.
I actually do have a, I have a three speaking of perspective. I have a 3D CSS animation coming out soon. So yeah, it's been a while since I did a code pen, except the weekly code pens I do on the key framers with my friend Shaw. Oh, yeah.
Tell, tell us about the key framers. Plug in as much as you want. Yeah, sure. So you can find more information on keyframe.rs.
It's a weekly podcast or not really a podcast. It's a live stream where we bring imaginative user interfaces to like using CSS HTML and a little bit of JavaScript. What we do is we find these really cool dribble animations, these advanced animations that we're like, Oh, how was that done? And we try to do them live on the air.
So we have absolutely no preparation whatsoever. We're just like, sit down and do this for a couple hours and see how far we get shots of very talented animator and very good with just all aspects of, you know, web design and development. So we get a lot of stuff done. And most of the time we do succeed in at least getting some form of the animation.
And most of the time we don't even use JavaScript all too much. Really? Like, so, yeah, what do you reach for? Like what's in your base toolkit when you're building this or just that decided per episode?
So in our toolkit, I mean, we try to do things as vanilla as possible. So our HTML is HTML. Our CSS is just because SAS is what we're used to using. And SAS is really helpful for nesting and variables and stuff like that, even though we try to use CSS variables as much as seemingly possible.
And JavaScript, we just we use Babel in case we want to use ES6, but we don't really use any libraries. I don't think we've even used a GSA on the show. Wow. Yeah.
That's cool. I'm gonna have to start watching something. I just subscribed. So it's a YouTube channel as well.
Just keep framers on YouTube. Yep. It's a YouTube channel, which is just a recording of all of our live streams. Eventually we do want to get into shorter form tutorials and just talking about all the things that we have both learned.
And we've worked on like whatever's in our toolbox and just digesting all of those for anyone who wants to learn. Cool. Yeah. And it's not basics.
It's pretty much if you want to animate anything in CSS, like even the really, really hard stuff, that's what we focus on. Really? Yeah. I'm always really impressed with all of the demo.
So super good work. And you you I do live stream this on Twitch as well. I see you got like the green screen background. Yep.
That's our main that's our main live stream. Oh, OK. OK. At least for now.
Yeah. Yeah. How do you like live streaming on Twitch? Because we've only so far done it on YouTube with OBS.
I don't know if you want to get into any of that. But what's your reactions and thoughts about Twitch first YouTube for streaming or if you have any? So we've actually been talking about moving to YouTube for streaming with Twitch. Shot takes care of all the OBS, all those technical details.
I really don't. I don't think my laptop could even live. I have one of those 2015 MacBook Pros, which used to be the best MacBook Pro. But yeah, yeah.
Now they have a 16 inch. So. Start to go find me. We need these episodes.
We do have a Patreon for computers and we use that to buy all your recording equipment like this microphone here. And I have a green screen as well. And basically everything to enhance the user viewing and listening experience. Totally.
Cool. Man, there's so much interesting stuff to ask you about. That's really cool. Let's take it back to a state and state machine.
Yeah. Sure. I think I'm most interested in about is usage with the stuff that you know, people are already using, right? Right.
So people using like Apollo or React or whatever. I see that there is like a React library, which really just looks like it adds a hook for X-State. But overall, within if you were saying, OK, I want to get into state machines, X-State seems like a good place to start. There's documentation.
There's libraries. How would I go about adding X-State to my current project regardless of what it's using? Is there like, does there need to be any sort of connection from X-State to something like Apollo or does X-State just sort of exist on its own and you can use your own things with X-State? That's a really good question.
I mean, obviously, if you have an open source project where you have a big dev team working, you know, 40 hours a week on it, then yes, you can make all these connectors for all these other libraries. But my philosophy, and I'm talking about Apollo in that case, but my philosophy is that nothing that, you know, you use like a library or whatever should really be framework specific. I want to make a React-style like a review or Angular specific. And so that's why X-State is in essence two things.
Number one, it's that pure function where you give it a state in an event and it gives you the next state. And number two, it's something where it's sort of like an event simulator that you could subscribe to, where instead of you asking it what the next state is, you just say, hey, I'm going to send you events calling .send on whatever. And I'm going to subscribe to whenever the state changes, and that's it. So just like any other library that might expose some sort of subscriber or event simulator interface, as long as you know the patterns of how do I retrieve values like from a subscription and put them in my framework, you could use this with literally any framework.
And that's one of the reasons why there are hooks for React, but that's just out of convenience. You don't need that. And so people have been asking, hey, why isn't there an adaptive reviewer Angular? And to be honest, like no offense to React, but it's because it just works.
You can just get on the object and subscribe to it and update the state and everything just works. So it's pretty, pretty straightforward. Nice. Cool.
That is so cool. I want to use this right now. And also, so one of the other biggest things about it, and this is, I've been asking like, why do people use actually, why are so many people interested in it all of a sudden? And a lot of people have told me that it's actually the visualizer.
So by defining, yeah, by defining your state machines with these objects, it's sort of like a JSON looking, you know, notation sort of thing that you just put in this machine function and it spits out a state machine for you. But you could copy and paste that exact same code, stick it onto xstate.js.org slash viz and see your state machine visualized. So imagine trying to do this with a reducer and Redux. Yeah.
You can't really do that. You can't really say if I'm in the state, what are the next possible states I could go to. But with X8, you can, because that's what state machines are all about, that determinism. That no matter what, when I'm in the state and this event happens, this is always going to be the next states.
Visualizer is great. My very first introduction to programming in general was through a language called Max MSP, which was visual programming in general. You basically set up these states and connected them via patch cables. And this is such a, I don't know if it's just because I learned like that, but looking at this, it makes the picture so clear to me, much more clear than looking at the JavaScript object.
Because here you see exactly what routes we're, what can route there, what are the events that take place. I think this visualizer is such a killer feature. And sometimes people make state machines and state charts that are complex and they're like, Hey, David, this is really confusing to look at in the visualizer. So I tell them, yeah, imagine not having that visualizer.
Imagine how complicated your code would be without state machines at all. Yeah, just trying to navigate those different states just via the code. Yeah. So really what we're hearing is that state machines are going to make your code less prone to errors.
However, your code is never going to be entirely free of errors and when your code inevitably has an error, you're going to want to check out one of our sponsors. Now that sponsor is a century. You're going to want to head over to century.io and use the coupon code a tasty treat, all our case, all one word, and you'll get two months for free of century. Now what is century?
Century is the place to know what's happening with your errors. You can track them, store them, attach them to releases, attach them to specific developers or even users on your site. And so this way, you can quickly add something as an issue into your GitHub application or anything else. It connects to every single service that you already use anyways.
And it makes finding and solving these things next to effortless. Now I use century myself in my own applications and I absolutely love being able to tag a specific release to a specific GitHub commit, allowing me to see whenever I introduce a bug in a specific commit. This is really just amazing and it really has refined our process. It is one of these tools that is absolutely essential in my mind.
So again, head on over to century.io coupon code tasty treat and get two months for free. Thank you so much for century for sponsoring. Yes. You think of some of these UI widgets on websites where you have uploaders or a multi-select drop down that you can do a fuzzy search on and that needs to fetch data.
There's so much that goes into some of these custom UI widgets that having a visualization of what goes on will really cover you, I think, in a lot of cases. I think this is so cool. Can we just paste your JSON into this website and then it just builds a visualizer frame? You paste the entire JavaScript.
It doesn't necessarily need to be JSON because it recognizes whatever you pass into that machine function. And then it does not only does it visualize, but you could actually simulate events. So you could click through the machine and just make sure that whatever you're doing matches the logic that you have inside your head. Yes.
Yeah. And you can reset it so you can click on fetch and then that puts it into loading and then you can either resolve it and then it puts it into success or you could reject it and that puts it into failure. But based on failure, then that opens up retry, which brings you back to loading. Yeah.
And then it counts the number of retries. That's so neat. So it expresses that complex logic because I mean, yeah, think about it's easy to make a tutorial in normal JavaScript like here's how to fetch data. But then someone asks you, how do I cancel that?
Like how do I provide cancel by? And it's like, oh, no, I don't know. But thinking about it this way, it makes, you know, it makes things like that easy or easier. I don't want to say easy.
Yeah. Would there ever be like a need or an idea of to do something the other way around where you just start clicking it together in the UI and then it kicks out some code? I'm working on that. I'm working on that slowly, but surely.
So early next year, hopefully I'll have something else. I would like that. Yeah. So I'm like a visual editor.
But the reason I did this the other way too is because it's a lot harder to convince developers like, hey, just play around with this. Oh, yeah. So I did not manage a code for you that you copy paste. Developers don't like that.
They have flashbacks to drinking paper. We're not going to acknowledge anything that's going to take our jobs. And if you're building this weekend, next day, job killer thing, then we don't want that. Exactly.
So that's why I did it this way for us. It's like, just here's a really simple way to code your state machines, and it happens to be visualizable. So or I don't even know if that's word visualizable. Visualizable.
It's on this podcast. You're even making a lot of words. Do a lot. I mean, we mispronounce everything.
Fantastic. It's got any other questions or do you have other stuff that we haven't covered yet? Just one thing, when you start learning about these state machines, you're not going to like it for one simple reason. That's that you're going to start realizing that there are so many things, pretty much everything on the web on your phone or whatever is a state machine.
You're going to be really frustrated because you're going to be like, this should be a state machine. Do you ever like, I don't know, use some sort of custom chat app where things just keep showing up on the bottom and then you're like, you know what, I want to see what message is on the top. So you scroll to the top. But once a new message comes in, it just scrolls you back down to the bottom and you're like, why is that?
Yeah. So just the tiniest things like that. That's super interesting. Yeah, it's true.
And I run into that enough already that I think of like, oh, that's like, you know, you can see an error happening on something and you can almost tell in your head what happened. And then now you're now you start thinking, I know what happened and I know how they should have done it. Exactly. Or when someone inevitably forgets to disable a button and you're like, why is this taking so long to load?
So you click it five times and then you realize like, oh, I just placed five orders of something when you want to place one or something silly like that. We have 40 undefined cards in our notion right now because of exactly that. Yeah. Until it showed up and then eventually 40 of them showed up.
So we can't always go for the happy path. We have to consider every single possible edge case that, you know, can happen. Oh, that's funny. Wow.
You seem to do a lot. Like do you have a day job as well? Or are you just doing this all day? No, I work at Microsoft.
And so I work with our commercial software engineering team where we do a lot of interesting projects with a lot of big companies. And with that, I don't always get the chance to work with JavaScript and TypeScript like right now I'm working with Python and some data science stuff. So that's my main job. Oh, cool.
That's pretty busy. I'm always amazed that when people have like they have a normal job and then they also have this like a podcast and the ability to keep up to date on the stuff and put out libraries and all that stuff. That's good for you. That's amazing.
Yeah, I wish I had more time. I would have gone 10 times as much things done if I had all the free time in the world to do it. But yeah. Cool.
Anything else to add there, Scott? I don't have anything. This has been really eliminating. I'm going to do a little demo in my code just to try it out.
I'm pumped. Awesome. Cool. All right.
So I have a quick pick. Yeah, I have a podcast that I've been really enjoying. I'm about halfway through it. It's one of those ones that's like 10 episodes or so and then it's done.
And so this is a podcast on a subject that I was not interested in and I'm not necessarily still interested in but the podcast itself is fascinating. It's called the big one and your survival guide. It's from KPPC Southern California public radio and it's all about the San Andreas fault and a potential devastating earthquake in LA. And basically it talks about what happened in the past with past earthquakes, what people's experiences were, how likely earthquakes are to happen and what could happen to you.
So it's basically giving you like really nice. Like I'm not in an earthquake zone here, but I still find the tips to be really super interesting. And they were just saying like, oh, if you have two bottles of water underneath your desk, you're way more likely to live. You're like 200% more likely to live in the event of an earthquake.
But the podcast itself is just really, really well done. It's a mixture of storytelling, scientific, like a lot of like really, really smart people on the topic of earthquakes in general, a little bit of the history of earthquakes in California, how play tech, comics work and all that stuff. And I found it to be absolutely super well done. So I'm really into it totally fascinated and a little bit terrified by it, but it's all super good.
It's called the big one. Beautiful. I know we sprung the sign. Do you have any six picks?
Yeah. So about a few days ago, there was a website by Lynn Fisher. I'm not sure if you're familiar with her. She makes these really amazing, well, she does a lot of single div CSS things, but she also has this website at Lynn and Tonic.com where it's basically always a masterclass in responsive design.
It's always the most amazing responsive designs that you could possibly do on the website. So I encourage you check that out and just. Oh, yeah, I follow on Twitter. So I'm aware.
These are great. That's cool. I just go to Lynn and Tonic.com and resize the browser. That's all I have to say for you.
Yeah. Cool. Sick pick. My sick pick today is going to be a documentary called American Factory.
And it's on Netflix and it goes into a Chinese company starting up a glass factory in Ohio. And I usually don't like when people come out swinging, they watch a one-hour documentary and then they have all these opinions because a lot of the documentaries on Netflix house. They're biased. They have somebody's money behind them.
And then people come out swinging and saying, just watch this documentary. It'll change your life. And this is not that kind of documentary. It's just a really interesting look into Chinese versus American culture.
It started to change my mind about unions. It gave me kind of an interesting look into what a union will do at a big factory like that. I just thought it was interesting all around. So check it out.
It's called American Factory. It's about a glass company called Fu Yao. Interesting. Yeah.
Good one. All right. This is the part where we do shameless plugs. You can plug anything and anything as many things as you possibly want without having any shame.
Do you have anything to plug, David? Yeah. Well, my XD library, of course. And also KeyFramers, KeyFram.rs, which is our weekly livestream for really cool CSS animations.
What is the .rs domain name? I think it's Russia or something like Russia. Yeah. I'm not too sure.
We had a podcast once where we did a game and Scott and I had a guess what the domain name was for. And how much it cost, which was rough. So it's Serbia and Kosovo. Ah, interesting.
I wouldn't have guessed that. Yeah. So ours stands for Repulica Serbia. Makes sense.
Yeah. Wow. You want to win the game there? Cool.
So check that out. We'll put links in the show notes to KeyFramers as well. I'm going to stick pick my beginner JavaScript course, which hopefully by the time you're watching this should be out at beginnerjavescript.com. This is a course on how to get absolute confidence in JavaScript from the ground up.
So totally beginner friendly also like brush up friendly if you're intermediate and you just want to make sure that you have a rock solid foundation in JavaScript. It's all project based learning or mostly project based learning. So we're actually building things and learning as we go rather than just sitting there and console logging, food bar, baths all day long. So check it out beginnerjavescript.com use syntax for 10 bucks off.
Yeah. I would like to plug my course on how to confalog food bar, it's available on now. I would like to plug my latest course is React and TypeScript for everyone. It is out now and it teaches you how to use TypeScript in React using React hooks and all of that great stuff that we know and love and react.
So it basically addresses all the real world situations that you're going to run into when you're trying to either type things like graphs or state or even just your straight up react components, props, default props and all that stuff in modern react and TypeScript. So check it out at leveluptutorials.com or slash pro sign up for the year and save 25%. That's all I got. Awesome.
All right. Thanks so much to David for joining us today and schooling us on late machines and all those bonus CSS tips. Very tasty. So thanks a lot.