INIT

Episode 2: Web Development Fundamentals (Over)Simplified

Published: Tue, May 16, 2023

(Auto-Generated) Episode Transcript:

Seth Whiting: Hey everyone. I am Seth Whiting. I'm a developer for about 10 years now from Portland, Maine. And you are? I am Jacob

Jake Pacheco: Paco, and I am about

Seth Whiting: five weeks into

Jake Pacheco: developing five weeks or learning it

Seth Whiting: rather, has it really been five weeks. Wow. That's something like that. I mean, that's, that's a good chunk. Yeah.

Yeah.

Jake Pacheco: It's like four or five

Seth Whiting: started on my vacation. Yeah. Longer than I've stuck with most like. Projects that I have, like, yeah. Started. Yeah. So it's good. I mean, it's

Jake Pacheco: not, it's not, let's, let's also be very clear. It's not like I'm, I'm doing it every day after you get some will tower to like Yeah. So the mental anguish that is learning some of this.

Seth Whiting: Yeah. Well, yeah, if, if you didn't listen to the last episode, I would probably recommend going back and listening to it just because there's a good chance we'll be referring to some of the stuff that we've already talked about on that one. I, I think that it's probably going to turn out that this podcast is sort of like each episode kind of builds on the, the previous episodes.

So maybe listening to it in sequence would be the best way to go about it. Although if you see like a title of an episode that sounds like something that you need to. No, right now, you know, by all means, skip to that. If, if you, if you're not starting from square one, basically, if you are starting from square one, go back and listen to episode one, I would say.

So this episode we wanted to cover the fundamentals of web development in general. Yeah, just wanted to kind of give, like, get straight to something like that could be potentially pretty valuable, at least like conceptually for, for anyone just starting out. And Jake, I, I went over like what I consider the web, the web development fundamentals with you.

Do you remember like what I said and do you know, kind of like what each of them mean or are? Slightly,

Jake Pacheco: I remember Basically a a lot of websites in gen Oh, in general, it's like HTML is used a ton. I think it's c plus plus

Seth Whiting: is used quite a bit. Is that right? It's close, very close. Close.

Css, C,

Jake Pacheco: css yeah, it's C Yeah, whatever. And then I, I know that JavaScript as well is used in a lot of 'em. Yeah. And I know that a lot of people use actual like Almost like web development software rather than general coding for it, what, what was that website called again? Or whatever?

It's that WordPress. WordPress like a lot of people are using WordPress and stuff like that, like kind of an astronomical amount of the websites that you see or right. Made from WordPress,

Seth Whiting: right? Yeah. But then there's even, even ones that like, go beyond that. Like Squarespace is another one where that, that's a content management system, but like you never get into the code.

And that, but that as well as, WordPress as well as like Wix and any other content management system or like no code, quote unquote platform. Yes. Those are all spitting out HT m l, CSS and JavaScript at the end of the day. Hmm.

Jake Pacheco: So I guess a question on that would be, do you need to know those three languages as a base to create a website without using

Seth Whiting: one of those?

The answer is yes. And so the, but with like sort of a caveat where like I told you to focus on JavaScript because that's by far the most complex of the three and also the most fun of the three. You're, you're gonna be like, Doing stuff and like making things, do things in response. And that's always like a lot more like instant gratification than like, Hey, I wrote some code and now I can see some text on a page and look it turned purple.

You know, like that, that can, that can be fun. But like, but like with JavaScript, you could like have a slider underneath that. And you know, as you slide it back and forth, the text goes like to like 200 size font, back down to 10 size font, you know, like, and going back and forth and like growing and shrinking like that, that to me is more fun than just like, You know, showing something on a page and making it look nice or, or, or not nice or whatever.

Yeah.

Jake Pacheco: Yeah. My head's beginning to wrap around the difference between just cause like at the beginning you don't really understand at all. Yeah. The difference between like, what is html, what is JavaScript? Yeah. Like what, like what is, and my head's beginning, I think, to wrap around that basically like, And you might have even said these words to me and it just didn't hit.

Yeah. But basically like JavaScript, like introduces

Seth Whiting: functionality to it. Yeah. Like making it so it actually like does

Jake Pacheco: a thing. Yeah. You can make it so it schedules or does whatever you want and calls to other code to do stuff with that. But like mm-hmm. I, I guess I, I don't think that I really understood that before.

I was like, oh, so you, can you just write a whole like webpage in JavaScript? No, because H T M L is more of like, actually like the, the look of the whole system and then your Java script backs up that look by making it, so, like, there's a lot of stuff that like can I, I don't know

Seth Whiting: how to explain it, I guess.

Yeah. So, so, so let me, let me, let me give you even more. It could look

Jake Pacheco: pretty, it, it could look pretty. And then JavaScript takes it away to make it So the pretty thing that you click actually does a thing.

Seth Whiting: Yeah. Yes. Is that right? Yes, kind. It is. So, so. But here's a question that I'll pose to you, which I'm pretty sure you don't know the answer to.

And don't, don't worry if you don't know the answer, I'm sure I don't. So, so the question is, and this, this is like web development 1 0 1, like if, if I were to, to like if you were to take a course on web development, they, they would probably always tell you to do H T M L and h t m L and c s s first.

Mm-hmm. Just because you, you can't do much without those and then do JavaScript. But to me, to me, I instant gratification is like very important. You know, when you're learning something, you want to like, be excited about it. Yeah. So do you know the difference between HT m L and c s s? No idea. Okay.

No clue

Jake Pacheco: whatsoever. Yeah. Like, I'm, I'm like, I haven't, I haven't even, it's, it's funny because like, because I've been focused so heavily on like, literally just JavaScript, and when I say literally just JavaScript, I haven't like Yeah. Touched to anything else. I I downloaded an app to help me practice with some stuff, and it was help, it, it was letting me use or throw in JavaScript inside of H T M L.

I think it was like, you'd have like script and then you, you do it right? Your Yeah, yeah. Script tag. Yeah.

Seth Whiting: But

Jake Pacheco: that's literally all I've seen. Yeah. Of any of that stuff. Right. Basically. Cause like I've, and, and. I don't know. I don't know why, but I'm just like

Seth Whiting: hyper focusing on No, that's good. That's what I, that's what I wanted you to do, so Good, good little boy.

It's good. That don't orders. Yeah. So yeah, so this, this is going to be like a, an important lesson for you and for anyone else listening to this who is just focusing on JavaScript, you're gonna need to know this eventually. But, but like I said, like if you're just starting out, starting with JavaScript is a fine place to start.

Because you, inevitably you will get into HT m l and c s s and at that point, you know, it'll be like, You're already kind of like locked into learning code. So like, it's, it's like a bit more boring than writing JavaScript. It's, it's vitally important, but like, basically like you're writing it because you have to in order to make your JavaScript work as opposed to like writing it just to write it and then learning JavaScript later.

So html, CSS and JavaScript. The kind of mental model, or like the analogy that I like to use for myself, and I think other people might find it helpful, is H T M L is like the skeleton of your webpage, and then c s s is like the skin of your webpage. And so it's all like visual aesthetic and then JavaScript is like the muscles that make everything just kind of like work together and, and actually like move around and function.

So what I mean by that is, like H T M L basically comprise, is comprised of invisible boxes and text. So these invisible boxes are called divs, which is I think short for like division. Like it's just like a division of the page. I guess I, I'm not positive that that's what is short for, but that's the, the thing that would make the most sense to me.

But they're called Diviv Div V and. So you open it with like an angle bracket and then div V and then close it with a angle bracket, and then you wrap stuff within those things, which is not super important that you like, retain what I just said. Yeah, but so you've got divs and then you've got text elements that are or like tags.

So e everything in H M L is sort of like wrapped in what are called tags, which are just things that are within open and closed angle brackets, which are just sort of like the greater than and less than symbols. So Text tags, like examples of those would be like H one, H two, H three, all the way to H six.

Those are called headers, header tags. So like if you have like a section on a page that has like a title of a section that might be like an H one or an H two. And then for each like paragraph within that section, that would be wrapped in a p tag, which is short for paragraph. And then there are other tags like spans labels, that kind of thing.

So basically all it is is like these are just the base elements on a page. And then c s s takes all of those elements and it says this diviv has like a. So there, there's something called the box model, which just means that there's margin on the outside of the box, which is spacing on the outside of the box.

So like how far this box is from the next box or from the edge of the page or whatever. And then there's padding on the inside of the invisible box, which is like if you have two boxes next to each other that don't have a margin, then that means that they're right up next to each other. But there can still be space between the text of one box and the text of another box because there's padding inside of it.

So so if you say, and everything is in the Everything is measured in pixels. So if you, if you know about like the pixels on your screen then like a typical website or, or sorry, a typical, like I think like a MacBook Pro 13 inch would be like 1,440 pixels wide. I, I'm, I'm not positive about that exact thing, but that, but each, I believe,

Jake Pacheco: I, I believe it is cuz that's a resolution.

Okay. Of pixel times a day anyway, so Yeah. It'd be like

Seth Whiting: 14, 40 guys. Yeah. Whatever. Yeah. So the text on your page is typically the, the standard for some reason, the, the, the standard text size on a webpage is 16 pixels. So that can give you sort of like a. A baseline of like how big things are on a page.

So your screen is about 1440. The text on a given like paragraph is usually 16 pixels. And then so if you have a box with 16 pixels of space on the inside, then you know that it's gonna be about the size of a, a typical character of text before it hits like the side of the page, or, yeah, before it hits the next box.

So c s s controls the spacing of the page of the elements on a page, the H T M L elements on a page. Yeah. It also controls the size of each element on a page. So you could give it a height, you could give it a width all of these boxes for fonts like text. You don't give it a height and a width, you just give it a font size.

So you can say, you know, it starts at 16, but you could make it 200, you can make it 10. Hmm. Yeah. And then it controls the colors of everything on the page. So e everything like visually, aesthetically on a page is controlled by c s s. And real quick, I'm gonna backtrack and just tell you. H T M L stands for hypertext markup language.

It's not really important that you know what all of that means. Basically, it's, it's just the concept of text on a page that you can potentially click on to get to other pages. That's, that's what hypertext is, is, is like, it allows for links on a page. Yeah. That, that was like a new thing with H T M L and that's why they called it that.

But it's really just, just elements on a page. Yeah. CSS stands for cascading style sheets. So everything stylistically is controlled by c s s, and the reason that it's called cascading is because it starts at the top of your c s s file and reads all the way down. And if you want to overwrite anything that you wrote at the top, you can overwrite it at the bottom.

So if you say like, all H one s are 50 pixels large. Mm-hmm. And then at the bottom of your c s s file, you say, just kidding. All H one s are 75 pixels large. Yeah. It, it will go with the last one. It's not, okay. So kind of,

Jake Pacheco: it kind of works a bit like a what was it? A, a let statement

Seth Whiting: I think. Yeah.

Yeah. So like you can overwrite let this,

Jake Pacheco: and then you can kind of

Seth Whiting: overwrite it or change it as you go on. Yeah. Yeah. And the, but the way in which c s s does it is just by like cascading down the, the file. Mm-hmm. So and that, that's more important later. Like I'll, I'll get to kind of like why that's important.

So the c s s can control the spacing on the page. It can control the colors on a page, it can control the size of everything on the page. Lemme think of anything else. Like those are, those are sort of like the main things I would say. And then so coming, coming back to the whole cascading thing with each H T M L element, so you can have a diviv and then within that diviv you can have an H one and a p, like a paragraph.

Mm-hmm. And, and you can have like five of those divs that all have an H one and a paragraph. So, and, and imagine that they're all stacked on top of each other. So basically you're reading a blog at this point with like sections of the blog with a, a title and a paragraph of like description, like a title and a description of of Yes.

Section of that page. So w on the wrapping box called a diviv. So it, like, you can think of a box of a diviv as an invisible box, like I said. Mm-hmm. So each of those sections is almost always going to be wrapped in a, in a diviv. So so that you can control, you know, the spacing between one section and the next section and, and whatever.

Hmm. So on any of these tags, you can give what's called an ID or a class. And IDs are supposed to be unique. So you could say this, this particular section has an ID of section one, and then this one has an ID of section two. Yeah. But then classes don't have to be unique. Classes are meant to like kind of group things together.

So if you have a diviv with an ID of section one, but then it has a class of like blue background or something like that, or like background one and then another one that's section two, the ID is section two, but then it has a class of background one as well. Then you can apply c s s to a class or you can apply c s s to the section.

Or, sorry, not the section, my bad. You can apply the, the, the c s s to IDs and classes or the tags themselves. Okay. One second.

Hey. Oh really? I haven't gotten a SNOO or anything. Okay, well I can go grab him. No. Well, like how long has it gonna come? I don't know. I, it didn't alert me. Water, anything. Hey, sorry. Did you hear any that? It's all good. No,

Jake Pacheco: I just heard, I

Seth Whiting: didn't hear anything. Yeah, apparently apparently Liam's been crying.

Yeah. Oh no.

Jake Pacheco: Yeah. The headphones

Seth Whiting: are too good. Yeah. But also I'm in the basement and he's on the second floor. I. Oh, I'll do it. Yeah. Yeah. So yeah, so c s s you can apply it to all divs, like you could just say like, divs all have a width of you know, 600 pixels or something like that. Yeah. Or, or you can apply it to the ID where it's like the diviv with the ID of section one has a height of 700 pixels and you know, like a, a width of 400 pixels if you want.

And then, and that,

Jake Pacheco: and that's kind of how, and that's kind of how you'd like size your, like maybe your header of your page

Seth Whiting: or something like that, kind of, yeah. So th this in particular would be for that everything. So it would be for that invisible box that's wrapping. Yeah. The, the header. Yeah. But like, yeah, it could be like, you could have a a diviv with an idea of header and have that be, you know, like full width across the top of your page and Yeah.

You know, you could have like other divs inside of that diviv that kind of like section up, like the links at the, the top bar of your page, that kind of thing. So

Jake Pacheco: it, when you say boxes, basically what's going on in my brain is when I've worked with like, I don't know if you're familiar with like open office or any like No, I mean really any office word program or anything like that.

Like you can like kind of create a box where you want your text to be in. Do you mean it's

Seth Whiting: like, it kind of.

Jake Pacheco: In your brain works that way where it's like, Nope, this is like, I'm gonna open up this, this part and it's gonna be my title and everything is going to fit inside of this box. Yeah. And then once I move away from that, the box leaves and now I just have my title or whatever.

And you can have multiple boxes in, in on the single page. Mm-hmm. But it obviously can't be

Seth Whiting: bigger than the pages. Is that kind of similar to it? Yeah. Yeah. Is that cuz that's what's going on in my brain when you say boxes. Yeah, for sure. Invisible boxes. Yeah. That's, that's definitely, you know, a a, a good way to think about it.

So in your cascading style sheet, you can reference the ht html by the tag name or an ID or a class. And if you say all divs have a width of 600 pixels but the one with an ID of. Section one has 400 pixels, then it'll make all of them 600 pixels except for that one. So that's kind of like the cascade of it.

And then, yeah, if you have a class where it's like background one, which is like a blue background on four out of five of the divs on that page, then it'll, you know, the, the default diviv doesn't have a background specified, so it'll just default to white, which is basically just saying like, no background.

And then the ones with the class will be cascaded, you know, down and, and we'll have the background color of blue. So that's sort of like how you, how you work with ht m l and c s s. Does that kind of clear up like what the two are Yeah. For you? Yeah, it does do have like questions about. Yeah.

Jake Pacheco: And I, I'll say, I really like your analogy about like the body parts part of it.

Yes. Because it's like, it just makes sense or the body systems it, it makes perfect sense. And that's kind of how I learn anyways is like, like I notice when I teach myself, like when I teach someone something mm-hmm. I oftentimes come up with an analogy that they'll kind of like be able to like Right.

Seth Whiting: Compare that something that they

Jake Pacheco: already know kind of a thing. Sure. That, that made, that made perfect sense. It's like the, so my understanding now at this point is c s s works on more like the looks of the thing. Mm-hmm. H T M L is the actual like, Structure of where the texts

Seth Whiting: are, and then

Jake Pacheco: mm-hmm.

JavaScript adds like all of the functionality to it to make it so it actually does things. Yeah. Other than just link you to other webpages which H T

Seth Whiting: M L does. Right. Yeah. And one, one other kind of like important element of HTML is like images. You know, you can have an image tag in your html, so like, you have to say like, this image is like on the page with html and then with CSS you can say, but it's round and it's mm-hmm.

You know, 50 pixels wide and 50 pixels tall, so you know that it's gonna kind of look like your Facebook avatar or something, you know, at that point. Yeah. Yeah. So yeah, so. And, and one, one, kind of like final point about all of them is H T M L is sort of like the base of the base mm-hmm. Where like mm-hmm.

If in, in our analogy, if you strip away the muscles, if you strip away the skin and like everything is like decomposed, you're all the, it's left is the skeleton. And that, that's the base of the base because you can make a whole webpage with just H T M L. Yeah. That's what

Jake Pacheco: I was gonna ask actually was just like, can you just have like a webpage?

It's just H H T M L. Right. But it just won't, it, it won't do anything other than provide

Seth Whiting: links or pictures. Yeah. Correct. It could, it could be text or Yeah. Pictures or Yeah. Or links like you said. Yeah. And and you can have. A whole webpage of Gest Ht m l You cannot have a whole webpage of just c s s.

You cannot have a whole webpage of just JavaScript. There always kind of needs to be h m L present on the webpage. And even with like React and stuff where you're basically like, you don't, the concept of H T M L and c s s kind of lives within your JavaScript at that point. You still need to have a base H T M L page there to kind of link that JavaScript to, and the, yeah, like, don't worry if you don't fully understand that.

You, you, you'll learn it once you get into like react.

Jake Pacheco: I think I, I, I think I kind of have a tenuous grasp of what you're saying, Uhhuh, because it doesn't seem like. Like in learning what I've learned with JavaScript, one of my questions that I, I was going to ask you and we get into it more later, is basically just it seems like it's a lot of

it's a lot of like problem solving or finding may, maybe you've already solved the problem and, but you need to make it so your web page can solve the problem for you. Mm-hmm. And how, and my question kind of was how does that become something else, like become like a, a webpage that does stuff and I guess that the answer would be it has to handshake with c s s and,

Seth Whiting: and and H T M L

Jake Pacheco: in order for it to like actually do a thing.

Mm-hmm. Without having the person have to just go and. Write it in the code. Yeah. To, to get their answer to, you know.

Seth Whiting: Yeah. So I was talking the problem, I was talking a lot about HTML and c s s and how they kind of like handshake and tie together. Mm-hmm. And it's actually the same with JavaScript. So with JavaScript, you, you write you will write code,

it, it depends on how you're writing it, but with vanilla JavaScripts quote unquote, which is just JavaScript with no libraries, no frameworks, no anything else. It's just like the code that the browser knows how to read natively. Basically you would say document dot, get element by id. And then section one.

So say like that this next Bit of JavaScript will affect my diviv with the ID of section one. So if you say like dot, like on, click it, it, it'll, it'll say like, when you click the that diviv then do something like make the c s s so that it has a, a height of, you know, 500 pixels as opposed to 300 pixels.

So it's like when you click it, make it grow kind of thing. Interesting.

Jake Pacheco: Yeah. Interesting. Because yeah, I was just

Seth Whiting: trying to like think, and

Jake Pacheco: I think I'm good. I'm getting way ahead of myself. I know I'm getting way ahead of myself, but I, but like, just when I'm using like Spotify or something. Mm-hmm. And I was thinking of this program that that Code Academy had me run and it was basically, It would create a random number, right?

Mm-hmm. And I was thinking about that and how with another program that it had made me run where, you know, if you click one number multiple times mm-hmm. It'll, or you write one word multiple times, then it'll tell you like, Hey, this word is the most popular, whatever. Or it matches with someone else's word that they've written or something like that.

Mm-hmm. And I guess that what you just said kind of makes me think that that's how you could kind of, like with the random number generator, you could almost make a, like your, a random playlist. Off of that because you could use like, it, like, okay, this song he's listened to multiple times and like, and so it keeps all of that digitally and then might bring you back to, okay, so you're getting all of these random songs that you'll probably like judging off of other people's likes and stuff like that.

Is that kind of like, I, I, I know I'm getting ahead of myself, but it just kind of like what you were just talking about kinda

Seth Whiting: That's, yeah, that's, so that's kinda how that might work, I guess. Like, yeah. Like shuffle

Jake Pacheco: play. It'll actually just like shuffle them for you.

Seth Whiting: It is that, is that like kind of a similar Yeah, so like so like, I, I don't, I don't know exactly if this is covering your, your question, but like, if you have a shuffle button and you have a bunch of songs on, in a, in a playlist.

Yeah. Then when you click, when you click the shuffle button, like basically it would be like document dot get element by id shuffle button, you know? Yeah. Yeah. On click then affect the list and kind of get the ID of each of the songs. Yeah. And shuffle it. Shuffle it all up and like basically like generate a random number and then whatever number it lands on play, the song that is associated with that number.

Like the, that's that number in the list. Yeah. You, you described

Jake Pacheco: it so much more eloquently, but yes, that's exactly what I was talking about. So that, that makes, yeah. Okay, cool. Hey,

Seth Whiting: that's, you're learning something. That's something just

Jake Pacheco: clicked in my head, so that's kind of cool. Like yeah, because it, it was, it was kind of bugging me a bit all week cuz it's like, you know, like you're finding out equations and stuff, but

Seth Whiting: I'm like mm-hmm.

How does this turn into an actual thing? Yeah, yeah. Like you know what I mean? Like, like how does it all tie together? Yeah. Like, yeah. Like, yeah. And

Jake Pacheco: I'm, I'm, I'm looking at a tree and wondering how it turns into a house, you know what I mean? Like,

Seth Whiting: like yeah. Like, and how, right. You know, so like a, a big, a big thing with HTML though that I didn't talk about.

That ties into JavaScript and with like, basically ties into like getting JavaScript from the front end to the back end basically is like the, the idea of forms. And within forms you have H T M L tags called inputs. And so each input can be like a, just a general text field or it could be like a select box where it's like you select what state you live in or something where it kind of like drops down like a list.

Yeah. So all of those are different H T M L elements. And then when you submit the form, it's like on on click submit button, you know, do something form, which is like send it off to the database, you know, save this, save a record of, of what this person just entered into this form and then.

Eventually you retrieve that form and display it on a page in a particular way with your H T M L and your c s s. You know what I'm saying? Yeah.

Jake Pacheco: Yeah. So basically when we do something like that, like when we scroll through and like click a bunch of different options and then press submit. Mm-hmm. Does it kind of throw each one of those options into the actual code so it calls, so

Seth Whiting: it.

Jake Pacheco: Says like, if chosen, you know, Alabama, then it, that's gonna coincide with this, and if chosen this state, then it'll coincide with that. Is that kind of how that

Seth Whiting: works? Like yeah. So is, is that what you mean, or? Yeah, so, well basically I'm, I'm just saying like another big way that JavaScript will interact with H D M L is through the use of forms and sending the data from those forms off into a database, and then eventually retrieving that data back from, you know, what that person entered from the database and displaying it somewhere on a page.

Like, like if you have like a list of people and you click on one of them, then you see everything that that person entered on that form. Yeah. So yeah, so that's, that's all I'm saying. Eventually I can get into like, yeah, more detail about like how that, how that works and everything. But for now, Basically it's just like classes and IDs are useful for both your CSS and your JavaScripts.

Like referencing things and also the tags themselves, like you could say document dot, get element by tag name and and reference all of the divs on a page if you wanted to. Hmm. You that's pretty serious. Would most likely never do that because divs are so ubiquitous. But you could say like, access all of the H one s you know, that, that would be more likely, I guess.

Yeah. To,

Jake Pacheco: to be able to like compile from whatever instead of like calling one specific one or

Seth Whiting: something. Is that what you mean? Yeah. Yeah. Like if you, if you wanted to reference all of them versus just one of them, you, yeah. You could if you wanted to. Yeah. Yeah.

Jake Pacheco: Huh. Interesting. Yeah, it's

Seth Whiting: it's interesting.

Cool. Well, enough of me just like teaching. Yeah. Yeah. Let's, let's get into our next segment. This is a new Yeah. New segment. Jake asked questions, upsets and what Seth? Yeah. Like, what is Seth? Seth answers Yes. And, and Seth

Jake Pacheco: answers in ways that try not to

Seth Whiting: confuse Jake or anybody else.

Jake Pacheco: So currently, I mean, I'm, well let ask

Seth Whiting: I'm a little all over the place.

Let, what, what are you, what are you learning? What are you struggling with? What are what, what questions do you have with like, what, what you're going through right now on your own? Okay.

Jake Pacheco: Apparently I just got past functions, scopes and arrays. Mm. Mm-hmm. The functions one bugged me a little bit cause it spent quite a while.

You know, you, you'd type something function and then whatever label you give that function and then you'd, you know, go on with whatever the function is or whatever. And then like way late in the game, they just throw in, oh, by the way, you can just use arrows for all this. Yeah. And, and I I was really curious, is there, like, the only reason I could imagine me needing to know like, the way without arrows, like the long form mm-hmm.

Is what I'll call it, like, of writing it is just in case I come across someone else's code that was written before what is it, e s six? Is that what it's called? Yeah. Yeah. Maybe it was written before that or something. Mm-hmm. When all they had was like just functioning. They didn't have the arrows yet.

Yeah. And maybe I'll have to adjust that. And if I don't know what the heck, why is this run like this? Like, then I'd have to rewrite the whole thing versus now I actually know, okay, well you can just write it like this,

Seth Whiting: right?

Jake Pacheco: Return this or whatever. Mm-hmm. So that kind of threw me Oh, it, it, it, it didn't like an annoy me bad, but it was just like, I was like, oh, why am I, why am I learning the long form?

Like, this is, it's almost like it's almost like, you know, if you're in like a math class or something in high school mm-hmm. And like, you, you just write the answer and the teacher's like, no. Show your work. And it's like, no. Yeah. Like, why do I have to, you

Seth Whiting: know? Right. Yeah. Yeah. That's a good analogy. But I, I guess

Jake Pacheco: it's good to know what the arrow actually means.

Otherwise I'm just drawing arrows and, you know, but yeah, I, I, I guess that would be one question is like, how come, you know? Yeah, yeah, yeah. Why, why would they choose? No,

Seth Whiting: that's a good question. Yeah. So you there are, there are actually differences between functions when you write the word function and arrow functions, but they're like very minimal and like you would never really, not never, but like you would very rarely run into a situation where like, if you didn't know the difference, it would like get you into trouble basically.

Hmm. So the, and really the only one that I know by heart there, I know that there are probably more than this, but with functions, when you write the word function and then you like open up the brackets and everything, there is no, well, I guess, I guess it would make more sense if I, if I went the reverse way.

Arrow functions has something called implicit return, which means mm-hmm. That if you write a function where it's like take in some data, do some stuff with it, and then return something in, in, you know, in, in return. Mm-hmm. Arrow functions. If you don't open up the curly braces right after the arrow function and you just write on the, on one line like something that it returns, then it will just go ahead and return that.

So an example of this would be like let me think here. If you, okay, so if you, if you say, like, if you write an arrow function called plus one, then you pass it a number like five, and then immediately after the arrow you just say so like the, the the parameter that you pass it is called number.

So you have a, a function called plus one that you pass. An argument called number, and then immediately you return number plus one. Or immediately you write number plus one. After the, the curly bracket. Then it will immediately return whatever you pass it plus one. So like five plus one. It it, if you pass at five, it will return six.

If you pass at seven, it will return eight. Yeah. If you open the curly braces with either of them with a function, like if you write function or with an arrow function, then it won't implicitly return anything. Which means if you pass it five, it will say five plus one, but it won't return that. So if you say, if you say like console log plus one.

And then open parenthesis six. It will just, it will just add one, but it will never like, give it back to you. So it, it'll just be like, it'll console log, like null probably, or undefined or something like that. Yeah. Yeah. Huh. Interesting. What's your drive me up a wall if I were doing it right now? Yeah, yeah, yeah, yeah.

Yeah. But, but the main, the main answer to your question of, of like, why did we do it this way first and then do it the shortcut way later mm-hmm. Is be like, kind of for two reasons. Like, like you touched on, like, they want you to know, like, kind of like the, the building blocks that lead you up to the shortcut.

Yeah. If that makes sense, like the, the long way first and then the short way, just so that you know what you're short-cutting in the first place. Or that even, even the fact that you are short-cutting anything you know, you, you wouldn't know that unless you did the long way first. But also you also touched on this where, like that, that's the only way that you were able to write it for a very long time.

Yeah. Arrow functions only came around with, with e S five or e s six. I'm not sure what, what version they actually came around it. It may have even been after that, but probably, probably like e s six. Yeah. And yeah, so like any code before then will always be using functions like with the word function written out.

Mm-hmm. So, but going along with that, You're going to learn a lot of other stuff, like I think you already learned like switch statements. Yeah. Mm-hmm. Where it's like they teach you if, and then else if, and then ELs if and then else first. Yeah. And then they teach you switch, which is just like a, a much nicer way to write what you just wrote with all those if elses.

Yeah. Yeah. Just because basically like the, you, you need to know what you're short-cutting. I, I guess. Yeah. Like Yeah. So, and, and there's, there's a lot of stuff like that where like there are a lot of super useful looping functions. Like the ones that I mentioned to you a long time ago, like on our first call about like when you were talking about like wanting to learn coding, I said one thing that will kind of like.

Make you like level up pretty quickly is like when you get to map, filter, reduce, those are mm-hmm three, three inherit, or three functions that are inherit in JavaScript that have to do with loops that will make writing loops a lot more like concise. So they like shortcut a lot and just make everything look a lot nicer.

But yeah, if you learn those without learning like your basic four loop to begin with, you're, you're just going to, like, if you ever run into a four loop, you'll be like, what is this? And you won't have known like, oh, this is what like map filter reduce is doing under the hood, you know, the whole time.

Yeah. Yeah.

Jake Pacheco: Huh. Yeah. I'm just about to get into loops. It's my next lesson, I think. Okay. Cool. Yeah. Yeah. Well, yeah, that explains that cuz I, I was just, I, I was just curious. I was like, I, I am like, there, there has to be a reason why I'm learning this. I, I just, yeah. You know, you know, when you're doing it, you're just like, I just spent, you know, two hours learning this way.

Yeah, yeah. Two hour, three hours learning this way, you know? Yeah. Yeah. I know that one thing cause if people have, if they did start with the first episode, then they know that I'm learning a lot on code Academy, which is it's excellent so far. But I did notice the further I get along in it unless you get the premium it kind of It shortens a lot of your lessons or a lot of your projects quite a bit.

Mm-hmm. So I've been turned onto the Odin project, so I'm going to see how that works, and I will definitely be reporting back in the next episode.

Seth Whiting: Yeah. So with Code Academy, you, you said you were about to get into loops. Was that on Koch Academy that you were about to get into them? Yeah. Yep.

Yeah. And you don't need to like pay for that part, right? N

Jake Pacheco: no, no. So what I basically did is so I got my welcome to learn JavaScript. I'm looking at my syllabus right now. Uhhuh welcome to learn JavaScript introduction conditionals. It gives you a hundred percent of all of those. Then at functions, it gives you 25% of the lessons.

Basically, I'm missing two projects and a quiz. Mm-hmm. And you can't access

Seth Whiting: those mm-hmm. Until you, unless you're,

Jake Pacheco: Pro on it. Yeah. Yeah. So, you know, it gave me 25% of functions. It gave me 33% of scope, 33% of a raise, and now I'm about to start on loops. Mm-hmm. It was around 11:00 PM when I finished a raise and I, I looked at my first like loop and I was like, not tonight.

Way too. Yeah.

Seth Whiting: Like

Jake Pacheco: the, the way it's typed up is so casual. Right. So then I kind of looked into it to be like, well, like okay, what am I missing out of these? Because right now I'm like, 71% done the JavaScript program on there. And that's kind of how I noticed that I was only, you know, a few percent on each one or whatever.

Yeah. And when I was researching on Reddit and a few other sites, like pretty much a, a lot of people were like, yeah, like they're, they're great to start off with and stuff and then like mm-hmm. You know, a lot of people seem to switch over to the Odum project. Yeah. And yeah. So I'm gonna see how that works and try that out and see some time.

Seth Whiting: Yeah. I guess So it sounds, it sounds like they give you kind of like, what I was kind of hoping that they would give you is just sort of like a base understanding of concepts of, of JavaScript. Yeah. And, and that's like why, that's why I like it for learning new things, cuz like I already have a basic understanding of like, Kind of like the root of everything that I'm trying to learn.

Yeah. So like, all I really need for learning new things is just sort of like a surface level, like introduction to, to things, and then I can kind of like pick it up and run from there. Yeah. But for somebody starting out, like yeah, I could, I could see that like, you kind of like want more, I guess. Well, and to kind of like, go ahead.

Yeah. The, the main thing

Jake Pacheco: is, is that, so where I'm at right now, if I looked at, if I looked at Code Uhhuh, it was already written and it was any of the things that I've already learned mm-hmm. I'd know what all of the code means. Right. If they asked me to rewrite something that I learned three lessons ago or something, yeah.

I'm gonna have a hard time writing that. Yeah. You know? Yeah. Because it's like, it's, it's not stored like that in my brain. Right, right. You know what I mean? Uhhuh. So Yeah. And I think that that's probably what they fill in when you do GoPro is like the, you know, all the projects and then, like I said, the quiz.

Right. It, it probably helps quite a bit, just like being able to, you know, write it multiple times instead of just writing like kind of a few and

Seth Whiting: Yeah. And also probably get it, tie a lot of it together as well. Yeah. Yeah, exactly. I'm sure that that's gonna be a good thing with the, the Odin project.

Hmm. Yeah. I, I guess like, so what, what I was kind of like thinking though is like just get the basics of JavaScript, kind of like under your belt and then mm-hmm. Just like move right along to like Yeah. React or even even jump into some like HTML and c s s Yeah. Or, and, and, you know, kind of like tie, tie the three things together.

But but yeah, I, I think it would be more fun to just like jump right into React. Yeah. But. If you, but I could be like getting way ahead of myself and way ahead of yourself and like if you, if you don't feel like you have, you know, a good enough like foundation, like if you're, if you're feeling like, oh, I don't think I'm ready for that yet, then by all means definitely like, take some more time with JavaScript.

Yeah. Just JavaScript. Yeah.

I,

Jake Pacheco: I guess the question, the question that I have

Seth Whiting: would be, if you can read a language,

Jake Pacheco: does that count as you knowing the language? Do you know what I mean? Yes. Like if I, if I can read it and I understand what it means

Seth Whiting: mm-hmm. Then is that me knowing it? Or do I have to be fluent in speaking it or writing it?

Mm-hmm. You know what I mean? Mm-hmm. Mm-hmm. Yeah. Like it's

Jake Pacheco: because I feel like I'd have to be pretty good at writing it too, for me to actually say that I know the, you know, the thing. Yeah. And, but is it, is it kind of, is is that kind of a thing that I'll kind of backtrack and, and relearn as I go after I've learned a few more languages and have some more time under my belt?

Yeah.

Seth Whiting: So learning, that's kind of like what I was kind of thinking like with the, the whole react thing. Like you, you need to use JavaScript when you're writing React code. Okay. So like you'll just kind of learn it in a way that is like more. Kind of like applicable to like writing an application and, and react.

But you, but you need to kind of rely on your base knowledge of JavaScript. And if you're learning React and you're doing the, the kind of like lessons in Code Academy then it's, it's not gonna be like if you don't, if you don't know vanilla JavaScript, like straight JavaScript super well, then it's gonna like hurt you.

I think it's, it's, it's going to kind of like, just like reinforce the base, the base knowledge Yeah. Along with the new knowledge that you're Yeah. That you're gaining. So Yeah, it's up to, it's up to you. Yeah, for sure. But this, your journey the Oden project sounds really cool. I. And, and I could be moving way too quickly, you know, in, in my own like, excitement for you, like, you know, get, get to this point now.

Yeah. So, but yeah, but I mean, I, I,

Jake Pacheco: I also think that, you know, me, you know, well enough that like, you're not

Seth Whiting: gonna like lead me astray. So I, I,

Jake Pacheco: okay. My full plan right now is to finish the JavaScript course on Code Academy. And if, and I'll probably go forward on Code Academy with some of their other courses, like you said, with React and stuff.

Mm-hmm. But I might also like kind of dabble in yeah. In some of the, the Odin project or something like that. Yeah. Just, just to kind of like reaffirm

Seth Whiting: some of the stuff I already know and stuff, you know? Right. Yeah. But now, now that I'm thinking about it I. Just remembered that like, I sort of like advised you initially to do the, like, introduction to JavaScript and then I think they might have a course on map filter reduce, which would be great.

Like if you were, if you had just gotten done with like loops in general, then you could kind of get into like more advanced loops. Okay. But, and then also I know that they have a course called asynchronous JavaScript, I'm pretty sure. And that's super important. I, I feel like I saw it here at some point.

I'm just looking at this, the catalog here. Yeah. Learn JavaScript, asynchronous programming. That's, that's gonna be like a pretty quick one, I think. Mm-hmm. But it's vitally important Yeah. To like application development. Sweet.

Jake Pacheco: Yeah. Sweet. So yeah, I'll just continue with that then for now. Cool.

And yeah. Another question I had while you were talking about, and while we were talking about how, you know JavaScript kind of handshakes with H m L, kind of handshakes with c s s and they, they all kind of tie in together. Creating one big thing. Can all code talk to each other via something else?

Like if I was working with like Python, if I was learning Python, then yeah. Like what can that talk

Seth Whiting: to? You know what I mean? So, yeah. Or what can it call to rather, yeah. So so it's sort of a tricky question cuz if you're writing Python code, you, you can't write that on the front end. And like we learned last time, front end just means that it runs in the browser.

Yeah. You, you would write the Python code in the backend to interface with like your database. So like, yes, storing and retrieving data from the database and, and manipulating it on the back backend if you, if you want to, which is like, if you're manipulating data, it, it, it's good to do that on the backend for a lot of reasons.

But anyway, yeah. That's neither here nor there. The, the point is, Your JavaScript code on your front end will, will ping out to your backend via Yeah. Something called an api, which is an application programming interface. Yeah. And that will basically just kind of like trigger the, the Python code in the backend and, and then the Python code will do its thing and then respond over another a p i call.

So sort of like sending out a signal and retrieving a signal in, in, in return. So the JavaScript sends and receives the signals and the, the Python script will kind of receive and then send a signal, if that makes sense. Yeah. Yeah. No,

Jake Pacheco: it, that makes sense. Yeah. And is that how it kind of works with a lot of like backend code versus front end

Seth Whiting: code?

That's how it works with all, all backend, with all of it. Front end code. Yeah. Yeah. Like that's, that's how they talk to each other. Basically. Your, your front end and your back end talk to each other. Yeah. Over the air via API calls. Interesting. Like signals. So, yeah. I mean,

Jake Pacheco: that kind of answers my question then where it's like, yeah, no, they, they can talk to each other.

It just has to go through a thing first kind of thing. Yeah. I, I don't know what I expected when, like, starting to learn code. It was, it was like I don't know. I've always been decent with computers and stuff, so I, I, I, I figured that it would be somewhat easy to pick up. It's, it's very much like kind of.

It feels like a grammar class mixed in with a math class. And if you get anything in the grammar or the math wrong, then it's all wrong. Yeah. Like I've I've messaged you once now in desperation cuz I just couldn't figure out what I was doing wrong. And it was just like a semicolon or something. It was just something stupid.

It was just like, it's, yeah. It, it's one of those things where it's it's, it's incredibly frustrating when you're first learning it. Like, you're like, I, I just got to a point also where it, where it actually explained the blocks in the code. Mm-hmm.

Seth Whiting: Mm-hmm. I just got to it, you know, like,

Jake Pacheco: like I had been writing blocks.

Mm-hmm. I had no idea why I had semicolons or anything like that. Like I, I, I knew kind of a separation or whatever, but it didn't, they, it wasn't really that explained to me or anything, so it was just like, I was like, Okay. And then, you know, now they're, they're like, oh, and by the way, this is why we're using these as separators and why you need a space here, why you need this here.

And yeah. And, and it, it just kind of, I'm like, okay, well now, like I feel 10 times more smart. Yeah. Because like, I actually understand what it, what it's actually doing.

Seth Whiting: Right. Yeah. That's the thing about like programming is like, once you grasp a concept for the first time, it's like such a, like a, like a powerful feeling.

Like I feel amazing right now. It's a, it's

Jake Pacheco: incredible. Yeah.

Seth Whiting: Like it's right before that, like immediately before that is like sort of like a troth of sorrow where it's like, I'm trying to understand this, I'm trying to understand this, like, what's wrong with me? And then you finally understand it and it's like, oh, I'm so smart.

Like, yeah, yeah, yeah. Oh, I'm so smart. Exactly. It's

Jake Pacheco: like a, yeah. A crescendo of depression. Yeah. And then a crescendo of elation.

Seth Whiting: Your exhilaration. Yeah, exactly. Yeah. It's it's, it's an emotional rollercoaster learning how to, how to write code for sure. Yeah. It really is.

Jake Pacheco: But yeah, so I, I do that like feeling of elation though when you do, when something like clicks.

Seth Whiting: Mm-hmm.

Jake Pacheco: It's it's definitely addicting. Like, it's like such a nice feeling and like I've, I, yeah. Had it before with other things I've learned and I've, I've been kind of waiting for it. Uhhuh, I'm like, okay, when, when is it gonna start hitting and stuff? Yeah. And one thing that really where it really did start hitting is like, I looked back at like, cuz I've been like taking pictures of like my code that I write, like mm-hmm.

Pretty much every time. And like I look back at like, some of my earlier code and like I, you know, saw everything that I was writing and I knew exactly what it, it was all doing Uhhuh, you know what I mean? Like, it's like, it's, it's kind of, and you know, of course I, I wrote it so I should remember, but it's like, When I'm sitting down here and I want to write something out, like sometimes your brain is just like, not, it's not happening, man.

But like, being able to read it is kind of like an affirmation that Oh, you are learning

Seth Whiting: it. Yeah. It's just, yeah. You're just not fluent yet. You don't know how to write

Jake Pacheco: it yet. Yeah. And it's like,

Seth Whiting: yeah. Yeah. You know what I mean? And like there, it's definitely like when you will get to a place where like, I have this idea of something that I wanna make and I know how to make it.

That's freaking awesome. Yeah. You know? Yeah. Like, yeah.

Jake Pacheco: Well, it was like the cogs were working a little bit with like our eyes, the, the, the. Playlist part where it's like, I'm like, oh, man. Like, yeah. Yeah. So that's how they just random randomize a, a list. Yeah. Basically. Or, or a call too. Mm-hmm. So it's like, you know, like, yeah.

That, that, that kind of in a good way blew my mind a little bit. I was like, oh my word. I understand something. You know,

Seth Whiting: because that's, that's, you know, when

Jake Pacheco: you're, when you're first learning anything, it's very much like that. Like Yeah. Oh, oh my word. I actually get that. Yeah. Yeah. But yeah, so I mean, yeah, we, we, we move forward.

I'm, I'm, I feel like I'm, I'm understanding of a lot of the stuff that I've been learning and stuff, and it's, it's helped me. Just, this kind of podcast has helped me quite a bit, just like in keeping up motivation. Like just after the first one I was like so stoked to learn more. Yeah. Cause it's just like,

Seth Whiting: yeah, that, or

Jake Pacheco: like when I messaged you with that like, function that wasn't working and, and you're like, oh, it's this, I was like, He knew that so quickly,

Seth Whiting: and I've been

Jake Pacheco: staring at this for

Seth Whiting: a while.

Yeah. And at that

Jake Pacheco: point, like, yeah, I was, I was like, what is, what is stopping it from working? You know?

Seth Whiting: Right. Yeah. I mean, you'll, you'll get to that point, like once basically, like you, you, you make the same mistake a handful of times, and eventually you stop making that mistake, you know? Yeah. Like, and that's, and that's my goal.

My, yeah. Like, I have made so many mistakes and still do every day. Like, I'm still learning a lot, but like I have the the blessing and the curse of having like, Thousands upon thousands of mistakes under my belt. So like you get to reap the rewards of those whenever. Yeah, yeah. Whenever you want. Yeah.

Well it's

Jake Pacheco: like, it's like cuz I've had like three apprentices now in barbering and like, I, I tell them, I'm like, it's not that you like do a good haircut and you fix a bad haircut. That's what shows like Yeah. If you, them like, it's like you trouble, you troubleshoot your way out of a situation Uhhuh like, cause that's like, it happened, it's happened to me with cars, it's happened to me with building, it's happened to me with a bunch of stuff.

And it's just like, it helps so much to be able to like, actually understand it well enough that I know what to search, to diagnose something or to figure out something or Yeah. I know problems I've run into before

Seth Whiting: with it, you know? Yeah. And I can tell you firsthand, like it's, it's demoralizing, you know, like the, like learning how to code is just like such a, like a, like ominous task and like.

Literally, all you need to do is just stick with it. You know? It's, it's just, yeah. It's, it takes the what is it? Resilience, I guess. Just like, you know, you fall down a million times and you get up a million times kind of thing. Yeah. Like, you just, just need to stick with it. And like, eventually you'll get to the point where you can just make anything and it's great.

That suck. Yeah. I ca I just can't wait. Yeah. Like literally anything, like, you basically, people come to you and say like, Hey, I have this idea and I have money and I want to pay you to make this idea. And you're like, okay, yeah. I know exactly how to make that. You know, like, I can, that's, I can, I, I know just off the top of my head, like how I would go about doing that.

So yeah, let's do it, you know? That's like, yeah, that's, that just gets me

Jake Pacheco: stoked about it. Like, that's so cool. You know? Yeah. Because like, I, I mean, you, you know, the things I'm u I'm usually working with my hands, like, you know what I mean? Like, I'm usually like, if someone brings me a car, I can, I can build a car, I can do that stuff.

Yeah. Like very, like, it pretty well and like, or anything like that. Mm-hmm. Or even like doing stuff with housework or anything like that. Like I can, you know, fix a boiler, I can do a bunch of stuff like that. Mm-hmm. But like, and it's feels like there's an like, such an amazing feeling about, you know, when, when I'm like driving my car, I know what's happening mm-hmm.

With everything with that car. Mm-hmm. You know what I mean? Like Yeah. It's just such like a nice feeling and like and it's always been such a an, an empass with me with computers. Because like, yeah, I've built a computer before. Mm-hmm. And yeah, I've like, you know, loaded ROMs onto my Android or, you know, rooted it or done a bunch of stuff like that.

Mm-hmm. And and then everything in between the code is like, I'm like, I don't know. I don't, you know what I mean? Like, I can, I, I can definitely push code through, but someone will have already written it and I, you know what I mean? Yeah. So I, I'm, I'm just stoked to learn about, learn it all.

Seth Whiting: Like, it's, yeah.

It's, yeah, it's like worth the, the journey, but it's like a long, arduous journey. So, yeah. I'm glad that you're taking it. I'm glad that we're recording this for other people and hopefully it helps other people just kind of like stick with it cuz yeah, yeah.

Jake Pacheco: Yeah. Cool. I mean, it's, it's exciting. Cool.

Yeah. Awesome. Well, well, good stuff as always. I, yeah, I, I, I appreciate your time, Seth. I really do. Yeah. Thank

Seth Whiting: you. Yeah, no worries. All right. Talk to you next time.

Jake Pacheco: See you later. See ya.