Speaker is working on their featured website. They are adding a feature to it because they are going to start travelling again. Speaker is going to share their screen with others about a web development course they found. Speaker found a blog which talks about all the new things that are implemented in the browser.

There were some interesting new features that landed in stable and beta web browsers during july 20 and 21st. Firefox 103 and safari 15. 6 became stable. Internet interoperability on some css features is cool.

Speaker explains to Speaker why there's an audio thing. There's a new mix. Cascade layers. Crossfading.

Speaker explains to Speaker how to control whether a scrolling element passes over possible snappers. There were no new beta features in june. Firefox 104 was the only new beta. Safari 16 beta will land in stable browsers soon. Speaker finds mozilla's website useful and useful. Speaker is going to use simpson's shelves on their next project.

Rachel andrew is in charge of rachel andrew's blog posts about browsers and the web. Speaker is going to put a link to the tag site here.

Mozilla gives Speaker a link to a pdf viewer enabled property. Speaker is sending some traveling music again. Speaker is going to watch some videos about an artist's website and listen to some music.

Fox 13 includes the backdrop filter property, which is used to apply effects such as blurring. It is available in all three engines through safari. Speaker is going to use an image as a background for their upcoming project. They want to put text over it. Speaker explains how to make the background hyphen filter and blur out the pixels.

• learn progressive web apps
• fire
• div background
• pre-release version
• animation composition property
• pdf box

Welcome back, welcome back, same old place but those dreams have repaid, and they turn around each other.

He's asleep.

Got him on the spot.

Welcome back.

Welcome back, welcome back.

Welcome but hey what's going on?

Alright welcome back stretch.

Its going to stretch real quick.

That's a good stretch.

Oh yeah that's good, that's good.

Hopefully you are getting what it is that you're working on getting it making some progress.

Dress.

I actually I am finished with all the post radio show promo stuff, so I can actually start working on this side project thing I have been working on and it featured website.in that I end.

They go to the same place.

I am adding a feature to that because I am going to be start traveling again, and so I got some conferences and things coming up.

So, All right, and looks like my internet is freezing so that's always good.

So let us just try to make through this.

Okay?

So this one could be hopefully pretty quick now, I came across this thing, so people may not know, I am sure my screen, but I am going to Copy this link.

I go.

I refer to this site a few times on the During these break session because a lot of information which is pretty dope.

Share my screen.

Here a quick, this sure.

The more room.

All right, so there's a site web dev, right?

And we spoken about it before, because they have like these cool things like little courses, like learn responsive design, learn forms, learn Progressive web apps, learn CSS cool.

They also have a Blog and also these cool things.

We will talk about these also but Podcasts and shows.

There's a Blog somewhere.

Okay?

Well it's / block.

You know, G.

We had this link as well, and I was kind of like, going through the stories and I don't know how I missed this before, but they have so like latest one.

On July, 29th, new to the web platform in July.

So it looks like every month.

They talk about because another one is, yeah.

New to the web platform in June.

So they basically go through and talk about all the new things that are implemented like in the browser because this site is basically for like chromium is like Google's chromium team.

I got that, right?

And so they kind of just talked about all the different things involving browsers and the web I guess in general, right?

And so they have these blog posts, new to the web that again.

God, I don't even have an if you want it to be too, if you had like RSS reader, you can put that in there and always get updated.

So, I am gonna put a link to this actual tag site here.

And yeah, so it's pretty dope.

So let us see.

So the latest one so because I am I do stuff on the web, right?

And it's always kind of like, oh wait, I wonder if this thing is out yet because I will go to like em mdn and look up things and kind of see like, oh okay, it's not available yet where I can still say experimental and things and so it's kind of cool to be able to like check in like once a month on a blog post.

It's kind of see what's out there and maybe it's something that I have been meaning to.

So looks like Rachel Andrew is in charge of doing it, that's we do.

So they have been doing it since I guess January night so since beginning of the year, cool.

And so yeah.

So like July.

Let us see.

What was new to the web platform?

Let us see discover some of the interesting features that landed in stable and beta web browsers during July 20 22 cool.

So I guess this one is in the stable browser stuff.

Firefox 103 and Safari 15.6 became stable, and then he says, with this we get internet interoperability on a couple of nice CSS features, so that's cool.

So it's good to see that stuff that you maybe were being able to do like in Chrome or Edge now.

Looks like you As far as CSS stuff, you can do it with Firefox and Safari so that's pretty dope.

So like what was the backdrop filter property?

So, that's cool.

So and it's like how they give examples as well.

So that's very nice so far.

Fox 13 includes the backdrop filter property, which is used to apply effects such as blurring.

So, you can see here to an area behind an element with this value in Firefox, it is now available in all three engines Through Safari, those fire requires the web kit prefix, so that's cool.

So you can see, they have the back.

Filter.

See that's very useful.

You know, I might actually use that an upcoming project because I have a thing where it's gonna be like an image, and I was wondering like, oh well the image may take up too much space because I want to put like text over it, you know?

I mean that's kind of like dynamically generated.

So I was like, oh well the space of the bottom might be too big or whatever.

It's about with this.

I got the image in the background.

That's pretty cool.

And so wait, let us take a look at.

So the HTML.

So we got here, the div background, which I am assuming he has the image set the rules.

We will check that on the CSS.

And we have the div, the blur one.

We have a div invert, and then we have the div grayscale.

Cool.

And then let us look at the CSS, where all that happens.

And no, there's no JavaScript, which is pretty cool too.

So the background should have a thing.

Yep.

So the background image they have the URL which is like the hot air balloon, Cool, let us see.

All right.

So yeah, so here's the blur one and so because it's a far, we have that put that webkit on there, but then you can see since Firefox and chrome.

Now supported that you just have the backdrop hyphen filter and blur.

And you say, like how much you wanted to blur it as far as pixels?

That's pretty cool.

Only if you can now do this guy.

I have seen like people wanted to like blur out their screens like live streaming or what have you.

You can probably just do like a big CSS thing.

Now, make the blur pixels like very large.

One of the, hold on.

Wait, my bad.

I am just going to do that real quick.

This is what I do.

I am sorry I randomly check stuff out, so if you make it like 40 times, I will have makes it super but okay so it doesn't make it like blocky or anything.

Wait, so we're like two, like if I go the other way, make it 1 pixel.

Or that do but make it look yeah.

Okay, maybe with like nothing.

Okay.

Hmm.

Okay.

I will go.

But if you ever want to like blur something, you could always do that.

It's pretty cool.

He's like, 10.

Okay.

It doesn't make it like pixelated but all right, that's cool.

And then invert just inverting the colors, very nice.

And then grayscale, That's all it really needs.

Very nice.

So there's that.

If you want to do that, now you can do it.

All.

All browsers will see, there's only one.

Sit have a flag when you that does that mean?

And it goes in Mozilla.

Let us check this out.

Hold on.

Why is there a flag on that one?

Flag on the play?

I am joking.

I don't know.

Let us see here.

Oh okay, cool example.

Surbhi, do you do CPR to?

That's pretty cool.

All right, why is there a flag But it said it's supposed to, there's a lot of examples in here.

That's cool.

Okay.

So it's still experimental preview browser, support and development supported in pre-release version.

Maybe it's here.

It's said that It supported then 103.

I don't know.

Okay well hey it's coming I guess so.

Cool.

I have used this before, I am actually using the thing about using this in.

I have I think I showed here before it's the cards and you get like you.

I wanted to if it's on the mobile device to be able to kind of swipe through them.

And they will kind of like Snap scroll snap, they call it So now, so far FOX also information.

Scroll stop is also its missile development Network nice.

So why does again?

So it has like a I don't know.

That means Maybe, at the time of this.

It hasn't been updated maybe in Mozilla I don't know.

This property gives you control whether a scrolling element passes over possible Snappers.

Okay.

Okay, almost snapped.

Okay, before you can do it.

Okay, that's cool.

Then we have some beta browser releases.

Okay, the only new beta in June was Firefox.

104?

Okay.

So there's this CSS font loading API.

Animation composition prompt.

So this is stuff.

I don't even like heard about you.

That's pretty cool.

Oh, so there's an animation composition property.

That defines the composition operation used when multiple animations affect the same property simultaneously.

So you can like I guess having layered and I stacked or something.

Huh.

So I guess if you want something like the fade out and move as it moves across the screen, Or get bigger or smaller, okay.

And then there's a safari 16 beta.

That's okay.

These beta features will land in stable browsers soon.

Okay, well, yeah, no, it's just kind of cool thing to see, kind of like, what's out there and what's what you can use in your project.

That's why I use this for it.

I think that's pretty cool.

And so, to have it all like, one place.

It's pretty cool.

So, it's kind of like because if most because again, sometimes I will just go through Mozilla and see like what the browser compatibility is, you know, and you're kind of like, oh, when is this going to happen?

When is this going to happen?

Kind of thing.

Now, this cool to see that here, they kind of like wrap it up for you every month which is pretty built.

So pretty handy, pretty handy.

I like that.

Some of them have actual like examples.

Cool stuff.

All right.

Yeah, I am definitely going to use this on your next project because going to save me a bunch of space.

I am just thinking about the project and one of the things was like, well how do I get this image?

Because it's just going to kind of take over a bunch of space, but it would help if the image was there.

But now I can do this and have the information on the front.

That's, that's going to be good.

All right.

Very nice.

And it won't matter how big it is because they're just beyond front on the top of it.

And so, all the cards can be the same height, then.

Cool.

That's just me thinking about random stuff.

All right.

Yeah, so I think that's it, very nice shelves to our web dev.

Once again, only Simpson, cool stuff to kind of check out and I may be talking about something else I found on there.

That was pretty cool as well.

So OK, what's it?

Why does have like a has an audio thing?

If that's why they have like sorry again for one is tangent again real quick.

The guy just found out about it.

This just about an audio thing.

Okay.

Cascade layers.

Oh that layer thing.

Very nice.

So that's cool.

Nice.

Oh, there's a new mix.

Blend mode plus lighter, but look like oh supported pretty well.

Cool.

Crossfading.

Any to Dom elements, it's currently impossible.

Okay.

So easily, this is useful when crossfitting two elements when all or a subset of pixels has the same value.

What do they give you like an example somewhere?

Okay, well there's the link to Mozilla.

All right, my bad, I am getting an off topic here.

But yeah, this is pretty dope.

I don't know why they have the Wait, there's a PDF viewer enabled property.

This property indicates if the browser supports in line display a PDF box That's cool.

It's probably doesn't support though.

Cool.

I know, it's kind of wondering, like, what is the image here have to do with what am I?

Maybe they're just random images.

I don't know.

It's cool.

But shots of them for putting together these article, he's like, compilations.

I don't know of new things coming to the web every month.

That's dope.

All right.

Yeah, I am out of time.

My bad.

I was kind of just Checking stuff out.

All right, going down a quick rabbit hole, but that's why we time these things, so we can finish up.

All right, so, stop screen share.

I am gonna send you all off with some traveling music again.

Thanks for hanging out.

I will see y'all soon as I get this track ready.

Cool again, thanks for hanging out.

I will see y'all later.

15 minutes after the hour for the final break session of this Cipher.

Again if you want to come up, do Show-and-tell.

Otherwise, we will take a look at an artist's website and listen some music.

Maybe watch some videos about that.

All right, cool.

Thanks again.

This track is Anthony Cruz.

AKA butter.

The track is called thank you because thanks again.

Until next time I wish you much productivity or whatever is that you're working on.

All right, thanks again.

Talk to you later Breezy highs piece.