Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!

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 Bos. Welcome to Syntax. This is the podcast with the tastiest web development treats out there. Rid Today, we've got a potluck for you where we answer the questions that you submit. Thank you to everyone who submitted a question. If you wanna ask us a question rid Literally about anything web development, life, love, anything, go to syntax.fm.

Rid. Top right hand corner, there's a button that says ask a potluck question.

You type your question in the box, you hit the button, and we will answer it on a future show.

Today, we are sponsored by 3 awesome companies. First 1 is Sanity structure content CMS. Second 1, LogRocket JavaScript session replay, And third one is Linode

cloud computing and Linux servers. We'll talk about all of them partway through the episode. How are you doing today, Scott? Oh, I'm doing super good. It is a product release day for me. I'm releasing a course on SvelteKit. Today is May 30 1st is the day we're recording, but you're listening to this well into the future.

So, back in time. So, you know, product release days are always a little little special for me. There's a a lot rid that goes into it, and, the process is pretty refined. It's fun because I I got to write all these neat little tools like our video rid Loaderflow and stuff like that. Like, I got to spend time on creating these tools, and it always feels nice when you get to use them and everything just ready. Works perfectly, and then you could be like, oh, man. I made this video uploader, you know, product creator tool. Like, Wow. That's pretty cool. Love that

building those kinds of things because Yeah. It's you get to scratch your own itch, and, like rid That's the business part of development that we do. Like, we explain how things work, but we also make the tools to run the business, which is really fun to do. Totally. Yeah. The like, the thumbnails that we have on our level up tutorial site

are all, like, dynamically created. They're not really images. We use, like, SVG for the background, but you can change the background color and you can type. And I have this whole, like, live creator that I made for it where you can type in there and see the card update. You Choose the logo, and it's just like, oh, man. This is so much fun. So sweet. Yeah. So that's how I'm doing. How how are you doing, Wes? You doing good? Doing pretty good. Pretty good. I what is it right now? The end of May. Looking forward to summer.

I am going down the route of installing sprinklers at our cottage right now. Nice. Rid. For the longest time or not longest time, for a year, I had we have this pump that pumps water out of the lake, and I hooked up a sprinkler to it. And it was like it it shot pretty far, but I still had to, like, run around and place it in different areas of the of the lawn rid to make sure it hit all the lawn. And you always had, like, this, like, ugly hose out. And then Mhmm. A couple of people are like, you should just install in ground sprinklers. It's not that hard. And I was Yeah. I wanna do that. So now I'm going down this incredibly deep hole that I didn't think would be as difficult because there's rid Like, fluid dynamics is, like, the the science of how quickly water moves, and I, like, understand way too much About flow and pressure

right now. God. Which is, like, wild because replacing a sprinkler head for me, that's kind of where I'm out or even the line. Right? We had a little break in the line. You had to dig up the trench. You splice a new piece of line in there. I think that's enough for me. Like, I think that's as far as I need Go in that realm.

Oh, man. So, yeah, it's kind of a fun little project right now. Right now, I'm currently Trying to sketch out the, like, the lawn area to figure out where to put the sprinklers now, and it's I'm I'm in deep, so send help.

Speaking of in deep, we, we are selling our house right now, and that is like a a crazy thing too. So, Hopefully, by the time we're listening to this, we're all finished and under contract there. Okay. Let's get into the potluck. Yeah. Yes. Let's do it. We can get out of the stress zone. Okay. The first question here is from Stella.

Stella asks I don't think Stella is their real name. Maybe.

Rid. Hey. Is there a mechanism for exporting React, Vue, Svelte component as a web component? Angular rid Has elements. This is the name of the mechanism they use, and there is Stencil JS, which allows you to create and export a web component from scratch using their API, which kinda it looks like React and Angular. I've actually checked out before. It's kinda interesting. And I just want to save time and reuse my existing components as web components instead of creating the same thing again if there a need to change frameworks for whatever reason. Okay. I understand this. In fact, very recently, as in, like, 2 days ago, I was just asking ready. Around about finding, like, little one off web components. Because I listened to our our episode on HTML again, and I was thinking like, you know what? I would just like to extend with little one off elements here and there. And then when this question was asked, it did get me thinking like, man, I do have a lot of little React components that don't necessarily feel like they need to be React, and it would be nice if I could move them to some kind of web components that you could take them with you. If, For instance, I ever did want to move to Svelte for some reason, which I'm just really trying to put out of my mind right now because I don't need that.

So I did Google around a little bit, and I found this really interesting React to web components package. It looks like it's specifically what this person is trying to do.

It says it directly, and it has a decent amount of downloads.

It has only 8 GitHub issues. It doesn't look like It it was the last updated 5 months ago, so it's certainly, like, not abandoned or anything. I have not used this. I have not tried to use this. I have no idea what the status of this is, But it seems like there is at least some work being done in this realm. I'm interested in this world because it does seem to me that if you something that is a web component. You could take it with you from project to project a little bit more. You would maybe be able to build up a little bit more of a a library of reusable stuff. If you're always working in React, well, you, you know, you're you're hedging that bet to React that you're you're not gonna leave that platform at any point. And I think for most people, they don't need this. They don't need that that capability to switch from one thing to another really quickly.

But I'm interested in your take on this, Wes, specifically around the idea of utilizing web components more in your applications.

Rid. Yes. This is really interesting. I'm just diving into the code for this. I'm like, how does this work? And the, like, the the actual rid. Code base is only a 120 lines of code with comments, and it looks like It just imports the React component and then renders it out to HTML and then sticks it in a web component. So I think you still have to ship React with your Mhmm. I think it just it just, like, renders out a web component, passes the props, and then renders out a React component inside rid side of that. But it wouldn't make them dynamic at all. Yeah. It's not like it's not like making the equivalent.

You still are shipping React with your project, which, rid I don't know. It might not be the end of the world. Like, we certainly have lots of websites where you ship React and jQuery, so rid. It depends on on on the size and whatnot. I don't know. I'm pretty interested. I I think, like, that is going to be a really Neat thing when we can just write web components, and and maybe we're there already. I just don't understand why it's not more popular rid To like, where's the web kit web kit? Where's the web kit web components kit? Like, SvelteKit, like, we did we talked about in one of the last episodes. Rid Where's that for for web components? Right? Like, why is it why is it so popular? Yeah. And I'm I'm saying this not because, like, I'm like, oh, the React is better. It's just because I haven't rid Haven't used web components all that much, and I just don't understand if they are this rid Amazing thing that we've been waiting for, why are they not more popular?

Yeah. And I wonder, you know, where Stencil fits into that. It's something I've been looking at for a little while.

But again, yeah. Where where is that? And you know what? When web components were first served teased, it was sort of like, oh, this is the future. Right? I mean, back before React even existed, I was goofing around with Polymer and thinking like, oh, this is super cool. But then React comes out, and React is, by all accounts, better doing web components with their I don't wanna step on any of other people. The API is better. You can do a little bit more with it. There's opinions on both sides of that fence. But, you know, I think that's really why is that people have found that to be a little bit more capable out of the box. And, there wasn't that library whether it was Polymer trying to do that, That necessarily hasn't taken off or lit HTML or Stencil JS, none of these have really taken the reins of that, but it seems like that is a, You know, an opening in, you know, in the world here for a platform to really take take hold of the web components world. I think

rid Lit HTML just had a big release a couple weeks ago, probably couple months ago when you're listening to this. So go to lit.dev, and this seems to be rid. The answer. So, like, where's the react of web components? Because they have custom elements, scope styles, rid Reactive properties, which is, like, you'd have data and and then you put that data in your template and wanna update. So

that might be it. There's TypeScript out of the box. Rid. The the problem with any of these things are, like okay. This is just building on top of the web component standard. But, like, if you're writing lit code, is Are you writing web components code? Are you writing lit code? Like, that's kind of the the thing is, like, if you're moving to web components to get off of the lock in Being locked into 1 specific library, are you just locking yourselves into a different library? Like, is that Isn't it isn't that similar to,

like, Svelte where It will compile to web components because, like like, React will compile to React. Oh, yeah. You're right. You're right. Yeah. Rid If you wanted to, I'm assuming that you could just compile your lit code out to web components if you wanted to. Mhmm. But like most things in the browser, we get a standard, and then somebody builds a framework or a set of helpers on top of it rid so that you can do what you want. And and that's maybe not necessarily a bad thing either because It's that x k c d comic over and over again. Yeah.

I'm excited about this. Rid For some reason, I always assumed that this, like, Lit and all this stuff was, like, heavily tied to, like, the Angular world some reason, was it part of Angular? Yeah. Lit's definitely not. Lit lit to me even feels a little bit more of, like, React than anything else. Yeah. I'm I'm just looking at this example code.

I'm excited about this. Let's talk about this example code. Did you hover over any of those little cuts? Yes. I knew Wes would like this when if you go to lit.dev and you scroll down just a little bit, there's an example code, and you hover over any of the boxes there. It does this, like, rid. Slanted highlight that slides in, and it, to me, screams West Boss, and I love it. Yeah. Yeah. Anything that

rid It's not square corners. I'm all about it.

Yeah, man. I think this is it. I'm I'm excited about lit. I'm gonna build something in it, and we'll do a show about it because this is this is really cool. Stella, wonderful question here. You do we just did a 10 minute long answer. Yeah. Yeah. You got me you got me going.

Awesome. Thank you, Stella, for the question. Next question we have here is from Brendo from Canada.

You guys rid a lot about your sweet gear and desk setups. As a newcomer to web development, it's still all a little expensive for me to mimic what you have. At least, I've learned enough to justify. Yeah. So this is something we say. I don't think Brendo is is throwing any shade our way, but this is something we say anytime we talk about Our setups is that, yes, the stuff is is expensive, but Scott and I are professionals, And that's what we spend our money on because it's worth it to us in terms of, like, business return, in terms of having the best gear that you can. Yeah. And, also, rid. Our businesses pay for it. Yeah. It's like you work for, you know, x, y, and z agency. That agency is buying laptops or servers or whatever, and then rid This trip, we're doing that. We're just smaller entities. You know? Totally. Yeah. We are a business. You write it off, and have you seen that Seinfeld? You even know what writing it off means? I I don't remember that one, but I have seen similar job. Yeah. Just you just write it off. Yeah. Write it off. Yeah. Yeah. No. No. It's it rid. It is significantly cheaper when you buy it as a business because you're not taxed on, that amount of money. So question here from Brendo is, rid. What are the minimum specs, laptop, monitor, etcetera, you would recommend for a beginner just starting out in web dev? Thanks.

Oh, love the show, by the way. So this is a good this is a great question. I used to get this a lot. I still do when teaching in person because people are like, okay. I need a laptop to come to this course. Like, what do I what can I go and buy that is rid Like, I see Best Buy has some for, like, $500? Is that good enough for what I'm doing? And The beauty of web development is that most of them are going to be enough because most rid. Laptops that are, like, any made in the last 10 years, we'll be able to run the very basic tools that we have, a text editor, a web browser, and rid. A terminal. So, like, I would say, I always tell people at the minimum, grab 8 gigs of RAM. Mhmm. You're never gonna be rid Upset that you didn't go for more RAM. So 4 gigs of RAM, it will run, but things are gonna get slow, especially as, like, a lot of the tools we use. I'm just looking Notion, ready.

My Chrome or Firefox, Versus Code, my email. These are these are pretty memory hungry rid applications.

And when you're running all of them, they can they can eat up that memory pretty quickly.

So I think 8 gigs of RAM. Processor speed, I'm not really I used to be, like, super into processors and computers. Yeah. Right. Once I got to, like, 12 cores, I just sort of lost track about what was better. I think I got Core I5 or greater or equivalent. Whatever the AMD equivalent is will be rid Will be pretty good for you.

What's gonna happen if you have a computer that's not fast enough? So, rid Things just slow down. Things get in your way, and that is not an not a huge issue. It just can be very frustrating rid when you're trying to fix something. Because for me, at least, having a really fast feedback cycle to when you try something and when you see if it worked rid is is really important. And if you have a slow feedback cycle where you have to try this is this is part of why I get really frustrated when rid. You deploy something, and it works on your computer, but it doesn't work on your server. And you're like, I have to go through the whole build process, and it's, like, 20 minute build process.

That's really, really frustrating. So things get slower. Linting goes slower in your editor. So if you make a mistake, you don't might not necessarily catch it right away. Re Starting and restarting processes, you run a node script. That whole boot up will slow down. Opening your dev rid Tools, switching tabs, all of those things start to start to slow down when you're working on this. So it's not like a a big, big deal, but it definitely can get in your way. I think with the new m one processors that the Macs have, I think if you get a MacBook Air,

and you can deal with the the smaller monitor size, I think that Computer's gonna be fine for doing modern dev work. I like Mac OS for web dev stuff just because I know there's improvements to the Windows rid Subsystem Linux stuff, but it just works for me for the most part and works easily. So as long as you can get something like that going that easily, You know, I always if you want a laptop, the MacBook Air is fine. And the Imac is probably an underrated dev setup too just because it's rid A powerhouse for for the size of it. You just can't take it with you. You know, you don't need a fancy external monitor. You don't need any other things. You can get going with just a a laptop. So, you ready. You know, if I had to pick for that bang for your buck, that's a pretty big bang for your buck even though it's a it's an expensive computer, but it's still bang for your buck. We're rid Saying this on May 31st, and there is likely new MacBooks with m whatever chips

Coming out in the next couple weeks. So by the time you listen to this, there might be new MacBooks Yeah. Out. And that m one chip, I think, is gonna is rid is gonna change the game. It it already has because the MacBook Air and the MacBook Pro, the 13 inch, they're the same computer except that the rid. The pro has some cooling in it, and the air doesn't.

So same with the what's the little Mac mini? They're they're getting so much more affordable.

They are cheaper than the Intel equivalents and and what they were. Rid. So even I think the base one is gonna be more than enough for running that type of stuff. And I think a monitor, if you want and he said he asked about monitors as well. Rid. The bigger you can get for your money, the better. A 24 inch 10 80 p or 14 40 p. Not probably not 10 AP. Whatever the biggest 14 40 monitor you can buy, if not a 4 k, is gonna be good. Like, rid. I find myself all the time. I was working on my laptop last night on my lap, and then I brought it up here this morning, and I plugged it in. And I just said, You know, like, more space for all my stuff, and there's nothing better than that, I think. So, rid Basically, what we're saying is as much as you can afford, but 8 gigs of RAM, Core I5.

If you have a choice between an Intel Mac and m one Mac, It seems like the m one m one max all day long. Yeah. And also, you do have to put some sort of,

you know, if you have the ability to, let's say you're a freelancer, form an entity And and and make this as a tax write off because, like, yes, this is your machine to do work on, and Sometimes people get, you know, hung up, and it's like, I wanna get the the cheapest computer possible to do work on. But, you know, I I understand not everybody has this right or disability or privilege, but, like, if you can splurge a little bit more for the computer and find some weight to make that rid That difference back, whether that is working faster in a freelance project or getting more done, I don't think you're going to necessarily regret that as long as it doesn't put you in a tight place financially.

I've always leaned on going a little bit harder on my machine, because At the end of the day, you're you you know, the processing power, whatever, it's gonna add seconds to your workflow or remove seconds from your workflow or whatever. And if that is a a barrier to you, how fast you can create things with your computer, then, you know, having a fast computer is probably not a bad idea. Rid. But, again, that's coming from you know,

I have a a a business. Our business has you know, is profitable. It's easy for me to say, let's dump money into a computer. You know what I mean? Yeah. Re It's a delicate balance between the 2 because you certainly see people on the other like, I think about I always compare it to, like, people in the trades rid Where they there's a lot of brand new, tradespeople who go out and they drop, I don't know, 10, 15, $20 rid on tools in order to do their work. In my opinion, that's that's silly because you can go buy used tools and upgrade over time and And things like that. And you see that in web development as well. Like, you get the 6 monitors and all the Elgato key lights and and all that stuff, and that's just not gonna make you a rid a better dev. Just get like Scott was saying, get as good of a laptop as you can afford and a decently sized monitor,

And that will be enough, and you can upgrade keep upgrading stuff over time. That's a very real thing. I know we're getting way off the topic here, but that's a very real thing And motivation were, like, some people are motivated to become a YouTuber or something so then they go out and buy all of the gear, the microphone, and whatever. Mhmm. And then That, like, act of buying those things satisfies that urge that they had, and then the motivation is gone, and then the stuff just sits there collecting dust.

It's very real problem and largely one of the reasons why people say, just do it, get started, get going, and then as you go, you can upgrade things here and there to do so. And that's always a thing with your computer too. You can buy a cheaper computer and then sell it down the line, upgrade it if you are making money. Totally. You know, that's a that's a a big thing. Yeah. Yeah. That's a good point. You can always sell it. Yeah. So let's actually, take a minute to talk about one of our sponsors today that, you know, will save you a bunch of time by the amount of stuff it does for you, Which is [email protected] o. West, do you wanna talk about Sanity?

I do wanna talk about Sanity. I just got surprises.

My picture is on Sanity. Io. Rid They they asked to use this. I just forgot that they had put it on here. And the the quote, I stand by it. The quote is, Sanity is a perfect mix rid of easy to use paired with the ability to customize almost anything you want. And, honestly, you've probably heard me say that Over and over again in many, many aspects of web development is that I want something that's really easy to use, and I can get up and running right away.

But I don't wanna have to give up anything in exchange for that because down the road, when I do wanna do something super custom, I still need the ability to to do that, and, honestly, sanity is that. So if you need a CMS for your next project, You can get up and running. You can have a GraphQL API, a REST API, whatever type of API you want up and running probably in, No.

6 minutes and 24 seconds.

And then once you rid are up and running. You can start to customize it and and get a little bit deeper and customize the actual back end of the CMS, how the data comes in. It's awesome. Check it out. Sanity.ioforward/ syntax.

Thank you, sanity, for sponsoring.

Okay. So now we've gone through 2 questions here. So let's let's pick it up here.

Next question is from Michael Whelan.

Michael asked, I rarely, if ever, hear you guys or any other web dev related podcast mention Python, Flask, or Django.

Do you have any experience with those frameworks? Can you give any thoughts on on you may have on Python as a language for back end development? So I actually before I I I've mentioned before on this podcast a couple times, I did, like, a tour of front end frameworks when I was making A change to a front end framework back in the day, and it was like Ember and Angular and Backbone.

And I did the same thing with back end languages. At the same time, I did a tour of Node, Python, and Ruby. I spent some time in Rails. I built an app in Rails. I built an app in Django, and I built an app in Node. And Rails was probably my favorite of the 3. Django at the time was undergoing this, like, very weird shift, in the documentation, and half the things didn't work. So, like, the documentation was not up to date. I had a hard time with it getting up and running because some of the stuff was on the different versions of Python 2 or 3, And I found the community at the time, to be largely rude.

So, not that not I'm not saying the Django community is rude or the Python community is rid. But, like, I asked for help, and they'd be like, well, well, why aren't your versions correct? And I said, well, I'm just following the getting started, man. And if you're getting started isn't working for somebody who's Brand new in this thing, then, you know, that's not a good impression.

Django is a fine framework.

Flask is like a more minimal version of the same type of deal. Rid Python itself is an amazing language. It does a whole lot.

I am not a Python developer.

I am not a Flask or Django developer.

I, for the large part, have found that by writing 1 language, it's enabled me to be better at that language.

So if I'm primarily writing JavaScript on the front end of my site, being able to write my server in Node as well is a choice that, like, I don't wanna have To get good at another language to be productive. I don't wanna have to memorize 2 sets of language APIs and things like that. Yeah. So that's largely why I pick Node where if you have a Python front end, you're you're gonna have to learn JavaScript anyways. It's not like you're running your front end in in Python, really. You know, who knows if that's in the future with WASM or whatever. But if you're a good Python developer already, then sure. Yeah. By all means, go. Python's great. It's gonna perform very well. There's a reason why so many enterprises Yeah. Use Python and Flask and all those things. They're they're fantastic.

I personally am just not a skilled Python developer and rid Probably never will be unless, of course, my job relies on it. I think people go for Python

either because they know it or because they they necessarily need it rid For speed or a lot of people in, data machine learning, they Totally. They use Python because, like, it's way better for that types of stuff, but rid. I'm not using that that kind of stuff. JavaScript is more than sufficient for for the type of stuff I'm doing. Also, when I first got started, I did try a little bit of Python, and I was I just kept hitting lots of, like, roadblocks because we were in the, like, between Python 23.

And, like, you always try to, like, PIP install, and you never had the right stuff. And it's funny enough because I feel that way in JavaScript land right now where The npm install something. It doesn't freaking work, and there's 500 security warnings. And you npm install something. And I was like, I I whenever I see that, I'm just like, Like, I'm a I'm a pretty good JavaScript developer, and I can't get the stuff running sometimes.

And I feel the same way I felt rid 10 years ago when I was trying to to dip into a little bit of Python, which is little discouraging for, the JavaScript community because I think about rid. People who are new to the site even, like, people who take my courses, these sometimes these issues pop up where they're on the wrong version of node or for whatever reason, the rid. The npm install doesn't work or it's really, really frustrating. But, anyways, that's it.

Have you ever used Python? No. I rid I use JavaScript for everything. That's why. Not because I don't like it, but I just just use JavaScript for everything. Yeah. I actually really like Python as a language,

and Ruby for the most part. I like them probably more than more than JavaScript, but I'm just not good at that.

Next question from Charles.

I started listening to Syntaxia Senior University and learned a lot from you too. Next week, I start my 1st web developer job at a local company that rid has a growing developer team. The company is interested in new technologies we should pursue that will make us more efficient, better developers. I recently got into using Docker rid containers for my development work since packages all of the dependencies, your OS, node, etcetera. There have been a couple times a node version works with 1 package, And a different version of Node does not work with this. We're just talking about this. What do you think of using Docker containers to do development work? Rid. I've seen a couple articles talking about it, but it doesn't seem super common, I think, in advance.

Yeah. This this is a great question.

I personally don't use Docker because all the projects I do, I just keep on the most recent version of Node. Rid. But it can be really frustrating when you are switching between a version of, like, node 10 and, like, node 15 with whatever project you're on is just rid Still on that, and you have to every time you switch between the 2, you gotta re rebuild your dependencies, and that can can be really, really slow. But rid Personally, I have not needed it. It can be nice to use Docker because you can mimic your entire production environment in a container, and then you know that when you deploy the thing, everything is going to be exactly rid The same. It's just not like, I've every time I've gotten into Docker, it's like gigs and gigs of downloads, and it's really it was really ready. For me.

And people are always yelling at me to use Docker, but I have never had a good experience with it. And that's Before you freak out, that's it's obviously on my end, but I just don't have an issue running it straight on my computer. I'm glad you said that because

Every time I I run into a project that, like, kind of forces me to use Docker, I I install things or whatever. And then I I wanna say, like, rid 90% of the time, I have an issue with it at some point. Yeah. And that is most likely me just being, Like you said, it's my fault. Right? I I'm I'm I'm dumb. I'm missing something. There's there's something going on there. I'm missing it. Rid But I've never had necessarily a great experience with Docker to that that degree, and I think there is problems that it's solving that I do not have rid is really what it's it's coming down to. Depending on the size and scope of your project, the amount of people working on it, these things become More important. Right? If you have a 100 people working on something, getting everybody's environment in sync is very, very important. But if you have 2 people working on it, it is important, but it's not like it's not difficult to the same degree.

So I think doc Docker for many small projects is over engineering. There's there's no point to have it. But for large projects, lots of people working on it, It can definitely be very, very good to have. But again, like you said, Wes, it's most likely my fault, but I've never had necessarily a great experience with it.

Now, Charles says go green.

He says this to me. He he says this as I in in in recording of our episode of Syntax, He says go green, which is a Michigan state thing. And to him, I I say go blue.

So, I'm I'm the guy waving one flag saying, rich. You know that guy with the green flag? Screw that guy. I have a blue flag. So thank you, Charles. Where this stuff can can be really helpful is when you have, rid Like, multiple things that need to work together.

MySQL and Redis and a version of Python and this, like, weird c re Resizing thing. And on my Synology, I use Docker to run different apps because I don't wanna have to install, rid Like, 3 different versions of MySQL and point them at different whatever. You can just pack it up nice and tightly into a Docker image, which is great. So rid. As a user, as someone who, like, uses things in Docker, great. But as, like, a dev who

should bundle up his of stuff. I've never needed it and always found it very frustrating. I feel like we have the exact same experience, because that's the only thing I use Docker for her.

Awesome. Cool. Well, if you are using Docker like me and you don't know what you're doing, you're bound to make mistakes and cause some bugs and have some errors and maybe it's an error in your website. Who knows? Right. This is a bit of a stretch, but, what I'm doing is I'm leading into an ad read for LogRocket, which is one of our sponsors here at Syntax. Rid. Logrocket.comforward/ syntax.

And let me tell you a little something about LogRocket. Their system is so cool because what it is, it's an error Service allows you to see your errors happen in real time in a video replay with the network request. Rid And anything that you might have in your normal development workflow, allows you to really just debug faster and better because you're no longer poking around in the dark to try to figure out what the heck is going on here. You're no longer just combing through Errors or logs or whatever, you're getting to see the user click the thing that they should not have clicked, and that shouldn't even be there for them to click. Why they why is that thing there, and why are they able to click Well, you can see all of that and more now at logrocket.comforward/ syntax. Sign up and get 14 days for free. It works with all of the tools that you know and love. You can host rid on premises or in the cloud. So check it out logarock.comforward/syntax.

Okay. Next question here is from Austin. And, Austin, hey, Wes and Scott. Thank you for consistently providing, producing content week to week. I'm also digging this text area. I'm typing in right now. Nice work. Hey. I think that one's for US because I don't I don't do that text area.

It's a Google Form. Yeah. It's a Google Form. I hate Google Forms UI. Well, Thank you, thank you, Austin. Google. Thank you and Austin and Google. I've often heard you 2 talk about the idea of golden handcuffs where a job pays well, But the employees are miserable. I think I might be in that situation right now. My day to day work consists of writing React, Ruby, rid and .net, usually all within the same day or at least the same week. I even sometimes work on a React Native application or Java microservices. Rid Okay. So he just listed, like, 4 different language context there.

On top of that, probably 25% of my time is also spent in meetings. Okay. That's 5 language rid. One of those is the English language.

I'm primarily a TypeScript developer, and I thrive when I'm in that environment. I've enjoyed getting this exposure to Other languages, and I've grown a lot during my time in this role. Working with Java especially specifically has changed the way I architect node applications. I have a salary that's tough to match with generous bonuses, which has been really nice and has been running for my family, but sometimes I question if it's worth it. I'm rid. Constantly struggling to focus and keep all of my requirements straight between different plates that I'm spinning. I've tried organizing my day, rid. So my time is better segmented. I can't tell if this is a natural progression of a developer advancing in their career or I just need to adjust better.

There's something to be said about having a job It's less demanding. This has taken a toll on my mental health, but it's tough to tell how much of a toll is just pandemic fatigue. Don't worry. I'm Counseling, any tips or advice to better manage your time? Well, here's a here's a tip to manage your time, Austin. Don't write so much. No. I'm just that was a long question.

No.

Austin, I totally get you, man. I I I think I've had situations like this before where I have felt like the job was too good of a pay to leave, and maybe that was like a, you know, a thing. But It sounds like you're getting to work in modern tools.

I think some of it, it sounds like it's it's just stress related. Right? You you mentioned a lot of context switching, whether that is for meetings or the the 3 different languages that you're writing, 4 different languages that you're writing. Rid That is a lot of context switching, and that's gonna cause stress. It's gonna cause stress having to keep all that in your brain.

On top of that, we did just go through and are going through a global pandemic.

So I like to, you know, reiterate that a whole bunch whenever my wife and I are talking about stressful things. It's like, we're wondering if, you know, If the stress will ever go away, well, like, hey. We gotta give ourselves a little bit of slack here because we were all trying to operate a little bit normally during this time that was rid Anything but normal. So give yourself some slack. Give yourself some break. And I hope that if you are having experience with, You know, the requirements being too heavy. I hope that it's you know, I guess this is, like, the big thing is, like, if sorry. I'm changing my my my rid Topic here. But, like, if you are really stressed out at work, it could just be a pandemic thing or it could be that your requirements are much. But who's putting this stress on you? Is it your managers? Because if it's your managers and they're asking too much of you, then maybe it's time to have that conversation.

And maybe it's not the job itself. Maybe you're just getting too much put on your shoulders. Right? You can only be so much of a mule before you collapse.

Or is it yourself putting the stress on you? Because that's a whole another topic of conversation. If you move to another job and it's you putting the stress on you, then that's not gonna go away regardless of what you're doing.

It's important to be easier on yourself. Don't be so hard on yourself. I think you're you're probably doing a fantastic job. 2, if you if you have too much on your plate, Talk to your managers about this. Say, hey. I'm I'm just I'm overloaded. I'm getting burnt out. Is there anything I can do? Because that to me, it sounds like you're getting burnt out. So it's see who's putting that that stress on you. And just be cognizant of you putting stress on you. At the end of the day, you know, if something better comes up and, It pays a little bit less. That isn't the end of the world if you think you're gonna be happier at it. But at the same time, find out what exactly it is that's putting the stress on you and identify rid that and work to fix that. I think you said it really well. There's it sounds like a pretty cool job. You're getting to work with lots of stuff. It's not all the tech we talk about on this podcast, but that Doesn't mean it's necessarily bad. It sounds like neat stuff.

Pandemic fatigue is definitely real. I see a lot of people right now being, like, Just not all that interested in in what it is I'm doing. And and finally, I'll just say, like, most jobs are pretty demanding. So rid. Without, like, exactly knowing what it is that job you're in, I think, like, if you were to, like, pull our entire audience, rent. Do you feel like you don't have enough time to do all the stuff you want, or do you feel a little bit frazzled at work? I'd say most people would say rid. Say yes in that case. So, yeah, Scott said it really well. I won't won't go too much more into that.

Next one from Tim. Hey, guys.

When it comes to desktop browser testing, is there a difference anymore in browser rendering engines? Do most, If not all browsers use Google's rendering engine.

Yeah. We're we're definitely in a much better spot with our browser engines, but rid. There are 3 big ones right now. There's Chromium or which are Blink. I guess, like, Chromium. What's the difference between rid Chromium and Blink. Blink is the JavaScript engine, and Chromium is the entire

browser

Base. And then there is WebKit, which runs Safari and a couple other browsers that run on embedded devices.

Rid. So, like, your PlayStation browser, I'm not sure what browser runs on the Nintendo Switch.

Does the switch have a browser? Rid. I don't even know. I I don't know anything.

How to use the hidden web there's no browser on that switch?

No. I don't think so. Rid There is a hidden web browser, but, like, there's not one built in. Nintendo's the apple of that world, as in, like, they purposely rid Hide things and make things obnoxious sometimes.

Oh, yeah. Mine, like, Samsung TV has a has a browser built into it. You know? And, like, that That also is probably running on WebKit, if I were to guess.

Then there is Firefox, which is, the last one. So, re we if you drop IE 11, that's running on the Chrome web browser behind the behind the scenes. WebKit runs on Safari, and then there's Firefox. So, rid. Absolutely. There's still tons of stuff that is inconsistent or unimplemented in different browsers, so you still have to do that. And we will complain about it until we die, but I think things are much better than than they used to be. Yeah. Yep.

Yep. Yep. That's pretty much it. Next question is from another Austin. Maybe the same one. We'll never know. We'll never know. No. We'll have no idea. Maybe this one's directly submitted from the city, not even from a person. Who knows? As somebody who got into the industry recently, Component frameworks and single page applications were introduced to web development. I am now really interested in learning more about the traditional way of doing things. 100% server rendered.

What's my recourse here? Ruby on Rails? Laravel? Something else? Is there agreed upon modern way to do server rendered monolithic apps? No. There's, there's tons of ways to do this. In in fact, you can use Python, as we've mentioned, you can use Ruby on Rails. You can use PHP. You can use PHP with Laravel.

You can use WordPress.

Guess what? You can use React and pass it into a, render to string function and have it totally being done that way. In fact, rid In my experience with server side rendering in React, server side rendering in React, very easy. Hydration, that's the problem. So, like, when you're trying to hydrate it with JavaScript frame, like, that to me has always been the problem. But you can you can write React code and have it be just server rendered very easily.

And in fact, we just did an episode on SvelteKit.

And SvelteKit, to have it be entirely just server side rendered, you just Pass it in a hydrate false, and it doesn't it doesn't give you a server server. So there is a ton of ways you can do this. And in fact, I think that the new framework Remix It's not just trying to be just server side rendered, but it it has a large focus on the platform as that that's that style of things. So the traditional way of doing things, If if you wanna have server side rendered HTML code and that's it with no client side JavaScript, you can use just about anything, whether it is a modern tool like React, rid. Use Svelte or you can use an, you know, an older, still very capable tool, tools that are being built. You can use anything. And that's, You know, honestly, part of part of lid the joy and problem of our industry is that there's so many options. You know, you could go nuts trying to pick 1. But at the same time, if you're if you like choice, then you have a whole lot of options to pick from. So Yeah. You know, is it is it Netflix that only does server side rendered React? I think it is. And their their whole platform's in React, and I believe they just do server side rendered React with no hydration. Now I know I'm not a 100% Positive on that, but that is being done quite frequently, I think. I

kinda doubt that because they're very much a app.

Maybe. They removed React from their client side. Here's a post from Eddie Asmani about they reduced their Client side bundle by removing React from their client side JavaScript.

So their React is still used, but only for server side. And then in their client side bundle, they're using vanilla JavaScript to do any of the client side stuff. So that's Netflix. Oh. I'll post a link to this. I don't know if that's changed or if it's different for Canada because I just went to netflix.com,

and React DevTools are there. Interesting.

Rid Yeah. Yeah. This is from 2018, so maybe they did change it. Yeah. This always happens with big companies where they come out and say, we're all in on rid x, y, and z. And then 2 years later, we are totally getting out of the x, y, and z game. Yeah. And then everybody panics.

We're moving our app from React Native to Native Native. Everyone's like React Native sucks. And then and then the very next day, How we save this much money by writing everything in React Native again. You know? It's very funny.

So I will shamelessly ready. Plug my learn no.com course, which is exactly what you're talking about here.

It is a server side only, re not only, but we do do a lot of vanilla JavaScript on the front end, but it is a a regular old traditional Server rendered, tutorial on how to do that. And I still sell a lot of them because there's a lot lot of apps out there where people still have to learn how to use. Rid This is Express and Jade and server rendered HTML, and they still have to be able to know how all of that stuff works. As as much as we rid Has swung in the direction of doing everything in the client. It's still pretty popular to do server rendered apps, and it's we're also seeing a lot of people rid Go back to the entire server rendered as well.

Next question here is from.

Thank you for the question. Hey, Scott, love the podcast.

By far, the best web development podcast I've listened to. Thank you. Thank you. I wish to ask what kind of plug in extension or stand alone software rid You use for code prediction to help you write code faster.

I personally use Kite and Versus Code's IntelliSense, but it seems to get it wrong more times than right. Rid. Do you have any other recommendation? Yeah. This is a good question where, like, as you start to type stuff, it Guess is what you need, and I personally have used both of those things, and I still do Versus Code built in IntelliSense as well as rid Kite. And then also I get

in Versus Code, I often get, like, AI brackets AI. Do you get that? That might be Kite. I think that's Kite. Yeah. You know, I had one heck of a time uninstalling Kite. Not nothing against rid I I just did I wasn't using it. It was kinda getting in the way.

I, like, installed it. I uninstalled the extension, And then every single time I open up Versus Code, the extension would be back. It was like, please. I I'm just not using you right now. Just rid. Go away for a minute. Like Maybe we should explain what they are. So there are, like, 2 big plug ins in this space, Kite and Tab 9,

and they Analyze your code. They don't upload your code to the cloud. Everyone thinks that, and they freak out every time they do that.

They analyze your code and then will sort of predict rid what it is that you want to do, and that along with good IntelliSense, especially with TypeScript. I I find myself using Kite rid less when I do TypeScript because I sorta know what I want, and then the auto completion is usually pretty good. It's good. Yeah. But there's every now and then, I I get a nice rid AI auto completion from Kyunga. That that that's really nice. So my answer to this is no. But I I don't feel like rid I think I've tweaked my settings a little bit to see what order it wants. Because sometimes you get, like, Versus Code that will just suggest, like, a random word rid that it finds in the document, and you're like, no. I don't that's not that's not what I wanted. I think you can change the the order in which it suggests those things ready. And then what words are found in the document as and then also snippets as well that pipe in. So maybe take a look into which order those are popped up, But I I don't know. I feel like I've been pretty happy with the autocomplete in Versus Code. What about you? I think that's pretty much all I use. Yeah. You know, things have gotten very different rid With TypeScript, it all just kinda knows what I want. The auto completion is nice. And you know what is really great is when you do stumble upon and use a library that has the, JS doc rid. TypeScript stuff that comes in there. You get, like, a whole paragraph about what this thing does. You get it. It's like each component's manifesto written right there. Yeah. And, it's fantastic. I I do really like it. I don't use anything else other than just the built in Versus Code TypeScript checking. Yeah. We should say for people listening, like, the benefit of, like, using, like, a kite or something In addition, is that, like, if you have an array and you wanna map over it, the the AI will, like, take a list of cars, And then you type, like, dot map, and it will autocomplete the map as well as the, like, the singular version of that, which is car rid. And the arrow function as well as sometimes the implicit return, and it will if you do something like that pretty often.

But, honestly, I don't use it all that often, and I think, like, I would say 90% of the time, I just use the TypeScript MVS code IntelliSense.

Rid Yeah. Yep. Alright. Next question is from Sahas Sarav.

Says, is there any benefits to using Prop types in TypeScript in a React project.

Not really. No. No. If you're using TypeScript and you're doing the type checking, You're type checking your components. That does everything that prop types would do. I have removed any instances of using prop types from my code base. So yeah. Yeah. The the prop types will yell at you in your console,

whereas your TypeScript will yell at you in the editor. Yes. Rid There are some use cases where you can do custom regex matches on prop types and, rid. Like, you can make sure the value like, one thing TypeScript doesn't do is, like, validation. Like, pass me a number. Okay. Pass me a number between 15.

Rid. It doesn't do that. Right? That that's what a validator library does, but you can do that type of stuff with prop types. Do I? No. There's little edge cases, but no.

Next question from Finnish George. Hi, guys. Love the podcast. I'm currently planning on building an audio focused app. Sick. Maybe even more. That sounds cool. I've been wondering, how do you solve the problem of storing and fetching on demand hundreds, perhaps thousands of little audio files? Rid I'm talking lengths of seconds, not minutes. So it sounds like he's building some sort of, like, sweet sampling Mhmm. Where you can put all these different Audio things together, how would you do it? I have some deep reservations against using AWS, although I'm somewhat familiar with it. I've I've got some deep reservations against you using AWS, and some are familiar. The capacity hidden and hard to estimate costs. I'm thinking about using DigitalOcean or something like that. Rid. Would it be too hard to implement things like caching and such yourself? Any thoughts? I think this is some simpler than you are thinking. You need to think about these audio clips like a JPEG.

So you need to store them on some sort of re Service that is there for bandwidth and not for, like, processing power. So you wanna put them on what we call a CDN.

Rid. You wanna put them on, like, a a CD and a content delivery network, somewhere that will host lots of media files and is very cheap to go through all of that bandwidth. Rid. On that CDN, you wanna set headers, and that what that will do is it will cache the audio files in your user's browser. So if they refresh the page, rid They're not redownloading a 100,000 or a 1,000 m p three files. They'll already be in in the cache there. So DigitalOcean has it. Linode has it. Rid Actually, that's a really good that's a we'll we'll save that for our next sponsor read on Linode because they they have something for this. Look at you, Wes. Ready. Yeah. You could stick it on AWS as well. Again, that is really difficult to figure out how much that might cost.

Rid. But, yeah, I think past that, it's it's really not that difficult. You're not doing any server processing or generating them on the fly.

So just stick them on a CDN and and hope for the best. Yeah. I wonder about, like like, storage locations whether it is like an s three and then you put a CDN in front of it, rid Like, CloudFront. If you're looking for for cost, you know, cost savings, AWS no matter what is is, I don't wanna say no matter what, but AWS is probably gonna be the cheapest because that's, like, the closest to the metal. They don't do a whole lot for you. Right? Yeah. So AWS is probably gonna be very cost effective for you. We've we've stored things on Backblaze b 2, but I've never I don't know too much about their we we host all of our our, like, code downloads and stuff on on Backblaze b 2. And then we never had a huge rid with it, but we're not we're also not serving a ton of those up. We're not McDonald's over here, you know, serving up milkshakes. But

I used to store mine on s 3, and I would get the Germans complaining all the time that the downloads were so slow. And then I put I was getting complaints about download Yeah. And then I I switched to Backblaze, which is not a CDN. It's just they just have 1 server. Do they have a CDN service though, Or you just put something in front of it? You could put something in front of it, but I never had a issue with people complaining about the speed on on backplay specifically, which is which is good. And, also, like, I also talked to, Justin Jackson who runs A podcast platform? What's it called?

Tell

no. Not Telegram. That's not it. He's a Football player if you Google it. Oh, I remember he got wiped out on his, like, personal branding when that football player got popular.

Rid Transistor.

Transistor. Ah, so close. And they host they host all their, m p threes on Backblaze, which is Pretty impressive as well. So if a big company like that can do it. I like Backblaze as a company. So Yeah. Yeah. So maybe look into In the sticking on that, another option here, I'm transitioning from us telling you about our thoughts To a company that has explicitly paid us to give us their thoughts.

Look at you. Very nice and clear.

One of our sponsors today is Linode, And they do cloud hosting, Linux hosting. You can get a $5 a month Linux box and host your node app. So it's something they also provide is rid.

Object storage.

And object storage is a place where you can put all of your your images rid Or your PDFs or, in your case, you can put audio files on there. And if you go to their object storage, they literally have re An icon for audio, and you can stick it on there. It's s three compatible, meaning that any node packages you npm installed for Amazon s three, rid It'll work with Linode. They just have the same API. They have free transfers, which is not something that AWS has. So if you wanna if you need to move over a rid couple terabytes of audio files into the know, and they're not gonna charge you for that. That's ingress is often that's called. That's can get really expensive if you have to move a lot of in just to work with it. And they have a really nice predictable pricing, which is something, the competitors do not have. Rid. So if you if you're taking a look here, if you've got 500 gigs, 1 terabyte of outbound transfer, You are gonna be paying $10 a month for that. So check it out at lenode.comforward/ syntax, and hold on. This rid. This this is what you're gonna get for that. You're not just gonna go to the URL. You're gonna get a $100 in free credit that you could host a lot of m p threes or or audio files on that. And I want you to use this for your your thing. So linode.comforward/syntax for $100 off.

Thanks to you, Linode, for sponsoring.

Watch out Napster.

New kid on the block here. I must know those MP threes. No. Don't host don't host Illegal content on Linode. Wes Bos advocating to host illegal content on Okay. Cool. Well, that was a fun potluck here.

Now is the part of the show where we talk about sick picks, things that we pick that are sick. And, Wes, I got a podcast for you today. Alright. You know what I got on podcast, Biggs? I love I love me a good podcast.

And you know what? I I'm Listening to so many new podcasts lately, but I think one that I would really like to share would be from this is from the BBC, ready. See, and it is called a death in crypto land.

And I'd actually, I got this Podcast recommendation because there was, like, a preview of it on another podcast that I had really enjoyed.

And a death in crypto land is sort of an investigation into rid. The CEO of Canada's largest cryptocurrency exchange is reported to have died while honeymooning in India, And he has basically the only key to the vault, and he has passed.

It's only 2 episodes in, and so far, it's so you're getting in early.

So far, it's extremely fascinating. This guy is kind of a problematic person. Rid He is maybe dead, maybe not dead at this point. Nobody I don't know if he's dead or not. I'm trying not to spoil it. So I I Maybe he faked his death. Maybe he didn't. Maybe he actually passed.

Either way, he's a shady individual who's been kind of wrapped up rid. Shady things, and he has the keys to this crypto exchange. He's got a ton of people's money, and he is all of a sudden gone and passed. Rid. And nobody can have access to their money whether it is his relatives, his friends, his family, or clients, or customers, or whatever, and it's an insane amount of ready. This is a very fascinating podcast, and it includes a lot of the stuff that we talk about here with, like, data security and whatever.

So, Wow. It's a very interesting one, and and honestly, a story that I knew nothing about. So, check it out. It's called a death in crypto land. And, again, there's only, like, 2 episodes out at point, but next episode is coming out since July 4th. No way is that correct. But either way, I'm pretty cool a podcast from the BBC, and so far I've been really enjoying it.

Sweet.

I'm going to sick pick a piece of software that I really like. So I'm working on my next packs of stickers, rid. And I needed to do a little bit of work in Illustrator, and I was just, like, lamenting on how impossible Illustrator is to use because there's, like, re 800 different ways to pick a color.

And a bunch of people are on Twitter were like, just use affinity designer. And I was like, I tried that a while ago, and, like, I got overwhelmed, then I quit it and and whatever. And then rid I was like, I I'm gonna give this another shot. It was on sale for $25, and I was like, I'm just gonna buy this because I have my trial had run out. So I I bought it, and I was like, this is amazing. Like, this is rid what I've been wanting for so long because I when I need to do a little bit of graphics work, rid I always jump into Sketch right now, and Sketch is not made for half the stuff I do because it's not rid. Great for raster.

And if you do a lot It's not great for grunge textures.

No. It's not. Literally, I'd I've designed my entire website in in Sketch, rid. But it's not great. It's not great for the crunch texture, and it's not great for having something with, like, hundreds or thousands of paths. It gets really slow. Re So I downloaded Affinity Designer, and it's, like, the best mix of Photoshop and Illustrator in one. So, like, you can you can do all the stuff I used to do in Photoshop. I can do all my raster based stuff. But then, also, you can do all your rid. You can import Illustrator files. You can work with all your vector stuff, and it's just just been awesome. It's I don't it's not a replacement for designing websites, I don't think. Rid But it's a replacement for me for Illustrator and Photoshop, and I was really happy because I don't wanna pay the I rid. And also it's $60 a month for Creative Cloud. This thing was, like, 20 or $30.

No. It's cute. You just pay for the license, and that's it. You just have the license. Rid. You don't have to pay for a cloud membership or anything else. So and, also, it was just easy to use. Like, I I feel like I'm I'm, like, good at computers, but, like, I I was just, like, clicking around in Illustrator. And, you know, like, when you're in one of these apps and you, like, clicked the wrong thing, you're like, no. I just wanna click that thing and move it. How do I move this? Much easier in Affinity Designer. So check it out. Affinity they have a photo app as well. I haven't checked it out yet, but I I think that's next on my list. Speaking of the photo app,

that's the, this is what I use from Affinity. And, as somebody who yeah. I actually have some ready. Trials on Affinity Photo. I was gonna do a whole series of it way back in the day, but I never did. Wow. I did, like, a couple of videos on it. Affinity Photo is basically Photoshop as it but if, it ran a whole ton better, and you didn't have to pay a subscription for it. So I Affinity Photo is the only Photoshop like And I, swap out those photo. It it feels just like Photoshop in in reality. It's amazing. Yeah. It's like and it's so cheap. And right now, it's $35

Canadian, which is, like, 25 American.

Yeah. And it's been good for a long time. Yeah. They need to make a screen recording app.

Infinity audio screen recording. Okay. Shameless plug is the part where part we plug our stuff. I'm gonna plug the latest course at the time you're listening to this, which is the course on SvelteKit that I just released. SvelteKit is my new favorite platform. And not just because I'm selling a course on it, but because if I had to pick, honestly, I would love to write anything in SvelteKit. It is fantastic. In fact, You probably listened to the episode that we did a week ago on, on SvelteKit and really enjoyed me talking about how much I liked it. So If you're interested in learning SvelteKit, but also, we have some really neat courses from guest creators like GitHub Actions from Brian Douglas.

Re who works at Git? Who better to teach you GitHub actions? Right? As well as animating React, animating Svelte, and all sorts of cool stuff in between. So head on over to level up tutorials.comforward/pro.

Sign up today,

and you'll get 25% off. I am going to shamelessly rid plug, something new on my website, and that is I took my entire beginner JavaScript course, massive course on learning JavaScript.

And I had somebody turn it into notes.

And then I had all of the notes built into this, like, online guide. Rid And it's massive. It's it's, like, hundreds of thousands of words.

It's 85 different pages and pretty it's like a really good reference. It's ready. It's everything that's in the course, but it's in text version, and it's totally free. It's at westbos.comforward/ javascript.

And if you wanna just reference something quickly, rid How functions work, how objects work, scope hoisting, closures, case switch, looping, if statements, literally anything in JavaScript, You can learn it on there. So I'm really happy. This has been in the works for up over a year now, and I just launched it last week. I'm super happy about that. Sick.

Mhmm. Cool. Well, can't wait to check that out. As always, we will see you next Monday for a rid Tasty treat. Thank you so much for listening, and, peace.

Peace.

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.

Rid.