Speaker explains why they like web components. They explain how toggling the summary marker works. A disclosure widget is typically presented on screen with a small triangle that rotates or twist indicate open closed at it. They can make it something besides the arrow with just HTML CSS. Speaker is interested in adding the plus and minus signs to the HTML. It's a new thing at layer. Speaker will look into it later.

Speaker explains to Speaker how modal dialogs work. They explain to them how to submit a form with a button. Speaker wants to know how the form method dialogue works.

They discuss the difference between a modal dialog and a show. Speaker explains to Speaker the difference between a modal and a non-modal form element. They thanks Mozilla developer Network for their services to the web. Speaker sends them a link to a song called "Butter". They want to finish up the radio show and send them off with some traveling music.

Speaker has been productive in the last work session. They are almost done with the post radio show promo stuff, got a lot of Instagram stuff done and some of the Twitter stuff, and they are going to do the email blast. Speaker shares a link to web. Com. It's a collection of resources to help people learn HTML. Speaker wants people to check out some of the cool stuff they saw. They explain why they need a JavaScript library to create web components. Speaker is a big fan of template and talk about this here. They talk about HTML templates, custom elements and Shadow Dom.

Speaker likes new things about HTML apis. They have a list of favorite HTML elements. Speaker likes the frequently asked questions section provided by codepen. They explain how to create a summary and how to set it to open automatically.

Speaker will see BZ 15 minutes after the hour.

• vanilla web component
• javascript library
• html templates
• documents
• disclosure widget
• detail tag
• summary marker
• dialogue element
• method dialog
• form method dialogue

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

Same old place that you since you.

But those dreams everything, and they turn around it was going on.

Welcome back to another addition, to a break session.

Hopefully, you have been productive in that last work session.

I actually got almost done with like the post radio show promo stuff, like I got a lot of (Instagram) stuff done and some of the Twitter stuff, and so I got to finish up that and then do the email blast.

Everybody on the mailing list into the different radio promoters who send us stuff.

So making some progress.

But I will quickly for this brick session.

I want to kind of go over something that We spoke about it before but now it's completed.

And, so I wanted to talk about it and show it.

So sharing my screen, webbed a lot, like, I talk about this like quite a bit again, web dev.

Let me add this to the list of links, so you can check it out yourself.

All right, so again this is web.com.

And it's made by Google.

And so what it is just kind of like All the different things that are happening on the web, and they kind of talked about it and stuff, but they also have like learning resources, which is pretty cool.

And so, they have this whole learns HTML again, sky, like a coarse kind of thing, but like, just a collection of different things to help you learn HTML, I guess.

So you can see here over on the side, That you know so there's an overview of HTML document structure metadata.

So we kind of like I think what over this before but what I want to talk about now is that there're looks like it's completed.

So before these were like coming soon or something and but it looks like now so you conclude your next steps so everything has been added.

So you wanted to kind of check it out.

You can some of the cool stuff I saw here like this template Chef slot and Shadow This is pretty cool because it basically steps you through creating like a web component, like a just a vanilla web component.

It's a, like, a star rating thing.

And this was here, says the benefit of web components is they're really using reusable Leti.

You can create a UI widget once and reuse it multiple times while you don't need JavaScript to create web components, know why you do need.

I don't know why I said that, because you do need JavaScript still early, all right, while you do need JavaScript to create web components, you don't need a JavaScript library because again, it's all built in to the web.

It's kind of amazing HTML and the associated apis provide everything you need.

Now.

You may use want to use a JavaScript library because a lot of the like the core apis can get kind of like boilerplate e wears like a lot of stuff that you have to kind of keep track of and as with any other like JavaScript library, those are meant to kind of help and kind of abstract some of that boilerplate he stuff.

But you can, like I said, you could do it strictly with just web apis without any of that external stuff.

And so they create this star rating thing here.

And they talked about HTML templates, custom elements and Shadow Dom which help make up what the points combined together, so they talk.

So it's pretty dope.

It's about template, which is amazing.

I am a big fan of template and talk about this here.

So, so like there's a template tag here.

But the cool thing about templates is that the browser doesn't render it.

It just basically kind of like, skips over it and so the but you can see here there is some HTML there, but it's not showing up.

And so they talked about that too, and I kind of like go through it.

It, it's pretty dope, and they talk about slot.

Elements are all these things, right?

And another thing that I saw, that was pretty cool.

So, yes, you can see they talk about pretty much almost like all the different stuff semantic HTML which is important and links list, navigation, tables forms, images, audio and video.

So you like new things HTML apis, I think I look at that.

What's this one?

Okay, so the Dom, the Dom has an API for accessing and manipulating documents all right to do, so they kind of break it down here which is pretty cool.

Let us see when they break down.

How they're all right.

Very nice.

So, yeah.

So they break it all down.

Super cool, right?

We're my.

Here we go.

Okay, let us see.

Well it's about Focus.

Now this here this details of summary quite possibly.

I have a list of like favorite HTML elements and details of summary is one of them you can tell because I actually used it on this website here.

So, this is a detailed summary.

This, this is so cool and it goes on to talk a bit more about it.

And a disclosure widget is a user interface control that hides and shows content and so that's basically what I did there.

It's like frequently asked questions stuff and was cool.

I like about it is that it gives you like these in browser examples that you can check out provided by codepen, right?

And oh, by the way, I don't think I Are you only do a link directly to the learn HTML section if you want to check it out?

Alright, and so this is basically what I have here, right?

And just straight out the box.

This is what you get.

Like it's almost like it's like a web component, where all you do is you wrap.

Like here's a summary that shows up here.

Right?

So blend in smooth is in the summary tag and then you wrap like P tag or if you like anything like a div sing.

But a p would be semantically, correct.

It was like an actual like paragraph and it just shows up there.

And you just drop everything like a details and it just does it for you.

Like you don't have to worry about like open and close.

All these things, just out of the box it does it for you.

And if you wanted this one to be open automatically, you set like this, let me do it, like, you get a set on there, like, you want that one to be open, and they will just do it for you.

Think it's one.

We can see right now.

I can't see if I do this.

And refresh.

See, it's open just because I put open in that detail tag.

I am amazing.

So this is the reason why I like web component because imagine being able to create your own right, however, you want.

All right?

Neither So it goes through and so you again.

So yeah.

So summary is and then you kind of show like if you want to do some styling and stuff, you can do that.

And then you can toggle the visibility and only just talked about the open attribute the thing I just did just now, Toggling the summary marker, in the Tuolumne, you will notice the arrow.

Oh okay, so okay, okay yes let me see.

Check this out.

But what is that?

That looks weird and bye.

I will see that.

That's weird.

Okay um so let me this open again.

Well, if Eric does Showdown, okay, never mind cool.

Let us see.

So Okay.

It's kind of so toggling the summary marker.

It does that mean a disclosure widget is typically presented on screen with a small triangle that rotates or twist indicate open closed at it?

Oh, okay.

I think what they're saying here.

Is that you can make it something besides the arrow?

Yeah, so you make like a plus and then like an — honest pretty dope.

And that's with just HTML CSS.

No.

JavaScript to like switch that out or anything, which is pretty dope.

So let us see, is done they have it here?

Let us see.

Try to see where they add the plus and minus stuff?

Once that's in the HTML, Maybe Hmm.

Interesting.

Let us see that.

Hold on.

I am kind of interested.

What is this is so weird?

Nothing?

What?

Nothing to do with something.

Sure.

Nothing.

Look over this.

I wonder how they This is new to me this at layer thing.

That's the new thing for me.

So yeah.

So there's always stuffed you can always like that's what I like about web development is always something new to kind of check out.

Okay.

So here at layer I have not done anything with that before.

I am gonna look into that later.

I am looking for the plus sign.

And then how are they doing the plus sign?

Minus sign.

I don't know, that's something I will have to check out later but yeah, so that's pretty cool.

So just with HTML CSS like you can change the styling which is pretty dope.

Okay?

So much you can do, they kind of keeps on going this one with the open already, and they have won handle, errors and stuff.

Alright, so that is the details and summary, right?

Now, this It's kind of, like modal's if you ever have modal's or like dialog boxes before, you know, they're a pain.

And so now it's like actually built in which is pretty dope.

And so the dialogue element is a useful element for representing any kind of dialogue and HTML find out how it works.

Cool, this is good.

Oh, that's cool.

Alright.

Um, Yeah, so like here so like modal dialogs.

Here's an example of a modal dialog open the dialogue with the open modal dialog button.

Another kind of okay, but they're all just okay near my Once open, there are three ways to close the dialog.

The Escape key, which is cool.

So imagine you have to, like, do all that like in JavaScript, like listen for the Escape key.

Check of the thing is open and close it all the stuff and then submitting a form with a button.

It has the form method dialogue.

So that I will open it up.

It's pretty dope set or if the form itself has a method dialog set, that's pretty cool.

And the HTML element close method.

That's pretty cool.

So if you were to click here, bam.

Is your Adela.

And so you can close here is a closed event happened.

Open this, you can fill out stuff.

So great, huh?

Yeah, fill out, some cool warranty, sure.

Let us go battery with.

No, let us go solar, you know, be a little bit more environmentally friendly, so if I hit submit, So it just basically submitted the page, all right?

Never mind.

We run.

You run.

Okay, okay, cool.

Open.

Then it was reset.

But as quotes clears everything.

All right, so it's like a form here and then JS close.

They can close it through JavaScript.

All right, you can get HTML.

So here's like just the dialogue again, it's kind of amazing dialogue.

He put a form in there.

There's that form method dialogue there that was talking about before you just put your form inside the dialogue and then you're good to go and I will pop open.

So when you open model dialog button, are they using JavaScript to open it or What is it called?

Okay, I d-- modal.

Okay.

Yep.

That's a modal.

Add event listener.

If you click it, then.

Yeah.

So does the dialogue that show modal?

So that's how you would show it.

Cool.

I think if you put like a show, I am sure it goes into it.

I think if you put showing here so automatically pop up.

Never let me out I can't and in this area.

Do not sure what just happened there.

Look show.

Look, never mind.

Those are thing you could do to make it show up, automatically there's the Hat.

Open the dialogue as a motor, okay?

So opens dialog opens out like as a modal.

Oh, so I guess taking over the whole thing.

Like showing up above it, okay?

Again, I am just kind of guessing around here.

Let us see.

Okay, there's a nerd backdrop so Nan.

Modal dialogs.

Okay, let us take a look at this.

So the show is simply open the dog but without adding old so that's the difference.

Modal's have like a backdrop.

And then causing anything like blow it.

So like any form elements or buttons like you can't click them?

But if you just have a regular one then you can do it.

Like I can click these links.

Or as with this other one, if I open it, I am going close this.

See, I can't click the link.

That's so that's a difference because the backdrop.

All right, so that's what the between modal and non-modal.

See you learn something every day, so it sees a bad user experience.

So yes, you don't want that to happen.

Okay.

In closing the dialog.

So yes a lot of cool stuff here.

You mean like really dope stuff now so you can check that out.

What now another one of my favorite HTML elements is field set this thing is so cool, that it's like The Styling that you get out of it.

It's just like your legend or whatever is like here and then you like a box John around it.

Like that is, I don't know.

I think that's super cool.

Let me add a link to this as well.

Yeah, she will see what web dev again.

Providing all sorts of really dope resources for us, to be better, stewards of the web.

And, so I appreciate that kind of have everything all in one place and shouts to Mozilla developer Network Mozilla development developed, developer Networks mdn And yeah, right.

Yeah.

Mozilla developer Network.

Yes.

So shots of them, really cool stuff as well.

Again being really good resources for things on the internet, to help us get better.

All right, I am gonna get you all back to work because I want to finish up this radio show stuff.

And so when send you all off with some traveling music, this here Is Anthony Cruz AKA butter.

Okay, hold on.

There you go.

Anthony Cruz, AKA butter.

The track is called.

Thank you.

Thanks again for hanging out.

I will see you 15 minutes after the hour until.

Then I wish you much productivity and thanks again for hanging out.

All right, see y'all later BZ.

I want to say thank you.