fuel for a great web experience
Post on 12-Sep-2014
7.314 views
DESCRIPTION
My talk at the developer evening at La Cantine in Paris covering all the free services Yahoo offers developers.TRANSCRIPT
![Page 1: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/1.jpg)
Fuel for a
great web
experience.
Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org
La Cantine, Paris, April 2009
![Page 2: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/2.jpg)
As web developers our job is to build interfaces.
![Page 3: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/3.jpg)
Interfaces that allow people to reach their goals easily.
![Page 4: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/4.jpg)
Today I am here to talk to you about tools that make it easy for you to do that.
![Page 5: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/5.jpg)
All of which are part of what we offer you.
![Page 6: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/6.jpg)
And are free for you to use.
![Page 7: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/7.jpg)
For all this, you need to remember one URL:
![Page 9: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/9.jpg)
I will talk about 7 things we offer and how to use them.
![Page 10: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/10.jpg)
1We provide a great online experience.
![Page 11: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/11.jpg)
Yahoo’s products are built by teams of experts who are passionate about their jobs.
![Page 12: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/12.jpg)
We try our hardest to make things work for everybody out there.
![Page 13: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/13.jpg)
This means first and foremost to take the time and think about what we are trying to achieve.
![Page 14: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/14.jpg)
![Page 15: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/15.jpg)
Analyse what users want to do here:
Define type of search,
enter search term,
submit form.
![Page 16: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/16.jpg)
Then use what allows them to do exactly that.
![Page 17: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/17.jpg)
How about this one?
![Page 18: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/18.jpg)
Analyse what data you display, and find the easiest way to show it.
Then make it look the way you want it to.
![Page 19: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/19.jpg)
Sometimes you need to make technologies work by building workarounds.
![Page 20: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/20.jpg)
Screenshots of uk.video.yahoo.com with and without JavaScript
http://uk.video.yahoo.com/
![Page 21: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/21.jpg)
![Page 22: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/22.jpg)
We build things using progressive enhancement.
![Page 23: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/23.jpg)
Without JavaScript With JavaScript
http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array_clean.html
![Page 24: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/24.jpg)
Without JavaScript
With JavaScript
http://developer.yahoo.com/yui/examples/datatable/dt_enhanced.html
![Page 25: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/25.jpg)
Once we found out the goals of our users, we drive for excellence.
![Page 26: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/26.jpg)
http://finance.yahoo.com/currency-converter?u#from=USD;to=EUR;amt=1
![Page 27: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/27.jpg)
http://developer.yahoo.net/blog/archives/2009/01/accessible_converter.html
![Page 28: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/28.jpg)
2We share the data that drives this experience.
![Page 29: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/29.jpg)
Our research with users resulted in patterns that we apply to help people reach their goals as quickly as possible.
![Page 30: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/30.jpg)
These patterns are available for you to apply to your own products.
![Page 31: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/31.jpg)
http://developer.yahoo.com/ypatterns
![Page 32: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/32.jpg)
http://developer.yahoo.com/ypatterns/wireframes/
![Page 33: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/33.jpg)
Under the hood, our systems are driven by APIs to make sure we can scale products to our size.
![Page 34: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/34.jpg)
These are available to you, too.
![Page 35: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/35.jpg)
http://developer.yahoo.com/everything.html
![Page 36: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/36.jpg)
3We share the research we’ve done to make it a smooth
experience.
![Page 37: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/37.jpg)
The exceptional performance section of YDN provides detailed information on how to make your products behave faster.
![Page 38: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/38.jpg)
http://developer.yahoo.com/performance/
![Page 39: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/39.jpg)
4We provide building blocks to build your own great
experience.
![Page 41: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/41.jpg)
The Yahoo User Interface library is a CSS and JavaScript framework to build working web applications and sites.
![Page 42: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/42.jpg)
http://developer.yahoo.com/yui/grids/builder/
![Page 43: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/43.jpg)
Unlike other frameworks YUI is not a catch-all solution but is cut up into modules, each fulfilling one job.
![Page 44: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/44.jpg)
![Page 45: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/45.jpg)
You can use any of these modules on their own, even together with other libraries.
![Page 46: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/46.jpg)
We’ve used these modules to create reusable widgets based on out design patterns.
![Page 47: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/47.jpg)
http://ui.jquery.com/
http://ui.jquery.com
![Page 48: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/48.jpg)
The YUI widgets come with an own style that can be fully customised.
![Page 49: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/49.jpg)
http://developer.yahoo.com/yui/articles/skinning/
![Page 50: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/50.jpg)
They all are event driven which means you can change their workings without changing their code.
![Page 51: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/51.jpg)
http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_xhr_log.html
![Page 52: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/52.jpg)
5We provide tools to improve your products.
![Page 53: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/53.jpg)
All our products are built around a defined methodology defining browser support.
![Page 54: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/54.jpg)
http://developer.yahoo.com/yui/articles/gbs/
![Page 55: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/55.jpg)
You can use this methodology to scope out client work without over promising.
![Page 56: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/56.jpg)
One great tool to test the quality of a web sites is YSlow.
![Page 57: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/57.jpg)
How can you make it faster?
http://developer.yahoo.com/yslow/
![Page 58: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/58.jpg)
http://developer.yahoo.com/yui/logger/
![Page 59: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/59.jpg)
http://developer.yahoo.com/yui/profilerviewer/
![Page 60: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/60.jpg)
http://developer.yahoo.com/yui/yuitest/
![Page 61: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/61.jpg)
6We offer amazingly easy interfaces to the web.
![Page 62: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/62.jpg)
First there was Pipes.
![Page 64: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/64.jpg)
However, Pipes was too complex and not flexible enough as you cannot change a pipe programatically.
![Page 65: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/65.jpg)
So we came up with a query language for the web: YQL.
![Page 66: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/66.jpg)
Say you want to get photos of Paris that you are allowed to show in your own products.
![Page 67: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/67.jpg)
You need to define Paris without a doubt.
select woeid from geo.places where text='Paris,france'
![Page 68: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/68.jpg)
Then find photos that were taken there.
select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='paris,france')
![Page 69: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/69.jpg)
Check that they have the right license.
select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='paris,france') and license=4
![Page 70: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/70.jpg)
And get all the information about them.
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='paris,france') and license=4)
![Page 71: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/71.jpg)
http://developer.yahoo.com/yqlhttp://developer.yahoo.com/yql/console/?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%27paris%2Cfrance%27)%20and%20license%3D4)
![Page 72: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/72.jpg)
You have the data, now you can build a nice interface to show it.
![Page 73: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/73.jpg)
http://isithackday.com/hacks/cantine/index.php?loc=paris,france
![Page 74: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/74.jpg)
All without having to spend hours on reading either the Flickr or the GeoPlanet API docs :)
![Page 75: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/75.jpg)
Using YQL and YUI you can create a whole web site maintained elsewhere.
![Page 76: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/76.jpg)
![Page 77: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/77.jpg)
![Page 78: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/78.jpg)
YQL makes access to all kind of APIs very easy.
![Page 79: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/79.jpg)
What if you want to add yours?
![Page 80: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/80.jpg)
YQL has a concept of “Open Tables”.
![Page 81: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/81.jpg)
This means you can tell us about your API endpoint and parameters in an XML schema...
![Page 82: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/82.jpg)
...point to this schema and use it as a table in YQL.
![Page 83: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/83.jpg)
For example: Twitter.
![Page 84: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/84.jpg)
![Page 85: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/85.jpg)
use "http://github.com/spullara/yql-tables/raw/4832c92c38389e98f5ceef017f61d59a9e027664/twitter/twitter.user.timeline.xml" as twitter;select title,link from twitter where id='codepo8'
![Page 86: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/86.jpg)
There’s a repository of open tables available on github.
![Page 87: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/87.jpg)
http://github.com/spullara/yql-tables/tree/master
![Page 88: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/88.jpg)
Add yours, get people to use your API and get famous :)
![Page 89: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/89.jpg)
7We offer our search index to tailor to vertical markets.
![Page 90: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/90.jpg)
http://developer.yahoo.com/search/boss/
![Page 92: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/92.jpg)
![Page 94: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/94.jpg)
view=searchmonkey_rdf
view=searchmonkey_feed
http://developer.yahoo.com/search/boss/structureddata.html
![Page 96: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/96.jpg)
So there you have it – 7 things we offer you as developers to use and learn from.
![Page 97: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/97.jpg)
We’re improving our work by getting your feedback and seeing your implementations.
![Page 98: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/98.jpg)
And you can build much better products by basing them on working solutions and concentrating on the delivery of your products rather than problems we already had to solve for you.
![Page 99: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/99.jpg)
Come and grab and show us what you can do!
![Page 100: Fuel for a great web experience](https://reader033.vdocument.in/reader033/viewer/2022051311/5412ef718d7f72174e8b4629/html5/thumbnails/100.jpg)
Christian Heilmann
http://icant.co.uk
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8
Thanks.Any questions?