Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × 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, the podcast with the tastiest web development treats. We've got another potluck for you.

Some really good questions about what is memoization and Portfolio questions, some ethical questions that we're gonna put on there. Some really quick questions. So thanks everyone for submitting them. If ready. You've got a question you'd like us to answer on a potluck in the future, please submit it. We love getting them. Go to syntax.fm.

Top right hand corner, there's a button. You can click it. It says ask Paul a question. You put your question in the box, and we'll probably answer it on a future episode.

Today, we are sponsored by 3 awesome rid Linode, cloud computing developer stressed, LogRocket, JavaScript session replay, and Cloudinary image hosting and ready. Transformation. We'll talk about all of them partway through the episode.

With me, as always, is mister Scott Talinsky. How are you doing today, Scott? Hey. I'm doing good.

I, updated my computer to Monterey, the macOS beta for macOS, know, because I'm like that. Yeah. Yeah. I just updated the whatever the most recent one is. But how is it? It's good. You know, the only reason I did it is because I had somebody saying that their 16 inch MacBook Pro ran a lot better on it than it did on Big Sur, which, you know, I both know that the there has been some We are performing stuff on this 16 inch. Mine, specifically, has been having choking really hard on some video stuff. So, I figured, hey. You know what? If it's already not good, it might not be, you know, sure enough, it could get worse, but, I'm willing to roll the dice a little bit. And so far, it's been extremely stable. And let me tell you, I really can't even tell the difference, which is probably saying something about this update. It's you remember when Snow Lion hit and there, like, was no difference to it from Lion. This is really feeling like that. There's not a big difference here. And for the most part, I think it feels The same. Maybe it's all under the hood. Yeah. One nice thing about it is I'm also running the betas on my my tablet And my phone for Mac stuff, and there's this new focus settings that are baked into the system. Like, you've had do not disturb before, I think the focus settings are really, like, awesome because you can customize even which home screens are showed, which apps are allowed, and you can make your own different. It's imagine imagine having do not disturb, but you can create your own do not disturb modes, like one for work, one for after. Oh, like profiles. Yeah.

They sync across all your devices, so computer, tablet, and phone. And so it's really nice if I wanna have notifications off for recording on all of my devices. I could just go into recording mode, and it can do that across all of them. You know, put all of my devices to do not disturb. So, well, you know, that's I think the only benefit I've seen. But so far, It's running really smoothly. I haven't had any crazy crashes or issues. So That's good. I'm very curious if any of the stuff will get faster. People probably

Send me a email or Instagram DM at least once a week and say, hey, Wes. Are your MacBook fans always on? Always. The answer to that is, yes. But I run noise canceling headphones and have a de esser on my microphone, so I never notice it. But they always are about to rock a ship off because I run 2 4 k displays, and that thing is cooking

When trying to pump 4 24 k displays out once. I feel like mine cooks no matter what, and it's it's like I I always call it it's like a built in white noise generator for my office Because that's really what it is. It never shuts off.

So, yeah, I'm, really counting down the days till I can get an m one or whatever and rid Sell this one or Yeah. You know, Courtney needs a new computer, so she hasn't had a computer in forever. So maybe I'll just give her this one. Who knows? There you go. There you go. Alright. Well, let's jump into it. 1st question

is from Mauricio from Columbia.

Rid. Can you please explain the concept of memoization in JavaScript? Thanks a lot. What do you what do you think, Scott? You wanna take a stab at this? Yeah. So memoization

is one of those things that I think sounds harder than it is. It has, like, a fancy name, and then isn't is really a hard concept to understand. So, basically, when you think about it, if you have functions and this function Yeah. Especially in componentized worlds where we have, like, React components. This is a good context because this happens very frequently in React components where you might throw a function into The body of your component, and it needs to calculate some bit of data, spit out the result, and then use that result in the component.

The only problem with that is that if the components rerendered, essentially, that function's components recalled, and then it's So, basically, memoization is caching. Right? You're saving the value somewhere else and saying, hey. If I know that this value is going to be from here every time. I don't need to waste the time running this function again a second time because it is rid Just extraneous operation. It's it's unnecessary.

Yeah. So that that's really why it exists. It's to cut down on the amount of operations you need to do given the same inputs and outputs.

Yeah. I I always like to think of it memoization.

You are re memoizing it. You are memorizing what the output is. And, generally, that involves in JavaScript, at at least, that involves using a memoized function, and then you pass it your original function. And then you create a new, new function, which is generally called, like, a high order function, and then you have this new I I like to think of it as like a loaded function. You can call that sucker as many times as you want, and you know that internally, it will say, read. Alright. I've never called this function before.

I have to do the math of adding 2 plus 2. This is a super simple example, but rid. Imagine adding 2 numbers together with super resource intensive, and it was very, very slow. So you're gonna say add 2 plus 2, and you get back 4. Now the 2nd time that you run it, and it's gonna say, I've already done this once before. And a matter of fact, I stuck the answer over there on the shelf. Let me just go get the answer directly. I'm not gonna bother rerunning this thing, rid And I'll come back to you with the answer very quickly.

That's really handy in, like, API calls as well. You can call the same re API call over and over again. And if it's like, oh, well, I already already ran that API call once before, I think that's more of a caching, I guess. I'm not sure if that's Considered memoization, but the same kind of idea, not not necessary to refetch this thing.

Word.

Yeah. That's pretty much it. Rid And I think I think the for a lot of these terms, you know, they can be scary like a word like memoization. But like you said, it.

It's memorizing it. It's it definitely fits in there. Right? Yeah. Definitely a scary one. Yeah. Totally. Next one is from Evan McFerran.

He says, I've been developing for a while now, and I wanted to know and I was wanting to know if there was some sort of catalyst that I should be aware of that screams, are ready for a full time job.

I'm currently working on a movie searching Angular database Website for my portfolio, in case you're interested, I'm pretty comfortable with the basics of front end JavaScript, SCSS, HTML.

Okay. So Evan is wondering if there's anything that's ready for your full time job. Evan, you are ready for your full time job. Why? Because trust me. You are. If you can get a full time job somewhere, you are ready for it. If you're wondering if you're ready for it, just start applying for things. Start applying for entry level positions.

It's not about necessarily if you are ready for it. If you get an entry level position anywhere as a developer, is going to be infinitely better for you to learn in than it will be if you were, let's say, trying to learn on your own. I think once I got my 1st full time job, the amount that I learned just shot up like a a rocket ship just Straight up to the moon. Right? It would, like, just just win right up because you get put in in in situations and environments and things that you you might not have ever been in when you're just on your own, you're gonna figure out what things are actually important, and you're going to have mentorship. Not necessarily always a standardized mentorship, but, like, having other developers around you, being able to ask questions, which you should and will be able to do, like, that right there is totally totally worth it. So, if you are wondering out there, should I start applying for jobs? The answer is yes no matter what. I say, the moment you get that 1st job, I didn't feel like I was ready for my first rid job I felt like I hardly knew what I was doing. But let me tell you, they were really supportive of me in letting me work, and I grew so, so much very, very quickly, it wouldn't have happened if I wouldn't have gotten that job. Beautifully said. I, I'm going to agree. I'll just go on to the next one here from Johnny Johnerson.

I have an re Ethics question for you. I recently took on a freelancing gig that requires a custom admin dashboard, and I wasn't really ready. Sure how to design one of those. My solution was to look up a premade bootstrap template that can be purchased for 50 to $500 and just recreate it myself. Rid. I looked at their live demo and reconstructed a very similar dashboard to myself using the same UI library.

The outcome rid is not perfect, although it's very close. And I never looked at their code base, so there's probably many differences there. But still, I can understand why some people, rid I might be upset at my attempt to copy somebody else's design. I'm not reselling it as a theme, just using it in a freelance project. What are your thoughts on this? So This is always like a dicey thing of, like, okay. I need inspiration, or I need some ideas as to what to do.

I'm gonna go look at what other people have done, and then I'm going to get some ideas from that or or just, like, use the same UI library. It's always like, It's a delicate dance. I've certainly had people do this to my courses.

On one side, there's people that just rip off Every little thing right down to the, like, the little rotated values on a button or the way that you explain things. Rid And then on the other end, there's just, like, somebody say, oh, Wes put a FAQ at the bottom. I think that's a good idea. I'll go ahead and do that as well.

I think In your case, because both like, you are using, a UI library, so It's not necessarily like you're just reusing some of the same pieces that they have. Right? So, first of all, I think that is probably fine.

And then the other thing is that you're, like, you're using something that is meant to be or you're you're sort of working off something that is meant to be reused. You're not It's not like you're going to a direct competitor and just ripping off all their stuff on top of there. So I think if you just use that as inspiration, as ideas, just to to lay something out, you didn't rid Jack, any of the code? I think you're probably in the the green right here. I think it all always just comes down to, like, what is your gut feeling? Am I just rid Ripping off this type of thing, and I will specifically not go to if I'm working on something and I know somebody has done something similar, I'll just intentionally not go and look at what they've done because I don't wanna, like, be in that situation where I'm like, I wanna do this, but They did that as well, and I don't wanna make it look like I'm I'm ripping them off. What are your thoughts on if this is ethical or not, Scott? I think this is a tough one because

It is a freelance project. They're getting paid for this. If this was like a personal project, I would probably feel differently about this, and I'd probably say, Whatever. But it is it kind of also it kind of outlays the dangers of using a UI library because ready. UI libraries are very, you know, prone to be easily copied. You know, if you're using a UI library, it's not necessarily making your design Super unique if somebody can just use the same UI library and then essentially copy it. It's a very tough one. I would say this is little bit unethical because they're getting paid for this, and they're just ripping off somebody else's design Mhmm. If they weren't getting paid for it as a personal project, different story. But yeah. It you're still at the end of the day stealing somebody else's design. Yeah. Granted, go to GitHub's home page and then go to Stripe's home page, and they both have The same three d spinning globe with things flying over. And who did it first? Well, Stripe did it first. Am I saying GitHub copied it? I don't know. I don't think so, but maybe they did.

Is anybody gonna have major issues with this? Probably not. I guess it is, like, your level of personal comfort. Would I do it? Probably not.

Maybe you could take inspiration from and see the things that you like. Maybe take aspects of it. Take other aspects from here or there. Rid I guess it all it all depends on the end of the day what your comfort level is. I don't think you're going to get in trouble for this by any means. I don't think it's Yeah. It's wholly unethical. There everything like this, there is, like, a gradient.

You know, there's a spectrum of of these types of you know, is this ethical or not? And I would say this Somewhere in the middle, and you could probably dance on either side of it and be fine. So yeah. I don't know. I wouldn't do it, but I I don't think it's a huge, huge problem. But, yeah, I think that's where it's at. The easy solution here is if you're losing sleep over this, then just buy the template. Yeah. It's $100. Even if you are not using the code,

Then just grab the template and thank the designer for their time of of the things that they took. It's hard to say, like, was there custom design that was put into this, or was it Sort of clicking out clicking together the premade UI things. You'd have to see it to to really believe it. But, like, at the end of the day, come on. Like, just maybe maybe just Go ahead and buy it if if you are thinking, maybe that wasn't the best thing for me to do. I think that's probably the right answer is

to just to to pay for it. I mean, if it is like, if it's a freelance project, you're probably getting paid. What's a $100 off the top to support the design you're using? So

Speaking of $100, Scott.

A $100.

Do you know what I'm trying to lead into here? Does it mean that you would use that $100 to ready. On a premium host that would last you for literally forever because they're they're so cheap for $100 like Linode.

Yes. Exactly. Our one of our sponsors today is Linode.

They provide cloud computing, all kinds of they they rid Linux server hosting. They have, GPU stuff that you can run. They have a firewall. They have a rid. Block storage, object storage, backups, all kinds of good stuff, and they have a $100 in free credit. So, really, what you could do is rid. Host your website on Linode, and then take that $100 that you're gonna spend on hosting because they give you $100 in credit rid. When you use linode.comforward/syntax, and then then use that $100 for, buying your template. Rid So I've got a little ad read here I'm gonna read for Linode. It's visit linode.comforward/syntax and see why Linode was Voted the top infrastructure as a service by both G2 and TrustRadius from their award winning support. It's offered 247, three rid 5 to every level of user. That's pretty impressive. It's clear why developers have been trusting Linode for projects rid Big and small since 2,003. Deploy your entire application stack with the nodes, one click app marketplace, or build it from scratch rid and manage everything yourself with supported centralized tools like Terraform.

Linode offers the best price to performance value for All compute instances including GPU, block storage, Kubernetes, and their upcoming bare metal release. Linode makes cloud computing fast, Simple and affordable, allowing you to focus on projects, not just your infrastructure.

Visit linode.comforward/ syntax create your free account, get $100 in free credit. Thank you, Linode, for the $100.

Sick. Cool. Next question is from How do you decide how specific and he says a React component should be, but I'm I'm gonna pose this as a a broader question Because this doesn't just apply to a React. How how do you decide how specific a component should be? And I think for me, I think about components being specific when I think about how likely they are to be reused.

Re If a component can be reused or will likely to be reused, then I'm gonna make it a little bit more broad. I'm gonna have a little bit more Input output type of props or parameters that you can tweak or have on this thing, and I'm gonna have this be something that is Don't end up being reusable. Like, if you think about it, you have a and think about, like, different aspects of the level up tutorials website. The video player? Yeah. The video player is going to be reusable, but it's just a video player. So that one's pretty easy. Right? Then you have maybe the Text description, all those things, the the comments. Comments can be reused on different things, but that it's not gonna require any tweaking.

So they don't need to be hyper specific or even hyper anything. They just are. But then you get into things like the playlist, the playlist on the sidebar. That is a one off component. That thing's not living anywhere else, and it's very specific. It is very what it is.

And that is a very different type of then perhaps maybe even like a utility component, something that is doing something else. For instance, I wrote some components this week that were Like a a component in Svelte. It's really easy to show or hide things based on if it's, like, mobile or desktop. Right? So I wrote a component it's very easy to measure things in Svelte, I should say, baked in. So I wrote a component that measures the browser, and then I wrote a component that's a conditional MeasureRenderer.

And that thing is very broad. It can be used in a whole host of different ways, and that is like the base component of this subset of utility components.

Then I took that component and made 2 more specific components that utilize that one, A mobile only and a desktop only component.

And these ones are just as what they are. They don't have a whole lot of tweaks and props and parameters to add to them, But they use the other one in a way. So what you could do is you can build up less specific, more broad range components, and then you can utilize those to build more rid Specific components as well. But how do you know? It is all about that reusability factor. If this thing is going to be used in one more place, in one more context, How this thing is gonna be used. And that's something you should probably know going in to this thing ahead of time. And if my component is verifiably not going to be, needing to be flexible? I'm not gonna build in that flexibility. There's there's no point doing that. Right? I I know some people take that approach where every single component has to be rid. Hyper flexible, but it's really not the case. Oh, yeah. No. I I'm don't really like that because, like, the rid. Premature optimization or premature componentization

just makes it really hard to actually move quickly in editing. So rid. I much more air on the side of throw it into 1, and then as I find myself either needing to reuse it over again, rid. The file's getting a little bit too big and too messy, and I find myself scrolling a lot. And I'm like, well, this is not really the same thing. You know? Like, Then I'll move it off into its own files. Very quick to refactor a component into its own thing.

So if you find it's being a bit of a pain in the butt because it's way too big or you find, I'm kinda doing the same thing here in this other spot or

I'm copying pasting the code too much here, then then refactor it out into its its own component. I think this is a conversation of, like, wet rid first try code. You know? Yeah. And, like, too frequently, we we say that this every single bit of code needs to be dry. Right? Do not repeat yourself. This thing needs to be fully, you know, fully functional and can do all these things. But there is a case to be made about having components that Do the same thing as another component, but just a little bit more specifically.

And Yeah. You know, you don't wanna get into that situation all the time, but it's not like it's rid An

invalid use case, so to say. I like my code moist. That's that's where I'm at with that. Yeah. Hashtag moist code. I mean Moist code.

Let's start the movement here. Let's start. I would tweet out, I love moist code if you are are on board with this.

Somebody register the domain name and and do a conference talk on it. Yep. MICE code is here to stay. I think I think that's the truth. Rid. This section now, like, a not even a a dumb idea for, like, a lightning talk of, like, you don't need to be so idiomatic about Everything. Yeah. Perhaps your coat can be a little moist.

Wes, I think you just, you know, birthed a a new a new lightning talk that either one of us can do because, rid You heard it here first.

Oh, we need to put that into the title of this title of this potluck.

Rid Moist code. Okay. That's there we go.

Where are we at? Jordan w, asked. Rid. Hello. Scott and Wes, thank you for the best podcast ever. You're welcome for the best podcast ever. Yeah. You guys are super relatable and easy to listen to, rid. That seems to be rare in our line of work. It's true. No other idiots are talking about moist code and actually considering doing a lightning talk rid.

We're a special brand over here. Anyways, my question is about npm run eject feature of React. Is there a place that I should be using this feature, or can I just keep ignoring that it exists? So I think you can keep ignoring it. The answer to read. When should you use npm run Eject is you will know when you need to use it because you've hit the limit of what, in this case, create react app has a a feature called, eject where you go from using rid. All of the bundler and babel configs and webpack configs of Create React App, and then they just sweep all of that into their own package.

And ejecting re Brings out all of those configs into your actual folder so you can modify them to do what it is that you want. And having to eject is becoming less and less needed as create react app gets better. So unless you're doing some very custom stuff, you likely don't need to To eject. So the answer to that is you will know when you need to eject, if ever.

Yeah. I agree. And I think that For the most part, if you are ejecting from Create React App, the app probably should not have been started in Create React App. It should have been done in, like, Next. Js or something.

Eject on a real project. And, like, if I'm using create react app, it's just to get up and running with demos or something Oh, or just front end code. I guess I don't I don't do that many projects that are just straight up front end code. So I I'm sure there's use cases for it. I I just don't personally hit them. Totally. Next question is from a sprinter.

Sprinter says, hello, Wes and Scott. Thanks for the awesome podcasts. You're welcome, sprinter. I have been listening to Syntax for a couple of years. My question is for Scott.

In one of the episodes in the past, you mentioned that that you use YouTube private videos and level up tuds. Com or level up tutorials.com using some kind of authentication. If I'm not mistaken, you use a different platform to host your videos now. Was there any reason to stop this technique? Also, it would be awesome if you could share links on how to implement this technique that you used. Thanks in advance. Okay, Sprinter.

This thing that I did in the past was using re Unlisted videos because unlisted videos are not listed and they're not findable on YouTube, but you can embed them. Private videos are not embeddable.

So what I then did is since I, as the the owner of those videos, I would put them into a then unlisted playlist on YouTube that other Folks can't access because it's a unlisted playlist. And then I would copy that unlisted playlist ID from the URL bar, And I would use YouTube's own API to grab the locations and all of the information about all of those videos, save it to the database, re Bingo. Bingo. Next thing you know, you got essentially a whole ton of videos that are unlisted on YouTube itself, but listed on your personal website. So that's really it. You could do this by hand too if if you don't wanna get fancy with it. But that's really it is that you have unlisted videos and that you're using them listed somewhere else. Now the reason why I stopped this technique is because, well, LevelUp Tutorials has become much more of a real business for me. At the point, it was A side project. It was just a listing for all the stuff I had on YouTube and in my own my own platform.

And that way, I could offer additional things for it. And so I was thinking along the lines of, like, using YouTube for this kind of stuff doesn't feel super legitimate.

People are coming to your site. They're paying money to use your product. They had a video. It's a YouTube embed and with maybe YouTube what to watch next links popping up because you can't block that kind of stuff on embed. That doesn't necessarily feel that legitimate to me. It worked it worked fine.

You know, it worked for for many years. Another thing is I I was never quite So that was where I was like, you know what? I'm I'm gonna do this the right way. I need the right real video host. And just so happened that Mux came out about the time that we were looking for a new host, they reached out to me and said, hey, you should you should really give it a try because I think this is what you're looking for. And, sure enough, you know, it really was it really was what I was looking for, and now we use Mux because they do transcoding on the fly. They do Streaming, live streaming, those types of things. And it's just way, way more, I wanna say, just more legitimate than YouTube. Now granted, Google and YouTube, They're probably the best of video. Right? Yeah. Because YouTube's the biggest video platform on the planet. So you do lose some of those, like, YouTubey things that you you miss out on. But in the same regard, I can sleep better at night knowing that I'm paying for my video hosting rather than just kind of pretending and hoping that YouTube doesn't notice that I'm having my entire platform built on unlisted videos.

Yeah. I, I had some trouble with YouTube the other day.

I have all of my free courses. I stream on Vimeo rid my own course platform, but I also put my free courses on YouTube because it's a great way to for new people to find my content. And One question I get all the time is, how do I download your free courses? My paid courses, they have links. You can download them and everything, but I go through so much bandwidth that I I can't possibly do it rid For offer downloads for my free ones. So what I did is I made a little video on YouTube of how to use YouTube DL to download My courses, which is, like, like, I'm fine by me. I don't care if you download them for offline viewing. But that is against YouTube's terms of service, and they're cracking down on videos showing how to download rid YouTube videos for offline viewing, which, like, at first, I like, I oh, I didn't get a strike on YouTube. I just got, like, a this is your first time. You got a ready. You're not getting a strike. Yeah. You're getting a warning, and I I fought it. And then we were talking I was talking to some folks on Twitter, and they're like, well, it is against the term service. I'm like, that's true. Rid And it makes sense because, like, otherwise, YouTube is just footing the bill for video hosting without ads. So there's that. I was kinda bummed about it, but that's rid The reality of building your your platform on somebody else's thing. They can do what they want. It's their platform. Yeah. I think that's really it. I mean, you nailed it too. I I always use YouTube DL to do my,

this is funny. I used YouTube as a video compression engine because they have really good In automatic compression, so instead of running the compression locally via HandBrake, I would upload all my videos to YouTube, and then I would run YouTube DL to grab the 10 80 p versions rid And sometimes it's basically using their servers as a compression. Yeah. They're they're way faster at compressing video than especially if you're you're fast Internet. Rid. It's probably faster for you to upload it to YouTube and then redownload it than for you to run it on your laptop and have that thing

Being on fire for 3 hours trying to compress a bunch of video. Yeah. Totally.

Now if you are Right now, we are rewriting our video player. And, you know, we have all these different formats. We're streaming HLS and all this stuff, and we occasionally hit bugs. And you know what those things about bugs are is if if you have a bug, somebody else is gonna have that bug. And if you don't have that bug, somebody else might have that bug, and you might not know about it. And Things like this are really tough to solve, but no longer because we have tools like [email protected]/ syntax.

Now LogRocket is the perfect tool where you can see what's happening with a scrubbable video replay as in You get access to be able to see the scene of the crime, as I like to say. You know, there there something happened. Right? The user clicked on something and the site broke. And Now you can actually see how the user clicked on the thing and how the site broke, and you get all of that with the the network tab, the rid. Dev tools that you're used to working within the browser are your Redux store if you use Redux, but not just limited to Redux by no means. You get things like the console if you have errors popping up in your console. How many times have you ever messaged somebody and they are a developer, right, and said, like, Is there any errors in the console? Yeah. And, yeah, that's a good thing to do. Right? So, LogRocket gives you the ability to see all of those things and more of. There is an exception taking place on your website, then you get access to all of that, and you can see it in the scrubbable video replay. So check out log rocket, rid.

Logrocket.comforward/syntax,

and you will get 14 days for free. Rid Thank you to LogRocket for sponsoring. Next question we have here is I'm very curious to I'm gonna read it. Rid I think this is a bot that wrote this, but I also have received often tweets from people that read like this.

I'm very curious what it is. I thought it was hilarious. This is we don't actually have an answer to this, but I'm gonna read it. And, Scott, you tell me if you think this is a bot or not that wrote this. Well, if this is not a bot, then this part you're just insulting this person. Oh, that's a good point. Question from Rolo.

I'm setting up a webinar webinar.

I'm going to require an I lock device to access FTP site. So I head over to Alibaba, and I'm on Alibaba to buy things. So I should have mentioned my main concern would be data miners. I mean, they're just like cyber crackheads, really.

So I would imagine any latency issues would be re compensated through a registrar handshake with the firmware, and I love to see a combination of both Flash and HTML five. So my question is, would the ecommerce piece embed on the host platform as well as the dialogue field for usernames, or would the gateway rid Socket extension be full duplex as well as a packet switch over.

Thoughts? Oh, wow. I think React. Wow. Next.

I'm gonna say use SvelteKit for this because that's where I'm at right now. Yeah.

Wow.

That is very wild. At first, I was like, I don't know if this is a bot, and then, like, Halfway through, I was like, oh, boy. You have to bot. What what is the point of this? Or do you think somebody is pretending to be a bot, which is also fun too? I think somebody probably

Was, like, playing with AI, an AI library, and then they fed it. Maybe they fed it, like, all of our show notes or all of something, And then, like, every question, maybe they took every question from syntax. And then, like, Based on all of those questions, then they generated this question. Yeah. Totally.

That does scream AI generated, or it seems like like Just a troll. Or just, the iPhone keyboard hitting the the suggested word over and over and over. I think the part that got me mostly was the, I like to see both Flash and HTML 5.

It's not something that you've heard a lot lately. I mean, they're just like cyber crackheads re Oh my gosh.

Thank you, Rolo. That was a good one. Next question is from Josepi.

They say, how do you allow users to edit text to their profile or messages they send to other users without sacrificing The safety or security of your site.

Now this is actually a funny answer to this question, Wes, because I I've utilized Dom Purify in the past, that's what Marked recommends. If you've ever converted, you know, Markdown to HTML, they say, be careful about the, you know, the HTML that you're putting on your page here. You make sure rid Sanitized.

And to do that, a lot of people use a library called Dom Purify. But when I was looking for, resources on Dom Purify to share with you in this show, I I just happened to stumble upon this Wes Bos blog post, sanitize HTML ES 6 template strings from Wes. So I decided to put this one in here too. Wes, do you use anything for this other than Dom Purify? And maybe do you wanna, since you wrote this post, do you wanna dive into a little bit more about the sanitization process?

Yeah. Yeah. So the the possible issue that you run into here is that if you give somebody full access To write a like, some text about themselves in their bio, that person can put a script tag. They could put a style tag. They could put rid. An image tag with an onload event, and that onload event, when it's done loading, will fire off some JavaScript. And then that then you have full Full reign of running JavaScript on anybody who visits your profile, and you could do things like drain their bank account or Send a whole bunch of messages. And if you're interested, go and read the story about what happened to Myspace when this happened. Oh, wow. Read. The the answer is you have to take any any string that is saved by the user, so the user's name, their rid bio, their city, literally anything where you you let the user type in, and you have to purify it to strip any potential bad things. And rid. Dom Purify allows you to like, you sometimes you do want to allow somebody to do an image tag, rid. But you don't want to allow them to apply with the height or on load event. Right? So that will a DOM Purify will just Strip it all. There's also at the very basic, you can just use regex to stop any malicious rid HTML tags, you can just strip it. So if somebody tries to put something in there, it will take them out entirely.

But if you do need a little bit more control over that, then, Dom Purify is rid Yeah. I've this is a little blog post I wrote

many years ago. Still very valid if you wanna take a look at that. Yeah. Yeah. Just some good rid Good foundational knowledge to have. You know, just do not trust the user. Do not trust those those users.

I even had it on my remember fav.farm?

Yo. We asked FAB dot farm. I had it on fab.farmforward/

any emoji.

Somebody I just, like, posted it, and, basically, fab.farmforward/ rid Whatever got put into the SVG element, and somebody sent me a link that was fab.farmforward/script tag.

Rid And that was a perfect example of don't trust the user because they obviously should be putting an emoji in, but they put in script tag instead. And the to fix that, there was a number of different options. I think what I ended up doing is I initially was like, oh, I'll just take take the first character. But then as you might know, emojis aren't just 1 character. Sometimes they're up to 7 or 8 characters because, like, you could have an entire family, rid. 2 moms, 2 kids, and the skin tone. Though there's a lot of characters that make up that emoji because there's a lot of differentiators on there. So I forget what I ended up doing. You can look at the source code to fab.farm if you wanna see how it's actually fixed. One time, I was,

At a a, like, a meetup, and they were showing off Meteor for the 1st time. This is just, like, way back in the day. They're showing off Meteor for the 1st time, And they had, like, a demo where, like and then, you know, this is all in real time. So everybody, if you pull out your phone, you can just start submitting stuff in this database.

And and you would have seen, like, Almost instantly, everybody's just trying to, you know, throw in some sort of security testing code. Everybody's just pasting and stuff to try to get this thing. And the guy was laughing because he's like, yeah. You think I made this demo and didn't think about this? Like, you you think I didn't think about this? And everybody was, like, cracking up. That was a super funny moment. That's

Next question we have here from oh, I'm gonna refer to you. This one looks like a Polish name. Scott, what do you think? Oh, gosh. I'm sorry,

fellow Poles, I don't know how to say this name, but it's some sort of, Peter. It looks like a Peter.

Peter, There's the character, the l with the line slash through it is a tough character for me because I know it's not an l, But I don't know how to pronounce it.

But, Peter Swalinski I'm gonna pronounce this now. I'm so sorry. Peter Swalinski, I am very sorry. I've betrayed my country.

There you go.

So the question is, any ready. Tips on how to use NPM package in Netlify functions.

I read that I could commit the node module, which sounds barbaric, And I also read you can install Netlify Lambda with a package with an additional post install script in the package that Jason, what is your approach? Love the podcast. Keep it up. Rid This one in general, I put this in here because I just wanna talk quickly about, like, dependencies in serverless functions.

So on Netlify functions, rid I specifically use Netlify Lambda, and what that does is part of your build, it will say post install. So once everything is done. It will go ahead and NPM install all of the package JSONs for each of your Netlify functions.

So that that's the way forward. That's the best way to do it. Don't put rid. Node modules in your Git repo. That's that's a barbaric way to do it. I don't know who would be recommending that.

But Serverless dependencies, how do they work? Upsides, downsides? So with serverless functions, there seems to be a couple different approaches. A lot of rid Host will ask you to have a new package dot JSON for every single serverless function, and I absolutely hate that Because Mhmm. You have to, like, npm install the package that you need for every single little function.

And even if you're using that package in 6 different Functions, and you gotta npm install it again. The reason why they do that is because a serverless function has to be small enough rid and only have its its own dependencies to run. And if you have a single package dot JSON, you could Bundle all of your dependencies for each one, and those can get really big and also that they can get really slow, which affects cold start ups. Go listen to The episode where we have Brian Larew on about to talk about serverless. He he sorta answers that. What a lot of the good hosts are doing, Vercel, I think, Begin is doing this now.

They allow you to have 1 package JSON, and then they simply just bundle and tree shake. So they'll they'll figure out which rid code you are using and which code you aren't using, and then it will tree shake. It will remove all the unnecessary code and and try to keep it small enough so it still fits in A serverless function.

Berg. Yeah. I don't have anything too much to offer here because I I I don't really use any serverless functions in my normal day to day, so I defer to you on that one. Beauty. Cool. Next question is from Josh. Can you disable local fonts from the OS to check rid. What's it called? Camel case with the first pump capitalized?

Upper camel case. Upper camel case? Yeah. I think it's also called Pascal case. Is that Pascal case? I've heard the word Pascal case before. Yeah. Pascal case is the I like upper camel case. I just imagine this, like, super buff camel.

Yeah. Upper yeah. It could be double camel. Big head. Yeah. Okay. So I was making a site. I misspelled the font name. They had Proxima Nova in kebab case instead of Proxima Nova in rid Pascal or double or upper upper camel case. When I viewed the staging site, I saw the local fonts correctly, but everybody else saw the ugly default fonts. I wanted a way to turn off my local fonts for testing, but I can't find anything that I'm happy with. Okay. So let me blow your mind, Josh. If If you have not found this, because I know, some of these questions we we didn't mention this off the top, but some of these questions are from syntax past. Essentially, We we went through our our potluck and tried to find questions that had not been answered that we really wanted to. And so this is actually a new tool that's existed in Firefox now for a little bit where you can see the fonts very clearly. And Now I'm just in this thing right now. Wes, you're gonna have to because I know you've probably used Firefox a little bit more than me. Yeah. There is a way to see what the file that's being used for this font is. Correct?

Yeah. If you go to your fonts tab and look at fonts used, it will Oh, yeah. What happened? You can hover over which font is used. It used to tell you what the TTF or WAF or WAF two font was called rid To that specific one, it doesn't oh, if you open up the all fonts on page there we go. There we go. If you scroll down, there's an all fonts on page little accordion that you can open up, And it will show you how they're loaded in and what they look like. Yeah. And so it will tell you if it is a system font.

If it's something that's being loaded from your own system, it will say system. And if it's something being loaded from a URL, it will say that URL. You could also probably figure this out somewhat reasonably using the network tab as well. Although, in the past, I've had situations where I could see that the the font was loading, but there was, like, a naming mismatch like you're saying here, so that wouldn't have necessarily helped you in this case. So If you're checking to see if it's actually getting your font being loaded, you could check the network tab. But if you wanna see that you're using that loaded font, you'll want to check out the fonts rid Tab in Firefox developers edition. This is a a good reason to use Firefox here. And you know what, Wes? What? I'm on the back on the Firefox train. I was having A lot of GPU issues, and I think Brave was the cause of it. Brave says they they don't mind, crypto, and they've never mined crypto. And I I believe them when they say that, But my GPU does not do great things when I have Brave open right now. So I don't know what's going on there. So I went back to Safari for, like, 1 minute, and then I was like, oh, yeah. They don't set HTTP only cookies on local host from a different port. Okay. I guess I can't use this in my development setup then, so I guess I'm on to Firefox.

It was like it was like one day. I have a, even

sneakier trick for these font issues, and the the issue is that rid. You think you're using your web font, but you're actually using a system font? Using your font stack, when you declare your at font face, rid. You can name it whatever you want.

And if you'd name it something that's not the exact same thing as your system font, then it will be very clear to you when it's not working. So instead of calling it Proxima Nova, just call it p nove or font 1 or main font or well, you name it whatever you want. Just rid. Something that is not the actual name of the font, and then that will make anywhere you're using it, you're you're not gonna be accidentally Stepping on a system font as well. That's really important if you are only loading, like, 1 weight, and then Your desktop has, like, all 9 weights of a font, and then you're like, oh, yeah. I can use every weight under the sun. And then you go to look at it on another computer, and you're like, it doesn't look It's good because it's fake bolding it,

so that's important to to think about as well. Or you can just use the the dev tools and have it tell you that. Yeah.

Rid I but the I think the dev I guess you can just, like, click on something, but, like, you'd have to click on every single weight that you've used to make sure that it's not using system. Rid Yeah. I see the weights in here, under all fonts on page. So Okay. Maybe I'm wrong about that. Yeah. Well, though, it's okay. The I think that's a good tip too because you never know if it's using rid which one or if it's getting the right one. So it's often good to have

many different tools in your tool belt. Next question here from Mikael rid Alo from Norway. I have a question related to freelancing. Yesterday, I took on a new client project. Price is locked in And contract assigned. The thing is I am new to web dev freelancing, and now I realize I have totally miscalculated the complexity In size of this project, what I initially estimated to do in 3 to 4 weeks suddenly looks more like 6 to 8, rid weeks. Do I break the bad news to the client and ask for an extended deadline, outsource part of the work, which could lead to more hassle, Or just buckle up and prepare for several outnighters. What would you do in this case? I would say, first of all, tell the client right away, oh, this looks like it's gonna be taking me a little bit more time.

Rid It's kind of a bummer because the client you've told them. You've already locked in the price. They might be able to budge on the price if depending on on where they're at, but, Likely, they agreed to this whole project because of what you quoted them, so you might have to eat that. This is just one big learning experience, I think. But just let them know right up front. Be like, you know what? This is gonna take me much longer, and here are my options.

I don't know if I would try to bring on somebody else rid to that because that's a whole another skill set, especially if you're new to web development.

So I would probably do a mix of ask for a bit of deadline

And then try to sneak in a couple more hours here or there without trying to burn yourself out too badly. Yeah. You're probably gonna have to eat some overtime here, and that's very you know, I've worked in agencies. I've worked in all sorts of places where, like, they have really firm deadlines. And if you miss that deadline you're going to miss that deadline. That's the end of you. Right? So sometimes you gotta pull all nighters and you gotta do it. I know, you know, that have to be careful about burnout and stuff like that. But sometimes, you're put in a situation where you gotta sacrifice some time to get that work done, or else rid Yeah. You're going to lose your job or the client's going to be angry. Now this is a little bit more of like you said, it's a freelance project, so you get a little bit more Leeway there, hopefully.

But I I don't it's it's so funny because, like, we oftentimes, we view missing deadlines as being this Hugely critical thing, and it can be hugely critical in some situations.

But how many contractors have you ever worked with that actually get the thing done when they say They're gonna get it done. No. Literally nobody. Yeah. My parents' house that was getting built was, like, a year late when I was in high school. And, like, Can you imagine delivering a a website a year late? Oops. Sorry.

Like, come on. Like, I think that is, like, a very funny thing that rid is a little bit different about our our world than other contractors' worlds. They're always late. I think the most important thing here is not that you're late. You should not be late. But the most important thing is that you should be clearly communicating early and often. Here's where I'm at. Here's where I'm going to be, and I'll check-in with you along the way. That way, you know that I'm not just kind of twiddling my thumbs like there was just an estimation issue, and we're still gonna get it done. It's still gonna be fantastic.

Rid. You're just gonna have to wait a little bit longer for it, and let let me make sure that you are comfortable with the process there. So Definitely a communication thing more than anything else, I'd say.

Last question is for you, Scott. Yeah. Last question is for me from Julian. And, also, Julian is being double cheeky here because their question's kinda cheeky, and then they they say that their name is pronounced Julia plus an n. Thank you, Julian. Thank you for giving us pronunciation. We really appreciate it. That means so we can actually pronounce your name correctly.

They say, question for Scott. Have you ever thought of calling your students Scott's tots? Which, Wes, I don't I don't know if you know this. Do you do do you get this reference, Wes? No. I just thought it was hilarious, so I put it in there. So, Wes, put this question in here without even knowing what the reference is for this. This is from an episode of The American Office The The Office, so to say. There's an episode where Michael Scott, the, like, rid Wes, it's a brutal episode. If you're gonna watch any of don't don't have this be your first one. It's pretty brutal. He, like, promises a bunch of rid. Kids like scholarship money, but he's just some dude. Oh, I remember this. Yeah. Yeah. And then he can't afford it, basically, and he has So, like, tell them all at the thank you ceremony that he doesn't have them. It's like it's brutal. So, no. I have not considered that, Julian, And, my students are not tots. Okay? They're they're they're Scotts, and they're not even Scotts. They're web heroes. They're They're charging through and slaying the dragon of learning the web, so I think that's where it's at. They're not tots, Julian. Okay? Let's move into some sick picks. Do you have a sick pick for me today? Oh, man. Do I got sick picks? I got sick picks up the wazoo here. We were just like, We're talking about how, you know, how it can run dry a little bit if we're doing a ton of episodes at once and how how we don't have a ton of sick picks. I have I have sick picks. I can't hold them all. So my sick pick is going to be something that I've been obsessed with. And by the time you're watching this or listening to this, you have seen this if you're into it already. But if you're not into it, I'm gonna suggest the 2nd season of I Think You Should Leave. It's a show on Netflix. It's favorite show in the world. It is comedy. It's sketch comedy.

The 1st season was probably one of my favorite things ever, the 2nd season absolutely delivers.

And I cannot even think about the show without cracking up. It is Adult humor, it's it's not for children. I think Landon came upstairs last night when I was watching one of the episodes for the 2nd season. I had to pause it really quickly because of how many f bombs and gross out stuff, isn't it? So it's not for kids, but it is so extremely funny if you don't mind vulgar humor. It's The whole premise of the show is that Tim, Robinson, who is like he's like an SNL former SNL guy, but he's way funnier than SNL.

He does, like, sketches that are all based around, like, somebody is kind of crossing the lines of social boundaries.

Some this type of humor can really rub people the wrong way. In fact, like, Courtney cannot even, like, listen to the show, or else she's, like, getting Anxious because of just like the the the types of situations they get into. Either way, it's a very, very, very funny show. And the 2nd season gets rid Kind of dark and existential in some ways, and, like, it's just brilliant. It is absolutely brilliant as

sketch comedy could be and is maybe the funniest thing I've ever seen. So, big, big fan. I think you should leave season 2. I'm going to sick pick a oddly specific tool that really helped me out. So I am Still working on doing a huge sprinkler system up at my cottage.

And one of the things I needed to do is to find out where the buried rid Electrical lines were in our lawn because we have a electrical line that goes down the lawn to the dock.

And I was like, okay. Like, the call before you dig people, they only do, rid Like public utilities to your house. They don't do private lines like that. So I was like, alright. What am I what am I gonna do? My options are I could hire somebody to come figure it out, or I could go to the amazing resource that is Amazon, and I found that there's literally a, like, $150 rid Underground cable locator.

Oh. And I was like, man, I know people hate Amazon, but the fact that you can go buy this Extremely scientific instrument and get it delivered to your door in a couple days and for less than the cost of getting a professional out here It's amazing. So the this thing is really cool. The way it works is that you hook it up to one of your electrical lines. I had to turn the power off, And it sends a signal up the line. And then I walked around the lawn with this the the receiver, and it beeps Whenever you walk over the line and then as you get closer and closer to it, it gives you a higher and higher signal, and it worked Amazingly well. I couldn't believe how I was like, this is not gonna work. There's no way. It's it says it can detect, rid. Lines buried up to 5 meters, which is, like, 16 feet. I was like, there's no way this is gonna work, and it worked so well. Well worth, the money I spent on rid. That versus having to hire somebody. And now I have, like, this amazing tool for finding wires inside of walls. Like, even if you wanna pop a a rid. Screw or a nail in a wall to hang something up. You wanna make sure that you're not accidentally hitting something. You can also hook this up to, like, a copper pipe or something like that. That would work as well. It would tell you where it is in the wall. So it's called the NOI Alpha Underground Cable Tester. Rid. They have a really good YouTube channel that shows you how to how to use it, and

the instructions were pretty good as well. So very odd thing, but if you ever need to do that type of thing. The bummer about it is you can't, like, try it on yourself like a stud finder. You know, like, that's a classic dad joke. No. Yeah. Those those jokes are rid are gone. You always gotta test the stud finder on yourself first.

Shameless plugs. Westboss.comforward/courses.

You can rid Take any of my JavaScript CSS courses. A lot of them are free. A lot of them are paid. You can use coupon code syntax for an extra $10 off. By the time you're listening to us, I'm still running my summer sale.

So go ahead and grab a course or 2

and enjoy. Cool. We have a new course from Colby Fayock on level up tutorials. He's doing Next. Js in ecommerce. It's so very cool. Colby is an amazing teacher, And we're so happy to have him as a guest teacher on level up tutorials. In fact, we're gonna be having lots more guest teachers in the future. And if you would like to become one of those, if you are the type of person who makes tutorials, We'll have a link in the show notes here for you to be able to sign up. There's a form there that's nice and available. You could just fill that out. If you want to learn modern web development, on over to level up tutorials.com.

We have new courses every single month. And, again, it's it's gonna be just an unbelievable amount of cool stuff coming on level up tutorials. And not to mention, we're we're doing a pretty substantial rewrite of the front end using Svelte, so That's something to look forward to as well because maybe by the time you're listening to this, it'll be done. Maybe that's too optimistic. Who knows? We'll see. Level up tutorials.comforward/pro.

Alright. That's it. Thank you so much for tuning in. We will catch you on Monday.

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 ready.