This is in response to an email I sent to Ben following up on his post: https://benmccormick.org/2017/07/19/ten-things-javascript/

..learning the stuff here is probably 20% head knowledge where books and such help, but 80% experience, where diving in and building stuff with supporting tutorials are important

But I did mention a few resources in there that I’d stand by, and a list of resources right now would probably look something like this:

1. Core lang:
For basics here, I mentioned Eloquent JavaScript (http://amzn.to/2uD4R1Y) in the article. If you feel good about the language basics, Effective JavaScript is a great “next level” book (http://amzn.to/2uOkMt6). It is a bit dated now even though its 5 years old because it was pre-ES6. But its outdated more in the sense of missing stuff than anything being wrong. And its great for understanding the core language. Probably my favorite JS book.

If you want to learn more about ES6 and other newer features, you can check out the resources I have here: https://benmccormick.org/2017/07/10/how-to-follow-the-javascript-roadmap/ This is a good book if you want a single place to look though: http://amzn.to/2vc61RV

2. Async Code

I don’t have a single great resource here, but here are some random blog posts.

http://2ality.com/2014/09/es6-promises-foundations.html
https://benmccormick.org/2015/12/30/es6-patterns-converting-callbacks-to-promises/
https://ponyfoo.com/articles/understanding-javascript-async-await

EffectiveJS (mentioned above) is helpful here too for a deep-level understanding

3. Dev tools
This is more of a “learn by doing” thing. The big thing is to start defaulting to using the devtools when you see behavior you don’t understand, and to play around if you can’t figure out how to understand the behavior. I’d prioritize learning the ins and outs of (In order) the JS Debugger, Elements panel, console, network panel, and profiling/perf panel. If you’re a chrome user they have fantastic docs: https://developers.google.com/web/tools/chrome-devtools/. But you’re going to learn best from a mix of reading the docs + trying things out. If you’re a Firefox user, you can bug Jason Laster on twitter about their devtools, he works on them and is a very nice/friendly guy: https://twitter.com/jasonlaster11

4. Functions
As mentioned in the article JavaScript allonge is a good resource here: https://leanpub.com/javascriptallongesix/read. It basically teaches you JavaScript with a functional perspective. Mind opening.

5. Basic Design tasks - I’m guessing you’re covered here as a recovering designer ;)

6. Networking + HTTP
Hmm, This I’m less sure about a resource. I think my advice here actually might be to try a weekend project of building a very small backend API with something like Flask or express and using that to learn a bit more about what a backend actually sees with requests. Learning how to use the networking panel in devtools can also help here

7. Node tooling
This is again more experience, but its also not too bad. Go through a tutorial of using create-react-app or angular-cli, or ember-cli, or web pack to set up a project. Try using tools like eslint or prettier to help with code style and you’ll get comfortable pretty quick

8. Framework
Another experience one. Go build some stuff. Pick 1 or 2 out of React, Angular, Vue or Ember and go build something with it. If you use one of them at work, pick a different one to see how they’re different (thats the interesting part architecture-wise). This requires a time investment to really learn architecture level stuff though, and is a skill that stacks on other skills. There are lots of good online resources and/or books for those 4 frameworks.

9. Performance
Again don’t have a single resource here. There are lots of things you can learn that will push you along a little ways here, but in the end its the sum of 1000 experiences and hard lessons that gets you good at this, not a few blog posts or books.

If you want to get serious about this, start looking at websites and try to figure out why they’re fast (or slow).

I’d also ask Sam Saccone about this on Twitter: http://twitter.com/samccone (He does perf investigation work for the Google Chrome team, he is also nice and friendly). He also has posted a bunch of perf research on his site: http://samsaccone.com/.

10. Process for learning new things

So the way I really started to learn JS was by joining https://stackoverflow.com/ and trying to ANSWER everybody’s questions. I’d pick an area of interest (functions, jQuery, whatever), and try to answer all the questions that came along with it. If I didn’t know, I’d try to look it up, or see how somebody else answered. I ended up learning a ton that way. Its also a good place to ask questions if you’re stuck on something. Otherwise, email newsletters are good for keeping up and learning new things:

http://javascriptweekly.com/ and https://ponyfoo.com/ are good ones

Following JS people on twitter is also helpful. Thats more trial and error and a lot of noise-> signal though, so not for everyone and you kind of have to pick who to follow that works for you there.

Mostly though, just start working on stuff with these things in mind and pull stuff in as you go.