Things you can use
...provided by the Yahoo Developer Network
and friends.
Chris&an Heilmann ‐ YDN Developer Evening, Oslo, Norway ‐ December 2009

Web development is
confusing enough as it is.

There is no need to make it
harder by not using what has
been done for us.

Today, I am going to show
you some things that you can
use immediately to build
faster and beIer web
products.

Quickly about me:

hIp://developer‐evangelism.com

hIp://developer.yahoo.com
Quickly about me:

Learning the basics
10 INPUT A$
20 PRINT A$
30 PRINT “ROCKS!”
40 GOTO 10

WaSP Interact
hIp://interact.webstandards.org/

Opera Web Standards
curriculum
hIp://www.opera.com/company/educa&on/curriculum/

YDN Theater
hIp://developer.yahoo.net/blogs/theater/

No more copy & paste and
trial and error.

Star&ng with a clean canvas.
hIp://developer.yahoo.com/yui/ar&cles/gbs/

Web sites are not meant to
look and work the same
everywhere.

On the contrary ‐ the ability
to accustom the interface to
different user agents is what
makes web development so
powerful.

CSS frameworks and frontend
libraries
(...)

Libraries make our job
predictable and allow us to
use web standards without
catering for browsers.

If you build your code based
on libraries you can fix your
product for the next browser
by upgrading the library.

If you choose to do
everything yourself ‐ good
luck.

Building interfaces that work

hIp://developer.yahoo.com/ypaIerns

hIp://developer.yahoo.com/ypaIerns/wireframes/

Using the web.
CMS

Thinking data first.

The complexity of your
product increases with the
number of APIs you use.

Every API has different ways
to authen&cate, expects
different parameters and
returns data in different
formats.

Mixing the web with YQL
1) Define your Query
3) Copy the URL.
2) Select your output

Find London.
select * from geo.places where
text="london,uk"

Define London and get photos taken
there.
select * from flickr.photos.search
where woe_id in (
select woeid from geo.places
where text="london"
)

Get all the informa&on about these
photos.
select * 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"))

Get only what we need.
select farm, id, secret,owner.realname, server,
&tle,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.
hIp://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&diagnos&cs=false&env=store%3A
%2F%2Fdatatables.org
%2Falltableswithkeys&callback=flickr

Copy into a script src and write a
few lines of Dom Scrip&ng.

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

Is this Yahoo only?

Any data on the web will do.
atom
csv
feed
select * from html
json
microformats
rss
xml

http://www.dcs.gla.ac.uk/~joy/fun/jokes/TV.html

Any data on the web will do.
hIp://isithackday.com/hacks/scraping‐with‐yql/

You can also add your own
data by providing a simple
XML schema called an open
table.
hIp://developer.yahoo.com/yql/guide/yql‐opentables‐chapter.html

Moving JavaScript to the
server side.

YQL open tables can have
embedded JS that runs on
the YQL server (with Rhino)
and supports XML na&vely
with E4X..
hIp://developer.yahoo.com/yql/guide/yql‐execute‐chapter.html

Flickr photos as ULs
select * from flickr.photolist where
text="me" and loca&on="uk" and
amount=20

Display with JavaScript

Display with PHP

Join us! hIp://github.com/yql/yql‐tables

Documenta&on hIp://developer.yahoo.com/yql/

Building with blocks.

Build a CSS layout that works.
http://developer.yahoo.com/yui/grids/builder/

Use already exis&ng widgets.
http://isithackday.com/hacks/cantine/
index.php?loc=covent+garden
hIp://isithackday.com/hacks/can&ne/

hIp://isithackday.com/hacks/delhi/

hIp://developer.yahoo.com/yui/

hIp://developer.yahoo.com/yui/docs/

hIp://developer.yahoo.com/yui/examples/

Wanna get super famous?

YAP is the plalorm
hIp://developer.yahoo.com/yap/guide/yap‐overview.html

hIps://developer.apps.yahoo.com/dashboard

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

Yahoo Markup Language
hIp://developer.yahoo.com/yap/guide/yapdev‐yml.html

YML Tags
yml:a yml:name
yml:ad yml:profile‐pic
yml:audio yml:pronoun
yml:form yml:share
yml:friend‐selector yml:swf
yml:if‐env yml:user‐badge
yml:message

Building a form in YML.
script to call element to replace

A very simple API on top of
YQL

hIp://yahoo.com/add?yapid=zKMBH94k

hIp://github.com/yahoo/yos‐social‐php

YUI in a nutshell...
YUI is the system that Yahoo uses to build its
web sites. It is constantly tested to work for the
largest amount of users, free, open source and
covers everything from design paIerns to out‐of‐
the‐box widgets. It is modular and you can use
only what you need. You can either host it
yourself or get it from a network of distributed
servers.

YQL in a nutshell
YQL is a web service that allows you to mash‐up
any data on the web from various sources with a
simple SQL‐style language. You can filter the
data down to what you need and you can
convert the data with server‐side JavaScript
before returning it. Data providers can use YQL
to publish an API on the web on top of Yahoo’s
infrastructure and cloud storage.

YAP in a nutshell
YAP is the Yahoo Applica&on Plalorm which
allows you to build applica&ons that run on the
Yahoo homepage and soon other proper&es. You
can dive into Yahoo’s social graph to promote
your applica&ons and you can create highly
secure web apps as YAP uses Caja to ensure code
quality.

... and I am spent!

Christian Heilmann
http://wait-till-i.com
http://developer-evangelism.com
http://twitter.com/codepo8