Coding with Jon: Let's Build a Website! | episode 2

Things freeze. Oh, no. Okay. Foreign. I'm John McLaren. These are my amazing teammates, Dennis Hudson and AJ Laporte. Today we're going to be working on the HubSpot Developers website. You, AJ and Dennis are going to be a bunch of backseat developers. You can make suggestions, you can ask questions. This is unscripted. There will be typos, there will be bugs, and that's okay because we'll squash them together. This stream, however, is going to be special because something awesome and unexpected happened.

I'm excited, John.

I'm excited. If you watched the prior stream, you may have heard me mention an Easter egg that will be in the developer's website. That Easter egg comes in the form of these dots and dashes, which are an abstract reference of code, but they're also something else. Without further ado, I want to bring on a familiar face from the community. You know him as the host of Developer Hugs and a Friendly Face in our developer Slack, Anton Bujanovsky. Anton, thank you for joining us. I know it's dinner time. Before we get into the code, I was wondering if you could tell us a little bit about what you do for work.

Yeah, sure. So, currently I am founding my own company and which will be focusing on HubSpot development. So stay tuned and if you like to know a lot more, follow me on LinkedIn.

Awesome. That was exactly what I was going to ask is. If people want to keep up with the cool things that you're doing, what would folks want to do and is Follow him on LinkedIn?

Follow him?

Yes. Not follow at him, at Antonovsky. All right. Him might be a music artist or something, I don't know. Anyhow, so I think it's time that we. We talk a little bit about what you built before we get into the weeds of the actual code. What does the module do that you created?

Basically, what this module does is it takes the headline, which is a string, and converts it into a MOS code string. And then there's a little bit of extra magic happening in the background. So it looks like the prototype that your designer come up with. So basically, if you want to.

If you want to show your screen, that would be. Yes.

Sure. So is it on? I don't know. Yes, I think.

There we go. There we go.

Oh, yeah. Okay. Awesome. Yeah, yeah, this is.

It's currently showing. It's currently showing the stream, so.

Right. So this is just the thing I started with. So this is the prototype you showed in the previous stream. So everybody who's watching and you haven't Seen this previous stream. Watch it after this stream. So it's quite interesting. And the first time I saw this, the first idea was like, okay, this is Morse code.

And.

If we take a look at the module. So this is just a plain demo of how I have created that whole thing. So in the first step it was like, okay, we take the. This headline, which is a string, and we can type like hey, YouTube. And this will automatically translate every character into mouse character.

So cool. Very cool.

From a design perspective, it doesn't look very good. Right. Because dots and dashes have different heights and it's very chaotic. Also the slash marks the space. And this like, I mean for Morse code it works, but as a design element, this doesn't work. So in the second step, as I have mentioned a few minutes ago, I have come up with a bit of magic, I would say. So if we take a look at this, this is basically the final code. And what this does is it takes every dot and replaces it with a span called dot. And and for every dash, it also replaces it with a span called dash. Pretty obvious, right? And also a bit of styling and a little more magic. And then, yeah, I mean it's completely customizable, completely flexible. I mean this still works like, hey, John. Right. So it automatically creates the Morse code based off the input. And yeah.

I don't know if there's like a term for programmatic images that are not like AI generated, but this is like a whole territory here. This is amazing.

Yeah. I'm curious actually, should there be some alt text or some way to have SEO juice or is Google going to say, oh, this is Morse code and I understand it and I'm going to crawl this.

We could add some screen reader talk for sure. That's one option.

With it being a design element though, would that take away from the. Because you would have to mark that as a presentation layer.

Right. If, if I'm so.

My accessibility.

Yes, remembering that correctly. So something that, that we'll probably do later in this stream here is I'll. We'll be making the actual like graphic, if you want to call it that. Like the visual part of it be aria hidden because it's just noise and it will look like text. Well, it'll look like they're supposed to be tucks to a screen reader because it's using spans. But we can fix that by just doing an aria hidden on it. Yeah. And I also, I had been thinking in my head about how we would do this sort of thing and I think that Anton, you actually ended up doing something smarter than I was originally thinking of doing. So I was originally like, it'd be cool if we could generate like the inner part of like an svg. But then I came to a realization. You know what the problem with that is? The problem is SVGs resize. We'd end up having a bit of a visual issue to solve there. So I think we're probably going to keep it with the span tags method that you have going. Yeah. Can we see it? Beautiful, man.

Can we. Can we see the code?

I mean, I can show it. It's a bit of.

Sorry about pushing. Very excited.

Okay, sure.

So, okay.

I was just gonna say for context, everyone, literally Anton showed us this yesterday and we were like, let's talk about it for an hour. Ish. Tomorrow. So like that. That's how. How live. This is. It's. It was amazing. And we were like, we're gonna do this. We're gonna go for it. So if you don't mind walking us through.

Yeah, it was. I mean, basically, I've done that in a long night coding action with a lot of energy drinks. So if we take just at the JavaScript, I mean, it takes Morse code.

Or.

It converts every letter to equivalent Morse code. And then I'm playing around with styling classes because there are some other things pretty built in inside this module to provide the page editor with more flexibility. And basically it's like, okay, we split each word into characters and then once we have the mouse code, we translate or transform the replace. Now we have it. So it just replaces the dot with span like I mentioned. And if there's a space, there's just a spacing class after that as an input for the headline the script runs through. And also something that I've built in a few hours ago is I've put in a MOS iteration. So that means if we take a look at the more advanced step.

Your. Your audio just cut out. Ant. Still nothing coming through. There you are, my friend.

There we go.

Awesome. So on my guide, everything's fine. Weekend. Okay. So a little bit of CSS magic and it looks like this. And also for the iterations, we have an iteration counter. So for instance, we can put it into five and then it will look like this. Or if you need to, you can put. You could put up 20 and also something like, okay, changing the colors. So let's do this for the light colors.

And now you're showing off new theme instead of dark theme. It's just going to be the hot pink Barbie theme. Yeah.

How long did this take you to build?

A few hours.

From something that was literally just basically a screenshot from the last session we did to now an hour to build. This is awesome. This is so cool.

Yeah, thank you.

The Morse code. I think we're replacing the blink HTML tag at some point in time.

So.

Also something I've done here to get all the colors right. And yeah, you could do it with a root element and variables in CSS for sure, but this is a closed module itself and not a whole theme. If it would be a whole theme, I wouldn't put those variables into this module and store them somewhere else.

You probably put them in an include.

Yeah. Something I'm doing right now is I have. So for my private project, I have variables file where I store all variables for the whole theme and I'm just creating a bunch of CSS classes and I'm just reusing all the CSS classes throughout all of the modules and functions and whatnot. But I think this could be a topic for a different stream because it's not about how I write stuff. So therefore, basically just to close this topic, I have all the colors set in an array and then just a simple. For loop, creating colors and background colors and then selecting everything.

That's awesome. I like your approach to doing those colors, even though we're not deeply talking about it. Like setting them in an object. That's a really handy way to. Instead of having to name space your variables to just have them in an object like that. That's beautiful. I should. Like, I'm now regretting that I didn't do that in this theme. So depending on how much it bugs me, maybe I'm going to change that. But yeah, we can talk about that. Well, I think maybe. Well, first, I guess we could point out if you show your code again, or I can show my screen and we can talk. Let's see. Either one you're generating, based on every single item in there, you're generating a CSS class automatically and specifying its RGB value, which I believe. I believe that RGB might also work with the new CSS color. There's new new CSS properties for modifying colors. Or actually they're more functions. They're functions.

You mean the color contrast one?

Yeah, there's color contrast. There's another one that lets you change what the hue is and things like that. It's. It's nuts. But totally different topic for another time. How'd you come up with those RGB values? I was curious about that too. When I first saw this, I was like, holy moly. He went, he went all out. He found all of our colors. I was shocked.

I mean it's something important, I would say. And I'm seeing right now that my camera died. And again.

We can see you. Yeah, you're moving.

Yeah, it's back again in a few seconds. Awesome. And as For Carter, the RGB values are. I mean there's a whole PDF file from HubSpot where all the colors are defined.

Anton's referring to. There is. If you're a HubSpot partner, there is access to HubSpot brand HubSpot brand guide basically that has the colors so.

Or you just call Anton and he'll send you this object.

Apparently. Apparently. Well, so what I thought would be fun is to take what you've done and actually integrate it directly into the HubSpot developers website that we're building. Because I think what you did is amazing. It is right up the alley of what we were, what we had chatted about in the prior stream and yeah, it's awesome. So I will share my screen real quick. There we go. So this is Anton's module in the new HubSpot developers website. There might be a little bit of a width issue. It'll be resolved later. More I care about making this look super cool. How do you feel about us animating those dots and dashes, Anton? I realized I didn't ask a single. I mean, what would you like the community build next? Carter says, well, if you want to list the modules, I mean.

I think.

That, I think that's a good call though.

Carter, like, honestly we love seeing what people build. So if you see that there's an like something on this that would be like, man, it'd be really cool if you guys did something like this and like you got a demo of it. We're, we're more than happy to review that and look at it because we are always interested in seeing what people. People are building.

Absolutely. Animation on a dev site. Oh, but you haven't seen it, Carter. You haven't seen it. I'm thinking we can do this tastefully. Doesn't need to be over the top. We might not even go as far as adding green sock or anything like that. We might just keep it simple, see CSS animation and maybe a little subtle. Here's what I'm thinking I'm in for. Tastefully. Yes. This is what I'm thinking so far. This is Anton's module code. We're going to go to the bottom here. And we will start with some keyframes that key frame, wave, vocab, wave. So what I'm currently thinking. What I'm currently thinking is it'd be kind of neat if we could make it so that these dots would do kind of like a wave pattern. So it's hard to visually show it, but. Or like hand gesture it. But like the first column of dots would. Would like get a little bit bigger and then it would shrink back and then the second column would get bigger and shrink back kind of a thing. But keep it somewhat subtle. I'll make it exaggerated for the first bit of it.

But would it be once or are you going to repeat it?

I think we will have it loop perpetually. I mean, if. If we think it looks silly having it go perpetually or it's not subtle at all, then. Then maybe, maybe we'll want to tone it down. But so what I'm thinking is, personally.

I would say like maybe only twice because at least for me, when I'm reading things, if it's constant, that's going to be.

I'm there with you. Also, what about a hover? Like on hover, it could do its effect.

That could be pretty cool.

That could be interesting. That makes me think of another idea. We could make it so that on hover of the whole module or focus within, it would trigger that animation or covering the cta.

Like, then it would cause that to go. I don't, I don't, I don't. I'm just throwing out an idea. I don't know if it's actually throw them out.

Let's see. Once a second, four words and wave. Oh, and infinite. I'm going off memory here, so I might end up needing to tweak what this actually looks like. But let's add an actual change here. So transform scale. We'll go like one point, we'll do two. It'll be exaggerated, we'll tweak it afterwards. But make this one zero or not zero one just so that it's a default. And we will do the exact same here for the 100. And if it's bugging you, you don't like, you're like, why isn't there a semicolon there? Technically you don't need it. Just pro tip, it's not a performance optimization thing. Don't be like leaving somebody with a CSS file that doesn't have semicolons. It only applies to the last item in a selector. All right, let's see here. Our animation is not running. Do I have this auto uploading? Yes, it looks like it. Next step is figuring out is the Morse code getting that animation. So it should be span. Ah, here's the silly thing. I did it on the entire container. That is not what I want. And I'm actually surprised. It doesn't look atrocious. I would expect it to do this. If I refresh, what happens? Does it do it? No. I don't know. Something's not triggering it. So anyways, that's fine. We didn't want it to do that on the whole thing. I was getting ahead of myself. We want to target single morphs and we want it to children. And the children vary in name because there is the spaces. We're just going to target the first child of Morse. So single. Single source and do that. All right. And then we will add this animation to them. Save it. Uploaded. Okay. What is now keeping it from animating animation wave one second. As I said, we might have to. We might have to look at some docs. Transform. All right. What's the animation? Maybe I have a typo in my actual animation here. I'm not seeing the key frames. You know what? I bet it's a key frames.

Yeah, there you go.

As I said, we will have some typos. Now we have this weird heartbeat thing. Almost looks like a weird flag. Let's do this. I don't want it to be this weird pulsing, living creature looking thing. I want it to do more of that wave effect. I think we're going to dive into the JavaScript that Anton wrote and see if we can tweak it a little bit. So the actual code for displaying here. Let me collapse this. The actual code for displaying these spans is right here. So we have an index. We'll do a. It doesn't really matter, but let's. And then what should we name this? We'll name it animation delay. And there is another way of writing this, but I'm going to be lazy about it. So we're going to do index times. It's 12 o'. Clock. Thanks. It's 12 o' clock, in case you didn't know.

Keep forgetting to turn that. Those that don't know. You can make the Mac announce the time. I have it announce every hour for me because I constantly lose track of time while coding or building. So it's one of those things where like, you know, clock out of sight, out of mind. So at least this way it's like, oh, it's three o'.

Clock.

My gay better go Pick up my kids from school.

Like AJ's known for forgetting his kids. Just so everyone know.

All right, so what I did here is I am simply creating an animation delay and basically I am grabbing the current index in this for loop of these Morse code characters and then I am adding a 0.5, not adding, multiplying 0.5 times that. And what this is going to be is this is going to be a delay that we're going to add to the actual span elements. So these elements. And it will cause. It'll start to give us more of a wave effect. We'll probably have to tweak it from there, but that's all right. And then this is not the most efficient way of doing this. This is how my brain thought of it right now is to add the ask character that represents seconds and I just did it as another variable and combined. So probably someone who's not a JavaScript first developer is going to look at this and be like, this is gross. But that's all right. All right, so now reading Anton's code. What was that?

It's a technical term. This is gross.

Yes. So now I can see that. What?

John, to interrupt real quick, success criteria 2.3.2 in the WCAG 3 flashes. The web pages do not contain anything that flashes more than three times in one second period.

Wow. All right, all right, I. I appreciate that. We will take that into account. Keep it. Keep that page.

I knew there was something and I was like, I got like, I. I.

Have to find where this was at. Like, yes, keep that page up because I'm probably going to end up asking you what the requirement was again.

I'm going to send it to you in slack here.

There goes my earbud. Here's what we're going to do. Anton created a span element and we're setting a class name and he's looping through and based on what character it is, he's determining what class it gets. We're going to. Below this, we're going to go span styles and then we're going to do animation delay. Then we're going to do equals animation delay. String that one. Now that I save. We'll see if this worked here. That was not at all what I intended. There must be a JavaScript error. All right. Cannot set properties. Setting animation delay. Let's see. What am I doing wrong? Animation delay. Oh, okay. I think the issue was a typo again. Apparently I don't know when to add a S and when not to add an S. Oh, man. What Happened. Oh, there we go. Now it worked. All right, there we go. This is starting to look good. It looks like a weird inch worm thing scares me.

I mean, if you really want to just be Pac man and you can just.

Looks good. Send it live. Yeah, we're good here. Love it. That is the question. All right, before we go too far, Anton, you showed off that we can increase the number of these rows. How did you do that? Was it something. Ah, number of iterations. Nice. All right then. Are you setting that somewhere here?

And the line.

Oh, I am blind. Okay. Oh, and you're passing it through the modules. Fields. It looks like maybe. Maybe or no.

Yes.

Okay.

I have the fields at top.

I don't know if you're aware, John, but the two squiggly braces, that's Hubble.

I don't know. Whoa. Oh, no. Okay, you had said it's coming from here. Is it a style field?

Yes.

Ah, Okay. I was totally blind looking in the wrong place. Here we go. Sweet. Let's dial it up.

And thank you for using style fields appropriately, Anton.

Thank you. That is. Yes. Oh, this is glorious. This is glorious. I love this, Anton. All right, we will close that. All right, so let's make this a little bit, like, weird. Less weirdly wormy. I don't know what this is.

It's eating the. It scares me for some. I don't know. It gives me. It makes me anxious. John, please change the size of that.

I'm going to slide this over so that it's easier to see this as it's going. Here's one thing that I'm going to do. There is an animation delay set on all of those spans. Just in case someone didn't actually see what was happening, what that JavaScript actually did. Let's quick take a look. As you can see, these are all those fan elements and we are just adding an animation delay. And because we use JavaScript in that for loop, we are just multiplying 0.5 seconds by whatever the iteration is, making it so that every single one has a sequential delay to it. I think a way of solving this and I think I can just do it like this. 25. Make this 75. We're going to be adding kind of like a delay within the animation itself. So. Okay, that's different. Not quite. Not quite what I was envisioning. So let's see, what else can we do? Well, for one, let's maybe tone it down a little bit. Even though this is fun, having it be huge, maybe make it like 1.5. Something that would be more realistic for what we'd have in the site. Because we want this to feel fun and subtle, not like you can't look at anything else on the page anymore. Let's try 1.16. There we go. That's pretty nice and subtle. I think we can. What are you gonna say? How about.

How about adding a bit of easing?

Easing, all right.

Yeah, that could help.

Within keyframes, easing gets tricky.

No, no, in the animation.

Oh, in the animation property itself.

Yeah. Or something.

I'm going off memory there. So let's see. Yeah, let's actually check that it actually did it properly. So we'll go to the animation. Okay. We want the actual animation property. Animation, delay animation. Okay. It doesn't look like that. It works. You saw ease in there.

Yeah, yeah, it's. It's.

Oh, yeah, yeah. Okay. Okay. So it's just super subtle. Okay. Okay.

I think we pick out the infinite. So it's just. Each one's just going through that animation repeatedly.

Right.

So on. On a per span basis. So if you only have it do it once, won't it go across?

Yeah, it should go across. And I'm going to take into account what AJ had said and put a 3 for. It should only iterate 3 times. Because I think, like, if it only happens once. Well, I don't know. What do you guys think? Should it only happen just once? So, like, second you load the page, the animation fires and it's done.

Can we see it?

I'm watching the chat too. Can we see it? Sure, let's. Let's actually look at it instead of just talk about it. What do you think? Chat? See? Both. All right, we'll. We'll make it like three, because I think that's what he. What AJ said it was for. I mean, I would like there to be a better spacing between the animation kicking back up, but it's tricky to get that balance right. So I don't know, it kind of looked better to me without only going once. And if we make this a little bit more obvious, some things happening, like filter brightness, I'm going to have to run all of this by our designer. She may not love this, like, the brightness change part of this, and may have some feedback on the animation. So if it looks different from the stream and when it's live on the website, we're just trying to make sure things still look properly HubSpot and not just improv down a live stream. Ooh, that's looking cool. I like that.

Yeah. Nice.

I like it. Fun trick. So if you want to make an animation work well for. So the best practice when you're doing animations is to have a fallback that is a reduced motion version. And reduced motion does not what a lot of folks think. They think that reduced motion means no motion at all. That's not technically what it means. The unfortunate part is it's a little bit subjective. It basically means that you should not make your animation be something that is jarring. It should not be something that your eye will just jump to and you can't. If you have some form of visual impairment, you would not be able to focus on something else, etc. So we can change this fairly easily. I might have a typo here. We'll see. We can do edia and then in parentheses, prefers reduced motion. Now, most people would start, stop right here and do their media query that way. That's not how I prefer to do it. So I actually like to write it like this. So I'll do no preference. And then we will drop this version of keyframes in there and then we'll also have keyframes outside. What we'll do is we will get rid of the transform because that's the most jarring part of this. And we'll see what it looks like with just the brightness change. In my opinion, anything that changes, the height, width and the layout positioning of something, that's what's jarring. Whereas changing brightness or opacity is not that jarring. First, I'll save. Make sure that it doesn't actually change. This is an ARC bug that's driven me nuts lately for some reason. If you have the DEV tools open. If you have the DEV tools open. Yeah. Don't tell Dennis. All right, that's looking good. All right. So, yes, as you can see, it's still doing the normal animation for us, but if we get rid of this media query now, we can see what the reduced motion version is. So what we're doing. The reason that I did this, prefers reduced motion like this instead of doing at media and just prefers reduced motion, is we're making this a progressive enhancement rather than just going, if they. If they like animations, show them an animation or don't show them an animation. I think in this case a subtle one, like you can see here. Like, I don't know if this is even going to come out, come across on stream. It's that level of subtle I like. Look. Yeah, let me refresh it again so you can see it again. There's the. I'm just moving my cursor so you can see the brightness change. So like someone who's coming to the site still gets that little bit of delight if they catch that it's happening, but it's not so distracting that you can't read the text. You can't continue on with what you're up to. So let's see, how are we doing for time?

We're good.

We're Good.

We're at 43 minutes we've been going.

Okay, so we'll go for maybe another 15 or so. Anyone else have any ideas?

Like, can you up how fast that brightness is going? Because it. Like it. It's nice now, but I'm wondering if you almost do it kind of like. Almost like a glare kind of thing. Like the camera flare types that were just like. Okay, like, explain the speed there with my hand.

That was a really good job also.

The.

Was good.

I've been practicing.

One thing that came to my mind was like Knight Rider, Night Rider.

You know, I. I know what that looks like, kind of. It's called. I'm a 90s kid, so you gotta. You gotta help me out. It's. It's. John's a young one.

He doesn't remember Knight Rider, so that.

Was before his time.

Well, I'm pretty certain. It kind of looks like the Battlestar Galactica. Yes. Animation. Knight Rider. This could be dangerous.

Maybe you do it off screen initially.

Yeah, that's a good idea.

I'm still very adamant about adding the Contra code into the new site. We do something crazy when that Contra code gets inputted because I think to me, like, the Contra code is the ultimate, you know, or it's called Konami code.

Right.

Is that the. The actual terminology for it?

I didn't know that. Oh, this is called the Contra code.

I think. I think Konami is the maker of Contra.

Let's see.

This is John looking at videos. Come on.

Stop.

Stop messing around over there.

I got it. I got. I got it. This is the effect. Yes. Right. Okay. Yeah, we could do that. I have a few ideas here on how we could do that. I guess I need that window back because that has our page. The way that we would do that is we would do alternate, and then we would need this to go longer though. So if I refresh now, this may not work this way. Yeah, no, I like the other way.

Better, where it was just.

How about setting the animation to already have it on the Moss class? Okay.

Yeah. What would be cool? And maybe I'M just not aware of it is if the animation was on that Morse class, like you were saying, so that the, like, what was controlling it was the parent and not the children themselves. I don't think it's possible to do that without something like Green Sock. So I don't know if we can do Knight Rider, at least not easily. I mean, there would be a way that, like if in JavaScript we could change the animation. Every one. No, not every one second. We'd have to somehow time it out so that we knew exactly the duration of the. That'd be hard. Okay, well, I do have one thing that I think would make this look a little nicer. So notice how these two lines don't line up in the actual animation. I wonder if we can fix that by adjusting the delay so that maybe the delay on the. On these ones so the. The shorter lines are not really shorter. The lines that are bumped in those ones are at a slightly longer delay or something so that it's not like the first one here and this one are lit up at the same time, but it's a little bit closer. For that, we need to jump into the JavaScript again. And what's determining which. Let's see. We have single Mars.

There's just a simple solo class. Yeah.

Okay. How could we do that? Easily. We could. The way that I. That it's working in my brain is we could. Oh man. That's extra work because we can use this as a selector in JavaScript and we can adjust all of these, but that's a really poor way of doing it.

It's better to make the longer lines go first and then the other lines go. Or something like that.

Could you repeat that?

Like for instance, all the lines that are aligned together. So like in the. In the.

The.

The first iteration would be like, it goes. The first keyframes they like. So like the ones that are indented, they go first, then after that the longer ones go.

Yeah, that's what we're kind of going for. The trick is how do we target these?

I was just thinking, instead of doing them at the same time, just like first those, then the other ones and then that's it.

Right. The key is that we need to adjust these animation delays. And the animation delays are not set on the class or on the row. They're set on the individual items. We have to tweak it there.

How about.

In chat? If you have ideas, feel free. Your code will get committed into the real site.

How about changing the JavaScript to adding just Classes to the alternating rows and then just. Yeah. Apply some animation logic via CSS to this class.

More.

You actually wrote. You actually wrote the code for this in a way. So more slight, more stark.

And this is just.

Wait, where's more slight and dark? Getting some bg. Oh, bg. Comment. Okay. Dark is variable. All right. But comment is the only one I'm.

Seeing because you're in the.

Oh, I'm looking. You're right. You're right. Okay. Okay. I have an idea. Now, thankfully. So we're going to copy this. Actually, we don't even need to. We might be able to do it just right in here. Sorry. I am thinking in a very hot room right now. It is currently like 85 degrees in my room.

Yeah. So for those that don't know, like, I'm in Illinois, Johns, Wisconsin. So I think we're what, like an hour from each other when we map it? So, yeah, it's like blazing hot out and it's just so unnecessary.

All right, so I'm going to take this. I'm just going to copy your function because I don't need to manipulate it. It's good as it is. The thing that we're going to do, though, is we're going to add a delay. See, do we want to do it as a return or do we just want to be nice to just do this with calc. I apologize that I'm taking a while to figure out a good solution to this. But basically what we want to do is exact same thing that you're doing for get color. Oh, and you're not getting it in here. Oh, that makes things further complicated. Okay, never mind.

The color code is in line 240. You mean that?

Oh, okay. There we go. All right. Good, good, good, good, good. If. All right, I got it. Finally, I got it. I see the path. All right, I'm going to. It is better to do it in a function. I'm going to write sloppy because we're on stream. What we'll do is we'll do span style, animation delay and we'll have an if statement. But we'll first start with this. So animation delay string. You know what, we will move this into here, that indentation animation delay spring. All right, and then what we're going to do though is we're going to go. We have the index and then we're going to. But the index is the index of which to get class. So the index for that is I. Okay, okay, okay, okay. We're getting there. So if. If I or I. You know what, we'll even. We'll take your approach probably, but then I can't do the math here. I have to do. I still got to do the math there. All right, whatever. Sorry. This is a little bit more than I was thinking I was doing on the stream. My JavaScript.

No need to live.

JavaScript thing is tricky. All right.

I want to start a drinking game for anytime John says, sorry, you have to.

Oh, no.

I mean, technically it is past 5:00 clock by Anton. So.

It'S how past 7:00pm oh, wow.

Yeah.

Nighttime.

Let's see. And then pretty sure it's percent. Yep. Divisible by visible by shouldn't be. I'm just going to copy that. I don't think that's actually what it should be, but. All right, so then the value will be index. It'll do this or it will be index times 0.5 but with well, plus point 5. All right, let's try this. Let's see if it works. I did not pre. Like pre think through this. It's probably got an error. Let's see. Like I said, we're doing this live. You're seeing live debugging. It is what it is. Animation, straight delay string is not defined. I think I'm still setting it up here. That's the problem. We'll get rid of that. All right. Refresh. Okay. No, no JavaScript errors. It's doing the animation. Ah, it's working. It's working. Yeah. I mean, it does look a little silly when it gets to the big, big ones, but I'm not sure there's anything we can really do about that. Yeah, I. I think the big. The big ones kind of really muck it up, but.

Well, it's not.

Do we like that?

I like it. Man, this is good stuff. This is really nice.

Try some GPT. Love it. Yeah. Yeah. I. I definitely, every now and again when I get stuck on something will run. Run my code or. Or idea through whether it's Google gemini or chat GPT or GitHub copilot. I don't have GitHub copilot. And like running in VS code right now. There's a reason for that. One reason is I noticed that it causes me to do things in a weird way. And maybe you all have experienced this. Instead of actually writing out the code, you start to type something and this is automatic. This is not something you're consciously trying to do. You start to type something and then you wait. You don't complete your thought. You just Type something and you wait and it takes a second and you hope that GitHub copilot just suggested something useful for you. And half the time for me it doesn't do exactly what I wanted or is not quite the right direction. And it would be faster to just hand write it than to course correct it. Hopefully that improves over time and it's faster and whatnot. But yeah, I think this is looking pretty good. I don't want to drag this on too long. I'm going to keep tweaking it to make it match our lovely mock up more so it'll look a little bit more like this. I'll add some spacing so that it's spaced out a bit more. But we'll keep that animation, we'll keep that fallback animation. This was lovely, Anton, thank you so much for. For showing us what you built. And your code's going to be in the website.

Yeah. And just to follow up with that, two things. One, I just put the feedback form up there for everyone who is still here to submit that because it does influence us. Also, as you might have seen earlier, Anton is the leader of the developer Hug, the D hug, as we like, Doug, as we like to call her. Go ahead and join us because the next event is going to be on. Was it, Anton, the 20th? Yeah, 2:00pm, 2:00pm Eastern Standard Time. And that's gonna be about webhooks. And then on the 25th of July it's going to be GraphQL. So yeah, I will put the link into the chat as well.

Yeah, I've posted it, but yeah, cool.

Sweet. Thank you all for joining us. It was a lot of fun. I enjoyed playing around with this. I hope you did too.

Thanks, John.

Have a wonderful Friday, Anton.

Amazing stuff. Talk to you all soon.

Thanks for having me. Yeah.