Links mentioned: Details automatically generated.
summary

Speaker explains how to slide in and slide out from the hyphen drawer. Speaker has created a project with a slide within a slide and a scrolling and a button. Speaker has created a website with the theme, the css and the script to make it work for the drawer and the button. They have also created a cleanup.

Speaker is still trying to figure out how to navigate the website. Speaker is trying to show how to access information in a text editor. Speaker wants to do it in the cloud. When they back up, they can do this. Speaker has been thinking about how to make sure that people can use the keyboard instead of the keyboard. Speaker has added a new button that opens a drawer and closes it. .

Speaker is working on a new project during a break session. Speaker has been using stackable. They made some progress on it and wants to show it off. The bar looks weird on windows. Speaker has been working on the keyboard navigation. They show how to go left and right and how to control the card. Speaker is still working on all this.

Speaker has been talking about web components for a while. They have a working component that passes information from the inner component to the outer one. Speaker is going to use the shoelace they got from a video recording they found on twitter. Speaker has created a website for react, but it doesn't have full support for web components yet.

Speaker created an event dispatcher for drawer. Speaker is listening for information on drawer. Speaker is working on a program that allows them to control the opening of a drawer programmatically. Speaker is giving a talk about react and web components. They want to share some traveling music and create a highlight video. Speaker thanks everyone for hanging out. Speaker shares the audio of nujabes featuring a pawnee.

topics
  • break session
  • web components
  • video
  • sl drawer
  • click add button
transcript

Welcome back, your dreams were your ticket, welcome back.

That same old place that you but those dreams have remained, and they turned around.

Yo, what's going on?

Alright, welcome back.

To the second break session of the day this stretch it out.

Just awesome.

Alright, so I have been I think I have shown it on here before a previous break session.

I am working on a new project and I really want to get because I wanted to do it, right?

And, so I am working on like the layout of the front page.

And so before I do any actually, like hard-code like hardcore coding, I am kind of just kind of messing around with things to kind of see how the it feels before I start loading in data to stuff.

You know?

I mean and so I have been using stackable.

It's the kind of build out a whole thing.

And, so I think I have showed it before, and so I made a little bit of progress on it, and so I wanted to kind of show.

You see here, I just added something screen share, follow me.

Do this.

Cool.

So yeah so just got to kind of like working and I figured it's not too bad.

It's working.

All right it's not too bad.

Alright, and so this is kind of like, lit.

I am working with.

I don't know why.

Like, on Windows like the bar looks like this, like I don't the scrollbar, I don't.

Well, I got everything else like it looks fine, and it's so weird, but we're going to roll with it, right?

All right.

So like I said, I have been working on the keyboard navigation, right?

So I kind of want to show that.

And so, You got to go through so well, because I click this thing.

Okay, back on this screen.

So, click here, cool, then here.

So it highlights the whole section, right?

And that's because I want to be able to go down to this other section here.

And I am doing this all by keyboard now.

And so, you press the arrow keys to go lie between here, and the reason why I have arrow keys, and now the tab is because when you click tab, It goes into these other cards here and then you're able to go left and right.

And this is why I showed last time I think can go left and right now, right?

And so the thing is now, so then you're able to actually go into a card and click it open and you can also make it close, and so I have it.

So you can also do control like right.

And it will go to the next go to the last thing.

They should have.

Let me see you again because I clicked here, okay, alright, let us do that again.

All right, so we got this you here, right?

I can go and I can go back to that.

I am into it, then.

Let me go to the last one there, right?

Cool.

Now, I think, if I hit tab, it should go to the bottom screen.

Oh no.

It goes to that.

Nope.

So yes, I am still working on all this.

So what?

Oh wait with the wrong place.

Yeah, that's why I am kind of running into.

Oh, you know what?

If okay, if I went back, I think that's what it is.

Okay, so let us try that again.

So I am here, right?

I tap into it.

Cool going through.

All right.

And then, what I have to do is go back to the front.

And then, Go back and then go to the bottom one.

Mayor.

And then you will be able to tab inside of that bottom part to other information.

So I am still working on it.

So I am and then again I try to look up like what's the best way?

But in my brain, since you have the tab into the next one, so it's kind of like tabs.

So they like we like a, we click on a tab to go and keyboard like the go to the next tab you press left and right or up or down.

To make it go to the next Tab.

And so and then if you want to go into the tab.

So just like on the site here.

So just like on until it got works, right?

So I hack.

So these are set of tabs here and so like you can do that now to get to break, you can press-up or down or left and right, right?

But now if you want to see what's in break to activate it, You tab over.

Right?

And so that's how you get into it.

Now, if you want to select it, you have the Press.

I think space and see it changed and then to go over into the information, you hit tab.

And so, I am trying to like, kind of like, duplicate something similar with what I got going on there and you hit like space to show it up and so That's kind of like what I am trying to show here.

And so because you can do tab.

Oh no, see tab.

When inside you go, then you can arrow keys to go in between the sections.

Yeah, I don't know.

I am just kind of make that's why I am doing it here because I don't want to do it.

Like all my local machine.

I am kind of want to do it in the cloud and I needed to show somebody I could show it to them as well, the send them a link or something.

And so, when I back up, when it goes there, And, so I can do this.

Yeah, so I think that's let me see.

So if I go here, right, AB tab, again.

See, it goes to the bottom which is kind of like, what I would expect if I want.

And so if I want to go back to the section, I would do that.

I think that's kind of like what I want to work rate again.

I don't know.

I am just kind of working this through my brain.

This kind of thinking like what would be natural if somebody's using the keyboard, right?

So I don't know.

So then you can, so then now that you're in this the panel section, you can click on that.

It will take you there.

In kind of scroll through, and they can still tap into it and make it bigger.

Get it for more information.

So now the thing I have been working on that I just kind of did was that I okay so because I press the thing again.

Okay, what's up doing that?

So let us say you click here now.

Right?

It opens up for more information in there and then this close is it that we saw before?

Cool I added this other button now.

They will open a drawer.

And so opening the drawer.

So right there, right, cool.

Now the thing is, is that it doesn't just like, just open the door.

I am actually passing information through to it, so let us close it.

All right, so now the closes drawer.

Let us go to 3.

Do you know, let us go to 7 and the number 7?

Let us go to 7.

Click that opens up.

Open the drawer, bam 7.

So I am doing.

So what happens is?

I am passing information from like the component out to the outer one so that it can Put that there.

And so yeah.

So that's working pretty good.

I got that working today and the whole Jour situation I did not want to have to think about any of that stuff, right?

And so, I have been talking about web components for a while now.

And I was like, let me put my money where my mouth is, that's the expression, right?

And, so I have been talking about this particular one for a while and how it can like help save you time and Building Things.

And so I was like, you know what?

Let me use it on here and so this is shoelace that style and I should have put well I will go through his Twitter as well.

Super cool person who put this together.

I wanted to kind of show.

So I put a link to it for the video recording so you can check it out and so there's a lot, there's a mouse.

All right, there's a lot of different components here, right?

And so I am in the drawer right?

Because that's what's popped up, and they have like examples which is pretty dope and so you can open the drawer, that's basically what we just did.

And then they have the source so you can see what goes into it.

You can copy it, you can where to go, oh, and there's like a codepen.

If you want open up and code pain, you can.

And then for all my react people, there's like an actual react code.

And so, because they're wet, they're set of web components, but react, not yet has full support for web components.

Not yet coming hopefully soon.

Do talks about it.

And so, They kind of created like a whole set separate set of the components of all these components, just for react.

And so hopefully soon react will have full support, and they won't have to do all this work, but yeah.

So what I am using so far.

So to do the get the drawer working, right?

What you have to do is get pull in.

We have that somewhere here, we can do all sorts of cool things.

Let us take a look real.

Rick.

So yeah.

So that's the basic one, right?

This is the basic one that we just saw, right?

Then they also have if you want to slide in from the other side.

And to do that, you just pass in some properties to it, same placement, equal start, and then they have sliding from the top.

Right — probably guessed to do that.

It's placement equals top.

All right, now, all of that is just done.

And it's all within the, the SL drawer tag.

All of that, all this stuff we're sliding in sliding out.

This, you click out here to bring it back.

Like all of that is all within just the SL hyphen drawer.

So I don't have to worry about like the JavaScript to make that happen or the CSS to kind of blur out the background, or make it darker.

You I am saying like the I forgot to call that the background Shadow or something.

But yeah, cool.

Now there's also stuffed.

So you can also make it slide instead of taking over the whole page.

You have a slide within certain thing and you can set the size and all that stuff, pretty dope.

So I am using that.

So here's a custom sized one and if you want to have scrolling and then I am using that and button for mine so it looks like so to make it all work.

So this is just my stack Blitz source and I did.

Like a way recalled running.

Just a just as felt, I am gonna use Astro and spelt together, but for right now, it's just a spelt project and so you can see right here.

So I have the theme, like the CSS right here, I have a link to that.

And then here is the script for the little bit of JavaScript to make it work for the drawer and then for the button now, what's cool is that you could have load all of them?

You want, like, I have here, you can load all the different components if you want, but if you just only using a few, you can actually just to save like the downloads size.

You can actually just go and directly choose the ones you want.

And then, all I am doing is because in the feed, is not in the fetus, and the apps felt so a whole bunch of random code.

That's, I have got a cleanup is pretty terrible, but right here.

So you see SL drawer and it is felt if you want to get like a reference to something, it is buying this to it, but it's felt this pretty cool with for doing that and then I am just so what happens is so on the feed, right?

I have this listener.

For drawer, which is something that I created.

So, this creates event dispatcher again.

This is why I weigh more than need to be said, but I have this thing where on, if I click add button, which is the Open Drawer, More random stuff you probably don't care about open drawer.

So I have this on, click on the button Open Drawer.

I am passing the information that I want to send out and I have that here.

So I am just dispatching it rights and the event is called drawer.

So that's why I am out here.

I am listening for on drawer.

So not like so normally like on quick or whatever.

But I am calling it is my own specific one and then I handle the drawer, which is just opening.

The was sending information and then I open so drawer.

Dot show is what opens up programmatically, the drawer components.

And I am able to pass in to make it whatever I want to say in there and yes, I think that's pretty cool.

So again shots a shoelace and then their Twitter, well, they actually have their own Twitter.

Let me post that.

Here, so if you want to check them out, That and then shouts.

Ooh.

Corey Lavista, the person who created some, let me paste it there.

And so yeah, so within like a few minutes, I was able to get a fully functional drawer working and so shouts, a quarry, all the, all the hard work that they put in, I shout them out.

Every time I give like a talk about react and web components, could they put in a lot of work and Shout to them?

So, Yeah, that's pretty much it.

So it's kind of want to talk about that I will still work my way through how I want this to all kind of like shake out and so it's pretty cool.

Pretty cool.

All right, so enough of that thanks for hanging out by the be out of here.

So let me stop the screen.

Share my send you all out with some traveling music as I normally do and, oh, and even create the highlight video, almost forgot to do that.

Alright, so again, thanks for hanging out.

Gonna send you all off with some traveling music and this is new Jabez featuring a Pawnee.

Be the track is called, thank you.

Because I want to thank you all again for hanging out and yeah, so we have one more.

Break session if anybody wants to come up and do a show and tell feel free, otherwise we will take a look at artist website with some music and watching videos and stuff.

All right, so that's that.

Cool.

I did share the audio.

Awesome.

All right, here we go.

Thanks again till next time, much productivity to you and I hope you're working on something cool.

All right.

Nujabes featuring a Pawnee be the track is called.

Thank you.

All right, see you later.

Become stops.