Discover seven amazing 🤯 tools for app developers that you have not heard of yet, but should probably be using. None of the selections are sponsored and are tools that I use in my daily work. https://fireship.io

- BundlePhobia https://bundlephobia.com/
- CloudCraft https://cloudcraft.co/
- Figma https://www.figma.com
- Fontflipper https://fontflipper.com/
- Visbug https://github.com/GoogleChromeLabs/ProjectVisBug
- Insomnia https://insomnia.rest/
- Flare https://www.2dimensions.com/about-flare
2024-02-04T06:58:07.752Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
88e43bc5-015f-487a-bdcd-4a361be535a8
68cb83155ed05cac99dc6b72c16c06f81b790872863737111646b9c2fc41a8d8
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
One of the most important lessons I've learned as a developer is to work smarter and 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'll look at 7 different tools that I use personally that you may or may not have heard of.
In fact, if you're already using all 7 of these tools, go ahead and download the But otherwise, make sure to like and subscribe and leave a comment below because I'll be picking one random comment next week to win this t shirt.
1st, a little bit about myself.
I'm a front web developer slash backendengineer slash UXdesigner slash entrepreneur slash accidental YouTuber and video creator.
So 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, nobody pays me a dime to say nice things about these products.
They're tools that I use in my day to day work that I generally enjoy and think will be useful to you.
Let's get started in no particular order with Bundlephobia.
This is a web application that allows you to determine how which an npm package will add to your total bundle size.
If you're working with a modern front end framework, you wanna try and keep the bundle size as small as possible to optimize the initial page load for new users.
Bundlephobia 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 tree shakeable as well as a bunch of other information for every single version of that package.
And you can even upload your entire package JSON to see all of your dependencies ranked by size.
If you suffer from bundle phobia like I do, this is definitely an app you have to check out.
Now let's check out another web app that will help you design and budget your cloud infrastructure called CloudCraft.
It's currently only available for AWS.
But even though I mostly use GCP, I still find it useful.
It provides a very intuitive drag and drop interface that allows you to connect different cloud Structure services together.
Not only is this great for planning, but it's 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.
Next up is Figma which is probably the most well known app on this list.
But I'm a long time Adobe Illustrator user, so for me 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 and create mock ups for your apps.
And while it provides a desktop app, it also provides a web app that's just as good and perform it as the desktop version, and it achieves such amazing performance by using WebAssembly.
It seems kind of crazy, but I'm way more productive in the Figma web app than I am in the Adobe desktop app.
And it's completely free for my graphic design needs.
And because it's web based, I can open up my project on any machine and all my files will be there immediately without any effort.
But aside from that, it's also just a really well designed piece of software.
It's similar to Sketch in the sense that it gives you all the things that you need and want and none of the crap that you don't.
And it has some superpowers if you're an app developer.
For example, you can mock up different events that happen on the elements.
And then you can even export your styles as CSS or as Android or iOS Styles.
I've been consistently impressed with Figma across the board and I really feel like I should be paying them more than $0 a month to be using this thing.
But there are times when a full blown design tool is more than you really neat.
So that brings me to another web app called Font Flipper.
This app is built using Angular and Firebase and its sole purpose is to help you choose fonts for your designs.
There are 100, if not 1000, 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 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 And it's 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 VisBug.
This was released earlier this year and it's a tool that allows you to interact visually with your website.
You can see here we're on Fireship IO 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.
There's 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 and they'll all be highlighted in pink.
The plugin does have a little bit of a learning curve to get used to, but once you have that down it will save you a ton Time.
Now let's switch gears to a back end tool that you can use to debug APIs called Insomnia.
I've worked with a lot of rest clients over the years and you can use ones that are integrated directly in Versus Code, but I always seem to go back to Insomnia.
Whether you're building a REST API or a GraphQL API, this app will help you keep your entire workflow organized.
It allows you to save reusable values that you can go back and use as you debug your API.
Because you definitely don't want to be spending your time rewriting tedious HTTP requests every day.
And 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 GraphQL API, And Insomnia will automatically do the introspection, so all we have to do is start typing out our query, and we'll get this awesome IntelliSense for everything we type.
So the power of GraphQL combined with Insomnia just gives you an awesome overall developer experience.
And with that, we'll move on to the 7th and final app, Flare.
This is another design tool but one specifically for creating 2 d 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 key frames 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 built 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.
That means that implementing beautiful high performance animations in a native mobile app is easier than ever before.
I'll create a full tutorial on this in the future, but if you're building animations in a native app, can't imagine a better option than Flair.
I'm gonna go ahead and wrap the list up there.
Like I said at the beginning of the video, these are all products that I use personally and that I can vouch for.
And another thing I just realized that wasn't planned is that all these tools are free and they're also all built with web technologies.
And that's a beautiful thing in my opinion.
Really like to hear more about the tools that make you more productive, so let me know what you're using in the comments.
If this video helped you, please like and subscribe.
Thanks for watching and I will talk to you soon.
Wow.
That's incredible.

Speaker 0: One of the most important lessons I've learned as a developer is to work smarter and 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'll look at 7 different tools that I use personally that you may or may not have heard of. In fact, if you're already using all 7 of these tools, go ahead and download the But otherwise, make sure to like and subscribe and leave a comment below because I'll be picking one random comment next week to win this t shirt. 1st, a little bit about myself.

I'm a front web developer slash backendengineer slash UXdesigner slash entrepreneur slash accidental YouTuber and video creator. So 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, nobody pays me a dime to say nice things about these products. They're tools that I use in my day to day work that I generally enjoy and think will be useful to you. Let's get started in no particular order with Bundlephobia.

This is a web application that allows you to determine how which an npm package will add to your total bundle size. If you're working with a modern front end framework, you wanna try and keep the bundle size as small as possible to optimize the initial page load for new users. Bundlephobia 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 tree shakeable as well as a bunch of other information for every single version of that package. And you can even upload your entire package JSON to see all of your dependencies ranked by size.

If you suffer from bundle phobia like I do, this is definitely an app you have to check out. Now let's check out another web app that will help you design and budget your cloud infrastructure called CloudCraft. It's currently only available for AWS. But even though I mostly use GCP, I still find it useful. It provides a very intuitive drag and drop interface that allows you to connect different cloud Structure services together.

Not only is this great for planning, but it's 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. Next up is Figma which is probably the most well known app on this list. But I'm a long time Adobe Illustrator user, so for me 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 and create mock ups for your apps. And while it provides a desktop app, it also provides a web app that's just as good and perform it as the desktop version, and it achieves such amazing performance by using WebAssembly. It seems kind of crazy, but I'm way more productive in the Figma web app than I am in the Adobe desktop app. And it's completely free for my graphic design needs.

And because it's web based, I can open up my project on any machine and all my files will be there immediately without any effort. But aside from that, it's also just a really well designed piece of software. It's similar to Sketch in the sense that it gives you all the things that you need and want and none of the crap that you don't. And it has some superpowers if you're an app developer. For example, you can mock up different events that happen on the elements.

And then you can even export your styles as CSS or as Android or iOS Styles. I've been consistently impressed with Figma across the board and I really feel like I should be paying them more than $0 a month to be using this thing. But there are times when a full blown design tool is more than you really neat. So that brings me to another web app called Font Flipper. This app is built using Angular and Firebase and its sole purpose is to help you choose fonts for your designs.

There are 100, if not 1000, 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 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 And it's 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 VisBug. This was released earlier this year and it's a tool that allows you to interact visually with your website. You can see here we're on Fireship IO 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. There's 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 and they'll all be highlighted in pink.

The plugin does have a little bit of a learning curve to get used to, but once you have that down it will save you a ton Time. Now let's switch gears to a back end tool that you can use to debug APIs called Insomnia. I've worked with a lot of rest clients over the years and you can use ones that are integrated directly in Versus Code, but I always seem to go back to Insomnia. Whether you're building a REST API or a GraphQL API, this app will help you keep your entire workflow organized. It allows you to save reusable values that you can go back and use as you debug your API.

Because you definitely don't want to be spending your time rewriting tedious HTTP requests every day. And 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 GraphQL API, And Insomnia will automatically do the introspection, so all we have to do is start typing out our query, and we'll get this awesome IntelliSense for everything we type. So the power of GraphQL combined with Insomnia just gives you an awesome overall developer experience. And with that, we'll move on to the 7th and final app, Flare.

This is another design tool but one specifically for creating 2 d 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 key frames 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 built 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. That means that implementing beautiful high performance animations in a native mobile app is easier than ever before.

I'll create a full tutorial on this in the future, but if you're building animations in a native app, can't imagine a better option than Flair. I'm gonna go ahead and wrap the list up there. Like I said at the beginning of the video, these are all products that I use personally and that I can vouch for. And another thing I just realized that wasn't planned is that all these tools are free and they're also all built with web technologies. And that's a beautiful thing in my opinion.

Really like to hear more about the tools that make you more productive, so let me know what you're using in the comments. If this video helped you, please like and subscribe. Thanks for watching and I will talk to you soon. Wow. That's incredible.
One of the most important lessons I've learned as a developer is to work smarter and 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'll look at 7 different tools that I use personally that you may or may not have heard of. In fact, if you're already using all 7 of these tools, go ahead and download the But otherwise, make sure to like and subscribe and leave a comment below because I'll be picking one random comment next week to win this t shirt. 1st, a little bit about myself. I'm a front web developer slash backendengineer slash UXdesigner slash entrepreneur slash accidental YouTuber and video creator. So 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, nobody pays me a dime to say nice things about these products.
youtube
websites
software development
home improvement
software
They're tools that I use in my day to day work that I generally enjoy and think will be useful to you. Let's get started in no particular order with Bundlephobia. This is a web application that allows you to determine how which an npm package will add to your total bundle size. If you're working with a modern front end framework, you wanna try and keep the bundle size as small as possible to optimize the initial page load for new users. Bundlephobia 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 tree shakeable as well as a bunch of other information for every single version of that package. And you can even upload your entire package JSON to see all of your dependencies ranked by size. If you suffer from bundle phobia like I do, this is definitely an app you have to check out. Now let's check out another web app that will help you design and budget your cloud infrastructure called CloudCraft. It's currently only available for AWS.
But even though I mostly use GCP, I still find it useful. It provides a very intuitive drag and drop interface that allows you to connect different cloud Structure services together. Not only is this great for planning, but it's 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. Next up is Figma which is probably the most well known app on this list. But I'm a long time Adobe Illustrator user, so for me 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 and create mock ups for your apps. And while it provides a desktop app, it also provides a web app that's just as good and perform it as the desktop version, and it achieves such amazing performance by using WebAssembly. It seems kind of crazy, but I'm way more productive in the Figma web app than I am in the Adobe desktop app. And it's completely free for my graphic design needs. And because it's web based, I can open up my project on any machine and all my files will be there immediately without any effort. But aside from that, it's also just a really well designed piece of software. It's similar to Sketch in the sense that it gives you all the things that you need and want and none of the crap that you don't. And it has some superpowers if you're an app developer.
software development
computer science
visualization
software
graphic design
animation
toys
infrastructure
For example, you can mock up different events that happen on the elements. And then you can even export your styles as CSS or as Android or iOS Styles. I've been consistently impressed with Figma across the board and I really feel like I should be paying them more than $0 a month to be using this thing. But there are times when a full blown design tool is more than you really neat. So that brings me to another web app called Font Flipper. This app is built using Angular and Firebase and its sole purpose is to help you choose fonts for your designs. There are 100, if not 1000, 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 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 And it's 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 VisBug.
This was released earlier this year and it's a tool that allows you to interact visually with your website. You can see here we're on Fireship IO 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.
websites
There's 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 and they'll all be highlighted in pink. The plugin does have a little bit of a learning curve to get used to, but once you have that down it will save you a ton Time.
websites
youtube
Now let's switch gears to a back end tool that you can use to debug APIs called Insomnia. I've worked with a lot of rest clients over the years and you can use ones that are integrated directly in Versus Code, but I always seem to go back to Insomnia.
Whether you're building a REST API or a GraphQL API, this app will help you keep your entire workflow organized. It allows you to save reusable values that you can go back and use as you debug your API. Because you definitely don't want to be spending your time rewriting tedious HTTP requests every day.
databases
And 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 GraphQL API, And Insomnia will automatically do the introspection, so all we have to do is start typing out our query, and we'll get this awesome IntelliSense for everything we type.
So the power of GraphQL combined with Insomnia just gives you an awesome overall developer experience. And with that, we'll move on to the 7th and final app, Flare. This is another design tool but one specifically for creating 2 d 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 key frames 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 built 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. That means that implementing beautiful high performance animations in a native mobile app is easier than ever before. I'll create a full tutorial on this in the future, but if you're building animations in a native app, can't imagine a better option than Flair. I'm gonna go ahead and wrap the list up there. Like I said at the beginning of the video, these are all products that I use personally and that I can vouch for. And another thing I just realized that wasn't planned is that all these tools are free and they're also all built with web technologies. And that's a beautiful thing in my opinion. Really like to hear more about the tools that make you more productive, so let me know what you're using in the comments.
animation
graphic design
visualization
robotics
products
multimedia
geometry
toys
youtube
technology
If this video helped you, please like and subscribe.
Thanks for watching and I will talk to you soon. Wow. That's incredible.
One of the most important lessons I've learned as a developer is to work smarter and 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'll look at 7 different tools that I use personally that you may or may not have heard of. In fact, if you're already using all 7 of these tools, go ahead and download the But otherwise, make sure to like and subscribe and leave a comment below because I'll be picking one random comment next week to win this t shirt. 1st, a little bit about myself. I'm a front web developer slash backendengineer slash UXdesigner slash entrepreneur slash accidental YouTuber and video creator. So 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, nobody pays me a dime to say nice things about these products. They're tools that I use in my day to day work that I generally enjoy and think will be useful to you. Let's get started in no particular order with Bundlephobia. This is a web application that allows you to determine how which an npm package will add to your total bundle size. If you're working with a modern front end framework, you wanna try and keep the bundle size as small as possible to optimize the initial page load for new users. Bundlephobia 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 tree shakeable as well as a bunch of other information for every single version of that package. And you can even upload your entire package JSON to see all of your dependencies ranked by size. If you suffer from bundle phobia like I do, this is definitely an app you have to check out. Now let's check out another web app that will help you design and budget your cloud infrastructure called CloudCraft. It's currently only available for AWS. But even though I mostly use GCP, I still find it useful. It provides a very intuitive drag and drop interface that allows you to connect different cloud Structure services together. Not only is this great for planning, but it's 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. Next up is Figma which is probably the most well known app on this list. But I'm a long time Adobe Illustrator user, so for me 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 and create mock ups for your apps. And while it provides a desktop app, it also provides a web app that's just as good and perform it as the desktop version, and it achieves such amazing performance by using WebAssembly. It seems kind of crazy, but I'm way more productive in the Figma web app than I am in the Adobe desktop app. And it's completely free for my graphic design needs. And because it's web based, I can open up my project on any machine and all my files will be there immediately without any effort. But aside from that, it's also just a really well designed piece of software. It's similar to Sketch in the sense that it gives you all the things that you need and want and none of the crap that you don't. And it has some superpowers if you're an app developer. For example, you can mock up different events that happen on the elements. And then you can even export your styles as CSS or as Android or iOS Styles. I've been consistently impressed with Figma across the board and I really feel like I should be paying them more than $0 a month to be using this thing. But there are times when a full blown design tool is more than you really neat. So that brings me to another web app called Font Flipper. This app is built using Angular and Firebase and its sole purpose is to help you choose fonts for your designs. There are 100, if not 1000, 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 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 And it's 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 VisBug. This was released earlier this year and it's a tool that allows you to interact visually with your website. You can see here we're on Fireship IO 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. There's 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 and they'll all be highlighted in pink. The plugin does have a little bit of a learning curve to get used to, but once you have that down it will save you a ton Time. Now let's switch gears to a back end tool that you can use to debug APIs called Insomnia. I've worked with a lot of rest clients over the years and you can use ones that are integrated directly in Versus Code, but I always seem to go back to Insomnia. Whether you're building a REST API or a GraphQL API, this app will help you keep your entire workflow organized. It allows you to save reusable values that you can go back and use as you debug your API. Because you definitely don't want to be spending your time rewriting tedious HTTP requests every day. And 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 GraphQL API, And Insomnia will automatically do the introspection, so all we have to do is start typing out our query, and we'll get this awesome IntelliSense for everything we type. So the power of GraphQL combined with Insomnia just gives you an awesome overall developer experience. And with that, we'll move on to the 7th and final app, Flare. This is another design tool but one specifically for creating 2 d 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 key frames 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 built 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. That means that implementing beautiful high performance animations in a native mobile app is easier than ever before. I'll create a full tutorial on this in the future, but if you're building animations in a native app, can't imagine a better option than Flair. I'm gonna go ahead and wrap the list up there. Like I said at the beginning of the video, these are all products that I use personally and that I can vouch for. And another thing I just realized that wasn't planned is that all these tools are free and they're also all built with web technologies. And that's a beautiful thing in my opinion. Really like to hear more about the tools that make you more productive, so let me know what you're using in the comments. If this video helped you, please like and subscribe. Thanks for watching and I will talk to you soon. Wow. That's incredible.
One
one
of
of
the
the
most
most
important
important
lessons
lessons
I've
i've
learned
learned
as
as
a
a
developer
developer
is
is
to
to
work
work
smarter
smarter
and
and
not
not
harder.
harder
And
and
one
one
of
of
the
the
best
best
ways
ways
to
to
live
live
by
by
that
that
rule
rule
is
is
to
to
use
use
tools
tools
that
that
make
make
you
you
more
more
productive
productive
and
and
simplify
simplify
your
your
life.
life
Today,
today
we'll
we'll
look
look
at
at
7
7
different
different
tools
tools
that
that
I
i
use
use
personally
personally
that
that
you
you
may
may
or
or
may
may
not
not
have
have
heard
heard
of.
of
In
in
fact,
fact
if
if
you're
you're
already
already
using
using
all
all
7
7
of
of
these
these
tools,
tools
go
go
ahead
ahead
and
and
download
download
the
the
But
but
otherwise,
otherwise
make
make
sure
sure
to
to
like
like
and
and
subscribe
subscribe
and
and
leave
leave
a
a
comment
comment
below
below
because
because
I'll
i'll
be
be
picking
picking
one
one
random
random
comment
comment
next
next
week
week
to
to
win
win
this
this
t
t
shirt.
shirt
1st,
1st
a
a
little
little
bit
bit
about
about
myself.
myself
I'm
i'm
a
a
front
front
web
web
developer
developer
slash
slash
backendengineer
backendengineer
slash
slash
UXdesigner
uxdesigner
slash
slash
entrepreneur
entrepreneur
slash
slash
accidental
accidental
YouTuber
youtuber
and
and
video
video
creator.
creator
So
so
the
the
list
list
you're
you're
about
about
to
to
see
see
is
is
very
very
much
much
geared
geared
towards
towards
developers
developers
who
who
are
are
involved
involved
at
at
virtually
virtually
every
every
point
point
in
in
the
the
product
product
creation
creation
process.
process
And
and
full
full
disclosure,
disclosure
nobody
nobody
pays
pays
me
me
a
a
dime
dime
to
to
say
say
nice
nice
things
things
about
about
these
these
products.
products
They're
they're
tools
tools
that
that
I
i
use
use
in
in
my
my
day
day
to
to
day
day
work
work
that
that
I
i
generally
generally
enjoy
enjoy
and
and
think
think
will
will
be
be
useful
useful
to
to
you.
you
Let's
let's
get
get
started
started
in
in
no
no
particular
particular
order
order
with
with
Bundlephobia.
bundlephobia
This
this
is
is
a
a
web
web
application
application
that
that
allows
allows
you
you
to
to
determine
determine
how
how
which
which
an
an
npm
npm
package
package
will
will
add
add
to
to
your
your
total
total
bundle
bundle
size.
size
If
if
you're
you're
working
working
with
with
a
a
modern
modern
front
front
end
end
framework,
framework
you
you
wanna
wanna
try
try
and
and
keep
keep
the
the
bundle
bundle
size
size
as
as
small
small
as
as
possible
possible
to
to
optimize
optimize
the
the
initial
initial
page
page
load
load
for
for
new
new
users.
users
Bundlephobia
bundlephobia
makes
makes
it
it
very
very
easy
easy
to
to
analyze
analyze
the
the
addition
addition
of
of
a
a
new
new
dependency
dependency
to
to
your
your
project.
project
Just
just
enter
enter
the
the
package
package
name
name
and
and
it
it
will
will
tell
tell
you
you
the
the
bundle
bundle
size,
size
the
the
download
download
time,
time
whether
whether
or
or
not
not
tree
tree
shakeable
shakeable
as
as
well
well
as
as
a
a
bunch
bunch
of
of
other
other
information
information
for
for
every
every
single
single
version
version
of
of
that
that
package.
package
And
and
you
you
can
can
even
even
upload
upload
your
your
entire
entire
package
package
JSON
json
to
to
see
see
all
all
of
of
your
your
dependencies
dependencies
ranked
ranked
by
by
size.
size
If
if
you
you
suffer
suffer
from
from
bundle
bundle
phobia
phobia
like
like
I
i
do,
do
this
this
is
is
definitely
definitely
an
an
app
app
you
you
have
have
to
to
check
check
out.
out
Now
now
let's
let's
check
check
out
out
another
another
web
web
app
app
that
that
will
will
help
help
you
you
design
design
and
and
budget
budget
your
your
cloud
cloud
infrastructure
infrastructure
called
called
CloudCraft.
cloudcraft
It's
it's
currently
currently
only
only
available
available
for
for
AWS.
aws
But
but
even
even
though
though
I
i
mostly
mostly
use
use
GCP,
gcp
I
i
still
still
find
find
it
it
useful.
useful
It
it
provides
provides
a
a
very
very
intuitive
intuitive
drag
drag
and
and
drop
drop
interface
interface
that
that
allows
allows
you
you
to
to
connect
connect
different
different
cloud
cloud
Structure
structure
services
services
together.
together
Not
not
only
only
is
is
this
this
great
great
for
for
planning,
planning
but
but
it's
it's
also
also
great
great
for
for
budgeting.
budgeting
Once
once
you
you
have
have
your
your
infrastructure
infrastructure
in
in
place,
place
you
you
can
can
go
go
to
to
the
the
budget
budget
tab
tab
and
and
it
it
will
will
give
give
you
you
an
an
estimated
estimated
breakdown
breakdown
of
of
your
your
total
total
cost.
cost
Because
because
all
all
the
the
major
major
clouds
clouds
have
have
similar
similar
pricing
pricing
models,
models
the
the
actual
actual
results
results
will
will
translate
translate
pretty
pretty
well
well
to
to
Azure
azure
and
and
GCP.
gcp
Next
next
up
up
is
is
Figma
figma
which
which
is
is
probably
probably
the
the
most
most
well
well
known
known
app
app
on
on
this
this
list.
list
But
but
I'm
i'm
a
a
long
long
time
time
Adobe
adobe
Illustrator
illustrator
user,
user
so
so
for
for
me
me
to
to
switch
switch
to
to
Figma
figma
means
means
it
it
has
has
to
to
offer
offer
at
at
least
least
10
10
times
times
more
more
value
value
than
than
Illustrator.
illustrator
And
and
it
it
actually
actually
delivers
delivers
on
on
that
that
in
in
a
a
variety
variety
of
of
ways.
ways
First
first
of
of
all,
all
Figma
figma
is
is
a
a
design
design
tool
tool
that
that
allows
allows
you
you
to
to
draw
draw
graphics
graphics
and
and
create
create
mock
mock
ups
ups
for
for
your
your
apps.
apps
And
and
while
while
it
it
provides
provides
a
a
desktop
desktop
app,
app
it
it
also
also
provides
provides
a
a
web
web
app
app
that's
that's
just
just
as
as
good
good
and
and
perform
perform
it
it
as
as
the
the
desktop
desktop
version,
version
and
and
it
it
achieves
achieves
such
such
amazing
amazing
performance
performance
by
by
using
using
WebAssembly.
webassembly
It
it
seems
seems
kind
kind
of
of
crazy,
crazy
but
but
I'm
i'm
way
way
more
more
productive
productive
in
in
the
the
Figma
figma
web
web
app
app
than
than
I
i
am
am
in
in
the
the
Adobe
adobe
desktop
desktop
app.
app
And
and
it's
it's
completely
completely
free
free
for
for
my
my
graphic
graphic
design
design
needs.
needs
And
and
because
because
it's
it's
web
web
based,
based
I
i
can
can
open
open
up
up
my
my
project
project
on
on
any
any
machine
machine
and
and
all
all
my
my
files
files
will
will
be
be
there
there
immediately
immediately
without
without
any
any
effort.
effort
But
but
aside
aside
from
from
that,
that
it's
it's
also
also
just
just
a
a
really
really
well
well
designed
designed
piece
piece
of
of
software.
software
It's
it's
similar
similar
to
to
Sketch
sketch
in
in
the
the
sense
sense
that
that
it
it
gives
gives
you
you
all
all
the
the
things
things
that
that
you
you
need
need
and
and
want
want
and
and
none
none
of
of
the
the
crap
crap
that
that
you
you
don't.
don't
And
and
it
it
has
has
some
some
superpowers
superpowers
if
if
you're
you're
an
an
app
app
developer.
developer
For
for
example,
example
you
you
can
can
mock
mock
up
up
different
different
events
events
that
that
happen
happen
on
on
the
the
elements.
elements
And
and
then
then
you
you
can
can
even
even
export
export
your
your
styles
styles
as
as
CSS
css
or
or
as
as
Android
android
or
or
iOS
ios
Styles.
styles
I've
i've
been
been
consistently
consistently
impressed
impressed
with
with
Figma
figma
across
across
the
the
board
board
and
and
I
i
really
really
feel
feel
like
like
I
i
should
should
be
be
paying
paying
them
them
more
more
than
than
$0
$0
a
a
month
month
to
to
be
be
using
using
this
this
thing.
thing
But
but
there
there
are
are
times
times
when
when
a
a
full
full
blown
blown
design
design
tool
tool
is
is
more
more
than
than
you
you
really
really
neat.
neat
So
so
that
that
brings
brings
me
me
to
to
another
another
web
web
app
app
called
called
Font
font
Flipper.
flipper
This
this
app
app
is
is
built
built
using
using
Angular
angular
and
and
Firebase
firebase
and
and
its
its
sole
sole
purpose
purpose
is
is
to
to
help
help
you
you
choose
choose
fonts
fonts
for
for
your
your
designs.
designs
There
there
are
are
100,
100
if
if
not
not
1000,
1000
of
of
free
free
fonts
fonts
on
on
Google,
google
but
but
it's
it's
really
really
tedious
tedious
to
to
go
go
through
through
and
and
try
try
to
to
figure
figure
out
out
the
the
perfect
perfect
one
one
for
for
your
your
design.
design
Font
font
Flipper
flipper
allows
allows
you
you
to
to
bring
bring
in
in
your
your
own
own
graphics
graphics
and
and
then
then
experiment
experiment
with
with
different
different
fonts.
fonts
And
and
what
what
I
i
really
really
like
like
about
about
it
it
is
is
that
that
it's
it's
just
just
a
a
really
really
focused
focused
and
and
simple
simple
UI
ui
that
that
doesn't
doesn't
distract
distract
you
you
in
in
any
any
way.
way
But
but
the
the
coolest
coolest
feature
feature
is
is
how
how
you
you
actually
actually
select
select
the
the
fonts
fonts
And
and
it's
it's
done
done
with
with
a
a
Tinder
tinder
style
style
UI
ui
where
where
you
you
swipe
swipe
left
left
for
for
things
things
you
you
don't
don't
like
like
and
and
right
right
for
for
things
things
you
you
do
do
like.
like
And
and
once
once
you
you
decide
decide
on
on
a
a
few
few
fonts
fonts
that
that
you
you
like,
like
you
you
can
can
just
just
go
go
download
download
them
them
directly
directly
from
from
Google
google
Fonts.
fonts
Now
now
we're
we're
going
going
to
to
switch
switch
gears
gears
and
and
look
look
at
at
a
a
new
new
Chrome
chrome
extension
extension
called
called
VisBug.
visbug
This
this
was
was
released
released
earlier
earlier
this
this
year
year
and
and
it's
it's
a
a
tool
tool
that
that
allows
allows
you
you
to
to
interact
interact
visually
visually
with
with
your
your
website.
website
You
you
can
can
see
see
here
here
we're
we're
on
on
Fireship
fireship
IO
io
and
and
then
then
we
we
have
have
this
this
toolbar
toolbar
over
over
on
on
the
the
left
left
side
side
and
and
these
these
pink
pink
lines
lines
hovering
hovering
all
all
over
over
the
the
different
different
DOM
dom
elements
elements
on
on
the
the
site.
site
There's
there's
all
all
kinds
kinds
of
of
different
different
stuff
stuff
we
we
can
can
do
do
here
here
and
and
I
i
may
may
do
do
a
a
full
full
tutorial
tutorial
in
in
the
the
future.
future
But,
but
basically,
basically
we
we
can
can
measure
measure
elements,
elements
we
we
can
can
move
move
things
things
around,
around
change
change
their
their
style.
style
And
and
you
you
can
can
do
do
everything
everything
live
live
in
in
the
the
browser
browser
without
without
having
having
to
to
write
write
a
a
single
single
line
line
of
of
CSS.
css
This
this
is
is
extremely
extremely
powerful
powerful
because
because
you
you
can
can
get
get
things
things
to
to
a
a
state
state
that
that
you
you
actually
actually
like.
like
And
and
then
then
instead
instead
of
of
rewriting
rewriting
all
all
that
that
CSS
css
you
you
can
can
just
just
copy
copy
and
and
paste
paste
it
it
from
from
the
the
inspector.
inspector
And
and
another
another
thing
thing
I
i
really
really
like
like
is
is
that
that
you
you
can
can
search
search
for
for
a
a
specific
specific
type
type
of
of
element.
element
For
for
example,
example
if
if
you
you
want
want
to
to
find
find
all
all
the
the
links
links
on
on
the
the
page,
page
we
we
can
can
just
just
search
search
for
for
them
them
and
and
they'll
they'll
all
all
be
be
highlighted
highlighted
in
in
pink.
pink
The
the
plugin
plugin
does
does
have
have
a
a
little
little
bit
bit
of
of
a
a
learning
learning
curve
curve
to
to
get
get
used
used
to,
to
but
but
once
once
you
you
have
have
that
that
down
down
it
it
will
will
save
save
you
you
a
a
ton
ton
Time.
time
Now
now
let's
let's
switch
switch
gears
gears
to
to
a
a
back
back
end
end
tool
tool
that
that
you
you
can
can
use
use
to
to
debug
debug
APIs
apis
called
called
Insomnia.
insomnia
I've
i've
worked
worked
with
with
a
a
lot
lot
of
of
rest
rest
clients
clients
over
over
the
the
years
years
and
and
you
you
can
can
use
use
ones
ones
that
that
are
are
integrated
integrated
directly
directly
in
in
Versus
versus
Code,
code
but
but
I
i
always
always
seem
seem
to
to
go
go
back
back
to
to
Insomnia.
insomnia
Whether
whether
you're
you're
building
building
a
a
REST
rest
API
api
or
or
a
a
GraphQL
graphql
API,
api
this
this
app
app
will
will
help
help
you
you
keep
keep
your
your
entire
entire
workflow
workflow
organized.
organized
It
it
allows
allows
you
you
to
to
save
save
reusable
reusable
values
values
that
that
you
you
can
can
go
go
back
back
and
and
use
use
as
as
you
you
debug
debug
your
your
API.
api
Because
because
you
you
definitely
definitely
don't
don't
want
want
to
to
be
be
spending
spending
your
your
time
time
rewriting
rewriting
tedious
tedious
HTTP
http
requests
requests
every
every
day.
day
And
and
on
on
top
top
of
of
that,
that
it
it
just
just
has
has
a
a
beautiful
beautiful
and
and
well
well
laid
laid
out
out
UI.
ui
For
for
example,
example
we
we
might
might
want
want
to
to
create
create
a
a
new
new
request
request
for
for
the
the
SpaceX
spacex
GraphQL
graphql
API,
api
And
and
Insomnia
insomnia
will
will
automatically
automatically
do
do
the
the
introspection,
introspection
so
so
all
all
we
we
have
have
to
to
do
do
is
is
start
start
typing
typing
out
out
our
our
query,
query
and
and
we'll
we'll
get
get
this
this
awesome
awesome
IntelliSense
intellisense
for
for
everything
everything
we
we
type.
type
So
so
the
the
power
power
of
of
GraphQL
graphql
combined
combined
with
with
Insomnia
insomnia
just
just
gives
gives
you
you
an
an
awesome
awesome
overall
overall
developer
developer
experience.
experience
And
and
with
with
that,
that
we'll
we'll
move
move
on
on
to
to
the
the
7th
7th
and
and
final
final
app,
app
Flare.
flare
This
this
is
is
another
another
design
design
tool
tool
but
but
one
one
specifically
specifically
for
for
creating
creating
2
2
d
d
vector
vector
animations.
animations
It's
it's
similar
similar
to
to
Figma
figma
in
in
the
the
sense
sense
that
that
you
you
can
can
use
use
it
it
to
to
draw
draw
graphics,
graphics
But
but
you'll
you'll
see
see
down
down
here
here
at
at
the
the
bottom,
bottom
we
we
also
also
have
have
key
key
frames
frames
to
to
control
control
the
the
motion
motion
of
of
the
the
graphics
graphics
over
over
time.
time
And
and
Flare
flare
is
is
part
part
of
of
the
the
open
open
design
design
movement
movement
which
which
means
means
you
you
can
can
see
see
the
the
work
work
of
of
all
all
kinds
kinds
of
of
other
other
designers
designers
directly
directly
on
on
the
the
site
site
and
and
learn
learn
exactly
exactly
how
how
they
they
built
built
their
their
animations.
animations
But
but
a
a
big
big
part
part
of
of
the
the
reason
reason
I'm
i'm
really
really
excited
excited
about
about
Flare
flare
is
is
that
that
these
these
graphics
graphics
can
can
be
be
exported
exported
to
to
work
work
in
in
Flutter.
flutter
That
that
means
means
that
that
implementing
implementing
beautiful
beautiful
high
high
performance
performance
animations
animations
in
in
a
a
native
native
mobile
mobile
app
app
is
is
easier
easier
than
than
ever
ever
before.
before
I'll
i'll
create
create
a
a
full
full
tutorial
tutorial
on
on
this
this
in
in
the
the
future,
future
but
but
if
if
you're
you're
building
building
animations
animations
in
in
a
a
native
native
app,
app
can't
can't
imagine
imagine
a
a
better
better
option
option
than
than
Flair.
flair
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
the
the
list
list
up
up
there.
there
Like
like
I
i
said
said
at
at
the
the
beginning
beginning
of
of
the
the
video,
video
these
these
are
are
all
all
products
products
that
that
I
i
use
use
personally
personally
and
and
that
that
I
i
can
can
vouch
vouch
for.
for
And
and
another
another
thing
thing
I
i
just
just
realized
realized
that
that
wasn't
wasn't
planned
planned
is
is
that
that
all
all
these
these
tools
tools
are
are
free
free
and
and
they're
they're
also
also
all
all
built
built
with
with
web
web
technologies.
technologies
And
and
that's
that's
a
a
beautiful
beautiful
thing
thing
in
in
my
my
opinion.
opinion
Really
really
like
like
to
to
hear
hear
more
more
about
about
the
the
tools
tools
that
that
make
make
you
you
more
more
productive,
productive
so
so
let
let
me
me
know
know
what
what
you're
you're
using
using
in
in
the
the
comments.
comments
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
Wow.
wow
That's
that's
incredible.
incredible
success
The importance of working smarter and using tools that make one's life more productive is discussed, including a front web developer, backend engineering, and accidental YouTuber. The speaker lists seven different tools, including front web applications, backend engineering, and cloud infrastructure projects. They also mention a free font app called denies and a free version of Chrome, Insomnia, and Flare design tools. The benefits of these tools for productivity and their free availability are also highlighted.
7 Amazing Developer Tools that you're not using yet
One of the most important lessons I've learned as a developer is to work smarter and 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'll look at 7 different tools that I use personally that you may or may not have heard of. In fact, if you're already using all 7 of these tools, go ahead and download the But otherwise, make sure to like and subscribe and leave a comment below because I'll be picking one random comment next week to win this t shirt. 1st, a little bit about myself. I'm a front web developer slash backendengineer slash UXdesigner slash entrepreneur slash accidental YouTuber and video creator. So 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, nobody pays me a dime to say nice things about these products. They're tools that I use in my day to day work that I generally enjoy and think will be useful to you. Let's get started in no particular order with Bundlephobia. This is a web application that allows you to determine how which an npm package will add to your total bundle size. If you're working with a modern front end framework, you wanna try and keep the bundle size as small as possible to optimize the initial page load for new users. Bundlephobia 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 tree shakeable as well as a bunch of other information for every single version of that package. And you can even upload your entire package JSON to see all of your dependencies ranked by size. If you suffer from bundle phobia like I do, this is definitely an app you have to check out. Now let's check out another web app that will help you design and budget your cloud infrastructure called CloudCraft. It's currently only available for AWS. But even though I mostly use GCP, I still find it useful. It provides a very intuitive drag and drop interface that allows you to connect different cloud Structure services together. Not only is this great for planning, but it's 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. Next up is Figma which is probably the most well known app on this list. But I'm a long time Adobe Illustrator user, so for me 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 and create mock ups for your apps. And while it provides a desktop app, it also provides a web app that's just as good and perform it as the desktop version, and it achieves such amazing performance by using WebAssembly. It seems kind of crazy, but I'm way more productive in the Figma web app than I am in the Adobe desktop app. And it's completely free for my graphic design needs. And because it's web based, I can open up my project on any machine and all my files will be there immediately without any effort. But aside from that, it's also just a really well designed piece of software. It's similar to Sketch in the sense that it gives you all the things that you need and want and none of the crap that you don't. And it has some superpowers if you're an app developer. For example, you can mock up different events that happen on the elements. And then you can even export your styles as CSS or as Android or iOS Styles. I've been consistently impressed with Figma across the board and I really feel like I should be paying them more than $0 a month to be using this thing. But there are times when a full blown design tool is more than you really neat. So that brings me to another web app called Font Flipper. This app is built using Angular and Firebase and its sole purpose is to help you choose fonts for your designs. There are 100, if not 1000, 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 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 And it's 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 VisBug. This was released earlier this year and it's a tool that allows you to interact visually with your website. You can see here we're on Fireship IO 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. There's 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 and they'll all be highlighted in pink. The plugin does have a little bit of a learning curve to get used to, but once you have that down it will save you a ton Time. Now let's switch gears to a back end tool that you can use to debug APIs called Insomnia. I've worked with a lot of rest clients over the years and you can use ones that are integrated directly in Versus Code, but I always seem to go back to Insomnia. Whether you're building a REST API or a GraphQL API, this app will help you keep your entire workflow organized. It allows you to save reusable values that you can go back and use as you debug your API. Because you definitely don't want to be spending your time rewriting tedious HTTP requests every day. And 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 GraphQL API, And Insomnia will automatically do the introspection, so all we have to do is start typing out our query, and we'll get this awesome IntelliSense for everything we type. So the power of GraphQL combined with Insomnia just gives you an awesome overall developer experience. And with that, we'll move on to the 7th and final app, Flare. This is another design tool but one specifically for creating 2 d 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 key frames 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 built 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. That means that implementing beautiful high performance animations in a native mobile app is easier than ever before. I'll create a full tutorial on this in the future, but if you're building animations in a native app, can't imagine a better option than Flair. I'm gonna go ahead and wrap the list up there. Like I said at the beginning of the video, these are all products that I use personally and that I can vouch for. And another thing I just realized that wasn't planned is that all these tools are free and they're also all built with web technologies. And that's a beautiful thing in my opinion. Really like to hear more about the tools that make you more productive, so let me know what you're using in the comments. If this video helped you, please like and subscribe. Thanks for watching and I will talk to you soon. Wow. That's incredible.
The importance of working smarter and using tools that make one's life more productive is discussed, including a front web developer, backend engineering, and accidental YouTuber. The speaker lists seven different tools, including front web applications, backend engineering, and cloud infrastructure projects. They also mention a free font app called denies and a free version of Chrome, Insomnia, and Flare design tools. The benefits of these tools for productivity and their free availability are also highlighted.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : 7 Amazing Developer Tools that you're not using yet 
        and a small summary : The importance of working smarter and using tools that make one's life more productive is discussed, including a front web developer, backend engineering, and accidental YouTuber. The speaker lists seven different tools, including front web applications, backend engineering, and cloud infrastructure projects. They also mention a free font app called denies and a free version of Chrome, Insomnia, and Flare design tools. The benefits of these tools for productivity and their free availability are also highlighted.
        [/INST]
        
        Generate the video : One of the most important lessons I've learned as a developer is to work smarter and 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'll look at 7 different tools that I use personally that you may or may not have heard of. In fact, if you're already using all 7 of these tools, go ahead and download the But otherwise, make sure to like and subscribe and leave a comment below because I'll be picking one random comment next week to win this t shirt. 1st, a little bit about myself. I'm a front web developer slash backendengineer slash UXdesigner slash entrepreneur slash accidental YouTuber and video creator. So 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, nobody pays me a dime to say nice things about these products. They're tools that I use in my day to day work that I generally enjoy and think will be useful to you. Let's get started in no particular order with Bundlephobia. This is a web application that allows you to determine how which an npm package will add to your total bundle size. If you're working with a modern front end framework, you wanna try and keep the bundle size as small as possible to optimize the initial page load for new users. Bundlephobia 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 tree shakeable as well as a bunch of other information for every single version of that package. And you can even upload your entire package JSON to see all of your dependencies ranked by size. If you suffer from bundle phobia like I do, this is definitely an app you have to check out. Now let's check out another web app that will help you design and budget your cloud infrastructure called CloudCraft. It's currently only available for AWS. But even though I mostly use GCP, I still find it useful. It provides a very intuitive drag and drop interface that allows you to connect different cloud Structure services together. Not only is this great for planning, but it's 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. Next up is Figma which is probably the most well known app on this list. But I'm a long time Adobe Illustrator user, so for me 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 and create mock ups for your apps. And while it provides a desktop app, it also provides a web app that's just as good and perform it as the desktop version, and it achieves such amazing performance by using WebAssembly. It seems kind of crazy, but I'm way more productive in the Figma web app than I am in the Adobe desktop app. And it's completely free for my graphic design needs. And because it's web based, I can open up my project on any machine and all my files will be there immediately without any effort. But aside from that, it's also just a really well designed piece of software. It's similar to Sketch in the sense that it gives you all the things that you need and want and none of the crap that you don't. And it has some superpowers if you're an app developer. For example, you can mock up different events that happen on the elements. And then you can even export your styles as CSS or as Android or iOS Styles. I've been consistently impressed with Figma across the board and I really feel like I should be paying them more than $0 a month to be using this thing. But there are times when a full blown design tool is more than you really neat. So that brings me to another web app called Font Flipper. This app is built using Angular and Firebase and its sole purpose is to help you choose fonts for your designs. There are 100, if not 1000, 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 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 And it's 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 VisBug. This was released earlier this year and it's a tool that allows you to interact visually with your website. You can see here we're on Fireship IO 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. There's 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 and they'll all be highlighted in pink. The plugin does have a little bit of a learning curve to get used to, but once you have that down it will save you a ton Time. Now let's switch gears to a back end tool that you can use to debug APIs called Insomnia. I've worked with a lot of rest clients over the years and you can use ones that are integrated directly in Versus Code, but I always seem to go back to Insomnia. Whether you're building a REST API or a GraphQL API, this app will help you keep your entire workflow organized. It allows you to save reusable values that you can go back and use as you debug your API. Because you definitely don't want to be spending your time rewriting tedious HTTP requests every day. And 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 GraphQL API, And Insomnia will automatically do the introspection, so all we have to do is start typing out our query, and we'll get this awesome IntelliSense for everything we type. So the power of GraphQL combined with Insomnia just gives you an awesome overall developer experience. And with that, we'll move on to the 7th and final app, Flare. This is another design tool but one specifically for creating 2 d 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 key frames 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 built 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. That means that implementing beautiful high performance animations in a native mobile app is easier than ever before. I'll create a full tutorial on this in the future, but if you're building animations in a native app, can't imagine a better option than Flair. I'm gonna go ahead and wrap the list up there. Like I said at the beginning of the video, these are all products that I use personally and that I can vouch for. And another thing I just realized that wasn't planned is that all these tools are free and they're also all built with web technologies. And that's a beautiful thing in my opinion. Really like to hear more about the tools that make you more productive, so let me know what you're using in the comments. If this video helped you, please like and subscribe. Thanks for watching and I will talk to you soon. Wow. That's incredible.
        