Frontloaded and zipped up - the full frontal keynote
-
Upload
christian-heilmann -
Category
Technology
-
view
4.970 -
download
0
description
Transcript of Frontloaded and zipped up - the full frontal keynote
Frontloadedandzippedup.Doloosetypessinkships?
Chris7anHeilmann,FullFrontal,Brighton,20thofNovember2009
Aquicklookbackin7me...
Bringonthebling!
h"p://www.flickr.com
/pho
tos/dancen
tury/207
2499
619/
Morebling!
h"p://www.flickr.com
/pho
tos/kidp
erez/320
4305
300/
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;
Ajaxforthewin!
Ajaxmisconcep7ons.
Securityscares.
IsJavaScriptnottobetrusted?
Backendissues.
Source:CenzichPp://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q1‐Q2‐2009.pdf
Implementa7onversuslanguage.
JavaScriptequality.
hPp://www.flickr.com
/pho
tos/pjork/33
8742
1683
/hPp://www.flickr.com
/pho
tos/carbon
nyc/30
3636
3927
/
Stealingcookies.
Surprisingresults.
Pluginsareabigsecurityissue.
SonomoreJavaScript?
hPp://www.flickr.com
/pho
tos/thevoicewithin/52
3034
888/
ThejoyofJavaScript
LearningJavaScript
hPp://www.opera.com/company/educa7on/curriculum/
hPp://developer.yahoo.net/blogs/theater/archives/douglas_crockford/
★ Sensi7veinforma7on(creditcardnumbers,anyrealuserdata)
★ Cookiehandlingcontainingsessiondata★ Tryingtoprotectcontent(right‐clickscripts,emailobfusca7on)
★ Replacingyourserver/savingonservertrafficwithoutafallback
WhattonotuseJavaScriptfor:
★ slickerinterfaces(autocomplete,asynchronousuploading)
★ warningusersaboutflawedentries(passwordstrengthforexample)
★ extendingtheinterfaceop7onsofHTMLtobecomeanapplica7onlanguage(sliders,maps,comboboxes...)
★ AnyvisualeffectthatcannotbedonesafelywithCSS(anima7on,menus...)
WhattouseJavaScriptfor:
Whatifyouneedmore?
hPp://code.google.com/p/google‐caja/
Anotheristopre‐process
★ nameaPributes★ customaPributes★ customtags★ unclosedtags★ <embed>★ <iframe>★ <linkrel=‘…★ javascript:void(0)★ radiobuPonsinIE★ rela7veURLs
CajaandHTML
★ eval()★ newFunc7on()★ stringsaseventhandlers(node.onclick='...';)★ namesendingwithdouble/tripleunderscores★ withfunc7on(with(obj){...})★ implicitglobalvariables(specifyvarvariable)★ callingamethodasafunc7on★ document.write★ window.event★ ajaxrequestsreturningJS
CajaandJavaScript
★ *hacks★ _hacks★ IEcondi7onals★ Insert‐aserclearfix★ expression()★ @import
CajaandCSS
hPp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html
Makingiteasier.
Libraries.
(...)✔
hPp://developer.yahoo.com/yap/guide/yapdev‐yml.html
YML‐abstrac7ngthepain.
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
Extendingbrowsers.
Movingoutofthebrowser
Widgetframeworks
http://www.w3.org/TR/widgets/http://www.quirksmode.org/blog/
archives/2009/04/introduction_to.html
W3Cwidgets
Air
★ mashupdatawithaSQL‐stylesyntax★ filterdowntotheabsolutelynecessarydata★ returnasXML,JSON,JSON‐PandJSON‐P‐X★ useYahooasahigh‐speedproxytoretrievedatafromvarioussources.
★ useYahooasaratelimi7ngandcachingproxywhenprovidingdata.
YQLop7ons
select*fromhtmlwhereurl="hPp://2009.fullfrontal.org"andxpath="//h3"
OutputformatXML:
OutputformatJSON
OutputformatJSON‐P
OutputformatJSON‐P‐X
Ge{ngphotosofLondon,UK.
selectfarm,id,secret,owner.realname,server,7tle,urls.url.contentfromflickr.photos.infowherephoto_idin(selectidfromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="london"))
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
CopyintoascriptsrcandwriteafewlinesofDomScrip7ng.
PROFIT!
hPp://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html
Turningthisintoawebservice.
YQLopentablescanhaveembeddedJSthatrunsontheYQLserver(withRhino)andsupportsXMLna7velywithE4X.
FlickrphotosasULsnow:
select*fromflickr.photolistwheretext="me"andloca7on="uk"andamount=20
DisplaywithJavaScript:
DisplaywithPHP:
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/
oAuthinJavaScript?
SwitchingenvironmentsliberatesourJavaScriptsolu7onsandgivesusmuch7ghtersecurity.
Soopenyourmindsanddon’tjudgeJavaScriptbyitsimplementa7on.
Insteadhavefunwithitanduseitwisely.Withgreatpowercomesgreatresponsibility.
Chris7anHeilmannhPp://wait‐7ll‐i.comhPp://developer‐evangelism.comhPp://twiPer.com/codepo8
Thanks!