12 Useful Online Tools for Frontend Developers

Useful online developer tools I love to use.

The internet is full of awesome tools that make our lives easier as frontend developers. In this post, I’ll give a quick review of 12 tools I use frequently in my dev work.

1. CanIUse

Have you ever been unsure whether a Web API would be compatible in a certain browser or even be available in mobile browsers? This online tool makes it easy for you to test a Web API for browser compatibility.

Let’s say we want to know which browsers and their version that will support the Web Share API: navigator.share(...)

See the results. The browsers and the versions that support the navigator.share(...) are all listed.

2. Minify

To reduce the bundle size of our app code we push to production we minify them. The minification removes whitespaces, dead code, etc. This results in a drastic reduction in the app bundle size which will lead to faster load times on browsers.

This online tool minify.com enables us to minify code from a web app.

3. Bit.dev

Bit.dev is an awesome component hub. I use it to host, document and manage reusable components from my different projects. It’s a great way to increase code reuse, speed up development and optimize your team’s collaboration.

It’s also a good alternative for building a design system from scratch (as it essentially has everything a design system needs). Bit.dev works perfectly with Bit , an open-source tool that handles component isolation and publishing.

Bit.dev supports React, React with TypeScript, Angular, Vue and many others.

Example: searching for shared React components in Bit.dev

4. Unminify

This tool reverses what minify does.

This tool lets you make a piece of minified JS code become readable again by unpacking, deobfuscating, and prettifying them.

5. Stackblitz

This is everyone’s popular tool. Stackblitz offered us the ability to use the world-popular and most-used IDE in the world, Visual Studio Code on the web.

Stackblitz offers a quick scaffold of Angular, React, Vue, Vanilla, RxJS, TypeScript projects with a single click.

Stackblitz is particularly useful when you want to try out a piece of code, or a feature in any of the current JS frameworks from your browser. Imagine you are reading an Angular article and you come across a code you wanna try out. You can minimize your browser and scaffold a new Angular project just for a few LOCs.

Fast and easy.

There are other awesome online IDEs, but I believe the tipping point of Stackblitz was using everyone’s favorite Visual Studio Code feel, tool everyone is familiar with.

6. JWT.io

If you’re using JSON Web Tokens (JWT) to secure your app or using the JWT to let your users access protected resources on your backend.

One way to make a decision about whether or not a route or resource should be accessed is to check the token’s expiration time. There are times when we want to decode a JWT to see its payload, jwt.io provides just that.

This online tool enables us to plug in tokens to see their payload. Once we paste the token, jwt.io decodes the token and displays its payloads.

7. BundlePhobia

Have you ever been unsure of the size of your node_modules or just want to know the size a pakckage.json will be installed in your machine? BundlePhobia provides the answer

This tool enables us to upload a package.json file and it displays the size of the dependencies that will be installed from the package.json.

8. Babel REPL

Babel is a free and open-source JS transcompiler that is used to covert modern ES code to plain old ES5 JavaScript.

This tool is an online web app setup by Babeljs team where we can transpile ES6+ code to ES5.

It enables us to try out recent additions made to ES or some features that are at certain stages of addition to the ECMA. IT can prettify the code, limit file size and lets us time travel through the duration of the transpilation.

9. Prettier Playground

Prettier is an opinionated JS code formatter. It enforces a consistent style by parsing your code and re-printing it with the JS best coding practices.

This tool has been popularly used in our dev environment but it also has an online playground where you can prettify your code.

10. Storybook

Storybook is an online tool where you can create, edit, test and run any components in isolation.

It enables structured UI development, testing, and documentation for every major view layer including React, Angular, Vue, React Native, Ember.

11. Postman

This tool helps with a quick test of your API endpoints: GET, POST, DELETE, OPTIONS, PUT.

I have used this tool and it is worthy to come under the 11th position.

12. JSLint

In the world of JS linters, JSLint tops the league. This online tool version of the JSLint enables us to lint a piece of JS code or a JS file in our browser.

Navigate to https://jslint.com to try it out.

Conclusion

There are many more to the list, but these are my favorites.

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email or DM me.

Thanks !!!