If you want to become a developer, the most important lesson to learn is to work smarter and not harder. 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'll look at seven different tools that you may or may not have heard of. In fact, if you're already using all seven of these tools go ahead and download the video. The list you're about to see is very much geared towards developers who are involved at virtually every point in the product creation process and full disclosure.
Let's get started in no particular order with bundle phobia this is a web application that allows you to determine how much an NPM package will add to your total bundle size. If you're working with a modern frontend framework, you want to try and keep the bundle size as small as possible to optimize the initial page load. For new users, bundle phobia makes it very easy to analyze the addition of a new dependency to your project. Just enter the package name and it will tell you the bundle size, the download time, whether or not its tree shaker Bowl, as well as a bunch of other information for every single version of that package and you, can even upload your entire package.
Now let's check out another web app that will help you design and budget your cloud infrastructure called cloud craft. Its currently only available for AWS but even though I mostly use GCP. It is useful as 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 its also great for budgeting. Once you have your infrastructure in place you can go to the budget tab and it will give you an estimated breakdown of your total cost because all the major clouds have similar pricing models. The actual results will translate pretty well to Azure and GCP.
Figma which is probably the most well-known app on this list. So to switch to Figma means it has to offer at least 10 times more value than illustrator and it actually delivers on that in a variety of ways. First of all, Figma is a design tool that allows you to draw graphics, create mockups for your apps and while it provides a desktop app. It also provides a web app that is just as good and performs it as the desktop version and it achieves such amazing performance by using web assembly. It seems kind of crazy but more productive app is Figma web app than the adobe illustrator desktop app and it's completely free for my graphic design needs. Because its web-based and can be opened in any machine.
But aside from that its also just a really well-designed piece of software its similar to sketch in the sense that it gives you all the things that you need.
Another web app called font clipper, 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 its 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 just a really focused and simple UI that doesn't distract you in any way.
But the coolest feature is how you actually select the fonts? Its done with a tinder style UI where you swipe left for things you don't like and right for 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.
Now we're going to switch gears and look at a new Chrome extension called viz bug. This was released earlier this year and it's a tool that allows you to interact visually with your website. There are all kinds of different stuff we can do here and I may do a full tutorial in the future 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 that 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.
Now lets switch gears to a backend tool that you can use to debug API is called insomnia. I have 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, as it allows you to save reusable values that you can go back and use as debug your API because you definitely don't want to be spending your time rewriting tedious HTTP requests every day.
On top of that, it just has a beautiful and well laid out UI. For example, we might want to create a new request for the SpaceX graph, QL, API, and insomnia will automatically do the introspection, so all we have to do is start typing out our query. So the power of graph QL combined with insomnia just gives you an awesome overall developer experience.
The seventh and final app flare this is another design tool but one specifically for creating 2d vector animations. Its similar to Figma in the sense that you can use it to draw graphics but you will 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. Learn exactly how they built their animations but a big part of the reason. Flare is that these graphics can be exported to work in a flutter that means that implementing in beautiful high-performance animations in a native mobile app is easier than ever before.