Hello. My name is John Hughes and this is my website where I write about web design and development and anything else I find interesting.

Latest posts

Making web pages go fast

Performance matters, especially for the current generation of multiple megabyte websites being pushed down flaky mobile data connections. Andrew Smales has posted some really useful tips on making web pages go fast. Take note! [Visit link]

· web

Even better media queries with Sass

In a previous post, I described a Sass media query mixin that makes it a bit easier to generate CSS for old versions of IE that don’t support media queries. The idea was to use a global variable to decide whether or not to surround the CSS rules with min-width media queries. Modern browsers get a mobile first responsive site …

· code, web

Independent Publisher WordPress theme

The beautiful Independent Publisher WordPress theme is now available on WordPress.com. They have made a few changes to Raam Dev’s original, but it retains a clean, minimalist design that puts content first. [Visit link]

· design

Death to bullshit

If you haven’t seen Brad Frost’s site Death to Bullshit yet, check it out now. The more websites serve advertising networks, the less they serve human beings and that is a bad thing. [Visit link]

· web

Front-end principles for designers

Jon Yablonski has written some really good front-end principles for designers. A good design process benefits everyone: designers, developers, and users. Thanks to Brad Frost for sharing the link on Twitter. [Visit link]

· design, web

Easy data URIs in PHP

A data URI can be used to embed files directly in HTML or CSS as base64 encoded strings. Here is a quick PHP function to do just that.

· code

Mostly default

You might have noticed that the current iteration of my site doesn’t have much in the way of design. In most respects, it is mostly text and mostly default. But choosing to avoid additional code and customization has had a number of benefits, not least in performance and accessibility.

· design, site

Bulletproof content management

Building a website with a content management system is hard. An over-enthusiastic client with a WYSIWYG editor and too much experience of Microsoft Word can wreak havoc on your design. Here are a few lessons I have learned about building sites that clients can update, but not break.

· code, design

Sass, media queries, and IE8

Mobile first responsive design applies progressive enhancement to layout, using media queries to add complexity only when the screen is large enough to use it. The lack of support for media queries in IE8 can be a problem, but one you can work around with a little bit of Sass.

· code

Just what is it that you want to do?

Jeremy Keith makes an excellent point about progressive enhancement and properly identifying the core function of a site. It can be easy to get hung up on a single tool (e.g. a camera) and forget about what you actually want to achieve (e.g. an image). Sometimes you just need to take a step back and ask “Just what is it … [Visit link]

· web

On parenthood

I stumbled across this post by Jeff Atwood on parenthood the other day and it sounded about right to me. It contains the most accurate pie chart I have ever seen. I link to it here mostly for my own amusement. [Visit link]

· uncategorized

The terminal

Here is a really useful list of terminal commands from Craig Hockenberry. For anyone who likes that sort of thing. [Visit link]

· code

Standard Markdown

Markdown is a great way of writing HTML, but every implementation is slightly different. But perhaps not any more. CommonMark aims to prepare a definite Markdown syntax that can be used anywhere. Now Markdown is being used everywhere from README files to content management systems, this can only be a good thing. [Visit link]

· code

Writing JavaScript for WordPress

When you are writing JavaScript for a WordPress site, it is tempting to shove script elements straight into the header. However, you can avoid a lot of problems by enqueueing scripts properly. This way, you can always be sure your code will load in the right order and without duplicating dependencies.

· code

Is it safe?

Naming collisions and missing dependencies are common issues with JavaScript on the web. However, with a little care, you can write code that anticipates and works around them. Simply checking something is safe to use before trying to use it can save you a headache and keep your site up and running.

· code

If at first you don’t succeed, give up

Recursion is a useful programming technique, but it does risk creating an infinite loop. If your code tries doing the same thing again and again, at some point you have to tell it to stop. It should be obvious, but I find it easy to forget.

· code


Anno Dracula by Kim Newman is a great book, extending Bram Stoker’s world to create something entirely new and thoroughly entertaining. I loved it. It also made me think about how inspiration should work, whether you are writing a novel or designing a website.

Vertical align anything with just 3 lines of CSS

Here is an excellent tip from Sebastian Ekström on vertical aligning elements with CSS. It even works when you don’t know how tall they are. Thanks to SitePoint Versioning for sharing the link. [Visit link]

· code

Stay still

On the web, like everywhere else, advertising is a necessary evil. Someone has to pay for stuff and if it’s not you, the chances are it’s a company that wants to sell you something. That’s fine. I accept that. I like to think my intelligent brain filters it all out, but I can’t be sure it doesn’t work on some …

· web

Give realistic UI feedback on :active

CSS transitions mean that we can animate practically anything, but that doesn’t mean that we should. Frederico Brigante argues that applying them to :active elements makes the UI feel slow and unresponsive. A click feels instant and the UI should reflect that. [Visit link]

· design