This Is the Only Way to Truly Learn JavaScript

hey guys what's up so this video is brought to you by Linode if you guys are looking to get into hosting you're trying to do machine learning artificial intelligence on your own you're gonna save a ton of money by going to Linode over asher or AWS i know from personal experience on that i've been using the node now for eight years so they keep growing they just opened up a new location in mumbai so all my indian peeps make sure you guys check them out and have a good day hey guys what's up so in this video I'm gonna be talking about JavaScript and the best way to learn it in my opinion I've been doing this ten years now I've been writing JavaScript ten years and I can tell you just recently I've actually kind of deviated away and I say recently maybe in the last three four years something like that but I deviated away from the whole jQuery way of doing things I've been in react now for five years I I would say I'm an excellent react developer these frameworks and all that exists though because JavaScript itself at the lower level is very very difficult to work with it's a duck tight it's got prototypical inheritance versus like a class-based system it's got its considered to be a functional language where functions or first-class citizens that can be passed around like you know parameters to an argument you have things like callback functions the synchronous nature of JavaScript all that is hard to wrap your head around and literally impossible for any beginner developer so I don't care how good the author is that wrote the JavaScript book you're simply not going to read a JavaScript book and understand everything that there is to know about JavaScript the only way you're going to be able to do that is to start writing lower level JavaScript which is the point of this video and I'm also going to mention the MDN documents you don't need to go to any youtuber or video like a video tutorial you don't need plural sight you don't need none of that stuff you just need to start writing javascript dude anybody will tell you if you want to be a good coder it takes practice hopefully you practice as much as you can at work a lot of times that work though we're not really practicing so we have to still continue to practice at home which kind of sucks but the point is though is the only way you're going to get to be a very good developer is to sheer repetition and practice that's really it there's no shortcut around that's even the smartest people in the world cannot shortcut their way around practicing coding to be a programmer so considering the fact that I don't recommend any book that any beginner developer needs I feel like some of these programming books some of the most you know some of the best parts of them are like the entire forward right where they're talking about this and that you can do with it which is why I like YouTube honestly because that's what we do we talk about all this and that you can do with it but then the book starts getting into all this like you know this like technical stuff for the JavaScript language and we're not really creating things and like you're creating things that the author thinks that you should create and like you're learning about how to pass functions and parameters and all this that like is really the same in every language but with JavaScript like it's it's an event based system like a lot of javis like a lot of everything we do with JavaScript is all about Dom manipulation and events and that's something that you just have to grasp from the ground level and no framework is gonna help you get in fact I would actually say frameworks are probably a roadblock to becoming a really really good JavaScript developer so how do you get started I recommend mdn if you want official documentation stuff that like will make your eyes glaze over because this is mostly text I say use this as like a reference more than actual book you don't just read it through and start doing things one at a time but every nook and cranny of the JavaScript language is is documented with mdn and and you can learn way more about what you can do with that information here than you can with any book so to get started you just have to go ahead and download Visual Studio code and I would recommend not putting your scripts inside your actual HTML the reason why you want to have an actual separate I'll just save my file you wanna have a separate javascript file is because in order to debug and step through your code in in Google Chrome or any other browser you want to have an external stylesheet you're not gonna build a step for your code if it is embedded into HTML so if that makes any sense you're gonna have JavaScript embedded into HTML just like this but you cannot step through that code if it's embedded this way so it's best to go ahead and just simply reference an external file right which is my file jas and have all your code inside here so that way if I say you know what var X equals you know we'll be more technical right let x equals testing alright and then we're just gonna go ahead and alert X all right so now if we go ahead and view the file you now get the testing message when we go ahead and pull this up so one of the reasons why we want to put this into an external page though is because that then gives you the ability to debug so if you go ahead and you go over to your sources here the best way to do it is just simply to have it right here so you can actually just put your breakpoints in this external file that should just be all JavaScript now here when i refresh you can hit the breakpoints there's no other way to code you have to code this way there is no other way every it doesn't matter if you're doing c-sharp Java or anything like that you have to have a debugging capability one of the things that sucks so bad about Python when I was first getting started when I compared Python to like c-sharp and visual studio a visual studio in c-sharp gave you all these debugging tools right of the box and it all worked Python there like hey you can use a PDB or whatever and that sucked but you know a lot of Python people probably disagree with that but it sucks compared to c-sharp and visual studio but then a lot of Python people especially coming from Linux they're like you know Microsoft that's way too much work because you can write an entire like Bible size novel on how to even interact with visual studio itself and I'm not talking about visual studio code that's a separate project from Visual Studio the flagship IDE integrated development environment from Microsoft however the more I realize the more development I do is the harder things that I build and create the more I need an actual ecosystem that works for me so I need to have debugging capabilities this is the best way to do it in JavaScript that way you can really start to verify what's going on here I mean it gives you the ability to like highlight over stuff you can see the value of that variable and you know it's just like it's gonna be more than that because obviously your code gets way way more complex when I when you start debugging things you can look and you're like oh I'm passing a function and I'm executing that function as I pass it so basically I'm passing the result of that function and not the function itself little things like that are much easier to catch when you're debugging all right so simply put you guys can actually follow along with tutorials if you want but what I think you should do is you should build something with JavaScript you should build your own template engine like your view engine and how do you do that you do that by creating elements and it's a low-level concept within JavaScript it's not difficult but I could say my element which is a lot of times you have these Dom elements that's what they're called but here I can go ahead and just go I can I can assign it an actual value I can create a new a new element just from scratch right like so if I want to create an anchor tag or a div tag or any of that stuff I can do anything I want I could say equals document dot creates element and then here you just simply pass of what it is that you want to pass so I'm gonna create a div tag right you know let's just create an h1 because this will be a little bit easier so now I have my h1 so my element can then be modified it's now a an actual an element here you can see that this is HTML heading element so it knows that it's a heading element so what kind of it what kind of things can you do to it right you have inner HTML if you wanted to actually inject like a span tag inside of your your your h1 you would have to create a span tag so if I wanted to do that let my span equals and again document create element not at attribute but element and here's a span so all right so now we have both an h1 and a span so if I wanted to say you know what let's go ahead and put a value in here so my span dot text or the inner text and that's another thing too by getting using Visual Studio code you get this intellisense you when you do a dot it gives you all the different possible attributes and functions and methods and all the stuff that you can you can you know do things with in order to change the way that this works so this is the low-level stuff that I'm talking about this is going to make you the best JavaScript developer by simply building out your own JavaScript HTML like how JavaScript write your HTML read the HTML have it create events and all the stuff so anyway let's go and do inner text of this and we're just gonna say your mother I shouldn't do that but alright so now to work with the my spam what we need to do is say you know at my span actually we want to add the take the my span add it to my my element so what I'm gonna do is just say my element append child and you can just append my span alright so now what I want to do though is I want to go ahead and a pend my element to the document body so I'm going to say document and body dot append child and then put in my element alright so what we've done is we virtually with JavaScript created a HTML Dom element and then we're now injecting it into our HTML very similar to how react angular view all that stuff works on a lower level and when we go and we look at the page now we get this actual h1 inside of here when we inspect it you can see the h1 contains a span both of these were virtually created by JavaScript and injected into the page after the page loaded there's no other way of getting better at JavaScript besides doing this type of low-level stuff so the next thing you want to get really good at after you're good with creating elements from scratch and you know pending them creating your Dom tree in the right way that you want to do you then also need to deal with out tributes and attributes are going to be how we can dynamically actually you know instead I'm gonna put the style right inside here just this style we're gonna create a class in here custom class color pink alright so we're gonna change the color of whatever this class is applied to to pink so we only have the h1 so how do you do that well in the my element which is the h1 tag what I can do is say my element class list dot append or dot add and I'm sorry it's an add there's a specific add method that's actually where it gets confusing with JavaScript because like you get accustomed to a pinch I'll which is a function call you passed any element class list dot add you can attach a class to an a to an element and a different way than this but the class list has the ability to have an add function that gives you the ability to just pass in a class name so what I got custom class that's the name of it yep custom class alright so that just like that we can now add attributes to our JavaScript element so if I got to refresh this we now have pink so this is actually taking a custom class that was defined inside the head which is perfectly fine although not something that's very scalable this is most likely going to be in some sort of external page or it could be a bootstrap class you're assigning to this thing it doesn't matter as long as the class is accessible then you can go ahead and add it to your attribute which is what we've done here now once you get done with attributes and you get very comfortable with like adjusting the height the width and all these different other attributes that every HTML element has then you need to get into JavaScript events and JavaScript events are something that it's going to take a long time to probably wrap your head around but it's something that that react does better than everybody else and they've been doing that better than everybody else for a long time so that's why it's a really good product but the magic of how does react know when data stale and all that stuff it all comes down to event-driven stuff right this is a Java scripts are very event-driven language nodejs is very event-driven and in order to get accustomed with events you just simply have to write them lower level you're actually going to create an axe we'll event object so let me see an example here because I don't feel like doing this but shitty site this is why you go to MD n and really for events this is going to take another ten minutes or so so I'm not going to do that but I will just direct you to the documentation here for MD n because it's much better than anything else and this is going to give you a simple example of how you can go ahead and fire a button or click a button and then create an event and then do something alright so here let me see you wear the alright guys that last page did not have what I wanted what you want to do is just starts creating and triggering events for MD n it's going to teach you from the ground level how to create a custom event attach it to an element like we saw with our attribute where we attached a class you can attach event in much the same way so then that element is now listening for some sort of event that could be firing off and every element that's listening for that event can take some sort of action you could reuse and reshare that code but ultimately guys this is how you're going to get better you have to build your own HTML elements in JavaScript you need to be able to bind them to the Dom remove them from the Dom you need to be able to add and remove attributes then you need to be able to add and remove and react to events beyond that it's really a lot about really you know beyond that you're gonna understand all the other pieces of functionality that JavaScript provides there's literally a file API that JavaScript provides for reading files for uploading there's all these different api's that do different things but if you can grasp with this lower-level stuff then those api's are gonna make much much more sense and then you're also going to find that it makes much more sense when you realize what react is doing and what angular is doing and some of this this core code that we use every single day and it's really not magic it's just it's lower level JavaScript but without understanding this lower level stuff you're always going to be hampered because when I was first getting started development it was all about you didn't have to know JavaScript in fact the argument was that you had to you you just had to know Jake now everybody says jQuery is the biggest piece of that's ever hit the Internet and it's it's you know it's obviously bloated and stuff compared to what the Dom does but it had a purpose for a very very long time a lot of the younger developers now don't understand where we were ten years ago so yeah that my point is though is that there there's always been this hey you should learn react you should learn angular you should learn this and that and the other thing but really what I think is you learn lower level JavaScript first

Channel: Chris Hawkes

Views: 485,057

Rating: 4.8184075 out of 5

Keywords: chris hawkes, This Is the Only Way to Truly Learn JavaScript, how to learn js, learn javascript, javascript, javascript developers, typescript, ecmascript, javascript in 2020, javascript 2020, javascript 2021, future of javascript, learn js, javascript for beginners, js for beginners, js tutorial, js easy tutorial, how to master javascript, get good at javascript, advanced javascript, professional javascript, javascript discussion, best way to learn, study javascript

Id: HnXmI2UVZlU

Length: 15min 42sec (942 seconds)

Published: Tue Aug 06 2019

Reddit Comments

[u/HealyUnit]

I've got some issues with this guy's approach.

He really kinda rants. He also doesn't really seem to plan out what he's talking about. "JavaScript is all about DOM manipulation and events"? No, not really, and certainly not if you're dealing with NodeJS (where the DOM isn't even a thing).

He claims that the technical aspects of JS are impossible for a beginner to understand, which really makes absolutely no sense to me. If you're going to become a good JavaScript developer, you need to know what prototypal inheritance is, what duck typing is, etc., and no amount of "practice" is going to make you a good developer.

The author seems to like making bold statements, which makes his video feel clickbaity. For example, "Frameworks are roadblocks to learning". Okay, no, learning a framework on its own without learning vanilla JS would be a bad idea, but frameworks are an integral part of modern JS. Some of the statements (you absolutely must have a debugger, for example) are true, but it's sprinkled with enough opinion fluff that it ends up being a bit of a minefield of "worth it" vs "not worth it".

He makes numerous mistakes, like calling an external JS file an "external stylesheet" at 4:08ish (and an "external page" at 4:50ish). Around 4:40ish, he uses var instead of let (he corrects himself, but that wreaks of "I haven't kept up with modern JS"). At 7:10ish he mentions "low level" and says then that that is (therefore) "not difficult". That's... not what low level means in programming. Overall, this video feels like something he just had to get off his chest rather than, you know, a planned and rehearsed video. He claims to be an expert seasoned dev, but... these mistakes don't inspire confidence.

If I had to give this a grade, I'd give it a low B. Here's the underlying issue with his message: He says we, the audience, should not follow tutorials, or at least should focus more on building stuff. The issue is that this is a pedagogical impossibility; you cannot practice stuff if you don't know what to practice. Sure, some tutorials don't give you room or encouragement for experimentation (I'm looking at you, W3Schools), but others actually encourage it at multiple steps in their curriculum (Freecodecamp, for example). He seems to have no idea who this is tutorial is written for ("view engine"? To someone just starting out?)