Jack_Herrington:
Welcome to React Roundup. I'm your host for this week, Jack Harrington. And with me are my esteemed colleagues, TJ Vantolle
Tj_Vantoll:
Hey everybody.
Jack_Herrington:
and Paige Neidringhaus.
Paige_Niedringhaus:
Bye everyone.
Jack_Herrington:
So this week we're going to do something spicy and
Paige_Niedringhaus:
Hehehe
Jack_Herrington:
we're going to do a panelist episode. It's going to be kind of spicy. So I do want to encourage folks to get on the Discord server and if you think, oh man, that was just a terrible hot take or whatever, then just let us have it on the Discord server. Okay. So
Tj_Vantoll:
Hehehe
Jack_Herrington:
what we're going to do is we're going to address controversies this week. This is the controversies episode. And this
Paige_Niedringhaus:
Hehehe
Jack_Herrington:
to be any kind of controversy in the sort of technology space, I guess.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
And we're going to do a round robin style. So each one of us is going to pick a controversy. But here are the ground rules, y'all. You can't say. Yeah, well, what is it? It depends. You can't say it
Paige_Niedringhaus:
Yes.
Tj_Vantoll:
Yeah,
Jack_Herrington:
depends
Tj_Vantoll:
yeah,
Jack_Herrington:
because
Tj_Vantoll:
you just
Jack_Herrington:
that's
Tj_Vantoll:
put your foot in the ground
Jack_Herrington:
the
Tj_Vantoll:
like
Jack_Herrington:
yes. You
Tj_Vantoll:
yeah.
Jack_Herrington:
got it. You got to take a stand, right?
Paige_Niedringhaus:
He he.
Jack_Herrington:
Which is so hard because I mean, how many times you heard Yeah, your principal, your archers, or the departments, you know, whatever.
Paige_Niedringhaus:
I'm gonna go to bed.
Jack_Herrington:
So no, it depends. So speaking of that, I will get us kicked off here and I'm going to do a little bit of a lightweight one first. Type script versus JavaScript on the front end, what say ye?
Paige_Niedringhaus:
Hehehe
Tj_Vantoll:
Well, I can start, I'll pick TypeScript. And I feel like I can say that more authoritatively now.
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
Actually, Paige and I just spent some time working on an app that had been started before and was built with just JavaScript. And it was my first time going back to like a JavaScript only app in a while.
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
And then really having that experience makes me remember how much I miss TypeScript, right? Or how much I've come to rely. on TypeScript because it's, I almost regret the very first thing when we started working on that app should have been just to set up TypeScript honestly, because in the end we would have ended up net saving time from doing it just
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
because all the little silly things you hit that you don't realize unless you have TypeScript in place.
Jack_Herrington:
Okay, well, I think it is going to be TypeScript in a walk here. So let's add a little bit. Let's make sure that you say, because I imagine there's somebody on here who's like, I'm still in JavaScript all the way. Give me a reason why. So what saved your butt this time? What was like the thing that you lost coming from JavaScript back into TypeScript? And you're like, oh my God, I can't believe we didn't have that.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
TJ? It was, yeah.
Tj_Vantoll:
Well, we had to rename some variables, for example.
Jack_Herrington:
Okay.
Tj_Vantoll:
And what do you know, when we
Jack_Herrington:
Yeah...
Tj_Vantoll:
did the rename, I didn't do a good enough search throughout the project. And there was one that I forgot to rename. And of course, JavaScript doesn't care, right? It'll
Jack_Herrington:
Right?
Tj_Vantoll:
just go on its way.
Jack_Herrington:
Yep.
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
But it turns out it subtly broke something in a way that was not immediately obvious, that ended up causing some time to debug. There's also just like communication between different... Like just good old fashioned like parsing issues because you don't know what type things are. A lot of it was just the convenience, like not having code like type ahead code complete. You'd be working
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
on like,
Jack_Herrington:
Yeah.
Tj_Vantoll:
okay, well I need to render the latitude longitude here, but you can't type like dot LAT and get exactly
Jack_Herrington:
No.
Tj_Vantoll:
what it is. It's like, oh crap. Well, what did the backend called it? What did they call it? Latitude, did
Jack_Herrington:
Oi joo...
Tj_Vantoll:
they call it LAT? Did it call it like underscore like. position underscore lats, right?
Jack_Herrington:
Right.
Tj_Vantoll:
So now all of a sudden you're opening three more files to find this stupid thing. And
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
it's just
Jack_Herrington:
So
Tj_Vantoll:
little
Jack_Herrington:
true,
Tj_Vantoll:
things like that.
Jack_Herrington:
so true, so
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
true. Okay,
Paige_Niedringhaus:
And
Jack_Herrington:
Paige.
Paige_Niedringhaus:
I did get myself with a footgun for that same project. After we had deployed it, it turned out that there was a bug where half the time the data wouldn't be fetched fast enough and the component would try
Jack_Herrington:
Oh.
Paige_Niedringhaus:
to render without data being there. So it would give you the white screen of death instead. So just, you know, it would have been great if I had had that this is a required prop that has to be passed down before. the component can render. So yeah, TypeScript. I like TypeScript for the most part. Sometimes it just gets so complicated trying to figure out what shape this type should be or what interface, you know, when you get beyond strings and numbers and booleans, it can get a little hairy trying to define things, but by and large it is very helpful. and has probably saved us from a lot of little bugs that would have otherwise just, you know, like TJ said, JavaScript would have just been like, sure, I don't know what this thing is, but I'll just keep on running and you'll have no idea of why it's not there.
Jack_Herrington:
Right? Right? Yeah.
Tj_Vantoll:
I think since this is supposed to be like hot take controversies issue, like I think my, my position on this has changed because I used to say TypeScript for like bigger projects, like company professional
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
projects, but like JavaScript is probably time for smaller things. And I think my take on that has changed. So just like, just use TypeScript, like honestly, even if you're just using building like a smaller little thing, because the more you use it to, the more you get used to it's sort of strange edge cases. And so you get
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
caught up on them less as
Paige_Niedringhaus:
Yeah.
Tj_Vantoll:
well. So
Jack_Herrington:
Yeah.
Tj_Vantoll:
I'm fully on team TypeScript at this point.
Jack_Herrington:
Yeah, I'm fully on Team TypeScript 2, obviously. I think that having done this whole series on it or whatever.
Paige_Niedringhaus:
I'm sorry.
Jack_Herrington:
Why I would say, well, just in the React case, I think typing a component is way better than using prop types, right? So prop types, yeah, I know. One, prop types only run at runtime. And so if you don't go and exercise your entire UI, y'all, you haven't actually tested it and they only warn you, right? And they're only in dev mode, right? So you don't know. And when you do that thing, like DJ said, where you change a prop name, or you change the shape of something and you change a field, then whoops, you know, now you don't know. And, but in, in TypeScript, you run your build and boom, you know, and that's, and when you refactoring, it is. You just go and change something. You're like, here are the 16 places you use it. You know, do you want me to change it for you? Yes, well, yes I do. I would like you to do all my work for me. Thank you very much. You know, and I think the other thing about it is, I think people like VS code is using TypeScript on you anyway. Like it knows the TypeScript bindings of, you know, it knows the types of React. And I think when you're in a JavaScript app, using React, it's still giving you the hinting that, you know, from React itself, right? So if you like that hinting, just help yourself out, you know, hint yourself, hint with your own data types and all. Okay,
Tj_Vantoll:
Cool.
Jack_Herrington:
well I think we've beaten
Tj_Vantoll:
I think
Jack_Herrington:
this
Tj_Vantoll:
it's
Jack_Herrington:
horse to death, so...
Tj_Vantoll:
way too much agreement. This...
Jack_Herrington:
Yeah, wait, yeah,
Tj_Vantoll:
Heh heh
Jack_Herrington:
yeah,
Tj_Vantoll:
heh.
Jack_Herrington:
yeah,
Tj_Vantoll:
Heh heh.
Jack_Herrington:
no controversy! Paige! Paige! Make us- make us controversy!
Paige_Niedringhaus:
Okay, so a controversial thing that I will bring up is class based components versus functional programming.
Jack_Herrington:
Oh, first, that's okay.
Paige_Niedringhaus:
Because I've been on both sides and if it was me just working on a project, I probably reach a lot less for classes, but I know that there are plenty of use cases where it turns out that those are the better solution or a solution that other people might reach for instead. So what do you guys think?
Jack_Herrington:
Okay, I'm going to jump in here because TJ got the last one and I'll jump in
Tj_Vantoll:
Hehehe.
Jack_Herrington:
first. So for me, it's functional programming, functional components in a walk. There's no, there's
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
no, not even any question. In fact, I'm doing a video where I'm talking about this and here are my three reasons. One, clearly the preference of the React team itself and the direction that React is going. They, if you look to the old docs, the old docs are all in class components and the new beta docs are 100% functional components.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
And there's a reason for that because number two, The state management model is just hella better in react component and functional components versus class components in class. Functional components you stay in use, reduce, or use effect, use them, I'm all that stuff. We, even with their janky dependency arrays is a full on state manager built right into react it's a, it's a reactive state manager and you don't get that on the class side and the, and the result is you get all these awesome hooks. You get like 10. stack react query and all the animation stuff and you just lose out on all of that. And then third, I think if you learn the functional stuff first, learning class that was just wicked, wicked easy, you know, it's, you know, if you go into a project that does that, it's just, you know, I think you're gonna be picking up on it easy, easy. So there you go. That's my take.
Tj_Vantoll:
All right, I'll chime in here. I hate hooks. I
Jack_Herrington:
HAHA!
Tj_Vantoll:
really need, we need a controversy here.
Jack_Herrington:
Hmm?
Tj_Vantoll:
I think use effect is the most awful API. It's like trying to explain it to someone. It makes no sense.
Jack_Herrington:
Oh
Tj_Vantoll:
Like
Jack_Herrington:
yeah.
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
it's air prone too. It's basically like
Jack_Herrington:
Oh
Tj_Vantoll:
a
Jack_Herrington:
my
Tj_Vantoll:
foot
Jack_Herrington:
god,
Tj_Vantoll:
gun
Jack_Herrington:
yeah.
Tj_Vantoll:
because you can
Jack_Herrington:
Oh
Tj_Vantoll:
cause
Jack_Herrington:
wait.
Tj_Vantoll:
all sorts of problems. You can cause problems that are very hard to debug, problems
Paige_Niedringhaus:
Yeah.
Tj_Vantoll:
that can get through into production, problems like. create memory issues, some of the worst things to debug. I don't know. And I feel like that's honestly the biggest thing that I prefer from some of these newer frameworks, the Svelts of the world, some of the newer ones that are coming up, because that's the main thing they're sort of changing up over React, or at least the main benefit I see, because they're also recognizing, I mean, I'm focusing on use effects, but like
Paige_Niedringhaus:
Thanks for watching!
Tj_Vantoll:
even hooks like use state, like they're very confusing APIs. There's a reason that people like Jack have to make YouTube series on this, because they're... They're not APIs like you have to go to his YouTube videos to understand what they do.
Jack_Herrington:
Yeah.
Tj_Vantoll:
You're
Jack_Herrington:
And
Tj_Vantoll:
not just
Jack_Herrington:
multiple.
Tj_Vantoll:
going to,
Jack_Herrington:
Yeah.
Tj_Vantoll:
you're
Jack_Herrington:
And
Tj_Vantoll:
not yet.
Jack_Herrington:
I had to hit it over and over and over again. Yeah.
Tj_Vantoll:
Yeah, like until you get burned by use effect, you don't know
Jack_Herrington:
Oh
Tj_Vantoll:
like,
Jack_Herrington:
lord.
Tj_Vantoll:
you know, what it
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
actually does. So the points that Jack's saying are all very true. Like, I mean, I still use hooks in my apps because mostly because it's the direction React is heading, it's the direction you see like samples online. Right. Like it's harder and harder to find class component examples. If you
Jack_Herrington:
Oh
Tj_Vantoll:
look
Jack_Herrington:
yeah.
Tj_Vantoll:
on stack overflow and everything. So I'm, I'm, I'm using hooks, but I'm, I'm, I want to make it clear that I'm doing it begrudgingly and it is not my, it is not my preference.
Jack_Herrington:
I love it.
Paige_Niedringhaus:
I
Jack_Herrington:
I love
Paige_Niedringhaus:
use
Jack_Herrington:
it.
Paige_Niedringhaus:
it, I don't like
Jack_Herrington:
Hey,
Paige_Niedringhaus:
it.
Tj_Vantoll:
Yeah,
Jack_Herrington:
okay,
Tj_Vantoll:
exactly.
Jack_Herrington:
perfect. Yes. Okay, classic. Page?
Paige_Niedringhaus:
I mean, I am on team hooks, mostly because
Jack_Herrington:
Ha ha.
Paige_Niedringhaus:
I learned them. And I, for the most, I will say for the most part, I understand them. I totally just like, I got myself yesterday though, where I had this component that was rerendering and I needed the previous state before the rerender. And they
Jack_Herrington:
Ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
Paige_Niedringhaus:
finally figured out that's what was happening. That the state was getting wiped out by a use effect and had to use a use ref. But yeah, those things we shouldn't. necessarily have to be aware of, or if you weren't aware of it, you would have spent more time than I did trying to figure out what was going on. But at the same time, everybody is going towards hooks, so if you're in the React ecosystem, you're going to probably want to use them as much as you can, just because that's the way React was built. And if you want to do it the React way and keep up, then hooks is, hooks is it.
Jack_Herrington:
kind of sad, huh? I'm like, you know, everybody's like, just hold your nose and do it. It's like,
Tj_Vantoll:
hehe
Jack_Herrington:
eat your veggies. You know, it's like, nobody's like, whoa, wow, hooks, man. That was the greatest model since everything. And I think it really comes down to the fact that like svelte and solid and all the other pure reactive frameworks, they're all compiled,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
right? And so they get the advantage of saying, oh, look, we can track the fact that you're depending on that variable over there. and
Paige_Niedringhaus:
Right.
Jack_Herrington:
automatically magically do this for
Paige_Niedringhaus:
updated.
Jack_Herrington:
you, right? Update it, as opposed to use effect, which basically you have to manage those dependency arrays yourself. And then everybody gets into the, oh my God, do I even like, do I put it in the dependency array? Do I not put it in the dependency array? Is it a reference? And blah, blah, blah, blah. And it just gets,
Paige_Niedringhaus:
ESLint throws
Jack_Herrington:
and there's
Paige_Niedringhaus:
an
Jack_Herrington:
no way,
Paige_Niedringhaus:
error.
Jack_Herrington:
yeah. And the
Tj_Vantoll:
Yeah.
Jack_Herrington:
best thing you can do is not screw up. And that's never the greatest thing
Tj_Vantoll:
Mm-hmm.
Jack_Herrington:
when it comes to architecture. With the use effect, there's five ways to shoot yourself in the foot, and there's one way to do it right. And we all like
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
do the five ways and then do the. Finally, maybe you hear her. Okay.
Paige_Niedringhaus:
Exactly.
Jack_Herrington:
TJ, you got a controversy for us?
Tj_Vantoll:
Why don't we do like a mini like lightning round here.
Jack_Herrington:
Okay. Yes,
Tj_Vantoll:
So
Jack_Herrington:
please.
Tj_Vantoll:
how about the classic tabs versus spaces.
Jack_Herrington:
Spaces. Two spaces when it comes to
Tj_Vantoll:
page.
Jack_Herrington:
React.
Paige_Niedringhaus:
I would say spaces, but I've recently seen reasons for tabs. So I guess a lot of it depends on how big your IDE is and how much indentation you want.
Jack_Herrington:
I've heard
Tj_Vantoll:
I
Jack_Herrington:
that
Tj_Vantoll:
was
Jack_Herrington:
there's
Tj_Vantoll:
a murky
Jack_Herrington:
an aga-
Tj_Vantoll:
answered page. Come on,
Jack_Herrington:
Ha ha
Paige_Niedringhaus:
Bye
Jack_Herrington:
ha!
Tj_Vantoll:
tabs
Paige_Niedringhaus:
now.
Tj_Vantoll:
are spaces.
Paige_Niedringhaus:
I guess I'm gonna go to spaces also.
Tj_Vantoll:
Okay. I am also spaces, but I will say that my, I, it kind of depends on just what I'm familiar with working with because
Paige_Niedringhaus:
Mm.
Tj_Vantoll:
back when I did Java development, there was an entirely tabs ecosystem
Jack_Herrington:
Oh yeah.
Tj_Vantoll:
and I would have argued
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
for tabs just because of familiarity. But now like the JavaScript world mostly uses spaces. So I'm, I'm there, but I will
Paige_Niedringhaus:
Yeah.
Tj_Vantoll:
say that you get used to it. Like now it's, it's more than like, I just want to use what I'm comfortable with.
Jack_Herrington:
Yeah, I think it's yeah, yeah, it's wherever you go. I mean, you were saying lightning round. So what's our next lightning round?
Tj_Vantoll:
All right, light theme or dark theme?
Paige_Niedringhaus:
Oh, dark theme, without
Jack_Herrington:
Dark theme.
Paige_Niedringhaus:
a doubt. Dark theme everywhere, all day, wherever I can.
Tj_Vantoll:
Hehehe
Paige_Niedringhaus:
My IDE, my browser, my database, GUI, all of it.
Jack_Herrington:
I'm dark theme in VS code all day long, but I don't know. I guess I'm not the auto switching thing on and it's kind of cool. Like halfway through the evening, it's like, boink, I'm dark. And I'm like, oh wow, it's nighttime now. Isn't that nice?
Tj_Vantoll:
I kind of want to try that. So I'm team light theme here,
Jack_Herrington:
Hmm
Tj_Vantoll:
but I feel like I'm like a dying breed because
Jack_Herrington:
Ha ha ha!
Paige_Niedringhaus:
You
Tj_Vantoll:
it
Paige_Niedringhaus:
are.
Tj_Vantoll:
feels like everything's moving dark theme. And I do it partially because doing a lot of DevRel work, I have to share my screen a lot. So I tend to keep all of my stuff just like white background, black text, just very, very simple for like the highest possible contrast. So my terminal
Jack_Herrington:
Oh...
Tj_Vantoll:
is that, my
Paige_Niedringhaus:
Mm.
Tj_Vantoll:
VS code is that. because I share my screen or take screenshots so often that I got sick of having to switch things over if I had something I needed to share. And then over time, I just got used to it. And then that's just my personal preference. But I have been meaning to experiment with the stuff, some of the tech that automatically shifts your colors based off time of day, just because I'm sort of fascinated by that. But I've never bit the bullet and actually tried that out.
Jack_Herrington:
It's just a setting on OS X. It's like, you know, OS X is just like, you know, it's auto and it just goes from light to dark. I don't know. It's light right now. Do we have another lightning?
Tj_Vantoll:
All right, favorite browser.
Paige_Niedringhaus:
Probably Chrome. I've just been using it for so long. And I know that it tracks everything. And Google knows way more about
Jack_Herrington:
Hahaha
Paige_Niedringhaus:
me than anybody ever should. But it just, everything works in it for the most part. We even have some particular features of some of our websites that depend on Chrome, because that's the only one that has serial interfaces built into it so you can do things. So Chrome.
Jack_Herrington:
Chrome, yeah, I'm just so used to the dev tools.
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
Yeah.
Tj_Vantoll:
See, I'm so I'm bringing these up parsing because I know I can generate at least some controversy because
Jack_Herrington:
Hahaha! That's some controversy!
Tj_Vantoll:
I'm I am a Firefox fan and I also feel
Jack_Herrington:
Alright.
Tj_Vantoll:
like I'm a dying breed there. But I like Firefox partially because it just runs so much faster and uses so much less memory than Chrome.
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
And I first this became a problem for me when I was doing live streams. And my actual CPU usage I was sharing a video stream, I was sharing my screen, I was running the streaming software, and then I noticed Chrome was also using an outrageous amount of CPU resources to the fact
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
that my high-end MacBook Pro couldn't run it and all the streaming software at the same time. And so that's one reason I've liked Firefox. I also just, it just feels snappier to me, and the dev tools are actually quite good. The Chromes are definitely better. So occasionally I need to switch over when I'm really getting into something specific. But for the most, like the common stuff you do for web development, right? I need to go in and tweak some CSS
Jack_Herrington:
Console,
Tj_Vantoll:
values
Jack_Herrington:
inspect
Tj_Vantoll:
or
Jack_Herrington:
element,
Tj_Vantoll:
our log
Jack_Herrington:
yeah.
Tj_Vantoll:
or like
Paige_Niedringhaus:
Yep.
Tj_Vantoll:
the simple things, those work just fine in Firefox.
Jack_Herrington:
Yeah.
Tj_Vantoll:
So it's very rare that like, I need to go like really advanced debugging and dive into something that's really deep into Chrome. That does happen. DevTools are definitely better there, but. If you haven't, if you're frustrated by Chrome at all, you can come over to the dark side.
Jack_Herrington:
Boy, that reminds me of
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
another controversy you could do.
Tj_Vantoll:
Go for it, Jack.
Jack_Herrington:
But, well, I did have one in the back pocket. So that's redux versus anything else. And you got to specify what the anything else is.
Paige_Niedringhaus:
I mean,
Jack_Herrington:
Oh, oh, oh!
Paige_Niedringhaus:
if I had to choose right now,
Jack_Herrington:
Okay.
Paige_Niedringhaus:
I would go
Tj_Vantoll:
You
Paige_Niedringhaus:
with
Tj_Vantoll:
do
Paige_Niedringhaus:
context.
Tj_Vantoll:
have to choose right
Jack_Herrington:
Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha
Tj_Vantoll:
now, just to be clear.
Paige_Niedringhaus:
Yeah. Yeah. I context, just the context
Tj_Vantoll:
Okay.
Paige_Niedringhaus:
API. Don't even go for an external state management tool because the times that I've used it in the past, it turned out that we didn't need it after all. You know, everybody is so concerned about storing everything in their state manager and it's like, I can count on one hand the amount of times that we actually ended up using or updating that state again in the application. So. I think by and large, you just don't need an external state manager most of the time.
Jack_Herrington:
Okay. TJ?
Tj_Vantoll:
Yeah, so my pick is going to be, I have very little expertise here, so you should take my opinions here with a little bit of a grain of salt, but I also tend to go for simpler solutions. So any of the really simple ones I like, I've used recoil. I guess that'll be my
Jack_Herrington:
Oh
Tj_Vantoll:
pick.
Jack_Herrington:
yeah!
Tj_Vantoll:
Recoil is great for, I don't think I would use it in like a huge production app that I'm building for like a company or something like that. But if all you need is just, you're building a small little app, like some sort of personal project, some sort of like demo, it's just great. It's really simple. You store simple values. Um, there's ways to get derived state. It's, it's just really easy to work with. And I tend to like, uh, simple things. I think people reach for things like Redux too quickly. Usually like there there's very legitimate use cases for it. And it's a very powerful library, but it's. often times overkill for
Jack_Herrington:
Have
Tj_Vantoll:
what you actually need.
Jack_Herrington:
you seen that Grug developer thing? Or, yeah, it's like a kind of caveman developer. And he's like, Grug like simple thing, you know, kind of
Tj_Vantoll:
Yeah.
Jack_Herrington:
thing. Yeah. Which is true. I'm all for simple things too. And I'll you know what? I'll back you up on on this. I'll say I'm going to go with Jotai, which is actually
Paige_Niedringhaus:
Mmm.
Jack_Herrington:
Daishi Kato's version of Recoil, just because it's in every way, shape and form better than Recoil.
Tj_Vantoll:
Yeah,
Jack_Herrington:
Let me
Tj_Vantoll:
I,
Jack_Herrington:
just put that
Tj_Vantoll:
I,
Jack_Herrington:
out there.
Tj_Vantoll:
I, no, I, I agree. I just haven't like, it's one of those things where like, I learned how one used and
Jack_Herrington:
Sure.
Tj_Vantoll:
I don't have needs that go beyond it, but yeah, if you're going new, I would probably reach for Joe Tai too.
Jack_Herrington:
Yeah. And if you
Paige_Niedringhaus:
I mean,
Jack_Herrington:
like,
Paige_Niedringhaus:
I
Jack_Herrington:
there's all... Sorry. Go
Paige_Niedringhaus:
would,
Jack_Herrington:
on.
Paige_Niedringhaus:
oh, well, I would also look into Redux Toolkit, because I haven't had
Jack_Herrington:
Oh
Paige_Niedringhaus:
the
Jack_Herrington:
yeah.
Paige_Niedringhaus:
opportunity to use it, but I know that it's supposed to be a lot simpler and easier to get started with an original Redux.
Jack_Herrington:
Oh, definitely. If you're going to use Redux, it's like that guy, you know, if I do Redux, I'm going to use Redux Toolkit.
Paige_Niedringhaus:
Right.
Jack_Herrington:
You know, absolutely no question. And it's got the Redux Toolkit query stuff built in,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
which is basically like a React query built in. And it gives you all of the, you know, is this query pending? Is it did he get an error? What error was it? Blah, blah, blah. All the stuff that we don't write. You know, when we make our, when we do our little use effect of the fetches, you know, all of that stuff is in there and good to go. Okay, who's got the next controversy? Big page,
Paige_Niedringhaus:
Um,
Jack_Herrington:
right?
Paige_Niedringhaus:
I'll, I'll do another light drink, lightning controversy, which
Jack_Herrington:
Ooh.
Paige_Niedringhaus:
is font ligatures in your coding ID or no. And for anybody who's not as familiar, font ligatures is when you'll do the double or the triple equal sign. And it will turn it into a three, three slot slashes or three lines instead, or you'll do an arrow function and it'll turn it into an actual little arrow in your code. To me, that is like one of the best things that I've ever added to my
Jack_Herrington:
Oh, God, yeah.
Paige_Niedringhaus:
tooling setup. And I will not go back to ever using a font that doesn't support this.
Tj_Vantoll:
Wait, why would you want this? I don't, like, I don't, I don't understand
Paige_Niedringhaus:
Readability.
Tj_Vantoll:
why.
Jack_Herrington:
I don't understand this.
Paige_Niedringhaus:
Complete readability is
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
my thing.
Jack_Herrington:
absolutely. I'm
Tj_Vantoll:
Is triple
Jack_Herrington:
on page
Tj_Vantoll:
equal
Jack_Herrington:
100%.
Tj_Vantoll:
so hard to read? I don't like.
Jack_Herrington:
I'm out. It
Tj_Vantoll:
I don't
Jack_Herrington:
looks
Tj_Vantoll:
know.
Jack_Herrington:
beautiful. There is
Paige_Niedringhaus:
It does.
Jack_Herrington:
a beauty element to code. Isn't there? There's an aesthetic. I mean,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
honestly, there are times when I see people's code and it's just, it's a mess. They haven't put it through the linter. It's all, it's tabs and spaces. And you're like, are you insane? But
Paige_Niedringhaus:
Right.
Jack_Herrington:
in looking at really beautiful, well-formatted code, it's a thing. It's just,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
there's an artist in me and the ligatures are great. Italics are great. Like when you get like, and I'll tell you what, that's a spicy take too, because, man, I've gotten more than a few comments that are like, this font is terrible on my on my and then other people who are like this. Well, I can say 90% are like this font is the best things in sliced bread. But the other thing
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
other folks are like, I hate italics and go. Now, can you read that?
Paige_Niedringhaus:
Which font
Tj_Vantoll:
Probably
Paige_Niedringhaus:
are
Tj_Vantoll:
one
Paige_Niedringhaus:
you
Tj_Vantoll:
of the com-
Paige_Niedringhaus:
using, Jack?
Jack_Herrington:
See, hold on. I'll go check on that while I get it. Will I get the answer from DJ?
Tj_Vantoll:
Oh, I-
Paige_Niedringhaus:
I was... Oh, go ahead TJ.
Tj_Vantoll:
I just wanted to let Jack know I'm probably one of the commenters on your YouTube videos
Jack_Herrington:
HAHAHAHAHAHA!
Tj_Vantoll:
because I've been looking at this and my brain does not understand why anybody would want to do this.
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
Okay, so I jostle around between Operator Mono, which is a pay for a font, and
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
JetBrains Mono, which is for free. I think I'm on JetBrains Mono currently. And then there's Dank Mono. And yeah, and then
Paige_Niedringhaus:
Yes.
Jack_Herrington:
that's the end.
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
Those three.
Paige_Niedringhaus:
I use Dank Mono and then Furacode was the,
Jack_Herrington:
Oh yeah, Farakho's good.
Paige_Niedringhaus:
is the free version of it. And it's pretty nice as well.
Tj_Vantoll:
Well, I will say that at least like this is a local thing. So you can do your own thing, right?
Jack_Herrington:
Hahaha
Paige_Niedringhaus:
Unless you're
Jack_Herrington:
fair
Paige_Niedringhaus:
screencasting.
Jack_Herrington:
enough. Unless
Paige_Niedringhaus:
Ha ha
Jack_Herrington:
you're
Paige_Niedringhaus:
ha.
Jack_Herrington:
screengazzing, I'm
Tj_Vantoll:
Uh,
Jack_Herrington:
telling
Tj_Vantoll:
yeah.
Jack_Herrington:
you, there's a lot of people out there who'll be like, ooh TJ, that's very sexy. That's a good look you got there.
Tj_Vantoll:
Yeah, but see,
Jack_Herrington:
And
Tj_Vantoll:
there's
Jack_Herrington:
that makes
Tj_Vantoll:
a group.
Jack_Herrington:
up for the light theme.
Tj_Vantoll:
But here you go, though. Some people, some people will complain about the ligatures, whereas I don't think anybody's going to complain for the lack of ligatures, right? That's my...
Paige_Niedringhaus:
Maybe.
Jack_Herrington:
Real me?
Paige_Niedringhaus:
Only because they
Jack_Herrington:
Maybe.
Paige_Niedringhaus:
haven't seen ligatures and seen the beauty.
Jack_Herrington:
You know, it's like I, I got hooked on them. I went to Nike and I looked over this one guy's shoulder at his coat and I was like, oh, wow, what is that? You
Paige_Niedringhaus:
Nice.
Jack_Herrington:
know, kind of thing. That's nice. And he's like, that's operator model. Blah, blah, blah. Here's my settings. And I'm a man 20 minutes later as I was hooked. Done. I don't care how much it costs, whatever. You know, if I'm looking at it all day and it's like 99 bucks forever.
Paige_Niedringhaus:
Right? Worth it.
Jack_Herrington:
Done. Done. Yeah, if we're going to pay 20 bucks to go out bowling. Uh, oh, Paige, this was a lightning round, though. You have some more lightnings.
Paige_Niedringhaus:
Uh, sure. Let's do graph QL versus rest.
Jack_Herrington:
Ooh!
Tj_Vantoll:
It doesn't seem very lightning roundy.
Jack_Herrington:
Hahaha!
Paige_Niedringhaus:
Oh.
Jack_Herrington:
GraphQL.
Paige_Niedringhaus:
Why, Jack? Why?
Tj_Vantoll:
Yeah, go.
Jack_Herrington:
Well, wow. Oh, why?
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
Yeah, because it's typed. You know, it I can. You can do that same kind of bill checking to just make sure that your queries work and all that. And when you change something, you make sure that it's good from front to front the back. You don't get that with rest and rest is just sort
Paige_Niedringhaus:
Mm.
Jack_Herrington:
of and it's a standard. Like there's, you know, all kinds of toolings of his Apollo client, Urkel and all that stuff on it. And that's great. Right. Tell me what the rest client is that's the standard rest client. There is no such thing because rest is this kind of, it's not even a standard. It's just, just, it's just like an idea. It's concept.
Tj_Vantoll:
I mean, I'll pick rest, but it's mostly because of familiarity. Like
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
I have not done like a serious deep dive with GraphQL. So I can't, I can't say I have a super educated opinion, but I'm very, very used to rest having used it for over a decade, so
Paige_Niedringhaus:
Yeah,
Tj_Vantoll:
sort of stuck
Paige_Niedringhaus:
I mean,
Tj_Vantoll:
in my ways.
Paige_Niedringhaus:
I gotta, I gotta agree with you TJ. I haven't used large scale GraphQL and it just seems like the few times that I've set up projects and done it for smaller things, it's so much extra code. It feels like a lot of boilerplate too. And one of the things that is nice and is also a complaint about REST is that you get everything back from an endpoint. Whereas GraphQL, you have to specify every single thing exactly as you want it. But sometimes, a lot of times actually that helps me debug and figure out what is this thing named that I need. And
Jack_Herrington:
Hahaha
Paige_Niedringhaus:
I know that you can use like the GraphQL playground and things to kind of figure out what are the options, what are the types, what are the things like that. But REST is just kind of, it seems like a standard. that people default to when they're doing projects or when they're doing tutorials or things like that unless it's GraphQL specific and Same I've just used it a lot. I feel like I have a pretty good handle on how it works for the most part
Jack_Herrington:
Can I just take a quick second though to say that there is like this half step in here called TRPC, which is kind of like the best of GraphQL mixed with sort of the ease of rest. You can still
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
access it from non TypeScript thing, JavaScript, iOS, Android, whatever, blah, blah, blah. It says basically rest, but it does give you that automatic way of like managing the types all the way through. So if your TypeScript on the back end, your TypeScript on the front end, it's boom, you're done. This is really nice. So TRPC, I would say if you're looking for something up, rest going upwards, but not all the way to GraphQL. It's a nice spot there.
Paige_Niedringhaus:
Hmm,
Jack_Herrington:
Any any more
Paige_Niedringhaus:
sounds.
Jack_Herrington:
lightning round?
Paige_Niedringhaus:
Mmm. Now, let's go on.
Jack_Herrington:
OK, I think it's on me then. So debugger versus console log. Hehehehe!
Tj_Vantoll:
I'm an all-in on console log.
Jack_Herrington:
Oh yeah, okay.
Tj_Vantoll:
I'll take it to my grave.
Jack_Herrington:
HAHAHAHAHAHA! Nice.
Paige_Niedringhaus:
It's just the classic standard. It's almost as good as alert, but better.
Jack_Herrington:
Ooh.
Tj_Vantoll:
hehe
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
I mean, that was the very, very first thing that you learn when you're doing JavaScript for the first time. But yeah, console log debugger, I never seem to get the setup right the first time around
Jack_Herrington:
Oh
Paige_Niedringhaus:
and
Jack_Herrington:
no.
Paige_Niedringhaus:
it never stops
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
at the breakpoints that I want it to. So console log is definitely the first thing that I reached for.
Jack_Herrington:
All right, console log just works and it works like the first time. It's like,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
oh, OK, this is an array of objects, not an object. OK, so
Paige_Niedringhaus:
Right?
Jack_Herrington:
I just need to get the first item off the array because that's the way this dumb API works is that you get by ID returns an array of zero, a one.
Paige_Niedringhaus:
I'm sorry.
Jack_Herrington:
What? OK, you know, yeah. And the other thing is like, I don't I notice that people don't like use console to its full potential. Like there's a lot.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
Oh, my. God, there's so many things on console. You can do so much stuff in there.
Tj_Vantoll:
Yeah, it's I'll use console.log even when I know it's completely irrational and I could get my answer way faster by using the debugger. Like the, for some reason I view the debugger as like a last resort. And I really
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
shouldn't because usually it's the fastest way, unless it's something really trivially trivial. Usually the debugger is an easier way to debug the problem. But the nice thing about console log is sometimes in the debugger, if you're in some really complex problem. It can be tricky to keep track of where I am. Like, okay, well, which run through the loop am I on? Or like,
Jack_Herrington:
Oh yeah.
Tj_Vantoll:
have I jumped in here? Whereas
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
if you're clever with your logs, right? You can see like, oh, I wanna see all 10 iterations of this loop all at once, right? Cause I'll log them all out. So sometimes console.log is legitimately just faster, easier for your brain to parse than going through a debugger.
Jack_Herrington:
And sometimes you know you're in that async world where it's like you want to see like oh wait this function is getting called again But then we're getting the response back and uh-oh, you know This is out of order is way different than the order that I thought I was gonna be but
Tj_Vantoll:
Yep.
Jack_Herrington:
yeah, can I turn this into a lightning round real fast
Tj_Vantoll:
Sure.
Jack_Herrington:
and because I was just reminded the fact that like I use console.log because because github copilot writes my console.logs for me right away Which brings me to github copilot versus not
Paige_Niedringhaus:
not GitHub Copilot. I tried it and I found it to be more... like it just... it was confusing me. It was not really understanding what I was trying to do and I just didn't like the suggestions a lot of the times.
Jack_Herrington:
Okay.
Tj_Vantoll:
It was like, I'm also a no on GitHub go pilot, but it was about like 60% annoying, 30% like kind of useful. And then like 10% of the time, I'm a genuinely like amazed me, right? They would, it would come up with something like, Oh, that's interesting or come up with something useful, but just it got in the way so much just like simple things where I was just like, all I'm trying to do is like do something really simple here. get a co-pilot's like, do you want to take the square root of this? Or it's just like, come up with this completely irrelevant, like, cause it always wants to auto complete, like always. It always
Jack_Herrington:
It's
Tj_Vantoll:
thinks
Jack_Herrington:
very
Tj_Vantoll:
it knows what
Jack_Herrington:
eager.
Tj_Vantoll:
you want to do.
Jack_Herrington:
It's very
Tj_Vantoll:
And
Jack_Herrington:
eager.
Tj_Vantoll:
it,
Jack_Herrington:
Yes.
Tj_Vantoll:
it's oftentimes right. But when it's not, it's, you just want to say like, just get out of, like, I'm,
Jack_Herrington:
Yeah,
Tj_Vantoll:
I know what I'm doing now.
Jack_Herrington:
yeah,
Tj_Vantoll:
Just stop.
Jack_Herrington:
yeah, yeah, yeah, totally. And I found that Mike, some of the times when I'm recording videos, too, it's like I had this one where he gave me like a full page
Tj_Vantoll:
Ehh
Jack_Herrington:
where the hinting and I'm trying to like explain stuff, but there's this whole like gray code on the screen. You're like, just ignore all that. That's just co-pilot just being just really weird right now. Oh, yeah. Well, I think the lightning rounds are like three. So let me throw in one more lightning round thing
Tj_Vantoll:
Real
Jack_Herrington:
here.
Tj_Vantoll:
quick, I wanna make one last note on Copilot. The one time I found it useful and the thing I'd consider going back to it for is when I've been coding in languages other than JavaScript,
Jack_Herrington:
Mmm.
Tj_Vantoll:
like languages
Paige_Niedringhaus:
Yes.
Tj_Vantoll:
I don't know, in that case, it's been outrageously helpful because I'll be writing some Python and be like, I have no idea how to loop over an array or whatever they're called in Python, right? But Copilot can tell me that right away. And so...
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
If you're unfamiliar with some sort of API or ecosystem, that might be the time to do your free trial of Copilot and
Paige_Niedringhaus:
Yeah.
Tj_Vantoll:
give it a run.
Paige_Niedringhaus:
they still offer a free trial?
Jack_Herrington:
No,
Paige_Niedringhaus:
I thought,
Jack_Herrington:
I don't.
Paige_Niedringhaus:
I wasn't sure if it was
Tj_Vantoll:
Oh,
Paige_Niedringhaus:
all
Tj_Vantoll:
do
Paige_Niedringhaus:
paid
Tj_Vantoll:
they not?
Paige_Niedringhaus:
now or
Jack_Herrington:
I
Paige_Niedringhaus:
not.
Jack_Herrington:
don't know. Maybe
Tj_Vantoll:
All right, I'm going
Jack_Herrington:
I'm
Tj_Vantoll:
to their website.
Jack_Herrington:
copilot. Yes, just to clarify. But I will say, TJ, you having said that is almost terrifying in a way because you know that for every you who's a JavaScript, you know, TypeScript and dare I say expert. Moving to like a Python. You know, there is a Python person who has no idea how to iterate over a very over an array in JavaScript. He's coming back in and using GitHub with the exact opposite and checking code in our code bases that are just like, you know, maybe terrible. So,
Tj_Vantoll:
Yep.
Jack_Herrington:
yeah, there's that.
Tj_Vantoll:
And it looks like there is a free trial.
Jack_Herrington:
Ah.
Tj_Vantoll:
So
Paige_Niedringhaus:
Ah.
Tj_Vantoll:
I don't know how long for, but you can definitely try before you buy.
Jack_Herrington:
Alright, let me let me count with my third here so. Tailwind or component library and if you pick a component library then tell us which one.
Paige_Niedringhaus:
Hmm, well, I would have to say not tailwind, definitely component library. And if I had to just pick one component library right now, I'd probably still go with the Ant Design component library with the bootstrap one being a strong runner up because I've been using both of those pretty heavily.
Jack_Herrington:
Okay.
Tj_Vantoll:
I'm also team no tailwind. I just can't get over the verbose class name
Paige_Niedringhaus:
I'm gonna go.
Tj_Vantoll:
structures. So I'll pick some sort of component library. We've been using Ant Design and it's been working out halfway decently. So that's not a bad pick. Material isn't, I'm gonna violate the law of our rules and not pick a specific one. But I guess if I had to pick one, I'll pick Ant just because familiarity, but just not tailwind. I'll... Put my foot in the ground in that one.
Jack_Herrington:
I'm such a tailwind advocate, but I got to say, for professional work, probably MUI5, Material UI5.
Paige_Niedringhaus:
Mm.
Jack_Herrington:
Part of the reason is that there's a whole ecosystem around it. It's not just the components in the library, which is great, fantastic, but also the Figma stuff and all the templates out there for folks so that that kind of communication between your front end like your UI, UX folks and your your, you know, us on the front end, you know, you know, hey, we start to even like, just agree on like a typography, like, hey, is that a heading one? Is that a heading? Is that a body one or body two as opposed to like having to literally go through and say, oh, that's 13 pixels. Okay, that's going to be an H that's gonna be a body to like, oh,
Paige_Niedringhaus:
Hehehe
Jack_Herrington:
you know, and then you get it wrong. Right. And why did you use that? Like, okay. So yeah, anyway, that whole egos, I'm rambling. Okay, what do we got? TJ,
Tj_Vantoll:
How
Jack_Herrington:
you wanna go with them? Yeah.
Tj_Vantoll:
about like a corollary of that and CSS and JavaScript?
Jack_Herrington:
Ooh.
Tj_Vantoll:
Yes or no?
Paige_Niedringhaus:
Oh.
Jack_Herrington:
Oh, just yes or no?
Tj_Vantoll:
I love yes
Paige_Niedringhaus:
separate
Tj_Vantoll:
or no,
Paige_Niedringhaus:
file
Tj_Vantoll:
maybe like,
Paige_Niedringhaus:
versus
Tj_Vantoll:
yeah.
Paige_Niedringhaus:
styled components.
Jack_Herrington:
Oh!
Tj_Vantoll:
Yes or no, well, start with a yes or no and then just elaborate a bit on why or why not. Maybe
Paige_Niedringhaus:
Alright.
Tj_Vantoll:
pick a library if you say yes.
Paige_Niedringhaus:
I am going to say no. I was, I tried styled components early on in their inception and thought that I liked it, but one of the senior devs on my team pointed out that it, there's just so much code in one file at that point. And now that I've worked on some larger code bases that have used that sort of style, I hate them. And I wish now that I could extract the code out into its own SCSS file or SAS or. or even styled modules. But yeah, put them in separate places. They're doing separate things. Just get it out of my way. If I wanna write JavaScript, I wanna work on logic and components and JSX and not deal with the CSS in the same place.
Jack_Herrington:
Alright, I'm going
Tj_Vantoll:
Hey
Jack_Herrington:
to
Tj_Vantoll:
Jack.
Jack_Herrington:
say well played. I'm going to say CSS and JS. Yes, emotion in particular. And it's again, it kind of aligns with that movie five thing. They use emotion in movie five and. You know, I think it's because I've seen so many times when I'm in projects where they have the S.A.S.S file and there's just so much CSS in there and it's unclear like is it still being used? I don't know. Is
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
it? Is it you know is all this stuff important like what's important like? Wait is it?
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
Is it? What's is the positioning important like? Why are you absolute position for God sakes? You know, like it's just hard to figure out and then like the and it's kind of like a thing like hey, if you have to put a lot of CSS in the component, or is that really a good thing? Or you know, maybe maybe you're maybe you don't understand what a button is, you know, or you know, maybe you should use a different.
Tj_Vantoll:
All right, so I'm also no on CSS in JS. I feel like we're singling out Jack for the last. Okay.
Jack_Herrington:
That's fine. I'm used to it.
Tj_Vantoll:
of it it's I the the big thing is to me it's similar to page I just find like I want to be writing CSS in a CSS file it just feels cleaner like the even just like the the highlighting and like just everything just makes more sense in my editor keeping things clean and separate. The other thing about CSS and JavaScript at least the last time I checked I did not like the runtime hit of having my
Jack_Herrington:
Mmm.
Tj_Vantoll:
styles applied as the components were rendered. And I know some of the libraries had been working on ways of doing that, like at compile time or coming up with some ways of doing that, but I haven't researched that in probably a good year plus, so I don't know where all of that is at, but I did not like the fact that that was happening at runtime when I first sort of researched this about a year back, so I am a no.
Jack_Herrington:
But wait a second, hold on, hold on, hold on. So you guys are all, you're into Svelte nowadays and Svelte has the style tags in the file?
Paige_Niedringhaus:
It does,
Jack_Herrington:
It does?
Paige_Niedringhaus:
and I'm not a huge fan of
Jack_Herrington:
Oh,
Paige_Niedringhaus:
it.
Jack_Herrington:
okay.
Tj_Vantoll:
I like how Svelte does it.
Jack_Herrington:
Hahahaha!
Tj_Vantoll:
It's like automatically scoped. See, it's separate though. Like it's a style tag in there. It's not
Jack_Herrington:
Yeah.
Tj_Vantoll:
just like me writing some weird syntax, like JavaScript syntax and doing CSS. Within that style
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
tag, I can write CSS. So.
Paige_Niedringhaus:
Yeah, that's true. I guess one of my biggest beefs with CSS in JS is that I've worked on a Next project, which I think was using like the most basic CSS styling that Next comes built in with. And it is, it doesn't format correctly. So exactly what Jack was saying, you have no idea if the CSS is even being used. You can't tell where it doesn't, you know, reformat on save. It doesn't highlight. It's just, it's really hard to look at and parse through. And I wish with all my might that it was built with separate CSS files. Cause it's so hard to figure out what's going on sometimes.
Jack_Herrington:
Yeah, it always just every time I run a project like that, it just means they really haven't used a design system at all. And it's just like, it's just literally starting from a reset. And this is
Paige_Niedringhaus:
Yep.
Jack_Herrington:
sort of style every page independently. You're like, oh my God.
Paige_Niedringhaus:
Right. It's like this seems like a proof of concept, not
Jack_Herrington:
Right?
Paige_Niedringhaus:
something that has become our production application, which is always what happens.
Jack_Herrington:
Yeah, the CEO is like, I built this app in my garage and this is fantastic. You're like, OK. Yes,
Paige_Niedringhaus:
Exactly.
Jack_Herrington:
it is, sir.
Tj_Vantoll:
All right, Paige had a good suggestion in chat, and maybe this would be a good one to end on, because it's related to controversial topics. Are there any like what what sort of silly coding hills are you prepared to die on? Like, what's your what's what are some of your your small little things? And if you need a minute to think about, I can start with some of mine. So there's a there's a couple of settings I have on in my ID that like that they'll you'd have to rip away from me. So one is in VS code, there's a setting to see a thing for a space or a tab. So like it actually shows a character, like it's a tiny little dot for a space, it's a tiny little line for a tab,
Jack_Herrington:
Mm-hmm.
Tj_Vantoll:
but
Paige_Niedringhaus:
Mmm.
Tj_Vantoll:
I'm like OCD about needing to see that. Like, I don't know why, but like my brain works so much better if I can actually see the spaces and that
Paige_Niedringhaus:
Yeah.
Tj_Vantoll:
space there, it helps me like, cause my coding brain. hates mixed tabs and spaces, right? So I can see that in a heartbeat with that flag set on. And I need, like, this is a hard requirement of me. Like when I first started using VS code, I had to find that setting. And once I found it, I was like, okay, well, I could do this.
Jack_Herrington:
Okay. I, hey, mix space, either use tabs or use spaces, but mixed spaces and tabs are a crime against nature.
Tj_Vantoll:
Yes.
Jack_Herrington:
There's no question. No, do not do that. My JavaScript hill, I am actually willing to die on this hill, is const versus let. Yeah,
Tj_Vantoll:
Oh wow.
Jack_Herrington:
don't like if it's a I I used const constantly literally
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
and I tried to reduce the number of let's in my app down to like zero. Hopefully it'd be great if we can do zero. And then I see people just like it's it's a style thing. You know, it's the last characters to use Latin. It's like no,
Paige_Niedringhaus:
No.
Jack_Herrington:
you're literally giving up a full. You know, a full language feature. You know for
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
some aesthetic like what? No, this is craziness like use const. If it's
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
const use const. And then they know in
Paige_Niedringhaus:
There's a time and a place.
Jack_Herrington:
the the remix guys piss me off to no end because they're like you know. Oh yeah, and it's because you know arrays or references are in an object references therefore as const isn't really const. Oh give me a break. It's a it's a const reference, you know, and then you can also make the as const. You even in TypeScript you can if you want. Sorry.
Tj_Vantoll:
I didn't know that.
Jack_Herrington:
That's one I really am waiting to die on.
Paige_Niedringhaus:
Yeah. Mine is more of a stylistic thing as well, but whenever I pick up a new project or start a new code base or join a project, the first thing that I wanna do always is turn on format on autosave, which is a VS code
Jack_Herrington:
Yes.
Paige_Niedringhaus:
setting. So as soon as you, basically as soon as you change focus from the tab that you're currently in, it will reformat your code. And then the second part of that, which kind of goes hand in hand is throwing in a prettier. RC file of some sort and it just can be the like the most basic you know 80 characters for a line to tabs or spaces and then like hanging commas or something. I don't need much but I need those two things because I cannot really function now without auto formatting my code after I finished writing.
Jack_Herrington:
It's a validator. It
Tj_Vantoll:
It's.
Jack_Herrington:
says you got
Paige_Niedringhaus:
It
Jack_Herrington:
it right.
Paige_Niedringhaus:
is.
Jack_Herrington:
Your tabs are all, your braces are all lined up and blah blah blah blah. And it's like I'm hitting save and it's like not changing. And it's like oh,
Paige_Niedringhaus:
Right.
Jack_Herrington:
I'm missing
Paige_Niedringhaus:
I've
Jack_Herrington:
a
Paige_Niedringhaus:
missed something.
Jack_Herrington:
paran or whatever. And then it saves you like oh, okay, I'm good.
Tj_Vantoll:
I sometimes I've, because I've only started doing this somewhat recently and I've found it amazing on how often I can use it for exactly what you said. It's almost like a sanity check, like crap,
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
did I close all these parentheses right?
Jack_Herrington:
Right?
Tj_Vantoll:
You just
Jack_Herrington:
Yeah.
Tj_Vantoll:
hit save in it and you find out
Jack_Herrington:
Nope.
Tj_Vantoll:
right away.
Jack_Herrington:
Nope.
Tj_Vantoll:
Yep.
Jack_Herrington:
No. Nope.
Tj_Vantoll:
And if you got it right, it's like, well, I put, that feels like the right number of parentheses. And sometimes you,
Jack_Herrington:
Yes!
Tj_Vantoll:
sometimes you nail it and it feels good. It's like, it fixes it all for you. It's like, oh man, I crushed that.
Jack_Herrington:
Oh, can you
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
imagine? Like this is the reason why I never do Lisp languages because it's like, at least in JavaScript, you have curly braces and you also have parens, right?
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
You know, so at least there's like, sometimes it's like n-paren, n-curly, n-paren, you know, whatever, you know, like whatever. But like, there's some differentiation. There's at least two, but like in, you know, in an ellipse based language, it's like literally, so it's like, how many ellipses can we throw on this thing until it works,
Tj_Vantoll:
It's chaos.
Jack_Herrington:
I guess? It's chaos. It's nuts. What are you on your mind? Yes.
Tj_Vantoll:
So I've got another small thing, but in my editor, I always like to use some sort of theme or whatever that shows me an icon next to the file name, or
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
more importantly, actually an actual folder icon next to folders, which boggles
Jack_Herrington:
Hmm
Tj_Vantoll:
my mind is not the default. And like it wasn't the default in Sublime, it's not the default theme in VS code.
Jack_Herrington:
Yeah.
Tj_Vantoll:
So you see like a little arrow right next to a folder name, but not like an actual little icon of a folder. And I don't know why, but I need that actual folder. It's like 10 by 10 pixels, but it grounds me. I don't know.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
I love how it grounds me. That's great.
Paige_Niedringhaus:
Yeah, I completely agree. And another thing that is ridiculously small, but also helps me with code validation is Bracket Colorizer. And
Jack_Herrington:
Mmm.
Paige_Niedringhaus:
there's a million extensions for this now out on BS code. There might actually be one that's built into it, but it just, it colors your curly braces, your brackets, your ellipses, your whatever, so that you can tell. And it highlights in red if there's one that's missing or one that's extra. So it helps you figure out what, where did I screw up? Um,
Jack_Herrington:
Oh, yeah.
Tj_Vantoll:
I might have
Paige_Niedringhaus:
and
Tj_Vantoll:
to
Paige_Niedringhaus:
it's
Tj_Vantoll:
try
Paige_Niedringhaus:
pretty,
Tj_Vantoll:
that.
Paige_Niedringhaus:
pretty helpful.
Jack_Herrington:
Yeah, yeah.
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
I love
Jack_Herrington:
drop
Paige_Niedringhaus:
it.
Jack_Herrington:
a drop a link, man, because I mean,
Tj_Vantoll:
Yeah
Jack_Herrington:
I know mine is the bracket colorizer that I use is saying like this has been deprecated for 100 years. Why are you using this kind of thing? So,
Paige_Niedringhaus:
Yes.
Jack_Herrington:
you know, I think there are those. So whatever you use and it's not deprecated, please let all of us.
Tj_Vantoll:
All right,
Paige_Niedringhaus:
We'll look it
Tj_Vantoll:
since
Paige_Niedringhaus:
up.
Tj_Vantoll:
we're on the topic of editors, I've got one last lightning round one.
Jack_Herrington:
Okay.
Tj_Vantoll:
Editor minimap, yes or no.
Jack_Herrington:
Oh. Hot garbage,
Paige_Niedringhaus:
I don't
Jack_Herrington:
throw
Paige_Niedringhaus:
think
Jack_Herrington:
it
Paige_Niedringhaus:
I've
Jack_Herrington:
away. I
Paige_Niedringhaus:
ever
Jack_Herrington:
don't even use
Paige_Niedringhaus:
used
Jack_Herrington:
that.
Paige_Niedringhaus:
it.
Jack_Herrington:
I, you know, I use amazing mainly for scrolling or or to pick out like when you've got like mergers. That's it. That's basically
Tj_Vantoll:
Yeah,
Jack_Herrington:
all I ever use.
Tj_Vantoll:
I threw mine out. Like I still can't believe I think it's still the default though. Like
Jack_Herrington:
It
Tj_Vantoll:
it's
Jack_Herrington:
is, oh
Tj_Vantoll:
default
Jack_Herrington:
definitely.
Tj_Vantoll:
on and
Jack_Herrington:
Yeah.
Tj_Vantoll:
I don't get it. Like I it's like the first thing I do in any editor is like, oh crap, that stupid thing's on. What's the setting and shut it off?
Jack_Herrington:
I'm gonna turn it off right
Paige_Niedringhaus:
So
Jack_Herrington:
now. Cause I mean,
Tj_Vantoll:
Yeah,
Paige_Niedringhaus:
what does it do?
Jack_Herrington:
I
Tj_Vantoll:
oh,
Jack_Herrington:
thought,
Paige_Niedringhaus:
Since I've
Tj_Vantoll:
hide
Jack_Herrington:
yeah,
Paige_Niedringhaus:
never
Tj_Vantoll:
it.
Paige_Niedringhaus:
used it,
Jack_Herrington:
yeah.
Paige_Niedringhaus:
what
Tj_Vantoll:
You'll
Paige_Niedringhaus:
does it actually
Tj_Vantoll:
sleep
Paige_Niedringhaus:
do for you?
Tj_Vantoll:
better tonight.
Paige_Niedringhaus:
So, what does it do? Since I've never used it, what does
Jack_Herrington:
I
Paige_Niedringhaus:
it
Jack_Herrington:
love
Paige_Niedringhaus:
actually
Jack_Herrington:
it.
Paige_Niedringhaus:
do for you?
Jack_Herrington:
I, nothing, nothing. It does nothing.
Tj_Vantoll:
I think in theory it's supposed to be like, cause it gives you an area like, cause you see your whole file
Jack_Herrington:
Yeah!
Tj_Vantoll:
like in a mini map. So if you wanted to like quickly go to the bottom of the file, you'd like click the bottom of it. But the thing is you could also just, I don't know, hit the scroll wheel for a half second to get where you need to or like, I don't know. I've just never gotten it.
Jack_Herrington:
Plus if your file's that big, break it up.
Tj_Vantoll:
Yeah, that too.
Jack_Herrington:
You know, come on.
Tj_Vantoll:
If you need a mini map of your file,
Jack_Herrington:
Right?
Tj_Vantoll:
maybe that's
Jack_Herrington:
Good
Tj_Vantoll:
a sign.
Jack_Herrington:
lord,
Tj_Vantoll:
Ha ha
Jack_Herrington:
yeah,
Tj_Vantoll:
ha.
Jack_Herrington:
there's a sign, you know, from the man of, from having, coding heaven.
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
You're doing
Paige_Niedringhaus:
I think
Jack_Herrington:
it wrong.
Paige_Niedringhaus:
I've just completely ignored it and never even like
Jack_Herrington:
Yeah, just
Paige_Niedringhaus:
registered that it's
Jack_Herrington:
right.
Paige_Niedringhaus:
there doing
Jack_Herrington:
It's
Paige_Niedringhaus:
something.
Jack_Herrington:
randomly taking a
Tj_Vantoll:
Hehehehe
Jack_Herrington:
five percent of your screen. You're like,
Paige_Niedringhaus:
Right.
Jack_Herrington:
just give
Paige_Niedringhaus:
What
Jack_Herrington:
that
Paige_Niedringhaus:
is
Jack_Herrington:
away.
Paige_Niedringhaus:
this?
Jack_Herrington:
Just give that screen real estate away. Who needs that?
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
You know. All right. Well, this has been phenomenally fun, but I think it's time for pics. So yeah, let's do some pics. TJ, you want to kick us off?
Tj_Vantoll:
Sure, I'm gonna pick Portal 2, which
Jack_Herrington:
Ooh!
Tj_Vantoll:
is now available on the Switch. I think I might've picked Portal 1 before because they released them as a package that you can buy on the Nintendo eShop for the Switch. And I played Portal 1 back in the day. It's a decently old game. It's probably one of my top five or six games all time. And I started, I'd never played Portal 2 though. I don't know. why for whatever reason and we started playing it this weekend and it's just a bunch of fun. It's like a sequel to the original so if you know the original story is like legendarily good and the sequel like builds on top of it so we've had a lot of fun playing through it. It runs pretty good on the Switch like it's good enough and just you get all the advantages of playing like on a big TV Switch controller so we're having fun with it.
Jack_Herrington:
And there's a there's a song, there's a actually genuinely good song that came out, I think for a for a one, you know,
Tj_Vantoll:
It's
Jack_Herrington:
the
Tj_Vantoll:
the
Jack_Herrington:
Aperture
Tj_Vantoll:
end credits
Jack_Herrington:
Science.
Tj_Vantoll:
of,
Jack_Herrington:
Yeah,
Tj_Vantoll:
yeah.
Jack_Herrington:
it's great.
Tj_Vantoll:
Yep.
Jack_Herrington:
Yeah. I played it on the way to a robotics tournament once with all these robotic kids and we were just all yelling the song. It's hilarious.
Tj_Vantoll:
If you want to relive it, it's quite good to play over again, because I remember part of it, but not all of it. So it was a lot of fun to go through again. It's a pretty quick game too. Like you can beat it in, I don't know, like it probably took us like eight, nine hours, but I'm also playing with some 11 year olds. So
Paige_Niedringhaus:
Hehehe
Tj_Vantoll:
if you really
Jack_Herrington:
watching
Tj_Vantoll:
know what you're
Jack_Herrington:
it.
Tj_Vantoll:
doing, you can probably get through it in five, six hours.
Paige_Niedringhaus:
I'm going to go to bed. Bye.
Jack_Herrington:
All right, Paige.
Paige_Niedringhaus:
Nice. My pick this week is going to be the movie that came out about a month ago now called Bullet Train,
Jack_Herrington:
Mmm!
Paige_Niedringhaus:
which is
Tj_Vantoll:
Ooh.
Paige_Niedringhaus:
the Brad Pitt one. And it is it's fun from beginning to end. It's not for kids. There's plenty of samurai swords and death and destruction. but it's really entertaining and it's kind of one of those breakneck speed films where it just doesn't stop moving the whole time. So if you are, and it was really, just really entertaining. I found myself laughing a lot. So if you kind of like the absurd and you like Japanese and anything related to Japan, because this all takes place on a bullet train in Japan,
Jack_Herrington:
Oh, right. Makes sense. There's no bullet
Paige_Niedringhaus:
then
Jack_Herrington:
trains in America.
Paige_Niedringhaus:
I would, yeah, not yet.
Tj_Vantoll:
This is
Jack_Herrington:
Nah,
Tj_Vantoll:
single
Jack_Herrington:
I wish,
Tj_Vantoll:
tier.
Jack_Herrington:
man, doy.
Paige_Niedringhaus:
Right. I would say it's definitely worth going to see either in theaters or whenever it comes out on streaming. It was a good one.
Jack_Herrington:
I regret I have going to Japan, not actually jumping on a Shinkasan, you know, that would have been really cool. You know?
Paige_Niedringhaus:
Yeah, it looks cool.
Jack_Herrington:
Yeah, yeah. I gave in to some ads online and got a solo stove. The I don't know, maybe you've seen it in your browser, too, like, you know, the the smokeless kind of outdoor fire pit. And we tried it out a couple nights ago and. Nobody was on their phone. Nobody was everybody was just staring at the fire, telling stories, and it was just nice, you know, like it was kind of cool. I mean, they did the s'mores thing and it was just nice, you know. So I mean, maybe make a fire pit in your backyard. I know it's fire season and all that. So for a lot of people earlier, you know, obviously California is like getting hit hard, eating all that. But like when it when it cools down or starts to cool down as much as we cool down nowadays. Um, yeah, you know, it's nice.
Tj_Vantoll:
I'm good to check this out because we have, our deck has a hole in it for a hot
Jack_Herrington:
Hmm,
Tj_Vantoll:
tub and our
Jack_Herrington:
ah.
Tj_Vantoll:
hot tub
Paige_Niedringhaus:
Oh.
Tj_Vantoll:
is long since broke and I'm like sick of maintaining the thing. And so our thought is like, well, but the problem is we have a hole cut for a hot tub in the deck. And so one of our thoughts was like to turn this into like a mini like fire pit. And this might work quite well for that, honestly.
Jack_Herrington:
Tell you what, that fire my next literally my next door neighbors, you had a party the next night and he has a like a homebrew fire pit, literally just like go to go to Lowe's, get a bunch of bricks, throw them around. You know, there you go. Bang, fire pit, bang.
Tj_Vantoll:
Yeah.
Jack_Herrington:
Right.
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
And it was smoky, you know, and you're sitting there like,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
oh, you know, you're, you know, well, that's where I think, but this one, no, I mean, you know, we hung about around it for like an hour and a half and like Didn't smell like smoke the next day. Easy to control and it's on my deck. It's on my wood deck, but you got to just, you know, there's a ring that you can get around the bottom for it to lift it off the deck a little bit. And then I got a, like a spark mat so that we
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
have the little pop, you know, the sparks would go off. They wouldn't obviously ignite our deck, which had not been great, but
Tj_Vantoll:
Yeah.
Jack_Herrington:
yeah, but yeah, it works great. You know, it's awesome.
Paige_Niedringhaus:
Nice.
Jack_Herrington:
And it's really nice guys. I mean, you know, yeah. You got that other with the kids, the fam, you know, just chilling. And it's just nice to be off the phones for a while. You
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
know, I remind me like 20 years ago when you would have, you know, decent conversation with the folks and they're not just like getting
Paige_Niedringhaus:
Yep.
Jack_Herrington:
their eight hours a day of screen time in.
Tj_Vantoll:
Jack diving into the controversies episode till the end. Hehehehe.
Paige_Niedringhaus:
Right.
Jack_Herrington:
Yeah, right.
Paige_Niedringhaus:
Phone, no phone.
Jack_Herrington:
Yeah, TikTok, no TikTok. Oh, yeah.
Tj_Vantoll:
Ha ha ha
Jack_Herrington:
Ooh. Yeah.
Paige_Niedringhaus:
Yeah, I find myself wanting to unplug a lot more than I used to. I've, I feel like lately, especially I've been using my phone and all the social media stuff as a crutch, so I'm trying to be a lot more cognizant of how open, how often I open those apps and just trying to not, not do it as much personally.
Jack_Herrington:
Life and people are so much more fun than social media.
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
Yeah. Yeah. Well, this has been awesome, guys. I mean, it's really, really fun. You know, these these panels episodes are really great. And I enjoy them a lot. I hope you all listening do too.
Paige_Niedringhaus:
Hehehe
Jack_Herrington:
Of
Tj_Vantoll:
Yeah,
Jack_Herrington:
course.
Tj_Vantoll:
and jump in our Discord if
Jack_Herrington:
Yeah.
Tj_Vantoll:
we're wrong about any of this.
Jack_Herrington:
Right. Give us some grief.
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
Like, you know, tell us about how you like mixed tabs and spaces.
Tj_Vantoll:
Yeah.
Jack_Herrington:
You maniac.
Paige_Niedringhaus:
Tell us about
Jack_Herrington:
And.
Paige_Niedringhaus:
the hill that you're willing to die
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
on.
Jack_Herrington:
yes,
Tj_Vantoll:
Yeah.
Jack_Herrington:
exactly. Yeah, yeah, yeah. I'm sure there are a lot. Okay, we'll see you all next week.
Tj_Vantoll:
All right, bye everybody.
Paige_Niedringhaus:
See ya!