Fancy a day shooting zombies in a shopping mall?

We’ve been part of the team since Wish.co.uk started and seen it getting an increasing amount of attention from print and online press.

Simon Pegg recently tweeted a link to the Zombie gift and Stephen Fry mentioned Wish’s 10 Downing Street Experience, both causing huge surges in visitor numbers. Their tweets, coupled with a large number of re-tweets and likes across Twitter and Facebook, saw the load on the servers increase massively in just a few minutes.

The servers are already quite beefy, but Simon Pegg has two million followers and Stephen Fry has four million, so a mention from either of them brings a lot of traffic. Working out of hours, we responded quickly to improve the performance of parts of the site and to start statically caching some of the dynamic content and offloading media assets to a CDN. Although there are a number of improvements in the pipeline to improve efficiency and overall scalability, the changes we made kept the site up and serving curious visitors and paying customers alike.

We reckon this is just the start for Wish.co.uk and the site will be a huge success. We’re gratified to help along the way.

In April we launched the Open Elm Project which, in collaboration with the Isle of Man Department of Environment, Food & Agriculture, enables the public to monitor and record the Isle of Man’s Elm tree population and report potential outbreaks of Dutch Elm Disease.

Unlike the UK, the Island has been largely unaffected by Dutch Elm Disease and has a population of ~200,000 trees. Unfortunately, the disease is on the rise and although the Isle of Man Government has done a sterling job of controlling and mitigating it’s impact, budget constraints have reduced the funds available for regular professional tree surveys meaning little is known about how quickly or to where the disease is spreading.

Early in the year we approached the Government with a concept: give the public simple tools which they can use to help the fight against the disease and report suspected outbreaks. The idea comprised of a website and two apps for iPhone and Android devices which can be used to find out information about Dutch Elm Disease and record sightings of diseased (or healthy) trees. To our delight, the Government jumped at the chance to participate in the project.

We build a site which enables people to get information about Elm trees and about Dutch Elm Disease itself, and learn how to spot the signs of the disease. We also build two mobile apps (another first for the IoM Government), which enables people to record sightings while they’re out in the countryside.

Using the apps users can take a picture of the tree(s), choose whether it requires inspection and submit it for review by the DEFA team. The records are automatically geotagged by the phone’s GPS radio, so the team can see where the tree is to an accuracy of ~10m on the site’s Google Map – much better than a grid reference!

All reports are first reviewed by the DEFA team and are then made public on the site’s report map and in the mobile apps themselves.

From the off, we wanted this project to be the Isle of Man’s first Open Data project and we released all the source code, and have documented how to get direct access to the database – everything about the project is fully open and transparent.

The project was build entirely using Open Source technology: Django, CouchDB, PhoneGap, jQuery Mobile and the source code is licensed under the GPL. We encourage others who think this type of project could be beneficial to their cause to use the code as they see fit.

The project announcement proved a hit with it being reported by the BBC and by numerous sources in the US and we’ve had a great uptake for such a new project.

Since the disease is hard to spot during the winter months, we’ll be promoting the project with urgency next spring and hope to get a loyal band of contributors to help preserve these trees.

I’m pretty happy with the project. It was done in a short time and reasonable budget, but made to be reusable across different niches.

We used Django with some customisations to admin so that data can be uploaded from csv files. The proximity search uses a postcode-to-lat/lng database for when a postcode is entered and geocoding from Google Maps when a place name is entered.

The site is proving popular so far and we hope it will be a great success.

All access to CouchDB is performed via its RESTful JSON API which is awesome because it means you can to talk directly to the database using javascript! It’s also great because, in this case, there isn’t much going on in the middleware (Django) layer so implementing Python API endpoints to proxy to a standard database wouldn’t be worth it when I can get CouchDB to do the heavy lifting for free.

I had a look around and couldn’t find any existing plugins which could upload binary attachments to CouchDB (I could have used an XHR request to post the photo data, but I didn’t want to Base64-encode the photos as it can cause Out of Memory exceptions on devices with high-res cameras and increases the file size by ~1.4x), so I decided to write a quick Objective-C plugin.  PhoneGap has a simple plugin system which enables native code plugins to be exposed to DOM which means I can call my upload method, pass it the photo’s file URI, and let the plugin handle uploading the content.

The plugin is up on GitHub. Feel free to fork and send pull requests.

Enjoy!

It’s very common to use ‘background text’ in form fields to indicate what should be typed in there. For example, ‘name’ and ‘email’ in grey text means you should type your, um, name and email address, in to those fields.

The normal way to do it is put text in the fields, set the colour to grey using css and then remove it when the user clicks in that field. It just takes a couple of lines of JavaScript.

But what happens if you want text in a search field, or other field that you want to set the focus on when the page loads?

Background images so the field can have focus

An alternative I’ve used a few times is to have an image containing the grey text and show that image whenever there is no text in the field, regardless of whether the field has focus.

Here’s an example from London taxi booking site Tick Tock Taxi:

The “address, postcode or place of interest” text is a background image and the focus is in that field when the page loads. As soon as the user types something, the image is hidden. If they delete all text from the field, the background image comes back.

A fancier example is from hosting reviews site WhoIsHostingThis.com:

Here the text is typed in after ‘http://‘, so we actually swap between two background images – one with just ‘http://‘ and one which also has the arrow and ‘Enter the domain here‘. It shows an advantage to using images – you can put arrows and other graphics to better explain or draw attention to the field.

Here’s some code.

jQuery:

BackImage = function(field) {
    field = $(field);
    field.bind('keyup', function(e){
        field.toggleClass('empty', field.val() == '');
    });
}

new BackImage('#search_field');

MooTools:

var BackImage = new Class({
    initialize: function(field) {
        this.field = field;
        field.addEvent('keyup', this.update.bind(this));
        this.update();
    },
    update: function() {
        this.field.toggleClass('empty', this.field.get('value') == '');
    }
});

new BackImage($('search_field'));

CSS

The css just sets a background image when the field has class ‘empty’.

#search_field.empty {background:#fff url(../images/bg-search-empty.png) no-repeat 5px center;}

That’s it, a simple technique to have background text while allowing the field to have focus.

TicketSense is a UK company which helps event organisers and venues sell tickets direct to customers’ mobile phones. It’s automated and pretty slick: Customers text a keyword like ‘thewho’ to a special number to buy a ticket. They can pay by credit card, PayPal, or on their phone bill. The ticket is sent to them as an SMS text message with a barcode image attached – no need to print and distribute paper tickets.

When the customer gets to the gig/event, they show the barcode on the screen of their phone and the door staff scans it with a barcode scanner.

We helped TicketSense by developing a barcode scanning app for Windows and Mac OS X which integrates with their ticketing backend. Door staff or event managers download the list of tickets sold, then scan them at the door, which checks them against the list.

We made the app simple to use with an obvious interface that’s easy to read in low-light conditions. We developed using XULRunner to make a single cross-platform application.

The guys at TicketSense knew what they wanted and were a pleasure to work with. We got some great feedback from them about the quality of our work and responsiveness.

Instant Fare Quote

Enter the address you’re at and where you want to go and the site gives you an instant quote for a mini-cab. Booking is easy, just enter your name and phone number.

Behind the scenes, there’s a database of cab companies, the nearest of which is notified and will contact you within minutes. It’s a simple and painless way to find the cost and book your taxi. There’s a mobile version under development, too.

Fun Project

We did the web programming for the site using Django. It integrates with Google Maps for the address lookups (geocoding) and to find the distance by road for the fare calculation (using Google Maps directions). It uses an SMS gateway to send text messages to customers and taxi companies.

Tick Tock Taxi was conceived by mochii who also provided the design work. They called us in to do the web development side and we’re happy to be involved.

Do you have an innovative website, web-based or mobile app? Get in contact.

Hosting Comparison Tool

A few months ago we helped launch the new hosting comparison tool which filters tens of thousands of data points to tell you which web hosting company is best for you. Our role was to develop the comparison engine and super-slick dynamic interface which updates the list of suitable hosts as you click features and criteria that are important to you.

Data Update Interface

Behind the scenes, the team at WhoIsHostingThis.com add web hosting plans and regularly update masses of data using an interface we developed. All changes are logged, checked and approved before going live on the site.

Tech

The WhoIsHostingThis.com site uses PHP and MySQL. Much of the work for the hosting comparison tool was client-side, using JavaScript and the MooTools library. The filter uses ajax to update the list of hosts without reloading the page making it quick and simple to compare and contrast hosts.

Job Done

WhoIsHostingThis.com is probably the largest site we regularly work on and Quality Nonsense is a great client. We’re happy with the work we’ve done and it has been well received by testers and reviewers.