Smarter ways to improve front-end UI skills with tools
One of the most important things as a developer is to ‘work smarter not harder’. and one of the best ways to live by that rule to use tools that is productive and simplify our life. And here are some great tools for web application developers. Haven’t tried much yet, but I believe these will give us a lot of help later on when working on projects.
Bundle Phobia
This is a web application that allows you to determine how much ‘npm’ package to add to our total bundle size. If we work in modern app, we want to keep our bundle size as small as possible to optimize the initial page load for the users. Bundle phobia is very easy to analyze the addition of files to a new project. Just entering the package name, it will tell us the bundle size, download time and bunch of other information for a new version of the package. You can also check our size of JSON with lots of dependencies.
Figma
This is the most well-known app, it is design tool that allows us to draw graphics create-mock up for our apps. completely free for my graphic design needs. it’s web-based, we can open up a project in any machine. We can also try some user-event on the design and export CSS that we tried.
Font Flipper
Preview 800+ Google Fonts on top of your own designs, without having to download the fonts first. we can try out some image with text, size, font. and we can download the font directly from google fonts for just one click. It’s fun to try the mock-up design or fonts.
Visbug
This is very popular chrome extension for UI designers and front-end developers. It allows us to quickly experiment some UI design on our layout. You can try any types of CSS attributes such as padding, margin and so on. We can also inspect styles, spacing, distance, accessibility and alignment. Using this tool gives us more clear decisions on the front end of our site.
Flare
This is a design tool specifically for creating 2D vector animations. It’s similar to figma, we can draw some graphic, and we also create some animation based on that. We can also check all the design works that other designers make. These animations can be exported and use it in the Flutter. Flutter is my stretch goals, so I would love to try it when the time comes.
