jsbin / jsbin Goto Github PK

Collaborative JavaScript Debugging App

License: MIT License

JavaScript 66.94% HTML 11.12% CSS 21.91% Handlebars 0.03%

jsbin's Introduction

IMPORTANT: this current version of jsbin (v4.x.x) is no longer actively maintained and the new version of jsbin (v5) is currently in active development. This means that pretty much all the docs in this repo will be soon out of date. Please be warned ❤️

☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️

JS Bin

JS Bin is an open source collaborative web development debugging tool.

If you use JS Bin locally...

It likely means you're not going to subscribe as a pro user - which is how we're sustaining our project, which is cool, but please consider donating via OpenCollective here.

What can JS Bin do?

Write code and have it both save in real-time, but also render a full preview in real-time
Help debug other people's JavaScript, HTML or CSS by sharing and editing urls
CodeCast - where you share what you're typing in JS Bin in real-time
Remote rendering - view the output of your JS Bin on any device on any platform, updating in real-time
Processors, including: coffee-script, LESS, Markdown and Jade.
Debug remote Ajax calls

Find out more about JS Bin's features via the YouTube JS Bin playlist.

Who built this?

JS Bin was built by Remy Sharp and is completely open source and available at http://github.com/jsbin/jsbin. You can also follow @rem on Twitter where he'll tweet about JavaScript, HTML 5 and other such gems.

If you would like to work with Remy and his company, Left Logic on a front end development project, please get in touch.

UX was kindly donated by Danny Hope who also tweets as @yandle.

The vast majority of the port from PHP to Node in June 2012 was done by Aron Carroll who also plays in github as @aron.

A short history

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.

JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code - new tabs doesn't). Once you're happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

The original idea spawned from a conversation with another developer in trying to help him debug an Ajax issue. The original aim was to build it using Google's app engine, but in the end, it was John Resig's Learning app that inspired me to build the whole solution in JavaScript with liberal dashes of jQuery and a tiny bit of LAMP for the saving process.

Version 1 of JS Bin took me the best part of 4 hours to develop back in 2008, but version 2 was been rewritten from the ground up and is completely open source.

Build Process

JS Bin has been designed to work both online at jsbin.com but also in your own locally hosted environment - or even live in your own site (if you do host it as a utility, do let us know by pinging @js_bin on twitter).

Historically JS Bin was built on PHP, but has since moved to Node. The PHP flavour is no longer supported, however everything else released in v3.0.0 of JS Bin is available in both, but all releases after are only supported in the Node environment. Your PHP mileage may vary!

For detailed instructions on how to build JS Bin please see the running your own JS Bin document.

If you install Node.js installation is easy:

$ npm install -g jsbin
$ jsbin

Optionally point JS Bin to your config:

$ JSBIN_CONFIG=~/config.local.json jsbin

Then open your browser to http://localhost:3000 and you have a fully working version of JS Bin running locally.

API

A simple REST based API exists for anonymous users if it is enabled in your config.*.json, or can be restricted to registered users with a key specified in ownership.api_key

Authentication is required for all API requests unless one of the following api configuration options are set:

api.allowAnonymousReadWrite - if set to true allows GET and POST operations to the API anonymously (without an API key)
api.allowAnonymousRead - if set to true allows GET operations to the API anonymously (without an API key)

By default, config.default.json has api.allowAnonymousRead set to true.

Curl authentication examples:

$ curl http://{{host}}/api/:bin -H "Authorization: token {{token_key}}"
$ curl http://{{host}}/api/:bin?api_key={{token_key}}

End points are:

GET /api/:bin - Retrieve the latest version of the bin with that specified ID
GET /api/:bin/:rev - Retrieve the specific version of the bin with the specified ID and revision
POST /api/save - Create a new bin, the body of the post should be URL encoded and contain html, javascript and css parameters
POST /api/:bin/save - Create a new revision for the specified bin, the body of the post should be URL encoded and contain html, javascript and css parameters

Backers

Become a backer and show your support to our open source project.

jsbin's People

Contributors

Stargazers

Watchers

Forkers

miketaylr fearphage johnmichel rwaldron beshkenadze spytheman jzmudzinski jzaefferer yxlanx scoates treefamily lostmindio aral brownman laxad rgrove geekbuntu firemonkeyio zotin anewczs justinrainbow tilomitra mzheng piezas in16 danbuk hackasaurus gseguin levidehaan mrtiggr szaboat parkov pere ricardobeat jasonmaster bauhouse melinite mattgoldspink greco bobylito pbnkp l3ny elykahn gyoshev ostoweb jun9 sebleedelisle danishsatkut tomcss sanyaade-mobiledev caphun plurby chrisevans datatables ericf anshulmeena zdwalter esimionato erls-corporation designtestcode dineshkummarc tags07 doubleotoo davidkaka nadiamode add1ct3dd leobalter bundyo motowilliams stereoket daifu jaredwilli thingsinjars shuhblam jthomas temperatio sorrycc nbprithv jasondavis izhidov sandywu andreasdriesen sitesbyjoe karlwestin foksh dolfly fantalon gmilby langpavel xjeremy chlik futur denier elijahmanor zhuomingliang scottgonzalez open-source-gis san-diego-web-design uxscripts jinhu

jsbin's Issues

[FF 3.6 | Mac] no caret after back from preview

problem: missing caret position in editor after switch code -> preview -> code (code button is focused instead of editor)

browser affected: Firefox 3.6 (CTRL+1, CTRL+2 keyb shortcuts)
working ok: Safari and Chrome

ps. would be nice to have one shortcut on all browsers. it gets annoying to press and nothing happens ;)

Rename Labels To Accomodate Live Functionality

To reduce ambiguity, the "Live" button should be renamed to "Preview", and the current "Preview" mode should be renamed to something else, such as "Output", or "Run", depending on the chosen UI for the action. In the current tabbed layout, "Output" seems like a better choice; "Run" sounds like a button.

This mainly spurs from the fact that the "Live" mode does not execute code 1:1 like "Preview", such as alerts and others. As it is in the beta, the label "Live" insinuates it is a realtime version of "Preview" which it isn't, because of that discrepancy.

Deleting revisions?

Are revisions ever deleted? Would there be a way to delete a revision on-demand?

Chrome 6.0.472.63 not rendering small-caps

http://jsbin.com/ejoka4

and

http://jsbin.com/ejoka4/edit

As the title says, Chrome on Windows seems to "forget" to display small-caps -- even with core fonts. As far as I know, it's solely a JSBin-related thing. Firefox displays as-supposed-to.

[feature] Allow uploading custom scripts

This would be good for linking other external js files. For example for testing some jQuery plugins. You would just hit upload and link an external file, and it is available on your html source.

What do you think?

Have a [configurable] sleep time after changes before live update

It'd be nice if the live update that updates immediately when changes are made, would allow a sleep time; even better if this could be configured.

The sleep time would be a period of time when the (queued/pending) changes would not update. Any changes made during the sleep time would reset the sleep time. Therefore if no changes are made in the sleep time, the live update occurs. This would allow entering changes and not overloading the update queue with changes as a result of text being typed.

This would ensure the update happens about a second after the last change is made. Again, would be nice to configure this.

For simple pages I can see little benefit because the live update is so fast. But if the page is complex or uses slow features, then this might become beneficial.

libraries.add() not working correctly in Safari 4

When I add a library using the libraries.add() function, and then refresh the page, I get the following error:

Result of expression 'ba[z].scripts' [undefined] is not an object.

This is probably caused by Safari not saving the actual object passed to libraries.add() to localStorage, but the string [Object object].

IntelliSense

I just love JSBin but I think if it have a IntelliSense feature it would be great. I tried to add IntelliSense to a text editor via javascript and AJAX using a text input that have textchange event and autocompelete feature. and after typing space char in text input javascript append text to textarea. that works fine. Please add something like this to JSBin.
Thanks

Including script.aculo.us library doesn't work except when using a Live URL on Firefox

Including script.aculo.us using the "Include Library" select box make the output pane looking weird (a big white square appears) and generate following errors on FireBug (if installed):

Prototype is not defined
effects.js()effects.js (line 73)
[Break on this error] linear: Prototype.K,
effects.js (line 73)
Object.isUndefined is not a function
dragdrop.js()dragdrop.js (line 9)
[Break on this error] if(Object.isUndefined(Effect))
dragdrop.js (line 9)
uncaught exception: controls.js requires including script.aculo.us' effects.js library
[Break on this error](no source for)
Class is not defined
slider.js
slider.js (line 16)
[Break on this error] Control.Slider = Class.create({
slider.js (line 16)
Template is not defined
sound.js()sound.js (line 14)
[Break on this error] new Template(''),

My guess here is that for some reasons scriptaculous.js is loaded before prototype.js.

Here is a 3 steps path to reproduce the issue:

Open a new jsbin.com page
Select "script.aculo.us" in the "Include library" dropdown
Click on "Output"

Or open this link: http://jsbin.com/ozuyo/edit

Tested and reproduced on FF2.0.0.12, 3.0.14 and 3.5.1
Seems to work on IE7. Not tested on IE8

When creating a live URL, everything works fine on all tested browsers.

Diff revisions

Show differences between revisions on request

This may or may not help: http://gist.github.com/227881

IE8 does not load external scripts

code like

is not executed in IE8 - it complains on jQuery/$ variable missing.

using a '<script>' tag inside the JavaScript editor hangs the Browser/JS parser

Example try to type in the following into the JavaScript editor:

'</script>'.toUpperCase();

Hangs the entire browser (Firefox) or tab (Chrome).

jsLint? Feature request

Is there any possibility to integrate jsLint into jsBin? ( www.jslint.com)

Would certainly be better than copy and paste ;-)

Thanks.

[Windows] editor focus shortcuts are meant for text editing!

"Ctrl + -->" and "Ctrl + <--" are used to move the cursor by words in Windows. This makes editing in JSBin rather annoying! My suggestion is to use accesskeys instead: Alt+Shift+H to move left and Alt+Shift+L to move right.

Show other revisions

While looking at the first and other iterations, it would be convenient to see the other revisions available.

Integrates Editor

Hi, I sow your project, is really amazing!
I'm developing an application has the need to integrates html, sql and groovy editors.
After a deep search I found your editor as the cleanest, simplest editor on the net.

Can I integrates it on a textareas?? How to begin?

Thank's a lot,
Davide.

UTF8

I'm using Czech characters, and from some reason, they are destroyed after reopen.

in help, point out that selection can be indented

I just noticed that when multiple lines of text is selected, tab and shift-tab indent and outdent all of the selected lines at once. Yay CodeMirror! I think this would be worth pointing out in the Keyboard Shortcuts section of help.

favicon flicker on switch preview

when switching from Code to Preview (keyboard shortcut or mouse click) the favicon flickers (changes quickly to white) which is distracting

bug visible in Firefox 3.5.7. works ok, no flicker in Chrome 4.0.249.64

setup instructions

Could there possibly be a guide put into the readme for setup instructions on your own server. im not totally inept but i cannot for the life of me get this running. at least explain:

offline vs online
phpmake?
revisions
database requirements / server requirements etc.
mod_rewrite needed?

i would LOVE to get this up and running, i just cannot for the life of me figure it out. i would even like to contribute once i can do so.

thanks.

"'_console' is undefined" error in IE8

Using the following in IE8:
http://jsbin.com/osoca/3/edit

If you switch to Preview, the resulting page reports a JavaScript error:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; MS-RTC LM 8)
Timestamp: Wed, 28 Apr 2010 16:25:49 UTC

Message: '_console' is undefined
Line: 25
Char: 14
Code: 0
URI: http://jsbin.com/osoca/3/edit

If you open http://jsbin.com/osoca/3, the resulting page also reports a JavaScript error:
Webpage error details

Message: 'undefined' is null or not an object
Line: 21
Char: 560
Code: 0
URI: http://jsbin.com/js/render/edit.js

FF 3.5.7 throws an Uncaught Exception

Somehow it throws the following error:

Error: uncaught exception: [Exception... "Security error"  code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"  location: "http://jsbin.com/js/2.0.0/jsbin.js Line: 27"]

Due to this error it fails to load both the JavaScript as well as the HTML editor. The browser I used was Mozilla Firefox 3.5.7 on Windows XP (incl. the latest updates).

Cheers,
Boye

$0, $1, get funky on published

Firefox error from this: http://jsbin.com/ucine/3 :

Error: missing formal parameter
Source File: http://jsbin.com/ucine/3
Line: 54, Column: 38
Source Code:
return html.replace(rlist, function(%code%) {

Actual code should be:
return html.replace(rlist, function($0) {

Sounds like $0 and etc. are getting replaced along the line somewhere.

[Windows] switch views keyboard shortcuts change tabs instead of views

problem: using CTRL+1 and CTRL+2 changes the browser tabs instead of source/preview

if Javascript or HTML editor has focus before than the switch view is performed before tab switch.

tested in:

Firefox 3.5.7,
Chrome 4.0.249.64
Internet Explorer 8.0.6001.18813

How long are JS bins kept?

I didn't see this answered in the FAQ. Are they kept indefinitely or is there a time at which they expire?

Changing Include script does not fire refresh in live preview

HAML, SASS, and SCSS Support

Since there is a CoffeeScript feature request, I figure I may as well put in a request for these.

How can I remove a page?

I imprudently typed something personal in a page, and I can find it easily using google. How can I remove that page or update it? I've clicked "new version" button many times, but it always shows original version, even I delete all the cookies and temporary files.
Any suggestions? thanks.

$$() function is replaced by $()

When using the $$() function (from prototype) and executing code in the output pane, it get replaced by the $() function...
However, it works fine when using a "Live URL" (sample case here: http://jsbin.com/orima ).

Reproduced in FF 2.0.0.12, 3.0.14, 3.5.1 and IE 7

Edit: Fix the sample case url

Coffee script support

anyone willing to implement please?

can you delete the content?

for ex - if a person posts sensitive data on jsbin is there any way that data can be deleted from jsbin/xxxx/edit# so that it is not visible on public url?

Log/save/remember pastes

I would like some automatic logging of the pastes I make. Most of my pastes are test cases and demos. If I don't attach them to a bug or save, I can often lose them completely.

dojo 1.6

I'd like to see dojo 1.6 included. It's a pretty exciting release IMO, with its module loading enhancements and prettier default ui theme.

Annoying behavior of textareas

Sometimes zero-width spaces are inserted into the two textareas (JavaScript, HTML), and line breaks after the very last line of code, too. And even when I delete them, they'll return later. This does not happen on – for example – jsFiddle.

It seems to only happen in Chrome, it's fine in Firefox.

Screencast: http://screenr.com/M2c (Made with canary build of Chrome, but also happens with stable.)

Script not running via link

The script doesn't run when someone loads the page, instead it displays in the html.

http://jsbin.com/alebi3/13

Feature - Reset Button

Reset button at the top similar to jsfiddle. Should reset HTML and clear JS sections, and prompt to "are you sure" type message before proceeding.

utf-8 encoding in the javascript window

It seems like there is a utf-8 encoding issue for the left pane, in fact when I paste russian text in the javascript window, if I hit "preview" it shows fine but if I hit "save" it is converted to a bunch of question marks "???????????".
This is the related bin: http://jsbin.com/ugapo3/edit

(It's a jquery plugin I'm developing.)

UPDATE 08/12/2010: the latest version is http://jsbin.com/ugapo3/8/edit

Script Timeouts are not cancelled from preview mode

For example, if you have a script which acts on a timer, it will still run in the background and the old version will still run when a new version is deployed.

Steps to recreate, use the default HTML and the following JS:
setTimeout(function(){document.getElementById('hello').innerHTML = "hello"},500)

Go to preview mode. Notice how it says "hello" and that's it.

Go back to the code edit view and change the code to:

setTimeout(function(){document.getElementById('hello').innerHTML = "world"},500)

Go to the Preview tab, and notice how it flickers between "hello" and "world"

A way to resolve it would be to keep the new versions within an iframe.

Reset link in entered code resets JSBin

I added an href with an ID of "reset", planning to use it to return a jQuery application to its initial state -- unfortunately, when I clicked on the link, it reset my entire page as if the "Revert" button had been clicked, except that it doubled the control bar at the top.

Sample: http://jsbin.com/uqewu5/edit

Further testing made it seem like the href="#" was to blame (and that clicking the top "Code" button returns to my code -- learned too late), which I thought I'd used in other pages on JSBin. Either way, it seems like an issue.

Startup: what's wrong? "This URL does not have any code saved to it."

get only message:

document.getElementById("hello").innerHTML = "This URL does not have any code saved to it.";

Add jQuery UI Theme Switcher dropdown when jQuery UI is added to the HTML

If someone selects jQuery UI to be included onto the HTML provide a separate dropdown to pick with theme to use.

You can even use the themes from Google code http://www.stemkoski.com/jquery-ui-1-7-2-themes-list-at-google-code/

JS with \\ does not get saved properly

JS:
alert("Hello\world")

in preview mode (as JS should be like) it says "Hello\World"
After its saved, it shows "Helloorld" as the code becomes
alert("Hello\world")

non-root directory

make it to be working in a non-root directory of server.
add a prefix variable before all the link and parser.

Conflict w/ Google Chrome Extension "Chrome Sniffer"

There is a conflict with the "Chrome Sniffer" extension for Google Chrome and JS Bin.

Problem:

Navigate to http://jsbin.com/iyize
Append "/edit" for http://jsbin.com/iyize & click enter
The appropriate code isn't rendered in edit mode

If I disable the extension, then the default behavior works just fine

https://chrome.google.com/extensions/detail/homgcnaoacgigpkkljjjekpignblkeae

IE8 JS error (warning?)

Here's the error that shows up:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC1; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Timestamp: Thu, 21 Jan 2010 22:04:17 UTC

Message: 'undefined' is null or not an object
Line: 16
Char: 560
Code: 0
URI: http://jsbin.com/js/render/edit.js

Here's what appears in the source on line # 16, char # 560:
j=l.replace(/^[-\d.]+/,"")