Photos Around You — Some YUI 3, YQL, Flickr, and Geolocation mashery. A Demo and the details of how I built this mashup all in JavaScript (and not much of it). http://bit.ly/photos-around-you http://925html.com/code/photos-around-you/

1. Photos Around You
http://bit.ly/photos-around-you
Eric Ferraiuolo Twitter: @ericf
Blog: 925html.com

2. 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

4. YUI 3
Yahoo! 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/

5. YUI 3 – Cont.
• Modular • Selector driven
• Self-aware Dependency • Performant
Management
• Custom Events
• YUI().use() only
what you need • Component and Widget
Infrastructure
• YUI 2 in 3
• Custom Modules
• Gallery Modules

6. YUI 3 Modules Used
• node • gallery-jsonp
• overlay • gallery-yql
• substitute • gallery-markout
YUI().use('node', 'overlay', 'substitute',
'gallery-jsonp', 'gallery-yql', 'gallery-
markout', function(Y){
// Everything is ready!
});

7. YQL
Yahoo! Query Language
• SELECT * FROM Internet
SELECT * 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/

8. 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

9. Using YQL with YUI 3
var q = 'SELECT * FROM flickr.photos.search '+
'WHERE text="cat"';
new Y.yql(q, function(r){
r.query.results // Results as JSON
});

10. Flickr
…is Photos

11. User’s Location
• Need user’s location, client-side
• Feature detect W3C Geolocation API
• Fallback to IP-based
• Gather info about location

12. User’s Location
via W3C Geolocation API
• Returns Lat/Lng
• Black-box implementation
• Firefox, iPhone, iPad, Android
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
locFromPos, locFromIP
);
} else {
locFromIP();
}

13. User’s Location
via 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);
});
};

14. User’s Location
Gathering Info About Location
• WOEID (Where On Earth IDentifer)
• Locality (e.g. Boston, MA)
YQL Query using Lat/Lon from Geolocation API
SELECT * FROM geo.places WHERE woeid IN (SELECT
place.woeid FROM flickr.places WHERE lat={lat}
AND lon={lon})
Credit: Christian Heilmann (@codepo8)

15. User’s Location
Gathering Info About Location
• WOEID (Where On Earth IDentifer)
• Locality (e.g. Boston, MA)
YQL Query using IP
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}"))
Credit: Christian Heilmann (@codepo8)

16. User’s Location
Gathering Info About Location
Lat-Lon/IP Lat-Lon/IP
WOEID
Browser YQL Y! Geo
Places API
Loc Info Loc Info
Internet

17. Geo-Tagged Flickr Photos
Search 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"

18. Geo-Tagged Flickr Photos
Search Flickr via YQL Query
Photo Data Search API
Browser YQL Flickr
Internet

19. Thumbnail Data-URIs
Too Many HTTP Requests
Image Requests
Browser Flickr
Internet

20. Thumbnail Data-URIs
Delegate YQL to Download Thumbnails
Images
Data URIs
Browser YQL Flickr
Internet

21. 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

22. Photos UI
• Loading indicators between YQL requests
• Render grid of thumbnails
• Use photo data to construct Overlay
• ‘More’ Button to fetch additional photos

23. 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

24. Questions?
• http://925html.com/code/photos-around-you/
• Eric Ferraiuolo
• http://925html.com
• @ericf on Twitter

25. 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