Real artists ship.
Steve Jobs

It doesn’t matter how long you’ve spent working on something, or how clever you’ve been with the design or development if it’s sitting on a folder on your computer rather than in the hands of real people. I swore to myself that the next idea I had for a side project, I’d actually get off my ass and do it, however long it took with the little spare time I have, and I’d get it shipped as quickly as possible. (Shipping an imperfect, unfinished product isn’t quite what Steve meant, but hey…)

The idea

Every now and again on my Twitter stream, one of the people I follow gets a games console and their friends reply back with their gamer handles so that they can connect on these systems and perhaps play online. I also send out my XBox Live gamertag every now and then to see if any of the people I follow also play the same kind of games as me so that if we’re ever online at the same time, I can jump into a game with them and play with some familiar faces. It gets wearing to constantly ask your twitter followers for their handles, so I figured I could build something to do this for us.

Idea for a side project, Twitter app where you add your Xbox/PS3/PC gamer ID’s and see the ID’s of the people you follow.

— Stanton (@stanton) January 6, 2012

After sending this tweet I had quite a few replies from interested parties, so as Richard Branson would say, I thought ‘Screw it, Let’s do it” and got to work. Knowing that my time was limited I decided to develop this rapidly, to a minimum feature set, and with little to no design work more than a basic wireframe. The idea was to get it in people’s hands as quickly as possible; If it takes off I’ll devote more time to it, if not then I’ve not wasted months of work.

Minimum Viable Product

• User Add/Edit/Sign in
• Twitter oAuth
• XBL & PSN handles
• Add/Remove handles
• List handles of Twitter friends
• Ask user to post link to their friends

After scribbling down the ‘Minimum Viable Product’ feature set, I grabbed the latest version of CakePHP and 320 and up and got to work integrating with Twitter, I had to modify the OAuth Consumer component for the latest version of Cake, but with the magic of GitHub I was able to push these changes back to the original author to be integrated into future versions. Within a few days I had a working prototype which I took to the New Adventures conference to get some feedback on while chatting with people at at the pre-party.

One of the hardest things was making the conscious effort not to spend too much time on the design, It’s ingrained in our industry and culture to put the design of a new product under the microscope and make snap judgements on the quality of a service based on it’s pixels but with the constraints I’d placed upon the project, design would have to come later so I threw some very simple colour and layout over the top to at least make it palatable for the users. and after a few evenings of steady coding I checked out the code onto the production server and threw the link onto Twitter.

twig.gr

So twig.gr went live, and now we play the waiting game and to see how it goes, I’m quite happy for it to grow slowly and organically especially since I don’t have the means to conduct any kind of social media/marketing campaign for it, I think it’s one of those kinds of products that works truly by word of mouth. If you add yourself, you’re likely to tell others to sign up so that you can find them also. If it grows in popularity then I’ll devote more time to it both from a feature and design point of view, if not, then at least I shipped!

The cakephp_2.0-dev branch was throwing the following error for me when trying to use the Twitter OAuth API.

The relevant changes are available in my cakephp_2.0.5 branch on Github.

Changelog

• Rename directories to match new conventions.
• Change createConsumer method to use $className rather than $fileName to fix ‘Consumer twitter_consumer.php not found!’ exception.
• Use App::uses instead of App::import to fix ‘Fatal error: Class ‘HttpSocket’ not found…’ error.

Get the code

https://github.com/Stanton/oauth-consumer-component/tree/cakephp_2.0.5

Multiple image sizes

We’ve traditionally been hampered by the fact that Jadu doesn’t yet have the ability to generate multiple image sizes from a single base image so if I wanted to have a large document level image, and a smaller thumbnail within a list view, I’d either have to resize with CSS which results in degraded image quality in some browsers, or have the editors upload multiple versions of each image to the CMS and figure some way to switch between these programatically. Neither of these options were desirable, so we built an image helper that, instead of inserting the element directly into the front end script, we pass the image name to the helper, along with the desired attributes such as a specific height and/or width, the helper then resizes the native image, and caches it for future use.

Take the UoL Press Releases news section, for example, we can now elegantly deliver multiple image sizes depending on our needs, without either the bandwidth overhead of resizing large images, or the administration headache of managing multiple images within the CMS, and the image helper can be used anywhere in our front end templates.

we can now elegantly deliver multiple image sizes depending on our needs, without either the bandwidth overhead of resizing large images, or the administration headache of managing multiple images within the CMS

Image attribution

The next issue I’ve been looking into recently is that of image attribution, again, Jadu doesn’t currently have any options within the multimedia gallery module to attach attribution data to multimedia items. If the UoL wants to use a Creative Commons licensed image, there’s no way, other than adding the attribution data into the body content. I figured there was a better way to do this.

The Multimedia Module within Jadu is the central place to manage all types of multimedia content, for this example I’ll focus on images. One of the core concepts of a CMS is that an image only needs to exist once, but can then be included in any other piece of content. The multimedia manager is a relatively recent addition to Jadu CMS, and as such, provides the bare minimum of features required so I needed to find a way to link attribution data to an image without modifying the core CMS code.

Enter machine tags

As we can apply tags to each image, this was a perfect place to use machine tags – a piece of text which contains machine-readable semantic information – to include the relevant licensing information. Machine tags are composed of three parts; a namespace, a predicate, and a value. For example:

Initially, I hit a brick wall in that the ‘tag’ column within the JaduMultimediaTags table was limited to varchar(50), a sensible default for most english word based tags but kills the chance of using machine tags which are typically longer. Frustrated, I moaned a bit on Twitter, and within minutes had an email from @ap49 at Jadu asking what they could do to help, and later that night they’d modified the Jadu trunk to change the tag column to varchar(255) which is much more useful, for me at least!

So, armed with our enlarged tag column, I set about writing a function which would parse an images’ tags for our license machine tag, extract the relevant components, and spit out some meaningful markup to the browser which we could style as needed. You can get the Image License function from GitHub, in case it’s of use to anyone.

For the University of Leeds’ corporate site, I wanted to include a small copyright, or creative commons symbol in the corner of the image, which would then expand to show the license detail when hovered over. I chose to use CSS for the hover animations rather than javascript and I’m quite pleased with the result. Modern browsers get a nicely animated transition and older browsers simply display the information on hover. The license function can be extended to provide the data in different formats depending on the content’s needs. For a homage widget like the one below, a subtle copyright icon works well, for images, illustrations or figures within a document we may prefer to list all of the attribution data at the foot of the document in a list of references.

Here’s the attribution implemented on our document image component:

Low impact development

Working in this way, we’re able to extend the functionality of the CMS without modifying the core product (which would complicate our upgrade cycle) because we’re making the assumption that these features will eventually be provided natively within the CMS. These functions enhance how we manage and use images, yet are lightweight enough to be stripped out and replaced by native functions if and when they become available.

(large version)

Killer Course Finder from Jadu on Vimeo.

This is a presentation I delivered at CISG 2010 in Brighton, and Online Information 2010 in London late last year. This was my first foray into public speaking and I had an absolute blast and received some great feedback from the attendees. This session covers Coursefinder, probably the project I’m personally most proud of, and is about 50% what’s been done so far, and 50% what I’d love to do next. (I do go on a bit of a rant at 16 minutes in).

A university course finder is a phenomenally important tool, the internet makes it possible for a prospective student to evaluate courses from an array of Universities from the comfort of their bedroom, perhaps without ordering a printed prospectus
…perhaps without putting on trousers

Big thanks to the guys and girls at Jadu for the speaking opportunity and for producing the video.

I work for the University of Leeds as a generalist designer/developer, a recent project of mine has been upgrading our institutional Content Management System to the latest version of the software, a task which had an extremely tight timescale which was met by using a structured development process.

My toolbox

So let’s set the scene, I work within the Central IT Services’ Web Team and am the technical lead for the University of Leeds’ corporate website (www.leeds.ac.uk), this site runs on top of the Jadu Content Management System and was launched in September 2009. We have just performed a major upgrade of the core Jadu CMS which was turned around in a very short space of time, and it’s this upgrade project which is the basis for this post.

University of Leeds (www.leeds.ac.uk)

For those of you wanting to know which apps and tools I use, here’s a quick rundown:

• iMac 21.5″ 3.2GHz Intel Core i3
• Textmate
• Terminal
• MAMP (local Apache/MySQL server)
• GIT (Version Control System)
• Trac (Project Management and Issue Tracking)

Project management tools

There are a whole host of tools available which will allow you to manage your project, both free and paid-for. Within the Web Team, we use the Open Source ‘Trac’ Project, Trac may not be the prettiest piece of software ever written, but it’s extremely flexible through a plug-in architecture and being open source, we’ve moulded it to fit our exact needs as a team. The key features we use are issue tracking, milestones and source code management.

“There are a whole host of tools available which will allow you to manage your project, both free and paid-for.”

As well as using Trac internally within our team we have opened up access to a couple of teams within the institution who work with us on the corporate project. The Central Communications team (Comms), for example, have the ability to assign and manage tickets, see the commit history and timeline and read the wiki, but don’t have access to the source code repositories or source browsing facility through Trac.

local > staging > production (aka develop > debug > deploy)

There are three separate environments which I use to develop for leeds.ac.uk. Firstly, all of the code I write is done on a local server which runs a complete standalone version of the code and database. This allows me to mess around as much as I want without any risk to the live site and database which runs on the production server where the live version of leeds.ac.uk lives.

In between my local development server and the production server is the ’staging’ server, this is an identical environment to the production server (even running on the same physical hardware) and is accessed through a private URL. By running this staging server I can deploy code for the team to test, confident that this is identical to how the site will operate once deployed to the production server.

The deployment is handled through the GIT version control system which is tied to our Trac system where we maintain a central source code repository (even though it’s not strictly needed with GIT, we still maintain a central repo for ‘disaster planning’), code is pushed from Local to Trac, then from Trac to Staging and ultimately from Trac to Live.

How it all tied together

During the upgrade project I worked with our internal project co-ordinator and the Comms team to define a set of milestone dates for the project, such as ‘testing’, ‘pre-launch’, ‘launch’ and ‘post launch’.

We knew the date the site had to launch by was concrete, so worked backwards from there, with the pre-launch milestone set to the start of the week of launch, this contained any issues and tasks that needed to be completed before we could possibly go-live (such as a last minute content-freeze and migration from the currently live site to the upgraded site). Finally, the post-launch milestone allowed me to keep any tasks that weren’t directly related to the launch to be processed afterwards.

“We knew the date the site had to launch by was concrete,
so worked backwards from there”

We had a thorough round of testing in the weeks running up to launch, the task of testing was performed by Comms who were testing against a ‘release candidate’ build on the Staging server. They worked for a week going through every single page on the Release Candidate build and logged tickets for any bugs, whether they be for differences in layout or differences in content. This is a critical step and their eagle eyes spotted a wide range of issues, from missing/out of date content, to the fact that the breadcrumb trail was 2 pixels further to the right than it should be.

These issues were all classified against a simple priority scale:

1. Blocker (the site can’t possibly go live until this is fixed)
2. Critical (if this isn’t fixed, people may die)
3. Major (it’s a big problem, but no-one’s going to die)
4. Minor (this needs fixing at some point)
5. Trivial (no-one would probably notice except us)

“a ‘critical’ issue may be seen as one which would cause the institution to cause severe confusion or lose money”

If you were to take into account the business considerations, a ‘critical’ issue may be seen as one which would cause the institution to cause severe confusion or lose money (such as printing an incorrect emergency phone number). Not all content is created equal, so a content difference on the Press Releases page might be classed as ‘Major’ while a page buried in the bowels of the site with a spelling error might be classed as ‘Minor’ or ‘Trivial’. It’s worth sitting down with the people who are going to be creating most of your tickets and defining what your priorities are to make sure that everything is not logged as high-priority to try and get them finished quicker.

(Based on this project I may move to remove the Blocker priority, as nearly all critical issues could be considered blockers)

I left the team alone for a week to perform their testing, only stepping in to fix any Blocker/Critical issues which would hamper their testing efforts and being on hand to answer any questions they had, after they were satisfied the entire site had been tested, their access to staging was revoked while I worked through all of the tickets assigned to the ‘Testing’ milestone. This process took 3 days for a couple of hundred issues, once the reported issue had been resolved the ticket was re-assigned to the owner for them to recheck the issue, and for them to close the ticket if it was fixed, or fail if it was still present.

Make your tools work for you

I am lucky to work with some extremely talented people, including a colleague who installed and maintains our Trac instance and implements some of the weird and wonderful ideas we have to make it more useful for us. One of the most used tweaks was to use the post-receive hooks of GIT to allow us to modify tickets based on the commit message.

For example, I accept Ticket #356 which requires a code change to resolve. I make the required change to the code and commit this to my local repository with the following command:

When I next push my changes to Trac, the post-receive hook recognises the ‘Fixes #356′ part of the commit message, adds a comment to the ticket linking to the specific changeset and diff showing exactly what changed, and sets the ticket to ‘testing’ status, which then fires off an email to the ticket owner prompting them to test the fix and close the ticket if it’s resolved.

I also communicated the progress of the project with the testing team by highlighting which version of the code the staging server was currently running:

Code version

This linked through to a summary changelog, which gave an outline of what had changed from version to version, clicking through would list precisely what had changed in the code and which tickets were fixed:

Trac changelog

We projected the Trac roadmap screen in our office with an auto-refresh which let us watch the testing milestone gradually reach 100% completion as the Comms team signed off the fixed tickets (I’m a sucker for visualising the size and progress of the task). All of this communication regarding the process of the project was passive, it was only available if and when anyone needed to see it.

Projection of project progress

In conclusion

It doesn’t matter what tools or software you use as long as you’re able to make them fit around the way you work. If a piece of software gets in the way of how you work then you should seriously consider either changing it, or (if possible) changing the way it works to better suit your needs. If you’re working with other people on a project, communication is essential. By keeping everyone involved up-to date you can reduce the amount of time needed for meetings and reach that magical milestone, getting sign off.

This year has been one of massive change and random moments so I thought I’d highlight some of the high points. Rather than sit here and write, I thought I’d let the moblogs do the bulk of the talking.

January - We started the year as we ended it, with lots and lots of snow

February - We celebrated 200 episodes of the Boagworld.com podcast with a mammoth live stream from The Barn

March - We met a dood from Boyzone

March - I finally made the switch!

June - We reunited with old friends from Toronto and Belgium

June - I married the love of my life

June - we became parents-to-be

November - I did my first conference speaking gig

November - I rocked a tux at my first black-tie dinner

December - At the ripe old age of 29, we got our first car!

December - The snow & ice descended to usher out 2010

The last digital camera I owned was a Canon Ixus 40 which was a nifty little thing but wasn’t much more than a regular point & shoot. The LX3 is still a compact, but is nestled at the top end and is about as high as you’d want before making the leap to a DSLR.

The look and feel is gorgeous, the metal body has a retro feel to it and it’s got a wide angle Leica lens which can shoot in a few different formats, my favourite is definitely the 16:9. The one downside is that there’s a very small zoom on the lens which is only useful for framing, other than that, I’m a big fan so I thought I’d share some sample shots I took before the wedding and on the honeymoon. All of these are unedited and straight from the camera.

I definitely prefer portrait photography to be in black & white and the LX3 has a very nice dynamic B&W mode which ups the contrast for a more moody shot.

There’s tons of settings to mess about with the exposure, as well as the ability to shoot in RAW mode to capture all that detail. this 10mp long exposure is best viewed LARGE!

Colour reproduction is great, and very accurate to the scene

And the macro mode is fantastic for those close ups

All in all, I love the camera and I’m hoping to take it with me quite often to capture some great shots. I might even invest some money as you can trick it out quite a bit with accessories!

I failed.

So this is where I recant multiple excuses to explain my failure. While I got off to a good start with some posts that generated a fair number of comments everything seems to be happening at once and the amount of ‘free’ time I can devote to writing has all but vanished into thin air for a short while. As well as some new projects coming my way in my ‘day job’ which I’ve been working flat-out on for a couple of weeks I’ve also started to dip my toe back into the freelance waters and have been working on a couple of small projects on an evening as well as off bits of wedding planning here and there and the odd job interview to mix things up a bit leaving very little time to blog. Plus (and I know @garyvee might disagree) there’s 24, Lost and a whole host of other fine television programming which demand my attention.

I do plan on, and want to write regularly but once a week just doesn’t seem sustainable for a whole year, life and work will invariably get in the way. I’d rather take the time to write posts than crack out half-assed ones every week. So I’m handing in my #p52 membership card and commemorative plate and will be writing when I can from now on.

Selling concepts

I endured a misspent youth in retail sales and one of the things I’m good at is finding the best way to sell things to clients, even if it’s a concept like progressive enhancement rather than a physical product, the concept can be ‘sold’ in a way that the client understands and, more importantly, accepts.

Let’s start with the definition from Wikipedia:

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic mark-up, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.
Wikipedia

While this is a clear and concise definition it does assume a certain level of knowledge and so isn’t the most ideal method to explain the concept to clients.

I tend to use analogies to explain a lot of things to people, taking something that may be alien to them, such as the differing capabilities of web browsers, and use something they may be familiar with to explain the point. My favourite analogy uses games consoles as a replacement for web browsers.

my favourite analogy

So let’s take a popular sports game, Say ‘Tiger Woods Golf’, this game is available on just about every popular games console on the market such as the Nintendo Wii, Xbox 360 and Playstation 3 as well as handheld consoles such as the Nintendo DS, does the game look the same on each console? Absolutely not! It’s physically impossible and there’s a clear and defined difference with games consoles, the ‘high-end’ consoles like the 360 and PS3 cost the most, and undoubtedly give the best visual representation of the game, with better textures, realistic faces, perfect trees and water effects but the Nintendo Wii, having less power will have blockier graphics, jagged edges and rougher details like trees and water. The games don’t look exactly the same, but the most important thing is that — despite these obvious visual differences — it doesn’t stop you playing a round of golf.

Image showing the difference between the game on the Wii (left) and the 360 (right)

Every client I’ve ever explained this to has understood the analogy really well. Nearly all own, or have owned games consoles or have children with them and so can understand that a £300 console might give a better overall experience than a £150 console, even if the game costs the same. The game is designed to take advantage of the increased power available in high end machines, and cut back on certain things on low end machines to make sure that you can still do the core task in the game. Everyone will remember owning an older system when they were younger and wouldn’t expect their Atari, NES or Master System to be able to cope with the latest video games on the market, but they could still get a game that would let them play a round of golf. Even if the balls are square.

the ‘convincers’

There’s a couple of conscious decisions here which help to ‘sell’ the analogy, Firstly: games such as Tiger Woods Golf, Fifa Football or Formula 1 are extremely widespread and mainstream, you can be sure that even if your audience isn’t familiar with a specific game, they know the sport. You can tailor the analogy on-the-fly with the client also, if you know they’re a football fan, switch to Fifa Football as your reference.

Secondly: I use a sports game as they’re the most likely to be ported across all major consoles and contain familiar elements which stay consistent regardless of the platform, such as golf courses, race tracks or sports stadiums. It’s the graphical detail that is the major difference and this is what we’re using to compare.

Thirdly: sports games attract huge investment and sponsorship and sell and make millions. This helps to sell the fact that even EA Sports, with their millions of dollars can make a game look the same across every console.

what about you?

Do you have a favourite analogy? what do you use to explain certain things to clients? It doesn’t have to be progressive enhancement, hit up the comment box below and let me know!