Learning JavaScript shouldn't be hard in 2020
Tags: javascript, react
Published: 2020-02-22 14:38:13

Learning Javascript in the year 2020 is going to be overwhelming. There are thousands of endless articles about Javascript, and it's libraries and web frameworks. For a beginner, laboriously plowing through this mountain's worth of articles  doesn't make any meaningful sense. What you need is a proper guide with the best resources from around the web. This is the guide you are looking for.

## Contents

- [The Ecosystem](#the-ecosystem)
- [The basics](#the-basics)
  - [Books](#books)
  - [Blogs](#blogs)
  - [Other resources](#other-resources)
- [Leveling up!](#levelling-up)
  - [Blogs](#blogs-1)
- [From websites to applications](#from-websites-to-applications)
  - [Resource lists](#resource-lists)
- [Conclusion](#conclusion)

## The Ecosystem

The internet is extremely huge and the ecosystem of the programming language that powers the web is equally so. There are so many events going on within the javascript ecosystem at any given time that it's almost impossible for even the most seasoned developer to learn or keep track of everything. The most practical route ahead for you is to start working with and becoming proefficient at javascript by mastering the fundamental skillsets and then, choosing a path that is of most interest to you. While initially created for adding interactivity to web pages, as the internet expands it's reach, javascript automatically flourishes in all directions. This means you can now:
- Write javascript and deploy it on single-board computer like [JohnnyFive](http://johnny-five.io/) or [Tessel](https://tessel.io/)
- [Run Javascript on a satellite](https://www.reaktor.com/blog/node-js-satellite-means-anyone-can-space-programmer/)
- [Make music on the go](https://tonejs.github.io/)
- [Rewrite UI of Microsoft Office in Javascript!!](https://twitter.com/TheLarkInn/status/1006746626617008128)
- Write apps like Skype, Microsoft Teams, VisualStudio Code in Javascript
- Use the web platform to deploy your application as a [PWA](https://developers.google.com/web/progressive-web-apps) that be used just like a native application
- Make use of [Web Assembly](https://webassembly.org/) to get near-native speed and performance in your applications

To make the journey smooth, I have come up with a predefined path that can help both young and seasoned developers to improve their skills in 2020. 

## The basics

The first and the most important challenge for any budding developer is to continuously improve their language and problem solving skills. This is the most important foundation for the rest of your programming career. There are hundreds of beginner courses and books all over the internet to help you get started with Javascript but only a few of them remain phenomenal and worth coming back. Here are some of the resources that have personally helped me learn and improve my javascript and overall programming skills.

### Books

| Book                                                                                    | Description                                                                                                                                                                                                                                                          |
| --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [JSforCats](http://jsforcats.com/)                                                      | A pretty cute and wholesome website teaching the basics of Javascript... Don't be a scared-cat!                                                                                                                                                                     |
| [Eloquent Javascript by Marijin Haverbeke](https://eloquentjavascript.net/)             | Probably one of the best books I have read on Javascript. Eloquent Javascript combines a mix of problem solving with language learning. It can be difficult to understand for someone with little or no programming experience but will be a gem going forward       |
| [You don't know javascript by Kyle Simpson](https://github.com/getify/You-Dont-Know-JS) | One of the most detailed series of books on Javascript that is available for free online. Javascript can be a tricky language and the carefully put together nitty-gritty details of the language will save you a lot of time debugging unwanted bugs in the future. |

### Blogs

| Blog                                         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [2ality](https://2ality.com/)                | Dr. Axel Rauschmayer, author of many books on javascript like [Exploring ES6](https://exploringjs.com/es6.html), [Javascript for impatient programmers](https://exploringjs.com/impatient-js/index.html), [Exploring ES2018 and ES2019](https://exploringjs.com/es2018-es2019/index.html), regularly writes about newest developments in Javascript's language specification and gives valuable advice for developers from all walks of life. A must read blog if you ask me! |
| [David Walsh Blog](https://davidwalsh.name/) | This is a nice to find small but useful tutorials and snippets on javascript, although not as intensive as 2ality, it can be used for when you are not feeling up to take up a huge amount of content! Every cent matters!                                                                                                                                                                                                                                                    |
### Other resources

| Resource                                   | Description                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [#javascript30](https://javascript30.com/) | #Javascript30 is a 30 day vanilla javascript challenge where Wes Bos, the course creator takes you over the many fascinating things that you can do with Javascript and browsers.                                                                                                                                                                                         |
| [HackerRank](https://www.hackerrank.com/)  | Learning by doing is the mantra behind every successful developer and HackerRank or any other problem solving website will be phenomenal in your success as a Javascript Developer. Try solving at-least one problem in HackerRank in JavaScript per day. This will really pay off in the long run as you get more and more familiar, maybe event an expert in Javascript! |



## Levelling up!

Once you are really comfortable with javascript, it's finally time for you to start playing around with [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) like [DOM (Document Object Model)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model), [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), [Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) etc. There are many more web APIs available for web developers to play around with in the browser. From this point on, [Mozilla Developer Network or MDN](https://developer.mozilla.org/en-US/) is your best friend. Anytime, any doubt, your first website for reference should be MDN, and you should start making it a habit to constantly read documentation as you will be required to, we are humans after all, we definitely can't keep everything in our mind.

Although MDN has a comprehensive listing of every web API and it's thorough documentation... sometimes it
we really need a tutorial or a more practical explanation of the concepts involved. In such a case,
Google's own [web.dev](https://web.dev/) easily comes
up as a valuable resource. The website has a lot of 
guides on web performance, security, PWAs etc. Below are some more blogs that I find very helpful and filled with quality content.

### Blogs

| Blog                                                                      | Description                                                                                                                                                                 |
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [css-tricks](https://css-tricks.com/tag/javascript/)                      | Although primarily a CSS related weblog, it definitely has a large collection of detailed articles on Javascript                                                            |
| [Smashing Magazine](https://www.smashingmagazine.com/category/javascript) | Smashing Magazine has a great reputation for it's high quality and detailed blog posts that usually vary from high level beginner concepts to in-depth feature walk through |

## From websites to applications

In the past decade, Javascript has exploded from a small scripting language for browsers to a multi-purpose programming language powering huge desktop and web applications, servers, databases, CDNs and many other tools. This surge has lead to a lot of complexity and in return a higher learning curve for beginners. Thankfully, the Javascript community is quick to come up with ways to cope this expansion. There are many places where you can learn frameworks and libraries that can help you build your dream software in Javascript. React is a great choice to start off with for building web applications, VueJS and Angular are also good choices. As I am mostly from React background, most of my frontend resources will be coming from a React developer's background, albeit I will try my best to include resources I find valuable for learning other frameworks as well.

### Resource lists

| Website                                                               | Description                                                                                                                                                                                                                                                                                                                                                                                            |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [react-redux-links](https://github.com/markerikson/react-redux-links) | The one place that every React developer must bookmark. The author,  [markerikson](https://github.com/markerikson) and the react community has put a lot of time and effort into organizing and regularly updating this repository with detailed explanations of every aspect of the React ecosystem. You will find information on everything from JavaScript basics to architecture and build systems. |

## Conclusion

I hope these resources are helpful to you in your journey towards learning JavaScript and becoming a pro efficient JavaScript Engineer!