TOO EASY! Create Dynamic Tabs in ETCH in Under 5 Minutes With Grok (Or Your Favorite LLM)

Hey, what’s up everybody? Welcome back to the channel. This is the first official video from

the new Florida recording compound. We’re still not done yet. There’s more work to do here to get

things set up and ready, but we do have lights. We do have a camera and we do have action. And

what I’m going to show you in today’s video is the power of etch, how everything is coming together.

We have new JavaScript capabilities. Of course, we have a full-blown selector system that continues

to improve. And I want to just show it off today because we’re going to create a dynamic tabs

component. And I want you to see how, even if we don’t know JavaScript, how we can use like something

as simple as Grok or Chad GPT or, or Claude to really help us nail this very fast. I’m thinking

like in less than five or six minutes. Okay. So let’s go ahead and just jump in and let’s see what

we can get done. I have this shad CN component, the tabs component pulled up. And what I’m going to do

is I’m going to use this tabs component essentially to have Grok use this as its reference. Okay. So

I’m going to go into Grok real quick. I’m going to say, I want to build a tabs component component

with HTML, vanilla, vanilla CSS and vanilla JavaScript. I want you to use this as ref as a reference.

Make sure. Oh wait, no. I want to also give it, I’m going to, I’m going to give it some other,

uh, let’s see, I’m going to go down to the docs. Okay. So there’s this documentation link that I also

want to give it here is additional documentation. Okay. And then I’m going to come down here and say,

here are some additional, additional requirements. All right. One use BIM methodology for the

selectors. Okay. Two, I want to, um, use vanilla CSS nesting, uh, to put all the styling under the,

under the parent selector. Okay. Uh, I want you to maintain all accessibility requirements, including,

um, uh, left, right keyboard navigation, et cetera. Okay. And, um, I want you to, well,

let’s just, let’s just start with that. Okay. Let’s just see what gets spit back. Okay. And then

we’re going to hop into etch and we’re going to see if we can make this come to life. All right.

There’s our CSS right there. What I’m always going to do is I’m going to import the HTML first. And we can

see here that we have a div. I don’t need the body or any of that stuff. So I’m just going to,

okay, nice. Um, tab two, tab three. Okay. That’s not working, which is, uh, that should be interesting.

Okay. Um, the HTML looks correct. So I’m just going to grab the HTML. You’ve got your tabs content,

tab content two. This is, uh, tabs. Hold on. Content one. Did it tell? Okay. That,

I don’t know. We’ll see. Okay. Let’s go into etch. And what I’m going to do is just add a flex div to

the page. It doesn’t really matter. Cause I’m just going to get rid of it. And I’m going to paste in

all of the content that I was given. And there’s our tabs right here. And look how it actually is

already labeling this stuff for you in the structure panel. And look how the selectors are already

attached. Etch is doing all of the parsing work to take this HTML and say, okay, here’s all the

selectors that should be attached. Here’s the names that should be in the structure panel,

so on and so forth. Okay. Now what I’m going to do is I’m going to add a section because I actually

want to put those tabs into a container so that they are contained. Excellent. Now we need to import

the CSS. Okay. So I’m going to go back over to Grok real quick. I’m going to scroll up and I’m going to

find the CSS that are supposed to go into the tabs and I’m going to hop over and I am going to find

the tabs selector right here, which is already attached for me. And I’m going to

throw that CSS in there. Now, do I want a max width of 600 pixels? No, I don’t. I actually want

a, I actually want a width of a hundred percent on this. Okay. Let’s look at the list. Okay. That’s

all going straight across. That’s all perfect. Fine and dandy. Okay. And now I can do all the CSS styling

I want. The point is, can I make this actually functional? And what I’m going to do next is I’m

going to go hide show panels. I’m going to turn on our new JavaScript editor.

Which attaches JavaScript at the element level so that your JavaScript can live with the elements

that it actually belongs to and only get loaded. If those elements are present on the page. All right.

So now I’m going to hop over to Grok and I’m going to say, all right, what do you have for me? Grok

in terms of these, this JavaScript. Okay. So I’m going to bring this down. I’m going to get everything

that’s in between the script tags. Again, I haven’t looked at any of this. I don’t know if it’s going to

work, but I do know I’m going to attach this JavaScript to these tabs and I’m just going to

go take a look at what we’ve got on the front end. And I’m going to see right away that this is not

working. Now it was not working in the editor either. Like in the, in the Grok editor, in the

preview little thing. I don’t know why I’m calling it an editor. Um, I can see all content at the same

time and nothing happens when I click the tabs. Okay. So let’s just go ahead and see, uh, what Grok

says about this. It sounds like it isn’t functioning correctly. Okay. Um, it’s going to rewrite it real

quick. Now the CSS, I doubt is going to change much. If it does, that’s totally fine. It’s totally okay.

Um, let’s see here. Okay. I’m, I’m mainly, Oh, look, we have a working version here. Um, and it actually

has the correct keyboard navigation. All of that looks good. I think this is probably mostly a JavaScript

issue. Let’s bring this down. Okay. Let’s go back into etch. Let’s just replace the JavaScript. And I think

we have a working version already. Okay. And then there we go. There’s tab one, tab two, tab three,

and it’s just ready to be styled. But like I came in, I mean, I want you guys to, Oh, you know what?

Yeah, this is correct. This is correct. You get your left, right keyboard navigation. Okay. Look,

it’s all, it’s all, it’s all working. I mean, let’s go back to, let’s refresh the page here. So there’s tab

one and I’m looking down at the ARIA role equals tab. Okay. It’s got the tab indexes said properly.

It’s got the ARIA hidden false. And I would think when I, yeah, see, it’s going to switch the ARIA

hidden labels. When I, uh, have a certain tab visible, this is, this is the ability. Now let’s

just recap real quick. I’m already done. Okay. What was that? Less than five minutes. I think with the,

with our, we had one little hiccup and then with my intro and everything, that’s less, less than five

minutes. Okay. Um, let’s take a look at what happened here. I pasted HTML etch parsed the HTML into

blocks. Okay. And then what it did is it attached the selectors, all of the proper selectors that are

required. If I came down to the tabs list, there’s the tabs list. And these are just sitting here ready

for me. Like I can style it all at the parent level. I can come to each individual child and I can do it

because all of look, panel one, it’s even got the ID on there for each panel, panel two ID, panel three

ID. It’s got all of the, uh, HTML attributes on here. And then I attached the JavaScript to this

element. Next thing I could do is componentize this. Um, and I have an encapsulated thing that I can now

use across my website, like dynamic tabs, just like that vibe coded, essentially dynamic tabs, making sure

all the accessibility requirements are there. But look how quickly that came together. There is no other

environment for WordPress that is, that is doing this, right? This is pretty, this is pretty wild

stuff. You have to admit, this is, this is pretty wild stuff. And it’s just in its infancy, this is

getting better and better and better at what you are going to be able to do with Ash and what we’re

talking about behind the scenes. Um, it’s just, uh, it’s going to be very fun. It’s going to be very,

very, very fun. Anyway, I want to, I want to make a short video for you. That’s it. That’s it.

Um, drop your comments below, drop likes on this video. If you love it, hwp.com baby. Okay. Peace.