25 | 26 | 27 | 28 | ## What does this mean? 29 | 30 | It means there's going to be a new, streamlined, modern JS Bin available soon. Just as importantly, _all_ of the legacy code will be dispatched and the new code based entirely on modern development practises. 31 | 32 | The biggest driver for the refactor is the constant downtime that JS Bin suffers for various reasons. This new, v5, version will run from entirely static content served over a CDN. It will have _minimal_ reliance on online servers so the webapp aims to be fully offline capable. 33 | 34 | There will be a number of features that will be dropped, and there will be some functionality yet to be written (for instance, mobile support is great on current JS Bin, but terrible in v5). 35 | 36 | The aim: back to simple. Simple and fast is what JS Bin was good at. Now I want to add reliable to those principles. 37 | 38 | ## Can you try it out? 39 | 40 | Why yes, you can! And, if you don't like it, you can always "eject" back to JS Bin v4 (from the palette menu). 41 | 42 | 43 | 44 | Keep in mind that v5 is still in alpha, and there _will_ be some undocumented parts, some broken parts, some missing parts. If you feel there's something important or unobvious that's going wrong, there's a dedicated support link in v5 that you file an issue. 45 | 46 | Thanks for reading, and I'll be in touch again with updates the progress of v5 development. 47 | -------------------------------------------------------------------------------- /content/blog/twdtw-1-sass-tern-security.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #1: Sass, Tern, Security' 3 | author: remy 4 | date: '2014-03-07' 5 | published: true 6 | --- 7 | 8 | 9 | This is the first installment of "things we did this week". Where we'll share some of the features or changes or fixes we've been working on. Sometimes it will be small features, sometimes BIG exciting features and other times it'll be progress to much longer term goals. 10 | 11 | We're working on local branches of JS Bin with a few cool features. 12 | 13 | ## Sass 14 | 15 | There's been [tons of demand](https://github.com/jsbin/jsbin/issues/176) for Sass support, but until we could pull it off on the client side, I wasn't sure it would land. Now thanks to [sass.js](https://github.com/medialize/sass.js/) and a few hours of hacking, JS Bin has a development branch with Sass (or more specifically SCSS) in a PR [feature/scss](https://github.com/jsbin/jsbin/pull/1229) (see [Rodney Rehm's post](http://blog.rodneyrehm.de/archives/33-libsass.js-An-Emscripten-Experiment.html) on porting to sass.js). 16 | 17 | It does mean that Bourbon, Compass, et al aren't supported, but it's still a good step forward (and the changes also mean it's now easy to add server-based support for Sass - which will come soon). 18 | 19 |  20 | 21 | (Demo pitched from [red-team-design.com](http://red-team-design.com/simple-scss-spinner-animation/)) 22 | 23 | ## Tern 24 | 25 | I'm proud to say that my company, [Left Logic](http://leftlogic.com) was the first to back big behind the Tern project last year. And this week [Giulia](http://github.com/electricg) has been adding support to JS Bin. 26 | 27 | It'll be a user preference to enable, and we're working on dynamically loading definition files based on the contents of your bin (i.e. if you have jQuery, it'll automatically load the jQuery definition file for you). 28 | 29 |  30 | 31 | ## Security 32 | 33 | Finally, [Fabien](http://github.com/allouis) has been doing lots of behind the scenes work that's starting to land in production behind feature flags (which allows us to test new features and letting us control how many people see them). 34 | 35 | Specifically we've reinstated SSL support for login and register. We tried to apply SSL to all of JS Bin some many months back, but because the iframe that your output is rendered in is under https, it would block *all* assets in the iframe pointing to http - this would usually be included libraries, images, CSS, etc, etc. So we had to abandon it, and return with SSL for login and register: 36 | 37 |  38 | 39 | SSL is likely to land next week, and this will also open the door to [editor settings and preferences](https://github.com/jsbin/jsbin/pull/1224) - without having to open devtools to have on the console! 40 | 41 | ## Totally aside 42 | 43 | How seriously sweet is this! 44 | 45 | 46 | 47 | And yes, I have actually asked myself: how could I get JS Bin to control a drone...insane, I completely appreciate. -------------------------------------------------------------------------------- /content/blog/twdtw-10-jshint-linehighlight-pro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #10: JSHint, line highlighting and update on pro' 3 | author: remy 4 | date: '2014-06-20' 5 | published: true 6 | --- 7 | 8 | 9 | Today we pushed a fairly hefty release containing a few PRs to update libraries, but also a few extra features for all our users. 10 | 11 | ## JSHint 12 | 13 | We've finally got around to updating JSHint (whilst still providing support to IE8 by serving an old version for them). More importantly, for those of you who have [registered](http://jsbin.com/register), you can now configure your default JSHint [preferences](http://jsbin.com/account/preferences): 14 | 15 |  16 | 17 | ## Line highlighting 18 | 19 | The original precursor to JS Bin had line highlighting and sharing (from back in 2007), and it's a great feature that we use all the time in Github, so I went ahead and implemented support in JS Bin. You need line numbers enabled (either from preferences, or the shortcut double click on the panel title, like "HTML"). 20 | 21 | Now when you click in the gutter, it'll highlight that line for sharing. You can also shift+click to select a range: 22 | 23 |  24 | 25 | ## An update on Pro 26 | 27 | Pro is all about making JS Bin sustainable so we can continue to keep JS Bin free and for education and making JS Bin the best tool it can be for teaching. 28 | 29 | Tweets like this is why we need you to go pro: 30 | 31 | > Best @CodeClub ever! @js_bin you are a life saver... – [Oli Evans on Twitter](https://twitter.com/olizilla/status/480011434513162240) 32 | 33 | We've been working hard towards releasing Pro which will initially include: vanity URLs, read/write API access, private bins, dropbox sync, beta access to features and first line support. 34 | 35 | So tell your friends, your co-workers, help support JS Bin and look out for the release coming very soon. -------------------------------------------------------------------------------- /content/blog/twdtw-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #2: Addons, Collaboration, Hardware' 3 | author: remy 4 | date: '2014-03-14' 5 | published: true 6 | --- 7 | 8 | 9 | This week we released more experiments, discovered one experiment going wrong (sad face), little two day retreat playing with arduinos and where I'll be about giving away some sweet [JS Bin stickers](http://www.flickr.com/photos/remysharp/9576228318/) and maybe even a [t-shirt](http://www.flickr.com/photos/remysharp/10805438263/) or two. 10 | 11 | ## User enabled addons 12 | 13 | Code folding, matched brackets, trailing white spaces, and more. We all have our favourite features in the editors we love, and CodeMirror comes with a great deal of addons that historically I've been careful about enabling (since it adds to the footprint of the jsbin.js script request). 14 | 15 | I've releases a dev feature (i.e. there's no interface, [yet](https://github.com/jsbin/jsbin/pull/1224)) that allows you to enable to lazy-load in a slew of addons from your browser console. For example, in the console if you run the following then refresh: 16 | 17 | ```js 18 | jsbin.settings.addons.fold = true; 19 | ``` 20 | 21 | Gets you code folding: 22 | 23 |  24 | 25 | Or maybe you're a Vim beast, easy: 26 | 27 | ```js 28 | jsbin.settings.addons.vim = true; 29 | ``` 30 | 31 | [Addons will be documented](/help/addons) soon, but there are details in the pull request: [#1273](https://github.com/jsbin/jsbin/pull/1273). 32 | 33 | ## First pass at collaboration 34 | 35 | [Giulia](http://github.com/electricg) took [together.js](http://togetherjs.com) and implemented under an experimental flag. 36 | 37 | Sadly, and due to no fault of Giulia's, using together.js just doesn't do the job properly. The way it works is this: whenever anyone makes a change, all of the text is sent and replaced in the collaborators window. This results in the *cursor position being reset* when this happens. 38 | 39 | As it turns out, this already affects *all* the sites that already use together.js with CodeMirror (the embedded editor that JS Bin uses). 40 | 41 | So we're looking at whether we fork together.js and send a pull request to fix this, or go down the [share.js](https://github.com/share/ShareJS) route (which I personally think is highly likely for a few other reasons). 42 | 43 | ## A hardware retreat 44 | 45 | Well, we didn't actually leave the office, but we did take a complete break from coding on JS Bin to experiment with [Arduinos](http://arduino.cc/), [Sparks](https://www.spark.io/), soldering irons, [Johnny Five](https://github.com/rwaldron/johnny-five/) and lots of LEDs. 46 | 47 |  48 | 49 | Overall, great little fun. Though none of us managed to produce anything that we'll be recording videos for Kickstarter, we have now broadened the amount of things we don't know! 50 | 51 | ## Out and about 52 | 53 | I'll be venturing out of sunny Brighton to a couple of London events, and I'll have a fistfull of JS Bin stickers (which are *really* nice quality) and a few t-shirts at [Edge London](http://lanyrd.com/2014/edgeconf/) and [LNUG](http://lanyrd.com/2014/lnug-march/). So come grab me! 54 | 55 | ## Totally aside 56 | 57 | This shouldn't be funny, but it's utterly hypnotic... 58 | 59 | -------------------------------------------------------------------------------- /content/blog/twdtw-3-codemirror-settings.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #3: CodeMirror, User settings, Hacks' 3 | author: remy 4 | date: '2014-04-01' 5 | published: true 6 | --- 7 | 8 | 9 | Last week we rolled out [SSL support](/blog/ssl) for our sign in (long overdue), and this week we've had two pretty cool releases: CodeMirror 4 and (in private testing) user settings UI. 10 | 11 | ## CodeMirror 4 12 | 13 | [CodeMirror](http://codemirror.net) is the excellent editor that backs JS Bin. Version 4 was released last week and on Tuesday it landed in JS Bin. The highlights for me personally are multiple cursors and sublime mode (via `jsbin.settings.addons.sublime = true`): 14 | 15 |  16 | 17 | But isn't setting these [sweet addons](/blog/twdtw-2#userenabledaddons) via the console a bit tricky and maybe for the hacker?! Well, we've been working hard to introduce a "proper" UI which has gone live behind alpha flags so we can give it some production testing, so I'm expecting to release to public next week. 18 | 19 | ## User Settings 20 | 21 | But take a look: 22 | 23 |  24 | 25 | These settings will give you full control over how your editor works, and if you think anything is missing, we're looking for *your* input. We're also working on adding a JS Bin preferences panel to help manage your default templates and default processors (like Less or CoffeeScript) and more. 26 | 27 | ## The Autoprefixer hack - did you know...? 28 | 29 | Last Friday I saw a [tweet asking for Autoprefixer support](https://twitter.com/pepelsbey_/status/449460914941853696) (which coincidently landed in our friendly neighbour CodePen about two hours after we replied with...): JS Bin is extremely maluable. 30 | 31 | So we hacked together a bin that lets you run Autoprefixer entirely client side, and uses the CSS panel and the magical `%css%` value to post process *your* CSS through Autoprefixer. 32 | 33 | Then in the afternoon [Giulia](http://github.com/electricg) added this to our library drop down, so if you select Autoprefixer, you can use the CSS panel without prefixes. All without a server side change. [Have a play](http://jsbin.com/xewil/1/edit). 34 | 35 | 36 | ## Totally aside 37 | 38 | Fabien found and shared this site [8tracks](http://8tracks.com) that you can give it a tag, say "programming", and you can listen to tracks to suit that mood. So get your groove on. 39 | 40 |  -------------------------------------------------------------------------------- /content/blog/twdtw-4-tern-pro-features.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #4: Tern live, and our upcoming Pro features' 3 | author: remy 4 | date: '2014-04-07' 5 | published: true 6 | --- 7 | 8 | 9 | We've now released Tern to live for everyone, and we've been hard at work on our Pro features and working on improving the JS Bin core code. 10 | 11 | ## Tern 12 | 13 | A few weeks ago we showed off the [demo of Tern](/blog/twdtw-1-sass-tern-security#tern), and now it's live. You need to manually turn it on via the `addons`: 14 | 15 | ```js 16 | jsbin.settings.addons.tern = true; 17 | ``` 18 | 19 | ...then refresh and Tern is enabled in the JavaScript panel. 20 | 21 | ## Upcoming Pro feature: vanity urls 22 | 23 | We're all working hard on Pro features for JS Bin (whilst also pushing out more and more features for *all* users), and I've just finished the first version of vanity URLs. 24 | 25 | This means your shared URLs will include your username to your editable bins, like [http://rem.jsbin.com/kuzef/2/](http://rem.jsbin.com/kuzef/2/) and more importantly, you can *publish to your vanity url*, as so: [http://rem.jsbin.com](http://rem.jsbin.com). 26 | 27 | The vanity URL will also support pointing your own domain directly at JS Bin (like code.rem.io). 28 | 29 | Also in the works is Dropbox support (for your own copy of you bins but also quickly embedding external resources). More on that soon. 30 | 31 | Most importantly, Pro is the way that JS Bin will continuing to be open source and **free for education**. And we need your help to do that. So spread the word, and [sign up too](https://jsbin.com/register) so you're ready for when it lands! 32 | 33 | ## Totally aside 34 | 35 | Fabien had been catching up on some classic movies, in particular Sneakers, which reminded me of this amazing story by Moran Cerf, about a particular point in life where his group decided to say "yes". 36 | 37 | 38 | -------------------------------------------------------------------------------- /content/blog/twdtw-5-settings-dropbox-heartbleed.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #5: Heartbleed, Settings, User Backups' 3 | author: fabien 4 | date: '2014-04-11' 5 | published: true 6 | --- 7 | 8 | 9 | This week we've been dealing with the Heartbleed issue, but more positively have also shipped (for internal, but live testing) updates to user settings and a new pro feature: real-time backup of your bins. 10 | 11 | ## Heartbleed, no more 12 | 13 | The Heartbleed bug definately took it's toll on [Remy](https://twitter.com/rem/status/454293558317821952) as he patched our OpenSSL, reissued SSL certificates and fixed weird [MySQL issues](http://stackoverflow.com/questions/22968867/error-1018-hy000-cant-read-dir-of-db-errno-13-not-a-permission/23014237), but we were [no longer vulnerable](/blog/heartbleed)! 14 | 15 | This, from [xkcd](http://xkcd.com/1354/), does a good job of explaining the issue: 16 | 17 |  18 | 19 | ## JS Bin settings & preferences 20 | 21 | [Giulia](https://github.com/electricg) has been continuing work on [our new account pages](/blog/twdtw-3-codemirror-settings#usersettings), with a new page for managing your default preferences, such as your starting open panels, templates, processors and so on. 22 | 23 | We're hoping to release this to you all next week. 24 | 25 |  26 | 27 | 28 | ## User backups 29 | 30 | For the past couple of weeks, I've been working on a new part of JS Bin called [Jobsworth](https://github.com/jsbin/jobsworth). This is a task manager that communicates using [zeromq](http://zeromq.org/) and contrary to it's name, will do our bidding. Initially backing up all my new bins to Dropbox in real-time (and we intend to add other services, like SkyDrive, Drive, etc). 31 | 32 | The format of the file saved in which the bins are saved is a single HTML file that includes the full source of the bin, including pre-processor's source, which acts as an API for JS Bin importing too [#609](https://github.com/jsbin/jsbin/issues/609). 33 | 34 | ## Totally aside 35 | 36 | If you've not seen the oscar winning [Gravity](http://www.imdb.com/title/tt1454468/), well, you should, but this is Gravity for those of you without much time on your hands - enjoy! 37 | 38 | 41 | 42 | -------------------------------------------------------------------------------- /content/blog/twdtw-6-syncing-pro-accounts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #6: Bin files, Dropbox, Pro Accounts' 3 | author: fabien 4 | date: '2014-04-25' 5 | published: true 6 | --- 7 | 8 | 9 | This week we've been doing mostly internal updates to JS Bin, so not much to see. I've been working on updating the way in which we create HTML 10 | files from bins and we're going to start experimenting with two-way syncing with [Dropbox](http://dropbox.com) 11 | 12 | ## Bin files 13 | 14 | Transforming a Bin into a html file has always been done by JS Bin - to display your output in the iframe, but this week I've been creating a module 15 | to create more than just a renderable file, but a file that stores both the raw panel content and the content *after* it has gone through 16 | preproccesors. This will eventually allow files in this format to be dropped into JS Bin and populate all the panels, cool! 17 | 18 | ## Dropbox 19 | 20 | [Remy](https://twitter.com/rem) and I were talking about our Dropbox linking being more than just saving - but syncing, where any changes made to your files on Dropbox would then be reflected in JS Bin. We're hoping to have two-way syncing of bins to Dropbox ready to be tested internally by next week. Here's how the current dropbox linking works: 21 | 22 | 25 | 26 | ## Pro Accounts 27 | 28 | Our pro account offering is being polished for when Remy returns to the office and we can release them, [Danny](https://twitter.com/yandle) popped in this week to go over the designs and user flow from registered or anonymous to pro and I've been compiling a list of all JS Bins current and future features, it's a lot bigger than I thought! 29 | 30 | ## Totally aside 31 | 32 | Also, a very big congratulations to Remy and [Julie](https://twitter.com/julieanne) - they've had a beautiful baby girl :D! 33 | 34 |  35 | -------------------------------------------------------------------------------- /content/blog/twdtw-7-processors-search.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #7: SCSS, Compass and search' 3 | author: remy 4 | date: '2014-05-02' 5 | published: true 6 | --- 7 | 8 | 9 | Whilst Fabien continues with [Pro user integration](/blog/twdtw-6-syncing-pro-accounts) and Giulia [goes on holiday](https://twitter.com/electric_g/status/460844432649355264), I've snuck out of paternity leave and cheekily completed a bit of dev. 10 | 11 | ## SCSS, Compass and processors total upgrade 12 | 13 | In the last year, I had to remove the Stylus processor because there was a weird bug that caused an infinite loop (both client *and* server side). Since JS Bin is single threaded(!) Stylus can't be reintroduced until it's running in a separate process. 14 | 15 | In the same vein as [Jobsworth](/blog/twdtw-5-settings-dropbox-heartbleed#userbackups) (our zeromq based bin backup server), I've created [Pennyworth](https://github.com/jsbin/pennyworth): a server for running processors and spitting out rendered CSS, JavaScript or HTML. 16 | 17 | There's a simple [markdown](https://github.com/jsbin/pennyworth/blob/master/targets/markdown/index.js) module, but more importantly to user demand, there's modules for [SCSS](https://github.com/jsbin/pennyworth/blob/master/targets/scss/index.js) and [SCSS with Compass](https://github.com/jsbin/pennyworth/blob/master/targets/sass-with-compass/index.js) (and more being adding before we go live). 18 | 19 | Here's a couple of shots using a couple of [Ana Tudor's](http://twitter.com/thebabydino) excellent SCSS demos: 20 | 21 |  22 | 23 | Once I'm back from paternity leave (in 2 weeks) I'll be focused on releasing this entirely. 24 | 25 | ## Help & blog search 26 | 27 | This part of JS Bin (the blog and help) are statically generated using [Harp](http://harpjs.com/), which makes search a little tricky (and bin searching is also on the roadmap, but a separate issue for now). 28 | 29 | I've hacked in a simple solution that generates a static JSON file with all the words from the content on help & blog. It's not perfect, and requires JavaScript right now (and no keyboard support yet), but it's a start to jump to content a little quicker. 30 | 31 |  32 | 33 | ## Totally aside 34 | 35 | It's a bank holiday weekend here in the UK, which means most of us have Monday off. So what to do with all this free time? How about melting your brain on TV? 36 | 37 | [Huffington Post](http://www.huffingtonpost.com/2014/05/01/binge-watching-chart-_n_5246342.html) rescues us from a hard decision: 38 | 39 |  -------------------------------------------------------------------------------- /content/blog/twdtw-8-svg-settings.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'TWDTW #8: SVG support and settings live' 3 | author: fabien 4 | date: '2014-05-15' 5 | published: true 6 | --- 7 | 8 | 9 | With [Giulia](https://twitter.com/electric_g) back from holiday and [Remy](https://twitter.com/rem) easing back into work, the Left Logic offices 10 | have been a bit more lively, and pushing a few more bits to production. 11 | 12 | ## SVG Support 13 | 14 | We just landed SVG support in JS Bin. Simply add `.svg` to the bin URL, and JS Bin will correctly serve up the HTML content panel as SVG with the correct headers. So now you can easily [prototype SVG](http://jsbin.com/gecew.svg) using JS Bin: 15 | 16 | ```html 17 |Imports on (new) jsbin are pretty cool I think. Downloaded result includes full working version *plus* original source. pic.twitter.com/ARVH89ij9u
— @rem (@rem) January 25, 2018
18 | ```
19 |
20 |
21 |
22 | Thanks to @jorgeATGU for the SVG madness!
23 |
24 | The feature request came through from [Emil on twitter](https://twitter.com/ThatEmil/status/464665080005951488), suggesting that the `.svg` extension serve up the right headers. So we opened a [feature request](http://github.com/jsbin/jsbin/issues/1466), and [one simple change](https://github.com/jsbin/jsbin/commit/59d729f3cade53ba10ca3c817daa51c1e36bce15) later it was live.
25 |
26 | Emil also [blogged about his own workflow](http://thatemil.com/blog/2014/05/14/using-js-bin-as-an-svg-playground/) with JS Bin and SVGs. It's *that* easy to help make JS Bin a better product.
27 |
28 | ## User settings live
29 |
30 | 
31 |
32 | We've spoken a [fair](/blog/twdtw-3-codemirror-settings#usersettings) [bit](/blog/twdtw-4-tern-pro-features#tern) [about](/blog/twdtw-5-settings-dropbox-heartbleed#jsbinsettingspreferences) the upcoming user settings in JS Bin and today we've started our staggered release.
33 |
34 | We're releasing to 10% of users ([using our feature flags](https://github.com/remy/feature-gateway#ab-testing)) to start with to monitor the affect on our infrastructure (since we've moved to a memcache system for our sessions), and we'll quickly increase this to 100% over the coming days (and weeks).
35 |
36 | ## Want a JS Bin sticker? At BACON conf?
37 |
38 | I'll be attending the [BACON conference](http://devslovebacon.com/) and I'll be armed with a swathe of JS Bin stickers, I look pretty much like my avatar,
39 | so hit me up if you want one for your laptop!
40 |
41 | ## Totally aside
42 |
43 | Myself and Giulia were in tears this week watching this clip over and over and over: Nick Cage knows how to dive:
44 |
45 |
46 |
--------------------------------------------------------------------------------
/content/blog/twdtw-9-tweaks-maintenance.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'TWDTW #9: Tweaks and maintenance'
3 | author: giulia
4 | date: '2014-06-09'
5 | published: true
6 | ---
7 |
8 |
9 | These past three weeks we have been mainly working on bug fixes and internal maintenance, so no big announcement except that we have released to 100% of our users the [settings and preferences pages](/blog/twdtw-8-svg-settings#usersettingslive). Go and have fun with it!
10 |
11 | ## The small things that matter
12 |
13 | We're often releasing multiple times throughout the week with small bug fixes and tweaks, a few that you might have noticed:
14 |
15 | - Github changed their URL format for gists, so we fixed [gist import](/help/import-gists) (which was broken for a short time) [#1507](https://github.com/jsbin/jsbin/pull/1507)
16 | - Logged in users can archive using keyboard shortcut ctrl+Y [#1000](https://github.com/jsbin/jsbin/issues/1000)
17 | - All the [JS Bin keyboard shortcuts](/help/keyboard-shortcuts) are documented in detail
18 | - We changed "Bins" to "File" in the top menu [#1414](https://github.com/jsbin/jsbin/issues/1414) (more on why in a later post)
19 |
20 | ## Spread your love
21 |
22 | We love when you help us improving JS Bin by raising [issues](https://github.com/jsbin/jsbin/issues), bugs and pull requests, and we love it just as much when you tell us that you love JS Bin:
23 |
24 | > [Why I Love JS Bin](http://www.jimmylauzau.com/blog/2014/05/28/why-i-love-js-bin/) by Jimmy Lauzau [@jimmay5469](http://twitter.com/jimmay5469)
25 |
26 | Where Jimmy talks about using the Ember branded version of JS Bin, his preferences and default templates.
27 |
28 | ## Totally aside
29 |
30 | We like the classics and we like geeky strange ideas, so what's better than Star Wars, re-edited in alphabetical order..?
31 |
32 |
33 |
--------------------------------------------------------------------------------
/content/blog/urls.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: A change to the way our URLs work
3 | author: remy
4 | date: '2015-06-16'
5 | published: true
6 | ---
7 |
8 |
9 | We've just landed a change to the way JS Bin URLs work, and though the new way aims to be intuitive and backward compatible, some of you sharp sighted users might have spotted the change already and wondering what changed and why.
10 |
11 | ## In short
12 |
13 | - Revisions are referred to as "snapshots".
14 | - Snapshots (the numerical identifier) only appear in the URL when take a snapshot (and want to share that snapshot).
15 | - The latest version is the default (i.e. without a number in the URL).
16 | - The share menu has been updated to be simpler, whilst also more powerful.
17 |
18 | ## Revisions are now called snapshots
19 |
20 | There's been some confusion of exactly what a revision was, and when they're created. There was also language that talked about creating "milestones".
21 |
22 | So we've changed this all to read as a "snapshot".
23 |
24 | A snapshot is a static moment in a bin's lifetime. The shortcut is ctrl+ s to create a snapshot of the current code.
25 |
26 | ## Snapshot numbers in URLs
27 |
28 | A difference in the URLs you might notice is that you'll only see the snapshot number in the URL when you're looking at a *snapshot*. If you're looking at the **latest state of the bin, then there's no snapshot number**.
29 |
30 | This makes URLs simpler, but also means it's easy for you to read a URL and know immediately if you're looking at the latest state or not.
31 |
32 | ## Sharing simplified
33 |
34 | The share menu has also been updated to reflect this move to snapshots. *This* is where we feel the clarification will be intuitive. If you want to share a snapshot, there's no "lock revision" confusion, just the option to share the latest state or a snapshot (and changing what you want to share, automatically updates the URLs you can share).
35 |
36 | 
37 |
38 | As you can see from the screenshot, the share menu also offers you direct links to the different sources. In my particular case, the JavaScript panel contains JSON, so the share menu has detected that giving me a direct link to the [JSON content](https://rem.jsbin.com/colefa.json).
39 |
40 | ## Codecasting by default
41 |
42 | Now if you share the edit view of your bin and the latest state (ie. not a snapshot), then the viewer will automatically see a code casting view (where the code changes in real time as you change your code).
43 |
44 | Although the old `/watch` URL will still work, you can share the regular `/edit` URL and this has all the code casting built in.
--------------------------------------------------------------------------------
/content/blog/welcome.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Welcome to the new help & blog
3 | author: remy
4 | date: '2014-02-27'
5 | published: true
6 | ---
7 |
8 |
9 | JS Bin for years has done an absolutely superb job of giving its users an editor and the live output of the HTML, CSS & JavaScript. Something the project has been terrible at is exposing features and new information.
10 |
11 | We try hard to recess the application of JS Bin to let you get on with coding right away. This way *everyone gets a cursor*. You visit JS Bin, you type: you get a bin.
12 |
13 | But we're also very aware of the cost of recessing away like this. Often I see tweets and issues along the lines of "it would be great if I could do X", and I reply along the lines of "yeah, we did that back in 2011, it's here...".
14 |
15 | It's our own fault, but *this* new area of JS Bin will be the home for all the [help](/help) and the blog will be used to share our workings on new features and ideas—and hopefully share some of the process we use.
16 |
17 | There's a few ways you can keep track of what's going on:
18 |
19 | * Via twitter, follow [@js_bin](http://twitter.com/js_bin)
20 | * [Subscribe](/feed.xml) to the blog RSS feed
21 | * Watch the [github projects](http://github.com/jsbin)
22 |
23 | ## Say Hello to the Team
24 |
25 | I wanted to introduce you to the team that's working hard on JS Bin to day to make it all that it can be:
26 |
27 | * Remy Sharp ([twitter](http://twitter.com/rem), [github](http://github.com/remy)) - dev and direction
28 | * Danny Hope ([twitter](http://twitter.com/yandle), [github](http://github.com/dannyhope)) - UX and design
29 | * Fabien O'Carroll ([twitter](http://twitter.com/allouis_), [github](http://github.com/allouis)) - dev
30 | * Giulia Alfonsi ([twitter](http://twitter.com/electric_g), [github](http://github.com/electricg)) - dev
31 |
32 | And an equal hello to all the [contributors](https://github.com/jsbin/jsbin/graphs/contributors) over the years.
33 |
34 | ## What's shipped just recently
35 |
36 | - Subtle, flatter design
37 | - [Delete a bin revision](/help/delete-a-bin)
38 | - Windows & Mavericks support is now solid for the [local npm install](/help/2-second-setup)
39 |
40 | ## What we're working on
41 |
42 | There's a slew of projects going on at the moment, and we'll be posting as progress is made:
43 |
44 | - Pro accounts and white-labeled version of JS Bin (see [emberjs.jsbin.com](http://emberjs.jsbin.com) for example) - [get in touch](http://leftlogic.com/contact?subject=JS%20Bin%20white%20label) if you'd like to enquire about this
45 | - Monthly competitions giving away stickers and pro accounts
46 | - A vastly better mobile experience
47 | - SSL for login
48 | - Sass & SCSS support
49 | - Timeline recording and playback
50 | - [And a lot more](http://github.com/jsbin/jsbin/issues)
51 |
52 | I'd love to hear your feedback, if you're using JS Bin for teaching or sharing - what's your experience like? How can we make JS Bin better for all of you?
53 |
54 | – Remy
55 |
--------------------------------------------------------------------------------
/content/help/2-second-setup.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Local JS Bin: 2 second guide'
3 | category: hack
4 | ---
5 |
6 |
7 | 1. Install [node](http://nodejs.org)
8 | 2. From your terminal (or [command prompt](http://pcsupport.about.com/od/windows-8/a/command-prompt-windows-8.htm) if you're windows) and run these two commands:
9 |
10 | ```bash
11 | npm install -g jsbin
12 | jsbin
13 | ```
14 |
15 | **Note:** You *may* have to run npm as the super user, so in that case, the first command would be, and you will be prompted for your password:
16 |
17 | ```bash
18 | sudo npm install -g jsbin
19 | ```
20 |
21 | *The end.*
22 |
23 | ...or read the [detailed guide on running JS Bin locally](/help/running-a-local-copy-of-jsbin) for more options and control over the setup.
--------------------------------------------------------------------------------
/content/help/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Help
3 | ---
4 |
--------------------------------------------------------------------------------
/content/help/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: About JS Bin
3 | category: learn
4 | ---
5 |
6 |
7 | *JS Bin is an open source collaborative web development debugging tool.*
8 |
9 | Made in Brighton, England with blood sweat and code.
10 |
11 | ## What can JS Bin do?
12 |
13 | * Write code and have it both save in real-time, but also render a full preview in real-time
14 | * Help debug other people's JavaScript, HTML or CSS by sharing and editing urls
15 | * CodeCast - where you share what you're typing in JS Bin in real-time
16 | * Remote rendering - view the output of your JS Bin on any device on any platform, updating in real-time
17 | * Processors, including: coffee-script, LESS, Markdown and Jade.
18 | * Debug remote Ajax calls
19 |
20 | Find out more about JS Bin's features via the [YouTube JS Bin playlist](http://jsbin.com/videos).
21 |
22 | ## Who built this?
23 |
24 | JS Bin was built by [Remy Sharp](http://remysharp.com) and is completely open source and available [http://github.com/remy/jsbin](http://github.com/remy/jsbin). You can also follow [@rem](http://twitter.com/rem) on Twitter where he'll tweet about JavaScript, HTML 5 and other such gems.
25 |
26 | If you would like to work with Remy and his company, [Left Logic](http://leftlogic.com) on a front end development project, [please get in touch](http://leftlogic.com/contact?message=Found%20through%20jsbin.com).
27 |
28 | UX was kindly donated by [Danny Hope](http://yandleblog.com) who also tweets as [@yandle](http://twitter.com/yandle).
29 |
30 | The vast majority of the port from PHP to Node in June 2012 was done by [Aron Carroll](http://aroncarroll.com/) who also plays in github as [@aron](http://github.com/aron).
31 |
32 | ## A short history
33 |
34 | [JS Bin](http://jsbin.com) is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.
35 |
36 | 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.
37 |
38 | 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](http://ejohn.org)'s [Learning app](http://ejohn.org/apps/learn) 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.
39 |
40 | [Version 1](http://1.jsbin.com) of [JS Bin](http://www.flickr.com/photos/remysharp/4284906136) took me the best part of 4 hours to develop [back in 2008](http://remysharp.com/2008/10/06/js-bin-for-collaborative-javascript-debugging/), but [version 2](http://2.jsbin.com) was been rewritten from the ground up and is completely [open source](http://github.com/remy/jsbin).
41 |
--------------------------------------------------------------------------------
/content/help/adding-custom-libraries.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to add more libraries to the library list
3 | category: hack
4 | ---
5 |
6 |
7 | JS Bin comes with out of the box support for a number of libraries, but if you're comfortable in the developer tools, you can add your own.
8 |
9 | The format for a new library entry is as follows:
10 |
11 | ```js
12 | {
13 | text: 'My Category',
14 | requires: 'http://someotherlibary.com/lib.js', // optional
15 | style: 'http://someotherlibary.com/style.css', // optional
16 | scripts: [
17 | { text: 'My library', url: 'http://foo.com/somelib.js' }
18 | ]
19 | }
20 | ```
21 |
22 | There's a variable called libraries on the global namespace, with two methods: add and clear.
23 |
24 | To add this library, open your browser based console, and run the following (changing the library for your own):
25 |
26 | ```js
27 | var mylib = {...}; // the "My Library" object above
28 | libraries.add(mylib);
29 | ```
30 |
31 | These changes will save to your browser (on those browsers that support the Storage API - all the latest versions of browsers), and will remain until you call `libraries.clear()`.
32 |
--------------------------------------------------------------------------------
/content/help/adding-libraries.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Adding Libraries
3 | category: hack
4 | related:
5 | - adding-custom-libraries
6 | - versions
7 | ---
8 |
9 |
10 | You can manually [add custom libraries](/help/adding-custom-libraries) to your own instance of JS Bin, however if there's an important library or framework that many others want to use, then it makes sense to have it included in JS Bin's library selector:
11 |
12 | 
13 |
14 | You will need to [fork the JS Bin](github.com/jsbin/jsbin/fork) Github repository, and edit `/public/js/editors/libraries.js`.
15 |
16 | ⚠️ The library and any related assets that are included in the library **must** be served over https otherwise the pull request cannot be accepted.
17 |
18 | In general, a library tends to be stand alone, i.e. the paper.js library, so it only requires a new object in the `libraries` array with a label and a URL:
19 |
20 | ```js
21 | {
22 | url: 'https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.12/paper.js',
23 | label: 'Paper.js'
24 | },
25 | ```
26 |
27 | If the library has other prerequisite, like a CSS file or another JavaScript library (like jQuery), the `url` property can also accept an array:
28 |
29 | ```js
30 | {
31 | url: [
32 | 'https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css',
33 | 'https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css',
34 | 'https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js',
35 | 'https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js',
36 | 'https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js'
37 | ],
38 | label: 'Foundation 5.5.2'
39 | },
40 | ```
41 |
42 | If the library being added has multiple options, such as combinations of popular builds of Angular, then a `group` property with the same value can be included and JS Bin will automatically group these options together.
43 |
44 | Finally, in the rare case that additional code is required when the library is included that will make the user's workflow better, there is support for a `snippet` property, as seen in the Autoprefixer example below:
45 |
46 | ```js
47 | {
48 | url:'https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js',
49 | label: 'Autoprefixer',
50 | snippet: '\n\n'
51 | },
52 | ```
53 |
54 | Once you've made your changed, send a [pull request](https://github.com/jsbin/jsbin/pulls) and it will be reviewed and merged if successful.
55 |
--------------------------------------------------------------------------------
/content/help/adding-processors.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Adding new pre-processors
3 | category: fix
4 | ---
5 |
6 |
7 | Adding processors to JS Bin requires changes to the server side of JS Bin *and* the client side. This article explains how to implement a processor.
8 |
9 | If you're contributing a new processor to JS Bin, you will need to include the processor for [local](#localinstalls), [production](#production) and the [client side](#clientsidechanges). The process is relative simple, and documented below.
10 |
11 | The processor will need a unique name which is the id for the processor, such as `coffeescript`.
12 |
13 | ## Local installs
14 |
15 | Processors are forked directly off the main Node process. There are a number of specific changes required.
16 |
17 | ### Support and mime types
18 |
19 | In [`lib/processors/index.js`](https://github.com/jsbin/jsbin/blob/feature/scss/lib/processors/index.js) add the name of processor in the `supports` property.
20 |
21 | Also add the mime type for the processor type and any applicable aliases, such as Markdown having `md`, `mdown` and `markdown`.
22 |
23 | Finally, the `lookup` property is which panel the processor is found in. i.e. Sass is in `css`, and Markdown is in `html`.
24 |
25 | ### The processor
26 |
27 | Next, create a new file in `lib/processors` with the name of the processor, such as `coffeescript.js`. The processor must export a function that accepts the `source` and returns a new promise. i.e.:
28 |
29 | ```js
30 | 'use strict';
31 | var RSVP = require('rsvp');
32 | var coffee = require('coffee-script');
33 |
34 | module.exports = function (source) {
35 | return new RSVP.Promise(function (resolve, reject) {
36 | try {
37 | resolve(coffee.compile(source, {
38 | bare: true
39 | }));
40 | } catch (e) {
41 | reject(e);
42 | }
43 | });
44 | };
45 | ```
46 |
47 |
48 |
49 | ## Production
50 |
51 | JS Bin runs it's processors on a separate machine using a service we call [Pennyworth](http://github.com/jsbin/pennyworth).
52 |
53 |
54 | ## Client side changes
55 |
56 | TODO...
--------------------------------------------------------------------------------
/content/help/ajax-requests.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Ajax request to bins
3 | category: hack
4 | related:
5 | - how-can-i-embed-jsbin
6 | ---
7 |
8 |
9 | JS Bin supports [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) and a number of different ways to access your bin's content using Ajax techniques.
10 |
11 | ## Response types
12 |
13 | 1. Full HTML output (including JS Bin edit link and live reload scripts)
14 | - Full HTML output (excluding JS Bin edit link etc)
15 | - Single panel output (using .js or .css)
16 | - JSON for the JavaScript panel
17 | - JSON bin object
18 |
19 | ## Example code
20 |
21 | Below is a bin that can be tweaked to change the request it's making so you can see, live, what the impact of that change is:
22 |
23 |
24 |
25 | The example includes prepared ajax requests that are commented out. If you change the line from:
26 |
27 | ```js
28 | /* 3. get the JavaScript panel as JSON
29 | url: '//jsbin.com/xuyis/1.json',
30 | dataType: 'json',
31 | //*/
32 | ```
33 |
34 | And add a leading `/` to the comment, the code will run:
35 |
36 | ```
37 | //* 3. get the JavaScript panel as JSON
38 | url: '//jsbin.com/xuyis/1.json',
39 | dataType: 'json',
40 | //*/
41 | ```
42 |
43 | Try it out and see how the result changes.
44 |
45 | *TODO: extend this article to show individual ajax requests.*
--------------------------------------------------------------------------------
/content/help/api.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: JS Bin API
3 | category: hack
4 | ---
5 |
6 |
7 | JS Bin's API comes in a few flavours.
8 |
9 | 1. Get data
10 | 2. Post data for pro user accounts (to be detailed)
11 |
12 | ## Read API
13 |
14 | ## Write API
15 |
16 | 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`
17 |
18 | Authentication is required for all API requests unless one of the following api configuration options are set:
19 |
20 | - `api.allowAnonymousReadWrite` - if set to true allows GET and POST operations to the API anonymously (without an API key)
21 | - `api.allowAnonymousRead` - if set to true allows GET operations to the API anonymously (without an API key)
22 |
23 | By default, `config.default.json` has `api.allowAnonymousRead` set to true.
24 |
25 | Curl authentication examples:
26 |
27 | ```text
28 | $ curl http://{{host}}/api/:bin -H "Authorization: token {{token_key}}"
29 | $ curl http://{{host}}/api/:bin?api_key={{token_key}}
30 | ```
31 |
32 | End points are:
33 |
34 | - `GET /api/:bin` - Retrieve the latest version of the bin with that specified ID
35 | - `GET /api/:bin/:rev` - Retrieve the specific version of the bin with the specified ID and revision
36 | - `POST /api/save` - Create a new bin, the body of the post should be URL encoded and contain `html`, `javascript` and `css` parameters
37 | - `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
38 |
--------------------------------------------------------------------------------
/content/help/asset-uploading.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Asset uploading
3 | category: pro
4 | video: "//www.youtube.com/embed/d8TkAeGFLx4?rel=0"
5 | ---
6 |
7 |
8 | Available to [pro only](/upload). Simply drag & drop your assets into JS Bin and it'll upload instantly and insert an image tag with your newly uploaded asset.
9 |
10 | Each pro user can host up to 1GB of assets - so that gives you a bit of freedom to sling up your images as quickly as you create bins.
11 |
12 | To manage your assets, head over to the [assets](/account/assets) account page and you can delete files and check your usage.
13 |
14 | ## Uploading non-image assets
15 |
16 | Navigate to the [assets](/account/assets) page and drag the file directly in to the browser window. This asset (such as a CSS file) can be now re-used inside of your bins.
17 |
18 | ## Demo
19 |
20 | You can see a demo of upload in action below:
21 |
22 |
--------------------------------------------------------------------------------
/content/help/change-your-password.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to change your password
3 | category: learn
4 | ---
5 |
6 |
7 | Click on your avatar in the top right corner to open the account settings dropdown, from here you can enter your new password and click "Update account".
8 |
9 | 
10 |
11 | As an extra precaution, you could log out and back in again to fully clear your session.
12 |
13 | Note, if you log in using your Github account, you can still set a password, but that password is for JS Bin only, if you would like to change your Github password please head over to [Github](https://github.com).
14 |
--------------------------------------------------------------------------------
/content/help/clearing-the-console.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to clear the console
3 | category: learn
4 | ---
5 |
6 |
7 | You can clear the JS Bin console either using a [keyboard shortcut](/help/keyboard-shortcuts) or programmatically using JavaScript.
8 |
9 | The keyboard shortcut (from any panel) is: ctrl+l
10 |
11 | The JavaScript code is: `console.clear()`
12 |
--------------------------------------------------------------------------------
/content/help/customise-editor-settings.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to customise the editor settings
3 | category: learn
4 | video: "//www.youtube.com/embed/pzFqaRJwNQ8"
5 | ---
6 |
7 |
8 | *This article needs updating - as this is only required if you don't have a login.*
9 |
10 | Since JS Bin simply uses CodeMirror as the editor, naturally we expose that configuration to allow you to customise it yourself. Say if you don’t like line wrapping, or prefer 8 character width tabs - you can change all this yourself.
11 |
12 | Techniques used in this video:
13 |
14 | * Browser console to change `jsbin.settings.editor`
15 | * Enable debug mode using `jsbin.settings.debug = true`
16 |
17 |
20 |
--------------------------------------------------------------------------------
/content/help/debugging-preferences.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Debbugging your preferences
3 | category: hack
4 | ---
5 |
6 |
7 | If you're having problems with preferences being saved (perhaps the right panels are not being shown that you've selected), it's sometimes useful to inspect the settings that are stored locally on the browser you're experiencing issues with.
8 |
9 | Firstly you'll need to open your browsers developer tools. This is different for each type of browser (so if you're not familiar as to how, please run a [google search](https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=how+do+I+open+developers+tool+in+(safari+OR+chrome+OR+ie+OR+opera))).
10 |
11 | Once the developer tools are open, in the *console* you should see a message similar to the one below:
12 |
13 | 
14 |
15 | Note that you need to enter an unlocking code to access your settings. In this case, I would simply type `ok3n8h1o` into the console and hit return.
16 |
17 | Now you're able to copy the entire `jsbin` object and share it (jsbin support) for debugging.
18 |
19 | In the console (again) run the command `JSON.stringify(jsbin)` and copy the response. Note that in chrome's console, you can run `copy(jsbin)` and this will copy for you.
--------------------------------------------------------------------------------
/content/help/defaults-in-bins.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How do I set default code in all new bins?
3 | category: learn
4 | ---
5 |
6 |
7 | By default, opening JS Bin, you'll be presented with a boilplate HTML document with no CSS and no JavaScript. But what if you want to *always* include code, like a default meta viewport?
8 |
9 | Easy. **Save as template**, and note that you don't need to be logged in for this to work. Create a bin that represents how you want all your new bins to start out containing, then from the "Bins" menu, select "Save as template":
10 |
11 | 
12 |
13 | Perhaps you actually prefer a [super minimal boilerplate](http://jsbin.com/zunod/1/edit) and you could go further an predefine exactly which panels you want to see using the [account preferences](http://jsbin.com/account/preferences) (perhaps only the CSS & output panel for instance):
14 |
15 | 
16 |
--------------------------------------------------------------------------------
/content/help/delete-a-bin.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Delete a bin
3 | category: learn
4 | ---
5 |
6 |
7 | Deleting a bin is easy. Once a bin is deleted, all changes on that particular bin URL are ignored, and when you leave the browser window (or refresh) the bin is permanently lost.
8 |
9 | Delete can be accessed via the "Bins" menu, and select "Delete". Or via the keyboard using ctrl+shift+del.
10 |
11 | If you are the owner of the bin, you'll see this message and the bin is deleted.
12 |
13 | 
14 |
15 | If you don't have access, then you'll see this message:
16 |
17 | 
18 |
19 | ## When can you delete a bin?
20 |
21 | If you're registered and created the bin whilst you were logged in, you'll be able to delete any bin you own.
22 |
23 | If you created the bin anonymously, then you can only delete the bin whilst you can still write to the bin (as this is the only time that we know that you're the creator of the bin).
--------------------------------------------------------------------------------
/content/help/design-principles.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Design principles
3 | category: fix
4 | ---
5 |
6 |
7 | These are emerging from the ongoing process of designing and building JS Bin. They’re a work in progress.
8 |
9 | - **Visitors to jsbin.com get a cursor**
10 | Nothing obscures the tool – start typing to begin a bin.
11 | - **Support learning**
12 | - **Streaming by default**
13 | - **Anonymous first**
14 | Avoid requiring login.
15 | - **Open first**
16 | Design and development happens in public, unless there’s a good reason to go private.
17 | - **Respect ex-users**
18 | Don’t break links to their stuff. Never make public something which a user has set as private.
19 | - **Return is as it was left**
20 | When people return to an application or document, they expect it to be as they left it.
21 | *FIXME* this principle is currently ambiguous when it comes to the document affecting the application state. Where *possible*, implement this principle.
22 | - **Assert failure to communicate, not the lack of a network**
23 | An app can’t truly know that there’s no network, and people care more about the risk of data loss than the status of their network. This principle came from a discussion in [offlinefirst](https://github.com/offlinefirst/research/issues/10#issuecomment-34654691).
24 | - **Get users close to the code**
25 | While using an editor users shouldn’t be distracted by the design of the editor, so it should be as boring and similar in it’s look and feel to the OS as possible.
26 |
--------------------------------------------------------------------------------
/content/help/disabling-all-keyboard-shortcuts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to disable JS Bin keyboard shortcuts
3 | category: fix
4 | ---
5 |
6 |
7 | If you're finding there's issues with all or most of JS Bin's keyboard shortcuts,
8 | perhaps you're using a keyboard that we're not able to bind the shortcuts correctly.
9 |
10 | You need to open your browser's developer tools, and from the console run the
11 | following command:
12 |
13 | ```js
14 | jsbin.settings.keys = { disabled: true };
15 | ```
16 |
17 | Now hit refresh and JS Bin will not bind [keyboard shortcuts](/help/keyboard-shortcuts).
18 |
19 | Note that as we use [CodeMirror](http://codemirror.net) for the editor, and [Emmet](http://emmet.io/) these shortcuts may still be in place.
--------------------------------------------------------------------------------
/content/help/dropbox.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Dropbox integration
3 | category: pro
4 | video: "//www.youtube.com/embed/BZIMB6suEx8?rel=0"
5 | ---
6 |
7 |
8 | Linking to your Dropbox account [from your profile](/account/profile) will put every bin as a full HTML file in your Dropbox `Apps/jsbin` directory. This means you have a complete offline backup of your bins or any bin you edit.
9 |
10 | Note that only the latest revision is saved to your Dropbox (though we're considering adding support for revisions).
11 |
12 | You can see the simplicity of the Dropbox link in action below:
13 |
14 |
17 |
18 | Finally, *two way* syncing is being investigated and will be released to Pro users if possible.
--------------------------------------------------------------------------------
/content/help/embed-doesnt-load.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: What to do if your embed doesn't load
3 | category: fix
4 | ---
5 |
6 |
7 | There's a particular situations when your embedded bin is hidden then becomes
8 | visible. It's still showing Dave's logo because there was no known height to
9 | render to.
10 |
11 | The embed code does try to handle common cases, such as using embeds inside
12 | popular slide libraries like Reveal.js.
13 |
14 | However, if you are presented with the Dave logo, then you can send a signal to
15 | JS Bin like this:
16 |
17 | ```js
18 | [].forEach.call(document.querySelectorAll('iframe'), function (iframe) {
19 | try {
20 | iframe.contentWindow.postMessage('jsbin:refresh', '*');
21 | }
22 | });
23 | ```
24 |
25 | This will tell JS Bin to refresh it's contents, which will cause the panels to
26 | redraw and appear if you're seeing this issue.
--------------------------------------------------------------------------------
/content/help/experimental-features.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Experimental Features
3 | category: pro
4 | ---
5 |
6 |
7 | *Updated: 2016-08-02*
8 |
9 | Experiments are beta features available to [pro users](/upgrade). We first release our experiments to our alpha users (core team and a small collection of industry experts), then the features that are stable enough are moved to beta where you can access them if you choose.
10 |
11 | Importantly, some features may never make it to production and equally may be buggy.
12 |
13 | This document will change over time as feature change.
14 |
15 | ## Experiential beta features
16 |
17 | To enable experiments head to your [profile](/account/profile) page and check the "Enable experiments" box.
18 |
19 | ### Better mobile support
20 |
21 | Work has been put into support a mobile design from as early as 2014, but the implementation was never developed, until now.
22 |
23 | The mobile design can be seen in this demo video, you just need to enable experiments and view JS Bin on a mobile device. The UI is a little different and it's still a work in progress, but do check it out:
24 |
25 |
26 |
27 | ### API
28 |
29 | JS Bin's read/write API is currently under the experiments.
30 |
31 | - `DELETE /api/$bin/$snapshot`
32 | - `GET /api/$bin/$snapshot`
33 | - `POST /api/save` new bin, accepts JSON object with `javascript`, `html`, `css` and `settings` (object)
34 | - `POST /api/$bin/save` create a new snapshot
35 | - `GET /api` lists all bins
36 |
37 | *Further documentation to come.*
38 |
39 | To make a request, first you need the [API token for your account](/account/profile) or to generate a new token:
40 |
41 | 
42 |
43 | To make the request, the token must be included in the `Authorization: Token $token` header:
44 |
45 | ```shell
46 | curl -X "GET" "https://jsbin.com/api/" \
47 | -H "authorization: token 51af795cf1a606fe2e19d8c77bff3cb866f98d16" \
48 | -H "content-type: application/json"
49 | ```
50 |
51 | JS Bin will will respond with `200 OK` for successful requests, and `401 Forbidden` for unauthorized.
52 |
53 | ### Fine grain control over bin headers
54 |
55 | The infocard (that appears on the editor at the bottom right) has been upgraded to include the ability to manage the title, description, status code and headers for the bin. Useful for mocking response handlers with different statuses (like a 404 or 500) or setting a custom content type or setting a CSP header.
56 |
57 | 
58 |
59 | ### More layouts
60 |
61 | JS Bin's panels can be pre-arranged in a number of different orientations. Available from the [preferences](/account/preferences) under "Layout" in the Panels section. There is also an [open issue]( https://github.com/jsbin/jsbin/issues/2007) that proposes to make this control easier to access. So please do get involved if you have ideas.
62 |
--------------------------------------------------------------------------------
/content/help/export-gist.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Gists: how to export to a gist'
3 | category: teach
4 | ---
5 |
6 |
7 | It's easy to [import gists](/help/import-gists) and it's easy to export to a gist from JS Bin:
8 |
9 | 
10 |
11 | The functionality is available regardless of whether you've linked your Github account or not. However, if you link your account to Github, then the exported gist will be linked to your Github account. If not, it will be create as an anonymous user on Github.
12 |
13 | After selecting "Bins" menu, select "Export as gist" and you'll be notified once the export is complete:
14 |
15 | 
--------------------------------------------------------------------------------
/content/help/faq.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: FAQ
3 | category: learn
4 | ---
5 |
6 |
7 | ## How long are bins kept for?
8 |
9 | They're kept indefinitely. In JS Bin's early life, back in 2008, we removed them after not being seen for 3 months, but that's long been removed. Bins are permanent.
10 |
11 | ## How can I clear the console?
12 |
13 | Very simple: `ctrl+l` from any panel, or using code: `console.clear()`.
14 |
15 | ## Can I run a Gist in JS Bin?
16 |
17 | Funny you ask! Absolutely you can - just save the gist in Github, and either using the gist to [JS Bin bookmarklet][1], or change the url from [