Of hamsters, feature
creatures and missed
opportunities



 Chris&an
Heilmann,
Fronteers,
Amsterdam,
5th
of
November
2009
...
Hamstering.
h@p://www.flickr.com/photos/codepo8/4066032678/
ID
  U P
ST
h@p://www.flickr.com/photos/atalaya/544843059/
How
we
learnt
web
design

is
not
the
right
way.
WaSP Interact




h@p://interact.webstandards.org/
Opera Web Standards
          curriculum




h@p://www.opera.com/company/educa&on/curriculum/
Our
job:
evolving
the
web
Specialists.
Fanboys.




                  *
           *bleep
Good

developers
are

like
librarians.




      h@p://www.flickr.com/photos/feliciaday/3828388329/
Libraries.




             (...)
Write
less,
do
more.
             !=
Write
less,
make
it
hard
to

        maintain.
Beware
the
feature

creature.
The
feature
    Simple

loop

      Complex              Feedback



                Features
Shi[ing
our
point
of
view

to
spot
opportuni&es.
Our
technologies
are
shit

hot.
The
web
is
not
sites.
The
web
is
not
code.
It
is
about
data.




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




                 http://www.flickr.com/photos/seven13avenue/2080281038/
CMS
h@p://www.youtube.com/watch?v=_vJlADxbv4U&
Kobayashi
Maru
h@p://developer.yahoo.com/yql
Photos
from
Flickr?

select
*
from
flickr.photos.search

where
text
=
"cat"
Headlines
of
the
New
York
Times?

select
*
from
nyt.ar&cle.search

where
query="spontaneous

combus&on"
Latest
commits
on
a
GitHub
repo?

select
*
from
github.repo.commits

where
id='yql'
and
repo='yql‐tables'
Latest
headlines
of
the
Volkskrant?

select
&tle
from
html
where

url="h@p://www.volkskrant.nl/"

and
xpath="//h2[@&tle]"
Latest
English
headlines
of
the

Volkskrant?
select
*
from
google.translate

where
q
in
(select
&tle
from
html

where
url=...
Upda&ng
Twi@er?

use
'h@p://www.yqlblog.net/samples/twi@er.status.xml';
insert
into
twi@er.status

(status,username,passwo...
Upda&ng
Wordpress?

insert
into
wordpress.post

(&tle,
descrip&on,
blogurl,
username,

password)

values

("Test
Title",
"...
Upda&ng
the
internet?

delete
from
internet
where

user_agent="MSIE"
and
version
<
8;
                                    ...
Search
one
term
in
Google,
Bing
and

 Yahoo?
select
*
from
query.mul&
where
queries='
select
*
from
microso[.bing
where
qu...
1)
Define
your
Query




                    3)
Copy
the
URL.

2)
Select
your
output
Or
the
manly
way...

h@ps://query.yahooapis.com/v1/public/yql?
q={uri‐encoded‐query}&
format={xml|json}&
diagnos&cs={true|...
You
can
mix
and
match
whatever

you
want.
You
can
sort
and
limit.
You
can
extend
with
your
own
data

tables
by
wri&ng
a
sc...
Where’s
the
catch?
10k
hits
an
hour
(20k
with
oAuth).
100k
hits
a
day.
Data
is
cached
for
15
minutes
(soon

customisable).
Execu&on
limit
on
...
Let’s
bite
into
an
example.
Find
Amsterdam.

select
*
from
geo.places
where

text="amsterdam"
Define
Amsterdam
and
get
photos

taken
there.
select
*
from
flickr.photos.search

where
woe_id
in
(
select
woeid
from
geo.pl...
Get
all
the
informa&on
about
these

photos.
select
*
from
flickr.photos.infor

where
photo_id
in
(select
id
from

flickr.pho...
Get
only
what
we
need.

select
farm,
id,
secret,
owner.realname,
server,

&tle,urls.url.content
from
flickr.photos.info

wh...
Select
format
JSON,
define
a

callback
and
copy
and
paste
the

URL.
h@ps://query.yahooapis.com/v1/yql?q=select%20*
%20from%...
Copy
into
a
script
src
and
write
a

few
lines
of
Dom
Scrip&ng.
PROFIT!
                                    Too
lazy
to
change
the
demo,
meh.




 h@p://isithackday.com/hacks/ajaxexperie...
Also:
FAIL.

Do
not
trust
JavaScript
to
be

available!
So
move
your
JavaScript
server
side!

YQL
open
tables
can
have

embedded
JS
that
runs
on
the
YQL

server
(with
Rhino)
and
...
Flickr
photos
as
ULs
now:

use
"h@p://github.com/codepo8/
yql‐tables/raw/master/flickr/
flickr.photolist.xml"
as
flickr;
sele...
Display
with
JavaScript:
Display
with
PHP:
Join
us!






h@p://github.com/yql/yql‐tables
RTFM









h@p://developer.yahoo.com/yql/
Spend
your
&me
on
making
the
web

fun
for
humans,
not
pleasing

machines.
If
you
are
clever,
you
are
allowed
to

be
lazy.
Replacing
the
web
would
be
tough,

so
use
it
well.

Chris&an
Heilmann

h@p://wait‐&ll‐i.com
        Bedankt!

h@p://developer‐evangelism.com

h@p://twi@er.com/codepo8



Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities
Upcoming SlideShare
Loading in...5
×

Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities

3,488

Published on

My presentation at Fronteers 2009 about the opportunity we have as developers to liberate ourselves from the fail that is browsers and write some nice code to mix data on the web.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,488
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Fronteers 2009 Of Hamsters, Feature Creatures and Missed Opportunities"

  1. 1. Of hamsters, feature creatures and missed opportunities Chris&an
Heilmann,
Fronteers,
Amsterdam,
5th
of
November
2009
(remember,
remember)
  2. 2. Hamstering.
  3. 3. h@p://www.flickr.com/photos/codepo8/4066032678/
  4. 4. ID U P ST
  5. 5. h@p://www.flickr.com/photos/atalaya/544843059/
  6. 6. How
we
learnt
web
design
 is
not
the
right
way.
  7. 7. WaSP Interact h@p://interact.webstandards.org/
  8. 8. Opera Web Standards curriculum h@p://www.opera.com/company/educa&on/curriculum/
  9. 9. Our
job:
evolving
the
web
  10. 10. Specialists.
  11. 11. Fanboys. * *bleep
  12. 12. Good
 developers
are
 like
librarians. h@p://www.flickr.com/photos/feliciaday/3828388329/
  13. 13. Libraries. (...)
  14. 14. Write
less,
do
more. != Write
less,
make
it
hard
to
 maintain.
  15. 15. Beware
the
feature
 creature.
  16. 16. The
feature
 Simple loop Complex Feedback Features
  17. 17. Shi[ing
our
point
of
view
 to
spot
opportuni&es.
  18. 18. Our
technologies
are
shit
 hot.
  19. 19. The
web
is
not
sites.
  20. 20. The
web
is
not
code.
  21. 21. It
is
about
data. h@p://www.flickr.com/photos/22414102@N07/3508671863/
  22. 22. Building
with
components. http://www.flickr.com/photos/seven13avenue/2080281038/
  23. 23. CMS
  24. 24. h@p://www.youtube.com/watch?v=_vJlADxbv4U&
  25. 25. Kobayashi
Maru
  26. 26. h@p://developer.yahoo.com/yql
  27. 27. Photos
from
Flickr? select
*
from
flickr.photos.search
 where
text
=
"cat"
  28. 28. Headlines
of
the
New
York
Times? select
*
from
nyt.ar&cle.search
 where
query="spontaneous
 combus&on"
  29. 29. Latest
commits
on
a
GitHub
repo? select
*
from
github.repo.commits
 where
id='yql'
and
repo='yql‐tables'
  30. 30. Latest
headlines
of
the
Volkskrant? select
&tle
from
html
where
 url="h@p://www.volkskrant.nl/"
 and
xpath="//h2[@&tle]"
  31. 31. Latest
English
headlines
of
the
 Volkskrant? select
*
from
google.translate
 where
q
in
(select
&tle
from
html
 where
url="h@p:// www.volkskrant.nl/"
and
xpath="// h2[@&tle]")
and
target='en'
  32. 32. Upda&ng
Twi@er? use
'h@p://www.yqlblog.net/samples/twi@er.status.xml'; insert
into
twi@er.status
 (status,username,password) values
( 

"In
your
fronteers,
blowing
ur
mindz",









 

"codepo8", 

"didyoureallythinkIshowit?" )
  33. 33. Upda&ng
Wordpress? insert
into
wordpress.post
 (&tle,
descrip&on,
blogurl,
username,
 password)
 values
 ("Test
Title",
"This
is
a
test
body",
 "h@p://ajaxian.com",
"cheilmann",
 "iedoesitright")
  34. 34. Upda&ng
the
internet? delete
from
internet
where
 user_agent="MSIE"
and
version
<
8; soz. t ,
 t
 ye N o
  35. 35. Search
one
term
in
Google,
Bing
and
 Yahoo? select
*
from
query.mul&
where
queries=' select
*
from
microso[.bing
where
query="Jimmy
 Hoffa"
and
source
in
("web"); select
*
from
google.search
where
q
=
"Jimmy
 Hoffa"; select
*
from
search.web
where
query
=
"Jimmy
 Hoffa" '
  36. 36. 1)
Define
your
Query 3)
Copy
the
URL. 2)
Select
your
output
  37. 37. Or
the
manly
way... 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
  38. 38. You
can
mix
and
match
whatever
 you
want. You
can
sort
and
limit. You
can
extend
with
your
own
data
 tables
by
wri&ng
a
schema
and
 pu|ng
it
on
GitHub. You
can
store
informa&on
on
the
 YQL
servers
(the
cloud,
the
cloud)
  39. 39. Where’s
the
catch?
  40. 40. 10k
hits
an
hour
(20k
with
oAuth). 100k
hits
a
day. Data
is
cached
for
15
minutes
(soon
 customisable). Execu&on
limit
on
the
server
is
30
 seconds
(for
now).
 
a ll! at ’s T h
  41. 41. Let’s
bite
into
an
example.
  42. 42. Find
Amsterdam. select
*
from
geo.places
where
 text="amsterdam"
  43. 43. Define
Amsterdam
and
get
photos
 taken
there. select
*
from
flickr.photos.search
 where
woe_id
in
( select
woeid
from
geo.places
where
 text="amsterdam" )
  44. 44. Get
all
the
informa&on
about
these
 photos. select
*
from
flickr.photos.infor
 where
photo_id
in
(select
id
from
 flickr.photos.search
where
woe_id
 in
(select
woeid
from
geo.places
 where
text="amsterdam"))
  45. 45. Get
only
what
we
need. select
farm,
id,
secret,
owner.realname,
server,
 &tle,urls.url.content
from
flickr.photos.info
 where
photo_id
from
flickr.photos.infor
where
 photo_id
in
(select
id
from
flickr.photos.search
 where
woe_id
in
(select
woeid
from
geo.places
 where
text="amsterdam"))
  46. 46. Select
format
JSON,
define
a
 callback
and
copy
and
paste
the
 URL. 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
  47. 47. Copy
into
a
script
src
and
write
a
 few
lines
of
Dom
Scrip&ng.
  48. 48. PROFIT! Too
lazy
to
change
the
demo,
meh. h@p://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html
  49. 49. Also:
FAIL.

  50. 50. Do
not
trust
JavaScript
to
be
 available!
  51. 51. So
move
your
JavaScript
server
side! YQL
open
tables
can
have
 embedded
JS
that
runs
on
the
YQL
 server
(with
Rhino)
and
supports
 XML
na&vely
with
E4X.
  52. 52. Flickr
photos
as
ULs
now: use
"h@p://github.com/codepo8/ yql‐tables/raw/master/flickr/ flickr.photolist.xml"
as
flickr; select
*
from
flickr
where
text="me"
 and
loca&on="uk"
and
amount=20
  53. 53. Display
with
JavaScript:
  54. 54. Display
with
PHP:
  55. 55. Join
us!






h@p://github.com/yql/yql‐tables
  56. 56. RTFM









h@p://developer.yahoo.com/yql/
  57. 57. Spend
your
&me
on
making
the
web
 fun
for
humans,
not
pleasing
 machines.
  58. 58. If
you
are
clever,
you
are
allowed
to
 be
lazy.
  59. 59. Replacing
the
web
would
be
tough,
 so
use
it
well.
  60. 60. 
Chris&an
Heilmann 
h@p://wait‐&ll‐i.com
 Bedankt! 
h@p://developer‐evangelism.com 
h@p://twi@er.com/codepo8



  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×