INIT
Episode 23: POP QUIZ!!
Published:
Seth quizzes Jake's knowlege of web development so far. Hilarity ensues.
(Auto-Generated) Episode Transcript:
[00:00:00] Seth Whiting: Hey everybody, I am Seth Whiting. I'm a developer from Portland, Maine, and I've been coding for about 10 years now. And
[00:00:07] Jake Pacheco: I'm Jake Pacheco. I am a barber from Augusta, Maine, and I've been coding for about nine and a half months now.
[00:00:14] Seth Whiting: Nine and a half months. Nine and a half months. So we're going to do something a little different on this episode.
Change it up a little. Mixing it up. Having fun. This is a pop quiz. We're going to be grilling Jake. Making him squirm. So you're going to want to watch this on YouTube. I'm already so squirmy. He's shaking like a leaf. I am. And palms are sweaty. Knees weak and arms are heavy.
[00:00:47] Jake Pacheco: But, but I really should have
[00:00:48] Seth Whiting: studied.
Yeah. And I probably should have prepared some questions or something, but I'm, I'm just going to be, going off the cuff here, I think
[00:00:56] Jake Pacheco: that people get that. We just kind of fly by the seat of our pants at this point. I hope they do. I mean, if
[00:01:04] Seth Whiting: you haven't picked up on that by now. Yeah. You know, you just, you will by the end of the episode.
I've
[00:01:12] Jake Pacheco: said it before and I'll say it again. Just a couple guys trying their best.
[00:01:15] Seth Whiting: Cool. All right. You ready for your first pop question? Pop question. Go for it. Pop secret. So let me think if you remember from the fundamentals of web development episode, I made an analogy of the different languages, basically like the different front end.
Languages being like the skin and the bones and the muscles, muscles, which, which were the muscles and the skin, which were the bones the bones are the
[00:01:59] Jake Pacheco: HTML. The muscles, cause they add functionality is the JavaScript and the skin is the Frick. No, I'm just joking. It's a CSS.
[00:02:12] Seth Whiting: Nice. Nice. I did it. You did it.
Ding, ding, ding. All right. Cool. Nice. A hundred percent so far. Let's see how you do on question two. Here we go. When I was talking about functionality in JavaScript, I said it all kind of boils down to two kind of basic things. Do you remember, do you remember what those two basic things are? And hopefully this isn't too vague of a question.
Yeah, I'm like, can I have it in a sentence, please?
[00:02:46] Jake Pacheco: The two basic things. Functionality of JavaScript. Functions and components. I, I
[00:02:53] Seth Whiting: don't know. So this is totally like. Question asking, asker error.
[00:02:59] Jake Pacheco: Like,
[00:03:00] Seth Whiting: like. But yeah, it's basically like. What I'm getting at, I'll just give you the answer because I'm not sure if I can phrase the question any better, but I said like several times in the Foundations of JavaScript or Fundamentals of JavaScript episode that functionality, like programming functionality is like The majority of it kind of boils down to loops and conditionals.
Oh, loops and conditionals. Okay. Yeah. Yeah. Yep. I remember this now. Do you remember, like, what, what conditionals are? Isn't it, like,
And I think that when we did this
[00:03:38] Jake Pacheco: also on the podcast before, and you asked me that, I was like, I was like, isn't it this? I think it's close. Anyways basically, a function will happen on the condition of something
[00:03:51] Seth Whiting: interacting with it with with the code, I guess, so like,
[00:03:57] Jake Pacheco: if someone does this, then it does
[00:03:59] Seth Whiting: this yeah.
And that's kind of an if statement, but you, I think you, I think you have it. You're just being a little too specific. Like it's more, it's more broad than that. A, a conditional is another, another name for it is just an if statement. Yeah. Yeah. So basically in your code, you're just saying like, if this condition then do this.
Yeah. Yeah. Yeah. Yeah. So I think, I think you were, you were. I think you were there. Yeah. Yeah. I just, I just went backwards, started more specific. Yeah. Yeah. Yeah. Cause like you can use it for a million different things. Like you could say like, if this data is present, then this specific variable equals this.
Yeah. It's not necessarily like executing a function or anything. Yeah. Or like performing any task. It's, it's just, well, I mean, I guess the task that is performing is just assigning a value to a variable. Yeah. So yeah. And then
[00:05:05] Jake Pacheco: the loops still kind of get me sometimes. Yeah.
[00:05:09] Seth Whiting: So like, but like, you know what they are.
Yeah. In a
[00:05:14] Jake Pacheco: way, like, in my mind I can like, kind of think of , but, but still they, they, I, isn't it like a, isn't it like you would loop through an array to find a specific thing and it's going to keep looping through and doing more stuff throughout
[00:05:32] Seth Whiting: until
[00:05:33] Jake Pacheco: it gets to its conclusion,
[00:05:34] Seth Whiting: wherever it is. Yeah, something like that. More or less. Yeah, yeah. Loops, basically, you loops are performed on arrays. So you have that.
And you can do pretty much anything within the loop. So, like, you can say, like, within the loop, you can have a conditional that says, like, so, like, on the outside of the loop, you could have like a let variable that's, like, let match equal, like, empty string, just, like, quote, unquote. And then within a loop right below that, you can loop through an array.
And if, if like, if some string in that array matches, you know, some, some other string that you're like comparing it to within that loop, you can assign the value of match to that string. All right. Does that make sense? Yeah. Yeah. So that, I mean, like that's. That's a pretty bad example, but it's an example,
[00:06:43] Jake Pacheco: but you can like kind of set a parameter and loop through the array until it
[00:06:48] Seth Whiting: finds that parameter and like matches to it.
That's like one, one example of like a billion different use cases for, for a loop. Okay. Could
[00:06:57] Jake Pacheco: you maybe give me a second one, just because like that's the only
[00:07:02] Seth Whiting: kind I can kind of think of. Yeah, yeah. So, if you let's see, like this is another like, not super useful example, but you could have a variable called times five, say, yeah, and then you have a loop that loops through an array and you you're grabbing like the index of each item in the array.
So basically, like, however many items are in that array is how many times it's going to be looping, you know, so if you just grab the index, then it'll start with zero and go all the way to like the, the length of the array minus one. But so if you're looping through and you're just grabbing the, the index, then you could say times five equals.
Index times five and just, you know, just because you can, because you can but that, that's, that's a pretty terrible example because you could just take, like, it's going to end up being the equivalent of like array dot length minus one times five, if that makes sense. Yeah. Yeah. Like there, there's so one, one useful Example would be within your react code.
If you have a list of reptiles, then you can loop through that list within your JSX. And spit out like a card for each reptile that has like a div that's styled to be like a white background. And it has like the reptile. name in like big letters, reptile. species in smaller letters and all of that. So that's, yeah, that's, that's a more useful one, but that's, that's kind of specific to React.
Yeah. There's so many Yeah. Useful examples that I am not thinking of that have nothing to do with React and have everything to just do with plain old vanilla JavaScript. Yeah. But for some reason , I'm having like, it's okay. It's it's brain. It's, it's, it's been a long day. It's okay. If you want me to think of a good one, I can, it's just, I'd rather
[00:09:30] Jake Pacheco: Yeah.
Move on at this point, we already went to this. Yeah. We already talked about all this, so it's all good. I was just, I, I was just trying to think of it in another. Kind of like in another sentence, like in another way. So then it's locked into my mind in more than one different way. You know what I mean?
[00:09:43] Seth Whiting: As a simple, a simple, like useful example would be if you want to execute a specific function for every.
Entry in a, in an array for every item in an array, you can say like, you know, loop through the array. And as long as the function you're calling the function within the loop, it's going to call that function for, you know, however many, however many times that equals, however many items are in that array.
Huh. Alrighty. So whatever the function does is, you know, up to your imagination, but it can do that. Yeah. All right. Yeah.
[00:10:25] Jake Pacheco: Sweet. Sweet.
[00:10:27] Seth Whiting: So, hey,
[00:10:28] Jake Pacheco: I
[00:10:29] Seth Whiting: kind of got it. Yeah. Kind of, sorta. So loops and conditionals are important to know. Do you remember so question three. I think three.
[00:10:42] Jake Pacheco: It's like three and a half because we had that half question that
[00:10:45] Seth Whiting: was like, it just confused me, but we turned it into something.
So it's all good. Here we go.
Cool. All right. So question three and a half. How many. Can you give me three examples of a data type in JavaScript? Of a data type in
[00:11:02] Jake Pacheco: JavaScript?
[00:11:03] Seth Whiting: Yeah. We've already talked about a few of them, but it's just like, it's the term, you know, it's all about the term, like whether you know what the term means or not. But you definitely, like, as soon as I tell you, you'll be like, oh, that's what that means. Oh, those things. Types of data. Types of data. I, I mean.
Like what, what type. of data can a variable be? Oh,
[00:11:38] Jake Pacheco: So are we talking about like a string? Yeah. Yeah, okay. All right. Okay then. Two more. A string, an array. Yeah. Right? Yeah. And a it's not just called number. Is it? Yeah. Number? Yeah. Yeah. Number. Hey! Hey, yo! Hey! Oh my crud. No, that's, hey. I did it. Yeah,
[00:12:00] Seth Whiting: no big deal.
[00:12:01] Jake Pacheco: a little
[00:12:02] Seth Whiting: pro. So that's good. Question number four goes right along with that. Do you remember what you would call a true or false value? I wanna say it's a bullying. A what? A bullying. Oh, you're so close. All right.
[00:12:19] Jake Pacheco: I, I mean, I know there's like, there's truthy statements and then there's true or false
[00:12:24] Seth Whiting: value.
No, I mean, you, you have it. You're just mispronouncing it. Oh.
[00:12:30] Jake Pacheco: It's not it's B O L
[00:12:34] Seth Whiting: E A N, right? Very close. B O O L E A N. Well, that sounds a
[00:12:40] Jake Pacheco: lot to me, like Boolean, man. No, what is it
[00:12:43] Seth Whiting: though? How do you pronounce it? Boolean.
[00:12:45] Jake Pacheco: Boolean. Yeah. Yeah. Boolean. Yeah.
[00:12:49] Seth Whiting: Yeah. You know what it is? Yeah, I mean, L E A N spells lean.
So, you know, I could see why you
[00:12:56] Jake Pacheco: would pronounce it that way. In my brain, my slightly dyslexic
[00:12:59] Seth Whiting: brain. Yeah, there's a lot of things in programming that like terminology that you, if you never hear it. You would probably like be reading it one way in your head. That's like the wrong way. Yeah. Yeah, that's not the only It's not the only one.
[00:13:16] Jake Pacheco: Well, here we are. Hey, I did it right though. That was it, right? Yeah. Yeah. That was it. I, I, you know, I'm not complaining. Hey, this is, this is maybe the best test score I've ever done. . It's funny. Side note, I was talking to one of my clients the other day, and he was really upset because his son ended up getting like a 17 on his, on his math paper or whatever.
I was like, I was like, oh, that one, seven. I was like, yeah, yeah. I was like, oh, that sucks. I was like. Funny story about your barber, Jake, I, when I was, so I went to a private Christian school, but it was a very how do I put it gently? It was, I mean, we had a music teacher that didn't graduate high school, so it was not things weren't, you know, if there was a code for these things that it wasn't up to code.
[00:14:08] Seth Whiting: Yeah, yeah, I think if you're not accredited. Yeah. I think that's the thing. If you're not accredited, you don't need, okay. So yeah, that happened.
[00:14:18] Jake Pacheco: But I, I was doing a math test when I was a high school student. I did not quote unquote apply myself. They always told me and it's brutal. So there were three extra credit credit questions on this test.
And if you did them, then you get the extra credit, but also if you did them and you got them wrong, they go against your
[00:14:41] Seth Whiting: score. Oh, geez. I got
[00:14:43] Jake Pacheco: a negative three.
Yup. Yup. Oh, man. Yup. That's great.
[00:14:49] Seth Whiting: So, you got all of the questions wrong,
[00:14:53] Jake Pacheco: including And I, I knew I was getting them wrong. I knew that, like, I was getting the whole
I was not a good math student. My, my grammar was actually on point, but when I was doing this test, I was like, I got, I got through all the test questions and I was like, they had the extra credit questions. I just truly asked myself, what do I have to lose?
Yeah.
[00:15:16] Seth Whiting: Yeah. That's amazing.
[00:15:19] Jake Pacheco: Yeah. So I'm pretty sure at that school anyways, I have the lowest test ever had. Like, I don't think anyone's ever beaten me on that.
[00:15:27] Seth Whiting: Yeah. Yeah. So that's who
[00:15:30] Jake Pacheco: you're trying to teach coding to.
[00:15:32] Seth Whiting: Good luck. Yeah. Yeah. That's great.
[00:15:37] Jake Pacheco: Yep. Yeah.
[00:15:38] Seth Whiting: So I,
[00:15:41] Jake Pacheco: you know, I, it was basically it, by the end of the day, I was just trying to get this guy also to not like make his son feel bad.
Hey, yeah. Some of us don't get it right away.
[00:15:50] Seth Whiting: Okay. Yeah. Okay. Question five hit me. Well, before, before that, just one comment on that. Like one thing that was kind of cool is like, once I started getting into coding and like learning and like getting it down. I realized that I was getting better at math just because I was getting better at coding and like just sort of as like a side effect.
Of that I was like better with numbers after that. Yeah, it's weird.
[00:16:23] Jake Pacheco: It's weird how things like that happen when I remember when I was a before I was a barber. I was a machinist for a bit. And when I
[00:16:30] Seth Whiting: did that, like, I mean,
[00:16:32] Jake Pacheco: you could. told me, like, decimal points and, like, thousandths
[00:16:37] Seth Whiting: of, like,
[00:16:39] Jake Pacheco: past the decimal point is what.
And,
[00:16:41] Seth Whiting: Before then, I, I didn't know. I was like, you know, it
[00:16:44] Jake Pacheco: was gibberish. And then by the end of that, and I've lost a lot of it now, but like, by
[00:16:48] Seth Whiting: the end, like, when I was, like, doing that machining, I was like,
[00:16:52] Jake Pacheco: On point with my decimals. . Yeah. Like it was, yeah. It's, it's, it's cool how like, just, I mean, I guess that's just re repetitive thinking a certain
[00:17:01] Seth Whiting: way.
Mm-Hmm. makes you be a certain way. Yeah. But if, if you're like using, if you're using it, you know, on a daily basis Yeah. Like you're gonna get better at it. Yeah. Yeah. So I'm looking forward to that. . Yeah. It's whole thing. Cool. All right. So question four and a half. . Four and a half, buddy. Four and a half.
We need another half question just so that we can have round numbers again.
Okay, so this is I don't know, I don't know if I've ever like phrased it this way, but maybe, maybe you can like catch on but like, what, what is the data type where you basically have like a variable with sub variables? It is,
[00:17:46] Jake Pacheco: Like parents and, and children like
[00:17:50] Seth Whiting: that, that thing, that's more like, that's more like talking about like react components and stuff where we get into like children and parents and stuff.
We're not
[00:18:00] Jake Pacheco: talking about props though.
[00:18:01] Seth Whiting: No. No. Okay. All right.
[00:18:03] Jake Pacheco: So you have a variable and then sub variables, Oh
[00:18:07] Seth Whiting: objects. Yeah. Yeah. Yeah. Yeah. No.
[00:18:10] Jake Pacheco: Okay. Cool. I always get props and objects mixed up. So I was like, ah, it's
[00:18:13] Seth Whiting: objects.
[00:18:14] Jake Pacheco: Yeah. By process of elimination, it is objects.
[00:18:18] Seth Whiting: Yeah, props. Props are not like a JavaScript thing, you know, they're, they're they're specific to react and other, other frameworks might call them, call them the same thing.
And there may be another thing in vanilla JavaScript where you call them props someplace. For some, you know, scenario or whatever, or like call something props, but it wouldn't be the same thing. Yeah. The same, you know, because it's not within React. Within React, yeah. Like straight up, like data types.
You have like arrays, objects. And then string, Boolean, number, that kind of thing. Alrighty.
[00:19:01] Jake Pacheco: Hey! Hey! I got another one! Like, you know, I got there.
[00:19:05] Seth Whiting: I got there. Yeah. Yeah, you got, you got, you got it right. Hey, four and a half for four and a half. And like, side note, props, when you're passing props to a component, they come in the form of an object.
Okay. So, like, they are very similar in that regard, but the object is the more like, general. Yeah. Yeah. It's like the more general thing, and then props are like a specific object that you work with. Yeah. Like almost a type of object, in a way. I mean, it is basically just an object that you use for a specific purpose.
Yeah.
[00:19:50] Jake Pacheco: Alrighty.
[00:19:51] Seth Whiting: Sweet. Number five. Was that four and a half? Yeah, it was. All right, cool.
[00:19:57] Jake Pacheco: We're past the halves. It's funny because you already said four. And you went to four and a half.
[00:20:03] Seth Whiting: Oh, did I say four? Yeah, yeah. I don't know. I have no idea. I haven't kept track. We're going with it. Cool. All right. Question five.
Let me think here.
Name, like four, I'd say name four different HTML tags
[00:20:23] Jake Pacheco: like the full name or just that like HP
[00:20:25] Seth Whiting: H1,
[00:20:26] Jake Pacheco: H2, H3, H4 like headline, paragraph div. Which
[00:20:32] Seth Whiting: I don't what's this stand for? So, I, I don't even know.
[00:20:38] Jake Pacheco: Good. Like. Cause I was
[00:20:39] Seth Whiting: like, wait. 100%. I don't know, but I'm pretty confident that it just means like division, like it's a division of your age or something.
Yeah. So,
[00:20:52] Jake Pacheco: is that what you're looking for?
[00:20:53] Seth Whiting: Yeah. Yeah. I, I think you named. I got a hundred. Yeah. Hey,
[00:20:59] Jake Pacheco: those are those extra credit questions. I love
[00:21:01] Seth Whiting: so much. Yeah. She got negative eight. Negative eight. Good job, Matt. What does DIVIV stand for In HTML? Division? Yeah, division. Hey. Hey. I get a point. You get a point ,
[00:21:19] Jake Pacheco: you get a point and you get a point.
This has turned into an Oprah .
[00:21:23] Seth Whiting: Oh, here's a good one. Okay. Hey, I'm ready. Question number <LAUGH> five six. Five and a half. Five and a half or six. Let's work on in half. I like it. Question G.
What does CRUD stand for in the context of programming?
[00:21:42] Jake Pacheco: Create, Read, Update,
[00:21:45] Seth Whiting: Delete. Nice! Boom, shakalaka. Yeah. Got it.
[00:21:51] Jake Pacheco: Yeah. And I've been reading about the update and delete part and have no idea what I'm doing. Nice. I like copied some code in earlier, sent me an error message and I was like, delete that. Don't do that Jake. We'll, we'll, we'll get there. Yeah.
[00:22:04] Seth Whiting: Yeah. But yeah. Sweet.
Update and delete. Yeah. Cool. Cool. All right. Let me think here.
I, I, like, I'm struggling to think of what question we're on more than to think of what question to ask you. Let's go with sex. Yeah, let's go with sex. I swear that was number six just now. No, that was, that was G. Okay, alright. This is sex. Question niner. What is your name? What is your quest? What is your favorite color?
I, I, I had one just, okay, here we go. When you are in a react component and you want to declare a variable that you know, is going to be updated later, how would you go about doing that? Let or there, but let probably right in a react component, when it re renders that, that value is going to go away.
So in order to persist between the re rendering of the component, you have to use a specific little tool that React gives you.
[00:23:18] Jake Pacheco: I, I'm like tempted to just look at my code and see if I can, I, okay, let me think. So, ask, ask it one more time if you
[00:23:26] Seth Whiting: don't mind. Yeah. So when you are declaring a variable that you know is going to be updated later, like based on like some user interaction, that kind of thing. Yeah. What, what kind of like tool do you use that react gives you?
Like what is the name of that tool that they give you that you can use in a functional component specifically in a functional
[00:23:51] Jake Pacheco: component? Oh, man, I know what you're talking about because I was just listening to the react episode to check it Dag nabbit
Dude it's not coming up.
Yeah, I'm gonna I'm gonna
This
[00:24:04] Seth Whiting: is dead air and it's super boring what people listening to me think I bet. It'll be cut out. Yeah, yeah. Do we need the I'm not, I'm not as The price is right. Boop boop, boop boom. Yeah. I'm totally going to find that and put it in there. Are you, are you giving up on this one? Because I can, I can bail you out.
I,
[00:24:20] Jake Pacheco: I, I think I might be giving up. I'm
[00:24:25] Seth Whiting: not, I'm not happy about it. I feel like your eyes are darting around like you're looking at Google or something.
[00:24:30] Jake Pacheco: I'm looking at my code to see what I'm... Yeah, no, it's not there, man. It's not there. I
[00:24:36] Seth Whiting: didn't get this question. Hopefully... Hopefully it's that you don't know it, and just that my question asking was, was terrible, but what I'm referring to is use state, like a state variable.
Yeah, I would have gotten that, that wasn't in there. Alright, cool. Yeah, yeah, yeah,
[00:24:52] Jake Pacheco: yeah, but I, I know what it is
[00:24:54] Seth Whiting: now. You remember it? Yeah,
[00:24:55] Jake Pacheco: yeah, yeah yeah, cause it's, I, I, I, I think about it like this, and tell me if this is wrong, because I, you know, touch and go with a lot of this. I,
[00:25:06] Seth Whiting: I. Like, I look at it as like it's using Like, it's, it's, it's going
[00:25:14] Jake Pacheco: to be in this state
[00:25:15] Seth Whiting: until it's changed or something, right?
Like, like, state, state as in like, you know, solid Yeah, like liquid,
[00:25:25] Jake Pacheco: you know, like that kind of thing. Yeah, it's kind of how
[00:25:27] Seth Whiting: I was thinking about those. Yeah, like your state of mind. Yeah. Yeah. Yeah. Yeah. So it's, it's, yep.
[00:25:34] Jake Pacheco: Be in this state until it changes and then it'll
[00:25:36] Seth Whiting: change it. Yep. Alrighty. Yep.
Well, here we are. State, I got
[00:25:41] Jake Pacheco: it wrong.
[00:25:42] Seth Whiting: Cool. All right. So what are you, you've got Seven out of eight or something like that so far. Yeah. Yes.
[00:25:50] Jake Pacheco: Technically I think that we've done, we, yeah, we've done eight questions altogether and
[00:25:55] Seth Whiting: yeah. Seven, seven. All right. Cool. All right. Keeping track. Yeah.
[00:26:01] Jake Pacheco: I wonder how those of you at home are doing.
If you're, if
[00:26:04] Seth Whiting: you're fumbling these, like I, yeah, tweet at us while you're listening to this. Yeah. How did you tell us your score? Live tweet us your scores.
[00:26:13] Jake Pacheco: Live tweet us your scores when this comes out in a week. I like it.
[00:26:18] Seth Whiting: Or, or, or like threads or whatever. Yeah, or if Twitter or X or whatever is still like around in a week.
If it's still a thing, yeah. I'll be pretty surprised. Yeah. Alright, cool. So, let's see, question number nine ish? Yeah. Okay. Let's go with that. So you state is an example of a react hook. Okay. If you remember, can you remember any of the other react hooks? React hooks? Yeah. This one's pretty tough. Yeah.
Yeah. If you're, if you don't use them every day
[00:26:55] Jake Pacheco: and I do not you stay
[00:26:57] Seth Whiting: I'll give you a hint. They all by, by like convention. Like, the way that React set them up, is they are all supposed to start with the word use. So that's, I gave you. Yeah, yeah. Man, I can't think of any.
[00:27:19] Jake Pacheco: And it's frustrating because like, I was like, on the last question I was thinking, I was like, I was like, he's not asking for just the word, a hook.
[00:27:27] Seth Whiting: Yeah, no, but he would have been close. Yeah, I know,
[00:27:31] Jake Pacheco: but it's not, it's,
[00:27:33] Seth Whiting: yeah, yeah, yeah, it's like, yeah. I...
[00:27:36] Jake Pacheco: I keep thinking of like math floor, math random, things like that, but that's not anywhere close to this. It's yeah, yeah, I don't know that, I don't know that I know any other.
[00:27:48] Seth Whiting: Yeah. Yeah. Well, you'll, you'll remember it once I refresh your memory. Yeah. No, I do. I think you will. Cause we, we talked about it, you know, a decent amount. Yeah. So just for the record, math floor and math random, those are, those are just based, like those are baked into JavaScript.
Yeah. Yeah. They don't, they're not react specific. Okay. Yeah. Yeah. So another. The, so the second most used react hook is use effect. Use effect. Yeah. Do you remember that at
[00:28:26] Jake Pacheco: all? Yeah. I remember talking about use effect, but yeah, if you asked me exactly what it's going to do, I'm not sure that I'd be able to have a actual definition for it.
[00:28:37] Seth Whiting: Yeah, so basically it's like the, the block of code that runs whenever something in your component changes. Like you, you have a dependency array at the end of it. And if you have any particular piece of data in it, and that piece of data changes, like the one that you specified in the dependency array, then it's going to execute whatever block of code is within that use effect block.
Okay. If you don't have anything in the dependency array, it will run one time when the component first loads. Do you remember that part? Yeah. Yeah. Yeah. I remember you talking about that. Yep. Yeah. Alrighty. Do you have another one? Another hook?
[00:29:24] Jake Pacheco: Yeah. Sure. Yeah. Well, I'm curious. I want to know more than two.
Because I'm trying to, I, yeah, I'm
[00:29:30] Seth Whiting: trying to remember. Yeah. So I think like the third most. Used one, or like at least the third most useful one. I mean, depending on your use case and whatever, but there's one called use context where you can share basically like state variables between components. So if you, if you have like, if you have like a, a dark theme and a light theme for your whole website.
You need to be able to access whether you're using the dark theme or the light theme at any given moment in any given component. So that needs to be available everywhere. So you use that in a used context. Okay. All right. So it's used in different contexts. Kind of a thing. Yeah. Yeah. All right. Yeah. It gives like context like that.
It gives context to your whole app for, for a particular bit of data, basically. So. Yeah, cool. All righty. So the more more about that on the react episode, if you Yep, I'm gonna
[00:30:41] Jake Pacheco: have to re listen. Yeah. Go and re listen. I'm also going to retake, redo the react what's it called? Codecademy
[00:30:47] Seth Whiting: course.
Codecademy
[00:30:48] Jake Pacheco: thing. Yeah. Yeah. Just cause like I made it through it, but it's, you know, apparently touch and go. So I'd like to kind of re up on that. You kind of have to.
[00:30:55] Seth Whiting: Like once you, once you learn something, you kind of have to like, start using it regularly in order for you to retain it, you know, over time. Yeah,
[00:31:04] Jake Pacheco: this is gonna be a side note. It's, it's been hard to kind of do that. Like,
[00:31:08] Seth Whiting: it's, it's hard to do that.
[00:31:10] Jake Pacheco: Like, yeah.
It's, it's, cause there's, I feel like there's only so many ways to practice. And. When you still feel like you need to be spoonfed, like, I feel Mm-Hmm, ,
[00:31:20] Seth Whiting: like, it's, it's tricky to like, find practice,
[00:31:26] Jake Pacheco: you know what I mean? Yeah. So yeah, I, I think I'm gonna run through that again, just 'cause clearly
[00:31:32] Seth Whiting: some things aren't haven't clicked well.
Yeah. So one, one thing that's pretty cool is. And, and this is sort of like, I don't know, it's just calling, calling back to like something that people might not even have watched or seen or heard or whatever. But in our like live coding thing, we've been going through building out your app, that keeper app for scheduling.
We haven't done the schedule yet, but like keeping track of your reptiles. Yeah. All right. Right now we have just like the read part of a CRUD application and. Like I said, in, in the last episode where we were doing like the live coding, which we will have probably not released at the time of releasing this episode.
Yeah. But anywho like I said, at the end of that one, once you, once you do like the update and the delete and the create steps, then pretty much everything else there, like everything else. Kind of builds off of that. So if you, if you have any, any CRUD application that works, then you can kind of just take what you have, duplicate it elsewhere and kind of mold it to fit your particular use case in that other area.
Does that make sense? Yeah. So like the cool thing about that is once we have done one, like the CRUD functionality for this one part of it that we're working on, that should then be the point where you can kind of take off and run with it. Okay. If that makes sense. Yeah. Yeah. Yeah, because it's kind
[00:33:27] Jake Pacheco: of, it sounds kind of like with with my house build, I almost have the roof entirely finished and then all the windows and doors are closed.
And once that's all closed in, I can just do whatever. You know what I mean? Because it's like, I don't have to worry about. Building the main structure anymore. The main structure is already there. All your framework and everything
[00:33:49] Seth Whiting: is. So that's, that's sick. That's awesome. Yeah. I mean, I think, I think the analogy is a little bit, a little bit different because, because it's not really like setting up like the foundation of your application or anything, it's more building out like a template.
For, for duplication elsewhere and like, then all you have to do is just alter that template, you know, copy and paste it, and then just configure it to be, you know. A completely different thing, but it's still essentially doing the same thing. It's just creating something, updating something, reading something, and deleting something.
Yeah. But the, but the
[00:34:31] Jake Pacheco: main, like the mound,
[00:34:33] Seth Whiting: I said it
[00:34:34] Jake Pacheco: because you said it,
[00:34:35] Seth Whiting: great update, read,
[00:34:38] Jake Pacheco: delete yeah, sweet. So yeah, it's like kind of like a, yeah, just a foundation.
[00:34:43] Seth Whiting: It's a foundation up here. I was saying it's not, but Seth,
[00:34:47] Jake Pacheco: it is. It's a found a movable foundation.
[00:34:50] Seth Whiting: Crud in general is like, could be a foundation.
Sure. But the part that we're, the part that I'm talking about, we're like, we're building a particular crud app that you can then use as like a template. That's the analogy. It's not foundation.
This is my analogy, leave,
[00:35:11] Jake Pacheco: leave, leave the building of houses to me. My analogy works for me,
[00:35:17] Seth Whiting: but I, so here's the analogy. If you have, if you've built a house. Yeah, you can't
[00:35:25] Jake Pacheco: rebuild the house. I
[00:35:26] Seth Whiting: get it. No, no, what I'm saying is, if you have already built one house, Yes. Then building another house would be super easy.
Building a shed would be easy. Building like a like a studio, you know, would be easy. Yeah, but like because you've done it once and you have the experience to draw from and you have like even the blueprint and you have the like the actual, you know, physical structure there to look at and and glean from.
Then it'll be a lot easier to, you know, so the rest
[00:36:03] Jake Pacheco: you're, you're, you're more saying like you have this base knowledge where I was thinking I would literally save file at where I was and just use that as my base for everything. You know what I mean? Right. You're saying like, you just go ahead and read it and be like, Oh yeah, this works like this and then
[00:36:21] Seth Whiting: retype it and read.
Yeah. Copy paste and alter to fit the new. Right. Right. I get what you're saying now. I get
[00:36:29] Jake Pacheco: what you're
[00:36:29] Seth Whiting: saying now. Yes. I can see my analogy. It's not a foundation.
[00:36:34] Jake Pacheco: Yeah, yeah, yeah. I was thinking of the cheating way to do it. But yeah, I get exactly what you're saying now, and I'm proud of you for coming up with such a good analogy that didn't confuse me at all.
So
[00:36:47] Seth Whiting: I'm here for it. 10? Question 10? Question 10. All right, question 10. Can you name any, let's say like three different properties that you can change via CSS? Like if you have a div or a paragraph, say, what, what are some like things that you can do to those via CSS? Well,
[00:37:17] Jake Pacheco: I think you can change
[00:37:19] Seth Whiting: the color of all of it and change the oh
[00:37:22] Jake Pacheco: man, am I really going to blank on the the word for it?
Oh, what's the word for it?
[00:37:26] Seth Whiting: I, for this, the, you can change the margin, you can
[00:37:32] Jake Pacheco: change
The actual square that the paragraph would be in I and I'm blanking on it, but I know that like you can round the edges and make that a certain color and all that stuff. I what's the word? What the heck is the word for that? You don't have to tell me, obviously, you're gonna end up telling me
[00:37:49] Seth Whiting: at some point, but let me think about bookstores.
chain bookstores chain
[00:37:56] Jake Pacheco: bookstores. Yeah, that's not,
[00:37:58] Seth Whiting: that's not how many bookstores do you think I go into here? So like, I'm at a bookstore. I'm
[00:38:03] Jake Pacheco: looking at the Legos.
[00:38:04] Seth Whiting: Famous bookstore chain borders. There you go. Yeah. Yeah, I think books a million
[00:38:12] Jake Pacheco: bought them out. But yeah. Yeah. Okay. So you change the borders. All right. But yeah, I'm
[00:38:17] Seth Whiting: gonna change. So is that the word that you were looking for though? Yeah. Yeah. Yeah. Okay. All right. All right.
[00:38:22] Jake Pacheco: Yeah. So I, you know, so I, I, I forget.
Yeah. You can change fonts in it also.
[00:38:30] Seth Whiting: You can change the actual shape of the
[00:38:35] Jake Pacheco: Borders too, right? So like in round the edges
[00:38:38] Seth Whiting: and whatnots. Yeah. And what else You can do quite a bit. Yeah. Did I, how many did I do? Fun side note with borders, you can, they're like different styles of borders that you can do.
Okay. Which, like, nobody in the world. Should ever do anything other, other than a solid border. But there's like, there's a dashed border that you can do Mm-Hmm. Where it's just like, you know, like a, it sounds
[00:39:12] Jake Pacheco: awful. Yeah,
[00:39:14] Seth Whiting: it looks terrible. I'm gonna do it on my
[00:39:16] Jake Pacheco: app just to be the guy that did it.
[00:39:18] Seth Whiting: She be like, what is this crap, man?
I wanna look up the different ones. Border style CSS. Can you like. If you got
[00:39:26] Jake Pacheco: crazy with, like, the pixels and everything, could you actually, like, Like, take all the edges and change it so it's an actual shape into
[00:39:34] Seth Whiting: something? So, like, you know, it looks
[00:39:36] Jake Pacheco: like a little fishy when you type on the little, like, on the one that says fish.
Wait,
[00:39:41] Seth Whiting: are you saying, can you, can you draw the border? There's something called border image, I think, where you can basically like take, take a little dinky little image and make it like repeat sort of like the, the, the, I guess it's called dotted. And so it would basically be like the, the dotted one, but with an image instead of a dot.
Mm hmm. All right. So, yeah, when you call it,
[00:40:16] Jake Pacheco: when you call it dinky, I was like, I was like, well, you don't have to like make him feel bad. You do.
[00:40:22] Seth Whiting: It's just like a very small, like low lo fi image. Yeah. I think, I mean, I don't know, you could have like a huge HD image, but that would be ridiculous. Yeah. Okay. So there is a dashed one.
So there's a dashed one, a dotted one. Solid, and then one that's double, so it's like two lines. Weird. One that's called Groove. Specifies a 3D grooved border. The effect depends on the border color value. I wonder if
[00:40:55] Jake Pacheco: it like, if it looks like, you know those kids scissors
[00:40:58] Seth Whiting: that cut like... Right, yeah. Yeah, I wonder if that's what it is.
Actually, there's a little demo w3schools. com
We can link to that in the show notes for the border style demo that they have. Awesome. So, okay, so groove is just sort of like, it looks like an inset, basically. Ridge, outset, and inset. Okay, so they have an outset one and an inset one. Groove is very similar to the inset one. Double. Can't
[00:41:32] Jake Pacheco: you add like shadows and stuff like that in CSS also with the borders and
[00:41:36] Seth Whiting: whatnot?
Yeah. So the shadows don't have anything to do with the borders necessarily. What is it then? It's, it's just, it's called a box shadow. So you can, you can have a div or whatever element, like a box element. Yeah. So, you know, other examples would be like section or article. They all pretty much are just divs.
They do pretty much the same thing. It's just like semantic in your, in your markup like the, like Google might crawl it and treat an article different than a div basically but anyway so, you can have a div without a border. And still have a box shadow on it. So, it'll just look like it's floating.
It's shadowboxing. Exactly. Bad joke of
[00:42:30] Jake Pacheco: the day. Ayy. Ayy,
[00:42:33] Seth Whiting: bad joke of the day. So, yeah, anyway, tangent there.
[00:42:39] Jake Pacheco: Yeah. But oh side note, again. Sorry guys. But I said the bad joke of the day, so I have to tell you guys a
[00:42:47] Seth Whiting: good joke that I said today, which I was really proud of. We can't say it.
[00:42:51] Jake Pacheco: So there's this dude from Boston, and I, I love this guy.
He's one of my brother's clients. He owns a restaurant in Augusta. He's awesome. Really? And really great restaurant. So he walks by me. And since we met him, he's always like tried to like, I don't know, like do that like guy thing of like making funny like razzing you. And like, Ricky and I grew up in a house that That's how we showed love.
So it's like, that's just how it was. Like that's, we, we were always like that. So. What I'm trying to say is he's, he's in over his head with this and, and I've, I've had this joke about him for a while. And I never wanted to say it because I was like, ah, he's just so nice and stuff. And he comes in and I just got my haircut and he like rubs me on the head and he's like, that's a silly a haircut.
And I was like, I was like, oh yeah, well, and I turned to him and he just. He looks like your very typical dude from and you know, not to generalize, but dude from Southie, Boston, and he sounds like it too. And so he really, really tight shirt. But like not, not super jacked really or anything. And I'm just like, I'm like, you know, man, I was like, you just, you look like someone who does a lot of steroids and doesn't do the workout plan.
That's he does. And he like, yeah. Yeah. So, you know, nice. Make fun of my hair. That's what you get. So , you
[00:44:22] Seth Whiting: get murdered. Yeah, a little bit.
[00:44:25] Jake Pacheco: . It's, we, we've said worse jokes to him though before. He's, he's good. Anyways,
[00:44:29] Seth Whiting: anyways, . Nice. So yeah, 11. All right. Question number 11. I'm feeling okay about it. . What is the difference between.
padding and margin. Padding and margin? Yeah, in CSS. Padding and margin.
Isn't,
[00:44:51] Jake Pacheco: isn't
padding what would be? In between your like, the
[00:44:57] Seth Whiting: space, the space between your,
[00:45:01] Jake Pacheco: your, like, paragraph and
[00:45:03] Seth Whiting: headline. Is that not? I mean, it, it could be. Okay.
[00:45:09] Jake Pacheco: I know that, I know that one of them you can get, like, extremely specific with,
[00:45:14] Seth Whiting: Like, like, pixel size. And. Both of them.
[00:45:19] Jake Pacheco: Both of them you can?
Yeah. Padding and margin. Oh, is it your, your your padding between your words and your borders? Yeah. And, and your margin is
[00:45:33] Seth Whiting: the space in between your words? No. I
[00:45:36] Jake Pacheco: don't know. I, I, I don't know, I guess. I guess. I, I, I, Yeah. Cause I remember talking about it and like, but yeah, anyways, go for it, Seth, take it away.
Take me away. We'll get this one. I get a half
[00:45:49] Seth Whiting: point. Yeah. Yeah. You I'm dancing around it a lot. I think, I mean, like you, you said it correctly and I think that you understand it, I think for the padding one, but margin, margin, yeah. Yeah. So basically you can think of it as. Padding is the space inside of something.
And margin is the space on the outside of something. Okay,
[00:46:19] Jake Pacheco: alright, so your margin is outside of your border, in between your two borders, or
[00:46:23] Seth Whiting: whatever. Yeah, yeah, so like, it, it, but the two borders that you're talking about are on two separate things. Like two separate divs. Yeah, yeah, yeah, like,
[00:46:35] Jake Pacheco: yeah, two separate divs are your paragraph and your headline, or whatever.
Yeah.
[00:46:39] Seth Whiting: Or header. Header. Sorry. Yeah. Yeah. So, if you're, if you have a div and you have some text within the div and then you have another div right next to it or on top of it or below it, then the padding is going to be the space between the edge of that div and. The content within that div. So like the, the space between space between text and and the edge of the div, right.
And then if you have margin on it, then that's going to be on the outside. So it's going to be this, this. It's the space between the, the edge of the div and the edge of the next div of the next div. Yeah. Yeah. All right. Cool. Above it or around it. Yeah. Basically
[00:47:33] Jake Pacheco: everywhere, everywhere I went with this, except answering the question, right above it and around it and below it.
Yeah. Yeah. Yeah. There you go. All right. Well, you know, again, parse kind of right, but not fully. No,
[00:47:47] Seth Whiting: I mean, you, you've got padding. I got padding. Yeah. Yeah. You got it. I got padding. Nice. Cool. All right. Let me think. Sure. Let me think of like a react specific one. I think maybe actually let me ask you sort of a react adjacent one, which is.
Can you name two other JavaScript frameworks?
[00:48:14] Jake Pacheco: Oh, ho, ho, ho, ho. I, yeah, I think I can.
[00:48:18] Seth Whiting: I, eh, I don't know if that's written in
[00:48:22] Jake Pacheco: JavaScript. I think it is. Well, there's, there's,
[00:48:25] Seth Whiting: I,
[00:48:26] Jake Pacheco: I mean, I'm gonna go to an antiquated one, one that isn't really used as much anymore. Preact. But but,
[00:48:32] Seth Whiting: I don't even know if that's antiquated.
[00:48:35] Jake Pacheco: Well, isn't React built on Preact, so wouldn't it have all the
[00:48:38] Seth Whiting: capability, but no, it's the other way. Oh, okay. Well, Preact is built on React. Well, let's just cut
[00:48:45] Jake Pacheco: that part out and say that, yeah, Preact. And then is
[00:48:48] Seth Whiting: Swift written in JavaScript? No. Or is Swift its own thing entirely? Yeah, Swift is a language.
Okay, alright
[00:48:56] Jake Pacheco: yeah, I'm off then. Alright so, Angular.
[00:49:01] Seth Whiting: This one and preacts, you got your names too. Well,
[00:49:05] Jake Pacheco: now I'm on a roll here. I'm trying to think about that one. Adam, wasn't that one?
[00:49:11] Seth Whiting: No, that's, that's like the equivalent of VS code. Oh, okay. All right. Different one.
[00:49:17] Jake Pacheco: Yeah, then I guess, I guess, pre, I'm not super happy with Preact because I didn't know that it was still in use.
[00:49:23] Seth Whiting: Like, I'm not super happy that that's what I came up with.
[00:49:26] Jake Pacheco: So I, but yeah
yeah, I don't think I know many others. If I do, I can't think of
[00:49:32] Seth Whiting: any right now. So yeah. Yeah. Yeah. But you asked for two and you got two.
[00:49:36] Jake Pacheco: Yeah. Angular. Yep.
[00:49:37] Seth Whiting: Yep. That's a good one. Yeah. Name another one for us. So there's Svelte. We've talked about Svelte a few times.
[00:49:43] Jake Pacheco: I was thinking Svelte when I was, when I said Swift is what I was.
[00:49:47] Seth Whiting: Oh, yeah. Yeah. Yeah. That makes sense. Because Svelte's Swift. I don't know. It was in my head. And then. And then Vue is another one. Vue.
[00:49:55] Jake Pacheco: Yeah. I don't think about
[00:49:56] Seth Whiting: that one very often though. Yeah. Svelte. Yeah. What was the one you haven't talked about it
[00:49:59] Jake Pacheco: much was it, was it, was it it's felt that was like unanimously loved by all coders basically.
Yeah. They really enjoy it.
[00:50:09] Seth Whiting: Yeah. Alrighty. Yeah. All right. So yeah. Okay. Cool. Yeah, some other ones, if you're curious, would be are there any like big ones that are currently used that we didn't, I think those are like the big ones. Yeah. And then like antiquated ones, I would say are like, there, there was one that was really big for a while called Ember and then another one called Backbone that was big for a while.
Yeah. And there's one called Knockout, which is more of like a, I think that was more of like a library than a framework, but I could be wrong that that was what we were using on the music publishing when me and Kenny House way back in the day, like my, the first. Like project that I've worked on, we started using knockout during like towards the end and a lot of people, well, not a lot of people, but basically like the creator of Svelte recently like made an update to Svelte and he was like called out to, to.
Knock out saying like they got it right way way back a long time ago Let's go implementing something that like they they did really well. So that's cool. Anyway,
[00:51:24] Jake Pacheco: What's I'm sorry to get a side track to you. Ruby on
[00:51:28] Seth Whiting: Rails, what is that? Yes. So Ruby is a language Okay. All right, and And Rails is a, a, a framework for the language.
All right. I, I just, I, I've,
[00:51:39] Jake Pacheco: I've heard it a few times and I wasn't sure what, what
[00:51:41] Seth Whiting: those were. Okay. Anyways, Ruby is another one that's like, like developers love Ruby. It's like this, the syntax of it is so like clean and concise. And like, you can do a lot with not a ton of code from what I hear. I've only written like a few, like I've taken like, Code Academy course on it, I think back in the day, like way back in the day, like when I was like, just learning, cause that, it was like a big, a big thing back then.
And then it sort of like, kind of started getting the, the reputation of like not being super scalable. So like, if you're, if you're building something like serious, then you should be using something else like Python or You know, yeah, like node hasn't really gotten that reputation, which is cool. Yeah.
But it, it does currently now sort of like people are kind of getting onto like the, the, the, the rust hype train for sure. And because of that, people are like, well, like node is slow compared to a lot of things. So like, a lot of people are jumping on to like Rust and Go is another big one. And and then there's like, there's always like, well, so like Python.
Has like a good reputation and like, but it's, it also sort of has the same reputation of node where like both of them are kind of equally slow, I think. Until, but one, one good thing about Python is that you can run straight up C code within Python, which like certain packages. Will run like blazingly fast because they're written in C and not in Python and they're like interoperable C is like a
[00:53:50] Jake Pacheco: What some code get compiled to, right?
But yeah, so it usually has to like compile down to C whereas it can just run it right off the bat, like in
[00:54:02] Seth Whiting: Python. Yeah. Yeah. Like Python and Python and JavaScript and Ruby are all based on the C language. Yeah.
[00:54:12] Jake Pacheco: Yeah. Yeah. But, but Python doesn't have to compile it.
[00:54:15] Seth Whiting: Is that the idea? Python, Python is
[00:54:19] Jake Pacheco: compiled the right word.
Do you know what I mean? It doesn't have to like,
[00:54:21] Seth Whiting: go ahead and translate it to that. Yeah. So I'm talking a little bit out of my depth right now. It's okay. We can, but yeah, like, I think basically Python compiles down to C, which then gets compiled down to Assembly code that runs like right on your machine.
Like that compiles down to binary at that point and whatnot. But I think there is that intermediary step where Python goes down to just plain C. And same with JavaScript. And that's why they're called compiled languages. I think it's compiled languages. Versus, oh, wait, no, no, no. Compiled languages would be the, the other, like C is a compiled language.
I think C and Rust is, and like Go is because they, they get compiled down straight down to to assembly code. Yeah, yeah. JavaScript and Python and Ruby are interpreted languages, so they're all like
[00:55:26] Jake Pacheco: a third level step. Yeah, yeah, yeah,
[00:55:28] Seth Whiting: yeah. Alrighty. Well, that makes sense. I had a thought when you said,
[00:55:32] Jake Pacheco: When you're talking
[00:55:32] Seth Whiting: about having I don't
[00:55:35] Jake Pacheco: know, you're saying that With the person that you were working with at your first job and stuff.
I had a thought, you want to just like, give me a heads up whenever it is, be it a year from now or whatever. Mm hmm. When I get to the point where you were. Mm
[00:55:53] Seth Whiting: hmm. When you got your first gig.
[00:55:55] Jake Pacheco: Like, like with your friend. Yeah. Even. You know what I mean? Yeah. Let me know when
[00:56:00] Seth Whiting: that happens. I mean, honestly, it might be close.
[00:56:05] Jake Pacheco: I thought you were about to say it might happen, but I was going to be like, Hey man.
[00:56:11] Seth Whiting: Yeah. I mean, basically I, I had taken a web design course in college and then I did the web development bootcamp at Nashville software school. Yeah. Shout out to Nashville software school. And I only did like the first half of the web development bootcamp, which was like the, the front end basically, and didn't get into the backend, which was Ruby on Rails.
Yeah. I would have been learning Ruby on Rails for the whole next three months if I didn't stop. So basically all I knew was. HTML and CSS, and I was pretty good at, at those like compared to the other people in the class. And, and that wasn't necessarily because I was better at like programming of those languages.
It was more just like I had a knack for like what would look good on a page and what wouldn't kind of thing. Cool. Yeah. And because, because I knew how to code well enough. Like, I was able to make the things that looked good, you know, in my head. So,
as far as like the actual programming part of it, like the, the JavaScript and stuff like I had gotten into a bit of that and like went through like loops and conditionals and stuff, but definitely like once I was on the job. Learned way more, you know, like way, way, way more. So basically like when I started, I had like a very thin layer of like base knowledge to go off of.
Yeah. So I mean, you might be, do you think you would have passed this test? Oh, good question. Definitely not the react questions cause I hadn't never touched react at that point. Well, so far I'm not passing the react questions either. So I think you got like
[00:58:14] Jake Pacheco: three out of
[00:58:14] Seth Whiting: the five, I think, or something.
I need to ask you more react questions then.
[00:58:18] Jake Pacheco: So yeah, back to the questions, but I was just, I just want you to give me a heads up at some point when you're like, Oh, Jake, you're, I think you're at that point. It's like, that'll just kind of motivate me to be like, okay, I'm getting somewhere to the point where I can like grasp something,
[00:58:33] Seth Whiting: I guess. Yeah. I mean, I like really, I had very little knowledge, you know, the, what I had was a friend who hooked me up, you know?
Yeah. Yeah. And like, I. If I had something to offer you, I would hook you up for sure. And I know that's not, I appreciate yourself, but like, that's something that I've thought about several times. Like, you know, can, could I, you know, like, is there something that I could like hook Jake up with? Cause that's really what you need is like, you just need somebody to pay you full time so that you don't have to do anything else and then once you don't have to do anything else.
You spend all your time coding and that's like what you need to do is just spend a lot of time coding and you'll get better at coding, you
[00:59:27] Jake Pacheco: know, currently I have kind of like two dreams. One is definitely earlier than the other one. The first one is that I would love to do that, like just start like.
Full time coding. I think that would be incredible just because I feel like I would learn so much and there wouldn't be Other nagging things in my head. It would just be this, you know what I mean? Yeah. And then My other dream is way further along. I would love to work with you at some point I think that'd be dope.
You know what I mean? I mean and that's like I want to be dope at it at that point, like good at it and know what the heck I'm doing. Yeah, yeah, because
[01:00:04] Seth Whiting: I don't
[01:00:04] Jake Pacheco: want to be a headache, you know, someone else's headache, and then I'll come and work for you. And it'd be like, sweet, you know, goals. 12.
[01:00:13] Seth Whiting: Cool.
All right, let me think of a react one. Okay, so when you, so we've talked about props. But when you have like a, a child component within a parent component, and you're passing props down to that child component in, in the like component file, like that child component file and the, like the code for that component, you access the props and they're called props at that point, but what are they called when, when you're like passing them through from the.
parent to the child. So like when you have like a reptile list and then you have a reptile and you on that reptile, you say name equals you know, a string of the name, or you could have like name equals reptile. name. When you're passing that through, what is that called? Like, passing a what to that component?
Attribute? Yes. Ehhh. Got it.
[01:01:23] Jake Pacheco: Ehhh. Dude, I didn't have it until I said it. Nice. I was like, wait, what is it? What is it? And then, and, The last sentence you said, I was like, Oh, an attribute. Yeah.
[01:01:33] Seth Whiting: Yeah. Okay. Hey. Yeah. And hopefully, hopefully I have that. Right. Like I, that's how I think of them and how I have always talked about them.
Oh, I
[01:01:44] Jake Pacheco: mean, a parent passes on attributes to their children.
[01:01:47] Seth Whiting: Yeah, but then they access them. The child accesses them via props. So anyway, anyways, yeah. And props is short for properties. If you didn't know
yeah, lucky number 13. Yeah. So let me think when you are,
when you're writing markup within a react project, like when you, when you have a file, like a component file.
What what do you have to use at the end of that file name in order for it to, to kind of register it as like markup and not just straight up JavaScript code? Oh, the actual file? The file name. Is it JSX?
[01:02:39] Jake Pacheco: Yeah. JSX. Yeah,
[01:02:41] Seth Whiting: yeah. Yeah. And then what about when you're working with TypeScript? What the heck was it? Is it, it is, it's,
[01:02:49] Jake Pacheco: I wanna say TSX, but it's not that it's t known as
[01:02:52] Seth Whiting: that. Is it? It is that. Okay. Cool. Cool.
[01:02:55] Jake Pacheco: I, I wasn't sure if I was, yeah. Okay. Yeah, I wasn't thinking, I, I wasn't sure if I was thinking of cars too much. Okay. , there's a, there's an accurate TSS anyways.
[01:03:04] Seth Whiting: Yes. Okay. TSX.
Nice. A
Yeah. There should be like some kind of react component called Acura tsx. Right. Just like it's just a picture of an Acura . Yeah. It's just a, that'd be, that'd be cute. . . So all right. Question 14 or 15 now? 14. Yeah, I think so.
[01:03:30] Jake Pacheco: I might have lost count, so let's go with 14 and we'll, you know, Yeah. Correct us in the comments.
[01:03:36] Seth Whiting: Just like, comment, grab. Okay, so when you, when you have like, third party packages that you're using within your project, Yeah. Where do those packages all go? There's a specific folder that they all go into. I
[01:03:55] Jake Pacheco: in my head right now, I'm like, I will not look at my code. I will not a specific folder. Is it your
let me think, cause I was just looking at my code and I'm trying to think of what it is, what it's called, I, cause it's not root. Is it? No, it's not root. It's that's Android phones. I,
is it your
[01:04:13] Seth Whiting: react folder? No, I'm trying to think like when you, when you run like NPM install. Yeah. React. Yeah. For instance. Okay. It, it all defaults to going into one specific folder and we've talked about it before, but not, not a ton. It's not main. jsx is it? No. It's Oh,
[01:04:37] Jake Pacheco: Oh, I, I do know it. It's Oh, come on brain.
Yeah. Cause it's not. It's not a name that I would think would be the name for it. Huh. JSON? Nope. Pardon my French.
[01:04:52] Seth Whiting: So the, there is like a package. json that like lists all of them. Mm hmm. So you're, you know, kind of on the right track. Kind of close. But the, the folders. Sourceful src. Now that's where, like, the code that you write will go. Usually.
[01:05:09] Jake Pacheco: So frustrating. Modules?
[01:05:13] Seth Whiting: So close. That's the second word.
There's two words though.
[01:05:18] Jake Pacheco: React modules.
[01:05:20] Seth Whiting: I, I mean, you're sort of on the right track. Yeah. It's a little confusing though. Is it
[01:05:28] Jake Pacheco: it's not
[01:05:29] Seth Whiting: JavaScript modules. No, it's you. You're very close, but.
It's not like system
[01:05:36] Jake Pacheco: modules, something. Now it's not there. It's not that's a module. You're
[01:05:41] Seth Whiting: so, so close. You're right. Yeah. You're right on it, but it's confusing because. You don't think of it in like a front end context, basically, but it's node modules.
[01:05:53] Jake Pacheco: Node modules, dang it! Oh, that's so frustrating.
[01:05:57] Seth Whiting: Yeah.
I've looked it up. Node is like the back end version of JavaScript, basically, but you're not on the back end, but you're still accessing something called node modules. Node modules. Yeah, yeah. Because they're all node. Yeah. Okay. It is what it is. I mean, most of them have nothing to do with node. I would say, well, I don't know about most of them, but, but a lot of them, a lot of them have nothing to do with node.
It's just that they're, they're using the, the node package manager is like where NPM. Yeah. Yeah. It's like where they're all kind of like hosted. So they just kind of like used the word node in there. I mean, I'm, that's my, that's my best guess. I'm pretty sure that's what's going on is just like, it's run by the node package manager like group and because the word node is in node package manager, they decided that whatever you download it from them is going to go into the node modules folder, but Yeah.
[01:07:06] Jake Pacheco: Now, now we know . Yeah.
[01:07:09] Seth Whiting: And like, you know, if you work for NPM and I'm way off , just let me know. Listen to a different podcast. No, , stop listening now. Yeah.
[01:07:17] Jake Pacheco: If you don't like it, we're not gonna stop teaching
[01:07:19] Seth Whiting: it. . Yeah, yeah, yeah. Anyways yeah. Yeah. 15. Yeah. So, so this is number 15. Mm-Hmm. coming up. Coming, coming right now.
Is it? I think it is. . Yep. Coming down the pipe. Sound a bite? Okay. Lemme think here. Lemme think. Lemme think, lemme think.
He's making a Popeye face.
I'm trying think of like react specific stuff. Mm-Hmm. . But there's, I mean, like, go for other
[01:07:47] Jake Pacheco: stuff too,
[01:07:47] Seth Whiting: if you want. It's, yeah. There, there's like not a ton to react other than like the, like, like I went over in the React, like, yeah. Episode. It's basically like it gives you the power to write things with JSX and they also give you hooks to use for like ease of functionality and stuff.
But let me think of just like JavaScript specific stuff. I think can you name
two different looping functions or two different types of loops
[01:08:21] Jake Pacheco: either or? Yeah. Yeah. Yeah. Because I have a tenuous grasp on loops, if you haven't noticed. Two different types of loops. I, I mean,
do you mean like, like,
[01:08:36] Seth Whiting: yeah,
[01:08:37] Jake Pacheco: Dot length, like those kinds of things? Or what, what are you talking about?
[01:08:41] Seth Whiting: No. No
[01:08:43] Jake Pacheco: looping functions. So,
[01:08:45] Seth Whiting: yeah. Like, do you, can you think of, can you think of a time when you wrote a loop and like, how you set up that loop? No, no,
[01:08:55] Jake Pacheco: honestly, to be completely honest with you, Seth, no. Nope. So I'm just going to call this one.
He did not pass this. Yeah. It's raining men. I really
[01:09:05] Seth Whiting: wish I had that button. I think it'd be funny.
[01:09:08] Jake Pacheco: I've been watching a lot. No, I I've been watching a lot of Kill Tony and they just throw that in there. Most of it's hilarious.
[01:09:14] Seth Whiting: It's
[01:09:15] Jake Pacheco: stolen anyways. It's a comedy show.
[01:09:18] Seth Whiting: Yeah. Anyways, . All right. Do you want me to bail you out?
Yes. Bail me out, Seth. I bailed . So the, the kind of like most basic loop out there is just a four loop. Mm-Hmm. . Do you remember talking about four loops before?
[01:09:37] Jake Pacheco: Is that like, for every one of these do a thing?
[01:09:41] Seth Whiting: Is that like that? Yeah. Yes. Yeah. And the, the most basic way to set it up is to say like for let I equal zero semi colon I is less than the length of the array semi colon I plus plus, and then that's all within parentheses.
And then you open up some curly braces and then write your code that you're going to loop over. Within those curly braces so that's giving you like access to I, which is like the index. Mm hmm. And then you can say like, within right within there, you can say like, current item, like const current item is equal to the name of the array and then square bracket I Like, and then close square bracket.
So basically like it's equal to whichever, whichever item we're currently on, cause you're accessing the, the item in the array that is at the position, like that has the index of I and I, you know, it's going to be. Incrementing. So it'll start with zero, so it'll go like the first item, then the second item, third item, fourth item.
Yeah. AKA the item at index zero, index one, index two, index three. Yeah. There's another way that you can write a for loop where you can just say, for, and then parentheses, const item of items, close parentheses, and then open curly braces. Which is like way more straightforward, you know, like then you, then you just work with item or you could name it current item, you know, or you could name it like reptile, of reptiles, you know, whatever, whatever you're working with and whatever you want to name it.
So that's, that's the for loop and that's like the most basic. And then there's like array dot for each. Where you, you just have the, the array and then you do dot for each on it and that will give you a loop for every item in that array. Yeah. And and then there's map, filter and reduce are all looping functions.
Okay.
[01:12:15] Jake Pacheco: If you remember those vividly, but I didn't, I, I guess in my mind I didn't remember
[01:12:21] Seth Whiting: that they were looping functions. Yeah. Yeah. Yeah. So those are, those are probably all the most common ones. And then there's a bunch of other functions that execute loops, but the, the like purpose of them is not necessarily like the point of them is not the loop itself.
So, and, and an example of that is like array dot find. And then with within the like find, you're basically saying like. I is equal to like the, I'm trying to think of like what you would call it, like matching index or whatever, whatever you want to call it. But like, if you're trying to find a specific item within that array, then, then you, you do the dot find and that will give you the first one that it finds that matches that criteria.
Yeah. Does that make sense? Yeah. Yeah. Yeah. Yeah. So it's, it's. Like I said, the purpose of that thing is just to grab the one thing that matches and it's not necessarily to Execute a block of code within a loop. Yeah, like it's like many of the other ones are alright. Alright, huh? So there's there's find and then there's Like some so yeah, it's that will give you a true or false value of if any item in the array And if it meets a certain criteria, it'll just say true.
And if it doesn't, it'll just say false, you know? Okay. Cool. And yeah, so there's, there's like a good handful more like that where they do execute a loop, but the, the point is not the loop. Yeah. Yeah. It's something. Yeah. Alrighty.
[01:14:13] Jake Pacheco: Cool. Yeah. Well, loops. Jake needs to study loops.
[01:14:18] Seth Whiting: Yeah. You could do the Map, Filter, Reduce course on Codecademy and get really good.
Yeah. And, yeah. I'm in.
[01:14:27] Jake Pacheco: Yeah. Cool.
[01:14:29] Seth Whiting: Cool. I think was that 15 or 16? That was 15. I think that's a good number. I think that's a great number. Yeah.
[01:14:37] Jake Pacheco: So 15, we learned a little something. I learned a little something. Maybe you learned a little something.
[01:14:42] Seth Whiting: I don't know.
But yeah. Yeah. Cool. Well, yeah. Thanks for thanks for talking. Thanks for listening. Anybody that's listening, if there is anybody listening. And and thank you Seth, as usual. Yeah. If yeah, hopefully, hopefully you like, I, I think the ones that you got wrong are like the important ones because you now know the answers to them and Yeah.
Yeah. You know, maybe you'll, maybe you'll remember them more because we went over them again. I think I'm talking about maybe , hopefully the people playing along at home got a bunch of them right. And are live tweeting us right now. Yeah.
[01:15:21] Jake Pacheco: Fingers crossed.
[01:15:22] Seth Whiting: Live tweets. Yeah.
[01:15:25] Jake Pacheco: But, yeah. Thank you, Seth. Thanks to anyone who's listening.
And I hope everyone has a good week.
[01:15:31] Seth Whiting: Yeah. Yeah. Sweet. Keep swimming. Keep at it. And we'll talk to you next time. Talk to you next time. All right. See ya. Peace.