Speaker wants to include more into their projects and things and there's a loading bar. There's also a media scroller and a drag and drop event. Speaker wants to know if there are tabs or if they want to go into the hoop. The project Speaker was working on does not have tabs. There is a panel that gives you a starting point to try things out and there's a toast. Speaker is working on a job script.

Speaker doesn't know what c is. Speaker is getting caught up in web development. Speaker is tired and going to work. It's raining. Speaker is going to send jabez with some traveling music.

Speaker is showing how to create a responsive and accessible website. Speaker likes looking at the source code of different websites and printing out the code so they can learn from it. Speaker explains to Speaker how to use open props. Speaker is playing a game. It's not letting them do anything.

Speaker is working on creating a dashboard for their personal website. They will talk about it during break sessions. Speaker created their own switch and posted it next to a video at webdev. Speaker is talking about component patterns and how they work.

• ui component
• components patterns
• component patterns
• accessibility requirements
• actual source code buttons
• refers reduce motion

Your dreams were your ticket, I will welcome back that same old place that you will the new since you hung around but those dreams everything, and they turn around We got him on the spot.

Welcome back, welcome back.

Welcome back.

Welcome back.

Welcome back, welcome.

Hey, what's going on?

Welcome Back, y'all.

All right, stretch it out.

Oh, so I am actually made some progress, I am feeling pretty good.

I got the issue, I was running into with the white lady white listing of the domain thing I was working on, so I got that done.

Done.

What I am doing is I am creating a like a dashboard for my personal site just to make it easier to update different things, and so I have been meaning to do it.

But now I have got some time since I finished that other project and so got that done.

Now, it's on the next thing.

That's why I am going to be doing during these break sessions.

So part of that, it could be helpful.

Also, I came across this thing.

To talk about really quickly, probably won't take up too much time, probably get back to work soon, but I wanted to kind just kind of came across this guy.

I have seen it before, but I don't think I have spoken about it before and I saw it again like, oh, it's pretty cool.

And so a lot of times when I am building projects like I may want to have a certain UI component or whatever.

So like for one of my previous size, I will main thing was a switch.

So then I had to figure out how to create a switch because there's not like An HTML Elements, which right?

So I just found some random thing and I kind of like from that kind of created and cobbled my own thing together, my own switch, right?

So it will work in my project but then here at webdev which I actually just posted a link to.

So it will be next to the recorded video.

Sounds like it's storming outside right now.

I hope we might internet will keep going.

So I will make this really quick when I talk about this site.

Okay.

So web dev, and they have these components patterns so that this whole pattern section, it's pretty cool.

And so these are for the components and you see here.

So they have different things like switches.

Like I mentioned before different like dropdowns.

All these different Sliders all these things.

So I thought it'd be cool to kind of talk about it here.

So, welcome to our growing collection of component patterns.

These can provide inspiration, accessibility requirements, adaptive, strategies, for viewport, and user preferences and more, which is pretty cool.

So things like so see here it has like breadcrumbs So, we have these here, and gives you the HTML, the JavaScript, and the CSS to make it happen.

And they're using like using some pretty, like, like up-to-date, like really current like things.

So we have like CSS variables, which is pretty cool.

So this is all like cool ways of kind of like seeing what's out there kind of stuff and then like the media query things.

Yeah, and like the supports so yeah, so there's a lot of cool stuff with it and then There's something here.

So these are like pretty cool, so they have like keyboard navigation stuff.

And yeah it kind of like walk you through and show you an example of if you wanted to create a bird come so this is how it looks and then so yeah.

So we have like the keyboard navigation stuff.

So, how do I make it work?

Oh nope, but we did wrong page.

But yeah, so the stuff like that.

Oh here you can open a demo.

It's pretty cool.

And so this shows you how to create a responsive and accessible.

That's a whole nother thing.

Like without securing the switch like making sure that was accessible and being able to use like with the keyboard and all that stuff too.

So they have links like a full article that's could you learn more video on YouTube and you can check out the actual source code buttons with buttons look like Okay, so, 9 different button types.

Cool.

Carousel, Carousel is a big thing.

He's even like, Oh, see, it doesn't even let you go.

Oh, that's super cool.

And if you look at the animation of it like it goes back and comes up.

That's pretty cool.

And so again, it gives you HTML structure for it.

It was a snap thing to wait, but I thought I could click and drag it.

And so if you ever like curious because it's stuff like this, I like to see how people program because me coming up I always Look like there's a, some scrolls like polyfill thing.

Okay?

Like when I came up like I was always looking at the source code of different websites and out actually print out the actual like the site and the code.

So I could kind of see like what was doing what and but yeah this is so like so for this I you know they're creating a class Which is so Z.

So it's a different way of like looking at things.

I don't even know like hashtag see, I have never even seen that.

Hashtag thing for, okay.

So yeah.

So there's a lot of stuff like you can just by looking and trying things you can learn a lot.

That's why I like seeing these type of Like projects when I get to kind of like, look at what other people are doing.

Oh, okay, so this thing.

So, maybe that's what I never see.

Is using open props, which is a thing?

I think we spoke about on the show before.

So they're like a set of UI components as well.

You use like not UI components but like, they do have UI components to write.

This is a while ago.

Yeah.

So they have my cards and things.

Do they have actual like buttons and stuff?

But so it does like variables like CSS variables and things.

So supercharged CSS variables He has a while ago, I haven't really done much with this.

Okay, that's cool.

Engine.

They're all right.

So yeah.

So other stuff dialogue.

So this is pretty cool like it.

Wait There we go.

That's pretty cool.

It's not letting me do anything though, way.

Okay.

Oh, this is pretty dress up as the game menu.

Like that is pretty cool.

And I don't think they're using yeah, using this thing here but I don't think that's actually doing like the 3D motion.

I think that's coming from here, these things.

Oh, and saw this to like if motion, okay, right?

And that gets that from the user preference right here.

So if the person was it called was refers reduce motion like true, then this wouldn't be moving around.

And so that's some other stuff like that.

I want to like include more into my projects and things and there's like a loading bar Why did I just go back up to the top?

That's pretty cool.

Whose media scroller that is.

Oh, okay.

That's pretty cool.

And even has like the filler images.

So like the kind of To let the so there's no like page shift, you kind of like put something like a placeholder.

I have all sorts of things stories, those stories.

Oh yeah, okay yeah I think yeah, see an account like snaps.

That's pretty cool.

I think I have something I think I have done something like this but that's pretty cool.

Yeah, like I said you have stuff, you can kind of play with Hi, I do this type of stuff.

I kind of like and just, here's a switch.

I think so.

This is not how I did the switch.

And so because this one you can actually like drag mind, you just click it and it activates or deactivates but that's kind of like it.

That is cool.

Yeah.

So you just kind of look at how they do it so it's like a drag event and things that's pretty cool.

You haven't ABS times the whole nother thing.

So let me see something here, like fi I am tabbing through.

Hmm.

Do they have the tabs or if you wanted to go into because that's the thing I was running into like wanting to go into the hoop?

No.

Because the project I was working on like there's liked as but then you need to get inside of the thing.

It's like the tab panel and then come back out.

I have to see how they're doing it.

But again, like it gives you a starting point to try this stuff out and there's a toast.

That's how this one.

It was pretty cool like that.

And then all these like random.

So, that could be handy for some stuff, we did that thing just Yeah, there's even like a slight animation where it kind of like, is almost like it's bumping.

The other one up, see that?

Like, that's pretty cool, like that.

That is awesome.

Wait.

Oh, so you're the job script.

So it's with output, so it's creating the actual output element.

Then in a text, which is, I guess what you put in there and you add these different things, you're saying the role, which is cool.

So yeah, so stuff like again with the accessibility, you're like screen readers will read it out.

Polite.

I don't even, I don't even know that is C and stuff like this out, like oh, what is that?

And then I will go look it up and see area live polite.

I have never heard that one before.

And then again, they're doing more with the reduce motion.

Yeah, this is super cool.

So the ad toast.

Let me see.

This must have been created toast.

Add toast here.

And then it's adding to the, okay.

Also, it's like a flip toast.

So it's either.

So they, if they're okay with motion, it will flip the toes.

Otherwise, it was just appended to it.

So, I am going to flip it.

Flip toast.

Huh.

It was using a, that's cool.

Huh.

That is really cool.

Oh, okay.

I saw is going to be out here earlier, but yeah, I am getting caught up and so there're that shells to web, dev dot, patterns, web dev.

I am tired.

So, component patterns, cool stuff.

Alright, so going to get back to work here and it's raining.

And so my internet is by going to cut out.

So thanks for hanging out.

Always thundering to okay, good thing.

I close the windows on the van.

Alright.

So thanks again for hanging out.

I will see you all later.

I am going to send you all with some traveling music.

This is new Jabez featuring a Pawnee be the check is call.

Thank you because again thanks for hanging out and see you all later.

I wish you much productivity and whatever is that you're working on?

All right.

Thanks y'all see.

I am going to Chuck it happens.

It gets more meeting somebody.