Yesterday we went to New Work City for the MDN hack day and I kicked off the day with a talk about HTML5, the opportunities it brings for developers and what people can play with during the day.

The slides are available and I recorded a screencast of me presenting them. The screencast is available on YouTube or in various HTML5 compatible formats at vid.ly (embedded below):

If you want an audio only version, you can find that one on archive.org or here:

Here are the things I am covering in the talk:

• World connection density map
• Mozilla Hackasaurus
• 18 days in Egypt documentary
• Mozilla popcorn
• HTML5 beanie maker
• Undoing the double sun in Star Wars
• HTML5 context menus
• Image cropping in the browser
• Building a game from HTML5
• BrowserID and a simple implementation example
• Mozilla Web APIs
• Boot to Gecko

Time to board my plane, more details on the MDN work week and the hackday on the Mozilla blog soon.

Today I was part of a video conference with the university of Dundee for this year’s Yahoo university hack challenge. Every year the students release a “hack” as part of their coursework for Yahoo and the programme yielded quite some amazing hacks in the last years.

This year is different for me as I am not working for Yahoo any longer. So instead of telling the students about YQL, YUI and Yahoo’s Geo platform I talked about Mozilla, our mission and gave them some ideas what to hack for the benefit of HTML5 and the open web. The slides are available on Slideshare or embedded here:

My main task for the students was to think about the web as it is right now. The web is the platform and the browser is the tool. Documentation about the different technologies is freely available and – in Mozilla’s case – also editable by everyone to ensure that it is up-to-date.

HTML5 is a big new thing and a lot of people go crazy about it. The issue is that a lot of it is progress for the sake of progress and there is not much insight into what the new technologies mean in terms of accessibility or backwards compatibility. As Dundee university is one of the few in the UK that have an accessibility focus I thought this a great opportunity to ask the students to consider some a11y hack with new technologies.

I talked about native audio and video in browsers and the benefits it has over closed source solutions (pointing to the lecture I’ve given at MIT on the subject of multimedia on the web).

I also told the students about the interview I did with John Foliot on the topic of HTML5 accessibility as this contained a few ideas they could hack on that need solutions.

I talked about the Popcorn.js library which makes it easy to sync video with other web page content and the Butter interface for it which simulates Flash builder or Shockwave but for open technologies.

I briefly mentioned the Universal Subtitles tool that allows you to add subtitles with translations to any video on the web.

Another demo to inspire the students was Mark Boas’ audio and text sync example which shows how you could sync the text of a speech with the audio file for later replay.

This led to a quick introduction of Mozilla’s Audio API which gives you in-depth access to audio files down to the beats per minute.

Next I introduced Mozilla’s gaming section and the winner of the last game competition Marble Run, explaining that HTML5 gaming is hot right now (especially with Facebook’s support) and that there is quite some prize money and good prizes to be won.

Next up I talked about Mozilla’s Labs and the tools to play with there – Rainbow, a JavaScript extension to access the camera and microphone of computers as input devices, Chromeless, a UI-less browser allowing you to build bespoke browsing solutions and Prospector, a way to data-mine browsing behaviour of users.

I ended my introduction to Mozilla tech for hacking with the extension builder for Firefox which makes it easy to make the browser do what it doesn’t do yet.

Let’s see what the students come up with!

Just having spent a lot of time at the amazing open hack day in Bangalore, India I found that most of the questions about starting a hack using Yahoo technology revolved around a few issues:

• How do I access data on the web/from web services?
• How do I use YQL from JavaScript or PHP?
• How do I display information I received from YQL with PHP or JavaScript?
• How do I get the location of the user and how do I analyse content for geographical locations?
• How do I access oAuth authenticated information of Yahoo?
• How do I set up PHP and where can I see errors?

So, to avoid having to repeat myself again I put together The Hackday Toolbox which contains sample code that deals with all these issues.

The hackday toolbox contains:

• An introduction to installing and using PHP with MAMP/XAMPP and debugging it
• YQLGeo for all your geo and location needs
• Demos of querying YQL in JavaScript, YUI3 and PHP
• Demos to display YQL data
• Authenticated example to access the Yahoo Firehose
• Rendering Yahoo Geoplanet data as a map

You can download the Hackday Toolbox on GitHub or try the examples.

The toolbox is BSD licensed, so if you want to add Java/Ruby/Python/Heskell/Pascal/Logo/Fortran/6502 Assembly code examples, please do so.

I put my hack in a box…

The third open hack day in India is over and here I am in my hotel room waiting to be picked up for dinner before flying back to London. The last three days were a blur. I talked a lot about hacking, explained technologies and saw a massive avalanche of interest and questions and people taking photos of me.

Describing the hack day would be such a collection of superlatives – it is almost untrue. There will be an official list with all the cool numbers, but let’s just say we crammed the hotel with hackers and broke the records of all the other 12 open hack days. The amount of hacks delivered were more than last year’s India hack day and the London one together!

As a passionate speaker and trainer, I have to say I was very happy coming here. Events like these show that there is still a lot of drive and innovation in the idea of hack days. After 24 hours of hacking and a few hours of judging, we had the winning hacks of this year:

• Github Badges (source) by Brian Guthrie, Tejas Dinkar and Mark Needham are a collection giving warcraft/xbox style achievement badges for github achievements.
• Quizr by Prateek Dayal and Hemant Kumar is a quiz generator using Wikipedia and Flickr. The generated quizzes get pushed out to all the computers in the room live via HTML5 WebSockets.
• FlickrSubz by BabuSrithar, Sudeep Nayak and Parashuram enables realtime closed-captioning in multiple languages for videos on Flickr. The hack utilizes a speech recognition engine (Julius for linux, WSAPI for windows) to display subtitles in the chosen language (translate API) for videos on Flickr via a GreaseMonkey script.
• ChromYQLip (pronounced as Chromy-Clip) by Markandey Singh is a chrome extension for page scraping. Select some text on a page and click the extension icon and it will populate the URL and xpath of selection. Click “getmashup” to get a lightweight page which loads your content. A Sample URL and XPath for advanced mashup building is URL=”http://twitpic.com/photos/$1” Path=”//div[@id=”image-”]/div/div[1]/a” which results in $1 to become a form field to enter the TwitPic user name.
• Communicator by Mohan Gupta, Sri Ram and Roshan is an API to include a real-time communication widget on any webpage. All the users viewing that page can discuss , talk and collaborate on the content of the page in real time.
• Chirpshire by Preetham Venkky, Rohit Talukdar, Puneet Jaiswal and Mohd. Amjed allows you to gain belts and grab badges for tweeting regularly and without using automation apps. Businesses can use this service to spread a meme. This could be a # hashtag or a physical location check-in.
• Shop Green by Nidhi Chaudhary and Anurag Jain is an interesting concept to allow sellers to print 2D barcodes for their products and buyers to simply scan them with their mobile phone and pay on the phone. No need for paper bills any longer. All the payments are made with PayPal.
• Democracy Tools by Ankur Patel, Ankur Gupta and Yatin Kumbhare did quite a job of scraping all kind of government sites to collect data to answer the following questions: Who is your Leader? Where is your Constituency? Is there a government Website Search Engine? What is Media’s Opinion about your Leader? Another hack that did something similar is RepMeter
• How Much Time Will This Landmark Take Me? by Susheel was a terribly clever hack that analysed the EXIF data in flickr photos to see how long it took people to take photos at a certain landmark. That can give you an insight into how long it will take you to look at that landmark on your next trip.
• Nirvana – your late night path back home is a mashup that allows people to tweet where the police currently does alcohol tests – in case you want to avoid that driving home.

Here are a few other hacks that stood out for me. There were a lot more but as the hackers failed to submit real links for me to check (even after I pointed this out repeatedly in the keynote) I cannot verify if they really work.

• PixMos by Adarsh Ramamurthy and Amod Kumar Pandey creates photomosaics from Flickr photos in PHP -
• HCards++ is a hack to create online business cards with validation of user’s identities.
• Find me a teacher! is an app to connect teachers and students and do all the payments with the PayPal API. The danger is that will sooner or later be used for prostitution I guess.
• Bird on a mission by Prashanth R, Sumanth J, Tabrez Pasha and Umesh Rao Nis a simple way to alert people of problems in certain locations by sending a Tweet.
• The five minute mentor by Antano Solar John, Niranjan Prithviraj and Ravishankar is an impressive neurolinguistic analysis tool for texts
• HackerBox by Saurabh Narula, Akash Mohapatra and Abhinav Mehta is a competitor for our Hack Tracker written in Flex allowing hackers to upload and showcase their hacks.
• Flickr Commerce by Lakshman, Ashok, Shabda and Javed is an app to take your Flickr photos and offer them for sale using the Paypal merchant API. This is such an obvious thing Flickr lacks and it is very professionally done.
• SetFlickrLocation by Charul Modi and Janak Chandarana is an interface that adds location information to Flickr photos when the user hasn’t geolocated it by analysing the title and description. This would be much cooler as a GreaseMonkey script – I might have a go at that.
• EZCraig by Amit Agarwal and Prateek Agarwal scrapes Craigslist and offers it as interconnected dropdowns instead of clicks and reloads.
• Unlock your code by Saurabh Narula, Akash Mohapatra and Abhinav Mehtais a Downloadable OSX application that allows you to take screenshots from code and annotate it. It then creates a PDF from the annotated code for documentation purposes.
• The Path Finder by Sreenidhi, Richie, Ullas
  and Suhasis a very clever way to get walking directions from maps when you don’t have a GPS enabled phone. You can send an SMS to a service and it does the map lookup for you. Clever.
• Prettylicious by Manish Agravat, Baljeetsingh Sucharia and Ramjee Ganti is a more beautiful interface for delicious that adds content from Google to links when there is no description. Also check the domain – how win is that?
• Trialtool by Parashuram, Babu Srithar, Suryanarayan and Santosh SRis a JSFiddle style sandbox for trying out JavaScript live in the browser. For this hack, the makers imported all the YUI examples. You can see it in action on GitHub
• SearchItIn by Vivek Rp.
  and Shyam S. is an interface for people who are not savvy of the options in Yahoo Search to search the content of files like XLS, DOC and FLV. The thing that annoys me with the hack is that it only shows Yahoo in a lightbox on submission. If you wanted to create a new experience show the results as Word icons with the description next to them instead. Using Ajax and BOSS this can be easily done.
• HTML5 gets Flickry are some nice Canvas and HTML 5 demos using Flickr output and Yahoo image search.

If copying is the best kind of flattery then I must be very flattered: Awesome Image Search is an image search clone of GooHooBi and Mobile Hack 420 was re-publishing the FIFA 2010 hack with mobile phone and price data. Nothing to it – I told people to use what works. :)

You can see more at the list of all hacks. If you read through it, you will see that there were a few patterns emerging: a lot of hacks dealt with traffic, the elections in India, language translation and transliteration and speech recognition and synthesis. The latter of course is triggered by the Windows 7 APIs for these tasks and sadly enough all the hacks showed that the success rate of these technologies is still abysmal. It was also pretty funny to see a lot of presenters speaking into their laptop cameras – most laptops actually have the microphone next to the keyboard and not on top of the screen :)

There were a few hacks that tried to simplify the YQL language by mapping it to simpler key:value pairs or a “natural language interface”. This is such a classical developer thing to do. The sad truth is that all of these systems will soon run into restrictions or have to become more complex again.

All in all I am a bit beat now, so maybe more later – I just wanted to get this list out to you.

I am right now at the open hack day in Bangalore, India and just finished giving the keynote presentation showing people what hacking means and how to present at a hack day:

The slides

What the hack?

The resources I talked about:

• Yahoo Developer Network for everything about Yahoo offers
• Google Visualisation API for displaying data in an interesting way
• Programmable Web for APIs
• AppEngine for your app hosting
• GitHub for code hosting
• Heroku for Ruby Hosting
• Yahoo YAP for apps running on Yahoo
• YQL Geo for all your Geo needs in JavaScript
• CSS Grids Builder for creating layouts that work across browsers
• YUI for building interactive web apps
• YQL for mixing and matching the web

The Audio recording

The audio of the recording is available on archive.org:

• Download the MP3 (35 MB)

And the demos:

• GooHooBi uses Google, Bing and Yahoo at the same time for a search query
• The screencast of building GooHooBi shows live how I used YQL to build it
• Keywordfinder.org finds keywords related to a keyword using Yahoo BOSS
• UK house prices uses government data to compare house prices in the UK. It uses the CSS Bar Charts API
• Around You finds you on the planet and shows you Wikipedia content around you
• Warwickshire Hack shows you all the cool things to see in Warwickshire. (source on GitHub, Screencast on YouTube)
• Flickr Collector allows you to find and collect flickr photos. (source on GitHub, Screencast on YouTube)
• FIFA 2010 visualisation
• GeoThis and the hack presentation: