Advogato blog for clarkbw

Open Source Design: Versions and Forking

Tue, 28 Dec 2010 23:06:13 GMT

It’s almost the new year so I’m getting started early in trying something new.

I moved to using only HTML/CSS for almost all of my mock-up purposes a while ago (see Why we skip Photoshop) . It’s just as fast, interactive, and removes much of the translation issues that that happen when an image is converted into HTML.

While the switch to HTML mock-ups has been good, I’ve continued to encounter the same issues I had with Photoshop images where I have to systematically save new versions of the original source and output.

Versions?

I’ve had many different approaches in trying to version my files.

No index file, just use the HTML list page the web server provides.

version 1/

prototype.psd
prototype.png

version 1.1/

prototype.psd
prototype.png

version 2/

prototype.psd
prototype.png

Or just appending the version numbers to each of the files as you save them.

prototype-1.psd
prototype-1.png
prototype-1.1.psd
prototype-1.1.png
prototype-2.psd
prototype-2.png

Later I end up with a mess of files with version numbers and I don’t really remember what happened changed in each of the versions. This is both true for myself and for anyone else who browsed my designs later.

I’ve also tried creating an index.html file so I could link to all the different versions and describe them but that index file is hard to maintain; eventually getting old and out of date.

Forking?

Oh so you want to participate in the design process? A remix of my mock-up simply means you have to choose a version and then copy all the files onto your own web server and try to get my attention so we can discuss your changes.

Active?

Am I still working on this mock-up or have I moved on? You’ll probably never really know because there’s no easy way to tell. If I have an index.html file then hopefully I put the last active date on it or if I don’t you could use the last modified time in the directory listing.

A New Way!

My new trick that I’ve recently started trying is to use GitHub Pages to host my HTML mock-ups. So far it seems to fix my version and forking problems.

Versions

I’m keeping a simple rule that each check-in must work (I can’t break the whole thing) and I should describe the changes in my commit messages as much as possible so myself and others can understand why the mock-up might have changed drastically.

There is no version numbering to deal with here since git does all the versioning. The GitHub page only displays the latest version, which is a little bit of a setback, but anyone can clone the source and then checkout the older versions locally.

Forking

Not only does GitHub provide a super simple way for people to fork my mock-ups but it also allows me to see what those people are doing by keeping track of the forks and their progress. I could actually incorporate changes from someone else into my mock-ups by merging them in.

Active

It’s pretty easy to see from the source view the last time I was actively working on a mock-up. And you could drop over to my profile view to see what other mock-ups I was more actively working on.e Bonus!

Next

I’m going to try to add some standard pieces to my pages so it’s easy to find the source code and perhaps a README page which quickly describes how to see the older versions of the mock-ups.

Any other ideas?

yum update Minefield

Thu, 9 Dec 2010 21:10:35 GMT

Very cool work from students at Seneca – Getting Firefox nightly updates on Fedora through yum

Thunderbird Conversations

Thu, 9 Dec 2010 01:09:32 GMT

Jonathan Protzenko, who worked with us over the summer, released Thunderbird Conversations the other day.

If you haven’t tried it out already you really should. We’ve been demoing it on the road for quite a while and I’ve been using it as my main way to interact with Thunderbird for weeks now.

Check out the TB Conversations Video for how it works.

Note: Thunderbird 3.3 is required for Thunderbird Conversations

See the Thunderbird Conversations post on the Mozilla Labs site for all the details.

Vancouver Go-Kart Spring GT

Tue, 11 May 2010 00:05:28 GMT

This Thursday at 11am PST will mark the beginning the the Spring GT race season in Vancouver. Mozilla Vancouver is set to take on a number of other local companies like Nitobi, mainsocial, KRANKY cafe, and others in several rounds of go-kart racing.

Albury Wodonga Go Karts 27-09-2009 0016 by racestarphotos cc:by-nc-nd

If you’re in the Vancouver, BC area and want to participate just ping @clarkbw or show up at the Richmond Go Kart Track; we have an open reservation. We have local cafes, tech shops, and individuals racing; you’ll fit right in. If you can’t make this weeks race, don’t worry; we’ll be scheduling other (weekly) races on different days and times to make sure everyone can at least participate in a few races.

This is an outdoor track, so dress appropriately. Oh yeah, and neither I nor my employer assume any responsibility for your ass during this activity.

Gathering Facebook Identities from Email

Wed, 21 Apr 2010 19:05:24 GMT

Looking at the announcement of the Facebook Graph API from Facebook F8 it seems like it will be a little easier to work with the Facebook system.

In Raindrop we already have some integration with Facebook in order to identify emails coming from the Facebook system and help you filter them out. But there is a lot more that can be done to help keep your email, Facebook, and other contacts in a cohesive form.

So here’s a quick code example written in Python to grab Facebook identities from emails sent by Facebook. This could be used to gather Facebook identities and then possibly merge those with twitter and email contacts.

First we need to import a couple things.

import email, json, urllib2

Then we’ll need to grab an email message. I used Thunderbird to save a Facebook notification email message as an EML file locally, I called that file ‘facebook.eml’ as you can see below.

msg = email.message_from_file(open('facebook.eml'))

Now we have a parsed email message msg object and we want to look for the X-Facebook-Notify header in the email so we can extract what happened.

fb_notifiy = [tuple(t.strip().split("=")) for t in \
              msg.get('X-Facebook-Notify').split(";")]

The object fb_notify contains tuples of information about the type of notification. Here is an example of an object you might see.

[('event_wall',),
 ('eid', '14102494623'),
 ('from', '21602578'),
 ('mailid', '12bf28cG149a112G63016bG21') ]

Using fb_notify we’ll do a really simple grab of the from attribute because that is what is going to be publicly available from the Facebook Graph.

from_identity = json.load(urllib2.urlopen("http://graph.facebook.com/%s" % fb_notify[2][1]))

Here’s an example from_identity object:

{u'first_name': u'Bryan',
 u'last_name': u'Clark',
 u'id': u'21602578',
 u'name': u'Bryan Clark' }

The from_identity can be used to more clearly identify who Facebook is sending this notification on behalf of and we could try merging this Facebook identity with other identities we already have in our contacts.

I saved all this code into this gist if you want to take a look at it in code only form with syntax highlighting.

Quick Filtering in Thunderbird

Sat, 3 Apr 2010 03:07:32 GMT

Today we’ve released a new add-on the Mozilla Messaging team has been working on for a little while, the Quick Filter. A new single folder search and filter system that will work alongside our previously released Thunderbird global search.

The Quick Filter add-on is reminiscent of the old quick search system of Thunderbird 2.0 but we’ve improved it in a number of areas. Here’s how it’s changed from the 2.0 days:

Search Message Types

Unread, Starred, Contact, Tags, Attachments are all types of searches you can toggle to turn on.

A Tag search presents the array of possible tags to help you filter down even more.

Filter Results Count

If your search returns a lot of results we let you know the search bar will let you know how many messages match.

And if even if the search query is too strict and there are no results the Quick Filter will display this inline.

Better Search Type Options

The old quick search tended confuse people because the search type settings were hidden in this popup menu:

In the new Quick Filter we’ve brought those options out every time you focus on the search entry so you always know what kind of search you are performing.

Space Saving Options

Last but not least we’ve worked hard to make sure that if you are using the Quick Filter on a smaller screen it converts down to icons only mode automatically.

Note for Techies: This change was made possible by the CSS @media rule

Try it out!

You’ll need to be running Thunderbird 3 and then from the Add-on Manager (Tools -> Add-on) search for “quick filter”.

Give Feedback!

We’re looking for feedback before this lands in Thunderbird as a core feature so any praise and/or comments you have would be greatly appreciated. Leave your comments in the Quick Filter add-on reviews.

Something you might have already noticed is that this is a separate toolbar just for quick filtering but you can show or hide it as you need it. Try out the keyboard shortcut and see how it feels.

Thanks for taking a look!

Try other web apps in Thunderbird tabs

Wed, 25 Nov 2009 23:09:11 GMT

Colin Dean converted the code from my post on Google Calendar in Thunderbird tabs and created a GMail tab for Thunderbird.

If you’re interested in trying what a web application would look like running inside a Thunderbird tab without modifying an extension use the following code snippet.

Open the Error Console from the Tools Menu

Copy & Paste this code into the input entry at the top:

Components.classes['@mozilla.org/appshell/window-mediator;1']
          .getService(Components.interfaces.nsIWindowMediator)
          .getMostRecentWindow("mail:3pane")
          .document.getElementById("tabmail")
          .openTab("contentTab",{contentPage:"http://tinyvid.tv/show/2h9led44g152z"})

Change the provided link ( http://tinyvid.tv/show/2h9led44g152z ) at the end to the web application you’d like to try, like http://twitter.com for example. Click the ( Evaluate ) button.

It’s Party Time! ( if you didn’t change the link, http://tinyvid.tv/show/2h9led44g152z )

You can continue to iterate the tab application by creating a new click handler, however at that point it might be worthwhile to start with the extension code instead of working in the error console.

Jetpack for Thunderbird

In the hopefully not too distant future Thunderbird will gain Jetpack as it’s new extension model and it will be no longer necessary for add-ons like this these be created but instead a simple Jetpack which can do the same things without restarts or complicated installs.

If you’re interested in this take a look at Andrew’s recent Jetpack in Thunderbird post.

Above code snippet courtesy of Magnus in bug 519041

Google Calendar in Thunderbird tabs

Tue, 24 Nov 2009 02:11:05 GMT

If you’re a Google Calendar user like myself you might want to check out this really simple add-on for Thunderbird, which should be available as an official add-on for the coming Thunderbird 3 release.

The Google Calendar Tab

As simple as it sounds, this adds the Google Calendar web interface as a new tab directly into Thunderbird. Creating and viewing events works just as it would in a browser like Firefox.

If your calendar is setup to show popup alerts you’ll continue to see them from the calendar tab while in other, mail, tabs.

Here’s my family Pinochle game reminder alert showing.

There is no official release of this extension yet, however you could grab the latest XPI, download and install it into the latest (at least rc1) Shredder release.

More Extensions

It’s easy to get started integrating a web application like Twitter, Remember the Milk, and other sites into Thunderbird. Once you get the initial pieces you can start working on better integration into your email conversations.

If you’re interested in creating an extension similar to this one, here are a couple links you probably want to check out:

Lightning

This calendar extension only handles a single url for Google Calendar. If you’re looking for actual calendar integration with different calendars, including google calendar, you’ll want to check out the Lightning Calendar extension which also runs inside Thunderbird tabs.

Raindrop

Sat, 21 Nov 2009 02:07:39 GMT

The other day I did a quick hack using Raindrop & Jetpack to get new mail notifications from Raindrop. In total it took me less than an hour. It’s no Joe Shaw hack, so I don’t expect to get in the paper for this but I figured I’d share anyway.

This Jetpack checks Raindrop to see if there are new messages and bubbles them up as notifications if there are. Here’s the source code:

var messages = {}; 

function checkMail() {
 var api="http://localhost:5984/raindrop/_api/inflow/conversations/home?limit=10";
 jQuery.getJSON(api,
               function(data, textStatus){
                 jQuery.each(data, function(i,item){
                   if (item.unread) {
                     if (!messages[item.id] || messages[item.id] != item.messages.length) {
                       var n={title: item.subject,
                              body : item.messages[0].schemas["rd.msg.body"]["body_preview"],
                              icon : 'http://localhost:5984/raindrop/inflow/i/logo.png'};
                       jetpack.notifications.show(n);
                     }
                     messages[item.id] = item.messages.length;
                   }
               });
 });
}
setInterval(checkMail, 10000);

To try this out you’ll need Raindrop installed and running and Jetpack installed in Firefox.

Go to about:jetpack and copy the above code into the Develop tab, then click the try out this code link just below the Bespin editor.

If you don’t want to do all that you can just watch the video below (no sound, so you might want to play some music)

View on Vimeo.

Raindrop

Thu, 22 Oct 2009 22:07:10 GMT

Today Mozilla Messaging released the Raindrop project

Raindrop is an experiment in the design of a new messaging platform in the open.

What I like most about Raindrop is our process. We started with some simple designs, created a couple iterations and now we’ve opened up the whole process to share. This isn’t another email client or a twitter client, we have been designing for the way people communicate on the web today. And we’re looking to make it awesome.

If you’re a developer or just have lots of patience you could grab the source code, follow the instructions and get raindrop up and running. But that’s not what we’re launching, we’re launching the next version, the one that we design and develop in the open. Read that again, there is no download.

Design

Starting today, new raindrop designs will be uploaded into the Raindrop Design flickr group for discussion and review. As designs are ready to be implemented we’ll be blogging about them in the Raindrop Design Blog.

Develop

Discussion of code and extension development takes place on the Raindrop Development Google Group. We’re currently built on CouchDB, Python, and JavaScript. (if you’re trying to get raindrop up and running make sure you read the INSTALL doc carefully)

Extend

From the ground up Raindrop was built as a set of extensions on top of extensions. This architecture was a design choice so that others could easily continue extend on top of our work.

There are places to add Data Miners which can search messages for regular expressions and User Interface Extensions which can modify the layout and design of messages presented.

Check out James’ video on Raindrop Software Components for more on the extensions system.