[JimDabell]

This is a disaster and more likely to put a newbie off or confuse them than to help them.

Why is the largest callout dedicated to WebAssembly, noting it as not ready yet? Why is "Using DevTools" near the bottom, branched off PWAs instead of near the top? Why are server-side things like Apollo on there, above things like static site generators? Why are mobile and desktop applications on there? There's a stack of "Redux, MobX, RxJS, NgRx, VueX" boxes along one side with a tick next to each one. Who is that supposed to be helping?

How is a newbie trying to get into front-end development meant to make sense of this without being completely overwhelmed? I know developers with years of experience that would be scared by this; it's one gigantic imposter syndrome trigger.

In order for a resource like this to be effective, it needs to prioritise and contextualise. This reads more like a "look at all the things I know about" boast. Less is more. A resource that aims to actually help newbies should be at most a quarter of the size and actually provide context and priorities.

[soneca]

I read your comment first and went on to read the OP expecting something terrible. What I actually found is something that is about 90% right, specially in the beginning, where it matters most for beginners.

I feel like it work as a good guide for a beginner as it is, but yes I would change it a little bit myself, mostly what you mentioned.

[BehindBlueEyes]

As a newbie, looking to learn front end (and programming in general) without a programming background nor related career goals, I actually feel like this is gold. One of the hardest things when learning is that you don't know what you don't know. That's where this is so useful:

- I can easily see areas where I feel comfortable, and identify concepts I've at least heard of before. I can put them in context to learn more about them. For example, I learnt SASS but didn't know about css preprocessors.

- Where I identify gaps in my knowledge, it gives me the keywords to start digging deeper.

I do get imposter syndrome, but it is usually triggered by uncertainty and unclear expectations etc. This actually helps by giving me a more objective way to assess my skills - or lack thereof.

Also, I find actual beginner ressources particularly unhelpful. It's always the same: a painstaking slow build up from "hello world" to substractions, which I can't skip because I'll miss one thing that's critical to understand the specific tool/language/framework but doesn't teach me any new concepts... and then suddenly! arrays, realistic physics, Documentation that just lists functions with 50 parameters and assumes you'll guess the correct syntax... This at least gives me choices where I feel like I can pick an achievable next step...

[aggie]

As a non-developer who has a career track-change in the back of my mind, I can't speak to the accuracy of the information, but I disagree with your take that it needs to be pared down. This kind of extended view of the path forward is exactly what seems to be missing in the endless world of beginner tutorials.

Now maybe the truth is this kind of path simply can't be accurately laid out like this. But don't not attempt it just because it might be intimidating for some.

[benburleson]

I took a quick look at the scale of the chart and assumed it was satire.

The state of front end development is a major shit-show.

[Polylactic_acid]

The presence of many tools does not make something a shit-show. I have been doing frontend development using a modern toolset for years now and I have not even heard of half the tools listed on this chart and I only actively use about a quarter. And most of the stuff listed isn't some major investment to learn, you just find it when you need it and spend a day reading the docs.

There are plenty of problems with frontend dev but this chart doesn't highlight anything more than searching github for a list of C++ libraries does.

[retreatguru]

Same experience. I thought this was a joke then looked closer and realized it is legit. And helpful also!

[johnnylambada]

Calling this a disaster is such hyperbole. Anything can be better but the OP's document is a great first start! It's a really good roadmap to learning the technologies that matter for web development in the order that they should be learned.

[JimDabell]

> Calling this a disaster is such hyperbole.

Every time I see this, the first thing that comes into my head is to wonder how many aspiring developers took one look at this and decided that it was too difficult and that they should try something else instead. That's why I call it a disaster, and I don't think it's hyperbole.

[johnnylambada]

There are many topics that are difficult and complex, that doesn't mean they're not worth studying and understanding. Just because you take a look at this and think "wow that's too much for me to learn" doesn't mean that everybody thinks that.

[JimDabell]

I've been doing this over twenty years, I'm not concerned for myself. But if you have led less experienced developers, you'll know that their confidence levels can vary immensely. If I showed this to some of the less experienced developers I've led, they would freak out. Just because not everybody is intimidated by it, it doesn't mean it doesn't intimidate some people who would make excellent developers. This is actively harmful.

[johnnylambada]

"disaster" and "actively harmful" are hyperbole. This is a helpful document for people who want to understand what development from first principles. If that doesn't describe the people you work with that's fine, but yours is the first comment people will currently see about this article so it matters.

[JimDabell]

> If that doesn't describe the people you work with that's fine

That is not the problem. I cannot put it any blunter than this:

I have worked with good developers who, had they seen this when they were newbies, would probably not have become developers. I have worked with good developers with years of experience who, had they seen this, would have panicked and thought they were not good developers. This hurts people.

If you don't care about that, then I cannot explain it any further in such a way as to make you care. But it is not simply "oh, some people aren't interested and that's fine because others are".

[scarface74]

I’m far from a newbie developer, and every time I see something like this, I think “why bother”?

Modern front end development is a shit show and pays less than any other area of software development. I know enough HTML/CSS to build a workable internal website and I know Javascript like the back of my hand. But, given a choice between specializing on the front end and compete with “good enough” boot camp grads and specializing in backend architecture and infrastructure, I chose to do the latter.

[rwnspace]

> it's one gigantic imposter syndrome trigger

Yes, this was exactly my experience when I first encountered the repo for this project a couple years ago [0]. I actually still remember what it was like to read this for the first time.

From the perspective of someone who has been impaled on the hedgerow of despair, trudged through the endless shale of '5-minute-must-reads' and fought their way through the jungle of 'lazy tutorials rehashing a languages main beginner resource', I see why these kinds of things are created and upvoted/proliferated by developers who are no longer beginners. They're probably helpful to a minority I expect to show up in this thread. But to me these roadmaps are pathological (no pun intended) - inducing a cocktail of fear, apathy, and perfectionistic mania.

If you happen to be a beginner reading through this thread and thinking of using this map - don't. Get a feeling for the territory first. Don't worry about all these empty terms. Once you have a feeling for this programming thing you can use your powers of prediction, analogy, and noting minor differences to learn new stuff. You don't have to (you don't WANT to) jam it all into your brain at once. I took that route and it makes it really hard to play and explore for yourself, it was so painful and inefficient.

Go the naturalistic route. It's not wrong unless it doesn't work, in which case it's still not wrong. It's all good. Have fun. Make yourself laugh. Do it stupid, who cares. Edit/break/play around with stuff, maybe go Codepen [1] if that sounds fun. Maybe you want structure and streamlining, go see if FreeCodeCamp is for you - you'll tick off half the boxes here without even realising it, and that half will be the half that's worth anything to you :)

[0] https://github.com/kamranahmedse/developer-roadmap/

[1] https://codepen.io/picks/pens/

[nirui]

I think there was a word trick there. "becoming a modern front end developer" != "becoming a front end developer", so I guess maybe the guide was for people who already are front end developer, but not modern enough (????)

The real evil I think is when somebody starts to use roadmap like this one to measure other people. Don't do that, my dear comment readers, roadmap is a better tool when you use it against yourself, not the others.

[labster]

It’s a roadmap, not a how-to. Think Thomas Guide, not Google Maps. All the main streets are on the map, so if you get lost, you can check the map to see where you are.

[mikeg8]

I totally agree. Calling it a step by step guide without providing any context to support the technologies makes this unusable to most beginners. It may have utility for a mid-level dev trying to make sure they’re well polished, but it’s not for the novice, and needs much more to be truly useful.

[conanbatt]

This is great. It's a very comprehensive map of current technologies.

Perfect is the enemy of good.

[arkj]

It will be really good to see a post on the roadmap you have in mind.

[howigottomemph]

I also find the ordering a bit strange in some cases. If you look at it as a bottoms up documentation of how technologies build on each other, that's one thing. But learning things in this order would have been overwhelming to me. I've bumped up against every technology on this list, but mostly as they've come up on projects.