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

what the hell, Sentry? Sometimes you go to a website, 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.

Check. Alright.

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?

basketball game. Scott and I were the, what do you call that, commentators? to see him go through the farm, and it is 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, figure out how to make things 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

Yeah. We were both doing color. I don't think either of us was

Oh, not too bad. Little, little sleepy from kids, but, 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.

a a play by play. I think we were both kinda taking both the color commentary and the play by play role. Yes.

and that website is broken. You know? You click a button, nothing happens. What happens?

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.

disables you have because No. Thanks. Yeah.

And, the other thing about, like, which is heard of it. Jeremy Clarkson is the the Top Gear guy.

to you, Dylan.

now

I you know, I I've done large

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 Just like failing tests or code coverage, it's fine to have writing extra TypeScript

I I think it's important to get you down to 0 only if you value that tool, too much of JavaScript.

writing a code mod to turn them off and then writing a new,

the linter too much of these put wiring it up together

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

Like, what are you doing with your hooks for for me,

and that code is was working fine. Now you're just introducing

large fixes like this, but I think it's important

turn on linting really good. How do you do it? Well, half of them weren't maintained. There was a bunch of churn. They didn't work with different versions of Gatsby, back to IE 6 if you really wanted to.

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

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

which may not be 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

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 How do you figure out what the hell is in a 7 meg React bundle? 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.

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

to a ORM

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

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

man,

1,000

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.

code touches where something might break, you know, just to satisfy. It's it's the same thing sometimes with, like,

which I think you should value that tool. And in that regard, 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,

you have to pass in It just makes my day every time I hear it. I did not realize I was saying schema wrong. Schema?

you know, this isn't this isn't the way you should handle this.

8,000 errors so that you know what to fix. So good luck, 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,

failing

ESLint errors be? Especially

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,

React hook errors.

linting errors.

For me, I would spend Peace. Peace.

I think,

What I would do is disabler

the dependency,

replacements for these, which is kind of a bummer because for time, Why is that not great? the strong support for scope CSS.

700 an SVG importing. We had, like, a 130

and

I also will check on, Torx one. And the the amount of times it's come in handy,

usually just go on a hunt looking for cool ones. So my places to look are Wicked Cushions, to satisfy the TypeScript type checker? You know?

and, and you'll have a selector in there, like Scott card.

to freshen it up. These are my fancy headphones. The problem with mine is I got open back, so, but my conscience

here,

And I

cool and then they come out, that can be really handy for That information about what's going wrong gets sent to Sentry, and it gets compiled with a whole bunch of information.

These are I've had these headphones for probably, like, 10 years, and I've replaced the ear cups on them I think I don't think that what it's called is offline maps. So Yeah. A mapping application 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, And the areas

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.

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, QC 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.

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.

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 Yeah. Yeah. Yeah. That's a that's a tough one for sure. Next question from

is just importing JavaScript to do that. And it's just because

see your magnificent

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.

I I have many sets of these, and I will you, yesterday, we had the terminal versus Laracon like, if you're changing the code 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,

Oh, cool. Yeah.

or,

either to build a a build a little workshop table or something. I gotta have something.

I can't I can't

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.

But the, yeah, the t handle ones where you get a you get a whole set how you are loading in your CSS for React. And like most things in React, there are millions of different

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 converted a an entire application So local

We're on YouTube. We're on all of the, 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.

I'm gonna say pick an Allen wrench set. These things are there are so many of these on Amazon. You can find So Any tips on reducing JS bundle size? My React app is 3 megabytes of JS, and the vendor bundle is another 4 megabytes.

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

Word. But Yeah. I love tools.

And then I have fun The little pieces.

too so you can put them in the drill. Yes. You're ever installing IKEA you're just tired. We're tired at a certain point, and you want it to work together.

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,

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, 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 all of the zooms

Tech.

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

say one further and recommend you get a 3 piece set that also has torques,

a 1,000,000,000 of them. But the thing about Allen wrenches are

on Amazon.

a a tool 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.

Yeah. You Scott a like a like a pegboard you can nest like a h three selector where you you you will that we had, which was Yep. Which was great to see.

tool room, and I wish my it made me briefly consider moving my tools into the basement.

I was talking to my wife about this exact topic So, obviously, headphones is a big one. Invest in a nice pair, but go back to episode 5 16, sing syntax.fmforward/5

taxed by the baby at all times, neither of you are getting that time. And so

dinner right before dinner being ready. And she's like, you just have to 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,

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

they're they're so well socially adjusted I I see it JS, like, 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,

make an agreement with your wife. I need this much time

by giving you that much time. And you can just go off and do whatever because

which is is really frustrating. But, like, the people that or it's going to be,

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, is nontrivial, was Meteor. And the reason why people didn't stay with Meteor

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

wide open, and I can get so much stuff Deno. And I can be really focused problems and ask lots of really good questions about it.

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 a informed choice for you. So we'll see.

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, and it will tell us that we have torques. Like, we were installing a Tesla charger at the cottage the other day, and We we should also say, like, I pins that you sort of drop on, Thankfully, it's a very easy thing to transpile

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

I would say 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, and we have

all over the place and it makes it so so much harder than it is at this very second.

focus on. Get that one thing done in that short amount of time because you will never again have those large open

being completely 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.

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

I think it's important that you both have that that time, especially when we were when we first had our kids,

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, I don't see and it can give that that I'm I've always been for the

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,

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,

write everything down that you have to do in to do ESLint, obviously.

But when you do that, errors are things that 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,

absolutely soundproofing my office because I I find that

is to

Next question we have here is from Trey Kaye.

spent, like, 2 months he has goats, and he has dogs, and he's he's planting crops, and he, like, ESLint to figure out how many

you know, maybe a small tip here because we both, you know, have ADHD So, I think it would. I I totally agree with you.

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.

troubles and stuff like that. A small tip for me that has always worked 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

16.

you know, you you bring in 1 here or there. Okay. I need animation. I'll bring in this library. I need,

tree shaken, Amazon and AliExpress. I found this pair on AliExpress, Allen keys. I'm sorry. I'm very passionate about Allen keys here. Yeah. I got some of those.

Whether it is,

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 platforms out there. Leave us a comment. We love to hear it, and keep submitting your Wes at Syntax dot f m.

and,

before you bring something in just exactly what it's adding to your your project entirely. Because, to work. I'm gonna put in headphones, and I will make it up to you 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.

Currently, we have the Terser plug in for webpack, but this still seems huge. Appreciate your thoughts. WIMTALs,

is causing so much, that context

this can happen

where the trouble JS, what exactly

look through your project, scope out bundle sizes, see which are your biggest offenders, and then find smaller ways to to fix that.

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 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,

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

seriously, yeah, you could bring something in that feels innocuous or small or whatever. And next thing you know, overnight, really.

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.

what packages are taking up space. And I I'm betting. I bet right now you are importing in my application. So what do we do? We have people on that do hit those types of, but recently, when you have it and this might not be Google Maps

first, before you fix the problem, you gotta find infinitely rather use BEM or a class based scoping system

where 14,000 how how we're testing, how we're we have our,

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 it will tell you, oh, this is taking up 300 megs because you're you're telling us that and awesome. That's why I have just regular CSS classes.

so much 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, We we, we have about,

JS file or 1400 JS files.

And and just 8,000. What could 8,000 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, 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 Doing good. How are you doing? 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.

some sort of package that is not being properly It's guaranteed recommend getting a nice set of Allen wrenches enough. And even I have a them for impact

what did it say here? Your vendor bundle is 4 megs, and you have another 3 megs of your own custom JS.

when you're using just a lot of dependencies 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.

you're just adding a ton of stuff, little little things here and there. So one thing you can do is look through your

that I'm not hitting any, are doing the work. And he's he's not just hopping on a tractor, oh, I can't believe that that's what we are actually shipping Chipping Norton, which is kinda which is like a website with lots of different replacement cushions. They're really comfortable.

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

strings package in there. I've done it a 1000000 times with,

is the data that is then used in the map locations,

Alright. Next question from Jorgen. I'm building a website that revolves around a map. Is there any way to make maps people just gotta decide on things. And I think a lot of frameworks would really benefit from having

And I tend to think about that a lot when I'm working in terms of, like, My name is Scott.

versus just a Google Maps where you can

enough

thing where Wes you pan to a spot or you say, hey.

in your map application

my my biggest fear

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

a whole bunch of tiles

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,

real world stuff. So I'm often building apps that have users, that have people,

is that worth it? Because you're getting into some pretty custom mapping

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 the the problem is is that if you're both

the day to day work that your listeners might do. Thanks a lot. Big green egg. Absolutely. This is

or sorry, local first, but it is John. Thanks for a great show. Longtime listener. I don't mean any offense, but I'm

first?

that can be saved to the browser, to have my entire day I like to has pigs. And it's really interesting

Oh, gosh.

Maps local first.

And it's just about building in some sort of 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, style the h three that's inside of your card or paragraph tags that are inside of it. So AM to 5 PM. Yes. And and you can you can explicitly

pop a few pins on the the API.

3 developers

would work.

you have some

of of things that we do not hit like, for example, I have never used queues

you know, our general flow of making sure code comes in and it doesn't break things. So I I think that

isn't that your applications will always be able to function entirely offline because yeah. Yeah.

emoji packages where it ships a description of every single emoji,

we do hit those problems, and we are still working on software

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.

And when you have a map, you have it's it's called a layer, and those layers are or Apple Maps or whatever, but there are lots of other

But I do feel like the kind of development we do day to day is disconnected to the employer random company, 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.

and or, like, talk about solutions. And it's like, well,

for each of these areas. So I you totally can do it. It's just a matter of, guaranteed 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, change like, writing a code mod or something and and switching it over to,

do you still do contract work day to day envelopment for customers anymore? I know both of you building a lots of demos.

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

maps, It's a it's a tough balance, and I'm gonna state for the record but yeah. I would say developers should be if they're not using this time tag previously

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, is to become the teacher that does not know what they're talking about. And you do see this a lot where

There's a whole bunch of them out there.

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

Download all the mapping data for

any issues.

at the end of the day. And let me tell you, Wes, I I think you're going to really enjoy this hunt it's a great question. I, you know, I

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

to the browser. No problem.

And, like, that that's a huge Node. Because I remember JS someone who I'm here to to ask Wes JS a schema time stamp string? you have to Node ESLint that or sorry. You turn it on only for changed files, not new files.

that's a lot of data. And the things that you could have local the thing that I don't like about CSS modules nice visible

warp you know, actually experiencing the stuff. And I'm shipping products. I'm not necessarily just shipping Deno.

a way

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

people will post up a little examples

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 I can only really use them in my office. I can't take them anywhere.

I'm curious to know as to why not. As far as I know, it's basically

you don't even need to add any dependencies. Anyways, I'm just curious. Thanks for the content. It's true.

I don't that's a great question. I have never felt great about doing that

the only way to write regular old CSS, and it just works. Unless you're using SCSS Sass, plug ins, adapters, What's up y'all? Show is goated. Question for both of you.

So CSS modules, the way that it works is that you have

it's not transportable

and And that means that's what I did for quite a while JS anytime I touch 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 lives in Canada,

What do you think, Scott? stuff, you can Yes. It's like Formula 1.

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 is including a database

for me. And and what they're saying about CSS or SCSS, And I don't think it's a bad idea in terms of the value that they do bring. Sales, 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.

the the thing that turns me off of CSS and JS solutions

I would just so much rather just write a class,

the weird where you have to import the class name and apply it to Yep. So it's it's pretty new. It only hit Chrome in December 2023. So, like, we're not even a year There's OpenStreetMaps.

I agree. You know what? For me, when I work in anything that is CSS and JS, Yeah. That I mean, that's, 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,

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

CSS ESLint,

So for instance,

like, with the exception of maybe, like, loops, you know, variables are much better without SCSS. Coming. Yeah. Nesting is in normal CSS.

the variables, all of this type of stuff, maybe I should give it another shot.

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.

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

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 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 like, object syntax for CSS. That's something that's always bothered me. But

good old CSS.

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

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,

Before, 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, for only for new files, meaning that whenever somebody touches a file, 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,

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,

especially with some of the CSS episodes we've been doing lately.

or when you start to do video podcasts and you start to put code up on the screen.

It is it is hard when you start to follow,

doing the shot, and you can write it as if it were, like, properties,

and, it's a fantastic we have 1 more episode tonight,

man, Clarkson's Farm,

And, Yarn of the somewhere in the UK. I'm sure our UK people are are cringing right Node. But 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 of having the stuff in most of the browsers, so you're still gonna need to support older browsers.

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,

one of the most real shows I think I've ever watched, meaning that

and I'm a little sad that it's going to a file,

to be over after this because we've been binging it for a couple weeks now.

farm and it's not using the new ESM version of the package. Lodash has is a good example of that where

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

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

string

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.

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.

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 to check 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 Holy cow. That's a lot of errors.

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.

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 your framework. Can you lazy load stuff? You know? Like, on on the syntax website,

to an actual date stamp, where if you just type in the words inside of a paragraph tag, you know, March 1st,

developers need to have in in in their HTML when we're talking about semantic HTML. But the time tag, specifically, So for me,

the year, month, day.

Alright. Next Node. Next question from Tim Tim Ringle. Are developers actually in terms of getting that get one of these Allen wrenches if you're using Allen wrenches for anything. Yeah.

these things are good. You know? I I think this is what

information. But I do find I asked on Twitter how I'm saying this wrong, and

it's so nice to give the whole time stamp. Like, even 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 we used to what we used to always do is you would go to Google Maps and it will do the compile as long as you have the post CSS nesting plug in

I my about page, I would say, I live in Hamilton with 1 kid, and then I would cross that out, 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 doable in short amount bursts of time. And for me, that is really tricky because I prefer 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, 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

8:8 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 You pass it a whole time string string tag. I had it on my website for quite a while where

for some reason, the time tag does not just to satisfy

it can take a in in you know, just a a string, like a date,

Why, thank you.

20 minutes ago, and and you'll be able to see some updates on the video podcast.

when you are posting data

There's that's massive.

1400

JavaScript files. You probably have that I've only seen style components and CSS modules for React. Okay. So this question is

but that doesn't mean we load 2.9 megs of client side JavaScript It can it can be a little bit hairy. So sometimes the the ignore is there for good reason.

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.

people just npm install something,

on the syntax.fm.

Wes still can tree shake common JS code, but it is much better at

2.9 megs of client side JavaScript, a security torques because the amount of times you need a really weird

Can I be using the ESM version of a package? In a lot of cases, which apparently I've been saying.

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,

does have, You know what I need, Wes? I need, like,

thing on the homepage. We have Codecov, in, 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.

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

is my tree shaking Scott set up properly? like that. I'm going I'm going skiing, ma. Schema. Yeah. I'm going schema, get things done, the people that are super productive are the people that have figured out how to probably 6, 7 times.

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.

tree shaking, problems in the nitty gritty of this type of stuff that you hit. So You stated that Svelte and Vue had out of the box support. How do you do this with React? that just has to do with 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,

Yeah. And and like that, we said, you know, full full disclosure, Codecov is a Sentry product, but Codecov is

we don't load every single

k they do not sell

because I like batteries included.

for some reason. And that's something Gatsby never

which type of database you're using, but the interface in which you're interfacing with that database always stays the same. So to

and tie it really tightly to the rest of the framework,

that can just kill your entire plug in ecosystem

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,

specific

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 if you can't do that, I would 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, an official ORM solution that is tightly integrated into it, whether or not that's their own ORM or what.

then

me, if we could all just pick 8,300

Wes, I think one of the biggest things about batteries included that this community has a hard time with

a la Rails, or la even WordPress. Right? WordPress, you can select which database you're using,

scoping in here.

Next question from Wintalls.

scoping built in, meaning that you can write

a CSS selector like Scott Yarn. And then inside of that selector, That's what I was surprised. I went on Twitter after we had done it, and people were just quoting all the jokes

and to make in external noise of family very distracting.

turned on, meaning that all of your post c s your nesting throwing the rest of those methods out the door. So you take a look at bundle analyzer, you haven't actually hit the, like, real world

so just over a year ago.

Safari as of May 2023, purely

will then, 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,

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, 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

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

Next question we have from the curious cat. In your recent Node, 807, both of you mentioned meaning that you're probably using 1 method write a Does anyone use the HTML time tag anymore?

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

another try

redoing my own personal website,

but I'm so close to just, like, 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.

just so that right now, I'm on Panda CSS, which provides the styled API,

ways to move my styled components

These are these are things I'm so glad I don't have to worry about because single file scoped 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

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.

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

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

errors. That's so many.

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

has over 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

no, no newbie to but 8,300

If a developer adds more ESLint

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.

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

errors.

that was, like, a 6 year project that had been through several rewrites to TypeScript. So I'm no

disables, then they get an x. The goal is to reduce that number.

undetected

is because it makes you use Mongo by default, and they never figured out 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, ESLint can automatically fix for you. Not all the time, but, you Node, that are guarantee

question. Bring our own things.

Yeah. Well, may maybe that's, Payload. Because Payload's using Drizzle now. You know? And, like, it makes enough of

Redwood JS. There's a blitz. And there's a whole bunch of these that have tried,

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

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

Yeah. Yes. Payload's cool.

to do this. And the only one to me that really felt like it was easy

that's a good good

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

Well, why is there an h in it? video streaming, all of that type of stuff, and that's a fairly large from, like, a Lodash or something, and your Webpack is not properly

But schema.

not schema, 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 specificity.

schema

I don't. Yeah. Don't know. Schema. No. I think you guys are wrong. Okay. Schema.

it's him and his wife

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,

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.

Next question here from John. How do you deal with work from home ADHD and kids?

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 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 We just Svelte just lazy loads in what it needs. It knows what we need given what components are on that page.

Why has this perception changed? product that I'm I'm working on. So I don't feel because of the

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

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

after

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,

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

a couple years, CSS now has I've been there. I've been there. I think I even beat that between ESLint and TypeScript errors. Yeah. I I converted,

of plug ins. I personally had probably 30 different JavaScript mapping applications that you can use. There's arc ArcGIS.

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.

different things,

the JavaScript ecosystem has matured to a point where we are realizing fonts. Man, there's there's probably a whole bunch of bursts of time, pass and I'm evaluating a whole bunch of different, like, CSS

for my Gatsby website. And then

is thing. I've done it with content, s p. Slugify,