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
Top Related