New Version of jsbin.com | Hacker News Reader

New Version of jsbin.com

jsbin.com

69 pointsmotowilliams28 comments

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

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

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.

Thanks! Will check it out.

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

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.

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

It's a setting in CodeMirror which jsbin and jsfiddle both make use of.

However, if you open the devtools console in your browser, and run: `jsbin.settings.editor.smartIndent = false` it'll disable the indenting. The setting is sticky, so you it should remain whilst the data is stored against the browser.

To that note, is there a page listing out all of these settings overrides? I'm thinking we could each have our own versions of .vimrc for JSBIN :-P

Not yet, but there will be. For the moment, anything you can set in CodeMirror's config ( http://codemirror.net/doc/manual.html#config ) you can set via `jsbin.settings.editor.[key] = [value]` and it'll apply it to the JS Bin editors.

There's a couple of others, and docs will be coming soon. In addition, there's an exposed API that allows you to point JS Bin to a JSON file and it'll load in and save those settings - which is useful for starting a class for teaching where you want the editor in the same mode across all the students.

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.

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.

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.

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!

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.

Hm, seems that sometimes you need to click on edit in JS bin (in the top right corner) to see the editor, http://jsbin.com/welcome/edit is the URL.

It seems like it's a JSFiddle-like editor, with a better (in my opinion) user interface, and potentially better options for sharing, not that I'm totally familiar with JSFiddle's capabilities.

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.

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

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

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.

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.

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.

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?

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.

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

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

Keep clicking/tapping on Dave. Awesome.

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

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

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

Reply on news.ycombinator.com