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 Developer Tools Spectrum

– image from hackernoon.com (Check them website, they are great!)

UI and CSS HTML, CSS , JavaScript, B ulma, Bootstrap, Ionic, Foundation, PureCSS, MUICSS, Motion UI

Templating Mustache, Handlebars, doT, EJS, Jade

CSS Preprocessors Sass, Less.js, Stylus, Compass

Version Control Git, SVN, Mercurial

Package Managers Npm, Bower, Yarn

JS Frameworks and Libraries VueJS, Angular, React, Meteor.js, Ember, jQuery, Backbone, Lodash

Mobile Ionic, Quasar, React Native, Xamarin, Framework7, Onsen UI, Kendo UI, Sencha Touch

JS Preprocessors CoffeeScript, TypeScript, Babel, Traceur

Linters and Hinters JSHint, JSLint, JSCS, ESLint

Build Automation and Module Bundlers RequireJS, Browserify, Webpack, Grunt, Gulp, Broccoli

Tests QUnit, Jasmine, Mocha, Karma, Jest, Ava



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!

Content inspired by: hackernoon / @withinsight1 / usersnap / Among others…

Happy coding 😉