Slide 1
Slide 1 text
Excessive Enhancement
Phil Hawksworth
@philhawksworth
Slide 2
Slide 2 text
a history of great
talks at full frontal
javascript & browser technologies
@philhawksworth #fullfrontalconf
Slide 3
Slide 3 text
front-end focus
bleeding edge effects
browser performance
browser shizzle
@philhawksworth #fullfrontalconf
Slide 4
Slide 4 text
node.js
bringing javascript to the server
@philhawksworth #fullfrontalconf
Slide 5
Slide 5 text
q=simon+willison+full+frontal
&flesh_tones=false
@philhawksworth #fullfrontalconf
Slide 6
Slide 6 text
f/e + b/e
@philhawksworth #fullfrontalconf
Slide 7
Slide 7 text
browser shizzle
can do animation
can do 3D effects
can do dynamic data visualisations
@philhawksworth #fullfrontalconf
Slide 8
Slide 8 text
@philhawksworth #fullfrontalconf
caution
Slide 9
Slide 9 text
...so preoccupied with
whether they could
that they didn't stop
to think if they should
- Dr. Ian Malcolm
@philhawksworth #fullfrontalconf
Slide 10
Slide 10 text
Eaten by dinosaurs
eaten by dinosaurs
(possibly while on the toilet)
@philhawksworth #fullfrontalconf
Slide 11
Slide 11 text
captain killjoy
running with scissors
eating with mouth open
@philhawksworth #fullfrontalconf
...but this stuff is important
Slide 12
Slide 12 text
@philhawksworth #fullfrontalconf
the web is agreement
an uber-doodle about the web
by @psd of @solderpad
Slide 13
Slide 13 text
@philhawksworth #fullfrontalconf
Slide 14
Slide 14 text
@philhawksworth #fullfrontalconf
Slide 15
Slide 15 text
@philhawksworth #fullfrontalconf
Slide 16
Slide 16 text
@philhawksworth #fullfrontalconf
Slide 17
Slide 17 text
the uri is the thing
another uber-doodle about the web
by @psd of @solderpad
@philhawksworth #fullfrontalconf
Slide 18
Slide 18 text
@philhawksworth #fullfrontalconf
Slide 19
Slide 19 text
@philhawksworth #fullfrontalconf
Slide 20
Slide 20 text
@philhawksworth #fullfrontalconf
Slide 21
Slide 21 text
agreement
the contract of the URI
@philhawksworth #fullfrontalconf
Slide 22
Slide 22 text
not a lecture on REST
@philhawksworth #fullfrontalconf
Slide 23
Slide 23 text
cautionary tale
the mistakes we have made before
@philhawksworth #fullfrontalconf
Slide 24
Slide 24 text
representation of content
ask, and ye shall receive
GET http://some.stuff
@philhawksworth #fullfrontalconf
Slide 25
Slide 25 text
the seductive power
of the possible
@philhawksworth #fullfrontalconf
Slide 26
Slide 26 text
html5
whatever that is
@philhawksworth #fullfrontalconf
Slide 27
Slide 27 text
flash
mistakes made with
@philhawksworth #fullfrontalconf
Slide 28
Slide 28 text
anti-flash mob!
you’re a member of the
@philhawksworth #fullfrontalconf
Slide 29
Slide 29 text
snooty
attitude of
many web
developers
copyright Chris Kennett
@philhawksworth #fullfrontalconf
Slide 30
Slide 30 text
common criticisms
@philhawksworth #fullfrontalconf
Slide 31
Slide 31 text
frozen content
copy / paste
bookmark-able
accessible
searchable
@philhawksworth #fullfrontalconf
@philhawksworth #fullfrontalconf
Slide 32
Slide 32 text
flash *can* do it
@philhawksworth #fullfrontalconf
Slide 33
Slide 33 text
"show me"
@philhawksworth #fullfrontalconf
Slide 34
Slide 34 text
pixels > the web
@philhawksworth #fullfrontalconf
Slide 35
Slide 35 text
what is valued by
the developers?
photoshop
adobe suite
flash
@philhawksworth #fullfrontalconf
Slide 36
Slide 36 text
care more about
the sex appeal
...than the fundamentals of the web
@philhawksworth #fullfrontalconf
Slide 37
Slide 37 text
the seductive power
of the possible
@philhawksworth #fullfrontalconf
Slide 38
Slide 38 text
richer user experiences
@philhawksworth #fullfrontalconf
increased sophistication
@philhawksworth #fullfrontalconf
Slide 39
Slide 39 text
@philhawksworth #fullfrontalconf
Slide 40
Slide 40 text
@philhawksworth #fullfrontalconf
Slide 41
Slide 41 text
http://beetle.de
a rich user experience
open Web technologies
...and why I think it sucks
@philhawksworth #fullfrontalconf
@philhawksworth #fullfrontalconf
Slide 42
Slide 42 text
@philhawksworth #fullfrontalconf
@philhawksworth #fullfrontalconf
~13 seconds
operator instructions
@philhawksworth #fullfrontalconf
Slide 43
Slide 43 text
11mb images
251 http requests
missing cache expiration
@philhawksworth #fullfrontalconf
Slide 44
Slide 44 text
15mb images
316 http requests
missing cache expiration
@philhawksworth #fullfrontalconf
Slide 45
Slide 45 text
@philhawksworth #fullfrontalconf
Slide 46
Slide 46 text
4mb images
314 http requests
@philhawksworth #fullfrontalconf
Slide 47
Slide 47 text
@philhawksworth #fullfrontalconf
@philhawksworth #fullfrontalconf
Slide 48
Slide 48 text
...so preoccupied with
whether they could
that they didn't stop
to think if they should
- Dr. Ian Malcolm
@philhawksworth #fullfrontalconf
Slide 49
Slide 49 text
@philhawksworth #fullfrontalconf
that is really rather
a lot of http
requests for a web
site about a car.
- Dr. Ian Malcolm
Slide 50
Slide 50 text
Eaten by dinosaurs
@philhawksworth #fullfrontalconf
Slide 51
Slide 51 text
but it will work on an iPhone
@philhawksworth #fullfrontalconf
Slide 52
Slide 52 text
but it will work on an iPhone
@philhawksworth #fullfrontalconf
http://beetle.de
Slide 53
Slide 53 text
but it will work on an iPhone
@philhawksworth #fullfrontalconf
http://beetle.de/full
Slide 54
Slide 54 text
/reduced
but it will work on an iPhone
@philhawksworth #fullfrontalconf
http://beetle.de
Slide 55
Slide 55 text
@philhawksworth #fullfrontalconf
hijacking the links
@philhawksworth #fullfrontalconf
Slide 56
Slide 56 text
@philhawksworth #fullfrontalconf
“why don’t the
fucking wheels
fucking move?!!”
@bruised_blood
@philhawksworth #fullfrontalconf
Slide 57
Slide 57 text
pixels the web
>
@philhawksworth #fullfrontalconf
Slide 58
Slide 58 text
pixels the web
>
@philhawksworth #fullfrontalconf
Slide 59
Slide 59 text
without
javascript?
@philhawksworth #fullfrontalconf
Slide 60
Slide 60 text
@philhawksworth #fullfrontalconf
Slide 61
Slide 61 text
@philhawksworth #fullfrontalconf
Slide 62
Slide 62 text
what is the address
of that content?
@philhawksworth #fullfrontalconf
Slide 63
Slide 63 text
URIs are what make
the Web a web
@philhawksworth #fullfrontalconf
Slide 64
Slide 64 text
forgotten how
the web works
@philhawksworth #fullfrontalconf
Slide 65
Slide 65 text
being seduced by
the possible
@philhawksworth #fullfrontalconf
Slide 66
Slide 66 text
@philhawksworth #fullfrontalconf
why u no shizzle?
Slide 67
Slide 67 text
@philhawksworth #fullfrontalconf
curl http://some.stuff
Slide 68
Slide 68 text
@philhawksworth #fullfrontalconf
Slide 69
Slide 69 text
twitter.com is not a web site
(except of course it is)
@philhawksworth #fullfrontalconf
@philhawksworth #fullfrontalconf
Slide 70
Slide 70 text
twitter.com is not a web site
(except of course it is)
@philhawksworth #fullfrontalconf
@philhawksworth #fullfrontalconf
Slide 71
Slide 71 text
twitter is a platform
everything uses the API
@philhawksworth #fullfrontalconf
@philhawksworth #fullfrontalconf
Slide 72
Slide 72 text
"twitter web client"
@philhawksworth #fullfrontalconf
Slide 73
Slide 73 text
without
javascript?
@philhawksworth #fullfrontalconf
Slide 74
Slide 74 text
@philhawksworth #fullfrontalconf
Slide 75
Slide 75 text
but nobody has
javascript disabled
missing the point
@philhawksworth #fullfrontalconf
Slide 76
Slide 76 text
what about
the contract of the URI?
@philhawksworth #fullfrontalconf
Slide 77
Slide 77 text
@philhawksworth #fullfrontalconf
not known at this address
Slide 78
Slide 78 text
#!
@philhawksworth #fullfrontalconf
Slide 79
Slide 79 text
#!
shbang
@philhawksworth #fullfrontalconf
Slide 80
Slide 80 text
#!
shbang
61
slides
simon willison ricky martin
from to
@philhawksworth #fullfrontalconf
Slide 81
Slide 81 text
#!
why use
@philhawksworth #fullfrontalconf
Slide 82
Slide 82 text
#
@philhawksworth #fullfrontalconf
Slide 83
Slide 83 text
#
@philhawksworth #fullfrontalconf
window.location.hash
Slide 84
Slide 84 text
client-side routing
client-side processing
@philhawksworth #fullfrontalconf
Slide 85
Slide 85 text
@philhawksworth #fullfrontalconf
enable history navigation
Slide 86
Slide 86 text
@philhawksworth #fullfrontalconf
google ajax crawling
#!
http://code.google.com/web/ajaxcrawling/
Slide 87
Slide 87 text
when did it get so hard
to crawl the web?
what does it take to write a good crawler?
@philhawksworth #fullfrontalconf
Slide 88
Slide 88 text
interface shizzle doesn't
have to break the uri
@philhawksworth #fullfrontalconf
Slide 89
Slide 89 text
@philhawksworth #fullfrontalconf
Slide 90
Slide 90 text
@philhawksworth #fullfrontalconf
Slide 91
Slide 91 text
@philhawksworth #fullfrontalconf
Slide 92
Slide 92 text
@philhawksworth #fullfrontalconf
Slide 93
Slide 93 text
html5
@philhawksworth #fullfrontalconf
history api
Slide 94
Slide 94 text
@philhawksworth #fullfrontalconf
Slide 95
Slide 95 text
@philhawksworth #fullfrontalconf
Slide 96
Slide 96 text
@philhawksworth #fullfrontalconf
Slide 97
Slide 97 text
@philhawksworth #fullfrontalconf
Slide 98
Slide 98 text
client-side routing
client-side processing
@philhawksworth #fullfrontalconf
Slide 99
Slide 99 text
fashionable
single page apps
@philhawksworth #fullfrontalconf
Slide 100
Slide 100 text
helper libraries
levi routes
http://github.com/PaulKinlan/leviroutes
@philhawksworth #fullfrontalconf
Slide 101
Slide 101 text
@philhawksworth #fullfrontalconf
2k javascript library
unobtrusive
progressive enhancement
Slide 102
Slide 102 text
demos &
developer tools
@philhawksworth #fullfrontalconf
Slide 103
Slide 103 text
@philhawksworth #fullfrontalconf
Slide 104
Slide 104 text
just a demo
@philhawksworth #fullfrontalconf
Slide 105
Slide 105 text
just a demo
the biggest danger is when
that demo mentality leaks
into production websites
@brucelawson
@philhawksworth #fullfrontalconf
Slide 106
Slide 106 text
@philhawksworth #fullfrontalconf
Slide 107
Slide 107 text
@philhawksworth #fullfrontalconf
polaroiderizer.com/#fullfrontalconf
Slide 108
Slide 108 text
developer tools
@philhawksworth #fullfrontalconf
Slide 109
Slide 109 text
we've been here before
"it looks like you're making
a snazzy web site..."
would you like me
to bollocks it up
for you?
@philhawksworth #fullfrontalconf
Slide 110
Slide 110 text
experiment & explore
@philhawksworth #fullfrontalconf
but take care of the web
(and chew with your mouth closed)
Slide 111
Slide 111 text
http://www.flickr.com/photos/shelbob/67089485
http://www.flickr.com/photos/psd/1805709102/
http://www.flickr.com/photos/psd/421186578/
http://crikeyboy.blogspot.com/2009/05/illustration-friday-hierarchy.html
http://www.flickr.com/photos/57742619@N04/5959324249
http://stephenwaller.tumblr.com/
http://www.flickr.com/photos/e-coli/3888542890
http://www.flickr.com/photos/theredproject/2831350088
http://www.flickr.com/photos/dcjohn/8474890
@philhawksworth #fullfrontalconf
thanks & links
http://thewebisagreement.com/
http://en.wikipedia.org/wiki/Robustness_principle
http://code.google.com/web/ajaxcrawling
http://github.com/blog/760-the-tree-slider
http://www.w3.org/TR/html5/history.html
http://www.whatwg.org/specs/web-apps/current-work/#event-popstate
https://developer.mozilla.org/en/DOM/window.onpopstate
http://github.com/PaulKinlan/leviroutes
http://christianheilmann.com/2011/08/15/getting-rusty-we-need-new-
best-practices-for-a-different-development-world/
http://www.w3.org/QA/2011/05/hash_uris.html
#fullfrontalconf
@philhawksworth
Slide 112
Slide 112 text
@philhawksworth #fullfrontalconf
#fullfrontalconf
ta!