Chrome browser extensions

Here’s a bunch of nice Google Chrome browser extensions for web development:

  • ColorZilla – Pick colors from a website
  • Page Ruler – Measure stuff
  • Font Changer – Preview how a font will look on a site. Includes all Google Web fonts.
  • Corporate Ipsum – Create random fill text
  • Rescue Time – Track your time spend
  • Web Developer – The classic Web Developer extension with a bunch of tools for Web Development – e.g. clear cookies, resize window.

Font Awesome

I do love Twitter Bootstrap – however, I  sometimes find their icon font to be lacking an icon that I need. In this case, I turn to Font Awesome.

With 479 icons (at the time of writing), Font Awesome fullfills most of my needs when it comes to icons.

As with Twitter Bootstrap’s icons, Font Awesome is created as a font, which makes the icons highly scalable.

The icon font is so easy to use and totally free. I love it too! :-)

Check out all of the icons in Font Awesome here:

Installing SASS for PhpStorm on Windows

Install SASS:

  1. Install Ruby through
  2. Open you console and run: gem install sass

Configure PhpStorm:

  1. Create a .scss file in PhpStorm and click “Add watcher” in the following prompt:Add Watcher prompt in PhpStorm
  2. Edit settings as seen below (make sure that paths match your own paths). Only things I have changed is the “Program” input, the “Environment Variables” input, and finally, I have added “–style compressed” to the “Arguments” input in order to get my output CSS file compressed (this is optional). Edit watcher in PhpStorm

That’s it! You are all set – go ahead an write some sweet scss and watch how PhpStorm automatically compiles scss to css.

If you are working on a remote project and want PhpStorm to upload the css file automatically, remember to not only check “Automatic upload” in Tools -> Deployment, but also to check “Upload external changes” in File -> Settings… -> Deployment -> Options.