As a developer, one of the most significant lessons I’ve learned is to work smarter, not harder. Utilizing tools that increase your productivity and simplify your life is one of the finest methods to adhere to this rule. We’ll examine seven tools that I personally use today that you may or may not be familiar with. In fact, download the video if you’re already utilizing all seven of these technologies. In any case, be sure to like, subscribe, and leave a comment below because I’ll be choosing one random remark to win this t-shirt the next week. Let me first briefly introduce myself. I work as a front-end web developer, back-end engineer, user experience designer, and entrepreneur.
In light of the fact that developers are involved in almost every step of the product production process, the list you’re about to view is very much oriented at them. And just so you know, I’m not being paid in any way to rave about these products. They are tools that I actually love using in my daily job and that I believe will be helpful to you.
Let’s start with bundle phobia in no particular order. You may calculate the amount that an NPM package will increase the size of your overall bundle using this online application.
To optimize the initial page load for new users when using a modern front-end framework, aim to keep the bundle size as short as you can. Bundle Phobia makes it very simple to analyze the addition of a new dependency to your project; simply enter the package name, and it will tell you the bundle size, the download time, whether or not it’s tree shakable, as well as a whole host of other details for every single version of that package. And to see all of your dependencies ranked by size, you can even submit your full package in JSON format. This is undoubtedly an app you need to look at if, like me, you have bundled fear.
Let’s now look into Cloud craft, another web application that will assist you in planning and budgeting for your cloud infrastructure. At the moment, only AWS has access to it. Nevertheless, I still find it handy even though I primarily use GCP. It offers a very user-friendly drag-and-drop interface that makes it simple to link various cloud infrastructure services. This is ideal for budgeting as well as planning, and after your infrastructure is set up, you can visit the Budget page to get an anticipated breakdown of your overall costs. Additionally, since all of the big clouds have comparable pricing structures, Azure and GCP will really see some fairly good returns.
The following is Figma, which is likely the most well-known app on this list.
I do, however, frequently use Adobe Illustrator. Therefore, figma must provide at least ten times as much value as Illustrator for me to switch to it. And it does it in a number of different ways. First of all, figma is a design tool that enables you to make mockups for your apps and draw visuals. And in addition to offering a desktop application, it also offers a web application that performs and is just as effective as the desktop application. It seems a little strange that it uses web assembly to attain such fantastic performance. However, I’m far more productive with the figma web app than I am in the desktop version of Adobe Illustrator.
For my purposes in graphic design, it is also totally free. Additionally, because it’s web-based, I can access my project on any computer and all of my files will appear instantly and without any additional work. Nevertheless, it’s also a really nicely designed piece of software on top of that. In that it gives you all you need and wants while excluding anything else, it is akin to sketch. And it possesses a few superpowers. For instance, if you’re an app developer, you can simulate various events that occur on the elements.
Additionally, you may export your styles as CSS or as styles for Android or iOS. Overall, I’ve been quite impressed with figma, and I feel like I should be paying them more than zero dollars a month to use this. A full-featured design tool, however, may not always be what you truly need.
Which takes me to font flipper, another web application. There are hundreds, if not thousands, of free fonts available on Google; this app was created using Angular and Firebase with the sole intention of assisting you in choosing the right font for your projects. However, using font flipper makes it possible to quickly find the ideal one for your design to bring in your own graphics, and then experiment with different fonts.
And one thing I truly appreciate about it is how unobtrusive and focussed the user interface is. The way you choose the fonts, though, is the most interesting element. Additionally, it uses an interface similar to that of Tinder, where you swipe left to indicate dislikes and right to indicate preferences. Once you’ve chosen a few fonts you like, you can simply go to Google Fonts and download them.
We’ll now change gears and examine vizbug, a recent Chrome extension. Earlier this year, this was launched. Additionally, it is a tool that enables visual interaction with your website. As you can see, we are on a fire ship. And then we have this toolbar over on the left side and these pink lines hovering all over the different DOM elements on the site.
Over the years, I’ve dealt with many different rest clients, and you may utilize ones that are directly integrated into Visual Studio Code. However, I always seem to return to my sleeplessness. This tool will aid you in maintaining organization throughout your whole workflow, whether you’re developing a REST API or a Graph QL API. You can save reusable values that you can later use to debug your API because you don’t want to always be writing time-consuming HTTP calls from scratch. Additionally, it simply has a lovely and well-designed user interface.
For instance, insomnia will automatically make a New Request for the SpaceX Graph QL API if we want to. So all we have to do is start typing out our query and we’ll get this awesome IntelliSense for everything we type.
Insomnia paired with the strength of Graph QL results in a fantastic developer experience. The sixth app flare will now be followed by the seventh and final app flare.
Another design tool is this. nevertheless, one designed especially for producing 2D vector animations. It is comparable to figma in that you can create graphics using it. However, as you can see at the bottom, we also use keyframes to regulate how the graphics move over time. Additionally, flare is a proponent of the open design movement, so you can view the creations of a wide range of other designers right on the website and understand just how they created their animations. But a big part of the reason I’m really excited about flare is that these graphics can be exported to work in flutter.
This makes it simpler than ever to integrate stunning, high-performance animations into native mobile apps. In the future, I’ll provide a comprehensive tutorial on this. However, I can’t think of a better alternative than flare if you’re designing animations in a native app, so I’ll end the list there. All of these goods, as I mentioned at the beginning of the movie, are ones that I can personally attest to and use myself. Additionally, I’ve now realized something that wasn’t anticipated: all of these tools are free. Additionally, they were all constructed utilizing web technology. And that is a lovely thing. My opinion is. I’d love to learn more about the tools you use to increase your productivity.