Transcript
Page 1: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Of hamsters, feature creatures and missed opportunities

Chris&anHeilmann,Fronteers,Amsterdam,5thofNovember2009(remember,remember)

Page 2: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Page 3: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Hamstering.

Page 5: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

STUPID

Page 7: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Howwelearntwebdesignisnottherightway.

Page 8: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

WaSP Interact

h@p://interact.webstandards.org/

Page 9: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Opera Web Standards curriculum

h@p://www.opera.com/company/educa&on/curriculum/

Page 10: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Ourjob:evolvingtheweb

Page 11: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Specialists.

Page 12: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Fanboys.

*bleep*

Page 14: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Libraries.

(...)

Page 15: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Writeless,domore.!=

Writeless,makeithardtomaintain.

Page 16: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Bewarethefeaturecreature.

Page 17: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Thefeatureloop

Complex

Simple

Feedback

Features

Page 18: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Shi[ingourpointofviewtospotopportuni&es.

Page 19: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Ourtechnologiesareshithot.

Page 20: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Thewebisnotsites.

Page 21: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Thewebisnotcode.

Page 22: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Itisaboutdata.

h@p://www.flickr.com/photos/22414102@N07/3508671863/

Page 23: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Page 24: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Page 25: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Page 26: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Page 27: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Buildingwithcomponents.

http://www.flickr.com/photos/seven13avenue/2080281038/

Page 28: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Page 29: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

CMS

Page 31: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

KobayashiMaru

Page 33: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

PhotosfromFlickr?

select*fromflickr.photos.searchwheretext="cat"

Page 34: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

HeadlinesoftheNewYorkTimes?

select*fromnyt.ar&cle.searchwherequery="spontaneouscombus&on"

Page 35: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

LatestcommitsonaGitHubrepo?

select*fromgithub.repo.commitswhereid='yql'andrepo='yql‐tables'

Page 36: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

LatestheadlinesoftheVolkskrant?

select&tlefromhtmlwhereurl="h@p://www.volkskrant.nl/"andxpath="//h2[@&tle]"

Page 37: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

LatestEnglishheadlinesoftheVolkskrant?select*fromgoogle.translatewhereqin(select&tlefromhtmlwhereurl="h@p://www.volkskrant.nl/"andxpath="//h2[@&tle]")andtarget='en'

Page 39: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Upda&ngWordpress?

insertintowordpress.post(&tle,descrip&on,blogurl,username,password)values("TestTitle","Thisisatestbody","h@p://ajaxian.com","cheilmann","iedoesitright")

Page 40: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Upda&ngtheinternet?

deletefrominternetwhereuser_agent="MSIE"andversion<8;

Notye

t,soz.

Page 41: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

SearchoneterminGoogle,BingandYahoo?

select*fromquery.mul&wherequeries='select*frommicroso[.bingwherequery="JimmyHoffa"andsourcein("web");select*fromgoogle.searchwhereq="JimmyHoffa";select*fromsearch.webwherequery="JimmyHoffa"'

Page 43: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Orthemanlyway...

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

Page 44: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Youcanmixandmatchwhateveryouwant.Youcansortandlimit.Youcanextendwithyourowndatatablesbywri&ngaschemaandpu|ngitonGitHub.Youcanstoreinforma&onontheYQLservers(thecloud,thecloud)

Page 45: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Where’sthecatch?

Page 46: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

10khitsanhour(20kwithoAuth).100khitsaday.Dataiscachedfor15minutes(sooncustomisable).Execu&onlimitontheserveris30seconds(fornow).

That’s

all!

Page 47: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Let’sbiteintoanexample.

Page 48: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

FindAmsterdam.

select*fromgeo.placeswheretext="amsterdam"

Page 49: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

DefineAmsterdamandgetphotostakenthere.

select*fromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="amsterdam")

Page 50: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Getalltheinforma&onaboutthesephotos.

select*fromflickr.photos.inforwherephoto_idin(selectidfromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="amsterdam"))

Page 51: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Getonlywhatweneed.

selectfarm,id,secret,owner.realname,server,&tle,urls.url.contentfromflickr.photos.infowherephoto_idfromflickr.photos.inforwherephoto_idin(selectidfromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="amsterdam"))

Page 52: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

SelectformatJSON,defineacallbackandcopyandpastetheURL.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

Page 53: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

CopyintoascriptsrcandwriteafewlinesofDomScrip&ng.

Page 54: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

PROFIT!

h@p://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html

Toolazytochangethedemo,meh.

Page 55: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Also:FAIL.

Page 56: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

DonottrustJavaScripttobeavailable!

Page 57: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

SomoveyourJavaScriptserverside!

YQLopentablescanhaveembeddedJSthatrunsontheYQLserver(withRhino)andsupportsXMLna&velywithE4X.

Page 58: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Page 60: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

DisplaywithJavaScript:

Page 61: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

DisplaywithPHP:

Page 62: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Joinus!h@p://github.com/yql/yql‐tables

Page 63: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

RTFMh@p://developer.yahoo.com/yql/

Page 64: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Spendyour&meonmakingthewebfunforhumans,notpleasingmachines.

Page 65: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Ifyouareclever,youareallowedtobelazy.

Page 66: Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

Replacingthewebwouldbetough,souseitwell.