web development – View from the Potting Shed

List WordPress posts alphabetically beneath category headings

Now, this is going to be a niche blog post.

For the last ten years, I’ve been blogging metal, punk, hardcore and rock music reviews at 195metalcds.com.

Besides the main list of reviews, I also created three pages to list the reviews by artist, genre and score. I updated these manually because when I started the blog I hosted it at wordpress.com which had limitations about which themes and plugins I could use. But ever since moving the site to my own paid-hosting account at SiteGround, I’ve wanted to write a plugin or child theme function that could update these three pages automatically. Well, now I have and that’s what this blog post explains.

You can view the code on GitHub.

DevToys—an open-source Swiss army knife for developers

DevToys is like a Swiss Army knife for software and web developers to help with everyday development tasks such as comparing and converting text and images, testing RegEx, formatting JSON and XML data, compressing images, etc.

It is available for free for Windows from the Microsoft Store.

I wish I’d had this years ago.

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

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:

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