5 ms·

New Version of jsbin.com

69 points by motowilliams 14y ago

huragok 14y ago
Keep clicking/tapping on Dave. Awesome.
ahabman 14y ago
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.
- yoklov 14y ago
  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 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.
- jontas 14y ago
  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.
yoklov 14y ago
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.
tlack 14y ago
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 14y ago
  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 14y ago
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 14y ago
  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.
deleted 14y ago
[deleted]
rodly 14y ago
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 http://i.imgur.com/mZXTO.png
- yoklov 14y ago
  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 14y ago
    > 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.
- remysharp 14y ago
  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.
  - jqueryin 14y ago
    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
mitjak 14y ago
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 14y ago
  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.
usablebytes 14y ago
Nice one. JsFiddle.net actually gives a lot more features. Did I miss anything?
remysharp 14y ago
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 http://github.com/remy/jsbin - so welcoming any contributions :)
- splatcollision 14y ago
  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 14y ago
    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 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 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 14y ago
      Thanks! Will check it out.
fpp 14y ago
Great work Remy - and works much smoother now than the previous versions Love the "Convert to" feature with HTML, CSS & JS
emehrkay 14y ago
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!
smagch 14y ago
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 14y ago
  I put together a similar site a few weeks ago: http://www.livefiddle.com/ 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.
mnicole 14y ago
Love that you have Stylus and LESS, will Sass and SCSS be implemented sometime as well?
- remysharp 14y ago
  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 https://github.com/remy/jsbin/issues/176

69 points by motowilliams 14y ago

Keep clicking/tapping on Dave. Awesome.

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.

yoklov 14y ago
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 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.
jontas 14y ago
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.

yoklov 14y ago

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.

tlack 14y ago

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 14y ago
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 14y ago

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 14y ago
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.

deleted 14y ago

[deleted]

rodly 14y ago

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 http://i.imgur.com/mZXTO.png

yoklov 14y ago
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 14y ago
  > 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.
remysharp 14y ago
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.
- jqueryin 14y ago
  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

mitjak 14y ago

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 14y ago
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.

usablebytes 14y ago

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

remysharp 14y ago

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 http://github.com/remy/jsbin - so welcoming any contributions :)

splatcollision 14y ago
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 14y ago
  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 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 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 14y ago
    Thanks! Will check it out.

fpp 14y ago

Great work Remy - and works much smoother now than the previous versions Love the "Convert to" feature with HTML, CSS & JS

emehrkay 14y ago

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!

smagch 14y ago

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 14y ago
I put together a similar site a few weeks ago: http://www.livefiddle.com/ 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.

mnicole 14y ago

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

remysharp 14y ago
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 https://github.com/remy/jsbin/issues/176