🇧🇷 Caso prefira ler em outra língua, esse artigo foi publicado também em português. Clique AQUI para acessar!
Introduction
There was a time when creating websites was more difficult and float ruled the world... it was a dark time and full of terrors. But, not only in terms of languages the technology has evolved, great tools have emerged to make life easier for the dev.
Bringing with them features that browsers don't natively provide or a friendlier view of existing ones, browser extensions are the friend that every developer should have.
With that in mind, I've separated 5 extensions that can help you mainly in the matter of website styling, allowing you to select colors with the mouse, measure distances between elements and much more. Besides a nice bonus at the end… what are you waiting for 😉?
1. ColorZilla
Colors are a key point in any website, as they balance style and give a unique, personal or striking touch.
ColorZilla is an extension that first appeared for Mo*zilla* Firefox and became famous for making it easier to work with colors in the browser, allowing inspection of the color palette of the browser. website, providing a powerful CSS gradient generator and a few more things.
If you don't need something as robust, Firefox has a color picker natively. It can be found in DevTools, under the Inspector tab.
2. CSS Peeper
Think CSS inspection through DevTools impractical or intimidating? CSS Peeper arrives to make inspecting styles easier and more elegant. It also intelligently extracts the site's color palette and makes it easy to export your assets.
This extension is not available for Firefox and unfortunately I have not found alternatives to it.
3. Dimensions
Measuring distances between elements on a website has never been easier with Dimensions. When activating the extension, your mouse becomes the starting point of two axes that are used to calculate spaces.
This extension also allows you to make measurements inside images, being of great help when you have a mockup in .png or .jpg for example.
Mockup, when it comes to design, is a prototype / model / draft of a given project, being used mainly to acquire user feedback and get an overview of it.
4. Web Developer
Web Developer provides a number of extra features that may not be present in your browser. Note that not only tools involving CSS are added, but they touch on several points when it comes to website development that can be very useful.
It is also an extension that was originally made for Firefox and, due to its success, was ported to Google's browser.
5. WhatFont
In order to facilitate the inspection of typographies on the web WhatFont arrives, simply activate the extension and click on the text about which you want to know the information. It's simple, elegant and extremely useful.
The CSS Peeper extension (cited above) also provides some information when inspecting some text with it, the main difference of information that these extensions bring is that the former provides letter-spacing and the other provides font-style as one of the information.
As CSS Peeper is not available in all browsers, I found it relevant to include this extension in the list.
Bonus: Lighthouse
This is an open-source tool created by Google that analyzes a particular website and scores according to 5 items: Performance, Accessibility, Best Practices, SEO and support such as PWA.
In terms of CSS, pay more attention to the score of the first 3 items mentioned above: build a responsive site, using assets optimized for the web and take advantage of good contrasts so as not to hinder the reading of your content.
As a great way to keep track of whether your site is good and up to web standards, Lighthouse come integrated with Google Chrome, having an official extension so that any Chromium-based can have this functionality.
The Giant of the Searches did not take this extension to its competitors' stores. But, being open-source, two alternatives for Firefox were created. However, none of them can rate sites running locally. A solution for this might be to install and use Lighthouse via NPM in your projects.
Firefox - Lighthouse Report Generator
Conclusion
Finally, I need to clarify and alert you to some important points.
- I admit that, for personal taste and workflow style, I don't currently use extensions 2 and 4 listed above, but I thought it might come in handy for someone and I've tested them all before writing this text.
- Yes, extensions can bring a lot of new functionality. However, this comes at a cost and is often the negative impact on browser performance and page loading.
- Be careful! There are malicious extensions that can spy on your browsing history, improperly access sensitive data, or other equally bad things. Don't go out installing just any one, see the ratings, read the comments, research it.
And, as the dev will not live only from CSS, a little bird told me that more extension tips are coming 🙃!
Feedback!
Feel free to say what you think of this article, ask questions, point out a topic that was not very well explained or that needed to be talked about, suggest other topics and complement what has already been said. To the next!
Top comments (0)