Note: The text below isn't exactly what I said on stage (I believe the audio will be available as a podcast at some point), but it was the script that I worked from. Throughout the text I've noted which slide was on screen during a particular section. Apologies for the length of this post, it was an hour-long talk!
Here's the rough transcript:
[SLIDE 1: TITLE] Hi everyone. It's great to be here. I'm Gina Trapani, and if you've heard of me, it's probably because of my work at Lifehacker.com, a daily blog about software and productivity I've been writing for a few years now. Usually when I pitch talks at conferences like this the topic is personal productivity and organising your digital stuff. But not today. Today I get to take off my productivity cap for once and tell you about a side project that I've been really excited about. It's something I've been working on at night and in my spare time over the past nine months, and it's been an incredible lesson in distributing development among developer, designer, and user communities. But I don't want to get into all that just yet.
First, I'd like to tell you a story. It's my favourite story in the whole world, a classic fable that has many versions. If you've heard it before, I hope you'll indulge me, because even though it's set in a time when computers didn't exist, it represents almost everything we do on the social web today, as well as my topic this afternoon. It goes something like this.
[SLIDE 2: SOUP] Two weary, hungry travelers arrived in a small village after days on the road, desperate for something to eat. They went knocking on villagers' doors to ask for food, but everyone in town turned the strangers away.
Frustrated and starving, the travelers were at a loss. They stood in the village square, looked around, and came up with a plan.
One traveler built a cooking fire in the center of town. The other borrowed a large cooking pot, filled it with water, and put it on the cooking fire. Then he found a small, smooth stone, and put it into the pot. The travelers sat by the pot, waiting for it to simmer, warming their hands by the fire.
Curious villagers started peeking through their window curtains and cracking their doors. Finally, one villager approached the travelers, and asked what they were doing with the pot.
"Stone Soup!" the travelers told the villager. "We're making a delicious Stone Soup. We're so tired and hungry from our journey, but this Stone Soup will warm our bones and fill our stomachs." Word traveled amongst the villagers that these fellows were making soup right under their noses in the town square, and more villagers, curious and hungry, came out of their doors to stare.
One traveler turned to the other and said loudly, so everyone could hear: "But if only we had some onions. Onions would really make this Stone Soup perfect."
A villager stepped forward. "I have an onion, " she said. "If I give you my onion, may I have some soup?" The traveler agreed, and in the pot the onion went. The other villagers looked on with interest.
"You know what would taste so good in this Stone Soup?" a traveler said. "Potatoes. I bet a few potatoes would make this soup taste really good." Another villager volunteered: "I've got a few potatoes in my cupboard . I'll put my potatoes in the soup if I can have a bowl." The travelers agreed, and there went the potatoes.
You can see where this story is going. Next up were carrots, and celery, and salt, and soon, the vat was filled with the makings of a delicious soup, that everyone in the village feasted on.
The story of Stone Soup is widely recognized as a metaphor for the open source development model, where volunteers contribute time and code and expertise to community software projects that are free and open to everyone to use. Open source development is alive and well today, especially around the Firefox web browser. I don't work for Mozilla or Google, but earlier last year I unexpectedly found myself leading a volunteer software project I wound up calling Better Gmail. Now that you know about Stone Soup, I can tell you the story of Better Gmail.
What kinds of things can you do with user scripts? A whole lot, which is why we kept writing about it. For example, the classic user script, authored by the developer of Greasemonkey, is called Linkify. Here's what it does: on any web page you visit that has a raw URL in the text, that's not hyperlinked, Linkify will automatically find it and make it a clickable link.
Another favorite script of mind is called Secure. On any webapp that offers an https connection option—that is, an SSL encrypted session—when you go to the insecure http page, this script will automatically send you to the https version.
With this user script installed, if you're on a public network like at this hotel, and you visit your Google Calendar or Gmail, you'll automatically get redirected to the secure connection. Handy. It's extremely simple for developers to release modifications to web sites with Greasemonkey.
Greasemonkey has a CSS counterpart called Stylish which works in the same way. Anyone can write custom CSS—a user style—and with the Stylish extension installed, associate that style with particular web sites. Greasemonkey and Stylish are pretty amazing tools because in essence, they let anyone modify the look and behaviour of any web site without touching any of the code on the backend.
[SLIDE 5: USERSCRIPTS/USERSTYLES.ORG] As Greasemonkey and Stylish became more popular, two community web sites were formed around them: UserScripts.org and UserStyles.org. At these sites user script and user style developers can publish and promote their scripts and styles. These sites have most of the social aspects you'd expect in web communities: user profiles, forums, comments, and ratings.
As a hungry blogger always on the lookout for a good piece of software, myself and my co-editors at Lifehacker posted about dozens of user scripts and styles at UserScripts.org and UserStyles.org. I noticed in particular that lots of really useful scripts for Gmail in particular were popping up. This makes sense; when Gmail was first released it was invite-only, and it was so different and innovative it attracted a tech-heavy crowd—just the people who would have the know-how to write Greasemonkey user scripts. Lifehacker readers were heavy Gmail users, so it felt like every week or so we were posting yet another Greasemonkey script for Gmail.
Let me show you a few examples.
[SLIDES 6 THROUGH 11: VARIOUS USER SCRIPTS] (Note to readers: Here I described the functionality of each user script in the slides, no transcript on this part, sorry!)
Clearly there are lots of useful scripts out there, but there is a problem with Greasemonkey.
[SLIDE 12: PROBLEM] Greasemonkey makes things really easy for develop ers, and really hard for users. It takes the onus off of the user script writer to make things easy and puts the work on the user.
[SLIDE 13: TOO MUCH WORK] While it's super-easy for a developer to hack up a script or style and publish it for use with Greasemonkey or Stylish, the user gets the short end of the stick. First, convincing a user to actually install Greasemonkey is no small feat. When you tell someone, "You really need a user script manager, it can do all this cool stuff for you." Their answer is usually, "Oh yeah? What kind of cool stuff can it do?" and your answer is "What kind can't it do? It can do anything." But that's not a good argument. I'm no user interface design specialist, but I think it's safe for even me to say that "Normals" don't want to install a Firefox extension AND install a script that works with it AND configure that script. It's several steps, and it exposes more of the technical details to the user than they need (or want) to know.
Even over at Lifehacker, where most of my readers are on the upper scale of tech savvyness, I heard a lot of them say that they didn't want to go through the whole rigmarole of installing Greasemonkey, that they didn't see the point just to get one little mod that they can get by without.
But there were all these great scripts out there that I wanted to get out to my readers in an easy, single package, so I had an idea.
[SLIDE 14: LIGHTBULB] Wouldn't it be great, I thought, if you could take a Greasemonkey user script and easily turn it into a regular Firefox extension? Not many people know about Greasemonkey or user scripts, but lots more people know how to install a Firefox extension.
Like most great ideas I've had about the web, someone else had the exact same idea months earlier, built it, released it, and moved on.
Out of curiosity, I went ahead and plugged in a user script to see how the compiler would do—and it worked exactly as advertised. Each one of those Gmail enhancements that I showed you earlier could be compiled into its very own extension with this tool, which was fantastic. But what I wanted to do was aggregate ALL the user scripts that we featured on Lifehacker into a single package that readers could install in one shot. I'd done some Firefox extension development before, and since Greasemonkey's code base is open source, as well as the compiler's output, I cracked open the compiled extension and added in the rest of the scripts, as well as a simple interface to turn scripts on and off.
[SLIDE 16: BETTER GMAIL] I called the final product "Better Gmail." It's a single Firefox extension rooted in the Greasemonkey code base, that aggregates Gmail-related user scripts into a single interface. It's first release only had a few scripts included in it, but Lifehacker readers went nuts for it, and in the comments on the site started submitting suggestions for scripts they wanted included. I iterated the extension as often as I could, and in the end it included 31 scripts and skins that enhanced Gmail's look and feel.
Not only was user response to the extension enormously positive, but the user script developer response was great, too. They were happy to have their work recognised and promoted by Lifehacker, but they also loved having their work included alongside other developer's scripts—in essence, the sum made each small part more attractive. I started acting as a liaison between the script developers and the users. We'd get bug reports at Lifehacker about certain scripts, or devs would upgrade their work and contact me, asking if I could update the extension. Suddenly I found myself leading a distributed software project that involved dozens of developers without even intending to!
As time passed and the extension grew, and more people downloaded it, I started to get more and more requests for translations—understandably, users wanted the extension in their native language. When one reader emailed us offering to translate the interface into Spanish, I thought I'd put a call out to the community and see if anyone would be willing to volunteer their language skills to localise the extension. I published a post on Lifehacker listing all the copy in the extension's interface, and asked anyone with the time and inclination to volunteer a translation.
I got an email that same day from a reader who was almost offended by the request! But not for the reasons you think. She asked why I'd ever put a request like that on Lifehacker. Didn't I know that there's already a web community of volunteers who translate Firefox extensions?
[SLIDE 17: BABELZILLA] Actually, no! I didn't know that. Yet, there is—it's called BabelZilla.org. If you go to Babelzilla.org, it doesn't look like much, in fact, it's a bit difficult to tell what the site does. Nevertheless, I registered for an account and posted Better Gmail into their "Web Translation System" and waited. I thought that MAYBE I'd get one or two translations for the extension, Spanish and French? Maybe Italian? I didn't have very high hopes. That's because I hadn't learned my lesson about the communities that surround Firefox.
What I got back was mind-boggling. I'll let the next slide speak for itself.
[SLIDE 18: LANGUAGES (Note to readers: the actual slideshow scrolls up the list of translated languages for overly-dramatic effect, but Slideshare couldn't grok the animation. Sorry!)
Twenty translations for twenty locales around the globe came back, from Hebrew to Polish to Arabic. I was absolutely floored. And I was a little scared, because I didn't know anything about localisation in Firefox. But it was actually a quick learn, and I included the volunteer translations into the next release of the extension.
[SLIDE 19: DAISIES] In the end the extension included scripts and styles by dozens of people—hundreds, really, if you count the Greasemonkey developers and writers and Firefox folks—and contributions from four different web communities. UserScripts.org, UserStyles.org, Lifehacker readers, and Babelzilla.org translators. What started out as a little weekend project turned into a monster: Mozilla Add-ons reports that over 300,000 people downloaded the extension. That's from there alone—at Lifehacker we didn't track downloads, but the Better Gmail homepage(s) were viewed over 800,000 times.
We made soup.
[SLIDE 20: LIGHTENING] Of course it wasn't all sunny meadows filled with daisies. There were bumps along the road, like when people started uploading copies of user scripts to UserScripts.org that contained spyware. For one hot second I thought Better Gmail might have been infected. (Luckily it wasn't.) There were conflicting scripts—if one was enabled, another wouldn't work. It was incredibly difficult to adequately credit the user script developers, because users didn't necessarily understand that I hadn't authored the features, that it was just a compilation of existing work. It was difficult to design a cohesive UI that made sense, since it was a compilation of standalone scripts. I also had to walk a tightrope between developers and users and Google. For example, lots of users wanted us to include scripts that blocked ads in Gmail. But in the interest of not violating Gmail's terms of service, I turned those down. (Later I'll tell you why that turned out to be a good decision.)
Finally, perhaps the biggest thorn on this rose, is that HTML is not an API. You can write user scripts and user styles to your heart's c ontent, but if that web site gets redesigned and renames div's and classes and changes the page structure? All your work goes out the window.
Nevertheless, users were eating up the extension and wanted more.
[SLIDE 21: MORE BETTERS] So I adapted it to other sites and services, and built a Better GReader, a Better GCal, a Better YouTube and a Better Flickr. (However, none of the sibling extensions ever became as popular as Better Gmail. )
Time went on and things were hunky dory, until we got an email from Google a few months ago. (As an aside, this is a pretty unusual for us to hear from Google—we have contacts from both Microsoft and Yahoo, and they send us press releases and invite us to events on their campuses, but we rarely hear from Google.) But the Gmail Product Manager, Keith Coleman, was writing to say that they were working on some major Gmail code upgrades that would break the Better Gmail extension. That was the bad news. The good news, however, was that they were also releasing a Greasemonkey API for Gmail.
[SLIDE 22: GMAIL/GREASEMONKEY API] Which basically means that Google's INVITING Greasemonkey user script developers to add to the app. The API itself provides hooks to the web interface for developers to address certain parts of the page. Like, to add a box in the sidebar, your code could call an available method on the page versus start manually manipulating the DOM. This was huge news, and a big step forward for Greasemonkey developers. Because, like we talked about earlier, HTML is not an agreed-upon, permanent way to represent data in a web application. But an API is.
To tell you the truth, I thought that If I were to get any contact from Google regarding Better Gmail, it would be some sort of hostile lawyerly thing demanding that we stop messing with their product. But it was exactly the opposite: by introducing the API, they're opening up the door and rolling out the red carpet for developers in to add to and modify the frontend of the webapp.
Things happened pretty fast after that. Google began rolling out the promised changes in waves to their user base; even now not everyone has them. Because there are two versions of Gmail out there, I wound up forking the Better Gmail extension into two projects, one for classic Gmail and Better Gmail 2 for the new interface. (One thng that was really neat about hearing from them is that they let me get the developers who'd worked on Better Gmail user scripts early access to the new changes so I could update the extension for when users got the new version).
Not long after the newer version of Gmail rolled out to a large number of users, a company called Remember the Milk jumped on the new developer-friendly Gmail and used it to integrate their product into your inbox.
[SLIDE 23: REMEMBER THE MILK] If you haven't heard of Remember the Milk, I highly recommend it—it's a web-based task manager that organises your to-do's and projects in and sends reminders. The RTM folks released a Firefox extension for Gmail that integrates the product into Gmail. So you can see your task list on the right side, and you can easily turn a message into a task, or you can associate your Gmail contacts with a task inside Gmail with the RTM extension.
So how does the story of Better Gmail relate to you? Well, a few ways.
[SLIDE 24: GREASEMONKEY HACKS BOOK] First, if you haven't checked out Greasemonkey or Stylish, do so. Developer types should go with Greasemonkey, designers over to Stylish. They're both fantastically effective platforms for devs to quickly iterate code and markup, get it out there, and invite your more tech-savvy users to try on a new look or functionality without actually baking it into your app. If you want to pursue Greasemonkey coding, do check out Mark Pilgrim's Greasemonkey Hacks book, or just go to his site, diveintogreasemonkey.org.
Second, if you're working for a company or on a product, go to UserScripts.org or UserStyles.org and do a search for your product name. There's a good chance that someone's developing your application and you didn't even know it! In fact, Google wound up baking in at least one feature that a Better Gmail user script had added to Gmail: coloured labels, and they're now hinting towards doing some more folder-like features instead of just offering message labels, too (which is also available now as a user script called Folders4Gmail).
Third, if you're looking to integrate your application into Gmail, much the way you can build a Facebook app, now's the time that you can do it, and tap into that user base just like Remember the Milk did.
[SLIDE 25: THANKS] Finally, if you take anything out of this room this afternoon, I hope it's the story of Stone Soup. Every single thing we do on the web—whether it's an 140-character post on Twitter or a user style that we've slaved over for hours to skin our favorite webapp—is a way to give back to the community, and put your ingredient into the soup that everyone online can enjoy. Thanks.