Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Scratchpad.io - a real-time HTML and CSS editor

scratchpad.io

Post reply on HN
Print view View original

31–40 of 89 posts

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#31

Post by nbashaw »

michaelbuckbee wrote: post #30
nbashaw wrote: post #23

Earlier quoted context omitted.

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?

I believe that's it but I'm not sure. I've emailed the firebase founder and he might be able to chime in here

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#32

Post by nbashaw »

gbadman wrote: post #27
nbashaw wrote: post #23

Earlier quoted context omitted.

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?

Thanks! I'll have to read up on OT. Our backend is totally hosted by Firebase, other than a simple Sinatra app that generates the unique IDs.

When you say synchronizing cursors, do you mean having multiple cursors (google docs style) or having a single cursor be in the same position for all clients? We are doing the latter, and I wasn't aware it was possible to do the former with ace but I would love to do it if I can

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#33

Post by sachleen »

Pretty nice, I'll probably be using this for debugging and examples.

Bug:

Open the about panel by clicking the icon in top left (three horizontal bars). Close the panel by clicking the same icon.

Maximize the preview window by clicking the arrow in the top right of the edit panel. Click the arrow to view the code panel again.

The about panel pops out as well and the arrow button covers the show/hide about (three horizontal bars) button. Expected behavior: it should return to the view that I had before maximizing.

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#34

Post by nbashaw »

sachleen wrote: post #33

Pretty nice, I'll probably be using this for debugging and examples. Bug: Open the about panel by clicking the icon in top left (three horizontal bars). Close the panel by clicking the same icon. Maximize the preview window by clicking the arrow in the top right of the edit panel. Click the arrow to view the code panel again. The about panel pops out as well and the arrow button covers the show/hide about (three hori…

Crazy! I thought I encountered this once in development but couldn't repro it again. Thought I was going crazy. Thank you so much!!

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#35

Post by quarterto »

Not to detract from what is a pretty cool project, and I hope OP had fun making it, but: http://codepen.io is this and quite a bit more. It supports HTML+JS+CSS as well as e.g. Jade, SASS and CoffeeScript- if that's what floats your boat- and some nice social features, like featured pens and saving to Gists.

Other commenters have pointed out a myriad of similar such services. I'm surprised Codepen hasn't come up already.

@brycecolquitt, you are obviously very talented, and I look forward to whatever you come up with in the future. I just hope it's not in a space as hotly contested as this.

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#37

Post by mnicole »

overshard wrote: post #25

I 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…

Because none of them are the right solution for every use case. http://cssdeck.com/ comes closest but OP's solution is much more simple and to-the-point.

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#38

Post by gsoltis »

michaelbuckbee wrote: post #30
nbashaw wrote: post #23

Earlier quoted context omitted.

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?

Hi, I'm one of the Firebase engineers working on keeping clients connected.

We use a mix of different methods to maintain a connection. We normally start with our custom long polling implementation and move to websockets when they are available. We do not currently make use of any flash sockets.

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#39

Post by gbadman »

nbashaw wrote: post #23
gbadman wrote: post #16

Earlier 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.…

Seems that I can't reply to the child of my sibling comment so I'm replying here.

ACE is quite ridiculously powerful. On its primary implementation (http://c9.io), it supports multiple cursors with concurrent editing.

I've been able to use ShareJS to get concurrent editing working (see: http://plnkr.co/edit/?p=preview&s=HN4933608) but haven't had a chance to display visual cursors for all simultaneous users. I was thinking that I could get that working using Firebase.

Re: Show HN: Scratchpad.io - a real-time HTML and CSS editor

#40

Post by brycecolquitt »

quarterto wrote: post #35

Not to detract from what is a pretty cool project, and I hope OP had fun making it, but: http://codepen.io is this and quite a bit more. It supports HTML+JS+CSS as well as e.g. Jade, SASS and CoffeeScript- if that's what floats your boat- and some nice social features, like featured pens and saving to Gists. Other commenters have pointed out a myriad of similar such services. I'm surprised Codepen hasn't come up alre…

Thanks, but this was actually made by my friend Nathan Bashaw (nbashaw). I just submitted it because I think it's awesome :) I think the tool is great for a certain group of people: beginners and front-end folks who want to quickly see what something looks like or do some debugging.

I'm not sure if codepen supports the realtime google-docs-style collaboration, either, which Scratchpad is good for. It's simple product with no superfluous features.

Post reply on HN