Potluck - How to Pick a Tech Stack × useEffect × setTimeout × Staying Focused

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

Welcome to Syntax, the podcast with the tastiest potluck treats out ready. There. Today, we've got a potluck episode for you.

We love doing these. These are your questions, and Scott and I will attempt to answer them. Rid. If you've got a question you'd like us to answer, go to syntax.fm, top right corner. Smash that button. Put your question in the box, and we'll answer it on the show. Today, we have really good, show for you about object literals and snapshot testing, and Svelte rid. Kit is too magical. And, why would you use set time out, instead of set interval, but, like, a set Time out with another set time out called back on it.

All kinds of really good stuff. Today, we are sponsored by 3 awesome companies. First 1 is Linode Cloud Computing Developers Trust.

Second 1 is LogRocket JavaScript session replay, and auth 0 handles authentication and authorization for your applications so you don't have to. We'll talk about All them partway through the episode with me as always, mister Tolinski. How are you doing today, Scott? I'm doing good, man.

Doing good. I'm standing up. Rid. You're are you still standing or do you go back to sitting? I I went back to sitting because we got the AC on in our house, and,

I put in heated floor down here just so that my toes could be nice and warm, but I have to get an electrician to add another Dedicate a circuit for it, and that has not happened yet. Those those legs get fatigued already, Yeah. Well, not all fatigue, but this might hit. My feet are cold. I shouldn't Go buy my slippers, but I have no idea where they are.

Yeah. No. I'm just I'm just joking.

I'm not not as rid. An experienced standard. I always get super sore calves, so I'm curious how how I'm gonna do a standing. You get sore calves from what? From rid. Standing or just all the just all the time. Like, I wake up in the morning, and my, like, calves will be super sore. And, like, I always

am very poor at, like, stretching and And flexibility. That's why I like when you we did the show, an entire show on stretching. I like I've been starting to do a bunch of those, but I need to, like, rid Get fully into it. Yeah. I need to step up my nightly stretching routine. I I do some stretching. Like, right now, I got a bit of a wide stance going on. I'm even doing some stretching while we're recording this. So I'm I'm I'm a bit of a stretcher, but, like, my, My, like, hardcore daily stretching routine has kind of taken a hit lately, and I need to get on that because I'm feeling tight. Tight. That's tight, man. Alright. Let's get in

rid. Get into the 1st question, which is from Moe. I want to compare the efficiency of object literal as created from a factory function versus objects created by newing a class. So if you want to create an object in JavaScript, you can Have a function that returns an object, or you can have, like a, like, a proper class and say, like, a new, like, new date in JavaScript. But you can make your own version of it, new rid Pet, new podcast. What's the best way of doing this? I think I can use performance. Now for speed, but is there a way ready to 0 in exactly how much memory each object takes up. Also, what is the basis for deciding, even though something is less performant, rid. That it doesn't matter in a scenario. So, the big one that we used for a long time was, JSPerf.

There's a new URL for it that what is the new URL for that? I've never used JSPerf. I don't know. Let me find it. So basically what it is is you give it a test rid. And you give it a this you say, Okay, what's a faster way to duplicate rid. An array. Should I spread it into a new array, or should I, pass it to a set and, like, or, You know, like there's always more than one way to do things. So basically, you make all your test cases and then they just run it and it'll tell you how many possible times in 10 seconds or one second this thing can possibly run, and that's a good way to figure out what is the absolute fastest.

A lot of times the answers will be rid 500,000 operations per second.

So that's kind of something where you can say, Oh, it doesn't really necessarily matter in my case.

Rid. But sometimes it will matter because you're doing you literally are doing these things 10,000 times or you're looping over them, and you need to be as fast as possible. So that's That's the way to do see which is fastest. You can use performance. Now. And what that will do is it will take timestamps from your machine Before you start and before you end you're done or after you're done, and that will tell you the difference between the 2.

But I much prefer using perf.link just to See, I I do it a lot. This is, like, the ultimate Twitter argument URL. I don't do this, but a lot of people will be like, well, Did you know that you could run 400,000 more times if you did it this way? And I was like, well, I'm running it once. So, like, what are we what are we getting here?

I'm running it once, and it's like this minor function on 1 website that's like, This is not exactly performance requirement code here or something like that. But even then, like, yeah, how fast is this really Like, what is this really doing for you? I think are always,

reasonable things. There's no harm in learning what's the fastest or What's I mean, that's why I like it. It's just it settled my curiosity.

But, like, what about memory? I was assuming you could use dev tools. I've not done that before, have you?

Rid I haven't not in any meaningful way. I've run, like, the memory stuff in dev tools, but it's usually, like, to debug. It's not too,

Like per per fund, so to say. Yeah. Well, you can so basically, what it is, you you turn on you go to the memory tab in Firefox or there's the equivalent in Chrome.

You click on record call stacks and then you do your work. You have a button or something like that. And then it will show you, allow you to step through the functions, and it'll show you how much memory each of those functions Has taken up. I think that's there's we may have a performance person on at some point. Maybe. Oh, you know, what we should have is John David Dalton, Who is the author of Lodash. He's nuts about perf, stuff like that. And, like, not not in, like, obnoxious way. I know a lot of times perf people are just, like, A little bit overbearing, but he's he's just, like, all around good guy. And I think he would know. I actually, I think he I think he even wrote JSBind or not JSBind.

JSPIRF.

I wonder if there we could do like a JSBIRF mistakes you might be making kind of rid.

Yeah. Yeah. Because, like, these are things that could possibly be, be slowing you down.

I like it. Yeah. Cool. Next question is from David from London. He says, in TypeScript, sometimes when I hover over a parameter, Versus Code just tells me The interface name instead of telling me the fields of the interface. This doesn't help me know what I can pass in. And instead, I have to command click to find the interface in ready. In this field. Other times, Versus Code does tell me all the fields on hover. What am I doing wrong? How can I always see the full signature rather than just the interface name? Wes, do you have an answer for this? Because I have the same issue, and it bugs the life out of me. I hit this on a stream the other day. I was like, All right. And I'll just look at this. Oh, oh, I guess I'll have to click through it. Yeah. Yeah. Sometimes you hover it and you see all the fields that you need and sometimes you hover ready. And you see just the name of it. And I have not pinned down why,

or or or, like, what the the line is. But the reason it does that is because rid. A type could be exponentially large or deep, and it has to run through your entire code base to fill it because you could have an interface that extends something, and, rid. That could have, overloading on it, where you could possibly have a couple different signatures on it. And rid Types can be very, very complex and very deep.

And then other times, types can be very simple, where you just have a type with a couple fields on it. You want to be able to hover over top of it.

Rid. So I'm assuming Versus Code does some sort of cutoff at some point.

Rid I do use a extension that is called alright. I think it's called rid. TS quick fixes. I'm pretty sure this is it. It's not a very popular, extension, but what it will allow you to do is yeah. That's exactly what it is.

Rid So in Versus Code, you are creating a variable that is a specific type.

Rid. It will give you a code action, which is, I believe, when you hit option space, and it will say declare missing rid. Members. And what it will do is it will say, okay, well, this is like an employee or a pet or a dog or a podcast.

Rid. And it requires these fields with these types. And what it will do is it will quickly scaffold out all of those types with some basic, like, rid Sample data, and then you just have to go through and actually fill in the data as you need it. So that's not a totally a total answer. But if If you're using the hover to figure out what fields are needed, an even faster way is to just immediately populate all the fields, and then you can Go ahead and fill in the actual values for each of those properties. So it's called t s quick fixes.

I never used that. What shortcut did you say was to do the quick menu or whatever? What was that called? Sorry. It's not that. It's command period. When you're on something, just hit command period, and it will open up. It's called Problems Action Show Quick Fixes. So it's quick fixes. It's not code actions. Sometimes Knowing what it's called in Versus Code is the hardest thing. So quick actions. And what that will do is if you're on a TypeScript It will give you all of the TypeScript refactor functions like move a type or a function to a new file. But then it will also give you the Ability if you're on a variable, this plug in will give you the ability to just scaffold out all the types. Interesting.

Cool. Pro tip right there. Yeah. I'm gonna I'm gonna try this, TS extension out. I've never seen this one. You're right. It's not popular at all. Only has, like, 4,000 installs. Yeah. I feel like I was tweeting about how to do this, and