Potluck: 8000 ESLint Errors × HTML Time Tag × 7 Meg React Bundle × CSS Modules

Welcome to Syntax today. We got a potluck episode for you today, which is you bring the questions, we bring the answers today. We've got some really good questions on what do I do about 8,000 ESLint errors, some updates on the video podcast.

Does anyone use the HTML time tag anymore? How do you figure out what the hell is in a 7 meg React bundle? That and more. My name is Wes Bos, a devolver for Sanity Canada. And with me JS always is mister Scott Tolinski. How are you doing today, Scott?

Doing good. How are you doing?

Oh, not too bad. Little, little sleepy from kids, but, you, yesterday, we had the terminal versus Laracon basketball game. Scott and I were the, what do you call that, commentators?

Yeah. We were both doing color. I don't think either of us was a a play by play. I think we were both kinda taking both the color commentary and the play by play role. Yes.

Yeah. So it was it was a lot of fun. I think it was just kind of a competition as to who could make each other laugh more, which was great. I think that's the best way to do it.

That's what I was surprised. I went on Twitter after we had done it, and people were just quoting all the jokes that we had, which was Yep. Which was great to see.

You know what also is great to see? Sentry is great to see. Tell you couldn't Node, Wes. You could've said, what's great to see is no errors in my Sentry because I think That's what I was gonna say. Oh, god. Wes Sanity, when your error log is empty what the hell, Sentry? Sometimes you go to a website, and that website is broken. You know? You click a button, nothing happens. What happens? That information about what's going wrong gets sent to Sentry, and it gets compiled with a whole bunch of information.

I'm gonna we're gonna have an episode on this as well shortly, which is, like, all the information about the different browsers. Hold on. Let me see here. I can focus it here. All the different browsers, how often it's been happening, where in the world, what users it's happening to, all the information that helps you fix your bugs. Check it out at century.i0forward/syntax.

Check. Alright.

You wanna we got a potluck for you today. You wanna grab the 1st question here? Yeah. 1st question from old man yells at cloud. Hi, guys. Feedback regarding the video podcast. In my opinion, some of the episodes do not work well as a hybrid. I consume podcast solely while driving, doing the dishes, doing sports, etcetera. And some of the episodes are really hard to follow. I don't want to kill the video podcast, but maybe think about making some episodes video only so that so you can really use the fact that you show code and not have to think about audio only listeners. Maybe you could add video in the title or something. Just my thoughts. Love the show. Been listening since episode 1. Old man yells at cloud. Yes.

You are not the 1st person to give us this feedback. We we've gotten this feedback from, you know, not only, you know, long time fans of the show, new fans of the show, just people who have been listening to the audio cast, especially with some of the CSS episodes we've been doing lately.

It is it is hard when you start to follow, or when you start to do video podcasts and you start to put code up on the screen.

It's hard to think about it as, like, what are the audio people thinking when they're not seeing the code? So we're definitely going to take this feedback and adjust to it. So, you know, if we are showing code or whatever, I think that's going to be at the utmost important to us to make sure that the audio cast isn't ruined. So if you're out there and you're feeling the same way, just know that you are not alone. We will adjust here, and it's something that we're getting used to. You know, we've only been showing code for, you know, a month or 2 Node. And even then, it's not every episode. So it's a skill we're building, and I I think you are dead on. I I totally agree with you and anybody out who who's feeling like that. We will adjust. So, yeah. Yeah.

We're gonna talk about tomorrow a little bit more, I think, but, like, gotta figure out how to, like maybe some of them just need to be on YouTube, not necessarily part of the podcast. You know? Or I don't know. We'll we'll certainly figure that out, and we appreciate everyone's feedback. And if any of you listening do have any other feedback on top of that, please shoot it to us. You can throw it in the potluck question. You can send us a DM. You can send us an email, whatever it JS, you like to get in touch. Next question we have here is from Omar.

Before, small and many Npm packages were considered a benefit. Frameworks like Angular were looked down upon because they had batteries included, but now developers want fewer packages with more functionality.

Why has this perception changed? Will it change again in the future? So that was that was a big thing in Node. Js land. Ryan Dahl was kind of he he piloted a lot of this, is that, small packages that do one thing and one thing well, and you sort of just pull them all together. That's the JavaScript community. And recently, a lot of people were saying, you know what? No. Maybe I want standard lib in Node to be have have absolutely everything. Maybe I do want a framework that makes all the decisions for me. So what has changed? I think that the JavaScript ecosystem has matured to a point where we are realizing that too much of these put wiring it up together is too tricky to maintain and too hard to build integrations Wes you don't know what absolutely everybody is doing. So a good example is is Gatsby. Gatsby had this amazing ecosystem of plug ins. I personally had probably 30 different plug ins, adapters, different things, for my Gatsby website. And then after a couple years, half of them weren't maintained. There was a bunch of churn. They didn't work with different versions of Gatsby, and it was just like Gatsby did an awesome job at, like, bringing the popular ones in under their wings and and officially maintaining them, But it just starts to rot, and nothing works together really Wes. And you're just tired. We're tired at a certain point, and you want it to work together.

There's reasons why it rots though. It's, I I don't know a framework. I mean, I'm sure they are. But framework authors, they tend to think that their next big update is going to fix the platform. But if it splinters enough and then all of a sudden you have a big v two or something and none of your plug ins work anymore, that can just kill your entire plug in ecosystem overnight, really.

It's a it's a tough balance, and I'm gonna state for the record that I'm I've always been for the batteries included. And, you know, I my 1st big dive into JavaScript, obviously, was Meteor. And I love Meteor, and I used it up until the point where they pulled it from my cold dead hands, basically, to the point where the the build tool just you know, it showed its age, and it just could not continue. It was kind of falling behind in a lot of ways. Actually, I think Meteor just had a big, v three release too. So shout out to the Meteor folks for for getting that out. But I've always been a big fan of the batteries included thing. To me, Wes, I think one of the biggest things about batteries included that this community has a hard time with is including a database for some reason. And that's something Gatsby never even, you know, never never branched into because it Wes all, you know, bringing your APIs from here and there. But if you have a specific database technology, and it doesn't have to be database itself, it can be the ORM layer. If you have that ORM layer tied directly to the framework a la Laravel, a la Rails, or la even WordPress. Right? WordPress, you can select which database you're using, which type of database you're using, but the interface in which you're interfacing with that database always stays the same. So to me, if we could all just pick a ORM and tie it really tightly to the rest of the framework, then that to me solves so many issues. Auth, you could easily have auth in that situation. In fact, I'm I'm not gonna act like I'm building something crazy here. But I I did build my own auth, and I'm I'm moving it into a package. And I have a starter kit that I have in a package, and I have a component library and a CSS thing. I'm putting all this stuff together because I like batteries included.

So for me, I I see it JS, like, people just gotta decide on things. And I think a lot of frameworks would really benefit from having an official ORM solution that is tightly integrated into it, whether or not that's their own ORM or what.

You know, you could adapt, drizzle, and have it be built into the framework and have it work Wes, and then you could include auth and all that stuff in there. And I think we'd all benefit from it. So my question to you is why are people not using

Redwood, Strapi, Keystone, all of these things that have said, alright. Wes, we will make Rails for JavaScript.

Yeah. That I mean, that's, that's a good good

question. Bring our own things.

We wanna bring our own things. You Node, I I I I had fallen to that trap because, yes, I agree with you there, but then I wanna use Svelte. Right? I wanna use my stuff. I wanna use my templating language. Redwood, if you could bring your own stuff, I don't know. It's it's so tough for me because, yeah, I I agree with that. I just personally, those aren't the choices that I'm making, so I'm not going to use it. But I do think those things are totally underutilized in terms of the value that they do bring. Sales, Redwood JS. There's a blitz. And there's a whole bunch of these that have tried, to do this. And the only one to me that really felt like it was easy was Meteor. And the reason why people didn't stay with Meteor is because it makes you use Mongo by default, and they never figured out how to bring it to other database technologies. I think if they would have figured that out, it would have been a different story for Meteor in the long term.

Yeah. Well, may maybe that's, Payload. Because Payload's using Drizzle now. You know? And, like, it makes enough of a informed choice for you. So we'll see.

Yeah. Yes. Payload's cool.

Next question here from John. How do you deal with work from home ADHD and kids? My wife and I have recently welcomed our 1st baby and absolutely love him to bits. But I have found 3 months in that my productivity has dropped to near 0. Yeah. 3 months. That's a tough time to be.

It takes me a while to lock in. And once I'm in, it's a brittle state. Now with baby in the mix, I found that I'm working with 1 eye open, and I just cannot get into the flow state. My wife is doing everything for the baby. But since she and baby are always in earshot, every little noise is making me pick up my ears and lose my train of thought. I've tried working with headphones, but my conscience makes me take them off since I know that 1 minute of my time could be worth 10 minutes of hers and when she has her hands full with a sleeping or crying baby? Will this go away as I get used to this new chapter in life? Like, will the baby grow to sleep longer and, keep himself entertained? Oh, John, I'm sorry about that sentence because that's not gonna go the way you think it is. Do I accept my fate that I will be distracted? Do I need to be cruel and stay in headphones, keep locked in in headphone light? Okay. John, here's the deal. Once the baby starts moving around, it's gonna get so much worse. Because when that baby starts moving around, 2 seconds you look away for 2 dang seconds, that baby's into something or that baby's gone. That's, like, the craziest thing ever JS when they first start to move, they are just all over the place and it makes it so so much harder than it is at this very second.

So, unfortunately, John, it's going to get worse. Now if you're not doing day care, which is kind of the solution that we had was that we did day care. Just get rid of the kid. Oh, god. He's Well, not not like like not ESLint entirely, but for the day. Yeah. Yes. For the day. And and, honestly, you know, the you could you could say what you want about, you know, putting your young child in day care. But I gotta say, now that our kids are in kindergarten and, you know, in elementary school, they're they're so well socially adjusted from day care. And a lot of their friends from day care ended up going the same school. They have friends. Like, there's a lot of positives to day care even though it was expensive as hell. But if you can't do that, I would make an agreement with your wife. I need this much time to work. I'm gonna put in headphones, and I will make it up to you by giving you that much time. And you can just go off and do whatever because the the problem is is that if you're both being completely taxed by the baby at all times, neither of you are getting that time. And so I think it's important that you both have that that time, especially when we were when we first had our kids, my wife and I had an agreement that, like, if either of us wanted to use the gym at any given point, you're watching the kids for an hour or whatever. The other one just has no problem with it because we both wanted to give each other that time to just go work out that stress or that energy or any of that stuff.

So I would say make an agreement to to swap time instead of both being on guard at all times because that both being on guard at all times is just gonna eat away at both your time. You're both gonna get fried.

I was talking to my wife about this exact topic recently, and I'll tell you, you will get better at doing things in smaller bursts of time. Like, my wife right now is doing quilting, and she went down to quilt for 12 minutes in between, dinner right before dinner being ready. And she's like, you just have to figure out how to make things doable in short amount bursts of time. And for me, that is really tricky because I prefer to have my entire day wide open, and I can get so much stuff Deno. And I can be really focused when and when there's lots of little things. You know? You gotta run to the dentist, and then you have a meeting and, like, all of these little things. I find that really Yarn. And I think one of the biggest skills you can work on is I have this thing. Like, this might even be part of the the to ESLint that you're working on. Maybe we'll do a productivity Node. It's, like, figure out what you can focus on. Get that one thing done in that short amount of time because you will never again have those large open bursts of time, which is is really frustrating. But, like, the people that get things done, the people that are super productive are the people that have figured out how to chip away and chunk away and and be able to eat things out here and there and not have to do this whole, like, alright. I got my coffee. I'm sitting down. You know? Same with, like, learning to code. You hear this from a lot of people. It's like, oh, I don't have very much time, and you gotta figure out how do I just take that time and make the most of it. Yeah. And,

you know, maybe a small tip here because we both, you know, have ADHD troubles and stuff like that. A small tip for me that has always worked is to write everything down that you have to do in to do ESLint, obviously.

But when you do that, I don't you don't need to necessarily sit down and rank all of them in terms of the time it takes. But it's important to look at your to dos and be able to say, is this a 15 minute ask? Is this a hour long ask? Like, how much of my time is going to be taken up by this to do? And then if you know you only have 15, 20 minutes, don't pick up the thing that's gonna require an hour's worth of focus and try to chip away at it. Pick up the thing you can just knock out. And that way, you're going to be productive on something, and you're actually gonna get something done.

We we should also say, like, I spent, like, 2 months absolutely soundproofing my office because I I find that external noise of family very distracting.

So, obviously, headphones is a big one. Invest in a nice pair, but go back to episode 5 16, sing syntax.fmforward/5 16.

And we talk a lot about how to actually make things soundproof.

Next question we have here is from Trey Kaye.

What's up y'all? Show is goated. Question for both of you.

I've heard a few times from the both of you that you're not a fan of CSS modules for scoping styles to components.

I'm curious to know as to why not. As far as I know, it's basically the only way to write regular old CSS, and it just works. Unless you're using SCSS Sass, you don't even need to add any dependencies. Anyways, I'm just curious. Thanks for the content. It's true.

So CSS modules, the way that it works is that you have a file, and you'll have a selector in there, like Scott card.

And when you import dot card from your CSS into your JavaScript, it will give you a class name, and then those styles will be scoped to it.

Why is that not great? I don't that's a great question. I have never felt great about doing that because of the the weird where you have to import the class name and apply it to a specific element, and I've just felt it to be kinda clunky. I don't know if that's a a great answer. Maybe now that we have CSS ESLint, the variables, all of this type of stuff, maybe I should give it another shot.

What do you think, Scott?

I agree. You know what? For me, when I work in anything that is CSS and JS, the the thing that turns me off of CSS and JS solutions is too much of JavaScript.

So for instance, like, object syntax for CSS. That's something that's always bothered me. But the thing that I don't like about CSS modules is, like, importing it and then putting the the class as an, you know, an object property and stuff like that. That's too much JavaScript to do CSS. I would infinitely rather use BEM or a class based scoping system than importing JavaScript to do that. And it's just because it's not transportable for me. I can copy and paste CSS classes left and right. But what I can't copy and paste is I mean, into projects that aren't using CSS modules or completely different JS is JavaScript stuff for my CSS. Because, I mean, granted, the support for that is there. But I just feel it clunky like you do. I would so much rather just write good old CSS.

And, you know, the thing about, like I think that's what he's saying here is that, like, CSS modules, you're just writing CSS. You're not writing a weird syntax. You're not writing anything, and you're simply importing a class name to be able to apply it. So if you wanna put that in another project, all you have to do is figure out how do I get this class name onto this div.

Yeah. I I I just don't like the the JavaScript part of it. Like you said, it feels clunky to import that. Yeah. Like, I I just I would just so much rather just write a class, for me. And and what they're saying about CSS or SCSS, we're we're fans of SCSS and kind of always have been. But the thing about SCSS is that it's not really that much needed anymore. You know? Most of the things that I used from Sass and SCSS, like, with the exception of maybe, like, loops, you know, variables are much better without SCSS. Coming. Yeah. Nesting is in normal CSS.

There's so many things that have just completely negated the the need for me to use as CSS. So I'm I've always been a fan of it. I've I've it's just it's like jQuery. Right? It's it's it's great. It's fine. It was it did its job, but, you know, we don't need it anymore, really. Yeah. I'm I'm actually

redoing my own personal website, and I'm evaluating a whole bunch of different, like, CSS ways to move my styled components into something else. You know? And, essentially, most of my style components are just regular CSS that are Yep. I'm using style components just for scoping. And we don't really need that anymore because we have scoping in CSS, and there's a lot better options. So CSS modules is one that I am looking at as well. So maybe I'll give it, like, a another try just so that right now, I'm on Panda CSS, which provides the styled API, but I'm so close to just, like, change like, writing a code mod or something and and switching it over to, just regular CSS classes.

These are these are things I'm so glad I don't have to worry about because single file scoped CSS Yeah. ESLint rules so much harder than any of this stuff. So just a stop tag in the file. That's, honestly it's the best API. That's what Svelte has. That that's why I'm that's at the end of the day, trach that I think it's trach, by the way, Wes. I think that's why, I I think that's why I'm not into it. It is really that I have a better API, and that's what I'm into. Yeah.

Next question we have from the curious cat. In your recent Node, 807, both of you mentioned strong support for scope CSS.

You stated that Svelte and Vue had out of the box support. How do you do this with React? I've only seen style components and CSS modules for React. Okay. So this question is really good. How do you do it? Well, CSS now has scoping built in, meaning that you can write a CSS selector like Scott Yarn. And then inside of that selector, you can nest like a h three selector where you you you will style the h three that's inside of your card or paragraph tags that are inside of it. So that just has to do with how you are loading in your CSS for React. And like most things in React, there are millions of different approaches to this type of thing. So Panda CSS is a good one. Panda CSS has, like, 3 different APIs for working with it, which is pretty nifty. So you can write it as if you were writing an object. You can write it as if it were just regular CSS, and you can write it as if it were, like, properties, like, props on a component because they have a bunch of a nice one built in. Obviously, CSS modules is an approach that you can take. You can with Vite, you can simply just import the CSS, and it will do the compile as long as you have the post CSS nesting plug in turned on, meaning that all of your post c s your nesting will then, be transpiled back to browsers that do not support it, which let's take a look at the the can I use for nesting? CSS ESLint is in Safari as of May 2023, so just over a year ago.

Yep. So it's it's pretty new. It only hit Chrome in December 2023. So, like, we're not even a year of having the stuff in most of the browsers, so you're still gonna need to support older browsers.

Thankfully, it's a very easy thing to transpile and to make in back to IE 6 if you really wanted to.

Yeah. Yeah. So, I mean, to answer the the question, you know, I think just with like we said in the last one, because this question is so related. It's just that CSS modules is probably the way to go if you wanna write straight up CSS, in terms of getting that scoping in here.

Next question from Wintalls.

Any tips on reducing JS bundle size? My React app is 3 megabytes of JS, and the vendor bundle is another 4 megabytes.

We we, we have about, 14,000 JS file or 1400 JS files.

Currently, we have the Terser plug in for webpack, but this still seems huge. Appreciate your thoughts. WIMTALs, this can happen when you're using just a lot of dependencies and, you know, you you bring in 1 here or there. Okay. I need animation. I'll bring in this library. I need, a to do box or whatever, a combo box. I need a search box. I need this or that. Bring in this here and there. Next thing you know, each of those has brought along its own, you know, host of code or they're not they're not tiny dependencies to begin with. You know, I use bundle phobia quite a bit to scope out my dependencies before I bring them in just because it's important to know what you're bringing into your project from the start.

And I don't think it's a bad idea to check before you bring something in just exactly what it's adding to your your project entirely. Because, seriously, yeah, you could bring something in that feels innocuous or small or whatever. And next thing you know, you're just adding a ton of stuff, little little things here and there. So one thing you can do is look through your look through your project, scope out bundle sizes, see which are your biggest offenders, and then find smaller ways to to fix that.

Whether it is, you know, replacing libraries with things that are using browser APIs instead of this or that. So that way, you're you're having to utilize less JavaScript from a third Sanity. It's always a big thing if you can if you can do that.

And and just first, before you fix the problem, you gotta find where where the trouble JS, what exactly is causing so much, so much just entirely, like, space saving measures for you. And there's a handful of plug ins specifically for Webpack. You'll have to look this up because I don't know any offhand. I haven't used Webpack. But I know there's a handful of plug ins for Webpack that like DaisyDisk or something like that. They visualize

all of your packages that are taking up space. Maybe we can take a second to to find some of those. I got it here. So you need Webpack bundle analyzer, and what that does is it gives you a full graph of the what packages are taking up space. And I I'm betting. I bet right now you are importing some sort of package that is not being properly tree shaken, meaning that you're probably using 1 method from, like, a Lodash or something, and your Webpack is not properly throwing the rest of those methods out the door. So you take a look at bundle analyzer, and it will tell you, oh, this is taking up 300 megs because you're you're telling us that what did it say here? Your vendor bundle is 4 megs, and you have another 3 megs of your own custom JS.

There's that's massive.

1400 JavaScript files. You probably have an SVG importing. We had, like, a 130 k or 200 k. So Node think it was, like, 600 k of an SVG. Big old Wes. It's my fault. On the syntax site, there's probably some silly things that you're like, oh my goodness. That's probably 20% of our problem right here. So bundle analyzer will get you a lot of the way. Once you have bundle bundle analyzer, you're gonna figure out, is my tree shaking Scott set up properly? Can I be using the ESM version of a package? In a lot of cases, people just npm install something, and it's not using the new ESM version of the package. Lodash has is a good example of that where Wes still can tree shake common JS code, but it is much better at tree shaking, ESM modules or ES JavaScript module Node. And it's going to you'll probably find quite a bit of stuff. And then also, like, your framework. Can you lazy load stuff? You know? Like, on on the syntax website, we don't load every single thing on the homepage. We have Codecov, and it will tell us that we have 2.9 megs of client side JavaScript, but that doesn't mean we load 2.9 megs of client side JavaScript on the syntax.fm.

We just Svelte just lazy loads in what it needs. It knows what we need given what components are on that page.

Yeah. And and like that, we said, you know, full full disclosure, Codecov is a Sentry product, but Codecov does have, JavaScript bundle analysis on PRs. So we have this in ours. If I'm trying to merge something into the repo, it will tell us what it's doing to the final bundle size for us. And even if that isn't what's being loaded for each user individually, what we're able to see is I just brought in a whole bunch of JavaScript, and maybe that was by accident.

And maybe I didn't intend on doing that, or maybe I did intend on it, and there's another way I can take a look at it. But, or maybe other people on your team can see that, you know, what's going on, and you can dive into it a little bit more. So I I would look into that that Codecov bundle analysis because it's a nice tool. But, again, you know, that is a Sentry product, so I don't wanna feel like we're hawking our stuff here. But, I feel like that Dave Ramsey show. We're gonna get him the the CokeHub bottle analysis for him. No. We'll set you up. We'll set you up. You hang on the line. We'll take care of you.

It's guaranteed guaranteed you have some strings package in there. I've done it a 1000000 times with, emoji packages where it ships a description of every single emoji, thing. I've done it with content, s p. Slugify, fonts. Man, there's there's probably a whole bunch of oh, I can't believe that that's what we are actually shipping

at the end of the day. And let me tell you, Wes, I I think you're going to really enjoy this hunt because, me, personally, I I will this is the type of thing I will bore the life out of my wife with. I've I shaved off a 100 megabits off my bundle today. My wife is just like, oh, did you do that last week? Yes. But it's so good this week.

Next question we have here is from Big Green Egg. Hi, Wes and Scott. Longtime listener.

I followed you since before syntax, and there is one thing I've been wondering about for a while. It relates not just to you, but all podcasters, YouTube course makers in our industry. I've been hesitant to ask this because I think it could be taken the wrong way. But I assure you, this JS this honest curiosity from my side. My question is, do you still do contract work day to day envelopment for customers anymore? I know both of you building a lots of demos.

Scott is constantly updating and changing his own platform, and I believe Wes is still working on courses.

But I do feel like the kind of development we do day to day is disconnected to the employer random company, the day to day work that your listeners might do. Thanks a lot. Big green egg. Absolutely. This is my my biggest fear is to become the teacher that does not know what they're talking about. And you do see this a lot where people will post up a little examples and or, like, talk about solutions. And it's like, well, you haven't actually hit the, like, real world problems in the nitty gritty of this type of stuff that you hit. So I have my own course platform that I have worked on for 10 years. It is fairly large. It does quite a bit from ecommerce to affiliates to auth and user accounts and databases and, video streaming, all of that type of stuff, and that's a fairly large product that I'm I'm working on. So I don't feel that I'm not hitting any, any issues.

And the areas of of things that we do not hit like, for example, I have never used queues in my application. So what do we do? We have people on that do hit those types of, problems and ask lots of really good questions about it.

Yeah. I think that's a really big thing is that we're Wes I try to work on things or even demos or whatever, I'm trying to work on, real world stuff. So I'm often building apps that have users, that have people, warp you know, actually experiencing the stuff. And I'm shipping products. I'm not necessarily just shipping Deno.

Definitely shipping products. And I think that's a a big thing. Now that isn't the same thing as working on a large team and a big project, pushing code to stuff. I that's not the same as working at an agency where you're maybe hacking out sites as fast as you can. But I have a lot of experience doing that.

And I tend to think about that a lot when I'm working in terms of, like, what would this be like today if I was still doing agency life? Would I still use the same tools? What tools would I use? How would I approach these things? And another thing is I do try to work on projects with other people. The syntax site is nontrivial, and we have 3 developers plus open source stuff going you know you know, people in the community working on it. So we we have a lot of the challenges of working on a long running big team project there in terms of continuous development, how how we're testing, how we're we have our, you know, our general flow of making sure code comes in and it doesn't break things. So I I think we do hit those problems, and we are still working on software enough that I would say, you know, maybe even, like, 70% of my day is filled with the writing software still, which is which is how I want it to be. Right? Yeah.

Alright. Next question from Jorgen. I'm building a website that revolves around a map. Is there any way to make maps local first? Oh, gosh.

Maps local first.

I don't see a way that would work.

I have not tried. I'm gonna say this jargon upfront. I have not tried to ever do maps local first. I think the thing about local first isn't that your applications will always be able to function entirely offline because maps, that's a lot of data. And the things that you could have local in your map application is the data that is then used in the map locations, you know, longitude, latitude to save. So that way Wes the map loads, that information hasn't isn't having to be pulled from a a third party database or or things like that. So it's a great question. I, you know, I I don't know. Yeah. I I think even, like, hey. If you turned off your your network completely, would Apple Maps even load on your phone? It will.

And, like, that that's a huge Node. Because I remember JS someone who lives in Canada, we used to what we used to always do is you would go to Google Maps before you go on a trip, and you would go to where Wes stand. Yeah. And you would download the offline maps because you wouldn't have cell for service. And now you have data. It's not a big deal, but that was a big thing for a while. So you absolutely can do this, but it's I get I don't know if it's, like, offline or sorry, local first, but it is what it's called is offline maps. So Yeah. A mapping application when you have it and this might not be Google Maps or Apple Maps or whatever, but there are lots of other JavaScript mapping applications that you can use. There's arc ArcGIS.

There's OpenStreetMaps.

There's a whole bunch of them out there.

And when you have a map, you have it's it's called a layer, and those layers are comprised of a whole bunch of tiles and pins that you sort of drop on, on the map. And those pins, like Scott said, you can save all of that data locally to to the browser. No problem. And the tiles are either going to be images that can be saved to the browser, or it's going to be, like vector data if you're doing, like, a, like, a vector map instead of images. You know? Like, you haven't seen that in a while where you, like, you pan around on a map, and it, like, takes a second to load in a square. That's because a lot of these mapping softwares are using vector data. So all of that can be saved locally, and you can as you're panning around, you can save that data to the browser. No problem.

And it's just about building in some sort of thing where Wes you pan to a spot or you say, hey.

Download all the mapping data for all of the zooms for each of these areas. So I you totally can do it. It's just a matter of, is that worth it? Because you're getting into some pretty custom mapping versus just a Google Maps where you can pop a few pins on the the API.

Yeah. Yeah. Yeah. That's a that's a tough one for sure. Next question from

John. Thanks for a great show. Longtime listener. I don't mean any offense, but I'm I'm here to to ask Wes JS a schema and specificity.

It just makes my day every time I hear it. I did not realize I was saying schema wrong. Schema? I asked on Twitter how I'm saying this wrong, and it's schema like that. I'm going I'm going skiing, ma. Schema. Yeah. I'm going schema, not schema, which apparently I've been saying.

But schema.

Well, why is there an h in it? I don't. Yeah. Don't know. Schema. No. I think you guys are wrong. Okay. Schema.

Alright. Next Node. Next question from Tim Tim Ringle. Are developers actually or still using the time tag in HTML? It seems like it was all their age a few years ago, but I haven't heard anyone mention it in a long time.

Yeah. People are using the time tag, and you should use the time tag as well. You know, time is just to specify a time, and you give it a date time attribute. And you give it a string of the date time and or you give it the the time itself.

And these things are good. You know? I I think this is what developers need to have in in in their HTML when we're talking about semantic HTML. But the time tag, specifically, it can take a in in you know, just a a string, like a date, and it can give that string context to an actual date stamp, where if you just type in the words inside of a paragraph tag, you know, March 1st, that means nothing to the browser. But if you wrap that in a time with a date time and you give it a time stamp, that knows that is a specific date and time.

So yeah. I would say developers should be if they're not using this time tag

because it makes sense to to do so. Yeah. But yeah. Yeah. If you have, like, a blog post, like, posted 20 minutes ago Yeah. That's a great primitive to build on top of for, like, a tooltip. You know? You hover over top of 20 minutes ago, and and you'll be able to see for some reason, the time tag does not give you a tooltip by default in the browser, which I would really like. Right? You probably would also have to pass it a title if you wanted that type of thing, but it's also great for for Google that to know when things were specifically done. We're open from, 8:8 AM to 5 PM. Yes. And and you can you can explicitly pass the year, month, day.

You pass it a whole time string string tag. I had it on my website for quite a while where I my about page, I would say, I live in Hamilton with 1 kid, and then I would cross that out, and then I would put 2 kids. And then when I crossed out the 1 kid, I will put a time tag in there Oh, that's fun. That's stated when I moved from 1 kid to 2 kids. You know? Just and, like, I don't know if anyone ever ever found that little bit of, information. But I do find when you are posting data for time, it's so nice to give the whole time stamp. Like, even we had a a quick meeting about the basketball thing we did yesterday, and and they said, alright. Well, like, it's starting at 3 o'clock.

And I was just like, at 3 o'clock, what time zone? You know? The time zone thing always drives me mad. And, like, wouldn't it be nice to be able to hover over top of that and to see the entire time stamp string?

I think it would. I I totally agree with you.

Next question from Matt Lynch. Episode 810. Where did Wes get his replacement ear cups for his Bose QC 35 Headphones? They look really cool.

Why, thank you.

These are I've had these headphones for probably, like, 10 years, and I've replaced the ear cups on them probably 6, 7 times.

And I usually just go on a hunt looking for cool ones. So my places to look are Wicked Cushions, which is like a website with lots of different replacement cushions. They're really comfortable.

I also will check on, Amazon and AliExpress. I found this pair on AliExpress, and they've been going going hard for probably about a year now. I did get once get a pair of, like, tonal black camouflage ones, and everybody thought that my it was just peeling because they were, like, black and gray. It just looked like they were dirty and peeling, and I thought they looked so cool. But, like, when you're on a video, everyone thought they were just gross and peeling, so be careful about that. But, yeah, it's kinda kinda fun. They I I also have the QC 700 here, and, they do not sell cool replacements for these, which is kind of a bummer because I like to

to freshen it up. These are my fancy headphones. The problem with mine is I got open back, so, I can only really use them in my office. I can't take them anywhere.

Oh, yeah. And you can't use them for recording either because I then I hear myself.

That's exactly right. But I I in your mic. Folks, I have a a one e a Node ear in as an AirPod. That's how I hear. What's actually really cool about these headphones, Wes, is that, you know, these come out so that you can And for audio listeners, Scott, what kind of headphones are these? They're Audis. I don't know what the exact model is. But what what I'm showing is is that they each of the each of the cans each of the headphones has their own 1 eighth adapter in, but both of the adapters are stereo.

So you don't it doesn't matter which Wes you plug into which Node. You're never having to plug the left one into the left ear and the right one into the left ear. And, for somebody like me, that that's really nice. Alright. Next question from Dylan. Dylan in Arlington.

I want to migrate every team at my company to use the same ESLint rules. The auto fixes are easy, but what about everything else? The 1st repo I'm investigating has over 8,300 previously undetected errors.

I've been there. I've been there. I think I even beat that between ESLint and TypeScript errors. Yeah. I I converted,

I converted a an entire application that was, like, a 6 year project that had been through several rewrites to TypeScript. So I'm no no, no newbie to but 8,300 errors. That's so many.

One example is that over 1,000 of these are React Hook related, probably because our repo never had the React Hook ESLint plug in. I don't want to disable the hook rules, but that would mean we'd ignore them in future code as well. I don't want to make them warnings because there'd be so many warnings that new warnings and errors would be impossible to discover. That is all good reasoning. I don't want to add ESLint disable next line rule by hand because there's too many errors.

Are there tools to help with this? I'm considering write errors to a JSON file. Write an ESLint plug in or code mod that uses a JSON file to add ESLint disable next line 8,000 locations.

Then add a counter for how many ESLint disables are in the repo and treating it like code coverage for each build.

If a developer adds more ESLint disables, then they get an x. The goal is to reduce that number.

But I'd rather much use community supported solution than build my own. Thank you for the podcast. I've been listening since 2017.

Holy cow. That's a lot of errors.

So, man, I think, for for me, you know, this isn't this isn't the way you should handle this.

For me, I would spend a week, and I would fix all 8,000 of those, and I would not sleep until I did.

8,000's too oh, too many to have. What I don't necessarily see is a lot of these should be automatically fixable. Right? I mean, I feel like a lot of, ESLint errors are things that ESLint can automatically fix for you. Not all the time, but, you Node, but 8,000. What could 8,000 ESLint errors be? Especially 1,000 React hook errors.

Like, what are you doing with your hooks that are guarantee

what's happening with the arrays? They have yes. The dependency array. Guarantee that's what it is. Those are really Node easy to fix. Not all the time. That that dependency one is really tricky sometimes because you have to pass in the dependency, which may not be part of the Scott. It can get a little bit hairy, but in most cases, you're right. It's it's simply just adding it to the dependency. And with a lot of these, like, 8,300, sometimes you can just do a quick little code mod or a find and replace, and you go, oh, that brought it down to 5,000. You know? Like, it's all the same, or, like, oh, it's oh, I used this variable 400 times, and they're all underscores, and we should we should change that to camel case. So it's probably not that scary, but I think I don't think that writing a code mod to turn them off and then writing a new, like, ESLint to figure out how many disables you have because No. Thanks. Yeah.

Just like failing tests or code coverage, it's fine to have failing linting errors.

What I would do is turn on linting for only for new files, meaning that whenever somebody touches a file, now you have to Node ESLint that or sorry. You turn it on only for changed files, not new files.

And that means that's what I did for quite a while JS anytime I touch a file, I must go and do that migration. And then at a certain point, I said, you know what? I'm hitting the same patterns over and over again. I'm just gonna YOLO go for it and and move everything on over. But I would certainly not write a disabler that just disables it, and then you have to count how many disables you have because that's just a whole another level of failing tests that you're keeping track of.

I I think you're totally right. And and sometimes, like you said, Wes, you you run into a situation where I'm now changing this file. I'm unable to push updates with this file until I fix all of the errors in this specific file. And sometimes you fix 1 error in that file, like you mentioned, and it will knock out a 1,000 of your ESLint rules elsewhere because it's a find and replace throughout your application.

I you know, I I've done large large fixes like this, but I think it's important to I I think it's important to get you down to 0 only if you value that tool, which I think you should value that tool. And in that regard, it it wouldn't be possible for your whole team to just do a sprint and everybody take it on and pick different sections of the apps and just crush it and knock it out. Like, I I know it's a lot, and I know that not everybody is afforded that time. But I think at some point, you need to focus on really getting that down. Like, really focus on it.

And, the other thing about, like, using disable is that, like, disable's there for a reason. Sometimes you're gonna wanna just disable it, and sometimes you're not going to want to like, if you're changing the code just to satisfy the linter and that code is was working fine. Now you're just introducing code touches where something might break, you know, just to satisfy. It's it's the same thing sometimes with, like, writing extra TypeScript that adds extra code. I've done this in the past, but I just, like I stopped myself and be like, why am I writing more JavaScript purely to satisfy the TypeScript type checker? You know? It can it can be a little bit hairy. So sometimes the the ignore is there for good reason.

Yeah. Yeah. Absolutely. Yeah. And then once you start to add ignore for things that you actually don't wanna ignore that like you said, it clouds the water or the clouds the air. I don't know what the saying is there, but it makes it cloudy. And you don't wanna make things cloudy. You wanna have a nice visible, nice visible 8,000 errors so that you know what to fix. So good luck, to you, Dylan.

I think you gotta do something about it because 8,000 areas, you might as well not even be using ESLint at that point. Right? So cool. Well, that was awesome. We had so many good questions. In fact, so many that we couldn't even get to them all. So if you're out there and you want to add your own question to the next potluck, head on over to syntax.fm and sign up. There's a, Tolinski a question in the top there. You can ask a question, get your question on the show. And if we didn't read your question, Node doesn't mean it's not good. We we had so many good ones this week. And in fact, I I think we might need to double up one of these just because I felt like we coulda had a whole another episode about all the good questions this week. So again, add add your questions if you wanna get them answered on the show, and we'll do our very best to, make sure that your question gets on the show. Now it's part of the show where we're getting to sick. I almost said sick pics. I did a a little schema. Little sick pnpm, and shameless plugs here.

Wes, do you have a sick pick for us today? I do. It's another TV show.

We've been watching a lot of TV shows recently just because of the new baby. Yeah.

And, man, Clarkson's Farm, which is heard of it. Jeremy Clarkson is the the Top Gear guy.

You're familiar with him? Familiar with Jeremy. Yeah. Yeah. I never I never watched Top Gear because I'm not not super into cars or anything like that, but we decided to give it a go. There's 3 seasons of it. And, basically, he bought this farm in, Chipping Norton, which is kinda Yarn of the somewhere in the UK. I'm sure our UK people are are cringing right Node. But he has goats, and he has dogs, and he's he's planting crops, and he, has pigs. And it's really interesting to see him go through the farm, and it is one of the most real shows I think I've ever watched, meaning that him and his wife are doing the work. And he's he's not just hopping on a tractor, doing the shot, and then and then having some guy come come in and finish it. But, like, he's he has employees that are, like, part of the area, and you can see that, like, he's actually doing the work. And he's really involved and actually understands how all of this stuff works, which is it's it's so good, and it's so interesting. And it's also like, I didn't know a whole bunch about the, UK countryside, and it it seems really beautiful. And I really like learning more about that. So check it out. It's called Clarkson's Farm. It's on Amazon Prime, and, it's a fantastic we have 1 more episode tonight, and I'm a little sad that it's going to to be over after this because we've been binging it for a couple weeks now.

Oh, cool. Yeah.

I'm gonna say pick an Allen wrench set. These things are there are so many of these on Amazon. You can find a 1,000,000,000 of them. But the thing about Allen wrenches are is that when you you get a 1,000 of those little ones and you just have them around Oh, yeah. And you're like, oh, let me just pick the 1 and try it until it works. Man, that only that's so that's so annoying. So And you lose 1 and the whole set is is garbage. Yeah. Anytime you anytime you have to pull them out, you're gonna lose an Allen wrench. So Yeah.

This is this isn't the 1st time I bought one of these. I'd like to have these around just because but this, what I got is this Mulwark, which who knows if that's a real brand or or drop shipped letter.

M u l w a r k. I would imagine this is drop shipped. You can probably find these elsewhere for for cheaper, but it's only $16 on Amazon.

And it's a 2 piece where you get both the standard SAE and the metric of every single size of an Allen wrench inside of a little, like, foldable thing. Yeah. And the nice thing about them being foldable and that pops out is that you then get a nice big old handle to crank on it with. So, yeah, if you have to lose them, little itty bitty handle and you're trying to do your your, your Allen wrench, then that sucks. Nobody likes to do that. Your fingers get allheartened. So you're cranking on it. So, yeah, get one of these, get one of these Allen wrenches if you're using Allen wrenches for anything. Yeah.

I I have many sets of these, and I will say one further and recommend you get a 3 piece set that also has torques, a security torques because the amount of times you need a really weird torques. Like, we were installing a Tesla charger at the cottage the other day, and the the Tesla charger has this bizarre security torques on it. And the electrician was like, what the hell is this? Yeah. You know? And I was like, hold on, buddy. I have all of the weird security bits, but I just found a regular Torx one. And the the amount of times it's come in handy, I can't I can't recommend getting a nice set of Allen wrenches enough. And even I have a them for impact too so you can put them in the drill. Yes. You're ever installing IKEA stuff, you can Yes. It's like Formula 1.

Yeah. I know. I I I had to do so much of that stuff whether it's kids' furniture lately or whatever. You know? Our kids are Yeah. Going from cribs to beds to bookshelves and all that stuff. So it's like, I've been I've been building furniture. I and, you know, that kind of stuff. Wes good. I'll also recommend getting a a set of t handle

Allen keys. I'm sorry. I'm very passionate about Allen keys here. Yeah. I got some of those.

But the, yeah, the t handle ones where you get a you get a whole set and then they come out, that can be really handy for if you have to get into a weird Scott, especially the ones that have a ball end. You can insert them on an angle and still use it.

Word. But Yeah. I love tools.

You know what I need, Wes? I need, like, a a tool bench Bos tool. Like, I have a, like, a I have, like, a toolbox. Right? But, like, I just toss everything in there, and it's a total mess. So, like, I need a system.

Yeah. You Scott a like a like a pegboard or, like a Scott wall or something like that. I got rid of all my toolboxes, and I just have everything hanging on the wall.

And then I have fun The little pieces.

Sorry? You know, like, the little pieces, you got little screwdrivers here and there. You get everything on the peg Wes? Oh, yeah. Well, for screwdrivers, I just made a long board and drilled, like, a 1000 holes in it, and then all the screwdrivers slot through. Yeah. It's nice because you can you can look at the bottom and look at the tips

for what the kind of the one that you're looking for. I did I when I was at your house, I did see your magnificent tool room, and I wish my it made me briefly consider moving my tools into the basement.

We don't necessarily have the room for it, but I I keep I keep mine in the garage. And I just don't have, like, a good I don't have a good space. There's, like, a old all sorts of old stuff in there from the previous owners. And what I really need is just either to build a a build a little workshop table or something. I gotta have something.

Yeah. Tiny like a shallow little table with a big pegboard where you can hang everything. Because if I can't see it, it's it's gone. I'll buy a new one. So, awesome. That's why I have 47 different Allen key things, and they're all missing 1. Yeah. They're all missing 1. Oh, man. Alright. Thanks everybody so much for tuning in. Make sure you check us out at syntax.fm.

We're on YouTube. We're on all of the, platforms out there. Leave us a comment. We love to hear it, and keep submitting your Wes at Syntax dot f m.

Tech.

Peace. Peace.