Today I'm weary of it all. I bet you are too.
This is what frontend development looks like now:
"Stuff like this diagram really makes me question the point of continuing with web work, after being in it for 15+ years. It feels like something’s gone wrong, and what used to be enjoyable and challenging is now just pointlessly changing and reinventing itself" — @simonminter
Each of these tools has its place, the problem is the vast majority of projects don't need most of it.
Clients feel frustrated and overwhelmed by the complexity of their frontend code. They're always looking for the one "guy/gal" that can actually understand how it all works. Or their app is performing horribly but nobody can figure out why and some other consultant is telling them they should have used the "Framework Du Jour" instead of whatever they picked and that would have solved all their problems.
We've lost our way.
The current trend in web development is hostile to beginners and wastes client/employer money to cure boredom or satisfy egos.
- People don't know what they are doing and choose frameworks/tools as a safety valve
- CTO was bored and wanted to try a new thing
- Lead developer was obsessed with doing everything the "right" way. "You manage state without Redux? Blah. That's just gross. How can you even work on a project without 100% test coverage?!??"
- New consultant doesn't know how to read other people's code, recommends a rewrite — go back to the the first points on this list.
I'm on a mission to do whatever I can to nudge us back in the right direction. Not that I think I can actually make that happen, but I'm going to try. I still love the web and what it promises to be and I want it to be a friendly place for beginners. I want to spend more time on delivering value to clients and less time on tooling.
So if you're a beginner I have a different flow chart for you, one that should be less daunting and more exciting. In fact, it's not even a flow chart because it's completely linear. If you're a more experienced developer, what did I leave out or have I included too much?
This list is designed to help you make cool shit on the interwebs that other people can use. Because that's actually the point. Helping other people is the point. And you don't need Webpack or Redux or whatever to do that.
With these core skills you can:
- Build amazing things for clients.
- Avoid performance problems you can't figure out
- Keep things simple and affordable for everyone
- Add new tech to your stack as you need it
- Never fear falling behind modern web trends
HTML and CSS
Markup a document
- Boilerplate and basic HTML tags
- When to semantic markup and when to not
- Classes and IDs
Layout your page
- Understand the box model
- Roll your own grid system
- Float some things
- Designing mobile first with media queries for larger screens
Style your page
- Use webfonts
- More advanced CSS selectors
- Examine recent design trends and learn how to do a few with CSS
- Use a few CSS transitions
- Basic git use plus working with remote branches, pull requests and Github
- Sass, for variables, simple mixins and imports
- Firebug or Devtools. Inspect elements, view computed styles, change styles.
Introduction to the DOM
Take some time to understand the underlying DOM API ... then do everything with Jquery.
- Event handlers
- Query selectors
- Get on some web dev friendly mailing lists and social sites, get in the habit of reading about something for a little bit every day. This way you know what exists and you can learn it as needed.
- Jquery for event binding/handling and AJAX
- Query selectors
- DOM manipulation
- Grok the deferred object
- Basic debugging skills with Firebug or Devtools
It's tough to recommend a bullet list for this, but here's my take for now:
- Object Oriented Design
- Common design patterns (e.g. MVC, dependency injection, etc.)
- Templates or virtual DOM, and when each make sense
- Testing strategies
But wait, what about ...
For all of these, you'll know when you need it and you'll have no problems picking it up on the fly because you know the fundamentals. You'll know why you want Angular instead of React and you'll pick it up quickly because you already know dependency injection because you read up on design patterns, (though I'm not even sure they're doing that in Angular 2 anymore, but this kind of makes my point for me).
Sketching with CSS will teach you how to design in the browser.
Blow away your clients with your fast turnaround time. Bend CSS layouts to your will. Show your clients comps they can actually click on.
Get a free chapter and an 8 day email course on rapid prototyping in the browser.