So, you wish to learn JavaScript, right? Well, you're in the right place. I am starting this series in an attempt to give back to the online community, and help anyone who wishes to take their first steps toward learning JavaScript.
You may be thinking "there's already loads of free online material", if you are, you're correct. I am not trying to replace the amazing resources already available -- I'd fail, miserably. My goal is to assist learners as they attempt to navigate the endless ocean of tutorials, online courses and podcasts.
But Why?
While starting on my journey I noticed a consistency across many online courses: they often use coder terms. Although this isn't an issue for someone with a degree of prior knowledge, it is for complete newcomers, or someone without a computer science background.
Time and time again I would read a tutorial about, for example, the use of the var tag, just to read that it is "hoisted". The writer of the article would fail to explain, in pure layman's terms, what hoisting is, whether it is good or bad or when/where to use it.
The result? Spending more time to then define hoisting and answer the questions which resulted from reading the original article. This isn't the biggest issue in isolated cases. However, it can become quite cumbersome when it is a regular occurrence.
So, in an attempt to help anyone who may be facing similar issues, my plan with Learning With a Layman is to supplement the plethora of great material which is already available. Not to compete with it.
A Little Bit of Background
My journey into web development started well over a decade ago with e-feds. For those who do not know, e-feds, started in the mid 90's and are a fantasy wrestling league. Using basic HTML, CSS and markdown users create forum posts which detail their fantasy character's interactions for the week.
These interactions include everything from interviews with fake press to the outcome of a matchup. The e-fed's community then votes on the quality of the post and the winner gets bragging rights. This is where my interest in web development and coding started.
However, until the beginning of this year I'd never really taken web development seriously. My approach to learning was, at best, haphazard. I leant what I needed, when I needed and nothing more.
This meant, when I decided I want a career as a JavaScript developer thus had to take it seriously, I had a lot of blindspots. And it is this which lead me to the decision of starting my learning journey from the beginning.
Since making this decision I am comfortable to say that I am at least at an intermediate level of expertise. I have started getting my own clients for development projects and am slowly, but surely, progressing toward my goal.
This leads me on to my first lesson, which isn't really a lesson, more so advice for anyone thinking of entering the field...
Crawl Before You Walk, Walk Before You Run...
If you, like I did, find that you want to make cool shit and you want to have made it yesterday, this advice really is for you.
We all get mesmerised by the increasingly complex apps which are being rolled out through the glory of JavaScript. However, it is easy to completely bypass the fact individuals do not make these apps. Teams of highly skilled developers, who have been polishing their individual toolset for years, do.
These developers have taken the time to read what, for example, hoisting is. They have read all the boring differences between objects, arrays, strings, numbers and booleans. They know what a truthy or falsy value is, and the difference between == and ===.
The point is that these apps are made by people who know the basic principles of the Javascript language. And, while it may not be what anyone wishes to hear, in order to reach a level of skill where you can seriously consider working on something like the next Tinder, Uber or Spotify, you need to learn the basic principles first.
By doing so you will find that you achieve a lot more, in a much shorter space of time. And time is important. If you plan on seeking a career in web development, as with many career paths, you are going to need to be able to stick to deadlines. When you find yourself having to constantly research the basic principles, which you should already know, you will make mistakes and fall into bad habits.
The Copy/Paste Conundrum
If you find yourself in a situation where you need to, for example, limit the number of search results a single page will display, you will use a pagination function.
Now, if you are a newcomer to the world of development and coding, your first port of call will probably be to Google it in some form or other.
You will then, no doubt, be presented with a load of ready made functions for you to copy/paste. Seems harmless, right? Copy the code, paste it in your project and voila! Job's a good'n. You've achieved your goal and saved time having to write out the function yourself. The problem arrises when you need to make a change.
Let's say you need to change the number of results listed per page, how are you going to do that? The chances are you're going to have to return to your trusted learning resource (Google) and spend time finding a new function to copy. This can be time consuming and, as your requirements become more obscure, you will eventually hit a brick wall.
When you're at that wall you kinda have three choices:
- Go back and learn the principles behind the pagination function, which you should have learnt the first time around
- Blindly begin changing the code from your previously copied function, in the hope that you will stumble on the solution
- Post a question somewhere like StackOverflow and hope someone will write the function for you to copy
None of these scenarios are desirable. It is fair to assume that a paying client will expect you to be able to tell them what is going on with every line of code you have delivered to them. This brings me on to my final piece of advice for this inaugural post...
Learn it Right or Learn it Twice (or Thrice)
Let's take the above example and expand upon it. You have your project which you need to deliver and you have spent the best part of an hour searching for a pagination function. It worked great and then, after your client informed you they wished for less results per page, it didn't.
Now you find yourself in a position where you are back at the drawing board. You have literally learnt nothing and the hour you spent searching for the initial function is an hour wasted.
You decide to spend another hour searching for a more specific version of the function, and fail. Then you decide to try and blindly change variables in an attempt to solve your issue. This takes another hour and, again, proves to be an hour spent in vain. As a final, last ditched solution, you decide to make a post on StackOverflow and ask for help.
After another hour of waiting you get a response which marks your post as a duplicate and sends you back to the original post which you copied the first function from. You have literally just wasted four hours and ended up back where you started.
The kicker? The page you initially copied the function from fully explains exactly what the function is doing and why it is doing it. It provides multiple resources which explain relative concepts such as event listeners, destructuring objects, loops and DOM manipulation. Had you of simply spent the hour reading the full post, and its associated material, you'd have been able to change the function at will.
Not only would you have been able to edit the original function to suit your needs, but you would have also acquired vital information about principles which are applicable to an infinite number of use cases. As well as saving three hours.
Some Resources
To wrap this introduction up I am going to provide a short list of learning resources which I have found, and continue to find, invaluable through my journey. I will update this list as, and when, I remember anything I may have missed, or find anything new.
Courses
- Free Code Camp - A full curriculum which will take you from newcomer to full stack developer. Has thousands of hours of lessons on everything from printing a string to a webpage, to creating a full stack Javascript application
- MongoDB University - Again, a full curriculum although this is specifically tailored to MongoDB (a database which utilises Javascript). This is probably more towards people who have some background in Javascript already
- The Kodiri Console - Kodiri's training console is a great place to learn everything from string manipulation to advanced object destructuring. They do offer paid bootcamps but their training platform is free to use and has multiple languages, plus a course on ReactJS.
- The MDN Tutorials - Everyone knows about MDN's unparalleled documentation. However many are unaware of the tutorials they offer, which act as a curriculum of their own
Documentation
- MDN - As you will have seen, I refer to MDN relentlessly and I suggest you do too. It is a full guide to everything Javascript, CSS and HTML and was created by the Mozilla Foundation - the guys who helped develop Javascript
- W3 Schools - W3 Schools have been around for quite some time and are (by their words) the worlds largest developer website. They have full documentation on multiple coding languages including Javascript, HTML, CSS, PHP and Python, to name a few
- W3C - A consortium lead by the inventor of the internet (Tim Berners Lee). They have full documentation on web standards and are considered an official authority on the matter
Communities
- Free Code Camp Forum - The Free Code Camp (mentioned in courses) have an active community of talented and friendly web developers on hand around the clock. It is a great place to discuss ideas, seek help problems and socialise with other's on a similar journey.
- Reddit - Learn Javascript - The /r/learnjavascript community is a friendly and welcoming one with a wealth of skill and knowledge. Again, this is a great place to find assistance with problems, clear up topics, and discuss ideas
- StackOverflow - Any self taught developer will, most certainly, have used StackOverflow at some point in their life. The community is amazing, the website is full of knowledge and their level of skill has lead to the prolificacy of the website
Love, peace and happiness.
Original article: https://somethingdecent.co.uk/guides/development-and-coding/learn-with-a-layman-an-introduction/