Speaker is in the second break session of the first Seifert. Speaker needs a better way of automating some of the police radio show stuff. Speaker is almost done with the post radio promo stuff, got the email blast and is making some progress. Speaker is going to upload an archive video and improve the web app.

Speaker has published a free book on design, patterns and component patterns for building powerful web apps with vanilla JavaScript and react. They discuss Not Dev, a book with practical examples on code box and design patterns. Speaker explains how to build a website. Speaker is learning about web performance patterns for loading code more efficiently.

Speaker explains to Peter how to think about modern approaches to loading or rendering user experiences.

Speaker is learning how to code in JavaScript. Speaker shows Speaker how to check if only one instance of the counter class can be created.

Speaker explains what is in the documentation. Speaker is happy with the performance patterns, rendering patterns and dynamic import. Speaker has seen prefetch and preload and tree shaking. Preload allows critical resources to be loaded earlier. Speaker is a software engineer and a technical writer on a project. Speaker is excited to be part of learning. Speaker loves to visualize certain computer science topics in a technically correct way. they hope to see some of the patterns from the book " Patterns " back in the projects. Addy Osmani is an engineering manager. Speaker is an engineer manager. They want to bring learning patterns JavaScript. They have a lot of resources.

Speaker has seen them at school. Speaker doesn't like that book. Speaker is going to go through the patterns and see if they can pick up some things on some projects that they are currently building. Speaker will get everyone back to work after the hour.

Speaker will check out an artist website and listen to some tracks if they don't have any sign-ups.

• javascript design patterns
• dev aims
• performance patterns
• mind design
• patterns designs
• places community resources
• community blogs
• counter class
• performance issues
• vanilla javascript

Your dreams.

Will you take it out?

Welcome back, same old place that you laugh about.

Well the number of all changed since you hung around, but those dreams everything, and they turned around thought they'd need you.

Always good spot.

Here are welcome back.

Hey, what's going on?

Y'all?

Welcome back to the second break session of the first Seifert is a stretchy almost.

With the police radio show stuff, is just, I have really gotta find a better way of like automating some of these things.

Like its oh I forgot to enable speech recognition.

Where's that at?

Here we go.

So, yeah, so like I was saying welcome back, definitely have to I am almost done with the post radio promo stuff, got the email blast.

I tagged all the different artists that you know, the tracks we played.

And now I am just putting together this video to do like some Instagram like by forgot what they call those things.

Like they only last for like 24 hours stories or reels or Something, I don't know.

But yeah, cool.

So making some progress.

Hopefully you are making also some progress.

Okay, let us see here.

So I figured what we can do is check out this thing that came across maybe last week or the week before the site here, and let me Go ahead and share my screen.

I will enable audio just in case.

All right.

So this is patterns dot Dev.

And let me I am going to host.

I am going to add the link to the archive video so you can check it out.

Alright, so patterns dot div.

And as you can see, improved, how you architect web app.

So I was like, oh, that's cool.

Can always.

I am always down to find looking to new ways to improve things.

And so it tells you here pattern that Deb is, I will guess is a free ebook, is a free book.

Is a free book on design, patterns and component patterns, for building, powerful web apps with vanilla JavaScript and react, cool?

So, basically kind of like, how you code up your different components and things too.

Help make your website's that much more powerful.

So that's cool.

All right, so there's a book you can download and then get started.

So it is, well, let us look at page first.

So, so it looks like it's an Addy Osmani and Lydia Haley Holly.

Put it together.

Nice.

So how it works.

We published patterns tips and tricks for improving how you architect apps.

For free.

So I even get her nice keep in mind design, patterns are descriptive, not prescriptive.

So basically like they tell you kind of how to do it but not like you need to do it.

I guess maybe their suggestions.

I guess they can guide you when facing a problem.

Other developers have encountered many times before but are not a blunt tool for jamming into every scenario.

All right, cool patterns.

Not Dev aims to be a catalogue of patterns for increasing awareness, rather than a Necklace, what you must do.

Okay, it's kind of gross saying.

So it's kind of like you keeping the back of your mind.

If you run into an issue.

Like oh, I think I can solve it like this way, but not necessarily.

I must use this thing.

Cool.

Let us see.

They got practical examples on code box.

Code sandbox to be able to kind of like actually see it and test it out and then learn visually with our animation.

So that's cool.

So as you can see, like, here's the Giant, here's your components here, one component here.

And then some of the JavaScript stuff so that the server can understand what's happening.

So you have your stuff in the server goes through in the JavaScript and then kind of like into your component.

Cool.

Powerful Suite of patterns designs patterns are a fundamental part of software development as they provide typical solutions to commonly recurring problems in software design.

So yeah, so kind of like some stuff to kind of have in your back pocket for like, oh I ran into this issue.

How can I fix this?

And it may be.

One of these patterns were able to help you out cool and is optimized.

So yes, 2017 plus.

So like the newer stuff.

Yeah.

As optimize react developers.

Cool.

And with a focus on web performance.

Nice.

All right, cool.

So Mark perspective on patterns, cool, but stuff and then you can help because sometimes when you're, you need a scale, like if you have a bunch of users or bunch of resources that need to be used sometimes when you scale your code, like it may not be the best way.

And so it may cause some sort of like blockage I guess.

So, these are going to help you out.

So cool.

So, yeah, so like I said, learn about web performance patterns for loading your code more efficiently.

Unsure how to think about modern approaches to loading or rendering user experiences?

We got you covered.

Nice.

And then so here are the different patterns.

So wait, if I go to get started go let us what does that do?

Takes me to the post.

All right, cool.

Here introduction.

And they have the different patterns.

Nice.

So let us start.

Let us see.

Introduction with I do.

So here's an introduction.

Cool.

Nicely laid out and then you can just click next to go to the next one.

All right, and Diggin it, let us see.

All right, so we got some JavaScript here, nice.

They said something about code sandbox.

Where could we see that?

Oh, here's a little video.

There's no idea though.

Okay, so when you have like multiple versions of the counter class.

All right, cool.

Let us make sure only that one instance of the counter class can be created.

Okay?

All right, the kind of Step you through everything.

It looks good.

And they got more animations.

Do these repeat or?

Nope, slide through once.

All right.

They got some this accessible to give you some disadvantages of things.

All right, and it's this, the here's the code sandbox.

All right, nice, check that out.

Oh, look, here we go.

Click on either of the buttons, red button.

Mmm, so regardless of whatever, okay.

Cool guy.

So they show you that.

All right, that's cool.

And then testing they're going to testing too cool.

Nice.

Dependency hiding, I am not familiar with that.

Whenever that is.

Cool.

Yeah, so, it looks like a lot of stuff you can learn from this school, and then have some references.

So you can read more about it.

Nice.

It looks cool.

Dig it.

Then it goes on.

So there's like this long list of stuff here so you can go through.

So sole this first one.

What are these?

These are a good design patterns and then rendering patterns, cool.

Performance patterns so they have them grouped.

So if you kind of want to like just if you're like you're having performance issues and you can go right to the performance patterns and see probably splitting.

All right.

Yeah, Dynamic import that's been pretty clutch.

That's been pretty cool.

Like where you can like because sometimes you don't need the library in a component.

So you're able to like dynamically load it if you need to if that's what they're doing.

Okay, cool, so, okay, so this is using react Okay.

More react.

Alright, cool.

I mean, look at the, the prefetch and preload is another cool.

One, two, and then tree shaking is where if you're not using the library, then it doesn't get bundled into your application when you deploy it schools.

Important interaction.

Okay, these some things I might have to look into for some projects, some building.

All right, and then you guys out of you have seen these preload stuff and so it allows critical resources that may be discovered.

Eight to be requested earlier.

So sometimes, depending on, where you have your files thing, like your library, whatever it may not load.

So we do preload.

It makes like, yo, I want this loaded as soon as possible kind of thing.

All right, cool and sky is similar with like prefetch.

Prefetches.

Okay, so yeah.

For four routes and Pages.

All right, cool.

Angry.

Loading the script compiling up.

All right, so they kind of right now, it's super cool.

I did get some shots of them.

Let us see.

Look at the patterns and submit feedback.

That's cool.

Oh and then about us, let us find out the folks behind it.

Oh, there's a trailer.

Okay.

Well, let us go in.

Watch the trailer.

I want the trailer.

I am here.

Yapping.

Can just watch the trailer.

We enable developers to build amazing things.

All right, good thing I shared the audio.

Alright, here we go.

Going to check this out.

Hi, I am Lydia.

Holly.

I am a software engineer and a technical writer on this project.

I love to visualize certain computer science topics in a pretty technically correct way.

As I feel like it's so much easier to understand certain principles when you can actually see what's going on under the hood.

I am so excited to be part of learning.

Patterns as I feel like it's an incredibly useful resource, whether you're entirely new to the industry or have years of experience with JavaScript design patterns are such a vital part of any application and knowing how to implement both traditional, but also brand-new patterns in a modern way, can help improve your application on so many levels.

I hope you enjoy the many articles that we have written.

And I am looking forward to hopefully seeing some of those patterns back in your projects.

Thank you so much.

Hey folks, my name is Addy, Osmani.

I am an engineering manager.

And I am so excited that we get to bring you learning patterns JavaScript.

As a programming language, has been evolving a lot over the last 10 years, as of the patterns that we use with it.

We have also been Shifting, the ecosystems words things like functional programming.

We have seen Frameworks evolved as well.

And so, we thought that a brand-new take on patterns could be interesting.

We have also been looking at things like the intersection of these design patterns.

Then performance and rendering.

We hope you check out learning patterns.

Lots of really cool stuff in their code animations interactive playgrounds.

We hope you get something out of it.

Thank you so much for your support.

Yes, shouts out to them.

Cool.

Alright, cool in the red.

So shout them out as ever as any.

All right.

Yes, we have like the Twitter GitHub and all stuff.

So I am a bunch of other folks, nice.

So, yeah, shout them out and saying thank them for the resources and things that look like a lot of like, time and effort into it.

So I am always down to support that.

All right, so then let me see.

So we looked at resources.

What do we look at resources?

We're at about.

Let us take a look at resources.

Okay, here we go.

Cool.

Okay.

So these are other places Community Resources on parents react, angular View, and typescript.

So if you have one is specifically for specific language web components.

You know, I am into it now.

I know jsr.

This is cool.

So they have other places you can go.

So it's like a starting point, and they got videos.

Nice.

Nice.

I have seen this one.

It's a good one.

Cool, that's a lot of stuff here.

Very nice.

Alright incremental static regenerators regeneration in regeneration.

Nice.

All right, cool.

Nice too.

So it's a lot of stuff.

Alright, so that was resources.

Look at insights.

Alright, curated, insights on engineering design and performance selected from Community blogs and tweets.

All right, got a good list of people here are very nice.

Where is the nicely filled out website?

Very nice.

Oh wait, this is an oh, yeah, the person from like Astro, which I have been using.

Nice.

Yeah.

Why do people do insult?

There we go.

Nice.

And then lit.

These are for web components.

I know, Brian, he's here in Orlando, and so seen him.

Oh, and also, David K, piano.

They put pianist last faster.

Is not piano.

It's something with the cake, but at school, let us see some people.

I have seen on Twitter.

There's a lot of people, nice.

Cool, so there's a lot of stuff here.

So I don't think we like that book.

Okay, so you can download it as well.

Nice to know what the book looks like.

Alright, cool.

So yeah, so shots of them looks really good.

We go back to the home.

But yeah, so what do y'all think?

Is this something?

I am definitely going to, like, go through it, you know, slowly though and like see if I can pick up some things on some projects that I am going to be building, and I am currently building, cool.

So let me know what y'all think again, shouts to everybody that was involved in a patterns that Dev once again, and yeah, we will get you all back to work.

Let me just highlight video before I forget, and, yeah, the timer.

And we will get you all back to work again.

Thanks for hanging out.

Hopefully, this is something that's useful for you and some screen share.

It's the to this one.

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

Send you a lot with some traveling music.

This is Anthony Cruz, AKA butter.

Again, the track is called.

Thank you.

And yeah, thank you all for hanging out and see you 15 minutes after the hour.

What would do?

If we don't have anybody that signs up for sure until will do like will listen to what check out an artist website and listen some tracks.

All right, cool.

Thanks again for hanging out and see you later.