Roadmap to becoming a web developer in 2019

Here's a list of things I have never even heard of just from the "Front-end Roadmap" section: BEM, OOCSS, SMACSS, Bulma, JSCS, ngrx, Vuex, Ava, Protractor, Cypress, Emotion, Radium, Glamorous, After.js, Universal, Nuxt.js, Carlo.

That's only the ones I've never even heard of until today. There's a bunch more I've heard of but never used.

This page is completely the wrong way of thinking about how to become a web developer.

e.g. webpack, I ended up getting it setup because 90% of the tutorials out there use it. Same thing for NPM scripts, use NPM, you figure out 'npm run' pretty quick. It isn't learned per se, it is just sort of acquired.

Same thing for eslint, most tutorials start off with "ok now install eslint and use these rules"

If you use react, you'll learn redux or mobx because that is what all the tutorials teach you to use. It'll just happen, and maybe after a month or so of use (or some independent research), the new developer will understand the code they are using.

Learning a test framework, hopefully, comes naturally after the code base grows large enough that a quick manual pass through no longer suffices.

I think going out and purposefully learning these technologies one by one is sort of silly, thinks make a lot more sense in situ. Go build something, after it is mostly done, figure out what gaps in knowledge exist, fill those gaps in.

Yup. Been doing this since 1999.

The whole "front end"/"back end" thing is an incredibly unrealistic and unnecessary division. Real life work is much more complicated and nuanced than that. I don't know of anyone, maybe outside of (as you said) huge companies, who works that way, having "picked a path" and entirely focusing on one side of the stack. Even if you are a "front end" developer, you are going to need at least passing familiarity with the other side, and vice versa.

Right now, I have back end code open in one split, front end JS in another, HTML in another, an ORM model for reference, and Paw with some API calls. All of these things go together, and I would have a hard time understanding any single part without being familiar with the others.

After you've been doing this for a few years you realize that code is code, whether it's running on a server, or in a browser, or on a desktop or mobile device. It's just code. Once you understand how to "think" like a developer (which in my experience is the biggest hurdle people face), the differences between any of them aren't nearly as large as they seem, and almost all of those things in that graphic are just abstractions over code.

B) You don't have to literally "choose a path" and only do that, these are different aspects of web development and they are roadmaps for each that lay out a path that the author found useful from start to finish. You can hop between them as you wish, but front-end work is distinct from back-end work and naturally they wouldn't be in the same progression.

Are you purposely being dense? Serious question, because I found this resource to be informative.

EDIT: Adding the disclaimer from the page since apparently everyone wants to interpret this as a be all end all resource due to a bad HN submission title:

The purpose of these roadmaps is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to pick what is hip and trendy. You should grow some understanding of why one tool would better suited for some cases than the other and remember hip and trendy never means best suited for the job