Mark Cipolla

2011-05-26T00:00:00+00:00

LunchPlaces

A simple web app (that’s location aware) for you mobile that shows you good lunch places to eat.

At work, when it gets to around noon, not a single day passes where someone says “Where should we go for lunch?”.

Therefore, my boss asked me to start a wiki so we can add out favourite places to eat. Wiki’s are for the weak. A real developer just builds an app.

LunchPlaces is feature-light; it shows places that others have added that they like to eat lunch at. Nothing more. You can add more places. And others can see them.

The nicest thing is that it uses geolocation. The app asks you where you are (on an iPhone, via it’s GPS, whilst on a desktop browser it locates from the IP address), and shows you places within 5kms of wher you are.

The awesome rails gem GeoKit handles the finding within ranges. Very easy to get your head around.

2010-11-04T00:00:00+00:00

Status Board

A web-based sinatra-driven status board for displaying site stats on a whoppin' large tv.

For when you want to display a whole bunch of stats from a variety of sources...

With a big, beautiful television mounted on the wall, and nothing to display on it, in a bit of time between projects I made a status board showing the status of the site, sitepoint.com. It pulled down some stats off Google Analytics, and tried to make useful sense out of it, and display (as-close-as) immediate details available.

Some of the stats that I thought interesting is user-stats breakdowns: operating systems, per-browser-usage breakdowns.

Also, pageview & UB stats as well as sales for the last week, which products are hot, etc...

An interesting note: I found that having all the browser-breakdown stats took up a lot of space! So, after a bit of fiddling, they now cycle through each of the stats graphs, taking up a single (larger) block than six or so smaller ones.

2010-05-16T00:00:00+00:00

Realestate.com.au Suburb Profiles

Suburb Property info for Realestate.com.au, Australia’s largest property portal.

As part of an exclusive deal with RPData, REA had access to their property data. To that end, we created suburb profile pages, with almost 11,500 suburbs having information regarding buying and selling properties.

We created median price graphs, using FLOT, a JavaScript JQuery plotting tool. It's very customisable, and allows for awesome, interactive mapping of data. These were shown inside a custom JS tab block. FLOT by default wants JavaScript arrays jammed in page, which is fine, but for accessibility reasons we built a table reader into the initialisation that reads a table of the data, and builds a graph in a corresponding sibling element. FLOT out of the box allows for customisation of colours, and drops tooltips in for you.

To get the appropriate formatting of data (so the graph knows the difference between numerical and financial amounts), we had to create custom initialisations for the differing blocks by a mix of class names and our own DOM walker, that traverses the DOM finding named elements and adding the JS to them.

Using a combination of our own stats and the stats platform we use (in regards to the number of users hitting the properties in that suburb), against the number of properties available in that suburb, we created our Supply & Demand graphs. These graphs were well received by our users as they could see, at a glance, how competitive the suburb in question is. Also attached to this block (by the tab block) is an interest rate graph.

This (although primarily an ad) shows Standard Variable Rate (from the major lenders) against the Reserve Bank of Australia Cash Rate, all in the custom colours of whomever had bought the rights to that block.

At the larger sites, it is often hard to create new advertising ideas (due to a desire to travel the safe, well-worn roads), but by using supported content we could find a happy medium; something users will use, and raise brand awareness at the same time.

In it's full glory, the page offers in-depth information on any given suburb. It has surpassed both usage expectations and ROI, and has made me a little proud to see it get out the door and into the wild.

2010-05-10T00:00:00+00:00

Realestate.com.au Mobile

The first mobile interface for Realestate.com.au, Australia's largest property portal.

As part of working at REA as a UI Designer / Developer, one of the platforms for developing new ideas has been 'Labs'. Just before the release of the iPhone in Australia, I saw a gap in our offering; we didn't have a compelling mobile experience.

I built the first prototype in a week or so, and after it was rebuilt for production (with the efforts of Mike Breeze and Michael Allan) and launched in the UK for propertyfinder.com it was receiving ~15,000 unique browsers a month.

The success of the UK mobile site saw a release for our main brand, realestate.com.au, which it now has in the hundreds of thousands unique browsers monthly.

From it's inception, it was designed to work across a diverse range of mobile devices, progressively enhancing to adapt to any device. It (on the iPhone) asynchronously loaded properties straight from the results list, reducing the amount of page load and making for an significantly improved fluid search, rather than the "click-on-property, reload-page, back, repeat" users saw on their desktop. The smaller screen offered challenges to how to best use the available space to it's maximum, yet remain uncluttered. Key learnings from this were:

Don't try and remake your whole site, with every feature, on a mobile. Do what people need, and what people need on a mobile is different to what they need on a desktop.
Different users use a mobile to a full site. We found much higher ratios of (mostly likely) younger people were using the mobile site, and the difference of search for Buy verses Rent was much closer on the mobile site rather than the full site (which saw Buy searches having the majority).
If you are going to do browser detection, do it right. We had a simple regex-based solution initially, and it worked well for a while. As soon as you want to fix things for individual devices (especially those used by the business leaders of the business, heheh), without a more robust solution it is hard. However, the trade off is more work up front implementing a solution that is scalable. We found some Apache level ones, but there are lots of options available.
Optimise the hell out of images. We found that the same images, uncompressed from the data centres, could add ~200kb to a page of twenty property listings. Jam those down to JPGs, and up the compression. For desktop, you want to sit around 80% quality, but on a mobile, especially for thumbnails, 20% seemed to work fine for us!
Really simple, good, semantic HTML is key. Browsers (I'm looking at you, BlackBerry) on the older phones just don't support all of HTML, or CSS on certain elements. And it can be hard to debug why. Write simple code, and whole bunches of problems just go away.

As my original mobile site has now been replaced with a new one, leveraging a newer platform, I'm happy to show it here. My pet project has grown up and left the coup, and hopefully will take a life on its own. Check out the new one at m.realestate.com.au.

2010-04-06T00:00:00+00:00

Hudson Global Dashboard

For tracking multiple automated continuous integration builds across multiple machines.

The Hudson Global Dashboard is an idea that stems from the Panic Board. We had a scenario where we had multiple machines running Hudson, and for knowing at-a-glance the status of a build we relied either on build lights (USB lights, changing red to green depending on build) or CCMenu.

Problem with this

CCMenu cannot be easily seen by people walking by
Build lights can only be one per machine, however we are running multiple builds on a single machine.

Usage

Check the code out.
It runs on http://localhost:3000
Enjoy

Installation

git clone git@github.com:markcipolla/Hudson-Global-Dashboard.git
bundle install
padrino rake seed
padrino start

The "padrino rake seed" lets you set up the first admin account, so you can login. Point your browser to http://localhost:3000/admin so you can login. After adding at least one build, head to http://localhost:3000

It can be found at http://github.com/markcipolla/Hudson-Global-Dashboard.

Hudson Global Dashboard was built on Sinatra, a great little light-weight framework on Ruby, but has been rewritten on Padrino, which leverages a step up on Sinatra to offer a more powerful offering. A lot of the power of Ruby on Rails, still without all the hassle of dealing with a full suite.

It's still very early alpha, so use at your own risk, but it's fairly harmless, so I wouldn't stress too much. The only real problem is the error handling isn't superb, and it can just die when a build is naffed. Which doesn't look good to business-type-people walking by. But, then again, neither does a failing build.

Note: I've rounded out a lot more error handling, so it'll start to check urls and IPs of the Hudson builds and skip broken ones.. for the most part.

In the wild:

I was ever so pleased to see the dashboard get some use in a real world environment against active test suites... Thanks go to Steven Holloway for taking the pics and letting me know.