8 ms·

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

298 points by brycecolquitt 14y ago

quarterto 14y ago
Not to detract from what is a pretty cool project, and I hope OP had fun making it, but: http://codepen.io 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.
- brycecolquitt 14y ago
  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.
- deleted 14y ago
  [deleted]
- ianstormtaylor 14y ago
  Yeah but it's nowhere near as nice to edit with. The textarea's are short, the content frame is short... I think this is a case where simplicity wins out. SASS would be a cool feature though.. (as long as it came with Compass)
matt_ 14y ago
Get this added to repl.it
joebeetee 14y ago
Beautiful. Love the fact that out of habit I pressed Cmd+D to delete the line and it worked :) Nice work
gailees 14y ago
Finally....they had something close to this on codecademy, but this is exactly what I need when trying out new stuff!
- nbashaw 14y ago
  Thanks!! Glad you enjoy it
gailees 14y ago
It'd be great if the command tip wasn't only for Mac btw
- nbashaw 14y ago
  Ah good call! It's control + i in mac
randylubin 14y ago
This is perfect - love the immediate feedback for my own prototyping. Could probably use the multi-user sync for front-end technical interviews.
- gailees 14y ago
  ^Exactly what I was thinking.
jakozaur 14y ago
Have the realtime plus: http://jsfiddle.net/ http://jsfiddle.net/ And you will rock! Right now, you are just awesome ;).
- gbadman 14y ago
  Just so happen to have a solution for you: http://plnkr.co/edit/?p=streamer http://plnkr.co/edit/?p=streamer DEMO: http://plnkr.co/edit/?p=preview&s=HN4933608 http://plnkr.co/edit/?p=preview&s=HN4933608
danielfriedman 14y ago
This is awesome! I constantly look for live editors but haven't found a good one for front-end. I tried Adobe Brackets, Firebug (for in-window editing) but all had their complexities and constraints. Scrathpad.io is by far the most intuitive and best one for HTML and CSS out there!
- gbadman 14y ago
  Have you tried Plunker (http://plnkr.co/edit/?p=streamer http://plnkr.co/edit/?p=streamer)? DEMO: http://plnkr.co/edit/?p=preview&s=HN4933608 http://plnkr.co/edit/?p=preview&s=HN4933608
kine 14y ago
This is really cool. Nice work
kine 14y ago
This is really cool. Nice work
bluetidepro 14y ago
The first thing that I loved about this, that drives me crazy on other real-time online editors, is that pressing "tab" actually creates a tabbed space, and doesn't change the active textarea. Nice job! 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.
- nbashaw 14y ago
  Thanks! It was actually really simple to make with two tools: http://ace.ajax.org http://ace.ajax.org and http://www.firebase.com 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
  - gbadman 14y ago
    How did you accomplish the real-time text editing? Is there any OT engine that you hacked into Firebase?
    - nbashaw 14y ago
      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?
      - gbadman 14y ago
        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 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 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.
tomasien 14y ago
Cool! I'm going to use it for debugging. 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!
geuis 14y ago
Ok, this editor rocks. Nice use of Ace.js. One of my biggest frustrations with jsfiddle is the crappy coding area (not to mention the default selection of Mootools among others).
- nbashaw 14y ago
  Thanks! All it took was the lovely tomorrow_night_eighties.css theme :)
rjvir 14y ago
For a first time coder, being able to see your page change live is very helpful in getting to learn HTML and CSS. This is an amazing complement to the book you are writing - nice work Nathan!
kurtfunai 14y ago
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.
pxlpshr 14y ago
This 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. http://incident57.com/codekit/ http://incident57.com/codekit/
gbadman 14y ago
Nicely 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.
overshard 14y ago
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://jsfiddle.net/, http://cssdesk.com/ http://cssdesk.com/, http://dabblet.com/ http://dabblet.com/, http://rendera.heroku.com/ http://rendera.heroku.com/, doesn't? (Just the first 4 items that came up in a Google search, the list could go on...)
- mnicole 14y ago
  Because none of them are the right solution for every use case. http://cssdeck.com/ http://cssdeck.com/ comes closest but OP's solution is much more simple and to-the-point.
- anant 14y ago
  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.
  - camus 14y ago
    plunker does have that : http://plnkr.co http://plnkr.co
- deleted 14y ago
  [deleted]
sachleen 14y ago
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.
- nbashaw 14y ago
  Crazy! I thought I encountered this once in development but couldn't repro it again. Thought I was going crazy. Thank you so much!!
mahmoudimus 14y ago
Oh man this is incredible - I want to find a way to embed this into Emacs, this is so useful.
- martinced 14y ago
  You can modify Emacs so that it does something on every change in the current buffer, like for example save the change to disk if it's a file-backed buffer. 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).
robot 14y ago
Slightly off topic: You use "enough to be dangerous" with a positive meaning, as in enough to make a real difference in the world, while Alexander Pope quote you use is probably negative: "A little learning is a dangerous thing." as in, someone who knows little can do more harm than good.
- nbashaw 14y ago
  Haha this is very true. I like to think of it as an easter egg.
arscan 14y ago
Its a little thing, but i like how you literally don't need to click on any buttons to save / create a new one / etc. I also like how you can create your own customized path to help you remember the link... just type in a new path and start editing, and you now can share that custom URI. I think its important to create as little friction to usage as possible, and you've done that.
- nbashaw 14y ago
  Thanks!! I really appreciate that. I also like the unique URL feature :)
  - arscan 14y ago
    What's cool is that feature was completely intuitive and you didn't need to point it out. Again, a little thing, but the little bit of delight users experience when they "discover" these types of features goes a long way.
  - chacham15 14y ago
    I also like the URL feature, but unlike the other person I did not intuitively expect to type in a a random url and have that work. Its not something people typically do. That said, its pretty cool. You should edit your how to use to include that.
- deleted 14y ago
  [deleted]
ams6110 14y ago
Nice work and all, but what's wrong with a local .html file your favorite text editor, and a browser? I've been doing that for years to play around with html, css, and js.
- nbashaw 14y ago
  I wanted to reduce this: 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 http://scratchpad.io 2. Write code
JimmaDaRustla 14y ago
I use Livejs for the same effect, but this is much smoother obviously since it can trigger on key press rather than polling the resource constantly from the web page.
deleted 14y ago
[deleted]
mrmirz 14y ago
I would assume realtime editing will be supported by the browser developer tools fairly soon.
mixmastamyk 14y ago
Great work. (love things that are "clean") Press ⌘ + i to toggle fullscreen view I don't have this key and suspect a lot of others don't either. ;)
- nbashaw 14y ago
  I just realized that after HNing it :( Terrible oversight. However, the tooltip when you hover over the arrow button is OS-appropriate https://gist.github.com/4321208#file-scratchpad-js-L344 https://gist.github.com/4321208#file-scratchpad-js-L344
schpet 14y ago
dear scratchpad: http://scratchpad.io/j2la3taRYW#fullscreen http://scratchpad.io/j2la3taRYW#fullscreen
- nbashaw 14y ago
  Haha thanks so much!! That is awesome
mattlong 14y ago
Very nice. Love the responsiveness and good use of (OS-aware?) keyboard shortcuts. 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 http://i.imgur.com/h9nMh.png). EDIT: Correction, the line numbering is correct, the problem is with the line-height in the editor.
- nbashaw 14y ago
  Whoa! Thanks for sending this in! Crazy bug.
hybrid11 14y ago
Really cool, kinda like brackets.io, but online! Is there anyway to make the text editor pane resizeable?
- nbashaw 14y ago
  I could definitely make a drag-to-resize thing, but I opted against it in V1 for simplicity's sake. We do have a fullscreen mode though
zapt02 14y ago
Very impressive. Love the dark color scheme. LESS/SASS possible? :)
- nbashaw 14y ago
  It's definitely a possibility! Actually, more like a probability. Just didn't want to build too much into V1
pjrvs 14y ago
i wish i could adjust the width of the code section. otherwise it's pretty neat.
path411 14y ago
Would like the option to import a url to edit.
deleted 14y ago
[deleted]
iamhenry 14y ago
Will you be able to make new projects and make them private?
ph0rcyas 14y ago
How is this different from codemirror? Codemirror's preview utility easily handles this (and much more versatile in other ways): http://codemirror.net/ http://codemirror.net/demo/preview.html
chaselee 14y ago
Really nice execution on this. So simple and just what I'd want if I was just starting to learn how to code. Bravo.
ewolfe 14y ago
What would it take to implement javascript? Is it merely trivial, or was it left out for security?
dergachev 14y ago
Thats awesome. Also looking at the source, I discovered it's using keymaster.js and firebase.js, which are new to me. And the implementation of scratchpad.io is very simple and elegant. The design is beautiful, and the code (in scratchpad.js) is so simple that it makes for a good tutorial on using firebase and ace.js. 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 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).
scott_karana 14y ago
Absolutely amazing. A couple things that bother me, and they might just be from Ace.js: 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 :)
- nbashaw 14y ago
  Thanks so much, Scott! That is indeed an ace default, but I can try and figure out how to override it. Syntax completion is always tricky.
aleem 14y ago
Sinatra.io does something similar, also built on Firbase. I believe their code is on github if anyone is interested in implementation.
- jameswyse 14y ago
  Sinatra.io seems to be down? Do you know their github address?
meric 14y ago
Looks like you've made sure any recursion only goes one deep? (Awesome) http://scratchpad.io/5mqq98D51P 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>
- laughinghan 14y ago
  That has nothing to do with Scratchpad, it's in the spec for HTML frames: "Infinite recursion is prevented. Any frame that attempts to assign as its SRC a URL used by any of its ancestors is treated as if it has no SRC URL at all (basically a blank frame)." http://www.w3.org/TR/WD-frames-970331 http://www.w3.org/TR/WD-frames-970331
dmor 14y ago
I would love to be able to work in realtime (a la Etherpad) with someone else - would take pairing to a whole new level. Also, style management could quickly get messy - I know you are trying to keep the UI as simple as possible, but I would love to be able to quickly toggle between HTML and CSS on different tabs (instead of scrolling).
anuaitt 14y ago
it will be great if we can pick some templates like bootstrap and start coding right away from the application.
edwinyzh 14y ago
I'm building a similar one (it also allows you to inspect html elements like using Firebug or Webkit's Dev tools), and it's a native Windows app (and really fast one!) http://liveditor.com http://liveditor.com
Aardwolf 14y ago
"Press ⌘ + i to toggle fullscreen view" What is this thing, I don't have such a key on my computer?
- Ecio78 14y ago
  It's on Mac keyboard, on a not-Apple system it's Ctrl+i Suggestion for the OP, maybe it's better to add it to your page (not everybody is using Apple computers)
stuaxo 14y ago
Seems very slow in firefox, can't keep up with my typing and missed the characters inbetween. Not sure if it's supposed to just say 'Loading...' at the top the whole time either..
orlandob 14y ago
very cool!

298 points by brycecolquitt 14y ago

Not to detract from what is a pretty cool project, and I hope OP had fun making it, but: http://codepen.io 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.

brycecolquitt 14y ago
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.
deleted 14y ago
[deleted]
ianstormtaylor 14y ago
Yeah but it's nowhere near as nice to edit with. The textarea's are short, the content frame is short... I think this is a case where simplicity wins out. SASS would be a cool feature though.. (as long as it came with Compass)

matt_ 14y ago

Get this added to repl.it

joebeetee 14y ago

Beautiful. Love the fact that out of habit I pressed Cmd+D to delete the line and it worked :) Nice work

gailees 14y ago

Finally....they had something close to this on codecademy, but this is exactly what I need when trying out new stuff!

nbashaw 14y ago
Thanks!! Glad you enjoy it

gailees 14y ago

It'd be great if the command tip wasn't only for Mac btw

nbashaw 14y ago
Ah good call! It's control + i in mac

randylubin 14y ago

This is perfect - love the immediate feedback for my own prototyping. Could probably use the multi-user sync for front-end technical interviews.

gailees 14y ago
^Exactly what I was thinking.

jakozaur 14y ago

Have the realtime plus: http://jsfiddle.net/ http://jsfiddle.net/ And you will rock! Right now, you are just awesome ;).

gbadman 14y ago
Just so happen to have a solution for you: http://plnkr.co/edit/?p=streamer http://plnkr.co/edit/?p=streamer DEMO: http://plnkr.co/edit/?p=preview&s=HN4933608 http://plnkr.co/edit/?p=preview&s=HN4933608

danielfriedman 14y ago

This is awesome! I constantly look for live editors but haven't found a good one for front-end. I tried Adobe Brackets, Firebug (for in-window editing) but all had their complexities and constraints. Scrathpad.io is by far the most intuitive and best one for HTML and CSS out there!

gbadman 14y ago
Have you tried Plunker (http://plnkr.co/edit/?p=streamer http://plnkr.co/edit/?p=streamer)? DEMO: http://plnkr.co/edit/?p=preview&s=HN4933608 http://plnkr.co/edit/?p=preview&s=HN4933608

kine 14y ago

This is really cool. Nice work

kine 14y ago

This is really cool. Nice work

bluetidepro 14y ago

The first thing that I loved about this, that drives me crazy on other real-time online editors, is that pressing "tab" actually creates a tabbed space, and doesn't change the active textarea. Nice job! 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.

nbashaw 14y ago
Thanks! It was actually really simple to make with two tools: http://ace.ajax.org http://ace.ajax.org and http://www.firebase.com 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
- gbadman 14y ago
  How did you accomplish the real-time text editing? Is there any OT engine that you hacked into Firebase?
  - nbashaw 14y ago
    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?
    - gbadman 14y ago
      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 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 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.

tomasien 14y ago

Cool! I'm going to use it for debugging. 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!

geuis 14y ago

Ok, this editor rocks. Nice use of Ace.js. One of my biggest frustrations with jsfiddle is the crappy coding area (not to mention the default selection of Mootools among others).

nbashaw 14y ago
Thanks! All it took was the lovely tomorrow_night_eighties.css theme :)

rjvir 14y ago

For a first time coder, being able to see your page change live is very helpful in getting to learn HTML and CSS. This is an amazing complement to the book you are writing - nice work Nathan!

kurtfunai 14y ago

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.

pxlpshr 14y ago

This 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. http://incident57.com/codekit/ http://incident57.com/codekit/

gbadman 14y ago

Nicely 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.

overshard 14y ago

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://jsfiddle.net/, http://cssdesk.com/ http://cssdesk.com/, http://dabblet.com/ http://dabblet.com/, http://rendera.heroku.com/ http://rendera.heroku.com/, doesn't? (Just the first 4 items that came up in a Google search, the list could go on...)

mnicole 14y ago
Because none of them are the right solution for every use case. http://cssdeck.com/ http://cssdeck.com/ comes closest but OP's solution is much more simple and to-the-point.
anant 14y ago
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.
- camus 14y ago
  plunker does have that : http://plnkr.co http://plnkr.co
deleted 14y ago
[deleted]

sachleen 14y ago

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.

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

mahmoudimus 14y ago

Oh man this is incredible - I want to find a way to embed this into Emacs, this is so useful.

martinced 14y ago
You can modify Emacs so that it does something on every change in the current buffer, like for example save the change to disk if it's a file-backed buffer. 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).

robot 14y ago

Slightly off topic: You use "enough to be dangerous" with a positive meaning, as in enough to make a real difference in the world, while Alexander Pope quote you use is probably negative: "A little learning is a dangerous thing." as in, someone who knows little can do more harm than good.

nbashaw 14y ago
Haha this is very true. I like to think of it as an easter egg.

arscan 14y ago

Its a little thing, but i like how you literally don't need to click on any buttons to save / create a new one / etc. I also like how you can create your own customized path to help you remember the link... just type in a new path and start editing, and you now can share that custom URI. I think its important to create as little friction to usage as possible, and you've done that.

nbashaw 14y ago
Thanks!! I really appreciate that. I also like the unique URL feature :)
- arscan 14y ago
  What's cool is that feature was completely intuitive and you didn't need to point it out. Again, a little thing, but the little bit of delight users experience when they "discover" these types of features goes a long way.
- chacham15 14y ago
  I also like the URL feature, but unlike the other person I did not intuitively expect to type in a a random url and have that work. Its not something people typically do. That said, its pretty cool. You should edit your how to use to include that.
deleted 14y ago
[deleted]

ams6110 14y ago

Nice work and all, but what's wrong with a local .html file your favorite text editor, and a browser? I've been doing that for years to play around with html, css, and js.

nbashaw 14y ago
I wanted to reduce this: 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 http://scratchpad.io 2. Write code

JimmaDaRustla 14y ago

I use Livejs for the same effect, but this is much smoother obviously since it can trigger on key press rather than polling the resource constantly from the web page.

deleted 14y ago

[deleted]

mrmirz 14y ago

I would assume realtime editing will be supported by the browser developer tools fairly soon.

mixmastamyk 14y ago

Great work. (love things that are "clean") Press ⌘ + i to toggle fullscreen view I don't have this key and suspect a lot of others don't either. ;)

nbashaw 14y ago
I just realized that after HNing it :( Terrible oversight. However, the tooltip when you hover over the arrow button is OS-appropriate https://gist.github.com/4321208#file-scratchpad-js-L344 https://gist.github.com/4321208#file-scratchpad-js-L344

schpet 14y ago

dear scratchpad: http://scratchpad.io/j2la3taRYW#fullscreen http://scratchpad.io/j2la3taRYW#fullscreen

nbashaw 14y ago
Haha thanks so much!! That is awesome

mattlong 14y ago

Very nice. Love the responsiveness and good use of (OS-aware?) keyboard shortcuts. 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 http://i.imgur.com/h9nMh.png). EDIT: Correction, the line numbering is correct, the problem is with the line-height in the editor.

nbashaw 14y ago
Whoa! Thanks for sending this in! Crazy bug.

hybrid11 14y ago

Really cool, kinda like brackets.io, but online! Is there anyway to make the text editor pane resizeable?

nbashaw 14y ago
I could definitely make a drag-to-resize thing, but I opted against it in V1 for simplicity's sake. We do have a fullscreen mode though

zapt02 14y ago

Very impressive. Love the dark color scheme. LESS/SASS possible? :)

nbashaw 14y ago
It's definitely a possibility! Actually, more like a probability. Just didn't want to build too much into V1

pjrvs 14y ago

i wish i could adjust the width of the code section. otherwise it's pretty neat.

path411 14y ago

Would like the option to import a url to edit.

deleted 14y ago

[deleted]

iamhenry 14y ago

Will you be able to make new projects and make them private?

ph0rcyas 14y ago

How is this different from codemirror? Codemirror's preview utility easily handles this (and much more versatile in other ways): http://codemirror.net/ http://codemirror.net/demo/preview.html

chaselee 14y ago

Really nice execution on this. So simple and just what I'd want if I was just starting to learn how to code. Bravo.

ewolfe 14y ago

What would it take to implement javascript? Is it merely trivial, or was it left out for security?

dergachev 14y ago

Thats awesome. Also looking at the source, I discovered it's using keymaster.js and firebase.js, which are new to me. And the implementation of scratchpad.io is very simple and elegant. The design is beautiful, and the code (in scratchpad.js) is so simple that it makes for a good tutorial on using firebase and ace.js. 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 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).

scott_karana 14y ago

Absolutely amazing. A couple things that bother me, and they might just be from Ace.js: 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 :)

nbashaw 14y ago
Thanks so much, Scott! That is indeed an ace default, but I can try and figure out how to override it. Syntax completion is always tricky.

aleem 14y ago

Sinatra.io does something similar, also built on Firbase. I believe their code is on github if anyone is interested in implementation.

jameswyse 14y ago
Sinatra.io seems to be down? Do you know their github address?

meric 14y ago

Looks like you've made sure any recursion only goes one deep? (Awesome) http://scratchpad.io/5mqq98D51P 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>

laughinghan 14y ago
That has nothing to do with Scratchpad, it's in the spec for HTML frames: "Infinite recursion is prevented. Any frame that attempts to assign as its SRC a URL used by any of its ancestors is treated as if it has no SRC URL at all (basically a blank frame)." http://www.w3.org/TR/WD-frames-970331 http://www.w3.org/TR/WD-frames-970331

dmor 14y ago

I would love to be able to work in realtime (a la Etherpad) with someone else - would take pairing to a whole new level. Also, style management could quickly get messy - I know you are trying to keep the UI as simple as possible, but I would love to be able to quickly toggle between HTML and CSS on different tabs (instead of scrolling).

anuaitt 14y ago

it will be great if we can pick some templates like bootstrap and start coding right away from the application.

edwinyzh 14y ago

I'm building a similar one (it also allows you to inspect html elements like using Firebug or Webkit's Dev tools), and it's a native Windows app (and really fast one!) http://liveditor.com http://liveditor.com

Aardwolf 14y ago

"Press ⌘ + i to toggle fullscreen view" What is this thing, I don't have such a key on my computer?

Ecio78 14y ago
It's on Mac keyboard, on a not-Apple system it's Ctrl+i Suggestion for the OP, maybe it's better to add it to your page (not everybody is using Apple computers)

stuaxo 14y ago

Seems very slow in firefox, can't keep up with my typing and missed the characters inbetween. Not sure if it's supposed to just say 'Loading...' at the top the whole time either..

orlandob 14y ago

very cool!