Modern front-end web development is in constant change. The evolution is this area has been so rapid in the past years that sometimes it’s hard to keep up with the new kids on the block while maintaining focus on what needs to be done.

One example is this image, that gives you an overview of all the different tools and technologies that have a part in the front-end and JavaScript ecosystem.

(Since there is a huge chance that, while I am writing this article, there are 100325 new front-end tools being released, it’s possible that this image is already not completely up to date.)

The Front-End Spectrum

• Core
  • HTML (HTML5), CSS (CSS3), JavaScript (ES6), Web Components
• UI Frameworks
  • Bootstrap, Ionic, Foundation, PureCSS
• Responsible Web Design
  • Responsive Web Design, Progressive Enhancement. Accessibility
• Templating
  • Handlebars, Haml, Jade
• Browser Refreshing
  • LiveReload, Guard
• CSS Preprocessors
  • Sass, Less.js
• OOCSS & Style Guides
  • MVCSS, SMACSS, BEM, Inuitcss, KSS, Pattern Lab
• Version Control
  • Git, SVN, Mercurial
• Package Managers
  • Npm, Bower, Yarn
• Front-End Performance
  • WebPagetest, Mod_pagespeed, PerfBudget, CriticalCSS, Picturefill
• JS Frameworks
  • jQuery, Backbone, VueJS, AngularJS, React, Ember
• JS Preprocessors
  • CoffeeScript, TypeScript, Babel
• Process Automation
  • Grunt, Gulp, Broccoli
• Code Quality
  • JSCS, ESLint
• Build Tools
  • RequireJS, Browserify, Webpack
• Testing
  • Jasmine, Mocha, Protractor, Karma

– quoted from withinsight1@medium

Not in shock yet after this list, so the next link is for you. The frontend-dev-bookmarks repository on github, has an even more comprehensive list in terms of front-end tools and resources.

Finally, if you want more that just a list and you’re looking for some concrete knowledge and concepts of front-end developing, than nothing better then to take a look at the Front-End Developer Handbook 2017. This is a free gitbook that has been kept up to date by the community and can be a great starting point if you’re planning to dive deep into this dangerous and mysterious world.

Bonus Video (The myth of the “Real JavaScript Developer” – Brenna O’Brien)

If you went through this list and you thought that it is just crazy overwhelming, this video is for you!

Happy coding

The post The Front-End Web Developer Spectrum appeared first on João Ribeiro.