YouTube Video PiWzaD8X4H0  ## Metadata - Author: [[YouTube]] - Full Title: YouTube Video PiWzaD8X4H0 - Category: #articles - Document Tags: [[component]] [[etch]] [[wordpress]] - Summary: YouTube Video PiWzaD8X4H0 - URL: https://www.youtube.com/watch?v=PiWzaD8X4H0 Grock, help me out here. Hey, buddy. Can you tokenize? Oh, he's talking back to me. You >> buddy. What an [ \_\_ ] I don't need HTML, CSS, or any other nonsense. Okay. >> Tell it to cut the [ \_\_ ] >> Cut the [ \_\_ ] girl. >> Hello again, ladies and gentlemen. Welcome to another episode of AgencyGrade Builds season 1 rebuilding trailer.com. You can see once again Christian Taylor and we have Kevin Giri with us. We're in Etch. We're going to do some cool stuff. If you haven't seen the last couple episodes, make sure you go back and check those out. Kevin was with us. Uh we have a couple things that we want to tackle today. One, we refactored a little bit of our tool category cards. We're using the object prop now in Etch instead of kind of the old way where we had like a bunch of props in there. I'll let Kevin kind of go through all that. And then uh we also want to tackle our tool single which is pretty impressive. Nick RC put that together for us. So I'm not going to waste any time because we have limited time today. We're just going to dive right into it. Kevin. Yes. Yes. Yes. Okay. So we will show them the object prop. Um obviously new features new features become available. We want to uh refactor where it makes sense to do that because uh it's a lot more efficient. And if everybody goes back and watches the construction of this tool category card, they'll probably remember that it was kind of like a laundry list of props going on. And um there's kind of there's a new prop now called the object prop, which allows you to pass um an object in from an external data source. In this case, an external loop. So this this card is inside of a loop, and we need the data from that loop to pass into the component. And we can map all of that data, like essentially pre-map that data all to the places it goes in. And a lot of people may wonder like when do I use an object prop versus just using a bunch of manual props and then putting the dynamic data uh values inside of that? And the answer is uh it's it's usually pretty cut and dry. Uh if you are not going to use like if you're always going to use this component in a loop then and you're never going to use it by itself outside of a loop. There's never going to be just some single instance of this component floating around somewhere. It's always going to be loop driven. Uh it's probably a good idea to use an object prop and just bring in the object and you can see it right here. I we named it source and then you just define and this is really for the purposes of just previewing. So all of this data is just so you can preview stuff happening here. Uh but in the uh real source like in the real use of this uh it will pull and we'll we'll go show an example here. We also added some conditions. I don't think those were there last time. Um but for example I'm putting in uh props.source.jetine.coimage URL. So I'm pulling the cover image URL from jet engine which has assigned uh this field to this category. And essentially an an existing loop like the way we would do it in the past would be like item dot and now because we have an object prop we're referencing that with props. source and then essentially all that's going to say is whatever you are told is the source go find this key inside of that source and that's what it's doing and so if we exit the component we see the loop here is looping the featured tool categories as item and we see the tool category card is sourcing item. So it's essentially just sourcing this loop right here and whatever keys we hardcoded into that component it's going to go look for inside of that loop which happens to be all of this data right here. And so what you what you end up with is a very complex component pulling lots of different dynamic data, but you don't see any really any props here, right? All of the dynamic data is handled inside of the component. And the only props you see are like the style of the card, uh the background hover of the card, whether we're showing or hiding the featured image, whether we're showing or hiding related tools. But all of the dynamic data now is handled inside of the component which when you're using the component makes it much much much easier to use. You don't have to go every single time you use a component manually stick in dynamic data values to make the component start working. It will literally just work out of the box now and you have way less props to manage which is very very nice. So that's the refactor that we did there. that object prop was not available when we first built the card, but now it is and that this is a really good and by the way the refactor I think took me about 5 minutes. It's like it wasn't a lot of time to refactor it and it just brings a lot of additional value and flexibility. So >> if you go into that if you go into that prop the component real quick. >> Yeah. So the questions that I have that when I was trying to figure this out and understand it, it makes a lot of sense. Like you described, you just bring it in rather than having to do all the different prop situation. But there's a couple places I think people are going to get tripped up here if they just, you know, on the first try of it, right? After a while, it's not it's not hard. >> There's jet engine. Uurl that we figured out, right? There's a few places you have to write that key at. Like obviously when you're in the structure and you want to show that image, you need to write that there. Yeah, >> this is definitely going to confuse people to preview it. >> You have to make sure that matches or can you do something like you're you're basically bringing it in manually in a way, right? Like you have to kind of copy it. >> Yeah. Well, this is a good this is a really good question actually because it's a well it's a good time to point out that this is the um 1.0 version of the object prop. So the object prop is going to get a lot of enhancements and expansions and essentially this is just the the first working iteration. It's like let's just get it and this is how we always do the development process like let's get let's get something working and then let's make it better and better and better as we go, right? Um and so what should the way the object prop should work is you define what you want your keys to be like you would just say you would just say cover image, right? And then when you are using the object prop perhaps uh you tell it what the actual key inside the loop is. That way you can map all of your stuff to generic keys and then later come back and say what the real keys are. Um and so that would add it that would make it a little bit more flexible. Uh the other thing would be to um when we have like thirdparty data sources being able to choose uh between them when using the component and so on like there's a there's a lot coming to the object prop that's just not here yet and this is obviously not what we want the preview uh experience to be like where you have to manually write all of these and then manually put in preview data. the the UI is going to evolve a lot to make this much more clicky clicky clicky and just easier to put together, but this is just the first working iteration of it. >> Gotcha. Okay. Well, that makes sense. So, yeah, obviously it's version one. I mean, it's impressive now and it's going to get better, but but just so but just so we know if you are using this, we're filming this on November 3rd of 2025. If you're looking at this now before this evolves, then you have to make sure they're they all line up. Like that was the confusion part. But you have you have to go look and find that. >> Yeah, this needs to be the key that exists inside the loop, right? >> Um, so yes, that is correct. >> Okay. >> Uh, okay. Any other questions on that? >> I think we're good. >> And by the way, if you go to I'll just remind everybody docs.edgewp.com, edgewp.com. Uh we have put a lot of effort and and work into docs. But if you go to components and you go to component props and you go to object prop, you know, there's a big explanation like why does the object prop exist? What does it do? How do you add it? How do you use it? And so on and so forth. Okay. Um I'm going to go ahead and exit this. And what we are building today, I will bring up in Figma is let me zoom out this single tool template. So we've got tools in categories and when somebody clicks on an individual tool, this is the page that they will arrive at. I think there's um Oh. Oh dear. Where did that go? Okay, let's go down to where was it? Down here. >> I think it was there. Click click maybe controll Z cuz I think maybe it's gone. >> Yeah, I was like what happened to it? Oh, okay. It's just it just disappeared. I'm thinking this is a this is was supposed to have some spacing between it. >> Yeah. >> Okay. Um so essentially we got this hero section and there's a lot going on here. Like that's why I I you know we're we'll have to decide if uh if we stay longer uh than Christian is able to stay today. But there there is a lot going on in this template. Um I mean you've got the the rating, you've got the category that this is in the cost. Are these custom fields all in here yet, Mark? Like the cost thing this this Okay. >> Yep. Yeah, they are. >> How is this done with like is the field value literally like a one, two, or three? >> So for that one radio box >> for that one specifically the uh the dollars. Let me see. >> And there's a right now. Yeah, right now it is a radio. So, it's like it's like four options. So, one dollar sign, $2 sign, $3 sign, or $4 sign. >> Got it. >> Um, so I think uh I don't know how difficult that would be. >> Yeah, that's going to require some some conditional logic probably. It's kind of the same way you would do a star rating widget. Um, >> yeah, technically that's wrong. Technically that's wrong there right now because if it was four then obviously you would always have four and only show the we made that decision after. So >> Got it. Okay. So this should have a fourth one essentially. And then it's just which one how many are lit up. >> Right. Right. Yeah. >> With the primary color. Okay. >> Then you've got what? Some sort of is there a deals CPT and you're doing relationships? How are these exclusive deals getting linked to specific tools? So right now current architecture is that there is no deal CPT. It is simple in the sense of the concept was that box only shows up if there is a deal. >> Yep. >> There is a deal. There's literally right now a deal text field in each one of the tools. Okay. >> Uh, and it would be like, you know, basically like 20% off your first year would be the text in that field. And then there would be there's a a separate field for promo code. >> Y >> and that would go there. >> Yep. >> And then obviously you could probably pull the uh the um what's it called? The URL there at the bottom. That would be dynamic. And well, I mean it would also be like there's also like a a specific CTA um like a URL for like an affiliate link effectively. >> Yeah. Yeah, >> but basically I think it's I think it's just a you know that we'll probably make that into a component and then it is conditionally it is conditionally shown based on if there is anything in that in that text field >> and then we just use the text field >> and then this is going to be a critical use of container queries because as you see on the same device on the same breakpoint essentially you have two different layouts just depending on whether it's in sidebar or not insidebar which is essentially just available space. So uh that's kind of a perfect use case of container queries. What goes here? Is there some body write up blog posty type thing of each tool? >> Yeah, I think that's is that just the trailers take field or is that the actual body of the post? So, I think initially we were thinking we have the editor, we still have the editor turned on in the tools. >> Yeah. >> So, I believe that we were going to just use that as like, you know, effectively your your your write up, your blog post because we didn't know I think we didn't know exactly what the headings were going to be. >> Yes. So, I think that was we just wanted to give Christian the freedom to like write up basically a you know, mini blog post using the block editor um and put whatever in there. So that would just be, you know, a slot or post content or however you want to, you know, frame it there. And then Krill's take is another thing that we don't really have explicitly shown on here. >> I think that's more for the outside. Yeah, >> it it is. Um, >> isn't that what goes above or right below cost? >> Yeah. I just feel like if you have something called Take, you should probably have a heading saying exactly what it is. You know what I mean? Yeah. Yeah, I can see that. >> But basically again high level context though is that show stuff about the tool but like really the emphasis on this isn't just like a directory of tools. It is the emphasis is giving Christians Krill's like opinion on it. So probably the top is probably the best place. >> Um >> and then this is conditionally shown if there's a associated video >> I believe. Well >> yeah. Oh yeah there is. Yeah. Yeah. It would be it would be like a related video like that's a relationship. Yeah. Yeah. Yeah. Yeah. >> Yeah. Yeah. >> One thing I wanted to point out, I don't think we thought this through with Nick, there are often cases where there is an exclusive deal, but there's not a promo code. We might want to have some kind of logic where if the text is filled out in the deal field, but there's no promo code entered, it's just a generic button that's like get the deal or something like that. >> Got it. It would just be an affiliate link that takes them to that that deal. >> Yes. Yeah. But just the the UI would have to be different because I I hate to not show that box at all if there is a deal but there's just no promo code. >> Yeah. We would just that's very simple. I mean, in the component, we'll have this uh copy code thing, and that will conditionally only show if there's a code entered, >> and then if there's no code entered, uh we'll we'll just default to showing a a normal button there that's essentially a destination link. >> Yep. >> Sweet. >> Okay. Um All right. So barring all this uh craziness and complexity, I think the first step always is if you just build a static version of this uh you can always come back at any point and make it dynamic, right? So uh we'll start with the template itself, we'll make it everything static and then uh we'll do a second pass essentially. And sometimes these things even take a third pass before they're like really buttoned up. But first pass will just be let's let's build a static version of what we see. All right. So let's go ahead and we are already in etch. We'll come over here. We have a single tool and we can see there's already just sitting a section. >> Throw that in there. >> Okay. Good. Perfect. Okay. All right. So, first thing is we're going to build this hero section that we see. And let's see, we've got a big kind of hero featured image and this is split. So, let's just get those two things on the page. We've got a content wrapper, media wrapper. That's going to be the inner. All right. Um, the thing I'm wondering because it has the same, like you pointed out, Mark, accent, the little accent thing going on that the main hero on the original homepage had. And I'm wondering if we can use our main hero class for that. Uh, so this is Oh, that's actually that's main. Sorry, main. All right. This is going to be main hero. This will be the inner and we'll take the heading out for right now. So in the inner we're going to do a image and we're going to do a content wrapper and we'll put the content wrapper first. Okay. And then I'll wrap the image in a div and make that a figure and this will be the featured image. Okay. Let's throw in uh what's a good example of Do we have any of these in here that are like full res that I can throw in? >> Yeah, if you choose I think that's the same thing as those ones on the far left. >> Like one of these. >> Yeah, I think so. >> Use this media. Okay. Uh and I would say these are PNGs, Mark. So, I would say maybe do a pass on converting those over to WEBP. >> Yep. >> And see if we can we can probably reduce these file sizes a ton here. >> Gotcha. All right. Figure featured image. Um, okay. And let's just put in the Okay. So, you got like a little almost like a a header. Yeah. So, real quick on that. Um the current the structure was like NordVPN is the tool title. >> Mhm. >> And then the N nor buy Nord security is like there's this concept of partners on this website that has evolved heavily. But like the idea is like if you have more than one tool by the same company. >> Mhm. >> You know kind of that we talked about. So realistically that's going to end up coming that would if we keep it like that that would be end up coming from a relationship. >> Yeah. >> So that's like a query nested almost but just pulling one thing. >> So that is the tool name and the company name essentially. So we'll say tool tool name. This is going to be H1. >> Yeah. Do part do partner name. Uh, isn't this the partner name down here? This the right here is the partner name. >> Yeah. >> Oh, yeah. Well, yeah, I meant Yeah, I meant that the second part. Sorry. I was >> Okay. Ah, yeah. Yeah. Yeah. Okay. So, tool name and partner name is what you want. >> Yeah. Yeah. >> Partner name. Okay. Sweet. All right. Uh after the heading wrapper, we're going to need this wrapper right here, which is the uh we'll call this we can just call this the columns. Um and then we have we'll call we'll just call it left and right honestly I think. So inner content wrapper. Let's go with a flex div. Let's call this columns and let's call this left. And let's call this right. Okay. Or this actually um can just be called the Oh, there actually that'll just be the card. Um what do we want to call that? We want to call that a a uh deal card. >> Yeah, I think that makes sense. >> Deal card. Okay. I'm not even going to worry about what's in that right now. And I'm actually going to BIM that by itself. So deal card. We'll go background. I just want I just want a big uh placeholder for for right now essentially. So we'll put it we'll just put a primary block there. Flex one so it grows with its space. Um and then I'm just going to put in some placeholder text right here. It's a lot of stuff that needs to go into this left side uh that we don't want to worry about quite yet till we start to get things um built out a little bit more. I will put a link in there though. That's going to be it's for visiting the URL. Okay, let's do that. So, we'll make that say visit NordVPN and then of course that's like a neutral button or something. Button uh neutral and button outline. Okay, let's save there. Okay, I want to take deal card out of here for just a minute because I don't want it autobimmed. So, we're going to have the main hero. Okay. Actually, I'm going to I'm going to not call this main hero because I don't want to create conflicts with the main hero we already did. Even though I'm going to probably use the main hero class on it. Um, or we might transfer that like that border design to just a utility class that we can just slap on any hero. That might actually be the most flexible way to do that. All right. So, this is going to be the deal. No, not the deal hero. The tool hero. Tool hero. Tool hero. Inner content wrapper. Heading wrapper. Tool name. Partner name columns left text anchor figure featured image. And then we're going to have our deal card is outside of all of that. So I'll right click create BEM classes and we'll go first to columns. Okay, we'll say display of actually can go uh let's add a media query greater than or equal to. We'll just throw in a random value for right now. And that's where we'll go display of grid grid template columns of grid 2. Okay. Um, tool hero columns. Okay. Perfect. And this is where we can bring back in our deal card. Bang. Good. Okay. Gap of this gap should exist everywhere, not just on that media query. We'll put that outside of that. Okay. That's nice there. This one for the heading wrapper. I can already tell gap probably just needs to be zero to zero that out because those are supposed to be pretty close to each other. Uh this name is going to be text dark text dark by itself. Okay. Um, let's go to our featured image figure border minus one. Aspect ratio 16 by9 though his looks way skinnier than this. And I don't know that I don't know that they put aspect ratios in Figma if it gives you the ratio anywhere, but just eyeballing it. Um, five, do that. Featured image, uh, height of 100% and width of 100% and object fit of cover. Okay, that looks more in line with what he's got going on. Would you want to put it to the top or >> uh put what to the top? Oh, the object position. >> Yeah. Yeah, probably. >> Object position center. Yeah. Yeah. Okay. >> Good place. >> All right. These seem like Yeah. I don't There doesn't need to be a gap there. It needs to be a background of white on this. And then this is going to get padding of like space. Okay, seems about right. He's got a border radius on all of this. So, we're going to go with our inner and we're going to go border radius of radius. Okay, sweet. Um, he's not touching the top. Okay, so there is a gap between the header and the start of this. All right. I'm also noticing that this now that we have these boxed down here that this is going to have to line up perfectly with the content width, which I don't think we did in our main hero. So maybe need to refactor that a little bit. Okay. Um that is the main tool hero. Okay. For at least for now, uh we're going to add another section or how to do this because these are really this is like a section. This is almost like a section for your video and a section here. Or this could just be an article wrapper and we throw everything into the article wrapper. Uh I don't know. Okay, let's just get let's just get stuff going. Can always refactor later. All right. Uh let's go section and this is going to be the uh featured video or related video. Related video. >> Um I mean Christian like do you think you'd have multiple videos ever? I mean I'm not saying we do that here but >> yeah. Uh I do see a world with multiple videos. I mean I fine >> this might be the featured video then. Like it's just this one. I'm fine committing to just one being there. >> Yeah. Yeah. Let's try Let's try featured >> featured video wrapper. Or how about tool tool video wrapper? I want to try to keep it contextual to what we're doing here with with the tool template. >> Uh so we'll call it a tool video wrapper. Um but actually this Okay, so this section is going to need um that's going to need to be the inner and then you're going to need a going to need a uh left and a right probably or a main and a sidebar or like a body and a sidebar or like a content wrapper and a sidebar something like that. Okay, this is going to be tool body. We'll just call this tool body. Tool body. Enter content wrapper sidebar. Inside the content wrapper, we're going to go featured video wrapper. And we'll throw in an image just for now as a placeholder for that featured video. That looks like a thumbnail. All right, this will be the video itself. Featured video wrapper and video inside of our content wrapper. And let's just duplicate that for now. What was this called? What were we going to call this again? Uh summary. >> What do you envision? >> Summary. >> Yeah. Yeah, summary works. >> All right. Uh that's that. So then in the sidebar, we're just going to have a uh placeholder for now. Let's just throw an image as a placeholder for something just so we can see our structure take shape. Okay. Um delete All right. So, summary wrapper summary sidebar delete content wrapper inner tool body inner content wrapper video featured video wrapper. I want that to say featured video summary wrapper summary. That makes sense. And then sidebar delete. Okay. Full body create classes. All right. Great. Enter. Uh probably same here. Media query greater than equal to two rim 767 display of grid grid template columns of grid 2 at least for now. So side by side. Now we can go to one. Very basic sidebar situation going. Um, this will be gap of content gap. This will be gap of content gap times two. Maybe I don't know. Let's look. Nope. Same. Let's leave it at content gap. Okay. Inner content wrapper. Featured video wrapper. Summary wrapper. Wondering if I should do because all of these are padded and they all have a white background and I'm wondering if I should just do it from here content wrapper like selecting all the direct children and going like space m and background white and border radius of radius. Okay, that'll avoid having to do like utility classes on each thing or or adding the same instructions over and over and over again to every block in there. Um, and it's probably the same for every direct child in the sidebar. Let's just grab this the sidebar. Essentially do the exact same thing. Okay. Should you have maybe just done that at the the top of it then? >> Like in the inner? >> What do you Oh, um, no. Because that would that would put it on the entire sidebar and the entire content wrapper there >> and we need it on the items that are in there or the groups that are in there. Gota. >> Uh, this featured video area needs a heading. I mean the other the other thing you can do is uh we could have just given these generic names, right? So you got um like content block or something um which they could end up having both a generic name for the generic styles and then a unique name for anything that hap that needs to happen to them uniquely. Um, like for example, this may need different spacing than what this one's going to have. I don't know. There's there's some some things you don't really have answers to until you get further down the line. But this is the the path we're going to go down first. This I don't I don't I think it would get its heading from Gutenberg because this is going to be the Gutenberg content, right? Essentially, >> it's not a custom field. Is that correct? >> Okay. >> Correct. So, the headings should come in from Well, I don't know cuz like Gutenberg has a a heading by default, but that's I don't know. That's the title. That's probably the title of your tool. So, yeah, I I think this just doesn't need a heading in itself. It'll just pull whatever's here for Gutenberg content. >> Okay. >> Do you just do that with a slot, though? >> Mhm. Yeah. You uh if we do you Let's see. We're on Proton Pass. So, if you go just put some dummy content in the Gutenberg editor for Proton Pass. >> Yeah, I've got it up now. I'll do that. >> Okay. Essentially, we just click this little button right here and it's going to add a content slot and it's going to pull whatever is there. Um, what are the is it slashtools slash Let me get a live a live version up. Proton pass. >> Uh, should be that works. Well, we're missing some certain things. >> Okay. It's been updated. >> Okay. Uh yeah, you put in uh this is Crayer's expert write up. >> Mhm. >> Proton Pass is amazing. And you threw in an image and then you put a heading and more text. >> Yep. >> Okay. Well, it's working. Okay. One thing I'm wondering about though is what's going on with with this. For example, tool hero featured image object fit cover object position top center. It's not liking the aspect ratio that I put in. Or did did I put that on the wrong thing? Maybe I put it I did. Yeah, that's dumb. Put that on the image itself. There we go. >> Nice. >> Uh, is there a border between the Okay. Yeah, we might want to add like a or like ask Nick about this, but see like when it's a very light image, you don't you don't really see like the the border, you know, like any division between the image and where the content starts. Um, I'll show you. Well, we can just we can just add one and then you can ask Nick if we you want to keep it or do something different. Um, but we'll take the content wrapper and we'll go border block start of border And then we'll just refresh. And you get something like that. The board is a little dark. And we can always tailor it to uh later, but I this is the color that matches the that accent that we're going to put around here later. Um >> spin. >> Okay. Let's go to the inner. And we put a border radius on here. I don't think we're seeing it because maybe there's some overflow issues going on. So, I'm going to put overflow of clip. And now we see the border radius on there. So, that's working. Okay. This is Am I still plugged in? I just kicked a wire. >> Yeah. Yeah. Again. >> All right. Um, let's do because I think let's do this icon real quick. That would be another thing that we can we can throw in before we get to the more granular stuff because there's a lot of granular stuff going on in this template. Uh so we have a figure, we have let's see what our structure is here. A content wrapper and a figure. And I'm thinking this icon can just sit inside the content wrapper itself. So let's go add this icon here. Uh, we'll say tool uh tool logo. Yeah, tool logo. >> Are there any tool logos in here yet? >> I mean, it's really the icons. Yeah. >> Uh, well, the Proton Pass one is >> Nord. Here's Oh, here's Nord right here. >> Oh, yeah. We're doing NordVPN. >> Okay. So, let's go tool hero tool logo. All right. strip the No, we don't want to strip the color attributes. So, let's take that off. We don't want to do that. Okay, that is 91. But that's actually not the Yeah, it's like 60. So, inline size of 60 pixels. Adding 1 M. That's always a pain in the ass. Got to do this balance of >> can't get it exact. All right. What kind? So that is the that's the border, but it looks a little thicker than normal. 2.4. Nick, what's 2.41? What's this? It's vibes. It's just felt good. 2.41. This is vibe designing. What is going on? >> Border. You know what? [ \_\_ ] him. I'm just going to do it. I'm just going to do it. We're just going to do it. Here we go. For no reason. So, I'm just going to inspect this and be like, "What is going on?" 2.41 pixels. >> Oh, no. >> Solid border color dark. >> Solid >> border radius. >> Radius. Look at that. Hey, you want it to match? It matches. >> One one question I have. Is there a way to enforce that it is always a perfect square even if the icon within it is >> not a square? >> Yeah, we go aspect ratio one. >> Okay, cool. >> Object fit of cover. I don't I don't know. >> We should add that to the the outside page cuz I noticed what those floating icons we did last time above the tools archive. If the icon is not a perfect square, it it looks kind of wonky. >> Yeah. It's also like this weird too that it's so SVGs behave a little bit differently um than like images do. Like images are much easier to to manipulate in that way. But like essentially what we're doing is we're we're creating a box um we may even cuz this is the new SVG element. I'm wondering u don't want to preview here. Go to here and do it >> for for this instance. Wouldn't you want it would you want it to be contain? Well, the thing is is like the SVG has its own box and then it's like >> we're adding a class to the >> to the box. What this is Okay, what we probably want to do is we probably want to wrap this in a div. We want to say that this is the tool logo wrapper. Tool hero tool logo wrapper. Okay. And then this is really what we want to apply a lot of the styles to where we just move these. So inline size is 90 pixels. That can match. Uh the padding is 75mm or so. Uh we the border is correct. The border radius is correct. We're going to force the aspect ratio to happen on this object fit cover doesn't do anything at this point. We target the SVG from in here and we say the inline size is 100%. Just fill the box that we created essentially. And now we should get the best possible effect. So um the box is the box. It's always a square. It's always perfect. And then we just fill the box with whatever the logo is inside of it. And it should essentially do the trick for almost all cases. >> Sweet. >> Um okay. Okay. So tool logo wrapper tool logo and Okay. So content wrapper we want to position this relative uh because we are going to position this absolute and we're going to say top of zero left of zero for right now. Um, we will go what we're going to need actually is uh tool logo wrapper content wrapper inner tool here. Maybe I'll put on tool hero so this whole thing has the has access to it. Um, let's do logo logo size 90 pixels and then we'll wrapper a top. If we go um logo size, let's see, that's going to move it down. Times -1 is going to move it up. Divided by two. Uh that didn't need a parenthesis. There we go. It's right in the middle. Perfect. Okay. Uh we'll also go backgrounds of white on this logo wrapper. There we go. And then from the left hand side, we essentially want to come in with whatever this padding value is. space m. Um, but we want to do content uh or just let's say hero padding. Hero content padding. I don't [ \_\_ ] know. Hero content padding. Okay. Hero content padding. Space M. And then this goes in from the left. Hero content padding. So you just made a little variable. >> Made a locally scope variable to tie this padding and this logo position together. >> Yep. So you don't have to change it in two places if you ever want to change it. >> Correct. And then this padding is what? So one trick I often use is you can just define the padding for all sides, but then you can still do one of the sides differently. And um what we're going to do is hero content padding and then we're going to say plus the logo size and it's probably um yeah logo size divide two probably will. So the goal here like I'll I'll show people by going back to tool hero. If I wanted to increase the logo size. Okay, clearly something's out of whack. But see how the um Oh, the size isn't actually increasing. That's why. Okay, so we go to tool logo tool logo wrapper. Yeah, cuz that's still hardcoded. Logo size. So here's here's the flexibility this gives you. See how like nothing breaks now. >> Yeah, >> I can I can manipulate the logo size. All the padding recalculates itself. the position of the logo stays perfectly centered, right? So, you just gives you a lot of flexibility for coming back and making adjustments later or somebody taking over behind you or whatever. They don't have to like figure out all the five different places that had that were all related to each other, but that we left disconnected. Like we just created connections between all the things that depend on each other and uh you know, some simple math and now we're good to go. Do you like again I always get this confused like is that okay to be in pixels right there what you were just changing >> um this right here. Yeah. So like um logo size. So right here. So yeah we can explain that real quick. Like you could do um a rim value of some sort, right? Some people might might do that. Now the question is if somebody what the difference that would be made here is if a browser user comes along and they're like maybe it's my mom and she's like everything's so small on the internet right and so she sets her browser to be you know larger text for everything right well anything that's in rim will respond to that if your logo size is set in rim your logo will get bigger also and so you could do that but you could also just say, "Hey, I don't want the logo to ever grow beyond this based on somebody's browser preferences." So, this is going to keep it at 90 pixels no matter what. Um, so it just you determine what should be allowed to grow and what should not be allowed to grow. Um, in this in this case, I mean, you could absolutely there's nothing wrong with setting like a six rim on this and then that would be allowed to grow. Gotcha. >> Okay. Um, but I wouldn't say it's required. Um, I'm also wondering on here if we would be better off, let's just see if there's any difference. Instead of inline size or not inline size, uh, for this SVG of 100%, what if we did block size of 100%. I don't want to stretch it cuz SVGs you can't really object fit them. I think that's our only option really is to just fill the box. Uh but what we can do is display of grid and place items in the center to make sure that it's always perfectly in the center. But see it's got it this logo I think is like malformed almost like it's got >> two different boxes and this only sits at the top of its and that's coming from the SVG itself. It was like chopped in incorrectly or something. I don't know. We can we can see how it responds with other logos in there, too. Um, unless that's something we've done that's chopping it. Let me find >> I mean, it's technically a circle >> this doing, >> right? >> See how that one is perfect. >> Yeah, >> no problems with that one. Um, >> go back to the Nord one though real quick cuz like it's white. Like it actually is white and it's a circle. So, it's technically probably accurate. >> Weird. See it? Because it's white. Yeah, because he changed it to like >> That's correct. Look at Mark. Look at Mark. >> Okay, good catch there, Marky. >> Just not the greatest logo. Yeah, with a white background. I guess >> we chose a very bad one to like design this off of, you know. >> Yeah. >> Uh yeah, if we did that one, it'd be perfect. Okay. All right. Well, good. It's not us. >> Sweet. >> It's always good to find that it's not you, you know. >> Hell yeah. >> Okay. Let's go to Let's let's do let's do this little situation first. So, we're going to go what's what's this and where does this come from, by the way? >> Is that Krler's take? That was kind of my >> impression. Okay, >> that makes sense that it would be. >> Yeah, I think that's Krill's take. >> Okay. >> Yeah. Yeah, we could roll with that. Yeah, I don't see I I don't think we did anything different for that. So, the other thing too I'm I'm like I'm thinking about, you know, are we trailers ratings? We've got this like label and badge combination here. Um, but these badges are all the same trailers. Should we use data attributes for this and like pseudo elements? It's a good question. It's a really good question. Um, and this would be like a little mini list probably. >> I'm genuinely not sure right now where we even get Crayer's rating from. Like, we don't have an actual thing for that just yet. I think that was >> it was from >> I'm confident it's going to be a badge. >> Or could it be stars? Could it be like Cuz that's a that'd be a huge difference. >> I I think from Christian's old website, right? like you there was a motif of like you would go to the VPNs and you would see best value, best performance or what like whatever those are and it's like kind of like arbitrary different things and they're not even they're not even like fully taxonomies almost I feel like because they're not the same >> they at least in the previous iteration they're not the same from tool category to tool category >> it's almost like it's a sub >> you know I I almost wonder if we need to change the naming and That's Krler's take because >> Oh, you just expl you just express it almost. >> Yeah. Well, yeah, because that kind of sounds like what I'm what I'm getting at is I don't really like to do the star rating because it makes it all about a spreadsheet and a point system. Like how I've approached this on my old site is, okay, this tool I think is the best for beginners or this one is the best if you're on a budget. And that's kind of my take, I guess. So that >> I'm wondering if maybe we adapt that to Kriller's take and then we have like exerb or something that becomes that text at the top. >> Yeah, I think I mean I think the category definitely stays obviously the uh the cost definitely stays uh regardless of if we say it like that or not. And then we just do a craers take thing. And yeah, we could we could figure out how to do that. We could probably just skip the the the the C trailers rating for right now cuz like you said, it probably makes more sense to be intertwined in the take part. >> I think so. Yeah, it's not really a rating. It's just my opinion on where it fits. And I don't even know if it needs to be a drop down or like a category that you select because as Mark pointed out, it can be it's very arbitrary. There's some categories that I say, "Okay, this is best for advanced users." And then others that I'm not going to name one for advanced users. So it's it might almost be fine to have it be plain text. >> Yeah. >> Okay. >> Just roll with that. Christian, do you need to go? >> Yes. I'm going to have to run. >> Good seeing you, Christian. All right. >> See you soon. Hopefully. >> See you guys later. >> See you, buddy. >> Bye. >> All right. So, this is going to be VPN's. I'm just throwing this this sometimes it is easier to just write code. >> Hey, real quick. Hope you're enjoying the rebuild so far. Just wanted to take a moment to say that this would not have been possible without our series sponsor Big Scoots. They've been providing top tier managed hosting since 2010. And they're not your typical hosting company. Big Scoots owns their entire tech stack from the servers to the network to the data center, which means faster load times, stronger security, and the ability to customize solutions for your specific site. And if you ever need any help, you can get connected to a real WordPress expert in under 90 seconds, 24/7. By the way, right now is the perfect time to try Big Scoots because they were kind enough to give you, the lovely viewers of my channel, a special offer. If you're a new Big Scoots client, you can get 98% off your first two months on any of their managed hosting plans. All you have to do is click the link down in the description below and use promo code MJS for monthly plans or MJS annual for annual plans when you check out. Again, that's 2 months of premium hosting for pennies, which is basically no risk. If you've been looking to improve your hosting setup, show Big Scoot some love for supporting valuable content like this and give their managed hosting a try today. Now, let's get back to building. >> Um, okay. >> All right. So, we want a little list here. Uh, we have all I'm just going to leave the till y'all figure that out. The rating thing, I'll just leave it out for now. >> Yeah. Um, we're going to do P and we're going to do Lauram 20. Okay. And then we've already got our thing there. Okay. Let's zoom out. See what we've got. Text placeholder. Okay. I already I already did the paragraph that we need. Just get rid of that. All right. There's our Lauram 20. Okay. We just need to give these some labels so we can organize them. So, uh let's see. NordVPN heading wrapper columns left. We got the tool name, the partner name. We'll call this the tool meta list and then this will be the tool meta list item. Tool meta list. Tool meta item. Don't need to make it crazy. Tool meta >> category or >> tool meta label. >> That's all. Yeah, it's all the same. >> And then tool meta value or something. Tool meta label. Tool meta value. Let's open this up a little bit. Okay. Tool hero. Tool metalist. Okay. Sweet. So we can do things like this which is font weight 700. Um oh okay we didn't we need to duplicate this list item. Bang. There we go. Now we have both of them. Tool meta list. We're going to display that as flex flex direction of column gap of.5 m something like that. Okay. What was the second one supposed to be? Price. Uh yeah, we had cost. I don't Yeah, price is probably cost and then um a value. Uh we'll probably use I'm guessing we don't have a dollar sign icon yet. >> Doubtful. Just use a generic one for now. All right. Inline size 1M tool meta value tool meta label display flex direction row that may be on the wrong thing. Tool meta ah yeah to meta value display inline flex maybe. There we go. Align items to the center. Let's probably be meta item also. Yeah, we're good there. Okay, sweet. All right, we can duplicate that. Two, three, four. Nice. Okay, got the text in there. Got the button in there. company name in there. It's all good. Let's go check the front end. There we go. All right. Starting to build it out. Starting to build it out. Um Oh, we've got a duplication of padding issue here. So, tool hero padding block end of zero. Tighten that up and see where we're at here. Okay. I think what we should do probably is this uh exclusive deal component. We'll do this exclusive deal component and then uh maybe the complimentary tools and see where we're at. >> Gotcha. That that should be that SVG should be in there. >> Okay. Uh so this will be complimentary pools section. Okay. All right. Let's go swap it. Sweet. All right, we're going to make this deal card. See what needs to happen here. Man, there's a lot going on. These templates. Okay. Uh I don't think we need like a I don't think it needs uh to be a heading. It just needs to look like a heading. Um Crayer exclusive deal 20% off your first year. So, let's do tax text. Um, let's do a copy and paste this code in order. Okay, so that's like uh that's definitely like a group in and of itself. So, we're going to call that we're going to create a flex div, which we're going to call a code code group. And the code group is going to consist of a code a copy code button. So code will be just text code and then uh we'll put a link next to it, but we'll convert this because this needs to be a literal button. Copy code. Great code. Copy code. And then it's going to need a disclaimer or like an instruction text. instruction and that's going to be this like copy paste this code at. So code group and then we're also going to need a link. We'll call that affiliate link. Okay. So, and that's what we'll put conditional logic around. So, if there's no code, we're going to hide the code group completely. if there and then we're going to show the affiliate link if there's no code. I think that's how we'll do it. All right. Deal card. This is going to be called the cra exclusive deal. This is the title. Crayer exclusive deal. Uh this is going to be the headline. 20% off your first year. Perfect. Um, and then the background for this is a gradient that looks like it goes from linear gradient main color. This what I hate about Figma. You can't like you can't read the value and it doesn't tell you anywhere. Okay. light 20, light 50. So 20% transparency of primary light to 50%. We're going to change this to linear gradient to bottom red blue color mix and sRGB from var primary light the transparent and the primary light is 20%. Then we're going to take this entire color mix function and put it where blue is and make that 50%. Voila. >> Wow. >> Uh, next thing we're going to do padding space m order radius of radius 20% off your first year. Now because this is going to be a component oh we didn't uh title headline code group code copy code instruction affiliate link we can create BM out of this deal card okay all right I am going to cheat and go H3 class and we can do that because uh it's a component so we can use a little utility class right there trailer exclusive deal okay so this background is going to be literally primary and the color going to be white. The padding be 0.25 25 m.5 m probably I don't know yet line height of one border radius of radius inline max inline size of max content and maybe 0.5 and 75 and wait bold bold and uh font family heading font family. Great. Um font size H4. What does that look like? Okay. Uh font weight 700 600 600. >> Yeah, six. >> Cool. This needs to not be H3. It needs to be H2. Thinking >> um m maybe random other thing lessen the padding so it doesn't look like a button. >> Uh yeah, you're right there. Let's go to Yeah, that's definitely better. Looks pretty close. >> I never know how to deal with that issue cuz I mean like you want it to stay on brand, but >> you know, you just naturally create a situation where you're looking your your little accent thing is looking like a button. >> Yeah. Um this can actually be probably card gap. Yeah. And now there is a gap uh from this code group margin block start of of uh another content gap probably. Perfect. Okay. So this is going to be our code. Um use my code. >> Okay. Adding 75m background white max inline size max content border radius radius border one pixel actually border border border order style dash. Hold on. That's okay. Yeah. Color primary font weight 600 again. Yeah, I'd say so. letter spacing. Okay. All right. Um I don't know that you can change the tracking. Maybe you can. I don't know. On the border in CSS like his dashes are are are super far apart. Um, oh, it's this control right here. I'm guessing three, two, two. Yeah, look at that. >> Wow. >> So, the like dash tracking is that really is that a thing in CSS? Grock, help me out here. >> Oh, wow. You learn something new every day. Uh, unless Grock's just lying lying. Oh, you got to you got to fake it. You got to do a repeating linear gradient with border image. You know what? We'll do it though. >> That's one. Wow. >> I want it to be I want it to be one pixel. Uh not four pixels. Oops. Oops. Whatever. Yep. Okay. Take it. Come over. Yeah, I knew I I had I had a feeling it wasn't uh straight up doable. I do some sort of hack. >> We got to get that added. >> Oh, get that. Mhm. Okay. G. Why? Why? Why you put stuff in here like this? I don't need this in my life. What? I don't need that. Oh, dash length. Well, hold on. Hold on. Hold on. Grock, what are you doing? Giving me nonsense code. Hey, buddy. Can you tokenize those values like the gap and dash length? >> Oh, he's talking back to me. You >> what an [ \_\_ ] >> Sure can, buddy. >> Sure can. >> All right. Thank you. Hey, I don't I don't need I don't I don't I don't need the comments. Okay. Dash color. This is so much nicer now. Red. Okay. First of all, it's [ \_\_ ] broken. So, um, what did we do here? What do Maybe we're missing Maybe we're missing a little detail here. >> Uh, all right. So, back back in action. The only problem here is that the code that Grock gave us is not working. Uh >> [ \_\_ ] >> So classic classic. Um we're going to have to diagnose what's going on here. >> Is it literally just Is it literally just trying to do a gradient from like the left to the right? >> It kind of seems like it's doing that, isn't it? Like >> Yeah. So I'm going to tell Grock I'm going to tell Grock, uh this looks great on the top and bottom, but looks like [ \_\_ ] on the sides. Have you ever Have you ever just taken screenshots and dumped it in? Be like, "Fix this, bitch." >> Uh, I I should try that. I should try that. Um, >> this is what you did. >> Clean one pixel dashes on all sides. Yeah. Why didn't you Why didn't you think of that first there, Grock? Not going to take our jobs anytime soon. Not Not acting like this. Oh, I can also get rid of this border style dashed. Oh jeez, dude. G, it's the same thing. What are we doing? All right, you know what? These are Here, I'm going to give everybody a nice tip. Don't Don't get sucked into the quagmire of this kind of nonsense, right? You can always do this later if it matters to anybody. U but right now, this kind of stuff does not matter. So, we're going to do order style. I just lost my second monitor, dude. We've got like Oh, now it's back. Major technical difficulties. today border style of dashed. >> That's great. >> That is all all we need for right now. Okay. >> Um now color primary border style dash. Oh border border thick. We need to get rid of that. Let's get get rid of that. >> Border is the only variable we need there. Yes, sir. Yes, sir. Copy code but in primary code group. Um code group code group code group. How do we want to do this? How do we want to do this? Because I don't want to add a wrapper. I don't feel like it. I just don't feel like it. Display grid. Grid template columns grid 2. I refuse I refuse to add a wrapper. Um code group deal card instruction deal card instruction grid column negative one. Okay, that should be outside of the code group. Um my code. Okay, so this should be instead of max content. There we go. Um width of 100%. Wait a moment. Okay. Interesting that it's uh code group. Grid template rows. I think that's that's the default grid. What is it? Grid auto auto rows. One F 1 FR. No, that makes them all the same height. Okay. I don't know. Let's go to here and go to align items to the center. That should be fine. Okay. And then this we probably want to text align to the center. Is that what he did? Let me see. You can't really tell it. His I don't know why his box doesn't go all the way across. I feel like this should go like out to here and this should go out to here and this. Oh, dude. I hate Look at this Figma. Oh my god. It's just boxes and boxes and boxes. I feel like it should do something like that. Ours is going to do that. You know what? I'm overriding Nick. We're We're doing that. That's what we're doing. Click me says copy code. He did something fancy, right? He gave this like a box shadow. Okay. Box shadow. Box shadow. MD LG. How did I set these up? Uh, we're still having the ACSS in uh on light speeded or whatever these are servers. Okay, it's working. That's fine. All right. Um, this is going to be button primary. And this is going to say, what do you want it to say if there's no copy code button? Just um, >> let's say get the deal or something. >> Get the deal. Maybe. >> Yeah, it's good for now. >> Get the deal. That's not an HF, by the way. Okay, get the deal. All right. And then this says, copy and paste this code. Copy and paste this code at at full name. Oh, yeah. It's going to parse that. Let's do hard brackets. Okay. Perfect. That's good. All right, let's turn this into a component. All right. Uh, this is an example where we don't actually like we're probably not using this in a loop like here. We're just using it in a template willy-nilly. So, uh, we are going to want props for these things. Uh, so we'll do a headline prop. We'll do a code prop. We'll do a That's probably all we need actually. Like copy code, get the deal. I don't think we're going to need to customize the text of these buttons. Um we need a URL for the deal URL. Okay. >> And uh this is going to be the headline. This is going to be the uh deal. We'll call it the deal code. So, it's not crazy my code. Um, headline. We can bang these. Bang. >> Bang. >> Bang. >> Bang. Uh, deal URL. Copy key. We'll go to get the deal props.deal URL. Easy peasy. Um, okay. Let's exit this component. Deal deal card. All right. Now, what we're going to do is we're going to come down into the sidebar and yeah. Yeah, there's the sidebar. Okay. Uh we can delete this class. Delete that image. sidebar. Add get this screen sharing thing out of the way. Uh deal card. Sweet. Okay. Why is it Why is it trying to fill the entire thing? Oh, this is going to be fun. Okay. All right. Background flex. Ah, the flex one. Yeah. Don't want that on there. Okay. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. All right. So, we're going to need a container query. Obviously, it's mainly going to be where we're stacking this code because these two things just can't be side by side. That's really the only thing I think that's that's a a difference. >> Yeah, that's Yeah, it's like literally the only difference. So, we're just going to figure out this is at 328. We're going to first add the has me selector. Then we'll add a container query rule and we'll say if it is less than or equal to 328 um we'll just say because we need more space than that. We'll say 400. We'll just round it up. Less than or equal to 400. What are we going to do? What are we going to do? Um actually can put this rule perhaps on the code group itself. This is like the in the affected item. Uh and we have a grid a two column grid essentially. Um and so I think what I can do is just bang bang bang. We just like say, hey, all direct children grid column of one uh minus one. Look at this. Look at just so nice. Grids are, you know, generally pretty easy to work with. 5m Okay. I mean, about all all that needed to happen, right? Like, so now we've got this version up here and we've got uh Oh, okay. So, this sidebar situation's not quite it's it's greater than 400 pixels. So, um well, first things first is how how wide is his sidebar? 353. How wide is our sidebar? I should actually go into etch for this. Probably easier. Uh 416. Okay. So, this tells you that our grid 21. What if we do grid 31? Probably more in line. >> 312. That's That's going to That's going to be close enough for government work. So, um you like that one, Mark? That one gets you. >> Working on the government shutdown. >> Yeah. Yeah. >> So, he's still turnurning. What is the uh why is this my code box? Feel like it tights a little out of control. Oh, it's just the padding I gave it. Let's just try that. There we go. Not so [ \_\_ ] aggressive. Okay. Good, good, good, good, good. I think these up here though, this this this gap on it is um I I should I should exit and go edit the other instance. I can actually see it in that mode. We need to calm the gap down here. Just keep it at 0.5M at all times, I think, is the way to go. See this on the front end. Let's see. NYX version. Oh yeah. Oh yeah. And remember we're not going to see this button once we put in our our conditional logic. >> Um which we can just do now of code group wrap in condition and just do props deal code. So if there is a code it's going to have it. And then this affiliate link will wrap in condition and say if no props deal code we're going to show it. And now when I exit I can come in here and say um well I don't think >> Yeah. Can you do that with a default? >> Yeah. I don't think we can give it a default value. >> Well let me uh let me ask you a different question then. Do you have to do it off of the prop or can you do it off of the actual field? Can't you say like >> um >> like our text? >> We have to do it off the prop because we're gonna we're gonna pass the code in here if there is like we're going to pass the dynamic data value. Um and if that comes through blank, then it's going to run the but I think it's got to be off the prop. >> Pretty sure it's got to be off the prop. Well, I don't want to backtrack, but the even if it's not in a loop, could you still use the object prop? I know we set it up differently here, but I'm trying to think of like eliminating the the most amount of, you know, extra layers or whatever. >> Well, the thing is is like we're only going to be using this in this are we going to only be using this in this template, this card? >> I mean, you hard makes the most sense. It It's where it makes the most sense. Um, but like I mean in a in a world where you know maybe you have a big list of tools and like you want a little sub area for like the deal. I mean maybe that's a whole different component though. So >> yeah, I don't I don't I mean if we're not going to Is this relationship set up already? >> Uh well no it's it's not there's no relationship between deals. There's no deal CPT. It's just like here's what I'm saying. Here's what I'm saying. What I'm saying is if you go back to the condition real quick, >> um, if you open it up >> and you say instead of props.deal code, you have to say props there or can you say, let me let me look at the field. It's called cralor deal and it's just a >> well actually wait a second. Which which part are we conditioning right here? This is the group. >> So this is the if if we go to tools, this should technically be in this in this loop data right here, right? There should be something related to a deal in here. Yeah. >> Yeah. So you're you're conditioning the the code to show though, right? >> Yes. >> The actual the um yeah the my code thing. If you did if you did um cra\_promo code, which is the actual meta field, I don't know what you have to prefix it with. Maybe jet engine. Um >> what' you say that key is for the field? >> Crayer\_promo. Should find it. >> Promo. Let's do promo. There it is. If you take that if you if you just conditioned off that and said if there's something in there show this >> then you don't have to worry about the props part. You just have it would all be controlled via the actual data in the CBT. >> Yeah. Yeah. Yeah. So I mean we could delete the deal code prop. Um delete the deal. We could actually delete Do you have a headline custom field for the deal? >> Yeah. >> Okay. Then we can we don't need any prop. >> Well, it's it's just Yeah, it's just called cra deal. Well, I mean, h did we need to delete the props, though? >> I think so. Yeah, because you don't you don't really need them. You're just saying we're just going to pull this straight from the the database and just pass it straight in. Um, code deal headline. Oh, this is still Okay. Yeah. Yeah. Yeah. Deal. I'll show you. We'll just because is there any data in there right now for proton pass? >> Yeah, I'll put some in. >> Put some in for proton pass. We'll just do it. Okay. Code group code and we'll take the condition out. We'll just drag this out of the condition for right now if I can. There we go. Get rid of the condition. get rid of that condition. So, we're back to where we were. Okay. Promo code. Oh, let's also see what what happens if we have a long one. Okay. That's not awful. >> It probably won't happen anyway. >> Yeah. >> But yeah. >> Okay. Um All right. The code itself should theoretically be this meta dot trailer promo code. >> I don't know if it's going to load because I just saved it. >> Yeah. So, I'm going to refresh real quick. >> Yeah, that's what I put in. >> Oh, look at this. Okay. I mean, why wouldn't it work, you know? Why wouldn't it work? Get the deal. >> Why wouldn't it work? So all we have to do essentially now is say for this code group we we go back to wrap in condition and uh we just make the condition literally this meta trailer promo code see what I'm saying and then >> now uh we also me go back into edit wrap this one in a condition and say if there's no promo code. So now what we're going to do to test this is >> Yeah, I'll do it. >> Remove the code. >> Yeah. >> Shazam. Bang. Now, okay. The one I I know I suggested this, but the one thing I'm confused about now is why don't we have props? Like you don't need props, I guess, right? But you But >> but I've definitely done this before with props even though I was using CPT data. Why was I doing it like that before? >> You would only need props if you're going to use this component outside of this template and if you're going to um you know use it in other places on the site where it needs unique data which is like a a different key of some sort like a different uh dynamic data key to pass in. But if you're not going to use it outside of this, then if it's always going to be used in a template accessing this whatever whatever then it can just it doesn't need any props. >> Cool. Um, but there are multiple instances of it on the page, which is why we made a component out of it. Um, so we can control both of these instances at the same time. But here's the thing is like if it if you ever decided, oh, we actually need to start using that outside of this template somewhere. Well, then you can just add the props and you can remap everything and then start using it, you know? >> Yeah. >> So, you're not stuck. Uh, you still have the flexibility to do that. Okay. So the affiliate link we did dealcard affiliate link. This needs to be margin block start margin block start of auto. Um because when there's Oh, can you take the code away again? >> Oh yeah. >> We want to make sure the button goes to the bottom of this card. There we go. So it's aligned at the at the bottom down there. Okay. Um what's the what's the field name for deal headline? It is cra\_deal. >> Just uh is it meta >> should be? Yeah. >> Crayer deal. That's it. >> Yep. >> Yeah. Is that it? Get 50% off. >> Yep. >> Okay. And then tool name. Just going to replace that with this dot title. Is it the Is that supposed to be the the tool name or the or the partner name? >> See, that's the problem is like right it should really be it should really be the in the design it's the URL. But in order to have that we need to have a field for the URL. And right now the only URL field we have is just an affiliate link. >> Yeah. >> URL. So I'd have to make another one. So right now it's just going to stay like that because I mean there's I don't know. He I'm I mean Christian's not here to answer it, but he was like, I don't think there's ever a reason where we'd need that, but if you want to do that like that, then you need to have that in there. So, >> okay. What's the icon key? You know, >> oh, it's the URL thing, maybe. No. No. URL. >> Is that it? Is that proton passes? >> It's the one that's in there. Yeah. I don't know if it is, but sweet, sweet, sweet. >> Why the hell is it jet engine sometime and meta sometimes? Is that >> uh jet engine >> or would meta work there? No, >> I if it's a simple field then um >> no if it needs if it if it returns serialized data and we had to apply special handling to it then it's going to be jet engine. If it's some super simple text content field or whatever it'll pass as meta. Okay, this is what's the image? Is it just the featured image? Um, yeah. >> Sweet. Okay, now switch it back to having a code. Shazam. Sick. >> All right. Now, we're going to go to the Groster. The Groster. The Groster. >> Um, and we are going to say, All right. Deal card. Open code. Deal card code. Just going to copy this. And I'm going to go to uh copy code. Okay. And this needs to work with multiple instances. Okay. So, I need you to give me the vanilla JS for a copy uh a click to copy button. Deal card. Copy code is the button you are looking for is the text uh contains the text we need to copy to the clipboard. Be aware that there could be more than one of the same component on the same page. So, it needs work with multiple components. Okay. Um, let's go with that for now. Okay. Yeah. All right, buddy. Stop. Stop. Stop. Stop. Let's just pause here. >> I don't need HTML, CSS, or any other nonsense. Okay, let's just do the vanilla JS. Tell it to cut the [ \_\_ ] >> Cut the [ \_\_ ] Grock. >> You're way. >> I know you're trying to burn. >> I know you're trying to burn my tokens, Grock. All right, >> we don't need to. >> Let's be budget conscious, Grock. >> I like Grock. There's no to There's no tokens with Grock. See, if you get testy, he pretends like he's busy. You know what I'm saying? Like, >> yeah. Yeah. Yeah. I'm servicing other clients right now. Just um just give it a rest, bud. >> I don't know. Uh, think >> think harder. >> Think harder about this. >> Take longer. >> Clarifying request. Yeah, there we go. There we go. Okay. So, we're going to query selector all deal code deal card copy code. And for each of those, we're going to add a click listener. And this all looks pretty tight. So, okay. >> This will be fun. I haven't added JS yet. Yeah, yeah, yeah, yeah, yeah. So, let's go to the copy code button. Um, yeah, let's do it on here. So, we'll go to the JS editor and we will paste that JavaScript in and we will save and we will exit and we will save and we will go to the front end and we will copy the code mark. That's what we're do. Look at that. It's a done [ \_\_ ] deal. Wow. I mean, it's my prompt game is on point, so >> yeah, >> you know, >> it is. It is. >> Um, all right. So, this is going to be What's that supposed to say down there? Complimentary tools. Okay. Heading. And uh we're going to go with a full list. Now is this um we have we have tool category cards and we have tool cards. >> Yeah, this is this is the tool card, right? >> Yeah, I think >> so. So, this component's already created. Yeah, >> I may have [ \_\_ ] around with this already. This is technically this is >> this is a tool this is a tool card. >> Okay. >> Um >> let's look in here. No, we just No, we just redid it to an object prop. Um, well, I mean, let's just see what happens. Let's just see what happens. >> So, tool list, we're going to wrap this in a div. You thinking you did something to it? >> No, I'm I'm wondering where we got it on the front end. >> Convert this to a list. Um, complimentary tool list. Okay, complimentary tool list. LI. Let's loop the LI. And uh I don't think we configured a loop though for this, right? Tool. Oh, tool category. >> Oh, wait. Okay. Okay. Okay. I know what happened. All right. So So I did I did have to make this cuz you we never made one with you. >> Mhm. >> So like if you go to the front end real quick and you go to cuz this website is set up kind of like uniquely sort of like it's not like as direct as you would think. So you'd have to go you have to click on one of the cards in like the Bento thing basically to get to a c a category. So click on like VPN software or something. Uh it's the right so like I don't know why it's not working this this moment but those are the tool cards that I created like super basically. I think I actually maybe I Yeah, actually if this if if the other episode comes out, I basically took the media card that you took and then I kind of like really refactored it into into a separate tool card cuz I was like we we should have separate cards for each. >> Yeah. Yeah. Yeah. Yeah. >> But this but this card that exists right now, this component Yeah. >> could definitely be used probably in both places because it's very very similar. >> Yes. Yeah. It just needs it just needs to be in the proper loop. Um >> Yeah. So, that's another >> Seems like you've added some loops since I've been here. >> I've added a lot of loops. Um, I don't know if you I don't I mean, I think that this this all these loops in here are as as specific as you like the best way that you could do them because they're so weirdly niche in certain ways and like the amount of variables that you would have to add would be ridiculous. Um >> current tool category archive seems to be >> what we might want. >> So uh in this particular case the complimentary tools as designed in the in the structure were going to be related like related via relationship. It's basically a tools to tools thing which is [ \_\_ ] weird honestly in jet engine because it ends up doing some weird [ \_\_ ] But there's another section on this page in the sidebar that is just other tools in the category >> and that would be like more straightforward. But um I would have to think of how to make this loop. Uh it's basically because there's also no data in there yet. So let me see what happens if I put some data in on the back end. >> Uh well >> this isn't the concept real quick. The concept of complimentary tools is not like oh we're going to show all the VPNs together. It's like, okay, you use you use proton pass or whatever, so maybe maybe you like this other tool that's in a different category. It's just that's >> Yeah. So, it's going to need to be its own loop. >> Yeah. >> Mhm. I forgot about that, too. >> Actually, it's Yeah. Okay. But it's not a it's actually not a configured loop, I don't think. You just you just um you loop some dynamic data as item. And the dynamic data is the there's going to be a related under tools there's going to be a complimentary tools object essentially and we just need to loop through that. Is there any relationship yet? >> There is a relationship but it's literally a a jet engine relation which is birectional. It's not like a field that you pull in. Um, it's not like a field that you pull in posts from cuz that would be a a one directional kind of relationship in this sense. It would just be like related ones >> because every time I think of a relationship, I want to be able to manipulate the relationship on both sides. >> Yeah. >> You know what I mean? So, um, the way that jet engine does it, it actually ends up creating like two things on the back end, which is weird. Like two separate places do it. Honestly, I say we potentially not worry about this right now because I have to figure out how to do it on the back end and then we can >> explain it to everyone. Um, what we'll do is >> just a cool a template or just like a placeholder thing or something. >> We'll just uh take that out of the loop and then we'll just leave that card there by itself for now. Even though it's even though it's um broken, >> it sit there. Maybe it changed. >> I mean, we can look at it in a minute and see. Um, proton pass. Let's just see what we've got. Yeah, I mean, it's it's fine for just sitting there for right now. Um, but what we need, it looks like we'll list needs to be that um padding space m and background of white and border radius of radius. >> It's not broken. There's just no data in here. Oh, like no preview data, you mean? >> Yeah, Christian just I think he added a couple things that just didn't add like like featured images. Oh, >> okay. Okay. >> Oh, you know what we need to do though? >> Unless you're in the middle of something. Are you in the middle of something? >> No. No. >> Um, real quick, it's easy one. Uh, the boxes that we created, the deal boxes, we need to conditionally hide them when there's no deal. >> So, we just need to do the whole card. >> Okay. Okay. And we just need to hide based off of the field which is >> easy >> the title that title headline one >> this what? Just give me the key. >> Uh what is it? It is cralor deal. So when that's not there don't show it. >> Is it meta this meta? >> Yeah yeah yeah [ \_\_ ] meta. >> Okay. And then in the sidebar, same situation. Yeah. >> Yep. >> Wondering now if um No. Yeah, you can't bake that into the component because that would break the use of the component outside of this context. Okay. So, deal card wrapping condition this meta.color.deal. Let's just go test it real quick. Uh, can you get rid of the deal on Proton Pass? Is that difficult? >> Uh, >> or is there one that doesn't have >> it? It It works though. One password works. >> Yeah. Yeah. Easy. Easy money. >> Easy money. Okay. Um, we got copy code working. We got I mean both of them are working. We got that. We got this. >> Uh, I put a different uh dollar sign thing in there for that cost part. Hope it's cropped. I don't know. >> Let's try that. >> I don't know how to do this. So, okay. >> Be kind of interesting. >> Much better. Much better. Uh, SVG inline size 1 M. Did I already put something? H, I did. Oh, that's already Okay. Block size 1 M. Yeah, that makes sense. That makes sense. Total value align items to the center. Okay, we can actually take that off. Okay, add a value gap 25m. Now, now we have control. I am the captain now. >> Look at me. I'm the captain now. >> So, these are supposed to be grayed out. Yeah. Yeah, that's the thought process. >> Let's strip the color attributes on these. Okay, let's try to control it from here so we're not doing these one by one by one. Color mix in and sRGB neutral. Oh, 50 50% and transparent. That's much better. Now we can dial this in 60. Now we can also Oh, I don't have my little accessibility checker in Brave. Okay. Um, Nick, Nick, Nick, Nick. Oh, he went lighter. He went lighter than us. Let's go here and go. 50. We'll want to check that for accessibility at some point. Okay. Um now there is a cost field. Can you give me the key for the cost field? >> Price underscore tier. So meta dot price tier >> data price tier equals this meta dot. Say it one more time. price underscore tier price tier. Okay. So, we're going to look here and we see data priced here is one and there use there's four tiers. Yeah. >> Yeah. Okay. Um so, we're going to say data price tier equals 1. Um, we want to put a amperand there and we're going to say border 5 pixel solid red. We're going to go to the front end and verify. Um, can you change the price tier to two? Great. All right. So, that's working. >> Um, what we're going to do, okay, so let's leave it at two for right now. So, if it's two, let me just refresh here. get that new value in there. Okay. So, if it's two, we're going to select the SVGs that are inside in of type. Can we do this in of inth of type two color red uh two in one n + one? I don't know the [ \_\_ ] thing. Let's see. So once this AI is in etch, it's minus n plus two. Yeah, who the [ \_\_ ] would have known that? Okay. Um All right. So, Shazam one. >> So, we're just going to do this four times. >> Mhm. Yep. >> If What if it was like a 100? Um, well, >> I only asked that question one because I think it's a good thing for you to do now or in a video, but two, and I think you already have because I feel like this this example just repeats itself when you like number [ \_\_ ] >> basically. So, I feel like there's probably something that's like five lines long that might be just as I can just a second. We can ask Rock in just a second. It might not be worth it here or it might not translate perfectly here because you're never going to have more than four. But right, I mean, we'll we'll we'll see what it says. Um uh well, I don't I don't know why I'm changing the colors, honestly. Well, >> just for fun. >> Yeah, I don't know. It's It might It might help on the debugging side of things. All right. Change it to uh three. Change to four. change to one. Yeah, it's all working. >> Um, >> so we'll just go primary. Copy that. Bang. Bang. And bang. Save. Yes, sir. Okay. Um, we'll go this dot. Oh, all right. Let's take this real quick. Is there a programmatically less dumbass way to do this? No, no, no, no, no, no, no, no. What are you talking about, Grock? We're not talking. We're Sorry. Sorry. We're not on copy paste anymore. We're on this price tier thing where I'm changing the color of the number of price indicators based on the pricing tier. >> Yeah, give me a SAS loop for a non-SAS application. That's fantastic. Um, zero duplication. Okay. Why this wins? Compiled output. I don't I This isn't SAS compatible, bud. >> Oh [ \_\_ ] >> Hey there, bud. >> Getting testy. Uh, pricing indicator tier zero color price color N plus Yeah. minus N plus tier. Okay. Um, not bad, actually. Not bad. It's not bad. It's not bad. I'm not going to change it because it's not worth it because there's only four. But if you were if you were going to do a lot more, this would be a good solution. This would be a good You're just passing the number because it is it just we have the benefit of it being a number already. And >> yeah, that's a good way to do it. >> Good job, Grock. Good job. >> Uh something. >> Yeah. Okay. So Oh, yep. That's the wrong tab. All right. Where are we at? I mean, what do we What else do we need to do? >> Do you want to try that? SC I have no idea how to do this. This on the homepage, the scrolling animation. >> Is this supposed to be sticky, by the way? >> Um, maybe. I mean, probably good probably probably best if it was, I guess. >> Let's see here. So, depends on what else is going to be in there. Uh, maybe it's not because there's more than one item in there. I mean, you could make every you could make them all sticky. Um, so what you would do is in in this sidebar, um, we're going to add a flex div. And we just call this sticky wrapper. And then you essentially stick everything inside of there. And then you could just go sticky probably. Um, you go. It's already it's offsetting the content because it's uh >> Oh, was that just a utility class? >> Yeah. Yeah, it's a utility class. Um sticky styling offset sticky automatically is using the header height probably. Uh Yep. So, our header is 88 pixels high. So, um well, we're not we're not doing a I I think I did this for demo purposes, maybe. Um or did we have to offset our content for some reason? We're not using a sticky header. I don't know why that was in there. >> We could take it out if it breaks something. We can fix it later. >> Uh yeah, maybe it was for that thing. Maybe you used it as a variable for the Oh, you did. Yeah, you did. For the on the homepage. >> Yeah. Yep. 88 pixels. Okay. So, we'll leave that in there. And then um so what you can do is essentially if you don't want that offset because it it doesn't actually need to offset our sticky like that. So, additional styling, sticky styling, and you can just tell it not to offset, and you could do an offset of uh whatever value you want. And now it's not offsetting anymore. >> Love it. >> Super easy. Okay. So, you were saying, "Oh, yeah, yeah, yeah. This uh this right here. >> No idea how to do that." >> Yeah. I mean, off top of my head, I've done it before. I did it for frames section, but it's like remembering these things off top of your head as uh it's a lot call out text. So, you know, you can just gro it. I want to um it's going to be that probably that scroll function again. I want to animate the fill of text inside of call out text. I think it's going to need a wrapper though. um inside of call out text as the user scrolls down the page. Um how can I do this? Let's just see where it starts. Oh, good. Okay. Yep. Yep. Yep. Background text clip. Background text clip. Okay. Use JavaScript to do it. >> Is that typical? Uh you can use well you can use pure CSS but not technically on this project because >> uh we're only at 76% and that's not super safe. I mean I don't I think what people on unsupported browsers would just see is they might only see the light version of the text and not the filled color and that may not be accessible. So, I think it's safer to probably use JavaScript. Um, let's go to content hub pages. Go to home. Okay. So, here is my call out text. Let's go to Grock and grab this. Okay. Hold on. First of all, uh, drop the comments from the CSS and let's see. You always also want to see what they're what it's spitting back at you. Um, dang it. I don't need the selector. Grock, come on. Color transparent back. Okay. Oh, this is like Okay, hold on. Grock, what are you doing, dude? I don't know. I >> Okay. Oh, jeez. I need to be able to to see the text before we scroll. >> See it, buddy. It should start as var neutral light and get colored with var neutral ultra dark on scroll. Let's try that. Okay, there we go. To right, neutral, ultra dark, neutral, ultra dark color, neutral, light, neutral, semi light. There, it's much better. Okay. Um, max inline size still applies. Color is no longer needed. Font weight is heading. Why did I do all that stuff manually? I probably could have just got away with like that. Um, okay. Let's go get it. JavaScript on text query selector all call out text. All right, looks fine. Let's go. Paste feel like um Okay. Okay. For starters, that's not working. secondary to that. Does it matter that the element is sticky? Cuz I sticky might interfere with the intersection observer. I'm not sure though weird because how else how else would you do this? >> Well, it says it's it says it's okay. So, um, call out text. We We called it callout text, right? Call out text. Yeah, call out text. Okay. Rock's very doesn't sometimes doesn't talk too much. Okay. Sticky >> built-in position triggers reliab reverses on scroll up. Okay. Okay. Okay. Smooth even while stuck. Okay. Debug. All right. Let's let's do this and let's look in the console. So, we'll grab this. Replace. It still doesn't seem to be working. Refresh. Okay. Inspect console failed to load resource. That's irrelevant. Okay. All right. Um I'm not seeing any fill effect on scroll for each text. textile background position. That's literally all it's doing. It's changing the background position. >> How does changing the background position do that? Like how does it how does that work in this case? >> So, I know we could go do it manually and see what it's trying to do. So, there's this uh background linear gradient on here and then the background size. Wait a minute. Background size. Background repeat. All right. Let's go back and look. >> Yeah. Is it is it like changing the actual fill of the text or is it doing something where there's like two of them and like show >> Sorry, when I say it's changing the position, I think it's changing the size. Wait a minute. DevTools context has background position. didn't put a starting position in and it's transitioning background position. Is it even adding anything to the DOM? Yes. So, this is the starting background position. So, if you did 100 and that's still not doing anything. I don't see anything happening. Background size 200% 100% center. Okay, let's start here. Um, background background size hover. That's not doing a damn thing. Neutral ultra dark color. What is that? Uh WebKit background clip text. It's relying on this clipping. Okay, we're going to solve this a different way. We're going to go the old school route. Uh, let's go to getframes.io. I have too many companies. I can't remember the slash layouts. Okay, there it is. Lima. No, it should it should definitely be here for sure. But I don't know why we can't edit with bricks all of a sudden. Bro, what? Okay. Like, >> let's just look. We don't even need to edit it. We don't even need to edit it. Just literally just just show it to me. >> Mhm. Heading span. Yeah. >> Reveal text. What the [ \_\_ ] >> Yeah, you need a Yeah, I don't Well, this is Okay, so yeah, this is the CSS. Uh, but this uses the view timeline. Let me see if view timeline is same. Um, okay. It would be Oh, can I edit with bricks here? Now, this is going to be like the stupid template. Oh, that's why that's why that's why that's why. I Okay, I remember this whole this whole thing is piped in automatically from >> uh >> Yeah, your subdomain >> frames dot no bricks.getframes.io. This guy's got too many websites. >> Too many. >> Okay, this should have the master template in it. Part Lima flimma edit with bricks. >> Mhm. Oh, look at that. So, um, you need a span. Oh, dear. Haven't been in here in a year. Uh, >> is it in the >> uh Oh, I mean that this is the pro this is the problem with uh panels and CSS inputs and not everything tied together. I don't know where the hell the code is. >> Um, Lima. >> Yeah. >> Okay. Animated text color. So, let's start here. Let's go. We don't We're not going to need JavaScript. Let's go. Animated text color, animated highlight color. That's the start. Um, footer lima footer lima heading span. We just need all this. And then we'll need the key frames in just a second. Okay. Take off. Need that too. Great. Um, animated text color. Animated highlight color. We need this to be black. Animated text color. We need this to be neutral. Semi light. Sweet. Okay. Now, we're going to go grab these key frames. reveal text. And I think that's probably all we're going to need. We might need to um add stylesheet, animations, key frames, reveal text, save. Go back. Okay, we might need to change the view. End range. Range start cover 50 pixels. Animation duration 30 milliseconds. I don't know. Go to the front end. See if anything is happening. Nothing. All right. Oh, I know why. Think E. How did we do this? It's the span is critical, I think. Um, yeah. Okay. What goes in the span and what doesn't? Heading span. Heading span. So that's all that all goes in the span. Why is the span? If that all goes in the span, why is the span that critical though? I can't. There's some reason why the span was important. I mean, the only thing is that I see I just I don't know. I'm not convinced that the sticky nature of this is not messing with it. I don't know, though. How would you do this effect if it wasn't sticky? I mean, it's just it just >> Well, no. I mean, it it it would be filling right now. >> Now, you wouldn't do the the effect of it moving down the page has to be sticky, but I'm just I'm just trying to debug whether the stickiness interferes with the scrolling function. >> But you're saying you just you just turned it off anyway. >> Yeah, I just turned it off and it's not. So, not that. Whoops. Uh, we'll put it back in a minute. Let's try to get this thing working first. reveal text two. See, that's that's all it's see the background size is 0% 100% and it changes it to 100% 100%. That's really that's literally all that's happening whether you do it via JavaScript or CSS. >> This probably isn't the problem. But explain to me why we're affecting background size. Like what is that? >> Because you're you're using you're using the um you're you're setting a background of linear gradient which is the highlight color essentially. it's and it's um too transparent. And then you're you're choosing what part of that background you see and you're clipping the background to the text so it's not actually a background color. It's like creating a a text color essentially. And then if you are only looking at the transparent and then as it scrolls down it starts showing you more of the colored background and it's just an optical illusion essentially. So you're seeing this, but you're you don't see this background at all when the when the page loads and then as you scroll down it's showing you progressively more of that background inside the text. >> Gotcha. >> Does that make sense? >> I think so. >> So like let's go to here. Okay. Call out text span background animated highlight color 100% transparent. So, if I do 100% here, well, there's one problem. I mean, that that technically because that's what the animation is doing is going to 100% 100%. So, let's do it in bricks. Let's see. See, it's I can't like preview because we don't have anywhere to scroll. But like, see how it goes to fully white. >> Yeah. So, there's something wrong with ours to where I can't just do that and just see it happening. Um, background repeat, no repeat, linear forwards, over 50 pixels. Setting this to 100% 100% should show me all black. >> Yeah, none of this stuff matters until that happens. So, >> is it a conflict outside of this like with the H1 or some [ \_\_ ] or anywhere else? Don't know. Background color works. This is what happens when you clip it to the texture. >> Yeah. Um, yeah, that's Oh, well, that's not accepting it at all. Like it uh the reveal text animation background size 100% 100%. Okay, that just means that the animation is actually interfering with what we're doing. Shouldn't this have a from? I feel like it should be from Well, this this this just means that the this tells me that our coordinates are [ \_\_ ] up. So, this cover 50 pixels or whatever is going on. Let's go. Range start, range end, 100 VH. That doesn't do anything. Uh, range start. What's a what's what's the beginning and end of the viewport for range start and end? Yeah. 0 100 VH. Okay. So, let's start there. Start zero. That's what I That's literally exactly what I have. We're still not seeing anything there. So, now I'm going to ask. Shouldn't there be? I mean, it's clearly it's it's working here without it, but I feel like this animation should have a from and a two, whatever the element's initial value is. Oh, did I move it back from 100 to 100 from testing? Yeah, it's probably why. Yes, it's not working at all. Okay, this isn't working. I'll give it that. And uh you already have the key frames code. Okay. Well, I mean we'll try it. Gave you from Okay. The problem is that literally nothing is happening. Okay. When in doubt Like what? I was waiting for it. What the [ \_\_ ] is that? >> Keep scrolling. Scroll down to reveal me. Scroll down to Do you see a scroll down to reveal me? >> Is it at the very top? >> No. Oh, is it Could it be at the very top and it turns after you change after you? >> No, I don't think so. >> Select all down there for a second. >> No, maybe not. Okay, so uh animated text color CC dark to dark. That's it. Yeah. Uh yeah. So my god, didn't it say to try to encode pen? >> Yeah. God damn it, Croc. Thanks. Just failing on all fronts here. Click change view to full page. Real browser tab. Full scroll. Scroll down. Text reveal. Black on gray. None of this. None of this makes any sense. It's wild that I took it from right here working and it does not work. Range end 35 each. I mean, the only thing is like I set these ranges up for it being in a footer and now it's not in a footer, but like I feel like it should be doing you would at least get like partial animation and then be like, "Oh, that's not enough." But it's literally doing nothing. So, we may may need to park this and revisit that'll work till I can investigate more content wrapper. There's like nothing on any of these that would help it. Just a thought though. Um because we we tried the JS way first and then we tried the CSS way that you had in bricks from frames. Is we we just didn't we just go over the scroll thing? I know you said it's only at 75% but that what didn't we just talk about that at Bridge Builders? >> Yes. >> On uh is that this or is that another method? >> No, that's this. >> Okay. >> That's what we're doing. I mean we we're using view uh instead of scroll for the timeline. Um and we can ask rock what's the difference between and scroll view tracks how visible the animated element itself is in the viewport. Perfect for reveal on appear effects and scroll is page ccentric. Tracks overall scroll position of the whole document. Uh, great for parallax progress bars or timeline scrubs. Um, okay. I don't know. All this stuff is very new. Going to have to revisit it with a fresh brain and just start completely over and see if we can get something working. All right. Yeah, we'll put this one in the books and uh come back and keep keep working. >> Hell yeah. Well, this is fantastic. Appreciate you, Kevin. >> Yep. Yep. Uh, appreciate you guys watching. Thank you so much. Um, look forward to the next one. Make sure you like this one. Uh, we are getting close. This is really, really turning out nice. So, thank you guys for watching. I greatly appreciate it. We'll talk to you in the next one., YouTube Video PiWzaD8X4H0, YouTube, 01kae35fhsgm4r5jfztvp2pv0n.