Speaker is working on the details page. They are a fan of the details elements. They are going to add a link to this. Speaker wants each page in the gallery to be its own page. Once they reach the end of the gallery there is no more previous button.

Speaker has learned how to do the arrow navigation on the front page, how to press right and left and how to use the event keycode. The key code, keyboard event is deprecated. Some browsers might still support it, but it's no longer recommended. Speaker has a new code that works at any time. Before it was key code but now it's code.

Tamaki code has been deprecated for some time. Some browsers still don't have it. Speaker should use keyboard instead.

Speaker is finishing up the post radio show promo and preparing the newsletter for tomorrow morning. They have one more social media account to post to and then they will be ready to talk about the thing they have been working on. Speaker has created a layout for their next side project. They are going to create a gallery from Pixels shots of pixels.

Speaker has added a keyboard with navigation and placement holders. They have also added the previous and next buttons. They wanted the blocks to move in a certain order.

Speaker has changed the design of the dolphin on the page. They have different layouts for less than five pictures. Speaker has learned a lot about media queries and how to reduce motion. They have reduced the animation timing. Now when they click see, there's no motion.

Speaker wants to finish up their promo stuff and then start working on the animation between the pages. They are going to send out an outro music from Anthony Cruz.

They are watching videos. Speaker hopes that Anthony will become a fan.

• social media
• media prefers
• detail disclosure
• relevant web standards
• tamaki code

Welcome back your dreams were, you're welcome back that same old place but those dreams, everything.

Y'all welcome back.

Give a stretch.

Oh yeah.

So look pretty productive.

Not too bad.

I am just finishing up.

The post radio show promo.

Things.

So I got almost done with the Social Media stuff.

Like I said before, I got the newsletter stuff set up so that's ready to go out tomorrow morning and now I am just kind of like posting of the show.

The recording the show is up, you know, so you can check it out at your leisure wherever.

All right, neither here nor there.

So I am almost there.

I got, like, one more social media account to post to and I should be good.

Yes, so I want to talk about the thing I have been working on and I kind of want to show it off a little bit, kind of demo it and so it's, yeah, just me.

Show it.

I don't think I would need sound.

I am going to add some just in case, there's like a video or something.

Okay, so my next side project is it has to do with like a gallery of like images and things, right?

And, so I have always wanted to create this layout and I figured this next project would be a good time to create the layout, right to actually make it because I always had in the back of my brain.

Like I had like a sketch of it.

Somewhere.

And I was like, it'd be cool to create this.

And so now I did for this project, and so I wanted to kind of just show it real quick.

Okay.

So I am going to refresh it because the main thing was the animation of it, right?

So let me refresh the page.

They see how it animates in block by block and gets kind of like smaller as it goes around.

Right.

So, I kind of wanted, like, a, I don't know.

We call like a Whirlpool kind of thing.

Like, where it's big thing gets smaller and smaller, right?

So that's kind of, like, well, I want to create with it, and so, I figured it'd be cool to have a for a gallery.

They will be cool for a gallery, right?

And so these are the images I am going to use this, just from Pixels shots of pixels.

So these like placement holders right?

And what's cool is that I also added so important for me is like keyboard like navigation, right?

And so you be able to, I think that, you know what, I selected, something else.

Here we go.

Okay, let me go back here so you can actually go through and select different kinds, right?

And I have the previous and next buttons.

All right, so I also speak of keyboard, so I can also press like the arrow keys, you see how it kind of animated in and out.

That's what I wanted to do so you can kind of see I wanted to feel like just like the way it animates in we go to another page or like you go through the gallery.

I wanted them to kind of like move in a certain order.

You check it out again, I am gonna press it again.

You can kind of see like the different blocks kind of cut.

I wanted to kind of make sense.

So like this bottom one will go down.

This will go here.

This will go up and it will go that way.

All right, so let me press it again.

Here we go.

All right, cool and then you go the other way does like the opposite sort of so hopefully you can see that cool.

What else?

Yes.

So now when you click one of them, there's like some dolphin again.

I clicked something off.

Okay, looks like a cool dolphin.

One that I saw Amy.

Where is it?

All right, so here, so now if you click one, right, it takes you to a Details page.

Oh no, wait before I do that.

All right, so that's cool.

If there's like, more than five pictures, right?

But what if there are less than five pictures?

So, I have different layouts for that.

So let us say there's just one picture.

It just shows one, right?

And then notice that the preview the previous and the next buttons aren't there anymore, right?

So then we go to two.

C to fade in.

Three.

Four.

Then finally, five.

I probably could have gone like smaller, but I wanted to make sure that because I could have probably split this in half, but I kind of wanted something that would be, you know, that's fine.

Now, also responsiveness so you can see it's responsive as well.

Pretty cool.

All right.

Oh and then also, you notice, there is now next and previous again because it's only five images.

So we go do more than five images.

Does it show it?

So there's like 10 and so now you can kind of like scroll through.

Now, I also do it on this one.

Did I?

Because I also have the oh, you know I did, okay.

So I think I did.

Let me double-check.

So I know that can be kind of like we call it.

Maybe disoriented or any for folks.

And, so I think like at it there was a, so I was looking into things and so there's like reduce motion Right now, I do it for this one.

Where is it?

Scrolling.

I learned a bunch like working this thing out three, do I?

So here you go.

So there's like a media query, you can do.

So you can match media prefers, reduce motion, and then reduce right, and so I can check for that.

Hmm.

So let me see.

So I have this media query, right?

And so if it matches will be true or false and so here I have this thing so if it matches we do it to 0.

So if the person has reduced what we call it there it will like all the animation timing will be 0.

So look instantaneous right?

So this is if it matches, so I don't have it set so let me put it so that is the opposite right walkways.

Can't see the mouse.

Okay, cool.

So this is the opposite, right?

So in modes in, I think that's fine, right?

But now when you click see, it's just, it's like instantaneous there's no motion, you know?

So I kind of like, so I thought that was kind of cool too.

All right, let us see.

Alright, so now when you click into one of these I keep pressing another screen and it's okay.

So let us say the Dolphins, right?

So this is I am still kind of working on the actual details page, but it's pretty much there, right?

So here you go loads and again you can go and navigate with the keyboard.

Yo, I am such a fan of the details like elements your, there's like a details element.

Like in a project is probably mine because I love the elements so much.

It's so cool.

And so, yes, you can do stuff like show, like drop downs and things all within just the details tag.

You don't let me show this.

Because again, I think I talked about this a bunch on here and In.

So I use it.

The detail disclosure elements this thing is super cool, and so I basically kind of like what they have here.

It's so cool.

So I am going to add a link to this.

All right.

So now back to the soap with this so you can also scroll back and forth between so yeah so like you can go to the next page and so it loads a new page Cog wanted that to be kind of thing.

So I want to each page each image in the gallery to be its own page.

The young like go directly to it if you want to write.

We can also like at the same time, scroll through the other images and now these are like the original size it.

Images, the ones, I do a load a lot quicker, but this is just like a test demo.

And then so in the details will be here and everything.

And yeah.

It's really nice images here.

So I am just kind of scrolling through.

I want to show Once I reach to the end.

So there's no more previous button so that's kind of like the way I am doing that.

What else?

Yeah.

Okay cool.

So now couple of things I learned, right?

To do like, the, the Arrow navigation, on the front page, where it was kind of like, Here.

So, like I am pressing, right?

Right and pressing left.

Oh by the way, don't miss back.

Well, not let me leave it often the case, I don't want to give anybody motion sickness or anything, so yeah.

So you can kind of like up and down also works, right?

So what I normally use the on the event.keycode now, I have been doing this for a minute and what I make these Prime make side project.

I kind of like to check up on my code to kind of make sure everything is cool because Good thing I did because when I found out apparently the key code, keyboard event is deprecated, alright?

And so I am going to add this.

Winx you can check it out for yourself and so see right here.

It says deprecated this feature is no longer recommended though.

Some browsers might still support.

It may have already been removed from the relevant web standards may be in process of being dropped or may only be kept for compatibility purposes.

Avoid using it and updating existing code if possible.

See the compatibility table at the bottom of this page to guide your decision, be aware this feature may see.

Has to work at any time, and I was like, holy crap.

And so then they tell you that you well then you can use the code This one here, right?

So, you can insert key code, you can just use code but it's a little bit different.

Because instead of like the numbers like 38 39, 40 37, I think it was like the arrow keys.

You actually say, like, Arrow up Arrow left arrow down arrow, right?

That's what you match against, right?

And, so I think I am recording, I think I still left that in my code.

We see this.

So right here, so before previously it was key code.

37 38 39 40 but now it's code.

Arrow up Arrow, right arrow down arrow left.

So I guess a little bit more explicit with it.

Now think that was weird for me.

Was that you should avoid using this?

If possible Tamaki code, it's been deprecated for some time, which I didn't even know, as I haven't really done key stuff in a minute, but good to know instead, you should use keyboard.

Code.

All right that man says if it's implemented, so they're telling you to use something that may not be implemented.

So unfortunately some browsers still don't have it.

So you're like well wait so do I stick with a thing where it's there?

Like, what the heck?

So you will have to be careful to make sure you use one, which is supported on all targeted browsers.

So you have to like research and stuff.

So, alright, so you can see.

So this is key code, right?

Key code has been around for a long time and Those are not showing up stuff like even IE 11, I mean.

So okay here we go.

No, not something else.

Come on only brother, Kevin.

Here we go.

There we go.

From chrome one.

It's been in there.

Right.

And 12 all this other stuff.

All right, now here's the one that they suggest using.

I am going to copy and paste this link as well.

Say, the links cool.

Now, this one, you take a look at the browser compatibility.

It's pretty good.

So, I mean, I think Chrome right now as I get 111 112 and so it looks like it's been there for a while.

So all the major one looks like is all green good to go.

So I switched over to using the newer standard, so there you go.

Now, what's left for the project, right?

Well, I want to do and I spoke about this before I think, Think I showed it.

So like when you click on one of these and it goes to it, right?

I want to have a cool smooth transition thing, kind of like how this is.

And So Lisa how that kind of like zoomed in?

So here's like an example.

So let us say this is like my gallery, I want to be able to click it and kind of like opens up to that ID page.

So this is kind of what I am going for, and so I am going to try and make that happen and that is the view.

Transition API that we spoke about before I add a link to that as well.

And I think that's everything.

That's why I am gonna be working on today.

So I think I pretty much got everything done the way I want it, right?

Everything like Works, how I think it should, you know?

And but now I just want to add on that cool animation thing between the pages.

So, yeah.

All right.

So that's what I am going to be working on.

Super cool stuff, start screen, share and get y'all back to work.

So I can start to finish up my promo stuff and then start working on this.

So that is the plan.

Going to get you, send you all off with some outro music.

Now, this track is from Anthony Cruz.

AKA a butter.

The track is called.

Thank you.

I want to thank you all again for hanging out and see you 15 minutes after our take a look at an artist's website and listen to some tracks.

We watch the videos.

What have you?

Maybe you will become a fan.

Alright, so again thanks for hanging out.

See you soon till then I wish you much productivity and loading.

Here we go.

Catch y'all later.

This is Anthony.

Cruz AKA butter.

The track is called.

Thank you.

All right thanks again y'all see you around.

Y'all be easy.

Thanks peace.