386

September 8th, 2021 × #Sass#Web Development#WordPress#React#JavaScript

Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!

In this potluck episode, Scott and Wes bid farewell to the Syntax studio while discussing Sass, Houdini, building without JS, decentralized data with Solid, bartering skills, DRM, Linux laptops, using React and GraphQL with Svelte, MongoDB with Prisma, and predictions for Webpack's future.

or
Topic 0 00:00

Transcript

Wes Bos

Welcome to Syntax, the podcast with the tastiest potluck Ever. Today, we've got another potluck for you. This is one of our last episodes that Scott and I are prerecording for the summer, and then we're gonna Go drink margaritas by the beach for the rest of the summer and just relax a little bit. Today, we've got 3 awesome sponsors. We got Linode, cloud computing, and rid Cloud hosting, Sentry, error exception, and performance monitoring. And a brand new sponsor today, Auth0, which I have to Tell myself the 6th. I always always say auth o for some reason. But Me too. Yeah. Same. Clearly a 0.

Wes Bos

Very clearly a 0. Because of OAuth. Yeah. Re Otho just sounds so cool. Anyways Yeah. Auth0 handles authentication and authorization in your application, so you don't have to. Talk about all of those sponsors partway through the How are you doing today, mister Talinski?

Scott Tolinski

Hey. I'm doing good. I actually just got back from the beach, which was great. We took a little mini vacation, almost like a 2nd honeymoon type of deal. The 1st time being away from the kids, and, we were, like, gone for for, like, yeah, gone for, like, 5 days. We didn't know how the kids would do. Right? We've never left them with the grandparents before. Yeah. And, you know, they know their grandparents, and they love their grandparents, but still, we never left them for an extended period of time or even, like, a day.

Scott Tolinski

And, it was, like, the 3rd day of our vacation, and Courtney's dad was like, Kurt, I don't know how to tell you this, But the kids, they haven't really cared that you left, and we were just like, oh, man.

Scott Tolinski

That's not what we were expecting at all, but, rid feeling really good about that. At least, you know, you I was so worried about the kids. So, like, to be able to hear that they were very comfortable with grandma and grandpa, you know, hanging for the week and whatever, That made me feel a lot more relaxed on the vacay. So, yeah, I'm ready to go. And next thing is up, a big move. We're moving to the level up lodge and new house, new Studio. So a lot of changes here. By the time you you check back in with Syntax, here, we'll be on a this will be the last episode ever recorded in my current house, so feels very weird. Oh, it's a little sad. Yeah.

Wes Bos

Wow. Yeah. I love this office. Yeah. Yeah. It was a good one. A lot of,

Scott Tolinski

A lot of code was written, and a lot of words were spoken in that little blue office. Little is the right word. Wicked. Yeah. New one's gonna be great. Gonna get new styles, new furniture, new all that stuff. Cool. So let's get into the potluck here. We have a bunch of great questions. I was, like, having a hard time even stopping with the questions.

Scott Tolinski

So the first question is from Marciano s r. What Are the use cases for Sass and SCSS in 2021, would you choose it over CSS or something else in a new project? So I use Sass in our level of tutorial site on SvelteKit even though we just started that project, and that was a conscious choice because, Really, Sass is probably the lowest effort to get things like nesting ready to go. Now there's a lot of different angles you could take to this. You could say PostCSS would can just do it all. Between postCSS and just regular CSS in 2021, rid You're probably covered. And I I tried to get on board with the the the native nesting syntax. Wes, have you used it at all? Rid. No. I, we did a show on it, but it's not as nice as just the Sass and SCSS way. Yeah. That was the whole thing is I have the PostCSS native nesting plug in in LevelUp tutorials and Sass because SvelteKit has PostCSS.

Topic 1 02:34

Discussion on pros and cons of using Sass and SCSS in 2021

Scott Tolinski

Rid. But I was having such a hard time converting our style components and Sass code into the native nesting, and it required so much work. I was just like, screw it. I don't wanna do this anymore, and I'm just gonna use SCSS because that's what I already have. Yeah. So for me, that's the use case. You know, if we're talking CSS variables, I'm using CSS variables, 247 for just about everything with the exception of media queries. So this is a small thing. You cannot use CSS variables in media queries, So this is a small use case for Sass variables or SCSS variables. We we have our our breakpoints all done in SCSS variables to make it Easier across the board for us. That way, we we have them definitively typed out rather than having to, use the pixel values and things like that, But there's really not a ton of use cases, especially if you're rocking with post CSS. There's a lot there that you can do to even mimic SCSS.

Wes Bos

Rid. With that said, we still use it just for the ease. Yeah. Sass is just, like, rock solid. You know? Like, it's Hell, yeah. It's not going anywhere. It's everybody knows it. So If you need something, like, it's I think it's still a good use case, and I think just don't go too heavy on like, I I know a lot of people went super heavy on Compass when it was built in Ruby and all the custom SaaS stuff, and I find, like, that kind of stuff is hard to refactor out of. Rid. But if you're just using for nesting and automatic BEM generation, that was another really handy use case for for Sass.

Wes Bos

That kind of stuff is is pretty good. I I wouldn't say Sass is outdated or anything right now. It's just kind of it's like rid Just like the the WordPress, I would say, and I say that in a nice way, meaning that, like, it's it's old faithful. It's there. A lot of people know it, and it's well maintained, things like that. Yeah. It's a trusty workhorse.

Wes Bos

Next question we have here is from k oger.

Wes Bos

What happened to CSS Houdini? It's true. We've been it feels like we've been talking about read. Houdini on the podcast for a couple years now. If you're not familiar, Houdini is a web API that is going to allow you rid to sort of write your own CSS, meaning that you get access you can write CSS, like, display Scott, Or you could pass a variable, number of Scotts, 6, in your CSS, and then you, write some it'll like Canvas APIs.

Topic 2 05:29

Explanation of status of CSS Houdini browser support and spec progress

Wes Bos

They're called the Worklets, and you get access to the Paint API and the Layout API and Animation API and a couple other, rid I think fonts and a couple other pieces of of CSS, and you'd be able to run JavaScript to generate and paint rid things in CSS. So it's it's pretty exciting because once that's shipped, then we'll be able to we'll start seeing, like, people write their own CSS. You know? They they can ship it. So rid Where is it at? Scott found this really nice website. Is Houdini Ready Yet .com? There is a lot of work to do just yet. I think that the reason behind that is because in order for Houdini to be shipped, there's a lot of, like, sort of under rid Lower level stuff that needed to change in the browsers in order to implement it, but Chrome, Edge, Opera, Samsung has a lot of it shipped.

Wes Bos

Firefox, a lot of it is under consideration.

Wes Bos

Yeah. That's rough to see. Yeah. There's nothing in in Firefox That has been done yet. So, like, not like, no code written. Safari is partial support and in development, which is good.

Wes Bos

And then the spec.

Wes Bos

The spec is not even done yet. So, like, I don't know. What do you think, Scott? When is it coming?

Scott Tolinski

Oh, I don't know. I wouldn't hold your breath. I was really rid Hoping it was gonna be sooner. Yeah. And it's great that you can play around with it in Chrome, but knowing that it's it's not an even, like, in development in Firefox yet is pretty disheartening. And then when I saw that, I was like, oh, no. This is not but if this And then when I saw that, I was like, oh, no. This is not but if the spec isn't done, I can see why, but still, Yeah. I would really love it if, if if if it came here because this is one of those things that I personally like.

Scott Tolinski

Right up my alley in terms of something that I would love to be able to do. Love to write my own custom CSS like that, but I guess we're we're just gonna be waiting. And if you want rid. To give this a try, you know, I guess, just do it under the understanding that it's not going to be production ready anytime soon, considering Firefox is Under consideration. So is Houdini ready yet is a great place to at least keep an eye on it. I would love an update maybe from the Firefox team has to look what the plan is there. Like, where where are they actually considering it, or is that, you know, just like, is there any movement on it, or is it just, rid

Wes Bos

kind of hanging out in limbo. Yeah. I'm really glad to see that Safari is ahead of Firefox there because, Usually, that's the case. It's like, alright. We're done this thing, and Safari's like, wait. What? What? Wait. What thing? What what were you guys talking about? Yeah.

Scott Tolinski

I bet Firefox will come out swinging with it at some point. Like, I I can't imagine them being like, you know what? We're not gonna do this thing that's part of the spec. You know? That's That's Firefox core. Yeah. I'm sure there's a very valid reason, but that then I still want it. I agree. So we'll we'll keep you updated on it. Next question is from Serenity Now. With all of this JS being transferred, have you ever tried to challenge yourself and build a project that doesn't allow any JavaScript rid. In the front end alone, I e, just HTML and CSS. I find it funny how I can pretty much use Amazon.com with rid Yes. Disabled. I literally cannot view the Angular docs if I disable it. Love the show. Thank you for answering. Yeah. You know what? I I've written many, many sites without JavaScript. It was when I was a junior developer, most of the sites I didn't have or wrote didn't use JavaScript at all Unless it was like a carousel, but, like, even then, you're gonna need, like, a JavaScript for some interactive things, whether that is like I know You can do this all with post requests or whatever, but it's a much better experience for your customer to use a little bit of JavaScript in that situation.

Topic 3 09:37

Thoughts on building sites without JS and benefits of progressive enhancement

Scott Tolinski

Yeah. You can have it all working, but I still think no matter what, at the end of the day, you're probably going to want some JavaScript on your on your site. Now there are tools that are coming out that are gonna be making a lot of this stuff easier to ship less JavaScript. I find myself shipping way less JavaScript with SvelteKit, But Aster.build is a new tool that is one of the things that is going to allow you to ship much less front end JavaScript code because it's sure you're writing JavaScript in the back end, but shipping less to the front end is always good. And I think these are the tools that, you know, you'll probably gravitate in modern development more so than just handwriting it all in HTML and CSS, because the way I see and shipping JavaScript should be a progressive enhancement. Right? Sure. The site should and and could be able to work without JavaScript on the front end, but Many times, the experience is much better if you're shipping that JavaScript, and maybe it's being server side rendered and then hydrated. In that way, The load times are faster, things like that. But in my mind, the tools are not going to be to write it all in just

Wes Bos

HTML and CSS and not use JavaScript rid it all, but more or less, you're taking a a tool like Gatsby or something that allows you to ship a static site HTML and then have it hydrated with JavaScript if needed Or even, like, these tools like Astro that are are shipping way more without JavaScript. Yeah. Yeah. I agree as well. Like, it's it I'm not, like, a purist where rid Say no JavaScript at all. There's certainly those types of people, but your your site should work without JavaScript. At least load so people can read the content on it and be able to click links and and whatnot. But past that, sometimes JavaScript makes a much nicer experience. Rid Not being able to view the Angular docs if you disable JavaScript seems a bit silly because they're probably just templating it all out on the, On the client side, instead of either prerendering it or server rendering it, so that that's probably why that should probably work, Especially for load times or whatever. If you're on a plane, you need that stuff to work. Word.

Wes Bos

Next question we have here is from Noah.

Topic 4 11:44

Overview of Tim Berners-Lee's Solid project for decentralized data ownership

Wes Bos

As we know, Tim Berners Lee made the web. Apparently, after seeing everyone's data get harvested by tech companies, he decided to create a project called rid [email protected].

Wes Bos

That allows people to own their data to control all permissions over it. So if a user logs into your rid. App with Solid, rather than storing the info on their server, you store it in their Solid pod. Do you think you could rid. This could save web developers' conscience and disk space in the cloud. I like this idea because as a web developer, I don't wanna be holding more data than I rid have to. Stripe does this already with credit cards where I don't hold any information about their credit card and stuff like that. That All gets held in Stripe. And if I need to be able to access it, you can just ping Stripe with the, a token, And that's great because, like, if someone can do the hard part of that and use the web developer and just use an API to access that, rid. If it's easy to use and it's easy to integrate, and it's not a pain in the butt because if that's the case, then then people say, alright. Well, screw this. We tried it, but we're gonna rid We're gonna do it ourselves because it was not easy. So I had not heard of this before. I am pretty excited about it. Do you think we can get Tim Berners Lee on the podcast? How cool would that be?

Scott Tolinski

Yeah. Right? That would be great. Yeah. Yeah. I I agree. I think anything that involves me not having to store more information is for the best, because I don't trust myself, but, you know, one loss of vector or anything is good. I had a a client one time.

Scott Tolinski

This is way, way back, And they were a client. I was moving them to a Magento site. And, they they were like, okay. This is cool, but how do I access the customer's credit card number. This is like, what do you mean? How do you access the customer's credit card number? They're like, well, typically, we we would then write down their credit card number on this pad, and then we would type rid into our thing here, and then that was chart. I'm like, oh, no. No. No. No. No. No. I you don't want you you should not have their credit card number. Right? That is for someone else rid to not even have, but to keep an authorization, token for it. Like, you should have the customer ID, and that's that's pretty much it. If you want to charge them, it should be through the app or whatever, but, oh, boy. Yeah. I'm surprised, at least in Canada, how often that still happens. Oh, yeah. Like, We got no new doors for our house, or you need to pay a bill

Wes Bos

for the propane or anything like that. And all the time, I'm literally just standing there telling them every number on the card as well as my home address, and, like, I'm like, you could literally just go type this into the, rid any website and go buy all you want. Like, how is this still how it works? It seems so silly.

Scott Tolinski

I love, that Square became a thing and, like, going to service providers or, like, you know, the AC guy comes out, fixes it. You just tap your phone on his little square thing attached rid to his phone. Bingo bango. That's it. Oh, I've never had that. Oh, yeah. I've had that a few times, and it's just every single time you're very thankful for it. You're not cutting out a check. You're not having to, you know, do any of that stuff. So Yeah. Yeah. I'm here for those modern tools.

Scott Tolinski

One of those modern tools rid is going to be Sentry, which is a this is this is I don't know if that that ad transition worked, but Sentry is a error exception handling tool, And it's exceedingly modern, and it will tell you if your website is slow. And it's a little callback to that, that question about all that JavaScript loading. You got too much JavaScript loading. This will tell you if this website is slow because you got too much JavaScript, and it does that through this really great performance tracking metrics table that gives you a user misery score, tells you which rid Sites or which pages on your site and your application are being hit, which are the slowest, and which of them have the most opportunity for you to tweak that and figure out what you can do to Stop making your website so slow. So if you want to add that in addition to all of the error and exception handling tools that Sentry is known for, head on over to century dot rid I owe use the coupon code tasty treat, all lowercase, all one word, and you'll get 2 months for free. Thank you so much for Century for sponsoring.

Scott Tolinski

Alright. Next question here is from Aaron from Fort Collins, Colorado. Hey.

Scott Tolinski

Fort Collins is pretty dope, by the way, Wes. They have a nice Little beer scene, it's like a small college town. I think it's Colorado State University is over there. Oh. Pretty cute little city, in Colorado there. If you wanna do a brewery tour, that's one of the places to go. Rid Odell, shout out. I am about to start my 1st developer job. What practices can I start to really get off rid on the right foot and lay down a foundation for a successful career? I'd love an entire episode rid that I could reference back to my 1st year. So we did just do kind of an episode about stuff for beginners, and I think that one will probably fit a lot of the things that you're looking for here. But let's say you're starting your 1st developer job. That means you got the job. That means you at least, are not a brand new developer here. What practices can I start to off on the right foot and lay down a foundation? You know, the one of the single best things you can do besides being a sponge for The things that your coworkers are talking about is just to be helpful at work. Somebody needs something, you know, step up and do it. Be the person that everybody's like, oh, Hey. I really like Aaron. He, he did this for me. He did x for me. He, helped me out here, did that. You know, I was, you know, just read. Doing kind things for people and being the type of coworker that you'd like other people to say, you know, that that that's a really good person right there. He's doing some good work. I'm really excited He's on this team. And and don't try to do too much arguing or keep in mind, this is, like, things that I've experienced before. Somebody new on the team. They're a junior developer. They wanna start critiquing things or or calling the shots or something like that. Not your role. You're there to rid to show up to be a sponge, to listen, to do what they ask of you, and be a good worker bee for a little bit. You know? And that doesn't mean You can't, like, assert some of your your stuff later on if you have things, but, like, man, there's nothing worse than having a project that's, like, 50% of the way through. Some new guy comes along, and they're just like, could be really great as x, y, and z technology in this thing. We should really add that. Like, no. We are beyond this point. It is not your your your work. Let's Let's keep going with how these things are, and, maybe later,

Wes Bos

you can share us some of your your brilliant new things as a new developer. Rid Yeah. I I think Scott said it really well. Just be hungry to learn. Ask lots of questions. Respect the older developers that have been there for a little longer. Rid Like, no one likes that that new dev that comes in and tries to change everything. So just having an open mind and learning from what you have, I think, is the best way you can Start yourself up for a successful career. Maybe we'll do we just did an entire episode on advice for new developers, So you can also go back to that one as well. There's lots of really good info there. You should also think about, like you know, a lot of the times, you won't have

Scott Tolinski

Context for conversations that have happened before you're there or whatever. So many times people come in if they're they are suggesting new things or whatever. It might not just be because rid. The previous people haven't thought about them. It might be because you're missing some key context to why, you know, why why they made the choices they did about a specific Roger, either way, it all comes back to, don't be an old all. Just, come in. Be hungry to learn. Next question from Mark Froelich. Re You guys are awesome statement here. Thank you, Mark Froelich.

Topic 5 19:03

Tips for bartering web dev skills and whether it's better than using money

Wes Bos

Have you ever used your dev schools to trade for other goods or services? For instance, Helping out an auto mechanic with their website in exchange for a brake service on your car or creating a site for a barbershop for free haircuts rid for a year. If so, how do you go about starting that conversation? So this is kinda interesting one. Do you barter your skills? And I always think this bartering is rid It's a little bit funny because I was I used to be part of these, BUDS groups on Facebook

Scott Tolinski

where you could only trade stuff. Is that like a marijuana group, BUDS?

Wes Bos

No. It's it does sound like that. No. But it's, basically, someone would be like, I have this chair or this hoodie or rid for, I don't know, a loaf of bread or something like that. And what would always end up happening over the the 1 year that I was in it, rid Everything's standardized on bottles of wine or bottles of beer, and I was just sitting there laughing because it's mostly full of hippies who, like, love this idea of trading.

Wes Bos

I was like, you you guys are just standardizing on a currency of wine.

Wes Bos

Like, the the wine is, like, $12 a bottle here, And you people would say, we'll trade for 4 bottles of wine. You know? Like, they're just like I'm like, that's what money is. We've standardized on this. This that's what money is.

Scott Tolinski

Anyway you give me money, and I go buy the wine over Exactly.

Wes Bos

Exactly. And then, like, you can switch exact models I want. Exactly. Rid Like, what are the chances that somebody has exactly what you're looking for? We've already solved this problem in society. Anyways, I think that bartering can be A little bit frustrating, versus the money, but I have done it. Our backyard, we got this really nice, slate patio installed, And I traded it. I think I did a a $4,000 website, and they did, like, a $13,000 And what we did is we just we both quoted what our things would be, and then we just rid Took that off. So I did the website, and they took $4 off the the final bill. And that was nice and clean-cut Because there was no, like, oh, you did this for me, and and, like, what happens if 1 person doesn't deliver? Do you go in there? Like, how do you get your haircuts if the thing isn't done, so I would say stay away from it, but there certainly is, like, little good use cases for that. I've even I think the smaller stuff is probably better than a a massive website project, but, like, I remember once when Craigslist was still a thing in Canada, Like, people would always, like, look up your email when or, like, I had westboss.com, and somebody was selling, like, a fireplace mantle for $100.

Wes Bos

They said, hey. I'll give this to you for free if you can just fix this thing on my website, and it was like a tiny little 20 minute fix. I was like, absolutely. Let's do it. So I think small stuff can be good, but probably as it gets bigger, money is a nice common denominator.

Scott Tolinski

Yeah. Totally. How many how many bottles of wine would this take For for me to fix this bug for you. We get a 5 bottles of wine. I'll fix this bug. That'd be great.

Scott Tolinski

Next question is from Jiffy Park. Rid Jiffy Park says, what is your take on DRM? DRM stands for oh, what does that stand for, Wes? It stands for Digital rights management. Management. Okay. There we go. You implemented or integrated something like why divine in any of your platform projects? How does one go about a d l re seeing such a thing, I can't seem to find any good docs on that. I personally can relate rid As to why it's there, but end up hating it anyways. I recently found out that Prime Video only allows SD content analytics it has something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription.

Topic 6 22:14

Perspectives on digital rights management (DRM) and effects on users

Scott Tolinski

Thank you. Oh, and by the way, All of my names are related to Seinfeld in some way. Stella is a reference to when Elaine gets high on pain medication. Oh. Stella.

Scott Tolinski

Oh, yeah. Is Jiffy Park where they parked where they couldn't find their car? I don't remember. Yeah. I think so. That was, like, awesome. Okay. Well, I love I love I love a good Seinfeld episode. So Widevine, I've never heard of this Widevine. I typed it into Google. It says the leading content protection for media enables secure content rid utilizing a free standard based solutions for OTT and CAS services. I don't know what those are, but it sounds interesting.

Scott Tolinski

Used by Disney, Warner Brothers, Netflix, Hulu, a lot of people.

Scott Tolinski

So the nature of DRM an interesting conversation, and you often have people who are very polarized on this topic. They're saying, you know, DRM is the devil. It's not digital rights management. I was trying to come up with another spelling of the acronym, devil rendering my stuff. Rid So the DRM situation is really pretty crystal clear in my eyes. If you have major studios who own this IP, re Major content providers, they are not going to put their content somewhere where you can just take it. They will not do that. It costs too much money for them to produce this stuff. So digital rights management will always be here.

Scott Tolinski

It's not something that is ever going to, be burnt at the stake, And people who are you know, want want all content and media to be free, well, I understand your position. It's it's not realistic. It's never going to happen. Yeah. So we might as well just figure out how to live with DRM. Now that thing about Linux, that was interesting. You know, I've had a lot of little experiences Linux like that where things just weren't the same as they were on Mac and PC, which is one of the reasons why I don't write it as my full time. And that stinks that the this Widevine doesn't work on Linux given that however many of these services use it. It looks like just about everybody.

Scott Tolinski

What what are my thoughts on it? I think it's a, required evil, so to say, but, you know, evil in the sense that It sucks when they'll only serve out SD video because of something in Linux that you have no control over, and that's really what it comes down to at the end of the day. Digital right? The DRM should not be invasive. I understand its need to exist, but when people are implementing this kind of stuff, They do have to look at it and say, is this ruining my product? And if it is ruining my product and its product experience, maybe we should look at another way of doing it. Know video games is like a hot topic because there's some video games that need to always connect to the Internet, and I think that's a terrible terrible thing Yeah. Because I don't want, You know, my non Wi Fi connected game to require me to connect to the Internet so I can I can't play it on the airplane or something, you know, that that stinks? But at the same regard, you gotta have something. You can't make your product worse because of DRM, and that is often the case. Like,

Wes Bos

I'll give you an example. It's the Paw Patrol on Netflix when we go to rid. We have it on Canadian Netflix, and then when you come to our cottage, we have American Internet because of some ways that I get Internet, and it's, like, gone.

Topic 7 25:50

Framework laptop - impressions of Linux laptop focused on repairability

Wes Bos

And then our kids are like like, where is it? And I'm like, oh. Like, come on. You know? Like, you're getting in in and that's more, I guess, like, That's not really DRM. That's just more content licensing and things like that. But I'm just like, oh, now I that now I have to download it for my kids because I'm paying my money for this, but Because of whatever is going on or I can't, another annoying one is on the Netflix app. The videos expire.

Wes Bos

So what happens is that we'll download all these these, videos onto the iPad from Netflix, and we'll go on a trip. And then 2 weeks later, we'll go on another trip, and, well, the kids will open up the iPad in the car, and it'll say these things are expired.

Wes Bos

I'm like, come on. Like, now the kids can't watch a show in the car? You know? That sort of DRM is is frustrating to me rid Because I'm just trying to do the right thing and and pay the money for the for the service and whatnot, and it gets in the way and makes the product worse. Totally. I had the same situation

Scott Tolinski

trying to I YouTube TV has, like, the ability to download content, right, to watch offline.

Scott Tolinski

Yeah. I download the content to watch offline on my airplane, and I got on the airplane. And I opened up the YouTube app, and it's like, we noticed you're not in Denver, Colorado anymore. You can't open this app.

Scott Tolinski

Oh, yes. Download the content. I had it all downloaded. What are you talking about? We don't support YouTube TV in the country that you're in, I download the content. Let me access it, man. Just let me get in there. I'm not trying to watch live TV, so that was that was super obnoxious. But, yeah, that's my that's my take on DRM. Pretty long winded. Wes, do you wanna talk about Auth0? Rid 0. Wes, do you wanna talk about Auth0?

Wes Bos

Yes. I do. They are a brand new sponsor, so shout out to Auth0 for coming on the podcast and sponsoring it. Rid. What they do is they provide the authentication and authorization for your application so you don't have to. So Some of the things that they do is they have log in with your favorite social provider. So if you ever have tried to implement log in with Twitter, Google, Discord, you can tell that's a big Pain in the butt to to do. They do it all for you. You can make a customizable login page with them. They have SDKs rid For all of your favorite frameworks so you're building a Node or Express App, React, Next. Js, and you name it. They've got re Integrations for it. They have next level features, user management, including roles and permissions, multifactor authentication. So we've talked about We've done a a couple podcasts on roles and permissions, and we always end up saying, this is very hard to do. And if you want a nice interface, nice service to manage all of your roles and permissions off 0 to 1, and they also do this rid This is kind of a a new one. I kinda wanna do a podcast on this. Biometrics, being able to use face ID or touch ID or All these different sensors that are on your devices to log in, and you can just integrate that with Auth0. They do all the hard stuff because I have a card to do a show on biometrics because it's in WebKit now, and it is very complicated to to implement yourself. So check it out at a0.t0forward/ syntax. That is Wow. A a Two letter domain name? That's a cool cool domain. Impressive.

Wes Bos

A zero dot t o forward slash syntax Auth0, for sponsoring.

Scott Tolinski

Yeah. Totally. Cool. Well, next question here is from George Hart.

Scott Tolinski

Have you seen the framework laptop? And if so, what are your thoughts on it for web development? I'm a lifelong Mac user, But the idea of a higher repairable laptop running Linux, can't do Windows sounds like an amazing step for For consumers, Wes, have you seen this? Because I only it only recently came across my radar last week, and, it seems like this people are starting to talk about it. No. I'm not. So what's what's the idea behind this? The idea behind it is it's a little bit more of a DIY high end laptop, and it looks a lot like, You know, the MacBook Pro type of thing, but there's there's the idea that everything is replaceable, upgradeable, that type of deal. You have little components you can screw in. And whether or not it is ready. You know, SSD strip, you can you can upgrade it in a more easy, simple way than any other thing. And the top top case just kinda pops off and you can rid. Upgrade it and and change it out yourself.

Topic 8 29:38

Frontity - React framework for WordPress sites

Scott Tolinski

You know what? This thing looks great, but this kind of idea, especially with laptops, is gonna be really hard to I think. I know Yeah. In the past, we we were able to swap out RAM and and stuff like that, but computers have so much more solder to the board now, and and I know that's like an Apple rid problem that they largely created their selves. But you know what? I don't know if I'd trust this thing, especially if it's brand new here. I think there's gonna be a lot of bugs they gotta work out with the system. I wonder how long term this thing will last, and since it is a new company, a new laptop, You just never know. But, also, you know, I I personally ran Linux for a little bit, and if you're coming from Mac, it's not easy to have it be as easy as Mac. Rid. There's still a lot of, like, weird things, especially around graphics.

Scott Tolinski

Just things feel unfinished in a lot of ways. The rid Trackpad support was largely the trackpads all felt weird to me in terms of the the physics of them. Yeah. So there's, like, a lot of little things like that. If you're coming from Mac, It's not going to feel like a Mac. Just be prepared that it's going to feel a little bit less put together, so to say.

Scott Tolinski

So I don't know. This laptop looks looks neat, but I would I would give it some time personally before for diving in on this thing. Yeah. They tried this with a phone where you could, like,

Wes Bos

rid Click on different Yeah. Pieces, and that thing never took off. There there's a reason why these things are soldered together, and maybe it is because Apple wants to You did to pay for everything, but part of it is that if every little wire and piece of silicon that stuff needs to transfer through, that slows it down. Right? So having them soldered together and on the same even on the same chip makes it much faster.

Wes Bos

So that's 1. And the other is, like, I don't want to use Windows.

Wes Bos

And the final thing for me is that, like, I open everything. I I I just opened up 2 of my iPhones and replaced batteries and screens, and rid I will crack anything open and try to fix literally anything I am. That, like, that is my personality, and there's one thing I will not crack open myself, and that is my work laptop. Rid Yeah. My moneymaker, I don't care that I have to go to Apple and talk to the geniuses and and whatnot because rid. My moneymaker needs to work. It needs to be fast as hell, and I don't necessarily care anything else other than that because I I can't be down on that. So, does not appeal to me as a content creator.

Wes Bos

Word. I agree.

Wes Bos

Next question from Tomek rid. Rosalski, hey, guys. I know you both like MongoDB, and so do I. But I sometimes all these queries to databases, Especially aggregations get really messy, aren't they? Prisma now has support for MongoDB. What do you think? Will it make the requesting MongoDB much Easier. Yeah. So I don't necessarily know if this is a issue just with MongoDB, but if you want to make aggregations in MongoDB, so that is, like, rid Select 6,000 people, and for each one, count how many courses they have. And then for each course, sum up how much they have watched rich on each one. That would be extremely slow to query in JavaScript or PHP and then loop over and do all that. So, Often, what you have to do is you have to send that query to MongoDB and do the query in the database, and then it will return to you the modified data. It's way faster, like rid Like, 50, a 100 times faster to do it on the database.

Wes Bos

But writing those aggregations is pretty tricky because it's like It's a language that we're not familiar with, and I have a whole little snippet file of different aggregations that I often have to do. So rid I think the aggregation is like SQL. I don't think it's any better than that. You have all these inner joins and all that. That stuff can get really, really tricky as well.

Wes Bos

Prisma has support for MongoDB, which is really exciting because Prisma is a framework that you can just write read. Prisma queries, and then it will do the translation to MongoDB, which is really exciting.

Wes Bos

Will it make requesting MongoDB much easier? I think so. And then they also do a lot of stuff under the hood that takes care of, like, the n plus one problem. We've talked about that in the past. I don't know If Prisma does any aggregation stuff, though so still, if you're trying to loop over a 100,000 people and count how many courses they have, then you'd probably still will have to go straight to straight to the DB and write your own aggregations.

Scott Tolinski

Yeah. This is definitely one thing that, like, migrations have been kind of a pain. As as our site has grown over the years, I mean, it's 20. We started it in 2015 with the current database we're in, and there has been several times that I'm like, you know what? I really not that I wish I would have done this in something other than Mongo For performance or whatever reasons, but there are times when I think, man, I feel like the database would be better organized right now if it were in post rid Chris from the start. Yeah. Because they force you to do migrations and things like that rather than just kind of willy nilly adding on to the DB. And, you know, I'm I'm not a database this never been you know, if we were listing out my top skills, it's never been at the top of that ladder. Right? So rid I think using something a bit more strict would have saved me from myself earlier on in the development of this thing, and I'd be a lot happier. Rid. We're we're making a lot of those changes now, but I think it it would have made our database a lot more reliable or stronger in terms of knowing that the data that we're asking for is always going to be there in the specific ways.

Scott Tolinski

So I would love any tool that would make that better for MongoDB. We use Mongoose, but But it still doesn't necessarily help with things like migration, so to say. Yeah. It can, you know, make your scheme and things like that. So if this Prisma rid can really at least make the experience of working with Mongo a little bit more solid, then I would do that. Again, I I largely Understand that many of the the reasons why it's our ours has, you know, had some cruft to it added over the years is is a 100% my fault. But in the same regard, Yeah. I I think I would love to have the database layer be a little bit more solid for me, at least nowadays.

Wes Bos

Yeah. Prisma is shaping up To be really, really nice with all the the migrations they have built in, multiple database adapters.

Wes Bos

GraphQL, obviously, is a big one.

Wes Bos

So I would definitely if I was building my thing from scratch, I would probably

Scott Tolinski

go for Prisma. I think so. Rid Keystone itself is now using Prisma as well, which is exciting. I have never ridden in any Prisma, and I I think I would really like it. I used Graph cool back in the day, but I have not used Prisma. Alright. Next question is from Ben Lammers. Ben, he says, hey, guys. Been diving into Svelte a bit And recently and I had a question about using it with GraphQL. As I recall, Scott once deemed React TypeScript GraphQL Cogen as the promised land, And since then, I've tried it out and found it to be awesome. However, I've been debating moving a larger personal project from React to Svelte. I see that there is a plug in for a GraphQL codegen Svelte Apollo. But with my limited knowledge of Svelte, I find it harder to decipher and if the development experience would be as streamlined. I'm wondering If you could shed some light on the developer experience and working the GraphQL and Svelte in TypeScript.

Scott Tolinski

So, Ben, this is what we do. We have our our whole thing being set up through Graph rid Cogent. We do use Apollo, although, you know, only using Apollo because that's what we used before, and I don't want to rewrite that aspect of things. Because I think The way that you'll see GraphQL being done in Svelte might be a little bit different with SvelteKit.

Topic 9 37:37

Using GraphQL with Svelte - codegen, Apollo, SvelteKit integrations

Scott Tolinski

And, personally, we've even moved away from using the Apollo cache, Not necessarily at all, but mostly in just doing the entire caching data layer in Svelte, and it has been very easy. Now in terms of the difference between how streamlined is the code gen experience in React versus Salt, believe it or not, the Salt version of it is actually way easier, way better, especially for SvelteKit for this type of thing because with the React version, what you're doing is it's spitting out a hook typically. And so what you do is, let's say, you have a hook that is update user. So it spits out a u or you have a a GraphQL query that's update user. Rid Spits you out of hook, use update user, then you in your code, you say const update user is equal to use rid. Update user. Right? Just that kind of, like, annoying flow where you're importing a thing and then calling another thing to use a thing. But in Svelte, you you just have a function.

Scott Tolinski

So the import is just update user. You import update user from the generated code, and you just use it like a function.

Scott Tolinski

So it's one less step of having to write the hook that then creates the function for you. Yeah. And to me, it makes me realize just how obnoxious that is in React. You think, oh, that's just like a little thing, and hooks are really nice to be able to share that kind of functionality.

Scott Tolinski

But it's like, wait. Why can't I just import a function? Why can't I just import and use a function? Yeah. Which is what what it does in SvelteKit. So, you know, personally, we've gotten away from the rid. The Apollo cache side of things, which is somebody who recommended that approach to us on the the Svelte Discord, and I've been largely happy with it Because you can update the Svelte stores yourself.

Scott Tolinski

One neat thing too is that with this cogen, with this GraphQL cogen for Svelte, it rid Gives you the Apollo one that is. It gives you an async version of the function if you want it, or it gives you one that returns in observable.

Scott Tolinski

Rid. So that means if you wanted to tap into Svelte's subscription syntax, you can do that and have the data available rid Client side via an observable, or if you wanted it a server side and you want that data server side, you can call it in a load function using the async one, which just returns a promise with the data. And you know what? To be honest, it's been very nice because if we have the data that's coming in from the server side of things, rid We're not needing to worry about loading screens or any of that stuff like we were in the React space where I mean, obviously, we weren't using Next. Js there, but, You know, we're not having to worry about calling a hook, waiting for that data, maybe showing a loading screen for that stuff. We're doing it all server side via the load So this is what we use. The the GraphQL codegen, Svelte, Apollo has been really nice for us. That's amazing that some of these problems just aren't problems, rid. And you don't need solutions for them in Svelte at all. I think the biggest problem for Svelte when we were first getting going was making problems where there were none Because we're so used to the React way of things where you kinda have to, like, do you kinda have to do a roundabout way to do just about everything. Right? And then so we'd say, what's the right way to do this? Oh, the right way to do this is to just update the variable. Oh oh, wait. Why was I trying to make this so hard? You know, there's, like, little things like that where it's almost like You have to simplify your brain a little bit because of how easier some things are. Great answer. Next question we have here is from Chris.

Wes Bos

Rid. Have you do y'all have any thoughts about Frontity for WordPress, frontity.org? I swear I'm not a plant for Frontity, rid But I stumbled upon it and trying to evaluate it versus other solutions like XJS to use a headless WordPress setup. I would love your thoughts if you have anything. So I have not checked this out, but this looks like what a lot of people have been waiting for to do React and WordPress. Because read. The thing about doing a WordPress web's powered website by doing the entire front end in another thing is that you give up so much that WordPress gives you for free. You give up the commenting and all of the templating niceties that they give you with classes and, header and footer. You give that all up, and you have to rebuild all of that from scratch. And you also have to write all of your queries and and things like that. So I think that's been a reason why a lot of people have not gone for headless WordPress is just because it's it's so much more work for, Really, any more benefit? Like, maybe, sometimes, but sometimes not.

Topic 10 41:02

Prisma and whether it makes MongoDB queries easier

Wes Bos

So this looks pretty cool if you check it out at re frontity.org, and it seems to be it uses React, but it's for WordPress. And they're saying, like, Why not use something like Gatsby or Next. Js? And they say, Friendity is a 100% focused on WordPress. It means the number of concepts you need to learn are minimal. Rid Doesn't require complex configuration to get started. The API is what developers use to request content.

Wes Bos

They have their own state manager, their own CSS and JS solution.

Wes Bos

You don't have to learn other things. I think that's what a lot of WordPress people want. It's like, just give me this thing that's wrapped up. I can learn a few new things here or there, but rid I still need, like, a little bit more batteries included than, like, a lower level Gatsby or Next, which is funny to think of them as lower level, but it is when you get into WordPress land. So I think this is pretty cool. It's front of the it's also HTML rendered on the server, Which is pretty exciting as well, so there's not a whole lot that will be done on the client. So I haven't checked it out myself, but it looks Very promising. I would love to hear from anybody who has built a website in it to see what they, they think themselves.

Scott Tolinski

This is the type of thing I would love to see more. I'd I'd never heard of this, and honestly, I have a hard time saying it. Fron tity. Fron tity. I have a hard time saying that word for some reason, but rid That seems neat. I'll check it out. I'll I'll definitely give it a try. And, Chris, I do not believe that you are not a plant. I strongly believe your name is Chris Frentity, and you I've done this to get us to talk about Funnity on the show, but, no, I think it's really neat. Down for more stuff like this. Very neat. Alright. Next question here is from the dom. The dom asks, call me weird. You are weird, the dom, But I kind of like fiddling around with the Webpack configs. I just like that level of control I have. Yeah, sicko.

Topic 11 43:54

Future of Webpack with new faster bundlers like Vite and ESBuild

Scott Tolinski

That being said, is Webpack going to die Now that better tools are out there, or do you think that we might see a Webpack 6 with ES build under the hood that makes it compete with Parcel Vite rid Snowpack in terms of speed. You know what? They're gonna have to do something because the problem with the webpack is that it is everywhere. Everybody everybody bought into the webpack train, rid. But now these new tools are so much faster, like, hundreds of times faster, and and people often talk about benchmarks. But let me tell you, rid I cannot go back to slow tools after using ESBuild, Vite, or any of that stuff. It is that much better. It is one of the single best developer experience changes that I've had In a very long time.

Scott Tolinski

So those things have config files. If you look right in config files, hey. Go to town on the Veeet's config file. Go go to town on it. Or he has built. There's rid. Tons of config there if you want.

Scott Tolinski

If you don't want to, you can also use the tools with list config because it's really nice to not have to worry about that type of config if you don't want to. Rid So if it's a config thing you're worried about control, man, these tools all have lots of control. But if if Webpack was not thinking about the fact that they're, you know, rid Going to be on the slow end of speed of all these new tools, they better start thinking about that because I I don't wanna work on anything with the webpack after working on something with Vite, rid Personally, and that's just my, you know, my personal experience with it. But that said, I was never I never bought into the Webpack train in the 1st place. I mean, it is fantastic, and it great things, but I always had a hard time with the nature of their their config files and sort of the nature of, configuring Webpack, rid. Feeling like you need a degree to do it. Right? It's never been my style of tool. What do you think, Wes? Yeah. I think we'll we'll have to see what Things like Create React App and Next. Js

Wes Bos

and Gatsby, you'll see what they do in terms of, like, using it because I think Webpack might just move towards being more of a under the hood tool, and then you it already is in Gatsby and Next. Js. Right? So, it might just do that. We'll see. I I don't really know. I'm not gonna predict any of these things, but I do know that I'm very happy that we are in a spot now where these rid. There's many options, and lots of them are very fast, and they're all competing with each other. And it's it's a good life now, and it used to be very, very tricky. So rid I'm very happy that we haven't written webpack configs in a while. Yeah. Me too. And no. Thank you. Cool. Well, that is the potluck

Scott Tolinski

in the last episode rid of Syntax in Micro Office of so I'm gonna be so sad. I don't know if you get this, Wes, but I get really sad to leave places like even, like, my apartments. When I leave an apartment and you move all your stuff out and you're just standing in your apartment, being like, oh, the great times I had in this apartment. You know? That that's me. I I get really teared up, so I'm gonna be very sad to leave this office. But looking forward to the future here.

Topic 12 46:16

Farewell to current Syntax studio

Scott Tolinski

So Before we get into sick picks here, we have 1 more sponsor, and that is Linode. Wes, do you wanna talk about Linode?

Wes Bos

I do. I'm gonna start off with saying, Linode's gonna give you $100.

Wes Bos

That's my hook to get you to listen to this ad read. So Linode is a cloud computing Hosting service, they give you you probably know them for hosting a Linux server, but they have so much more than that. They have storage for your images and your Your videos, they have, GPUs you can use. They have bare metal, Kubernetes, dedicated CPU, cloud firewalls, All that good stuff. So you wanna host your next project. That's a very basic using their shared Linux servers. Linode's gonna give you a $100 rid

Scott Tolinski

free credit to try it off on your next project. So check it out. Linode, l I n o d e.comforward/ syntax. Thank you, Linode, re for sponsoring, and thanks for the $100 for everybody who's gonna use it. Yeah. Cool. Well, now is the part of the show where we talk about things that are sick, our sick picks, rid that we find to be sick, and I'm gonna I'm gonna start this up with a little bit of app that you might want, Wes. This is gonna be something that I've been utilizing for a couple weeks now. Read. My laptop, which is a 16 inch MacBook Pro, the throttling on the CPU is so bad that when the temperature gets hot, it it rid It can crap out my audio. It can do all sorts of really bad stuff. Frame rate will just drop. I had to rerecord several of my tutorial videos because the, rid The CPU was being throttled so hard that the recording software wasn't functioning correctly. So I got an app. It's called Hot, h o t, And it tells you exactly how much your CPU is being throttled along with the temperature.

Scott Tolinski

So at any given point, They'll say your CPU is, you know, 170 degrees Fahrenheit right now, and it is running at 86% capacity.

Scott Tolinski

That way you know or I know visually that if it's getting dipping down there that I should be expecting, like, a major slowdown. It also helps me understand a little bit about, like, rid. Maybe, like, if Versus code isn't being as performant or my computer's just feeling sloggy or just not good, I couldn't see it if it is the CPU that is being actually throttled here or if it is that I have too much stuff going on, because that can certainly be a thing. Are you running too many processes, rid. Or are is your computer itself throttling itself? So Hot is the app. I will post a link to, this app in the show notes. It's free. It's free little utility here, so Check it out. I'm going to sick pick the

Wes Bos

silicone mat. This is something that I bought for our dog's bowl. So, we have our dog's rid Water pull on a hardwood floor. Oh, yeah. And every now and then, it spills because you're bending over to give them the water, and it spills over the side. You have to go get rid cloth, and you don't want the hardwood to be ruined.

Wes Bos

So we bought this little silicone mat to go under the bowls, and it's got a little lip on it. It wipes off ready. Easily, and they have a couple different sizes. And I was like, man, this is it's nice and neat. It just sort of stays in the corner under the bowls. And I was thinking, like, oh, what else could use this for? Like, if you were doing even, like, some electronics work, you could put everything on there. It's silicone. So, like or even, like, some Soldering work? So is it, like, anti static there? I don't know if it's anti static, but, like, silicone has a super high melting temp. So I would imagine it would work well for putting a soldering iron down and not having to worry about that. So I'm wondering if I should get one. There probably are I don't probably don't have to buy a dog mat for that to work. There's probably specific ones for soldering, but I was very happy with it. I was like, this is a nice little, thing to save your floor, so check it out. Silicone waterproof pet food and water bowl mat.

Scott Tolinski

Also works for cats. Rid Not a ball bat. More cats. Cool. Well, shameless plugs here. The latest course on level up tutorials, by the time you are listening to this, is my new course on Web components. Now I did a deep dive in web components one zero one, and we talk about writing web components, and and this is straight up read. JavaScript and HTML, in fact, the only thing that we're using from NPM or anything like that is using n p x rid. Serve just to serve up an HTML file. We write all the JavaScript in line in HTML, and we do so for to show you that this is a one zero one foundational web rid Components skills here. If you have no experience here with web components whatsoever, this is the course for you. We'll tell you everything you need to know, and by the end of it, You'll have a couple component a couple of components that are configurable, work really well, and should get you far enough where you can at least start tweaking and writing your own web components.

Scott Tolinski

So if this sounds interesting to you, head on over to level up tutorials.comforward/pro.

Scott Tolinski

Sign up for the year and save 25%, Or sign up for your team and get everybody on board saving 25% there. So check it out level up tutorials.com.

Wes Bos

I'm going to Shamelessly plug all my courses. So I make web development courses to teach you JavaScript, CSS, HTML, Node, you name it. West boss .comforward/courses.

Wes Bos

You can use the coupon code syntax for $10 off.

Wes Bos

You can use it on any of them. There's also a whole bunch rid. Free ones there if you wanna try it out and see if you like the way that I teach. There's a bunch of free ones on there on CSS Grid or Flexbox, or I even have 1 on markdown, so check it out.

Wes Bos

I was gonna say thanks to me for sponsoring, but that is my shameless plug.

Scott Tolinski

I've done that before. Thank you for, Level Up Tutorials for, I guess, sponsoring this this podcast as well. Cool. Well, it's been really great, Wes. It's a great potluck, and we will catch you After our vacay wraps up, and we're gonna be filling the fresh and recharged with a whole bunch of new new stuff here, and maybe Maybe we'll have some new bumpers for the show. I I'm laughing while I'm saying this because I think we've we've claimed that we'll have new bumpers or or new things a few times now, ready. And have comfort done it. So I'm just saying that is because I don't I don't necessarily have any plans to change them, but who knows? Maybe we will. Maybe we won't.

Scott Tolinski

I'll keep you on your toes. Alright. Peace.

Wes Bos

Peace.

Scott Tolinski

Head on over to syntax.fm for a Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

Guest 2

Rid.

Share

Play / pause the audio
Minimize / expand the player
Mute / unmute the audio
Seek backward 30 seconds
Seek forward 30 seconds
Increase playback rate
Decrease playback rate
Show / hide this window