Thread by @oliverjumpertz

Some of the most important tools beginners in web development should take a look at:

- ESLint
- Prettier
- Babel
- Webpack/Parcel/Snowflake/esbuild
- Mocha/Jest

Let's go over them individually.

A thread.

1. ESLint

ESLint can take care of both code quality and code style.

Code quality covers issues like unused variables.

Code style covers issues like mixing spaces and tabs to indent code.

A good rule of thumb is to use ESLint to check your code quality.

1/9

2. Prettier

Prettier is a code formatter.

It takes care of code style and rewrites your code such that it conforms to your style guide.

Use prettier to take care of your code style while ESLint covers code quality.

2/9

3. Babel

Babel is a transpiler. It takes JavaScript code and emits JavaScript code.

The web can be fragmented sometimes. Many users have different versions of browsers.

Some older versions of browsers come with older JavaScript runtimes.

3/9

The job of Babel is to enable you to write the latest version of JavaScript and then transpile your code such that it also runs on browsers that don't have runtimes with certain language features yet.

You can define the target versions you want to support.

4/9

4. Webpack/Parcel/Snowflake/esbuild

These tools are bundlers.

Web projects can become complex pretty fast, and they can contain many files and a lot of code.

Especially CSS and JavaScript libraries can sometimes be huge, although you only use a fraction of them.

5/9

Bundlers take care of creating a deployable bundle of code, and many of them also come with tree-shaking, which is a technique used only to deliver the code that is used in your app.

This reduces the amount of data your users have to download and speeds up your site.

6/9

5. Mocha/Jest

Mocha and Jest are testing frameworks.

Those frameworks enable you to write JavaScript code that tests the code of your actual app.

By asserting whether your code does what it is supposed to do, you protect yourself against unwanted bugs.

7/9

When you run those frameworks/tools, they execute all your test code and then print the results of running your test to the terminal, including a valid or non-valid exit code.

8/9

6. Thread end

That's it for this thread.

If you liked this small introduction to some of the more important tools in web development, leave a like, retweet, and follow me (@oliverjumpertz) for more content like this!

9/9