Photo by Nathan da Silva on Unsplash

One of the important lessons I have learned as a developer is to work smarter, not harder. And one of the best ways to live by that rule is to use tools that make you more productive and simplify your life.

Today we will look at seven different tools that I use personally that you may or may not have heard of. Let’s get started-

1.Bundlephobia

Bundialphobia is a web application that lets you determine how much an NPM package will add to your total bundle size. If you’re working with a modern front-end framework, you’ll want to keep the bundle size as small as possible and try to optimize the initial page load for new users.

Bundlephobia makes it very easy to analyze adding new dependencies to your project. Just enter the package name, and it will tell you the bundle size at the time of download.

Whether it’s a tree shaker bowl, as well as a bunch of other information for each version of that package. You can even upload your complete package JSON to see all the dependencies determined by the size.

If you suffer from Bundlephobia as I do, this is definitely an app you have to check out.

URL:https://bundlephobia.com/

2.Cloudcraft

Cloudcraft is a web application that will help you design and budget your cloud infrastructure called Cloudcraft. It is currently only available for AWS, but I use GCP mostly but still find it useful.

It provides a very intuitive drag and drop interface that allows you to connect different cloud infrastructure services together. Not only is this great for planning, but it is also great for budgeting once you set up your installation.

You can go to the Budget tab, and it will give you an estimated breakdown of your total expenditure. And because all the major clouds have the same price model, the actual results will translate very well to Azure and GCP.

URL:https://www.cloudcraft.co/

3.Fontflipper

This app is built using angular and firebase, and its sole purpose is to help you choose fonts for your designs. There are hundreds if not thousands of free fonts on Google. But it’s really tedious to go through and try to figure out the perfect one for your design.

Font flipper allows you to bring in your own graphics and then experiment with different fonts. And what I really like about it is that it’s really focused and simple UI that doesn’t distract you in any way.

But the coolest feature is how you actually select the don’t, and it’s done with a tinder-style UI where you swipe left for things you don’t like and right things you do like, and once you decide on a few fonts that you like, you can just go download them directly from google fonts.

URL:https://fontflipper.com/upload

4.Figma

Figma is probably the most well-known application on this list. However, I am a long-time Adobe illustrator user. To me, switching to Figma means it should give at least 10 times more value than any illustrator. And it actually provides it in a variety of ways.

Figma is the first design tool that helps you draw graphics and create mockups for your applications.

And that’s when a desktop application delivers. It provides a web application that is a great and functional as the desktop version. And achieves amazing performance using web assembly.

This sounds kind of crazy, but I am a more productive product in the Figma web app than I am in the Adobe Illustrator desktop application, and it is completely free for my graphic design needs.

And it’s web-based because I can open my project to anyone, and all my files will be there instantly without any effort but excluding it, it’s just a really designed piece of software.

It is like a sketch in the sense that it gives you all the things you need and that you have no fear and no superiority. If you are an app developer, for example, you can lock various events that happen in the elements, and then you can export your styles as CSS or as Android or iOS style.

URL:https://www.figma.com/

5.Insomnia

Insomnia is used to debug API is called insomnia. I’ve worked with a lot of rest clients over the years, and you can use ones that are integrated directly in VS code. But I always seem to go back to insomnia.

Whether you’re building a REST API or a graph QL API, this app will help you keep your entire workflow organized.

This allows you to save reusable values ​​that you can return to use when debugging your API. Because you certainly don’t want to write your tedious HTTP requests every day.

The power of graph QL combined with insomnia just gives you an awesome overall developer experience.

URL:https://insomnia.rest/

6.VisBug

It’s a tool that allows you to interact visually with your website. All kinds of different stuff we can do here. But basically, we can measure elements we can move things around, change their style.

And you can do everything live in the browser without having to write a single line of CSS.

This is extremely powerful because you can get things to a state that you actually like, and then instead of rewriting all the CSS, you can just copy and paste it from the inspector.

And another thing I really like is that you can search for a specific type of element. For example, if you want to find all the links on the page, we can just search for them.

URL:https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en

7.Flare

This is another design tool but one specifically for creating 2D vector animations. It’s similar to Figma in the sense that you can use it to draw graphics.

But you’ll see down here at the bottom we also have keyframes to control the motion of the graphics over time.

And flare is part of the open design movement, which means you can see the work of all kinds of other designers directly on the site and learn exactly how they build their animations.

And flare is part of the open design movement, which means you can see the work of all kinds of other designs directly on the site and learn exactly how they build their animations.

But a big part of the reason I’m really excited about a flare is that these graphics can be exported to work in a flutter. That means that implementing beautiful, high-performance animations in a native mobile app is easier than ever before.

URL: https://flare.rive.app/

Conclusion

I think every developer uses some extensions or tools that make their job easier. But these tools are really amazing which I have already mentioned. You can check them and use them for your development.