React and Beyond: The Importance of Learning DOM APIs - JSJ 659

In today's episode, Charles, AJ and Steve are joined by guests Corey Brown for a rich discussion on the importance of understanding foundational concepts in software development. They explore the balance between leveraging high-level frameworks like React and the necessity of grasping the underlying technologies to troubleshoot effectively and build robust applications. They emphasize the value of comprehending core language features to write better software and solve problems efficiently. Corey reflects on the passion within the software development community and the hidden costs of over-relying on third-party dependencies like the infamous "left pad" incident.As the conversation unfolds, they debate whether sticking to frameworks or delving into deeper technologies leads to long-term success. They share practical insights on the benefits of reading source code, continuously learning, and the significance of core platform APIs. Additionally, the episode includes light-hearted "picks" from the panelists, including humorous resources and personal anecdotes. Join them as they dissect these critical perspectives and share valuable advice for both novice and seasoned developers alike. Let's get started!

Show Notes

In today's episode, Charles, AJ and Steve are joined by guests Corey Brown for a rich discussion on the importance of understanding foundational concepts in software development. They explore the balance between leveraging high-level frameworks like React and the necessity of grasping the underlying technologies to troubleshoot effectively and build robust applications. They emphasize the value of comprehending core language features to write better software and solve problems efficiently. Corey reflects on the passion within the software development community and the hidden costs of over-relying on third-party dependencies like the infamous "left pad" incident.As the conversation unfolds, they debate whether sticking to frameworks or delving into deeper technologies leads to long-term success. They share practical insights on the benefits of reading source code, continuously learning, and the significance of core platform APIs. Additionally, the episode includes light-hearted "picks" from the panelists, including humorous resources and personal anecdotes. Join them as they dissect these critical perspectives and share valuable advice for both novice and seasoned developers alike. Let's get started!


Picks 

Transcript

Charles Max Wood [00:00:05]:
Hey, folks. Welcome back to another episode of JavaScript Jabber. This week on our panel, we have Steve Edwards.

Steve Edwards [00:00:11]:
Yo. From a cold and rainy Portland, which is typical for this time of year.

Charles Max Wood [00:00:16]:
AJ O'Neil.

AJ O'Neil [00:00:18]:
Yo. Yo. Yo. Coming at you live from a beautiful day in the shed.

Steve Edwards [00:00:24]:
I thought it was the purple room.

AJ O'Neil [00:00:27]:
It changes every time. You know that.

Steve Edwards [00:00:30]:
No. It doesn't. It's always purple.

AJ O'Neil [00:00:32]:
Well, yeah. I mean, it's obviously, it's purple. Okay. For those that can see.

Steve Edwards [00:00:36]:
Right.

Charles Max Wood [00:00:37]:
Yeah. The other In

AJ O'Neil [00:00:38]:
case Tommy Edison is listening in.

Charles Max Wood [00:00:42]:
He won't tell us where he is, but folks, just look at the county records that he owns his house. I'm Charles Max Wood from Top End Devs, and, we have a special guest this week, and that's Corey Brown. Corey, do you wanna say hello and let people know who you are and kinda what your background

Corey Brown [00:01:00]:
is. Sure. Hi. Corey Brown. Coming at you from, Saint George currently, not where I regularly live. That's where I am right now.

Charles Max Wood [00:01:08]:
Oh, that's supposed to be warm down there.

Corey Brown [00:01:10]:
It's warmer than where I yeah. It's warmer than up north. That's for sure, which is why we're here.

Steve Edwards [00:01:15]:
I have a friend that lives down there. I'm always so jealous.

Corey Brown [00:01:18]:
It's it's lovely. Yeah. I, I am a well, currently, I'm architect at a place called Omni. We are a JPM company, JPMorgan company. And I've been in the industry for about 15 years. I enjoy speaking and, sometimes on occasion arguing with people about JavaScript stuff. So

Charles Max Wood [00:01:41]:
Yeah. You picked a fight with our friend, Dan, and then he ran away. It was like, before he's coming good. That's right. Well, it it was either that or he had something else going on, but, you know

Corey Brown [00:01:52]:
Oh, it reminded me the art the, argument on a family guy where, the rich guy rolls up and he says, oh, Reginald, I disagree, and then peels off. That's kind of the extent of the argument.

Steve Edwards [00:02:05]:
Ouch.

Charles Max Wood [00:02:06]:
Yeah. Yeah. So anyway. So, yeah, from what I am gathering, and it looks like AJ was part of the conversation on Twitter as well. And so you all can tell me where I get this wrong. But there was conversation, AJ was suggesting maybe we do an episode on some of the less understood DOM APIs. And then, Dan asked the question, do React developers really need to understand the DOM APIs? Because React does a lot of these things for you. And you said, yeah.

Charles Max Wood [00:02:41]:
They do. And he kinda disagreed, and so the idea was you could come on and Make my kids cry. That conversation with you, and then he he ran away because you're so intimidating. I think it's his beard. But It's

Corey Brown [00:02:56]:
it's gotta be it. It's very it's

Steve Edwards [00:02:58]:
just

Corey Brown [00:02:58]:
a little bit of gray right there. It really is like, oh, he really know what he's talking about.

Charles Max Wood [00:03:02]:
That's right. You've got a real gray beard in the house, folks. So, anyway, let me know if I missed anything important there. And then, if you or AJ wanna chime in and give us a little more context, we get going on talking about this because I think it'll be interesting.

Corey Brown [00:03:21]:
Yeah. No. I think that's the sum of it. And had I known that you could get on this podcast just with a a simple, I don't think that's quite right comment, I would have done it a long time ago. But no. That's good.

Charles Max Wood [00:03:36]:
Alright. So, yeah, so is there anything more to it? Did I miss anything?

Corey Brown [00:03:43]:
No. I think I think that is the that was the conversation we had on Twitter, but, you know, should I guess the premise of the argument is should dude, React developers need really need to understand the Dom. Is is React sufficient for your needs? I think there's there's a bigger question under that. More like given the rise and the the the universality essentially of frameworks out there, the the vanilla JavaScript crowd has grown increasingly smaller. So given that you really a lot of people make the argument you really can't do JavaScript work anymore without working inside of a framework. Therefore, do you need to know the platform upon which that framework is built or are those frameworks sufficient to accomplish everything you need? Do you wanna live in the abstraction, or do you need to be able to dive down into the, into the metal sometimes? I at least that's the way I am thinking about the problem, the question.

Charles Max Wood [00:04:41]:
Okay. And your answer, it seems, is obviously, yeah. Sometimes you need to get into the metal.

Corey Brown [00:04:49]:
So do

Charles Max Wood [00:04:49]:
you have examples, or do you have an argument for that?

Corey Brown [00:04:53]:
Yeah. Actually, I had, it was interesting just a couple days after that conversation, which were making it sound like it was a it was a monumental thing. It was kind of a passing thing. But with that said, just a couple days later, I was working, on a problem and just it was attaching a pop over a drop down, and kind of anchoring it to a, to an element. And it I was refactoring something that done this, and the original the old version was using, just pure React as much as React as it could. So using all the hooks and all that stuff and

Charles Max Wood [00:05:34]:
Uh-huh.

Corey Brown [00:05:35]:
Even then you have to you have to do some, some event listening. Even when you're trying to go completely into React, you have to do event listening. So, yeah, add event listener on scroll and and that sort of stuff. But in the refactor, I just ripped all of that stuff out, and I did a very simple, event listener on scroll and an event listener on, on resize and use the same handler for both. And it was not the previous version had a lot of bugs. It would not track well. It would drift and it when things it would things would get out of whack. Ripping all of that framework stuff out and dropping just down into the very simple I mean, scroll event listeners and and resize event listeners are not like new Dom APIs.

Corey Brown [00:06:23]:
They're they're super, they've been around forever. But just leaning on those, like, fixed all of the bugs it had with it. It is now buttery smooth, and it was kind of a lesson that these frameworks, they're designed to do something that like, a specific thing. And when you're doing what those things are designed to do, they work really well and you should lean into them. But they they aren't designed to do everything. And when you try to force that square peg into that round hole for everything you try to do and you are not aware of or you disregard the platform upon which it's built, which is designed to do a slightly different thing, you can you over complicate it. Actually, I was just reading this morning. I was rereading, out of the tar pit, that the old, article.

Corey Brown [00:07:15]:
I can't remember the author's names. That's really about complexity, about the difference between necessary complexity and unnecessary complexity. And, depending on what you're trying to do, the frameworks can introduce a lot of unnecessary complexity, and that's what I found. That's what I have been doing for the last 15 years.

Steve Edwards [00:07:33]:
You know, Chuck, I have to add the obligatory joke in here that this seems like a really overreaction Oh. To this question.

Corey Brown [00:07:41]:
Wow. There it is.

Steve Edwards [00:07:44]:
Right. You know, I mean so, Corey, my background is I started out with in PHP straight PHP world, and I got into Drupal for a while and then Angular and Vue. I've never played with React myself. But to me, I'm like, my answer to this question is, duh. Yes. You need to know both.

Corey Brown [00:08:06]:
I'm just like, really, how would

Steve Edwards [00:08:08]:
you not need to know the underlying basics of any given language? There's no way that any framework, I think, is going to be able to, do everything that the underlying platform can do. And, you know, I listen to, as woke as he is, I still listen to Chris Ferdinand quite a bit. And, you know, I get his newsletter, and he makes a lot of great points. You know, you listen to other podcasts and people talk about using the platform. You know, use the platform. Use the Dom APIs. Use what's already there. And even in Vue and, and, Laravel and Drupal, you know, there's a lot of helper functions.

Steve Edwards [00:08:48]:
There's a lot of things that will do stuff. But time and time again, you just gotta get down to the basics and use some of the basic tools. I mean, a framework's not gonna do everything, and why should it? You know?

Corey Brown [00:09:01]:
Yeah. Yeah. And more than that, a few more things to add a little bit of color to that. So the original the the new one uses the new popover API. I don't know if any of you guys know of it or used it. It's fantastic. It's lovely. It's

Charles Max Wood [00:09:14]:
I keep wanting to play with it.

Steve Edwards [00:09:15]:
Yeah. I've seen a lot about it. I haven't had a chance to to get down and use it yet because that's a you know, that's one thing that JavaScript's had to do a lot of is anytime a pop up, pub over stuff with dialogues, modals, whether it's date pickers, you know, you name it. That's always something JavaScript has

Charles Max Wood [00:09:29]:
to do. That was in the spec, and I was just like, oh, my life just got better. But

Corey Brown [00:09:34]:
Oh, it's it's a delight to use. And 90% of the code I was able to eliminate from the the pure react version was just state management, which, again, goes back to to the out of the tar pit article, where it identifies the this the primary source of unnecessary complexity of state management. Uh-huh. And you can just eliminate all of that. You do not have to worry about it. And so you have the scroll handlers and the the research handlers, but the thing that really reduced the complexity of it, entirely was the popover API, which is not avail it's it's not a React thing. It's a platform thing. Right.

Corey Brown [00:10:09]:
It it reminds me very much, of I mean, you guys I'm sure you all remember the, the left pad incident. Right? Yes.

Steve Edwards [00:10:19]:
Comes up, was it, 8 lines or something like that? Yeah. Yeah. From the Internet.

Charles Max Wood [00:10:23]:
But can can you give people context? Because I'm sure we have listeners

Corey Brown [00:10:27]:
Yeah. Sure. So I okay. So I I love JavaScript. I love the JavaScript community. I have been doing it for 15 years. I have, you know, I've learned other languages, but I have only ever been professionally paid to write JavaScript. And but one thing that the JavaScript community does, I think, poorly or has done poorly is an overreliance on abstraction, overreliance on libraries, overreliance on, on frameworks.

Corey Brown [00:10:54]:
What happened

Charles Max Wood [00:10:55]:
not just a JavaScript problem. I'm just gonna point that out. No. No. It's not. Does this. Everybody into this.

Corey Brown [00:11:01]:
Yeah. I think some do it better than others. But,

Charles Max Wood [00:11:04]:
Fair. That's fair. But yeah.

Corey Brown [00:11:07]:
So what had happened is, in this over reliance on on frameworks, you know, the the hyper hyperization of don't repeat yourself, we have, created libraries so we never have to write the same thing over and over. But, of course, sorry. I'm tangenting a little bit. The libraries end up all the overhead of importing and do this all their stuff end up writing more code sometimes than it would be just to write the thing. In this case, that's exactly the thing. So this library literally pads the left side of a string, so the the beginning of a string with some characters that you give it. Right. Turns out that there has been for a very long time a native way to do this in JavaScript, but we decided a lot of people decided.

Corey Brown [00:11:49]:
Yeah. Shocker. A lot of people decided, no. No. We're gonna use the library because because this is gonna be better tested. I I don't really understand the logic of

AJ O'Neil [00:11:57]:
it. I I think that pad start came after left pad.

Corey Brown [00:12:04]:
It may have.

AJ O'Neil [00:12:04]:
I think that pad start was one of the when they were calling it ECMAScript 6, where they were just before they went hog wild crazy, and they were just introducing things that the language actually needed, that was around the time that pad start was introduced. And then, of course, that didn't get implemented by browsers until, what, you know, 6 years later or whatever, because they prioritized dumb stuff that we don't need over stuff that we actually do need.

Corey Brown [00:12:33]:
In any case, at the time at the time this happened, pad start was our has our had already been in JavaScript for some time. So

AJ O'Neil [00:12:42]:
Yeah.

Corey Brown [00:12:43]:
If if and this gets into the problem of, like, transient dependencies and deep dependencies and stuff. A lot of people didn't even know that they had a dependency on this library. So what happens is this the owner of this library, for reasons I don't recall and history will probably forget, got upset and and pulled his, his library. And at the time, NPM allowed you to do this. He just deleted it. And all of a sudden, everybody's builds in the entire

Charles Max Wood [00:13:12]:
Yeah. The Internet.

Corey Brown [00:13:13]:
World. Well, everyone says the Internet broke. The Internet never broke.

Charles Max Wood [00:13:16]:
No. It's true.

Corey Brown [00:13:17]:
The the builds, everybody's built web. It wouldn't yeah. The well, the the pre release part of the web. Right. So nobody's site went down, but nobody could deliver anything anymore either for a little while so they could figure this out. And it was, it was a huge joke in the the whole software community. Oh, JavaScript. You know, they don't know what they're doing over there, which is probably some very true.

Corey Brown [00:13:41]:
But, so, anyway, so that's how it went all went down

Charles Max Wood [00:13:45]:
Yep.

Corey Brown [00:13:45]:
As I recall.

Charles Max Wood [00:13:47]:
Right. So the point you're making then is if people had been relying on the underlying, core API of start pad instead of using the left pad library, then their stuff would have just kept on working.

Corey Brown [00:14:02]:
It goes it goes deeper than that even because, to to AJ's point, if you it the if you look at the the if you ever looked at the code for left pad, it was very, very few lines of code. It was Super simple. Yeah. Yeah. Very simple, very straightforward. Anyone could have wrote this, but we used the library instead instead of everyone writing writing it themselves, writing their own utility library, we used the 3rd party library, which created a dependency on someone else who, at their own whims, could do whatever they wanted. Our our insistence on, like, outsourcing our code this way, the the the the simple code, kinda created this problem. Everyone could have written their own left pad and then updated as they felt ready to, to patch start when it came into JavaScript.

Corey Brown [00:14:56]:
But instead, it got buried deeply, deeply, deeply into these, dependencies that nobody even knew was there. We don't keep up. We don't update our stuff. They didn't you know, left pad didn't update theirs to use the the native or anything like that. And so we get into the system where there's the these blind corners of things that we're relying on. We have no idea we're relying on them because we've outsourced even the simplest of stuff.

Charles Max Wood [00:15:19]:
Can I can I clarify something here? Because what you're pointing out is not just the people who, like, in their project said, I need left pad. Right? It was a dependency of a whole bunch of the other libraries. So even if they were making the kind of decision that you're talking about where they're saying, you know what? Something like left pad, it's simple it's simple for me to write my own little library that does it or, you know, if if I'm late enough, I can use the the native JavaScript API that does it. But I had other things that were solving more complex problems for me that also relied on left pad. So even if I was making some of these better decisions, I still fell prey to this because my my other underlying stuff wouldn't build.

Corey Brown [00:16:05]:
That's right. Because because of a, more of a a community, problem, I guess. Mhmm. We we as a community have kind of fallen to this. And so, yeah, which which is why I do think that, like, dependencies come with a a certain amount of cost that's often very hidden that we don't Mhmm. We don't acknowledge, we don't recognize. I'm not saying we shouldn't have dependencies. We shouldn't rely on frameworks or libraries.

Corey Brown [00:16:31]:
We definitely should. There are great things that come with them. But but to do so too often or without acknowledging that there is that there's a cost associated with that, I think has bitten our bitten us as a community and individually several times that we still haven't learned the lesson that maybe we should be a little bit more intentional about the the dependencies that we bring on board.

Charles Max Wood [00:16:55]:
Right. So let let me summarize a little bit because I have some thoughts here too, but I wanna make sure that we've kinda covered what you've already covered. So you've basically pointed out that, you can use the Dom APIs to simplify the path that your code takes and get more reliable results. You've pointed out that depending on somebody else's code can wind up causing you issues if they change things in a way that you don't expect, including having the library go away. One thing that I've picked up on some of this. Right? So I've I've learned not not, I guess, at the level where I was getting paid to do it. You know, I learned Angular. I've learned Vue.

Charles Max Wood [00:17:38]:
I've learned, React mostly because I was doing the podcast, and I wanted to sound like I knew what I was talking about because I at least kinda knew what I was talking about. And in those cases that I as I was picking things up and also with with my history with, like, Ruby on Rails or some of the other, you know, systems or frameworks that I've used, A lot of times when you're learning them, they give you a way of doing things, and so you'd kinda do things the React way for a lack of a better way of of doing it. Right? And as you build those apps, it's often appropriate for you just to use those and not think too deeply about, hey. Is there a simpler way to do this or is there a better way to do this? And so, that there's a lot of value in kind of doing the the accepted, happy pathway that the framework gives you. Right?

Steve Edwards [00:18:29]:
Mhmm.

Charles Max Wood [00:18:29]:
And I I think this is where, Dan is saying, you know, for a lot of developers, if they never learn deeply learn a lot of these DOM APIs, they're gonna be fine. They're gonna be able to write code that works. It's you're gonna be able to deliver working features. Is this just I I mean, is is is that wrong, or is there a certain point you get to where all of a sudden it's becomes really, really valuable to know these APIs? Or is there some other x factor that you know about that I'm not thinking of that that makes the difference. Right? That it's like it's like, okay. You're totally good using the React way until you have to do

Corey Brown [00:19:14]:
this Yeah.

Charles Max Wood [00:19:15]:
Or until this changes or until your code's a certain size or whatever.

Corey Brown [00:19:19]:
I I think I think people in situation life is is complicated, so there's no there's no one answer here. But, obviously, you can you can be productive in in straight React or straight View or straight Angular, whatever it is. You can get some stuff done, particularly if you're kind of a a junior engineer. But Good. Get paid. Right? Right. Exactly. Right? There's some there's an element of practicality there.

Charles Max Wood [00:19:50]:
Mhmm.

Corey Brown [00:19:50]:
Immediacy. Immediate practicality. But I'm reminded of my, actually, of my calculus classes in, in college. The Calc 1, we spent an entire semester, going over how how to do by hand, like, derivatives and and summations and all this stuff. Mhmm. And it was Summatations and limits. Hard. Yeah.

Corey Brown [00:20:12]:
Yeah. Yeah. It was so hard.

Charles Max Wood [00:20:13]:
I'll get my mom on the show. She teaches this at the high school.

Steve Edwards [00:20:16]:
This is giving me nightmares.

Corey Brown [00:20:19]:
I've been I had I had the same teacher for 1st, calc 1, calc 2, and the the 2nd semester went into calc 2. On day 1, he said, okay. So last semester, we learned all this stuff. Now I'm gonna show you how to do that real fast. And in 5 minutes, he taught the entirety of calc one, with some simple, like, do this you know, move this down here and do this, multiply there, and you're done. And that's it. And everyone grown, and he he just got a kick out of doing that every year. You could tell.

Corey Brown [00:20:49]:
Because he taught the entirety of calc 1 in 5 minutes in calc 2. But then he pointed out, like, why did I why did we go through all this stuff? It's important to understand why and how we got to this point. Because I can just show it to you, do this and it works, but you don't know why it works. But now you do. You had Calc 1. You know why it works. You have you can now, have inferences and understandings that you wouldn't have had otherwise. And this is exactly the same thing.

Corey Brown [00:21:14]:
When you when you jump into a framework and you learn the frameworkisms, the the reactisms, the angularisms, whatever it is, you can be productive. You know the incantations to make to to to produce something, but that's what they are. They're incantations. If you know the platform, if you begin to understand how was this thing built, what is it doing under the hood, it ceases to become incantations and it starts to become recipes. And you say, oh, okay. Cool. That's a cool bread recipe. I'm gonna do this thing and create, like, an orange loaf or a sourdough or whatever it is.

Corey Brown [00:21:48]:
Whereas if you're just, head down this, you don't exactly know how bread is produced or how your application is how it functions under the hood. It's it's you're less useful than you could be.

Steve Edwards [00:22:01]:
Well, you know yeah. I mean, this is like music to my ears, and I could probably talk for a half hour with the examples of of how all this is true going from my days in, literally, in banking, in tech support, in anything. The more you know the platform, you know, the more function the more the better you can do just because you know how things go underneath, and you're not relying on layers and layers on top of things. But I think, you know and not even when it's when you're building stuff, the bigger issue that you're gonna come across is when you're trying to troubleshoot. So if something breaks and you have no clue how it's functioning underneath, then how are you gonna fix the problem?

Corey Brown [00:22:41]:
Yep.

Steve Edwards [00:22:41]:
You know, where are you gonna look at? What are you gonna look at? I can, you know, vouch for anytime I've been whether it's tech support, whether it's, you know, being as a developer, and I've written stuff and I've had to go back and fix it. You know? Right? I'm today, I'm you know, it's Veterans Day, and I'm gonna be fixing some bugs in a in a application that I have. But I know where to go. I know pretty sure I know where to fix it because I know how it functions underneath the hood. And, you know, the example I've given before, not to belabor this one, is is language. You know, I'm a Spanish speaker. And to me, learning language came easy, but the way I learned it was learning verbs, learning nouns, learning how verbs are conjugated, learning the rules of the language instead of the people that amaze me, you know, that can learn conversational. They can come in and just take some, you know, quote, unquote, conversational classes where they learn phrases and sort of piece them together, but they really don't know the underlying rules and concepts of how those sentences are put together.

Steve Edwards [00:23:43]:
So that's always been my tendency. But, I mean, just to validate what you're saying, yeah, anytime you know the underlying details and concepts of how something is put together, you're gonna be much better not only at developing, but also figuring out bugs because bugs are gonna happen. If you're not writing if you're writing bug free code, let me know, and I wanna know how you do it because it doesn't happen very often.

Charles Max Wood [00:24:05]:
So I wanna jump in here because I feel like there's still a little bit of nuance or play within this argument. Right? The and and I'm gonna use, fixing cars as an example. Right? Just because it's kind of a concrete thing that people understand. Right? And so, when I married my wife, I knew how to change the oil on my car. That was about it. Right? And and her dad knows how to change I mean, pick a thing on the car. Right? He he he can make it fixed. And, you know, and so the first time our car broke down, he came up and we pulled it out and put it back in.

Charles Max Wood [00:24:48]:
You know, we we fixed it. We replaced the part. And, you know, I was proficient at making bolts go in and out. Right? And so, you know, I could I could open the clamps or whatever, you know, on hoses or, you know so I I could do all of those things. And so for a lot of the simple things, I really I really was okay fixing my own car, but the the issue came in when I had to diagnose the actual problem. And in fact, I'm still kind of at the point where about half the time if I run into a problem with my car, I call him up and say, this is what it's what it's doing. It's okay. And he goes, oh, that sounds like the whatever.

Charles Max Wood [00:25:27]:
Right? And so then I can go figure out how to change it out.

AJ O'Neil [00:25:32]:
But

Charles Max Wood [00:25:32]:
a lot of it just comes from a deep understanding of how the car operates and how the engine works. But a lot of it also comes from experience. Right? And so

Corey Brown [00:25:41]:
Yeah. I'm

Charles Max Wood [00:25:41]:
hearing Steve talk about, you know, if if if I'm in this code base and I need to troubleshoot it, I can figure it out because, you know, I I know how everything kinda goes together. And I'm I'm just I guess I guess the the feeling is is, you know, when I see this I mostly work in rails, and so I see a lot of people do the same kinds of things. Right? And then you generally mostly use the rails APIs until you get you get to the point where they don't do a thing well, and then you kinda reach into the tool bag of, okay, now I'm into the underlying stuff. But, I mean, you can go a long ways with just what the framework gives you. And so I guess I guess what I'm saying is is that and it sounds like you, Corey and Steve and AJ, we're all kind of of the mindset where it's like, look. I wanna master this domain. Right? I wanna be able if there's a thing to be done, I wanna be able to do it. Right? If I run into a problem to be solved with JavaScript, even if I'm working in React or Vue or Vanilla or, you know, we we did an episode where I talked about the framework I use, which is Stimulus and Hotwire.

Charles Max Wood [00:26:54]:
You know, I I wanna be able to deliver, whatever it is that's needed. Right? And and Simulose and Hotwire are so lightweight that you have to use Dom APIs. You don't really have a whole lot of choice. But the point is is that I think there are a lot of people that get by just on React. Right? And and then there are the handful of Dom APIs that React kinda pushes you. Hey. We're not gonna invent a better way to do this because this is kind of the way to do it. And so, anyway, the point I'm getting to is I think there are a couple of reasons why you may or may not really deeply care about deeply learning some of these APIs.

Charles Max Wood [00:27:38]:
And one of them is is a lot of people really are just comfortable showing up and just doing, you know, doing what it says on the React 10. And, you know, they they know maybe they know React super duper deeply. And so they never really reach into that because they can either find somebody else to solve the problem for them that way or they're not really driven to understand how all this stuff works under the hood. And on the other hand, you know, maybe you just get people and I worked with people this way too where, I mean, whatever the bare minimum was, just get the job done was what they learned.

Steve Edwards [00:28:17]:
Yeah.

Charles Max Wood [00:28:17]:
And and so I guess what I'm gonna ask next is is that okay? I mean, are you handicapping yourself? Like, I I'm not talking, like, morally. Right? But are are you really deeply handicapping yourself here? Right? Is this gonna hurt you in the long run, or can you just get by doing that for the rest of your career?

Corey Brown [00:28:40]:
Yeah. Actually, that's something I've I have thought a little bit about. So they're all I think software development is is a little bit unique in in the world of of, like, work. Most people that I run into genuinely love what they're doing.

Charles Max Wood [00:29:00]:
Mhmm.

Corey Brown [00:29:00]:
Right? This is not normal, I think, for most of the world. A job's a job for them. They go there. They are mildly depressed while they're doing their thing. They get it done, and they just are so glad to clock out and go home.

Charles Max Wood [00:29:13]:
They could never live that way. Ever. Yeah.

Corey Brown [00:29:15]:
Me neither. That's not me. But but some people most people

AJ O'Neil [00:29:18]:
like

Corey Brown [00:29:18]:
me live that way. They find they derive their life, their satisfaction, their joy, outside of work. And I do too to some extent, but I do derive joy at work as well and meaning and satisfaction. But there are still many people in software development, especially the ones that were kinda sold, hey. Go go write software. You make a whole bunch of money, and they wanna go make a whole bunch of money. And now writing software, they don't really love that they could have done other things, make a whole bunch of money. But, it's just it's just a job for them.

Corey Brown [00:29:52]:
And I think for those people, that's fine. That's fine. Just go do your job. Clock out. Go home, and don't worry about it. Like, no problem. But understand that that that just means you're going to be perpetually a mid level engineer. That's just you will.

Corey Brown [00:30:12]:
Whether you get paid more than that, I don't know. But you you'll never really be better than mid level, and that is actually fine because Okay.

Charles Max Wood [00:30:18]:
Hang on. Hang on. Hang on. So I just wanna clarify. You're saying that you really can't be a high level, I don't know what the term is, senior architect level engineer without understanding the underlying Dom APIs.

Corey Brown [00:30:33]:
Yeah. I don't think you can. Because because I don't think you can you you mentioned before someone who really knows React. Can they, and just lives in that. I don't think you can really know React without knowing how React without knowing the platform and how React works with the platform.

AJ O'Neil [00:30:48]:
Mhmm. Yeah. There's there's no some there's no such thing as a React expert that doesn't know about Pad Start. You you can't, like, you can't be an expert in React and not know basic core APIs of JavaScript or basic core APIs of the DOM. I I I I mean, I I guess maybe maybe you could be an an expert in React and not know insert adjacent HTML. But I actually find it hard to believe that either because to be an expert in in React, you must have come against cases where React doesn't solve the problem well or performantly, and then you would have had to have learned insert adjacent HTML.

Charles Max Wood [00:31:30]:
I agree with you, but I I think this is a case that people make. And I think a lot of people think they're getting by on it. So Well,

AJ O'Neil [00:31:38]:
the I wanna challenge the very premise, which is that that somehow your, you know, your laziness or your, you know, you're just getting by, you know, not doing deep dives, I don't there's so many things that I I It so so to your to your talk, Corey, when you you were talking about the difference between something that's, intuitive and unintuitive. I I actually disagree with you. I have a lot of points to that talk. But because I I watched it once it got posted. But I I agree with you probably more than I disagree with you. And there's a certain amount to, like, okay, which is more intuitive? Left pad or pad start? That in that particular case, I'm gonna argue that left pad is more intuitive because pad start is, directional based on locale. So if you're doing, Japanese, then it's gonna pad the top. If you're doing, reverse language and RTL language, then it's gonna pad the right.

AJ O'Neil [00:32:45]:
But in general yeah. Pad start and pad pad left and pad start are and and for someone that is in one of those languages that's top to bottom or or, right to left, then then pad start would probably be more intuitive. But in general in general, at the face of it without going into the nuance, is pad start or left pad more intuitive? Neither one is more intuitive. They're they're they're equally intuitive in terms of, I want to, in my language, add some padding that's gonna be what I think the start is. And you're gonna pick left pad or right pad based on, you know, what your language is or pad start or pad end based on whether you wanna be at the beginning or there or whatever. But but there's that like, it's not that one's more intuitive. It's not that one's more difficult to learn. You know, it it's it's that which one did you encounter first? And I think a lot of this stuff, it's not a matter of, well, isn't the framework just fine? Because it's not even an issue of the framework.

AJ O'Neil [00:33:50]:
Because if you're using the framework, well, you should still be using pad start. Like, there's nothing about React that has anything to do with pad start. There is a reason that if you're using React, you'd never encounter insert adjacent HTML. But there's not a reason in React that you would never encounter pad start. Right? So You're flirting with my next

Charles Max Wood [00:34:10]:
question, but keep going.

AJ O'Neil [00:34:12]:
And so a lot of this stuff is just it's not a matter of, well, do you have to be more of an expert? Now an expert is going to go back to first principles and learn or maybe not first principles, but, like, an expert is going to get down to, okay, what is the thing when all the fluff is removed? I think that's that's a quality of an expert. But even if you're not an expert, it's not like, oh, man. I can't believe I had to go on MDN. Can you believe it? Like, instead of hitting up GPT or Stack Overflow, I typed MDN in my search query. Oh, oh, man. I gotta I need some Advil. You know, like, that's that's not what's happening. It's just a matter of what your muscle memory is.

AJ O'Neil [00:34:52]:
Are you hitting chat chat gpt first, or are you hitting MDN first? Now granted, a lot of the articles on MDN could stand to be improved because they kind of went backwards a few years ago, and now they've gone forwards again. So I think MDN is is back on par with w three schools. Because they were better, and then they got worse. And now they're okay again. But you know?

Charles Max Wood [00:35:16]:
So what do you think, Corey, Steve?

Corey Brown [00:35:23]:
I'm trying to suss out the the the question there. So, yeah, I I agree with it sounds like you're making the argument that, kinda like what I made before that React or these other, like, UI frameworks are designed to do a certain thing. It it's like if you remember when React first came out, they were they were marketing themselves as the the v and then v c. Right? They don't do that anymore, but at the time, they were that's what they were they were kind of marketing themselves as. And by implication, that means they don't do the m and the c. That's your job to understand. We just do the v.

Steve Edwards [00:36:03]:
MVC being

Corey Brown [00:36:05]:
mod view controller. Right?

Steve Edwards [00:36:07]:
Just to put that up there.

Charles Max Wood [00:36:09]:
Yeah. So so they did the interface. They didn't do the data, and they didn't interface the data to the v that was on the top layer.

Steve Edwards [00:36:18]:
Right. They say view library. I think that's the way I've always heard it described.

Corey Brown [00:36:21]:
Yeah. I don't I don't think that's an accurate it probably wasn't an accurate description at the time either, but certainly not now. But regardless, they were making a concession that we don't do everything, but we do do this thing. And all frameworks are kind of that way. And if you live in as long as the problem to be solved is something the framework aims to solve, you can live in that framework, and you don't have to to dive down. But to create an application, you will have to do more than the what the framework solves. Charles, you mentioned you do a hotwire stimulus, and it's very lightweight, and therefore, you have to learn DOM APIs. It doesn't it's not aiming to solve all the problems.

Corey Brown [00:36:59]:
React doesn't aim to solve all the problems. It

Charles Max Wood [00:37:02]:
it claims essentially to be the c in MVC, and it leaves the v up to you writing HTML and the m up to your APIs, and you can do those however you want.

Corey Brown [00:37:13]:
Yeah. So, so in that sense, AJ, I think, you know, you're right. You cannot become an expert at your job even if your job is to write React unless you understand more than just react, more than just the framework that you're operating in because your job I I don't know of a job whose, whose definition would keep them only within the bounds of a framework. That just unless maybe you're working in a a very batteries included framework like Rails or something.

Charles Max Wood [00:37:45]:
Right. Well, even in the battery you you said Rails, but even in the batteries included frameworks like Rails, you still frequently have to deviate from what the framework gives you either directly or because it just doesn't have a piece of the framework that does the thing you need.

AJ O'Neil [00:38:02]:
Yeah. Well, addition is not part of Rails. Right?

Corey Brown [00:38:05]:
Right.

AJ O'Neil [00:38:05]:
Stream concatenation actually, I think I think I think Rails did hijack stream concatenation for a long time.

Charles Max Wood [00:38:11]:
They did.

Corey Brown [00:38:11]:
They did

Charles Max Wood [00:38:12]:
the whole bunch with active support. But yeah.

AJ O'Neil [00:38:14]:
But in in general, in in a sane language, you know, the the language the framework isn't taking over addition, concatenation, you know, basic string and number support. Yeah.

Charles Max Wood [00:38:28]:
Well, active support was written for rails, but it's mostly orthogonal. I mean, it's required by rails, but you can use it in other projects without having Rails and and get all the niceties it gives you.

AJ O'Neil [00:38:40]:
And now that Rails or Ruby has UTFA by default, active support doesn't hijack those things. Right?

Charles Max Wood [00:38:48]:
Not as much. It it it has it it touches everything. We we could we could talk about whether that's a good idea or not, but that that's not the show. I was curious, Steve, if you had anything to add before I kinda push us to the next question I have on this then.

Steve Edwards [00:39:07]:
Not really. I mean, I'm still a bit confused about the what the question that AJ said anyway, which is par for the course.

AJ O'Neil [00:39:15]:
But I didn't I didn't ask a question. No. I did. I made

Charles Max Wood [00:39:18]:
a comment. Question. And it was it was effectively, can, you know, can you be a high level senior developer without knowing this stuff?

Steve Edwards [00:39:26]:
And are you having your career

Charles Max Wood [00:39:27]:
by not knowing it?

Steve Edwards [00:39:28]:
I mean, I pretty much said that up front. I mean Yeah. The I think the general percentage that I can remember seeing, like, for instance, going back to the Drupal world was 80 20, where the framework, CMS, whatever, out of the box is gonna do 80% of what you need, and the last 20% is what you need, you know, you're gonna need to do yourself with a little customization with some writing code. In this case, I think it would be you could translate it to say React, Vue, Angular, Rails is gonna do 80% of what you need by itself. Then in a lot of cases, maybe it's a 100% depending on the simplicity or the complexity of what you're doing. But that last 20%, you're gonna need to know how things work under the hood in order to be able to get to what you really need to do.

Corey Brown [00:40:15]:
Yeah. Just as a quick example of that, if you're writing in React and you're you're writing out HTML or or GSX, one thing it doesn't, cover at all is ARIA. Like, you need to understand ARIA. You just that that's absolutely necessary. That's not React.

Steve Edwards [00:40:34]:
Nope. Yeah. That's a whole can of worms where you get to, what's the term?

Charles Max Wood [00:40:40]:
You can't believe Accessibility.

Steve Edwards [00:40:41]:
Thank you. Accessibility. Right?

Charles Max Wood [00:40:43]:
A o m y.

Corey Brown [00:40:45]:
Yeah. Yeah. And and also just to be clear, like, depending on what your goals are in life, there's nothing necessarily wrong with never becoming a senior, like, engineer. Like, go do your thing, man. Do what makes you happy. And if if being a mid level engineer for, you know, for your career gets you the money you need to do what makes you happy, by all means, go, you know, do that. That's fine. Yeah.

Corey Brown [00:41:07]:
But if if you're going to your manager and, like, I think I should be a a senior engineer, I wanna get paid like a senior engineer, well, you're gonna have to learn some stuff outside of that framework.

Charles Max Wood [00:41:17]:
Yeah. I the the example I've used with a bunch of people is some people wanna learn to code because they love it and they just wanna dive in every piece of it, and some people wanna learn to code so they can make enough to go live on the beach and go surf in the afternoon. Yeah. And there's nothing wrong with either one. Just know who you are. Yeah. Okay. So, it sounds like and I think AJ most directly touched on this.

Charles Max Wood [00:41:43]:
But let's say that somebody is you know, they accept the argument. Okay. I do have these ambitions for my career. I do want to be able to expertly solve these problems, so I need to start learning these Dom APIs. And I'm also going to deliver the premise, and you can argue against it if you want, that a lot of times people don't learn these APIs because the framework does give you a way to do it. And so you just never become aware that the API even exists to do the thing. So how do people and and you can tell me if I'm wrong about that as part of your answer. But how do people then go, okay.

Charles Max Wood [00:42:21]:
I'm a React guy or I'm a Vue guy or I'm an Angular guy, and I want to deliver elegant, well written, well engineered solutions, and so I need to learn these Dom APIs. Which ones do they learn first and how do they learn those things so that they can start to become this high level engineer?

Corey Brown [00:42:40]:
Oh, that's a good that's a good question.

Charles Max Wood [00:42:43]:
And is my premise wrong that people aren't learning it because the framework just doesn't form?

AJ O'Neil [00:42:49]:
I

Corey Brown [00:42:49]:
don't think it's that the framework doesn't form. Honestly, I think it's I'm most familiar with React, and so I'll speak for React here.

Charles Max Wood [00:42:56]:
That's fair. I think most people listening probably do React. So

Corey Brown [00:43:00]:
The the ecosystem has solutions for it. So React doesn't for instance, I I talked before about using popover API, and one of the reasons we started doing that is because we have a library in our application that handles pop ups. And it is flaky as all get out when it comes to test. It does not perform well. There's all kinds of problems with it, and so that's why we're looking for more native solutions. But the reason it exists at all is because someone came in. I'm a React engineer. I need this thing.

Corey Brown [00:43:29]:
Someone created a library to do this thing inside of the React React ecosystem.

Steve Edwards [00:43:34]:
All I

Corey Brown [00:43:34]:
need to learn is this simple little API for this library rather than all this complex API for the DOM. And I think this is the conceptually what people get wrong. They think that the lower level stuff is complicated. This library has a much nicer API. Many times that's true. Many times that's not true, or or not as true as people seem to want to think it is. And so so you end up with this bloated situation where I'm gonna I'm gonna get a library that has a nicer API rather than learning the the platform API. I think that's what tends to happen

AJ O'Neil [00:44:11]:
Mhmm.

Corey Brown [00:44:12]:
Fairly often.

Charles Max Wood [00:44:14]:
So so what what should people be picking up first, and how do they make sure they're learning the right things that are gonna move them ahead?

Corey Brown [00:44:23]:
Yeah. I wish there were a good, like, simple answer to that. It's kinda reminded when people ask, like, I'm just starting out as an engineer. What what book should I be reading? What sources should I be reading? I'm like, oh, man. I mean, there isn't a book that I I used to have. I used to point people to, like, you know, JavaScript, the good parts. That's way outdated. I would not recommend reading that now.

Corey Brown [00:44:44]:
Right. There there isn't a compendium of you wanna get great, here are the resources, unfortunately. I what I tend to do now is point people towards resources like email newsletters or, podcasts or things like that where people are talking about stuff. And I send them to honestly, AJ, you mentioned MDN. I send them to MDN all the time. That that is the unofficial or maybe it's now the official platform documentation. Go that I I tell them, like, look. You always need to be looking for stuff.

Corey Brown [00:45:23]:
I will sometimes go to, like, MDN and look at 8 the 8 the list of HTML tags. Just like, what have I forgotten about? And go through and just read them and say, oh, I told I didn't know that existed. I'm gonna try to incorporate that in there. And this, oh, this reminds me. So I had thought of this earlier when you were talking about something else, but, one thing that is incredibly useful for understanding how things work or maybe what you should be learning. I remember years ago, Paul Irish. Do you guys know Mhmm.

Charles Max Wood [00:45:54]:
We've had him on the show, I think. Yeah.

Corey Brown [00:45:55]:
Haven't we? So Paul

Charles Max Wood [00:45:57]:
Maybe not. Anyway

Corey Brown [00:45:59]:
In any case, here's your ago, he wrote, or he made a couple of videos on, first one was 10 things I learned from the jQuery source code. And what he did, he just did this little video where he opened up the source code for jQuery and just walked through it. And I was like, oh, this is cool. Let me tell you about what's going on here and what I learned about this. And it was it blew my mind. I was like, holy crap. This is amazing. I didn't kind of even it didn't occur to me to do that, and I started kinda doing that more.

Corey Brown [00:46:26]:
I'm gonna look at the source code. How are they doing this? How is this library that I like doing this thing that seems magical to me? And I've, you know, figured it out. And then take it a step farther and you know what? I'm gonna recreate. I recreated jQuery. It was crap. It was not performant. But the the act of doing it, like, opened my mind widely to all kinds of new techniques and interesting things. And, I think that is a good exercise.

Corey Brown [00:46:52]:
I think I think doing that building into your career I do this I also tell engineers, that I mentor to do this every day. I spend the first hour of your day on company time learning. Go read it. Read some articles. Go, go build some throwaway thing, but spend that first hour learning something new every day. You the act of seeking out, I think, is gonna expose you to, to these kinds of things. But I I don't have, like I said, a compendium of, like, here are the things you need to know necessarily.

Steve Edwards [00:47:27]:
So we did an episode about 5 years ago with a guy named Carl Mungazi. Mhmm. JavaScript Jabber number 408, all about reading source code.

Charles Max Wood [00:47:38]:
He was also a host on React around it for a while.

Steve Edwards [00:47:42]:
Right. So the whole I I can and I can still remember doing this episode, where we talked to him about reading source code and how to do it and the benefits of it and so on. And, so, anyway, episode 408 if you wanna listen to that.

Corey Brown [00:47:56]:
Yes. I I think it's more about the practices you build for yourself as an engineer less than the sources you turn to. Sources are good, but I think the practices help to help give you those sources, I guess, is the way I might put it, help you discover those sources. Because I think they they change over time a lot.

AJ O'Neil [00:48:18]:
I think one of the best things that front end people can do to improve their their craft is to listen to people that just do programming and, more importantly, engineering and architecture outside of the front end space? Because I think the front end space is a cesspool, and the thought leaders in the front end space are oftentimes just people that have, I don't know, really cool socks and I, like, I I don't

Charles Max Wood [00:48:56]:
I don't know what kind of socks but I would piss people off.

Steve Edwards [00:48:59]:
Oh. I like

Charles Max Wood [00:49:00]:
the socks.

AJ O'Neil [00:49:01]:
Know how they become these thought leaders, but so many people in the front end space, they're not people let me rephrase it. You'll get a lot more out of listening to, people like Rob Pike and Jonathan Blow, Casey Moratore. You know, like, listen to people that do game dev. Listen to people that do server side dev. Listen to people that do Go or Rust or Zig or, you know because most most of you know, anybody that asks me how do I learn to program, what I'm gonna say is, here's a bunch of great resources for Go. Because Go is a language you can learn in a weekend. You don't have to have previous programming programming experience to get into Go quickly. You can write actual real programs in Go that, you know, you can write terminal games, like tic tac toe type of stuff or what you know? It's a it's a really great language.

AJ O'Neil [00:50:00]:
And once you learn Go in particular, then you go back to something like JavaScript and you're like, woah. Woah. Woah. Woah. I don't need this 95% of the language. This 5% does everything I need, and it's faster and smaller and easier to learn.

Corey Brown [00:50:18]:
They used to say the same thing about JavaScript that you just said about about go. It's interesting. I I the thing I've often said about JavaScript is, JavaScript has within it this very beautiful and elegant language. If you if you stay within those bounds, it's it's a wonderful language, and there's a whole lot

AJ O'Neil [00:50:38]:
of 100%.

Corey Brown [00:50:41]:
I I'll take some issue with with, I guess, the way that you you positioned the, the top leaders in the front end space. I I do think there is a lot of value that comes from many of them, I think, but what I would say what I would say, Yeah. There there's a couple of points I would add on top of it, and that is, that it it took me I had an experience earlier in my career where I realized that even the most experienced, and and knowledgeable people in the industry are just people. Like, they're just and they're almost kind of sir. They're making it up as they go in many of the same ways that we are. They just have been doing it longer. And we tend to, idolize is the wrong word, defer to them maybe too much, at the expense of our own rational thinking. And I think we could do more of rational thinking, rational thought there.

Corey Brown [00:51:42]:
But with that said, I will very much concur with you, AJ, on, on expanding your horizons beyond the domain space. I mentioned before the the seminal paper, the out of the tar pit. And I also mentioned before that there isn't a compendium of of resources. However, I have been thinking for a long time about putting together a list of these, like, must reads going back to the beginning of of computer programming that are, like, quint like, things you really, really should read because it's going to shape in a positive way the way you think about programming in a broad sense. So, you know, you know, out of the tar pit, you have the, the horse's got cards, the beekeeper analogy. I always forget the name of it. You have many white papers from the seventies and from the sixties that are, like, mind blowing that they have they solve they solved problems that we have today, and we've completely forgot about it. I would, you know, point people to to, Brett Victor and a number of his, his presentations that that illustrate some of that.

Corey Brown [00:52:48]:
There are some really kind of everyone should really be reading this regardless of what you're programming, kind of stuff. And maybe one day I'll put that together, but I don't have that with me. So

Charles Max Wood [00:52:58]:
So is the beekeeper with Orson Scott Card House software companies die?

Corey Brown [00:53:03]:
Yeah. That's the one. That's the one. And it's really short.

Charles Max Wood [00:53:06]:
I I put both of these in the comments on Facebook and YouTube. So, yeah, if you're if you're looking for those, well, hopefully, we get them in the show notes too, but they don't always

Corey Brown [00:53:17]:
So there's a yeah. I wish I wish I had a longer list of, a hand, but, those are those are it is really amazing to go back to the the fifties and the sixties and the seventies and and read some of the papers that people wrote about software programming back then, and the elegance with which they solve the problems that the current problems that we have today, and you start to think, why is everything so complicated now? It doesn't need to be that way. It's kinda wild.

Charles Max Wood [00:53:48]:
Yep. So I think AJ had a question, and then we're kind of getting toward our time. So

AJ O'Neil [00:53:56]:
Yeah. So this this was something that you'd actually brought up either in the tweet or in some of the pre pre chat, email or something, but request animation frame. So that it's totally switching gears to a technical topic. Request animation frame. Do I really need to know about it? Mhmm. Is it really that important? How should I employ it or not? And is and is React using it behind the scenes?

Corey Brown [00:54:24]:
That really, really depends. I I I'll tell you what. I I know about request animation frame. I don't think I've ever actively used request animation frame. No. I may have once or twice, but it it it depends. It very much depends on the kind of program you're doing. Are you are you doing a lot of animation? You probably do need to know that.

Corey Brown [00:54:46]:
There's a lot there's so much nuance in the kinds of things, And you can go so deep into one area and become an expert in that area such that you almost never touch this other stuff that maybe most other people do. This is what a lot of, like

AJ O'Neil [00:55:01]:
So I I was thinking I was so I've I've been using it by default lately. Like, anytime that I'm gonna be doing anything with the DOM, I'm doing it inside of request animation frame. I might even do the calculation outside, but then I do the actual, okay, replace children, insert adjacent HTML, text content equals, like, any of that stuff. I just shove all of that into a request animation frame. And I was under the impression, which might be wrong, that that means that when it's inside of a request animation frame, that it actually is gonna get queued and batched by the browser and done all at once, rather than it cutting the browser's redraw, like because, essentially, every time you do a dot net text content or dot inner HTML well, I guess not dot text content. Well, maybe, potentially. But you're you are causing the browser to do a redraw. So if you do one on line 5, and you do another one on line 6, and another one on line 7, then you're telling the browser to redraw 3 times.

AJ O'Neil [00:56:04]:
And I thought that the deal was if you use request animation frame, it's saying, hey. Anything that I'm gonna do that's gonna redraw, wait until this completes before you do any redraws. And that maybe maybe the browser's already optimizing that way when I don't use it.

Corey Brown [00:56:19]:
Right? That's that's not quite right, actually.

AJ O'Neil [00:56:22]:
Good.

Corey Brown [00:56:23]:
So if you do it outside yeah. No. If you do it outside the request request animation frame so we used to talk a lot about, screen thrashing, you know, in the front

AJ O'Neil [00:56:33]:
of it.

Corey Brown [00:56:33]:
And that happens when you alternatively read and write to the DOM. So if you if you read and then write and then read and then write and then read, then the DOM has to paint so you can read the new update, and it paints so you can read the new update. However, for a very long time, if all you're doing is reading or if you have a batch of reads and a batch of writes, it will do those, like, in in batches. You it'll do the reads. And then if you have sequentially several writes, it will do the writes in one draw. So it'll it'll do it all, in one frame, essentially. What request animation frame does for you is, if you do it outside the request animation frame, it'll it'll do it kind of immediately. But if you do it in the request animation frame, it waits until the browser is about to do a paint anyway, and then we'll execute on that.

Corey Brown [00:57:25]:
And that can be really useful. However, if the what you're doing within that request animation frame takes longer than 16 milliseconds to accomplish, you end up getting screen thrashing again. It it pauses the like, it it it becomes jarring and junky. And so you have to pay close attention to the, amount of time it takes to do those things. So you have to be doing all the, you know, the performance testing to make sure you're you're staying inside of that 16 milliseconds.

AJ O'Neil [00:57:53]:
Okay. Yeah. Alright. Yeah. Because that's that's something that I've just started using because I have heard about its benefits. I'm not I they don't apply to the stuff I'm doing. I'm I'm but I don't know. Here's the thing.

AJ O'Neil [00:58:04]:
Here this is the reason that my brain went to this. Okay? Angular. You could have a 100 items in a drop down list and change something. And Angular would take noticeable time to redraw those 100 items. I'm like, that is insane. There's no way that's real. Now I think that the people that came up with those demos, I think they must have been doing something that was horrendously wrong. But I I I I think they were doing something like writing each of the 100 items into the drop down list, or I I don't know.

AJ O'Neil [00:58:37]:
I don't exactly know how it happened. I just know that Angular used to get ridiculously slow. And, again, I don't think it was Angular's fault per se, but people using non Angular patterns in Angular or whatever. But but it was it was one of the criticisms that drove React's success was it was easy to do really dumb things in Angular where simple modifications to the page would freeze the browser.

Corey Brown [00:59:05]:
Yeah. Yeah. That you you can you can find the, the weaknesses in just about any of these frameworks. So, yeah, I remember we're doing Angular, and the problem was always the, the dirty checking. If you're not managing your state well and you you're forcing Angular to do the dirty checking all the time, then it's gonna have super bad performance, and I ran into exactly these problems. At the same time and, you know, React with their virtual DAW means that they can calculate off of the the the paint thread what needs to be painted, and then in one fell swoop, you know, paint as they do the reconciliation. That's kind of their their thing. But you see now you have things like use effects and all these hooks where it becomes very easy to use them poorly, and you can get the same kind of really bad perform with really jank experience taking a long time to accomplish what should be pretty simple work because you're just using these use effects in really poor ways.

Corey Brown [01:00:05]:
And I'm sure the same thing can be said of of Vue. I'm much less familiar with that, but I'm sure it has its own, situations like that if we're you have these foot guns and all these frameworks seem to have foot guns somewhere in there that

AJ O'Neil [01:00:18]:
Except the HTMX.

Corey Brown [01:00:21]:
Well, I can imagine a few scenarios in which HTMX would fall apart, but HTMX is is a pretty interesting, environment.

Charles Max Wood [01:00:29]:
Yeah. Yeah. But, again, the surface area on HTMX is considerably smaller than, say, a React or an Angular. So that that's one thing to consider. The other thing is is that so I I'm not as involved in the Angular community as I used to be, but they've rewritten, like you've mentioned the dirty checking. They've rewritten that, like, I don't even know how many times. Right? And made major forward progress on that. And so, I mean, that's one nice thing about a lot of the frameworks is they see the warts a lot of times as quickly as we do.

Charles Max Wood [01:01:05]:
It just takes them time to figure out how to make it work for people using the framework. But then at the end of the day, a lot of times you get that, update or upgrade for free or for, you know, a tiny bit of, change when you update your framework. And so, I mean, there there are some really nice reasons to use a lot of these frameworks.

Corey Brown [01:01:29]:
And you can see that happening right now with React as well with the React compiler that is going to

Charles Max Wood [01:01:35]:
Yeah.

Corey Brown [01:01:35]:
That's gonna change a lot. Complexity. Yeah.

Charles Max Wood [01:01:38]:
Yeah. It's gonna make things a lot nicer for a lot of people. We're kind of toward the end of our time. I think I'm gonna push us to picks. The one follow-up I have, and so maybe we'll have you back on, Corey, is I would love to get into now that we've kinda talked about, you know, Dom APIs. Do you need to know them? You know, what are some of the trade offs? You know, where's that gonna get you and things like that. I'd actually love to have you back on and actually talk about the Dom APIs you think people should know. Right? And so you can give us a list of, you know, a dozen or so.

Charles Max Wood [01:02:15]:
AJ can throw in the ones that he thinks. I'm I'm assuming that most of the ones that most people come up with on that list, you're if you give us a list of 12, probably 8 of them out of anybody's list are probably gonna all be the same. So then we can get in and we can say, okay. These ones are the slam dunks. These are the ones that I surprised myself by reaching for often that, you know, most people wouldn't think of, but they just pay off. And, yeah, then we can give people a direction. If you're working in a React or Vue or an Angular, start here. Right?

Corey Brown [01:02:49]:
Yeah. That'd be fun.

Charles Max Wood [01:02:52]:
Alright. Let's do it. We'll we'll talk to you after the show on how to line that up. But, yeah, let's move into picks. Steve, do you wanna start us with picks?

Steve Edwards [01:03:03]:
Oh, we're going to the high point right off the bat. Alright.

Charles Max Wood [01:03:06]:
That's right. I couldn't wait any longer.

Steve Edwards [01:03:08]:
Right. So you didn't have any other external picks that I can think of right now, so I'll just go to the dad jokes of the week. Actually, I'll do I'll do 4 today instead of 3. So here is proof that the annual Miss Universe pageant is fixed. Every winner has come from Earth.

Charles Max Wood [01:03:35]:
That's steep.

Corey Brown [01:03:36]:
Yeah.

Steve Edwards [01:03:38]:
My wife told me the other day that I should sign up for my company's 401 k. I said, not a chance. I can't even run a mile. That's right at Chuck's alley with his running and half marathon stuff he's doing.

Charles Max Wood [01:03:51]:
Iron Man. Anyway

Steve Edwards [01:03:54]:
Now from the moment when I first got married, from the moment I saw my wife's abacus tattoo, I knew I could count on her.

Charles Max Wood [01:04:04]:
No. You can't. Those beads don't move.

Steve Edwards [01:04:06]:
Right. That's true. And then finally, my psych I've been seeing my psychiatrist for a while, and he finally diagnosed me as a kleptomaniac. And I said, is there anything I can take for it? Those are the dad jokes of the week.

Charles Max Wood [01:04:24]:
Alright. AJ, what are your picks?

AJ O'Neil [01:04:27]:
First thing I'm gonna pick is grugbrain.dev, which is one of the most recent additions that I've added to creedsofcraftsmanship.com. It is I believe it's by I don't wanna say who it's by. I don't wanna give any bias. But I think it's pretty clear who it's by once you reach the the end of it because I I think he says so. But it is if you've ever seen the grug brain meme, it's, you know, like like big brain think multiple inheritance, multilayer system very good, but grug brain know. Grubbrain too stupid for big brain inheritance. Grubbrain used simple object and get work done. It's it's a little bit hard to read because the whole thing is written in that style, which is, you know, it's it's great for a joke, but it's not good for an entire article.

AJ O'Neil [01:05:20]:
But the entire article's written that way, and I I don't think there was a single thing I disagreed with in it. Because, yeah, I'm I'm definitely I'm definitely a grog brain dev. So if you think that you might be too dumb to, understand all the stuff that's going on in web dev these days, you might find great relief in joining the geniuses of grog ring dot dev.

Steve Edwards [01:05:43]:
Well, as he says at the end under the category of imposter syndrome, any young grog read this far probably do fine in program career even if frustrations and worry is always to be there. Sorry. Yep. Yeah.

AJ O'Neil [01:05:59]:
Another another pick is, you know, we're talking about what's what's a good place to find material to learn. So I've been compiling creeds of craftsmanship. Most of the stuff that's on there has been on there for a while. Every once in a while, I add something new. And the most the most recent two things are the grugbrain.dev, and then there was actually the original talk that inspired Ken C. Dodd's programming that I can't let me go look at it real quick to bring what the the name was. But, anyway, I add stuff to this, and it's it's nondenominational other other than that it's all pretty much grug brain. But the you know, it's it's not really favoring a particular framework or or language.

AJ O'Neil [01:06:46]:
It's it's pretty much just the keys of success to becoming a great developer. Yeah. One of the one of the most recent ones, it's really old from 2014 RailsConf, all the little things by Sandy Metz. And that was that's actually cited in the, the I I in one of Ken C. Dodd's resources on, avoid hasty abstractions, but I I hadn't I hadn't put it on there before. It was really good. There were a couple of things towards the end I disagreed with, but then again, she's giving such a small example of her her toy project where she's implementing she starts to implement inheritance in it, which, you know, I I'm I'm definitely in the camp of inheritance of is evil. But but may maybe maybe there's a larger example where where there is an exception to an inheritance is evil, that she she she she makes a case that it's not always evil.

AJ O'Neil [01:07:40]:
I I think it it

Charles Max Wood [01:07:41]:
you know?

AJ O'Neil [01:07:41]:
Anyway, so there there's that. And then, lastly, I mean, we're talking about high performance jQuery alternatives. You've gotta try ajquery. It's been released on Twitter, the latest incarnation. Unfortunately, because it's now AI enhanced, it no longer fits in a tweet as text, so I had to take a picture of it. Because now we've got, we've got types in there. It's fully documented. And, yeah, it really, really, you know, ran it through chat gpt to to to make sure it's it's up to snuff.

AJ O'Neil [01:08:18]:
But yeah. And and, you know, uncompressed, it's kind of big. It's like, I don't know, 200 bytes or so. But but, you know, you you you gzip that down and and deliver it. It's best best thing ever. Hot hottest thing since since, sliced bread. So, you know, get get it while it's hot. AJ query 3.0.3.

AJ O'Neil [01:08:44]:
It's a big one y'all.

Charles Max Wood [01:08:46]:
If you add a CI to it, it should be ajptquery.

AJ O'Neil [01:08:51]:
Yeah. That that one's taken. It's already Okay.

Charles Max Wood [01:08:55]:
Just trying to I'm just trying to help. I and and I don't know. Maybe you're not the AJ behind it. But, anyway, I'm gonna are are you done? I was gonna just jump into my picks, and then I realized I might have cut you off.

AJ O'Neil [01:09:08]:
No. That was it. That was it.

Charles Max Wood [01:09:11]:
So, every year, I go to a board game convention here in Utah in Provo. It's called Tipcon, and I wind up helping out with the hot games tables and teaching people how to play, board games. I usually take Friday off and go play board games all day Friday too. This year, I'm not gonna be able to do that. But, so I wind up learning, like, 6 new games every time. I'm gonna pick a game that I've already picked on the show because I know how to play it, and we've been I taught my wife and my kids how to play it yesterday. It was funny because my 15 year old was like, I really wanna play. Yeah.

Charles Max Wood [01:09:51]:
You know? Because if you have 15 year olds, you get it. You you gotta understand. It's like, I don't know if this is gonna be cool. And, anyway, we convinced her sit down and play it. Right? It's like, looks 45 minutes. Okay. I'll give it 45 minutes. And by the end, she was like, this is fun.

Charles Max Wood [01:10:06]:
So, anyway, that that's my testimonial for it. Like, she was smiling at the end of the game. Of course, she also won, so that that might have helped too. My 17 year old enjoyed it. My 9 year old kept wanting to play. It might have been a the the deck building piece of it might have been a little beyond her, but, we could literally just tell her, look, try and get all of the same color and get the highest numbers you can. And I think she would actually do okay just playing that strategy. But effectively what it is, it's it's a blend of capture the flag and war in a tournament style, and and then there's the deck building component.

Charles Max Wood [01:10:48]:
Right? And so you basically curate the deck. And what you do is somebody starts, they play a card, that card captured the flag, and then their opponent placed cards until their card's total equal to or more than the the top card of the other player's pile that's captured the flag. And then they capture the flag from them, the cards in the other player's pile go onto the bench, you can stack cards of the same kind on the bench, and you have 6 slots on your bench. When your bench is full and you can't place another card on it, if you need to place another card on it, you can't, you lose. If you can't if you run out of cards and you can't beat the other player's pile, you lose the the round. And then you get the trophy that's on top of the trophy pile on on that field that you're playing on. And so it's basically a 1 on 1. So if you're playing 8 players, there are 4 1 on 1 fields, and then you each have a schedule where you rotate to play against the other people and you play 7 rounds.

Charles Max Wood [01:11:53]:
The 2 top scores at the end of the 7 rounds go on ahead to head for the final, and whoever wins that wins. And so in the final, it was my it was me versus my 15 year old, and she beat me. So, anyway, it's it's super fun. BoardGameGeek says it's a 1.79. So that's it's it's pretty approachable for the casual gamer. The setup's pretty simple. There aren't a ton of pieces. You know, the the you have different, color cards that do different things.

Charles Max Wood [01:12:29]:
Right? So that's that's where the deck building comes into play is, like, one of them say will say, if this is on your bench, then you get a certain ability or you might get a card that says when you play this or, you know sometimes it doesn't even say when you play this, which means that if it's as soon as you play it or whenever it's out, it does the thing. Right? And so I had a card that said, if there are any other purple cards on your bench, then this card has plus 3 power. Right? So it was a 1, but if I played another purple card and had it on my bench, then it was a 4. Right? And so, anyway, so that that's the rest of it. Some of them let you collect points toward the end of the game because the trophies are worth points, but you also have a pile of just loose points. And so some of them say if if this card captures the flag, right, if it's the last card you play before you capture the flag, then you get points. So, anyway, whoever has the 2 people that have the top number of points at the end of the 7 rounds, they go head to head and you win. You're probably wondering, can you play with an odd number of players? The answer is yes.

Charles Max Wood [01:13:33]:
It has a robot deck. And so if you're if you're playing as a robot, you play both sides. And so that that robot deck has stuff in it like, this card is as powerful as the current round. So if you're on round 1, it's a 1. Right? And so since your deck isn't strong, the robot's deck isn't as strong either. But you get to round 6, and it's got some cards that before weren't giving you a whole lot of problems and now they are. But you should have a stronger deck by then too. And so, you just play the robot through and then the 2 players with highest scores.

Charles Max Wood [01:14:04]:
Right? But if you lose to the robot, it gets the trophy. Right? So, anyway, super fun. Really enjoy it. I'll probably have we're doing 6 games at the the board game conference. So for the next 5 or 6 weeks, you're gonna get a whole bunch of other ones. One of the other games is another version of challengers. I just haven't played it. It's called challenger speech cup.

Charles Max Wood [01:14:27]:
So I'll let you know when I learn that, how that goes, but I'm I'm imagining it's pretty similar to challengers. As far as other picks go, I've got a couple of other things. So, I think Steve mentioned Chuck's half marathons or whatever. I just wanna clarify. I'm training for an Ironman. I'm gonna do it next year. I plan to break my body over a Saturday or a Sunday depending on when the race is and right. And then I'll show up the next day for this podcast, and you'll you'll hear me talking out of the puddle of whatever's left of me.

Charles Max Wood [01:15:01]:
But,

Steve Edwards [01:15:04]:
anyway, I'm sorry. Undersell you there, Chuck.

Charles Max Wood [01:15:07]:
No. It's okay. So I I've been doing a couple of things, and I'm just gonna quickly shout out what those are. I've been using Training Peaks, and then I bought a 48 week training program for an Ironman that just goes into Training Peaks. It syncs up with my Garmin app, which means it goes onto my watch. And so I just tell it I'm doing the workout for today on my watch, and then it times me and does all my laps and everything. So that's that's pretty nice. I've also been doing some strength training.

Charles Max Wood [01:15:36]:
I've been using I signed up for a a transformation challenge is what they call it, with a company called FirstForm, and they spell form, p h o r m. And, man, their stuff is just it's awesome. It kick kick butt. They do sell a bunch of supplements. Right? So I wound up buying a bunch of their other stuff, but their trainer's been terrific. Any questions I have, she's walked me through all the stuff I need to learn and know. It's just been amazing. So I'm gonna pick that.

Charles Max Wood [01:16:08]:
I'm gonna put a link in, YouTube and hopefully get it into the show notes. That's my referral link. Now I don't get paid for the referral link. I think I might get some free swag from 1st form if I'm entered into an, drawing or something. I think that's how that works. But, anyway, I'm I'm just putting it out there because it's been amazing. And if you use my link, then you join my coaches. You've joined under my coach, and she's been amazing.

Charles Max Wood [01:16:38]:
So, I just wanna get you what I'm getting because it's it works and it's great. So far, I've lost, like, 8, £10, and, and that's over, like, 3 weeks 2, 3 weeks. But the other thing is is my gym has an in body body scanner.

Corey Brown [01:16:54]:
Mhmm.

Charles Max Wood [01:16:55]:
And so I've lost, like, a dozen pounds in fat, and I've put the rest back on in muscle. And so I and I'm feeling terrific. My diabetes is well under control. It's just it's been it's been a really good thing for me. Are you type 2? The health's what? Are you type 2 diabetes? Type 2 diabetes. Yeah. Okay. So it's it's been awesome.

Charles Max Wood [01:17:16]:
I've been type 2 diabetic for, like, 18 years. So

Steve Edwards [01:17:21]:
Yeah. I mean, if I was to do an Ironman, they would measure my time in days instead of hours.

Charles Max Wood [01:17:26]:
They close the course after a while, Steve.

Steve Edwards [01:17:28]:
Right. I might get yeah. They'd be, okay, Steve. Go home. You know? But, I mean, I could do the swimming really well and the biking pretty good. The running, they just have to follow my holes in the pavement. You know? That's how I I'm heavy footed. Yeah.

Charles Max Wood [01:17:39]:
The the bike is what I'm struggling with. I have a Wahoo trainer that I bought, and it's it's been great. And I'll pick that next time and tell you what I bought. And then there was something else that I wanted to shout out about. Oh, yeah. So this weekend, I went to it was a retreat for faith based entrepreneurs. It was 3 days. Amazing stuff.

Charles Max Wood [01:18:02]:
Big breakthroughs. I need to go and find the best link to kind of put you into the community that I I connected with for that. But, yeah, I just got a lot of clarity on who I'm supposed to be and what I'm supposed to be doing, and I encourage people to just find if you're a person of faith and you're trying to be an entrepreneur, find people who are doing that. If you're not a person of faith and you just wanna be a better programmer, go find people who are doing that. If right. Well, I mean, what whatever your ambition is, and whatever your identity is, go find that and go find people who are being excellent at at what what it is you wanna be, that you have a lot of things in common with. Because I guarantee you, if if you get with those people and you go deep, you're gonna have some really, really eye opening breakthroughs. So that's that's my pick, or those are my picks.

Charles Max Wood [01:18:57]:
Corey, what are your picks?

Corey Brown [01:18:59]:
Yeah. So, this one isn't my pick yet, but did did you guys did you guys hear about the circus? I understand it's gonna be intense.

Steve Edwards [01:19:10]:
I heard that coming.

Corey Brown [01:19:11]:
Yeah. I appreciate that. It's my favorite. No. My my pick is a absolutely shameless self plug. I mentioned at the top, that I'm in Saint George. I am at a a vacation rental that we recently bought and is now recent now ready for, for renters. So if you are interested, and it's in this really cool community called Desert Color.

Corey Brown [01:19:33]:
There's this beautiful lagoon, and it is fantastic. We have a a condo. It is it sleeps 7. It's 3 bedrooms, and it is available for rent. And I can give a promotion code that maybe we could put in the in the show notes. So if you wanna come down to Saint George, man, this this is the place. This is the place.

Steve Edwards [01:19:57]:
Now are you Call me what?

Charles Max Wood [01:19:58]:
My book it. I just want to Saint George.

Steve Edwards [01:20:01]:
You're near what? Bryce Canyon and Zion?

Corey Brown [01:20:03]:
Are you So, yeah, we're not far from not far from Zion. Not too far from Bryce Canyon. It's probably about an hour.

Steve Edwards [01:20:11]:
Oh, you're red. You're right in the corner on the border, aren't you?

Corey Brown [01:20:14]:
We're on the border there. So we're

Charles Max Wood [01:20:16]:
Okay. Yeah.

Corey Brown [01:20:17]:
Yep. Yep.

Steve Edwards [01:20:18]:
So Lake Powell is to the east and yeah. Yep. Didn't make design there.

Charles Max Wood [01:20:23]:
A bit of a drive. It's it's a ways. It's like But

Corey Brown [01:20:26]:
if you go into if you go into Tuakon out here Yeah. It's real short. There's there's actually Tuukon,

Charles Max Wood [01:20:32]:
it's concerts and and plays performances.

Corey Brown [01:20:35]:
Concerts and plays. Yeah. Oh, I

Steve Edwards [01:20:36]:
thought maybe it was that Hochtua girl, but okay.

Corey Brown [01:20:39]:
Nope. Not her. There's a lot of lot of arts out here, and there's surprising number of, like, state parks that are really, really great as well that are that are Zion. So

Charles Max Wood [01:20:51]:
Yeah. But you're definitely within striking distance of Zion National Park.

Steve Edwards [01:20:54]:
Yeah. You're just southwest of there. Okay. Yeah. Yeah. You're I love that area.

Corey Brown [01:20:58]:
From the airport. So if you're flying in, you know, we're real close to that too. So

Charles Max Wood [01:21:03]:
There's a Topgolf right there too.

Corey Brown [01:21:05]:
It's a it's a we call it bottom golf. It's a it's Big Shots. It's a it's not Topgolf.

Charles Max Wood [01:21:11]:
Oh, it's not Topgolf?

Corey Brown [01:21:12]:
Same idea. It's called Big Shots. Yeah.

Charles Max Wood [01:21:15]:
Yeah. Well, my wife and I and my father-in-law, my sister-in-law, and her husband, we go down to Saint George every year for the parade of homes.

Corey Brown [01:21:24]:
Mhmm.

Charles Max Wood [01:21:25]:
And yeah. So we'd be driving past it every year and, oh, look. It's almost done.

Corey Brown [01:21:30]:
Yep. Yep. And we just adore this community out here. And in, a week and a half or so, we'll be getting a hot tub here in our condo, so it's gonna be even better.

Charles Max Wood [01:21:41]:
Oh, man. Signing up. Alright. Good deal. Yeah. I might have to pick your brain on how to buy one because that's kind of my new dream is I wanna own a bunch of real estate.

Corey Brown [01:21:55]:
But, anyway They they don't make money month over month right now. Not down here. Not yet.

Charles Max Wood [01:22:00]:
Oh, really?

Corey Brown [01:22:01]:
Yeah. I don't well, we'll see. But that's, we don't expect it to. We're we're in it for the, the, equity.

Charles Max Wood [01:22:12]:
Right. Okay. Well, if people want to follow-up and check out what you are doing maybe in the programming space, how do they find you online, Corey?

Corey Brown [01:22:22]:
So you can find me, mostly so I'm I'm very quiet actually online. I don't really get on too much. It was kind of an accident. I swooped into to Twitter and made the comment that I did. But most you can find most of my stuff at 365jsthings.tech. That's my website. I have all of my articles, my, my talks, presentations, slide decks up there. And that's probably or at me on Twitter if you wanna talk.

Corey Brown [01:22:52]:
I'll respond to that. But

Steve Edwards [01:22:54]:
I won't say what your email is, but I like it.

Corey Brown [01:22:59]:
Well, you can you can email me at Corey at 365gsthings.tech. That's not the one that, you're referring to. But

Steve Edwards [01:23:06]:
No. Yeah. Yeah.

Charles Max Wood [01:23:08]:
Alright. Good deal. Well, thanks for coming, Corey. This was great. And, yeah, let's get that other one booked because I I'd love to dive into hey. You may not know that the DOM did this.

AJ O'Neil [01:23:17]:
Or you may

Charles Max Wood [01:23:17]:
not have known that browser did this for you. So alright. Well, we'll wrap it up till next night, folks. Max out.
Album Art
React and Beyond: The Importance of Learning DOM APIs - JSJ 659
0:00
01:23:29
Playback Speed: