Can I get a shout out for the JotSpot inaugural hackathon!
Last Thursday, JotSpot had its first-ever hackathon (we were inspired by something similar done by the good folks at Atlassian). If I had advice for any company, it is that you should do this – and soon.
What the heck is a hackathon?
It’s a day-long event where our engineers each crank on something:
- valuable to the company
- but not what they’re “supposed” to be working on and
- that can be taken from idea to working prototype in one day
Why do a hackathon?
Because even startups get into a grind where engineers are working on longer term projects and creativity can feel stalled.
“But, Master Yoda, I am not afraid…”
We kicked off the event (with a mighty blast of the air-horn we bought at Fry’s Electronics) at 9:00am and we stopped at 8:00pm to do presentations. Jim (Customer Support) and I (CEO) were the food mules. Two dozen Kripy Kreme doughnuts, pizza and pez served as a brain-fuel.
Here’s our intrepid group of engineers poised at the hackathon starting line (with their individual rations of “Stax” – Pringles-imitation chips).
No one knew what anyone else was going to work on. Secrecy was the word of the day. Everyone hunkered down and cranked. There were only two pauses in the action – lunch and pez.
At 8:00pm, feeling like the SAT administrator, I yelled “pencils down!” and blew the airhorn. Pizza arrived and people wandered out of their cubes looking tired and slightly myopic from all the screen time.
Presentations began at 8:15 and it was amazing what this little team produced, in a frenzied, concentrated effort. When you give people the time to do the thing that always seems “just out of reach” people’s creativity cracks wide open.
So, without further delay, here’s what we built.
Real-time Editing
Abe “The Maine Brain” Fettig (you’ll find we all have stupid nicknames with obscure backstories), built a beautiful real-time multi-user editing environment. It allows multiple people to edit the same page at the same time and makes it possible for people to lock and edit at a paragraph level. The pictures don’t do it justice (so check out the flash movie below). It will be great for conferences and the like (instead of the IRC backchannel that often happens). Can’t wait for this to get out there!
Watch it in action: (click thumbnail)
Dev Buddy Plug-in
JotSpot has a new plug-in system (not yet released but coming soon!) that allows people to extend the interface and functionality of their JotSpot. Scott “The Eagle” McMullan, our head of developer relations, built the “Dev Buddy” plug in. It’s designed to make it easier for JotSpot developers to manage their products by adding another button to the interface that gives them instant access to XML source and the current “form” on the page. In addition, it adds a project area where they can place links to all the relevant project files.
Getting to the plug-in menu:
Selecting the dev buddy plug-in:
The results… Note the addition of the button to the chrome, the error reporting at the bottom of the screen and the section in the toolbar for project files:
Resizable Text Areas and Drag and Drop Tables
Alex “Waffle Donkey” Russell and Reuben “Steel Trap” Antman developed two very cool javascript widgets. The first was a cross-browser resizable text editor. For any of you out there who have big screens and who just wish you could grab a corner of a text edit area and resize it, you’ll like this. The second widget allowed you to reorganize JotSpot table rows with drag and drop in the browser. Tasty!
Before (small text area):
After resizing in browser:
Watch it in action: (click thumbnail)
Here are the drag and drop tables.
During the drag
Watch it in action: (click thumbnail)
The Wiki Browser
Michael “Vorlon” Nestler used the JotSpot APIs to feed link data into a Java applet which gives you a visual representation of your wiki. It’s a nice way to get a birds eye view of how any JotSpot account is put together. You definitely want to see the movie of this in action.
Watch it in action: (click thumbnail)
Triggers & Events, SVG, and Link Decoration
Graham “The Neuron” Spencer built a Triggers & Events system into JotSpot that allows developers to (what else), trigger events in the system based on the events on a page. So, for example, if in a JotSpot application (such as the trouble ticket application), you move the status of a ticket from open to closed, you can trigger a whole host of events, from the sending of alert emails to the modification of other, related, pages. It’s not released yet, but when it is, it will add a whole new capability to those who are building JotSpot applications.
Graham also added general SVG rendering to JotSpot. Any wiki page whose XML content is an SVG file will now get converted to PNG or JPEG and sent to the client as an image. You can refer to resources in the wiki (like other JPEGs) by using the same wiki: protocol that you use in other pages. Why is this cool? Because it lets you use server-side Javascript and XML inside the wiki to generate whatever images you want. For example, it’s just 3 lines of text in JotSpot to make a thumbnail from an image:
<svg width="4cm” height="4cm” version="1.1″ xmlns="http://www.w3.org/2000/svg” xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0cm” y="0cm” width="4cm” height="4cm” xlink:href="wiki:${req/args/image}” />
</svg>
Of course you can use all of the SVG filter effects and drawing tools. A few more lines of code adds a nice rounded border to your thumbnail image:
You can also use it to do Link Decoration.
You’ll be able to install a server-side Javascript function that gets called for each link displayed on the page. There are all sorts of uses for this. For example, it’s a general way to handle the strikethrough effect you see in bug trackers – you can use a property of the page to apply an arbitrary CSS style, like this:
You can change the color of the link based on how recent the last revision was:
This last example combines the SVG rendering from above with link decoration to produce sparklines. There’s a server-side Javascript program (stored in the wiki as an ordinary page) that creates a graph of recent edits to a wiki page. The X-axis is how old the edit was, the height of the bar on the Y-axis is how many characters were changed, and it’s green or red depending on whether characters were added or deleted. Then a link decorator (again implemented in server-side Javascript as a regular wiki page) is used to prepend the sparkline in front of each wiki link:
Here’s a closeup of the sparkline image:
Conclusions
All that in one day.
So what did we learn? We learned that if you give creative people the time and the ability to focus, amazing things can happen. We also learned that a single day-long event is a great format for this. In fact, we thought it worked so well that we’re going to do it again. Next time (end of May) we want to extend the concept to involve members of the JotSpot community to play along in the “home game” version. If you’re interested, drop a line to Scott McMullan (scott at jot dot com).
Last, but not least, is my favorite line of the night. Reuben “Steel Trap” Antman, was so excited by all the new stuff that he blurted “Dude, I just want to crawl into my hole [his cube], grow a beard, and build shit!”.
I couldn’t have put it any better myself.