They had a work session. Speaker is doing well. They are working on promoting their radio show on Instagram and Twitter. Speaker wants their website to look like a native app. They are going to add links to everything on their website. Speaker likes animations and stencils for their website. They are going to Brazil for City JSL Paulo and wants to check out more information there.

Speaker wants to create a page similar to Fades and slides that 08. They need a new trackpad as their old one is not doing well. Speaker suggests that if the browser doesn't support view, transitions API, write just as if it doesn't exist, as if they don't need it. They are working on a new UI layout for a gallery as a side project. Speaker has added a view transition API.

Speaker added a transition to the gallery mode to make it easier for people to go back to the pages.

Speaker is trying to figure out how to change the layout of the page. They are going to like the idea behind the transition. Speaker is working on something in their stack that allows things to be generated in the browser. They will share the link once it's implemented into their project. Speaker is refactoring a page. They need to pass along some stuff to other people.

Speaker wanted to show an animation when people first load the page. When they go back, they want them to see the other images as quickly as possible. There is no slow fade there. Speaker will be back in 15 minutes. They will send the theme music for the radio show with Anthony Cruz.

• email text
• html css javascript
• view transitions
• ui layout

Welcome back to that same old place the cheek, well then since you hung around but those dreams everything, and they turn around Welcome back.

All right.

Thanks for coming through.

Give me a stretch.

Oh yeah.

Okay.

All right.

Hopefully, that last work session was productive for you.

I actually got.

So I am doing.

I did some posts radio show.

Promo stuff, right?

So I like these like recorded clips from the video from the show and I like post them to Instagram with the graphic for the radio show and then I do like, I do they call them.

They're like things only last like, 24 hours on Instagram.

I don't short maybe.

I don't know what they're called.

Reals.

No, they're not real, don't know, don't care.

I post those.

I have two accounts, so I have the radio show account in my own account.

So I did all the radio show stuff that's got to do my personal account and then I did some Twitters stuff for the radio show promoting it.

So yeah, it's got to do my personal one and then send out an email text but not Text Blast, email blast to like radio promoters and people who signed up to be notified about new shows and then I will be good.

Then I will be able to work on this project that I am about to show right now.

Well, I am going to kind of lead into it.

Okay, share my screen.

So this, so I have always been a fan of like, let me audio just in case.

I am like kind of like motion on sites but not too much but the kind of like because we have like native apps like when something opens up it opens up from like where you click it sometimes and so it kind of gives you like the feel that, okay?

This thing I just did become this other thing right?

And so that is kind of what I like to go for.

So on my own personal site.

Oh by the way, I am going to add links to everything.

So this is my website lifelong dot Dev or it's my name dot IO.

I put lifelong dot div because I don't want to have to like spell out my name every time and so just little bit easier to do that.

So lifelong dot div but it takes you to Dwayne that I owe.

So I am going to add the links cool and so if you to look like so if you want to check out my latest blog post so you just click and see how kind of like expands and opens up and a little character changes.

Also, to kind of let you know, No.

Hey things have changed, right?

So I always thought that's pretty dope and then when you go back, Everything kind of just goes back to where it was right?

And for example, like the radio show, three going to radio show here, is that And he had like the audio player here to check out stuff.

So Hey, DJ twice about to pop, what you promised, Charlie Daniels Steven holl like the fast-forward and Rewind kind of like come out.

It kind of, like tells not tell a story but it kind of makes sense.

I think so.

I like animations, that kind of make sense.

All right?

So that's that site and then that's all just like pure JavaScript.

Okay.

Now, use.

No, I think I use stencil for this.

So it's pretty much just like HTML CSS JavaScript, right?

And stencil, Now I moved over to.

I got remember what I do.

Remember I used for this, this is I you yeah, use felt for this one and sapper, right?

But real quick, speaking of that, I also like when you come to a site and there's like a little bit of Animation that kind of like these things are appearing, kind of stuff.

Right?

Okay, cool.

Oh, by the way, shouts to I am going to Brazil for City JSL Paulo, and so shall see them, so we can check out more information there.

All right.

And also, if you know of any places in Brazil, I should check out.

I have my like a little travel thing.

They're seeing each other as well.

All right, neither know they're.

All right.

So, but yeah.

But otech.

Dot events is another side I created, and I wanted to be able to have Like a place where people can watch Orlando tick-tocks, right?

So I created this site, do a refresh To see the thing pop up.

So this is like the city of Orlando like landscape and I have like this thing behind it, right?

And then when you click on certain things that changes also to kind of let you know where you're at now.

This, I like smell because felt allowed me to do like certain animation, things like bringing in pages.

So if I click view more on upcoming events, right?

Things kind of like slide in, right?

And so that's what I liked about it and I go back.

Kind of like Fades and slides that 08, right?

Cool.

So now in the same thing for like archive, When I click that it kind of slides up and shows things, right?

Cool.

So that was with us felt sapper, which has now turned his felt kit, which I have not really had a chance to play with yet, but there is that.

All right, then, so I always wanted to, but the thing is all those pages like for here, the first one.

If you notice, let us say we go back to, I do presentations.

See it's still Dwayne die.

Oh right now with sapper and felt it got a little bit better because the page so like I am on archive right?

And I am on upcoming anyway, I click the view more so it does turn to like the page URL changes.

So I could go directly here.

And it will bring up the page, right?

Whereas, if I were to open up a shop here, see the URL didn't change.

If I click there, it would just go back to the original front page, all right?

So that was kind of like I was like, okay.

So maybe I have to use like Frameworks to do all this stuff and things, right?

And the kind of like some magic — seems but a spoke about this before which I think is super cool.

This is the view transitions API used to be called the shared element.

Transitions by think you transitions API is a little bit better.

And so let me put a link to this so shall see.

Jake.

Come on.

Whoops.

No, quick here.

Yeah, I really got to get a new.

This trackpad is not doing well.

All right, so we spoke about this before and so recently got updated because it's available no longer behind the flag, like in Chrome 111.

Plus it just works.

I don't like to move on to things of incorporate them into if you need to add like a flag behind it, right?

Or it may break other things, but it was this, if the browser doesn't support view, transitions API and just works normally, write just like, as if you don't even need it.

And so, So there's this really cool example here, and we have talked about this before, I am added this to the list of links as well.

And this is what I was like oh this is super cool and it's just it's built into like the browser.

And so, for example, say if I want to check out this one, see how it expanded and then it turns into a video and this list of stuff here shows up, I can like click the back button or I can click this and it goes back.

So let us say I click this one.

And it expands from where the thumbnail is, right?

So it kind of shows like you clicked here.

Here's the information like behind it, right?

And I can and it works since it's built into.

The browser goes quick back and it goes right back.

Awesome.

So I think that is super cool, right?

And so last week I showed This concept I was working on like this UI layout for like a gallery for a side project that I am working on right now.

I showed that, you know, you can just click the arrow keys and it kind of has this thing, right?

So you can go back and forth.

All right, and I also have these buttons.

You can click Right.

So now the thing that I added, so I sound like it'd be cool to be able to kind of showcase this, that view transition API with this.

So that's kind of like what I did a little bit last week, right?

So now check this out.

So let us say you want to look at this bridge thing here, right?

Click that.

And it expands and it shows up right there, right?

And if you notice, it's a separate page URL, Right.

Cool.

So now we have this here so that whole separate page and then I can click next.

So that's that right, goes next there's another one and you saw how the transit even between the detail Pages or whatever, right?

There's a transition in between there as well.

Now, what I also like I thought was pretty cool is that now if I were to go back to the main Gallery page like with all the different thumbnails to say, call it a thumbnail paid Gallery page, right?

I like this one where all of them are there.

Write all the different thumbnails that you could choose our, their mind only shows the five.

So, what I ran into, I was like, well, what will it look like when you go back?

Because if I am scrolling, because if this picture wasn't one of the five that were there originally, then what would that transition back to, right?

Kind of like, so you see how everything is here, right?

All these different ones and write a quick, this one.

Bam, it was there in the gallery to go back to write.

So what I did was that, so now if you want to go back to the gallery mode, I added this.

So check this out.

See it goes back to the first page to the first position, which and then it shows all the other ones are kind of like after it, which I thought that was kind of cool, right?

So I am going to show that again.

So, so, okay, so let us say we're looking at this one here, right?

So that, so I am gonna go, I am gonna go to the elephant one.

Alright?

So you notice there's no elephant here, right?

So if I click this, it opens up from the position to the bigger View.

And, again, it's a separate page.

Like, I could go to this page directly, right?

Cool.

Now I am going to see if I can find that elephant photo.

And again between each one, I might work on this little bit more.

I am not sure.

But like going between them.

I think it's kind of cool.

It's like I kind of like how it resizes to the actual image kind of thing.

Can I show you that like hey things are moving before I kind of have like shifting left and right?

A little bit.

But it looked weird like jittery, so I don't know.

But let us see.

Right.

So now I am looking for the elephant.

So here's the elephant.

Elephant wasn't in the gallery photos, right?

It wasn't in the thumbnails.

So my thing was like, well if I go back to the gallery, well, that elephant was never there, so there's nowhere to transition to.

So I was like, all right, well, this is what the person like last remembered, so I was like, all right, would be cool is to go when you go back.

It becomes like the first image and then you can go and check out the rest of the stuff.

Right?

So that's kind of like what I was thinking of the thought behind it.

And, so I am going to like I said, so I thought this was pretty cool to be able to like this.

I think it's kind of cool.

And then you just like kind of go back.

Yeah that's I don't know.

I think that's kind of cool.

And this whole thing is just mind-blowing to me.

And yeah it's just in the browser like it's just the browser supports that now which is so dope and I just I am I okay.

So yeah.

So that's what I got.

That's what I am working on.

All right, so I can't link to this because it's only because it's in stacked which is only running on one thing.

Once I get it in implemented into my actual project and I will be able to share that link.

But for right now is just kind of like a thing.

I am working on in my stack Blitz here, here and so, it was just a So yeah, so I kind of like just followed what they had here, and they have like different like examples, and so I took some of them and I kind of like worked it out because my, the way I am doing, I am using Astro, and I am doing some different stuff where things are like generated.

So they might not be ready yet and stuff.

So yeah.

So I kind of like this kind of like made it work and so now the real learning, let me stop sharing my screen.

So now the real work is to actually test to see if I know what it is that I put together.

So now it's in the refactoring for me is where you actually solidified, if you understand something.

So now, my whole thing is I there's some duplication of stuff, but I am not sure.

I think I can abstract it out and then just pass along some stuff to their kind of different because of the different states.

Like depending on whether you're loading into the Age.

Because when you first initially load the page, I don't think I showed that does show that.

Let me show that again.

Only share my screen.

Share.

So I don't think I showed this but like when you initially load the page, right?

How about this little animation think I wanted to kind of show?

Bam, bam, bam.

I might make this quicker but it goes around, right?

And when you click on one of these, and when you go back, I didn't want to have it, do the slow fade in again, right?

I wanted because you already saw that and when you go back, I just wanted you to see the other images as quick as possible.

So I switch it up.

So you see, there is no slow fade there.

It's just the transition of that first image back into the position and so, Those are kind of different, and so I am going, I need to try to figure out how to kind of abstract it is because they're kind of the same, but not really.

And I buy things like a CSS thing right now.

I am just kind of like talking this through right now, but yeah.

So I gotta figure that out.

Like I said, once I think once I do all the refactoring and get it into my project, I think that will help me so that in future projects, if there's Like multiple pages, I will be able to do the transition stuff would be easier because I will understand it by working on this.

So from now on, if there're any projects, I do that, have multiple pages.

And there's like a, like an element that kind of goes through each one.

I think I am going to use the shared transition, The View transitions API, so yeah.

So thanks pretty dope.

All right, going to get you all back to work because I got work to do want to finish up this radio show stuff.

So I am gonna send you all off with some theme music and this here is Anthony Cruz.

AKA a butter.

The track is called.

Thank you.

Because again thanks for hanging out.

See you 15 minutes after the hour for the final break session will take a look at artists website, listen music watching videos, maybe you become a fan.

Alright, so again thanks for tuning.

Be right back, 15 minutes after the hour.

All right, thanks again.

Recruit AKA butter.

Thank you.

Y'all be easy piece.