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

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.

Welcome to Syntax, the podcast 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, 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.

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.

So, 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.

Io. They are the, rid. Error exception and, most recently, replaying as well. Like, a century has been rocking out the features recently, and kinda one thing that they are in beta is the ability to, reproduce your end user 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.

I have been having an issue in my, like, rid. My video player where the progress, like, 1 out 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, that will show up in the breadcrumbs. So that's really helpful to see what happened. But This is taking a step further, and being able to actually view replays, and it's in beta. You wanna check it out. You go to century.io.

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

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, 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

the smart switches at literally at the exact same time I was installing them. You posted to Instagram and I, like, checked it while I was

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

Oh, yeah. The Wago 22 ones. Rid. Yeah. Yeah. That's pretty thick. It was nice and easy.

That's good. I mean, I just need to bite the bullet and buy a big pack of them online because I am sick of having to use those those wire nuts. I installed a whole bunch of dimmers in the kitchen.

Rid. And, like, I'm at a point now where 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.

Nice. Nice.

Granted, probably at least 12 of those are bulbs, rid. That are just, like, on the outside of the house, but I'm at a point now where,

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, which we have, like, rid 5 or 6 different light switches in the kitchen for some stupid reason. And then Oh, yeah. The, 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, 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.

Every time it's really hard to get the whole house 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 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

All the powers kinda converging together.

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.

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, a rat king of wires.

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? 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, 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.

And I still like that especially for smaller wires. But for a lot of the, like, household stuff, I got the Klein The Klein K 12065 CR.

Basically, it's a wire stripper and set of, like, linesman in one, which linesman are the, like, flat build pliers that you use for twisting the wires together.

Rid. And I have been loving them. It's so so quick to strip them.

You basically just you stick it in the right gauge. You you they're Nicely labeled for, solid and stranded wire.

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

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

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 pretty nice. I don't have that.

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, 25 years ago. And they I mean, they they honestly they work fine, But they are a tremendous pain in the ass.

Yeah. No good for that type of stuff.

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, You're pooched.

Pooched.

You gotta open the wall. Yeah. No. Thanks. Let's get into, 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.

He says just to call him b, b as in bald.

So what's up, b? B says, a big fan of the show. I built a custom syntax podcast browser@syntax.bald.design 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.

I clicked on this, and I was just so excited by this. So 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 nice and simple.

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.

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.

Somebody wrote, like, a custom regex that just basically rejects all the show notes and finds the sick pics and puts them all into a page.

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.

Give it a star on on 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.

Love y'all. When using the browser, native web component, I e, extends HTML element, should the whole application be wrapped in 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 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 Or just things like the search bar or comments area which are interactive.

But even if things aren't interactive, they'd still benefit from style encapsulation 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.

Rid. This is interesting.

I think maybe Scott knows a little bit more, but I think The idea with the web components is 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.

But as you need them, then it would be super helpful.

Rid. The scoping of the CSS is extremely handy feature of this type of stuff. And quite honestly, I wish we could do this in the browser even without using the Shadow Dom because it's so nice to not have to worry about 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?

When does can I can I use can I use scope? I mean, Is it is it just at scope, right, where you can define scope? I'm sure you could have some we'll see as a scoped CSS is supported nowhere. Pretty much not supported. So now you can't do that.

What's the idea of 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

then target that specific scope in your CSS.

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, with web components, you're not necessarily meant to be 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 to data loading to whatever. And web components just straight up weren't made for that. So, 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, routing functions to fetch whatever is next and replace it. Right? You could just use the straight up built in Normal HTML routing. Right? So full page reloads on each reload, and that's certainly not a problem if your pages load fast enough. Right? 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 the navigation, the routing, those types of things, the scoping of CSS. Rid. The web components are more or less there to augment and drop in and help out where 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.

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.

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, but, like, you should be able to server render a web component if you want to. Jsdom supports them.

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.

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

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.

Rid. But, again, you know, one of the 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

support web components? Rid Because, like, that's the other thing about this, like, next generation JavaScript bundler is at what point Will the browser renderer be also available on the server side? Like, there there's lots of things out there. Jsdom, probably the big one, but there's a couple of other ones out there as well that will literally replicate the Dom and render it out.

Rid. But, like, wouldn't it be cool if that was built into,

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

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 on CSS tricks about how to do it with Next. Js or any SSR framework. So, rid we'll link this to the show notes and see if that's helpful.

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 A teen? 311. What's that? Band 311? Did you just say what's that? 311? You were very popular when we were, like, In middle school and and high school, I'm gonna sit down, all mixed up, rap rock kinda.

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.

Yeah. Yeah. Yeah.

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.

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.

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.

However, I didn't see many examples of mixins out in the wild. Should I avoid them? If not, what are some use cases in which they would be beneficial? I'm, I put this 1 in here because I personally 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, 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, 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, really that, you know, I highly used. But,

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.

Not that it's bad. It's just not the type of stuff I'm generally into.

I think what is similar to this mix in So the pattern is that TypeScript in I think it's version TypeScript 5 has, like, stably released their new decorators API, which is great.

They are sort of banking on them that being added to JavaScript as well and sort of having 1 to 1 parody.

It's pretty cool because you can basically take a class ready and then sprinkle in. That's what mixins do as well or mix in. Maybe I should just use the terminology there additional methods and whatnot and augment the existing methods in there. So an example might be You have a class with a 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 onto that class. Because before you play something or after you play something, I also want to inject some custom logic, whether that is some analytics, maybe it is a cool animation, maybe it's simply just some logging that needs to happen.

You can rid. Add in or I keep I'm literally missing the word that we need to be saying here. You can mix rid It's in. Yeah. Additional code before and after those specific things. So it seems pretty pretty exciting. It's kind of interesting that TypeScript had another mixin implementation for the longest time, and actually much of Versus code is written in that pattern.

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 code that has been written in the last 10 years up until today.

So I think it's pretty cool. I just don't use as much of the class based programming as probably other people. So maybe