node.js ko
Coding Stage
Coding Stage
by Team Honey Badger
Coding Stage is a real-time code collaboration tool. It let’s you share an in-browser editor liveCoding Stage is a real-time code collaboration across the internet, as well communicate with room participants via video chat and IM.
Judging Instructions
Log in via Github (click the link in the upper right). Then, either create a stage (in the upper right), or join a room. You will see everyone who is participating in the coding session with you. Click the “Ask for control” button to get control of the editor. Only one person may have control at a time.
You can also run the code from the stage editor if it is javascript, coffeescript or ruby by pressing the “Run” button above the editor.
Try it out with a group! Coding Stage is most effective when working with a bunch of people.
Browser requirements: IE9 and up, Safari 4 and up, Firefox 4 and up, Chrome 11 and up.
Who
chrisjpowers — Chicago, IL
lovehasnologic — Chicago, IL
jeremyckahn — Chicago, IL
benmills — Chicago
How
Standards: HTML5, CSS3
Components: jQuery, Underscore, Backbone, MinPubSub, TypeKit Free Plan, Extend, Modernizr, Selectivizr, Respond.js, HTML 5 Placeholder jQuery plugin, jQueryUI Position Plugin, jqModal, Formalize, ACE Editor, Tokbox, Linode, Node
Software: Coda, Textmate, Illustrator, Photoshop
Icons: http://www.pinvoke.com/
Votes
Your Vote
Voting is now closed.
Other Votes
(53)
jacobquistjudge
mnshahjudgeThe UI design is great. Subtle and looks like a collaborative editor. The responsiveness of the chat is great. I had trouble executing the editted code. It just showed a browser alert with a javascript object representing xml. The video on the right is a nice touch.
adinardijudgeGreat ideas at work here. I immediately think about how this could be used for remote interviews and other distributed coding. Great stuff.
First thing I ran in to was that scrolling the code editor (as a viewer) didn’t work at all; tried a few browsers. :(
The brace auto-complete is, well, annoying but would make a great optional preference. The ability to delete a stage and/or make it private would be great too.
Design was intuitive and easy to use.
caolanjudgeIt works and the site looks slick, but there are a number of small points which detract from the overall experience:
- Logging into an existing stage using GitHub redirects you to the homepage.
- The names under who’s watching seem clickable but don’t do anything.
- The box in the top right corner keeps flashing and I don’t know what it does.
- The chat messages are displayed newest at the top instead of newest at the bottom and include milliseconds, which as a human being I don’t really care about.
- The editor automatically inserts characters. This shouldn’t expect everyone to use the same editor setup as you, and I found it really annoying ;)
- Sometimes, I could still edit the text even though I didn’t ‘take the stage’… though it wasn’t sent to other participants, it was confusing for me.
All the miserable nit-picking aside, the concept is good and I could definitely see myself using something like this over a shared screen session. The idea of a multi-user text editor isn’t new but I think you’ve taken a good approach, looking to replace the Gist/Pastebin with something more interactive… overall, I’d have preferred it to do less, but get more of it right.
amirmanjijudgezachstronaut
contestantIt’s kind of like an online one-way SubEthaEdit or something. Nice that there is no app to download and install. Useful as a realtime remote instructional tool. I’d like to see realtime co-editing of the same code rather than taking turns editing it one person at a time. Sometimes “student” and “teacher” are really peers.
I can’t click on the node.js stage on the homepage for some reason. It is an empty # url? I do not like that I can’t scroll the stage as an observer… especially after the person running the stage has left. It makes it so I can’t read all the code!
I had two intermittent bugs in Safari 5.1 Snow Leopard that were fixed by reloading: I was submitting chat text and it was not showing up in realtime in the chat log (but was there after refresh). Also, I had the stage open in two browsers, I was editing code in one, and the changes were not showing up in the other. I couldn’t reliably reproduce these bugs, but they were annoying when they happened.
Subjectively, the design was a bit monotone for me. I actually did not see important buttons like create a new stage, ask for control, ask to contribute.
- contestant
Co-editing is on the feature list, but as you know, cuts had to be made due to time-limits. Chris did a code lesson last night and it was wonderful and extremely useful. It wasn’t a use case I had initially thought of, but as you mentioned, there’s quite a lot of value there.
Re: the node.js room. That’s an upcoming lesson, and the room will open when Dave enters Tomorrow at 3CST. You should swing on by to see the site in lesson mode.
The non-scrolling was another 48-hour patch to enforce control of the room to the coder. A much better solution will be implemented in the long run.
Thanks for your thoughts. We will be continuing development on this, so all feedback is great.
paularmstrong
contestant
ara_pjudgeEither I was doing something wrong or it was buggy, but I couldn’t actually edit any of the code. But great collaboration tool specific for coders.
- contestant
To finish over the weekend we had to implement one coder at a time. The room creator is the coder, but they can hand off control to others in the room. If you were checking out old rooms though then you’d have just been a spectator. More direct collaboration is on tap for the future.
ryanstevens
contestantI love the idea. The video integration put this app over the top in usefulness. The only feature I think it should do is the ability to suck in projects from GitHub to stage the edit area with code. I plan on using this, let me know if you guys want contributors. If you marry with with my knockout project, mocker.no.de, coding stage will have the ability to “run” the code as a server people can hit from the outside.
- contestant
Your project is an interesting idea! How did you handle security when executing arbitrary code on your server? I would love to love to build out a system that will create small dev environments so users could install dependencies, run tests and run servers.
ryanstevens
contestantAhhh, great question. I didn’t have to handle security on my node box because the code in my project is ran completely on the client. All Node is really doing is sending the request to the the browser via socket.io and expecting a response back (so node is not much more than a proxy). This implementation should really sound like “Rack” from the Ruby world where my client is the next hop in the stack.
As far as running the code on the client, I do have to perform an exec() on the browser to update the client from the text editor. I do this though by ensuring the code is wrapped in a closure and sandboxed in its own name space- which is why my files look like they implement the CommonJS exports / require spec.
sh1mmerjudgeIt seems pretty buggy, however I really like the concept a lot. This is definitely something I would use. I’d love to see it because as ubiquitous and effortless as Gists.
I was a bit put off by the always on video though, which I noticed when I enabled flash support.
Otherwise great idea, and the execution is really getting there. Hope to see this one become real.
RafaelCorralesjudge
chrisumbeljudgei’m really warming up to the idea of collaborative and otherwise web-based IDEs and editors. this is on the right track.
better output handling would be sweet, though.
- contestant
Running the code was something we decided to start on Saturday night. I wish we had the time to do the output justice but sadly the code execution took up too much time to build.
The original idea I had was to have an actual bash shell in the browser but that ened up being too complicated for the 48 hours. Thanks for taking the time to check our project out!
slightlylatejudgeThe “only one person can edit” thing seems like a special case, but “stage” is in the name and that’s exactly what it is. EtherPad-like collaboration might help some scenarios, but I know that’s a lot to build in 48 hours = )
- contestant
We did talk about more than one coder at a time, and it’s on our radar. We just had to make decisions based off the initial 48 hour build limitations. But it’s definitely not a forgotten feature.
okaysamuraijudgeI’m not a programmer, but it doesn’t take one to see the tremendous value in a collaborative tool like this. It feels like Google Docs for coders to me. Very clean, smart design choices too.
therazorbladejudgeThis is awesome! I can see this being used in every live coding session. Well done!
airportyh
contestantNice concept and very well done. Would be neat to see some high profile coder do live coding. However, the code environment is a little limited. Granted you only had 48 hours.
oddacon
contestantVery solid submission, well put together and a good idea. Hope to check out some replays of sessions.
pascalh1011
contestantI like the concept most in this entry, I can really see myself using this every day! Few little glitches here and there but on the whole looking good.
mustardamus
contestantasteig
contestantVERY cool idea, you guys!
rcrowleyjudgeI’m not sure how useful this is but it’s cool and I couldn’t delete the root filesystem or send SIGKILL to init(8) so that’s good.
More feedback when a command is running would be nice.
jimfleming
contestantThe audience is the really interesting part. Lots of code collaboration going on but allowing spectators is really cool. Could see this being used in school or during presentations.
b00giZmjudgeThe idea is really great and I could see myself use this app a lot, but it still needs some polish. The ability to run code is nice, but the output is pretty cryptic. It would also be nice to have an option to grant temporary write access to one of the current watchers. But overall, it’s a pretty nifty app.
Great idea! would love see what this looks like after a few more weeks of work