Client Tool Classification

Cover Image Source: https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0

So, though you are a beginner or expect, you would be using lot of tools that aid in code development, its testing, fixing any errors, making it public/live, hence making your life easier.

All of these tools would mainly be classified into 3 categories.

1. Safety Net Tools

these tools are useful during code development.

2. Transformation Tools

these tools transform your code. Like one language/syntax to another.

3. Post-development Tools

these tools are helpful during testing and deployment.

Few examples under each category:

Safety Net

1. Linters
   • Eslint > a highly configurable tool for catching potential syntax errors and encouraging "best practices"
   • csslint
   • webhint > that surfaces best practices including approaches to accessibility, performance, cross-browser, security, testing for PWAs etc.
2. Source Code Control (version control)
   • SVN
   • Git
3. Code Formatters
   • Prettier
4. Bundlers/Packagers >these get your code ready for production. Some features are like removing unnecessary spaces which reduces the size (minifying), removing unnecessary lib's that your code is not using (tree-shaking).

• Parcel
• Webpack

Transformation

These Tools convert Code to browser-compatible code

1. Write code using latest language features, and have it transformed which works on most of the devices including old browsers that don't support these features in native lang.

   • Babel > JavaScript compiler that allows developers to write their code using cutting-edge JavaScript, which Babel then takes and converts into old-fashioned JavaScript that more browsers can understand
   • PostCSS >allows to write cutting-edge latest CSS. If there is no equivalent way in old browsers, PostCSS will install JavaScript polyfill to emulate the same behavior.

2. Write code in entirely different language and have it transformed

   • Sass/SCSS > allows you to use variables, nested rules, functions and other features some of which are not available in native.

• TypeScript

  superset of JavaScript that provides additional features. TypeScript compiler will covert Typescript Code to JavaScript when building for production.

  • Frameworks: React, Ember, Vue etc > built on top of vanilla JS, allows you to use custom syntax, which later be transformed.

Post-development

This makes sure that your code makes it to servers and continues to run.
This stage runs mostly automatically, unless there is an issue.

1. Testing

   1. Frameworks for writing test
      • Jest
      • Mocha
      • Jasmine
   2. Automated tests
      • Travis CI
      • Jenkins
      • Circle CI

2. Deployment

   • tools to get your site published
     • Netlify
     • Vercel
     • Github Pages

3. Auditing Tools/Quality/etc

   • Code Climate
   • Github bots
   • Updown

Exhaustive List of Tools:
https://frontendmasters.com/books/front-end-handbook/2019/#6

Source: MDN