I'm a web developer currently living in the sunny north of Germany. I enjoy coding in both JavaScript and Ruby and can often be found in SitePoint's JavaScript forum. When I'm not coding, I enjoy running.

James's articles

  1. On Our Radar This Week: Programming Languages, IOT and Screencasts

    Welcome to On Our Radar, a weekly round-up of news, trends and other cool stuff from the world of web development.

    Microsoft has been in the news a lot this week, as its Worldwide Partner Conference took place in Washington D.C. Of the five key trends the company focused on, it seems that their cloud strategy will be the most instrumental in carrying them forward. The news wasn’t all good though, as their COO admitted to a device share of just 14% and news of the biggest round of job cuts in the software giant’s history was revealed.

    Net neutrality was also back in the headlines. The FCC’s public comment period on their proposed net neutrality rule was due to expire on July 15th, but an overwhelming surge in traffic to the site, saw the deadline pushed back. At the time of writing 780,000 comments had been filed by the (presumably irate) American public. For those of you who don’t know what net neutrality is, here’s an amusing take on it by John Oliver.

    Also newsworthy is the fact that Twitter upgraded its tweet analytics dashboard for advertisers and verified users. This means that we now have more ways to measure engagement on Twitter than just retweets and favorites, but of course, not everyone thinks this is a good idea.

  2. On Our Radar This Week: Replicators, RWD and More Resources

    Welcome to On Our Radar, a weekly round-up of news, trends and other cool stuff from the world of web development. As ever, there’s been a whole lot of groovy stuff going on: Nestlé announced that they intend to make a real-life Star Trek food replicator, Larry Page voiced his opinion that the future of […]

  3. On Our Radar This Week: Google, Build Tools and Debugging in the Browser

    Welcome to the next installment of On Our Radar, a weekly round-up of news, trends and other cool stuff from the world of web development. There sure has been a lot going on recently: Jeff Bezos unveiled Amazon’s first smartphone, ‘rebeccapurple’ was officially added to CSS Color Level 4, and it was announced that HTML5 […]

  4. This Week on the Web: Swift, Bitcoin Calculators, and More!

    Hello and welcome to This Week on the Web.

    As the name suggests, this is a weekly round-up of trends and themes from the exciting and giddy world of web development.

    Every week, we’ll put together a collection of links to articles and resources that will make your lives as designers and developers easier, as well as helping you stay up-to-date in this fast-paced industry.

    So without further ado, let’s dive straight in.

    Swift

    It’s been a couple of weeks since Apple announced Swift – its new programming language to create iOS and Mac OS X apps. This initially triggered much buzz amongst the community, but what are people saying now they’ve had a chance to check it out?

  5. Creating a Simple Style Switcher

    One way to enhance your site’s user experience is to allow your visitors to personalize certain aspects of it. This could be anything from increasing font size, to selecting an appropriate language or locale. As a developer, the challenge in implementing this is twofold. You have to enable the user to make the personalizations in the first place, as well as remember them the next time they visit. This tutorial will teach you how to create a style switcher and use local storage to remember your user’s preferences.

    The Basics

    The first thing we’ll need is a basic HTML page with a bit of content and styling. I’ll also add a select element which will enable the visitor to change between styles. An example of what this page might look like is shown below.

    Reacting to Events

    Since a dropdown menu is used to switch between styles, we need to attach an event listener to the select element that reacts appropriately each time the user selects a new style. According to the W3C DOM Level 2 Event Model, the standard way to register event handlers is as follows:

    [js]
    element.addEventListener(, , );
    [/js]

    The meaning of each argument is:

    • event-name – A string representing the name or type of event that you would like to listen for.
    • callback – A function that is invoked whenever the event fires.
    • use-capture – A Boolean declaring whether the callback should be fired in the capture phase. This is when the event flows from the document’s root to the target.

    Unfortunately, IE8 and its predecessors don’t adhere to this model. Instead they provide an alternative attachEvent() method for the same purpose. Whether or not you choose to support these older versions of IE is up to you, and depends on your visitor metrics. You should weigh the cost of supporting older browsers against the benefits this will bring. In this particular case, it’s a matter of using a simple polyfill, so supporting IE8 is not a big deal. The following code sample shows how the select element’s change event is handled across all browsers.

    Within the switchStyles() function, it’s important to note that this refers to the element that triggered the event (in this case the select element). Consequently, this.options will give us access to the select element’s option elements, and this.options[this.selectedIndex] will give us access to the currently selected one. From there it is simple to access the option‘s value attribute.

    Also notice that the code uses a console.log(), instead of an alert(). This is done because an alert() blocks the UI, and needs to be dismissed before JavaScript execution can resume. In this example that’s not too bad, but in more complex cases (such as examining the elements of a sizable array), this approach can be very ugly. If you are unsure about how to open your browser’s console, you can find out here. If you would like to learn a little more about using the console for JavaScript debugging, you can do so here.

    Changing Styles

    Now it’s time to add some simple styles to our page which the user will be able to choose between. Add the following CSS code to your project:

    [css]
    /* High contrast */
    body.high-contrast{
    background-color: DarkBlue;
    color: yellow
    }

    body.high-contrast h1{
    text-shadow: none;
    }

    /* Print */
    body.print h1{
    text-shadow: none;
    }

    body.print img{
    display: none;
    }
    [/css]

    When a user selects a different style from the drop-down, we’re going to apply the appropriate class directly to the body, removing all other classes:

    [js]
    function switchStyles() {
    var selectedOption = this.options[this.selectedIndex],
    className = selectedOption.value;

    document.body.className = className;
    }
    [/js]

  6. An Introduction to FXRuby

    FXRuby is a powerful library for developing cross-platform graphical user interfaces (GUIs). It is based on the FOX toolkit (an open source, highly optimized library written in C++) and offers Ruby developers the possibility of coding applications in the language they love, whilst at the same time taking advantage of FOX’s underlying performance and functionality. […]