Finding Web Components

[00:00:00]
>> We'll go into Finding Web Components, right? So this is, I think, like, I don't know if this is unique to web components, but I think in any framework or any anything, like sourcing quality goods, quality packages it can be a challenge. For me, I try to find what the cool kids are using in, I don't know, in web components.

[00:00:35]
What are the cool kids that Salesforce using is probably different than what I want to use personally. No sleight to the the great devs working on lightning web components. So, I think there's just sort of a difference between maybe what, there's not really a big Zeitgeist about, hey use this this components cool use this hey to use this.

[00:00:59]
So I've actually kinda taken on, that's what I'm frustrated about. So I've taken it on myself to kinda collect some of these. So I have a GitHub repo called Awesome Standalones. And Standalones is a term I made up, no one else says it. But it's basically these components sort of like two app that you can just yank off the shelf and use without any build tools without any of it, it has a unpackaged link and some HTML, then you can get going.

[00:01:28]
And I can dig through some of these, how many times have you needed to just a button that copy something to a clipboard, right? You want to just copy that and copied done. Awesome, I don't wanna code that, that's great, clipboard APIs fine, but this one's cool, this one is from Google.

[00:01:48]
It's called input-knob, it's actually in use in your dev tools, I believe. If you want to change the hue, you get a little rotating icon, but look what we're dealing with. Whoa, that's cool, very manual way to move a slider. And you should probably provide accessible fallback but or maybe it, yeah, just go straight to it.

[00:02:19]
But wouldn't it be cool if you could arrow that slider, but this is kinda cool. I don't know if you make little synthesizers online or something like that. And you want to turn up the money bar on your website or something, that's-
>> [INAUDIBLE]
>> Yeah, money up, just turn money up.

[00:02:37]
Just [LAUGH] tell your boss to keep spinning that until money. [LAUGH] Boy, like YouTube, it just keeps getting better. I don't know if you know, but the YouTube embed as much as Google loves performance, the YouTube embed is not great, it does this. That's a flame chart, it basically calls a bunch of JavaScript a lot.

[00:03:11]
So Paul Irish who works at Chrome made this light YouTube embed, which gives you a YouTube looking embed with, I don't know, I guess that time is more than the other one. But it loads in two milliseconds or something. It made a drastic, like this is it that's it, it looks like the YouTube, and then when you click that it'll go fetch the YouTube, the actual YouTube.

[00:03:44]
But that live YouTube we rolled it out on ShopTalkshow.com, on our video page we've been doing videos, we rolled it out here. Our page speed went from like 18 to 90 or something like that. I watched it, Chris was like, I was running like performance metrics, just because I'm dumb.

[00:04:05]
And Chris Coyer pushed out the change and I was like, I have like a run right here. I can go compare, popped it up like instant boost, literally in, I don't know, zero lines of code, because we already had the iframe. He just changed it from iframe source to YouTube Lite or whether Lite YouTube in zero lines of code change, and drastically improved our page speed.

[00:04:39]
Web components, back to the question about performance, sometimes free performance. [LAUGH] Here's one I really like, model viewer it's from Google. And you may be actually encountered this like on, you search for dinosaurs or something like that, have you ever done this with your kids? Search for dinosaurs, and then you'll get like a 3D model of a dinosaur.

[00:05:05]
And then there's a little AR button, and you can put the dinosaur in the room or tiger, Tyrannosaurus Rex or whatever. And you can put the tiger in the room and then your kids can kinda interact with it and see how big a Tiger is. I didn't think I'd ever use this [LAUGH] feature, but then lo and behold, one day, my six year old's asking me, how big is a tiger?

[00:05:26]
And I just was, well, I know how to show you. So this is a model viewer and the syntax is this, sorry about this contrast here, but the syntax is pretty easy. You have an Alt attribute, just like an image. You have a source attribute, just like an image.

[00:05:46]
Except it points to a 3D model GLB, GLTF. There's a few different types of models that supports in a 3D model is really just a folder of files. There's the wire mesh, and then PNG assets that go over it. And this one's maybe from NASA. It's like the actual render of Neil Armstrong suit.

[00:06:11]
And then AR mode, WebEx RC, these are all very specific environment image poster so when it loaded it showed something but it didn't just show a blank screen. Camera controls, enable pan, that's what I'm doing here, I'm moving it around. Yeah so what I like about this is again, I do not know how to code 3D stuff but with Web Components, I look like I do.

[00:06:40]
And I can build that IKEA furniture thing where you put IKEA furniture in your house using Web Components. I didn't have to go to Computer Science School. It's great, so there may be your mileage may vary, it may get trickier. Pinch Zoom, here's another one, Chrome Labs. I'll let you kinda click through more after this unless I see one more.

[00:07:04]
But Pinch Zoom man, you ever wanted to just add pinch zoom to a website, not the funniest thing because the whole like browser tries [LAUGH] the zoom, and then you get locked into the image, and then it's just not fun, pinch zoom. And you might say, man, Pinch Zoom in 2up.

[00:07:23]
Those seem similar and they're both from Chrome, right? Have you ever used Squoosh app? Squoosh app is a pretty cool like a way to image process and it's using kind of the wasum stuff to, you can minify your images, browser PNG, you can resize it. I use this all the time cuz I don't like using Photoshop but you can even get a Web P out of here.

[00:07:51]
AVIF is the new one and it has like the smallest file size you see the file size there. But Pinch Zoom 2up, View Source, elements, let's go dig, we're digging. File drop, uh-oh, a way to just drop a file on a page, that looks like we use that.

[00:08:15]
Snack bar, that sounds delicious. But let's just get 2up, Pinch Zoom. Pretty cool? You start to see how, this is just HTML, we're just stapling components together, nesting and layering them and we're like adding these behaviors to build this image minification app that then connects to image minification binaries on the side.

[00:08:43]
I'm not going to say it's easy, I mean, these are like Google [LAUGH] people making this. So it's very advanced, but pretty cool. And then there's like tabs, task list. I'll do this one, this is from GitHub, you've heard of GitHub. You know how they have like a little task list?

[00:09:01]
Yeah, that's like literally this. So you can just do tasks and slide them around. So web component, GitHub uses a lot of web components here. Same kinda all over the place, a dark mode toggle, K text display who likes math. If you like math, [LAUGH] that's your one.

[00:09:19]
HTML includes, wow, a way to bring the most ultimate feature back to the web. It's like a PHP include, but with HTML. Awesome, I love it, pwa-install, I promised myself I wouldn't go overboard here. If you have a PWA I don't know if anyone has anyone here have a PWA.

[00:09:42]
No, okay, well, another course then, we'll do another course. [LAUGH] PWA are a great way to like basically add a native ffill to your website, it's two pieces of technology, a Service Worker, which is basically a way to manage cash. You just say, hey, browser, I'm gonna store some stuff, I'm gonna manage some cash on my own and intercept requests.

[00:10:07]
And then you have a manifest, which is like all your app icons, stuff like that. Just use this icon for this, or the short name is this. When you launch it from the homescreen do this. And what happens is in Chrome and other browsers if you use a website enough on mobile Chrome specifically, instead of saying download our app.

[00:10:29]
It'll say like, hey, you use this, it has some heuristics and they'll say, you use this enough, would you like to install it to your home screen? You click Yes, you get an icon on the home screen and you launch it and it launches like an app. It can even remove the browser Chrome.

[00:10:44]
So yes, we have a question.
>> We do have a course on PWAs by Maximiliano Ferman.
>> Excellent first, yes, he's probably the guy you want to talk to [LAUGH] about PWAs. So yeah, so anyway, it's basically a native feel, and to the extent Microsoft for their store, you can ship a PWA in the Microsoft Store.

[00:11:12]
So if you're a small, scrappy young web team with not a bunch of engineers to code, your dedicated Windows app PWA is a great tool for that. And so the people at Microsoft who run PWA builder account. They have this installed prompt, and you can get this like it'll pop up on desktop when the four install prompt event fires.

[00:11:35]
You can intercept that and get these this beautiful, no, app store like hey, do you wanna install this application? Kinda cool, again, your mileage may vary, but I think you'd impress your bosses. So anyway, awesome standalones, you can check it out, pretty cool. And then on the other end of the spectrum, not the one-offs, there are whole design systems built with web components, lightning web components by Salesforce.

[00:12:02]
If you're building Salesforce apps and stuff like the, integrations, you probably come across this. Lion by ING bank, sounds a little weird to use like banking software's design system, but this is actually really coded to be extended and modified. So it's a really good base if you wanna kinda build your own I guess banking grade enterprise grade system.

[00:12:33]
So you're gonna have a lot of accessibility and stuff like that built in, just through the requirements of banks and stuff like that. PatternFly elements from RedHat again, very good, very robust. Fast is the new one from Microsoft, it's kinda doing their FLUID UI. Is that taken in FLUID UI and web components?

[00:12:51]
Spectrum Web Components by Adobe Spectrum is their design system. And web spectrum web components is the web component version of that. I think this is what is kind of powering the new Photoshop UI. Ionic Framework by Ionic, it's a really great tool for prototyping or even shipping. Mobile apps, you basically say, I want tabs bar, iOS tabs, like I want a tab bar.

[00:13:24]
Great, it's gonna give you the mobile tab bar with five icons, right there. Really awesome, I've used that in the past for companies I can tell those stories. Shoelace's another one by Corey LaViska. What's interesting about this and this is foreshadowing the JavaScript section. Recently Cory, he started writing this out in JavaScript and in his own, Vanilla JavaScript.

[00:13:51]
And then you find an abstraction so you kind of like pull some code out, reuse it and lo and behold after a while you kinda have a little mini framework, right? We've all done that. And he said, I looked at this mini framework, and I've said I would get more gains by switching over to lit because lit has kind of done all this.

[00:14:12]
And so lit is another, so he converted that whole library of components over to lit, spill on lit now. And he's seeing some gains just from a usability standpoint. It's faster, smaller, better, more robust code. So yeah, so that might be one reason where frameworks are like a good choice.

[00:14:33]
But yeah, so built with what come on, so you can browse these and see if there's anything is interesting there. The fast by Microsoft stuff, maybe I'm a Microsoft fanboy, they have a, it's very interesting just from like, I didn't expect them to buy in but they bought into web components and they're kinda doing some cool innovative stuff there, so.