Frontloaded and zipped up - the full frontal keynote

Frontloaded
and
zipped
up.Do
loose
types
sink
ships?Chris7an
Heilmann,
Full
Frontal,
Brighton,
20th
of
November
2009


A
quick
look
back
in
7me...

Bring
on
the
bling!
h"p://www.flickr.com/photos/dancentury/2072499619/

More
bling!h"p://www.flickr.com/photos/kidperez/3204305300/

var
gright=120 var
gbo"om=40var
n
=
(document.layers)
?
1:0;var
ie
=
(document.all)
?
1:0;funcLon
makeObj(obj,nest){ 
nest=(!nest)
?
'':'document.'+nest+'.'



this.css=(n)
?
eval(nest+'document.'+obj):eval(obj+'.style')

 
 
 
 
 
 
this.moveIt=b_moveIt; } funcLon
b_moveIt(x,y){ 
this.x=x;
this.y=y 



this.css.leX=this.x 
 this.css.top=this.y }var
pageWidth,pageHeight funcLon
geoInit(){ 
oTest=new
makeObj('divBo"om') 
pageWidth=(ie)?document.body.offsetWidth‐4:innerWidth;
pageHeight=(ie)?document.body.offsetHeight‐2:innerHeight;
 checkIt() 
//sets
the
resize
handler. 
onresize=resized 
 if(ie)
window.onscroll=checkIt; }funcLon
checkIt(){ 
if(ie)
oTest.moveIt(document.body.scrollLeX
+pageWidth‐gright,document.body.scrollTop+pageHeight‐gbo"om)
 else
if(n){ 
 
oTest.moveIt(window.pageXOffset+pageWidth‐gright,
window.pageYOffset+pageHeight‐gbo"om)
 
 setTimeout('checkIt()',20) 
 } }funcLon
resized(){ 
pageWidth=(ie)?document.body.offsetWidth‐4:innerWidth;
pageHeight=(ie)?document.body.offsetHeight‐2:innerHeight;
 if(ie)
checkIt() } onload=geoInit;

Ajax
for
the
win!

Ajax
misconcep7ons.

Security
scares.

Is
JavaScript
not
to
be
trusted?

Backend
issues.Source:
Cenzic
hPp://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q1‐Q2‐2009.pdf

Implementa7on
versus
 language.

JavaScript
equality.hPp://www.flickr.com/photos/pjork/3387421683/


hPp://www.flickr.com/photos/carbonnyc/3036363927/

Stealing
cookies.

Surprising
results.

Plugins
are
a
big
security
issue.

So
no
more
JavaScript?hPp://www.flickr.com/photos/thevoicewithin/523034888/

The
joy
of
JavaScript

Learning
JavaScripthPp://www.opera.com/company/educa7on/curriculum/hPp://developer.yahoo.net/blogs/theater/archives/douglas_crockford/

What
to
not
use
JavaScript
 for:★Sensi7ve
informa7on
(credit
card
numbers,
any
real
user
data) ★Cookie
handling
containing
session
data★Trying
to
protect
content
(right‐click
scripts,
email
obfusca7on) ★Replacing
your
server
/
saving
on
server
traffic
without
a
fallback

What
to
use
JavaScript
for: ★slicker
interfaces
(autocomplete,
asynchronous
uploading) ★warning
users
about
flawed
entries
(password
strength
for
example) ★extending
the
interface
op7ons
of
HTML
to
become
an
applica7on
language
(sliders,
maps,
comboboxes...)★Any
visual
effect
that
cannot
be
done
safely
with
CSS
(anima7on,
menus...)

What
if
you
need
more?

One
way
is
to
limit
yourself.hPp://www.adsafe.org/

Another
is
to
pre‐processhPp://code.google.com/p/google‐caja/

Caja
and
HTML ★ name
aPributes
★ custom
aPributes ★ custom
tags ★unclosed
tags ★ <embed> ★ <iframe>★ <link
rel=‘… ★javascript:void(0)
 ★radio
buPons
in
IE ★ rela7ve
URLs

Caja
and
JavaScript ★ eval() ★new
Func7on() ★strings
as
event
handlers
(node.onclick
=
'...';)★names
ending
with
double
/
triple
underscores★with
func7on
(with
(obj)
{
...
})★implicit
global
variables
(specify
var
variable)★ calling
a
method
as
a
func7on★ document.write
 ★ window.event ★ajax
requests
returning
JS

Caja
and
CSS ★ *
hacks ★_
hacks ★ IE
condi7onals ★Insert‐aser
clear
fix ★ expression()★ @import

hPp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html

Making
it
easier.

Libraries. ✔ (...)

YML
‐
abstrac7ng
the
pain.hPp://developer.yahoo.com/yap/guide/yapdev‐yml.html

YML
Tags
(Large
View)YML
Lite
Tags
(Small
View) yml:a yml:ayml:ad yml:audio yml:audio yml:form yml:form yml:if‐envyml:friend‐selector yml:name yml:if‐envyml:profile‐pic yml:message yml:pronoun yml:nameyml:user‐badge yml:profile‐pic yml:pronounyml:share yml:swf yml:user‐badge



Extending
browsers.

Moving
out
of
the
browser

Widget
frameworks

Air

hPp://www.mozilla.org/rhino/

JavaScript
mashups
as
webservices?

YQL
op7ons ★mashup
data
with
a
SQL‐style
syntax★filter
down
to
the
absolutely
necessary
data★return
as
XML,
JSON,
JSON‐P
and
JSON‐P‐X★use
Yahoo
as
a
high‐speed
proxy
to
retrieve
data
from
various
sources. ★use
Yahoo
as
a
rate
limi7ng
and
caching
proxy
when
providing
data.

select
*
from
html
where
url="hPp://2009.fullfrontal.org"
and
xpath="//h3"


Output
format
XML:

Output
format
JSON

Output
format
JSON‐P

Output
format
JSON‐P‐X

Ge{ng
photos
of
London,
UK.select

farm,
id,
secret,owner.realname,
server,
7tle,urls.url.content
from
flickr.photos.info
where
photo_id
in(select
id
from
flickr.photos.search
where
woe_id
in
(select
woeid
from
geo.places
where
text="london"))

Select
format
JSON,
define
a
callback
and
copy
and
paste
the
URL. 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

Copy
into
a
script
src
and
write
a
few
lines
of
Dom
Scrip7ng.

PROFIT!hPp://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html

Turning
this
into
a
web
service.YQL
open
tables
can
have
embedded
JS
that
runs
on
the
YQL
server
(with
Rhino)
and
supports
XML
na7vely
with
E4X.

Flickr
photos
as
ULs
now:select
*
from
flickr.photolist
where
text="me"
and
loca7on="uk"
and
amount=20

Display
with
JavaScript:

Display
with
PHP:

How
about
scraping
HTML
that
needs
POST
data
in
JavaScript?select
*
from
htmlpost
whereurl='hPp://isithackday.com/hacks/htmlpost/index.php'
and
postdata="foo=foo&bar=bar"
and
xpath="//p"hPp://www.wait‐7ll‐i.com/2009/11/16/using‐yql‐to‐read‐html‐from‐a‐document‐that‐requires‐post‐data/

oAuth
in
JavaScript?

Switching
 environments
 liberates
our
JavaScript
 solu7ons
and
gives
us
much
 7ghter
security.

So
open
your
minds
and
don’t
judge
JavaScript
by
its
implementa7on.

Instead
have
fun
with
it
and
use
it
wisely.
With
great
power
comes
great
responsibility.


Chris7an
Heilmann
hPp://wait‐7ll‐i.com
 Thanks!
hPp://developer‐evangelism.com
hPp://twiPer.com/codepo8




Jump directly to slide:

    Easy Slideshare by Christian Heilmann, licensed with BSD License.