Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
An offline-capable, html5 currency converter app for the iPhone
JavaScript Ruby
branch: master
Failed to load latest commit information.
.bundle
public Update minified js
views Appease the grammar police
.gitignore Added DS_Store to gitignore
.rvmrc Create the gemfile if it doesn't exist
Gemfile Tidy up unused dependencies
Gemfile.lock Tidy up unused dependencies
README.md Tweak README copy
Rakefile Add compressed script and also the rakefile to do it :)
app.rb Changed application cache file extension: manifest—app cache
config.ru Tidy up unused dependencies

README.md

currency.io

An offline-capable, html5 currency converter app for the iPhone.
Visit http://currency.io on your iOS/Android phone to try it out.

Our goal was:

To build a useful, cohesive application for your phone using web standards.

Javascript libraries

We decided against including a library like Zepto or jQuery, so everything is built with raw javascript. With the main browser targets being Android and iOS browsers, we can use querySelectorAll and addEventListener which covers the basic features we'd usually rely on a library for. Plus it cuts down on filesize, which matters when dealing with mobile.

Images

Targeting only modern (mobile) browsers means solid base64 support. The majority of images have been base64 encoded and inlined to cut down on requests (see /public/stylesheets/images.css & /public/stylesheets/images-x2.css). We used media queries to target older devices with images.css and iPhone 4 (retina display) with images-x2.css — this saved older devices from downloading high(er) resolution images needlessly.

The app

The app is running on Sinatra. It doesn't do anything fancy, it's just there to query, parse and cache current currency rates from Yahoo. Currencies are pulled over HTTP from Yahoo's Finance services using YQL.

Other notes

We're using an image to do the drop shadows rather than box-shadow, which turns out to be horrible for performance.

The whole layout has been designed using ems, which means everything can be scaled up 150% for testing in Chrome or Safari (with a user-agent string set to 'iPhone'). Much less hassle than testing directly in the iOS Simulator.

Developing for modern browsers is so much less hassle.

  • No need for graceful degradation
  • querySelector & querySelectorAll
  • Native JSON parsing (in iOS 3.2+)
  • ApplicationCache & localStorage
  • A consistent XMLHttpRequest implementation
  • Reliable CSS3 support — including transitions & animations
Something went wrong with that request. Please try again.