Documentary about Jeffrey Zeldman

Still of Jeffrey Zeldman video on Vimeo
Jeffrey Zeldman: 20 years of Web Design and Community from Lynda.com

Like probably thousands of other web professionals I owe a lot to Jeffrey Zeldman.

I remember spending hours sitting on a balcony in Tenerife, while Jane and her parents were out exploring the island and enjoying the sunshine, reading the first edition of his book Designing with Web Standards.

That book changed how I looked at the web and how I began to develop websites.

This is an excellent 40 minutes documentary, from Lynda.com, about Zeldman’s 20 years of “designing, organizing, and most of all sharing on the web”.

If you are interested in web development, you should watch it.

Matching Google Chrome’s developer tools theme to your text editor theme

Sublime Text 2
Sublime Text 2

My main coding text editor is the excellent Sublime Text 2, my favourite theme is called Tomorrow-Night by Chris Kempson, and my go-to browser is Google Chrome.

Being involved in web design I use the Chrome web developer tools all the time for debugging JavaScript, identifying HTML classes and tweaking CSS. It looks like this:

Google Chrome developer tools
Google Chrome developer tools

But as you can see from the screenshot above, the default view is rather dull: white background, uninspiring syntax highlighting. It’s a shame that you can’t match the Chrome developer tools code panel with my text editor of choice.

User StyleSheets

Well, it turns out you can! Chrome provides a “User StyleSheets” directory into what you can drop a Custom.css file.

Windows
C:\Users\%username%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
Mac
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/
Ubuntu
~/.config/chromium/Default/User StyleSheets/

A number of people have also done the hard work for us and made available ready-to-use CSS files for various themes. These are my two favourite dark themes:

  • Tomorrow
  • Monokai (UPDATED: This version works better when editing code in the Elements tab.)

Having saved the code to your Custom.css file and saved it, Chrome updates immediately:

Google Chrome developer tools with Tomorrow theme
Google Chrome developer tools with Tomorrow theme