54. SVGOMG (opens in new tab)
SVGOMG is an online tool for optimising SVG. Under the hood SVGOMG uses the incredibly powerful command-line tool SVGO to perform optimisations, but SVGOMG does so while visually showing you any changes the optimisation has made to an image.
55. Yarn (opens in new tab)
Yarn is a package manager. It works much the same as Node Package Manager (npm). Yarn caches every package making it incredibly fast to download and install dependencies, and with all of the same packages as npm so you can easily make the switch.
56. BetterBoilerplate (opens in new tab)
The BetterBoilerplate offers a scaffolding for any new project. It’s packed full with build tools, file management and a robust CSS framework. The BetterBoilerplate is development environment agnostic and can be used for any project from small brochure websites to full SAAS projects.
57. Browsersync (opens in new tab)
Browsersync is like LiveReload, but on steroids. It's a powerful tool for synchronised cross-device testing that will live-reload your project for every edit and save in all browser instances. It even syncs up navigation and scrolling in the browser sessions. You can add CSS outlines for debugging, and a latency option enables you to mimic a slower internet connection.
58. Google PageSpeed Insights (opens in new tab)
Google Page Speed Test is an online tool used to analyse a website and give a score based on performance. You start by entering the URL of your website and running the test, Google will then suggest ways in which the site’s performance can be improved.
59. Vue.js DevTools (opens in new tab)
Vue.js has optional devtools, which enable you to inspect component states, track events and access all of the data held in the virtual DOM. This is extremely useful when working with Vue.js and is a much nicer alternative to console logging all of these things.
60. Web Developer Toolbar (opens in new tab)
The Web Developer toolbar has been around for almost as long as web design has, but it’s still really useful for web development today, offering a number of really handy tools, from deleting cookies to displaying an image’s alt text.
61. Gulp (opens in new tab)
Gulp is a frontend build tool used to perform any number of functions from compiling Sass to building SVG sprites. Gulp will save you time and perform a lot of the repetitive tasks required, enabling you to concentrate on writing code and building applications.
62. Grunt (opens in new tab)
This frontend build tool is used in the same way as Gulp, with the aim of saving you time and effort when building the frontend of any website or app. These tools have become an important part of frontend development due to their ability to perform repetitive tasks.
Next page: Best of the rest
