Make a Self-Typing Header in Weweb in Under 15 minutes

So a fun thing that we might want to do is add, uh, kind of arbitrary JavaScript events into our, our WeWeb environment. Where we want to create a new project, and we're gonna have a project create, and we're gonna do blank, and we'll say select that, and we're going to call it type, you know, replacement test. And we want to have certain kinds of effects, and the effect that we're gonna go for today is gonna be one that actually over on state change homepage. Which is how we talk about how to solve the, and all the various cool things you might want to be replacing. Now this code is actually, it's going to be available to you as well. Is available, is just in JavaScript. Where there is just some code that will say, okay, here are the 6 things we want to be able to insert into our code. It's going to go in, into a span that is inside this item that is called type text. And we can just do a little inspect here. And we can actually see what this thing looks like. You can see how the type text over here keeps on replacing with this word span or whatever it else is. And then there's this cursor effect as well. That cursor here is what actually makes it look like it's typing or whatever. So that can be a cool effect for us to bring into play. How can we do this over in WeWeb? Now, there are a couple of things we can do. The first is we need to set up that we're going to have a title, right? So let's go over to the navigator and plus, and we're going to say we want to have a title. We're going to call it heading. Right. I say heading here. And we're going to say this heading is right now it's of type H3. We can make it into a type H1 to make it all nice and big or whatever, but it doesn't matter. And the, and for this, we're going to want to create like some, some text that can interpolate in. So here we're going to say, we'll tap and click on text and we're going to say, all right, so heading is create great no-code projects. Now. The trick is it doesn't actually know where any of the replacement would go at this point. So we have this challenge of, okay, we want this to be something that can get replaced. What's our, gonna be our hint in the object model of the, of the page? And if we were just to turn on the inspector for a second and just take a look at elements and say, let's take a look at what this guy looks like. You can just see this one big div that says Create Great No-Code Elements. There's nothing special inside it. Now. Once we have these little items down here, we can do things like set to bold, and this will have the effect of create great, and then it puts a strong around the no-code. Or we could get rid of the bold and we can add an italic, and that turns it into an em for emphasis element that's going to be inside there. But, but those don't actually give us much in the way of control. So how can we actually type and create that annotated HTML into there? And could we say span id equals type text? And the answer is no, because it looks exactly like this. I can go into preview mode or director mode and they both look just like I've got all this text in here. So let's copy this for a second. Let me show you how you can address this because that annotated text like you were seeing over in the inspector over here is something you do have control over. You just got to use PowerPlug. And if you'd use PowerPlug, we can say we're going to, you know, put it into this code into here. And we will say, and we'll say this is going to be a formula. And it's going to completely freak out on us. We're just going to refresh the page. Give this another try. Uh-huh, we're going to click this. And we're going to click on this. And we're going to say that, yeah, it's OK. Now we get a formula. And now we can copy this. In, but actually doesn't really know what to do with it. So we gotta put it in quotation marks. And then you'll notice that it really freaks out because now this, you see how the quotation mark is here? It, it thinks this thing is ending. And so to handle that, you just need to use these backslashes, which are the key over by the return key. And once we do that, it should work relatively. See how it says create value, da da da, with span ID. Now this is actually just the way that, uh, they work. They don't need to do any other special, uh, JavaScript stuff. You'll notice that like all of a sudden just says no code up here with this thing saying type text. Cool. Now what we've done is established that this is just going to be its own thing called type text. And if I wanted to do a style equals— what, wait, bold— that would probably allow us to make that into a bold heavy, whatever, like 600 or something. And that would eventually start to have an effect on it. But let's— obviously it's not working right now, so we're just going to back off of this for a second and say, okay, we're going to have the ID of type And that's gonna go into here. And we're gonna let that go for a second. Now what we need is some JavaScript and the way we can, we need some code that will allow it to start replacing the way we have over here. Now, the way that works on this site is just a little bit of code. And we got this over here in the script tag, which contains the content that we're gonna replace it with, which is all fine. And then, and then just a little bit of code down here, but whatever, about 40 lines of JavaScript code. That has the job of setting up the type and delete, where the type is the way it's going to add one character at a time, and the delete, which is also going to delete one character at a time. And you can see that it will— the logic underneath is just setting some timers and is kicking a setInterval to say please delete or to please keep on typing depending on whether it is still moving forward. Or coming backwards based on whether it's typed each word. There's a good deal of logic that goes into this, which is fun and good to read, and I will leave you to take a look at that through the comments. But the, but really what we wanna do right now is ask, how can we get this code over into WeWeb? And a reasonable way of doing that is through the page load event. And we're going to go over to page, we're gonna go over to home, we're gonna say trigger workflows, add a workflow, and we're going to add an action. The action we're going to add is a custom JavaScript action. Add script tag and the, and then we're gonna have some code in here. And so from over here we have in script tag, we have a special button called copy WeWeb snippet. And actually if I were just to copy the share link here, which is what you'll actually have in the, in the comments, you'll find that in here you also get that same button, right? Just says copy WeWeb snippet and we can click that button and it gives you some instructions. Open your page, select to create page load workflow, add a custom JavaScript option. Those are things we've done. Click where it says JavaScript and paste. Now we're gonna go back over to here and we're going to click where it says JavaScript and we're going to paste. And this stuff can look a little bit Greek, but basically its job is to add this code that we had in the, in the editor. It puts it directly into our WeWeb and makes it live. It will just do it as part of the editor. We don't have to do any publication or anything special like that. So we can do click, click out that, and then we'll add another action because the other thing about this code that we had in the, in the SayChange site is all this orangey bits, right? So this takes care of some of the styling that we want to have go along with it. We can do that directly inside WeWeb as well, but for simplicity's sake, we're just going to copy over some stuff that we want to use. And so here we're going to say add CSS script tag, and for that, we're going to use another script tag that you also will have access to, which is going to be under— which will be the typing header CSS. And we're going to copy the WeWeb snippet, gives the same set of instructions, and all we need to do is here click JS, paste. And we are done. We can run each of these. We're going to test the whole workflow. Bing, bing. And they all succeed, which is great. Won't pay attention to that though, because sometimes they don't succeed. And sometimes we have to also refresh the page, but let's see how we're working right now. And then we have create great no-code projects. What I'm going to propose we do right now is we're just going to refresh this page and we're going to go up to the browser, not the WeWeb one, right? Which we can do, but it just loads the data. This will reload the whole runtime, which includes loading that, the items that were inside that, that page block. Oh, hey, look, it works. And now a reasonable person says, how, what if we want to change some of this stuff? And you can do that, right? So if you have your own script tag somewhere, you can change this to, uh, be YouTube video enabled as being the first thing. And of course it's a little bit of code. We can do this all more in WeWebby stuff too, in order to, in order to enhance the control plane. We can talk about that more in a future video. But that becomes a thing that we have available to us. Oh, actually it won't work at all because this isn't shared. This will only work from. Inside the actual editor. So let's go back over to here and we will click on the JavaScript and script tag. The, the, there are other sites you can, uh, other systems you could use for generating this code. But I would encourage you to check out saychange.ai. And this is a tool that all saychange.ai members get. And we can say, okay, we're gonna say YouTube video tutorial. We web hacking JavaScript and CSS, whatever, like just sort of adding some additional elements in there. All of that's fine. We can also make it go faster or slower. And the really cool thing about this is as long as we're using the same JavaScript, the fact that it's all externally hosted means the only thing we need to do to take benefit of this is refresh this page. And once we refresh this page— oh, and of course you have to not break it at the same time. Yeah. Okay. There's no comma there. There we go. Let's go back to the type replacement test and we will refresh the page again. And we will ask what I did that was wrong. And, and refresh. There we go. You know how it's going much slower? That's a result of me changing the type speed. So if I change it back to the 150, which is 150 milliseconds per item, that's how long it'll take as well. That's how long the individual typing one character will take. We have it currently at 300 milliseconds. And if you want to go to 150 milliseconds, I'm gonna do a refresh. See how it goes faster? And now you get complete control. Now the other thing we can do here is we can go back over to the demo here, and I can change up the CSS. And instead of saying that I want this to be orange, I can make this purple and also make the cursor, I don't know, green in order to get some— and green. Because that way the cursor and the keyframe will be lined up. This is all a bit of animation for the blinking cursor effect for the typing. And now that this has automatically been saved, which again, it's just something the script tag does, we can refresh and we should see purple text and a green blinky. Okay, and of course there's no green blinky right now, I'm pretty sure, because if I were to click into it, the issue here is that it doesn't actually have, yeah, it doesn't have a cursor. yet. So let's tell to have a cursor span ID equals cursor. Once again, I'm using the backslash with those quotation marks. See? Now you see how the green thing just showed up as a result of the work that we just did. Span projects and Good, Good, good. Now let's refresh it and we'll allow that JavaScript to go do its business again. Okay. And now in about 13 minutes, we have added automatic typing and you have the ability to make those kinds of modifications now with being able to edit all of the CSS in terms of styling it up, as well as editing the way it works and how fast it goes and what text it would do, et cetera. And all of these tools will be, will be available for you to have on a read basis, just like with the shared things here. And if you want to edit these directly inside Script Tag Tool itself, that's all part of the StateChange community, whose website we were just doing a little emulation of, which is a community of people who are working on the hardest 5% of the, of the no-code projects that we're looking to ship. Please leave any thoughts you have in the comments, and thanks so much for watching.