Egress, scraping, Safari EU changes, is SetInterval worth it?

Welcome to Syntax. Today, we got a potluck for you today. We're gonna be talking about, egress from these big hosts from Cloudinary, scraping images and and putting them on something else. Safari. Does Safari hate progressive web apps? Are they intentionally trying to crumble the web? ESLint interval is is set interval accurate, or should I be using dates? And as well as, like, a couple of really interesting follow ups from people. 1, about the follow ups on the new v three manifest for Chrome extensions, specifically around ad blockers.

Another one around some issues that somebody hit with dates back from our time episode. So some pretty good stuff today. How are you doing today, Scott?

Oh, I've been better. I am, Not feeling great? Yeah. A little fluy. I I got my my Gatorade right here. I've been pounding it. Just trying to just trying to get back into the the vibe of things. I took, you know, like, a flu and cold last night, so I don't know what is, like, just hangover from the flu and cold because I don't know if you you get that. But I feel good. That in we don't get the good stuff in Canada. I I always hear people people cross the border, and they bring back the

American cold and flu and the, like, poisons to kill mice and things like that. They always

well, just like, I don't think you're allowed to do that. But Yeah. I'm feeling a little off today, but, you know, it could just be that I'm I'm still waking up. But, yeah, I, you might notice ESLint my voice or something. Alright. Well, I'll be I'll be extra

on it,

for you. And if you are, off your game, if if your code is sick, like, I'm sick, well, you're gonna be having errors all throughout your application. And here comes Doctor Sentry here to save the day. Doctor Sentry is going to Node only tell you where the bugs are, but, there's even a cool little AI feature that could potentially give you a solution to your bug. And it's pretty neat because I don't know if you do this, Wes, but oftentimes Wes I get a just a a massive dump of errors in my console or something. Oh, of errors. Okay. Yeah. Yes. Of errors. I'll frequently head to, you know, you know, GPT 4 or something, especially if it's, like, really odd, like an odd kind of error, and I'll paste it in there and just say, hey. Can you make sense of this for me? What am I doing here? And usually, it does a pretty good job of finding some of those hard to read ones. And and I think this is what the century tool can do for you just right there in your Sentry, and I think that's pretty pretty sick.

So, sick isn't good sick. Not sick isn't the type of sick I am. If you want to be not sick and have your code not be sick either, head on over to century.i0forward/ syntax.

Sign up and get 2 months for free.

Beautiful. Alright. 1st question we have here from Andrew. Says, I started a site 7 or so years ago and decided on Cloudinary at the time for my image management. The site has grown, and it's making me a little side money, and lots of people use it. But now my Cloudinary bill has gone up, and I've added some features that involve lots of users saving lots of images. I love Cloudinary.

It's super easy and does everything, but I think I need to migrate it away from this project. Yeah. That's Cloudinary is awesome, and that that free tier is awesome. But, man, once you start paying for it, it is it gets expensive really quickly.

I have a 100,000 images here all with the URLs in the database, in one table or another. How would I go about migrating something like that? Where would you migrate it to, if you want to spend as little as possible and still deliver quickly and optimize images. Is it as simple as fetching every single image by its URL in a Python or Node script running some kind of an image manipulation to optimize it, then save it to s 3 and, put Cloudflare in front of it. They're usually not one for reinventing wheels, but this will save me money every single month. This is this is a really nice, like, example of yeah. It's fine to pick, like, a service and just get the thing running.

And if it picks up, then, yeah, you you can move it somewhere.

This is great. You know? Like, he probably got up and running with Cloudera really quickly, but now it's it's worth spending a little bit of time and a little bit of money to move it somewhere. So the long run, you have a a cheaper solution. So what are your options here? There's a couple options. Yes. I think at the very basics, you can you can build a script that would simply just go out, fetch the the actual URL, that you have, download it, and bring it on back. I think even some hosts have, like, agreements with Cloudinary. I'm not sure if Cloudinary JS on this list, but a lot of times, hosts will have agreements because there's a fat pipe between them where you're not paying for bandwidth between one and another.

And downloading the image might not be a major expense, but you certainly should look into, like, what does it cost to this is called egress. When you're taking your data out of one of these services, you're often hit with some bills to to get your your stuff out. So where would I bring it? I would probably look at Cloudflare, just for for all of it. Cloudflare has its own image transformation API. You can certainly build your own. I remember we had the folks on Yep. From Sanity, and they're like, yeah. We just, like, built our own image transformation, and with we're Node day, we'll swap it out, and they never did. They just they use Sharp, in Node, and it it does all the things they need to do. So you could you could do that, but I think Cloudflare's, what is it called? Cloudflare image optimization, $1 per 100,000 images delivered per month and $5 per 100,000 images stored per month. So you're looking at, what, $25 a month to store the images, and then another depends on on how often they're actually being viewed. Right? So that's that's certainly an option. You could also just stick them in an s three bucket.

Another option you could do is just stick a CloudFlare worker in front of your Cloudinary URL. I've done this in the past.

And CloudFlare will cache the cloudinary images, meaning that most of your requests will never actually hit cloudinary.

They'll only hit the Cloudflare CDN, which is much cheaper. So you might even be able to just, like, keep them in in in Cloudinary and, just put a CDN CloudFlare worker in front of it and and Scott the request and return the CDN version when you need it. I have a little I'll link it up in the show notes. I wrote a script exactly for that.

Yeah. It is interesting. I mean, I think you could even find tutorials online about how to build your own claternary just by dumping things in the s three bucket and putting a function in front of it. As long as you're not using any of the sort of wild features that Cloudinary has and you're just using the general image processing stuff, you should be pretty good to go with those techniques. Cloudinary does have some, like, very interesting image generation types of features. Yeah. Lots of tools. Yeah. It would be hard to replicate, much harder to replicate. But if you're really just, you know, give me automatic quality or give me those types of things, it's a little bit less painful.

Next question here is from Ninja Cat. Ninja Cat says, hot take. I've been a developer for 8 years now, and I always use Macs for development.

Until the last couple of years, I made a switch to Windows due to a company requirement, and I have to say I love it And personally made the switch as well on my personal laptop.

I don't miss it and can do everything the same as I could on my Mac. Yeah. Some things require a few extra steps, and it might be easier to install on the Mac, but it's not a big deal. Plus, it saved me a lot of money not having to pay the Apple tax.

Anyways, I hear people always hating on Windows, and, honestly, it doesn't matter. Get the best computer you can afford and start hacking away. I put this in here Scott because it's it's not a question, obviously, but I think it's dead on. Ninja Cat, you nailed it. You'll often hear us talk about windows on this this podcast in maybe a potentially disparaging way, but it's not because it's not valid to work on a Windows machine.

It's just that, you know, Wes and I prefer to work on a Mac, and we're able to. So we do.

But there's nothing wrong with working in the system that works best for you, because that's the beauty of working on the web. Right? We can use a Linux machine. You could use a Chromebook. You could use anything.

And as long as you can get a text editor, you can get a Node Vercel. Heck. You could even do all of your development in a cloud IDE and leave it on your machine.

So in reality, use the use the computer or the system that you can use. And, Ninja Cat, thank you for for posting this because I I don't wanna I don't want anyone to think that our viewpoint is that you must use Mac, even though we both do, and we say mean things about Windows. The the mean things I feel about Windows personally are due more to, like, the kind of craft that Windows has in the the UI. I feel like they need to just nuke the UI entirely. Like, you'll find pockets of Windows that still use, like, the Windows 98 UI in some places. And you just gotta you just gotta wonder why. You know? So for me, I I don't really love the aesthetic or the general feel of Windows, but it's totally valid. And, especially, it's totally valid to work in as a developer. So, shout out to you, Ninja Cat. Keep on rocking on in the Windows.

Yeah. I think now that a lot of designers have moved to Figma, which is a cross platform, DaVinci Resolve seems to be one of the big video editors.

Obviously, your your code editors are all cross platform, so that that's huge. It it's probably a lot easier, especially, like, I'll ask the audience. Like, who's running an ARM based Windows machine? Because the reason a lot of us love our Macs is these m pnpm m two Macs are fast as hell.

And, yeah, Apple built its own chips, but they're they're just Yarn based chips. Right? And I I don't know that I could go back to anything faster or, sorry, slower. So I'm curious if anybody has tried both the m one Mac as well as a Windows Yarn laptop. I'm curious if if it's as good and if it's as fast. I don't know. Like, there's still some apps that I like, I couldn't live without Raycast on the Mac. I think that would be pretty rough to to be able to do. I'm trying to figure out, like, what else is there? I I could not use a Windows machine. I'm gonna be straight up about that.

Even just like the hardware itself. I like the hardware. I like the design of the hardware. I've never found a trackpad on a Windows laptop that feels like the trackpad on my Mac. And to me, those little little details matter.

But, again, it's development wise, it's, you know, use whatever works. Yeah. And I honestly

I'm in the same boat as you. It's like, I just don't want to I don't have the time to to switch. I don't wanna spend any time learning. If I had time to to learn something new, I would be learning more about video editing, or I'd be switching to one of those keyboards that ESLint and and has all the, like, crazy there's this guy on TikTok I follow, and he, called the Caracorder.

And it's basically, like like, 2 paws, and you're just he's just like, it's it's wild. And I, like, I watch the videos, but I would like to learn that before switching back to Windows because, like, the the price difference over, like, you have a MacBook for what? Probably you probably have a MacBook for 5 Yarn.

And the price difference, like, maybe a couple $1,000, couple $100 a year extra, it's not worth me having to switch and and have that downtime.

Of course. Yeah. I've been using I've been using Apple products since high school. So for me, I I haven't even you know, I have a a Windows machine for gaming at some point, where I did did a Hackintosh for a long time. My my main rig, Wes, was a Hackintosh for several years, where I would dual boot Windows. So it's not like I have no experience there, but I have mostly experience with Mac.

Let's talk more about disparaging things about Yes. Apple now. Yeah.

From Apple fanboy. So this is this is kinda funny because Apple we released our episode with Jen Simmons pretty much the same time that this news dropped, which is, and we had recorded it before this news had dropped. So a lot of people are angry that we'd not pressed Jen about this, but we had recorded it before this news was was around. So what happened is that, the the in Europe, they said, okay.

Hey, Apple. You gotta allow other browser engines on Bos. And I know most people know this, but every time I talk about it, someone says, there's Chrome on iOS. You can download it. They're they those are all using the Safari, WebKit ESLint for the browser. Now in the Europe, they have to allow other browsers such as Chrome to to run their own browser, and you should be able to select your default browser and and all that good stuff. Now with that, there is a beta test out in Europe, and people have been noticing that their progressive web apps, web apps that you can install to the home screen, push notifications, and, web workers, Those are stopping working. Some of the features are going away.

The specifically around when people are opening it, they're saying it says, instead of opening as an app like, right now, if you if you add syntax, you can add syntax to your dock on Safari desktop. You can add syntax to your home screen on on Bos.

And when you hit it, it opens up Scott in a web browser, but as it looks like an app. And there's a lot you can do there, and there's even, like, a full screen API, which seems like Apple is trying to intentionally butcher as well. So there's a thread. I'll link it up on WebKit, because this might be solved by the time you listen to this. It might not be. I doubt it will be. But everyone's saying, hey, Apple.

Yeah. We got new browser engines, but are you intentionally killing the ability to to run a progressive web app on the thing? Because I think what people are scared of is that, well, if you have WASM, you have these custom browser engines that can implement whatever they want.

What's to stop somebody from just running literally anything in WASM and using HTML CSS as their UI layer. Right? So Apple hasn't replied at all to the bug. The second comment on Wes kit on the web kit bug is Thomas Steiner who who works at Google and is big on progressive web app web apps. We had him on, episode 7/22 to talk about progressive web apps and and all they can do project fugu. And now it seems like Apple Apple hasn't replied. Is it a bug? People are saying so. Some people are saying it's a bug, but the the error messages that they're showing kinda leads me to believe that it's intentional.

And, of of course, everybody that works at Apple is super tight lipped about this, and they're not saying anything. The only glint of hope I have is when issues go internal on Apple, they go into a system called Radar, And there's a linked radar bug, meaning that somebody somewhere created an internal bug in Apple and says, hey. What's going on with this? We need to address this because the community is up in arms. So I will be very pissed at Apple. I know we just had a huge episode saying how good Apple is doing, but I will certainly throw them under the bus if this is true.

Yeah. I think this is even kind of classic Apple too. You know? And it it I I want to have I wanna have give them, you know, the benefit of the doubt here that it is a bug.

But, like, when you look at some of the things that they've been doing around, alternative app stores as well and Node loading, they've they've, you know, they've given in to the regulations that say that they need to do that, but they're doing it in the worst and pettiest possible way that makes it completely not usable or, you know, they're they're charging people an amount still where it makes having a free app into an alternate third party app store undoable.

And I came from Android where you could install anything. You could have third party app stores. It was awesome.

And you can do that on your Mac. I mean, the the Mac itself, if I it complains, it says, hey. This you're trying to install this app from, you know, unverified developer, but you can still do it. And the thing that bugs me the absolute most about Apple is that in their modern operating systems, the the phone, the iPad, even the, VR headset, they all use this intentionally limited operating system to push you into the App Store so they had to get their 30% cut.

And I hate it. I think it's the worst thing that they've ever done. You can't even you can't access the system. You don't have full controller ownership over your machine.

It stinks. So if they do this, if this is in reality Node a bug and it's intentional, I think it is par for the course. And I I'm sick of it with Apple, but I still give them my money all the time. So I don't know.

You know?

It's complicated. And here, I just linked up this other bug as well, the full screen API bug. So Safari now has a full screen API, which means that you you can go full full screen, like, over top of the clock and everything on Ios.

However, they've they pop up this this thing that says, it looks like you are trying to type in full screen, or it looks like you're trying to they disable touch events in the full screen, which is like if you're playing a game petty. You need it. And and, apparently, you can't you can dismiss the the warning, but it keeps popping up. And, again, it's just like, is this a bug, or are they intentionally crippling the full screen API because of it? So who knows? But it I'm very curious what how this will pan Node, and I'm also very curious is, like, what happens to us who are not in North America or not in Europe? Wes somebody says, hey. Syntax website has a bug in Chrome, European Chrome, Bos Chrome. How do we get that? You know? How do we how do we test on that? Like, it's it's we're certainly gonna hit bugs that you can't replicate on Chrome desktop that are only on Bos, especially around all this permission stuff. So I'm very curious how we're going to do that. Like, are we gonna have to, like, make a like, I have a separate iTunes account that is American based just so I can download apps that are only available in the US. And And I have to, like, sign out of my Apple ID and sign into it and load the app and then sign out again. And are we gonna have to do that now and get a fake European credit card?

Jeez. Okay. Well, that's great. Next question here from Mike. Is there any clear front runner when it comes to monorepo tools? I currently work in a pretty outdated learner setup and am looking to modernize.

I'm familiar with Turborepo and NX, but wondering if there's any standouts. What are your thoughts? Mike, I suggest you just take a look at workspaces in general.

Just about every single package manager these days has the concept of workspaces built in. I tend to like p n p m's and buns the best myself personally.

NPM's workspaces feels a little overdone. Like, there's a little too much config you need compared to the other 2. Like, PNPM's config for workspaces is extremely minimal.

And I would suggest looking at these tools because they're way less heavy handed than something like Lerna, and they're way easier to use. They're integrated directly into your package manager.

And for many people who are working in monorepos, these tools are more than enough. So if you're looking at your monorepo and you're essentially just sharing code between packages like you would typically do in a monorepo or you just wanna keep things connected or you have shared dependencies, man, Workspaces really accomplishes just about everything that I've personally always needed it to do. And I haven't needed to pick up any of the bigger, more powerful tools that have maybe more advanced caching or like, I don't even I don't even know what I would need outside of workspaces. And I I'm sure somebody out there is going to have a more clear idea. So if you use a monorepo that does not work with workspaces, I would love to hear why.

Yeah. I think that so Turborepo and NX are obviously the 2 big in the space, and we've had the creators of both of those on the podcast.

Alright. Randy, I have a little thing for you.

In this hand, I have the episode with Jared Palmer of Turbo Repo.

In this hand, I have, Node fifty seven with, Victor Sovkin of NX, and we discussed kinda what the benefits are. And I run Turborepo on my course platform, and the I I still I just use PMPM workspaces, but Turborepo on top of that like, it's not an alternative to PMPM workspaces. It just does all the caching for you. So if you have a team where you have very large builds and very slow builds, you can share caches between your team, and you can share caches on build, and that will certainly speed up your builds. But, like, even on Syntax website, like, our builds are pretty fast. Like, how long are our builds? Like,

a couple of minutes? A minute? Seconds? They're not even a minute. Yeah. They're they're in the seconds. I don't I would I can't even imagine it getting into the 1 minute, which is why I'm so shocked that, you know, some people are still on Webpack or, you know, any of these tools because, man, when you get into the the Vite world where your builds are seconds, it is really pretty sick.

Yeah. It's you I think when you get into prerendering, so you especially with React server components, you've got those warp 100,000 pages that need to be prerendered, or you have lots of images that need to be, transpiled, that's when you get into very, very heavy or you have, like, big builds. You need to do a custom Wasm package that is bundled on every single build. Those things really slog you down. And if you can cash and and reuse those, then you get speeded right up. Alright. Let's look at the last, syntax website, which we didn't we don't use any of those things on the syntax website.

It took 1 minute and 33 seconds to build, 1 minute and 8 seconds to deploy. So we are at about 2 and a half just over 2 and a half minutes, to deploy.

Next question we have here from Caleb.

Hey there. Love the show.

Thanks, and keep up the great work. Like any other dev, I often pop open the source code on websites to see what makes a site tick. Big fan of that myself there, Caleb.

One thing I've noticed on big websites like Notion and Airtable is that they often, have a div relatively high in the DOM with a class of something like scroll container or cursor events, presumably for intercepting events. Why is that? I have to assume that they're overriding the browser defaults and handling these events in JavaScript, but I can't find a blog post or in-depth explanation on the topic. Is this just something you do if you have time and engineering team for it? Alright. I know exactly why both of these things happen. So first of all, scroll container JS generally because the application is implementing virtual scrolling. And Versus code does this. If you ever open up the dev tools in Versus code, you go into the debug money menu and grab it. It's really interesting because if you have a 1,000 lines of code open, v s code doesn't actually render a 1,000 lines of code and let you just scroll it with regular browser scrolling because that will get very laggy.

And if you've ever opened like, I've opened lines, like, v s code files with, like, 300,000 lines in it before, and it just scrolls like butter. It's amazing.

And what they're doing is virtual scrolling is you're rendering out what is on page, and then you're rendering out, like, a little bit before that and a little bit after it, and and that's it.

But that will obviously screw screw up your scroll bars because you you'll just have this much stuff. So what they do is they have to implement their own scroll bars or they have to implement, like, that to measure how high they think it's gonna be and just put, like, a div that that's high high there.

But, usually, they implement their own scroll bars entirely to do that type of thing, and you get really good performance from doing that. You get really good buttery scrolling. So that's why there's a scroll container. And then the other one is cursor events. That is doing something called event delegation.

And it's funny. I just I was editing a video today all about event delegation, and what that does is instead of attaching in my example, we're building, like, a focus machine, and I have 50 sound play buttons on the page, and you can play and pause the different sounds.

It doesn't make sense to attach an event listener to every single sound button to play and pause it JS well as attach an event listener to adjust the volume of each one as well as attach like, by the end of the day, I would have had a 1,000 event listeners on the page. So what I did is you at a very higher level, you attach an event listener on just a div, and you listen for all of the events on that div. That's called event delegation.

And when when you click on a button, you're actually clicking on the div that's a little bit higher up, and that's events bubble up. And some events don't bubble up like like audio elements, but you can use a thing called capture. I'm not gonna get into that right now, but, I think Wes even have an entire episode on what capture is in event event delegation.

But, essentially, event delegation allows you to listen with 1 function on event, and you can listen for a click. You can listen for all the events if you want, and then you can figure out okay. They actually clicked on the high div, but via via the event Scott current target, you can see what they meant to click on.

And then you don't have to attach a 1000000 event listeners and add and remove them as you are adding and removing stuff from the DOM, especially when you have infinite scroll or sorry, virtual scrolling, like the first example there.

Awesome.

Next question here is from Leonardo.

Hey, guys. Following this podcast for about a year now. Really love listening to you guys on my commute to work. I was recently listening to the Drizzle episode where you also talked about using SQLite as a database, SQLite.

I hope for some reason, Wes, I say MySQL, but I say SQLite instead of SQLite. Why is

that? I say c SQLite too. MySQL.

I say MySQL, though. Oh, I do say my I say MySQL.

I I say, SQL.

I yeah. Weird how that works. My squeal.

My squeal. Yeah. I am just getting into pocket Bos, which I believe uses SQLite, and I was wondering how scalable this back end JS, and if you guys have tips on moving data and data model from 1 database type to another once you realize that your current database is not the right fit anymore.

For example, I'm moving SQLite to Postgres.

Oh, man. Yeah. So there's a couple of ways you could go about doing this. It it really depends. You Node? Moving from 1 SQL base to another SQL base is a little bit easier than what I was trying to move from Mongo to Postgres.

But, you know, you could you could take, like, a a totally deconstructed approach and take it all back down to something like CSVs and then move those CSVs to one to another, relations and stuff are gonna get kind of tough. I I think the question you need to ask yourself is, like, do you actually need to do that, or do you just, like are you just riding the hype train on something? Because I've I've kinda hit those situations myself where I'm like, I really need a new date. I really need to move my database off of MongoDB.

And, yes, Mongo has its issues. But did I actually need to move my database off of MongoDB? When I sat down and thought about it, no. It's fine.

It's absolutely fine. So is your data situation not fine, or are you just wanting to get on something else? Because I I do think that is a real thing you need to think about.

As far as, like,

pocket base goes, yeah, pocket base pretty This looks awesome. Yeah. It's a so it's a real time authentication file storage admin dashboard.

I'm assuming it's backed by SQLite.

It is.

Yeah.

And, Wes, there's a one click install on, COOLIFY if you wanna just Oh. Give it a try on Coolify. And So

It works with MySQL, MariaDB, and Postgres, so that's good.

I think the answer to this is if the thing you're using supports SQLite and MySQL or SQLite and Postgres, or if you're using something like Drizzle, you don't really have to worry about it because you will be able to write TypeScript and migrate all that data. No problem. It's a little bit different with, like, Deno SQL databases, but I'm thinking about my application in MongoDBs.

I would have no problem moving that thing to a relational database.

And, especially, in in my case, I'm I'm switching database drivers. If you're using Drizzle, I think almost all of your queries and all of your Node rules, I bet, like, 95, 97% of your code will stay the same from going from one to another. And then also there's like like Cloudflare d one is a is their own relational database, but it uses SQLite, adapters to to interface with it. So that's actually a question I have JS, like, maybe the listener could tell us. It's like, what are the limitations to SQLite? How big can you scale that thing? I'm assuming if you do it on Cloudflare d one, there's a there's a couple downsides to it. You can't connect to it directly like a normal database. You have to run it in a worker. So it's a little bit more tricky, but I imagine you're probably not gonna be hitting too many issues anytime soon, if ever, like Scott was saying. Yeah. I think that is the big question. Are you moving off of it because you're actually hitting issues?

And if or are you trying to get ahead of some potential issues? What are those issues, and are they serious enough that you need to do it? There's also, you know, tools like tables plus, you know, like GUIs for your database that allow you to export your tables as all kinds of things and restore them as all from all kinds of things. And those tools might be there to to help you, you know, move your database over. But just again, you know, make sure you gotta do it before you do it. It's a headache.

Chad G. Peters.

I think he tried to get me with the chat GPT unless the text Node. Catch this one. I didn't catch that one. Yeah. I got my guard up now that someone got me last time.

Is chat GPT plus worth it? I use the free version daily for all sorts of programming and nonprogramming related questions, and it's almost always helpful. I wonder how much the better the paid version could be. I'm also trying to avoid death by a 1,000 subscriptions. So this is kinda interesting because you pay for it. Right, Scott?

I do. And I use don't. GPT 4 all the time. I use it all the time. I know you use it through Raycast.

I don't know if you're paying for GPT 4, but I I've tried using GPT 3.5 for programming tasks or asking Wes, and I found the answers are significantly worse than what I get on a GPT 4. And the the nice thing is that I can paste in a ton of tote like, a a big old code example and ask it to append it or or work on it or whatever with me or even help me find bugs or comment the code or stuff like that. And it it handles the task very nicely. So is it worth it? I use it all the time. And my wife and I share an account, and she uses it for work tasks. She uses it for emails and things like that.

So, yeah, I think it's worth the cost.

I would say that, like, I would rather pay for that than many other subscriptions that I am currently paying for as well.

So I don't pay for it because yeah. I use most most of my chat through Raycast, which I've you you get it when you pay for Raycast Pro, and then you can upgrade Node more time to get GPT 4. I don't pay for the g p t four upgrade because I find either g p t 3.5 is good enough for most of my cases, And, also, there's an extension that you could just use the GPT 4 API directly, which is not exactly what the chat is. The chat gives you a little bit more context, and you can upload images to it and and whatnot. But there's lots of tools out there where people have built a very similar experience to chat GPT 4, but you just hook up your own API key, and that is significantly cheaper if you're just using it, 4 or 5 times a day, not sending that much data to it. So I don't know. There's a couple times I've I woulda liked it. Some especially some of the integrations, but I think I'm I'm getting along just fine with with my other ones. And, plus, I've also been using Claude as Wes, and Claude has been free. You don't like it?

It gives me a lot of bad bad,

answers compared to g p t four. For for coding or just in general?

For coding.

Okay. I haven't used it for coding. You're right. Okay.

I've been we use Claude for the, transcript summarization and everything in the the syntax website, and it is so much better than GPT 4 for that type of stuff.

And they have a very generous free tier, and you can upload, like, tons tons more data than you can to g p t four. So is it worth it? Yes or no?

Maybe. That's that's what we say. Hey. You know what? It only Scott, what, like, $20 to try it? Try it for a month. Yeah. You know, that's the whole thing with subscriptions.

Subscriptions become a black hole of spending money if you just keep them running all the time. But, hey, I do this with most of my subscriptions whether that is HBO or any of that stuff.

If there's shows I wanna see on the the subscriptions, I'll subscribe, watch those shows, and then unsubscribe.

There. You've you've pay you've essentially for the cost of a movie or something, you've subscribed to it for 1 month. And, you know, many of these things, the way the subscription works is that you cancel it, and then it still you know, it doesn't prorate your subscription cancellation. What it does is it allows you to complete the end of that month before it actually cuts you off. So what I'll do is I'll say, hey. I wanna use this thing for a month. And instead of having to remind myself a month from now to turn it off, which is a a guaranteed recipe to forget for me, I'll Vercel it immediately after subscribing to it. And then, therefore, at the end of this month, it will automatically cancel on its own. I don't have to think about it.

Yeah. I did that with I paid for a month worth of 11 labs, especially if they give you the 1st month for a buck, which is great. So you could I only paid a buck for it. That's the voice one. So I was playing with that API, and then I canceled it. I have I've been paying for Midjourney for over a year, and it's been on death's door, like, 3 times. I'm like, I'm gonna cancel that. And they always come out with a new upgrade or a new feature. And I'm like, I was ready to cancel mid journey, and then it came out with the ability to upload a a file to it and change it. Or, you can see that with previous data, or you can now zoom out. And I've been using it a lot for, the syntax merge stuff that we're doing, so I'll just I'll I'll wanna, like, do mock ups, and I'll just type in kinda what I want the mock up to look like.

My wife just brought me a smoothie. Thanks. I love that.

Yeah. Courtney, sometimes, we'll just we'll be having a meeting, and then there'll just be, like, food coming in from in front of

you. Next question we have here from Tim Rinkle. It's about set time out. I'm working on a couple of countdown apps, and one is a single timer. The other is multiple timers with a common start and different end times. Node scenario is short term, like 15 minutes. The other is a countdown to Christmas sort of thing. My question is, of performance versus accuracy.

Assuming the timers update once per second using set interval, is it better to establish a base time with a new date or whatever and just keep subtracting Node second from that each time or do a new date every single second.

So I'm gonna tell you, definitely don't do the subtraction thing. I've done that many times, and it has bit me several times. So that meaning that, like, you have a timer for 10 seconds.

You set interval. You have the number of seconds, and you minus minus in the end of 9 seconds Mhmm. 2nd time around. And that's generally going to work. But if you have anything longer than a couple seconds, you're gonna run into issues because, you should be calculating this. You should be having a time stamp of when it was started, and then every single loop, you need to check what time it is now and compute the difference. Because you cannot assume that set interval run at a 1000 milliseconds will actually run every 1,000 milliseconds.

Why? Because you have your phone open and you switch apps.

That goes into background mode at some point, and set intervals stop running. You tab away. At a certain point, Chrome will snooze your tabs, and I don't know exactly when it happens, and it's more aggressive on mobile because of battery life. But you can't just run a set interval in the background of a browser forever because that will will drain your battery. And, also, like, if you have blocking code inside of a set interval, you could possibly stop that. The way that Scott interval works is that it just puts the function that it needs to run at the end of the event loop, in the queue.

And if there's stuff in front of it that is doing work, if you're doing some blocking work, some really intensive stuff, then you're gonna be sorta out of luck with that type of thing. So what I would do is, yes, put a set Vercel, or in some cases, might even make sense to do a request animation frame instead, which is if you just wanna update what needs to go on the page, then just update it as often as you want and use request animation frame, and that the browser will tell you how often it needs to run. And then then you're not worrying about subtracting a second every single time. So you just have your start date, the time every single time that you run it, you grab a brand new date. It's really not that expensive, and you're you're gonna be in good shape. So don't use

decrementing seconds. You'll be in trouble there. Yeah. Word. Next question from Lisa. Love syntax and recommend it to people all the time. Thank you, Lisa. Thank you. That's pretty great of you. I was wondering how you could approach updating dependencies.

Let's say a tutorial works with a previous version of Node. It's an awesome tutorial, so you want to update it. How would you go about updating the dependencies to work with the current version of node? If you are building from scratch, how do you determine what dependencies to use? Thanks so much for your help. Lisa, this is one of those things that gets easier the the more you work with this stuff because you kinda get a feel for what's going to be a pain and what won't be.

Typically, in my experience, going from an older version to a newer version of node hasn't been a problem.

The problems arise when you go from common JS to EJS. That's a big shift if you do that.

The problems arise in ESM. You know, ESM specifically, but the dependencies, bit of it, you know, one thing that I'll do is I'll update my dependencies and then check to make sure the stuff works in a branch and then roll back if it doesn't work. That's a quick quick thing.

If you're using Node, you can use is it NCU?

Yep. Npm check updates. The the command JS NCU. I use that all the time. I use that never because I don't end up using Node.

And the the command is baked into Pnpm ESLint in Yarn.

But all of these package managers by now or with NCU have the ability to interactively update the dependencies based on, you know, if you wanna do the latest versions of everything.

So if it's a tutorial, you know what? It's hard to say because there's some situations where you could update major versions of 10 dependencies, and everything is just gonna work just fine. The APIs didn't really change that much. It didn't touch anything. There's other situations where you were in an old version of React, and now all of a sudden React has changed substantially, and it doesn't support this or that.

Or the dependency has changed in a major way.

This is definitely an area where TypeScript can help because TypeScript will let you know if, like, a particular method no longer exists within a package. Yeah. Or the shape that you pass it has changed? Yes. TypeScript will alert you to those things, and potentially help you guide it. Just know that it could end up being it could end up being a 15 minute project or it could end up being, you know, a 15 day project. Possible. Yeah. Right.

So it's really hard to say.

I would say my advice is to first try to YOLO it and see if it goes well. Do it obviously in a Git branch. Branch off, YOLO it, see how it goes. Yeah. That might give you an idea of which packages specifically have had major changes.

Then if that doesn't work, you can roll back, make another branch, and then update everything without the packages that are breaking. Like, do the the major version updates for everything except for the ones you noticed broke everything.

It's a tough world. I would say Wes you get into the flow, you end up getting really used to it. Now if you're following tutorials, that means you're probably a little bit newer in the in the regard that it might be a little bit tougher for you to be able to manage these things. There is not necessarily a harm in staying with the versions that everything is in the tutorial until you get very comfortable with the tech to feel confident enough to just update stuff.

So, you know, don't always feel like you gotta be on the the latest versions of stuff, And and that's certainly a problem with modern web development where we can just move so quickly. APIs are changing. It's better to have it working than broken,

when you're learning. It because the ideas that you're learning are not changing from 1 to 1. That's I say that in my tutorials. It's like, I'll update the dependencies.

Like, if if you if you started it 6 months ago and you're picking it up again, yeah, go grab the new package JSON and and see if anything has been updated there, but sometimes it's just not worth it. But we have a whole show, episode 425.

You go to syntax.fmforward/425 on the approach to updating dependencies.

Certainly, YOLO is one of them updating, like, SemVer. There's it's going to be, like, 4.2.3, and, it goes major, minor, and patch. And, generally, you can update the minor and patch without breaking anything, so you could just try those. I also use NCU to update everything that is associated.

Like, if I'm updating any config and there's 3 or 4 dependencies that are all ESLint, I could do n c u dash dash filter forward slash Wes lint, and it'll update those. Just do them in groups. And then as well, like, check the documentation change log for the major ones. So if you're going from, like, Deno 2 to 3, certainly go look for the change log and see, okay, what are the breaking changes, that I need to to be worrying worrying about here.

Next Node Wes have here from Cameron Eckelberry.

I thought this one was really interesting, and we'd include it in the show. Clarification on browser blocking. Hey, guys. Love the podcast. I'm pnpm engineering manager for a Malwarebytes browser Deno. No one sent me. It's just me talking as an engineer.

I heard your recent comments about the move to manifest v three. So I forget which episode it was. I was it the Jen Simmons Node? But, basically, we're like, like, moving to v three, it will be okay. And we actually got quite a few comments that we were wrong about that. So, I'm glad that Cameron chimed in here and actually explained, like, what the actual issue is here.

Your comments were half right. Very nice.

Rather than saying we're wrong, half right.

I'll take fault for this because I think I was the one who railed against this. So Alright.

You're there are some great privacy improvements specifically around remote code injection, which Firefox already didn't allow. Yeah. I I know about that with, some of my extensions. But the main impact to content blockers is the removal of the web request blocking API. So, the way that ad blockers work is that they have this API that allows you to intercept requests, I guess, much like a service worker, and you can actually block things from running. So if you open up your dev tools, you'll often see, like, Google Analytics, like, crazy Akamai spy thing.

I guess Akamai is not a they're a host. Wrong one. But you see a lot of stuff blocked in there.

Like, even you open up Spotify, there's, like, 18 scripts going out to TikTok that are all blocked, on there. So Chrome is getting rid of it. Why? Because Google's entire business model is selling ads, and they don't like that you're you're doing that type of thing. So, why our community is complaining is because this doesn't improve privacy at all unless you remove the web request API too, which Google did not.

Any extension can still snoop on your traffic with the new manifest.

The replacement for the web request blocking API is much more limited in scope and does not allow for full ESLint replacements without Wes store approval. Only minor updates are allowed.

Moreover, Firefox, while supporting manifest v three so Firefox gave up on its own many years ago on its own Chrome or Firefox extension API, and they just use the Chrome spec, which is really nice.

Firefox will not deprecate the blocking API. Their comment on it, we believe the blocking web request is more flexible than DNR, thus allowing for more creative use cases and content blockers and other privacy and security extensions.

However, DNR has an important performance and compatibility characteristics we Wes want to support.

Makes sense. So thank you for for that information. It certainly is really interesting to think about these browsers.

You think we talked about Apple earlier. Now we talk about Chrome.

Certainly, they do love the web, but, also, there is a business behind them. So you have to Wes. Yeah. Money makes people do weird things.

Yeah. They they love the web, but money.

That's that's kinda how my I feel it out. Thanks for thanks for this. Next time we get somebody from the Chrome team on, I would love to to pick their brains deeper on this.

Last 1 we have here is another, not a clarification, but just, like, a cool antidote. And I I like these. Like, I think we should Did you say antidote? Ant antidote? I said Sanity what did I say? Antidote?

I think antidote.

I don't I don't wanna laugh at you because I say things wrong all the time. But Antidote. An an

anecdote. Alright. Randy, roll the tape.

Not a clarification, but just, like, a cool antidote.

I probably got it wrong. I would love to yeah. I might have heard it wrong too. I I guess it's just funny.

Alright. So Adam Marcellus says, I just listened to the Time episode, and I wanted to share some problems I encountered in a very recent experience when working with JavaScript's date API, new date.

At the end of last year, I was tasked with updating employee dashboard with a new page where all employees can see a time summary of all their time logs. Here's a summary of what the feature had to do. 1, query the user's time for ranges between a start and end date. 2, determine the number of working days in the date ranges for last week, last 4 weeks, last 3 months, and for the calendar year. So it Wes probably some buttons you can click on it, and then calculate the average number of hours the user worked per working day in each time range.

I was trying to filter all of the user's time logs that had a start date in ISO time format within the range of interest.

The starting point for defining my start date and end dates was new date in the JavaScript API because the time ranges were relative to today, last week, last 4 weeks, etcetera. That makes sense. Right? Mhmm. What I failed to consider was that this meant all my start and end dates for each time period were based on using the current day as the current time for from new date. That makes sense. If you make a new date in JavaScript and pass it nothing, it defaults to right now. It's not an empty date. It's now.

Right now.

I started seeing inaccuracies in time summaries because the entries were being filtered out, although they occurred on the same day as Scott or end date.

Their time value was before or after the current time returned from new date. That makes sense.

From when the code had run. There were a couple different solutions I found at this problem. 1, break the date time into the separate parts where I could compare using get full year, get month, get date methods, or 2, make sure that all the dates start at the start of the day, 0 Deno zero zero zero, and at the end of the day, 23/59/59.

I do that in my reporting dashboard.

If I wanna see values, I have to take the day that somebody wants and rewind it back to the start or the end of the actual day. So I'm I'm including stuff that was before that. Library day functions was very helpful for making these comparisons JS start of day and end of day functions without having to break up. So that was really interesting. He went on and showed some code. I I won't go into it. I thought that was really nifty. I will tell you the temporal API will fix this problem because the temporal API will allow you to create a time.

Well, I I forgot what it's called in the temporal API, but, basically, you can create a representation of a day Yeah. That is not associated with an hour, minutes, seconds, or a time zone. And that's really nice because, like you say, if you wanna have somebody's birthday, you can say, my birthday is February 18, and wherever you are in the world and probably another, Adam Marcello, I'll tell you. Maybe another bug is what happens if somebody is flies to a different time zone and then are are doing that. He might he might have been normalizing those those values there, but, again, I had that bug on my own dashboard where I would fly to San Francisco, and my stats would be all weird. Mhmm. And I'd be like, I figured it out finally. It's because my server was using one time, and I my browser was sending the date in the local time zone.

Yeah. Crazy.

By the way, the the API you're thinking about was plain date and plain time.

Plain time and temporal represents the wall clock time that is not associated with a particular date or time zone. Thank you. Temporal, please come Yes. Fast. I I really want this browser in my a p or I really want this browser in my API. Yes. I do. I want this API in my browser for sure.

Yes. I can't wait for temporal to land because a lot of these problems I never even thought of that as well, though. Like, yeah, you need to specify a time. We don't have a way to specify 2 o'clock.

You know? You have to put it in a string or something like that. Yeah. Yeah.

Neat.

Alright. That's it for today. Thanks, everybody, for submitting their questions. Please go to syntax.fm and submit your questions. There's a button that says ask a potluck question. Keep them coming because we love these.

Let's move into some sick picks.

You have a sick pick for me today?

I do. I have this crazy Vercel miniature little flashlight.

I found this thing as, like, some TikToker saying this flashlight is crazy. It's so bright and little.

And I gotta say, I use this thing all the time. You can find this flashlight cheaper on AliExpress.

Yes. If you wanna just get it from Amazon, it's still $20. It's cheap. This little flashlight is so cool. It's just it's called the bouruit.

I don't know how to say that word.

B o r u I t v ten. They make a couple of more or less powerful ones, and it is very bright. It lights up my whole darn back backyard. It is so very bright.

But I found the utility on it to be really super cool. So there's like a magnet on the bottom. And if you double click the light button, it keeps the light on. I yeah. Their day, I was cleaning out my car. I Sanity it to the, post on the headrest, double click the light. My whole car is brighter than you could possibly imagine on the inside. And I got the I like this thing so much. I got one for my dad and my brother for Christmas.

They're just like cheap little flashlights and, oh, man, rechargeable.

They work super good, and they have a lot of different color modes too. There's, like, even, like, a black light on here. There's, like, an emergency buzzer on it if you you wanna do that. But for for what it is, it packs a really, really powerful bright punch, for the size and capability.

Cool. Man, I LEDs are amazing. I I have a headlamp that has, like, 2 LEDs in it, and I wear it at I have it at the cottage because I have to take the dog out in the middle of the night or if you have to go look for something. And it just, like, lights up the whole place, and it's just 2 little things. And, my buddy, who's a firefighter, came up the college, and he's, like, Wes, that's super bright. I was, like, oh, yeah. You're a firefighter. You probably have some sick ones, on the truck. Hey. He's, like, actually, no. We have, like, still incandescents.

So he's going into a fire with, like, a huge like, one of those Scott flashlights looking for things, and LEDs have come a long, long way.

This thing is tiny. Batteries. It fits in fits in your pocket.

Yeah. Holds a charge for a long time. Yeah. Super good. It's cool. I think I might grab one of these. A big fan

of, like, EDC stuff like this. A flashlight is something you need. The I'm so frustrated all the time with the flashlight on my phone. Like, it's Yeah. It sucks. You know? It's okay. That same kind of ease of use. I use it to take out the trash at night or to you know, I gotta go outside to do this or that. Yeah.

Sick. That is a sick pick. My dad was just texting me about it yesterday. He's like, he he at first, when I got it for me, he's like, hey. What's the deal with this flashlight? And I was like, oh, you'll see. It's it's really awesome.

And then he messaged me yesterday saying how much he used it. He's like, have you sick picked this thing before? I was like, I haven't, but thank you for reminding me because I use it just about every day. That's great.

I had a sick pick something I I've sick picked a while, and we just bought a another one of them because we wanted Node for the cottage. And that is a extremely heavy weighted blanket.

Yes. Oh, yeah. We had the king-size 25 pound weighted blanket, and we were like, let's juice it. So we went to the 30 pounder, and just I love weighted blanket. It just feels so good. Just crushes the the weight of the world out of you. And, if you have not tried 1, it's like a really thin blanket, but it's filled with glass beads, and you sorta we put it in between the sheet and the comforter, and it just it feels great. So I'll link up the one we got, but there's tons of them out there. Yeah. I have, like, one of those beefy ones. Like, it's thick. It's basically a comforter.

Oh, yeah? Weighted blanket. Yeah.

I use it every single night. Summer, winter, or whatever. I'm I've I gotta have it. Yeah.

Awesome.

Shameless plugs. Check out, Syntax YouTube channel. We are streaming video live on there. Leave us a comment.

It helps, and, we we love the one thing I didn't expect about the YouTube channel is that it's, like, become a really good spot for, like, conversation about the episode. You know? Because, like, there's scattered comments on Twitter, and and then there's scattered comments on, like, the Instagram clips and things like that. But, talk about the entire episode as a whole has been really nice in the comments of YouTube, so big fan of that.

Totally. Yeah. Big, big fan.

Alright. That's it. Thanks, Eric, for tuning in. Catch you later. Peace.