TL; DR

You can set up git so that you can use a single command to deploy your code to live. This post takes you through the typical steps to set this up.

About git

Git is a distributed version control system. It’s the “distributed” part that makes it useful in this situation. Git allows you to specify multiple remote repositories at addressable locations that it can sync with. To be able to use git to deploy your site, one of those remote repositories must be on the live server.

Some assumptions

In order for this to work, you will need:

• Code for a website under version control in git
• An addressable web server to which you want to deploy the website
• SSH access to the web server
• Git available on the web server

I’ll go through some other steps that require you to be working on a *nix computer, but they are not essential and are really for convenience. You should be able to do this from a Windows machine without a problem.

Making life easier

This section is optional, but it reduces hassle and increases security so why not?

Use an SSH config file. You can set up aliases, default parameters and security options in ~/.ssh/config. It’s a real time saver - it basically means you don’t have to provide all the options and switches every time you sign in via SSH to your server. My host provides a jailed shell on port 2222 and for security I like to use a public key for authentication so my config file looks a little like this:

1
2
3

Host mydomain.com
  Port 2222
  PreferredAuthentications publickey

Set up public key authentication. This increases security on your server by not allowing password access and by installing a certificate on your local computer means you never have to manually authenticate either (unless you choose to password protect your certificate). I won’t go through it here but if you’re interested you can learn how to do it.

Server-side

Sign in via SSH to your server. You’ll start in your home directory.

Create a folder and initialise a new git repo inside it. You can call it what you like; I gave mine the same name as the domain.

1
2
3
4

$ mkdir mydomain.com
$ cd mydomain.com/
$ git init
Initialized empty Git repository in /home/username/mydomain.com/

A git repository and the filesystem containing the checked-out files from that repository are two different things in different locations on disk. When you push from your computer to a remote repository you will only alter what’s in the remote repository; the checked out files on the server remain unchanged. This is a problem since you need the checked-out files to be updated as well so they can be read by the web server software and served to people visiting your site. This is where git hooks come in handy.

Git hooks are scripts that are automatically run when certain events occur in git. In this case we want a script that checks out the latest version to run after the repo receives an update. The hook’s name is post-receive.

1
2

$ cd .git/hooks/
$ vim post-receive

post-receive does not exist by default and so vim should open with a blank file. For the benefit of those not fluent in vim-ese I’ll give blow by blow instructions.

• Type ‘i’ to enter Insert Mode
• Paste in the following code:

1
2

#!/bin/sh
GIT_WORK_TREE=../ git checkout -f

• Press Escape to exit Insert Mode
• Type ‘:’ followed by ‘w’, ‘q’, and Enter, which should (w)rite the file and (q)uit.

The script we just created simply performs a forced checkout which makes sure the state of the checked-out files match the latest version of the repository (i.e. The version just received).

Now it needs to be made executable:

1

$ chmod a+x post-receive

Finally, we need to configure the repository to accept incoming updates without complaining. By default it’s set up to grumble because without the git hook we just set up, the working tree (checked-out files) and the repository would be out of sync. With the git hook in place this becomes a non-issue.

1

$ git config receive.denyCurrentBranch ignore

Connecting the dots

Now the server is ready to receive updates we need to tell the local repository about it.

On your local computer:

1

$ git remote add live username@mydomain.com:mydomain.com

This sets up the repository you just set up on your server as a ‘remote’. You can now refer to that repository as live.

Doing it live

All that remains now is to push your site live. From your local computer:

1

$ git push live master

That’s it. Whenever you want to publish, from now on that’s all you need to type.

One more thing

You may notice that your site isn’t showing up just yet. Log back on to your server. You can see, if you check, in the mydomain.com folder your latest changes are there, but we need to alter the folder that currently contains your website to point to the mydomain.com folder instead.

There will be a folder in your home directory called htdocs, www or public_html containing all the files that currently form your website. I’ll assume it’s called public_html. Make sure there’s nothing in that folder that you haven’t got backed up or that you want to keep - it’s about to be deleted!

1
2

$ rm -rf public_html/
$ ln -s mydomain.com public_html

This creates a symbolic link from public_html to your repository. Reload the page in your browser and you should see the version you just pushed from git.

Make a small change and try git push live master again. As soon as it has finished you should see the change on your site. Deployments, no matter how large or small, will never be a hassle again.

A note on security

If you navigate to http://mydomain.com/.git you may notice that the contents of your git repository are available for the world to see. Some reasons why you might not want this:

• Your email address is probably associated with all your commits
• Anyone could download your repository and all of its history
• Your code will be public and it would be easier to find security holes in it

I get around this by having all the code to be served in a subfolder of the repository, htdocs, and link to that instead of the main repository folder. Alternatively you could use .htaccess (if you’re running Apache) to block access. Just copy these lines into your .htaccess file:

1
2

RewriteEngine On
RewriteRule ^(.*/)?\.git+ - [F,L]

• How could it possibly take 100 days to fix the problem?

Having worked for the BBC for 4 years I would agree on that estimate, and I’ll explain why. First, I need to explain a little about the BBC some of the history surrounding the clock.

History

The BBC clock has been around for a long time. It has had many incarnations and is an integral part of the BBC’s history. It first appeared on BBC1 as an actual clock with a camera pointing at it, and then digital representations in the same style appeared. During a major redesign of the BBC home page it was lovingly recreated in Flash as an homage to this iconic timepiece.

A subsequent redesign removed the clock from the home page but due to an outcry from regular visitors to the site it was reinstated, and rewritten to use the modern canvas HTML element with Flash as a fallback to give the best available experience.

The Trust

The BBC Trust is an independent body who governs the BBC and is intended to act in the best interests of the licence fee payers (for the benefit of international readers, everyone in the UK who owns a TV must pay a yearly fee which mainly funds the output of the BBC which is broadcast ad-free). This basically means that the Trust have final say in matters such as this. A single complaint such as this can out-weigh the opinions of many if the Trust feel that the BBC is not upholding its core values.

One of the core values of the BBC is to never knowingly broadcast inaccurate information. As the clock is on the BBC home page, it looks like that information comes from the BBC, and therefore should be accurate. As the time displayed actually comes from the user’s computer it has the potential to be inaccurate and therefore make the BBC home page inaccurate, and that is unacceptable.

Breaking down the problem

As the clock has been criticised for its accuracy, a fix that makes it anything less than perfect for every single user would be unacceptable. Here are the facts:

1. As already established, you can’t trust the user’s clock.
2. The site is not restricted to people within a single time zone, the clock will have to display the correct time according to the time zone the user is in.
3. As we can’t trust any time information on the user’s computer(1), we can’t rely on their computer to provide a time zone automatically.
4. Getting a user’s location by IP address is never 100% accurate, particularly when using mobile broadband so we can’t use that.
5. This leaves us with only one option (since we can’t rely on every device having GPS built in) - the user must manually provide their time zone, which can be stored in a cookie or a similar client-side storage mechanism.
6. To make the clock accurate if they move time zones, or if they have not yet provided a time zone, the time zone must be displayed along side the clock.

Now that the facts are clearer the problem can be broken down.

User Experience & Design:

• How should the time zone be displayed next to the clock?
• How does the user know they can change it?
• How does the interaction to change the time zone work / look?
• Does this all fit within the BBC’s UX guidelines?

These are all decisions that will need consideration and questions that will need answering before at least some of the development starts. Design documents will be created in order to accurately pass on the outcome of these decisions to the developers.

UX&D will also perform some user testing to make sure the solution is easy to use and understandable. There may also be accessibility testing to ensure disabled users can still get the most out of the site possible including use of the clock.

Development:

• How do we build this so that the home page retains its current high level of cachability which is necessary for the load the BBC experiences?
• How do we deliver the time accurately to the end-user?
• How do we minimise load and rendering times on the home page?

When you have a site with as much traffic as the BBC there is a strong need for a good caching strategy to avoid overloading the servers and mitigating downtime. When it comes to delivering the time, one option would be to embed it in the body of the page, but this would mean that the cache would have to be regenerated every second which is an inefficient solution. There is the possibility of using post-cache/edge includes to insert the time with placeholders but this would be on every request and even more inefficient.

Logically then, you would need a separate AJAX call to get the current time. This could result in a short period of time when the clock displayed no time at all before the time had loaded which would look bad. This would have to be referred back to UX&D for approval.

To serve the accurate time the BBC would need to set up one or more time servers capable of handling the constant load of every single person who visited the home page. Not only would the servers need to maintain perfectly accurate time but they would need to deliver it to the user in a fraction of a second wherever they were in the world.

Because any request that took longer than 1 second would make the clock inaccurate there would have to be a series of servers at various locations around the world capable between them of delivering a latency lower than 1 second to any country. This would take some setting up, particularly if you want to defend against DDoS attacks.

100 days?

Given the complexity of the task, the number of different teams & discipines involved, the infrastucture and the attention to detail required, perhaps 100 days doesn’t seem that mad after all. I don’t think so.

Update 07/06/2013:

I’ve been made aware of NTP, which provides a mechanism of transmitting an accurate time across a network. However, (according to the FAQ it can take up to 5 minutes to determine the time accurately)[http://www.ntp.org/ntpfaq/NTP-s-algo.htm]. This is because it has to make multiple requests to sanity-check the result and ensure latency isn’t affecting the time.

I doubt many people will remain on the home page for 5 minutes and since the page would not have access to set the time of the user’s computer clock the process would have to start from scratch each time the page loaded.

Javascript is an extremely versatile language, however it is missing various useful features that other languages aren’t. In many cases these features can be added with a shim or a polyfill, if required. However, there is a set of missing features that are low-level enough that a shim isn’t possible. They are all surrounding function arguments:

• Named arguments
• Default argument values
• Argument type enforcement

Default argument values is actually a feature proposed in ES6 but as we aren’t quite there yet with ES6 I decided to patch the functionality myself in the best way I could. I’ve made a little library and it’s called Names.js. Please fork it and help me improve it!

Names.js

As it is impossible to alter the fundamental way that functions work without making changes to the Javascript engine, it’s written as an augmentation to the Function object adding a couple of instance methods to the prototype and a static method to the main object. The static method is this:

1
2
3
4
5
6
7
8
9

var myFunction = Function.createNamed({
    args: [
        ['arg1', 'string', 'defaultValue'],
        ['arg2', MyClass, someVar]
    ],
    method: function(arg1, arg2) {
        // ...
    }
});

It’s a bit more verbose than simply

1
2
3

var myFunction = function(arg1, arg2) {
    // ...
}

however it offers the following benefits:

• You don’t need to provide an argument each time if you’re happy with the default value:

1

myFunction.applyNamed(null, { arg1: 'Hello world' });

• You know what each argument means (this advantage is a lot clearer when the arguments are named well and the values you are assigning them are all booleans and integers).
• You can provide the arguments in whichever order you like:

1
2
3
4

myFunction.applyNamed(null, {
    arg2: fooBar,
    arg1: 'Hello world'
});

• The function will throw an error if you pass it an incorrectly typed value:

1

myFunction.applyNamed(null, { arg1: 1234 }); // throws, as 1234 is not a 'string'

applyNamed works just like Javascript’s native apply method, taking the scope as the first argument and the arguments to apply as the second.

Adding validation

In many languages, type checking is mandatory but at the end of the day it’s just a form of validation. In an effort to reduce the usual argument-checking clutter at the beginning of a function I thought it was worth extending the validation functionality to allow for custom validations.

You can either use a regex or a function:

1
2
3
4
5
6
7
8
9
10
11

myFunction.addValidaton({
    arg1: {
        test: /-a-diddly$/, // Check for Flanders
    },
    arg2: {
        test: function(myClass) {
            return myClass.isInitialised;
        },
        required: true
    }
});

The required option on arg2’s validation object means that arg2 is required. Ordinarily if the argument is omitted when calling applyNamed then that validation will not be run. If the argument is omitted but the validation for that argument states that it is required then it will fail instantly.

Dog’s dinner

Names.js eats its own dogfood wherever possible and practical. There are only 3 public functions:

• applyNamed wouldn’t make sense to be able to applyNamed to.
• createNamed would be an even more verbose way of creating a function if you used it with applyNamed. However it does use an applyNamed-style syntax and goes on to use applyNamed internally to create the new function.
• addValidation is not only created with createNamed but also its own validation rules are added using addValidation. Talk about meta!

And…

…that’s pretty much it really. I also wrote a release script for the library that I’m pretty pleased with but maybe that’s for another blog post :)

I was told that the role was for a short contract and the successful candidate would be showing a little love to our badly neglected CSS, both tidying it up while also making sure the styles were rendering accurately according to the designs (plus a few extra tweaks here and there). So basically they had to be fluent in CSS-ese.

Twitter saves the day again

When faced with a daunting task such as this, I did what any other self-respecting geek would do and turned to the all-knowing masses on Twitter.

Some brilliant people came to my rescue almost immediately and here are their responses:

I like this one because it’s really getting back to basics. Not only do you have to know that specificity exists but you have to understand what it does and how it does it. The spelling part is a bit of fun - hopefully the candidate will understand that that’s not the important part! Here’s an article on CSS specificity if you need a refresher.

This is a nice one as well. It checks that they have some understanding about how the document flow works. You could follow this question up by asking if they know any other ways of hiding content and why they might want to do it that way instead.

The answer, of course, is that display: none removes the element from the document flow while visibility: hidden does not. Another way of hiding content (which is good for accessibility as it doesn’t hide it from screen readers) is by using a negative margin. There are various drawbacks and other ways of achieveing this which might also be a good thing to discuss.

It is static. But it’s not the most well-known property as normally we are changing the position from static to something else, like relative or fixed.

inline-block has only really been useful since IE started supporting it properly (around v8) and so while it’s very handy, not everyone has used it.

An element with display: inline-block flows in the document like an inline element but allows you to apply styles to it that normally only apply to block-level elements such as margin, width and height.

I expect most candidates would ask for clarification or look confused at the first part of that question. That’s fine, seeing their reaction allows you to gauge the way they might react to a poorly defined spec, for example. It’s kind of open ended so they might simply say “It’s the latest version of CSS”. Others may list a few new features. If they’re really smart they’ll tell you that CSS3 hasn’t been formally specified because it’s still in development.

Drawing an arrowhead with borders requires the knowledge that when fat borders meet on adjacent edges they form a diagonal. Check out this article for more details. Alternatively you can ask them to create a close button with pure CSS if you’re feeling mean!

Yep :)

Other ideas

Vendor prefixes

I quite like an open ended question, particularly if it calls for some opinion. A lot of this industry is based on facts and rigid concepts that are either right or wrong so hearing someone’s opinion and their ability to express it well could be the difference between a hire and a no-hire.

Simply ask them to explain vendor prefixes, what they’re for and importantly whether they think they are a good idea, making sure to push them for both positive and negative points).

Box model

Get them to explain the box model to you. You’re looking for a good understanding of the different parts that come into play, particularly how it can affect how wide an element will be (and how it won’t always be the same width as its width value). This conversation can then lead onto the box-sizing property introduced in CSS3. See if they know the default value for all element (content-box) and for bonus points see if they know which mode IE uses in Quirks Mode (border-box).

SCSS

Of course these days CSS isn’t quite as static as it used to be with code generators like Sass and less becoming more and more popular. You can ask if they know about these technologies (and what they think of them). If you’re using one in your business, you should probably have a few specific questions about it as well ;)

In favour of CSS generation, it is nice to be able to use a DRY methodology through mixins and inheritance, and it’s even better to be able to define things once and use them many times throughout the document (like colours). Against it, the code generated can be quite verbose and it’s typically hard to debug as looking at the compiled code gives you no indication where a rule exists (or was generated from) in the source.

Implement {something} with no classes or ids

Finally, get them to code up some HTML and CSS for a small interface element (Eg. a tweet (including all the meta data around it)) but do it without using classes or ids. Ask them to use HTML5 and to use semantically relevant tags.

This task can take a while but it shows a lot about their thinking process.

• It shows they have a knowledge of HTML5 tags and semantic markup
• It forces them to improvise with the use of CSS selectors

There are many under-used selectors out there which would be perfect for this sort of task. Just look at them! Do you know all of them? I know I don’t, certainly not without looking. If you really wanted to test just their CSS skills then you could write the HTML for them in a way that would force them to use specific selectors. The sky really is the limit here… get creative!

Any more?

If you’ve got any favourites (and I’m sure you have, whether they’re questions you use or have had used on you), please stick them in the comments. I’d be really interested to hear them!

Originally it had been created by hiding the text of a link, using the :before selector and the content property to add an X and then styling it. It wasn’t ideal because it never really lined up properly, especially when the font size changed and especially if the font family was changed. I wanted to find a better way.

Using a gradient as a gradient is so overrated

You can create a much better X with a few gradients! In fact, gradient backgrounds, multiple background images and rounded corners give you pretty much all the tools you need to create the best X button ever. You just have to realise that just because it’s called a gradient it doesn’t have to look like one.

There are two ways of doing this, but I’ll start with the simplest. Let’s deconstruct our button:

As a single linear gradient can only make lines parallel to each other, we need to make two lines by using two gradients.

By placing two colour stops of differing colours right next to each other we create a solid transition between colours instead of a gradient.

1
2
3
4

a.close{
    background-image: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 41.5%,rgba(0,0,0,1) 41.5%,rgba(0,0,0,1) 58.5%,rgba(0,0,0,0) 58.5%,rgba(0,0,0,0) 100%),
                      linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 41.5%,rgba(0,0,0,1) 41.5%,rgba(0,0,0,1) 58.5%,rgba(0,0,0,0) 58.5%,rgba(0,0,0,0) 100%);
}

You can see it in action and also check the source for the full gamut of vendor extensions.

Adding pzazz

We can make our close button look a lot like the X-Men logo by adding a couple of lines of extra CSS. I added a hover state as well just for kicks:

1
2
3
4
5
6
7
8
9
10

a.close{
    background-image: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 41.5%,rgba(0,0,0,1) 41.5%,rgba(0,0,0,1) 58.5%,rgba(0,0,0,0) 58.5%,rgba(0,0,0,0) 100%),
                      linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 41.5%,rgba(0,0,0,1) 41.5%,rgba(0,0,0,1) 58.5%,rgba(0,0,0,0) 58.5%,rgba(0,0,0,0) 100%);

    border: 3px solid black;
    border-radius: 5px;
}
a.close:hover{
    background-color: rgba(0,0,0,0.1);
}

See it in action here.

The next level

The above approach is a bit limited. A couple of problems:

• It’s easy to change the background or to leave it transparent, BUT what if we want the background to have a solid colour and have the X transparent, letting the colour or image behind show through? It doesn’t work.
• With one line of the X overlaid on the other it would be impossible to give the lines of the X a gradient with any kind of rotational symmetry.

Both these problems can be solved by deconstructing the X a little further:

This means as well as creating four gradients we must also give them each different positions within the element they apply to.

1
2
3
4
5
6
7
8
9
10

a.close{
    background-image: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 67%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%),
                      linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 67%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%),
                      linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 67%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%),
                      linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 67%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%);

    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right top, left top, left bottom, right bottom;
}

See it! (Yes, it looks the same as the first one).

That’s a bit fancy

Now that each ‘spoke’ of the X is created by a separate gradient, we can get super-fancy and create effects like this, this and this.

Getting SASSy

It only seems right that all this goodness should be rolled into a simple-to-use SCSS mixin. Copy and paste this code and create close buttons as easily as typing @include XBackground($foreground: white, $background: gray, $width: 34%) (adding your own border and border-radius as required).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@mixin XBackground($foreground, $background, $width) {
    $stop1: 50% - ($width / 2);
    $stop2: 50% + ($width / 2);

    background-image: -moz-linear-gradient(-45deg, $background 0%, $background $stop1, $foreground $stop1, $foreground $stop2, $background $stop2, $background 100%), -moz-linear-gradient(45deg, $background 0%, $background $stop1, $foreground $stop1, $foreground $stop2, $background $stop2, $background 100%),-moz-linear-gradient(-45deg, $background 0%, $background $stop1, $foreground $stop1, $foreground $stop2, $background $stop2, $background 100%), -moz-linear-gradient(45deg, $background 0%, $background $stop1, $foreground $stop1, $foreground $stop2, $background $stop2, $background 100%);
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,$background), color-stop($stop1,$background), color-stop($stop1,$foreground), color-stop($stop2,$foreground), color-stop($stop2,$background), color-stop(100%,$background)), -webkit-gradient(linear, right top, left bottom, color-stop(0%,$background), color-stop($stop1,$background), color-stop($stop1,$foreground), color-stop($stop2,$foreground), color-stop($stop2,$background), color-stop(100%,$background)),-webkit-gradient(linear, left top, right bottom, color-stop(0%,$background), color-stop($stop1,$background), color-stop($stop1,$foreground), color-stop($stop2,$foreground), color-stop($stop2,$background), color-stop(100%,$background)), -webkit-gradient(linear, right top, left bottom, color-stop(0%,$background), color-stop($stop1,$background), color-stop($stop1,$foreground), color-stop($stop2,$foreground), color-stop($stop2,$background), color-stop(100%,$background));
	background-image: -webkit-linear-gradient(-45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%), -webkit-linear-gradient(45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%),-webkit-linear-gradient(-45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%), -webkit-linear-gradient(45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%);
	background-image: -o-linear-gradient(-45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%), -o-linear-gradient(45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%),-o-linear-gradient(-45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%), -o-linear-gradient(45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%);
	background-image: -ms-linear-gradient(-45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%), -ms-linear-gradient(45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%),-ms-linear-gradient(-45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%), -ms-linear-gradient(45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%);
	background-image: linear-gradient(135deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%), linear-gradient(45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%),linear-gradient(135deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%), linear-gradient(45deg, $background 0%,$background $stop1,$foreground $stop1,$foreground $stop2,$background $stop2,$background 100%);

	background-size: 50%;
	background-repeat: no-repeat;
	background-position: right top, left top, left bottom, right bottom;
}

Vendor schmendor

Looking again at the CSS of the more advanced solution, it turns out that there’s quite a lot of it. This is thanks to all the variations and vendor prefixes we have to use (THANKS FOR THAT VENDORS).

Of course another way we could do this is just to use an image. Old school. We can base64 encode and include it directly in the CSS. While doing that makes it a little larger than a separate file it cuts out the overhead of an extra request so it should be quicker overall.

Here’s the base64 version in action. View source and you’ll see that it’s a lot smaller (about half the size) of the gradient-based solution. The gradient version will scale to any size but if you use it at a fixed size is it worth the extra bandwidth?

Fortunately you don’t need to make that choice! Here’s a handy little chart explaining why:

And you are gzipping all your stuff as you serve it, right? I thought so.

When a colleague mentioned Wordpress recently, in particular how he would never use it in a million years, I asked what he would use instead thinking perhaps something like Tumblr, Blogger, Posterous or something similar. Instead, he suggested something decidedly more… fishy.

Octopress

Octopress is a very neat little blogging environment. You write your posts in markdown and then run a little rake script to generate your blog. The files generated are static HTML files which is great for performance and caching.

The blog’s structure is generated from templates and the CSS is generated using SASS so you get all the benefits of a dynamically generated site but none of the overheads. As if that wasn’t awesome enough, it’s virtually seamlessly integrated with GitHub and GitHub Pages, so you write locally, generate and then deploy with another rake script.

Migrating from Wordpress

To get all my stuff out of Wordpress I used Wordpress’ own export function to generate an XML document of all the posts and metadata. Then I used exitwp to convert the XML to markdown, which worked OK. That converted everything except comments. Generating static files means that comments are not really possible natively but Octopress has built in support for Disqus which works seamlessly. This does mean that the old comments are lost but you know what they say: you can’t make a seafood paella without chopping up a few octopi.

It wasn’t all plain sailing though.

This almost seems like work

I noticed as I clicked through some of the generated markdown files that some scamp had been at my articles and inserted spam links directly into the articles! Honestly, I was getting more and more glad to be moving from Wordpress by the minute. This did mean I had to read each of them through to make sure there wasn’t anything in there I didn’t want.

Reading through your old blog posts is hard. There’s stuff that doesn’t matter any more, there’s stuff that’s just plain inaccurate, there’s stuff which sounds really goofy reading back 3 years later. I tried my hardest not to change the content in them and for the most part I managed for historical reasons to preserve it.

As I was going through each article I adjusted the formatting of the markdown making sure the heading level was correct, the line spacing was correct, the code correctly marked down etc. All the usual OCD stuff that needs doing once you know it’s there.

I had been using a plugin to handle media on Wordpress so images were kind of messed up and I had to copy all the images and reformat all the image tags by hand. I was so glad I hadn’t written all that many articles! Keeping it really simple in markdown seems so sensible I can’t believe we didn’t always blog like this.

The last thing that needed doing was to give it more of the look and feel of the old site. The default theme, classic, is very nice but I’m rather fond of that little pixel dude in the header. Plus I got to try out a friend’s clever CSS Patterns Workbench to create the background in pure CSS instead of images.

CNAME. CNAME RUN.

One last awesome thing: GitHub Pages support domains. By setting your CNAME to point at the page (or the A tag if it’s the whole domain, not just a subdomain) you can point your site to GitHub Pages and have the whole thing hosted for free, no bandwidth charges or anything. I love you GitHub.

Verdict

I’m so glad I’m not using WordPress anymore. Wordpress blogs are such a target for hackers and spammers and I was hit several times over. I tended to keep fairly on top of the updates as well, so you can image how bad it might be for people who don’t bother. If anyone wants to hack this blog now they have to hack my GitHub account. Of course having the whole blog on GitHub has its advantages too… if you like you can correct any mistakes or typos by submitting a pull request!

Not letting you down easily

There’s no way of saying this easily: the browser kind of sucks.

I’ve never found browsing on a console a particularly satisfying experience and I didn’t expect this to be any better. What excited me was the potential for extending the web into a new dimension. The browser doesn’t even do that. It’s nowhere near as awesome as I’d hoped. No 3D, no custom CSS extensions. It ‘does’ 3D… sort of. You can link to .mpo 3D image files; it’ll display them in 3D and allow you to save them to the SD card. It does not display the images in 3D inline in the page, though, and the 3D capabilities doesn’t extend beyond image files to other page elements.

Viewing 3D photos on the web is pretty cool though, I’ll admit. If you want to try out viewing 3D pictures on the web for yourself, head over to 3D Porch where they have stacks of them waiting to be seen.

Interestingly, because .mpo and .jpg are both encoded using the standard jpeg format it seems that you can use them both in the same way. If you visit this little demo page I put together you can see that most browsers are happy displaying .mpo files natively as well as .mpo files renamed as .jpgs. The 3DS browser will display both images on the page without a problem. Sadly they are in 2D, although if you click on them (they are linked to their original files) then the image is shown in 3D. This works for both the .mpo file and the .mpo renamed as a .jpg.

The browser doesn’t have Flash. This is no great loss, however, and with the 3DS’ weak battery life you can’t blame them for not wanting to include something that would drain it even more quickly than in most situations.

Getting technical

For some fairly technical details about the browser, 3DS Buzz wrote it up at the bottom of this article. I’ll attempt to filter some useful information out of that…

It is claimed that the browser supports HTML5 and CSS3 (partially in both cases). As such it isn’t much of a surprise that it doesn’t pass the Acid 3 test. It is more of a surprise, however, that the 3DS does not even pass the Acid 2 test. Don’t expect your pages to render perfectly (I’ve already had reports of pages not looking as they should).

The JavaScript engine is said to be “high speed” but it takes it’s sweet time to finish failing the Acid 3 test.

Here is the 3DS’ User Agent string:

Mozilla/5.0 (Nintendo 3DS; U; ; en) Version/1.7412.EU

This is interesting for several reasons.

1. It doesn’t list the rendering engine or make any mention of NetFront
2. It DOES list the device name (not really that interesting, it’s just cool to see it)
3. It’s fairly concise (it doesn’t come loaded with all the cruft you normally find in a UA string)
4. It has the version number, but only for what appears to be the browser and not the system software

Compare that UA string with the one of the version of Chrome I’m using right now:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.91 Safari/534.30

Chrome’s is much longer and more verbose. You can see it not only contains the hardware but the system software version. It has the rendering engine and it’s version, the browser and it’s version and for the life of me I can’t think why but it also has a reference to Safari.

What’s odd to me about the 3DS’ UA string is the inclusion of the .EU on the end of the version number, right at the end. Does this mean that there’s an EU version of the browser that’s different from the browser they get in Japan and America? Why would they want to have to maintain multiple versions of the software? Will they use that user agent information to serve different content on Nintendo sites based on region? Probably not (but they could…).

Utilitarian

While I’m sure it’ll be fine for jumping onto GameFAQs to figure out how to beat that boss you’re stuck on, the 3DS browser is not going to set the world on fire like I hoped it might. I hope that not too many people got their hopes up about it, but if you did (like me) and are now feeling a little disappointed I feel your pain. At least it’s never going to gain a significant enough market share that we’ll ever have to worry about fixing broken sites in it… (famous last words).

Webkit doesn’t fire the load event on images when you change the src attribute and the new src is the same as the old

That seems reasonable

That seems like reasonable behaviour. I mean, the image is already loaded. Changing the src attribute to it’s current value isn’t really changing it at all. It’s staying the same. If the src is the same and the image is already loaded, why fire the load event? You would only want to do that if the image was reloaded but doing that would be pointless as it’s already loaded. Loading it again would be a waste of bandwidth and make the experience feel slower; not what browser manufacturers are aiming for.

So what’s the big deal?

Inherently lazy

Developers like myself are inherently lazy. I don’t mean we’re workshy, but rather we always look for the easiest, cleanest solution to problems. This behaviour in WebKit fails twice on this count.

1. It’s inconsistent with other browsers. I have to work around it, potentially adding browser-specific code. That’s not good.
2. It forces me to add extra code to cope with it’s specific requirements. Let me explain:

If I was writing for a JS-guaranteed environment this wouldn’t be such a problem but I’m a conscientious sort of guy and realise that not everyone will have the benefits of a modern browser with all the options set to ‘awesome’. I want to cater for the JS-disadvantaged as well.

Let’s assume I’m writing a carousel for a photo slideshow that shows 4 pictures at a time. I want to show the first 4 pictures by default so that at least some content appears even for the non-JS users. Then, using non-intrusive JS I augment the slideshow to add next / previous buttons and the ability to click the image to enlarge it in a lightbox.

To avoid repeating a lot of code in a setup function that would also be present in the next/previous function I can write a single function to set the page of the carousel, setting up the images and their click events.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var picturesPerPage = 4,
    pictures = $('#pictures img');

var loadGalleryCarouselPage = function(pagenumber){
    var imageStart = pagenumber*picturesPerPage;
    pictures.each(function(i){
        var picture = $(pictures[i]),
            pictureContainer = picture.parent();
        picture.hide();
        if(carouseldata.images[imageStart+i]){
            picture.show();
            picture.bind('load',function(){
                pictureContainer.removeClass('loading');
                picture.unbind('load');
            });
            pictureContainer.addClass('loading');
            picture.attr('src',carouseldata.images[imageStart+i].thumbnailurl);

            picture.unbind('click');
            picture.bind('click',function(e){
                e.preventDefault();
                pictureLink.fancybox({
                    "href": carouseldata.images[imageStart+i].imageurl
                });
            });
        }
    });
};

loadGalleryCarouselPage(0);

I’m using JQuery and Fancybox for this example.

So what we have there is a function that loops over the four img tags, pulls information out of an array (carouseldata) based on the page offset passed as an argument, sets up click and load listeners and changes the image’s src attribute. This will work for any page at any time. In theory we could add a ‘jump to page’ option where the user could choose the page number to skip to. But we won’t.

This is especially handy as we can simply call loadGalleryCarouselPage(0); to set up the event listeners when the page first loads without having to duplicate most of the lines elsewhere. We even get a natty little loading spinner if we take advantage of the loading class that is set.

Making things difficult

When the page loads it’s a bit of a race. The results of this function varies between refreshes for me. If the image has not yet loaded when the JS runs then it works fine. If the image has already loaded, however, here’s what happens:

1. A load event listener is set
2. The loading class is applied which shows a spinner and hides the image
3. The src of the img is set
4. The load event DOES NOT FIRE in WebKit because the image is already loaded
5. The picture remains hidden and the spinner keeps spinning even though the image is loaded

And that is frustrating.

It’s an intermittent problem though, only when loading race conditions fail. Here’s another situation where it happens every time.

The dead cert.

The total number of images in the carousel doesn’t divide perfectly by four, so on the final page there are only two images showing. The final two of the four img elements are hidden from view. They are hidden rather than removed because:

1. They act as spacers so that other elements flow around them correctly
2. The img tag needs to stay so that we can easily change the src attribute if the user navigates back to a page with 4 images on it.

So say we’re on page 9 of 10 and click ‘Next’. Images 1 & 2 are updated to show the final two pictures and images 3 & 4 are hidden. Importantly: the src attributes of images 3 & 4 don’t change. When we click ‘Previous’, images 1 & 2 are changed back but 3 & 4 are stuck with the loading spinner. That’s because, like before, the src was already set and it was equal to the new value.

Working around it

We could set the hidden images to a transparent .gif or .png instead of hiding them which would solve the second problem but because we want the images showing for non-JS users when the page loads we can’t use that technique to fix this. Also, downloading that extra image means extra bandwidth and latency times that we’d rather not have to deal with.

It turns out that setting the src to '' (empty string) immediately before setting the image url will fix the problem. But! It causes the images (and consequently their container) to collapse to zero width and height in Firefox while the new images are loading which looks really bad if you’re trying to navigate a slideshow.

Here’s my solution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

var picturesPerPage = 4,
    pictures = $('#pictures img');

var loadGalleryCarouselPage = function(pagenumber){
    var imageStart = pagenumber*picturesPerPage;
    pictures.each(function(i){
        var picture = $(pictures[i]),
            pictureContainer = picture.parent();
        picture.hide();
        if(carouseldata.images[imageStart+i]){
            picture.show();
            picture.bind('load',function(){
                pictureContainer.removeClass('loading');
                picture.unbind('load');
            });
            pictureContainer.addClass('loading');
            picture.attr('src',carouseldata.images[imageStart+i].thumbnailurl);

            picture.unbind('click');
            picture.bind('click',function(e){
                e.preventDefault();
                pictureLink.fancybox({
                    "href": carouseldata.images[imageStart+i].imageurl
                });
            });
        }
        else{
            picture.attr('src','');
        }
    });
};

if($.browser.webkit){
    $('#pictures img').each(function(i){
        $(this).attr('src','');
    });
}
loadGalleryCarouselPage(0);

I added an else so that if there aren’t enough pictures to fill all the img tags the src of the unused images is set to an empty string. There will always be at least one image on each page so there will always be an image at full height to prop up the carousel container while those hidden img tags are primed to receive more content.

I also added a little if block directly before initialising the carousel, at the bottom. If the browser is webkit-powered then it’ll loop over the img tags and prime them (set their src to empty) before initialisation. Because this is done using JS, non-JS users will still see the images.

Grumpy

I’m grumpy about having to put in that extra, browser specific code. Setting the src to an empty string seems hacky. But it works and the logic is still clean and minimal. So it’ll do.

I hope that helps anyone having image loading javascript issues. And as usual I’d be interested to hear if you have any alternative / better solutions!

Footnotes

Check out the carousel in action here.

How dare it

That’s right. Just when you thought you had a nice system in place IE comes along and stomps all over it. I’m sure more and more people will come up against this as they start using CSS gradients in earnest. I can see it being quite a common situation, too. I have two background images: one, a CSS generated gradient and two, an image to be laid over the top of it. A nice shiny button with an icon, for example.

We know that certain browsers can’t render gradients and so we define the background to initially be just a solid colour with the icon image (the users of the older browsers will never miss what they didn’t know was there). Then we go on to define the styles for the modern browsers. These styles use the same selector (background-image) so they will override the initial declaration but according to the rules, browsers that don’t understand the gradient instructions will just ignore the whole declaration leaving us with just the initial icon for the background.

As we know, the backgrounds will appear top down from the order you specify them so we specify the icon first and then the gradient, otherwise the gradient would obscure the icon.

We also define the background-position twice. This is so we can position the gradient+icon background differently from the icon on it’s own. Browsers that don’t support multiple backgrounds should not see this syntax as valid and should ignore it.

Here’s the code:

1

<a href="#" class="mybutton">Register now</a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.mybutton{
	background-image: url(icon.png);
	background-image: url(icon.png),
		-webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(233, 233, 233)),
			color-stop(0.5, rgb(249, 249, 249)),
			color-stop(0.5, rgb(255, 255, 255)),
			color-stop(1, rgb(255, 255, 255))
		);
	background-image: url(icon.png),
		-moz-linear-gradient(
			center bottom,
			rgb(233, 233, 233) 0%,
			rgb(249, 249, 249) 50%,
			rgb(255,255,255) 50%,
			rgb(255,255,255) 100%
		);

	background-position: 5px center;
	background-position: 5px center, left top;

	background-repeat: no-repeat;

	padding-left: 30px;
}

Here it is in Firefox:

And in IE7:

Or you can see it for yourself in your browser.

It seems that IE is not behaving as we might expect. It’s not showing the gradient (expected) but it’s not failing back to just showing the icon either. A quick look at the IE developer toolbar (in IE9, IE7 mode; the IE7 dev toolbar would leave you stumped) shows us why:

It’s picked up the background image declaration that includes a gradient. In this case it’s the Mozilla-specific gradient and the reason it’s this one and not the Webkit one is that we are defining the Mozilla one last. If they were defined the other way around it would have picked up the Webkit one instead.

Why? Oh why??

I’m no expert on how IE parses CSS but I would presume it’s something like IE recognises the URL part just fine and when it reaches the closing parenthesis it figures that’s it and all’s well. Maybe not. Whatever, for some reason it thinks it’s a valid declaration, scoops up the whole lot gradient and all and tries to render it. And fails.

That’s annoying

Yes it is.

The fix

Importantly, IE correctly recognises the background-image declaration as invalid (for itself) if it starts with a gradient, even if it contains a regular image later on. So we just start the declaration with a gradient. The trouble is, we don’t want to put the gradient first as it’ll obscure the icon, so we define another gradient that is OK to put on top of the icon. That would be an empty or transparent gradient.

We will use the minimum amount of code that is necessary to trigger a gradient in the rendering engine. For Webkit, it is -webkit-gradient(linear, left bottom, left top). No color-stops required. This is good because no colour means no visible gradient. For Mozilla, it requires some colour information, so we just give it completely transparent colours using rgba: -moz-linear-gradient(center bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%).

Putting these gradients first mean that IE7 won’t incorrectly think it can render that style and so it’ll stick with just the icon.

Important: Because we now have 3 background images, we also need to declare a third value for background-position.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.mybutton{
	background-image: url(icon.png);
	background-image: -webkit-gradient(linear, left bottom, left top),
		url(icon.png),
		-webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(233, 233, 233)),
			color-stop(0.5, rgb(249, 249, 249)),
			color-stop(0.5, rgb(255, 255, 255)),
			color-stop(1, rgb(255, 255, 255))
		);
	background-image: -moz-linear-gradient(center bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%),
		url(icon.png),
		-moz-linear-gradient(
			center bottom,
			rgb(233, 233, 233) 0%,
			rgb(249, 249, 249) 50%,
			rgb(255,255,255) 50%,
			rgb(255,255,255) 100%
		);

	background-repeat: no-repeat;
	background-position: 5px center;
	background-position: left top, 5px center, left top;

	padding-left: 30px;
}

Here it is in Firefox:

And in IE7:

Or you can see it for yourself in your browser.

But wait, there’s more!

You thought this was over? Of course it’s not! IE9 is a heck of a lot better than previous versions but it’s still not perfect. For example, it does support multiple backgrounds but it doesn’t support CSS gradients. This means that it’ll ignore the gradients but it’ll use the background-position multiple background declaration we made, resulting in the icon being positioned left top as opposed to 5px center.

I tried getting around this by inserting another background-image defining three images (two of them transparent spacers) directly after the first background-image and before the first gradient:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.mybutton{
	background-image: url(icon.png);
	background-image: url(spacer.gif),
		url(icon.png),
		url(spacer.gif);
	background-image: -webkit-gradient(linear, left bottom, left top),
		url(icon.png),
		-webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(233, 233, 233)),
			color-stop(0.5, rgb(249, 249, 249)),
			color-stop(0.5, rgb(255, 255, 255)),
			color-stop(1, rgb(255, 255, 255))
		);
	background-image: -moz-linear-gradient(center bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%),
		url(icon.png),
		-moz-linear-gradient(
			center bottom,
			rgb(233, 233, 233) 0%,
			rgb(249, 249, 249) 50%,
			rgb(255,255,255) 50%,
			rgb(255,255,255) 100%
		);

	background-repeat: no-repeat;
	background-position: 5px center;
	background-position: left top, 5px center, left top;

	padding-left: 30px;
}

But that didn’t work as IE7 still parsed it (incorrectly) just as it did in the first instance and therefore didn’t show the icon at all. Back to square one.

At this point I’m sure most people are thinking

“Oh come on, why not just use Modernizr and only apply the gradients to browsers that can use them?”

That’s one way of doing it, although I would rather not use JavaScript if possible. This leaves one option… go back to the original CSS and add this conditional comment in the <head>:

1
2
3
4
5
6
7
8

<!--[if IE]>
    <style type="text/css" media="screen">
        .mybutton{
            background-image: url(icon.png);
            background-position: 5px center;
        }
    </style>
<![endif]-->

As no versions of IE yet support gradients, we just reset the background to be the plain ol’ icon. Problem solved.

Here it is in Firefox:

And in Webkit (Chrome):

And in Opera:

And in IE6:

And in IE7:

And in IE8:

And in IE9:

Or you can see it for yourself in your browser.

A side serving of gradient

You may have noticed that two of the color-stops have the same percentage/distance value. This effectively give us the ability to have more than one gradient on the same element. The end result is a gradient from the top to the middle, a sudden stop and change of colour and another gradient from the middle to the bottom. It’s useful to be able to change sharply from one colour to another as well as smoothly!

Footnotes

• If anyone has a better solution, please get in touch in the comments or on Twitter.
• The images I’ve used come directly from the project I’m working on in my day job. If my employer has any objection to their use here I will of course replace them with something else. But I’m sure they won’t.

Let’s not beat around the bush: this is a very impressive device. It’s tricked out with all the latest technologies (or the latest applications of ‘old’ technologies, wherever you choose to draw the line). The thing people are really talking about, of course, is the 3D aspect of it. I’m sure you have read about it - the top screen is a 3D display which importantly doesn’t require glasses. I can’t stress enough how good the 3D effect looked. It felt completely natural and I didn’t find myself getting any kind of a headache or nausea like some people are worried about.

There were demos available of most of the functionality: Lots of games that’ll be available on launch or shortly thereafter, 3D photography, augmented reality (including the ‘reality’ part shown in 3D due to the 3D cameras on the lid - the most impressive thing for me) and street pass (Nintendo’s social discovery system). But the thing that actually holds the most interest for me wasn’t shown and indeed is barely talked about. I’m hoping that will change.

A complex web

I’m talking, of course, about the web browser which will come built in to the device as part of the extensive suit of software bundled on-board.

*YAWN*

A web browser? What’s so great about that?

I don’t know yet because no-one is talking about it, but I’m hoping it will inspire (even more) innovation and creativity on the web. I’m hoping it will have some semblance of 3D integration and capability. And if not, why not? Surely this is the way the web is going. More and more devices will be 3D enabled in the near future and you can bet that if the 3DS doesn’t kick-start the 3D web some other device will. You can buy a 3D TV to put in your living room for crying out loud - this is 2011! They reckon you’ll be able to buy a HOLOGRAPHIC 3D TV in 2012. I’m all over that. And I want the web to make sure it isn’t left behind. After all, a lot of modern TVs have integrated browsers. It’s the next logical step.

Least they could do

The least I could hope for is support for 3D images displayed in web pages. The LEAST. The standard open format is .mpo and fortunately the same format in which the 3DS saves it’s 3D photos.

That’s not to say you will be able to simply embed the 3D photos in your site and have them work in the 3DS’ web browser though. Think how that would look in a desktop browser… Well it probably wouldn’t show up or show a broken image.

No, no, no, don’t even think about making a separate site for 3D devices. I thought we were past all that. What are you going to have yet another separate site for 3D+Mobile? We want to serve one page that works on all devices.

The trouble is, without images having a similar failover pattern to the one available to video and audio in HTML5, you simply couldn’t use the image inline in your page as non-3D-enabled browsers wouldn’t recognise the format. This just proves that there are always new image formats emerging; they are not all supported by all browsers as it’s easy to assume (if you forget about IE6 and .png’s) so why should we assume that that’s the case with the markup?

This has been discussed by Bruce Lawson and makes sense (no matter how frustrating it is). So until all browsers support the display of 3D images on 2D screens we will have to find another way.

The other way to include images in the page is, of course, CSS background images. This one has legs. The 3DS browser could easily respond to an @media query, something like @media screen and (-3ds-min-device-spatial-dimensions: 3) { ... }. Then you could alter how the page looks on a device that has 3D capabilities. Once you have the 3D background image in place you can mark it up to include a 2D version for the rest of the world:

1
2
3

<div class="forest-picture">
    <img src="/static/img/forest-2d.jpg" alt="Pretty forest scene" height="250" width="400"></img>
</div>

1
2
3
4
5
6
7
8
9
10

@media screen and (-3ds-min-device-spatial-dimensions: 3) {
    .forest-picture{
        background: transparent url(../img/forest-3d.mpo) no-repeat 0 0;
        width: 400px;
        height: 250px;
    }
    .forest-picture img{
        display: none;
    }
}

The best of both worlds! We can dream…

Reality check

Before we go on, I just need to make it abundantly clear (if it isn’t already) that this article is pure speculation. I don’t know if the 3DS browser supports any of this kind of stuff, but imagining the possibilities and how they might work is an interesting exercise. Oh wait, it looks like Google has already looked into 3D browsing. My mistake ;)

Let’s explore further down the rabbit hole…

Going the extra dimension

What if we wanted to move beyond just sticking 3D images in our pages? As awesome as a 3D gallery might be, there are so many more possibilities. Imagine if the whole page could be rendered in 3D; if each element on the page had it’s own depth setting. I think the most obvious thing to do would be to push the background actually into the background giving the site content more prominence, and if you start down that road you should just be able to let your imagination carry you forwards.

I know what you’re thinking, and it’s what I thought at first too… why not use z-index for that? The reason why not is because z-index controls the stacking order of elements on a single plane. If you change the function of z-index to control depth on 3D devices, how would you re-order a group of elements sharing the same depth on a 3D page? It’s clear that we need a separate property to do that. I’m going to be bold and use depth in examples, for want of a better attribute name.

So where are we? We’ve got 3D images and the ability to assign depth to elements. That’s a good start, but it seems a little restricted, doesn’t it? A bunch of flat panels sitting at different depths in a 3D space. We’re not really making the most of the technology. We need to add a little style in there… style that can bridge the gap between depth-levels. Fortunately, Webkit is one step ahead of this game with it’s CSS 3D transforms. These could easily be adapted to show in real 3D instead of 3D rendered in 2D.

Curves would be nice

Yes they would, and so would a mansion on the beach in Barbados. We don’t even have the ability to define curves in 2D CSS yet. But then in 2D we might not have wanted to do crazy things like making a callout or title bow inwards or outwards, which would work pretty well in 3D. But maybe just one step at a time…

What is 3D anyway

To develop in 3D you need to understand how it really works. Fortunately understanding it is a lot simpler than getting your head around designing and developing in it:

3D works by each of your eyes seeing a slightly different image.

Simple enough, and in real life this works pretty well. But when generating your own 3D content you have to be ever-mindful of it.

Mind the gaps

Imagine a blank page. You make the background a fetching pinkish sort of red colour and set the depth to be way back in the distance.

You then have a look at it and wonder why it doesn’t look like it’s way off in the distance. You check to see that your 3D depth slider is turned all the way up and when you find that it is you’re left feeling a little confused.

The reason why this doesn’t appear to be in the background is because your eyes are seeing the exact same image. There needs to be some more detail in there before your eyes can be tricked into thinking that it’s way off in the distance. Here are some suggestions:

1. You could give it a border that makes it look like you’re looking into a box. Of course the edges of the border would need to be firmly in the foreground for it to work.

1. You could give it a pattern or image. Beware with repeating patterns though: looking at 3D images forces your eyes to cross slightly and a repeating pattern could cause you to think it’s not at the depth you intended.

1. Lay something else on top of it with a higher depth. For demonstration purposes I’m going to go with this one.

But even laying something on top like this isn’t too easy for our brains to process. Have a look what each eye would be seeing.

There’s not a great deal to differentiate these two images and while your brain knows it’s seeing different things from each eye it is struggling because there are things missing that it’s used to. Usually when you see an object in front of another object it casts a shadow somewhere. Because they are in different locations your eyes will each see that shadow slightly differently. Also the way the object is lit and how it reflects the light could be different in each eye. To make sure we don’t give people headaches we’ll have to sort this out.

1
2
3

.floating-box{
    box-shadow: 5px 5px 5px #ccc;
}

Now the panel has a nice drop shadow which should make it easier on the eyes and easier to see the 3D effect.

But how does it get rendered so that each eye sees the shadow differently?

Seeing the light

The way I see it there are two options:

1. The browser provides a default (override-able) light source:

1
2
3

body{
    light-source: 25% 25% fixed;
}

fixed would position the light source relative to the browser viewport, and as an alternative absolute would position it relative to the document.

1. You, the developer, get granular control over what each eye sees:

If you had control over each eye the possibilities would be endless. Set the difference in box shadow offset, show a different background image to achieve a rippling effect. You would OWN all the dimensions.

1
2
3
4
5
6
7
8
9
10

@media screen and (-3ds-min-device-spatial-dimensions: 3) and (-3ds-perspective: left-eye) {
    .floating-box{
        box-shadow: 3px 5px 5px #ccc;
    }
}
@media screen and (-3ds-min-device-spatial-dimensions: 3) and (-3ds-perspective: right-eye) {
    .floating-box{
        box-shadow: 7px 5px 5px #ccc;
    }
}

I think a combination of both would probably be in the interests of developer and user alike.

It’s not all giant blue humanoids and bio-luminescent flowers

This technology has it’s disadvantages, and you can be sure that there will be some nasty surprises out there when it comes along. As with most visual effects, subtlety is king. Of course there will always be the developers who are irresponsible with this great power and make some eye-bleeding creations, but that’s just inevitable. No, what I’m really worried about can be summed up in two words: Internet. Advertising. If you thought pop-over ads were intrusive now, you ain’t seen nothing yet.

The waiting game

Who knows what you’ll be able to do with the browser? Nintendo maybe? Or if it’s Opera providing the software again, as they did for the Wii and original DS/DSi then I expect they will know. (Please do get in touch if you have insider knowledge!) But until that information is made available or the 3DS is in our hands we won’t know for sure. I hope it’s got at least a few fun 3D features to play with. I’m sure the full set will develop over time.

Update: Now that the browser is available, I had a little play with it and wrote down a few of my thoughts.

I’m not kidding! You need to make sure that your sites all redirect from http://yoursite.org to http://www.yoursite.org. If you’re not sure whether your sites do this, try now. Go ahead, I’ll wait.

You can score yourself against this list based on what you see:

• Error page: NO POINTS!
• Redirected to www.yoursite.org but to the front page instead of the page you wanted: Half a point
• Page served, URL still has no www: 1 point
• Redirected to www.yoursite.org and to the correct page: 10 points!

On no account should a user see an error page if they don’t type www before your URL. That’s just a horrible experience and most people will think the site is just broken and go somewhere else. No points at all.

It’s almost as bad if the user enters an address to a page within your site and then gets taken to the home page, even if the URL in the address bar says www. I mean at least the site doesn’t look broken but it’s still not a nice welcome. Having the www gets you half a point.

If the page is served irrespective of whether there is a www in the URL thats… OK. But only OK. Aside from the fact that you’ve got the same pages in two locations (not good for Google-juice) it could lead to errors. As yoursite.org and www.yoursite.org are seen as two different domains, if you have any AJAX on your site that refers specifically to www.yoursite.org it’s going to fail hard if the URL in the address bar doesn’t have the www. This is thanks to the cross-domain security model browsers employ. You don’t want that happening.

What you should be doing is simply redirecting all traffic to the root domain to the www subdomain and maintaining the rest of the URL to ensure a good experience. This is actually very easy to do:

Open the .htaccess file in the root of your site’s file structure. If it doesn’t exist, create it! You can create it on the command line, or directly on the server but Windows and OS X will object to the filename if you try and create it using the GUI. Once it’s open, add these lines to it:

1
2

RewriteCond %{HTTP_HOST} ^yoursite\.org$ [NC]
RewriteRule ^(.*)$ http://www.yoursite.org/$1 [R=301,L]

Note that on the first line when you change the domain you need to add a slash before each dot as it’s part of a regular expression.

It’s that simple!

You have no excuse now.

How do you validate an email address?

Obviously you want to use a regular expression, but given the specification for email addresses that’s going to be one really complicated line of code.

Following a user’s complaint that they could not register with our site with their (perfectly legitimate) address because of our validation, today’s search yielded more success than usual. Near the bottom of the source of the Perl Email::Valid module there is a very long regular expression which I have lifted directly and placed in this page.

1

/^[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|"[^\\\x80-\xff\n\015"]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015"]*)*")[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:\.[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|"[^\\\x80-\xff\n\015"]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015"]*)*")[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*)*@[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|\[(?:[^\\\x80-\xff\n\015\[\]]|\\[^\x80-\xff])*\])[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:\.[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|\[(?:[^\\\x80-\xff\n\015\[\]]|\\[^\x80-\xff])*\])[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*)*|(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|"[^\\\x80-\xff\n\015"]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015"]*)*")[^()<>@,;:".\\\[\]\x80-\xff\000-\010\012-\037]*(?:(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)|"[^\\\x80-\xff\n\015"]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015"]*)*")[^()<>@,;:".\\\[\]\x80-\xff\000-\010\012-\037]*)*<[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:@[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|\[(?:[^\\\x80-\xff\n\015\[\]]|\\[^\x80-\xff])*\])[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:\.[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|\[(?:[^\\\x80-\xff\n\015\[\]]|\\[^\x80-\xff])*\])[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*)*(?:,[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*@[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|\[(?:[^\\\x80-\xff\n\015\[\]]|\\[^\x80-\xff])*\])[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:\.[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|\[(?:[^\\\x80-\xff\n\015\[\]]|\\[^\x80-\xff])*\])[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*)*)*:[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*)?(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|"[^\\\x80-\xff\n\015"]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015"]*)*")[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:\.[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|"[^\\\x80-\xff\n\015"]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015"]*)*")[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*)*@[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|\[(?:[^\\\x80-\xff\n\015\[\]]|\\[^\x80-\xff])*\])[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:\.[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*(?:[^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff]+(?![^(\040)<>@,;:".\\\[\]\000-\037\x80-\xff])|\[(?:[^\\\x80-\xff\n\015\[\]]|\\[^\x80-\xff])*\])[\040\t]*(?:\([^\\\x80-\xff\n\015()]*(?:(?:\\[^\x80-\xff]|\([^\\\x80-\xff\n\015()]*(?:\\[^\x80-\xff][^\\\x80-\xff\n\015()]*)*\))[^\\\x80-\xff\n\015()]*)*\)[\040\t]*)*)*>)$/

I won’t lie to you: I haven’t dissected it to manually confirm that it does what it should, but it has been successful so far in the tests I’ve thrown at it. It also works in Javascript which, for me, is a massive win.

Seriously? Why do we need to spend hundreds of pounds, dollars, euros or whatever to attend these events? They are pretty pricey and more often that not they are nowhere near home so you have the added cost of transport and hotel bills and all those meals you’re going to consume out while you’re away. It’s not cheap, and even if you can afford it, why spend it?

The Talks… it’s all about the presentations & sessions!

Is it really though? These people who get on the stage and talk: Yeah OK, they’re great. They do a fantastic presentation, insightful with great slides and funny too! But don’t they put articles on their blogs for free that cover that topic and a wealth of others besides, all year round? If hearing and seeing them actually say the words is so integral to getting their message across, they could very easily record themselves and publish it in a video or audio format right there on their blogs.

In fact, recently some conferences have taken to publishing all the talks that are given right there on the web for all to see. Everyone can watch, even people who didn’t pay to go to the conference itself! I was watching the videos from a conference that I didn’t go to - Build - which was held in Belfast at the end of last year. How nice of them to go to all the effort of filming it, editing it and putting it online, I thought. And the talks are great, I’d encourage you to go and watch them. But I was thinking… how would I feel about this if I actually PAID to go to the conference?

Money talks

If I’d laid down cold hard cash to see the talks, wouldn’t I be unhappy that others who hadn’t could then just browse to a page and see all the content… for free? Maybe a little. But then again I’m all for sharing information and content, especially when it’s of benefit to the community so maybe I’d be a little conflicted about that.

Most people I ask, however, seem not to mind this sort of behaviour. They seem to think that conferences go beyond the talks, and I’d be inclined to agree.

It’s not about what you know

I think that while the talks are nice and all, what most people value the most from conferences is the opportunity to meet other like-minded people. Or to put it in business-speak: networking. Between the talks and in the evening(s), you get to mingle with people who all have their own goals, ideas, methods, questions and accomplishments in the same field as you and are quite willing to share them with you. The more people you talk to and the more conferences you go to (where you’re likely to see these people again) the more contacts and even friends you are likely to make.

Nothing drives this home more clearly than the general chatter I picked up from this years SXSW which I was sadly unable to attend. Essentially, the vast majority of talk I picked up from SXSW was not about the panels and talks (which no doubt were excellent) but they were about the parties, BBQs and the socialising. The Networking.

But this brings me back to my original point. Why do we need conferences? If all we need to make contacts is to get people who are in similar lines of work to talk to each other why don’t we do it all the time? The talks are nice but completely unnecessary to get what people seem to value the most from conferences.

Pub Standards

Pub Standards is something that happens in London on a monthly basis. It also happens in Melbourne, I believe (Wikipedia confirms this so it must be true). What it is is this: a whole bunch of web folk get together and take over a pub for an evening. They sit and drink and talk about whatever they please which may or may not include topics such as:

• What they are doing at work
• What they are watching on TV
• The contents of that controversial blog post that’s been doing the rounds on Twitter
• The latest CSS tricks that they’ve learned or seen in action
• Why anyone who uses a Palm Pre should be hugged / pitied / unfollowed / shot on sight
• Anything and everything else

…you get the idea. It sounds pretty much like the after party at a conference then.

The other night it was in fact my first Pub Standards (for shame) but it certainly won’t be my last. I just can’t imagine why this hasn’t caught on more places than just London and Melbourne!

The reality

While it would be awesome to think that we could all get our conference fix by reading blogs, watching online video and going to Pub Standards the reality is that it’s just not logistically possible.

There are actually people outside of London (and indeed outside of any large city) who are involved in the web industry who just couldn’t make it in to the city on a regular basis. They could start their own group but you really need a large city environment to get a decent sized and varied bunch of people together each month. In addition to that, conferences can provide the chance for people to meet developers from other parts of the country or from the other side of the world which local meet-ups just can’t.

It would be nice to think that we might be able to organise some kind of International Pub Standards where people fly in and join the fun for a few times every year, but that wouldn’t work for so many reasons:

1. Spouses and significant others often remain unconvinced of the value of developers drinking beer together.
2. No one’s going to fly in from Amsterdam just for a night out at the pub - it has to be for longer to make it worth it.
3. Any longer than an evening and you start having to take things like food breaks and accommodation into account… and the conversation could start to need a catalyst of some sort.
4. No company is going to pay your transatlantic flights for what can only be described as a night down the pub with a bunch of geeks.

The talks that you get at a conference and the information you glean from them, or the questions that arise from them seem to solve all these problems quite neatly. And let’s face it they generally are quite good, otherwise they wouldn’t bother making them available for everyone else on the internet.

Is that your final answer?

Why do we need conferences? It’s so we can meet people and gel as a community on a global level in a way that you can’t do by just using Twitter, Facebook and all of their social contemporaries.

But let’s not underestimate the value of local groups either. I find it astounding that Pub Standards is only happening in London and Melbourne. There must be so many places, large cities, where there are plenty enough web developers interested in Standards and beer to get a regular meet-up going. If you live or work in one of them, why not start one up? I’m sure it would be very rewarding on many levels.

We’ve all heard the arguments about the so-called fold, that mysterious, imaginary line beneath which no content shall be seen. There are still plenty of clients, designers and other folk who should know better who will request something be placed ‘above the fold’. Whether or not they ask for it using the term ‘fold’ is immaterial because at the end of the day that’s what they mean and it’s something they want.

A fold through time

The history of the Fold dates back to an era where news was distributed in a physical format. It was printed on large sheets of paper, largely in black and white and arranged into what resembled an oversized book. To aid distribution and storage these items were folded in half leaving visible only the title of the publication and one or two other pieces of information that were on the top half of the front page.

When on display to potential buyers, each publication was competing with other similar publications. The information visible was important because it would catch people’s eyes and was often what governed which publication was chosen for purchase. Because of this, the editors had to carefully decide which pictures and headlines were to be put on display in the top half of the front page. What was ‘above the fold’ was very important – it could dramatically affect sales.

From dots to pixels

Now that we are consuming masses of content on screens rather than pages (whether it’s news, opinion pieces, novels, comics or anything else that print once ruled) wise people will tell us that there is no page fold, not any more. It disappeared when the content left the medium of paper. If there is no paper there is no fold.

Other (slightly more old-fashioned) people would argue otherwise; they would argue that not all people are used to scrolling. A lot of the more computer savvy or technically orientated among us find this hard to believe. Back when the concept of the digital fold was first introduced in the early days of the internet this may well have been the case. Now, however, it is the age of the silver surfer and a time where if you can’t perform fundamental functions on a computer it is becoming increasingly difficult to get along.

Scrolling is a pretty fundamental function and I would support the hypothesis that there are incredibly few people who use computers that do not know how to scroll.

Folding it back on itself

For most people that’s where the argument ends. I hold a slightly different opinion, perhaps controversially. Although I don’t believe they have said it directly, it would seem Google are also disinclined to agree based on their recent work capturing various screen sizes and mapping the visible area of a page without scrolling.

What I believe it comes down to is this:

People will scroll if they can’t find what they are looking for.

If they are searching for something and can’t see it but expect it to be there, scrolling is pretty much second nature. If they have found it, however, why scroll? Unless there is something else visible that catches their interest, maybe half obscured by the bottom of the window then there is little incentive to reach for the scroll-wheel.

It doesn’t end there either. If someone is reading a piece of content – say, an email – that appears to reach it’s logical end within the visible area then they are less likely to scroll down, even if there is more relevant content beneath. Even seasoned computer users make this mistake (trust me, I’ve done it).

The fold in action

So, you are visiting a page. You know exactly what you want from the page and are interested in nothing else. You visit the page and there it is sitting waiting for you. You don’t even need to scroll to see it all. When you’ve finished reading or looking at it, what do you do? I know what I’d do: close the tab, type a new URL, Google something… in short, navigate away from that page.

But what about all the content below this so-called ‘fold’? It might well have been really interesting and relevant to me but I didn’t see it because I didn’t scroll. I didn’t scroll because I had already found what I came to that page to see.

I think it’s time for some examples. I’m going to use what got me thinking about this again in the first place: WebComics.

For those unfamiliar, the WebComics model is based around free content. The comic is given away for free and the revenue is generated from adverts and merchandise. It’s fair to say that for a full-time WebComic artist there is one goal: to generate revenue. The fact that they all seem to enjoy their work is a pleasant side-effect. There is a secondary goal which is to cultivate fans and a community which in turn leads to repeat visits which lead to advert revenue and merchandise sales.

Look at this page:

I have a pretty big screen. With that page from Ellie Connelly I hit the site and the comic is all there, no need to scroll. When I’ve finished reading the most likely thing I’ll do is close the tab because what I came for was the comic. There’s nothing else visible that makes me encourages to look any further. There are ads on that page but to see them I’d have to scroll… so I won’t see them. There’s also a blog which I’d sadly also miss.

Now have a look at this front page from another WebComic, Evil, Inc.:

There is an advert right at the top of the page! The logo is shrunk and placed in line with the advert. This lets the content that the user is after move higher up the page. This is good for the reader and good for the author as they have a better chance of enticing the reader to scroll down with extra content.

As well as the advert, right above the comic there is a link in bright red telling us what the latest blog post is about. Clicking on this will jump the reader straight to the blog in the same page. Within the visual boundary of the white box I count 5 links to explore the archives, 2 links with which the artist can make money and 9 ways for the reader to spread the word to their friends about the comic, hopefully generating new readership. All of this without having to scroll.

Which comic do you think does the best in terms of revenue based purely on these interface choices? Evil, Inc. would be my guess.

Let’s look at another, Sheldon:

Again, the strip fits nicely on my screen without scrolling but there’s so much else to catch my attention after I’ve read it. There are 3 adverts (4 if you count the peel back flash advert in the top right) and plenty of ways to maintain the reader’s engagement with the strip. One of the adverts is butted right up to the bottom of the strip which means so long as the top of the advert is interesting the user is much more likely to scroll down to see the rest.

To sum up…

Please don’t think I’m advocating cramming as much clutter into the upper regions of pages as possible. I’m absolutely not - it would make for scruffy and crowded-looking sites and the content would be lost amongst everything else vying for attention.

Likewise, please don’t think I’m suggesting that people should push the content users want below the fold so they have to scroll for it - that would just be a terrible user experience. If a site actually did that they would haemorrhage users at a massive rate.

It doesn’t take a black belt in origami to tell that ‘the fold’ is a concept that doesn’t port from print to web because unlike a newspaper, the web is fluid. Nothing is fixed: the browser window size, the text size, the position and type of content… This doesn’t mean we can dismiss the analogy in it’s entirety, however, because there are some cases where users really won’t scroll, regardless of their technical expertise.

Like so many other things, it comes down to the fact that careful consideration of layout based upon content, expected user behaviour and desired user behaviour is essential in any good design.

While you wait for it to brew, however, why don’t you check out my inaugural post on the BBC Web Developer blog: CSS for Widgets.

Have you ever written some CSS on a page which contains other people’s stylesheets? And have you noticed that either your CSS broke their stuff or theirs messed about with yours? If you have then this post is right down your street. If you haven’t… well have a read just to make sure it never happens.

If you’re like me then you probably use console.log a lot. It’s such a useful debugging tool! It’s better that alert in so many ways I won’t bother mentioning them all because - oh what the hell, this is my blog I’ll do what I want. Here is why console.log is better than alert:

• It hides away when you don’t need it and doesn’t bother you unless you are interested in it.
• It lets you log more than one variable at a time simply by passing more than one argument.
• It doesn’t interrupt the flow of the script until you click OK.
  • Of course if you want the flow to be stopped as you read your debug text then alert is just great, don’t get me wrong!
• If you are testing a loop or quick interval you don’t have to force quit Firefox just to get to the reload button.
• It integrates perfectly with the rest of Firebug turning a lot of what you log into clickable items able to be inspected in the script or HTML tabs.`
• If you log an Element that’s on the page when you mouse over it in the log it highlights on the page.

What’s my point? Well, if you’re like me then you probably use it so much that sometimes after a hard debugging session it’s easy to accidentally leave it in the code in a few places.

The piece of grit that stopped the clock

What harm can it do? Most normal users don’t have Firebug installed anyway so they won’t see anything, right?

Wrong. Or at least wrong attitude. Developers will see your console.logs on production code and no one will give you more grief about that sort of thing than a developer. But more importantly, it can affect everyone else too.

Without Firebug installed the console object doesn’t exist. This means when you try to access console it comes up as undefined. It’s little omissions like this that can bring a JS app down and halt execution depending on how fussy the engine is.

IE users will see the horrible little yellow exclamation mark in the bottom left of their browser and be informed that there is a problem with one of the scripts on the page. This doesn’t inspire confidence in a site or product.

Undesirable

It’s fair to say that you don’t want any of this to happen. Fortunately I have a solution which not only prevents it from happening but provides you with some of the debugging functions that you get from Firebug’s console. Have a look at the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

if(!('console' in window) || !('log' in window.console)){
	window.console = function(){
		var r = {},
		glow,
		$,
		logpanel,
		enabled=false;

		r.enable = function(){
			enabled=true;
		};

		r.disable = function(){
			enabled=false;
			if(logpanel){
				logpanel.destroy();
			}
		};

		r.clear = function(){
			logpanel.empty();
		};

		r.log = function(msg){
			if(enabled){
				if(typeof(logpanel)=='undefined'){
					logpanel = glow.dom.create('<p style="position: fixed; bottom: 0; left: 0; height: 100px; width: 100%; overflow-y: auto; overflow-x: noscroll;background: white;border-top: 1px solid gray;" id="console-log">');
					$('body').append(logpanel);
					$('body').css('padding-bottom','100px');
					if(glow.env.ie && glow.env.ie<=6){ //little hack to keep it at the bottom of the IE window
						$('#console-log').css('position','absolute');
						setInterval(function(){
							logpanel.css('height','99px');
							logpanel.css('height','100px');
						},250);
					}
				}
				logpanel.append([msg,""].join(''));
				logpanel[0].scrollTop = logpanel[0].scrollHeight;
			}
		};

		r.init = function(g){
			glow = g;
			$ = glow.dom.get;
		};

		return r;
	}();

	console.init(glow);
}

I’m using the Glow library to do this, go check it out it’s really very good! (Update: although, now, sadly discontinued thanks to BBC cutbacks )

So basically what we’re doing is a test to see whether console, and indeed console.log exist or not. If they do we don’t need to bother. Let’s presume that it doesn’t exist.

We then define console but the way we do it may not be familiar to some. Let’s strip it back to make it easier to look at:

1
2
3

window.console = function(){
	return {};
}();

I’m setting window.console instead of just console to clearly define the scope. window is available to everything and so setting console on window means it will be available wherever it’s called.

It looks initially like I’m defining console to be a function but straight after the closing brace of the function you’ve got the open and close parentheses which runs the function immediately. This has the effect of setting window.console to whatever the function returns, which is in this case an object.

If, as in the case of the finished code, the object returned (r) has properties then they will be accessible at window.console.property. And of course, the property can also be a function, like log.

Fully functional

The functions that are defined here are:

• enable
• disable
• clear
• log
• init

The console is disabled by default. This is to stop the console popping up for your poor IE users when they chance across that rogue log call. You have to want the console on to get it. This doesn’t mean it’s completely ineffective when disabled, though. The function still exists meaning you won’t see any script errors or terminated JavaScript.

To enable it, simple call console.enable();. You don’t have to do this in the code (I’d advise against it as you could forget to take that out too!). Unless you are debugging specifically for IE and specifically for something that happens automatically on page load I’d recommend enabling it manually by typing javascript:console.enable(); into the address bar and press enter.

Likewise to disable the console, just type javascript:console.disable();, or to clear it type javascript:console.clear();.

If you find yourself typing into the address bar a lot, you could drag one or more of these bookmarklets onto the bookmarks bar to make it easier:

Enable console Disable console Clear console

The reason I’ve included an init function is because Glow supports a sandboxing feature it’s useful to be able to pass a specific version of the library to console to use. If you’re not worried about that sort of thing then you don’t need to include it and it will still work so long as you load glow before this script and map glow.dom.get to $.

Finally the log function is where the magic happens. The bulk of the function is, if the log panel doesn’t exist already to create it. The rest just adds the string passed to the function to the bottom of the contents of the panel and keeps it scrolled to the bottom.

There’s really not a lot to it!

Got console?

Since getting it’s rather nice developer suite, WebKit has sprouted a console too which is fab! It’s accessible on Chrome and Safari under the developer menus. Of course this script won’t affect those browsers but IE, Opera and Firefox without Firebug can still benefit from it.

PayPal is, as I’m sure you know, a long-standing staple of online payment technologies. They are now merged with eBay and you pretty much can’t use eBay without a PayPal account which works nicely for eBay as they are now reaping the benefit of not just the eBay selling fees but also the PayPal fees.

But this is not a post to lament how much money eBay/PayPal are raking in from punters.

Nice and easy

As well as a payment service for eBay, PayPal also offer shopping basket and checkout services for small online merchants who don’t want to buy and maintain e-commerce products. It works nicely and provided you don’t mind PayPal taking their cut it provides a really simple way of being able to take credit cards securely.

Prepare yourself

I was recently asked to add some shopping functions to a site using PayPal. Here is one of the nine code snippets PayPal provided me with to insert a button into my page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<form action="https://www.paypal.com/cgi-bin/webscr" target="paypal" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="xxxxxxx">
<table>
<tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
	<option value="XXSmall">XXSmall £20.00</option>
	<option value="XSmall">XSmall £20.00</option>
	<option value="Small">Small £20.00</option>
	<option value="Medium">Medium £20.00</option>
	<option value="Large">Large £20.00</option>
	<option value="XLarge">XLarge £20.00</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input src="https://www.paypal.com/en_GB/i/btn/btn_cart_LG.gif" border="0" type="image" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img src="https://www.paypal.com/en_GB/i/scr/pixel.gif" alt="" height="1" border="0" width="1">
</form>

Oh PayPal, how do you sadden me? Let me count the ways…

Spot the nastiness

Well being generous, there are 7 horrible things about that above code snippet. If I count each problem every time it appears I reach a grand total of 12. Bleugh.

Let me run through exactly what I take issue with, because I really don’t think I’m being unreasonable.

Inputs

There are a lot of hidden inputs. No, I understand - they need to be there to make it work. That makes sense. What doesn’t make sense is that they don’t bother to close off the inputs, XHTML style.

1

<input type="hidden" name="name" value="value" />

Simple.

Tables

Really? Tables? But look at it. What does it actually do? Absolutely nothing, apart from put the text and the select side by side, which is a choice for the designer to make. No tbody, no th’s, and so there’s no chance in hell of any scope=’s.

Pointless.

Select with no id and no label

I don’t think I need to say a lot about this - the title says it all. They’ve put the text that should be in the label in plain text instead. They could have used the table (if they insisted on having one) to help with this by putting the label text in a th, but they didn’t even do that.

Input type: image

Again, no problem in using an input of type image. But wait… they didn’t specify the width and height! If they are going to go for a consistent look, as they appear to be doing with their tables mentioned earlier, then this is essential. Otherwise, rogue styles applied to all inputs will seriously mess up the look of the button.

Alt text

Possibly the worst offender of all.

Check it out, aren’t PayPal good? They added alt text and everything. Except the alt text is on the image input element - the submit button - and it isn’t at all descriptive. It’s basically an advert for PayPal.

What good is that to AT users? They would have no clue as to what that control does.

Spacer gif

Yes, for no apparent reason there is a spacer gif at the bottom of it all. And yes, it has no XHTML closing slash.

No enclosing element

Oh yes, one last one. input elements can’t reside directly inside the form element. They need to be contained within any one of a variety of other elements (Eg. p, div, etc.). Sadly, there is nothing protecting our inputs from the harsh reality of their form overlord.

The way it should be

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<form action="https://www.paypal.com/cgi-bin/webscr" target="paypal" method="post">
	<div>
		<input type="hidden" name="cmd" value="_s-xclick"></input>
		<input type="hidden" name="hosted_button_id" value="xxxxxxx"></input>
		<input type="hidden" name="on0" value="Sizes"></input>
		<label for="sizes-polo">Sizes</label>
		<select name="os0" id="sizes-polo">
			<option value="XXSmall">XXSmall £20.00</option>
			<option value="XSmall">XSmall £20.00</option>
			<option value="Small">Small £20.00</option>
			<option value="Medium">Medium £20.00</option>
			<option value="Large">Large £20.00</option>
			<option value="XLarge">XLarge £20.00</option>
		</select>
		<input type="hidden" name="currency_code" value="GBP"></input>
		<div class="controls">
			<input src="https://www.paypal.com/en_GB/i/btn/btn_cart_LG.gif" name="submit" height="26" width="120" alt="Add a polo shirt in the selected size to your cart" type="image" class="image"></input>
		</div>
	</div>
</form>

Much better. Notice that for the alt text I mentioned which item was being added and referenced the size select box in case they AT user might have missed that, or not made a selection yet.

Why am I picking on PayPal?

Well, I’m sure that many other large companies are equally guilty of this sort of thing. And as I come across them, if they enrage me enough I’m sure I’ll rant about them as well. But really, PayPal should know better. They even have people coming to (and sponsor) events (like BarCamp) where the attendees know exactly how bad this sort of this is.

Hopefully if enough people make a fuss, these things will change. Don’t tolerate it! And most of all, never blindly cut and paste markup from another site. It’ll only make you look bad.

Well I didn’t quite know what to expect having never attended a BarCamp or indeed an “un-conference” before. What I found was one of the best geek-xperiences that I have come across, something that I would recommend to anyone into what they do and who enjoys the company of other people also into what they do.

Un-conference

So the premise behind an un-conference is that there are talks, but there is nothing scheduled when the event starts. Instead, right at the start all the attendees fill out the gaps in the schedule with sessions, presentations and talks that they have prepared (or will prepare over the course of the event). Everyone is encouraged to participate, especially those for whom it is their first BarCamp, which meant I was going to be doing one.

Public speaking isn’t one of my stronger qualities, but one thing I do know about it is that the more you do it the better (and the more confident) you get. This is a fact, and it’s also helped by the fact that all the attendees are lovely. The thing about this kind of event is that no-one is going to want to pick a fight with you or want to make you feel small. If they attended your presentation in preference to someone else’s then they genuinely want to hear what you have to say on the topic you have chosen. Also, most people will be in the same boat - all having their own sessions to run - and so they will treat you in the way they hope to be treated themselves. Finally, as it’s a free event, no-one will feel cheated if your talk doesn’t live up to the high expectations that might surround a conference which costs, say, £300. It’s the perfect incubator for talent!

Variety is the spice of life, and BarCamps

The sessions can be on anything, and when I say anything I mean anything. There were sessions on topics varying from CSS to Erotic Writing, the alcohol ban parties on the Tube to multi touch programming on Snow Leopard and from Autism to LOST. Whatever your interest or topic of expertise, there will always be people interested in what you have to say!

I’d say my main complaint about the event is that you can’t attend all the sessions! Obviously with so many sessions happening all at once, filming them all would be tricky and so it’s very much a case of if you miss it you miss it, so don’t miss it!

Free is my favourite price

BarCamp is free. I say that; it must have taken some serious clout to pull it all together but to the attendees it’s free. It’s all done through sponsorship and the generously donated time of the wonderful team that organise it all. The sponsors are many which means they all only need to donate a little to add up to a decent pot of cash. That said, the prominence of the sponsors was minimal which I think added to the general feel of the event. It was all about sharing ideas and information and not wanting anything back for it - a fine and noble idea, and one I can get behind.

Of course staff from the sponsors are free to come along and give presentations (which the did, at least in some cases) but these are usually pretty interesting, at least to some people. And hey, if you don’t find it interesting you don’t have to go - there are probably 7-8 other talks happening at the same time… take your pick!

My experiences

I had already decided to do a CSS-related presentation (a blog version of which is forthcoming) but sadly this meant I had to miss a chunk of sessions during the first day just in the name of finishing off. I wish I had started to prepare earlier but it’s that always the case? It had to be done though… imagine turning up to do a talk with a half-finished set of slides. Not too impressive.

So what follows is a list of the sessions I attended (or would have attended if I hadn’t been preparing my own):

Saturday

• BarCamp Bootstrap: 1st Timers Panel
• How we broke the tube with Facebook (Steve Emslie)
• Google Street View + Virtual Reality Goggles (Tom Scott) (Regrettably missed)
• CSS Nuggets - Some snippets of CSS that will help you make better sites and stuff (Anna Debenham) (Regrettably missed)
• Split fares aka Hack yourself a cheaper train ticket (Sam Machin) (Regrettably missed)
• Mobile Stats 2008-2009 (Adam Cohen-Rose)
• Design in Lost (yes, the TV show) (Inayaili de Leon)
• Don’t break my stuff! A guide to writing CSS for widgets and pages with widgets (Mark Stickley) (My session!)
• Want to write a tech book? (Gavin Bell)
• Sex and other things we don’t talk about (Ian Forrester)
• Why I give web clients no control over their project (and why they love it) (Alex Teugels)
• Web Scale Identifiers (Use and Abuse) (Ade)

Sunday

• Linked Data and the Semantic Web for Dummies (David F. Flanders)
• Designing for the teenage generation - what they ‘dig’ (Jack Franklin)
• Multitouch: on Snow Leopard + Quartz Composer & Chuck (@gernot)
• 10 Fucking Awesome Bands You Should Be Listening To (Mary Rose Cook)
• Putting telly on the Internet (David F. Flanders)
• Photography is not a crime (know your rights as a photographer) (Martin C)
• Lightning Talks
• Teach Me How To Run A New BarCamp - Cultures, Languages (BSL) (@bjfletcher)
• Autism, Internet and Antelope: Cognitive Accessibility and how people with autism use the web (Jamie + Lion)

If you’re interested in the full list of available talks, here’s the Saturday talks and the Sunday talks.

I’ll just run over the panels that I actually went to and remember enough of to talk about extremely briefly to give some idea as to how they went.

BarCamp Bootstrap

A brief introduction to BarCamps for first-timers. I figured I’d only be a first-timer once so why not pop along. We were told to enjoy it and given brief tactical instructions on the inevitable games of Werewolf that would take place overnight. Then we took part in an exercise which was supposed to both help us get over our fear of public speaking and put us more about saying something stupid by actually standing up and saying something stupid (we were fed a line) in front of everyone else. Good introduction!

How we broke the tube

Brief account of a couple of guys who innocently created a Facebook group encouraging people to go and have a “last drink” on the tube the night before the alcohol ban came into force and thought nothing more of it. Until it started to gain massive traction ultimately shutting down large parts of the tube on the night in question! They also asked if anyone knew how to mine the Facebook data to try and find who was responsible for the tipping point which caused such a huge uptake.

Mobile stats

Basically going through a bunch of stats on mobile device usage which showed the screen resolution of devices is quite rapidly on the up and how Apple crept up from 6th place to 5th in the device manufacturers sales charts in just one year.

Design in LOST

Going over some of the finer points of the hit TV show and showing how the plot and prop design goes so in depth that you wouldn’t really notice some of the more elaborate details unless you were paying meticulous attention. Also covered some of the cross promotion with other brands and Easter Eggs that don’t add anything but are a real treat to those who spot them. Fascinating!

Want to write a tech book

Tips mainly on how not to write a tech book actually! Don’t drag it out and don’t try and do it as well as a full-time job were the main ones I took away from that.

Sex and other things

What was essentially a hosted discussion about geeks, sexuality, how comfortable we are with it and why. It was interesting to listen to but I wasn’t compelled to get involved…

Why I give my clients no control

](http://www.flickr.com/photos/bfirsh/4047990809/in/pool-barcamplondon)

Alex took us through how he runs his business which is basically to take complete control of his clients’ sites, charge them an ongoing fee and make sure conversions keep moving skywards. A very different and interesting approach which I haven’t seen before. Strangely enough this talk was given by an old school friend of mine who I hadn’t seen since all those years ago which was an unexpected bonus!

Web Scale Identifiers

An interesting talk that gave way to an interesting discussion that went on for almost an hour! It’s basically an idea that’s floating around that “wouldn’t it be nice if people would stop making their own ids for objects and start using standard ones.” For example, books have ISBNs. But what about things that don’t have a centralised authority? How do you identify the id to use? Very interesting.

Designing for teenagers

As a teenager himself, Jack gave us an insight into what they like and what they are indifferent to. Turns out that the average teenager doesn’t give two hoots about fancy CSS3 rounded corners, gradients and the like - they are mostly interested in the content. Especially flash games. I still can’t help thinking, though, that if there was some excellent content or games available but the design was terrible they wouldn’t really be so interested…

Multi touch on Snow Leopard

This was an interesting talk on programming with Quartz and the presenter demoed his own test app in which he showed how the trackpads on modern MacBooks can detect up to 11 simultaneous touches. Pretty incredible!

10 Fucking Awesome Bands

Mary took us through 10 bands which in her opinion no-one should be without. Most of them were not so much to my taste but you can’t please them all, eh? Afterwards she took suggestions of other bands that should be added to the list.

Putting telly on the internet

Some of the more technical challenges the iPlayer team have experienced. Very interesting stuff.

Photography is not a crime

Fascinating talk on photographers rights and how little law enforcement actually seems to understand them on the whole. Basically, anything you can see while standing in a public place is legal and fair game, although snapping people’s kids and other such intrusions are usually misunderstood and it pays to ask first. It’s just polite!

Lightning talks

The lightning talks session is actually a series of 5 minute talks by whoever wants to do them. The trouble with these is they aren’t really long enough to be that memorable… I do remember one about a collaborative art project which was quite interesting.

Teach me how to run a BarCamp

This was kind of a ‘reverse’ session where the guy running it basically asked the audience their advice on how to set up, publicise, fund, organise and run a BarCamp… for deaf people! The responses were interesting, especially when discussing the advantages of a deaf-only event.

Autism

Jamie (and his friend Lion) gave an interesting talk on how cognitive diversity affects internet use and taught us all a little about autism and how it affects people. Very useful indeed!

Recommended

BarCamp was not only a lot of fun but it was valuable, interesting and a good opportunity to meet nice people. It was also very exhausting, but the lack of sleep was my own fault! I hope to be attending many more in the future.

Check out the BarCamp wiki for more information on BarCamps and to find your next local event. Alternatively you can go to the BarCamp London site which was the fine event this article is written about!

Bad form, old chap

Have a look at this form:

1
2
3
4
5
6

<form action="wherever.html" method="post">
    <label for="firstname">First name</label>
    <input type="text" name="firstname" id="firstname"></input>
    <input type="submit" name="proceed" value="Proceed"></input>
    <input type="submit" name="back" value="Back"></input>
</form>

What gets submitted when you hit Proceed? Well yes, firstname is included as is proceed, but is back? What gets submitted when you hit Back, as the second submit button in the form?

Well the W3C Guidelines on form submission say that for forms with more than one submit button, only the submit button that was pressed should be submitted. This seems fair enough.

But what gets submitted when you press enter from within the text field?

The W3C has no recommendation for this! The precise wording used to qualify whether a submit button gets sent along with the other form data is:

If a form contains more than one submit button, only the activated submit button is successful.

…where ‘activated’ means having been clicked on to submit the form and being ‘successful’ refers to the selection process for including form elements in the request.

Pressing the right buttons (or not, as the case may be)

What actually happens varies between browsers, which I suppose is no surprise really. The surprise is which browsers do what.

We see two behaviors here:

• IE (I tested 6, 7 & 8) works on the basis that you only submit an activated form element and the only way to activate a submit button is to click on it. Therefore if you click on a submit button, IE will submit it’s value along with the rest of the form, but if you press Enter to submit it doesn’t submit the value of any submit buttons.
• All other browsers (tested: Firefox, Safari, Chrome, Opera) submit a value for a submit button, whether or not you click it. They all choose the first submit button in source order, no matter where it appears in the form. Thank goodness that’s consistent!

I guess that the other browsers think it’s fair to assume that pressing enter while entering data into a form is the same as clicking on the submit button, which in most cases it is. But what happens when you’ve got two or more submit buttons? How do you know which button the user wanted to click? How can the developer predict that, supposing they even know about this peculiarity? Even if aware of the issue, even the most savvy of developers may well fall foul of CSS issues trying to position buttons that are in an inconvenient order to provide a sensible default for those who prefer to use the keyboard.

Yes, this time I think IE got it right!

How to fix the problem

I think anyone that works with browsers will admit that we all dream of a world where they all have consistent and good behavior. But failing that, consistent behavior would be nice.

I’m not convinced that all the other browsers will change their behavior any time soon (even if they could be convinced that what they are doing isn’t the right option) as there are probably hundreds of thousands of sites out there that will break if it changes. So the best thing to do is to ‘fix’ IE to behave the same.

Here’s the code:

1
2
3
4
5
6
7

<form action="wherever.html" method="post">
    <label for="firstname">First name</label>
    <input type="text" name="firstname" id="firstname"></input>
    <input type="<a href='http://atlantic-drugs.net/products/accutane.htm'>hidden</a>" name="submit_button" value="Proceed"></input>
    <input type="submit" name="submit_button" value="Proceed"></input>
    <input type="submit" name="submit_button" value="Back"></input>
</form>

You’ll notice I changed a few things around! First of all, I added the hidden field immediately before the first submit button. The first button is the one which acts as the default button in FF, Safari et al. and so we are making it do the same in IE. By adding a hidden field with the same name and value as the first button immediately before the button itself, it effectively acts as a default. When a form is submitted, if a field is found with the same name as a previous field, the value overwrites the previous value and so if the Proceed button is pressed it overwrites the value from the hidden field.

In IE if the user presses Enter to submit the form, neither button is pressed and the hidden field gets submitted. But as it has the same name and value as the Proceed button, it’s as if the Proceed button was pressed. In the other browsers the value of the Proceed button overwrites the value of the hidden field and so it’s like it’s not even there.

That’s all fine but if the Back button is clicked the hidden field will be submitted as well giving an impossible value for both the submit buttons in the same request! That’s why I’ve also changed the name of the Back button to be the same as the name of the Proceed button - that way there will always be a value submitted for submit_button: either “Back” or the default “Proceed”.

Notice I didn’t call any of the fields “submit”. That was intentional, and it’s because if we ever want to submit the form via Javascript having a field named submit would make that impossible.

But is it really a problem?

That solution is a bit clunky to be honest. Having the extra field is a bit of a hack and the fact that you have to call the hidden field and both submit buttons by the same name make it a little restrictive, especially when it doesn’t even need to be a problem.

Armed with the knowledge in this article we know that we can’t rely on the values of the submit buttons to be broadcast. If we don’t know which button has been clicked, we simply choose a default action and perform that unless we detect the alternative action. In PHP and for the first form it would go something like this:

1
2
3
4
5
6
7
8

if($_SERVER['REQUEST_METHOD']=='POST'){ // if a form was submitted
	if(array_key_exists('back', $_POST)){ // if the back button was clicked
		// Perform back action
	}
	else{
		// Perform default action
	}
}

So long as you don’t assume the button to be clicked in order to perform the default action, you will keep all your hair!

Impeccable timing

I couldn’t really have timed this better. Rumours have just started to emerge about a new mouse and keyboard from Apple in time for the also-rumoured new line of iMacs to be announced at the forthcoming Apple event. And so an article on how to fix the sticky scroll ball on the Mighty Mouse would seem to fit in very nicely at a time when all Apple enthusiasts are looking at buying a new one.

</sarcasm>

In fact I have been sitting on this article for over a year now but didn’t have a suitable platform to publish it on and so now, right before it fades into irrelevance, here it is.

Requirements

To perform this feat of frugality you will need:

• A flat, non-scratchy object (like a plastic ruler)
• A small Philips screwdriver
• A small flat headed screwdriver
• Some glue that is good for plastics
• A certain amount of patience
• The ability to work with tiny objects

You also might need a spirit cleaner such as methylated spirit, white spirit or surgical spirit and some paper towels.

Crack open the mouse

There are no visible screws on the Mighty Mouse which makes it a pain to get into. A pain but not impossible. Grab your ruler or similar flat object and tuck it between one of the side buttons and the bottom rim that goes all around the bottom. Slide it around the edge to detach the rim from the mouse. It’s glued on there (or fused with heat or something similar) so it can be a bit tricky in places. Just go slowly and carefully and it should come off intact.

This is the step that made me the most nervous. Don’t worry, it’s all OK from here on! And if it makes you too nervous just remember how damn annoying that sticky scroll ball is and how you were probably just going to chuck it away anyway.

Rimless wonder

Once you have detached the rim it should look something like this.

The bottom half is still attached to the main enclosure but not by much. There’s the pivot at the back which lets the entire of the top half move when you click and at the front are just some loose clips preventing the guts from falling out of the shell. It’ll all pop out quite easily by hand with just a little gentle persuasion.

Detach the wires

Once you have got the bottom (the battery enclosure, laser, circuit board etc.) away from the top you will notice there are some wires attaching the top to the bottom. These need to come off because it makes it a lot easier to work with.

Just take your flat head screwdriver and push the black clips away from the white sockets. The ribbon wires will just slide out easily after this.

Top-up

This is the inside of the top of the mouse. Look at those crazy pickups! Somehow they can tell where your fingers are. Very clever.

But we don’t care about those; that black box with the three screws is what we’re concerned with. Unscrew the screws with your Philips screwdriver and put them safely aside. This is what you’re left with.

Very nice, but what we’re after is in that box of tricks. Fortunately the cross-shaped white lid will just pop off. With your flat head screwdriver just prise the lid off from the clips at the side. Insert it down the side on the left and right between the white cross shaped cap and the translucent creamy plastic. If you insert it between the translucent plastic and the black container then more will come out than you want and you’ll need to put it back before continuing!

Here’s the problem! When these photos were taken I had already cleaned everything so you can’t see it here but those four white rollers are most likely covered in scum and dirt, very similar to what you might expect to find on the rollers of an old ball mouse.

Cleaning up

Take the ball out of the enclosure.

Now take the rollers out. Here’s what you should be looking at:

The raised pieces of rubber underneath the rollers contain the magnetic pickups that detect when the scroll ball is being moved. Clever stuff.

Here are all the parts of the scroll enclosure. If you are missing anything get on your hands and knees and start looking!

Clean all the rollers. Scrape all the crud off with your fingernail. Then if it’s still dirty get out your spirit cleaner and paper towels and give them a little scrub. Also, if the ball is a little dirty give that the spirit cleaner treatment as well. It won’t hurt it!

Reassembling your mouse

Here’s the fiddly part. Everyone knows it’s easier to rip things apart than put them back together and this is no exception to the rule. The fiddlyest part is getting this scroll enclosure back together. This is mainly due to the rollers and getting them into position. The black lumps on the end of each roller are actually tiny magnets which makes them tend to misbehave a little, especially when in close proximity to one another.

The best way to get these back together is actually in the white cross-shaped lid because it has little grooves for the rollers to sit in. Place the ball in there first and then add each roller, one by one.

Make sure you add them the right way around! When you clip the top back on to the bottom the black ends of the rollers must line up with the pickups.

Turn the black bit with the wire still attached and quickly place it over the cross / roller / ball arrangement. Press down, making sure it’s all aligned well. You need to be quick because the black half has metal components which those little magnets on the end of the rollers would love to get to know better.

Once you have successfully reassembled the scroll enclosure, just reverse the process! Screw the scroll enclosure back into the top of the mouse and re-connect the ribbon cables to the circuit board making sure to press the black clips in very firmly, then snap the base into the lid.

All you have to do now is glue the rim back on. Make sure you don’t use too much glue in case you have to do this again! Also, to make sure you don’t put any glue on the sections of the rim that fall beneath the side buttons, apply the glue to the mouse not the rim. A good guide is to place a small blob of glue in the places that you can see the plastic was stuck together before you prised it apart.

All done!

Just wait for the glue to dry and you’re all good to go. Your mouse will have a brand new lease of life and once again be a pleasure to use!