TrialTool for YUI Examples

In my last post, I had mentioned about YAHOO Hack day, and the hack that won us the XBox and iPods. This post is about another hack that we had submitted.
Some believe that the best way to start writing code is looking at examples. The YQL Console is a great example that show the various YQL queries and lets users manipulate and execute them in the console to see results.
TrialTool is a console for Javascript APIs and I thought it would be great if we could adapt the YUI examples be shown in a console similar to YQL. There are a lot of examples and writing them in the Trial Tool Example file format would be hard. Hence, we used YQL and Yahoo pipes to automatically parse individual examples and change them to a format that TrialTool could use. If you look at the source code of individual examples, all examples start and end with comments. Yahoo pipes would visit the individual web sites, and pick up the content inside the comments.
The content inside the comment is then split into fourparts

• Title of the page which is all the content enclosed inside the H1 tag. This is assigned to [a.class="example-name"]'s innerHTML.
• The content of the Script tag
• Everything, except script tags inside [div.id="example-canvas"] , inside a [div.class="example-html", to indicate the corresponding HTML tags required for the example.
• Everything else inside the [div.class="example-docs"] tag, for documentation.

The four are enclosed inside an [li.class="example"] and given out. Thus, we have all the examples listed in sequential order. I then manually categorized them by forking functionality. Using the "Fork Mode", examples that were incorrectly parsed were removed. These were examples that were

• were dependent on server
• required to be opened in a new window
• did not confirm to the parsing format.

Looks like I will have to manually add the examples in. I seem to have most of the examples in and I hope people trying out YUI3 find these examples in TrialTool, a good starting point.

Hacking for the Hack Day

The YAHOO India Open Hack day just got over and was held in Bangalore on the 24th and 25th of July, 2010. The list of hacks submitted this time was impressive; totaled to around 140 hacks.
Though I was not in Bangalore, this was an event I could not miss. I teamed up with Srithar, Sudeep, Santosh and Surya to work on some really interesting hacks.
We came up with three hacks, and one of them won the best in show award.
We worked on making the YUI examples work in Trialtool. You can see the result at http://nparashuram.com/trialtool/index.html#example=/ttd/YUI/default.html.
The hack was called FlickrSubz which added closed captioning to videos on Flickr in real time.
The audio output is captured and routed via Microsoft Speech API and Julius to get the captions for the audio. This was then placed as an overlay on the Flickr video page using a Greasemonkey script. We also wanted to create a Google chrome extension, but that was when we ran out of the
24 hour time limit.

Here is a video by Srithar explaining the hack.

You can check out the hi-def version of the video on its youtube page.

On this hack, we won

• Chris Heilmann's complement:)
• Certificate signed by David Filo !!!
• XBOX 360 Elite for the team 
• 3 IPod nanos 4G 8gb for each team member !! 

Twitteybot - CSV Upload Bug Fixes

There were a lot of customers using TwitteyBot, but only a couple are using the CSV upload facility to schedule the tweets. Both of them were are in the same timezone as I am in, and everything seemed to be in order. However, a couple of weeks ago, a user notified my of an error with the dates in CSV.
There were two errors. The first one was regarding the time format. I had erroneously set the time format of the Java Time formatter to the 12 hr format. Hence, 12 noon was interpreted as 00:00 hrs. All it required was changing the format from hh:mm to HH:MM, as in line 57 of this diff.
The second error was about using the timezones of the browser, when uploading the file. The application was picking up the timezone of the user from the browser and applying it before saving the dates. I was correcting the time, but the date was not corrected. Hence, for anyone to the west of GMT, the time would be corrected, but the date be for the previous day. This is also corrected in lines 282-289.
With these errors corrected, all I have also contacted who have their own instances of the application. If you have cloned the application and are hosting your own version, please do update the application to have this bug fixed, as per this commit.

TrialTool - Example file format

This is a continuation on the posts about TrialTool and this post talks about the format that the example files should be, so that they can be consumed by TrialTool. Examples can be loaded by

• Adding &example=[path-of-example] in the URL, after the #. For example, http://axemclion.github.com/trialtool/index.html#example=/ttd/jquery-template/jquery-template.html loads the example located at here. 
• Multiple examples can be loaded by specifying multiple &example=[example-path] URL parameters
• Note that TrialTool and the example should be in the same domain as the examples are loaded using AJAX calls.
• If no example could be loaded using the &example tag, the trialtool/examples/default.html is loaded
• If default.html is not loaded, the template file is loaded.

The example file is a simple HTML file that is to be in a specific format. You can use the template located at http://github.com/axemclion/trialtool/blob/master/examples/Template.html as a starting point. 

• Examples can be under categories called example-sets using <li class = 'example-set'> and these categories can be expanded or collapsed using the TrialTool UI. 
• Individual examples should be under <li class = 'example'> tags. Note the use of anchor tags to indicate the names of the examples and example-sets.
• Eamples can have an id to identify them uniquely. 
• Either an example set, or and example can depend on other examples using depends = "id-of-example-this-is-dependent-on"
• Clicking on "Load Prerequisites" loads the dependencies of the parents of the current example, and then the dependencies of the example. All dependencies are loaded only once.
• Documentation for example is specified using <div class = 'example-docs'> All HTML inside this is displayed in the Reference Tab at the bottom of TrialTool.
• If documents are not inline, they are link to other elements inside the body using <link class = 'example-docs' href='jquery-selector-of-documentation'>
• All scripts and stylesheets defined in the header are loaded in the console. This is done so that examples can use third party javascript or CSS libraries.

You can start by cloning the trialtools on github and using the examples folder. Please do let me know if you are using this to show your API, or need help in cloning.

Use the new symbol for the Indian Rupee already

I was able to spend some time last weekend to come up with the CSS to allow me to start using start using the new symbol for the Indian Rupee on websites. There were mentions of blogs that had to font available for download, and it was not much to convert it to a form to be used by the websites.
The project is hosted on Github and details on using it are available at http://axemclion.github.com/rupee/.

To start using the symbol, simply include the CSS file available at http://axemclion.github.com/rupee/rupee.css. Then, add the HTML tag <span style="font-family: rupee;">R&;lt;/span>at all the places where the symbol is to be inserted. The CSS file is around 8 KB and has the font embedded inside it. For IE, the fallback URL of the EOT file is specified to render it correctly. This CSS file was generated using Font Squirrel using the font here. Font Squirrel was used with Custom Subsetting and only "R" was included in the file to reduce the size of the CSS.

It becomes interesting to see how existing Indian sites look with the new symbol. You can find some screen shots here.
I also created a bookmarklet and a greasemonkey script that would replace all "INR" and "Rs." on existing web pages to give a feel of how the pages will look with the new symbol.

Tested on Firefox 3.6, IE 8 and Chrome5.