Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

New Version of jsbin.com

jsbin.com

Post reply on HN
Print view View original

21–30 of 30 posts

Re: New Version of jsbin.com

#21

Post by jqueryin »

remysharp wrote: post #14
rodly wrote: post #10

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

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

Re: New Version of jsbin.com

#22

Post by splatcollision »

remysharp wrote: post #16

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

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

Re: New Version of jsbin.com

#23

Post by 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?

Re: New Version of jsbin.com

#24

Post by ilyay »

smagch wrote: post #23

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.

Re: New Version of jsbin.com

#25

Post by ericmoritz »

mitjak wrote: post #11

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.

Re: New Version of jsbin.com

#26

Post by remysharp »

splatcollision wrote: post #22
remysharp wrote: post #16

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

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.

Re: New Version of jsbin.com

#27

Post by remysharp »

jqueryin wrote: post #21
remysharp wrote: post #14

Earlier quoted context omitted.

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.

Re: New Version of jsbin.com

#29

Post by remysharp »

mnicole wrote: post #28

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

Re: New Version of jsbin.com

#30

Post by splatcollision »

remysharp wrote: post #26
splatcollision wrote: post #22

Earlier quoted context omitted.

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.
Post reply on HN