

Show HN: A Collaborative Code Editor (like EtherPad with Syntax Highlighting) - werg
http://snucode.com

======
apenwarr
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
:) 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.

------
fudged
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
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
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
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!

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

~~~
werg
Done. Thanks for the input!

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

~~~
bnoland
When I did <http://collabedit.com> I used the approach outlined at:
[http://www.codecommit.com/blog/java/understanding-and-
applyi...](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)
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
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
I used EditArea
[http://www.cdolivet.com/editarea/editarea/exemples/exemple_f...](http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html)

------
DanielRibeiro
How does it compare with Stypi?

<http://www.stypi.com/>

~~~
werg
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...](http://gpickard.wordpress.com/2012/02/17/my-approach-to-
operational-transformation/)

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

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

