Potluck - Multi Tenant Apps, JS Sprinkles, Kids Coding, Server Error Handling

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. We got a really good potluck for you today where you bring the ready. We bring the answers. We got all kinds of questions about multitenant apps, JavaScript sprinkles, when should your kids start coding, how do I handle errors? Lots of really good stuff. We're excited to get on into it. We're sponsored today by 3 awesome companies, Sentry, rid. Error exception and performance tracking. Sanity, the place where you put all your content and FreshBooks, rid Which is the cloud accounting. We'll talk about all of them partway through the episode. My name is Wes Bos. I'm a developer from Hamilton, Canada. Rid. With me as always is mister Scott Talinski. How are you doing today, Scott? Hey. I'm doing good. It's Monday, Monday, Monday.

When when you're listening to this, it's Wednesday, But it's Monday for me. So yeah.

No. I'm doing good. I I I bought a new car, which, doesn't Oh, my gosh. Very often. Yeah. Rid The last time this happened for me was over a decade ago. So So you got an electric car. Tell us about it. I'm like, so I I just wanna talk about this for an hour. I do. I do wanna talk about it for an hour. And and and I'm I actually wish I was in the car working right now, which would be kind of fun.

Rid. So I got a Hyundai Ioniq 5, which is an EV that uses rid This thing called the EGMP platform, which is like a it's like a skateboard platform that the Hyundai Motor Group Or Kia Motor. I don't know who what's the name of the company. Either way, they they they use this for all of their electric vehicles. So Genesis, Hyundai, Kia, whatever. They developed one Platform that they could just, like, swap out the top on. Yeah. And that makes it really super nice because you're always gonna have parts available if you need parts. I mean, it's.

There's not that many parts.

So, yeah. Yeah. It's it's really sick. It looks like it's straight out of the movie Total Recall or Looks so sick. Cup or yeah. I I got, like, a matte pink on it. I was wondering. I was just gonna ask you that. Like, in the photos, it looks like,

like, it looks matte. And I I saw some other photos

where it was shiny. I was like, no. The the matte looks sick. It looks like you have, like, a dbrand skin on it or something. Yeah. It's like a it's it's funny because it's like it's a metallic coat, so it still has a lot of sparkles in it, but it's flat.

And the car itself, I mean, it's it's just so Cool looking. It looks like a hatchback even though it's, like, SUV sized. It's giant.

It has a super long wheelbase. It's very heavy, all wheel drive. Gonna be good in the snow. Rid. But I I honestly, my favorite things about it are like that it, it has this, like, pixel aesthetic to it where The headlights are squares.

The, taillights are squares. It's all this, like, little pixel design things going out throughout the whole. And in fact, Doug Demiro did a really great video on it just recently. So, if you're a Doug fan, check that out. Either way, it's very cool. And, Wes, this is actually one of the coolest features about it. It charges, like, 80% in 18 minutes if you have an appropriate charger for it, like an appropriate amount of voltage going in. Really? So Which what kind of like a 240, or does it have to be even more than that? I think it's more than 240. Oh, yeah. So it's like That they're fast chargers or whatever, and and, obviously, the car will have, like, a thing to point you to them in them. But, man, the the tech we talked a little bit about touch screens and, Car tech in one of our episodes.

And this is easily one of the best touchscreen infotainment systems that I've used. It's buttery smooth. It feels modern. It has great, graphics, great design. I should even, like, do some screenshots of this thing because I'm just I'm I'm shocked all the way around. This is my 1st Korean vehicle. It's my 1st Hyundai, and I I'm just duper duper impressed with it so far. So, rid. Yeah. It it feels great to drive. It feels great to be in. And like I said, I just want to hang out in the car. Isn't that cool? Man, that looks cool. I've I've actually never driven in an EV before. I've

for my Oh. Forever, I've wanted I've wanted to buy 1. And our our last car When we bought our BMW, I was like, this is the last gas car. And then, of course, we bought a van a couple months ago. And, I'm I'm really hold I'm really hoping they take that, The skateboard, you said? And they just, like, build a van with, like, an all wheel drive EV van.

I'll take my money. I'm ready for it. The Ioniq seven, which is like a 3 row SUV, is is prep to come out next year. They they have they're, like, teasing it right now. And I was like, should I wait for that? China, wait for that. Either way, this is, like, I think for me, the ideal the ideal car I've always been a car person, so this is my 1st crossover, SUV type of car.

But, yeah, there's something really special about doors on the on the Ionic 7. Oh,

rid. One one, like, really neat thing is that, like, the 1 pedal driving stuff. I know Tesla owners, you know, have this too. Any any of these EVs Cars have, like, a 1 pedal drive where if you take your foot off the gas, it breaks and then regens the battery.

Yes.

I've, like, already I was thinking, like, that would rid Thinking like that would be take some time to get used to, but that's, like, already the only way I'm driving it is the 1 pedal drive mode. Oh, yeah. Yeah.

I can imagine that being that being awesome. I often think about that, like, especially, like, we've got lots of hills, and we go up and down the mountain here. And, rid. I I like, sometimes you're riding your brakes down the mountain, like, oh, come on. Like, this is costing me, like like, $3 and brake dust on the way down. I had to replace my brakes, like, twice since I've been here in Colorado from that because you're you're driving into the mountains. Yeah. Yeah. It was like Oh, man. Yeah. Like, what is going on with my brakes? Oh, yeah. I you know, year. And I drive a manual, so I can even downshift pretty easily. Oh, yeah. Yeah. But you another neat thing is that, like, There's no transmission. Right? So, like, you don't have, like, this big center or bulge in the car. Right? So In the front seat, in between, like, your feet in the passenger's feet, there's no center console.

So it's just Like, wide open space underneath the steering wheel.

Yeah. It's like stuff like that just makes the car feel rid Bigger on the inside. So yeah. Shout out to the Ioniq five. I've been waiting 6 months, 7 months for this thing. I've been on a waitlist forever and ever. So,

rid. Really stoked to have it. That's I didn't realize you're getting it so soon. Like, I know you waited a long time for it, but seems like anytime You hear people have an electric car. They get it, like, 6 years later, and you

you just popped up. I was like, oh, that's sick. Yeah. Well, I know the wait list for these things is really long. I just Bothered a lot of people, like, going to the dealerships. Bother, bother, bother. And they actually could have gotten it sooner, but they they had, like, major markups on a lot And I was like, I'm not paying a markup. No no chance of paying a markup. So I'll sit and wait. I I can wait a couple months for 1 without a markup. So So are you just going to charge it on a regular 120 or are you going to get like a I'm going to get charged.

Yeah. Okay. Yeah.

I'll get that eventually because there's, like, a big rebate for it where it ends up, like, not costing you anything crazy. So I will get that.

Friends are laughing at us with our 120 right now. Yeah. Yeah. I know. Right. I plugged it into the 120, and it's like, it will be done charging in rid. 2 days. It's like, oh, okay.

That's great. Yep. Oh, man. Cool. Well, I'm excited to hear about your,

We will have an update in a month or 2. I I would love to talk about the tech in it. There's a lot of real you know, like, being able to set the climate before you get in. A lot of, like, actually interesting stuff with the app and all that. A lot of a lot of web related stuff. You know what's going to be good? Is that the instant heat?

Rid. Yeah. The heat always takes from the battery, but, like, man, Canada in Canada, it gets so cold and, like, we drive 15 minutes to the kids school and, like, 13 minutes in, the heat is finally warm enough. So you just it takes forever to heat a car up. It'll be great to Yeah. Like, I'll be able to sit in my house and tell, hey, car. Turn turn the heat up to, like, a 1000000000 degrees. So when I get in, I start sweating.

Rid. Little sauna. That's great. Yeah. Cool. Well, congrats. That's I'm I'm really excited for you. That seems like such a cool car. Thank you. Alright. Let's get into it. Yeah. Let's get into the ready. Question here from Andy. Hey, Scott and Wes. My team is developing a component library for a large public university.

Rid. While we expect to go headless sometime in the future, right now we're using eventual server side rendered templates from CMS Drupal.

Rid the components we're replacing were written with old jQuery plug ins, and we want a light modern approach to sprinkle in DOM interactivity and don't necessarily need something as heavy as React. So this is pretty common. I got a website server rendered.

Most of the website is rid text. But in some cases, we need something as simple as tabs or a little component for booking something rid. Or you wanna be able to pop a map in there.

We've looked at Alpine JS and lit web components as rid whatever we select needs to be approachable for old school jQuery folks, external agency vendors, and modern devs that want to work with new contemporary tools.

What would you recommend? I think this is a really good question as you see us a lot. Is that like, okay, we're building this huge like a university website has probably Hundreds of people touching the code base and you need something that literally everybody can approach. It's not too difficult, doesn't have huge build step.

And then you also need something that works with your existing huge website. It probably has thousands and thousands of pages, right? And I think honestly, I think probably Alpine is your best bet right now because like rid. I think like maybe you could look at web components and whatnot, but from an approachability standpoint, from very simple but gets It all done. Alpine JS is the best. So if you are unfamiliar with Alpine, the idea is that rid. You just write your server rendered HTML in PHP or your templating language or whatever, And then you just template out your actual application in your HTML. So you have like x dash rid. And you can loop over items. And you say when this thing is x dash click. So when this thing is clicked, then go ahead and do this. And It's great because you can get a large portion of your interaction done simply just by adding attributes to existing HTMLs on there. And there's not necessarily you don't need Build step for that.

It's pretty pretty sweet. So I think that would probably be the the best approach for something like this.

Yeah. I don't know. I I it's just do you have web components? Right? This might be a great opportunity to just, like, spend some serious time just with straight up vanilla web components.

Sprinkle it in.

And then then you I mean, you do have that option for lit. Right? If you if you want it to be super approachable rather than maybe, the way it is with web components where it's like, you you have to write the listeners for the attribute changes and all that stuff, which is which is just kind of a bummer.

So, you know, maybe maybe that is, like, the the direction you go because you can sprinkle any of these frameworks in. But it's It as somebody who who would spend some time doing this kind of stuff in Drupal where you're like, alright. Now I wanna add in a UI framework in here. It does Feel like it's a giant PIA sometimes. So, I don't know. Yeah.

I I would maybe use this as an opportunity to really, like, dive into the platform.

And If it was me, I might just use web components straight up to avoid having to deal with tooling and in in any of that stuff, but rid. Lit might be a great option as well or or any of these web component libraries, I I think, would be interesting. Yeah. Yeah. I agree. Cool.

Alright. Next one here is from Mohammed.

Mohammed says, our React dumb presentational components Only possible as leaf components in an application.

Okay.

So, what's the first, let's let's Get some definitions here. What is a Yeah. A dumb presentational component? A dumb presentational component is a component, that I wouldn't I wouldn't personally call them a dumb Component.

That sounds like a little insensitive. I would just call them a presentational component, right, or or like a static component or something. Either way, these components are ones that are are are basically the a noninteractive thing that doesn't have Any children to it necessarily? Or maybe maybe that's not part of the definition because that's kind of what he's asking here. But it's just it's basically a component that doesn't do anything other than displays

stuff. It's just a content component. I like to call it. Yeah. Content component. HTML. It renders out Doesn't have any clicks or listeners or fetching data or anything like that. Yeah. And so a leaf component

is essentially you could think of your component tree as a tree. Right? This component calls this component calls this component. In in a real tree, The leaf is the end of the line. Right? That's the end of the stuff. So, what he's saying is is it only really useful or or possible to have A a presentational component as the last line in the tree as in the that does not call anything. And I don't I don't necessarily think so. I have, situations where we have, like, our our about rid page. Right? Our about page, I would describe as a presentational component.