Craig is a Director of OptimalWorks Ltd, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

Craig's articles

  1. CSS Variables Land in Firefox 31

    Firefox 31 was released on July 22, 2014. You probably already have it but, if not, open the About Firefox dialog from the menu or head to Firefox.com to download a fresh copy.

    Don’t expect too many surprises. There are a few new locales and developer tool tweaks but only one major addition: CSS variables. Firefox 31 is the first mainstream browser to support native CSS variables without having to enable experimental features.

    CSS Variable Syntax

    I first wrote about CSS variables in September 2012. We’ve waited a considerable time and you should note that the syntax has changed.

  2. The Best Programming Language to Learn in 2014: Mid-Year Update

    We last looked at the best languages to learn in February 2014. The results were collated from data obtained from:

    • Jobs Tractor; a company which analyzes job adverts on Twitter
    • Lynda.com; an online video training course provider, and
    • the RedMonk survey which examined the frequency of projects on GitHub and questions on StackOverflow.

    The IEEE Spectrum Survey

    IEEE Spectrum has recently completed their own survey which uses no less than ten sources to rank the popularity of programming languages:

    • search results in Google
    • data from Google Trends
    • tweets sent on Twitter
    • GitHub repositories
    • StackOverflow questions
    • Reddit posts
    • Hacker News posts
    • demand for jobs on the Career Builder job site
    • demand for jobs on the Dice job site
    • IEEE Xplore journal articles

    Languages were allocated to web, mobile, enterprise and embedded categories. The interactive tool allows you to make your own comparisons and apply custom weightings to the data sources if you don’t agree with IEEE Spectrum’s methodology

  3. Is Your Browser Your Next IDE?

    Browser consoles and development tools have become increasingly sophisticated during the past few years. Rudimentary file editing and saving is already available in Chrome so perhaps it’s inevitable vendors are considering full Intergrated Development Environment.

    Mozilla’s WebIDE has been added to Firefox nightly builds and is available from the Web Developer menu after you set the devtools.webide.enabled flag to true in about:config…

    The CodeMirror and Tern-based editor provides a simple tool for editing client-side HTML, CSS and JavaScript files. You can create a new web or Firefox OS application directly in the browser. There are several benefits and intriguing ideas…

  4. How to Track Outbound Links in Google Analytics

    Google Analytics provides an overwhelming quantity of information. If you do nothing but add the tracking script to your pages, you’ll be faced with an endless stream of data and reports about user activity on your site. However, while Analytics shows exit pages it won’t tell you which links users clicked to leave your site. In this article we’ll discover how to add outbound link tracking.

    Does Google Record Outbound Links?

    Probably. If you’re linking from one site using Analytics to another using Analytics Google could record that relationship. Unfortunately, reports would be misleading if one or more outbound sites didn’t use Analytics.

    Google has additional means of collecting data: you can gather a lot of statistics when you own the top browser and search engine! But we’re then moving away from on-site Analytics into more dubious territory; Google wouldn’t necessarily want to share that data.

  5. How to Avoid CSS3 Animation Minification Muddles

    Minification is one of the easier website optimization techniques. Even the simplest processor can shave a third off your CSS download size by concatenating separate file into one file and removing unnecessary characters. Typically, this involves deleting comments, white-space, and the last semi-colon in a rule set, e.g.

    [code language="css"]
    /* my page elements */
    .element1, element2 {
    font-family: sans-serif;
    font-size: 1em;
    padding: 0px 0em 0vh 0rem;
    margin: 10px;
    }
    [/code]

    can be minified to:

    [code language="css"]
    .element1,element2{font-family:sans-serif;font-size:1em;padding:0px 0em 0vh 0rem;margin:10px}
    [/code]

    Your browser doesn’t care that it’s less readable; as far as it’s concerned, the minified code is identical.

    More advanced minifiers take the process further by removing unnecessary values and units. For example, the padding declaration from the previous code block can be reduced to:

    [code language="css"]
    padding:0 0 0 0;
    [/code]

    or:

    [code language="css"]
    padding:0;
    [/code]

    It’s this optimization that caused me several hours of frustration in a recent project. My local site worked fine but, on the the production build, CSS3 animation either failed to start or behaved erratically in some browsers. The cause? Minification…

    Keyframe 0% != 0

    The first issue was the < @keyframes declaration:

  6. What’s New in Firebug 2.0

    Firefox 30 was released on June 10, 2014. It’s a little lackluster but Mozilla are entitled to a break following the browser’s major overhaul in version 29. The most interesting changes:

    • a new background-blend-mode CSS3 property which defines how background colors and images blend together (overlay, multiply, lighten, etc.)
    • Box model highlighting and console.count support in the developer console.
    • It’s now impossible to remove default drop-down arrow styling on select boxes with -moz-appearance: none or the text-indent hack (Bugzilla 649849). Thanks Mozilla — my forms look crappy again and I can’t write that article now!

    More significantly, Firebug 2.0 has been launched. It’s taken a while to reach the milestone given the project is almost a decade old and the current trend for rapidly-incrementing version numbers. The world’s first (good) developer console was starting to fall behind its imitators as vendors improved native browser tools.

    Firebug 2.0 implements several new features and enhancements…

  7. “Mobile First” Considered Confusing

    Dear Web Developer,

    We need to discuss “Mobile First”.

    The term is one of our better, more descriptive, responsive web design concepts. The idea is simple: we start with a basic version of our website — normally a single-column layout. It will work almost everywhere regardless of the device, browser, capabilities, age or screen resolution. It doesn’t matter whether a visitor accesses from Chrome 35 on a MacBook, IE6 on a Windows 98 PC or Opera Mobile on an aging Nokia — they’ll see content.

    Once our basic site is complete, we use CSS media queries and perhaps a little JavaScript object detection to improve the user experience on devices that support modern features and larger screens. For example, we may add drop-down menus, multiple columns, higher-resolution images and more sophisticated layouts.

    The benefits?…

    1. A user with an old browser that doesn’t support media queries will still see the basic site. That wouldn’t be the case if we started with our ‘desktop’ layout and tried to retro-fit a small-screen design.
    2. It’s a logical way to work. We’re progressively enhancing a layout when possible rather than hoping it will degrade gracefully on lesser devices or attempting to remove features that won’t function correctly.
    3. It keeps us focused on what’s important — the content. A linearized view must prioritize text and features. There can be no multi-column, floating element, or modal dialog compromises; important content must appear first.

    We fully understand the context and meaning of “Mobile First”. Unfortunately, it seems our clients and colleagues do not. Even those with considerable IT knowledge appear to have presumptions such as:

    • a separate mobile site will be developed before the desktop version
    • the mobile design will take a higher precedence, or
    • we’re prioritizing devices with a relatively small market compared to traditional desktop PCs.

    None of this is true, but they are logical conclusions when you don’t appreciate what “Mobile First” really means. Perhaps more appropriate terms are:

  8. HTML5 Forms: JavaScript and the Constraint Validation API

    For the final article in this three-part series about HTML5 web forms we’ll discuss JavaScript integration and the Constraint Validation API. If you’ve not done so already, please read The Markup and CSS articles to ensure you’re familiar with the concepts.

    HTML5 allows us to implement client-side form validation without any JavaScript coding. However, we need to enhance native validation when implementing more sophisticated forms because:

    • not all browsers support all HTML5 input types and CSS selectors
    • error message bubbles use generic text (‘please fill out this field’) and are difficult to style
    • :invalid and :required styles are applied on page load before the user interacts with the form.

    A sprinkling of JavaScript magic and the Constraint Validation API can improve the user experience. Be aware that this can get a little messy if you want to support a wide range of browsers and input types which we’ll endeavor to do.