I should probably start this with a very interesting quote about how one person’s tools are the secret to his or hers success – I won’t. Straight to the point, here’s 3 tools I could not go 1 day without when I’m designing or developing websites.

 

1. Colorzilla (http://www.colorzilla.com/chrome/)

What is it good for?
It helps you with “colorpicking” any colour on web page by simply hovering your mouse over whatever it is you’re interested in. “ Yes, but I can do that with the Chrome Inspector Raz “ – Hold your horses; ColorZilla offers a very lightweight interface to show you this information without sacrificing a lot space on your screen ( see screenshot )

Is that it?
No, the people that did this little extension also were awesome enough to include a little bit more information for you – in case you need it! You get the RGB color code ( if you ever think of using a color in your css with rgba – happened to me more than a couple of times ), the HEX code, the size of the element you are hovering, and the css class/ID as it’s present in the stylesheet. I am not saying this is the best tool for this particular job but I love that I can get so much out of just hovering over the page.

Can I scroll the page while I’m using it?
Weird question but yes, you can.
Does it work outside the page area?
No, but I’m hoping there will be a way to do that at some point – a color picker is a great tool to have in any environment ( or maybe that’s just me ).

How do I save the color?
By clicking the color will be copied and you can paste it.

What else does it do?
Without exaggerating – a lot! ( see screenshot ) Clicking the icon in will bring this dropdown in view. Some of the options are self-explanatory but I will discuss a couple.

 

• Webpage Colour Analyzer
So you want to see all the colors used in the page ( present in the css ) – well you can, this option will give you a list of the colours and even more so, by clicking on any of them it will also show you what elements are using these colours ( based on the css ) ( see screenshot )

• Pallete Browser
But Raz, I sometimes just want to browse colours/hues and if needed to see just the web safe colours. Ok, well click on Pallete Browser and you will have a good list options for all your colour needs.

Can we move on to the next tool now?
Yes but not before I share the options as well. Self-explanatory again but this also comes to show how well built this extension has been built. Pick color format to be copied, keyboard shortcut for colour picking, show hex codes in lower case etc. You can always go to the ColorZilla website and you can suggest ideas for how this extension can become even better. So let’s move on.

2. FontFaceNinja ( http://fontface.ninja/ )

What is it good for?
Ever wanted to just simply remove all graphical elements on a web page so you can take a closer look at the fonts used ( sizes, family, spacing )? No? Maybe you will – This extension will be able to help you with that

What else can it do?
Hovering over a piece of text will show you some information but clicking on it will offer you the opportunity to test the font with your own custom copy, adjust the font size and the letter spacing. Happy with what you see? You will also get a quick link to where you can buy the font in case you don’t own it.

When did you use it last?
I used this extension last when I had check the font families on a client’s website to make sure everything is at the right size and with the correct font family. The website has a lot of pages and I could simply just enable the extensions and quickly hover over parts of text – not getting distracted by imagery or graphical elements. Also I got to check how the pieces of content align on the page ( that extra OCD requirement ). It’s quite interesting to notice how some websites ( talking mostly about sources for news, big blogs etc. ) use small values of margin and/or padding to style their titles, excerpts etc.

3. Stylish ( https://userstyles.org/ )

This is the last one in the post, it better be good!
I hope so too – this little extension works as a testing tool. Ever thought what a page would look like if you could change the styling of some things? Better yet, what if you could save that styling and next time you visit the page you don’t have to open up the inspector to add your custom style again? Well you can!

So what does Stylish do exactly?
This extension lets you create custom style sheets, save them, manage what domain/page they will apply to. You can choose to have this style to apply to every page you visit. I’ve made a little example where I just change the background-color of the body for YouTube. I can choose to have this apply to every page on the domain, or I can even match certain pages with the help of regexp.

Ever done something worth wild with this extension?
I wrote a big style update for a website but didn’t get to release it. I wasn’t in the office when someone I was in a meeting with asked if they could see what this update would look like. I copied the whole new stylesheet, pasted it in a new style in Stylish and presto – the new style was visible and I didn’t even have to update the file via FTP. I could even quickly switch between the old and new versions by simply enabling/disabling the style I created.
What’s even more interesting from my point of view is that this can be a very good tool to test style updates with an unlimited number of users. If their browser can be set up to have stylish, they can then use your style without this being live and browse the website for a while with the proposed new look.

Can I manage styles without going in the Stylish menu?
Yes, by clicking on the Stylish icon you’ll get a list of active styles, you can disable everything or you can even find styles written by other users for this domain – I’ve had a look through some and I think some are a pretty good alternative to the original look.
I personally think extensions like this one promote a cool idea. What if we could manage and determine what websites look like based on our personal needs? What if do that you don’t need to know CSS?

That’s it for this cook book session. I will return with more of my little tools I use. Next part will not feature chrome extensions as I feel this might not be appealing to everyone, some people don’t use chrome or don’t like extensions. Till next time, keep optimising your workflow!