..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:
2. Async Code
I don’t have a single great resource here, but here are some random blog posts.
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
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
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.
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:
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.