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.
(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
- UI Frameworks
- Bootstrap, Ionic, Foundation, PureCSS
- Responsible Web Design
- Responsive Web Design, Progressive Enhancement. Accessibility
- 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
- Jasmine, Mocha, Protractor, Karma
– quoted from [email protected]
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.
If you went through this list and you thought that it is just crazy overwhelming, this video is for you!
The post The Front-End Web Developer Spectrum appeared first on João Ribeiro.