Develop Yourself
To change careers and land your first job as a Software Engineer, you need more than just great software development skills - you need to develop yourself.
Welcome to the podcast that helps you develop your skills, your habits, your network and more, all in hopes of becoming a thriving Software Engineer.
Develop Yourself
#228 - The 3 Stages of Learning Javascript: What to Build && What to Learn
Send a text and I may answer it on next episode (I cannot reply from this service 😢)
No one said it would be easy.
If you're having trouble learning JS, you're not alone.
I nearly quit coding when I had to learn JS.
I even considered trying to become an email developer (yes, this was a thing). Fast forward 10 years later and I've made a career with JS and even teach it to others.
I want you to have a much better experience.
We will explore the 3 stages of learning JS to take you from 0 to ready to learn ReactJS with practical, actionable steps and the projects and resources you can use to learn.
Shameless Plugs
🧠 (NEW) Parsity's The Inner Circle Program - a highly customized roadmap to take you from 0 to hired. For career changers who want to pivot into software.
💼 Zubin's LinkedIn (ex-lawyer, former Google, Brian-look-a-like)
👂🏻Easier Said Than Done Podcast
Already a developer? Check out 👉 Not Another Course
Serious about joining Parsity? Schedule a call with me ☎️
Welcome to the Develop Yourself podcast, where we teach you everything you need to land your first job as a software developer by learning to develop yourself, your skills, your network and more. I'm Brian, your host. We're going to talk about the three stages of learning JavaScript, how you should learn them and the kinds of projects you should build at each stage to make sure you're ready to progress to the next stage. Javascript is where I hear people have the most problems, myself included when I learned it 10 years ago. So if you're learning JavaScript and feeling deflated or defeated or maybe like oh no, this is not for me, just realize that everybody goes through this Like this is not unique to you at all. Everybody has a hard time with JavaScript, and the reason is, if you've been learning the correct way, which I assume you have you've started off with HTML and CSS. If you write the code, you see the output on the screen. You get that immediate feedback that you've written something that's either right or wrong With JavaScript. It's not so simple. This is really your first introduction to a true programming language, and so this is where people get really stuck. It's like the first mountain that you're gonna climb on your software engineering journey. So I wanna break down how you can learn it, how you can do it in a practical way that doesn't take forever, and some projects that are gonna prove to yourself that you're ready to move on to the next stage. So the first step is to just control the basics. This is where you wanna just get literate with the language. It's like teaching a baby basic English words like food or milk or water or bathroom right, if you like learn the language, like Spanish or French or Chinese or something like that. You probably start off with these really basic things that just help you just get a lay of the land. So you want to do the same thing with JavaScript, because, at the end of the day, this is a programming language not so dissimilar from learning a language in general. So you need to learn variables, data types, if-else statements, loops for loop while loop functions and operators Like how do you compare the values of different variables, and things like that. The game or the challenge you want to be able to complete at the end of this.
Speaker 1:It's a really famous one called the Fizz Buzz Challenge. This used to be an interview question that they'd always ask, and I don't think anybody asks this anymore. It goes like this you want to loop through the numbers 1 through 100. If the number is divisible by 3, you write fizz. If it's divisible by 7, you write buzz. If it's divisible by both 3 and 7, you write fizzbuzz. You would log these to the console, you would print out those words, so you'd go through the whole thing. So, for example, you'd land on 3 and you'd write fizz. You'd land on 7, you'd write buzz. You'd hit 21. And you'd land on seven, you'd write buzz. You'd hit 21 and you'd write fizz buzz, because 21 is divisible by seven and three.
Speaker 1:This is a really great basic interview challenge, a really old school one, that will give you some confidence. You're like okay, cool, I know some real basics. The resources I would use for this and the ones that I think you should use, are javascriptinfo, codecademy's JavaScript track for interactivity, and Wes Bose has this cool program or this cool set of challenges called JavaScript 30. They're pretty good. I think they're still out there. In fact, another's still out there, so go look those up. Those are really good too, and this should give you a good lay of the land.
Speaker 1:Now you're learning how to just barely speak in JavaScript and you're ready for step two. Step two is make it move. Basically, what JavaScript is built for is making the web interactive. That's kind of the whole point of JavaScript. It does so much more now, but that's really what the point of JavaScript is it's to make websites interactive. So what you're going to learn in this section are how to move stuff around the DOM. The document object model why do we have these names for stuff? You want to make stuff move on the screen. Document object model is the way we represent all the elements on the screen. Yeah, so anyway, just know that you're making stuff move. Always try to break things down in a much simpler term for yourself. Sounding smart is great, but knowing what you're doing and how to explain it to people is much better. So, dom selection learn DOM selection how to select elements in the DOM, how to select a button, how to select the div, how to select a whatever, right.
Speaker 1:Then you want to learn about event listeners. Events are things like a click, click, a key being pressed, somebody moving their mouse. You can listen for all these events and decide what to do based on these events. This is where things get kind of cool. A person can click a button and then you would do something A person can move their mouse and then you would do something else, so you could change the text, you could change an image, you can change styles. You could have a form that takes in some input. Somebody would type something in, they click a button and then it displays that on the screen. So for this stage, what I would build is a button and when somebody clicks that button, it toggles dark mode or maybe displays a random quote, and that random quote could come from a list of quotes that you write out and then when a person clicks a button, it chooses a random and then displays it on the screen.
Speaker 1:I also have a notorious and ever so glorious form challenge. This one is a bit difficult and I will send it to you if you want. You can email me at brian at parsityio, or you can go to parsityio, slash free resources and get on the email list and we'll send it over to you. But this form challenge is a bit more difficult, but I think it's a really good, strong challenge that will show you, like, how much JavaScript do you really know? I've given this out to junior developers. I've given it out to senior developers just to see where their basic JavaScript knowledge was right to get a baseline for it. It usually gave me a pretty good indication of how much they either knew or didn't know. Some resources that you can use at this stage are Mozilla Developer Network, documentation, mdn. So go to MDN, look at their documentation on the DOM, the Document Object Model. You can go to FreeCodeCamp and look at their DOM projects. You can look up this service or this website called JavaScript 30 and focus on those DOM-focused ones.
Speaker 1:The reason why I don't like, say, go to some massive YouTube course or Udemy or whatever, is because these things you should be able to learn for free, and this is really important to learn how to read documentation. I know AI can tell you all sorts of stuff. The problem with AI is that it's not always true. It hallucinates. If you challenge it, it will just tell you whatever. So people think that AI will just present you facts. That's not true. It's good at summarizing facts, but you want to go to the source. So please use the documentation at this point so you don't get lost in what could be a false narrative in AI, where they tell you stuff and if you question it or you say I don't think that's right. It will basically agree with you. For the most part, they'll say oh, you know what? Maybe I misunderstood that, you're right, and then you could just be saying total nonsense. So go to the documentation.
Speaker 1:This is where, ideally, javascript stops feeling like magic and you're starting to move things around the screen and you're starting to get those aha moments like oh, now I see why people use JavaScript. Now I see what the point of this is. It's making stuff move around the screen. So I don't have a really big, dumb static website that no one can actually do anything on. Those are just less common than they used to be. People want to have interactivity on a website. And now we're ready for stage three. Stage three is the bestest stage. It's the most fun stage. I love this stage. This is the stage where you talk to the internet. What you want to learn is how to use the Fetch API Async, await Dot, then Chaining, handling, json and Basic API Key Usage. I'm going to tell you the app or the project that I think you should build and I'm going to kind of hate myself for saying this A weather app.
Speaker 1:Build an app that fetches weather from an API, or build an app where a user can search articles from the New York Times API. What is an API, you ask? I'm glad you asked that question. Application Programming Interface. Did that help you at all? Is it clear now what an API is? Great, let's move on.
Speaker 1:No, so an API basically is a way for you to interact and get data that you don't own. So, for example, the New York Times or this weather app, they have data that's exposed via a URL. So you know how you usually go to a URL and it goes to googlecom and it will send you back a website and you'd be like oh, that's yeah, I'm at googlecom. Well, for these APIs, you still interact with a URL. You go to a URL, but that URL, instead of returning you a web page, returns you some data, and that data is in the form of an array full of objects, otherwise known as JSON, and then you can handle that JSON and do stuff.
Speaker 1:Now, this transaction may take a second or two or three, so you don't usually want to block other code from running while it's waiting. This is why, often, when you go to a web page, you'll see a loading spinner or something like that. Something's happening in the background, but most of the page is still there. It didn't block the rest of the page from doing its thing or rendering or other stuff from happening or a greeting from taking place. It just has a spinner to show you that, hey, something's going on. This is why you need to learn things like async, await and dot, then chaining. These are ways to handle asynchronous things or things that you want to run in the background that don't block other code from running. Makes sense, hopefully.
Speaker 1:So I have a video going over this it's about 10 to 15 minutes max where it shows you how to build a basic app using an API. I love this kind of stuff. This is where I personally had the most fun and where things just exploded in my brain. I'm like, oh, this is all the cool stuff you can finally do, because when you're using data that's not yours, you've opened up another world of what you can build. You can begin building apps that people actually find useful. So the resources I would use for this download Postman, download OpenWeatherMap, the API that I just spoke about, maybe get a key, an API key for the New York Times, by the way, the API key is a unique key that they give to you to track your usage of their API Because, as you can imagine, these sites aren't always free.
Speaker 1:They're like, hey, if you're sending me like a million requests per minute, like, let's say, you're some kid, some hacker kid, and you want to just, you know, figure out if you can blow up their server, well, they're going to say you know what? We've seen this API key going a little bonkers here. We're going to block this user. So that's why you have API keys. Oftentimes you're used to either bill you they can use them to bill. You've tried to talk to our API 100 times in the last minute. We can only let you talk to us 99 times, so that 100th request was blocked, it was denied, and the next minute we'll let you keep talking to us again.
Speaker 1:So, postman, openweathermap, the New York Times API, you could go to YouTube and look up some of this stuff. I don't know, youtube is littered with really long videos because people need to make money and stuff like that. I would probably just use the documentation and see if you can find a couple videos to quickly put together how to make a request with an API key and you can look at the video. I had, you know, plug for myself, obviously, but it's like 10 minutes. It's super short. It's about as short as I could get it to teach you how to use an API.
Speaker 1:And finally, after you've done all that, you're ready to move on to React. And you might think, well, why didn't I just go to React and the? Can you learn React before JavaScript? The dirty secret is yes, and the even dirtier secret is that many people do this and it hurts them later on. I don't believe that you can really write React well if you don't have a solid foundation in JavaScript. I've seen people try this. I've also seen it really hurt them later on.
Speaker 1:One, not be able to pass interviews. Two, not have a really good understanding of React in the first place and just get bitten by these little weird bugs that come up when you're writing non-trivial code. Non-trivial code essentially, is code that's not like something that, like an AI just can produce really quickly. This is code that requires some thoughts and research and planning, or maybe weird little bugs that slip in and you're not really quite sure how they happened. Having a good understanding of JavaScript is incredibly important. By the way, you're going to be learning JavaScript forever.
Speaker 1:These three stages are just the beginning stages. You're going to keep learning JavaScript, and maybe that's frightening to you, maybe that's exciting to you. The reason why is because languages evolve. If you spoke to a dude in 1920, he'd probably be like hello, governor, or whatever right, something like that. That's my impression of a dude from 1920. And if you talk to a guy right now down the street, he wouldn't talk like that. Languages evolve, same thing with programming languages. There's also a secret or not-so-secret committee called the TC39 Committee that takes in JavaScript proposals and they will eventually adopt those into the language. They decide whether that proposal is good and they'll adopt it. And so the language continues to evolve.
Speaker 1:So you'll never know JavaScript. So get that out of your head. You're never going to know quote unquote JavaScript. You can know these fundamentals and these basics and that's great. And lastly, if you really want to learn JavaScript and not only learn JavaScript but work with me in a small group of people join Dev30, 30 days of JavaScript and, more importantly, learning in public. We're gonna help you build a network. We're gonna help you start posting on LinkedIn to get that network. We're going to help you start posting on LinkedIn to get that network. We're going to show you why. It's not super cringe. You're going to be in a community of people to support you and you're also going to learn a ton of JavaScript, way beyond the basics all the stuff I said here and much, much more.
Speaker 1:I really hope to see you in there. We run this program for 99 bucks for 30 days in a group and we don't really make any money on this program at all. If you decide to join Parsity after then, yeah, we actually might make some money. But in general, we run this program, one because it's cool. Two because it gives people a chance to work with us and see if they want to join Parsity. People love it. You can look at the reviews of it. Go to dev30.xyz. Check it out. I hope to see you in the next cohort which is starting very soon.
Speaker 1:This is a big game changer for many people. It gets them started doing things they normally never would have done on their own. I really hope to see you in there and I hope this episode was helpful for you, and if you want any more resources or help, always feel free to email me at brian at Parsity or use the send text message button in the show notes to send me a text message with a question and I will answer it on air at a later date. Anyway, hope that's helpful and I'll see you around. That'll do it for today's episode of the Develop Yourself podcast. If you're serious about switching careers and becoming a software developer and building complex software and want to work directly with me and my team, go to parsityio, and if you want more information, feel free to schedule a chat by just clicking the link in the show notes. See you next week.
