Hacking for

Innovation

Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org

Sunderland, UK, University Hack Challenge, January 2009

Hello, I am Chris.

I am a hacker and a geek.

The term hacking has a lot of different meanings.

To me it means:

“Altering a system to do what you want it to do using what

is at your disposal.”

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

It is unrestrained innovation.

So welcome, innovators!

We’re here to host a University Hack Challenge

We want you to show us what can be built using the systems

we (and others) offer...

...that makes a difference in your lives and make the

things you care about easier to achieve.

Find something that always annoyed you with systems

you use...

...and build a workaround.

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

To reach hackvana you need three things:

Access, Data and Users

Access happens on several channels.

The oldest way is to cheat your way in using a very cool

piece of software.

Using cURL, you can be your own browser and get any

data from the web to remix.

The problems are that you don’t get the data back in a

structured way.

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

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

RSS or Really Simple Syndication was born.

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

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

Using RSS or Atom feeds you get data in a predictable and

easy to convert format.

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

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

REST based Web Services allow you to request the

correct data from a system.

Which brings you to the second hack ingredient: data.

Yahoo Answers

http://uk.answers.yahoo.com

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

n&appid=yahoodemo

... lots more...

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

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

format.

http://answers.yahooapis.com/AnswersService/V1/questionSearch?query=sunderland&region=uk&lang=en&appid=yahoodemo&start=1&output=

json&callback=useme

This makes it dead easy to get the data and re-use it in your

own interfaces.

What if you want to use several sources?

There’s Yahoo Pipes for mixing, filtering and

matching.

http://pipes.yahoo.com

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

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

Both of these systems allow you to reach data from Yahoo

and other services and pre-filter it for use in your own

hacks.

Now you got the access and you got the data. Time to

consider the users.

Building *working* web interfaces is a specialist skill.

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.

The technologies are easy enough:

HTML for structure

CSS for presentation

JavaScript for behaviour

Where it gets truly annoying is the unknowns.

You have no idea about the user’s setup, ability or rights

to change their technical environment.

And then there are the browsers and all their

wonderful bugs and quirks.

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

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

random.

Here are our helpers:

http://developer.yahoo.com/yui/ http://mobile.yahoo.com/developers

YUI

BluePrint

Using these, you can quickly build interfaces that work on

the web and mobiles.

What about reach?

The newest way of access that systems and companies allow you these days is opening up

their address books.

http://code.google.com/apis/opensocial/http://developer.yahoo.com/social/socialdir/

http://developers.facebook.com/connect.php

Instead of building it and waiting till people come, build

where the people are.

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

How about some hack examples?

I am a big fan of accessibility.

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

restrictions.

At Accessibility2.0 Antonia Hyde asked for a video player

that works for people with learning disabilities.

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

disabilities

Shortly before YouTube announced their API to build

your own YouTube Player.

I took the API and Antonia’s findings and built

EasyYouTube.

Screenshot of Easy YouTube

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=vkdZmi85gxk

★ 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

Another example:

I use Twitter – a lot.

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

though.

So I use Pipes to filter my updates and get them back as

JSON:http://pipes.yahoo.com/pipes/pipe.info?

_id=f7229d01b79e508d543fb84e8a0abb0dd

And adding a few more lines of JavaScript I can now

display my “useful tweets” on my blog:

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

Another example:

I use SlideShare – a lot.

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

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

So I’ve used this to create a version that is easily

accessible for blind people or those who don’t have Flash.

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

presentation

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

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

However, coming here I wanted to show a quick new example and spent an hour

on Sunday on a hack.

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

I got all this emails from Twitter telling me about

people following me.

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

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

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

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

I put it up, and started testing edge cases.

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

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

And that started a landslide of visitors, comments and ideas

for it.

Guy KawasakiGuy Kawasaki

Ryan CarsonRyan Carson

Tim O'ReillyTim O'Reilly

What about reach?That was me, time for you to

show what you can do!

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

position.

It is a matter of wanting to change what we have and be

ready to play.

We do this to help you see your potential.

And we do this to see if we do a good job in explaining our

offers to the developer world.

The web is yours, go out and play!

Christian Heilmann

http://wait-till-i.com

http://scriptingenabled.org

http://twitter.com/codepo8

T H A N K S !

Moon bridal hat photo: http://www.flickr.com/photos/foxtongue/23309042/

All other photos of the interwebs