My presentation for the Sunderland Hack Challenge

1. Hacking
for
Innovation
Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org
Sunderland, UK, University Hack Challenge, January 2009

2. Hello, I am Chris.

3. I am a hacker
and a geek.

4. The term hacking has a lot of
different meanings.

5. To me it means:
“Altering a system to do what
you want it to do using what
is at your disposal.”

6. It also means having a lot of
fun trying to make things do
what they weren’t made for.

7. It is unrestrained innovation.

8. So welcome, innovators!

9. We’re here to host a
University Hack Challenge

10. We want you to show us what
can be built using the systems
we (and others) offer...

11. ...that makes a difference in
your lives and make the
things you care about easier
to achieve.

12. Find something that always
annoyed you with systems
you use...

13. ...and build a workaround.

14. You’ll be amazed about the
impact this can have.

15. To reach hackvana you need
three things:

16. Access, Data and Users

17. Access happens on several
channels.

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

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

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

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

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

24. RSS or Really Simple
Syndication was born.

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

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

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

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

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

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

31. Which brings you to the
second hack ingredient: data.

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

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

35. ... lots more...

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

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

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

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

41. What if you want to use
several sources?

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

43. http://pipes.yahoo.com

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

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

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

47. Now you got the access and
you got the data. Time to
consider the users.

48. Building *working* web
interfaces is a specialist skill.

49. I’ve been developing for the
web for 12 years and it still is a
mystery to me why some
things just don’t work.

50. The technologies are easy
enough:
HTML for structure
CSS for presentation
JavaScript for behaviour

51. Where it gets truly annoying is
the unknowns.

52. You have no idea about the
user’s setup, ability or rights
to change their technical
environment.

53. And then there are the
browsers and all their
wonderful bugs and quirks.

54. This is why it is a good start to
use libraries or frameworks.

55. Their only reason of being is to
make your life as a developer
easier and development less
random.

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

57. Using these, you can quickly
build interfaces that work on
the web and mobiles.

58. What about reach?

59. The newest way of access that
systems and companies allow
you these days is opening up
their address books.

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

61. Instead of building it and
waiting till people come, build
where the people are.

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

63. How about
some hack
examples?

64. I am a big fan of accessibility.

65. The web is supposed to be for
everybody – regardless of
physical or mental access
restrictions.

66. At Accessibility2.0 Antonia
Hyde asked for a video player
that works for people with
learning disabilities.

67. http://www.slideshare.net/hi.antonia/rich-
media-and-web-apps-for-people-with-learning-
disabilities

68. Shortly before YouTube
announced their API to build
your own YouTube Player.

69. I took the API and Antonia’s
findings and built
EasyYouTube.

70. Screenshot of Easy YouTube
http://icant.co.uk/easy-youtube/?http://
www.youtube.com/watch?v=vkdZmi85gxk

71. Easy controls
★
Option to search for videos
★
Copy and paste video URL to share
★
Select video size
★
Easy Volume Control
★
Option to show a playlist created with del.icio.us
★
Option to search YouTube
★
API to automatically open videos in Easy YouTube
★
Documentation how to host it yourself
★
Open Source
★

72. Another example:
I use Twitter – a lot.

73. Not all of my updates there
are valid for re-distribution
though.

74. So I use Pipes to filter my
updates and get them back as
JSON:
http://pipes.yahoo.com/pipes/pipe.info?
_id=f7229d01b79e508d543fb84e8a0abb0dd

75. And adding a few more lines
of JavaScript I can now
display my “useful tweets” on
my blog:

76. http://www.wait-till-i.com/2008/09/28/useful-tweets-with-pipe/

77. Another example:
I use SlideShare – a lot.

78. http://www.slideshare.net/cheilmann/slideshows

79. One cool thing is
that SlideShare
automatically
creates
transcripts of
your slides:

80. So I’ve used this to create a
version that is easily
accessible for blind people or
those who don’t have Flash.

81. http://icant.co.uk/easy-slideshare/?slides=http://
www.slideshare.net/cheilmann/playing-with-the-web-
presentation

82. Using YQL, it was also easy to
write a JavaScript wrapper
that allows you to show the
transcripts with your slides.

83. http://www.wait-till-i.com/2009/01/11/adding-transcripts-to-
presentations-embedded-from-slideshare-using-yql/

84. However, coming here I
wanted to show a quick new
example and spent an hour
on Sunday on a hack.

85. I think I said, I use Twitter – a
lot.

86. I got all this emails from
Twitter telling me about
people following me.

87. What I didn’t get was it telling
me when people left me.

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

89. So I dug into the API a bit and
built TweetEffect.com

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

95. I put it up, and started testing
edge cases.

96. One of them was Guy
Kawasaki, whom I knew has a
lot of followers and updates.

97. One of them was Guy
Kawasaki, whom I knew has a
lot of followers and updates.

98. And that started a landslide of
visitors, comments and ideas
for it.

99. Tim O'Reilly
Guy Kawasaki
Ryan Carson

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

101. Innovation is not a matter of
skill or being in the right job
position.

102. It is a matter of wanting to
change what we have and be
ready to play.

103. We do this to help you see
your potential.

104. And we do this to see if we do
a good job in explaining our
offers to the developer world.

105. The web is yours, go out and
play!

106. THANKS!
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8
Moon bridal hat photo:
http://www.flickr.com/photos/foxtongue/23309042/
All other photos of the interwebs