Christian Heilmann gave a talk about tools and resources available from Yahoo to help developers build great web products more easily. He discussed Yahoo's pattern library, YUI library, YQL data querying language and more that provide reusable components, standardized CSS/JavaScript, and access to data to help developers build applications. All of these resources are open source and aim to improve the web development experience.

1. Things to use, find
and share.
Christian Heilmann | http://icant.co.uk | http://wait-till-i.com
Yahoo7 Open Session, Sydney, Australia April 2009

2. Hi there, I am Chris.

3. I am right now on a pretty
mental schedule giving talks
down south.

4. Last week I flew from home
(London, UK) to Hong Kong,
Taipei, drove to Hsinchu, back
to Taipei, onwards to Sydney
via Hong Kong, then to
Melbourne and now back to
Sydney.

5. All with the mission to share
good info to make web
development easier.

6. Doing that and not sleeping
much does things to you.

7. You see hidden messages.

8. ...and you misinterpret others.

9. I live in London, England

10. Spring Summer
The snow flake that spells the end of public transport
*
Autumn Winter

11. Originally I am German

12. FIRST!

13. Humour.

14. I building great interfaces to
access and find data.

15. And I love making them work
for everybody.

16. The problem is that for years
it was quite a job to make this
is a reality.

17. Nowadays we are very lucky
as developers.

18. It is increasingly easy to
develop great products.

19. The trick is to build them with
parts that are proven to work.

20. And these parts are readily
available for us.

21. Over the last years a
revolution happened.

22. Companies and individuals
started realizing the power of
giving things out to the
public.

23. By allowing people to use
your products and keep an
open ear you have a great
opportunity to improve them.

24. And this is exactly what we
do at the Yahoo Developer
Network.

26. Basically almost everything
you see in use on Yahoo’s
sites is available to you to
build your solutions on.

27. This starts with the thing
great products are built on:
user research.

28. http://developer.yahoo.com/ypatterns

29. The pattern library contains
information on how users
told us they reach their goals
on our sites the easiest.

30. The information is licensed
creative commons, which
means you can use and alter
it.

31. If you want to plan your
interfaces based on these
results, you even get them as
stencils.

32. http://developer.yahoo.com/ypatterns/wireframes/

33. Once you planned your
product, the next problem is
ensuring it works.

34. For this, we need to somehow
make sense of the crazy
world of user agents
(browsers, really).

35. Trying to build web products
that look and work the same
for every browser out there is
not possible...

36. ...unless you limit yourself to
a terrible user experience.

37. As we didn’t want this, we
came up with a methodology
to define “support”.

38. http://developer.yahoo.com/yui/articles/gbs/

39. Once this was done, we had a
chance to fix problems and
build a solid base to work on.

40. http://developer.yahoo.com/yui/

41. The Yahoo User Interface
Library starts with making
the creation of predictable
designs easy.

42. CSS

43. CSS reset gets rid of browser
differences.

44. CSS fonts allow you to create
predictable and scalable
typography across browsers.

45. And CSS grids allow you to
create multi-column layouts.

46. Even for *very* lazy developers:
http://developer.yahoo.com/yui/grids/builder/

47. Once the CSS was less
confusing, we tackled
JavaScript and browser
confusions.

49. And with this arsenal we built
reusable widgets to mix and
match.

50. http://ui.jquery.com/
http://ui.jquery.com

51. All of the widgets can be
extended and styled the way
you want them to.

52. http://developer.yahoo.com/yui/articles/skinning/

53. You can extend the widgets
by listening for events that
happen to them.

54. http://developer.yahoo.com/yui/examples/autocomplete/
ac_basic_xhr_log.html

55. They are built with ideas I
very much subscribe to, like
progressive enhancement.

56. Without JavaScript With JavaScript
http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array_clean.html

57. Without JavaScript
With JavaScript
http://developer.yahoo.com/yui/examples/datatable/dt_enhanced.html

58. We provide the bricks,
you build the product.
http://www.flickr.com/photos/seven13avenue/2080281038/

59. All of this is open source, fully
documented and you can
either host it yourself or get it
from a high speed distributed
network (even Google’s).

60. Another thing to consider is
how your products perform.

61. Fast and smooth products
make users happy.

62. http://developer.yahoo.com/performance/

63. You can test your products
easily with YSlow.
http://developer.yahoo.com/yslow/

64. This solves most of our issues
these days.

65. And allows you to quickly
create products that work.

66. This solves most of our issues
these days.
http://tweeteffect.com/

67. How about reaching out and
finding data in other
resources?

68. http://developer.yahoo.com/search/boss/

69. Using Yahoo BOSS you can
build own search engines
based on Yahoo’s search
index.

70. Results include news, images
or web results.

71. Including keywords,
microformats, RDF, social
bookmarking data, incoming
links...

72. Thus you can create niche
search products.

73. Thus you can create niche
search products.
http://keywordfinder.org/

74. Thus you can create niche
search products.
http://icant.co.uk/sandbox/unsafe.html

75. What if you want to reach
even further?

76. I personally have this crazy
idea of the web.

77. Users see the web as an
interface.

78. Developers have x-ray vision
and see code

79. I see something different.

80. *
Sweet data to pick and mix.
http://www.flickr.com/photos/25802865@N08/3195857208/

81. We’ve provided a way to
access this data for quite a
while now.

82. http://pipes.yahoo.com

83. However, this was all visual.

84. How about doing this on a
language basis?

85. Say you want to get photos of
Sydney that you are allowed
to show in your own products.

86. You need to define Sydney,
Australia without a doubt.
select woeid from
geo.places where
text='sydney,au'

87. Then find photos that were
taken there.
select id from flickr.photos.search
where woe_id in (select woeid from
geo.places where text='sydney,au')

88. Check that they have the
right license.
select id from flickr.photos.search
where woe_id in (select woeid from
geo.places where text='sydney,au')
and license=4

89. 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='sydney,au') and license=4)

90. http://developer.yahoo.com/yql
http://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%27sydney%2Cau%27)%20and
%20license%3D4)

91. YQL gets the data, caches it
and gives you information
about the retrieval time.

92. The results are available in
XML or JSON and can be
filtered down to the bare
necessities.

93. Using this you can get all the
data you spread on the web...

94. ...and collate it in a single
interface.

97. You can also use YQL to help
people like me to get and use
data provided by you using
this interface.

98. The trick is to tell us with a
schema where your data is.

99. And then use the schema in a
query inside YQL as an “open
table”

100. use 'http://eatyourgreens.org.uk/yql/nmm-
search.xml' as nmm;
select * from nmm where category = 'art'
and searchterm = 'quot;tower bridgequot;'

101. A lot of companies already
start doing that.

102. http://github.com/spullara/yql-tables/tree/master

103. So, go and grab and use and
give back and we’ll all make
the web the best it can be.

104. THANKS!
Christian Heilmann
http://icant.co.uk
http://wait-till-i.com
Text
http://scriptingenabled.org
http://twitter.com/codepo8