

New Version of jsbin.com - motowilliams
http://jsbin.com/welcome

======
remysharp
I thought I'd post here with some of the features jsbin (version 3) comes
with. There's a blog post being prepared too, but pending that.

The big change in jsbin is the live aspect:

* Start typing, your code is saved and continues to save as you type.

* As you type the live output is updated automatically.

* Open the the full preview url (without /edit) in any other window - be it browser or mobile phone, and _that_ will update in real-time too. So you can edit on your desktop, and the rendered output will appear on you mobile devices.

* If you share the url with /watch on the end, people can watch what you type in real time.

More detail will be in the post later today. I'll try to answer more questions
here if they come up.

It also continues to be completely open source: <http://github.com/remy/jsbin>
\- so welcoming any contributions :)

~~~
splatcollision
The thing I like the best is the live preview URLs, especially across devices.
I caught one of your live demos of this recently, and was blown away.

What's the library/service you're using to do this? I recall finding a
reference in the JSBin source, but please remind us. I would love to get live
previewing working in my web design web application, Edit Room, which also has
shareable review links. (link in profile).

~~~
remysharp
It's called "the spike", but it's nothing more than EventSource triggering an
event to refresh or inject.

The client code (for both remote rendering & codecasting):
<https://github.com/remy/jsbin/blob/master/public/js/spike.js>

The server side:
<https://github.com/remy/jsbin/blob/master/lib/spike/index.js>

Very simple, but requires an event based server - so Node was the obvious
choice for JS Bin.

~~~
splatcollision
Thanks! Will check it out.

------
rodly
I recall using jsbin a month or so ago and had it fail on some basic JS I had
inputted to test it out. Anecdotal and without proof but that is what made me
decide on using jsfiddle. Going to give jsbin another try with this new
version.

*edit:

This frustrates me so much on jsfiddle and I'm guessing it's a default browser
formatting thing but why don't you guys make the curly braces NOT leap forward
from where my cursor is?

Example : <http://i.imgur.com/mZXTO.png>

~~~
yoklov
WRT formatting, a lot of JS coders think you should always begin your curly
braces on the same line as the statement, not on the next, or you risk the
wrath of automatic semicolon insertion. The formatter seems fine if you do it
this way, and it's also a generally good idea to avoid bizarre, hard to track
down bugs.

But I'd understand if that's not an acceptable answer for you.

~~~
masklinn
> not on the next, or you risk the wrath of automatic semicolon insertion.

That's to e.g. return an object though.

On the other hand, allman with anonymous functions? That's completely bonkers-
looking.

------
mitjak
Have I really been the only one who uses jsbin instead of jsfiddle? It's
always been cleaner and, for me, much more responsive. I hope it gets more
attention as a result of this.

~~~
ericmoritz
I used jsfiddle in the past only because I knew its name. jsbin is a lot less
clunky. I'm sure I'll use it a lot more.

------
yoklov
Quite neat, I hadn't heard of this.

Nice to see it even lets you use CoffeeScript, LESS, and some other compile-
to-js and compile to CSS languages that I hadn't heard of (Traceur and
Stylus?).

Also seems like a nice UI. Might try it out as an alternative to JSFiddle for
a bit.

------
emehrkay
I clicked the link last night, played with it a little, and liked some of the
features, especially the column view.

I clicked on it this morning and it loaded the welcome article on the right
and html on the left. Good shit!

------
ahabman
I have no idea what this site does. I've read 7 paragraphs and suppose I
should "Open the CSS panel" (although the name implied something javascript
related) because it's the only call to action, but it does nothing.

~~~
jontas
It's just an HTML/CSS/JS sandbox with collaborative features, similar to
jsfiddle, which I believe is more well known (at least, among the people I
work with).

I haven't used jsbin before, but the interface looks nice, and the redesign is
pretty. Jsfiddle is utilitarian; jsbin looks like it is meant to have a little
more humor. They both seem to cover the same functionality, so I guess it
comes down to which interface you prefer.

For quickly sharing some small piece of front end code with a remote
colleague, either one of these tools is very useful.

Edit: I just noticed that visiting jsbin.com skips the whole landing page with
the spinning robot, so it seems that it is as utilitarian as jsfiddle.

------
tlack
This looks like another great alternative to JsFiddle/Plunkr (both of which
are excellent).

One question though: why is my download button grayed out?

~~~
remysharp
Download will only be downloaded in the initial state of jsbin - i.e. if
there's nothing to download. When you type, it'll save your bin and you can
download that. You can also directly access each panel on the url, like
jsbin.com/abc.css or jsbin.com/abc.less, etc.

------
Flam
Needs to be clearer how to access the actual site. Took me a long while before
I finally saw and clicked edit in the top right.

~~~
remysharp
Yeah, for some reason the url posted was just a full page bin, ie. the output
of my saved code. So I've tweaked the page a little so it'll redirect to the
/edit version so you can _actually see_ JS Bin.

------
smagch
This is really great! I'm thinking about starting CoderDojo. So I've been
looking for this kind of app.

I know jsFiddle, CodePen, cssdeck and Mozilla thimble. Does anyone know any
other site?

~~~
ilyay
I put together a similar site a few weeks ago: <http://www.livefiddle.com/>

It's not as feature rich as jsFiddle or JS Bin (it only allows editing the
javascript, not HTML or CSS), but is different in that it's geared towards
canvas animations and games. You can edit an init function that gets called at
the beginning of an animation, but the rest of the code gets executed inside a
draw loop, allowing you to modify code as the program is executing.

Another difference is that you can modify magic numbers in the code using a
GUI. Selecting a number brings up a slider that allows you to change it, and
selecting a color brings up a color picker.

------
fpp
Great work Remy - and works much smoother now than the previous versions

Love the "Convert to" feature with HTML, CSS & JS

------
huragok
Keep clicking/tapping on Dave. Awesome.

------
mnicole
Love that you have Stylus and LESS, will Sass and SCSS be implemented sometime
as well?

~~~
remysharp
Stylus and LESS are being rendered on the client side - so there's no round
trips just to render your HTML in the page. SASS and SCSS was on my list (or
SASS was) but there's no client side solution. Feel free to contribute here,
I'm definitely interested in adding those processors:
<https://github.com/remy/jsbin/issues/176>

------
usablebytes
Nice one. JsFiddle.net actually gives a lot more features. Did I miss
anything?

