The internet is full of awesome tools that can come in handy to make our lives easier especially we software developers.
They can save us precious time, resource and energy when we want to quickly try out, test or run any activity in our app. But, the problem is they are not that easy to find, so in this post, I'll outline 10 awesome online tools that can change our life as developers for good.
Have you been stuck in a situation where you want to seamlessly share your SPA components to your team or to the world without creating extra repos? And also simultaneously manage versions of the components in a Git way? Then, Bit is the SOLUTION you have been looking for.
Bit is a cloud platform that lets us seamlessly share components in the cloud. This provides an easy way to reuse code and components seamlessly without extra files and repos.
Bit is designed to help teams scale the sharing and management of components to hundreds and even thousands of components. From that philosophy, it takes care of the components' entire lifecycle from development to deployment so that your team can share and manage any number of components for any number of developers. This includes:
- Managing and publishing any number of components from any number of repositories/libraries at any scale with 0 overhead
- Creating discoverability for shared components so that every developer can easily find and choose components
- Increasing the adoption of shared components by removing the main barriers and encouraging collaboration
Major companies and Open Source maintainers are using Bit to help scale their productivity and development.
Popular UI themes maintainers, like SemanticUI, etc, have hosted their components in the Bit dev cloud. Also, popular Github repos and organizations like ramda have moved their utility functions repos to Bit.
One of the key features in Bit is that you can play with any components or functions you want to use in your project in the Bit playground before installing them. It currently supports hosting Angular, React, Vue components and Node utility functions.
This 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.
Have you ever been unsure whether a Web API would be compatible in a certain browser or even be available in mobile browsers? Then, caniuse.com offers the solution right away.
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(...)
// pic
See the results. The browsers and the versions that support the navigator.share(...) are all listed.
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.
This tool reverses what minify does.
This tool lets us make a piece of minified code become readable again.
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. Simple you don't minimize your browser, just create a new tab and navigate to stackblitz,com and click on the Angular project icon, you are presented with a full running Angular project online.
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.
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.
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.
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.
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.
https://prettier.io/playground
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.
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.
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 !!!
Nice list. I just wanted to mention that the link to minify.com (line 54) is not pointing there but to this here gist (may be because minify.com does not exist).