Transcription: OpenAgents Episode 050 - Exploring HTMX in Laravel

Source: https://twitter.com/OpenAgentsInc/status/1747325914650710363 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 050: Exploring HTMX in Laravel We add HTMX to our main OpenAg... Upload date: 20240116 Transcription model: mlx-whisper/mlx-community/whisper-tiny Generated at: 2026-06-01T20:15:32Z

Machine-generated transcript. Review speaker labels and wording before using this as quote-grade source material.

[00:00] Christopher David: We're going to continue our HTMLX exploration and see if it can be appropriate to integrate

[00:07] Christopher David: into the core product at OpenAjins.com, which is a learnable application currently using

[00:14] Christopher David: inertia.

[00:18] Christopher David: That plug-in registry, we might want to pull that into the main website.

[00:25] Christopher David: That kind of assumes that we're able to get the X-Dism plug-in loading in PHP, which

[00:34] Christopher David: is still a maybe.

[00:36] Christopher David: There's a PHP SDK for it, but it's going to kind of enable it to work with Largo.

[00:41] Christopher David: But the HTMLX seems pretty cool, and the people that I've seen raving about it have

[00:47] Christopher David: it paired with a server framework like Django or Go, we used Rust in the last video, and

[00:55] Christopher David: I was curious what support there was for LargoVel, and there is a Largo HTMLX package

[01:01] Christopher David: as well as a great tutorial if anyone watching this just wants to learn basics of HTMLX

[01:08] Christopher David: with Largo Andre has a great tutorial here.

[01:11] Christopher David: I just watched some of this just kind of stepping through the basics of pulling in HTMLX

[01:16] Christopher David: and kind of converting forms to use HTMLX.

[01:21] Christopher David: My video does not use this plug-in, so I'm just going to dive in and just bang around

[01:27] Christopher David: and try getting this thing to work and just getting my bearings with HTMLX.

[01:34] Christopher David: The three main questions that I'm trying to answer are, and one, does this work with feature

[01:39] Christopher David: tests in the way that inertia tests don't.

[01:44] Christopher David: One kind of pet peeve with inertia is because inertia pages are rendered in JavaScript.

[01:51] Christopher David: The only way to test them are either with the browser tests like LargoVelDusk to let the

[01:57] Christopher David: whole page load which is not too slow for my purposes.

[02:02] Christopher David: I like the feature tests and ran the feature tests we often, but whereas with blade components

[02:11] Christopher David: like server-runner components you can assert the presence of HTML, so you can assert the

[02:16] Christopher David: values on the page with inertia with feature tests you can only assert that certain did

[02:21] Christopher David: is passed to a component.

[02:23] Christopher David: It's not as good as if you're able to assert what's actually on the page which I'd like

[02:28] Christopher David: to do in feature tests.

[02:32] Christopher David: If I can do that with HTMLX to kind of reenable that would be really cool.

[02:38] Christopher David: I want to make sure that this continues working with broadcasting or see how it works with

[02:43] Christopher David: broadcasting.

[02:44] Christopher David: The HTMLX site says that it works with server-set events which is what's underneath our

[02:49] Christopher David: current framework that powers Broadcast on LargoVel called LargoVelWave, which is

[02:59] Christopher David: painless LargoVel Broadcast with as you see.

[03:03] Christopher David: BobaBla working with the native reddest driver instead of kind of previous generation

[03:10] Christopher David: of broadcasting frameworks with LargoVelWave, I'll use to push her which I don't want

[03:14] Christopher David: to use if we don't have to.

[03:16] Christopher David: Make sure that that works and I'm just curious to kind of reason about how this might

[03:21] Christopher David: improve velocity as well as the simplicity of the codebase.

[03:27] Christopher David: Then reason about is it worth the trade-offs of having less built and react.

[03:35] Christopher David: We have a storybook with React, we've got some kind of react specific things, but

[03:39] Christopher David: we'll just kind of consider this trade-offs.

[03:42] Christopher David: I'm just going to probably open a new branch here and see what it feels like to install

[03:53] Christopher David: this plugin.

[03:55] Christopher David: Let's check out the example of the variable Htmx.

[04:08] Christopher David: The first thing we'll do is install LargoVelWave, which we'll go to the actual GitHub

[04:20] Christopher David: repo of this.

[04:22] Christopher David: Okay, LargoVelHtmx, LargoVelHupperLibraryVerHtmx.

[04:35] Christopher David: Pull that with composer, commits, all right, we'll publish the config, which is empty, I like

[04:49] Christopher David: that.

[04:54] Christopher David: No publisher, we'll be sure to show it.

[05:03] Christopher David: To install Htmx, please browse their documentation.

[05:06] Christopher David: Okay, we might have to do that as well.

[05:12] Christopher David: And then what should we build for testing purposes?

[05:21] Christopher David: Maybe like a profile page?

[05:31] Christopher David: Let's see, you can resolve it, instance of the Htmx request from the container.

[05:39] Christopher David: Response blah blah blah blah.

[05:57] Christopher David: This library also provides a basic blade extension to render template fragments.

[06:02] Christopher David: The library provides two new blade directives, fragment and fragment.

[06:16] Christopher David: So I'm coming into this with the disadvantage that I don't know Htmx at all, like I'm not

[06:22] Christopher David: familiar with any of this stuff.

[06:25] Christopher David: But that's okay.

[06:28] Christopher David: That hasn't stopped me before.

[06:31] Christopher David: Let's drive out via feature tests.

[06:34] Christopher David: Let's try to answer this first question as soon as we can, which is how does this work

[06:37] Christopher David: with tests?

[06:38] Christopher David: Let's just do some basic test scaffolding.

[06:41] Christopher David: I think I want to drive out like a completely empty, we'll do like, start the kind of basics

[06:52] Christopher David: of our social features here.

[06:54] Christopher David: Let's do the user profile, that'll have some good fields that we can do.

[06:58] Christopher David: So let's test that we can profile page returns to other status code.

[07:13] Christopher David: Okay.

[07:15] Christopher David: So first of all, connections are few, because I need to boot up DB engine.

[07:34] Christopher David: That is not the right factory syntax.

[07:45] Christopher David: Okay, returning 302, it's a redirect via the catch all.

[07:51] Christopher David: Let's go here and say, routes gets profile and I still make a profile controller.

[08:03] Christopher David: We'll have this be a purely HTML size controller.

[08:10] Christopher David: We'll go to the profile controller.

[08:20] Christopher David: Public function index return, I'll just do that.

[08:34] Christopher David: And here we'll go profile controller index.

[08:46] Christopher David: Okay, so we have profile page returns to 100.

[09:10] Christopher David: I can't only think of how to test the installation of HTML.

[09:18] Christopher David: Let's return a view.

[09:24] Christopher David: Can I do returns profile view?

[09:40] Christopher David: Let's do this.

[09:47] Christopher David: Let's go by these.

[09:53] Christopher David: All right, let's return a view called profile.

[10:02] Christopher David: Let's go make the view.

[10:04] Christopher David: It's been a while since I've worked on the views, bla bla views.

[10:08] Christopher David: So profile.play.php profile.

[10:15] Christopher David: Okay.

[10:17] Christopher David: Set up profile.

[10:23] Christopher David: So now if I go to that in my browser, I'll just have this new layer of ill heard thing.

[10:30] Christopher David: Let me see if it works.

[10:40] Christopher David: Open agents.test slash profile.

[10:54] Christopher David: I'm a profile.

[11:04] Christopher David: There we go.

[11:08] Christopher David: Okay.

[11:16] Christopher David: Oops.

[11:31] Christopher David: Okay.

[11:40] Christopher David: We got HTMLx in there.

[12:03] Christopher David: Should we have chatty gpt help us out here?

[12:17] Christopher David: Maybe I should log in.

[12:21] Christopher David: So I at least have a session.

[12:30] Christopher David: So, let's go.

[12:40] Christopher David: Let's go.

[12:50] Christopher David: See, I have to do it.

[12:54] Christopher David: I'm going to add it.

[13:00] Christopher David: Log in.

[13:10] Christopher David: Okay.

[13:15] Christopher David: Now, let's add another test for.

[13:30] Christopher David: Let's add another test.

[13:47] Christopher David: Let's add another test.

[14:02] Christopher David: Okay.

[14:17] Christopher David: Okay.

[14:27] Christopher David: Okay.

[14:42] Christopher David: Let's add another test.

[14:57] Christopher David: Page with a profile.

[15:12] Christopher David: Let's add a profile edit page.

[15:18] Christopher David: Let's see if it works.

[15:33] Christopher David: Here's what we have so far.

[15:42] Christopher David: And then we'll probably also use.

[15:57] Christopher David: So.

[16:14] Christopher David: Let's see.

[16:32] Christopher David: Let's see.

[16:42] Christopher David: Let's add another test.

[16:57] Christopher David: I thought it was logged in.

[17:12] Christopher David: Okay.

[17:13] Christopher David: Let's see.

[17:28] Christopher David: Let's see.

[17:42] Christopher David: Let's do it like that.

[18:03] Christopher David: Let's see.

[18:20] Christopher David: Let's see.

[18:30] Christopher David: Let's see.

[18:40] Christopher David: Let's see.

[18:55] Christopher David: Let's see.

[19:17] Christopher David: Let's see.

[19:27] Christopher David: Let's see.

[19:32] Christopher David: Let's see.

[19:42] Christopher David: Let's see.

[19:47] Christopher David: Let's see.

[19:59] Christopher David: Okay.

[20:29] Christopher David: Suggested colon username, what?

[20:49] Christopher David: What about auto complete equals email?

[20:53] Christopher David: Okay, good.

[20:58] Christopher David: Call us basic profile form.

[21:07] Christopher David: Okay, what else did it say we need to do?

[21:11] Christopher David: Just the end points update profile in the HX post attribute to match the route in your layer of what

[21:16] Christopher David: I don't have.

[21:17] Christopher David: I don't have that.

[21:19] Christopher David: Make sure that your layer of backup back end is set to set up to handle the asynchronous request

[21:25] Christopher David: and return the appropriate response.

[21:35] Christopher David: Okay.

[21:37] Christopher David: All right, so we'll add a route for update profile.

[22:07] Christopher David: I love deleting code and edit our code here to add profile updates.

[22:33] Christopher David: To add profile update the support request.

[22:40] Christopher David: Okay.

[22:50] Christopher David: Okay.

[23:00] Christopher David: Okay.

[23:07] Christopher David: It's nice that AI is kind of like a reason really well about layer of L.

[23:11] Christopher David: And apparently HTML2, I was worried that HTML2 wouldn't be like in the training set, but it apparently is.

[23:21] Christopher David: Now the request to validate we're going to have to do a different version of

[23:28] Christopher David: because that errors with JSON and we need to return HTML.

[23:35] Christopher David: But this is fine for now.

[23:42] Christopher David: Wow.

[23:51] Christopher David: And then let's see if code pilot can help us with a profile test lake.

[23:57] Christopher David: If the user can update their profile.

[24:21] Christopher David: Hopefully that just read the previous code.

[24:26] Christopher David: Okay. Request does not exist.

[24:33] Christopher David: Usually an HTTP request.

[24:39] Christopher David: Cool.

[24:41] Christopher David: Okay.

[24:48] Christopher David: Now the API endpoint works and the redirect works.

[25:01] Christopher David: That's not this tab situation here.

[25:09] Christopher David: What does it feel like on the, oh, every time I run the tests because they're using the same database after

[25:16] Christopher David: the real login.

[25:20] Christopher David: So let me go to my DB whatever.

[25:34] Christopher David: Table plus local users.

[25:40] Christopher David: All right.

[25:44] Christopher David: So let's say I want to set, I guess I have to do the whole thing.

[25:48] Christopher David: So Christopher David, I want to update my email to Chris at openagents.com.

[25:53] Christopher David: New password.

[25:54] Christopher David: Hello.

[25:55] Christopher David: What do three?

[25:56] Christopher David: Hello.

[25:57] Christopher David: One, two, three.

[26:02] Christopher David: The password you just used was found in a data breach.

[26:05] Christopher David: All right.

[26:06] Christopher David: Thank you.

[26:07] Christopher David: All right.

[26:09] Christopher David: So that worked.

[26:11] Christopher David: It update the email in the password name was the same.

[26:13] Christopher David: So that works.

[26:15] Christopher David: Now it returned.

[26:20] Christopher David: Like the entire.

[26:24] Christopher David: So each target, each swap.

[26:35] Christopher David: So I'm going to say.

[26:42] Christopher David: That works.

[26:46] Christopher David: Like it updated the database, but the HTML form.

[26:57] Christopher David: Just.

[27:02] Christopher David: Re-rendered kind of and had.

[27:06] Christopher David: Now shows edit profile twice because it was expecting HTML back.

[27:32] Christopher David: So just how we should use layer of LHTMX to.

[27:50] Christopher David: To address that issue.

[27:53] Christopher David: Here is its read link.

[27:59] Christopher David: Thank you.

[28:29] Christopher David: Okay.

[28:38] Christopher David: Interesting.

[28:59] Christopher David: There is my audio.

[29:09] Christopher David: There.

[29:13] Christopher David: Okay.

[29:15] Christopher David: I'm going to add it form.

[29:19] Christopher David: And then at the end of update.

[29:25] Christopher David: Return you render fragments.

[29:34] Christopher David: Yeah.

[29:35] Christopher David: So that's going to.

[29:38] Christopher David: Okay.

[30:08] Christopher David: Look.

[30:15] Christopher David: So that updated it.

[30:18] Christopher David: And we came back with just.

[30:23] Christopher David: And then deformed.

[30:24] Christopher David: That's pretty much what we'd expect.

[30:26] Christopher David: Now we want a message.

[30:29] Christopher David: But first.

[30:31] Christopher David: Let's update our test.

[30:33] Christopher David: So we're not.

[30:38] Christopher David: Certainly maybe it will eventually start the session.

[30:41] Christopher David: It's not a redirect.

[30:44] Christopher David: It's just a 200 right.

[30:46] Christopher David: Do we still have that down here?

[30:48] Christopher David: Yeah.

[30:49] Christopher David: I've did profile.

[30:50] Christopher David: It's just a response to 100.

[30:52] Christopher David: And the response is just a blurb of HTML.

[30:56] Christopher David: It feels wrong.

[30:58] Christopher David: I mean, it's not a problem.

[31:08] Christopher David: I'm going to add a text.

[31:12] Christopher David: And it's just a text.

[31:14] Christopher David: And it's just a text.

[31:16] Christopher David: And it's just a text.

[31:19] Christopher David: And it's just a text.

[31:21] Christopher David: And it's just a text.

[31:24] Christopher David: And it's just a text.

[31:27] Christopher David: And then in the past, we would use like a session very like a flash message.

[31:30] Christopher David: But if we're just returning HTML, we probably don't need to do that, right?

[31:34] Christopher David: But we do want to assert that we can see.

[31:44] Christopher David: So off the user can update their profile and see success message.

[31:52] Christopher David: So yes, this is this is cool.

[31:54] Christopher David: With inertia, I wouldn't be able to do this.

[31:56] Christopher David: I want to be able to assert that I can see profile update is successfully.

[32:02] Christopher David: Now that's going to fail.

[32:06] Christopher David: See, it has the whole HTML.

[32:08] Christopher David: That's nice.

[32:10] Christopher David: Okay.

[32:12] Christopher David: So here, Andre went over this in his video.

[32:16] Christopher David: So I'm going to look through here for.

[32:22] Christopher David: Where he sets up the contact, the message sends a social area.

[32:30] Christopher David: Indicator.

[32:32] Christopher David: Okay.

[32:33] Christopher David: And it's a loading.

[32:35] Christopher David: Any resources views folder?

[32:39] Christopher David: Test.played.phb.

[32:42] Christopher David: Let's just make this a div.

[32:44] Christopher David: Say I was.

[32:46] Christopher David: Click back to our welcome lead.

[32:50] Christopher David: How about right here?

[32:52] Christopher David: I mean, just make a span with a class of htmx indicator.

[32:57] Christopher David: And also give that an ID of indicator.

[33:02] Christopher David: Okay.

[33:03] Christopher David: And say loading.

[33:05] Christopher David: Okay.

[33:06] Christopher David: I'm going to follow this exactly because I want to load indicator too.

[33:20] Christopher David: Would we put that inside the form or outside the form?

[33:23] Christopher David: So I don't think Andre is going to use this fragment situation.

[33:25] Christopher David: But let's just try.

[33:27] Christopher David: Okay.

[33:28] Christopher David: So span class equals htmx indicator.

[33:33] Christopher David: ID equals indicator.

[33:36] Christopher David: Okay.

[33:37] Christopher David: So span class equals htmx indicator.

[33:47] Christopher David: ID equals indicator.

[33:50] Christopher David: Loading.

[33:54] Christopher David: And you can vote over your liking here.

[33:56] Christopher David: For example, an SVG spinner.

[33:58] Christopher David: But there should be okay for now.

[33:59] Christopher David: And within here, we can say hx indicator.

[34:05] Christopher David: Equals.

[34:06] Christopher David: Oh, we just created here.

[34:07] Christopher David: So in this case, indicator.

[34:11] Christopher David: Hx indicator equals indicator.

[34:34] Christopher David: And how about I put a sleep on here to simulate some like sleep.

[34:40] Christopher David: I'll try that too.

[34:43] Christopher David: So question number one is does our little indicator work.

[34:49] Christopher David: So.

[34:52] Christopher David: What if I first just do some bullshit here?

[34:55] Christopher David: Okay.

[34:57] Christopher David: Let's do this.

[34:58] Christopher David: Uh-huh.

[35:00] Christopher David: Uh-huh.

[35:02] Christopher David: Loading.

[35:05] Christopher David: Oh, it fades into.

[35:08] Christopher David: Awesome.

[35:10] Christopher David: Okay.

[35:11] Christopher David: So that work pretty much has what expected.

[35:13] Christopher David: I mean, I'll, you know, need to look better.

[35:15] Christopher David: But that works.

[35:17] Christopher David: So add.

[35:19] Christopher David: Loading indicator.

[35:22] Christopher David: Cool.

[35:24] Christopher David: Deep.

[35:25] Christopher David: Two.

[35:26] Christopher David: And now we should have that loading indicator.

[35:29] Christopher David: So if I refresh and click me.

[35:32] Christopher David: There's a loading indicator.

[35:38] Christopher David: And there is our response.

[35:40] Christopher David: So yeah, super simple to make adx calls all done through HTML attributes.

[35:44] Christopher David: Okay.

[35:45] Christopher David: Now let's take a look at a few examples.

[35:46] Christopher David: I have prepared here.

[35:47] Christopher David: So I have one prepared at contact.

[35:50] Christopher David: Let me just hide Dev tools here.

[35:52] Christopher David: There's these access message name here or my email.

[35:56] Christopher David: This is my message.

[35:58] Christopher David: Should work, but it's going to do a full page refresh and scroll back to the top.

[36:01] Christopher David: So it's not in age actual.

[36:04] Christopher David: So that did work.

[36:05] Christopher David: There's these access message and the email should have been sent out.

[36:08] Christopher David: But again, we have slash contact.

[36:10] Christopher David: That's just a view.

[36:12] Christopher David: And this is the post request that has a validation.

[36:15] Christopher David: Here's the mail actually being sent.

[36:18] Christopher David: And then we just return back with these access messages.

[36:21] Christopher David: Add an hx target.

[36:23] Christopher David: So what element do we want to replace?

[36:25] Christopher David: We'll make an element with an idea of response.

[36:29] Christopher David: So this will be where our success or error message goes.

[36:32] Christopher David: Hx swap.

[36:34] Christopher David: In this case, enter HTML or under HTML should work fine.

[36:37] Christopher David: I'll stick with enter HTML because that's what I have in my example.

[36:41] Christopher David: All right.

[36:42] Christopher David: So hang on a second.

[36:43] Christopher David: Hang on a second.

[36:44] Christopher David: Hmm.

[36:47] Christopher David: Because I think he's going to do things a little differently than us.

[36:55] Christopher David: Let's just ask chatty here.

[36:57] Christopher David: Now how can we render a message?

[37:01] Christopher David: Go file website, essentially on success.

[37:13] Christopher David: Now this wants us to do session flashing.

[37:27] Christopher David: And then we can see the message.

[37:37] Christopher David: So we can see the message.

[37:42] Christopher David: So we can see the message.

[37:44] Christopher David: So we can see the message.

[37:46] Christopher David: So we can see the message.

[37:49] Christopher David: So we can see the message.

[37:51] Christopher David: So we can see the message.

[37:53] Christopher David: So we can see the message.

[37:56] Christopher David: So we can see the message.

[37:59] Christopher David: So we can see the message.

[38:02] Christopher David: So we can see the message.

[38:05] Christopher David: So we can see the message.

[38:08] Christopher David: So we can see the message.

[38:11] Christopher David: So we can see the message.

[38:13] Christopher David: So we can see the message.

[38:15] Christopher David: So we can see the message.

[38:17] Christopher David: So we can see the message.

[38:19] Christopher David: So we can see the message.

[38:20] Christopher David: So we can see the message.

[38:22] Christopher David: So we can see the message.

[38:23] Christopher David: So we can see the message.

[38:24] Christopher David: So we can see the message.

[38:25] Christopher David: So we can see the message.

[38:27] Christopher David: So we can see the message.

[38:29] Christopher David: So we can see the message.

[38:31] Christopher David: So we can see the message.

[38:32] Christopher David: So we can see the message.

[38:33] Christopher David: So we can see the message.

[38:35] Christopher David: So we can see the message.

[38:37] Christopher David: So we can see the message.

[38:38] Christopher David: So we can see the message.

[38:40] Christopher David: So we can see the message.

[38:41] Christopher David: So we can see the message.

[38:42] Christopher David: So we can see the message.

[38:43] Christopher David: So we can see the message.

[38:44] Christopher David: So we can see the message.

[38:45] Christopher David: So we can see the message.

[38:46] Christopher David: So we can see the message.

[38:47] Christopher David: So we can see the message.

[38:48] Christopher David: So we can see the message.

[38:49] Christopher David: So we can see the message.

[38:50] Christopher David: So we can see the message.

[38:52] Christopher David: So we can see the message.

[38:53] Christopher David: So we can see the message.

[38:54] Christopher David: So we can see the message.

[38:55] Christopher David: So we can see the message.

[38:56] Christopher David: So we can see the message.

[38:58] Christopher David: So we can see the message.

[39:00] Christopher David: So we can see the message.

[39:01] Christopher David: So we can see the message.

[39:02] Christopher David: So we can see the message.

[39:03] Christopher David: So we can see the message.

[39:04] Christopher David: So we can see the message.

[39:05] Christopher David: So we can see the message.

[39:06] Christopher David: So we can see the message.

[39:07] Christopher David: So we can see the message.

[39:08] Christopher David: So we can see the message.

[39:09] Christopher David: So we can see the message.

[39:10] Christopher David: So we can see the message.

[39:11] Christopher David: So we can see the message.

[39:12] Christopher David: So we can see the message.

[39:13] Christopher David: So we can see the message.

[39:14] Christopher David: So we can see the message.

[39:15] Christopher David: So we can see the message.

[39:17] Christopher David: So we can see the message.

[39:19] Christopher David: So we can see the message.

[39:20] Christopher David: So we can see the message.

[39:21] Christopher David: So we can see the message.

[39:22] Christopher David: So we can see the message.

[39:23] Christopher David: So we can see the message.

[39:25] Christopher David: So we can see the message.

[39:26] Christopher David: So we can see the message.

[39:28] Christopher David: So we can see the message.

[39:30] Christopher David: So we can see the message.

[39:31] Christopher David: So we can see the message.

[39:33] Christopher David: So we can see the message.

[39:34] Christopher David: So we can see the message.

[39:35] Christopher David: So we can see the message.

[39:36] Christopher David: So we can see the message.

[39:37] Christopher David: So we can see the message.

[39:39] Christopher David: So we can see the message.

[39:40] Christopher David: So we can see the message.

[39:41] Christopher David: So we can see the message.

[39:43] Christopher David: So we can see the message.

[39:46] Christopher David: So we can see the message.

[39:47] Christopher David: So we can see the message.

[39:49] Christopher David: So we can see the message.

[39:51] Christopher David: So we can see the message.

[39:52] Christopher David: So we can see the message.

[39:53] Christopher David: So we can see the message.

[39:55] Christopher David: So we can see the message.

[39:58] Christopher David: So we can see the message.

[40:00] Christopher David: So we can see the message.

[40:01] Christopher David: So we can see the message.

[40:02] Christopher David: So we can see the message.

[40:03] Christopher David: So we can see the message.

[40:04] Christopher David: So we can see the message.

[40:05] Christopher David: So we can see the message.

[40:06] Christopher David: So we can see the message.

[40:07] Christopher David: So we can see the message.

[40:08] Christopher David: So we can see the message.

[39:59] Christopher David: There we go.

[40:17] Christopher David: I just didn't refresh the pitch.

[40:19] Christopher David: Okay.

[40:20] Christopher David: Profile updated successfully.

[40:23] Christopher David: Does my test pass?

[40:38] Christopher David: No, because this is JavaScript.

[40:51] Christopher David: Can we do that without JavaScript?

[41:04] Christopher David: Like, just have the blade component.

[41:07] Christopher David: See if there's a session variable.

[41:12] Christopher David: Like the session variables only set on the full page refresh?

[41:21] Christopher David: Okay.

[41:30] Christopher David: Or did it not work the first time?

[41:33] Christopher David: I think maybe I did refresh it.

[41:36] Christopher David: But the session was only set on the second time and that reloaded.

[41:41] Christopher David: Yeah, yeah, yeah.

[41:44] Christopher David: No, let's do that without session variables.

[41:49] Christopher David: Only return something from maybe just return a success message in HTML.

[42:05] Christopher David: I don't want to use JavaScript.

[42:15] Christopher David: I think that's a whole app.

[42:16] Christopher David: I'm here.

[42:17] Christopher David: This line right here.

[42:18] Christopher David: So instead of redirecting back, we need to return a view with the success message.

[42:22] Christopher David: Yeah.

[42:23] Christopher David: How about we do that?

[42:24] Christopher David: So say return view.

[42:26] Christopher David: Let's say contact success.

[42:29] Christopher David: Okay.

[42:30] Christopher David: And let's go ahead and create that.

[42:32] Christopher David: Okay, this one we had earlier for test duplicate contact success.

[42:39] Christopher David: Don't bleed.

[42:40] Christopher David: I'll be HP.

[42:50] Christopher David: Okay.

[42:55] Christopher David: Remember from his video that when he returns just a success message, it returns a success message.

[43:03] Christopher David: But like not the whole forms, we had to manually clear things out.

[43:08] Christopher David: And I believe I have a snippet here for a success message.

[43:12] Christopher David: I believe it's this one here.

[43:14] Christopher David: So we don't need.

[43:17] Christopher David: If session success message.

[43:23] Christopher David: Okay.

[43:27] Christopher David: So session does work fine.

[43:34] Christopher David: Let me just for now.

[43:37] Christopher David: I'll be profile success.

[43:39] Christopher David: Don't play that page.

[43:40] Christopher David: PNR just to be like that.

[43:42] Christopher David: If session success message.

[43:52] Christopher David: Did class equals BG green 100 text green 600 rounded PX to PPSP2.

[44:10] Christopher David: Okay.

[44:11] Christopher David: That's probably fine.

[44:14] Christopher David: Be decision variable or the check for it.

[44:17] Christopher David: Okay.

[44:27] Christopher David: Okay.

[44:32] Christopher David: Okay.

[44:40] Christopher David: So now in this case.

[44:47] Christopher David: Let's try this.

[44:51] Christopher David: I added a new.

[44:55] Christopher David: Oh, check that out.

[44:57] Christopher David: Okay.

[45:07] Christopher David: Okay.

[45:12] Christopher David: Okay.

[45:16] Christopher David: Okay.

[45:20] Christopher David: Okay.

[45:25] Christopher David: Okay.

[45:29] Christopher David: So give it to this bullshit.

[45:31] Christopher David: Thank you.

[45:33] Christopher David: No more JavaScript needed.

[45:43] Christopher David: Huh.

[45:51] Christopher David: Well, what I'll do for now is just grab that.

[45:58] Christopher David: But that there I don't think any that ID.

[46:04] Christopher David: And then I'll try in the controller.

[46:08] Christopher David: This thing here.

[46:15] Christopher David: Maybe.

[46:18] Christopher David: Okay.

[46:28] Christopher David: What does that do?

[46:48] Christopher David: Okay.

[47:08] Christopher David: If is set success message.

[47:15] Christopher David: I can't go look at that.

[47:28] Christopher David: It might be hallucinating.

[47:29] Christopher David: I'm going to check out the read meme.

[47:35] Christopher David: Render fragment.

[47:45] Christopher David: No compact contact.

[48:15] Christopher David: Oh, I don't have.

[48:22] Christopher David: Why don't they imagine?

[48:23] Christopher David: I don't have tail in install.

[48:29] Christopher David: Let me try this.

[48:31] Christopher David: Else.

[48:38] Christopher David: Let me just call this like nothing yet.

[48:42] Christopher David: Just do I have some kind of interaction there.

[48:46] Christopher David: Which I was going to get.

[48:48] Christopher David: Chris Chris.

[48:53] Christopher David: Yeah, it's replacing that.

[49:05] Christopher David: But.

[49:15] Christopher David: Oh, I see I'm guessing because this isn't being replaced with anything.

[49:24] Christopher David: So it's not like it's not reactive.

[49:28] Christopher David: Okay.

[49:38] Christopher David: So I think this suggestion from chat.

[49:47] Christopher David: I think this is wrong.

[49:55] Christopher David: Because that part of the view will not re-render.

[50:13] Christopher David: Please re-factor.

[50:14] Christopher David: So it will work.

[50:18] Christopher David: Please re-factor.

[50:19] Christopher David: So it will work.

[50:24] Christopher David: You're correct.

[50:25] Christopher David: If this is a success, my suggestion outside of the fragment.

[50:28] Christopher David: We'll not re-render with an HMX response.

[50:48] Christopher David: This time it just okay.

[50:49] Christopher David: Just puts it inside there.

[50:52] Christopher David: That might do it.

[50:55] Christopher David: So if it's set, move it inside fragment edit form.

[51:15] Christopher David: Okay.

[51:16] Christopher David: Let's try it again.

[51:22] Christopher David: There we go.

[51:31] Christopher David: Profile update successfully.

[51:34] Christopher David: And does our test pass.

[51:36] Christopher David: Yes, it does.

[51:38] Christopher David: Nice.

[51:39] Christopher David: That's nice.

[51:44] Christopher David: Form cement and test passes.

[51:50] Christopher David: Success.

[51:52] Christopher David: Okay.

[51:59] Christopher David: We've answered question number one.

[52:05] Christopher David: Question is can we do feature test assertions with the assert C like we're seeing things after some relevant thing like a server actually like a submit.

[52:18] Christopher David: The author user can update the profiler and see success message.

[52:22] Christopher David: We're asserting that we're seeing a particular HTML string and it's all just HTML.

[52:33] Christopher David: So that's really it.

[52:46] Christopher David: I'm leaning toward this is going to improve velocity and simplicity.

[52:51] Christopher David: Let's do one last test.

[52:54] Christopher David: And let's dig into the SSC a little bit.

[53:05] Christopher David: We'll make that pretty there.

[53:17] Christopher David: WebSockets HXWS.

[53:30] Christopher David: Server sent events.

[53:33] Christopher David: Okay.

[53:34] Christopher David: So we did a little bit of this in the last video.

[53:46] Christopher David: Okay.

[53:56] Christopher David: I'm going to start.

[54:00] Christopher David: Test our new chat.

[54:04] Christopher David: Let me start a new chat here.

[54:10] Christopher David: Let's see.

[54:20] Christopher David: Let's see.

[54:24] Christopher David: Let's see.

[54:26] Christopher David: Let's see.

[54:31] Christopher David: Let's see.

[54:34] Christopher David: Let's see.

[54:36] Christopher David: Let's see.

[54:39] Christopher David: Let's see.

[54:45] Christopher David: Let's see.

[54:49] Christopher David: Let's see.

[54:52] Christopher David: Let's see.

[54:54] Christopher David: Let's see.

[54:57] Christopher David: Let's see.

[55:00] Christopher David: Let's see.

[55:02] Christopher David: Let's see.

[55:05] Christopher David: Let's see.

[55:09] Christopher David: Let's see.

[55:12] Christopher David: Let's see.

[55:16] Christopher David: Let's see.

[55:20] Christopher David: Let's see.

[55:23] Christopher David: Let's see.

[55:26] Christopher David: Let's see.

[55:29] Christopher David: Let's see.

[55:31] Christopher David: Let's see.

[55:34] Christopher David: Let's see.

[55:36] Christopher David: Let's see.

[55:39] Christopher David: Let's see.

[55:42] Christopher David: Let's see.

[55:44] Christopher David: Let's see.

[55:46] Christopher David: Let's see.

[55:48] Christopher David: Let's see.

[55:51] Christopher David: Let's see.

[55:54] Christopher David: Let's see.

[55:57] Christopher David: Let's see.

[55:59] Christopher David: Let's see.

[56:00] Christopher David: Let's see.

[56:02] Christopher David: Let's see.

[56:04] Christopher David: Let's see.

[56:18] Christopher David: Let's see.

[56:19] Christopher David: Let's see.

[56:22] Christopher David: Let's see.

[56:25] Christopher David: Let's see.

[56:27] Christopher David: Let's see.

[56:30] Christopher David: Let's see.

[56:31] Christopher David: Let's see.

[56:34] Christopher David: Let's see.

[56:37] Christopher David: Let's see.

[56:39] Christopher David: Let's see.

[56:42] Christopher David: Let's see.

[56:43] Christopher David: Let's see.

[56:45] Christopher David: Let's see.

[56:48] Christopher David: Let's see.

[56:51] Christopher David: Let's see.

[56:53] Christopher David: Let's see.

[56:55] Christopher David: Let's see.

[56:56] Christopher David: Let's see.

[56:58] Christopher David: Let's see.

[57:00] Christopher David: Let's see.

[57:02] Christopher David: Let's see.

[57:03] Christopher David: Let's see.

[57:04] Christopher David: Let's see.

[57:06] Christopher David: Let's see.

[57:08] Christopher David: Let's see.

[57:10] Christopher David: Let's see.

[57:11] Christopher David: Let's see.

[57:12] Christopher David: Let's see.

[57:13] Christopher David: Let's see.

[57:14] Christopher David: Let's see.

[57:15] Christopher David: Let's see.

[57:16] Christopher David: Let's see.

[57:17] Christopher David: Let's see.

[57:19] Christopher David: Let's see.

[57:20] Christopher David: Let's see.

[57:21] Christopher David: Let's see.

[57:22] Christopher David: Let's see.

[57:23] Christopher David: Let's see.

[57:24] Christopher David: Let's see.

[57:25] Christopher David: Let's see.

[57:26] Christopher David: Let's see.

[57:27] Christopher David: Let's see.

[57:28] Christopher David: Let's see.

[57:29] Christopher David: Let's see.

[57:30] Christopher David: Let's see.

[57:31] Christopher David: Let's see.

[57:32] Christopher David: Let's see.

[57:33] Christopher David: Let's see.

[57:34] Christopher David: Let's see.

[57:35] Christopher David: Let's see.

[57:36] Christopher David: Let's see.

[57:37] Christopher David: Let's see.

[57:39] Christopher David: Let's see.

[57:40] Christopher David: Let's see.

[57:41] Christopher David: Let's see.

[57:42] Christopher David: Let's see.

[57:43] Christopher David: Let's see.

[57:45] Christopher David: Let's see.

[57:46] Christopher David: Let's see.

[57:47] Christopher David: Let's see.

[57:48] Christopher David: Let's see.

[57:49] Christopher David: Let's see.

[57:50] Christopher David: Let's see.

[57:51] Christopher David: Let's see.

[57:52] Christopher David: Let's see.

[57:53] Christopher David: Let's see.

[57:54] Christopher David: Let's see.

[57:55] Christopher David: Let's see.

[57:56] Christopher David: Let's see.

[57:57] Christopher David: Let's see.

[57:58] Christopher David: Let's see.

[57:59] Christopher David: Let's see.

[58:00] Christopher David: Let's see.

[58:01] Christopher David: Let's see.

[58:02] Christopher David: Let's see.

[58:03] Christopher David: Let's see.

[58:04] Christopher David: Let's see.

[58:05] Christopher David: Let's see.

[58:06] Christopher David: Let's see.

[58:07] Christopher David: Let's see.

[58:08] Christopher David: Let's see.

[58:09] Christopher David: Let's see.

[58:10] Christopher David: Let's see.

[58:11] Christopher David: Let's see.

[58:12] Christopher David: Let's see.

[58:13] Christopher David: Let's see.

[58:14] Christopher David: Let's see.

[58:15] Christopher David: Let's see.

[58:16] Christopher David: Let's see.

[58:17] Christopher David: Let's see.

[58:18] Christopher David: Let's see.

[58:19] Christopher David: Let's see.

[58:20] Christopher David: Let's see.

[58:21] Christopher David: Let's see.

[58:22] Christopher David: Let's see.

[58:23] Christopher David: Let's see.

[58:24] Christopher David: Let's see.

[58:25] Christopher David: Let's see.

[58:26] Christopher David: Let's see.

[58:27] Christopher David: Let's see.

[58:28] Christopher David: Let's see.

[58:29] Christopher David: Let's see.

[58:30] Christopher David: Let's see.

[58:31] Christopher David: Let's see.

[58:32] Christopher David: Let's see.

[58:33] Christopher David: Let's see.

[58:34] Christopher David: Let's see.

[58:35] Christopher David: Let's see.

[58:37] Christopher David: Let's see.

[58:38] Christopher David: Let's see.

[58:39] Christopher David: Let's see.

[58:40] Christopher David: Let's see.

[58:41] Christopher David: Let's see.

[58:42] Christopher David: Let's see.

[58:43] Christopher David: Let's see.

[58:44] Christopher David: Let's see.

[58:45] Christopher David: Let's see.

[58:46] Christopher David: Let's see.

[58:47] Christopher David: Let's see.

[58:48] Christopher David: Let's see.

[58:49] Christopher David: Let's see.

[58:50] Christopher David: Let's see.

[58:51] Christopher David: Let's see.

[58:52] Christopher David: Let's see.

[58:53] Christopher David: Let's see.

[58:54] Christopher David: Let's see.

[58:55] Christopher David: Let's see.

[58:56] Christopher David: Let's see.

[58:57] Christopher David: Let's see.

[58:58] Christopher David: Let's see.

[58:59] Christopher David: Let's see.

[59:00] Christopher David: Let's see.

[59:01] Christopher David: Let's see.

[59:02] Christopher David: Let's see.

[59:04] Christopher David: Let's see.

[59:05] Christopher David: Let's see.

[59:06] Christopher David: Let's see.

[59:07] Christopher David: Let's see.

[59:08] Christopher David: Let's see.

[59:09] Christopher David: Let's see.

[59:10] Christopher David: Let's see.

[59:11] Christopher David: Let's see.

[59:12] Christopher David: Let's see.

[59:13] Christopher David: Let's see.

[59:14] Christopher David: Let's see.

[59:15] Christopher David: Let's see.

[59:16] Christopher David: Let's see.

[59:17] Christopher David: Let's see.

[59:18] Christopher David: Let's see.

[59:19] Christopher David: Let's see.

[59:20] Christopher David: Let's see.

[59:21] Christopher David: Let's see.

[59:22] Christopher David: Let's see.

[59:23] Christopher David: Let's see.

[59:24] Christopher David: Let's see.

[59:25] Christopher David: Let's see.

[59:26] Christopher David: Let's see.

[59:28] Christopher David: Let's see.

[59:29] Christopher David: Let's see.

[59:30] Christopher David: Let's see.

[59:31] Christopher David: Let's see.

[59:32] Christopher David: Let's see.

[59:33] Christopher David: Let's see.

[59:34] Christopher David: Let's see.

[59:35] Christopher David: Let's see.

[59:36] Christopher David: Let's see.

[59:37] Christopher David: Let's see.

[59:38] Christopher David: Let's see.

[59:39] Christopher David: Let's see.

[59:40] Christopher David: Let's see.

[59:41] Christopher David: Let's see.

[59:42] Christopher David: Let's see.

[59:43] Christopher David: Let's see.

[59:44] Christopher David: Let's see.

[59:45] Christopher David: Let's see.

[59:46] Christopher David: Let's see.

[59:47] Christopher David: Let's see.

[59:48] Christopher David: Let's see.

[59:49] Christopher David: Let's see.

[59:50] Christopher David: Let's see.

[59:51] Christopher David: Let's see.

[59:52] Christopher David: Let's see.

[59:53] Christopher David: Let's see.

[59:54] Christopher David: Let's see.

[59:55] Christopher David: Let's see.

[59:56] Christopher David: Let's see.

[59:59] Christopher David: And we'll let the logic to send events using SSC.

[01:00:15] Christopher David: Okay, let's try this out.

[01:00:18] Christopher David: Didn't I used to have a test event fire?

[01:00:31] Christopher David: I thought I did.

[01:00:36] Christopher David: But I don't know where it is. Let me just test something.

[01:00:48] Christopher David: I think a test broadcast and point better.

[01:00:53] Christopher David: I'm gonna read this.

[01:01:06] Christopher David: All right, well.

[01:01:09] Christopher David: Let's make a simple event that will broadcast something.

[01:01:19] Christopher David: Right, right, right.

[01:01:29] Christopher David: Stream test.

[01:01:31] Christopher David: I'll put it stream.

[01:01:33] Christopher David: I'll just shove it in profile controller.

[01:01:36] Christopher David: Class.

[01:01:38] Christopher David: Stream test.

[01:01:44] Christopher David: Public function stream test will call this fire a test event broadcast.

[01:01:59] Christopher David: A test event.

[01:02:00] Christopher David: Where else do I broadcast?

[01:02:05] Christopher David: In bed and created.

[01:02:08] Christopher David: I don't know what I'm going to do that.

[01:02:15] Christopher David: Call this dummy events.

[01:02:21] Christopher David: I'll call this set.

[01:02:23] Christopher David: I don't want anything in the constructor.

[01:02:26] Christopher David: We'll broadcast on the public channel.

[01:02:30] Christopher David: Testing.

[01:02:33] Christopher David: Call it dummy events.

[01:02:39] Christopher David: Okay, so fire, new dummy events.

[01:02:51] Christopher David: Shit.

[01:02:53] Christopher David: Not there.

[01:02:57] Christopher David: Broadcast.

[01:03:03] Christopher David: New dummy events.

[01:03:11] Christopher David: And pull in.

[01:03:14] Christopher David: Events.

[01:03:17] Christopher David: dummy event.

[01:03:48] Christopher David: I thought something up, but the way of thing.

[01:03:56] Christopher David: Okay, so I think I've set up the end point to test.

[01:04:00] Christopher David: Set a test broadcast event.

[01:04:05] Christopher David: That slash stream.

[01:04:08] Christopher David: That goes into here.

[01:04:11] Christopher David: Broadcast and you dummy events on the channel testing.

[01:04:17] Christopher David: Now is our concept of.

[01:04:27] Christopher David: Channels in this.

[01:04:30] Christopher David: Let me recheck our code from last video.

[01:04:42] Christopher David: Swap colon message.

[01:04:46] Christopher David: I'm going to show you.

[01:04:50] Christopher David: I'm going to show you.

[01:04:56] Christopher David: I'm going to show you.

[01:05:01] Christopher David: I'm going to show you.

[01:05:06] Christopher David: I'm going to show you.

[01:05:12] Christopher David: I'm going to show you.

[01:05:21] Christopher David: I'm going to show you.

[01:05:26] Christopher David: I'm going to show you.

[01:05:31] Christopher David: I'm going to show you.

[01:05:36] Christopher David: I'm going to show you.

[01:05:46] Christopher David: I'm going to show you.

[01:05:51] Christopher David: I'm going to show you.

[01:05:56] Christopher David: I'm going to show you.

[01:06:01] Christopher David: I don't know that this has a concept of channels.

[01:06:29] Christopher David: I'm going to show you.

[01:06:39] Christopher David: I'm going to show you.

[01:06:49] Christopher David: I'm going to show you.

[01:07:19] Christopher David: I'm going to show you.

[01:07:31] Christopher David: This is basically.

[01:07:34] Christopher David: This doesn't know how wave works.

[01:07:38] Christopher David: It's guiding me to implement my own version of it.

[01:07:46] Christopher David: I'm going to show you.

[01:07:56] Christopher David: If this works, I can remove wave, that would be cool.

[01:08:01] Christopher David: Let's try this.

[01:08:05] Christopher David: This is like, oh, yeah, you can just do it yourself.

[01:08:11] Christopher David: Let's do this.

[01:08:23] Christopher David: Let's call this stream.

[01:08:28] Christopher David: For now, I'll just give it a profile control out here.

[01:08:34] Christopher David: And in public function stream, this just seems like it's not going to work.

[01:08:44] Christopher David: We're response.

[01:09:02] Christopher David: That'll fire out events.

[01:09:20] Christopher David: When the test event is broadcasted, the div will make a get request.

[01:09:24] Christopher David: I don't think it will.

[01:09:26] Christopher David: It's a good handler.

[01:09:41] Christopher David: I think it's a good handler.

[01:09:51] Christopher David: Okay.

[01:10:07] Christopher David: If this works the way that I'm like wanting its work, I will be shocked.

[01:10:14] Christopher David: Body.

[01:10:27] Christopher David: That's fun.

[01:10:32] Christopher David: Probably with wave, it's complex.

[01:10:47] Christopher David: So I'm logging.

[01:10:58] Christopher David: Does it not like 8,000, too?

[01:11:00] Christopher David: Let's go in there.

[01:11:15] Christopher David: Let me try clearing up port 8,000 here.

[01:11:33] Christopher David: Okay, I'm back to 8,000 to Zellamy login.

[01:11:44] Christopher David: Okay, here I am.

[01:11:53] Christopher David: Now, what's this?

[01:12:05] Christopher David: I'm streaming a bunch of errors.

[01:12:20] Christopher David: That's pretty cool.

[01:12:25] Christopher David: I'm just going to just blindly copy paste now.

[01:12:31] Christopher David: I'm still going to stuff this into the profile controller because I'm lazy.

[01:12:41] Christopher David: Okay, so handle update.

[01:12:54] Christopher David: Yeah.

[01:13:14] Christopher David: I'm going to type error.

[01:13:24] Christopher David: That's a good client error.

[01:13:53] Christopher David: Okay.

[01:14:03] Christopher David: Is this not the format that it expects?

[01:14:21] Christopher David: What does that do?

[01:14:24] Christopher David: Do I have it anywhere in here?

[01:14:54] Christopher David: Okay.

[01:15:04] Christopher David: What if I delete this?

[01:15:12] Christopher David: What is this?

[01:15:21] Christopher David: Okay, so what if I then go to this?

[01:15:36] Christopher David: That doesn't drive.

[01:15:51] Christopher David: Okay.

[01:16:21] Christopher David: Okay.

[01:16:49] Christopher David: Copy the whole thing.

[01:17:06] Christopher David: Fuck.

[01:17:36] Christopher David: Okay.

[01:18:01] Christopher David: Okay.

[01:18:11] Christopher David: Okay.

[01:18:41] Christopher David: Okay.

[01:19:11] Christopher David: Okay.

[01:19:21] Christopher David: Okay.

[01:19:46] Christopher David: Okay.

[01:20:59] Christopher David: Um... message hi. What happened? Something happened. Hi. Hi. What?

[01:21:24] Christopher David: Okay. Okay. This is the same behavior as the other one. That's good.

[01:21:49] Christopher David: Let's tell chat to you about our progress. Um... I got something working by changing it to this.

[01:22:15] Christopher David: And now I have this... the screen filling up with this. Please edit my code accordingly.

[01:22:45] Christopher David: Okay.

[01:23:11] Christopher David: Okay.

[01:23:41] Christopher David: But why do I still have these errors? What is this error?

[01:24:11] Christopher David: And I'm guessing that doesn't do anything right.

[01:24:31] Christopher David: So what message? What is swam as we even mean?

[01:25:01] Christopher David: Okay.

[01:25:28] Christopher David: So I have something working. Not sure how useful it is. What I really want is to be able to broadcast an event and have a go to the client.

[01:25:43] Christopher David: In kind of the way that I'm expecting. How can I make this SSC thing listen for events that I broadcast my dummy broadcast is not being

[01:26:11] Christopher David: reflected on the UI. An error occurred.

[01:26:41] Christopher David: Check for new events in the cache or database.

[01:27:06] Christopher David: Okay. So the answer here is basically you can implement your own broadcasting.

[01:27:20] Christopher David: I don't understand there of a way of being able to like harvest this for code.

[01:27:29] Christopher David: I'm going to put this as kind of like a definitely works.

[01:27:42] Christopher David: And I'm excited about the idea of like potentially removing wave and doing my own super purpose built thing.

[01:27:51] Christopher David: So there's more work to be done there.

[01:28:35] Christopher David: I don't know if I want to rewrite everything in this but I think I'm an experiment with building new code with HTML.

[01:28:55] Christopher David: So I'll deploy this and then off the users will be able to set an even password.

[01:29:05] Christopher David: Okay. That's good for now. We will continue our explorations soon.