Potluck - Subscriptions × ES Modules in Node × Chicken Thigh × Being a Good Dad × Refactoring × More!

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here JS Scott Tolinski and Wes Bos. Welcome

to Syntax. This is a podcast with the tastiest web development treats out there. Today, we've got a potluck for you. Some Some really good Wes, some stuff that I'm really excited about in, Node modules, custom Node, in ES modules in node, which is gonna be really cool.

Talking about salaries, get LFS, bunch of really neat stuff, so stay tuned for some tasty treats. Today, we are sponsored by 2 awesome companies. First1 is Sentry that does all of your error and tracking.

And the second Node is Stackbit, which is the best way to jam Stack. We'll talk about both of them partway through the episode.

How are you doing today, Scott?

Hey. Too good. Well, I mean, you know, doing as good as I could be doing. Just just get grinding out, working on my stuff as always, and, yeah. I don't know. Doing alright, I guess. The it's scatterbrained nonetheless.

Oh, yeah. Yeah. Getting a little sick of the, lockdown.

Little just yeah. It's difficult to make it all work. I know we, you know, we both have those experiences, but, man, I've been I've been doing a lot of work to refine sort of how I think about, being productive and what, you know, what needs to fall into place, the systems I have in place for making myself productive. And Yeah. Oh, man. Really, like, having a an off day in those regards, it really hurts a lot more. It hurts a lot more now. Yeah.

You only have so much time, and you have a bad day. Like, the other day, I had like, something went wrong. And on my whole plans for the day went out the window, and I had to spend time fixing something. And it's just a bummer

to waste that time. Especially just I mean, right now, there there's just, there are just so many things to do 247.

You know? So, yeah, when you when you have 1 off 1 or a couple off ones, it really, really hurts. So, yeah, ready to, ready to get into this, potluck.

1st question we got here is from Mark Haslam.

What are subscriptions in React or programming in general? The React docs mentioned that setting up a TypeScript, in an example, is a side effect. But what exactly is a TypeScript, and when do you set one up? So this idea here is not a React specific thing, and it's it's more of just a programming thing. So in React, we know that sometimes we have to go off and listen for events or get some data from a database or, in this case, is talking about a subscription, which is generally what's going to happen is you're going to add like, an event listener to something some sort of data being streamed in. Or most likely you're going to have like a database that is sending live data in over a WebSocket.

So because that is going outside of the React component and setting up event listeners, that is what is referred to as a side effect in a React component because it doesn't just take in data and return some some JSX and and whatnot. It actually goes outside of it and makes a connection with the database or makes a connection with something else on the website. So that is what they mean by a subscription.

And how do you set 1 up? It depends on on what it is. It might be as simple as doing an add event listener on the window resize method. That would be a subscription to to that ESLint. Or it might be setting up like a WebSocket connection event warp you're listening for specific messages and then piping them into state. So it's one of those words where you see it and you go, is that actually a a thing, or is that just a a general programming idea? And that's it's it's the second of those. Right. Yeah. And there's oftentimes to the whole idea of you you might hear it referred to as pubsub,

and there's the idea of publishing and subscribing to information whether or not it is being passed over a WebSocket, whatever, where anytime information gets updated, that publish happens of whatever the the data. And since you're subscribed to it, the new data will come in. What's funny is that the entirety of, like, Meteor, my platform that I work on, not one that I've created, obviously, but Meteor is all PubSub basically out of the box. It doesn't have to be, but it it makes it super easy.

So I've been working in subscriptions with React and otherwise for a long time, I think, and it made some things very easy when you everything's a TypeScript. It made other things very difficult. So sometimes I think that, obviously, subscriptions aren't for everything. Right? You can subscribe to specific types of data, and it can work really well. Other times, it's just going to get in the way. You know what I mean?

Yeah. I just googled Pub Sub on Google Images just to get at one of those visuals as to to what it is as we were talking about it, and it suggests Publix. So it's like Publix is like the grocery store in, like, in Florida. I don't think we have those. So I clicked on it, and there's, like, these amazing subs that you can get at Publix.

So I want that kind of pub sub. Yeah.

Or, like, what about, like it'd be, like, a really good bar? Like, a you go to go to the pub and get

a a sub at the bar too. Get a sub. Yeah. Like, a nice pub sub. Yeah. That's true. Like, a real oh, man. Ricky's Pub has the best

subs. Is that a real thing? I couldn't tell if you made up Ricky's Pub. Oh, no. No. Ricky's is not a real thing. Oh, that sounds like a pop up to me. Yeah. I'm sure.

Okay. Next question here is from Jack. The question is, using the latest Node ESM imports, is it possible to use aliases? Using the old require syntax, I use the Npm package module alias, but I cannot seem to find a solution for Node v 14 imports.

In a deeply nested file. I find that the import forward/.forward/.forward/blah blah blah really awful compared to at some folder with a an alias. And, actually, Jack, I I'm gonna say I absolutely agree with you. I really, really cannot stand relative imports in that sort of sense. In fact, I will go to great lengths to avoid that kind of thing just because, again, that that is so hard for me to parse to see that Scott dot forward, like, and to try to have some sort of understanding of what nested structure I'm actually in. So I'm right there with you. Wes, you actually have a a solution for this here that you found. I have not used this myself considering I just do everything through Babble. So

Yeah. So I I've played with the ES modules in Node quite a bit because I'm I'm really excited for them to be added. There's a couple, like, things that aren't there yet. And when I was looking into if they're coming, they mentioned these things called Node, and I dug a little bit more into loaders.

And it turns out that Node is implementing the ability to add custom loaders similar to like a webpack plug in that or a babel plug in that would handle specific files or specific loading requires in a certain way? Or or I I even think it's kinda like a service worker where it jumps, it jumps in before the actual module is loaded, and you can write some custom logic in there. So I was just looking into that. I'm like, oh, yeah. I know they're they're working on loaders for Node.

I wonder if you can write your own. And it it turns out you can write your own. And they have an example on the Node docs, I'll put a link in the show notes, for a transpiler loader so that if you wanted to require TypeScript or TypeScript or Sass files, if you wanted to import them into your node, you could write a loader that sits in between, intercepts those requests and then returns the actual formatted and and parsed JavaScript. So in your case, I'm betting, I don't know if this is true or not, but I'm betting what you can do is you can write a loader and then intercept all of those and say, if it starts with like a, what is it, the at that the alias module uses. If it if it uses that, then replace that with the relative path, which sometimes is forward slash Scott dot forward slash so kinda cool. I I probably wouldn't use that just yet. I would probably just run your code through Babble and then use the Babel plug in for that. That that's probably what I'd recommend if you're using if you're using ES modules in general right now because they're they're not ready in Node just yet. Yeah. I think that sometimes a key thing is that if if something's feeling like

maybe the tooling isn't the same place or isn't there quite yet, I mean, you don't have to start using it, especially I mean, not even just the tooling, but in this case, the actual thing.

And, I mean, I see this with, like, Deno or Deno. Sorry. Deno. I'm so used to saying Deno where people will be like, I wanna use Deno, and then they they go to the Reddit, and they'll be like, what's the express of Deno? Well, I mean, it's it's brand it's people are still working on stuff. You know? The the the landscape and everything is going to change. It's gonna grow. It's going to evolve. So, with anything new, I'm sure there'll be a solution here.

Absolutely.

Next question we have here is from Laura. I've been a full time developer for 10 years, and my company has a fairly flat hierarchy.

I wanna take on more responsibility and salary, but my company doesn't have anything like a lead developer position.

Any ideas on how to move up without switching companies? I know my boss would be receptive if I came to him with a pitch, but we work full stack, so it feels like I'm already doing it all. So this is cool. It sounds like you're pretty happy in your happy in your job. You just wanna move up a little bit more and and thus make more money without having to switch jobs, which I think is really cool.

So it sounds like your your boss is pretty receptive to this type of thing. So if that was me, I would at a certain point, I think you sort of reach the top with being a developer.

And in order to maybe make more money, you have to take on more responsibility. And if this was me, I would talk to the boss about how does the business actually make money. And and then that goes from just being a dev and and building the things that need to be built and and taking care of of all of the code to how can we push this business a little bit forward. And I'm going to come to the table with technology as my special weapon. So I don't Node what that looks like in your specific company, but taking on some sort of special project where maybe we can make this process more efficient or maybe we can bring in more customers by by building something

that would would do that, a customer machine or something like that. Yeah. You know, I mean, I think you hit some really good points here, especially because I worked at a small agency before, and at some point, the only way to, you know, make more money or move up was to to get more ownership in the the company. So I think that's really definitely a place that you could look at if that's where you want to go, maybe even more responsibility, more ownership. But, again, like Wes mentioned, technology is gonna be your superpower here. Even if it's something simple like understanding the Internet requirements and maybe you can save $100 a month on Internet services, you know, just like little things like that, you have an expertise in this that other people just aren't going to have by the nature of your background and training, and maybe you can find some cheaper or maybe some more interesting or more productive solutions for the company. And, you know, companies value that kind of thing, and they'd most likely be not only willing to renegotiate a new job title, new kind of thing, but you're probably not going to make a ton more money as a developer developer just building, you know, widgets and websites without, I don't know, without without moving into a different location.

Like, I don't mean, like, physically moving, moving into a a different, like, physical skill set where you're using your skills to maybe a little bit more, like, a big picture, bigger picture stuff with this business. How is, like you said, how is this business making money? How can you assist in that? And, what does that look like for you? To me, if you are looking to remain writing code and I mean writing code full time, not writing code at all. Like, if you wanna write code full time via a full time dev and make more money, who probably opening your own agency or, you know, working for a a bigger employer is your ticket to making more money. But in terms of getting more responsibility outside of of that space, maybe you can use some of your code skills to, request a higher rate.

Next question here is from Rami. He says, in Wes website episode, he mentioned using a Gatsby parallels for images, not LFS.

Wes, do you wanna talk a little bit about your decision here?

Yeah. For those who didn't listen to that one, the problem was that I have, I don't know, maybe 4 or 5 400 images on my website, and each of those images needs to be resized and compressed and put into several different sizes, making it a couple 1,000 images. And that was initially very slow. So I use this thing called Gatsby Parallel Runner, which uses Google Cloud to resize and do all of that all in parallel. So it runs them all at the same time, and that made it much faster. So the question was, why not Gil Git LFS? So Git LFS is, large file system. It's an add on ticket. It'll allow you to put lots of large images or videos or things like that in your GitHub repo GitHub, like, making it too big. Like you can put images in a in a in a Git Deno, and I actually have all the images from my website. But I don't keep all of the compressed and and resized versions in the Git repo because that would make it way too big. So the question is why not that? And the reason to that is that the output of Gatsby is done into a build directory and your generally your build output is not included in your git Deno. Just your source files are along with instructions on how to build that specific thing. Because if you included your entire build, your entire build directory in Git, every single time you built the website, you'd have like a 1,000 change diffs that and that would both make your your Git repo huge, but also it's it's unnecessary and it gets messy. So, that's not what Git LFS is for. It's not for the output of the build. And I bet, like, if I ever got into a position where the images and videos on my website were too large for just a regular Git repo, that actually would be a good solution for holding the original images and the uncompressed versions of that.

Have a, small little aside.

Yeah.

Do you ever have git commit issues I mean, conflicts, not issues, but do you ever have conflicts with your package lock file? I seem to have them all the time, and I'm not quite sure if this is this is like a me problem. Am I updating things too much? I end up getting these, you know, Wes 1 person installs a package and then somebody else updates a package, and then when you do the the merge, the Yarn lock always complains. Then we have to dump the yarn lock, And it's like, why you've what is this thing even doing for me if I'm dumping it all the time? You know? Yeah. It's it's it's because the lock file contains the version of of the package that you're using, not just the, like, 15 dependencies that you have for your your project, but it has the, like,

20,000 dependencies that those dependencies have and those dependencies have and those and it tells you every single one all the way down.

And, like, those change so quickly that, like, if you run a Pnpm install, you're not technically changing anything about your codebase. But because those things have changed since you've done it, that that has come in. So I do run into those Scott as frequently because I don't have as many people working on my codebase.

But I even run like Dependabot on GitHub always changes that.

And then yours is out of date and I too do that. Like, I either just take whatever was coming in from GitHub or just nuke the entire thing and and start again because it it is frustrating. Yeah. I almost always nuke the the unlock file whenever it gets a conflict, because I'm like, I don't wanna parse through this and try to figure it out. It's just a Yeah. Yeah. I wasn't sure if that was a pain point that was I was, you know, experiencing just me.

That's really interesting about Gatsby. You know, it's it's funny because I I don't do a ton of static, like, big projects with images in static sites. You know? So it's definitely, there's so many it's so funny. You hit these new approaches, and they're always so easy at the small level. But at the once once you get into any sort of large level or more complex anything, there's always gonna be pain points. It's it's just fascinating to me what your pain points are with the images and and how you solve that sort of stuff. It's it's really cool.

Alright. Next question here is from Nate Norberg.

This is another question for Wes. It's any big green egg tips for here for beginners? I ordered a command Kamado. Is that it? Kamado. Yeah. Kamado style grill, and I'd appreciate any tasty tips you forgot. I I would too. We don't have a a green egg or anything, but we'll we'll get some barbecue tips. It's about time.

Yeah. So a Kamado grill is just a ceramic grill that is shaped like an pnpm, and there's all kinds of benefits, the heat retention. And, it's kind of like an oven and whatnot. I I love mine. So I have 2 big green eggs. Kamado Joe is another really popular, really nice one. And then there's lots of, like, hardware store versions that are a little bit cheaper, but still pretty good. I love using mine. I have 3 of them. That's awesome.

My tips are chicken thighs. That's like that's an easiest thing to cook on there. They don't dry out. You can't it's hard to overcook

a chicken thigh, and it just tastes so good. Chicken breast is so overrated. Dude. Chicken thigh is the the best. We moved to recently to, like, just about all chicken thigh instead of chicken breast for, like, everything. Like and let me tell you. Every meal that we make is better. Like, I I make bibimbap with, chicken. It's better. I make, crispy chicken ramen. It's better. It's just so much better. Every everything. It's so good.

True. And it's it's usually cheaper too, and it's so much better. I don't understand. Like What or is it just because it's less meat? Is that why people it's less desirable or not? As like, people think, like, oh, it has fat in it. So it's, like, not as good for you, but it's it's super good for you. It's it's a good food. It is good food. So chicken thighs, you can't goof it up. My favorite one is a little bit of sesame oil, a little bit of fish sauce, a little bit of Scott, toss it in a bowl, grill that sucker over charcoal.

Chef's kiss.

My other tips are, I just learned this Node, like, a month ago, and it blew my mind. So do you know what spatchcocking a chicken is?

I have heard the term.

I think I've had it described at least once before, but it is not something that sticks in my brain. Yeah. So if you, like, buy, like, an entire

chicken, my favorite way to cook it is you cut the backbone out. And so on either side of the the backbone, you cut it out and you have TypeScript. You throw that in a pot. You make soup out of it later.

And then you flip it over and then crack the breastbone.

And then it lays flat when you cook it. And it it cooks both faster as well as as better. And then I just learned, like, a month ago that you can cut it horizontally. So, like, if vertically is where the the backbone is, you can also cut it horizontally so that the thighs and drumsticks and all of that is separated from the breasts and the wings. And then you can cook the breast and all of that at a different rate than, the lower half, like the dark and the white meat, because they cook differently. So you can pull you can pull them when they're ready,

and I thought that was genius. I had never done that myself. Yeah. But that's just, like, another way to have it dialed in. Yeah. That is, very cool. I've seen Gordon Ramsay do that on top or Node on Top Chef, on Master Chef before where they hit the hammer.

They punch it, and they punch the the bird right in the in the spine.

Yeah. I've seen that before.

But, no, I never heard of this horizontal splitting technique. Wes, we Node, like, a cooking corner with Wes. That'd be

a money one of those. That would be a good one. I got lots. I won't bore everybody here.

I've got a yeah. We'll do a a entire cooking show at one point with with little tips that we have.

So we'll, we'll move on to the next one, but, yeah, thanks for sending that one in. Yeah. Well, moving on from cooking tips to,

bug finding tips and and bug finding tips, I'm talking about our sponsor today, which is Sanity dot I o. And the sick tip I have for you with century.i0 is to use it because, you know, there was a time when I hit a century, and it was all set up, and I just, oh, I saw some issues coming in there and, just say, you know, if I close Sentry, I I just don't see the issues. Right? But no. No. I I I use Sentry to my fullest capabilities nowadays. Like, I we talked briefly about this when we were first starting, but really needing to make the most of your time. And Sentry allows me to do that by, finding an issue. Right? How many users is this affecting? How important is this issue? Is this a one off kind of thing? Okay.

Maybe it's just caused by somebody's extension.

If it's a problem, if it's something that we have to fix just based on seeing it, I can quickly and easily create a GitHub issue. I can tag Eric, who's working on LevelUp tutorials, and he can take a look, or I can tag myself, and I can get there and, and and fix the problem. So for me, Sentry is the quintessential tool for things like this that I like. It keeps everything of Node specific classification in one Scott, I e every single error and exception that you have keeps them all in one spot and allows you a really awesome interface for finding, fixing, and really keeping track of those bugs. So check it out at century.

Io. Use the coupon code tasty treat, all lowercase, all Node word, and you'll get 2 months for free.

Alright. Next question here from Matt. Matt asks, inline code is considered harmful because of XSS attacks. But for those of you at home, it's cross site scripting attacks.

Lighthouse recommends inlining critical CSS to improve page speed.

What do you think of this trade off? I don't necessarily know too much about this. I I was doing some reading, and it's like some browsers could allow some JavaScript to be executed inside of a URL, inside of an inline CSS.

I don't Node. I don't I mean, obviously, just simply having inline CSS on your website is not going to, it's not going to open you up for cross site scripting attacks because just just about thousands and thousands of websites more than that would be exposed to that. Because for a long time, people just man, people used inline styles for all sorts of stuff just because of maybe ignorance in the past. But nowadays, inline styles are seen as something that can be added on where needed in a way that the browser can utilize those inline styles.

So there's 2 two sides of this. Sometimes, people refer to inline CSS as CSS that's actually on the elements themselves and other times writing CSS inside of a style tag in an HTML document. So, either of those could be considered inline code. I personally have not thought too much about cross site scripting here. I've written CSS a long time, and I just kind of let the tools handle it for me. Right now, styled components sort of creates generates classes for me, but we do have that that CSS, the critical server side rendered CSS coming in from the server.

About cross site scripting attacks, Wes, do you know anything specifically about this? Because I've seen that it was possible, but the article that I was reading was, like, very old, and it was talking about opera. So I I don't know anything about if this is an actual issue.

I feel like this is one of those like, I heard it once, and I just believe it until until I'm dead. Like, I have no idea. I might be wrong here, but I have no idea, like, why would inline code be a potential XSS attack? I saw it. I don't understand. JS that anytime that there JS a URL

in the CSS that that led some JavaScript could be executed there? But, again, the only thing I saw in relation to that was about, like, an old like, Opera version one, you Node. I mean, it was it was in the it was back when, you know, IE day, so I don't really know if this is a current problem.

I I can't imagine it is just because of how many things use inline CSS. I've I've never yeah. I I I can't imagine it's an issue.

No. I I don't think that JS an issue either. Like, Node. There's nothing wrong with using either script tag and then JavaScript inside of that. Go to facebook.com and view source.

You'll see that they use that. Pretty much every website will have a script tag on it. And there's nothing wrong with using style tags in CSS to, to put it on. So I don't think that that is actually an issue. I'd probably whenever you hear, like, a rule like that, push back and ask why. It's probably a very valid rule. You definitely need to ask, like, why is that an actual thing and understand what the the idea is behind it because it might not apply to you rather than you just, like, sort of blocking ESLint, entirely.

Inlining CSS to improve page speed. Absolutely. Like, kind of a hard thing to do. And that's why we love Gatsby so much because they they do that for you.

But absolutely, you should you should be doing that if if your setup allows you to do it. Yeah. Totally.

Next question we have here is from Yarn Haslam. What advice would both of you have for being a first time father, And how can I best prepare? My wife is pregnant, and we are both very excited. Congratulations.

I want to do the best I can at being a good father. Our baby is due in January. Both of you are fathers multiple times. I would love your thoughts. Oh. Yeah. That's that's a good question. I I maybe should have prepped some of this. Why don't you go ahead, and I'll think of some of my points.

My my points are are are get a a partner who is a child psychologist and just refer to them for everything because that's that is what I do.

No. I I I say something, and then Courtney says, oh, you need to reread that book, and we're we're referring to, like, the, how to talk so little kids will will listen to the book. She's like, you clearly don't remember the book.

So I I, I, honestly, I I differ a lot. And maybe it's just because, like, I I think I had a good good model. Like, my dad Wes, you know, he Wes, really great, and, I don't know. I just I I for me, I'm I'm gonna run on instincts here. I have no real training here. I don't know what I'm doing. Just about never know what I'm doing. And for a long time, I was actually pretty uncomfortable as a as a father if I, you know, can say that correctly.

And for a long time, I was feeling kind of, you know, uncomfortable as a father because when they're first born, they want mama for everything. And if you hold the baby, the baby cries and, you know, you can run through the checklist of all the things that could be wrong, and the baby could still cry at the end of the day just because you aren't mom. And so it was a a little while before I was feeling competent and comfortable as a father because, again, it feels like for a little while, like, no matter what you're doing isn't working.

So, at least, that that could be the case. Right? So for me, it wasn't until Lennon started being able to play more, and and not not like a little boy play, but, like, even just, like, very simple stuff where, like, Brooklyn's just getting to that age right now. Right? She's just over a year old, so we can do a little bit more involved games. She's shown me things. She's climbing the stairs. We're playing outside. We're we're we're doing those kind of things. She responds better to to things like tickle or or it's just those little things like that that make it a little bit easier for me to, to really feel comfortable as a father because you get to play more. Once it got into play territory like, I can play all day. I can do that. That that's fun. So that that for me was a bit of a a learning experience, and I felt pretty useless for a little bit. Just make yourself available,

early on in those early days. Oh, that that's good advice. I just jotted down a few things here that is important. I think, like, one of the best ways you can meet a good father is supporting your partner.

So Yeah. Totally right.

Learned very on early on. And my sister actually told us this is nobody wins the Who's More Tired game.

You're both you're both more tired. Yes. When you're both up all night and you're miserable and the kids aren't sleeping and everything is awful, nobody's gonna win the I'm more tired game. So that's that's try to support your partner and and think about them as much as possible.

Take time for the kids. So, like, I take a lot of time off in both in the summer as well as, like, pretty easily will just ditch work and go hang out with my kids. As hard as that is for me, because I would just love to sit on my ass for a couple more hours and hack away on things, and there's always more projects.

You can you can tell.

Like, my my daughter gave me a, like, a card the other day that says, I love when we go fishing. And it was like, oh, man. I'm so glad that we we I ditched work and went no one's, like, sort of, like, own that.

And then, also, I think, like, try like, one thing I'm thinking a lot about now is just, like, how do you be a role model to your kids and how Yarn you treat other people? So just like whether that's people in your family or just people on the street or people that you run into. And I'm starting to see that through my kids. They just talk to people at the stores all the time. And that's something I always do. I always whenever at the at the grocery store, I always ask, like, what's the most expensive bill you've ever seen? And then the people at the grocery store love hearing that. And, like, I'm super curious. Like like, what happened? Or, like, if some you know, sometimes you have the grocery store, and there's somebody checking out with, like, 40 pineapples in a cart. You're like, what's going on there? What are you doing with that cart shirt? All those pineapples? But, like, my kids are starting to, like, take that on and, like, just talk to cashiers and stuff like that. And I think that's I think that's probably the best

you hear that kids soak up everything. But, man, kids soak up everything. Landon says the funniest stuff, but, like, you don't even you don't even, like, know that he's paying attention. Right? He's he's doing something else, and all of a sudden, he'll be like, I really need to go to my office to work on my work. What am I doing? I need to go on my work. And he's, like, saying the same stuff that you're you're saying or doing or whatever. Yeah. He's just like mimicking you in those sort of ways, and it'll speak you think, oh, man. I gotta be a 100% careful all the time about exactly what I'm modeling because that that modeling aspect is so key.

Oh, absolutely. One of our kids dropped a swear word the other day, and I was like, what am I doing?

I didn't yeah. Yeah. That's funny.

I cannot imagine. We've it's funny because in in everyday life, I'm dropping them way more than Courtney, but Courtney definitely has the skill to drop them in front of the kids way more comparatively. It's like I I I'm pretty good at setting up that filter in front of the kids. And, there JS Courtney's are a little bit more emotive where it's like, I cannot stop this from coming out.

Oh, man. That's so funny. Alright. I just added that to the the Pollock title as fathership.

Yeah. Yes.

Next question is from Talak Mehdi.

Are present web developers merely crud bastards for corporate culture? If not, what entrepreneurial opportunities are open with JavaScript and hooking up React with the back end node, Laravel, and reading Google Maps Docs? Of course, the list isn't exhaustive, but you get my point. Right? Note, I'm not interested in selling courses or creating frameworks. There okay. This this is a weird question.

It's basically saying in the correct me if if I'm wrong here, but it's basically saying, like, what are their what are the interesting career possibilities with

this stuff? Right? Is is that I've got these skills. Right. Am I just gonna be updating

text boxes for the rest of my life, or is there something a little bit more interesting? And, also, Deno, I'm not gonna create a course. So they're looking for job advice or job inform like, what are the types of jobs? But there seems you know, the cool thing about this this platform, the web specifically, is that the browser can do so many different things. So if you're really interested in doing different, more exciting things, There's a lot of opportunities out there. If you can think about it, just think about how many different things. Right? So if you wanna work on some more challenging problems or some more interesting problems, we have what? We have, web graphics. We have three d on the web. We have video for web. We have torrent for web.

We have a ton of very difficult problems where you could do all sorts of cool stuff.

Maybe you just like building animations and interfaces, or maybe you like creating portraits with CSS.

So I would not describe it any of the work as being, like, just inherently just CRUD. I think CRUD makes up a very small percentage of my development time. A lot of my development time is building interesting interfaces and getting around really complex interaction problems and understanding how people are using things in a little bit more way than that's instead of writing just, like, database updates or or that sort of stuff.

But if you're on the the server side of things, I don't Node, maybe a little bit more difficult because that's not my specialty. But there's there's a lot of really interesting stuff going on that's not just CRUD in my mind.

Yeah. I agree.

I think if you have that sort of base set of skills, then those are the type of jobs you're going to find.

And if you want to steer clear of that, and there's certainly nothing wrong with that. Like, I built a lot of I build a lot of CRUD apps in my day to day. And, there's always new and interesting stuff that that comes up in building UIs around them and then the data validation and all that. But if that's the case, what you need to do is you need to like find whatever corner of the Internet, like Scott was just saying, whether that's animation or video or, building desktop apps or anything like that. And you need to find out what that thing is and dive deep into that and start writing blog posts and making YouTube videos.

And because, like, the jobs that are doing that really, really niche and interesting things, the people that get those jobs are usually the people that are diving deep into them, and they're they're sort of known for it. I don't think anyone's just gonna hire you off the street and Sanity, like, yeah. We need to start, like, 3 d modeling this DNA samples.

Do you think you could do that? I know that you're really good at, like, mapping state to props.

You know? I think, like, you probably can get some really cool jobs, but you need to to start showing that you have those skills first. Yeah. I think that's the I think such a key thing is that

you can get good at anything and probably get a job. I mean, if yeah. On the web right now, unless it's like, oh, I've mastered Netscape. You Node, if if you get really good at anything in 2020 on the web, there's going to be job opportunities out there. Somebody's gonna need those crazy video manipulation skills you can do. Somebody's gonna need those crazy animation skills. And if you're showing it off and you're doing the work, then people are gonna come to you first. Right?

Yes. Next question we have here from Codefinity.

Have you used any of the ES 6 generators in the yield keyword? It seems like they are a mechanism for async await under the hood. Thank you.

So using async await is probably sufficient. I like this question because when I did my ES6, we didn't have a sync await. And I taught, generators inside of that.

And since then, I've not actually found a use case for them in my day to day work. So async await will, will compile down to generators if that works out with the browser support.

But they're Scott the exact same thing. Kind of a cool thing about generators is that they can sort of be like long running. They don't just have to be awaiting inside of a function. So like the example that I had in my course was, I think it was like a barber shop, where at the start of the day you have an empty array.

And you can take your iterator and call Scott next on it and you get the next customer. But as people Yarn, as people come in the shop, they get added to the end of that array. So you just keep you just keep calling next. Oh, it was it wasn't a barbershop. It was, the deli counter at the, you know, at the thing? Deli? Yeah. Mark's Deli. You know, you get the little ticket at the deli counter, and then they're, like, next number is 47. Right? And Node get your meat.

Exactly. And if there's, like, nobody in line anymore, then they stop changing the number. But if there's lots of people, then you just push next after after the next customer. So that was, like, my one example.

Very good example. Yeah. It was it was I was proud of it. But, quite honestly, I have not found a good use case for for using genres in the wild. And I think that async await does meet most of my use cases. Node to say that it's not a good part of JavaScript. It's just not my I have not run it into into it myself. So just tweet us if you have a good use case for generators. I'd love to see that.

Same.

Cool. Next question is from Anthony.

With a legacy project that has all the build's dependencies, how do you decide when to retool and when to fix all of the npm audit issues? Now this is a question that so it really depends on the project at hand and what the life cycle of this project is going to be and what these audit issues actually are.

Me, personally, if this is a project that's going to be, Wes, it is a legacy project, but, it doesn't have, like, a a it's not going to go away anytime soon. I'm gonna invest that time. I'm gonna rip it out. I'm gonna start, you know, refactoring things. I'm going to update dependencies, and I'm going to do it 1 at a time until it's all done.

And that's just the type of person I am, but I'm also gonna make sure that we have tests in place so that things don't break. I'm going to not worry about doing it all in felt 1 fell swoop, just doing a little bit at a time.

Of course, there's some things that you can't do that with. Eat that frog, take care of some of the big ones, and then refactor down that way. As long as you have those tests and you have the time, I would go for it. If you if you don't have the time or this project is, like, not going to, survive for too long, then maybe that that changes the discussion a little bit. So, how do you decide when to retool and fix all the npm audit issues? For me, it's like, really, what is the lifespan of this project? Am I going to be the 1 maintaining and working on it forever? Because if if I am, then I'm going to fix it. If it's somebody else, I would probably recommend, that that person does all those updating because I don't wanna update a bunch of stuff I'm not gonna fix, essentially.

I've some somewhat of a similar, approach to to this type of thing. First thing I'll do is I'll look at the actual security issues that pop up and see if they're actually security issues for my application. So you you run it, and it says you have 300 Sanity issues.

Usually, what the case is, there's like 1 or 2 or 3 dependencies in there that are being triggered over and over again.

So take a look into, like, what is the actual security issue. And usually what will happen is they will show you how the security security issue will arise, and then you can reference that with your code to say, am I using it in that way, or or do I have to really worry about that? And almost always, it's like, if you use this thing, but you also have a regex that interpolates a variable, there's a slim chance that somebody might do something like that. And you're like, oh, okay. Well, I'm not doing that at all.

So that's that's not really an issue for me, and it it'll be fine.

My next thing I'll do is, sometimes I'll just try what I call a YOLO update, where I just, I run n c u, which is npm check updates, and then dash u would just update the package JSON.

So I'll just go blow it away, update the entire thing, and try Scott the app, and then run any tests that have it and see, like, can I can I work through any issues that are popping up in the next half an hour, an hour? And in most cases it's just a matter of, okay, I'm running into these running into these errors. Let me just Google those errors. Oh, here's a GitHub issue where somebody else hit that error when upgrading, and here's what to do to to fix it. But if honestly, if it seems like too much work, roll that sucker back and just live with the versions you have. There's there's nothing wrong with or if there's no security issues, then just just keep running the thing that you have. I have apps that run on, like, Node 8 right now. And, until my hosting platform will no longer run Node 8, until there's a major security issues with Node 8, then I'm not going to spend the time updating this thing just yet because in some cases, it's just not worth your time and the potential things breaking and and whatnot.

Yeah. Make sure you commit back up all that stuff before running a yellow update just so it's easy to jump back in time and fix everything up in case it's not working. I do that too. I use Yarn upgrade interactive, and I won't do more than 1 red dependency at a time. If it's a red dependency, I'll give it a try sometimes and, see What is red? Like a full version bump? Correct. The full version bump. A a 5 to a 6.

That was actually an entry of 5 to 6. Wasn't that the original name of Babble?

Yeah. 6 65.

65. Oh, yeah. That makes more sense. So yeah. Node. I I'll do that YOLO update as Wes, but, again, not just doing it willy nilly. Sometimes Wes they do a major version update, absolutely nothing. There's no breaking changes. And, if you see that in the documentation, that's the perfect use case for this thing. Go ahead and do it. Run all your tests. Make sure everything's still working.

Visually confirm it yourself, and then, Node pat yourself on the back for fixing some sort of an update there. So, yeah, I I I update very frequently. In fact, I, I know this is about legacy projects, but sometimes people ask me, you know, about keeping things up to date. And if there's, like, a non breaking change in a package, I'm updating all the time. I mean, we have our Wes in place for a reason, and, I don't wanna get too far behind me. You get too far behind, everything gets a little bit more difficult. So I'm running my update stuff at least once a week, which sounds crazy. But, man, every single time I run it, there's a a ton of new updates. That's for sure. And I'm addicted to updates. It's like a dopamine hit for me even though I'm not getting anything.

My main apps, I'll run it once a week. No problem, just because it's so much more manageable. You can usually read the change log of the new thing that updated.

If it's just a point release, like a a 1.0.1 to 1.0.2, I'll just I'll just update that because that's bug fixes.

A 1.1 to like, a 1.0 to a 1.1 is usually not breaking changes as well. It might be, but they're usually just adding features and fixing bugs, and then a full version bump. And that's when you Scott really read the read the change log. But, like, some good like, especially Mongoose does this JS they're they'll they'll they'll wait, like, 2 years. If they remove a method, they'll wait, like, 2 years and and just throw warnings in your console for 2 years but while you fix it, and then finally deprecate it, which is really cool of them. Right. Give you that time,

before. And they'll they'll alert you in the console. Like, React does that, says, hey. Don't use, this unsafe method or whatever.

Those things are definitely helpful. So does the Npm Vercel, whatever the n NPU, is that what it is? Or a n c u. N c u. Does n c u not color code? Because one of the things I love is yeah. It does or it does not? It does color code. Oh, okay. Yeah. Yeah. Because that's what I really like about the Yarn upgrade interactive is that, like, red for major version, yellow for minor version, green for patch. I mean, really easy to see at a glance what's good and what's not. Yeah. That that's key.

Next question we have here is from Mohammed Talab. In what instances do you prefer to use rem versus m versus pixels for size? I usually like to think of it as so. If I'm okay with an element's font size being based on the parent, then I'll use m. If not, I'll use a rem. I almost never use pixels anymore except for on the HTML element. I'm assuming that's to set the base font size. But even then, I usually use a percentage. If you set the HTML element this is me jumping in. If you set HTML into what? To 62.5%, that gives it a base of 10.

In practice, Yeah. Meaning that I just said 10 p x.

In practice, I found it a bit hard to gauge, what to expect ems, because of nesting issues. So So I've been leaning towards using REM, though I thought understanding the REMs can be less modular. Can you, Mai, make some decision on this? So we've talked about this a lot in on the podcast, but we can we can do it again. So sizing things, what I usually do is I'll set a base font size on my HTML element, usually just a 10 p x. And then I set most of my other stuff to be rems, and that's going to be based off of 10. And that way, if you ever need to scale up the entire website or down the entire website, then you can simply just set the change the base font size off of that. So at the end of the day, I'm still calculating in my head how many pixels things should be because at the end of the day, our screens still are in in pixels. Right? For m's, I very rarely use m's, but I their use case is for exactly what you said.

When you have when you wanna size something based on its parent font size, then you use an m. So in my latest course, we did the logo entirely in CSS.

And everything, the border size, the padding, the font size, the amount of tilt on each of the things, all of those things were based on how big it was.

And if I wanna scale up or down the logo accordingly, all you have to do is change the font size of the logo root, and then everything else will will scale exactly the same amount up and down, which is cool. And you could you could do that with Calc Calc as Wes, But it's pretty easy to do with Ems. And same with my if you go to Wes and go to one of my blog posts, there's like a little yellow square in the top right hand corner of all of my h one through h six elements.

Those are M's because I said make this, like, 2 m by 2 m. And then regardless of how big the font size is, it it's always scaled up proportionally.

Yeah. For me okay. So for me with font sizes, I think everything things that made me a better CSS developer when I was learning CSS.

Font sizes, I just about, never declare a font size on a container ever. I I I'm trying to think of a situation where I would do that, and that's made working with Em's way easier. Now granted, if you're not declaring a font size on the container and they're just relative to the body, you might as well use RAM anyways. So there's not really too much of a a benefit there, but maybe it leaves the opportunity open. And I think the the key distinction is that you'd know when and why. But, like, you know what I'm not doing JS I'm not saying, you know, my my header font size is 16 pixels when I really mean the nav is. You know? If I if I have a nav item, that styling is going to be attached to essentially that element itself, whether that is the list item or whatever. And then that way, you don't have to worry about those weird issues that you encounter when you're 1st learning m's or rims Wes this thing is not the correct size that you're expecting ESLint to all because of the root is not what you're expecting it to be, whatever it's relative to.

So I I don't define any font sizes on containers.

I basically set up my entire typography system as font sizes on elements, and then I also also set all of those font sizes as custom properties.

So I have, like, an h four custom or CSS variable. Sorry. I think they're actually, like, legit called CSS variables now and not custom properties anymore, either way. Because I've been calling them custom properties to try to stay, like, legit, and then I think they're in can I use as CSS variables now? Either way, I I set up, like, an you know, Node have an h two, as that's my CSS variable just in case I need to reset an h three to be the size of an h 2 or somewhere in in the code. Right? But, again, I'm only ever updating the font size on the thing itself and not the container to avoid any sort of weird root issues. But, in your use case, that is, where you have, like, the squares being relative to the parent. That is such a good use case. But, unfortunately, that that type of thing, it, like, doesn't pop up that much. So me, personally, I use EMS, but for no good reason, really.

I I functionally use them the same as as rems and most likely use them interchangeably just because of my practices in CSS.

Speaking of fonts, which have stacks font stacks, this is the one No. No. I think that was a good transition. Yeah? Speaking of fonts, which have font stacks, another type of stack that we should, think about is one of our sponsors, which is Stackbit.

So Stackbit offers developer tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack website.

So if you've got a Jamstack website already, so whether that's a Gatsby website or Next. Js or Nuxt, then you've already hooked it up with whatever CMS you're using, on the back end. They they support all kinds of, different CMSs like Sanity, Contentful, Datto CMS, Netlify CMS, Forestry.

So you you still use both of those things, but you JS the developer can take, Jamstack to allow you to do things like real time editing, real time previews, all the kinds of tools. It's really cool. It gives you that extra like, I think, like, if you're building a website, a lot of the marketers are really going to appreciate this this feature to add it on to your JAMstack website because it fixes a lot of the little downsides that we have with the JAMstack. So check it out at stackbit .com. It's the best way to JAMstack. Thanks so much to Stackbit for sponsoring.

Let's grab 1 more question here, and we will, pick it up from from there.

Actually, this is this is a perfect question from talking about Jamstack and and things like that, headless Wes. This is hello, chaps.

Hey. Hey, Billy.

Thanks so much for the show. I learned an awful lot listening through. I've been dabbling in development for some time Node, and I've taken on a project for an express site, which aside from a few static, pages, will include a shop with a number of small items, a customer dashboard for order tracking, submitting supplementary info, and the image centric journal blog section.

I've listened and relistened to your CMS roundup, which is great. But having worked through Wes' Node course, I'm kind of thinking, why would I spend time integrating a CMS when I can just build an ad post page for admin users? Save the post in MongoDB, upload the images to my server, and use Cloudflare's free CDN tier.

Please explain to me why this or this isn't a bad idea or more generally share your wisdom on when a CMS is actually necessary. Peace.

I think this is a really interesting question, because, like, that's the answer. It's like, why would I use a ex external package or a service when I can just build that myself? Like, Wes course showed me how we can make an admin area. We can edit the thing. We can create a form. We can update the update it, and you're you're up and running. So, like, first of all, good on you for doing that because I think in a world of slap all these services together and all of a sudden your website costs $400 a month, being able to just do it all yourself is key. But why would you want to use a CMS over just building it all yourself? Because reinventing the wheel, quite honestly, there's a lot of finesse that, like, last 10% of building a UI, hitting all the different edge cases of being able to do something. Like, your client's gonna come in and say, alright. I have these 2 lists of content. How do I reorder them? And then also, I have 1 in the wrong list. I wanna drag it out of that list into the other list. How do I how do I do that? And you go like, oh, well, you can't. Like, I didn't build this like amazing drag and drop UI where you can cross data paths and relate content and things like that. I just gave you a text box where you can type it in. And that's where CMSs really tend to to shine because that, like, example I just gave, like, that might take a developer 2 weeks to build that thing when it's just like a small percentage of of the little UI that you get for free in a CMS plus. Things like an API, data validation, maybe a GraphQL API comes already with it. There's a lot to gain in terms of speed and not having to reinvent the wheel when you reach for a CMS.

But then there's also a lot of control that you can have when you you do go ahead and build the whole thing yourself.

Yeah. I think I experienced this firsthand myself just about all the time, because I, you know, coded my own back end entirely for Vercel up tutorials, and we had to do just about every single basic basic CMS feature that you can imagine in my platform. Right? Anytime I need it, I gotta build it. Drag and drop to reorder, whatever, I gotta build it.

And it's both a strength and a weakness because, at the same time, some of the the things I'm most proud of in the LevelUp Tutorials code Bos warp some of the admin Node, as in my, like, tutorial builder, the course builder, the, the the series importer. All those things are really cool that I've made, and I really spent the time to make them cool. But imagine how many hours I spent building that stuff that I could have been spending doing other things, you know, adding more functionality, recording more, just all sorts of things. And now granted, I really like building admin tools. It's a lot of fun That, like, basic CMS sort of stuff is is fun for me to work on.

But at the end of the day, sometimes, that is just like hedging. Like, how much do you need to do yourself versus, what what is the actual cost of making these decisions in time? Right? I don't know. It it it's a tough because at the time when I made level of tutorials, there probably wasn't any good option to do all this stuff. Now there's, like, things like ReactionCommerce or or Ghost or or some of these other platforms that could have done all this stuff for me in ways that are probably a little bit better because there's more manpower working on it. So there's definitely trade offs to think about there. And, custom tools are really sweet, but they are definitely a big heavy

chunk of your time. That's for sure. Alright. Great question. Thanks so much for asking that. Let's move into some sick picks.

So this sick pick is kinda interesting.

Have you have you heard of foam, Wes?

I've heard of foam.

Foam. What's foam? Foam

bubble.github.ioforward/foam. GitHub kinda tough. That's not the best URL.

This is totally unrelated. I was listening to, podcasts just for fun to to hear what kind of other, tech podcasts are out there, you know, just to to give a listen, and this person's like, I'll have it in the show notes. They didn't. So it wasn't in the show notes, for a link or for this thing I really wanted to to check up on. And then they were like, or you can just visit blank.blankforward/blankforward/blankblankblank, and I was just like, oh my god. It was like the longest URL. It was, like, not even related to anything. I was just like, come on. I'm not gonna type this in correctly. Okay. So, Foam. So Foam is really interesting. Foam is a personal management sharing solution inspired by Roam Research built on Visual Studio Code and GitHub.

Now, if those and if any of those words sounded familiar to you, you might you know, that give yourself a pat on the back. Some of this stuff is really cool. I don't use Roam myself. I use something called Obsidian.

Obsidian is an application for taking connected notes where you can easily link between things, and I found it to be a better fit for my notes than something like, Notion. I I use Notion for databases and tracking and all sorts of stuff, but I don't use it for my notes because Obsidian is really nice with this whole, man, there's a method that starts with the z. It's a long word. I'm sorry. I'm blanking on this method method's name. Oh, the JS that okay? Oh my gosh. JS that okay? That is not a word that I'm gonna be able to say correctly without hearing somebody else say it, but it's a whole building a second brain thing where you can do this sort of, really neat little linking syntax and have all of your documents be linked in this giant graph of connected information. It's fantastic.

So I've been using Obsidian to do this because it writes to markdown files.

And then these these cool people created Foam, which is basically a Visual Studio Code version of this exact same thing Wes you can work in markdown apps. You get the graph view. You can link between things. It's all markdown.

It's all connected. So instead of having to have some third party app that is, like, essentially mimicking Visual Studio Code, Well, you just got it all in Visual Studio Code, and, it's really cool. It's very, very cool. So, check it out here. It's still early days, so a lot of the install stuff is is a little rough, I found.

There was, like, some interesting things where it's like, oh, to to get started, just clone this GitHub template, and then you clone the template. And the problem is is the template has, like, a bunch of, like, like, custom Versus Node extensions and configuration.

But for some reason, it's like they felt the need to define a theme and define a font and stuff like that. It's like, I don't want you to change my font or theme. I want I want you to use my theme and font.

So just little things like that, but it's it's still early days. It's very cool. If you're looking for a free note taking, open source application that uses, sort of like the Roan research ideas, then you're gonna wanna check out Foam. It's very cool. I'm very into it. Beauty.

I'm going to sick pick a YouTube video called how to use a multimeter for beginners. So I've had a multimeter forever, and I know how to use AC and DC, and check for continuity. But I was just sitting there the other day and be like, I don't know what all these other things on this multimeter are for.

I don't know why there's different numbers, on AC and DC. I don't know what resistance is. So I sat down. I was like, I learned it all. And it's just like a 10 minute video, and just sitting at my desk with a couple electronics parts, you can sort of follow along yourself and learn a lot from it. I think it is a modern skill that everybody should have. So check out this. I'll link it up in the show notes, how to use a multimeter.

Cool. Well, awesome.

Very thick. I'm gonna I'm gonna check that one out. Shameless plugs, I have a new course on CSS design system using CSS variables. It's very cool. The whole focus of the course is to accomplish as much as possible with writing as little actual CSS as possible and making things available through sort of configuration, design variables. Some people call these design tokens, and they're not necessarily design tokens, but it's following that same kind of idea. And so this whole course is again about writing minimalist CSS to accomplish some very cool things, including creating a theming system. So not just a a Yarn Node, a light mode, but, you Node wave ray 64 theme if you want it. So check it out, level up tutorials.comforward/pro.

Beautiful. I'm a shamelessly plug all of my courses, Wes Bos comforward/ courses. Use coupon code syntax for $10 off. Learn you a thing or two, JavaScript, CSS, you name it.

Enjoy.

Cool.

Alright. That's it. Thank you so much for tuning in, and we will catch you on Wes nope. Monday.

Peace.