Audi Home of Quattro technical review

This was a car show on a cross harbour ferry and this site features the car show, registration for the show, the new S3 Sportback, RS6 Avant and a campaign for visitors share their favourite routes in Hong Kong.

Vibrant, energetic design and animations on both desktop and mobile platform best represent the branding, even in interactive maps, to maintain a highly enjoyable experience, both on web and ferry.

Basic building blocks: PHP codeigniter, jQuery mobile,

Mobile site

We build mobile site ( to view mobile site on desktop)
and do redirections by detecting device type
We use a PHP library Mobile detect to identify if it is a mobile device
and browser redirect to proper URL if needed

Google map customization

We use customized style on google map
Google map provides powerful styling ability for maps (
Changing road color, sea color, parks color, labels color etc
which is very powerful and can match with the site's color tone and

Google map route tracing

In this site, there is a way for users to design a route that they think are interesting challenging.
We utilized markers and Google directions API (
to let user drop two pins, and design a route:

And this works on mobile as well.
We use browser's geolocation API to pin the points while user is driving across the city
and draw the route by Google directions API

This part is a totally new challenge as we are new to this complete customization on google maps and their supplements API
But the final outcome is very satisfactory, Google map API is very powerful
We can build smooth animation transitions, pins, markers, overlays etc, just like a standalone custom map

Video playing

There are 4 separate videos for each celebrity, placed as a Gallery
We use html5 video plugin to play video from same server:
But as we had 12 videos on one page,
Sometime we will reach the html5 video buffering on browser, and the video cannot play,
video onload events do not trigger (we only show the play button after all 4 video are buffered)
That will only happens if we put more than 10 videos in one page.
but there is not much browser's internal video buffering documents online,
So in the end, we need to insert/remove video tags on gallery events to overcome this problem.

Hennessy Artistry 2013 technical review

Hennessy Artistry 2013

This is an ticket distributing app.

  1. User A joined the game
  2. invite 2 of his friends, like and join the game within 30 min
  3. they got total of 3 tickets.

Simple yet complex workflow. Looks simple, but there are:

  • 10 groups within one day only
  • 20 days, user cannot take 2 tickets
  • expiration after 30 mins to “re-open” the table for others
  • The presentation of inviter and invitee are different

The last point cause us under estimated the project quite a bit. We do not expect testing such interactions between users can be so complex to test. Other than that, a few technical issues to highlight:

DNS issue

We found page loading time is very long, around 5s to load a page, or switching language, even on AJAX request cases. We understand that we do lots of facebook data exchange like user info, signed request, access token, extended access token, so some loading time is understandable, but 5s loading time is still too much. So we quickly start basic performance tuning on the server. The server is using Redhat, so we plug easy fix like APC,, reduced 5ms, great.

The application do lots of slot, seats, tables counting, so we dig into mysql tuning. index already in, so we increase innodb cache, jump table cache size etc.. No luck.

Then we found that our dev environment is serving pages under 1 second, which pointing to network issue. But direct links like images are working fine, super fast. So lets ping 200ms, which seems normal to me. 200ms. Wait a minute, my local is having 2.8ms ping?

So I just hardcoded /etc/hosts:

BLOOM! reduced from 5s to 1s.

Facebook notification api seems simple thing. You POST to an url with user’s access token, JSON returning result, nice and easy. You generate your app access token, save it in code, reuse it every time.

Post to their wall, extended access token

Traditionally, Facebook provides a share dialog: That covers some use case, but:
Thumbnail will be small square 75x75
That is an user action
So facebook provides another permission called “publish_actions” and you can use api to post to user’s wall given that the user granted such actions. API ref: example:

Beware that you need to use individual user’s access token, and access token is subject to expire, the default token expire very soon, or as long as user logouts. You can use setExtendedAccessToken() to get a roughly 2 month token, so you will want to store this unknown length token with the user’s information.

About apprequest

Screenshot: is a popup where facebook list user’s friends and “invite” them to join. Please note one important concept here: Facebook is sharing an app instead of sharing a page. The user being invited via apprequest will have an invitation in their notification center, and click on it will redirect him to app’s page, not a fan page. And this URL is not customizable. This important properties of apprequest introduce another need redirecting users from app page to fan page.

So there is an un-documented fb_source=notification in URL parameters on app page if user’s referral is notification center, so developers may use to redirect user from iframe back to fan page. What a mess.

Facebook tab + mobile

Last, Facebook tabs are not visible on facebook mobile fan page. Facebook do provide a “mobile URL” that you can fill in, but up until now, I still do not see how that URL will be used. But we do have a mobile page, so marketers can use 2 URLs for different device.


Web dev's dilemma: integration resopsibility

Situational question: AJAX POST to /user/create

Frontend HTML dev should find out URI /user/create and put inside JS, or;
Backend dev should put that in after completing user controller?

This grey area responsibility keeps popping up during the day
In some complex application with AJAX GET, POST, Facebook API with multiple end point URI
the communication effort is near to the development effort itself

Frontend dev do not want to dig inside controller and methods
Backend dev do not want to look at jQuery objects, success callbacks and even the HTML handling
However, in between this dilemma, there is still someone need to take this responsibility

We need an effective and somehow fair method
Or this is the essential communication between engineers?
So how remote teams handle these situations?

Audi A3 Facebook app

我們Document On Ready為 Audi 發佈了 已經一般時間了
這是一個 facebook tab 內的遊戲

Document On Ready have launched for a while now
A facebook iframe app, which is not exactly a site building project we usually do
Aiming to promote their new car

和其他網頁設計師合作,一邊試驗 iframe 遊戲的限制
一邊絞盡 facebook 的爛文檔
當然也有為神聖的 IE 專門調敎一番

We mainly focus on the technical development
Working with other web designers, reaching the limits of iframe games
While pushing the gamify element
Crunching facebook's rotted developer docs
While smoothing user's login experience
And last of course, the holy IE special force comes in

And we officially joined the "Campaign", "banners" market


Git autocomplete on Mac

A must have, offically from git repo

curl -o ~/.git-completion.bash
echo "source ~/.git-completion.bash" >> ~/.bash_profile

input > git che and press tab to auto complete
it can even fill branch name for you!!