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

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.

Alright. Next one here is from Mohammed.

And

Sprinkle it in.

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

Mohammed says, our React dumb presentational components 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? 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,

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.

situations where we have, that I wouldn't I wouldn't personally call them a dumb Component.

Or

is essentially you could think of your component

Okay.

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 SUV type of car.

what he's saying is is it only really useful or or possible to have A feel rid Bigger on the inside. So yeah. Shout out to the Ioniq five. I've been waiting 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

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 it has this, like,

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,

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

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

a noninteractive

Cool looking. It looks like a hatchback even though it's, like, SUV sized. It's giant.

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, thing that doesn't have Any children to it necessarily? 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

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,

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

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,

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.

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.

And this is easily one of the best pixel aesthetic to it where The headlights are squares.

I'll take my money. I'm ready for it. The Ioniq seven, which is like a 3 row SUV,

Yes.

The skateboard, you said? And they just, like, build a van with, like, an all wheel drive EV van.

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 it's very cool. And, like, our our about rid page. Right? Our about page, I would describe as a presentational component.

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, 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, And the car itself, I mean, it's it's just so 6 months, 7 months for this thing. I've been on a waitlist forever and ever. So,

rid. One one, like, really neat thing is that, like, I don't know. Yeah.

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 PHP or your templating language or whatever, Rid. While we expect to go headless sometime in the future, right now we're using eventual server side rendered templates from CMS Drupal.

like, oh, okay.

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 Yeah. It's like stuff like that just makes the car 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.

a component library for a large public university.

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

Yeah. Okay. Yeah.

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.

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.

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.

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.

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.

Most of the website is rid text. But in some cases, we need

rid. Or you wanna be able to pop a map in there.

the components we're replacing were written with old jQuery plug ins, and we want a light modern approach to sprinkle in because And I think honestly, I think probably Alpine is your best bet right now like rid. I think like maybe you could look at web components and whatnot, but from an approachability

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

DOM interactivity and don't necessarily need something as heavy as React. So this is pretty common. I got a website server rendered.

Rid

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.

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

There's not that many parts.

which is an EV think so. I have, Only possible as leaf components in an application.

Rid. So I got a Hyundai Ioniq 5, touchscreen

the place where you put all your content

when should your kids start coding, how do I handle errors?

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.

and FreshBooks,

rid. Error exception and performance tracking. Sanity, But, yeah, there's something really special about doors on the on the Ionic 7. Oh,

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

rid Which is And then you also need something that works with your existing

Sentry,

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, huge website. It probably has thousands and thousands of pages, right?

And then you just template out your actual application

is the best. So if you are like, it looks matte. And I I saw some other photos

server rendered HTML in

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

rid. You just write your

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.

standpoint, from very simple but gets It all done. Alpine JS 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, Lots of really good stuff. We're excited to get on into it. We're sponsored today by 3 awesome companies, something as simple as tabs or a little component for booking something

This might be a great opportunity to just, like, spend some serious time just with straight up vanilla web components.

unfamiliar with Alpine, the idea is that

Yeah. I don't know. I I it's just do you have web components? Right? Car tech in one of our episodes.

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.

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

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.