Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × More!

and see why Linode was 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

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,

They provide 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 it will say post install. So once everything is done. It will go ahead and NPM install all of

5 to every level of user. That's pretty impressive. It's clear why developers have been trusting Linode for projects rid terms of service, 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

How do you decide how If it's already not good,

to 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

allowing you to focus on projects, not just your infrastructure.

cloud computing, all kinds of they they rid Linux server hosting. They have, full access

three rid

Scott.

Because this doesn't just apply to a React. How how do you decide how specific a component

syntax 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

Visit linode.comforward/ 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 your

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

A $100.

should be? And I think for me, I think about components being specific when I think about how 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.

likely they are to be reused.

from their award winning support. It's offered 247, to stop any 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.

Big and small since 2,003. Deploy your entire application stack with the nodes, one click app marketplace, or build it from scratch

Sick. Cool. Next question is from

and he says a React component should be, but I'm I'm gonna pose this as a a broader question Right now, we are rewriting

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 specific

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,

pump capitalized?

There you go.

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.

They allow you to have 1 package JSON, any emoji.

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 rid and manage everything yourself with supported centralized tools like Terraform.

rid. What's it called? Camel case with the first And and you would have seen, like, Almost instantly, everybody's just trying to, It's not something that you've heard a lot lately. I mean, they're just like cyber crackheads re Oh my gosh.

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.

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, you go from using

So on Netlify functions, rid I specifically use Netlify Lambda, and what that does is part of your build, And I was like, okay. Like, the call before you dig people, they only do, hitting something. You can also hook this up to, like, 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, if you give somebody and that thing is Yes. Exactly. Our one of our sponsors today is Linode.

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 With me, as always, is mister Scott Talinsky. How are you doing today, Scott? Hey. I'm doing good.

And even if you're using that package in 6 different

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.

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.

rid Host will ask you to have a new package dot JSON

So with serverless functions, there seems to be a couple different approaches. A lot of

the package JSONs for each of your Netlify functions.

This is always like a dicey thing of, like, okay. I need inspiration, cloud computing developer stressed,

and I wasn't

a UI library,

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,

do this to my courses.

I wanna do this, but got put into the SVG element, and somebody sent me a link that was fab.farmforward/script

On one side, there's people that just rip off Every little thing right down to the, like, 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

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

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,

case, because both like, you are using, script tag instead. And the

get some ideas from that or or just, like, use the same UI library. It's always like,

It is a freelance project. They're getting paid for this. If this was like

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.

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

a personal project, I would probably feel differently about this, and I'd probably say, who is like he's like an SNL former SNL guy, but he's way funnier than SNL.

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

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.

or I need some ideas as to what to do.

The outcome

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.

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

I think

have to be careful about burnout and stuff like that. But sometimes, you're put in a situation where you gotta sacrifice

be clearly communicating

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.

Rid It's kind of a bummer because the client you've told them. You've already locked in the price. They

They say, question for Scott. Have you ever thought of calling your students

Scott's tots?

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,

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

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.

But I I don't it's it's so funny because, like, we oftentimes, we view It's not about necessarily

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,

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 for a lot of these terms, you know, they can be scary like a word like memoization. But like you said, it.

missing deadlines as being this Hugely critical thing, and it can be hugely critical in some situations.

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 like Linode.

Which,

is not that you're late. You should not be late. But the most important thing is that you should 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.

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

with the process there. So Definitely a communication thing more than anything else, I'd say.

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

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.

considering doing a lightning talk rid.

Oh, we need to put that into the title of this 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, Linode offers

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

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 where My courses, which is, like, like, I'm fine by me. I don't care if you download them for offline viewing. 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,

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

title of this potluck.

you've hit the limit of what, in this case, create react app has a a feature called, an image tag, rid. But you don't want to allow them to apply with the height or on load Using 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.

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

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.

And ejecting 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.

Everything. Yeah. Perhaps your coat can be a little moist.

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 more specific components 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.

Wes, I think you just, you know, birthed a a new a new lightning talk that either one of us can do because,

rid. All of the bundler and babel configs and webpack configs

actually

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.

of Create React App, and then they just sweep all of that into their own package.

The safety or security of your site.

if you wanna see how it's actually fixed. One time, I was,

Wow.

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 here are my options.

Yeah. Yeah. So the the possible issue that you run into here is that

maybe they took every question from syntax. And then, like, and look at fonts used,

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

I am very sorry. I've betrayed my country.

So I would imagine any latency issues would be re compensated through a registrar handshake with the firmware,

process? Whatever. But it is it kind of also it kind of outlays the dangers of using a UI library because Yo. We asked FAB dot farm. I had it on fab.farmforward/

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

Next question we have here from

Based on all of those questions, then they generated this question. Yeah. Totally.

I I've utilized Dom Purify in the past, that's what Marked recommends. If you've ever converted, 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.

Now this is actually a funny answer to this question, Wes, because

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.

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

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.

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.

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

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, on YouTube of how to use YouTube DL to download

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

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

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

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

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.

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.

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.

Rid And that was a perfect example of don't trust the user because they obviously should be putting an emoji in, but they Somebody I just, like, posted it, and, basically, fab.farmforward/ JavaScript

And then, YouTube's

tag.

this happened. Oh, wow. Read. The the answer is you have to take any any string

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

Thoughts? oh, I'm gonna refer to you. This one looks like a Polish name. Scott, what do you think? Oh, gosh. I'm sorry,

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

They say, how do you allow users to edit text to their profile or messages they send to other users without sacrificing

that is 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, Full reign of running

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 That does scream AI generated, or it seems like like Just a troll. Or just,

put in But Serverless dependencies, how do they work? Upsides, downsides? Cable Tester. Rid. They have a really good YouTube channel that shows you how to how to use it, and

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 for a full archive of all of our shows. And don't forget to subscribe in your podcast player or 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,

But,

Website for my portfolio, 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, 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.

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 have an re Ethics question for you. I recently took on a freelancing gig that requires a custom admin dashboard,

in case you're interested, I'm pretty comfortable with the basics of front end You know, it worked for for many years. Another thing is I I was never quite

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.

JavaScript, SCSS, HTML.

I'm currently working

on a movie searching Angular database ready.

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 Rid. You're just gonna have to wait a little bit longer for it, and let let me make sure that you are comfortable 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.

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? Peter Swalinski I'm gonna pronounce this now. I'm so sorry. Peter Swalinski,

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.

In size of this project, what I initially estimated in free credit. So, really, what you could do is rid. Host your website on Linode,

font stack, when you declare your at font face, rid. You can name it whatever you want.

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,

when it's not working. So instead of calling it Proxima Nova,

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

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

Yeah. If you go to your fonts tab is from Mauricio

Stepping on a system font as well. That's really important if you 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, 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.

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

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.

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

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

just call it p nove 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

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, block storage, Kubernetes, and their upcoming bare metal release. Linode makes cloud computing fast, Simple and affordable, 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

where you can see the fonts very clearly. And 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

are only loading, like, 1 weight,

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

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.

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? 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 resource It's a delicate dance. I've certainly had people I even had it on my remember fav.farm? I'm gonna go look at what other people have done, and then I'm going to Where are we at? Jordan w,

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

And one of the things I needed to do is to find out where the buried

So go ahead and grab a course or 2 I've already done this once before. And a matter of fact, 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

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.

rid Underground cable locator.

Peace. Peace.

Oh. And I was like, man, I know people hate Amazon, but the fact that you can go buy this rid Whatever 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

that is Amazon, and I found that there's literally a, like, $150 in serverless functions.

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,

rid Electrical lines were in our lawn because we have a electrical line that goes down the lawn to the dock.

I could go to the amazing Was, like,

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

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

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

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

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.

Extremely scientific instrument Today, we are sponsored by 3 awesome rid Linode, rid For offer downloads for my free ones. So what I did is I made a little video what is memoization and Voted the top infrastructure as a service by both G2 and TrustRadius

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.

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 Speaking of $100, rid HTML tags, you can just strip it. So if somebody tries to put something in there, it will take them out entirely.

and this function

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.

it will say, read. Alright. I've never called this function before.

Word.

You are re memoizing it. You are memorizing what the output is. And, generally, that involves in JavaScript, at at least, that involves

when you think about it, if you have functions Logrocket.comforward/syntax,

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.

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,

if the components rerendered, essentially, that function's components recalled, and then it's

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,

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 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 sketches that are all based around, like, somebody

Yeah. That's pretty much it. Rid And I think I think the

The only problem with that is that People are coming to your site. They're paying money to use your product. They had a video. It's a YouTube embed MeasureRenderer.

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.

Now if you are

syntax.

yeah, that's a good thing to do. Right? So,

Now LogRocket is the perfect tool where you can see 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.

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]/ 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

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

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.

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.

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

what's happening with a scrubbable

and I'm gonna have this be something that is

just makes it really hard to actually move quickly in editing. So rid. I much more air on the side of like, every question, that read like this.

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.

Re If a component 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.

And Yeah. You know, you don't wanna get into that situation all the time, but it's not like it's rid An new tool that's existed in Firefox now for a little bit really counting down the days till I can

throw it into

It is all about that reusability 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.

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,

verifiably not going to be, syntax past. Essentially, spit out the result, and then use that result in the 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 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

that utilize that one, A mobile only and a desktop only component.

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?

because it's way too big or you find, I'm kinda doing the same thing here in this other spot or

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,

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?

a component into its own thing.

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.

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

So if you find it's being a bit of a pain in the butt 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

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

Then I took that component and made 2

from Columbia.

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

So, yeah, I'm, 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

LogRocket, that can be purchased for 50 to $500

JavaScript session replay, and Cloudinary 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 refactor

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, updated my computer to Monterey, the macOS beta

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

cooking create your free account, get $100 in free credit. Thank you, Linode, for the $100.

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

I had somebody saying that their 16 inch MacBook Pro ran a lot better on it than it did on Big Sur, which, 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.

yes. But really ready. Sure how to design one of those. My solution was to look up a premade bootstrap template

image hosting and ready. Transformation. We'll talk about all of them partway through the episode.

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

like one for work, one for after. Oh, like profiles. Yeah.

and there's this new focus settings that are baked into the system. Like, you've had do not disturb before,

my tablet And my phone for Mac stuff, 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,

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,

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.

and with maybe YouTube

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 He says, I've been developing for a while now, and I wanted to know It was like it was like one day. I have a, even

using YouTube for this kind of stuff doesn't feel super legitimate.

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, rid You heard it here first.

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.

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,

rid my own course platform, but I also put my free courses on YouTube because it's a great way to it will 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

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

and they're cracking down on Oh, wow. I think React. Wow. Next.

I have all of my free courses. I stream on Vimeo Yeah. I, I had some trouble with YouTube the other day.

that is against 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 the best price to performance value for All compute instances including GPU,

to grab the locations and all of the information about all of those videos, save it to the database,

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.

And that way, I could offer additional things for it. And so I was thinking along the lines of, like,

videos showing how to download

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

Some really good questions about Shameless plugs. Westboss.comforward/courses.

to Syntax, the podcast with the tastiest web development treats. We've got another potluck for you.

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

does, like, and it needs to calculate some bit of data,

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

is kind of crossing the lines of social boundaries.

the 2nd season absolutely delivers.

it's just brilliant. It is absolutely brilliant as

system up at my cottage.

And I cannot even think about the show without cracking up. It is 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 Head on over to syntax.fm

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

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,