Speaker created a proof-of-concept for a project. Manager was like, what did speaker think about the web component and how it looks now. People were using it and wanted to style them, speaker did some research and came up with ideas.

• javascript client sdk
• react angular view
• components
• article blog post
• regular html tags
• background color black
• final break session

Bad since you hung around but those dreams, everything, and they turned around thought they major.

Always could spot a prayer, welcome back.

And I smile way I think and I know what to see you again.

Learn to me.

Was there something they have never lead you?

Welcome back.

Welcome back.

Welcome back.

Hey, alright, welcome back to the second break of this second cipher of the day.

All right, cool.

Let us get into it.

Alright, so I hope everyone whatever you did.

I should.

Working on, you're making some progress and some productivity.

All right.

Let us see.

I am going to share screen too.

So like I said before I am a JavaScript developer Advocate advantage and that allows me opportunities to be able to make random things with our apis and sdks.

So I part of my job is to kind of make sure everything is cool with the client SDK.

And so the you don't quite as the K software developer kit development kit.

Either way.

It's a it's like a library that helps using our apis a little bit more straight forward instead of having to make calls to like actual endpoints.

You can do it a lot easier.

Or with just this library.

And so we have a bunch of different ones that is supported different languages.

And, so I head up the JavaScript now head up.

But I handle I work on the JavaScript client SDK.

So if you have been around for any length of time, you know, that I am into web components.

And so I wrote a blog post.

Well, I wrote some blog posts on web components in general.

And then I wrote another blog post, a series of blog posts about well.

First one was creating a web component and say I dialer like a keypad and then I create a series of different blog post on how to use that keypad in the different like Frameworks and libraries.

So like react angular view going to be writing.

Once felt at some point once I get time.

But I took all that stuff and kind of created, not just the dialer the keypad but also for just in general like the SDK itself.

And so I wrote this whole article blog post.

And so calling the client SDK UI web components because what they are just see it.

So let us say you want to build a chat app.

So I created a little like they're just like regular HTML tags.

And so you see if you want the messages show up you would just put VC — messages and then your messages in your conversation.

For the form the client SDK will show up here.

Here, if you want to see the members input, you know, we type in the chat, the text and hit send and then like an indicator to see who's typing.

So all those, I encapsulated into their own elements, their own custom elements or web components.

And so, as you can see, they looked pretty like just plain because again, when I created this, it was more like a proof-of-concept, kind of thing.

And I honestly didn't really think anybody would use it.

Until my manager was like, hey, what do you think about styling?

The web component?

So, they look a little nicer because right now, they're just the bare bones.

Bones, like whatever your browser says, is a button.

That's what it looks like.

Whatever looks than input.

That's what it looks like.

And so for the past couple of weeks, what have you been working on?

Trying to figure out how to style them so that like they will be a default style that looks nice, you now and then away for anybody that's using it to actually be able to style it.

However, they want, and I am just amazed that.

As people actually were using it and wanted to be able to style it or to have like an actual style to it.

So it's like oh that's cool.

And so did some research and things that I came across.

Oh, you know what?

Let me I am going to put a link to my blog posts if you're interested to check it out.

So any links that I mentioned I am going to try and add to here so All right?

Now, came across this thing from mdn and it's called CSS part.

And what CSS part allows you to do is that with web components.

Everything is kind of built within the shadow Dom.

So there's like an area that's within the web components that you can't really penetrate with your outer CSS, which is a good thing because As well.

It depends on your use case because a lot of times, you may not want your web component to be like altered by the outside application.

But if you do, you can allow it with some styling and customizing with CSS part.

And that to here, as well.

Cool.

So as you can see, like, right here at this example, so you have your custom elements.

So for example, like the VC — messages, you put that in there and then you would select the part and the name, you gave the part.

So, so here's a more filled out example, so they have this tab custom elements.

So that's their element.

They're custom element.

All right, but see they have these parts here.

So this part is tab active this part.

So they all have tabbed because they are tabs, but this one has a special one active to kind of differentiate it from the other ones.

And so in the CSS now, see you do tab custom elements, so it knows to look for that element and then to dig down into the shadow Dom.

And to be able to look for that part name, which is tab.

So this would apply that to all of them because just like CSS, but so then there's also you can actually do like actions like hover.

What happens when you hover over it?

And then here, hover and active and so Yes, we can see so hover active.

So you can do like that.

There's a focus, but then there's also this part active here.

So that will override all the other stuff and since so, you know, specificity and all that stuff.

So yes, it will go to this one alone because it has that active part.

And then I think that.

Yeah, so you could actually see so many hover.

And then you can click on them.

But see this one is the active so that's why it has that.

All right.

So cool.

So I was like, all right.

So let me work on that come together, you know create something and see how it looks.

So here's a demo of what it came up with.

Let me see much time.

I have left.

All right, so let me log in.

Let us log in as doing.

Login.

Well, that's doing its thing.

Let me open.

I did press it.

Right.

You guys have been having weird issues.

You just boot up took a second.

I am using glitch and sometimes glitch like to go to sleep, you know, really quickly.

And so it takes a minute.

Alright, so let me open this in a new, it incognito window.

Alrighty.

There's that I logged in as Alice before just to kind of make sure everything worked.

So wow.

Okay, that what okay, let me Over here and let us call this one Bob.

Login, cool, easy, Bob, pop up.

So this is that Vis VC — members.

You can see house like a little stalling on it.

So you can kind of see the different like rows of names, so added that and now let me see if I type in something here.

Hello, notice it says, Bob is typing.

Hello there.

All right, and then we hit send.

So, you can see.

The different styling.

They're on their.

Hey back.

Smaller, oh, that just threw everything off.

Wonderful.

All right.

So what's our come here?

Do you see some behind-the-scenes stuff here?

Cool, come here.

Nope.

Didn't want to that showing too early.

Come on, this Mount this trackpad.

Whoo, buddy.

All right, and hey back and so you can see it goes back and forth.

So alright, so that's how it looks now as compared to what I had before so you can kind of see the difference and so it's a little bit more stylish.

I think so there.

So that's what you get out of the box.

Now, let us say you want to actually customize it for Howard.

What?

So, I put a bunch of different parts on there are as many as I could fit on there.

So maximize this.

Cool now, so let us take a look.

So okay.

So that's that.

So I shall Sue web components Dev.

I like to if any time like creating a web component and I don't want to have to like pull it to my local or whatever.

I just want to do something kind of quick or something.

I can just show, I would use web components that Dev.

So shafted then let me put their link to their site.

So if you ever want to Check out, you know, the kind of like a code pin if you're familiar with code pin for like web components.

So it's something you can kind of spin up really quickly to test things out.

So that's what I did for the elements, elements to created save that.

Okay, so now so here is the VC keypad.

I was talking about before and so, you know just buttons quick or what have you?

You can enter all that goodness, right?

So now, We're so now I have this style sheet.

So now it's going to mostly apply to this one here, but see what happens when you apply the styles.

Save that.

You see it looks a lot different lot, more customized and let us take a look at the CSS to make that happen.

So you can see, I have a bunch of different positions in rows, and I am running up a blog post, and I am a PR for The Styling, the customized styling.

So that's going to come out somewhere.

Write a blog post and everything is going to explain stuff.

The readme has like diagrams and how things in like, how things are like labeled out and stuff and all its a lot and like, even They will code examples that you can use.

So I look for, you can look for that.

But yeah, so you can see like here's the button.

And, so I did the button of radius of a hundred and then I set the height and the width at 60 and the background color black.

So you can see the level of detail that you can actually go ahead and customize things with.

So that's that one.

Now.

Let us talk about some of the chat stuff.

So here're the messages that you saw before.

All right, I so let me undo this.

So I want you to see the change in the stuff that you can actually customize with it.

So that's the rest of the basic.

That's what you get out of the box and then default not basically default.

So, let me save this.

CI qiu can do so much stuff with it.

All right.

So there's that the text input.

See what you can do with that.

Whoops.

Uncomment that didn't do what I needed to do.

Come on comments.

There we go.

So you can totally change how it looks.

And so, let us take this one.

Had a few like, very little.

So let us take a look at the CSS.

So right here, I label this part button because it's the button and then here is the part input because it's the input.

And so you're able to just through CSS change, how it is to match your actual overall application.

And so, the point was to be able to just Not have to worry about all like listening for events and doing all these things.

You just place the element.

So just like right here.

See this is the element here, just place that there and you have the members list.

You don't have to worry about listening for when members are added or removed or whatever that does it for you.

And, so I thought a little bit cleaner to be able to get all that stuff done.

And typing indicator is pretty much just like some text and so it wasn't either.

So like here, the VC typing indicator.

There was nothing to like at a part two.

So all you have to do is just let me uncomment it so you can see what you can do.

And so, all you do is just actually Target the VC type of indicator and engine just do that.

So, pretty, cool stuff.

And yeah, so I have got more stuff coming and like I said, I got a PR for the, for the repo to have all these wake all these customizations available.

So that's coming up soon.

And that's going to push it to one.

1.0 version 1.0, which is pretty cool.

And, and then update the readme.

So, like I said, there's like diagram so you can like, pick out the parts and be able to Target what you want to stylize your own way and stuff.

And then there's like actual like code Snippets.

You can copy and paste and play around with it's a pretty good read me, you know, like in-depth kind of and if not, just, you know, let me know because it's open source.

So you be able to check it out as well.

So yeah.

That's what I worked on the past couple weeks.

And that's going to be released at some point.

Going to have a blog post.

Like I said for it and yeah, oh and then, I guess if you want to.

So this is the blog post, I did.

But the blog posts, I created a shortcut, like, a short URL that will, to Mike my authors page on Vaughn inch.

And it lists all the different blog posts.

I have written in the past and upcoming.

So let me put that as well.

In here, HTTP.

Why to go to HD being weird adlink, save links?

And yeah, so, you know if you, if you're into web components, you know, let me know what you think.

I think they're kind of awesome to where you can do all sorts of goodness because again it like I created it.

So it was a little bit easier to work with the conversations API so you don't have to worry about oh well.

The event.

I need to listen for this thing to show up and all these other things.

Nope.

We handle all that behind the scenes in the element and so you don't have to worry about it.

And if there's ever any changes we have like the CDN so you can get the latest so you can.

So you can.

What's cool is you can like pin your version.

So if you have a version You Like It, Cool pin that will work.

But if you want the latest then you can actually tag the link to the CDN as latest.

It will pull in like the newest changes and stuff.

So as we build on it, you know, you will get all the goodness.

So, yeah, so that's that cool.

So let me get y'all back to work because let me know what you think, you know, then a minute, and I am just surprised people are actually using it, which I thought was pretty cool, and they actually wanted more from me, you know, I mean because sometimes you build stuff and like ah, nobody's going to use it, but people actually did, and they wanted, you know, improvements on it.

So, that's pretty.

Also, all right.

Let me see.

Like I said, it's open source, so you can, like clone your own and build on top of it and things, and make it better to, you know, maybe a suit, your own needs.

Its top screen.

Share, cool.

So I am going to get you all back to work.

Remember the next and final break session is 15 minutes after the hour and if we don't have any show and tells going to go over and artists that we play on the radio show there.

Website super, super dope artist, super cool.

And so you may have heard of them, maybe not but you will after this and hopefully, you know, you become a, you dig it.

You become a fan, you know, so alright, so going to share my screen again, get you all back to work again.

Thank you all for hanging out and hopefully you're getting stuff done.

I am actually working on my other project.

The bigger one.

I did.

The, the Doing app can like, it's a quick side thing.

That's kind of take my mind off the bigger one.

And so now, I have been thinking about the bigger one.

I think I might have found a solution through a third party to do it.

I think it'd be better, and they even have like a widget to make a little bit easier.

So I am going to try and get that widget into my project and I just been reading up on the documentation stuff and hopefully maybe I will have a demo at some point.

All right, cool.

Thank you all for hanging out and get you back to work and let us get it much productivity to you.

All right, here we go.

Send you all off with some traveling music.

This is a new Jabez and a Pawnee be.

It's called.

Thank you because I want to thank you.

All right, cool.

See you all soon for the final break session.

Here we go.