Andreww is happy to see their friends and welcome them back. Andreww has started a second load of laundry and got most of the promo post radio show stuff done. Andreww attended Chrome Dev Summit recently. Andreww is a big fan of web dev. they recommend the Mozilla developer Network docs, mdn and webdev.org. Andreww wants to go over one of the web development courses really quickly. Andreww is a big fan of best practices tutorials and they want to add them to the list. They are going to check out the first responsive design website. Andreww is a fan of responsive design. They are going through a course. It's free and it has a lot of stuff. Andreww is working on the typography responsive images picture element. Andreww explains how responsive images can be used if the screen size is small. They are going to take a look at the website. Andreww is interested in responsive design.

Andreww would like to be able to do Beckham-like resizing.

They discuss responsive design, adaptive design, Nathan's change and media queries in the browser. Andreww is teaching people how to do responsive design on their next project. Webdev has put together a resource to help people learn web development. Andreww is a fan of pwas, CSS and forms. Andreww is a web developer. Andreww is interested in various aspects of web development.

Andreww is going on a tangent. Samantha wants to check it out. Andreww wants to get back to work.

Andreww is learning how to code by watching videos and playing with code. Andreww is tired after a long day of driving back and forth from the station, but they are getting work done.

• web dev
• guide rails
• media size
• introduction media queries internationalisation

Come back that same old place that you live with another have all changed since you hung around, but those dreams everything, and they turn around each other.

Welcome back.

Welcome back.

Welcome back.

Always good spot.

Rare.

Welcome back.

And I smile when I think and I know what to see you.

Again.

Danny was his son in the faith.

Yeah, where we need.

You're welcome back.

Hey, welcome back.

Alright.

So another break session is feel free to go and stretch, stretch it out a little bit, you know.

Saying.

Yeah, hopefully you're getting stuff done.

I am actually started a second load of laundry, then I have got some Most of the promo post radio show stuff done.

Just got like a couple of more social media accounts to send out these blasts to and things.

So, yeah, so hopefully you are also getting stuff done and being productive.

All right, so want to kind of talk about really quickly.

I think I the Chrome Dev Summit that just happened recently.

I learned about out this which I thought was pretty cool.

And, so I am a big fan of like web dev.

There're certain websites that go to kind of see like what's happening as far as like the internet and things happening on the web.

And so you kind of get like a better understanding of everything.

So there's the Mozilla developer Network docs so mdn and also the this webdev, which is another place.

Like, I always find myself looking at my co learn, learn a little bit more stuff.

So they actually have this whole section where they have like courses now, and so I am going to paste a link to it here so you can always check it out, but Share my screen here.

I want to kind of go over one of the courses really quickly.

Not that I am trying to, you know, stretch out these things, which I totally am I trying to do.

So share that.

All right.

So this is it, web dev slash learn, and they have some pretty cool stuff.

So explore, our structured learning path to discover.

Everything.

You need to know about building for the modern web.

I am always a big fan of that.

So that's why I have like those tutorials and things.

I may add these to the list of tutorials.

I am cool.

Kind of like, like best practices.

It's always cool to kind of learn the best practices of the thing, you're trying to work on and then maybe add your own.

Our own Flair kind of thing to it, because that's where Innovation happens, you know, is when you have these set of guidelines like these guide rails, but you kind of see, like, oh, I could go over here a little bit and see what's going on and, you know, maybe create something interesting and new.

So I guess we will just go check out this first one responsive design, which I am always a fan of because things, Like you never know.

That's one thing with the web.

You never really know the size of the screen and the person are viewing your application on.

You know, I mean, so you try and come like get the best that you can, but if you practice like responsive design, you can help almost ensure that it's, they will get a good experience.

And, so I thought this is cool that they had.

That and so, yeah, so let us take a look at it real quick.

And so, it's not complete though, but they're working on it.

And so, it has a good stuff amount of stuff.

So, it's like an intro, kind of like a welcome to welcoming you to you.

The course thing.

And it's free basically.

And then they have all the different stuff.

So, the introduction media queries internationalisation, which a lot of people may not actually take into consideration because people all over the world, you know, has access to the web then macro layouts, so, Like overall large layouts of applications and then even down to like micro layouts were made like the way the card component looks or how like the chat thing works or what have you.

So like the macro is kind of like the overall structure and then micro like all the little different components looks like.

Yeah, and then so like I said, then they these aren't done yet the typography responsive images picture element, which I am looking forward to kind of checking out the picture elements.

Because again, let us Look at mdn.

There's an actual element called picture, and then you can do all sorts of stuff with it.

So yeah, this here and so like you can set like the different sources.

So depending on like the media size, like the size of the screen, you can load different, like think so.

Maybe if it's always, you can do it if it's based on like the speed that they're connected out of whatever.

But I guess the thing is, if you're on a smaller screen, maybe you're using like, like a mobile device, you know, that could be inferred.

And so the, you would Set like a small because you don't need a huge image.

If the screen size is small, you know, I am saying because now, with responsive images.

Like, some people are sending those same huge images, which are like a lot of space for small devices and it's taken a lot of data.

So with this, you can actually send a smaller version because it will fit on the screen kind of think.

So yeah, but yes, that's pretty cool.

So you can see like right here.

So this 240 by 200 298, So they're sending it to the smaller screen size, the sending that whereas.

Otherwise, they will send this thing.

I don't know.

I don't really know what this what it looks like, and it's pretty cool.

So that's going to be included in here.

So you be able to learn more about it and eventually and then theming which is pretty.

I might have to look into that too because I am always fascinated, like a lot of sites.

If I have dark mode on and like the OS operating system.

It will make the site.

Right and stuff like that.

So yeah, it's pretty cool.

So now let us take a look.

So here, like the introduction kind of walks you through the got a lot of images and things.

And then you will see some of them.

So yeah, there's like examples, like codepen.

So the actual real world examples where you will be able to take a look at like the HTML and the CSS.

Sounds pretty cool liquid layout, so they talk about all the different things that go into creating responsive designs of sweetie.

I wish there was a way because the whole things about being responsive to change the size so you can see it.

What if you?

So this, let me see if you do this.

Not everybody do it.

It'd be cool to be able to.

Well, I guess if you show that, you see that you do this, I guess this resizes.

No, that doesn't ring size.

That'd be cool.

Beckham like resize.

You can see the responsiveness, but that's neither here.

Nor there.

Who am I cool?

So adaptive design?

Nathan's change, I don't know.

All right, but yeah, so responsive design.

Okay.

Let us see.

What Anything change out.

But yeah, it's pretty cool.

You can give you more stuff, more information.

Some other stuff here.

Looks cool and they can check your understanding.

They're just nice.

Yeah.

And pretty much the same thing for all these other stuff, and they give you like code Snippets and stuff out.

I thought it was cool.

Looks cool.

I am probably going to go through it at school.

So they have video.

So I guess.

If this didn't work, let us see.

Okay.

Yeah, so that's cool.

He goes see portrait landscape.

So that's just showing you the different media queries you can do.

So, there's so much stuff that you can do just in the browser.

Just kind of made it.

So that's why I like, I like things like these that show you like what's already there that you can use without having to, you know, rely on a third-party thing or something.

So, Nice soon as this one fine.

I know.

I guess it's.

Yeah, I know.

All right, cool.

So yes, I just wanted to talk about that.

Let me.

So if you want to learn some responsive design, on your next project, you can check this out.

So yeah, it looks really cool piece on content.

Yeah, really cool stuff.

So you see like there're two columns now.

Nice stuff on wider screens then you can combine stuff.

So yeah, so this is pretty good.

You're able to get a good understanding for the and then you can test your understanding nice.

So yeah, let us go in like you see here.

There are some things I have been, totally not adding any sort of clips and stuff, but Yeah, they see these are coming soon, which was I am looking forward to checking that out.

So you can see there's a lot and so yeah, so shall see the folks at webdev putting this stuff together.

Looks really cool, looks good.

And yeah just like another resource to learn some stuff.

That's really cool.

So and think they had like, the people who contributed some, we're going to see that somewhere.

I don't know, but either way, it looks pretty cool.

So I will probably be talking more about some of the other stuff like in a future break session or whatever because they have got forms, which is Like super important on the web and there's so much like stuff that can go into it.

So it's good to be able to have like a resource to get.

You can go back to the Sea like twenty-four sections in it.

And then we have, like, learned pwas, which I am a fan of and then it is CSS in general as well.

So, yeah, looks like a lot of cool stuff is coming together and then web dev is just a cool place to be able to learn about all sorts of other things too, like, vitals like how to make your site like faster and things.

Certain considerations and stuff to look into, and again, like there's a progressive web app stuff and accessibility.

And so, have a collection of stuff.

Making sure it's safe and secure network, reliability, making sure.

You know, there's a case of your users off site offline, you know, give them a good experience.

Web payments, which I am gonna look into that more.

That's pretty cool.

So we got a lot of stuff here and it's pretty cool.

So I wouldn't different devices.

So, you know, like, USB the GamePad API and stuff and then media.

There's a lot of stuff here that you can check out.

So and then they have some framework specific stuff, which is cool.

So react and okay and angular.

And then Lighthouse stuff, and I saw pretty cool.

So again shots to them mini apps.

Apps that are built with web Technologies, but do not run in browsers.

My other check that out.

I have never seen that one before.

Apps that are built with web Technologies, but do not run in browsers.

What do they run in then?

I am sorry, I am going on.

This is one of those tangent.

So, this is one of those times when it'd be nice for my little thing to pop up and like, hey, what you do?

All right, Samantha, check this out.

Interesting, huh?

All right.

Yeah, neither here.

Nor there.

Cool.

Thank you all again for hanging out and get you all back to work.

Let us see here.

Let me stop sharing the screen.

So what do y'all think you would, you go?

Like?

What's your preferred way of learning thing, new things?

Me, I like to, I mean, video is cool.

But if I could actually get in there and play with the code and mess with things for me that like reinforces what I am being shown and stuff.

So yeah, but cool.

So yeah, let me know what y'all think.

I think is pretty cool and again shots of web dev.

And yeah, I think that's it.

I blabbed on long enough.

I am going to get this clip together and send you all back to work.

Give you all some extra time back.

Hopefully, depending on if I can get this set up in time.

Cool.

Yeah, I am just kind of chilling out.

I am kind of tired like yesterday driving back and forth from the station.

And yeah, I am getting work done.

I am saying just being here.

Consistently helps me out.

And I hopefully it's helping you as well.

And yeah.

See all 15 minutes after the hour.

Got this track from Anthony Cruz AKA butter, it's called.

Thank you.

And yeah, see you all soon.

15 minutes after the hour.

Y'all, right?

Thanks again bees.

Peace, start screen, share, make sure I share the audio and yeah, again, thanks, though.

See you later much productivity to y'all.

Play.