Datastar signals
So last episode, I tried to sort of edit it and we can release it while I was literally driving somewhere and had to rush and I was at a cafe and recording. So, anyway, it was not, I I have since cleaned it up a bit, but it was kind of a mess. So I apologize, especially if that was your first episode. That was not typical of of how these episodes are. That was just a cross post from another podcast.
Speaker 1:Okay. Anyway, for the last few weeks, I've been working on adding some DataStar stuff to the HypeCP page and, basically just some DataStar demos. So DataStar is about to release a one point o, and I I think it's worth talking about what the differences are between DataStar and HTMX, as I see them right now. So first of all, I think DataStar DataStar bills itself as a hypermedia framework. So this is different than, you know, HTMX bills itself as a library.
Speaker 1:And I sort of would think of DataStar as a library to start, but I think framework maybe captures it a little more. Because if you go all in on DataStar, if you're using DataStar for your full app, which you don't have to, you can use it just for the front end part, which is, you know, something that I I think I'll actually be doing. But if you use it for the full app, then you are probably changing the return types, the return format of of your, you know, you're changing it from text HTML, your response format, I mean, from your HTTP responses, you're probably setting on your server to use the event stream because that allows you to really tap into, sending server sent events and sending signals and updating fragments of HTML like that. So if you're going all in on that, you're you're changing some of the way that the normal you know, we could say maybe maybe it shouldn't be normal. Maybe SSE should be the default.
Speaker 1:But for most people, I would say it's not. So this is this is kind of the big first mental hurdle for me on using DataStar. But that doing that will give you some really nice superpowers, which I will I will talk about in the future. You know, really, like, really leaning into server sent events, you can do some stuff that you just can't do, with anything else. And take a look at the bad apple example on the data start page.
Speaker 1:I think you can just Google that. I'll put a link in the in the show notes too. Bad apple data start. That to me is just a fascinating little piece, little demo, and and I am gonna do something like that. I'm gonna I'll show that on here.
Speaker 1:But the first thing I want to talk about with DataStar, having sort of gone gone deep into a little bit, is the DataStar signals. And this is what I think of as just their their front end reactivity options here. So you can basically just set a variable. This is like Alpine and, you know, some alternatives. Like, basically, if you're using HTMX or just, you know, plain vanilla HTML and all this kind of stuff, you need something to kind of handle the little bits of front end state, and maybe lots of front end state.
Speaker 1:You know, if you're all front end state, maybe just use React or Vue or something like that. But if you're primarily want to keep your state in the server and the back end, but you want to add a little bit of of interactivity, of reactivity, whatever it is, to your front end, then you're using something like Hyperscript or Alpine or Datastar. So nice thing about Datastar is you can just kind of, you know, use use the CDN, and then you set your variables by doing data dash signals. And you can just let's say your your variable is counter. So you're just, you know, keeping a counter.
Speaker 1:So how would you do that? You do data dash signals dash counter equals, and then you set the value, 100. So that's one way to do it, and you'll notice there's no, like, the data dash signals dash counter. That's all part of the attribute name. You can also do data dash signals equals, and then you do, you know, a JSON array, counter colon 100.
Speaker 1:So there's different ways to define your first signal here. If you're defining a bunch at once, you might wanna use the array, But you can use the dash notation. I really like the dash notation. It's sort of, you know, it it's just it's such a clean line, assuming that your variable name I think there's some gotchas in how you name the variables. So, like, if you have counter dash two or something or counter dash new or whatever.
Speaker 1:I I don't know if it likes that dash in the in the name, the counter dash new. You might need to sort of define that through the JSON. But, you know, some of that you can we can sort out. So, basically, you just define your counter. And then in the next line, you can do have a div with data text.
Speaker 1:So this is another, you know, data star attribute. Data text, you put that on the div, equals dollar sign counter. So you've defined that variable counter above in the signals, and now you can reference it in data text or in other things. Data show would would just kind of show it if it exists. Data show checks for a true false.
Speaker 1:So, but data text just puts the text of that counter. So now you put data text equals dollar sign counter, and now you have a div that shows you what the counter is at, and you set it to a hundred in the first line. And if you want to increment and decrement it, you can do data on data dash on dash click. So data on click, and you can use any event there. It doesn't have to be just click.
Speaker 1:Data on mouse over, data on mouse leave, data on whatever. So data on click equals and then counter minus minus. That would be to, you know, take one away from the counter. So you have a minus button that uses the data on click equals counter minus minus, and you have a plus button, data on click equals counter plus plus. So that's, you know, four lines, and it's just right there on the code.
Speaker 1:It's very easy to find these. You just, like, do a search for data dash. And it's you know, the locality of behavior is great. And if you decide at a later point this is the really cool thing about it. If you're using DATA STAR signals and you decide at some point that you want to have your server update those variables that are on your page, you can set that up.
Speaker 1:And that's what DATA STAR does by default if you are sort of using the full framework. Okay. Well, let's let's just do one more here, and kind of, like, you know, get in your code mind here. So a global toggle. So let's say you have a toggle that, you know, the classic one is like dark mode or something, but that's usually just one button.
Speaker 1:But let's say you have one value that's sort of on or off, but it needs to affect a bunch of different places on the page. Right? So this is like a global toggle. So the signals is nice for this because it's not exactly globally scoped. You have to put the variable.
Speaker 1:You have to define the variable before you use it, but that's kind of just, you know, programming one zero one. So in that way, it's scoped. But it it does affect your whole DOM, so it's not scoped to, you know, the specific place you define it. Okay. So how would you do a global toggle?
Speaker 1:Basically, you just do data dash signals dash toggle. I'm just gonna keep these names simple. So toggle, that's the variable name. So maybe I'll call it, like, I don't know. Anyway, we'll just call it toggle.
Speaker 1:So data dash signals dash toggle equals false. So we start it in the in the false position. And then anywhere that we want to use it after that, we can just use dollar sign toggle. So we could do data show equals dollar sign toggle. And then the place where we want to be able to toggle it, on that one, we would put data on click toggle equals not toggle, unless you have, like, a place where you just turn it on and then you can't turn it off again.
Speaker 1:But it's a toggle, so you need to do toggle equal dollar toggle equals, you know, exclamation dollar toggle. So dollar toggle equals not toggle. So it it whatever state it's in, it switches it. That's you know, you put that on click for however you wanna switch it. And then every place that uses that, you know, data show or data text or some check, you can use this variable however you want, and it's going to be updated with that global, you know, it's it's now a global variable, this signal that you've created for toggling.
Speaker 1:So that's just two examples. I like I said, I did a video on data star signals. If you wanna check out the actual you know, it's maybe easier. I I actually like doing code over just audio. Maybe you do too, but, there is some video to that just kinda goes over also how to do a drop down.
Speaker 1:And I also made some tabs, which I I haven't gone through how to do it, but there's a I'll put a link to, the DataStar signals tabs. It's a one page that has the tabs. It has the global, toggle. It has a counter, and it has a drop down. So just four basic things that you would probably use in most projects, and how to do them with Datastar signals.
Speaker 1:And it's kinda interesting. I think that, I would be curious to see, like, what what else should be on that page, basically. If, if you have any thoughts on what should be on that page, I wish I had an easy way to contact. I'm going to put up that, you had some nice feedback, area on Hype CP in the past, which I really want to get back up there because I got some really good comments and ideas from it. So but if you can find some way to reach out to me and let me know what else what else would you wanna see with these front end, you know, I was thinking maybe of of doing almost like a Rosetta Stone of these front end options.
Speaker 1:So Alpine, Vanilla JS, DataStar signals, and, Hyperscript. Like, what if there was a page that had some really you know, all the easy options that you'd want to do building these, you know, with these tools like the global toggle, the the tabs, all these basic things. But you could up at the top decide which front end, tool you'd like to demonstrate them in. And, you know, they all work the same in the end for the user, but then you could go through and look at the code and see which kind of one speaks to you more. So that's kind of what I'm thinking longer term, well, not longer term.
Speaker 1:This that's kinda what I'm thinking for for this. But, yeah, let me know what you'd wanna see on a page like that.
