If you’re a blogger or web designer, we’re sure you know that neither of these professions is easy to do. On the contrary, they can be very time consuming and tiring because to run a blog or to create web designs, a lot of creativity, effort, and time has to be invested, but it can also be saved if you let the pros handle the coding test.
When you do either of these professions daily or even every once in a while, your goal is to optimize the creative process as much as possible and to have all the tools you might need, readily available to you.
As most of you know, Google Chrome is the most commonly used browser in the world, and to say its collection of browser extensions is vast would be an understatement. That collection consists of a huge number of amazing tools that range in types and use cases and can be very simple or very powerful tools taking up the form of a browser extension.
In this article, we will be talking about the extensions that are of most importance to you, fellow bloggers, and web designers. So get excited, because we’ve picked out lots of great extensions you might want to try out!
WhatFont
Have you ever seen an interesting font but had no idea what its name or font family might be? Well, this extension can help you out in situations like these.
The WhatFont browser extension takes a look at the fonts on every page/site you are displaying in your browser and can, in a blink of an eye, give you the name of the font/fonts on that particular page/site. Besides that, with WhatFont, you are also able to find the service the font comes from, whether it be a free service like Google Fonts or some premium one like Fontspring.
This extension can boost your creativity and also save you huge amounts of time you would otherwise spend searching for the name and the source of a font.
What’s different about this extension compared to other similar ones is that this one doesn’t require to open up external inspection tools but only to hover your mouse over the font, and you’re done. You can think of WhatFont as a less complicated and less intimidating version of tools like Firebug and WebKit inspector.
Web Developer
Don’t let its name fool you! This browser extension will be great not just for web developers but for web designers as well.
The purpose of Web Developer extension is to help you easily analyze and check your webpages to see if they are in accordance with the latest design, coding, SEO, and usability practices, and in that way help you create much better products.
Although it’s a powerful tool, it won’t cause your browser to slow down because it won’t require much of its resources. The tool will come in the form of multiple developer tools installed in the toolbar and will alert you about any conflicts your design has with the standard practices.
Using this tool, you will also have the option to check your embedded JavaScript and test how your page/site looks like on various screen sizes.
The extension isn’t reserved for one operating system but will work great on Windows, Mac, or Linux. Besides the features mentioned thus far, it will also give you insight into color info, topographic info, and meta tag info.
Window Resizer
With 500.000 active users, Window Resizer is a tried and true browser extension used to help designers check how different resolutions work with their designs.
Using it, a web designer can pinpoint in which resolution an error might occur and, in that way, know what has to be changed in the code before it is released to the public.
Window Resizer will let you switch between browser window heights and widths very quickly and to check various resolutions during live coding.
This extension will be able to accurately mimic different mobile and desktop resolutions and, in that way, help you create a design that is truly responsive. It will come with a number of pre-set resolutions, but you will also have the possibility to customize those to your preferences.
Since this tool is very self-explanatory and straight to the point, there’s not much more to say about it, except that it’s a great extension worth trying out.
ColorZilla
ColorZilla is a browser extension for both Chrome and Firefox with millions of active users.
As you might assume from its name, ColorZilla is used for finding out colors on any page/site in order to reuse those colors later on in your own designs.
ColorZilla can find out the color of something as small as a single pixel so you will be able to capture any color regardless of how much or how little the color is present. Besides that, it will also allow you to optimize the colors using the shortcuts it will provide you with.
ColorZilla can generate colors in hex codes, gradients, and other forms as well. Once you capture a color, you can then tag, label or categorize it in the ColorZilla clipboard and even include it in one of your custom color palettes.
Stylebot
Stylebot is quite an interesting tool, using which you can change the CSS of any page/site while you are browsing it. The changes can be made to individual elements using built-in automated tools or by writing your own custom CSS.
Using Stylebot, you will have better insight into how certain CSS properties and live editing work, and also have the option to store CSS rules and reuse them for creating your own web designs.
This extension can be great for people who are just starting out with CSS because it allows them to learn it through practice.
Lorem Ipsum Generator
If you’ve ever done anything related to web design, then you probably know what lorem ipsum generator is. If not, well, lorem ipsum is a popular dummy text used to fill up a page/site with text in order to see how the text works with the design while it’s being built.
This particular extension will allow you to generate that dummy text with just a click of a button and to even specify how many words or paragraphs you need. A simple but very useful extension indeed.
Awesome Screenshot
Awesome Screenshot is an extension using which you can take a screenshot or screen recording of an entire page or just a part of it. Once a screenshot or screen recording is captured, you’ll also be able to edit it by cropping, drawing, blurring, adding annotations, and so on.
Some people might think this extension is essentially the same thing as Lightshot when, in fact, it isn’t. What sets them apart is that along with being able to connect to your Google Drive, Awesome Screenshot can also capture elements that are beyond your view and do all the thus-mentioned edits within the extension. This tool is not only limited to a browser extension but also comes in the form of a desktop tool.
Lastly, a great feature of this extension that we have to mention is screen sharing, which will enable better collaboration with other bloggers or designers.
Evernote Web Clipper
Need a scrapbook for all the interesting things you come across on the internet? Evernote Web Clipper can be exactly that.
Using Evernote Web Clipper, you can save anything you find useful or interesting, whether it be text, links, or images into your Evernote account with just a click of a button.
The great thing about this tool is that it will keep what’s in your collection even if the original is removed or deleted. It will also allow you to take screenshots and then annotate those screenshots with things such as text, arrows, shapes, highlights, etc.
Check My Links
Having a broken link in our texts/posts has happened to the best of us, and if you have a large number of links, keeping track of all of them and making sure they are leading to the right address can be especially hard to do.
Checking all the links manually is a huge chore and comes with the possibility of always missing a few links here and there. The Check My Links extension will handle that chore for you and check each and every link within your pages. The links that do work will be highlighted in green whole the ones that don’t, you guessed it, in red. This way, you’ll have a pretty clear view of what is okay and what should be fixed.
Grammarly
Grammar, spelling, and/or punctuation mistakes will give your content a terrible look and your audience a sense that you aren’t putting enough effort or attention into what you are publishing. The worst thing is, no matter how small or insignificant the mistake is, it will always be an eyesore to your audience, and they will, in most cases, see it as a big annoyance or something that is unforgivable.
Since we are humans and not computers, these mistakes are bound to happen, and we might even be able to catch most of them on our own, but only a specialized tool will be able to find every single one.
One tool of that sort that comes in the form of a Google Chrome extension but also a web and desktop app is called Grammarly. Grammarly will scan your texts, however long they might be, highlight every mistake it finds and will even provide you with a suggestion of how to fix the error.
It will work on (almost) every site and will register a mistake only a few seconds after you have written or pasted a piece of text into a text editor.
Conclusion
So, did you wait to finish reading this article before you started installing all sorts of extensions to your browser? We wouldn’t be surprised if you couldn’t hold back, because the extensions we presented you with could really be a dream addition to your workflow.
We hope you had fun reading, and also we want you to remember that you don’t have to stop after installing one or two tools, install as many as you want, at the end of the day it’s only a browser extension.