Labs/Bespin/DesignDocs/CoderBadge

From MozillaWiki
< Labs‎ | Bespin‎ | DesignDocs
Jump to: navigation, search

The Bespin logo has a cloud with two "{}" brackets in the middle to represent code. Bespin is about code, and it is about developers.

Now, back in the day at OOPSLA people would ask "what type of brackets are you?" and you could answer:

  • Square [] - Objective-C, Smalltalk
  • Curly {} - C-style (Java, JavaScript, C, C++, Perl, ...)
  • Paren () - Lisp
  • EMPTY - Python, BASIC

We want to open up the fun to Bespin developers too!

Bespinvariouscodelogos.jpg

To do this, there are two features, a new badge component, and editor features themselves:

Bespin Coder Badge

 "What code are you?"

A developer can insert a Bespin code badge (via <script>) that will install a Bespin logo badge where-ever you put it. You will have the ability to customize it with:

  • Brace style (square, curly, paren)
  • Language faves (primary, secondly, tertiary)
  • Name
  • Links
    • Twitter
    • Facebook
    • Friendfeed
    • Delicious
    • Blog URL

Being Bespin, the badge isn't simply an image. It is a dynamic Canvas scene that has the following features:

  • Starts off with the primary bracket on top of the cloud
  • Rotate to secondary, tertiary, etc
  • Rotate the actual languages as overlays that look like OSX badges (e.g. number of email on the Mail.app icon)
  • Some fun glean effects
  • Have the icons for the services that the user has setup (Twitter, FB, etc) fly around. Bring in their tweets and such
  • If a developer shows up on a site that has a badge, and they have their own Bespin badge, a dance or fight can occur
    • If the developer matches the same likes, a dance off happens
    • If the developer has differing opinions then a fight off can happen
      • Automatic fights
      • If both are at the keyboard, prompt for a keyboard fight
      • Ask dev questions and have a trivia-off!

Bespin Editor

When you load up a file in the editor, change the "Bespin >" area to be a logo that shows the file type (e.g. {js}, <html>) where the type is overlayed on the brace.

If you are in an HTML file and go down to inside a <script> change the icon to be {js} which in there!

Also, change the favicon to show which type of file is being worked on.

If you have collaboration turned on, if I am watching Bob and he is in a JS file, show that badge. Also, let me click on Bob and show me a profile based on his badge info.

In fact, the badge is really a moving representation of your developer profile.