Speaker is looking for information about a new thing. they want Deanna to explain it to them in detail. Speaker doesn't know the dates of when the model was created. He's not seen it. They wrote an article on CSS tricks. It's pretty good. You get a lot of modal related features for free with alert confirm and prompt in the browser. Speaker likes the way alert confirm and prompt works. It focuses on the dialog box. It supports user preferences. Speaker explains to Speaker how to replace JavaScript dialogues with a template. Speaker explains to Speaker how the dialogue element was created and how it works. Speaker is a big fan of the confirm and prompt features in the browser.

Speaker has seen pseudo CSS but they haven't used it yet. Speaker has used part of it so far, but doesn't have the audio. Speaker shares some audio to show how to replace JavaScript dialogues with the newer HTML dialogue element.

Speaker is looking for the mouse. It's on them side screen. Speaker wants to put in them element that they would like to see happen and that would be the switch element. Speaker is going to send them all off with some traveling music and let them set this time. Speaker will be back in 15 minutes after the hour for the final break session of the first Cipher.

Speaker explains how to use method dialogues in a form. Speaker explains how to create a form and how it works. Speaker explains how the form and the dialogue works.

Speaker has a patio and wants to know how to style it and how to make it accessible. Mozilla developer Network sends them a link with information on how other browsers do it. Speaker explains to Speaker how the form elements can close the dialog if they have the attribute method dialogue when it's submitted. Speaker explains to Speaker how the dialog box works. Speaker wants to know if they can press Escape. If they can, they can choose red panda and cancel. Speaker explains how the Cancel button clicks works. Chrome has been doing it since 37 Chrome is on. They do it. Firefox doesn't support it. Speaker has found two preview versions of Chrome: one for Android and one for iOS. The Android preview allows you to replace JavaScript dialogues with the dialogue element.

Speaker has started doing some promos stuff for the radio show. Speaker will share with you a link to a useful feature of webkit. Speaker is excited about the new built-in accessible or inaccessible dialogue HTML element in Safari 15.4 Beta. Speaker explains how to use dialogue in a website. Speaker explains how dialogues are hidden by default and how to show them. Speaker explains how the modal works. Speaker explains to a working example how the system works. Speaker explains to Speaker the features of modal dialogs.

• safari browsers
• modal dialogs
• modal dialogues
• normal form
• attribute method dialogue
• true model
• newer html dialogue element

Welcome back, same old place that you know, but those dreams everything, and they turn around each other.

Hey, what's going on?

All right, almost messed that up.

Huh?

All right, so, how's everyone doing?

Hopefully, you're doing your thing being productive, you know, so first kind of stretch it out.

Let us give it a bit of a stretch.

Oh, that's good.

That's good.

All right, so, Let us go through what we started my laundry.

So that's happening.

Started doing some promos stuff for the radio show.

And yeah, so Figured what we could do is we will take a look at something that I came across this week.

I thought was pretty cool and something I have been kind of looking forward to and yeah, so I figured we just go ahead and take a look at that.

All right, so I make sure I got everything so it all started with sure.

My screen really good, fish in the screen.

Where is it?

Start screen.

Share?

Yes, not going to need any audio.

I am pretty sure.

So all right.

Here we go.

Now we have mentioned it arose Cannon before on the show, really good follow on Twitter, especially if you were to like WebEx, our web are went VR with ar type of stuff.

I do a lot of cool stuff and your stuff around the web in general and so let me copy this link.

And I am going to add it to the list of link so you can check it out yourself now.

Alright, so saw this on my feed, and they said I am so happy webkit is getting dialogue.

I will talk about that.

Like is it is a really useful feature for creating well dialogues.

I really like its ability to be closed via form controls.

You can do some really clever stuff with it.

And so they're referring to this tweet from webkit, which is the underlying like, technology for like Safari browsers.

And it says, learn more about the new built-in accessible or inaccessible dialogue HTML element available, in Safari, technology, technology preview, and Safari 15.4 Beta And, You Know, It Even clicks the link.

Let me, let me check out their link.

And, so I will add this to it as well.

So let us take a look at what that's talking about.

All right, I love how they're like introducing the dialog element.

Like it hasn't been around for a very long time.

You know, I mean, but neither here nor there.

I am happy.

They're jumping along.

So it goes to like, how do I use dialogue?

And so he pretty much is set up.

So that logs are like modal's.

I guess I am called also modos there things that pop up on your screen and ask you whether you want to confirm something or cancel something.

I don't you ever seen those.

You go to a website.

It pops up only if they have an example.

Well, so here's an example.

So pretty much how you use it is that you have dialogue because it's our HTML element, and then you put the stuff that you want in it.

Right, cool.

And so, like I said, do you want to delete everything question, mark, you lose all your data you can either cancel or delete, right?

And so dialogues are hidden by default.

We can use show modal.

So again, they're modal's method to show the dialogue.

I wonder whether you use dialogue, instead of modal.

I am going there's a, I don't know, either.

When it's shown the dialogue can be close with the close method.

Cool.

So you can show it was chomo.

Do you want to close it?

Close modal or close?

The modal.

All right, super cool going on.

So then you have the button for delete everything the results and then so here's like the JavaScript to do it.

And so you get a reference to the dialogue and to the result which is going to be the thing that tells you what happened.

Then you can show the dollar when clicking delete everything, so they has added event listener on the bleep thing.

Me personally.

I probably just made that a thing like this, like delete button or whatever, but neither, You know, as a great thing about code doing so many different ways.

Everyone has their own preferences as long as it, you know, at the end of the day, doesn't need to do.

All right.

So then you listen for the click and then this is that show.

Modal now timeout for to open it.

Cool.

So then they have again, if you want to cancel delete, you close the dialog and you have the result being canceled.

So is this thing called?

Cancel?

Delete wonder where the yeah.

Cancel.

Delete confirm.

Delete.

And then they have one for confirm.

Delete.

Listen, for the click, you close it again, because got to close it.

But then you set the text, the result content to be deleted.

Cool.

I want to go.

Here you go.

So, here is an example a working example.

Bam.

See, so, previously, you would have to have, like, oh, I need to create these elements, and then, I gotta do the background.

I gotta change the background and then, you know, put all this stuff in here, and there were listener all these things now, It kind of does it for you out of the box, which is pretty cool.

So you can cancel is he says cancelled?

Then delete this thing deleted.

So, yeah, so that's pretty cool.

Let us see.

And then modal Nan.

Modal dialogs, so, Another feature of modal dialogs their ability to appear on top of everything else on the web page regardless of the z-index of other elements.

So regards you can have like a z-index of a thing to be like 1,000 like nah fam.

This modal is going to be on top.

Let us see.

Nan modal dialogs.

Also, existing can be invoked using show method.

Okay, so there's so you can also just use a show.

So I guess if you wanted to be a model and show on top of everything you use, Show modal, but if it's not they just you show?

Interesting.

Okay, so unlike modal dialogues, they still allow interaction with the surrounding content night.

So that using forms with dialogue stuff like that.

So yeah, so this is kind of like, what 8 arose Cannon was mentioning that you can actually use like, there's a method dialogue, which is pretty cool.

So instead of just having like a div We're just having like a dialogue HTML elements.

You can actually like in a form because that's where like before you submit a form.

You may want to have something that shows up, right?

Like say hey, are you sure?

And so yeah, so you see same dialogue but now using a form And then I guess you just use normally how you use a normal form.

So I guess when you submit the form, it will pop up the dialogue and then depending on what you do.

So you see, like there's a submit.

So you can submit the forms with the values.

Very cool.

So yeah, so just basically making a form so that you can do it.

So it will pop up and you putting a form inside of it.

That's cool.

So you can submit forms.

Nice.

Yeah, and then so basically the same thing, same information, just less stuff because before you remember you had to get reference to the buttons, but since it's in a form now, it's all kind of like encapsulated in that.

So you have to worry about that.

Cool, and then it has a return value that comes back from it.

So whatever you choose the dialogue has a return value.

That's pretty cool.

That's okay.

So then here it is here with the form and you see pretty much the same thing and then you cancel it.

So not.

So if you prefer to have use a form, you can do that as well.

So if you're submitting data, so if I get to be using like PHP or whatever you want to submit data or even JavaScript, you can do it that way as with through a form and then you have the styling, which is pretty cool.

So, that's that backdrop, like that gray area.

Stop.

What is wrong with my patio?

Okay.

And so, yeah, so this is showing how you can style it and then accessibility super.

Oh, you can also hit Escape nice, the Escape key.

Alright, and then, yes, we did.

The dialog thing is it has the equivalent of roll equal dialogue.

And a modal dialog will behave.

Similarly, to an element with area model true.

Nice.

So, when its open it was a true.

Yes, and then you can do auto focus and then now the browser support.

And yeah, so that's that cool and then next steps.

So they're just talking about, you know, getting it ready and everything cool.

But now you can check out how other browsers have been doing it.

And so let me put this link.

This is from Mdn, Mozilla developer Network.

All right.

Cool.

Let us look at this real quick.

Pretty much like the same stuff.

And also, so they have this warning, the tab index like when you're tapping through stuff attribute must not be used on the dialogue element, I think because it's hidden initially.

And I think also because it's on top of all this stuff like everything.

So I think that might mess with it.

So they have form elements can close the dialog if they have the attribute method dialogue when it's submitted.

Oh, so this is the return value of talking about property, set to the value of the button that was used to submit the form.

That's cool.

So yeah, so that return value.

The form A4 is the value of the button that was used to close out to or use the submit the form.

Cool, and then also mentions the backdrop pseudo-element cool.

And then this is just this will just open a dialog box.

If you have the open there it will just automatically open it like when you go to the page will open it.

And so it will say like reading is one and all an advanced example.

Nice.

So that you can select different animals and then here's some JavaScript pretty much like they're saying before and you can see they have a little bit more, the query selectors.

Whereas the other one it did some of A query selecting on the event listener.

So again it all depends on what you want to.

What's your what you like, but just know that there're different ways of doing it, you know, I mean, which is cool.

You know, it's almost like artwork.

Everybody has like their own kind but as long as towards the end of it works and you know, everybody can appreciate it.

I don't know, I just the way I think.

All right, cool.

And so now they have an example here.

So you see how that again.

It has the gray background and I want, if you can, I think let me press Escape.

Hope, I don't break anything.

Yes.

He escaped closed it, you know, this is button clicked and then click a button.

Oh, I clicked the Escape key button.

Sure.

All right, and then, so let us choose red panda.

Confirm red panda button clicked.

Nice, so if I do cancel, see it, except the state that I chose previously, which is cool.

Spider monkey.

Let us cancel.

Cancel button clicks.

Cool, very nice.

And then so you can see the capability compatibilities.

So we have dialogue and open remember opens a little attribute that you put on there to automatically open it up.

But so Chrome has been doing it since 37 Chrome is on.

I think like 70 something.

I think now, Edge has been doing it.

I think since they started using chromium pretty much because it's the Internet Explorer doesn't do it at all and Firefox, doesn't It I guess and it's behind a well there's no support and then I guess you have to explicitly enable this feature on Firefox.

So it's there, but they don't support it and you have to enable it behind like a flag, a feature.

Opera, does it.

So here's the whatever preview Technologic technology preview or whatever it was.

So that's there then on Android.

It's their Chrome.

Android, not again that for five bucks, but you have to enable it opera on Android Safari on iOS not so many looks like but then Samsung internet is doing it.

So yeah, so pretty much I guess.

It's private.

I mean, it's really a good bet that you can use it in your projects.

And then, so I found this other one because before people using a bunch of (JavaScript), like I said, you'd have to create like a div that would like be the gray area and then you'd have to have like a box on top of that and then you'd have to center it and all these things like would see us as the whole thing to do and you have to use JavaScript to do a bunch of things to make things happen or whatever you write.

But now with the dialogue is just the dialogue element.

And it does allow that for you.

So if you ever wanted to replace your JavaScript dialogues with the new they say new, but it's really not.

I don't think it's that new.

Wait.

Let me look up because I have heard about it for a minute.

Do they have when it kind of was a thing?

Not sure how actually new it is.

Hmm.

Goodbye.

Looking here.

Again, this is the rabbit hole we go down.

And since I opened it up, let us This is the thing where like everyone kind of goes to see the speck of stuff.

So this is the kind of stuff that like, this is like the lower level stuff and then like, please like am Deanna stuff kind of like brick bring this stuff out and kind of give you examples in kind of like explains it or what have you, you know, I mean kind of like later on top of it to kind of like abstract and help understand it a little bit better.

But this is like the low-level.

So this is where it all happens.

Is all goes down.

And so you can see has all these things.

I sometimes know they have like, the dates of stuff, like, when it was like first, like thought of, or like, you know, submitted.

Not seen it.

Like when it goes through the different steps.

Yeah, I am not seeing it.

That's fine.

That's fine.

If anybody knows, you know, let me know.

But I think it's been around for a minute.

And so yeah, all right, but so, let me go back to this article real quick.

So like I said, a lot of people were using like JavaScript to be able to create these models, but now, this one is just some meds stellman.

They wrote an article on CSS tricks.

That kind of says how to if you have been using like the JavaScript stuff, how you like?

And like I just showed you like it's going the number of browsers that are using it.

It's pretty good.

So if you want to like Starts the use the dialog element then you can do this.

So yeah, such as to mad stellman.

All right.

Let us see here.

Yeah, so they kind of go through and so you can see they have this thing here, confirm function, delete location.

I mean, my bad.

I am just creating the highlight video here.

And so yeah, so then you hit me.

Then it hit me, you get a lot of modal related features for free with alert confirm and prompt because those are also things in the browser.

I love your seen, it like alert confirm and prompt.

If you do that in your code like It's like a little dialogue, box will come up, but it's not within the page is like within the browser kind of thing.

It just shows up and he can confirm stuff.

So there's all that it is a true model as in is always on top of the stack, even on top of that, div with like I mentioned, 999999 Z and x and then you got the so the sum of all the cool things accessible with the keyboard screen reader friendly, it traps Focus.

So that means it focuses on the dialog box.

It supports user preferences.

So if you want dark mode, light mode to do that for you and it will pause code execution.

So, like if you're, if you needed a person to confirm or deny, something, or cancel, something before we continue on, it will pause the code, which is pretty cool.

So, they talk about all the JavaScript stuff, and they talked about the dialogue HTML element which we just talked about.

And then so here's like oh, and so I guess this is talking about how to replace what you have been doing with it.

And so he's using like this class thing here, all these different stuff, the initial, template to replace JavaScript dialogues, as you can see, it's getting reference to all the I guess they like, Oh, no, I was gonna say that was like typescript.

That's not.

That's creepy.

Let us see.

And we have the H, the template for the thing.

It's almost like they're creating like a web component almost.

Let us see, checking for support.

So he's checking to see if it's there.

Cool.

There's that form method.

Dialogue thing.

Cool.

All right.

Let me know like set attribute.

All right, so it's almost like they're recreating it in, what you call it the, using the dialogue, like, in your JavaScript stuff.

So, using dialogue as like the base for your JavaScript implementation, looks like and then for unsupported browsers, poly filling stuff is a keyboard navigation.

And so you see all this stuff that you have the kind of go through to be able to just do what they like the dialogue.

Does.

You know, it means a lot of (Here).

And so you see, whew that was a lot of code.

Now we can show the dialogue element in all browsers and so until.

So that's the thing you have to go through all this until it's just available in all browsers, but, you know, cool.

And yeah, there you go.

Then hiding the dialogue where to focus.

So there's all these considerations stuff that goes into it.

And so yeah a lot of cool stuff and then confirm stuff like window confirm, you know, I am a big fan of like the confirm and prompt and stuff like that the alert.

Because, yeah, because just window prompt, you putting the message and it, whatever.

The default thing is, that's, you know, again, the browser is an amazing piece of technology and then testing it and stuff, and then a sink a wait.

It's a lot of stuff here.

So if you want to kind of like go deep dive, oh, where, where?

I think I have seen this before, I haven't used it.

But like the pseudo CSS thing.

That's pretty cool.

I have used like part so far.

Recently, or whatever that's available?

If I can use that with web components, interesting.

I have to look into that later.

All right, so then here, so, so yeah, you see here, like the alert, how normally shows up confirm, and then the prompt.

Nice.

This is wow, a lot a custom dial.

Wow.

This is quite a bit of information.

They got the so this is basically using like the alerts, so you could customize a dialogue.

So it's using like dialogue.

Using dialogue and alerts and confirm and prompt together.

Interesting.

Cool.

Nice.

All righty and these are going to cut some oh and it had like a little noise.

I should have this.

I didn't I don't have the audio.

I am not sharing the audio, but there's like a little noise so you can check that out.

Yeah, and that's it.

Is this a good way to replace JavaScript dialogues with the newer HTML dialogue element?

What's funny?

Is there's a lot of (JavaScript) in that?

So while we try to do it another way, let me know in the comments.

So yeah, pretty cool stuff.

Here.

I am gonna get you all back to work.

I kind of like went on.

Rabbit Hole here went down a rabbit hole, but this stuff is kind of amazing like the stuff around the web and how it's like evolving and things.

That's I find that interesting and always like something to learn.

So, all right, cool.

Let me get y'all back to work.

I know.

Where is the mouse?

I hear you.

You know, it's funny like the have a preview here and I thought the mouse is on this screen, but the mouse is actually on my side screen where I am sharing.

And I was like where Y is the mouse?

Not moving.

I am tired.

It's been a long weekend so far.

All right, so I am gonna get you all back to work.

Thanks again for hanging out.

Hopefully that was you found that interesting.

If so, let me know now.

I want to put in my element that I would like to see happen and that would be the switch element.

It doesn't even have to be like, you know, tags switch.

You can just put it on like an input tag with the types, which I will be happy with that, you know, something where even if it's like true-false, 01 something.

So they don't have to do the check box hack, you know, I mean and I just want a nice clean.

Implementation if possible.

So we can make that happen.

That would be amazing and whatever I need to do to help make that happen.

Well, let us do that.

So, all right.

Now I am going to get you all back to work at the once again.

Thanks for hanging out.

Hopefully you found that interesting as I found it interesting, and I am going to get, send you all off with some traveling music and let me set this time, right?

Here we go.

So remember 15 minutes after the hour we back for the final break session of the first Cipher.

And yeah, so if you still have time, if you want to come on and do a show and tell, let me know.

Otherwise, we're going to look at an artist's website.

And yeah, thanks for hanging out.

So, this track here is Anthony Cruz.

AKA a butter.

The track is called.

Thank you.

All right.

So, thank you all for hanging out.

And yeah, let us get this thing.

Worked out.

All right.

Thanks again.

See you later.

Peace.