My presentation at Fronteers 2009 about the opportunity we have as developers to liberate ourselves from the fail that is browsers and write some nice code to mix data on the web.

1. Of hamsters, feature
creatures and missed
opportunities
Chris&an Heilmann, Fronteers, Amsterdam, 5th of November 2009 (remember, remember)

3. Hamstering.

4. h@p://www.flickr.com/photos/codepo8/4066032678/

5. ID
U P
ST

6. h@p://www.flickr.com/photos/atalaya/544843059/

7. How we learnt web design
is not the right way.

8. WaSP Interact
h@p://interact.webstandards.org/

9. Opera Web Standards
curriculum
h@p://www.opera.com/company/educa&on/curriculum/

10. Our job: evolving the web

11. Specialists.

12. Fanboys.
*
*bleep

13. Good
developers are
like librarians.
h@p://www.flickr.com/photos/feliciaday/3828388329/

14. Libraries.
(...)

15. Write less, do more.
!=
Write less, make it hard to
maintain.

16. Beware the feature
creature.

17. The feature Simple
loop
Complex Feedback
Features

18. Shi[ing our point of view
to spot opportuni&es.

19. Our technologies are shit
hot.

20. The web is not sites.

21. The web is not code.

22. It is about data.
h@p://www.flickr.com/photos/22414102@N07/3508671863/

27. Building with components.
http://www.flickr.com/photos/seven13avenue/2080281038/

29. CMS

30. h@p://www.youtube.com/watch?v=_vJlADxbv4U&

31. Kobayashi Maru

32. h@p://developer.yahoo.com/yql

33. Photos from Flickr?
select * from flickr.photos.search
where text = "cat"

34. Headlines of the New York Times?
select * from nyt.ar&cle.search
where query="spontaneous
combus&on"

35. Latest commits on a GitHub repo?
select * from github.repo.commits
where id='yql' and repo='yql‐tables'

36. Latest headlines of the Volkskrant?
select &tle from html where
url="h@p://www.volkskrant.nl/"
and xpath="//h2[@&tle]"

37. Latest English headlines of the
Volkskrant?
select * from google.translate
where q in (select &tle from html
where url="h@p://
www.volkskrant.nl/" and xpath="//
h2[@&tle]") and target='en'

38. Upda&ng Twi@er?
use 'h@p://www.yqlblog.net/samples/twi@er.status.xml';
insert into twi@er.status
(status,username,password)
values (
"In your fronteers, blowing ur mindz",
"codepo8",
"didyoureallythinkIshowit?"
)

39. Upda&ng Wordpress?
insert into wordpress.post
(&tle, descrip&on, blogurl, username,
password)
values
("Test Title", "This is a test body",
"h@p://ajaxian.com", "cheilmann",
"iedoesitright")

40. Upda&ng the internet?
delete from internet where
user_agent="MSIE" and version < 8;
soz.
t ,
t ye
N o

41. Search one term in Google, Bing and
Yahoo?
select * from query.mul& where queries='
select * from microso[.bing where query="Jimmy
Hoffa" and source in ("web");
select * from google.search where q = "Jimmy
Hoffa";
select * from search.web where query = "Jimmy
Hoffa"
'

42. 1) Define your Query
3) Copy the URL.
2) Select your output

43. Or the manly way...
h@ps://query.yahooapis.com/v1/public/yql?
q={uri‐encoded‐query}&
format={xml|json}&
diagnos&cs={true|false}&
callback={func&on}&
env=store%3A%2F%2Fdatatables.org
%2Falltableswithkeys

44. You can mix and match whatever
you want.
You can sort and limit.
You can extend with your own data
tables by wri&ng a schema and
pu|ng it on GitHub.
You can store informa&on on the
YQL servers (the cloud, the cloud)

45. Where’s the catch?

46. 10k hits an hour (20k with oAuth).
100k hits a day.
Data is cached for 15 minutes (soon
customisable).
Execu&on limit on the server is 30
seconds (for now).
a ll!
at ’s
T h

47. Let’s bite into an example.

48. Find Amsterdam.
select * from geo.places where
text="amsterdam"

49. Define Amsterdam and get photos
taken there.
select * from flickr.photos.search
where woe_id in (
select woeid from geo.places where
text="amsterdam"
)

50. Get all the informa&on about these
photos.
select * from flickr.photos.infor
where photo_id in (select id from
flickr.photos.search where woe_id
in (select woeid from geo.places
where text="amsterdam"))

51. Get only what we need.
select farm, id, secret, owner.realname, server,
&tle,urls.url.content from flickr.photos.info
where photo_id from flickr.photos.infor where
photo_id in (select id from flickr.photos.search
where woe_id in (select woeid from geo.places
where text="amsterdam"))

52. Select format JSON, define a
callback and copy and paste the
URL.
h@ps://query.yahooapis.com/v1/yql?q=select%20*
%20from%20flickr.photos.info%20where%20photo_id
%20in%20(select%20id%20from%20flickr.photos.search
%20where%20woe_id%20in%20(select%20woeid
%20from%20geo.places%20where%20text%3D
%22amsterdam
%22))&format=json&diagnos&cs=false&env=store%3A
%2F%2Fdatatables.org
%2Falltableswithkeys&callback=flickr

53. Copy into a script src and write a
few lines of Dom Scrip&ng.

54. PROFIT!
Too lazy to change the demo, meh.
h@p://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html

55. Also: FAIL.

56. Do not trust JavaScript to be
available!

57. So move your JavaScript server side!
YQL open tables can have
embedded JS that runs on the YQL
server (with Rhino) and supports
XML na&vely with E4X.

59. Flickr photos as ULs now:
use "h@p://github.com/codepo8/
yql‐tables/raw/master/flickr/
flickr.photolist.xml" as flickr;
select * from flickr where text="me"
and loca&on="uk" and amount=20

60. Display with JavaScript:

61. Display with PHP:

62. Join us! h@p://github.com/yql/yql‐tables

63. RTFM h@p://developer.yahoo.com/yql/

64. Spend your &me on making the web
fun for humans, not pleasing
machines.

65. If you are clever, you are allowed to
be lazy.

66. Replacing the web would be tough,
so use it well.

67. Chris&an Heilmann
h@p://wait‐&ll‐i.com Bedankt!
h@p://developer‐evangelism.com
h@p://twi@er.com/codepo8