New to development? Maybe you’re reinventing the wheel and don’t even know it. There are hundreds if not thousands of tools for developers than can make your life easier. Luckily most of them are free! In this post I will be covering some useful tools I have in my arsenal, why I think they’re useful, and how to implement them; let’s get started.
Emmet is the tool I use the most by far. Without it, I would spend most of my time looking at language documentation. It’s a well-known plugin and Is available on most of the popular text editors like Atom, VS Code, Brackets, Sublime Text, and much more. It can be downloaded from their website at emmet.io, or in your text editor’s marketplace.
As developer, we often have to repeat multiple lines of code or elements. An example of this would occur when creating list items with unique IDs. Typically, we would have to write out the list item, copy/paste the text for the number of items you want, then individually change each ID value. With Emmet, this can all be done with one line of code. Need an unordered list with 5 list items? Simply enter “ul>li*5” and press enter, all done! Emmet is 100% free and I highly suggest giving it a try.
Google Analytics is the second most useful tool I have. It’s completely free and is a great way to track traffic to your website. It can be paired with Google Optimize and a lot of great functionality can be added to your website. It’s super easy to set up as well! If you already have a Google account simply go to “analytics.google.com” to sign up. A link will be generated that can be added to your website header, that’s it! Once inside the app you’re presented with a nice layout with all your website data.
Font Awesome is next on my list. If you’re a developer, Font Awesome is a must and you should go download it right now. Long gone are the days of digging through Google for a Facebook or Twitter icon. Simply include font awesome and go to their webpage to find an icon you’re looking for.
There’s both a free and paid version of Font Awesome. The free version comes with many great icons and one can easily get by with just a free license. However, a paid license is only $60 for a year and a designer would definitely charge more for these many icons. Using Font Awesome is easy and will save you a lot of time when working on projects.
Next on my list is GTmetrix, another great free tool to measure page load speed. It’s often difficult to measure our page speed since browsers cache website data to improve load times. It’s also difficult to tell what’s specifically causing your website to slow down. This is where GTmetrix comes into play.
Simply enter a URL and GTmetrix will provide you with an itemized list of what elements of your page is causing a slowdown. It will also give you solutions to the problem! For example, if your images aren’t optimized GTmetrix will automatically resize them to the correct size and let you know which images should be changed. Again, it’s free, and I suggest trying it out.
Screaming Frog is last but definitely not least on my list. It’s a search engine optimization (SEO) tool that shows important information search engines consider when ranking websites. It can be downloaded for free at https://www.screamingfrog.co.uk/seo-spider/
It will also give you preview of what your website will look like when it’s searched for on Google. Simply download the program and enter your website URL. Screaming Frog will do a quick scan and you’re finished! All the information you need to optimize your page is displayed.
Thanks for reading! I hope you gained some valuable information and discovered a new tool that will help in your development journey. Good luck!
Code Daily 