Saturday, December 17, 2005

Chickenfoot Posted on Reddit!

Chickenfoot was posted on reddit.com yesterday! I had no idea, and if jenn didn't call four times to tell me, I might have missed it -- thank you so much, jenn!

For those of you who don't know, reddit.com is a new site for tech news that is quickly growing in popularity. It has received high marks from Joel on Software and Paul Graham, as well as many other authors on the Web.

Right now, Chickenfoot is at the top of the hot list -- it's even listed above Matt Groening on the future of Futurama. I think I'll enjoy this brief stint as being more popular than the creator of The Simpsons :)

And if you want to help get the word out about Chickenfoot, then please head over to reddit and hit the little up arrow to the left of the title link (Chickenfoot for Firefox: Rewrite the Web) to give it a point -- I really appreciate your support!

Sunday, December 11, 2005

TargetAlert 0.8.9.6 Released

I released TargetAlert 0.8.9.6 this evening. The only new feature is the addition of the Slovak locale, which was voluntarily provided by Peter of www.slovaksoft.com. Thanks Peter!

Sunday, December 4, 2005

LivemarksLiberated: The First Chickenfoot Script to Hit the Repository

Today I was the first to donate a script to the Chickenfoot Script Repository. We set up the wiki for the repository right after UIST 2005, but we have been focusing so much of our efforts on improving Chickenfoot that we didn't have a chance to do much more with it until now.

The script that I wrote is called LivemarksLiberated; it lets the user override the default behavior of the Live Bookmarks button in Firefox. Oftentimes, I want to get the URL of a feed onto my clipboard, so I can paste it into another RSS aggregator, such as Google Reader. Although the Live Bookmarks button is handy because it lists the feeds for the page, the only thing you can do with these feeds is add them to a bookmarks folder in Firefox. For anyone who prefers a different reader, this can be annoying.

Originally, I planned to write a new Firefox extension that would allow the user to copy the URL of the feed to the clipboard instead of adding it as a Live Bookmark. I also considered integrating the extension with Google Reader, as I was surprised that no such extension already existed on Mozilla Update. Fortunately, I did a little blogrolling after my friend Akshay launched his PartyChat bot for Google Talk. I ended up at Mihai Parparita's blog, which had an interesting type of RSS link that I had never seen before:



After doing a little searching, I learned that this RSS button is supported by Google. When you click on it, it brings you to a page that asks if you would like to add the feed to either Google Reader or Google Personalized Homepage. Hmm...adding a URL to Google Reader would require automated webform submissions...and then it was clear: instead of making a full-blown Firefox extension to solve my problem, I should write a Chickenfoot script!

Even for a simple script like LivemarksLiberated, turning it into a nice Firefox extension involves quite a bit of work. To do it right, you need to add a nice Options panel for the extension, as well as support for internationalization of that panel. Then you need to test the extension on multiple versions of Firefox, maybe even Mozilla, etc. I wasn't up for it because the fun part of the creating the extension is writing the code that comprises the Chickenfoot script, so that's all I did. If someone else wants to take the time to package it up and make a website about it, then they can go right ahead (though I would appreciate a link back, in return).

But what I want to talk about here is how I figured out how to hook into the browser to write this script. There are a lot of Firefox extensions available now. Let's call those solved problems. These can be useful to novice extension writers, but what is even more useful, I think, is learning how those problems got solved.

For LivemarksLiberated, I started out by using the DOM Inspector to find out the name of the Live Bookmarks button. (The DOM Inspector should be available under the Tools menu in Firefox; if not, you'll have to reinstall Firefox and do a Custom Installation to make sure that it's included.) Once I had the DOM Inspector open, I navigated to a page with a feed (such as this one), chose File / Inspect a Window and selected my current browser window from the list. Then I clicked on the Find a node to inspect by clicking on it button:

Find a node by clicking button in Firefox DOM Inspector



I clicked on the Live Bookmarks button in the browser which selected the analogous node in the DOM Inspector. From there, I right clicked on the node and selected Copy XML to see what was going on inside. I pasted the contents into a text editor and saw:

<statusbarpanel tooltiptext="Page has no feeds for Live Bookmark"
id="livemark-button"
type="menu"
class="statusbarpanel-menu-iconic"
chromedir="ltr">
<menupopup menugenerated="true"
onpopupshowing="return livemarkFillPopup(this);"
oncommand="livemarkAddMark(window._content, event.target.getAttribute('data'));">
<menuitem label="Subscribe to 'RSS 2.0'..."
data="http://www.bolinfest.com/changeblog/feed/"
tooltiptext="http://www.bolinfest.com/changeblog/feed/"/>
<menuitem label="Subscribe to 'Atom 0.3'..."
data="http://www.bolinfest.com/changeblog/feed/atom/"
tooltiptext="http://www.bolinfest.com/changeblog/feed/atom/"/>
</menupopup>
</statusbarpanel>

From this, I deduced that livemarkFillPopup() was invoked to produce the popup menu when the button was clicked, and livemarkAddMark() was called once an item was selected from the popup menu. I was curious to know what these functions did, so I ran the following code in Chickenfoot:

output(chromeWindow.livemarkFillPopup);
output(chromeWindow.livemarkAddMark);

This dumped the source code for these two functions into the Chickenfoot console. By looking at them, I realized that I could just override livemarkAddMark() to add the functionality to Firefox that I wanted. Now that I knew where to hook in, it only took a little bit of code to get things working – don't be intimidated by the size of the script! Even though it is about 100 lines long, most of it is documentation. The nifty use of Chickenfoot is in these lines:

with(fetch('http://fusion.google.com/add?feedurl=' + url)) {
if (mode == GOOGLE_READER) {
click('Add to Google reader link');
} else {
click('Add to Google homepage link');
}
}

This code automates the process of going to the Google webform. It does so in a hidden window by using Chickenfoot's fetch() command (while developing the script, I used the openTab() command to see what was going on). Once it reaches the webform, it uses click() to select the appropriate link, depending upon the value the user assigned to mode earlier in the script.

Chickenfoot and the DOM Inspector are both great tools for poking at Firefox. If you can learn to use them to reveal where you need to hook into the browser, you can spend more time working on the meat and potatoes of your next extension, which I assure you is much more fun.

Welcome to the Bolinfest Changeblog

I suppose the first thing to announce in the changeblog is, well, the changeblog. The About section already covers the purpose of this blog, so I thought that I would share some of the details about setting it up.

The word on the street is that if you want to host your own blog, WordPress (what I'm using) is the way to go. LiveJournal has more features, but it looks like a nightmare to install if you're not comfortable with Perl-CPAN, which I'm not. For a long time, Movable Type seemed to be popular as well, but its web interface has always seemed slow to me, and they now ask people to pay for software licenses if the blog has multiple authors, so I'm done with them.

Anyway, getting WordPress up and running wasn't so difficult. I found a theme that I liked, for the most part, and I really didn't want to spend too much time customizing it, but it had this bullshit in the sidebar:

Default search box using Connection theme



How could anyone ever do a search using a box that small? The advantages of a wide search box are fairly well-known, but I see junk like this in many blog themes, not just those designed for WordPress. As you can see, I moved the search box to the top of the blog to give it the real estate it deserves.

Unfortunately, this required some Web hackery to get things lined up correctly in Firefox as well as Internet Explorer (IE). The HTML for the search area looks like this:

<input type="submit"
name="submit"
id="searchButton"
value="<?php _e('Search'); ?>" />

So I added some CSS that looks like this:

#searchButton {
margin-bottom:1px;
height:20px;
}

* html #searchButton {
margin-bottom: 2px;
}


IE has this interesting quirk such that it recognizes, and gives priority to, styles that start with * html whereas Firefox does not. As you can see, this allows me to tweak things so to get the search widgets to line up just right in each browser.

I'm not sure what this looks like in Safari, but you Safari users should be running Firefox, anyway! (My empathy for the user only goes so far.)

About

Why is this called a "changeblog," and what makes it different from a regular blog?

Many feel that a blog should have a theme and daily posts. When you first create such a blog, it's generally a lot of fun, but maintaining it eventually starts to feel like a job. (This is probably why more than half the blogs on the Net are inactive.)

I'm calling this a changeblog to let you know that this isn't that kind of blog. Although I would enjoy maintaining a blog about software and the Web, I already have a job which takes up a considerable amount of my time. Further, I know that if I had a "real" blog, I would start pouring hours and hours of time into it, hacking the WordPress source code and working on an original theme instead of using a prepackaged one.

So what can I expect from this blog?

The purpose of the changeblog is to announce changes to bolinfest.com, such as an updated version of TargetAlert or a link to a new project that I've released. It will also contain announcements about Chickenfoot, which used to be hosted here at http://www.bolinfest.com/chickenfoot/, but was moved over to an MIT server once I graduated.

Occasionally, I may make "traditional" posts to the changeblog (sometimes you just need to vent!), but I don't plan on making a habit of it. Instead, I plan to write longer, researched essays (which will be announced on the changeblog, of course) that will be linked from the bolinfest.com home page.