Photos Around You

Eric Ferraiuolo Twitter: @ericfBlog: 925html.com

http://bit.ly/photos-around-you

Photos Around You is…

• Written in JavaScript

• Leveraging YUI 3.1, YQL, & Flickr

• Determining the user’s location

• Finding geo-tagged photos on Flickr

• Optimizing thumbnails using data-URIs

• Building a UI to view photos

YUI 3Yahoo! User Interface Library

• Yahoo!’s next-generation JavaScript library

• Powers the new Yahoo! homepage

• Current version: 3.1.0

• Open Source – on GitHub

• http://github.com/yui/yui3/

YUI 3 – Cont.• Modular

• Self-aware Dependency Management

• YUI().use() only what you need

• YUI 2 in 3

• Gallery Modules

• Selector driven

• Performant

• Custom Events

• Component and Widget Infrastructure

• Custom Modules

YUI 3 Modules Used• node

• overlay

• substitute

• gallery-jsonp

• gallery-yql

• gallery-markout

YUI().use('node', 'overlay', 'substitute', 'gallery-jsonp', 'gallery-yql', 'gallery-markout', function(Y){ // Everything is ready!

});

YQLYahoo! Query Language

• SELECT * FROM InternetSELECT * FROM flickr.photos.search WHERE text="cat" LIMIT 10

• SQL-like syntax

• HTTP GET ➞ JSON(P)

• Yahoo!’s pipes are bigger than yours

• Open Data Tables: Plugin your own web services http://datatables.org/

YQL – Cont.

• Supports: SELECT, INSERT, UPDATE, DELETE

• JOIN web services together:

SELECT * FROM upcoming.events WHERE woeid IN (SELECT woeid FROM geo.places WHERE text="Boston, MA")

• Execute JavaScript on YQL’s Servers

var q = 'SELECT * FROM flickr.photos.search '+ 'WHERE text="cat"';

new Y.yql(q, function(r){

r.query.results // Results as JSON

});

Using YQL with YUI 3

Flickr

…is Photos

User’s Location

• Need user’s location, client-side

• Feature detect W3C Geolocation API

• Fallback to IP-based

• Gather info about location

User’s Locationvia W3C Geolocation API

• Returns Lat/Lng

• Black-box implementation

• Firefox, iPhone, iPad, Android

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( locFromPos, locFromIP ); } else { locFromIP();}

User’s Locationvia IP-based Lookup

• Less accurate

• All browsers

• Get user’s IP in JavaScript?

getIP = function (callback) { Y.jsonp('http://jsonip.appspot.com/', function(data){ callback(data.ip); }); };

User’s LocationGathering Info About Location

• WOEID (Where On Earth IDentifer)

• Locality (e.g. Boston, MA)

SELECT * FROM geo.places WHERE woeid IN (SELECT place.woeid FROM flickr.places WHERE lat={lat} AND lon={lon})

YQL Query using Lat/Lon from Geolocation API

Credit: Christian Heilmann (@codepo8)

User’s LocationGathering Info About Location

• WOEID (Where On Earth IDentifer)

• Locality (e.g. Boston, MA)

SELECT * FROM geo.places WHERE woeid IN (SELECT place.woeid FROM flickr.places WHERE (lat, lon) IN (SELECT Latitude, Longitude FROM ip.location WHERE ip="{ip}"))

YQL Query using IP

Credit: Christian Heilmann (@codepo8)

User’s LocationGathering Info About Location

Browser Y! Geo

Inte

rnet

YQL

Lat-Lon/IP Lat-Lon/IP

WOEID

Places API

Loc InfoLoc Info

Geo-Tagged Flickr PhotosSearch Flickr via YQL Query

• Paged result-sets

• Use WOEID of the user’s location

• Sort-by “interestingness”

SELECT * FROM flickr.photos.search({start},{num}) WHERE woe_id="{woeid}" AND radius_units="mi" AND sort="interestingness-desc" AND extras="path_alias"

Geo-Tagged Flickr PhotosSearch Flickr via YQL Query

Browser Flickr

Inte

rnet

YQLPhoto Data Search API

Thumbnail Data-URIsToo Many HTTP Requests

Browser Flickr

Inte

rnet

Image Requests

Thumbnail Data-URIsDelegate YQL to Download Thumbnails

Browser Flickr

Inte

rnet

YQL

Images

Data URIs

Thumbnail Data-URIs

• Removed HTTP image requests to Flickr

• YQL GETs Flickr images, Batches Data URIs

• Reduced HTTP requests 10x

• 1 YQL Request = 10 Image Data URIs

Photos UI

• Loading indicators between YQL requests

• Render grid of thumbnails

• Use photo data to construct Overlay

• ‘More’ Button to fetch additional photos

Photo UI – Cont.

• Event Delegation

• 1 Event Handler for all thumbnail clicks

• Heavy use of CSS3

• Tested with: IE 8, Firefox 3.5, Safari 4, Chrome 4, iPhone, iPad

Questions?

• http://925html.com/code/photos-around-you/

• Eric Ferraiuolo

• http://925html.com

• @ericf on Twitter

Photo Credits• http://www.flickr.com/photos/pearbiter/2075091856

• http://www.flickr.com/photos/leecullivan/399317018

• http://www.flickr.com/photos/beantown/3085045889

• http://www.flickr.com/photos/roncaglia/2481739143

• http://www.flickr.com/photos/28625089@N03/2923851272

• http://www.flickr.com/photos/colonnade/859769177

• http://www.flickr.com/photos/emdurso/402898976

• http://www.flickr.com/photos/riacale/1736524005

• http://www.flickr.com/photos/31332713@N04/3086715585

• http://www.flickr.com/photos/gershamabob/78717025