Show HN: A Collaborative Code Editor (like EtherPad with Syntax Highlighting) | Hacker News Reader

Show HN: A Collaborative Code Editor (like EtherPad with Syntax Highlighting)

snucode.com

46 pointswerg20 comments

So, one thing I really like about this is there's no UI clutter - just an editor and a footer. That would make this sort of thing great for embedding into another app. Another thing I like is you can create a new document simply by navigating to a random URL. Again, great for embedding (where the containing app can just name files after a UUID or whatever).

The down side is I typed some stuff, then clicked reload and my text was a bit scrambled. So I'm going to say your operational transform implementation is a bit buggy :)

:) Yes there are a few kinks. Especially if you type quickly and do mult-line replace operations. It also sometimes doesn't register newlines accurately. All this might have to do with the way my code talks to the editor.

Thank you for your appreciation! And I hadn't yet thought about embedding. Technically it actually could be a bit tricky to embed because you can't really mix websocket- with vanilla HTTP servers yet.

I've been looking for something similar for a long time. But this has a lot of issues.

Problems:

1. You don't have any syntax highlighting for Java, C, C++, etc? These are very popular languages.

2. My browser's (Chrome, OSX) spell-checker underlines everything in the editor, which is extraordinarily distracting.

3. Some common text-entry keyboard shortcuts don't work (ex. Command+Delete)

4. Needs some privacy and sharing options.

5. From my experience with other collaborative editors, it also needs a way to download the document from the command line.

Yes, problems abound :)

1. In fact, there is syntax highlighting for all the C-like languages, it's the mode called 'clike'. I guess that label isn't so very fortunate 2. Oh actually, the underlining has been added by me as a means to do author attribution. I should add a checkbox to turn it on and off. Before I had had the text background in various colors but I found that to be an even worse distraction. 3. The keyboard shortcuts are tricky. I'll have to delve into that a bit more (and test across platforms). 4. So obviously for now it's just security-by-obscurity. For now you can take the sourcecode and host it somewhere private. I left out explicit user account management in order to get the first version out the door. 5. Hmm. that's a very interesting thought! It should be fairly easy to build a small command-line tool to upload and download files.

Thanks for the feedback!

As a newb, I thought clike was an esoteric language I'd never heard of :) The underlines are a good idea for attribution, perhaps make them straight instead of squiggly, and drop the opacity? I'm not sure.

As for the CLI interface, I was just referring to wget/curl on a specific URL to download the file. If you add in passwords on documents, make sure this is supported in your wget/curl implementation. There was another site that I tried this on, and they hadn't considered this despite having access through wget/curl.

What browser are you using? In Chrome 19 dev, I'm not getting squiggly lines, I'm getting some sort of randomly dashed lines, which are very annoying.

If the underlines were less distracting, I think this would be really wonderful!

OK I'll make them optional! Will take a few minutes because I do the colors by adding CSS-rules to the DOM on the fly. They look rather petite on my browser though :)

Done. Thanks for the input!

May I add, font-size: 7pt? I genuinely cannot read any of the text on this page. Please just let the user decide the best font size for them.

Sure. Before I had an way to hide the footer I set it to small text so as to minimize distractions. Should set it back.

Done. not sure if it's optimal this way though... I'll have to think of a nicer interface. Just couldn't make myself put up another bootstrap toolbar.

So I started building this as a coding exercise for an interview, I'd particularly be interested in getting feedback on my approach to Operational Transformation: http://gpickard.wordpress.com/2012/02/17/my-approach-to-oper...

When I did http://collabedit.com I used the approach outlined at: http://www.codecommit.com/blog/java/understanding-and-applyi... with an md5 hash for the "Operational Parentage" piece.

It was pretty tough to implement (for me at least). Especially when I got to using the "Bridger" and "Buffer" to transform.

Your approach seems much simpler. Do you retain the ability to "play back" the edits like etherpad did?

How big can a document get before you run into the precision issue you mentioned?

No I actually cannot play back yet. But it's not hard to implement, it even would be relatively easy to selectively play back only certain edits. I believe in the worst case a few thousand edits would suffice (though it would be rather tedious on the keyboard to do: type - then go back one with the arrow keys and type again).

Collabedit looks nice and solid! (Hadn't been aware of it.) Did you roll your own editor or did you use something like ACE or CodeMirror?

I used EditArea http://www.cdolivet.com/editarea/editarea/exemples/exemple_f...

How does it compare with Stypi?

http://www.stypi.com/

Stypi is a more mature project with more features. Also they use the ACE-editor which arguable is more feature-rich (though poorer in documentation IMHO).

My project is open source: https://github.com/werg/snucode So it's also an example use of the Node.js websockets framework SocketStream.

Furthermore I do operational transformation a bit differently (presumably, not sure how they do it): http://gpickard.wordpress.com/2012/02/17/my-approach-to-oper...

Once it finishes loading it completely breaks my browsers back button.

Exactly, I just noticed that in terror :) Am working on it... Has to do with the way Backbone.js handles pushState I think,, and the way I handle Backbone's router thingy.

I put up a fix. Does it work now?

Reply on news.ycombinator.com