James is a freelance web developer based in the UK, specialising in JavaScript application development and building accessible websites. With more than a decade's professional experience, he is a published author, a frequent blogger and speaker, and an outspoken advocate of standards-based development.

James's articles

  1. Good Users and Bad Passwords

    It’s getting more common for sign-up forms to validate the format of passwords, and then give visual feedback on the password’s content or strength.

    You’ve probably seen Google’s signup form, or something very like it, which is actually quite a good example (and I’ll talk about why in a moment):

    A popup balloon which contains a meter indicating that the input password has good password strength.

    You might also have seen examples like this being suggested and used on the web:

    A bullet list of criteria indicating that the input password is at least 8 characters and contains lowercase letters, but does not contain uppercase letters, numbers or punctuation.

    The idea of having that checklist is to reduce friction for users, by providing specific feedback on the format that’s required, rather than simply rejecting the password on vague or unspecified terms.

    But it’s still a bad idea, however well it’s implemented, because it propagates a misleading view of what constitutes a good password.

    To understand this issue, we need to begin by understanding how a password’s strength is determined.

  2. When JavaScript Feature Detection Fails

    Once upon a time, browser detection was the stock-in-trade of JavaScript programmers. If we knew that something worked in IE5 but not in Netscape 4, we’d test for that browser and fork the code accordingly. Something like this: But the arms-race was already well underway when I first joined this industry! Vendors were adding extra […]

  3. We Can’t Rely on Color

    James considers the flat UI design trend in accessibility terms, and especially how it affects the use of color to convey information.

  4. The Dark Shadow of The DOM

    Shadow DOM is part of the Web Components specification, and is designed to address the encapsulation problems that plague some kinds of web development. You know the kind of thing — if you build a custom widget, how do you avoid naming conflicts with other content on the same page? Most significantly, how do you […]

  5. Is Generated Content Actually Content?

    James looks at examples of how CSS generated content is used, as well as practical details of how it’s implemented in browsers and assistive technologies, concluding that generated content isn’t content at all.

  6. Children of The DOM

    James Edwards looks at some DOM3 properties that simplify node relationships, by focusing only on element nodes and ignoring other types.

  7. Evolving a New Mutation

    James Edwards gets excited about the new MutationObserver API, and talks about how and why it’s come to replace Mutation Events.

  8. Finding an Ancestor DOM Node

    For the eighth article in this small-and-sweet functions series, I’ll be looking at a function called ancestor(). As the name suggests, this function gets a reference to a given node’s ancestor, according to a tag name and/or class match.

  9. A Study in Experimental Game Development

    How do you take a nebulous idea and turn it into a game โ€” to get from technical details, to something interesting and challenging? Well recently, I found myself wondering whether CSS transitions could be used to make some kind of game. This article is about the exploration of that idea, and its development into […]

  10. Intelligent String Abbreviation

    For the seventh article in the small-and-sweet functions series, I’d like you show you a function called abbreviate() โ€” the main purpose of which I’m sure you can guess! It abbreviates a string to a specified maximum length, but it does so intelligently โ€” ensuring that the split will never occur in the middle of […]

  11. Instant Form Validation Using JavaScript

    HTML5 introduces a couple of new attributes for implementing browser-based form validation. The pattern attribute is a regular-expression that defines the range of valid inputs for textarea elements and most types of inputs. The required attribute specifies whether a field is required. For browsers that yet don’t implement these attributes, we can use their values […]

  12. Using Web Storage

    Welcome to another article in the small and sweet functions series, in which I’d like to show you a neat abstraction called domStorage(), that provides a set of convenient functions for interacting with Web Storage, while discretely handling all the most common points of failure.

  13. Fixing the details Element

    The HTML5 <details> element is a very neat construct, but it also has quite a serious usability problem – what happens if you follow a hash-link which targets inside a collapsed <details> element? The answer is nothing. It’s as if the target was hidden. But we can fix that issue with a little progressively-enhanced JavaScript, […]

  14. Parsing an ISO datestamp

    The fifth article in the small-and-sweet functions series is a follow up to the previous article, which showed you a simple function for creating an ISO datestamp. The previous article noted that this format is not supported by some older browsers as input to the Date constructor. This article will show you a reciprocal function, […]