JS Bin Tutorials

  • Archive
  • RSS
  • Ask me anything
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/KMoFSfBx_QA?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Saving your history (beta)

One of the beta features I’ve been quietly working on is the ability to retrieve a history of saved urls. Currently this is tucked away inside of the beta features - so you need to open a console, but it needs your feedback and testing to understand if it’s viable and works. Please contribute to the feedback on github here.

  • 9 months ago
  • 9
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/rXGUesjAi9g?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Testing Ajax Requests

One of JS Bin’s original drivers for being created was I needed a way to create simple tests for checking Ajax requests and responses. This screencast has been re-created with the updated version of JS Bin to show you how to create those dummy Ajax response handles using JS Bin.

    • #testing
    • #ajax
  • 9 months ago
  • 42
  • Permalink
  • Share
    Tweet

Q:First, thanks so much for the incredibly awesome tool.
I'm using jsbin to teach some basic hacking skills -- well, a hacking attitude more than anything -- to primary school kids. I've given them a template to work with, which they then fork to make their own pages. So, e.g., jsbin ibepo3 (sorry, not allowed to include a link in a tumblr question).

The kids are supposed to email me the URLs of their work, but some percentage of them inevitably screw that up. Is there a way to access the revision history tree of a jsbin entity? That would be a huge help to me and my kids. Thanks so much!
Matt

mattpriceuoft

Hi Matt,

I’m working on a new features that should help you there. The first is a full save history, i.e. you’ll be able to see that ibepo3/20/ was a saved version of ibepo3/17/, and so on.

Secondly I’m considering changing the cloning in a way that you share a url with /clone on the end, and it will automatically create a new copy - therefore your students will have their own revision history and own url - rather than everything sitting on the same namespace.

I suggest you follow issue #84 which is very similar to what you’re asking.

  • 9 months ago
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/0127x8F9N5s?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Custom templates for starting points

I re-enabled the save as template feature, so that you can create your own custom starting point with JS Bin. The aim is in the future to be able to provide multiple templates - but one will do for now. Enjoy.

    • #templates
  • 11 months ago
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/hK68YvK-Mew?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Using clones instead of saves

Example of how you could use the new clone functionality in JS Bin and it’s keyboard shortcuts.

    • #clone
  • 11 months ago
  • 2
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/L3_pAuGCPBI?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

JS Bin 2.8

Introducing JS Bin 2.8.0 - with live previews, resizable panels, autocomplete and more.

  • 11 months ago
  • 4
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/_GtjaW4Ma3c?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Gist integration

How to pull a gist from github.com directly in to JS Bin without any copy and paste mucking around.

    • #gist
    • #github
  • 11 months ago
  • 20
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/5z7RlXcoRFU?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Adding custom libraries

Example of how you can permanently add your own custom libraries to JS Bin’s library drop down.

  • 1 year ago
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/z6CZBNmSdqs?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Drag file support

A demo of the simple drag and drop functionality tucked away inside of JS Bin. Note that this is only supported in browsers with both the drag and drop API and the File API (such as Chrome).

  • 1 year ago
  • 2
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 src=\x22http://www.youtube.com/embed/ZcN-7cH2alY?wmode=transparent\x26autohide=1\x26egm=0\x26hd=1\x26iv_load_policy=3\x26modestbranding=1\x26rel=0\x26showinfo=0\x26showsearch=0\x22 frameborder=\x220\x22 allowfullscreen\x3e\x3c/iframe\x3e'

How to enable beta features

A screencast on how to enable beta features and how the live and download features work.

  • 1 year ago
  • 3
  • Permalink
  • Share
    Tweet

Getting the lastest bin

Did you know you can jump to the very latest saved jsbin by using the word ‘latest’ instead of the revision number, i.e.:

http://jsbin.com/canvas/latest/edit

Will redirect you to the latest saved version of the code under the ‘canvas’ id.

  • 1 year ago
  • Permalink
  • Share
    Tweet

About

The latest features, tips and screencasts to help you make better use of jsbin.com

Pages

  • Log a bug or feature request
  • Fork on Github
  • About
  • FAQ
  • Adding custom libraries
  • Custom jsbin urls

Me, Elsewhere

  • @rem on Twitter
  • remysharp on Youtube
  • remy on github
  • RSS
  • Random
  • Archive
  • Ask me anything
  • Mobile

Effector Theme by Carlo Franco.

Powered by Tumblr