Web developers tend to spend a lot of time on peripheral tasks which distract them from their main work. For example, they have to dig through a lot of code or adjust dozens of images to the right size. All this takes a lot of effort and at the end of the day, it can feel like the site they’re working on hasn't progressed beyond the basic layout.
The right toolkit will get unnecessary work out of the way and free up time for a cup of coffee. Mainly so that you can perk up and focus even harder on development.
– Coffee break? – Yes, so afterward you’ll work even harder!
1. To avoid messing around with the backend – NodeJS web server
For Linux, Windows and MacOS
Free
Get it here
A tool for running a local server, making it easy to work with JS code. The trick to using NodeJS web server is to convert JavaScript into machine code, reducing the differences between the backend and frontend. This is handy when working with large JS projects or when you need to quickly fix some of the code yourself.
In a NodeJS web server, the code syntax is different between the backend and frontend, but it's still good old JavaScript
In a NodeJS web server, the code syntax is different between the backend and frontend, but it's still good old JavaScript
2. An online image converter for all formats
An online service, a plugin for Chrome and Firefox
Free
Get it here
A handy tool that converts images to 12 popular formats: GIF, SVG, HDR, WebP, and more. Simple design, fast conversion, and all the formats you could need at your fingertips. Before converting, you can set image compression, specify the dimensions, or make a basic color correction. A must-have when you need to process hundreds of images per day.
The online converter will help you quickly convert the format of an image, make an icon for a website, or compress a picture
3. Get the exact color – ColorZilla
An extension for Chrome и Firefox
Free
Get it here
A pipette tool that will give you the exact color code of any element in your browser. ColorZilla will even easily determine the color of dynamic elements, and will also tell you the tag name, class, and ID. Inside the extension, there is a built-in CSS gradient generator, the history of shades used, and a color picker like in Photoshop. It is useful for quick design editing as you don't need to search for the element itself or its color in the page code.
СolorZilla comes in handy when you need to accurately determine the color of a particular pixel
4. Preloaders – make a loading animation
Online service
Free
Get it here
An animation service with a large library of icons and images. It can edit color, change the size of images or the smoothness of animation, and create animated text. The tool is perfect if you need a unique icon for your site or source GIF, or an APNG or SVG to work on more in Photoshop or 3DS Max.
5. Quickly fill a website with placeholders – Lorem Picsum
Online service
Free
Get it here
A service for generating images of a desired size. Just insert a link and the service will add either a specific image with the parameters specified or a random image into the site. It comes in handy when working with site prototypes or when designing templates and layouts.
The preloader’s large library of ready-made animations that won't slow down the site
6. Get stunning photos – Unsplash
Online service
Free
Get it here
A large library of free images. The photo stock is filled with live images free from the artless shots with broken composition or foreshortening found in other free photo stocks. Files can be downloaded immediately in popular sizes like 640x640, FullHD, and 2K, with a maximum resolution of up to 16K.
IAll images in Unsplash are available for free commercial use
7. Convenient layout editing – PerfectPixel
Extension for Chromium and Firefox
Free
Get it here
A flexible plugin that helps you fine-tune your site layout without getting deep into the code. PerfectPixel overlays images on top of the site layout, adjusting the size, dimensions, and spacing of the elements on the page. The plugin can work with layers and edit HTML code on top of the layout – changes are displayed on the page immediately.
PerfectPixel can save you from long lines of code and help you layout your pages faster
8. When precision is crucial – Better Ruler
Extension for Chromium and fireFox
Free
Get it here
A simple ruler with which you won't have to constantly delve into the developer panel to determine the exact distance between elements on your site. It's easier to measure with a ruler than to comb the code for the right line. Each new measurement is overlaid onto a new layer, so it is convenient to use even with detailed elements.
_Better Ruler will help you measure accurately. Even if you don't really need it
_
9. Check how the site looks to all the users – LambdaTest
Online service
From 15 $/month, has trial
Get it here
A magic mirror for cross-browser and cross-platform testing. Shows at a glance how the site layout will be displayed on different browsers and OSes, including mobile devices. Its functionality is more comprehensive than that of the tool in the Chrome Developer Panel.
LambdaTest will show how the site looks on any device, screen, and OS
10. When the code isn’t up to standard – Beautifier
Online service
Free
Get it here
Beautifier makes it easy to work with heavy code. The service will rectify HTML, CSS, and JavaScript code, inserting indents and spaces and correcting brackets. Beautifier has plenty of parameters for code standardization and you can specify your own settings in a JSON application config. This comes in handy when everyone in the team codes in their own way.
Beautifier helps when your code is all written in one line
When you have to work a lot with websites
Try the ispmanager control panel. It simplifies web-infrastructure management and takes care of website security. The panel combines an entire set of crucial tools for web developers, administrators, and hosting providers.
Do you have your own web-development toolkit? 🤔
Share the services you use in the comments
Top comments (1)
Great list!