Use a Web Component Solution

[00:00:00]
>> I hope everyone had fun making your flagship maiden voyage building web components. I hope is great, I hope somebody has some, if anyone has cool ones you want to share in the chat. But I can walk you through what I did, because I used one I'd never used before.

[00:00:19]
So if that sounds good to y'all, I'll just do that real quick and kind of no we can talk people in the room maybe here saw it but I can talk about some of the challenges I had figuring out what's going on. But ,where's my awesome standalones, right?

[00:00:38]
So, I went to my own repo and I found an old pull request for scroll shadow and that sounded cool. So I clicked it. And what scroll shadow is this when you scroll up something and you want to show a shadow, or you scroll down, you want to show a shadow on the button and be like, hey, this one keeps going down below.

[00:01:04]
I think people use it a lot in nav overflow patterns, hey, there's something to the right here, keep scrolling. So it is a tool that kind of adds that effect. And there's a cool demo here, and their demo is arguably better than mine. But you can maybe see a little shadow peeking through here.

[00:01:25]
Little shadow peeking through here. And then when you scroll a little shadow shows up here. It's probably too subtle. So I kind of made it a little bit bigger. Yeah, look at that. It'd be purple shadow down here. Beautiful ambiance that I'm creating and then it's up the top and then it disappears at the bottom.

[00:01:50]
I'll tell you what, this is cool and I'll maybe use it [LAUGH] I don't want to code this. To be frank, I know it's probably maybe trivial, but you have some resize observing, you have some scroll observing, you kind of fade in and out that shadow. I don't want to do that.

[00:02:18]
So I'm just probably going to use this if I ever need that to create that effect here in the future and I'm actually like thinking about 10 places I could use it right now. So looking at this, I had to use the unpackage URL. It was not working with the sky pack thing trick I told you and that's, okay, I think there was just like a compilation error.

[00:02:41]
And I eventually check the console to make sure I wasn't me but it was the sky pack, was failing, so but the unpackage seems to work just fine. And then I have scroll shadow, and then they were using kind of a main element to do the sizing. I had to figure that out, kind of poach from the demo.

[00:03:03]
And then I added my own Bill Murray's. And then in the CSS land, I added some image max width and then the body, that's just centering, I guess I could probably just do like place items center. But, yeah, so, and then it has a max height on that it says height 100v.

[00:03:23]
So everything inside there is not going to bleed out. But then the demo is only 70vh. So it's only 70% of the height. And it's like 400 pics wide and then this was kind of interesting. So this was the scroll shadow. I probably that's like the default sizing.

[00:03:48]
So changing that's not going to do anything. But what I get here is some of that styling API we kind of hinted at. And I can just change the CSS variables. The size of it, I could change it to 200. I think I changed it from 14 to whatever this is.

[00:04:07]
Is it going to rebuild for me? I think it's probably way too huge now. Yes, way humongous. That's okay. We like the ambiance. But yeah, so, you can change all the variables and change the color from like a black to more like purply vibe. So, that was fun it was really, I did it in less than ten minutes and I got an effect that will last a lifetime because am probably going to use this over and over, and over, and now that I know how to do it with zero lines of code.

[00:04:39]
So all right did anyone else do and they want to share or?
>> I was pretty pleased it's literally just an index.html but as not a Microsoft fanboy. I went to the Red Hat one and grabbed the one of their little health indicators. And I wasn't sure whether you could just run like set attribute on one of the various custom attributes.

[00:04:58]
But it turns out you can so I just have a little health index and I just set up an interval to rotate between which one is highlighted and you can do that, so
>> Cool so you're setting the value or you're changing the graph or whatever.
>> Yeah.

[00:05:13]
>> Based on a set interval.
>> Yeah. It was like two minutes of looking at the library like pulling it down from I think unpackaged they had.
>> Yeah.
>> Where you go.
>> Awesome pattern Fi is a really pretty good little set of components. So, it's enterprise grade vibes [LAUGH] It's good all of them are like enterprise

[00:05:39]
>> I was going to point out one thing that somebody had mentioned in the chat. And it was actually an issue I ran into with the previous exercise of building just using a web component, right? So when I first tried it, I had the type equals module missing and nothing was happening, and I was just frustrated I was feeling like I didn't actually know web development and that's always true.

[00:06:08]
That's a standard, but I'd forgotten this one attribute and that sort of caused the JavaScript because it's expecting a type equals module. It's expecting that module behavior. So, because the JavaScript exports to module is expecting my script tag to also have the type equals module. Somebody else in the chat ran into that problem and I think they said, once they figured that out it worked like a charm and that's what we like to hear, web components work like a charm.