Online Developer Tools For Gliding Through The Simplest Tasks

Online tools to get you through the simplest tasks

Without wasting any time, let’s cut to the chase.

Here’s a list of online tools that can make your job easier during various phases of development ( sorted in no particular order)

Bundlephobia

Ever since modern front-end frameworks have come into the picture people have wanted to keep their bundle size as low as possible to reduce page load time for users. Bundlephobia helps you analyze how much size an npm package can add to your project.

You can upload your package.json file directly on the website to get an analysis of all the packages in the project or search for individual package details.

Calculating the size of pdfmake library

Cloud Craft

Cloud Craft helps you design and budget your cloud. It has a very cool drag and drop interface to create 3D diagrams, by connecting different cloud infrastructure services (currently only for AWS). It has a budget tab, which will give you a breakdown of your costs for the current architecture.

Planning cloud architecture using AWS services.

Can I Use

If you have wondered about browser compatibility for any front-end technologies (eg: local storage), Can I Use is the place to go. It offers updated support tables in order to determine the support of front-end web technologies for desktop and mobile browsers.

Testing compatibility of local storage on browsers

Repl.it

repl.it is the perfect online IDE that you have been looking for all these years. You can boot any programming environment for your favorite language or tech stack within less than 2 seconds. It supports all modern languages such as Python, Kotlin, Ruby, JS, etc. You can install libraries or packages and use them directly without having to download or manage them. You can share your code directly by sharing the replit link and also embed a repl.it for your users to interact with the code.

Using Express JS on a node server environment.

Requestbin

Requestbin gives you an instant HTTP endpoint that will collect all the requests sent so that you can interpret them easily to check and validate data. It can be really useful when you have to debug webhook requests from various websites where you don’t know the exact structure or type of data that you might receive.

Data received through post request to the endpoint.

CodeStats

CodeStats is a free status tracking tool for programmers to track the amount of code you write. It has plugins for all major Editors and can be integrated quickly. At the end of the day, it gives a simple yet comprehensive analysis of all the coding you did on your different machines.

Snapshot of the codestats dashboard.

Responsinator

Responsinator allows developers to quickly check how their website will look on the most popular devices. This can really come in handy when you don’t have access to numerous devices and has to make sure that your website doesn’t break on these devices.

Diffchecker

Diffchecker is an online tool to check differences between two code snippets or files, images, and even PDF files. They have a very intuitive UI to compare the items in different modes such as slider, split, overlay, etc.

Fingerprint JS

We all have been there, getting a list of unique identifiers from browsers through a website is no easy task. Fortunately, this awesome library produces a distinctive browser identifier without the use of cookies or any data that a malicious user can reset readily. It quickly extracts numerous properties from a web browser which can be used separately or to create a hash which can be used to identify a unique user. It’s the closest replacement to device UUID on a mobile device, that you can get for your web project. You can use it over CDN or install using the npm package.

Extracting user information from browser.

Webcode

Webcode is one of the best code generators out there. You can generate code for various basic and advanced needs by just entering your requirements. This is very useful for web developers who are not familiar with playing around with HTML and CSS.

Generate CSS code for different borders on 4 sides

Airtap

The simplicity and capacity of Airtap to readily execute a test suite in many browsers without having them installed locally gives it the edge above other cross-browser test runners. It allows you to iterate rapidly during development without worrying about the lack of support for a browser and provides a nice browser coverage before launch.

If you liked this article, click on the 👏 button (did you know you could go up to 50?), follow me here on Medium and share this article on your socials!

I’m Nabil, and I’m a Web Engineer at Softway. You can read more about me here:

[ISpeakCode - Development & Digital Designing and branding studio
'I speak Code', because code runs the world !ispeakcode.com](https://ispeakcode.com/ "https://ispeakcode.com/")