Developing Opinions
A simple group checkbox for Knockout.js
I’ve been using Knockout for the first time on a new project and have been pretty impressed. Recently, I had a need to implement a simple ‘group checkbox’. The Knockout documentation already provided an example of a ‘select / deselect all’ checkbox, but the behaviour I wanted was slightly different. I wanted a checkbox that would be unchecked when its children were disabled, checked when any were enabled and would select / deselect all if I toggled it. With a little research into ‘computed properties’, it turned out this is quite easy to do.
October 4, 2014
Style only part of a line path with Raphael.js
If you have a vector line path in Raphael.js and would like to style part of it - highlighting a section of a line graph, for example - you can achieve this easily using the path.getSubPath() interface to get part of your path, then adding a new shape on top based on that pathstring.
September 21, 2014
Octopress makes blogging about programming a cinch
Are you a programmer? Do you want to blog about your ideas, but want it to be as simple as possible? Octopress might be the tool for you. As a software engineer working on a particular problem or technology, you probably find yourself making observations about what does and doesn’t work. But what happens to these insights? Writing them down in blog format can help consolidate your ideas, and it allows you to show your engagement to future potential employers. I want to talk a little about the blogging solution that I use, Octopress, and why I think it’s a great choice for software engineers in particular.
August 19, 2014
Using jsPerf: a how-to guide
If you’re interested in testing the performance of a particular piece of JavaScript, you might be interested in jsPerf. jsPerf allows you to run and compare the speed of arbitrary snippets of JavaScript against a blob of HTML of your choice. This means you can test not just pure JavaScript, but DOM manipulation and jQuery calls too.
August 5, 2014
Slideshow: Breaking the 1000ms 'time to glass' mobile barrier
I found a nice slideshow by Google’s Ilya Grigorik a few weeks ago, taking an overview of the essential issues in optimizing initial web page render time.
August 5, 2014
Protected members in JavaScript
If you’ve done much OOP in JavaScript, you can probably already simulate private member variables, by putting variables in a constructor’s closure (if not, go read this summary by Douglas Crockford). But you may not know that you can also emulate the protected status of C++ and Java — variables shared between parent and child classes, yet not exposed as public. This is occasionally useful, but is a little obscure to implement in JS if you don’t know how. The basic idea is use the ‘parasitic constructor’ pattern — where a child constructor directly calls the parent constructor — and passing in an object defined in the context of the child constructor. The parent constructor decorates this object, and because JavaScript object arguments are effectively passed by reference, the members of this object are visible within the child constructor. As such, your child and parent constructors have a ‘shared secret’ object that effectively acts as a map of all the protected members.
July 10, 2014
JavaScript function variables don't have to be anonymous
If you’ve used JavaScript much, you’ll probably know one of its very convenient features — the ability to assign functions to variables, send them as arguments, and return them as values. This lets you write code like this, where functions themselves return other functions: {% codeblock lang:javascript Anonymous function bonanza %} /* This code creates a basic ‘curry’ function (see my earlier post for an explanation) It relies heavily on function variables. */ var add = function(x, y) { // <- A function variable return x + y; }; var curryUtil = { curry : function(functionToCurry, x) { // <- A function object property return function(y) { // <- A function return value return functionToCurry(x,y); }; } }; var add7 = curryUtil.curry(add, 7); add7(3); // returns 10 var double = curryUtil.curry(function(x,y){ // <- A function literal argument return x * y; }, 2); double(8); // returns 16 The problem with this, however, is that all the functions in the above example are anonymous — they aren't named. Beyond making your code more obscure than it needs to be, this also makes debugging them a problem , because when you look at the browser's call stack, you're going to get something like this: {% img center /images/2014/callStackAnonymousFunctions.png Now they're all named! %} Yeah. Good luck with that. However, you can remedy the issue quite easily &mdash because JavaScript lets you name your function variables: {% codeblock lang:javascript Named function variables %} var myFunction = function myFunction(x) {...} var myObject = { myMethod : function myMethod(x) {...} }; function returnSomeFunction() { return function myReturnedFunction() {...} } …name your function values…
June 21, 2014
Why I like parasitic inheritance
When you’re starting out with JavaScript, it doesn’t take long for the question of object oriented programming to raise its head. As soon as you want to build anything non-trivial you’re going to want some means of structuring your solution and imposing some kind of abstraction on your code. Most tutorials these days emphasise use of the prototype chain - either through function.prototype or the ECMAScript 4 Object.create() interface. I, however, am still fond of the more basic parasitic inheritance approach - where inheritance is basically a special case of composition - and I wanted to outline my reasons why.
May 29, 2014
JavaScript curry
If you’ve had much exposure to functional programming, you might have heard of ‘currying’. This funny term refers to a kind of functional composition: taking a function that takes two (or more) parameters, and turning it into a function that takes less parameters, and automatically applies the other arguments, which have been ‘baked’ into it. For example, let’s say we have an ‘add’ function - function add(x,y) { return x + y }. I might have an instance where I want to add various numbers to a constant - say, 7. Rather than constantly calling add(7, x), currying lets me create an ‘add7’ function. Whatever I pass, add7 always adds seven to it.
May 11, 2014
Document loading and DOM lifecycle events
Document loading and load events can be a bit confusing for newcomers. Multiple names for the same basic things, incompletely documented, ambiguously explained and those ever-present browser inconsistencies don’t exactly help. I want to try and remedy this by providing a rundown of document loading lifecycle events.
April 21, 2014
Disabling Firefox Safe Mode
A couple of weeks ago I faced a problem where Firefox’s “Enter Safe Mode” dialog was causing problems for a Selenium test suite I was trying to run.
April 8, 2014
Introducing Web Accessibility
A couple of weeks ago I gave a presentation, “Introducing web accessibility”, and I thought it might be worth sharing with the wider world. It provides a broad overview for developers who’ve never encountered accessibility before.
March 26, 2014
Styling form elements
Form elements are notoriously difficult to style. Even apparently simple tasks like horizontally aligning different types of input can prove a headache for experienced developers. Only by understanding how form elements are laid out can we master them.
March 15, 2014
Time for a change
The story of my time as a User Experience designer, and why I turned my back on design in favour of development.
October 15, 2013
I'm no longer a UX designer
After twelve months of radio silence I’m resuming the blog under a new design – and, more importantly, a new focus on development rather than UX.
September 14, 2013
Human Vision for UI Designers
This post was rescued from my old UX blog With rare exception, the interfaces we design rely on graphical output. They use text, colour, layout and motion to communicate messages and respond to user activity. Working with a primarily visual medium, then, it’s vital that we understand the capacities and limitations of human vision.
August 15, 2012
Character count design: some guidelines
This post was rescued from my old UX blog Character limits are ubiquitous on the web, not least in applications that rely on user-generated content. Yet for something so common, character limits are often poorly implemented. Thankfully, by following six simple guidelines about designing length-limited fields and displaying character counters, you can make writing character-restricted text and smooth and painless as possible.
May 30, 2012
Designing in-context editors
This post was rescued from my old UX blog In-context (or ‘in-place’) editors allow users to edit content in the same page or space that they view it, rather than using a separate form or administration area. They establish a strong relationship between content and the tools used to manage it, which makes those tools extremely discoverable, and gives users confidence about the consequences of their activity. However, in-place editors can also pose certain design challenges. I take a look at these issues and offer some ideas on how to ameliorate them.
March 30, 2012
The problem with video help
This post was rescued from my old UX blog Video guides have become enormously popular as a help strategy. They’re attractive to new users, they’re easy to create with today’s tools and they impart a real ‘wow’ factor. But like all tools, video help has its limitations, and needs to be employed carefully – because advanced and long-term users find them tremendously frustrating.
January 31, 2012