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. Browser Trends October 2014: Back to Work

    Chrome became the top desktop and mobile browser in last month’s browser trends report. There’s less drama in latest figures from StatCounter

    Worldwide Desktop & Tablet Browser Statistics, August to September 2014

    The following table shows browser usage movements during the past month.

    Browser August September change relative
    IE (all) 20.31% 20.44% +0.13% +0.60%
    IE11 9.10% 9.22% +0.12% +1.30%
    IE10 3.05% 2.89% -0.16% -5.20%
    IE9 3.12% 3.02% -0.10% -3.20%
    IE6/7/8 5.04% 5.31% +0.27% +5.40%
    Chrome 46.37% 45.67% -0.70% -1.50%
    Firefox 17.48% 17.43% -0.05% -0.30%
    Safari 4.42% 4.64% +0.22% +5.00%
    iPad Safari 6.38% 6.56% +0.18% +2.80%
    Opera 1.42% 1.36% -0.06% -4.20%
    Others 3.62% 3.90% +0.28% +7.70%
  2. Avoiding Legal Headaches: How to Read a Contract

    You must use a contract.

    We’ve discussed this many times before, but it’s essential to document the project scope and responsibilities for every client. Costly misunderstandings and legal shenanigans can be avoided from the start.

    A concise and easy-to-read contract is normally written by you and signed by both parties. However, you may find at times that the client issues a contract when you’re undertaking agency work or charging an hourly fee for your services.

    This may sound obvious but: Read it. Twice.

    Contracts are a binding agreement. No one will try to catch you out (I hope), but contracts are rarely written by those with software development experience or expertise. A seemingly innocent clause could cause untold damage to your business.

  3. What the Death of YUI Can Teach Developers

    The Yahoo User Interface (YUI) library has been abandoned. In a brief announcement made on August 29, 2014, Director of Engineering Julien Lecomte stated that all development would cease with immediate effect.

    What is YUI?

    yuilibrary.com describes the library as:

    a free, open source JavaScript and CSS library for building richly interactive web applications

    YUI is a collection of HTML, CSS and JavaScript components. It provides cross-browser:

    • DOM and event handling
    • MVC application frameworks
    • data structures
    • helper utilities and functions
    • developer tools
    • and HTML widgets such as auto-complete fields, calendars, charts, data tables, sliders, tab controls and more.

    Think of YUI like a combination of jQuery, jQueryUI, numerous plug-ins, Backbone and a few other libraries thrown in. Of course, this did lead to monolithic JavaScript applications running to several hundred kilobytes but YUI 3.0 introduced increased modularization and dynamic loading to ensure components were only requested when required.

    The library is supported by a considerable volume of documentation and community forums.

  4. What’s New in Chrome 37

    It’s been some time since I wrote about a Chrome release but version 37 was released on all platforms in the last week of August 2014. The browser celebrated it’s sixth birthday on September 2 so perhaps we should delve a little deeper into the new features. Unlike Apple, Opera, Microsoft and Mozilla, Google downplays the latest enhancements. Either that, or they can’t be bothered to create a better “What’s New” page!

    Let’s look at gems lurking below Blink’s surface…

    Windows DirectWrite Support

    Windows users have suffered with woeful font rendering for several years. For some reason, Chrome 36 and below used the ancient Graphics Device Interface to display text and it never compared well to other browsers. Thankfully, following an extensive re-engineering exercise, Chrome now use DirectWrite for better-looking and faster performing fonts.

  5. How to Improve Page Performance with a Font Loader

    When was the last time you used Arial, Times New Roman, Helvetica or … shudder … Comic Sans in your web pages? Web fonts took too long to arrive but, once they did, we never looked back. Fonts are fun, (often) free and fast to implement:

    [code language="css"]
    @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);
    [/code]

    You can then use the font throughout your pages, e.g.

    [code language="css"]
    body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
    }
    [/code]

    The fonts also work in mobile devices so users get a great experience in your Responsive Web Design.

    Or do they?

    After images, fonts are the normally the largest assets in your web page. The Ubuntu font above adds almost 250Kb to the page weight which is noticeable on slower mobile connections. Chrome, IE, Safari and Opera leave a blank space while the font is loaded so the page is unusable. Firefox and older versions of Opera show text in a fallback font then switch — known as a Flash of Unstyled Text (FOUT). Neither option is ideal.

  6. SitePoint Smackdown: Atom vs Brackets vs Light Table vs Sublime Text

    A new breed of editor has arrived. It fills the gaping void between basic text applications (Notepad, TextEdit, gedit, etc.) and full Integrated Development Environments (VisualStudio, Eclipse, NetBeans etc.) Simpler applications lack basic development requirements such as multiple documents, line numbering and code coloring. IDEs tend to be monolithic applications which cater for a specific language, framework or platform.

    This review considers sophisticated code editors with the following criteria. All must be:

    1. Suited to web development
    2. Cross-platform and work on Windows, Mac and Linux. Your preferences and settings should be available regardless of which OS you’re using.
    3. General-purpose text editors which support typical web languages. You should be able to use the same application for HTML, CSS, JavaScript, PHP, Ruby, SQL, markdown and more.
    4. Highly customizable with cross-platform plugins and themes.
    5. Fast and stable. Launching should never be a once-a-day dread like some IDEs.
    6. Immediately usable without a steep learning curve or having to remember numerous keyboard shortcuts.

    Sorry Vim and Emacs fans — console-based applications have been excluded — but you were never going to consider an alternative editor anyway! I’ve also rejected browser-based editors such as Cloud9 and CodeEnvy because they tend to be a little too web-oriented and cannot be used offline. Finally, it’s not possible to cover every editor matching these criteria but let us know if there are any you’d like considered for a future review (such as the new Lime Text project).

    About SitePoint Smackdowns

    Developers spend many, many hours using their chosen editor. It’s a subjective decision and, once you have the perfect configuration, it’s difficult to switch to another application. That said, SitePoint Smack-downs are not “use whatever suits you, buddy” reviews; the writer (me in this case) will make recommendations based on their own experience, requirements and biases. You’ll agree with some points and disagree with others; that’s great — add your comments so we can help others make an informed choice. We’ll also endeavour to keep these articles up-to-date, with new information added as necessary.

    Let’s look at the contenders.

  7. Browser Trends September 2014: Chrome Is the Top Mobile Browser

    Last month’s browser trends report was all about mobiles. It’s a recurring theme in the latest figures from StatCounter

    Worldwide Desktop & Tablet Browser Statistics, July to August 2014

    The following table shows browser usage movements during the past month.

    Browser July August change relative
    IE (all) 21.36% 20.31% -1.05% -4.90%
    IE11 9.08% 9.10% +0.02% +0.20%
    IE10 3.34% 3.05% -0.29% -8.70%
    IE9 3.30% 3.12% -0.18% -5.50%
    IE8 5.22% 4.68% -0.54% -10.30%
    IE7 0.14% 0.14% +0.00% +0.00%
    IE6 0.28% 0.22% -0.06% -21.40%
    Chrome 45.39% 46.37% +0.98% +2.20%
    Firefox 17.50% 17.48% -0.02% -0.10%
    Safari 4.41% 4.42% +0.01% +0.20%
    iPad Safari 6.16% 6.38% +0.22% +3.60%
    Opera 1.34% 1.42% +0.08% +6.00%
    Others 3.84% 3.62% -0.22% -5.70%
  8. 5 Uses for Vertical Media Queries

    Media queries are the core technology behind Responsive Web Design yet, despite a plethora of options, few of us dare to venture beyond min-width (and possibly max-width), i.e.

    [code language="css"]
    /* mobile-first layout */
    .column {
    width: 100%;
    }

    /* tablet layout */
    @media (min-width: 50em) {
    .column {
    float: left;
    width: 50%;
    }
    }

    /* desktop layout */
    @media (min-width: 75em) {
    .column {
    width: 33.33%;
    }
    }
    [/code]

    Few other media query properties are required for general use:

    • width, height and the device declarations are a little too exacting
    • resolution can be used for high-density Retina screens but the new HTML5 picture element and srcset attribute are more appropriate for image content
    • color and monochrome properties may only be useful when targeting e-readers
    • aural, braille, handheld, projection, tv, scan, grid etc. have specific device use cases
    • aspect-ratio and orientation may only be needed when screens fall outside the standard 4:3 and 16:9 range

    View the media query reference on MDN.

    However, should we show more love for the min-height and max-height properties? If we only consider min-width and/or max-width we may be making life more difficult for those using smaller devices. There are several situations when media query height properties are useful…

  9. 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.