4 ms·

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

46 points by werg 15y ago

edd 15y ago
Once it finishes loading it completely breaks my browsers back button.
- werg 15y ago
  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.
  - werg 15y ago
    I put up a fix. Does it work now?
werg 15y ago
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-operational-transformation/ http://gpickard.wordpress.com/2012/02/17/my-approach-to-oper...
- bnoland 15y ago
  When I did http://collabedit.com http://collabedit.com I used the approach outlined at: http://www.codecommit.com/blog/java/understanding-and-applying-operational-transformation?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+codecommit+%28Code+Commit%29 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?
  - werg 15y ago
    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?
    - bnoland 15y ago
      I used EditArea http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html http://www.cdolivet.com/editarea/editarea/exemples/exemple_f...
fudged 15y ago
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.
- werg 15y ago
  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!
  - fudged 15y ago
    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.
    - xymostech 15y ago
      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!
DanielRibeiro 15y ago
How does it compare with Stypi? http://www.stypi.com/ http://www.stypi.com/
- werg 15y ago
  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 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-operational-transformation/ http://gpickard.wordpress.com/2012/02/17/my-approach-to-oper...
apenwarr 15y ago
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 :)
- werg 15y ago
  :) 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.

46 points by werg 15y ago

edd 15y ago

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

werg 15y ago
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.
- werg 15y ago
  I put up a fix. Does it work now?

werg 15y ago

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-operational-transformation/ http://gpickard.wordpress.com/2012/02/17/my-approach-to-oper...

bnoland 15y ago
When I did http://collabedit.com http://collabedit.com I used the approach outlined at: http://www.codecommit.com/blog/java/understanding-and-applying-operational-transformation?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+codecommit+%28Code+Commit%29 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?
- werg 15y ago
  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?
  - bnoland 15y ago
    I used EditArea http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html http://www.cdolivet.com/editarea/editarea/exemples/exemple_f...

fudged 15y ago

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.

werg 15y ago
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!
- fudged 15y ago
  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.
  - xymostech 15y ago
    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!

DanielRibeiro 15y ago

How does it compare with Stypi? http://www.stypi.com/ http://www.stypi.com/

werg 15y ago
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 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-operational-transformation/ http://gpickard.wordpress.com/2012/02/17/my-approach-to-oper...

apenwarr 15y ago

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 :)

werg 15y ago
:) 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.