Speaker is not getting as much work done as they would like, but they are still making progress. They want to shout out someone who's doing cool things. Speaker is big into web components. Corey Lavista created a set of web components for react. Speaker uses a QR code to send a link to a website. They explain how to set the initial position of a web component.

Speaker is going to use a split panel panel in a coming project. They are going to use the material from shoelace 2.0 for an upcoming project.

Speaker has released the first stable release of shoelace. They have created a free open source, library of web components, web components were who they can use to build websites and web applications. Corey started working on it as a side project and was offered the job at font awesome. Com. Speaker thanks their users for their support.

Corey is working on shoelace full-time now. They are fully releasing the 2.0 stable version. Web components are built using web standards. They can be used in any web framework. Speaker recommends View as a design system starter kit. Anglers felt solid and more. The article on the shoelace site is a great place to start talks about web components.

They have just released a major release of shoelace. They are going to deliver an incredible amount of value in the coming year. People have joined the shoelace community on Discord. There are over 300 million CD hits per month, 13,000 npm downloads per week. Speaker thanks everyone for their work on the project. They want to send them off with some traveling music. Speaker has a new Jabez featuring a Pawnee be track.

Andre will see them later.

• web components
• style sheet
• icon library
• design system
• buttons dialogues
• shoelace site
• project 669 issues
• single contributor

Welcome back your dreams, were your ticket, I welcome back.

Same old place that you like but those dreams everything, and they turn around each other.

Welcome back.

All right.

Give it a stretch.

Oh yeah.

Oh yeah.

He's been kind of slow day, but you know, any, any bit of advancement is still moving in the right direction, right?

So, not getting as much as I thought I would get, but laundry is getting done, but then the dryer looking up, some like, some stuff.

So, if it's coming together slowly, but surely as long as there's some progress being made.

All right, speaking progress being made, I wanted to take this time out to shout out somebody's doing super cool things.

So Really quickly, make sure my screen here and I will share audio just in case.

But for people, that don't know, I am big into web components, right?

And I have been talking about web components in a bunch of places and I always bring up in my slides, Corey Lavista and Corey Lavista created shoelace, right?

And shoelace is an amazing set of web components, and so I always use Quarry and shoelace as like an example of cool use case and so shoelace.

Is a forward-thinking library of web components, right?

And it's cool because you can use the web components in all the different Frameworks and Corey went above and beyond to actually have a set of like react components.

So there's like the web components and you wanted to make sure he because react kind of supports web components but not fully.

So he created like a separate set for react, right?

And so I kind of like to go through.

So I have spoken about this on the side before For.

So, some of my favorite ones are.

Where is it?

Like the, I use a QR code.

One a bunch, right?

Then?

All you do is.

So the way that works is that Where is it?

So you have like SL?

Hi.

Think you are hyphen code and the value the website that you want to go to.

You just put that there and you have like the label.

It's pretty dope, right?

Let us see.

Those the one?

That's the Image compare, here it is.

I haven't used this yet, but this is pretty cool.

So you see from color to black and white, that's pretty awesome.

And to do that all it is.

So you have the image SL hyphen image, hyphen comparer, then you have the in use, put the two images like the before.

So you say the slot so you see which one it is.

So that's the before.

And then the after.

So that's how you determine that.

They're so by using the slot attributes.

And that's it, you don't have to worry about anything else, like this bar or anything or had to, you know, overlay things.

You just do that and it just works.

That's one of the cool things about web components, so you can set things like the initial position.

And I am thinking, oh yeah, with the attributes.

You can like, set the styling of it.

So we have like the CSS from.

It's all sorts of cool things, right?

Was another one.

Of course, there's like the card if you want like a nice-looking card there goes another one.

Was it divider?

This one no it was what's another one but this is also pretty cool progress bars.

There was one split panel there it is.

So this I am going to be using like in a coming project.

So being able to just Divide it up like that which is again.

All it is, is just SL hyphen split have been panel and then you determine what's the start and end through the slots and that's it in just, you put whatever you want in there.

So I am going to be using that for something upcoming project.

Pretty cool.

All right, all that being said, Again, shouts to Corey.

And so, I saw this came across my feet, like a while ago.

When Everybody's Talkin to now there's shoelace.

2.0 is official.

Now, you may notice can think it's been two point.

Oh, four minutes.

But those are like beta releases.

I think if I remember correctly but now it's official stable version, right?

Oh yeah so it's this right here.

It's been three years since I broke ground.

On shoelace 2.0.

Between then and now the project has amassed over 300 million monthly hits on Jays deliver.

So that's like a CDN and so you can leave.

It's also here, is it under usage?

Or is it installation?

Those who want?

Yeah, so you can.

So instead of installing each one you can actually just use a CDN.

And so right here is for the style sheet and in here for the actual JavaScript stuff here, all right so you're saying he has over 300 million monthly hits on JS deliver that is amazing.

And as of today which was January 24th.

It is JS delivers.

Third most popular project.

Oh wow.

That's pretty cool.

And that was just the beta version.

So yeah, again it's just the beta.

So now it's the official one.

So today, I am happy to announce that the first stable release of shoelace is finally here.

Okay, so those familiar unfamiliar shoelaces a free open source, library of web components, web components were who you can use to build websites and web applications.

There are overs in 50 accessible handcrafted user.

Face components to choose from and you can use them in any framework you want.

So our first and foremost, I would like to say thank you to all my users.

I have poured my heart and soul into this library, and I am thrilled to see so many people building with it.

You continue to inspire me every day and what's cool is.

So Corey, yet another job, right?

So it's shoelace was like a side project for him, and so he just you know working on it you know whenever you got a chance and the folks at font awesome.com They saw it, and they gave him, the opportunity.

Let me go.

Oh, by the way, I am going to add links to all this stuff to the recording so you can check it out for yourself, one, awesome.com.

Riley's fun, awesome back in the day as well.

And so they have a bunch of different icons and things.

So font, awesome is the internet icon library and toolkit used by millions of designers developers and content creators.

And so it has all these different Icons that you can use in your projects right?

Cool.

So they are they allowing Corey to be able to work on shoelace full-time.

And so with that he's taking that time to actually fully release shoelace 2.0 stable, right?

Officially so it's pretty dope.

All right, so now it goes into why choose web components.

Web components are built using web standards, meaning they don't require framework, you can think of them as custom HTML elements because that's exactly what they are.

And there's a custom elements API and all those other stuff.

So.

Yeah.

And because they're just HTML elements.

You can use them in any framework, you want such as react.

While react is kind of funny right now, but it's coming, it's coming its I think in the next version is like fully support.

That's all I am hearing.

So View.

Anglers felt solid and more.

This a can use it without so you don't have to use them with a framework as one who that make sure that's clear like you get its use it and just regular HTML CSS JavaScript.

These makes web components a great candidate for your next design system.

In fact, shoelace active design acts as a design system starter kit, allowing you to customize it to suit.

Your needs shoelaces built with accessibility in mind.

Awesome.

And comes with both light and dark themes out of the box.

And so, why spend months building UI Primitives such as like buttons dialogues, form, controls tabs, Etc.

Now, you can get dozens of battle-tested components and start building with them right now.

And then, so are you new to web components and just curious this article on the shoelace site is a great place to start talks about web components things are?

Alright, so yeah, what's next with this major?

With this really while this release is a major milestone for shoelace?

We're still Just getting started.

There's always more to do like adding more features doing more tests and adding more polish and the support of the amazing.

Folks have fought awesome.

We're going to deliver an incredible amount of value in the coming year, so that's good to hear.

So, shouts, the font awesome and in sorry, no spoilers, but you will be hearing a lot about shoelace as we continue.

Our journey to become everyone's favorite open source web component Library.

So before I go, I would like to share some interesting stats about this Release.

And then she likes to number talks about like there're 55 components, over 2500, commits have been made.

So that's Cory.

And folks, just like working on it, 85 people have contributed to the project 669 issues have been filed on GitHub and there's 274 pull requests more than 150 discussions over 500.

People have joined the shoelace community on Discord that this court has he linked to this court?

Yep.

It's the Discord.

And then over 300 million, CD ends hits per month.

But over 13,000 npm downloads per week.

Wow.

Yeah.

And it's only third.

How about that on?

Just the liver.

And then number two, product of the day on product hunt, cool.

And then he says a special thanks.

I like to extend a very special thank you to everyone to every single contributor who work to make this possible, everyone who's filed a bug submitted, a PR requested, a feature started a discussion, helped with testing and advocated for the project, you are just as Responsible.

Shoelaces successes.

I am I like to thank the folks at font awesome for recognizing, shoelaces potential and believing in me to make it happen.

Thank you and keep building awesome stuff.

So yeah, some shots of Corey that's super dope.

Always good to see people who are they kind of like build this thing as a passion project and it's kind of grown and to where they are able to do really cool things.

So yeah, shouts at Cory and I think that's it.

Yeah, cool stuff.

Kind of amazing and congratulations once again and yeah we got your back to work because I want to get back to this refactor.

I am doing on this project.

So yeah again, thank you hanging out again, shots a quarry continued success and I want to send you all off with some traveling music.

This is a new Jabez featuring a Pawnee be the track is called, thank you.

And when we come back again, 15 minutes after the hour, we will talk about take a look at artists website.

Right?

There's some music and watching the videos and maybe you will become a fan of that artist, you know, just try and spread the good word about good art.

Alright.

So again, thanks for hanging out.

This is new Jabez featuring a Pawnee be.

Thank you.

All right, y'all be easy and see you later.

Peace.