Links mentioned: Details automatically generated.

Speaker wants to have a place where people could see their slides page. Speaker has sent some presentations they have given and different conferences of stuff. Speaker sends a preview of the slides.

  • origin trials
  • transitions
  • elements
  • title slide
  • web standards community

Welcome back.

Same old place, the cheese laughter.

Well the know about changed since you hung around, but those dreams everything, and they turned around each other.

Always put spider rare, welcome back.

And I smile way I think and I know Hey what's going on?

Welcome back to another to the second break session of this second cipher.

We got one more break session and two more work sessions.

I so hopefully you got some stuff, made some progress on some things and that last one, so me, I got distracted.

I was remembered those projects.

I was saying, I am working on in the future.

And I was doing some research.

I just kept doing more research on them.

So having done any Hort hardcore like programming yet, but some stuff for the future.

So we will see, should be some cool stuff, and we may see something like well, I am working on like I have a site up already and it's the kind of extended, so we will probably see it coming up but for this, so yeah, so we will probably see the project that I am talking about that I want to extend.

Here, but for right now, I want to take a look at this.

Tweet that I came across.

And it got me kind of excited about some cool things coming to the browser, at some point isn't origin trials now, but Like it looks cool and I think it could be some cool things coming up.

All right, so they share my screen.

I don't think I am gonna eat any audio for this.

I hope everyone is doing well.

Feel free to hit up the chat room and or ask any questions you may have.

All right.

What happened?

What is all this?

Oh, here we go.

All right, so I came across this.

Is that flickering for anybody else?

Hold on.

Let me see.

I got to check the replay here because it looks like it's flickering for me.

So I may have to stop.

The screen shares.

I was waiting for it to load.


Okay, it is flickering.

Let me stop the screen show real quick.

That is weird.


Sorry about that.

That was a weird flickering.

Okay, let me try it again.

Screen share three.

Alright share.

Cool, no flickering.

That was weird.

That was huh.

That's so Random.

I have never seen that before.

Well, there's a first have everything.

So but real quick, Shasta.

Sarah Dresner.

Sarah eddo on Twitter.

I am going to add a link to her Twitter.

She always post some really cool things and I came up on my feed and so There's this thing that Jeff.

Okay, he goes by Jaffa the kick.

Oh Jake Archibald.

So let me copy his, so he has a blog post.

And there's this thing called the shared elements, transitions API, and I am going to show some Examples of It kind of quick.

So before you could do it, like certain Frameworks allowed you to do it.

And, so I saw Sarah Dresner she created a demo using View and I thought it was pretty cool.

So, alright.

So here we go.

Here's the site.

So, you know, yeah, cool.

So this is the site that she created.

Let me add this.

Link to the thing here.


So now You have this site here, right?

And so check out when you click a person, watch this.

Did I break something?

I might have broke.


Wait, hold on.

Let me go to the actual.

There we go.

Hold on real quick.

Yeah, that's right.

Okay, so right here so you can check out.

Now check what happens when I go to another page?

So how those elements were still there?

Like the picture was still there?

Just move to a different area.

So we do that again.

You okay?

So you saw the picture and the follow button and the name, right?

It's all those stay there but everything else change but in those moved, so that's pretty cool.

And then here's the group trip thing.

And when you get someone else, You select them.

Oh, yeah the select appear.

So you have to go back up here.

That's what was seesaw.

That's pretty cool.

Went from the circle to a square image and it pretties much does the same thing for everybody.

So you saw the names, change up here.

So yeah, so that is the shared elements, transitions API.

So felt so that's in view, just view, right?

And here, spelt has something similar, and they make it as straight forward as possible.

It's called deferred transitions.

So there's a whole transition thing.

But this is the first Transitions.

And so, let us say you, so it's like your to-do list, right?

So, these are things are done.

And so, let us say right some Docs, you got that finished?

So that you saw it move to the done?

That's kind of awesome.

Now, let us say you forgot to do it.

And then what happens is it goes right back to the bottom.

That is amazing.

So I thought that's pretty cool.

Okay, so that's that, that's in this felt Ducks.

Let me, I am going to also put this.

In the set of Link's, here comes a whole lot of links on this video.


Now I have taken this, I am a big fan of svelte and so a lot of my projects are built in svelte.

And so when I saw this, I am like, oh this would be cool to have in some projects, you know for the right.

You don't want to have things going all around.

All the place all the time.

So I made this website and it's like it says otech got events going to add a link to this as well if you want to check that out.

And so as it says it's a place to watch Orlando Tech talks.

And so some people couldn't make it out to different meetups.

So I was like, it'd be cool.

I go to allowing us anyway, and so I figured why not stream them for people who can't make it.

I am big into streaming.

That's again.

Why I work at bondage.

I am big into like Communications and stuff like that.

So, So it has a list of like all the upcoming meetups and things the archive.

So check this out.

So Now, you want to see the video, so you more information.

So you saw how it kind of like load it in, like it came from the bottom, like it kind of slid up on top and just was there.

So that's kind of similar to that of other ones that are better.

But so this was, I think, my first time doing it and so it, so it kind of Fades in and out.

Pretty cool.

All right, then I created this site here for my travels.

I want to have like, a travel blog vlog.

Log thing.

And, so I created this and it's actually Dwayne dot in by bought the domain doing stuff in as well.

So it goes to that.

So whenever I am like out of conference or something, you know, it could be like doing that in California or Dwayne that in Tampa doing that in Austin or doing that in whatever conference name.

So, That's kind of like Wills going for that.

And so it's just on this page.

So let us go to a site here, cool.

So let us view cough 20 us 2020, Austin, Texas, right?

So let us view the stories.

And so you saw how it kind of like it moved down and then it brought this page up.

And so this is just a 360 photo at the airport.


So now that was that great.

So then when you go back home now, you see it kind of like faded up.

So, all right.

So that's that and it's cool because like you will see in this next one.

Now this one I did a little bit more, so I think I am getting better as it goes.

Long, so this is the second oldest thing I have done now.

There's this other one as a JavaScript developer Advocate Advantage.

Do a bunch of talks and things.

So I wanted to have a place where people could go to see my slides page.

So if I could say like, hey my slides page, is that my slides that page.

So we're mind.

Let me put a link to that as well.

So these are some of the presentations I have given and different conferences of stuff and so School is, is that?

Well, let me just add this link.

So what's cool about the site when I made it is that as I am giving the talk.

So let us say, here we go.

So come here.

All right.

So this is a preview of the slides like the first Slide, the title slide, right?

And then you click view my slides.

Okay, so you saw like the little cartoon me, didn't go anywhere and this news thing here and it seemed like the slides just got bigger.

And now if you look, you're on a brand-new page here.

So, before go back home.

See you at home.

And then you view the slides.

It's like, you're so that basically the slides.

Now, what's cool is that?

So this I do my slides ahead of time.

Well, it makes sense.

That's what you normally do.

But I do it and I post them here so that people can go to the site to that URL.

And as I am giving the talk, the site's automatic, the slides, automatically transition to where I am at.


So for people who are Like, especially if I am giving it live and people can't, if it's like a big place, if people can't see it.

They will be able to see it all there.

And I always give like different, like links and stuff.

So, it's just easier to be able to check out links, or code Snippets or like little demos.

I may have embedded into slides and stuff so you can kind of see it there.

So I yeah.

And then plus, as I am speaking a same way.

I have the web speech recognition API going on here.

I have that are there also, so as I am speaking it pops up as like a little speech bubbles.

It's on the cartoon me.

So yeah, so that their eyes wanted to show.

Like that's kind of, for me the same page transition stuff.

So it's not as cool as her Edo's surge as learners, but, you know, I am still getting there.

And so now this is the actual.

Thing here.

So this is the article from Jake Archibald.

And so let me put a link to that as well.

So now like I said, this is a thing that's in origin trial.

So I think you have to do you have to sign up, or do something they tell you in the blog but like, you can, I think it's who has a chrome 92.

I think it was.

So okay.

So this is the effect that trying to go for.

So maybe you're in your contacts on your phone.

You may have seen something like this.

So you select somebody's name and it goes to the details, but it keeps some of the elements there so that, you know, from the transitions that it will make a little bit more sense.

Your, I mean, and so you can see like Alfonso.

Alright, this is his contact information.

So it's kind of like the transition so the shared element transitions, so you have shared elements that transition from one state to the next and that's coming to the browser which I think is cool and So yeah, so you saw it in the previous examples were using like Frameworks, but now it's going to be a thing that's in the browsers, which I think is super cool.

So goes on to say now here is a pre-act website that they created using it.

And so since I don't have the origin trial stuff set up so you can kind of see how it looks.

So you saw that like the pages, kind of like just fade in?

So yes, it's kind of close to my other examples like the Dwayne dot in the map one and also the otech, dot events one, but that's pretty cool.

Let me see how to use it and it kind of just goes on to your nabal, the document transition in the flag.

So to expend, Lilo without an origin, trial token.


So you could do this.

We buy just enabling the flag.

All right, cool, but then you can enable support during the origin trial phase.

So okay, here go chromium 92.

The shared element.

API transition API is available as An Origin trial and chromium.

Cool, so I guess not just Chrome.

I don't know again.

I don't mess too much around with.

I want to have the same browser that the people using it.

My applications will have.

So a lot of times I don't use like the origin stuff, but this is pretty cool.

So the origin trial is expected to end in chromium 94.


So, origin trials.

Allow you to try new features and give feedback on their usability practicality and Effectiveness to the web standards Community.

Cool for more information.

See Okay, so tells you how to sign up for it.


They can request a token for your origin so steps you through on how to do it.

And if we're to certain transitions, cool.

Yeah, so I am just super excited to kind of see this come together and be actually available in the browser to where we could just use it in a projects so multiple.


So in the future multi Page Apps transitions between Treasures between pages is currently impossible.

Okay, but this API intends to fix that.

So then you can take a look at how that is, then in the future.

ER, nice multi-page across cross-origin apps, okay.


So, that means be able to go between different like URLs and stuff like different domains and I read through this more, but I thought that was super cool and play with it a little bit more.

But yeah, so this is the coming soon.

Shared element, transition API.

And so Chelsea.

Jake Archibald cool shots to a Sarah Dresner.

And yeah, so all these things are going to be available in the archive video of this broadcast here and you will be able to check out all the links and stuff.

So yeah, shoutouts to a steroid.

Rassner not have the links everything, right?


So again, this is the actual this I am pretty excited about it.

Let me get rid of this thing here.

So I think this is going to be pretty cool.

So the web is just getting more and more powerful.

It's kind of amazing.


So I am a big fan of the web.

I am glad to see these things happen.

Let me know what you think?

If you think this is I think is going to be super cool.

And like I said, I have already used it for certain projects already and to have it in the browser's.

I think it's gonna be pretty cool.

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


Let me create this highlight video.

And yeah, so cool.

See you 15 minutes after the hour for the final break session of this second cipher for Week.


So again, thank you all for hanging out.

Going to play.

This outro music.

So let me stop.

The screen shares.

So again, let me know what you think about the shared element transition API because I have I think that can help with the whole like make it feel more native kind of things.

Like the web, make it feel more native on devices so word and plus it looks cool.

So yeah.


Thank you all, once again.

Get out of here.

So again, we will be back in 15 minutes after the hour and thank you all.

And I wish you much productivity and whatever it is that you're working on.

All right.


Y'all bz piece.

Let me share the screen.

Make sure I have audio because there're some joints and jams on here.

She will Sue new Jabez and upon EB fly MC.

All right, here we go.

Oh wait, let me get you all back to work.

Here you go.

All right.

Thanks, Phil.