1. HackTech
Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org
Georgia, Atlanta, US, Hack-U Georgia Tech, March 2009

2. Hello, I am Chris.

3. I am a hacker
and a geek.

4. And I love to share my
passion.

5. http://wait-till-i.com
http://twitter.com/codepo8

6. It is nice to be back in Atlanta.

7. Last time I was
here for the
Webmaster Jam
session

8. All work and no play.

9. This time I am here to help out
with the University Hack Day
for Georgia Tech.

10. As part of a big hack team.

11. All of which are not here yet
because of snow.

12. I live in London, England.

13. And coming here I made a new
enemy.

14. Arrival + Passport Control +
waiting for luggage.
Hartsfield Airport

15. Go through customs +
put luggage on another
conveyor belt.
Hartsfield Airport

16. Go through security once
more – belt out, shoes
off, laptop out.
Hartsfield Airport

17. Take train to main
Hartsfield Airport
baggage retrieval

18. Your luggage is
probably here
Hartsfield Airport

19. All the luggage from all the
flights of the same airline gets
collected in the arrivals hall for
pickup at a single point.

20. This baggage belt is publicly
available, no need to have a
ticket.

21. Asking for the reason of this
procedure built to delay
people and make it easy to
steal luggage what is the
answer?

22. Security, sir.

23. This was not built by geeks.

24. Geeks are
great to have
as they get
excited about
everything.

25. Geeks are also full of ideas
and need a channel to release
these ideas.

26. This is why we at Yahoo have
Hack Days.

27. For 24 hours normal work is
put on hold and the geeks are
allowed to roam free.

28. We can take any of our
systems and build something
totally new with it.

29. This allows people to do what
they always wanted but
didn’t have a chance to.

30. It also allows people to play
with new technologies.

31. This was such a massive
success that we thought to
take it on the road.

32. We now have Open Hack Days
around the globe.
Sunnyvale (2x), Taiwan, London, Bangalore (2x), Sao Paulo

33. These are massive affairs

34. And we do University Hack
Days!
USA, India, Great Britain

35. These are somewhat smaller.

36. But they follow the same
flow.

37. But they follow the same
flow.
Hack

38. Snack Hack
Recharge
Eat!

39. Hack Fix
Present
Win!

40. The question is though: where
do you start?

41. After all, you are not a geek,
right?

42. A good hack starts with an
idea.

43. It starts with
something
you care
about.

44. And it starts with
having fun with it.

45. Nobody expects you to deliver
the hottest new thing for the
market.

46. But we expect you to have a
good stab at building
something new.

47. A good hack doesn’t need to
be a big thing.

48. But it should make a
difference.

49. Here’s one not so current
example.

51. HACKER!
http://en.wikipedia.org/wiki/John_Snow_(physician)

52. John Snow helped the London
authorities in 1854 to trace
back the reason of cholera...

53. ...by placing the deaths
caused by cholera on a map
and analyze the surroudings.

55. The answer:
water supply!

56. This hack relied on the first
thing you should think about.

57. DATA

58. John Snow spent quite a
while collecting his data.

59. Nowadays this
is much easier
and you don’t
need to be a
data wizard.

60. What do you see when you
surf the web?

61. End users see web sites

62. Developers see code.

63. I see sweet, sweet data!

64. And it has never been easier
to get these sweets and bake
them into something new.

65. The oldest way is to cheat
your way in using a very cool
piece of software.

67. Using cURL, you can be your
own browser and get any
data from the web to remix.

68. The problems are that you
don’t get the data back in a
structured way.

69. You’re at the
mercy of the
HTML structure
and if that one
changes your
hack fails to
work.

70. This is why clever companies
realized that it does make
sense to offer their data in
easier to digest formats.

71. RSS or Really Simple
Syndication was born.

72. http://www.guardian.co.uk/travel/restaurants

73. http://www.guardian.co.uk/travel/restaurants/rss

74. Using RSS or Atom feeds you
get data in a predictable and
easy to convert format.

75. It doesn’t allow you to request
specific data or define a
different format though.

76. This was the next step: REST
APIs or Web Services.

77. REST based Web Services
allow you to request the
correct data from a system.

78. Yahoo Answers
http://uk.answers.yahoo.com

79. http://answers.yahooapis.com/
AnswersService/V1/questionSearch?
query=sunderland&region=uk&lang=e
n&appid=yahoodemo

81. ... lots more...

82. http://developer.yahoo.com/answers/V1/questionSearch.html

83. A lot of web services also
allow you to choose your data
format.

84. http://answers.yahooapis.com/
AnswersService/V1/questionSearch?
query=sunderland&region=uk&lang=e
n&appid=yahoodemo&start=1&output=
json&callback=useme

86. This makes it dead easy to get
the data and re-use it in your
own interfaces.

87. What if you want to use
several sources?

88. There’s Yahoo Pipes for
mixing, filtering and
matching.

89. http://pipes.yahoo.com

90. Or if you like SQL-style data
conversion there’s YQL:

91. http://developer.yahoo.com/yql/console/

92. Both of these systems allow
you to reach data from Yahoo
and other services and pre-
filter it for use in your own
hacks.

93. Let’s think about the next
thing you should consider
about your hack.

94. A working and interesting
interface.

95. I don’t care what interface
your hack uses.

96. However, if your build a web
application...

97. ... be aware that it is
deceptively easy to write
HTML, CSS and JavaScript...

98. ... but there
are dozens of
ways to mess
it up.

99. The wild wild web is full of
bad browsers and setups.

100. You have no right to require a
certain setup and you have
no clue about what is used.

101. Therefore it is a good idea to
find a way to abstract these
unknowns away from you.

102. If you’re thinking about
building something running
on mobiles (cell phones), this
increases tenfold.

103. Two helpers (from us) are
available to you:

104. Here are our helpers:
YUI
BluePrint
http://developer.yahoo.com/yui/ http://mobile.yahoo.com/developers

105. There will be detailed talks
about these later in the week.

106. One thing I want people to
think about when building
interfaces.

107. Think about accessibility.

108. Any web product
should be
available to users
regardless of their
ability.

109. The next thing
to wonder is
how to get
users for your
hack.

110. One cool thing is that
companies nowadays not
only offer their data to you...

111. ...but also allow you to piggy-
back on their user
relationships.

112. http://developer.yahoo.com/social/socialdir/
http://code.google.com/apis/opensocial/
http://developers.facebook.com/connect.php

113. You can also build
applications for where people
are anyways.

114. http://developer.yahoo.com/yap/

115. vv v
||v |v
| .-, | | |
.--./ / | _.---.|
'-. (__..-quot;
And of course a|
',.__. ,__.-'/
there is Twitter. '--/_.'----'`
T H E W HA L E
SLEEPS
T O N I G HT

116. How about
some hack
examples?

117. Let’s take Twitter.

118. I’m a big Twitter user.

119. I like that I get notified when
there is a new person
following me.

120. What I don’t know is when
people left me.

121. Or what I was telling the
world before they left me.

122. (which could be related)

123. So I read the API docs, and
found the user_timeline
function.
http://apiwiki.twitter.com/REST+API+Documentation#usertimeline

125. Notice the repetition.

127. For every tweet there is the
whole user information and a
timestamp.

128. Using this I could show the
change in user numbers and
see if that happened in a very
short period of time.

129. Adding YUI CSS grids and
Google Charts I built
TweetEffect.com

130. http://tweeteffect.com/?user=codepo8

132. And ended up where I quite
didn’t expect to be.

134. Another quick example. This
time from Rasmus.

135. How do you get a map of all
the current earthquakes on
the planet?

136. http://paul.slowgeek.com/hacku/examples/
jslibrary4.php

138. What about reach?
That was us, time for you to show
what you can do!

139. Build teams and think of a
hack.

140. Find a need.

141. Or look at an
existing solution
from a different
angle.

142. And then know
where to go.

143. All of our APIs, documentation
and examples:
http://developer.yahoo.com

144. Very quick and dirty code
examples for hacks:
http://paul.slowgeek.com/hacku/

145. Rasmus Lerdorf’s demos
http://talks.php.net/show/hacku/1

146. Start thinking about the hack
and plan it.

147. You will have 24 hours to
build a working prototype.

148. Don’t get lost in shiny bells
and whistles and try to
impress with a snazzy
interface.

149. Don’t be too shy to ask for
help, we are here all week!

150. Don’t listen to the feature
creature on your shoulder to
add yet another thing to the
hack.

151. Instead plan for a solid base
functionality and then build
on top of that.

152. However, don’t get
too stressed when
there are a few
broken bits.

153. We want you to find your own
potential and show us what
you can do with our offers!

154. THANKS!
Keep in touch:
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8