Thank you for this! I'm in the process of teaching my brother HTML/CSS, and this is the perfect tool for when he is not sitting next to me.
Show HN: Scratchpad.io - a real-time HTML and CSS editor
21–30 of 89 posts
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#22This is really great, especially as a compliment to the learning tools coming to market.
For front-end designers looking for a similar effect within your own text editor and browser window, I can not live without the CodeKit app now. It does a similar real-time effect each time the template files are saved. Also supports less, js debugging/minification, and other production processes.
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#23Earlier quoted context omitted.
Thanks! It was actually really simple to make with two tools: http://ace.ajax.org and http://www.firebase.com If you want to chat about building it I'd love to give you any tips - i'm nbashaw@gmail.com
How did you accomplish the real-time text editing? Is there any OT engine that you hacked into Firebase?
Basically on keyup I ship the whole contents of the editor and the cursor position to firebase. I'm also keeping track of all the active connections to a scratchpad document so I know who is typing. Anytime the code changes on the server, it triggers a callback function on each client that will update the contents of the textarea. If someone else is typing, the document is locked so only 1 person can type at a time. This way I can avoid all the potential merge conflicting type things that can happen.
I'm not sure what an OT engine is. What is that?
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#24Nicely done on Scratchpad. The interface seems to be the right combination of simple and intuitive. It would be great to see the source code as many others have said.
I'm particularly curious as to how you've done the collaborative bit given that you don't have explicit control over the order of operations of edits.
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#25I don't wanna down a nice looking project, very well done on the interface but, another one? There are already like 7+ of these I don't really see the need to produce another one especially one that is HTML+CSS only when many of the others feature JavaScript and more.
What features do you provide that say, http://jsfiddle.net/, http://cssdesk.com/, http://dabblet.com/, http://rendera.heroku.com/, doesn't? (Just the first 4 items that came up in a Google search, the list could go on...)
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#26I don't wanna down a nice looking project, very well done on the interface but, another one? There are already like 7+ of these I don't really see the need to produce another one especially one that is HTML+CSS only when many of the others feature JavaScript and more. What features do you provide that say, http://jsfiddle.net/ , http://cssdesk.com/ , http://dabblet.com/ , http://rendera.heroku.com/ , doesn't? (Just t…
I think the key extra feature is that you can share what you're working on with someone else and have both people collaborate in real-time (i.e. changes on either end show up near-instantly on the other side). Supplemented by a voice channel, this could potentially be useful.
JSFiddle et. al. don't have this, but I'm sure there are others out there that do.
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#27Earlier quoted context omitted.
How did you accomplish the real-time text editing? Is there any OT engine that you hacked into Firebase?
Basically on keyup I ship the whole contents of the editor and the cursor position to firebase. I'm also keeping track of all the active connections to a scratchpad document so I know who is typing. Anytime the code changes on the server, it triggers a callback function on each client that will update the contents of the textarea. If someone else is typing, the document is locked so only 1 person can type at a time.…
OT (See: http://en.wikipedia.org/wiki/Operational_transformation) is one of the technology solutions to the problem that you've solved through a locking mechanism.
Not sure what server architecture you're using, but in Node.js there is a pretty amazing package that integrates with ACE called ShareJS (http://sharejs.org/).
Have you experimented with synchronizing cursors at all?
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#28I don't wanna down a nice looking project, very well done on the interface but, another one? There are already like 7+ of these I don't really see the need to produce another one especially one that is HTML+CSS only when many of the others feature JavaScript and more. What features do you provide that say, http://jsfiddle.net/ , http://cssdesk.com/ , http://dabblet.com/ , http://rendera.heroku.com/ , doesn't? (Just t…
[deleted]
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#29Oh man this is incredible - I want to find a way to embed this into Emacs, this is so useful.
Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor
#30Earlier quoted context omitted.
How did you accomplish the real-time text editing? Is there any OT engine that you hacked into Firebase?
Basically on keyup I ship the whole contents of the editor and the cursor position to firebase. I'm also keeping track of all the active connections to a scratchpad document so I know who is typing. Anytime the code changes on the server, it triggers a callback function on each client that will update the contents of the textarea. If someone else is typing, the document is locked so only 1 person can type at a time.…
Do you know what/how Firebase is doing the realtime updates? Websockets with fallback to flash?