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/
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
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
});
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
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