techno.blog("Dion")

I heard that this is one of IBM’s kids:

Wow, what an amazing goal. Hopefully he won’t follow this up by hand balling one in later in the game ;)

I have been having a lot of fun working with unobtrusive JavaScript, and using microformats to define rich behaviour that both degrades nicely, and keeps the code clean.

Since we just released the Google AJAX Feed API, I can discuss one little example.

I wanted to create a Feed Billboard that would show entries from friends feeds in a small portlet. Kinda like the Feedburner chicklet, but using JavaScript, and able to access more than just your burnt feed.

The end result was the Feed Billboard, with an example here:

The microformat

The interface to building the billboard is an HTML unordered list. For example, the above example is:

<ul class="feedbillboard access:randomly">
<li><a href="http://code.google.com/">Google Code</a> (<a href="http://code.google.com/feeds/updates.xml">RSS</a>)</li>
<li><a href="http://ajaxian.com/">Ajaxian</a> (<a href="http://ajaxian.com/feed">RSS</a>)</li>

<li><a href="http://almaer.com/blog">techno.blog(Dion)</a> (<a href="http://almaer.com/blog/index.xml">RSS</a>)</li>
</ul>

The magic class is feedbillboard, and there are a bunch of options that you can pass in that cheekily use the form of name:value. This is cheeky as that it isn’t polite to use ‘:’ in a CSS class name. I have tried to make this microformat/mini-DSL as english-y as possible.

The current full options would contain feedbillboard numberofentries:4 access:randomly timeinterval:4.

You can guess why the unordered list was chosen. If JavaScript isn’t allowed to come out and play, your widget will show your friends and their feeds, which isn’t half bad as a billboard anyway. If the C-LISP is enabled, it will rip through looking for feedbillboard, and replacing them with fancy-pants versions.

A bit about the implementation

The meat of the operations is split between two classes: FeedBillboardFinder and FeedBillboard.

The job of a FeedBillboard is to represent a single billboard widget. It will replace the UL with the real widget, will go out and get the feeds using the Google AJAX Feed API, and will choose which element to rotate too next.

Getting the feeds using the Feed API is so simple. If you take a look at the load call you will see:

load: function(feedSettings) {
var self = this;
new google.feeds.Feed(feedSettings.rssURL).load(function(result) {
if (!result.error) {
self.feedOutput.push(result.feed);
}
});
},

In one fail swoop, we asynchronously grab a new feed out of the feedSettings bucket. The asynchronous piece is important here. You wouldn’t want to have to load all of the feeds before you started to show entries would you. What if it was taking awhile to get one of the feeds? As soon as the first feed is read the billboard can get to work, and as new feeds are loaded the pie gets bigger.

One of the fun little problems was how to loop through the entries (when not using random access of course). The FeedBillboard keeps track of the number of entries it has shown, and given that number, you need to pick the correct entry. For example, if you have four feeds each with four entries, then if you are told “five” you will return the first post from the second feed added to the system. I took the easy way out and created a hash lookup that returns the matrix:


this.placement[count++] = { feed: i, entry: j };


The FeedBillboardFinder handles the microformat. You could create FeedBillboard objects directly to create the widgets, but the finder will go out there hunting down the ul’s and build FeedBillboard objects:

find: function() {
var count = 0;
document.getElementsByClassName('feedbillboard').each(function(node) {
FeedBillboardFinder.build(node, ++count);
});
},

There are a lot of improvements to be made. I would like to have a headline mode that shows a configurable number of headlines instead of one headline and a snippet, and I need to do a better job with consistent sizing.

Conclusion

It is great to be able to very easily create unobtrusive components, and fun to try to come up with a nice microformat. The Google AJAX Feed API made this entire thing possible, and so easier to work with.

John Dvorak wouldn’t get any page views if he said “X was OK”, so in typical fashion he bashes Web 2.0 Expo although he probably spent all of 10 minutes on the premises.

His main thesis is that it was full of 20-29 year olds all wanting to get rich quick.

I was there this year, and found the opposite. Most of the people I met were on the other side of 30.

That being said, I also thought that the Web 2.0 Expo was poor. The core problem is that I wasn’t the target audience of the event. I would like some content with my talks. Here we saw classics such as “widgets are cool. come getsome” and “blogs are a good thing” and “collaboration wins”.

As I flicked through the sessions, I saw a paltry few that I would like to attend. It would be nice to go to the Django talk. Brad on the Dojo Offline Toolkit… sure. Erm, hmm. What else?

I was hoping that the event would be tech heavy, and all about pushing the boundaries of what we somehow call Web 2.0. Instead, it was a set of intro courses.

A lot of people were there though, so maybe the bulk of people liked it. Many of the audience seemed to be very light on technical backgrounds and more “I want to somehow be involved in Web 2.0″.

I enjoyed the usual though… seeing old friends who popup at these things. The conferences within the conferences. That is why people enjoy the unconferences these days. They make the “chatting in the halls” the conference itself.

Russell Beattie went quiet on his blog awhile ago.

Now he is back with Mowser:

Mowser lets you view the Web on your mobile phone. Mowser takes HTML pages normally viewed on a computer and translates them so that you can see them when you’re on the go. During this translation process, Mowser analyzes the original HTML code using sophisticated algorithms. In order to ensure that the highest quality and most useful web page is displayed on your mobile phone or device, Mowser may alter images, text formatting and/or certain aspects of web page functionality.

I have been using The other Google GWT for this for awhile, and there are others out there.

Since I want to write Ruby and generate JavaScript, why not use RJS?

To get going, I wanted to take just the pieces that do the RJS work in Rails and use them to just do the JS emitting.

I ended up with a script that takes a file and emits the JS from it:

#!/usr/bin/env ruby
# -----------------------------------------------------------------------------
# rjs - go through an RJS file and output the JavaScript
# -----------------------------------------------------------------------------
require 'rubygems'
gem 'actionpack'

require 'action_controller'

include ActionView::Helpers::JavaScriptHelper
include ActionView::Helpers::PrototypeHelper
include ActionView::Helpers::ScriptaculousHelper

def get_code; File.read ARGV.first; end

# -----------------------------------------------------------------------------
#  Main
# -----------------------------------------------------------------------------
raise 'rjs: must pass in an RJS file to load' unless ARGV.size > 0

code = get_code

output = ''

eval <<-EoC
output = update_page do |page|
#{code}
end
EoC

puts output

E.g. with a sample test.rjs of

page.insert_html :bottom, 'list', "
item name

"
page.visual_effect :highlight, 'list'
page.hide 'status-indicator', 'cancel-link'

I would run % rjs test.rjs and would get:

new Insertion.Bottom("list", "
item name

");
new Effect.Highlight("list",{});
["status-indicator", "cancel-link"].each(Element.hide);

I want to extract what is needed here, put it in jruby.jar, and then use RJS as the basis for the generation. It would be nice if RJS wasn't quite so tightly coupled into Rails. Then the fun of:

<script type="text/ruby">
page.select('#items li').each do |value|
value.hide
end
</script>

would be a reality.

NOTE: I have to give a huge kudos to the JRuby team for something. I was using an ancient jruby-complete.jar for the initial implementation of ruby int he browser. I didn't want to do something newer as I didn't want to build JRuby from scratch. Half the time getting an open source project to build is a very painful and time wasting experience.

With JRuby I grabbed the project from Subversion, ran ant, and it freaking worked first time. I am quite amazed. Now, ruby in the browser is running on JRuby head.

I played around with getting Ruby to work in the browser while watching some cheesy TV this weekend.

I was able to get things slightly working, and put this work in progress up on Google Code here.

That link sends you to a page that will evaluate Ruby for you, both from a script tag, and from your own input.

If you take a look at the top of the file, you will see:

<script type="text/ruby">
#class Foo; def initialize; @foo = 'whee'; end; end; f = Foo.new; f
Time.now
</script>

This script is found by the Ruby in the browser system, and is run through JRuby via a little applet. The page takes the output at the end and throws it into the container HTML on the right.

You can also edit the text area at the bottom left and run your own Ruby code, and the output will be placed on the right too.

Now, this is just the first baby step to get to something feature full like:

<script type="text/ruby">
document.ready do |dom|
dom["table tr"] <<"<td>test</td>"
end
</script>

Just being able to run some Ruby doesn’t mean much. We need to give it rich support for the browser to be able to interact with the DOM and Ajax libraries to do cool things, using the power of Ruby.

So, there are a lot of TODOs here:

• The applet is a download of JRuby complete, which is huge, and isn’t all needed. I need to work with the JRuby folk to produce a slimmed down applet version.
• Come up with a solution that allows you to puts data out (maybe put that data in a div somewhere), and more importantly, talk to the DOM directly from Ruby. Since the applet can contain Ruby files themselves, we can create a Ruby module that lets you do DOM stuff, that becomes JavaScript which will be eval’d to run in the browser. Or, we just give direct access. I am still playing with what makes sense there
• Only tested in Firefox. There are some known issues in Safari.
• I am lazily using an applet tag instead of the magic object/embed stuff that would make this work in other places

Any direction make sense to you?

I was listening to Ivan Krstic talking about One Laptop Per Child (OLPC) and all I could do was add up the number of laptops going out there with a view source button that teaches them Python.

Python 3000 better be good, as we will have millions of people writing code, all growing up as pythonistas.

You can check out the talk too:

John Resig gave an enjoyable presentation on Javascript libraries.

This wasn’t a talk about choosing library A over library B. It was meta. It was about what libraries give you, and why they are here.

John also showed his text/jquery DSL that is up at jquery2 (a bad name that will not probably be jquery2).

We are seeing more and more of this. People are following the pattern of sneaking in their own script by putting in their own mime type and then using DOM scripting to go back and do the right thing.

I am hopeful that we will see a <script type=”text/ruby”> soon:

<script type="text/ruby">
document.ready do |dom|
dom["table tr"] <<"<td>test"
end
</script>

Yummy. Then Try Ruby would literally be… try ruby in the browser.

The UI for voice systems often bugs me, so after the GOOG-411 launch I wanted to see if the lean, user driven UI of other Google products had made it through to this one.

Below I compare it to another 411 solution in the same space, and whatever happens, I think it is safe to say that 411 service will be changing for the better because of the Google offering. I admit to being someone who: a) rarely uses 411, and b) normally just dials 411 itself.

One related observation is that using letters for numbers (e.g. GOOG-411, FREE-411) can be great, but if you are on a real keyboard such as a Blackberry, it is a pain in the backside as you have to work out the number!

Here I am sitting in a garden next to a lemon tree playing with my phone:

ps. I forgot to mention that I tried to get Carrot Top to do this youtube video but he wanted to charge $70k for it.