forked from benschwarz/currency.io
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
8 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,30 +1,30 @@ | ||
# currency.io | ||
A offline-capable, html5 currency converter app for the iPhone. | ||
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 | ||
Everything is built with raw html, css & javascript. We decided against including a library like Zepto or jQuery. With the main browser targets being Android and iOS browsers, we can use `querySelectorAll` and `addEventListener` which covered the basic features that we'd rely on a library for normally. Plus it cuts down on the file size, which is especially important when dealing with mobile. | ||
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. So, 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`). One may note that 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. | ||
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 itself is running on Sinatra. It doesn't do anything fancy, it's just there to query, parse and cache current currency rates from Yahoo. | ||
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](http://developer.yahoo.com/yql/console/?q=show%20tables&env=store://datatables.org/alltableswithkeys#h=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20%28%27USD%27%2C%20%27AUD%27%29). | ||
|
||
#### Other notes | ||
We're using an image to do the small drop shadows rather than using `box-shadow`, which turns out to be horrible for performance. | ||
We're using an image to do the drop shadows rather than `box-shadow`, which turns out to be horrible for performance. | ||
|
||
We've designed everything using `em`s, which means you can scale everything up 150% and test it in Chrome or Safari (just be sure to set your user-agent string to iPhone or something supported). Much less hassle than testing directly in the iOS Simulator. | ||
The whole layout has been designed using `em`s, 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 strictly for Android/iOS kicks ass. | ||
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 | ||
* Full CSS3 support — including transitions & animations | ||
* Reliable CSS3 support — including transitions & animations |