Speaker is learning a lot about webrtc. They want to talk about a site that they use a lot when Researching things. Speaker is going to copy and paste the link into their screen and share it with others. They noticed that there is a blog called Developer Dot mozilla. Org in the Docks. Speaker is annoyed with some CSS custom properties that make the code look different. They like the way the school's website refreshes.

Speaker is interested in blog posts and web transport API. They are also interested in Progressive web apps.

Speaker wants to learn how to draw a regular shape with one JavaScript function. Mozilla is introducing the mdn playground. Speaker wants to see some demos from Less. They didn't know that with CSS they can create cool animations.

Speaker wants to see how it takes to put a page on a page. They will put a link to the blog. Speaker finds it cool that they can create things in the console.

The MDM playground is a simple way to preview HTML, CSS, and JavaScript. It comes with autocomplete formatting and the option to share their work.

Speaker wants to create a playground on mdn. They are happy with the integration of live samples on mdn. Speaker has added a play button to the blog post. They explain how to start using the MDM playground. The mdn playground is set to revolutionize the way developers experiment with code.

Speaker is excited about Code mirror. Code mirrors is a code editor component for the web. It can be used in web sites to implement a text input field with support with many editing features as Rich. It works in all of China Sea. Speaker wants to see more examples.

Speaker is still the screen share. They have a lot of research to do. They wrote an outline one night without notes. They are going to put it together like an outline and then flush out the outline and send it to the rest of the group.

• play button
• mdn playground
• mdm playground
• game changer
• mdn marks
• text input field

Welcome back, your dreams were your ticket, welcome back that same old place that you like but those dreams everything, and they turn around.

Welcome back.

Stretch, I am learning so much more than I thought I ever would about webrtc like it's just a lot to go through.

So I am doing research like a Checked, and it's a lot.

So this trauma.

So I have got good, get take this break because I was just deep into it.

I am like protocols and Nat turn and stun and all these things.

And yeah.

So I am I am I am waiting through it and say I am trying to try to make it happen, all right, so I want to talk about a site that I am a big fan of and then I use a lot when Researching things.

Why did that?

That is weird.

This is a link, it's weird.

Like I copied the link into the but the actual value of the link was different.

Like the when I saw was the link, I am looking for but when I clicked it went to another link, that's weird.

I don't know.

I am gonna have that happen but Like I was saying before I wanted to talk about this resource, I am a big fan of, I am going to copy and paste the link into there so you can check it out for yourself.

But let me share my screen.

I am pretty sure I referenced this here a few times before, but I am talking about is Mozilla developer Network, right mdn?

So developer Dot mozilla.org and normally I go right into the Docks but I saw the head like a Blog.

I am not how long the blog has been there.

I have never really because normally what I do is like if I am looking up something, I will type into a search engine.

The thing I am searching for mdn.

And then normally just go directly to the docks, and I was noticing some things and some of the pages I would go to, to look up stuff.

And what it was, I went to the blog and I saw like, oh yeah, so they have a playground thing now, which is pretty cool because I would go like, for example, was I looking up, I was looking up.

What was it?

I think it might have been like some CSS thing.

So many was like, CSS.

Let us say CSS variables, right?

And I will say mdn and so, I will go directly to here and so is annoying, you know, using CSS custom properties and this one have the I noticed this look different like the code, Snippets the code blocks, and I noticed, I had like a play button here as well.

And then if you scroll so you have then you can see the actual code like running in the browser.

It goes pretty dope because before I think they were like screenshots Oh well, no, no, sometimes they would work.

Like, for example, I would look up, let us say like one of my favorite tags, right?

Details tag.

He tells elements mdn.

And so, because the school's, your element and so, yeah, you will be able to see stuff like this before where they would have the code and then you will be able to see, right?

But now what they have and you can see the period also play new.

But they also have is this.

So it's kind of like look different similar but different and you can click play.

And what I notice is even though I click like I always thought that icon open a new window but it opens in the same window neither under there but then you can see it in like its own playground and you can like mess around with it which is the thing is pretty cool.

It's like refreshes I think is really, really cool.

Molly thing is acting like click the back button.

So I have to remember to open in a new window.

But, I will just like I said before, you can always kind of done that before because let us say, I just put some exclamation points here.

Like that also kind of work here like this will refresh as well.

So they have this new playground thing, which is pretty cool.

And, so I saw those a blog posts, and so I figured I might not take a look at the blog post, right?

And so but blog is pretty dope already because they have some other stuff here.

Like its web GPU stuff.

I have been looking into web transport API seem pretty cool.

But from what I see is only really available in Firefox right now.

So, but it seems pretty cool until my Progressive web apps.

So, So, they're really good like blog articles is what I am trying to get too here.

All right, how do you draw any regular shape with one JavaScript function?

All my to come back and look at that.

So, some pretty cool stuff here.

So that's one of the things.

Mdn blog.

All right, cool.

Let us see blah.

Get better.

Very nice.

Okay.

So this is what I want to look at.

Introducing the mdn playground.

Bring your code to life.

And so this was a Just recently happened in 21st to 25th now.

So, like four days ago, all right, so let us take a look.

All right, I like the image is pretty cool.

All right, so introducing the MDM playground.

Bring your code to life.

Shaza Florian.

The minger.

All right.

So at Mozilla, we are constantly striving to empower web developers and provide them with the best resources to create amazing experiences on the web today, we are thrilled to announce a groundbreaking addition to mdn playground.

Yeah.

You got me, maybe that sounds a bit too exciting.

All right.

Did you do then we have a table of contents?

Cool.

And they get some demos, which I want to see, because one of the demos was pretty cool that I didn't realize with just like CSS, you could create this really cool animation.

Maybe I did in back of my brain by never thought about that would be that like Less.

Of course, I thought I would take more core that be more complex than it was.

Later.

Alright.

So what is the MDM playground?

The MDM playground is pretty much what you expected to be a simple way to preview HTML, CSS, and JavaScript.

For now, it covers most of the basics, the basic autocomplete formatting with one.

And with The One and Only Prettier and the option to share your amazing work given you're logged in.

All right, cool.

Let us see.

So why the mdn playground?

That is a this is a good question.

There are plenty of playgrounds around.

So why another one?

Well, in theory, a playground is not that complicated to build big emphasis on Theory, that's funny.

So that's, um, okay.

Yeah, my and we wanted to integrate.

We want it and we wanted it integrated with mdn.

So we thought why not?

Write one Famous Last Words Jokes Aside.

The idea of having a playground on mdn have been floating around forever.

Having interactive examples, in articles was a great start but some things need more space and more freedom.

Okay, so I go say, whether the details you can kind of do that already.

They're saying, you know, you can get more space and more freedom.

Cool sharing ideas, and solutions is key at us through is key, and this should not be a third party experience, okay?

That makes sense, because like, I couldn't share if I made any changes to that details disclosure snippet or whatever, the code snippet, I wouldn't be Share that with someone else.

Okay, I can see that.

But one thing that felt like a small game changer was the integration with our existing live samples.

So, yeah, so I guess, I got saying before the live samples, the code, the code blocks, cool.

You can now break out any existing live sample on mdn into the playground.

Look for a little play button above the samples.

So when guess you can't, No, you okay.

I guess you can do it here yet.

We're gonna have another one down below somewhere.

Kind of and I don't remember seeing it on the detail and oh yeah right here.

Cool.

All right, very nice.

So I guess it's on these but not maybe the ones at the top for some reason.

Oh yeah, alright.

Very cool.

Okay, cool.

I never noticed it.

All right.

Onto the blog post.

You can now break out any little play button above the line samples.

Cool.

This empowers you to make some changes to the code, you just read which helps you better understand.

Helps us better understand what's going on or to set a customized version to your friends.

Okay, don't get lost there yet, but check this out.

Wait, but check out this random animation example that you can Now remix.

Okay, School.

Is that animating?

Oh, unless a man, click somewhere else for You can this isn't animating right?

I don't know what I said.

Okay.

I will listen I hope this somehow covers the Y.

This will allow us to unify how we display an interactive code interact examples being on next on the list.

Oh so I guess interactive example.

So maybe they count the thing at the top here.

As an interactive example.

Maybe okay.

That's why it's not there.

I guess yet.

Okay, cool.

All right, cool.

So you can do, instant prototyping, live interaction, expanded code examples, collaborative capabilities.

So, I wander like real time because you're going, Okay.

Now not like real time but you be able to I guess, generate a link and send it off.

Alright, makes sense.

It's cool.

Okay, to start using the MDM playground simply visit the website in EN u.s.

Play, which I think I have that.

Well, I thought I had it loaded up somewhere but I guess not Maison with a.

Now, you can join the community and conclusion.

The mdn marks, a significant milestone in our continuous effort to empower developers with the best tools and resources with its seamless integration into mdn web doc since it prototype capabilities, live interaction, and collaborative features.

The playground is set to revolutionize the way you experiment with code.

Cool.

So we invite you to explore the mdn playground today and unlock a new level of creativity and productivity in your web development Journey.

That's Build the web of tomorrow together.

At the coding, keep reading if you want to know how this works, which works.

Okay, I am sure.

But this I thought was pretty cool, so they have this as just have all these divs.

Right?

It's a cube and has all these faces, right?

Then positions.

And this is it Yeah, it's pretty cool.

Of course, it's lagging.

My browser that's fine.

Let us see here on they look a keyboard thing, too.

That's pretty cool.

Let me see here.

Oh, you made a noise.

Did you hear that?

Oh wow, that's cool.

Oh so yeah under the hood.

So they're using Code mirror which I have been looking at a lot so that's pretty cool.

So Code mirrors, our code editor component for the web.

It can be used in web sites to implement a text input field with support with many editing features as Rich.

So you can.

I think this isn't this a web component.

If I remember let me look that up.

I am not sure.

Then we considered Monaco but decided for more lightweight approach so far.

I feel is the right choice.

Let us wait for feedback and you can leave feedback.

They're all right, cool.

It's I like how they kind of like breaking down how everything like worked.

Just pretty cool.

All right.

So yeah, let me get this code mirror thing because was this a web component.

Remember like when I came across it, Yeah, so it works in all of these.

China Sea.

There's like an example.

Should be like exempt.

Well there's this but oh well I guess this is kind of like it there by want to see more examples here.

I want to just see how it is.

Styling.

Documentation, there's a trial.

So Okay.

Let us try.

Try and see what happens here?

Just okay.

So now.

All right.

No.

Hmm, I just want to see what it takes to put it on a page.

Okay, little bit of code.

Well I guess not so it was like you put like code hyphen, mirror, something like a tag it would show up.

I look at that more into that but neither here nor there I am going down another rabbit hole.

And yeah so shots of them a lot of cool stuff over at the Mozilla developer Network and yeah, shouts of them.

All right now I am gonna get, so I put a link to the blog.

You can check it out there, and they said its slash play.

So let me answer got out.

Yep, there we go.

Very nice.

So I am going to put a link to this as well, if you want to go directly to it.

All right, cool, got that.

Okay, that's pretty cool.

Like you just type stuff in here.

Each one.

Hi, that's pretty cool.

Okay, then I will create that, but Oh, what happened?

Weird type.

There we go.

Pretty cool.

Yes, and then you can console.log stuff like I sell show up in the console.

Yep, that's pretty cool.

All right, very nice.

It's pretty responsive and quick Charter them.

All right, so let me get you all back to work.

I am still the screen share.

Cool.

Alright.

Now let me get you back to work because I got more research to do.

I got like a nice little I guess kind of like an outline one night without line just like notes.

I have been taking, and I am going to put it together like an outline and then flush out the outline.

That's normally how I write, like, blog posts and stuff.

All right, cool.

So, so Joel back to work again.

Thanks for hanging out.

I am gonna send you all off with this track.

Back.

By new Jabez featuring a Pawnee be the check is called, thank you.

And yeah, 15 minutes after the hour, I will take a look at an artist's website.

Maybe and check out some music and stuff and you watch the videos.

So until then I wish you much productivity.

And so this is new job ads.

Featuring upon EB.

Thank you.

All right, see y'all around, you will be easy piece.