Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit

Welcome to Syntax, the podcast with the tastiest web development treats out there. We've got a Hot luck for you today. This is where you bring the questions. We bring the answer. We have some really good questions today on CSS custom props. What can and can you not put in it? Some questions on SvelteKit GitHub Copilot.

Why is box sizing border box not the default? And all kinds of really interesting questions.

My name is Wes Bos. I'm a developer from Canada. With me as always is mister Scott Tolinski. How are you doing today, Scott? Hey. I'm doing

good. Loving this weather. I did some lawn fertilizing this weekend. I did some This and that. We got a a fridge in the house that has a working ice maker for the first time in who knows how long. So I got ice, man, and it's one of those ones that, like, puts it into a little drawer with a little scooper and then the little they're not they're not, like, artisan little ice cubes or anything like that, but they're smaller, And they fit inside of my my little Yetis and stuff. So, hey, I've been scooping ice. I've been I I've been so the ice maker that I've just been filling things To the brim with ice.

Very big fan of ice over here. Honestly, there there's nothing better. And I I started looking at The nugget ice maker, which is that tiny little top one thing. Yeah. You guys, I think in the States you call it like Sonic Ice or something. We're like, I would love to get one of those. Yeah, but that's it's kind of silly, you know, and I was like, oh, I'll put it in my office. But, like, I don't I don't like having loud stuff in my office. Like, I have a little bar fridge in here, and every now and then the compressor kicks on. And my Quiet. Will you please be quiet? Yeah. I know.

It's one of those little things that when you don't have, it really You may be like, oh, man. I don't got any ice in the house. I don't know. My drinks are warm.

So yeah. No. Happy to have it. How about you? How are you doing, Wes?

I'm doing great. Doing great. Just got back from Reactathon down in San Francisco, and that was a fantastic time. Met a bunch of people I had never met before, and it was like last year we went and it was like still well, like, COVID was winding down.

And this one felt like everything's back to normal. So it was like the 1st conference I've been to. It's the 1st, like, actual talk I've done in person since the pandemic. I've done a couple online, but, like, the online ones suck. You know? Like, they're okay, but it's The fun of going to a conference is the meeting people and, chit chatting, having beers, you know, and, like, It's amazing, like just San Francisco is there's like people in town for, yeah, for for different things, and they're coming out to the parties and whatnot. So It was a fantastic little conference there. I did a little talk on JavaScript runtimes, so I didn't even know this before I started doing the talk, but, like, you know, we've got Node and we have Deno, and then we got Cloudflare Workers. Right. And then we have Bun.

But there's, like, there's more. There's Fastly, which is they compiled The SpiderMonkey, which is, SpiderMonkey is the JavaScript engine in Firefox, and then they compile that to WASM. And then they also compile your code to Wasm.

So it's all running in bytecode.

And then they made this thing Called Wazee. Remember we talked about Wazee.

And we were like, I'm not sure. I don't really understand what this is. This is what that's for. So you can run Wazee bundles. Okay.

In spots that aren't the browser. Because I was like, how why are they compiling the browser to WASM? Don't you run the WASM in the browser? But I was like, oh, Wazee allows you to run it on Linux.

So they compile the entire JavaScript engine and your code to Wasm and then run it, and apparently that helps to, like, go cold start. I've asked them to come on the show because it's pretty interesting. Yeah. But there's all this Alibaba has their own implementation of VA on their edge functions, and, we're having the folks from Bloomberg on the show pretty soon. So it's a wild world that there's more server side JavaScript runtimes than there are browser runtimes.

Not busy.

What an interesting thing that, like, most developers probably don't think about at all. No.

So maybe we'll do a show on on all of those, but that's what my talk sort of surfaced around, which is like standardization of And and the browserification of server side JavaScript.

Cool. What a cool thing. Cool. Well, let's get into the potluck here. Today, we have a Potluck. If you're new to the show, a potluck is where people bring the questions. Right? It's just like a a potluck lunch or or dinner or something. Everybody else brings the questions, and We bring the answers, and we all just kind of, discuss various topics. It's usually kind of a wide range of topics. And If you would like to get your question on the show, head to syntax.fm.

There's a button in the top right that says ask a question. Click that button, submit the form. If it's a good question or if it's a question that at this particular motion, moment, like, sparks joy within us, we will get this thing on the show for you. So first off, first question here is from Tim Rinkle. Tim says, hi, Wes and Scott. I've listened since episode 1. I can't say since the beginning because I binged the 1st 3 years a couple of years ago. Okay. So wow. So you've been some time. Your advice has been invaluable, especially the cast iron wok. Thanks, Scott. Hey. Don't thank me. Thank Adam Argo who Recommended the cast iron wok to me, and I I do I use mine all the time too. I just seasoned it the other day, with some advice from Wes on seasoning. So, say say you have a basic brochure site built in Astro. You want to add a form and a database that screams Svelte, if not Svelte, kit plus Svelte.

How do you build that into your project or repo? Do you have to build a separate project in Svelte or just use Svelte components or ASTRO, or is there a way That both frameworks can live peacefully in the same project.

Just build an Astro is really what it comes down 2. You know what? Astro, one of their selling points with Astro is that you can use components from different frameworks inside of Astro, including Svelte components.

So, with that said, if you got a thing, it's an Astro. There's no sense in trying to shoehorn something else in there. Just use felt Components in your Astro site where it works. Bingo. Bango. That's your project. So I would say just use Astro plus Svelte components in that site. Don't don't deal with 2 separate full stack frameworks. Usually, that's a,

You know, recipe for some heartache there. Yeah. And specifically, you'll need to use the, ASTRO endpoints, which is something new in ASTRO two, Which will allow you to submit your data, although be careful with like a form that submits data to an endpoint Is just asking to get spammed and whatnot, so you'll have to throw a CAPTCHA on there or Something else that will allow you to Honeypaw is another good one. We've we've done a couple shows on that. Maybe we'll do another one at some point is, How do you put a form on the Internet with all the malicious people out there? Yeah. How do you put a form on the Internet? That's one of those questions that's been on developers minds

since day 1.

Yeah.

So I'm going to take 2 questions. The first one is a bit of a joke, but I just thought this is hilarious that this got submitted.

Theresa says, how do I stop my phone from changing my password on my email and shutting off my emails? Like, somebody somebody found our podcast. What? And,

what and submitted, like, a tech support question. How do I stop in their phone? How do I stop my phone from changing my password on my email? Shutting off my email. Yeah. I don't can't help you with that one, Theresa. Sorry. Yeah.

We maybe we'll we'll start to spin up a second podcast. Tech support. Scott and I do tech support.

The real question here is lilpropup, why what can't go into a CSS custom prop? So CSS has these things called custom props dash dash. It's like a variable. You can reuse them. So the spec is actually intentionally very lax in what can and cannot go into CSS custom properties.

And I believe that is intentional because The future, maybe we'll be able to do a lot more. So they what can go in? Literally anything you want, you can stick in a CSS custom property. However, Where can you use them? That's really where the limitation is.

So some things is you can't Concatenate, strings, or you cannot coerce a value that is a Pixel or a number or a degree or something like that, you cannot convert that into a string.

And specifically, I was Trying the other day to put a CSS variable value in a after or Or a before or after content property. And I didn't even know this, but you can put a variable.

You can set it to a string, And then you can say content is var dash dash text. Mhmm. And it will work, but you cannot just pass it A variable that is like a pixel value because it's not a string. It's a pixel value, right? It's a different type in CSS.

So It's kind of a bummer because you can't display the value of a variable on the page, which would be really cool to be able to, like, Concatenate it and then turn it into a value. So that's something you can't do. You can't put properties in a in a variable just yet. So like if you were to say like Display none. You can't put the display part into I don't know why you would wanna do that, but you can't.

At a certain point, you get into trouble with Circular references.

So I ran into this when I was doing the relative color syntax is I was like calculating a value and then That was referencing another variable, and then the 3rd variable was referencing the 1st variable. So I hit like a circular reference. It didn't give me any errors. And that's kind of one thing that I really hope gets better in the browsers is the debugging of CSS custom properties is really Not very good. If it if it doesn't work, it just, like, puts a line through it or it does nothing. And if it is valid, you can hover over top of it And, like, see what the value is set to, but you don't get the end computed value. So it'll just say like ALK 10 minuteus 1 pixel.

So, like, I wish there was like a something in the browser where you could see all of your variables that are scoped To a certain thing and what the actual values are at the end of the day. You can't even get it with JavaScript. I thought, oh, I'll just use like Get Computed Style.

Get Computed Style will allow you to pass in an element and it will give you back The font size, the color, the background, all that good stuff. But if you ask it for the computed style of a CSS custom property, It will if it's like a calc, it will replace the variables with what it knows. Like, if a variable is set to 10px, It will replace the variable name with 10px, but it will not actually run the calc for you and give you the the end answer, which I thought was a little bit funny. I see why, but it would be really nice to have better debugging tools around these things, especially as we start getting into, like, Linear and all the stuff we just talked about with Adam.

Yeah. These are things that I've never really truly thought about because, again, they're kind of very edge casey, Very interesting.

Yeah. Oh, 1 more. Sorry. 1 more I forgot to say is you can't put entire blocks of CSS into custom properties. So like, Let's say if you wanted to have, like, that'd be like a mix in. Yeah, like a mix in. Exactly. You want to say, like, a rounded button border radius, specific padding, A border color and a font, text shadow. Right? If you want to put all those 4 things on, you can't just like include dash dash Button mix in.

You can only put

properties into a variable for now at least. Alright. Next question here is from Brett Pittman. Brett says, Are there any good certifications for JavaScript or general full stack development? I work at an ISP as a network engineer.

Thought about 80% of my though 80% of my time is coding rather than directly networking. In networking, Certifications like CCNA, JNC, IA, SPE, or others mean quite a bit. Is there an equivalent for JavaScript or web dev in general? Yeah. So, Brett, the we've been kinda hard on on certifications in the past, but, you know, there are That doesn't mean they're totally useless.

It but in the same regard, I've been in hiring before, and I've never Consider a certification or even really cared about 1. That said, you know, there are I I think nowadays, the type of certifications that might Be a little bit interesting if you're looking to see if somebody has some skills or even, like, those free Code Camp things that just show that you've completed various steps in free Code Camp. You can get certifications from courses that you take, like a WestBoss course or a a free code camp camp course or something like that. But in terms of professional certifications, the only one that comes to mind as being, like, actually something that could really get Get you a job or not would be the AWS certifications.

The AWS certifications have, like, tests that you have to take. They have, big study classes. There's entire learning platforms dedicated to getting you to pass the AWS certifications in the same way that you have the SATs and ACTs and Stuff like that. You know, IBM has a a cloud certification. Google has a UX design certification.

There certifications out there from various universities as well. But at the end of the day, in my experience, if you're a developer And it's not about, like, an AWS thing.

You know, certifications hardly come up unless, of course, in the job offer, they're saying, hey. You need these following certification specifically. But in general, most places big places that I've interviewed, Google, whoever, don't care about them.

Open JS Foundation, which is the the foundation that, Like, is for Node and I forget. There's a bunch of projects part of the OpenJS Foundation, and they have Certifications for, like, for Node. Js, if you wanna be a Node. Js certified developer. But, like, never in my life have I heard Anybody getting one of these, and I I can't imagine that it would be all that helpful because, Like, with with this web development stuff, the proof is in the pudding. Like, show us stuff that you worked on or at least, like, give us references. Like, sometimes you can't show people what you've worked on, But, like, do you have side projects? What have you built in the past? Do you have a blog post? Have you spoken at conferences? Are you constantly tweeting about This type of stuff like, often, when I'm looking at like, even just following someone on Twitter, I'll scroll through 20 or 30 tweets. And if they have 6 or 7 insightful tweets about what they're working on or questions or something like that. You kind of just know the space that they're in. So, yeah, I don't know. And, like, the the core, $400 just to take the exam to be a Node. Js certified Developer.

So I don't know. Yeah. We hired somebody because they made a cool UI for the Reddit API.

Did not even think about certifications.

Right? Like, that's the type of things that I was personally looking at within the hiring process myself.

Next question from Andrew, a long time listener. Thank you so much for putting You're welcome. What is the most exciting thing about teaching programming for both of you, and what is the most challenging thing you've ever had to overcome in the field.

The most exciting thing is a mix of being able to Constantly delve into new tech and check it on out and learn new things. And like I'm always just interested in learning new things. But the like the teaching side of thing is really Cool that people's lives are actually affected. You know? Like, sometimes, like, I can forget that when I'm just Making courses or YouTube videos and and whatnot, it's kinda just what I do. But then, like, I just went to reactathon, and I met people at a conference. So this this one A woman who I met at Reactathon, she said, I was in jail and I learned to code, and we didn't have Internet.

So one day one of the instructors came in with a USB, and they had a couple of your videos on it, and they're like, bring more West's. And I was like, You're smuggling my videos into jail? That's right. And so they're like, get more West videos. So they had to, like, go And, like, download them, I guess, and throw them on a USB stick. And then, like so I was just talking to her. She's like, I I have an awesome life now. I've turned it around, And, I'm so thankful to your courses. And, like, you have to be careful. It doesn't, like, stroke your ego too much with that type of stuff because certainly, I'm not the reason why people have these jobs or get a raise or something like that, but it's really cool that my stuff was able to be, like, a Part of somebody's journey in that they put in the work. They really, really learned it. And my course was was a little part of their journey And changing their life, so it's pretty cool. I personally I remember

every web development teacher I've had who's made an impact on my career, And I'm so thankful for them all the time, because they, you know, got me to where I was, you know, whether it's the list of hard Books or any of the stuff that I video courses that I took over my career. So that is that's such a a good thing. Right? It's it's The the person who did put in the effort, but just knowing that you are able to be a part of that, it's pretty significant for me. You know, I I really like that somebody won't have to struggle over a specific thing that I struggled over, and that's really when I started my development Process with, like, Drupal, and there was a lot of missing Drupal documentation or blog posts or missing training courses. And For me, knowing that I could put something up on YouTube and save somebody hours of time Trying to figure out the the views plug in or something like that was really gratifying to me to know that, like, hey. I already struggled through this thing. Why why is everybody else gonna struggle through it on their own time? You could put up something and save somebody some amount of time, and and hopefully, You know, other people will pay it forward and eventually save you time as well. So for me, it's just being able to, again, help help people, accomplish their goals in a way that, allows them to be productive.

It's just always been exciting to me to to do that kind of work on my end. Oh, and I guess he also asked the most challenging What what's your most challenging? You know, the most challenging thing in the past would have been dealing with some of the haters, people who just leave mean comments to be mean. Some people are just mean.

Yeah. I saw a a guy on Twitter the other day. There's, like, an Apple Apple Rumors Twitter account I follow, and there's just 1 guy On every single tweet, he responds something like, this stinks. This is stupid.

Like, to everything. Like and the guy called about he's like, Dude, you comment on all of my posts, and you've never said anything other than this is garbage. So, like, just Yeah. Just stop. Like, what's what's your deal, man? And, like, that's what it's like. You for every you know, you you put everything you put up, you'll at least get a couple of people telling you you suck, And that sticks. Yeah.

But once you get over that, it's not really challenging. Because now I can look at that and say, I don't stink. You stink. You're having a bad day or you're a mean person, so I don't feel I don't feel bad about myself. I feel bad for you. So now that's not challenging anymore. What's challenging now was having to deal with version numbers, and, you release a a 10 hour course on React Native, and they change the API slightly. That's Yeah. That's what's challenging for me now. Yeah.

The constantly changing nature of JavaScript is both very good for business as well as very challenging to keep stuff up to date. But probably the most challenging thing for me is just like some people are mean like you're putting yourself out there. You're saying, I know a few things. I remember when I first released my React course, one of the like like, a couple of months after I had released it, one of the, like, React Core team devs who I looked up to like screenshotted it and like he screenshotted one of the FAQs or something like that. And he just goes, LOL, what? And tweeted it out. And I was like, like, that made me feel like garbage for a couple of days. And, like, he probably just thought, oh, it's a funny thing. And, like, that's why I'm always, like, really careful when, like, On this podcast, we say something negative about a library or something like that. It's like, be careful because you might be ruining somebody's it's a kind of a a a mean thing to do. You know? And I know people are like, oh, just ignore the haters and it's whatever. Who cares? You know? But we're humans at the end of the day, so

Don't be a jerk. Yeah. I hear you on that.

Next question here is from Jeff Innes.

And Jeff did the lovely thing of giving us pronunciation guides, so thanks, Jeff. How can you how can junior to mid level devs Make the most out of GitHub Copilot while avoid getting dependent on it and hurting their abilities in the long run. I got a couple tips for you here, Jeff. 1, Comments. If you write comments, GitHub Copilot can really help you get the most out of what you're doing. If if you write your comments first And you say exactly what you want the function to do, oftentimes, GitHub might Copilot might actually just write that entire function for you.

Now the 2nd part of that is always read and understand whatever the heck this thing is outputting to the point where You could have written it yourself.

And for me, the key to GitHub Copilot is not that it is coming up with solutions for me. It's that it is taking the the time that it would have taken me to write something and remove that time because I don't I don't want GitHub Copilot inserting code into my code that I would not have written myself. I wanted to write the code that I was going to write anyways and just take that Time of physically typing it out. And oftentimes, again, comments can do that. I wanna have a function that does this and returns this blah blah blah. And hopefully GitHub Copilot could get you the right thing. But, again, you know, make sure you know exactly what it's doing and take the time to really Read and understand it rather than just letting it do its thing.

Yeah. It's very tempting to just ask it to Build you a function that does something and just accept it.

And quite honestly, it's probably going to be fine most of the time, but it's that like Half a percent of time when it breaks or it doesn't cover an edge case that you need it.

It's kind of weird because when it breaks, you can also use These AI things to help you out Yeah. To figure it out. Or, but, like, you're you're going to be saving a lot of time doing these things. Especially right now, we're in this Kind of transitional period where the expectation for how long something will take you is still existing.

And now you have this, like, amazing thing that will help you speed up. So use that extra time, slow down, and make sure you understand what it is all doing. And you don't know what it is all doing, you can also have OpenAI or GitHub Copilot explain to you What the pieces of the code are doing and loop over it. Make a little example that is outside of your application and just get it. I think we're going to probably get into A groove where this is somewhat normal.

I guess probably at times people will just accept carte blanche, whatever it gives you. But

Yeah. Yeah. We were just talking before the show a little bit about using, like, chat GPT to paste in code snippets and have it explain or, like, solve bugs for you and stuff like that.

Yeah. It'd be really handy to to not only write code for you, but to help you get better. So instead of using it as a tool to simply save you time, Use it as a tool to expand your capabilities yourself.

It's a huge research tool for me now too. Like Yeah. When I was writing when I write show notes, I have it open all the time, and I'll I'll just ask it quick questions of, like, somebody asked a question like, what's the difference between Encrypting a JWT and signing a JWT. Mhmm. I was like, I don't know. I literally don't know. I don't think we included that 1 in this episode, but because I I wanna dive into it a little bit more. But it's faster for me just to ask the chat what are those things and give it a quick scan and then get some surface area for it. And now, okay, I understand that I realize that you don't necessarily need both of them in your application. Now I'm going to go a little bit further and Cook an example or something like that. So I could do that. But I got up to speed on what they were a lot faster than if I were sitting there Googling. Totally. Yeah. I I ask it some really, like, interesting questions sometimes,

and just being able to bounce ideas back and forth off of it. And, again, you know, it's not always going to be the the necessarily the right stuff. So you have to have a little bit of understanding of it and being able to ask for Sources or ask for links is a big thing. Hey. Make sure that if you give me an explanation, give me an MDM source. Give me some documentation.

Give me something to look at as well for this thing. Make me understand a little before a little bit more.

Next question from Scottie. Any Tips on driving a culture of code quality in a team. I'm a senior developer for a large team working on React types program, and I find that 2 thirds of the dev of my PR reviews are asking people to address their use of any, avoid casting When they can't be bothered to fix the types, not using EOS ESLint, TS Ignores everywhere, and Fairly basic general React and TS best practices.

This is despite regular upskilling workshops, open DMs, whenever the need Is happen. Would love to hear your thoughts.

Yeah. This is a good one because, like, what I initially I was going to say, like, 1st, robots.

If you can automate it, then put it in place. You you shouldn't have Like, if it's if it's formatting things or ESLint fixable things, that's not ever a comment you should have. Let the robots do that And automate that away. Right? They can't check-in code. You can just fail the pull request if it doesn't pass ESLint. Right? Like It seems rough to do that type of thing, but it it kinda needs to happen. And that's the reason why TypeScript doesn't allow you to ts ignore an entire file because people will do it. Right? You have to literally ts ignore Every single you can't even ts ignore a block of code. You gotta ignore every single line if you really want to do it, and you have to explicitly Do that yourself. So I think what what I also hear from a lot of people who run larger teams is that they're they're looking to hire Almost like a a dev Raul or like a like one of these guys that you follow on Twitter that are just constantly talking about best practices and and ways to approach certain things.

They're looking to hire somebody that internally so that the kind of quality that is committed to A major open source project is also the quality of code that is being developed to that thing. So I think putting things in rules And making a culture of it. You're obviously doing well with workshops, maybe lunch and learns, that type of thing, open DMs. But I know one thing that that Sentry has now that we're in the Sentry Slack is they have all these questions about, like, discuss Dash.

And I jumped into I joined the discussed JavaScript one and the discussed performance one, and it's awesome because it's just this, like, There's a culture of being able to ask questions that you don't know about, and somebody will always jump in and help you sort of chew through it. And It's it seems like really good, really good help.

I think your your point about letting the robots do it is exactly my suggestion for PR specifically.

Right? The big red x that says, hey. This thing isn't good enough is way better than you having to go in there and leave a comment Say, hey. This thing isn't good enough because, that is that is a big waste of anybody's time having to manually do those types of things When you could just as well have a tool that make sure that any gets blocked. If anybody uses any, it should fail TypeScript. Right? Was it no No implicit any or strict mode. All of those things, you can turn off the use of any to allow people to make sure that, hey. TypeScript is not going to pass if Their the code isn't up to the the standard that it needs to be. And likewise, style and for CSS, we've talked about that before.

Those types of tools can be there to hold your hand to make sure that your code passes. Use GitHub Actions for this stuff. There people have already written GitHub Actions to do All of this stuff for you, and it's normally as as fast as copying and pasting somebody else's GitHub action into your code base. And you can have it say on PR, run these checks.

It's amazing how fast it can goes, and you can even get those fun little badges and stuff in your repo that you see the pros do. So, that's my suggestion. Another question from Jeff Ennis here. He had a couple of really great questions. So it says, hey, guys. I owe a huge part of my career progress and mental dev sanity to this podcast, so thank you for all of the excellent work. Thank you, Jeff. And, also, yeah, just 2 for 2, he complimented us. He gave us a pronunciation guide. Jeff, you're on it, man.

Jeff is our our question asker of the week here. I've been hearing you both talk about Sentry for years, And I'm excited to finally try it out on my current hobby project. Usually, everything I hear about Sentry is focused on helpful it is for a site or app in production, But I'm curious about how soon it should be brought into a new project being built from scratch. Is it best to add it as soon as possible right before launch sometime in the middle? You know, for me, Jeff, I add it usually at the beginning because it's just kind of one of those, like, process when I'm writing those types of middlewares or those types of base things that I do in most projects. Right? And I usually add at the beginning, but at the same time, I turn it off for development. A lot of App platforms will give you, like, an if is development hook, or you can even use the environment variable or something like that to turn it off, to say, hey. I don't want you to to collect all of the errors that will inevitably come when I'm writing bad code and fixing my bad code. I only want this thing to run when people are actually using the thing or I'm using the thing in production, and then I'm able to see what's being pushed out. So I would keep this tool to be a tool for production personally and just make sure that you just add it whenever, like, Your analytics code, like any of those other things, just drop it in there, turn it on for production only, and then just kind of not forget about it. Forget about it in development.

Yeah.

It's actually funny because when Scott and I were developing the T shirt giveaway thing, I didn't turn it off for development.

So it was every time we hit any error, it would send us a email or or show up. And Scott actually fixed something before I even messaged him about it because he saw it come through in this entry. So, like, you can run it in dev mode, but, like, there there's A thing called Environments where you can tag your issues as not necessarily tag them, but like you can filter for specific ones. And I would certainly throw it in as early as possible and for your staging, testing, production.

And that is going to be really handy because sometimes your development environment is not Same as your staging environment, and you're going to find out those issues well before you actually deploy to production. So have it I would say throw it in nice and early. Lyra has a question. Is there a place where I can search through all the sick pics? I'm looking for some home automation stuff you talk about. This is actually a very common question people ask, say, what was the episode you talked about X, Y, or Z? Or you mentioned something that was something to do with X, Y, and Z. And Even search doesn't help you pull up those things if you don't know exactly what to type. So we do have syntax.fm forward slash sick pics, which is a list of every single sick pick we've ever had. I think it would be really cool to make, like, a gallery of all of the items that we have, like, automatically, like, pull in Images from Google Images or Amazon or wherever.

But part of the other thing that we want to do is I've been looking into, embeddings with all this AI stuff, and embeddings along with the chat API. So those 2 things together You'll be able to ask what was the service Wes was talking about or what bottles Does West put his ketchup in or like just his random things? I should pick that again. Those are I just picked that as like one of my first sick picks. I mean, here we are 5 years later. I still love them. Yeah. I think that the new website will have a better search and possibly even, like, a chat interface where we you can ask those You know, it's it's funny that you said we should make it look like Pinterest. That'd be fun.

Yeah. Just, like, just for fun.

We we totally should. Question from what am I missing says, why is box sizing border box It's not the default. I want to make it the default on literally every project. The reason why it's not the default is because it would break The, the web, because a lot of people have built their sites not using box sizing border box. Right? They've used it using the the normal the pre box sizing border box model.

And because of that, if you were to just make it the default, 1 morning, everybody would wake up, Their browser would update, and a lot of sites would probably have a lot of weird CSS issues, a lot of old Sites that are not being updated, sites that people don't have time to maintain still or anything like that, and you just straight up can't break the web like that.

But you are right. Boxizing border box is, like, one of the very first things I add to every single website that I do probably since 2011 when Paul Irish published that post that showed how to do it. And, the 1st time you try it, you're like, oh, this makes the box box model actually bearable. This actually works. So thank you for box sizing Border Box for existing. It's a bummer that we have to put into every project, but that is life.

I I was wondering that as well because We've had this issue in JavaScript and in HTML. We fixed it. So in HTML, we have quirks mode, Which is if you do not set Yeah.

What what is it? If you do not set a doc type,

Then it ends up be a certain type of doc type. Right? You could add some yeah. Yeah. It enters quirks mode,

And then you get, like, an older rendering version of HTML. And then in JavaScript, we have use strict. So Either by using a module or by putting U strict in quotes at the top of your file, You enter into JavaScript strict mode. And in that, there are some things around, like, you cannot declare a variable twice, whereas not in strict mode, you can.

And, basically, we said, okay. Let's take all this, like, craft that we have to maintain for backwards compatibility, And let's make a new mode, which is strict mode. And then, like, none of that though none of those bad ideas are allowed in this thing. So, like, where's We're strict mode for CSS. You know? Like, can it, like, say, like, oh, if you are using a media query, obviously, that's too late now. But, like, is there a feature in the future, or is there something that we can just put at the top of our route, dash dash mode strict, That it will turn the document, and you don't have to add border box or any of these other silly things. Change the Times New Roman to,

Helvetica system UI. Sarah? Yeah. Yeah. I know. Right? Remove the padding on the the body or HTML or whatever that's on there. All of the reset just put Just put the reset dot CSS into your browser, please.

Yeah. I freaking hate and you know what? One thing is that the Copilot Never gives me the full CSS reset. I always do a comment that's like CSS reset. I'm like, I just want it all. Just give me full CSS. It Doesn't do it as as well as I thought it would.

Question from Michael Bussert.

Is using Lodash On the Next JS web application, a terrible idea nowadays, a coworker of mine says using Lodash significantly slows down the app Unnecessarily due to the fact that Vanilla JS can now do everything Lodash can do do but better. I understand low Lodash might be slightly slower in some areas, but I believe overall it improves the developer experience.

Using Lodash, horrible in today's I don't get the Lodash hate. Yeah.

Because Lodash is if you Crack open Lodash? Guess guess what those functions are made out of? Do you think it's jQuery? No. It's it's vanilla JavaScript under the hood.

Under the hood. Ding. Under the hood. Ding ding ding ding. Take a drink.

Lodash was made by John David Dalton, who's one of the most performance minded JavaScript developers I have ever met in my entire life. The guy freaking built The original JavaScript testing site to see, okay, what happens if I use a four loop versus a map? And he figured out what are all of these faster things. So if somebody's telling you something is slow, say, show me the numbers, brother, because I don't know. Is it actually slow, or is that just something that you're thinking of because this library is more than 4 years old and you think it is just old? So nothing wrong with Lodash.

You can tree shake it. You can just import the single functions in it. Do you need it as much as you used No. Because you can get all you can get away with map reduce, filter, find, find one, fill. There's all these amazing array methods And object dot utils and object dot entries and object dot values. There's all these amazing things in the browser that actually Get rid of a lot of the use cases for Lodash. But once you start hitting, like, weird, like, okay, I want to merge these things or what is the intersection? I have 2 arrays. What what is the intersection of these 2 arrays? You know? Or I wanna deep clone an object of all the values. And Once you get into, like, the nitty gritty, then certainly reach for some sort of utility library, Lodash, or any of the Just functions. Yeah. I almost re reach for just now only because

no nothing against Lodash. I like Lodash, but it's it's Usually, like, I'm gonna grab 1 function. I'll just grab a function. It just makes it easy. But, yeah. There there are all any of these things are fantastic options for you. Yeah. No No hate on Lodash for sure.

Underscore, though.

You know what? Meteor had underscore for a long time. It was, like, the bane of my existence because that you had to use underscore Or unless you wanted to ship underscore and lodash, and I was like, well, you might as well just use underscore.

Next question from Taz. What's the best practice For storing a JWT token, local storage, a browser session storage, HTTP only cookies. It Hence on what this, token is being used for, Caz, if this is, like, authentication.

If you're using this thing for auth, Then it's an HTTP only cookie because anything else can be read from the client. Local storage, session storage, those can be read by the client.

HTTP only cookies can only be read, set, removed, any of that stuff by the server. So if we're talking auth here, you have anything that is, that you don't want other people to have or look at or anything like that, throw that thing in a secure HTTP only cookie. It's gonna be encrypted. It's not gonna be able to be accessed on the client, and then you can, you can use that to your heart's content on the server side like you want to anyways.

Yeah.

I I have always almost always put my w JWTs in A cookie.

The reason behind that is a couple of things. First of all, if you put it in a cookie, it comes along on every single request.

You don't have to send it along with it. So if you're use if you're sticking it in local storage, then Every time you make a request, you have to make sure that you write some sort of function that dips into local storage, gets the thing out, and then puts it as a header or whoever you're sending it to to the actual server with a cookie.

Any requests that you make, cookies are always sent to the server. So that's a major benefit. Scott already said the other major benefit is that it cannot be read by a rogue Browser extension or something like that. I wouldn't do it the other way. Yeah. Yeah. But I don't know if the security thing people always said, oh, local storage is insecure for Cookies.

The downside to the cookie example is that if you had a rogue Chrome extension, It couldn't submit requests on your behalf. However, the if you have local storage, a rogue Chrome extension can dip into your local storage and get it. So, like, the kind of thing is that if you have JavaScript that you do not trust running on your page, you are pooched because You shouldn't have JavaScript running on your page that you do not trust, so you can store it wherever. The only reason why you can put them in in other places is because if you have an API and you're using JWT to authenticate requests, If you're building an iPhone app, there is no such thing as cookies in an iPhone app. Or if you're building you're making a request via Node, There's no cookies in Node, right? There are packages that allow you to make a cookie jar and send it along, Or you can set them as a header in your fetch request.

But sometimes it's easier for people just to send them along Via your specific request or in an iPhone app you store in whatever the local storage is equivalent in in an iPhone app. Next question from Ilkai.

Our code still uses AJAX to make requests.

However, We want to convert all the AJAX requests to the fetch API. This is actually kind of interesting is that the the wordage around Making dynamic requests in JavaScript has changed from AJAX to Fetch, which is kind of cool. So when people say AJAX, they're generally referring to AJAX means fetch as well, but generally they're referring to XML HTTP requests. That was the API before we had fetch to to make requests to a server without reloading the page. Are there any tricks, tips, Easy to invest points that we need to be aware of, maybe most common issues seen during the process. This honestly, LKI, This is the perfect use case for chat GPT.

Just take that function. Make sure you don't have any sensitive information in there. Hey, Sass sucker into ChatGPT.

Say please convert this to a function, a fetch request, and it will do it just fine. That's a very good use case for using ChatJpdt as a thing, especially if you have a lot of them and you're like, I understand how to make a fetch request. I just need to Convert all the minutiae of this one over to fetch. Yeah. That's a good use case for it. Anytime you have minutiae.

Next question here from Mike. Hey, Wes and Scott.

I just entered a new role where I'm working on a variegated React Native code base, and a lot of peer dependencies are deprecated.

The code base has been neglected for many years, so ripping out lines and lines of code to swap libraries just isn't practical at the moment given the small dev team code base. Ahem, Me. Okay. Mike is the only dev on this code base.

Oh, I'm so sorry, Mike. The current workaround I used to update Out of a really old versions of React Native and other dependencies is by using patch package from npm and manually updating some of the libraries myself. I would wait for a new release, but many of these libraries are 4 plus years out of date. And I'm hanging poll requests for the issues, and I'm And I have hanging poll requests for the issues I'm fixing. Go figure.

I haven't heard this talked about a ton, so I'm wondering if this is a Common practice if this is done in the real world just more than I've heard about before. It feels really bad, but seems like a good temporary solution. I'd love to hear your thoughts. Side note. I'm a longtime listener. I just wanted to say thank you for sharing such an amazing content. It has really shaped how I approach and solve problems as well as clarify my understanding of many sticky topics.

Okay.

So, Mike has just sent us this year's 1st dev horror story.

Cue the spooky music because this sounds like serious nightmare for me. React Native, if you if y'all haven't worked in React Native, it's a fantastic platform for many reasons.

But one of the things that really is difficult react with React Native is that it breaks all the time. In old dependencies, things have changed a lot. And I just saw A tweet about a brand new architecture for React Native, completely. So, Mike, I I fear that there's a lot more Pain coming your way in the near future with this new rearchitecture.

Granted, I don't know the details about it. I just saw it. So, Okay.

You'd love to hear our thoughts. I do use Patch Package.

I've used Patch Package to patch a couple of packages.

Check out all those piece right there. I I've been patching packages for a little bit here, and I gotta say the flow can be good.

But When it gets rough is when things then do update. So if you're patching packages that eventually then get updated, It it starts to get a little unfriendly.

So if if you have something and it's a one time patch, You're gonna patch it and move on.

It feels like that's okay to me. Granted React Native is its own beast and a little scary.

Now This is the part that's not going to sound super fun to you, Mike. I I feel I feel and feel like Maybe the best course of action at this point is start a fresh React Native project to copy and paste over your components and and do it the hard way. And I don't know about your dependencies, man.

Man, this this feels like honestly, as somebody like I said, I I did a React Native course, that was invalidated really quickly, and it was a nightmare for me to try to get that thing updated. So to have a real project 4 years out of date, some dependencies.

I'm concerned for you, Mike, that this might turn into one of those things. If you start patching, Maybe you're better off spending that time on a rewrite of sorts, and that I don't I don't like that solution. I don't like any solutions here, but You're in a bit of a pickle.

Like, the patch package is great, and you make sure that your host will support either PNPM or your host Supports post install hooks, which most of them do, so that they will literally like, if you haven't used it before, they literally go in your node modules and delete The lines of code that you did and you save those patches as a get a get a get. Yeah, that's what it is. So Sometimes it's easier just to find an equivalent library and try to pop that thing in, especially if it's like you're just using that library in a single function.

Ideally, write some tests if you don't have them for that function before and then swap it out. And hopefully All the test pass for that specific function in there because sometimes it's just not worth it if you do need to do it. What a lot of people unfortunately have to do is just Fork the entire repo and publish your own version of it. You see this all the time where the package gets super popular, The author kind of loses interest or it's, like, just overwhelming 400 issues.

So then some white Knight will come out and Take that package and deploy it to their own, and they say, alright, everybody, just all you have to do is replace Your import package with this one, or you can even write an alias in your package. JSON and it'll overwrite it. So that's probably your best course of action there. But

I don't envy you. But I don't have a lot of warm fuzzies about this question, Mike, and I'm So sorry. I hate I hate that answer.

Let us know how it goes in a in a couple of months. Send us an update.

That's what we need. Like, where are they now? Some hacks It's not dishwasher. I know. You know? Whatever happened to the guy who had 7 senior devs, and all of them said, No. We're not using

anything that's made in the last 10 years. You know? Where are they now? Whatever happened to the dev team that I interviewed for that said, they will not use ES 5 features.

That was like that was like 4 years ago, Wes. That wasn't even, like, a long time ago. Oh my goodness. Yeah.

Alright.

That is it for the potluck. Thank you everybody who submitted questions.

Now we're gonna get into the part of the show called Sick Picks where we pick things that are sick. I have a podcast for you today. People have been asking me Podcast racks. I got a lot of podcasts I listen to. You know me, I'm always collecting them, and, this is a really interesting podcast. You know, we often find ourselves in in the little bubbles that we end up in. And, I found this one kind of I don't know how I found this podcast. It might have been like an ad on another podcast, which is More often than not, how I'm finding some good ones lately.

But this podcast is called Tales of Taboo, and I found this To be just really neat. You know, there's there's 4 seasons of it now. The 4th season has just started.

And, basically, what the host does is has kind of like an anonymous call line Where she'll have a given topic, and she'll talk a little bit about her association with that topic at the start and then play anonymous confessions of people from this topics, some of which have been like, you know, high end restaurant confessions. Pee and it's like people who've worked in high end restaurants Anonymously call in and talk about, their time working in that industry. And it's almost always like, Interpersonal kind of relationship types of things. Right? Like, here's, teacher confessions, and and that one was particularly heartbreaking because it's talking about, you know, the lack of funding and Stuff like that.

But there's also some really fascinating ones like fitness industry stuff, SoulCycle, confessions, where there's, like, instructors or people who have intended SoulCycle classes, Those plastic surgery confessions.

Also the latest one, boutique fitness confessions, high end hospitality confessions. And, Man, it really gives you an insight to other people's jobs and the type of BS they have to deal with and how people are treated, Particularly, there's man, there's someone's like, nannies to the wealthy confessions, And that one is one that you put on because these people are treated so poorly, and you feel so Bad for the stuff that they have to deal with. It it will make you a more empathetic person to people in all different types of industries. So, Tales of Taboo. I found it to be just a really lovely podcast in terms of, like, opening my eyes to a bunch of different people's lives.

I'm going to sick pick, rubber flooring. This is something that I've been working on. I've been working on the gym in our house, and I'm almost done. And One of the last things I've been doing is I installed this rubber flooring and man, this stuff is awesome. So it comes in big rolls.

They the stuff I got was called Reggupol, but they honestly sell it everywhere. And the The big idea is that you have to find a local supplier because it is extremely heavy and the shipping will kill any deal that you have, but It comes in little puzzle pieces. I bought it in massive rolls, so I wouldn't have as many seams, And it just just rolls on out. I taped it down, and it looks so good. Like, it's like what you would you would see in, like, a professional gym.

And it's it's cheaper than putting, like, laminate or tile or anything down, that you normally would, but you get, like, nice rubber flooring in your gym, good grip. You could drop stuff on it. It won't break. So, if you are trying to upgrade your gym space, check out

rubber flooring. I need to do that. I really I've gotta get on that. I I'm just struggling at the thought of cutting up my nice carpet in the gym. Yeah. Because it's like the nice carpet, and I'm just like, If I if I goof this up, I'm never going to forgive myself, but I need to do it.

Yeah. I even wonder if you could no. You can't. But I was just like, I wonder if you Put it over top of the carpet, but Yeah. I'm gonna work. Probably not. If you were to, like, if you were to, like, lay you could buy plywood that Has, like, lips on it, like the interlocking lips.

You could probably just lay plywood down and then put the rubber over top of that In case you ever wanna like, if you're thinking about resale or something like that, but I don't know. At this point, you know, we have a guest bedroom. It's a bedroom in the basement. I don't, Like, I don't know who wants to use this bedroom in the basement.

When you know? Just like, let's, let's turn into a gym. I think that's Probably more valuable in terms of reset these days. Right? Like like, half the houses we were looking at would like if they had a gym in there, I'd be like, what? That has a gym.

Yeah.

That's true. So I'm I'm pretty stoked on it. It it looks awesome. It was so heavy. Like, Every roll was like £3.50.

I almost couldn't get it down the stairs with me and my wife and the poor guy at the Fitness plays that helped me load it.

It was so heavy. I can't believe it.

So definitely that's why they sell it in smaller squares,

But I chose the hard way. Yeah. I got some neighbors. If I get some, I'm gonna have to have them come over to help me carry it down to the the basement. Although Courtney's been lifting weights, so maybe she can help me. I Put it on a,

like, one of those dollies and just kind of, like, bunk bunk down every single stair, and then that worked well. I don't know. It's never coming up unless it's, like, shredded.

I know there's things that go down to the basement, and you're like, yep. This is Dan down here. That's for sure. Yeah.

Westboss.comforward/courses for a list of all the courses that I offer.

Check it on out if you wanna learn some JavaScript or CSS.

I'm going to shamelessly plug [email protected].

Yes. We did include the question about century because I work for century. No. I'm just Joking. I did not do that.

Century at century.io is the perfect place to see how your application is functioning at any given time, and they now have, some really great profiling tracking tools, and the profiling tools are so awesome because we had our performance Tracking metrics for the front end where you could see, you know, what what routes on our site were slow for the users. You had your user misery score. But now with Profiling, you can get an in-depth look into exactly how the server side aspect and those types of parts of your are actually functioning at any given point, and it's gonna give you a visual and an actual way inside and to see into production How to speed up your site, which who doesn't love that? So check it out at century.io.

Use the coupon code tasty treat, all lowercase, all one word, and you got 2 months for free. Thank you so much, 1st century for or thank you so much to century for employing me. So thank you. Yes. For taking this

For letting us join you. That was cool. Actually, at at Reactathon, that was, like, the biggest thing. Everyone's like, hey.

Congrats.

I freaking love Century, and I love David Kramer.

Pretty much everybody said that.

So, I was pretty stoked to hear that everybody seemed pretty happy for us. So, yeah, that's That's it for today. Thanks, everybody, for tuning in. We'll catch you later. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.