December 4th, 2024 × #Debugging#Performance#Webpack#Interviews
Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More
In this potluck episode, Scott and Wes answer questions around debugging migrations with Sentry, signing apps for distribution, speeding up builds, permanent redirect SEO implications, full stack frameworks, cookie behavior, loading state UX, and technical interviews.
- Sentry helps debug migrations
- Signing apps for distribution
- Permanent redirects have SEO implications
- Full-stack frameworks don't need separate backends
- Separate backends useful for legacy systems
- Fast builds with ESBuild, Vite, Rollup, and Webpack
- Rollup replacement RollDown uses Rust compiler
- Webpack users struggle migrating to Vite
- Next.js only framework still on Webpack
- Turborepo speeds up development
- Turborepo cache can slow down builds
- Browser extensions can read HTTP cookies
- Partitioned cookies isolate iframe sessions
- Permanent redirects hard to undo
- Use domain variations for cookie sharing
- Don't add delays to short loading states
- Only show loading after 300ms
- GitHub interviews give little feedback
- Interviews assess personal fit
Transcript
Wes Bos
Welcome to Syntax today. We got a potluck episode for you too. It's just you bring the questions. We bring the answer to some really good questions today around, should you be adding time to your loading spinners so they don't flick off so quickly? Quoting work, for existing websites. So you you're gonna do some work on an existing website. And, how do you know what what lies on the back end? Is it gonna be awful? Is it gonna take you a long time? How do you figure that out? Partition cookies JS kind of a new thing to how cookies work. We're gonna dive into that. Should you use Node with SvelteKit or Remix or something like that, or or is that not really a use case? And some questions around the interviewing process as well. Let's get on into it.
Sentry helps debug migrations
Scott Tolinski
Before we do that, let's go ahead and take a quick second to check out Sanity. Sentry Scott I o is the perfect place to track and solve all of your bugs. Man, I ran a big migration, a a big whole migration on the code Bos recently, and I pushed to production because nobody gave me a code review. Wes, I'm just gonna say that nobody gave me a code review. It's very sad. I I requested several code reviews, and everybody's at home to do it. Node gave it a look over.
Wes Bos
Node. I know. But I I wasn't.
Scott Tolinski
You're the you're the Svelte master. So Yeah. It also touched, like, a 100 some files. Like, I mean, it touched the whole the whole app. So I'm I'm just I'm being cheeky here. But either way, we ran a whole big migration, and there is 1 bug that keeps coming up from that migration. Something about a proxy object could not be cloned. Let me tell you, I'm gonna fix that bug today because it was really just the assurance of knowing that I could, one, our test pass, the code builds.
Scott Tolinski
I manually tested it. But I know that if I push it to production and there's something wrong, we're gonna see it in Sanity, and then I'll be able to make sure that gets fixed. So, this little proxy object could not be clone bug, will not be sticking around for long because we've had 29, instances of it in the past 24 hours, which isn't a ton. That's not a ton. So it's clearly not hitting that many people, but something is happening there. And I'm gonna find out what. So thank you, Century.
Scott Tolinski
Century dot I o forward slash syntax sign up and get 2 months for free using the coupon code Sanity treat.
Signing apps for distribution
Wes Bos
Alright. Let's get into it. Alright. We got lots of really good questions for you today. Again, if you want, if you got a question, please send it to us. Go to syntax Scott f m. And in the URL bar, there's something that says potluck. Click on that. Send us your question or or thought or, really, send us anything, and we'll answer it on an upcoming episode. The first one we have here is from Justin p. Scott mentioned that sending his Tori app from Hack Week to the rest of the team was tricky and required some Apple fu for signing and certifying the app. I'm curious what is required. Thanks. Everything on the index. Yeah. This is an interesting question because when you build a desktop application or or even, like, when I want to run apps on my Samsung TV that are not in the store, you have to do a whole certificate signing process. So what is that like, Scott?
Scott Tolinski
Yeah. So for the process in Tory, 1, if you're distributing on Apple and you want the app to open without a message that says this app is damaged, which is when I first sent it to the team, I didn't realize that it would it would come with that message. I thought it might just be, like, this is an unapproved developer. Click okay, that message. But, you know, it Wes, like, this application is damaged. So I needed 1 in Apple developers account, which I already had. It's shaky because it's under my, LevelUp Tutorials LLC and not under Syntax, but we're not distributing it to anybody. So it doesn't matter. Right? Yeah. I just Node to sign it. And the process involved creating several certificates.
Scott Tolinski
Now it was interesting because I'm I'm trying to pop open the the docs right here because what you first had to do Wes, create a signing certificate on their website. You had to download the certificate. You had to put it in your profiles.
Scott Tolinski
You had to configure Tori. You had to sign it locally. You had to have basically everything in your config.
Scott Tolinski
You had to run some commands. You had to open some things in Xcode. I basically, there's there's a lot of work. We There's a couple of pages on on Tori's docs that explain exactly the process. And and if I'm being entirely honest. If I had to do it a 2nd time here, I would have to look at the docs again because it it's just like step, step, step, step, step.
Scott Tolinski
Alright. Now that you're ready to go, you've done everything. Your certificate is loaded up into Xcode. When you build the application, if you have all of the proper information set, it should then be signed. Now I don't even know the process of getting it into the App Store. There's docs on that as well in the, in the Tori documentation, which is actually really good for this stuff.
Permanent redirects have SEO implications
Scott Tolinski
But, really, when you're done and you build the thing, you end up just getting a DMG, which is a disk image, and I can pass that disk image around, load it up, and that's it. So, the what what is required, basically, you need an Apple developer's account. You need to create that signing certificate and then just follow the directions in their docs because it's, yeah, it's different than,
Wes Bos
you know, pushing go and having a website deploy. Right? Yeah. And the we should say the benefit of of having a an application signed is that not anyone can just come around and replace that application. You know? Like, you leave your computer open, and you swap it out with a nefarious version.
Wes Bos
The operating system is going to it's similar with the HTTPS certificates or whatever the certificates are called, where it's gonna throw a fit if you somebody nefarious tries to replace or tamper with that. Because that's another thing as well. It's like it could be the application, but if you then change it, that's part of the reason why it's hard to change or add CSS to Versus Node as well because you're literally tampering with the runtime of the application.
Scott Tolinski
Yeah. Which is funny, because when I use the APC, I don't even know if that works anymore. But when I was using APC for Versus Code, Versus Code had no problem with you modifying those files. I mean, whatever they did made it so Versus Code had no problems with. But the same process on cursor, cursor immediately says, cursor JS corrupt. Can't do anything. You know? And all it's doing is modifying some CSS files, and that still loads. It still works, but, like, a little toast message pops up, and it's like, there's something wrong with your install. Yeah. It looks like the APC did get is now broken within a latest update to Versus Node. Yeah. I think that was just due to a filename changing, and then the developer just hasn't
Wes Bos
updated it yet. Hasn't updated it yet. Okay. Interesting.
Wes Bos
Next question from CDawg. I enjoyed your content on Deno and SvelteKit, but is there any point in using them together? This is a great question because, yeah, we talk a lot Scott, oh, yeah. If you want a back end stack framework, then you gotta use Hano.
Wes Bos
But if you wanna build an entire app, both front end and back end, then maybe reach for SvelteKit or Next. Js or Remix or Tansac Scott or or any of these, like, full stack frameworks. Right? And the answer to that is is no. You probably don't need Hano or Nitro JS another one in the space as well if you are using a full stack framework. And in fact, 10stack start is built on Vinci, which Vinci is Vite and Nitro together.
Wes Bos
Essentially, if you wanna build your own stack or you have some existing legacy code Bos that you wanna move over, maybe you'll reach for Deno and Svelte. Or if you you just say you wanna make your own custom framework, then, yeah, you can do that. But if you are starting fresh, no. You can go straight in and just grab SvelteKit, Next. Js, Remix, Tansac Star, any of those. Yeah. You know what's interesting about this question, Wes, is that
Full-stack frameworks don't need separate backends
Scott Tolinski
I there was a a post on Reddit a while ago, and I'm trying to find it Wes people were, like, asking about this stack. And they were saying, I'm using Sveltekit and Deno or HONO.
Scott Tolinski
And I'm like, so many people in the comments were saying, that's awesome. I do the same thing. I do the same thing. And I'm just thinking, why? I don't get it. Oh. And and, sure, I guess if you're moving over or if you want a completely separate process to control Yeah. Your back end. Right? But, man, it's so easy to do the other way. Yeah. I I get maybe having a separate back end. But at the same time, man, you can host a full API, just an API via SvelteKit. You can have endpoints. It feels flexible enough to me that unless I really had an application that I was needing to scale in a different way, I would Mhmm. I would pretty much never reach for having a separate
Wes Bos
back end. A separate back end. Yeah. I think there's there's probably still use cases, especially if somebody has an existing back end.
Wes Bos
Because if if you were, like, trying to pitch to your your team, like, alright. We have a Android app. We have a React Native app, and we have a website.
Wes Bos
What are we gonna build our API on? I don't know that people would say SvelteKit. You know? Mhmm. Because, like, you kinda have to use the Svelte part of that to make that that really worth it. It would be really odd to do that. And and if that's the case, yeah, you, well, you can use Deno and SvelteKit together, where Hano would be you build your entire API. Right? You put your your drills schemas in there. You do all of your middleware.
Separate backends useful for legacy systems
Wes Bos
You do all of your caching and access control. Everything would happen inside of there. And then your Svelte server side would be very a very thin layer that would simply just import the Deno
Scott Tolinski
API, and you can use that to to hit your API endpoints, get your data, and whatnot. Yeah. That makes sense to me. I was seeing people asking if they could literally embed Node into SvelteKit. Like, can I have Hono routes inside of my SvelteKit server Node? Which to me makes no sense whatsoever. I can understand separating especially separating your UI from your your API in terms of the code base. That that's no problem to me. But I like, I've never needed a replacement for Svelte Kids' own endpoints within No. You're You know? Like, the router is so core to these things that if you
Wes Bos
all of a sudden had 2 routers,
Scott Tolinski
that might be a little bit funky. I'm sure you could do it, but I don't I don't think that would be very fun. I don't get it. Yeah. Any point in using them together? Yeah. I think we we kinda hit all of the different reasons why you may or may not want to use them together. If I was having to have a separate API server, I probably would pick Hono today if that or a sec separate back end server or whatever just because it's the one I like the most out of all of the the available options.
Fast builds with ESBuild, Vite, Rollup, and Webpack
Scott Tolinski
Alright. Next question from Jack Broomer.
Scott Tolinski
Hello. In many of your episodes, you talk highly of Vite in both ease of use and raw performance.
Scott Tolinski
However, I don't think I've heard you guys mention RS pack Wes build. I personally have found it much easier to migrate from CRA with some custom webpack extensions to RS pack. I think I spent more than a week trying to make Vite compile esoteric module oddities Vercel less than an hour for r s pack. While we're not using r s pack for production builds just yet, it has sped up our local development builds from 1 to 2 minutes to less than 5 seconds. Yeah.
Scott Tolinski
What local development builds, 1 to 2 minutes.
Scott Tolinski
Woof.
Scott Tolinski
That's all I gotta say there. Thanks for reading, and love the show. Yeah. Totally.
Scott Tolinski
I think for me, one of the reasons why you won't hear me mentioning r s pack very much is specifically because I did not use webpack.
Scott Tolinski
I'm one of the few lucky developers who got to skip webpack entirely. I did not ever work out anything with webpack. I did roll up. I did ISO build. I did Vite. Never did webpack. So that is the main reason why you don't hear me personally talking about it. But r s pack is a is a very cool project.
Scott Tolinski
And, definitely, I think one of the things that webpack users have been missing out on, more recently JS seriously just the speed of this modern tooling, whether that is, via ES build, Vite, or now JS pack, or any of these new faster tools that had been just really, really cruising on it. One that I'm I'm super interested in and, you know, the Vite team is is all about is roll down. And roll down is a fast Rust bundler for JavaScript and TypeScript with a, roll up compatible API.
Scott Tolinski
Now this is, like, kind of, I think, the future of roll up for them because roll up, by the way, do you know you know Rich Harris created roll up? Right? I actually did not know that until I was writing the notes for this question. I was like, oh, Rich Harris wrote roll up? I had used roll up before in the past, and I had I remember seeing that. And, yeah, Rollup Rollup, awesome awesome build tool in the past, but definitely more of a we use what ES build for for development builds or whatever. So either way.
Rollup replacement RollDown uses Rust compiler
Wes Bos
Let's let's explain that. This this thing about Webpack is there's so many people that are have huge applications on Webpack, and there JS no hope for them to move over to Vite, either because they have they've built a whole bunch of custom loaders that are specific to their company Mhmm. Or it's just it's just the it's such a tangled mess that it it's not worth even moving over.
Wes Bos
And the there's tons of people. They built their whole app on create react app. You know? And then at some point, you eject out of create react app, and then you have your own webpack build, and then there's maybe have some babble stuff built in there. You know? And it's just like, it's not not worth moving over. You know? So RS Pack is a Rust based implementation of Webpack, and it's such a good such a good solution to if you have a slow Webpack JS try RS Pack because it supports most of the webpack API. There's also TurboPack from, the folks at Vercel. They actually hired the guy who built webpack to build TurboPack, and it's pretty close.
Webpack users struggle migrating to Vite
Wes Bos
I still hit I tried moving a couple of Next. Js sites over to TurboPAK, and I still hit a couple issues around Wes workers and, MDX plug ins don't work yet and and whatnot. So I I had to, again, I had to switch back, which is kind of annoying.
Wes Bos
But roll down is is awesome. So Vite uses Wes build in, like, development to just transform a JSX and things like that. And then when you wanna build, they use roll down. So then you have 2 different bundling tools. They use roll up. Yeah. Roll up. Yes. But the idea with roll down is that it will replace both ES build for dev and roll up for, for production, which that's kinda wild that Vite uses 2 different tools.
Wes Bos
And I don't think I've ever hit a inconsistency between the 2. And, like, you think like, oh, running a different tool in dev than than prod? That seems risky.
Scott Tolinski
Yeah. I I don't I mean, I I don't have any issues with it personally. I think they're they've really figured out whatever that is. But, by the way, RollDown is is built using 0xc, which is something we've talked about quite a bit, which is the JavaScript oxidation compiler. I don't know what oxidation means here. But, basically, it's a a Rust based compiler for JavaScript that we've talked about, quite a bit on this show. But that's what roll down is using, to do its stuff
Wes Bos
to do its compilation, at least. Yeah. And that's we're gonna we're actually having Evan Yu on the show in in a little bit, and he basically just started a company to fund all of this stuff. Right? Because there's there's v v test, Roaldown, and o x c. O x c is is under the hood for roll down. So there's yeah. He's doing a lot of stuff for the the the industry. That's Yeah. My one, like, caveat of of Next. Js right now is that, like, it seems like Next. Js is the only one sticking on webpack, and everybody else is on Vite. And and Vite has such a like, obviously, TurboPact has has a good feature as well, but it's it seems a bit odd where things have to be a little bit different in the webpack world.
Next.js only framework still on Webpack
Scott Tolinski
Yeah. I Node, Vite has such it has such a great big community and a ton of stuff behind it. It just Yeah. It feels like that's such a huge selling point. The the Veet community is really big and strong. You mentioned, TurboPack, not really related other than by, you know, where it comes from in the Node. But Turbo Repo is something I've really been diving into a lot lately, Wes. I don't know. At first, I was not sold on needing a a thing like Turborepo.
Scott Tolinski
But, man, so for for people who don't know, Turborepo is a, it's a way to kind of manage your dependencies to manage your build in a way that it can cache your build. It can make your mono repo stuff easier. It can run a whole bunch of commands at once. Man, I added turbo repo to my starter, my drop in starter. Yeah. And it has made developing that thing so much easier with, being able to to work in my workspace so much better. So shout out to turbo repo. It's one of those tools that I kind of Wes, like, I don't need this. And then Yeah. Now that I tried, I'm like, it's what's that meme where the the bird is, like, Sanity, and then it eats the cracker? And then it's like Yeah. It's like, oh, it's actually pretty good. Yeah. Yeah. I That's me. Run tour Turborepo
Wes Bos
on my, courses platform. We had we had, Jared on. Actually, he he freaking did a call with me and helped me set it up. What a good guy. Man. And, yeah, basically, you can, like, do I have, like, a monorepo, and I have, like, 3 different, like, apps, and those all have dev commands. So you can just say turbo run dev, and it will run the corresponding dev commands for all of them. And then when you build the thing, it's smart enough to know which parts need to be rebuilt, and then it will also cache them in the node modules directory. So when I go to to deploy the thing, it because my I use render, but this this is the same on many CIs, They will cache the node modules directory so that you don't have to Npm install every single time. And what they do is they stick the cache of your build in the node modules directory so that the next time you run a build, it goes, hey. I I left this here last time, and it pulls it back out. And then the, like, the further benefit and this is the this is, like, how they make money, both Turborepo and Evinue's new void 0, I I bet, is gonna do this, is they do, like, remote caching. Meaning that, like, if you run a dev command on your computer and some of these apps take, like this guy just said, takes 5 minutes to run a a local dev command just to start the whole thing up because there there's a lot that needs to happen. If you do that on your computer, now you can then share that cache with other people both in dev as well as as production. So you could have, really speed it up. There there is 1 caveat that I've hit, though, is that every time I run turbo repo, it sticks the cache in my node modules.
Turborepo speeds up development
Wes Bos
Mhmm. But then my node modules continues to grow, and and part of the CI is that it restores the node modules.
Wes Bos
So at a certain point, it's much slower because the node modules' restoration is so large. So every now and then, I have to blow the node modules cache away because it's faster to npm install and do a fresh build versus use the cache, which is kinda hilarious.
Scott Tolinski
Yeah. For people who don't have this, I highly recommend just dropping a script into your shortcuts or your aliases or anything that is just nuke all of the node modules from a given directory.
Turborepo cache can slow down builds
Scott Tolinski
I use that somewhat frequently. Or even better, I have a, I have a clean command in my package dot JSON that does all that for me.
Wes Bos
Next question from it depends. How do you quote potential clients on the cost of updating their website if you don't have access or inside knowledge that they have already built? Considering factors such as the previous agencies worked on the site and their reluctance to help. Another competing business is yeah. That that's true.
Wes Bos
Potential clients unable to give or grant access to the code or CMS that their website uses. Yes. This is a thing I hit all the time. Oh, cool. Can can you give me access so I can just kinda poke around? Oh, I don't know who who has who has the password to that. It's terrifying that so many businesses don't have control over their own web presence. Goes on to say, typically, clients do Scott have the faintest idea of the tech that went into their website or how it was built. And when you come in as a freelancer new agency, you have no idea how much it'll cost to quote. Where do we even begin on this type of thing? Yeah. The it depends. Right? The the answer to this is you need to do your research into it. And if you can't access it, you're gonna need to be able to access it eventually.
Wes Bos
And I get that they're probably trying to just kinda suss it out, but, like, hey. How much would it be cost to add a page to our website? I I think you can you can give them a bit of a ballpark if you know just by viewing source. You can usually figure out viewing source, looking at the headers of the request. You can usually figure out what the back end is built in, and you can kinda get a a decent idea for for what it is. But, quite honestly, I would say, hey. It's gonna be this crazy wide.
Wes Bos
If it's what I think it is, here's here's my idea. But if it's something that's totally different, it might be a little bit more. But I don't think there's any other way around this than a wide estimation or just getting full on access to this thing so you can poke around. And, certainly, I would not want to quote something without giving a, without having to poke around at it because you don't know the the awful crimes that have been committed by the previous developer before you.
Scott Tolinski
Yeah. And even if I mean, I think even, like, at the very least at the very least, you you know what the system is and, like, where it's hosted. Okay. This is a WordPress site being hosted on on Bluehost. Yeah. I know that there may be dragons in this code base.
Scott Tolinski
Maybe even you could give them a bit of a a quote or a range of a quote with the preface of, just so you know, this is like this is the this is a scenario if this was how things are typically.
Scott Tolinski
You could think of it as like this. Like, have you ever Scott, like, a remodel being done or something like that, and then let's say you're just simply, like, doing some tile or something. They pull off the tile and they find a bunch of mold. Well, that project is going to balloon in cost comparably to just replacing the tile. Yeah. I don't I don't even I've never had this been done to my house before, but I'd assume that's the case. That makes sense.
Scott Tolinski
At least I've seen it on on home flipping shows. Right? So I think you could take that approach and say, this is what it should cost.
Scott Tolinski
But, again, try to get as much information as possible because, knowledge is power in this situation, and you wanna make sure that that quote is good. Because if you quote too little, project takes up too much your time. You're either gonna eat that cost or you're gonna Yeah. You know, make the the client angry or something like that. And trust me, I've had situations Wes, especially early on in my career, where I felt like, oh, I'll just say yes to all this stuff because I'm trying to get in. I'm trying to get some experience. I'm trying to get some clients.
Scott Tolinski
And, like, only a handful of times did that work out well for me, where I just, like, push through something that I, you know, I knew was not a good idea necessarily just based on the way the client is acting or what it is. And then, you know, that stuff only ever ever gets worse over time. Of course, the further you get into it. Right? You say yes to a client. You think that client is like, maybe, well, they're hard to work with, but I'll just knock it out and do whatever, and then you never know. So, yes, get as much information as possible. And any quote that you do give them without seeing the code, make sure that they know that it could potentially rise in cost.
Scott Tolinski
Next question from Christian.
Scott Tolinski
Hi there. I really enjoy syntax while driving. On the last potluck session, you talked about cookies. I have 2 comments. 1st, HTTP cookies are readable by extensions, which Wes surprising to me too.
Scott Tolinski
Feel free to look it up on my LinkedIn.
Scott Tolinski
Secondly, I would love to hear your take on partition cookies aka chips.
Scott Tolinski
One more unrelated things, can you share tips on how to get Node inspiration, talk ideas, post ideas, love the vibe of the show? So I'm gonna start 1st with the cookie business, and you are totally correct, Christian.
Partitioned cookies isolate iframe sessions
Scott Tolinski
HTTP cookies cannot be read by the client. JavaScript can be read by extensions, which apparently extensions have that layer of permissions that the client doesn't have that allow them to reach HTTP extensions. I did confirm this, and that ESLint fact correct. I didn't know that. Thanks, Christian, for that. I wonder what the use case for that is. That seems Auth maybe.
Scott Tolinski
I don't know. No. I have no idea. Yeah. Auth inside of cookies or auth inside of extensions because extensions can't run on the server. So
Wes Bos
Oh, yeah. Yeah. If you want to be able to Yeah. Set an HTTP only cookie from extension or but then you need to be able to read it. What if you wanted to read it? Yeah. Also,
Scott Tolinski
he mentioned chips or partitioned cookies. Man, Christian brought the heat because this is also something I had not heard of, partition cookies, which are not available in every browser. So I wanna, throw that caveat out there because partition cookies were something that had been in Chrome for a bit. We're only added to Firefox in September. What month are we in? November? So what, 2 months ago? So they were just recently added to Firefox and are not in Safari at all. But what these things are JS, basically, they're partitioned cookies so that let me give you a use case here. Let's say you have, like, a, an iframe comments widget. Think something like discuss. Right? Users could stay logged into the comments widget on it in each individual blog that they have signed in on, but the comments widget itself can't track users across those blogs.
Scott Tolinski
So each blog gets a separate independent user state.
Scott Tolinski
Log owners get common functionality without compromising user privacy. So, basically, you would have 1 cookie. It would be for both comments widgets on 1 page. Like, you'd stay logged in to discuss on both pages within that iframe, but they couldn't track you between those sessions, which is not something, you know, I've had to do very much. In fact, I I don't really even know that much about, cookie behavior and iframe. I see. But, historically, when a site embeds content via an iframe, the embedded content has been able to set a cookie on the user's device in response to a cross site Wes. If the user visits other sites that embed the same content, the embedded content can access the same cookie originally set by the 1st instance of the embedded content.
Scott Tolinski
What a sentence, man.
Scott Tolinski
Yeah. Yeah.
Wes Bos
So this is really nice because it can be used to track you across the web. So, previously, what had had this was done with images Wes you would let's say you have an image to add server.com, and you embed the image to add server.com.
Wes Bos
And adserver.com can set a cookie, and it also knows who is requesting it. So it knows, oh, well, scott.com has been requesting, this, so we'll set a cookie for that. And then all of a sudden, you go to wes.com, and I also am embedding that image. Now it knows that you visited wes and scott.com. Now that's not possible anymore. They we've removed that. You can't just do it via an image tag because it was using being used for nefarious things.
Wes Bos
But there are some use cases where where you do wanna be able to to have access to those cookies. So this will allow you to set cookies for a third party, but if it's then embedded on another page, like Scott says, you cannot access it. I I could see this being really handy for, like, Shopify websites that run on, like, subdomains, you know, if you wanna be able to run custom code on that page, third party embedding widgets.
Wes Bos
This is surprising that Safari has not implemented this yet because they are almost always the 1st to implement these, pain in the butt cookie things because, Safari is number 1 with, like, not tracking you across their devices even though Apple Apple themselves has their own, whole ad platform for for Bos. But on the web, they they wanna stop it. I'm surprised that Google and everyone has implemented it. Yeah. Yeah. For sure. I had no idea. I had never heard of this either. So, yeah, you learn something new every day. Alright. Next question from TJ. Let's set the record straight on the redirect Node. 301, 302, and 30 seven. So let's let's go through what those are real quick before we read the rest of the question. So 301 and 302 are probably the 2 that you're most familiar with, where 301 is a permanent redirect, and 302 is a temporary redirect. And when you would want to use 1 over the other is if you want it to be permanent or not. So for example, if you go to syntax.fmforward/856, we do a 301 redirect. And what that does is it, it looks up the episode for, 856, and then we'll do a 301 redirect to, to the actual page. The reason we don't do a permanent redirect is because there's there is a possibility that we will change the title or the URL of that.
Permanent redirects hard to undo
Wes Bos
And if that's the case, we have no way to clear that redirect in the user's browser unless the user were to explicitly take some action to open up dev tools and and refresh the page or or go into their caches and delete it. And it's quite honestly, a permanent redirect is very scary to me.
Wes Bos
Yeah. Yes. There yeah. I can there can be some SEO benefits to it, I think, but I almost always reach for the the temporary redirect.
Wes Bos
And then we also have 303, which is see other, typically used to redirect after a post Wes, instructing the client to make a get request to the new URL.
Wes Bos
So that's kinda interesting. So if you were to post some data, but the you wanna redirect it to a get URL, for example, if you were posting a search term, you may want to redirect your user to a page where the search term is in the URL Wes they get.
Wes Bos
And then a three zero seven is the a temporary redirect similar to 302, but strictly requires that the HTTP method, get, post, put, etcetera, remain the same during every direction. Alright. So those are the those are the 3 here. Early 2000's train of thought was returning redirects was a very serious matter that it could neg negatively impact Google rankings if done correctly.
Wes Bos
So I think has been a little timid about setting up redirects. That's exactly what I just said. Yeah. I'm still unsure if I should be using the correct one. I read that 301 and 302 are considered old, not as good, and pass possibly bad practice.
Wes Bos
Rather, we should be using 303 and 307. If that is true, can you explain the difference between the new redirect codes? Speaking of HTTP response codes, my son was born on April 18th, and I love it. Congratulations.
Wes Bos
Yeah. This this is a great question. I have also been using 301 and and 302 myself as well, but I think it does make sense to explicitly enforce whether you are going to be changing the method of the Wes, meaning that you are going from a post to a get or if you're going from a post to a post. So I don't see why you wouldn't want to to use these things.
Wes Bos
Again, I probably don't use permanent until you're absolutely sure that you are doing a permanent redirect because that can get you into some hot water. I don't know what the SEO implications are for this type of thing, but I've just been using temporary redirects for all of my stuff, and I feel like I have pretty good SEO on all of my projects.
Scott Tolinski
Yeah. My understanding is that those, those redirects, the permanent redirects has always been taught to me as you better be sure. You better be sure that this is a permanent change because that kind of tells the search engines that, yes, this is always going to exist in this way. And if you don't know that, then don't do a permanent redirect. You Node, I think that could be useful where something like a brand's name has changed or something that has, irreparably, you know, happened.
Scott Tolinski
You know, there's no going back. So now that this this this, redirect is happening.
Scott Tolinski
Whereas, let's say, you just change a route from what it used to you don't know that that route structure is going to stay the same or that you might not want to use that previous route at some point, anything like that. So I I I would always, like you said, lean on, being cautious with permanent redirects, but maybe we should both dive in a little bit more deep to what is that actual implication because Yeah. I've been told that, but I don't think I have ever really deeply researched it.
Wes Bos
I think there's probably also a security implication here where if you have a get URL that redirects to a post Mhmm. There there could be a use case where somebody clicks a link, and that turns into a post request. Mhmm. And that post request could have be changing some data and or whatnot. And, like, you'd have to actually make that security hole in your own Node. But being explicit about whether or not the method is changing on this request is probably some good foresight to have.
Wes Bos
Because there are are also use cases for changing the method as Wes. Because, for example, a sign in page, you post your username and password to a URL, and then you do a redirect to your account dashboard, which is a get request. Right?
Scott Tolinski
Redirects.
Scott Tolinski
Oh, by the way, for people who didn't get the April 18th thing, the 4/18 responses, I'm a teapot, which is Oh, I didn't get that at all. Oh, yeah. No. That's, it's it's great. So thanks for that, TJ. By the way, I wanted to follow-up. Christian, by the way, the previous question asker had a a second follow-up.
Use domain variations for cookie sharing
Scott Tolinski
And since he had given us 2 nice little corrections, I figured we definitely had to answer his actual Wes, which was Node more unrelated thing. Can you share tips on how to get more inspiration for talks, posts, ideas, love the show, and the vibe? Christian, whatever you are into, man, dive into it. Go Deno. And, you know, I think this this partition cookies thing is a good example of this. I've never heard this. It would be interesting if a blog post came on my timeline that said, hey. Have you heard of these partition cookies? They're new. Here's what they're used for. Here's what they're about. Maybe some visuals. Maybe this or that. Might even make a good little talk here or a, if you can find, like, some interesting use cases that make practical or even just cookies in general. That's a talk right there. Cookies
Wes Bos
Deno dive. Yeah. I I think that would be a fantastic talk because there's there's quite a bit there, you know, and and they've changed. And what happens if you are signing in on a different URL? You know? Like, that's that's a huge thing as well. You redirect somebody to a sign in URL that lives on, like, authzero.com, and then you come back to your website, and how are those cookies shared? And then there's there's also this weird thing that I stumbled upon with cookies once Wes if you host on Vercel or GitHub or any of these, like if you use a platform as a service and you host multiple, for example, at the time, I think it was I ran, like, appone.versell.com Vercel then apptwo.versell.com.
Wes Bos
And they I was setting the cookie on the the main domain in my application, which was, like, vercel.com or or whatever the Vercel hosting one is or GitHub Scott io, but I couldn't access the cookie from the other application. I was banging my head against the wall being like, why doesn't this work? Cookies are shareable between subdomains.
Wes Bos
Mhmm. And the reason why is that the browsers maintain lists of domains that are interpreted as top level domain names. Meaning that, like, GitHub is treated as if it were .io.
Wes Bos
And because multiple people will be hosting applications on the same domain name, that's not a good idea to be able to do it. So the browser has a whole list of Node and and all of these these services where you can host code.
Scott Tolinski
Yeah. You know, one thing about that, even that that Apex domain thing, the core Pnpm domain Wes you don't have a subdomain on it. Do you know www, people who might not know this, is considered a subdomain.
Wes Bos
Right? Yes.
Scott Tolinski
And that's a good reason to, use www if you have a cookie that you need to be across the domain. I've ran into issues with that personally where I was setting a cookie from a subdomain to an Pnpm domain and it was causing some problems. I I was a little while ago, so I might be a little foggy on that. But yeah. One last thing before we get off this question.
Scott Tolinski
Christian, I think the best way to come up with stuff is to find something you are slightly interested in and maybe not an expert in or anything like that and use it as an opportunity to dive deep into a subject. Right? I think that always
Wes Bos
works because if you gotta talk about it learn something than just to to talk about it. You know? If you're explaining it to somebody, you're gonna learn a lot about it. Yep. Totally. And get your hands dirty, all that stuff. And then yeah. Alright. Next question from Mike. What are your thoughts on using a delay of about 1 second when turning off a loading state? For example, when you go to fetch some data displaying a loading state of some kind while it's fetching and then display the data while it returns. The problem is sometimes the data returns so quickly that toggling between the loading state and displaying the data seems clunky and clunk conflicted.
Wes Bos
And I don't wanna make my users wait longer to see the data, but I also wanna keep the UI feeling nice. Absolutely. This is a really good, thing is if you your users are on a fast connection, sometimes the loading state is just like a little, you know, and it's just a split second, and it just looks odd.
Don't add delays to short loading states
Wes Bos
The answer to that is don't add more time to waiting the the user. So Yeah. To answer your question, don't do this. Yeah. Adding time to showing up the UI, the answer to this is simply don't show a loader until you hit a a specific amount. React suspense used to actually have a delay prop that JS sent. So React suspense, what that does is you wrap your component in a suspense tag, and then you can provide the suspense tag a fallback, which is your loading screen. Right? And it will show your fallback while it's waiting. And there used to be the ability to supply a delay, to that. Meaning that, like, don't show anything unless, like, you put a 400 milliseconds or 200 milliseconds on it. Because, like, if you're just showing a loader for 36 milliseconds, that that doesn't make very much sense. I think they took that out. You have to implement it yourself in your your fallback now. I don't know. I think that's true. Sometimes the best feeling UI is showing the user absolutely nothing at all.
Scott Tolinski
Yeah. That's that's totally correct. I think loading spinners or loading states in general are a problem. You know? It's not something you want to to introduce if you don't have to. So, yes, by all means, the way I handle this is very much to what Wes said. I I I if if the loading time has taken more than, what, like, 300 milliseconds or something, then I might show a loading spinner.
Only show loading after 300ms
Scott Tolinski
Other than that, yeah, definitely do not introduce time into that loading, because you wanna keep yeah. That one second definitely matters. You wanna keep, you know, people on your site happy.
Scott Tolinski
Alright. Next question from CJ. So not CJ Reynolds probably, but CJ, nonetheless.
Scott Tolinski
Apologies ahead of time if something similar has been asked before. I just discovered you folks. Alright. Not CJ Reynolds. Welcome, CJ.
Scott Tolinski
This is a question that could do with much more context, but I'll keep it short.
Scott Tolinski
What are your folks' thoughts on the current way interviews are done? And if available, how would you factor in past worker side projects in the decision making process? I wanted to ask this as I had a technical interview where I admitted I can't say that word, Wes.
Scott Tolinski
Admittedly Admittedly.
Scott Tolinski
Admitted.
Scott Tolinski
That's my specificity.
Scott Tolinski
Admittedly, did pretty bad, though I would argue it wasn't entirely my fault. That said, I've worked a while now and have plenty of public code both related to and not related to web dev and could be reviewed. Unfortunately, that did not seem to matter in this case. Another time, I couldn't move forward even though I technically completed the assessment perfectly and everything worked according to the instructions because I failed to give 1 unit test to pass that took me out of the running. Oh, that's a that's a rough one. Sorry for the weighty question.
Scott Tolinski
I'd still like to be programming whether it's on the web or not. But I think at this point, I'm just tired and ready to consider looking at other professions.
Scott Tolinski
So, Wes, I think there are a lot of things that go involved in an interview.
Scott Tolinski
And one thing that you can't overlook is that you might not be right for the company or your company might not be right as Wes. Because companies have interesting interview process. And I've been in interviews Wes halfway through the interview, I'm like, if I get a job offer presented to me, I'm not going to accept it because this interview has revealed enough to me that, like, I don't feel like this this, this organization has it together. Now granted, that was back when hiring was crazy. Right? And, you could get a job just by looking. You could put Google Wes development and a recruiter would come to your Bos.
Scott Tolinski
But that said, I do think this prior work is important. I think that's a big factor. It's a big factor of getting to talk with somebody, getting somebody in the door. If I get a resume, they have a really impressive GitHub. I look at their code. Their code looks great. That gets you in the door, but it doesn't get you the job. Because what gets somebody the job is how well they mesh with the team, mesh with the vibe. Yeah. Sure. Technical proficiency, absolutely. You pass all that stuff, that's 1 step down.
Scott Tolinski
Node inside projects always looks super good, but that interview is so important from a personality perspective more so than a lot of things. And people don't like to think this because we're developers. Right? It should just be my code. That's the end of the line. Right? My code is pristine. My code rules. You should want my code. But they're not hiring your code. They're hiring you as a as a programmer, and that is a big part of it. So not to say that your interview was bad because of something you did, I wasn't there. But just know that it is a factor of getting you in the door, and it's a factor of of putting you higher on the list.
GitHub interviews give little feedback
Wes Bos
But having these things will not seal the deal no matter what. Yeah. He says the reason he didn't get the job was a failed
Scott Tolinski
test. 1. Yeah. Pass.
Wes Bos
I don't I don't think that was Correct. Yeah. That may be what they told you because it's it's also hard to tell people. Hey, people. Any feedback? Why didn't it work out? You know? But a lot of it is I I I'm guarantee you if if somebody really jibed with you and and you also had that mistake, I'm sure they're like, whatever. You Node, it's not that big of a deal. It's it's so much based on personality and and how you get along. And not to say that it's your personality. It's the Right. How the personalities work together. You know? And Yeah. It sucks to not get the job, but, also, it's a you maybe dodged a bullet of of something that wouldn't have been enjoyable for you to work in.
Scott Tolinski
Yes. Yeah.
Scott Tolinski
Absolutely. And and you wanna know what kind of feedback I got from Google? I don't know what kind of feedback you got from Google. But after, 3 separate interviews, one of which was 8 hours long, and a a trip to San Francisco, I got a 1 sentence email that was, you did not get the job. So, you know, not everybody is going to tell you exactly what you did wrong. Yeah.
Wes Bos
When I interviewed at Google, I think their feedback was something around, like, the the technical. You know? Just didn't I didn't have the chops very early into my career, and I don't think they saw, that I was a a good enough coder or or software engineer.
Interviews assess personal fit
Scott Tolinski
They wanted me to whiteboard out, HTTP requests without any sort of, like, libraries prefetch, you know, before fetch existed. And I was just like, oh, the syntax is because I'm always either using a library or I'm using a framework that that bakes it in. So I was like, yeah. What did I and I I don't know if that's why I didn't get the job, but it was, like, it was an all day interview. And I had, what, like, 5 or 6 technical interviews. I had to give a presentation with a PowerPoint Yeah. To, like, 3 Googlers. Scott of work. And then you have, like, the they'd, like, take you out for lunch, which ESLint itself, like, an interview even though they don't tell you it's an interview. They see what you do with,
Wes Bos
someone spills something, and they see Yeah. What you do. And Psychological experiment.
Scott Tolinski
Yeah. What was it for me that was, like, late to one of my interviews because the 1st interviewer, like, held me up. I wonder if that was this. I was supposed to be checking the clock for him. You know? Who knows? Yeah.
Wes Bos
I yeah. I have a story about about that type of thing is Wes were at the party for React Miami.
Wes Bos
They had these, like, little globes of drinks that were, like, glowing, and they had cherries in them. And I was like, oh, I'm gonna take 1 of these globes home for 1 of my kids. So I took mine, and I was like, I'm just gonna, like, take the ice out and and clean it up. And then I I was shaking it to get the ice out and didn't realize there was cherries in there. So all these cherries fell into the sink in the bathroom, and I was like, oh, crap. Oh, god.
Wes Bos
And and then there was, like like, a bunch of people around. So I just, like, I just got my hands. I scooped up the cherries, and I went over to the garbage and and put them in there. And some guy comes over, like, half in the bag. He's like, dude, you're so cool with me now because you did that. Most people would've just left it for the cleaner. Really? Says a lot about your personality.
Wes Bos
And I was like, yeah. Like, that's that's the kind of stuff that like, what do you do in those situations? You know? It's obviously embarrassing for me that I spilled cherries in the bathroom of this bar. That's so amazing. Like, just yeah.
Wes Bos
I I don't I don't understand the type of person who wouldn't pick that up. No. No. There's a there's a lot of people that that do that type of stuff. It's the same people that don't pick up after the dog when they're they're walking.
Scott Tolinski
I empathize with, anybody who's doing that type of work because that's not a lot of fun. I I had to clean the bathrooms at a ski hill for several years, and that sucked. You know? Oh, I know. I I tend to keep bathrooms very clean, if I'm making a mess with cherries, I suppose. Yeah. So yeah.
Wes Bos
Oh, alright. Let's move into sick picks and shameless plugs. I've got a sick pick for you today.
Wes Bos
I'm gonna pick just getting dim, warm bulbs for your house. So we have all these little kids' night lights, and kids have lamps in their in their rooms and whatever. And, like, a regular 60 watt equivalent, whatever the LED equivalent is, it's too bright. It's it's absolutely brutal, and I feel like it keeps our kids up longer. So I, like, went and found what is the, like, dimmest possible bulb I can buy. I found some that are, like, 10 watt equivalent. We gotta switch to using lumens for for bulbs because we still like, we haven't had 60 watt bulbs in Canada for, like, 10 Yarn, and I still think a 60 watt bulb. But, like, they're they're LED, but they have a really nice warm glow to them, Wes 100 Kelvin, and it just makes them feel a lot better. I'm a big on, like, lighting color as well as, like, lighting amount. And if you can't dim a light, then, yeah, maybe go grab some one of these bulbs. Nice.
Scott Tolinski
Yeah. I wish that I could get Courtney to appreciate
Wes Bos
a dark warp bulb in the house. She gotta have all the lights on full blast, and I'm just like, but it's yeah. We Scott go back to the studio. Full blast when I'm working. Like, I come every morning, I come into the kitchen. My wife has, like, a candle on, and it's dark. I'm like Okay.
Wes Bos
Like, turn them on. I need to see what I'm doing. But when the kids are sleeping, it Node to be a Scott less bright.
Scott Tolinski
I'm talking about, like, 9 o'clock. I'm like, 9 o'clock Oh, yeah. We better be, like, totally cave atmosphere, and, I can't get that. I can't get that in the household. So, wish wish I could. I I do my very best to have home assistant, like, dim them all, but I think it just becomes more of a, an annoyance a general annoyance to everyone involved.
Wes Bos
Yeah.
Wes Bos
I I often try to dim or or brighten, like, 1% at a time, but you can still tell Wes. And, like, we need dimmers that will, like, do it over, like, 6 minutes.
Scott Tolinski
So Oh, yes. I do have a home assistant, thing that does that for waking up. It, like, slowly, you know, sunsets them. But it is kind of a pain. You know? Node I feel like that should be a default functionality just baked in instead of, like there's, like, some automation action you have to run, and it's, like, kind of not super reliable. Yeah. Yeah. That'd be sweet. Alright. I'm gonna sick pick stainless steel, cookware. I've always been a nonstick guy. I've bought lots of nonstick cookware and buy lots because, man, that stuff just doesn't last. I don't think I realized, like, when you're when you're buying, like, nonstick, it's, like, set up to fail in x amount of years no matter what. Yeah. That drives me crazy. Yeah. No matter what you do with nonstick cookware, you baby it like crazy. You never use metal utensils, and, you know, you you take good care of it.
Scott Tolinski
No matter what, that coating always, always, always comes off.
Scott Tolinski
So I I moved we we just we were due for it. We it has been a long time since we upgraded or even, like, modified our cookware.
Scott Tolinski
The the surface was coming off of just about everything. So we went straight up stainless for everything, and it has taken a bit to get used to. But the best part about stainless is that even if stuff gets baked on, it's relatively easy to clean off. I found, like, you you need to cook, especially I don't know if it's all stainless or just the ones that we Scott, but, like, you Node less heat than I needed before with my my previous pans. I don't know if that has something to do with how thick the stainless is or anything like that. You know?
Wes Bos
The carbon steel that I use ESLint in is the same way Wes if you go you crank it because you want it hot fast.
Wes Bos
And then before you know it, it's way too hot. You know? You gotta give it a sec to sort of warm up first and do the whole thing where you draw the water has to dance Yes. On it. And it's there's a good TikTok, steel pan dot guy.
Wes Bos
He's he's hilarious. He starts all his his TikToks off with, like, this is what big chicken doesn't want you to know, and he shows how to cook in a in a steel pan. I've not done the stainless pan yet just yet. I've been carbon steel, but I every now and then, I'm tempted to try it. I just I don't need any more pans. Oh, yeah. We we specifically needed pans, so that was, yeah, that was the the whole thing.
Scott Tolinski
But, yeah, stainless steel pans. I I did not even know that that Wes, like, I I I gotta be real honest. I thought everything was I mean, either you got a cast iron or you got a nonstick. I was so ignorant to the wild world of different pan options. So, stainless steel. Yeah. There's also aluminum, which is aluminum is big in, like, like, commercial kitchens. You Node, our restaurants are big with that, but I think your steel pan is is ideal.
Scott Tolinski
Yeah. I wanted to get something that would last forever, not have to worry about some sort of coating on it.
Wes Bos
Alright.
Wes Bos
Shameless plugs. Check out our YouTube, youtube.comforward/what JS it? Syntax FM?
Scott Tolinski
Yes.
Wes Bos
Is it? No. It's not.
Wes Bos
Youtube.comforward/ f m. Yeah.
Wes Bos
What did you say? Yeah. I just said forward slash syntax f m. You gotta put the at in there. But hit the subscribe button. You can watch us. You can watch, CJ's videos.
Wes Bos
So it's not just podcasts. We got all kinds of good stuff on there.
Wes Bos
Check it on out.
Scott Tolinski
Yes. Smash that subscribe button. Also, leave a comment below. You have any differing thoughts or opinions on any of the questions we ask. Or if you wanna ask a question yourself, head on over to syntax.fm.
Scott Tolinski
Click that ask a poll question button, and submit your poll question. We love to hear from you. We love your questions, and keep them coming. Peace.
Scott Tolinski
Peace.