![Page 1: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/1.jpg)
Frontloadedandzippedup.Doloosetypessinkships?
Chris7anHeilmann,FullFrontal,Brighton,20thofNovember2009
![Page 2: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/2.jpg)
Aquicklookbackin7me...
![Page 3: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/3.jpg)
Bringonthebling!
h"p://www.flickr.com
/pho
tos/dancen
tury/207
2499
619/
![Page 4: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/4.jpg)
Morebling!
h"p://www.flickr.com
/pho
tos/kidp
erez/320
4305
300/
![Page 5: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/5.jpg)
vargright=120vargbo"om=40varn=(document.layers)?1:0;varie=(document.all)?1:0;funcLonmakeObj(obj,nest){ nest=(!nest)?'':'document.'+nest+'.' this.css=(n)?eval(nest+'document.'+obj):eval(obj+'.style') this.moveIt=b_moveIt;}funcLonb_moveIt(x,y){ this.x=x;this.y=y this.css.leX=this.x this.css.top=this.y}varpageWidth,pageHeightfuncLongeoInit(){ oTest=newmakeObj('divBo"om') pageWidth=(ie)?document.body.offsetWidth‐4:innerWidth; pageHeight=(ie)?document.body.offsetHeight‐2:innerHeight; checkIt() //setstheresizehandler. onresize=resized if(ie)window.onscroll=checkIt;}funcLoncheckIt(){ if(ie)oTest.moveIt(document.body.scrollLeX+pageWidth‐gright,document.body.scrollTop+pageHeight‐gbo"om) elseif(n){ oTest.moveIt(window.pageXOffset+pageWidth‐gright,window.pageYOffset+pageHeight‐gbo"om) setTimeout('checkIt()',20) }}funcLonresized(){ pageWidth=(ie)?document.body.offsetWidth‐4:innerWidth; pageHeight=(ie)?document.body.offsetHeight‐2:innerHeight; if(ie)checkIt()}onload=geoInit;
![Page 6: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/6.jpg)
Ajaxforthewin!
![Page 7: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/7.jpg)
Ajaxmisconcep7ons.
![Page 8: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/8.jpg)
Securityscares.
![Page 9: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/9.jpg)
IsJavaScriptnottobetrusted?
![Page 10: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/10.jpg)
Backendissues.
Source:CenzichPp://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q1‐Q2‐2009.pdf
![Page 11: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/11.jpg)
Implementa7onversuslanguage.
![Page 12: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/12.jpg)
JavaScriptequality.
hPp://www.flickr.com
/pho
tos/pjork/33
8742
1683
/hPp://www.flickr.com
/pho
tos/carbon
nyc/30
3636
3927
/
![Page 13: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/13.jpg)
Stealingcookies.
![Page 14: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/14.jpg)
Surprisingresults.
![Page 15: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/15.jpg)
Pluginsareabigsecurityissue.
![Page 16: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/16.jpg)
SonomoreJavaScript?
hPp://www.flickr.com
/pho
tos/thevoicewithin/52
3034
888/
![Page 17: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/17.jpg)
ThejoyofJavaScript
![Page 18: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/18.jpg)
LearningJavaScript
hPp://www.opera.com/company/educa7on/curriculum/
hPp://developer.yahoo.net/blogs/theater/archives/douglas_crockford/
![Page 19: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/19.jpg)
★ Sensi7veinforma7on(creditcardnumbers,anyrealuserdata)
★ Cookiehandlingcontainingsessiondata★ Tryingtoprotectcontent(right‐clickscripts,emailobfusca7on)
★ Replacingyourserver/savingonservertrafficwithoutafallback
WhattonotuseJavaScriptfor:
![Page 20: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/20.jpg)
★ slickerinterfaces(autocomplete,asynchronousuploading)
★ warningusersaboutflawedentries(passwordstrengthforexample)
★ extendingtheinterfaceop7onsofHTMLtobecomeanapplica7onlanguage(sliders,maps,comboboxes...)
★ AnyvisualeffectthatcannotbedonesafelywithCSS(anima7on,menus...)
WhattouseJavaScriptfor:
![Page 21: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/21.jpg)
Whatifyouneedmore?
![Page 23: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/23.jpg)
hPp://code.google.com/p/google‐caja/
Anotheristopre‐process
![Page 24: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/24.jpg)
★ nameaPributes★ customaPributes★ customtags★ unclosedtags★ <embed>★ <iframe>★ <linkrel=‘…★ javascript:void(0)★ radiobuPonsinIE★ rela7veURLs
CajaandHTML
![Page 25: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/25.jpg)
★ eval()★ newFunc7on()★ stringsaseventhandlers(node.onclick='...';)★ namesendingwithdouble/tripleunderscores★ withfunc7on(with(obj){...})★ implicitglobalvariables(specifyvarvariable)★ callingamethodasafunc7on★ document.write★ window.event★ ajaxrequestsreturningJS
CajaandJavaScript
![Page 26: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/26.jpg)
★ *hacks★ _hacks★ IEcondi7onals★ Insert‐aserclearfix★ expression()★ @import
CajaandCSS
![Page 27: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/27.jpg)
hPp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html
![Page 28: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/28.jpg)
Makingiteasier.
![Page 29: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/29.jpg)
Libraries.
(...)✔
![Page 30: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/30.jpg)
hPp://developer.yahoo.com/yap/guide/yapdev‐yml.html
YML‐abstrac7ngthepain.
![Page 31: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/31.jpg)
YMLTags(LargeView)
yml:ayml:adyml:audioyml:formyml:friend‐selectoryml:if‐envyml:messageyml:nameyml:profile‐picyml:pronounyml:shareyml:swfyml:user‐badge
YMLLiteTags(SmallView)
yml:ayml:audioyml:formyml:if‐envyml:nameyml:profile‐picyml:pronounyml:user‐badge
![Page 32: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/32.jpg)
Extendingbrowsers.
![Page 33: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/33.jpg)
Movingoutofthebrowser
![Page 34: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/34.jpg)
Widgetframeworks
![Page 35: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/35.jpg)
http://www.w3.org/TR/widgets/http://www.quirksmode.org/blog/
archives/2009/04/introduction_to.html
W3Cwidgets
![Page 36: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/36.jpg)
Air
![Page 39: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/39.jpg)
★ mashupdatawithaSQL‐stylesyntax★ filterdowntotheabsolutelynecessarydata★ returnasXML,JSON,JSON‐PandJSON‐P‐X★ useYahooasahigh‐speedproxytoretrievedatafromvarioussources.
★ useYahooasaratelimi7ngandcachingproxywhenprovidingdata.
YQLop7ons
![Page 40: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/40.jpg)
select*fromhtmlwhereurl="hPp://2009.fullfrontal.org"andxpath="//h3"
![Page 41: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/41.jpg)
OutputformatXML:
![Page 42: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/42.jpg)
OutputformatJSON
![Page 43: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/43.jpg)
OutputformatJSON‐P
![Page 44: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/44.jpg)
OutputformatJSON‐P‐X
![Page 45: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/45.jpg)
Ge{ngphotosofLondon,UK.
selectfarm,id,secret,owner.realname,server,7tle,urls.url.contentfromflickr.photos.infowherephoto_idin(selectidfromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="london"))
![Page 46: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/46.jpg)
SelectformatJSON,defineacallbackandcopyandpastetheURL.
hPp://query.yahooapis.com/v1/public/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%22london%22))&format=json&diagnos7cs=false&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=flickr
![Page 47: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/47.jpg)
CopyintoascriptsrcandwriteafewlinesofDomScrip7ng.
![Page 48: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/48.jpg)
PROFIT!
hPp://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html
![Page 49: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/49.jpg)
Turningthisintoawebservice.
YQLopentablescanhaveembeddedJSthatrunsontheYQLserver(withRhino)andsupportsXMLna7velywithE4X.
![Page 50: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/50.jpg)
![Page 51: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/51.jpg)
FlickrphotosasULsnow:
select*fromflickr.photolistwheretext="me"andloca7on="uk"andamount=20
![Page 52: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/52.jpg)
DisplaywithJavaScript:
![Page 53: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/53.jpg)
DisplaywithPHP:
![Page 54: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/54.jpg)
HowaboutscrapingHTMLthatneedsPOSTdatainJavaScript?
select*fromhtmlpostwhereurl='hPp://isithackday.com/hacks/htmlpost/index.php'andpostdata="foo=foo&bar=bar"andxpath="//p"
hPp://www.wait‐7ll‐i.com/2009/11/16/using‐yql‐to‐read‐html‐from‐a‐document‐that‐requires‐post‐data/
![Page 55: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/55.jpg)
oAuthinJavaScript?
![Page 56: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/56.jpg)
SwitchingenvironmentsliberatesourJavaScriptsolu7onsandgivesusmuch7ghtersecurity.
![Page 57: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/57.jpg)
Soopenyourmindsanddon’tjudgeJavaScriptbyitsimplementa7on.
![Page 58: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/58.jpg)
Insteadhavefunwithitanduseitwisely.Withgreatpowercomesgreatresponsibility.
![Page 59: Frontloaded and zipped up - the full frontal keynote](https://reader033.vdocuments.us/reader033/viewer/2022052410/54b7a8424a795993718b48c7/html5/thumbnails/59.jpg)
Chris7anHeilmannhPp://wait‐7ll‐i.comhPp://developer‐evangelism.comhPp://twiPer.com/codepo8
Thanks!