Following Kevin's advice as best as one can ... how well do you need to understand vanilla JS?
So Kevin put out this video (https://www.youtube.com/watch?v=HuI4fDxDM0g), and it was a nice reminder that having commited to the "boring" route of become a web dev he endorsed the choice I made of sticking to my guns and finishing codecademys JS courses, plus filling in gaps with javascript.info, Kyle in Web Dev Simp., etc.
But then it hit me from watching this video – how well do you need to know vanilla stuff before you go on to react, next.js, etc? Because I now know some very basic JS structure, and with the help of the resources I've mentioned and the power of googleing I could probably build very basic stuff with JS, like a calculator, etc.
Objects are important, functions are important, having done the JS course first, I really felt like TypeScript is something I can see as a good tool (and actually felt easy to understand), but what I don't understand is how well should I understand when I should use classes instead of basic objects? When do I build a function from scratch and when is it better to use specific methods? And having googled this issues I don't really find any good resources.
As a specific example: Now I can read a JS file and understand the different tools and steps (this is an object, and this method is using this property, etc.), but I could never build one from scratch myself. So if I wanted to build an ecommerce web app I could not write that code myself, but I would be able to decipher an ecommerce program someone else has build. So – is it know that I jump over to understanding React and other libraries, frameworks, etc., and start chippin away on them, or are there any good resoruces to kind of close the gap between really basic vanilla JS knowledge, and real life application building?
This could also be a question for the back-end channel, but here it goes for now.
Kevin Powell
YouTube
Why I only use vanilla HTML, CSS, and JS on YouTube
💌 Sign up for my newsletter: https://kevinpowell.co/newsletter?utm_campaign=vanilla&utm_source=youtube
I get a lot of questions about when I’ll be making React tutorials, or when I might make a series on Tailwind, so a quick explanation of why I stick with vanilla HTML, CSS, and JS, as well as the mistake people make rushing into libraries and ...
7 Replies
Well, the example of building an ecommerce site from scratch is really not very realistic. The thing is, the secret sauce of programming consists of breaking down tasks into smaller more manageable ones. You don't build an ecommerce site. You increasingly build smaller parts of what make an ecommerce site and put them together slowly.
You need to be able to make stuff on your own though. Watching tutorials is fine but there's this thing called "tutorial hell" where you are stuck watching tutorial after tutorial, and even though you may be able to follow and understand what's going on, your brain is not absorbing that information. The best way to learn, is to practice and that means making stuff on your own.
I would say you should be confident in making simple applications on your own and most importantly researching and reading documentation. When you learn React, or whatever framework, you will then be able to:
1. Tell which parts of the framework are abstractions from the parts that are plain JavaScript.
2. Implement vanilla JavaScript features in the way that particular framework does things. This is simply impossible to do if you don't know JavaScript.
3. Ask the right questions when you are in doubt about how to do things. By this I mean that you will be able to identify what it is that you don't know, and be effective in searching for that issue in particular. This, by the way, will help you a lot to ask better questions to things like ChatGPT.
And having googled this issues I don't really find any good resources.This phrase exactly is what I mean. You don't find information because you are not asking the right questions. That means you don't understand the problem you are trying to solve. And I don't mean to be harsh, but very straight forward about it. A good exercise you can do is make the same (simple) project in vanilla JS and then make it in React.
This is great advice! Because I think I've avoided tutorial hell in terms of actually having written a lot of JS myself. The good thing about the codecademy course is that you have to build projects there. And when it comes to googleing I was a bit unclear: I feel confident in terms of googleing vanilla issues, what I didn't feel I knew how to look up was resources for the next step in the learning process.
As an example I sat on StackOverflow for hours yesterday and finally found an answer to an issue with TypeScript object syntax I had.
So starting to look into React feels not overwhelming, and accepting that I couldn't sit down and explain all things classes in JS, but if I come across some JS specific issue within React, I know where to go and try to understand the vanilla side of it.
This is my JS repo based on the codecdemy course: https://github.com/AMarlonG/JavaScript
I also have one for TypeScript, and will do one for Node and React as well.
That's a pretty good idea, I also make ton of comments when I picking up something new so that I can reference later.
Something that I do from time to time is come to places like this Discord server and try to help out others, this kinda forces me to learn or refresh my knowledge about that topic. Sometimes, I even then try to re-create that same project on my own. This is actually a great source of mini-projects that you can try your hand at by yourself.
Yes! But I don't think I'm in a position to help others yet, haha 😅 But I do this with CSS. And just the fact that this community is the reason why I made it through the JS I owe something back.
But I guess the answer is, go play with React. And with my vanilla understanding of all HTML, CSS, JS, I think I need the joy of making components and "web dev", and not be hitting my head over a misspelled JS function for a bit ... One thing is tutorial hell, another is trying to be perfect before moving on.
I agree, the answer is really all that simple: just keep coding. Push your limits a little every day too, even when following tutorials or getting started documentation try to change things up as much as you are comfortable with.
Maybe you used Axios in your last project, so now try to implement that same core functionality yourself. This applies to a lot of libraries that are really either very basic or way overkill for most projects.
You can swap CSS for Styled Components or Tailwind, etc, etc.
The idea is, try to mix things up to keep you sharp. You will start to notice a lot of those "hidden" patterns that are good or bad for your needs a.k.a. code smells.
Admittedly, a lot of this is easier said than done. And while learning you will realize that a lot of the projects that we make are very basic for the tech stack that we use. But this is not a waste of time as it may seem. I mean, it would if these were real production projects for real customers, but not while you're learning 😄
Thanx! See you when my eyes are bleeding blood from React issues. 🤣
Don't be afraid of asking questions if you are stuck, there's no shame in that no matter how basic!