
Show HN: Scratchpad.io - a real-time HTML and CSS editor - brycecolquitt
http://scratchpad.io
======
arscan
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
Thanks!! I really appreciate that. I also like the unique URL feature :)

~~~
arscan
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.

------
bluetidepro
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
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

~~~
gbadman
How did you accomplish the real-time text editing? Is there any OT engine that
you hacked into Firebase?

~~~
nbashaw
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?

~~~
michaelbuckbee
Do you know what/how Firebase is doing the realtime updates? Websockets with
fallback to flash?

~~~
gsoltis
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.

~~~
daemon13
Is Firebase open source?

It states so on the sites/GH pages, but could not find pointers to repo [after
2 circle through 5 different pages poiting to each other].

------
meric
Looks like you've made sure any recursion only goes one deep? (Awesome)

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

------
dergachev
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>

(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).

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

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

~~~
nbashaw
Thanks!! Glad you enjoy it

------
geuis
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
Thanks! All it took was the lovely tomorrow_night_eighties.css theme :)

------
pxlpshr
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/>

------
robot
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
Haha this is very true. I like to think of it as an easter egg.

------
overshard
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 the first 4 items that came up in a Google search, the list
could go on...)

~~~
anant
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
plunker does have that : <http://plnkr.co>

------
jakozaur
Have the realtime plus: <http://jsfiddle.net/> And you will rock!

Right now, you are just awesome ;).

~~~
gbadman
Just so happen to have a solution for you: <http://plnkr.co/edit/?p=streamer>

DEMO:
[http://plnkr.co/edit/?p=preview&s=HN4933608](http://plnkr.co/edit/?p=preview&s=HN4933608)

------
randylubin
This is perfect - love the immediate feedback for my own prototyping.

Could probably use the multi-user sync for front-end technical interviews.

~~~
gailees
^Exactly what I was thinking.

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

~~~
martinced
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).

------
mixmastamyk
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
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>

------
danielfriedman
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
Have you tried Plunker (<http://plnkr.co/edit/?p=streamer>)? DEMO:
[http://plnkr.co/edit/?p=preview&s=HN4933608](http://plnkr.co/edit/?p=preview&s=HN4933608)

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

~~~
brycecolquitt
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.

------
mattlong
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>).

EDIT: Correction, the line numbering is correct, the problem is with the line-
height in the editor.

~~~
nbashaw
Whoa! Thanks for sending this in! Crazy bug.

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

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

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

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

------
dmor
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).

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

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

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

------
edwinyzh
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>

------
Aardwolf
"Press ⌘ + i to toggle fullscreen view"

What is this thing, I don't have such a key on my computer?

~~~
Ecio78
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)

------
ph0rcyas
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

------
ams6110
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
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> 2\. Write code

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

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

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

~~~
jameswyse
Sinatra.io seems to be down? Do you know their github address?

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

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

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

------
hybrid11
Really cool, kinda like brackets.io, but online!

Is there anyway to make the text editor pane resizeable?

~~~
nbashaw
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

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

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

~~~
nbashaw
Ah good call! It's control + i in mac

------
zapt02
Very impressive. Love the dark color scheme.

LESS/SASS possible? :)

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

------
schpet
dear scratchpad: <http://scratchpad.io/j2la3taRYW#fullscreen>

~~~
nbashaw
Haha thanks so much!! That is awesome

------
path411
Would like the option to import a url to edit.

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

------
kine
This is really cool. Nice work

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

------
matt_
Get this added to repl.it

------
orlandob
very cool!

