News Limited – Sport application

Two weeks after I had finished working at the Adiworld responsive web application my journey to Australia began. I arrived on the 3rd of November 2011 in Sydney and after two different development tests and a successful job interview I started working at News Limited on the 14th of November 2011. I was entrusted with the task to develop a fully JavaScript based sports application.

Fig. 01

Fig. 02

Fig. 03

Fig. 04

Fig. 05

I created an apdapter to make it as easy as possible to add new sports to the application as easy as possible. The templates are implemented with the help of the JavaScript library underscore. The total architecture is basically event based but in some cases I had to work against that approach via callbacks to make sure that a specific task didn’t just start but also finished before another task started.

Originally I tried to do the main Menu animation which slides in and out and pushes the pages main content out and into the viewport with JavaScript. Although this was looking fine on the desktop the animation didn’t look as fluid as I wanted it to be on the tablet where the app was supposed to run. Hence, I switch to do the animation via CSS3. This made a huge difference in regards to the user experience and that was when I decided to rely more on CSS3 animations if possible. Unfortunately, my major task as a frontend developer was and still is to make sure that the web applications are cross browser compatible or more importantly backward compatible. There are huge amounts of different JavaScript librarys that help out with this task, mainly Modernizr or Shiv. Nonetheless, I’m not a huge fan of always using another JavaScript library to fill this gap. It is hard to find them but there are other solutions to keep a web application backward compatible and I will always try to choose these solutions over a JavaScript based approach. In the end it always depends on the type of application that needs to be implemented.

Introduction

Switch between portrait and landscape view