Using Web Components Examples

[00:00:00]
>> Okay, we're gonna start talking about using web components, and styling them, and writing them. And this course is probably gonna be a little bit different than every other Frontend Masters course you've ever taken, where you open up the command line and just start blasting away a code.

[00:00:19]
We're actually gonna start at a bit of a different level. We're gonna start with the less chaotic stuff first, start with just how do you use them in HTML? And what does that look like? What does that feel like? How do you find existing web components, so you don't have to write your own?

[00:00:37]
Stuff like that, start at a pretty, I guess, high level. But then move to the next layer of how do you style them? So that's phase two, cuz there's a few foot guns in there. So if you start on the JavaScript end, I find when you start using them and you're thinking I'm doing really good.

[00:00:56]
And then you get to the styling part and you're I am not happy right now. [LAUGH] So just cuz there is difference is the shadow DOM's fault. But then you go the last level for me is sort of the kinda chaotic JavaScript realm. And then we'll spend quite a bit of our afternoon there, just kinda planning out the course here.

[00:01:18]
So that's where it's gonna be. And we're gonna start with HTML and kinda finding components here. And I'll be really real with you. I've been a little bit frustrated with the state of modern web development, if I'm not telling. You wanna build a webpage, but you have to install all of God's Earth into your computer, gigabytes of Node modules just to build a webpage.

[00:01:46]
For me that creates a feeling of I don't wanna be this nostalgic human, but maybe I am. Well, back in my day, I used to dial up into a website. That's all true, but, [LAUGH] for me, it's just sort of this ease of use. I feel like I have to be a computer scientist just to build a web page first.

[00:02:10]
And so, well, we can still be that and do that, [LAUGH] with web components. I kinda wanna start at a different angle. What if we could make interactive websites and all that cool stuff without installing that bunch of JavaScript? This is The Guardian, it's a newspaper. Have you seen these things where it's sort of the photo slider, where it sort of shows before and after?

[00:02:46]
This is after the 2011 tsunami in Japan. Usually they're used for disasters, or wars, or very tragic things, but for me they end up being this really evocative form of storytelling, like, wow, there was a boat on that house. [LAUGH] I've never seen that. That's how high the water got.

[00:03:05]
[LAUGH] If the boat is on the house, the water got higher than the house. These are just really evocative ways to tell stories for me. And so it's very interesting to me when I see these before and afters. And I'll dig into every pixel, and kinda see what's all changed.

[00:03:24]
While I find them super cool, I never want to code one, literally never. [LAUGH] You want to code one? You're talking touch events, pointer events, absolute positioning images that could be whatever size possible. It's gotta be responsive. It's gotta work. I could code this. It might take me a week, two weeks, I don't know to fully tested on all the devices.

[00:03:47]
And then I roll it out. And then I'm getting bugs fixes, bug reports for the next ten weeks, and stuff like that. So I don't want to ruin my life by coding this on my own. Even though I feel like I could, I'd rather use somebody else's brain here, and I can.

[00:04:05]
So two-up, it's a repo from Google Chrome. Google Chrome kinda made this, and I'll show you later in what context they kinda made this. But it basically, it creates that whole effect of the boat on the house in about five lines of code. And if we kinda zip in here, you have a two-up element, that's the custom element.

[00:04:34]
And inside we have a div with an image. That's your before image. A div with an image, that's your after image. And then a path to the script, and this is I think coming from, where did I put it from? Unpackage, I just yanked it off of unpackage.

[00:04:49]
Now, you probably don't want to add your bank, you can't just serve files from unpackage. That's fine, you can install it to your computer, if you wanna do that, but what a great way to just kinda prototype something. I didn't have to install all of God's Earth, I didn't even touch the command line.

[00:05:08]
And I kinda have this little interactive experience just from doing nothing, except writing about five lines of HTML, and stealing images from The Guardian, I apologize. It's for educational purposes. And then you can style it too. We can talk about that, but they offer a way to kinda style it, and customize it too and the result is pretty convincing.

[00:05:33]
And yeah, so this is literally one of my favorite, I think we're using it on our portfolio site. My designer coworkers were able to get this up and running, which is nice, because I don't have to do much to support it. [LAUGH] So pretty good and if the JavaScript failed, let's say this unpackage goes down, no, guess what happens?

[00:05:56]
It's an image on top of an image. That seems pretty good. [LAUGH] No one's gonna complain. IE 11 doesn't support web components image on top of an image. Ship it, complete, done, right? That's all you need to know. I feel it's pretty good fallback plan as well. Here's just one dumb one I made the other week.

[00:06:22]
Know how you can see these HTML tables, well, maybe I should say this every database software is, I'll read in a CSV. Yeah, right, I'll read a CSV. But in HTML were, no, you have to write table TD, TD, TD, TD, TD. You have to write this really gnarly syntax.

[00:06:46]
And to get data out, yeah, you have to copy each one and paste it into an actual spreadsheet. It's not super fun. So I just made a little thing and I'm just gonna go to the debug view. But I made a thing that I can do this and I can whatever numbers, I don't know what's a spreadsheet?

[00:07:08]
[LAUGH] But I can do this, or maybe I should just do textedit, or what's the one that said, it doesn't mark? And then I'm just gonna do a new document. Here we go. What's the command ship T to you to get the actual thing? But I can just copy that.

[00:07:23]
And then look, I have a CSV right there. And all I'm doing is just wrapping a table with my functionality, and the JavaScript kinda doesn't exist. But then I was, let's take it a step farther and maybe you could just download the CSV, and then I get to open it in numbers.

[00:07:43]
Yeah, look at that, pretty cool. I don't know, it's a toy, but it's just something you could do. And now, I can just put that on every table I want, and I don't have to manually build stuff out over, and over, and over. Your mileage may vary, but I'm just kinda showing you, you can basically supply this functionality and then provide an easier way for somebody to add superpowers.

[00:08:10]
They didn't have to like query selector with JQuery or querySelectorAll and bind something to something. You just wrap an element, and you get some superpowers. So pretty cool. And then I guess we could go to if you wanted to look at some of the code, but, yeah, copy-table, around a table.

[00:08:30]
And I'm not accepting bug reports. I know you want a seven column vertical and nested tables. I'm not supporting that quite yet in this CodePen, but it's just kinda interesting. So yeah, even where I coded at I'm just linking lit off of unpackage, that's fine. And then I have some styles to get the thing, copy the clipboard.

[00:08:56]
I'm just doing that and then I'm spitting out some SVGs buttons, and stuff like that, pretty simple, a component that adds some superpowers. Here's what I'm passionate about I have big opinions about podcast players. I host podcast. Your podcast player needs to have the speed changer, right? 1x, 2x, any 2x fans in the crowd?

[00:09:29]
Yeah, no. Okay, well, good, thought we're just only normals. You have to have a speed changer. And then the other critical thing for a podcast player is that 32 seconds rewind. I heard something interesting. I would to rewind it 30 seconds and hear a little bit more, hear that one phrase again.

[00:09:52]
And so I made here, I'll kinda go, let me go embiggen this. So I made a web component, it looks ugly, but that's on purpose. But, [LAUGH] you basically pass it a native audio element with the controls attribute. And you wrap it in podcast player. And let's look at it, let's say again, in the JavaScript fails.

[00:10:16]
That's the native audio element. I'm not inspired. I'm not moved to hit Play. It does have some features now, like Playback speed that's pretty new one. It's not doing well inside that I frame there, but it is something that exists. So if I can put it in my podcast player, and then I can play, pause, I can jump forward, I can jump back, I can change the speed.

[00:10:49]
And then it'll keep getting faster. You probably can't hear that audio, but it's gonna speed up, and just like you'd expect for a podcast player to do is to mute in case my kids are trying to talk to me. And then this rangefinder, just to find where you're going in the podcast is pretty cool.

[00:11:09]
And then there's even some secret stuff in here that we've kinda baked into, maybe not this version, but I have a version of this over on the podcast, The Shop Talk Show, podcast player. And this is it fully styled, we brought some of our own styling to it.

[00:11:32]
Yeah, you can just steal web components and add stuff to them, it's pretty easy. [LAUGH] Didn't take much and now it's just working. And then we have this neat feature here, you can actually time jump in and jump to a point in the podcast, further into the podcasts, just like you can with a YouTube player.

[00:11:49]
It gives you a timestamp up here. That's all based on the pod love spec, thanks to them who helped me implement all that. Yeah, so it's kind of you're adding superpowers to this. This is ugly, but you're adding superpowers to this first some with minimal code. And again, I kinda I'm a fan of how this sort of plays out.