I think its important to create as little friction to usage as possible, and you've done that.
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...)
JSFiddle et. al. don't have this, but I'm sure there are others out there that do.
Any plan on open sourcing the code to do the real-time editing? I would love to use this real-time editing concept in a project I'm working on.
If you want to chat about building it I'd love to give you any tips - i'm nbashaw@gmail.com
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.
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.
SASS would be a cool feature though.. (as long as it came with Compass)
http://scratchpad.io/5mqq98D51P
Every change forces a reload on the iframe. I wonder if there's a way to prevent that.
<html>
<body>
<h1>Heading</h1>
<iframe width="640" height="480"
src="http://scratchpad.io/5mqq98D51P">
</iframe>
</body>
</html>One of my biggest frustrations with jsfiddle is the crappy coding area (not to mention the default selection of Mootools among others).
Right now, you are just awesome ;).
Could probably use the multi-user sync for front-end technical interviews.
You could then have a script refreshing the browser on every file change (do it from outside Emacs, calling shell scripts from Emacs or anything 'non-Emacsy' from Emacs is too slow for the usecase here).
However you'll probably have to find a way for the 'save file on every buffer modification' to be very fast otherwise it's going to annoy you and prove impractical.
Btw I can't wait for someone to implement at least part of Emacs in JavaScript so that, eventually, users used to Emacs shall have the possibility to have a Web text editor that doesn't s*ck. Maybe using ClojureScript + the implementation of Emacs redone in Clojure (I think there's a project trying to do that right now).
Press ⌘ + i to toggle fullscreen view
Bug: (Chrome Version 23.0.1271.97 on OSX)
Expand the side panel and select a document from the RECENT list. The editor area doesn't update completely; the text loads, but there are only line numbers up to the length of the previously viewed document and it's impossible to move the cursor below the last line number (http://i.imgur.com/h9nMh.png).
EDIT: Correction, the line numbering is correct, the problem is with the line-height in the editor.
When typing text into a <p> or an <h1> for example, if I type "I'm", I get the smart double quote feature, and end up typing:
I'm going to the zoo'
Likewise, if I go back into the stream of some text in a <p>, and want to wrap it in a span, if I click at the start of it and type <span id="foo">, I get another span on the other side of my cursor, pushing the existing text over.
Otherwise, utterly fantastic tool. Trying to use it for real work already :)
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.
What is this thing, I don't have such a key on my computer?
Suggestion for the OP, maybe it's better to add it to your page (not everybody is using Apple computers)
1. Create a file 2. Open it in your text editor 3. Edit code 4. Switch to browser 5. Open up the file 6. Switch back to editor 7. Edit code 8. Hit save 9. Switch back to browser 10. Hit refresh 11. GOTO 6
to this:
1. Go to http://scratchpad.io 2. Write code
Is there anyway to make the text editor pane resizeable?
LESS/SASS possible? :)
In fact, if anyone else is interested in forking the code and experimenting with it, feel free to fork my plunk and go to town:
http://plnkr.co/edit/49fOC5Mq3bcBysKfdPor?p=preview
(Hope you appreciate the irony of forking scratchpad.io via Plunker. Also, it'd be wicked if Plunker could automatically "fork" html webpages, pull in all the required resources and/or updating path references).
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.
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.
Quick thing: I have a page quickramen.com/test/test that has links that navigate around the page. If you click those now, it loads the code again in another mini-window and doesn't go anywhere.
JUST a bug to be aware of if you're keeping a log!
http://codemirror.net/
http://codemirror.net/demo/preview.htmlNot sure if it's supposed to just say 'Loading...' at the top the whole time either..