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

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

Responsive misconceptions

Responsive web design has become a familiar part of our industry over the last few years. Like it or loathe it, at least we all know what it means. However, that doesn’t mean that the average non-developer or non-designer knows what it means.

· design

Future imperfect

I don’t update this site very often. I am easily distracted, I don’t have much time, and inspiration can be hard to find. But the real reason is a lack of confidence. I want to write perfect posts, but instead I write nothing at all. Obviously, this is getting me nowhere. At DotYork a few weeks ago, Rachel Shillcock talked …

· site

Placeholders in form fields are harmful

Katie Sherwin at Nielsen Norman Group has posted a great explanation of why placeholders should never be used as replacements for labels in form fields. Thanks to James Young for sharing the link. [Visit link]

· design

Windows XP

The death of Windows XP has been a cause of celebration among web developers. At long last, we can create ambitious designs and write lean code for people using modern browsers, right? Not quite.

· browsers