Potluck × Native Web Components × JS Class Mixins × Application Secrets

you know, set up 7 PM. Everything gets a little bit dimmer. Some rooms shut off, and the kids' rooms are gradually getting dimmer as they're playing before bed to, you know, try to calm them down just a little bit if that is, you know, ever possible.

Nice. Nice.

rid 5 or 6 different light switches in the kitchen for some stupid reason. And then Oh, yeah. The,

Granted, probably at least 12 of those are bulbs,

I think we have every time you tell Google to turn off all the lights, it says, rid. Okay. And we're at we're at a point now where it says turning off 38 lights.

which we have, like, on CSS tricks about how to do it with Next. Js or any SSR framework. So,

I'm starting to set up scenes in the house, dude. And it's so good. Rid. Yeah. It's so good. I have like, my my kitchen is now fully done. So I finally finished the kitchen in terms of,

the living room is done. And so we have almost the entire downstairs done. I just did the stairs, and I've done our whole bath our bedroom in the kids' rooms. So at this point, I have the basement still to do and then a couple of hallways, but I have them all, like,

rid. That are just, like, on the outside of the house, but I'm at a point now where,

a play method on it. Right? Like, I've got a player, and there's a play method that lives inside of it. And then if I were to add a decorator But as you need them, then it would be super helpful.

to this mix in So the pattern is that TypeScript

I'm, I put this 1 in here because I personally yeah, You know, if you're using this type of thing, here's the 2 solutions. The 2 solutions is to you well, I guess 3 solutions. 1, if you really want, you can write your own client side,

If not, what are some use cases in which they would be beneficial? Oh, yeah. The Wago 22 ones. Rid. Yeah. Yeah. That's pretty thick. It was nice and easy.

rid It's in. Yeah. Additional code before and after methods and whatnot and augment the existing

really that, you know,

version TypeScript 5 has, like, stably released their new decorators

don't know much about mix ins. And I I do not work with class based systems really is what it comes down to. So when you look at this,

onto that class. Because as well. Like, a century has been rocking out the features recently, and kinda one thing that they are in beta sprinkle in. That's what mixins do as well or mix in. Maybe I should just use the terminology there

I keep I'm literally missing the word that we need to be saying here. You can mix

methods in there. So an example might be

some analytics, maybe it is a cool animation, maybe it's simply just some logging that needs to happen.

them that Somebody wrote, like, a custom regex implementation for the longest time, and actually much of Versus code is written in that pattern.

However, I didn't see many examples of mixins out in the wild. Should I avoid them? to data loading to whatever. And web components just straight up weren't made for that. So,

They are sort of banking on rid. Yeah. This is not a technique that I've seen used very much. I don't I don't do a whole lot of, like, class based programming as well.

ready and then the

I highly used. But,

TypeScript had another mixin It's pretty cool because you can basically take a class or rid them out on a learning project, which is a blog site, but I'm a bit confused if I should make every single thing in a a web component

In middle school and and high school, I'm gonna sit what what are your thoughts on mixins, Wes? And this is honestly when I when I saw this ready. Come in. The first thing I did was start googling for examples to see, like, hey. What what use case is this,

You have a class with a and being able to actually view replays, and it's in beta. You wanna check it out. You go to century.io.

down, all mixed up, rap rock kinda.

use as much of the class based programming as You basically just you stick it in the right gauge. You you

Oh. Okay. 3 We had a band called Finger 11. That was Oh, yes. Everybody knows From Finger 11. Yeah. Yeah. Yeah. They they used to play a lot of local shows.

Oh, man. I was a big 3/11 fan. I I I saw 3/11 in concert numerous other times. I was more into POD at at around that time. Okay. They would have been, like, the cool cool version of POD.

probably other people. So maybe most recently,

I think What's the idea of

A teen? All the powers kinda converging together.

Okay. All Next up, I was reading about JS and TS class mixins. They seem like an interesting way to have the class inherent from multiple other classes.

additional

before you play something or after you play something, I also want to inject browser Rid. But, like, wouldn't it be cool if that was built into, I have been having an issue replaying a component tree rid. Similar to how React apps do it, or are they meant to be more sprinkled throughout the page where needed? I'm trying

Basically, it's a And, like, the handle on a pair of mine fell off. And I, like, contacted the company and they were like, oh, we'll send you a brand new pair because, like, these are, like, professional level

CR.

they're Nicely labeled for,

linesman in one, which linesman are the, like, Rid. And I have been loving them. It's so so quick to strip them.

But they are a tremendous pain in the ass.

set of strippers is good as well, and I have a couple couple of those. But it's just so nice grabbing 1 and they they fit in your back pocket really nicely. Like, they're heavy, so they fit in your your your back pocket. And I think you can also get a glow in the dark pair as well, which would be

The Klein K 12065 code that has been written in the last 10 years up until today.

And I still like that especially for smaller wires. But for a lot of the, Every time it's really hard to get the whole house

wire strippers. Rid. And, yeah, I've been I've been in the show notes because I want to want to pick me up a pair of those. Yeah. I've been I think, like, a dedicated the reason why you might not see them is, you know, a lot of people might not be doing a lot of class based work. But if you are using classes,

25 years ago. And they I mean, they they honestly they work fine, b as in bald.

wire stripper and set of, like, with the tastiest Potluck treats out there. We've got a potluck episode for you today. This is where you submit the questions, and Scott Scott and I will answer them. Some rid. Really good questions coming in today, all about JavaScript and SEO and,

for that type of stuff.

pretty nice. I don't have that.

Yeah. No good replicate the Dom and render it out.

a web component if you want to. Jsdom supports them.

So I probably wouldn't try to do routing and all that rid stuff. And and and I wouldn't try to to throw everything in a normal application tree in your web components because I I flat out don't think that's that. That's what they're made for or do well.

I'm sure you could figure out some sort of thing. Whether that's easy or not maybe is another question. Yeah. There's tooling you need tooling there to support you. Yeah.

but, like, you should be able to server render flat build pliers that you use for twisting the wires together.

So then you're adding something. I I I don't know if lit can do it or whatever.

Oh, yeah. Kinda like container queries. Right? You define a container and then everything else inside of that. I agree with everything you're saying. And the one one thing to keep in mind, Ramin, is that, like,

nowhere. Pretty much not supported. So now you can't do that.

think

routing. Right? So full page reloads on each reload, and that's certainly not a problem if your pages load fast enough. Right?

fussing around with the different scopes and whatnot. So what do you think, Scott? Well, you can do that now with scope in CSS. Can you? API, which is great.

When does can I can I use you know, just yet, but I I saw we were both doing a little bit of electrical work this week. It's funny because you were installing

that type of thing is that you have, like, a div and you define Find that as your scope, and then you can you can write selectors that are scope to that. You give it a name. You'd say this is the this rid. Scope, and then you could

Or you could use web components with a JavaScript framework, which might seem counterintuitive and weird, but some frameworks work really well with web components. And, look, we use a fair amount of web components in our Svelte site, and Svelte handles we'll see as a scoped CSS Rid being growing up in Detroit, you know, the main rock radio station we listen to is out of Windsor. So Our Lady Peace and Finger 11 and all these Canadian bands that Nobody ever hears of here in the States. We were, like, getting pumped into Michigan.

the navigation, the routing, those types of things, the scoping of CSS. Rid. The web components are more or less there to Yeah. I'm using the wire stripper that I'm using was came out of a One of those clearance tool packs for dads at Target from, like, Yeah. Yeah. Yeah.

maybe Scott knows a little bit more, but I think is the ability to,

rid Using them like you are a front end framework, and that's the kind of, I think, the big beef with web components overall. Right? When you use a front end framework, that front end framework wants to take over so much from routing

as you need them. So don't make a web component for literally every single tag. That's what browser Primitives are for. That's what divs and aside and and main tags are for.

scope? I mean, Is it is it just at scope, right, where you can define scope? I'm sure you could have some

augment and drop in and help out where

routing functions to fetch whatever is next and replace it. Right? rid we'll link this to the show notes and see if that's helpful.

I have a video player. I want this video player to be cross platform. I want it to support rid Streaming. The normal HTML element doesn't support that. Alright. We use a custom element for that.

Rid. The scoping of the CSS is extremely And and the, like, the SSR thing, like, that's that's gotta not be rid. True. Like, if you really maybe he he may be saying, like, just with his, like, whatever. He's he's serving up HTML right now,

with web components, you're not necessarily meant to be

even without in I think it's

You could just use the straight up built in Normal HTML

then target that specific scope in your CSS.

can I use

is supported

handy feature of this type of stuff. And quite honestly, I wish we could do this in the browser Welcome to Syntax, the podcast those specific things. So it seems pretty pretty exciting. It's kind of interesting that

your end user

reproduce in my, like, rid. My video player where the progress, like, 1 out some custom logic, whether that is being added to JavaScript as well and sort of having 1 to 1 parody.

of 60 progresses would would error out, and I don't know why. And I'm trying to figure out, okay, like, I just want to see the user's console rid. At that point, I've been like console if you console log stuff before an error happens,

So,

rid errors. So you can actually see how did somebody get to that error. They've they've always had this thing called breadcrumbs, which I Found extremely helpful recently in trying to debug.

Io. They are the, rid. Error exception and, The idea with the web components is

Use the coupon code tasty treat. That's gonna give you 2 months for free.

that will show up in the breadcrumbs. So that's really helpful to see what happened. But This is taking a step further, rid. Add in

Pooched.

Rid Especially when you only have so much wire to strip. If you do it wrong Yeah. You're you're getting it's kinda dangerous because this the wires in the wall. And if it's if it ever gets too short,

Paula questions here because that's why we're here. Right? First, question is not even a question, but something that, somebody made for us, and it's incredible. So this is from Bumhan.

You gotta open the wall. Yeah. No. Thanks. Let's get into, a rat king of

He says just to call him b,

You're pooched.

Rid Yeah. Maybe we should dive into server side rendering for web components and and really get in there, because I I do think it is a concern.

Will

But yeah. Okay. Next question from all mixed up. Don't know what to do. All mixed up. Did you like 311, by the way, when you were that that's where I'm at, but I'm also highly caffeinated. So I guess those 2 things kinda, you know, work together. There you go. We are sponsored today by Century at century.

web components? You can Rid. Yes. I have, like, one of the crappy ones. I'm interested. I had it for a long time. I had been a fan of the, native web component, I e, extends

Rid Because, like, that's the other thing about this, like, next generation JavaScript bundler

Rid. But, again, you know, one of the

support

Intuit? Yeah. Here's a blog post how to do it with Puppeteer. Server side rendering web components rid Puppeteer.

renderer were not like what you'd expect them to be. So, like, you have to take all you have to disconnect all the wires and then take rid. A voltmeter and see. Okay. Well, this is going to the light. This is coming in from the panel and Mhmm. It's it's really confusing, but I I'm rid Let me tell you where those way goes really shine, Wes, is when you have a power you know, sometimes you have a power that's like solid and stranded wire.

be also available on the server side? Like, there there's lots of things out there. Jsdom, probably the big one, but

It seems like a lot. Yeah. But that with Puppeteer, you got you're literally firing up a whole browser. Say yeah. Yeah. That That's what I'd say. It it it feels like that's a a lot. Here's another post

Yeah, because those twists work great. But if you have to add 1 to the bundle, it's not a good idea just Just stick it in and try to twist it on top. You gotta undo them and Yeah. The waggles are are way better for that to just cut the wires. Hey. Do you have a good recommendation for a good wire stripper?

the, like, automatic one rid. Where it will just like you just squeeze it and automatically strips it off. You don't have to know the size or anything like that.

wires.

Yeah. Or in 1 1 box, and they're all using the same power. So then you end up having, like, 4 wires into 1 wire nut. And, yeah, though those are the ones where it shines the absolute most, the way go. Because mine was cleaned up so much, and I felt so much better about Shoving that in my wall with 4 wires connected to one of those things rather than 4 wires all twisted together in one kind of, you know,

the smart switches at literally at the exact same time I was installing them. You posted to Instagram what is similar

I was doing it. I got to use my new my new

Thank you, Century, for sponsoring. Sick. Well, let's get into the the potluck here. Oh, by the way, Wes, rid. We we didn't talk about this, Like, I I've opened I don't know if this is something you've seen, but I've seen a couple times where I've had multi multiple switches in 1 outlet.

I am sick of there's a couple of other ones out there as well that will literally

having to use those those wire nuts. I installed a whole bunch of dimmers in the kitchen.

and I, like, checked it while I was So I think it's pretty cool. I just don't Not that it's bad. It's just not the type of stuff I'm generally into.

That's good. I mean, I just need to bite the bullet and buy a big pack of them online because is at what point like, household stuff, I got the Klein

wire clips.

Rid. And, like, I'm at a point now where

that just basically rejects all the show notes and finds the sick pics and puts them all into a page.

Give it a star on 311. What's that? Band 311? Did you just say what's that? 311? You were very popular when we were, like,

I clicked on this, and I was just so excited by this. So

using your API routes. This lets listeners browse by release, rid. Year and or categories and search for specific keywords. Please check it out and let me know what you think.

This is awesome. Great work. I think this needs a huge round of applause. If we had a soundboard, I would be playing one of those for you right now. This is super cool. So, nice nice job.

B says, a big fan of the show. I built a custom syntax podcast

[email protected]

So what's up, b? one of the things I keep going back to is, like, I like web components to augment things and maybe rather than having it be The star of the show. Yeah. And, like, at what point like, does Deno

Yeah. This is this is really cool that you can like, this is on our list of of what we wanna do with the new syntax website is, like, we do have a page for the sick pics right now. Lot of people don't know that. If you go to the very bottom of the site, there's a page that says sick picks.

But this is so nice to be able to do that on my list of Things that should be on the syntax website. Yeah. So give this a try. Give this a check out.

nice and simple.

good. It's so good. 1, the layout's great. The even the design, everything is great. But, you know, you can browse by sick Hicks if you want. You can browse by the shows. You can search for something. It's really rid. GitHub or any of them. You know? Just so thanks so much for putting this together. Really neat. Next one we have here from Ramin.

on

Rid. This is interesting.

Or just things like the search bar or comments area which are interactive.

or Shadow DOM. However, if I make, for example, a post of a web component, it won't SSR from the server, which will be pretty bad for SEO.

Love y'all. When using the browser, And now they have released a new mix and pattern, and they're going to keep the old one around for, at least that as long as we need to, because it obviously has to support

But even if things aren't interactive, they'd still benefit from style encapsulation

HTML element, should the whole application be wrapped in I

Put your question in the box, and we'll answer on the show. How are you doing today, Scott? I'm doing good, man. I'm, just getting sick again. Rid. We were I was just sick. I'm going to again. Yeah. Well, I mean, I'm doing good, but I'm also doing sick. I'm not I'm not at peak sick just yet. I'm like, You know, though, you you wake up, and you're all of a sudden, like, wait a second. I can't breathe. Oh, no.

working 2 jobs and some really neat stuff. I really like this because there's something in it for everybody. If you do have a question you'd like us to answer, make sure you go to syntax. Fm. There's a button in the top right hand corner. Smash it.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

set up because it like rid. You put install a light switch. It takes anywhere from 10 minutes to an hour depending on how difficult it is. I had a really funky one, which was like a weird freeway where the colors using the Shadow Dom because it's so nice to not have to worry about