[OH-Dev] A visual flowchart for Open Source Comes to Campus (or: a thread *not* about a big ball of code)

[Asheesh Laroia]

Hey all develers,

In preparing for the upcoming open source comes to campus, I made a visual 
flow chart of the steps it takes to get a patch accepted into an open 
source project. The flow chart is only on paper at the moment, and it'd be 
cool to make it some HTML-y thing. Any takers? (:

This could be a quick hack for someone who likes HTML, CSS, and/or 
JavaScript. (Usually, things on OH-Dev can't be quick hacks because of 
code review, and because changes have to integrate with the existing big 
ball of code that is oh-mainline. But I figure since this coding request 
is for something OpenHatchy, posting it here is on-topic!)

(CC:ing afarrell and ezyang, who expressed interest in this when I 
mentioned it to them off-list)

== More ==

The way contributing to open source works is that it's a collection of 
steps that I, personally, have totally internalized. I've internalized not 
only the sequence of steps, but detailed information about each step.

For Open Source Comes to Campus, when we ask students to get involved in 
projects, we end up with a lot of blank stares. So, to help people work 
through making their first contribution, I think a flow chart would help 
students articulate what step they're on, especially so they can ask for 
help with that step. (This is corroborated by the one time I used this in 
person with someone, who liked it enough to take a photo of it on 
her iPhone for future reference.)

(Also, these steps are very similar for any sort of weakly-organized 
collaborative project.)

So I imagine that there could be some web page students can work through, 
where there are a set of circles with the step names, and when you click 
on the step name, you see more details about that step.

The "flow chart" could look something like this (scanned from something I 
tested out on someone, in person, last week):

* Flow chart link: http://web.mit.edu/asheesh/www/flowchart-scan.jpg

I wrote out paragraph-y descriptions for each step, which is what you'd 
see when you click on the nodes, here:

* Steps and descriptions: https://etherpad.mozilla.org/process

I happened to write in YAML syntax because, in some amazing future, the 
visual web page we're describing could be driven by a YAML input file (or 
a database, I suppose).

== Help requested ==

It takes me ages to lay anything out visually in JS/CSS/HTML, so I'm 
wondering if someone else wants to try their hand at it!

The first time I expect to try using it is at the Sat Sep 15 Open Source 
Comes to Campus event at JHU.

P.S. I think this would actually work really well as a printed handout, 
too, if someone wants to go that route. But the web is just so hip. 
Besides, I think this flow chart could possibly become the most useful 
thing on the OpenHatch website if we make it for the web.

-- Asheesh.