= ''= '//learn.jsbin.com/'The JS Bin Blog//jsbin.com/blogLive reloading CSSLive reloading CSS

Due to a few recent optimisations in the JS Bin rendering logic, we now have live reloading CSS in the editor.

This means that when you change any content in the CSS panel, as always, the output is updated in real time, except now only the CSS will change.

So any JavaScript or existing DOM state will remain in it's current state and your styles will change. This also applies to any of the CSS processors, such as Sass, SCSS, Myth, etc.

You can see a short demo below - note that the JavaScript canvas animation continues to run and the counter increases:

Technical behind the scenes

This change is due to a small optimisation I made to JS Bin's rendering. We use promises under the hood, but before we would always create a new promise for all the panels when any panel changed.

Now the code will only re-render the promise of the focused panel. Since you can call the .then on a fulfilled promise over and over, it allows me to re-use the previously rendered promises.

The two benefits are that it was easy to add live reloading of CSS, but also live rendering is also now faster, as there's less work for your browser to do.

]]>
Sat Jul 04 2015 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/live-reloading-css//jsbin.com/blog/live-reloading-css
SSL now available to allSSL now available to all

As the web moves towards using HTTPS everywhere, JS Bin has moved SSL from being a "pro only" feature to making it available to everyone as of today.

SSL for all

This means that you can now swap HTTP for HTTPS and JS Bin will load. Remember there are considerations with SSL so if you're using HTTPS and the content doesn't load, it's likely there's an HTTP based script in there somewhere.

If you're stickler for security, registered users can opt-in to default to SSL via the account preferences - which means whenever you visit a JS Bin edit page, you'll be put on HTTPS.

You do need a pro account to embed bins over SSL, and this will remain a pro feature.

What this does mean is that I've started to lay the foundations to add offline support via Service Worker - and pro users, I have something new for you in a few days too - so stay tuned!

Google's 203 on HTTPS everywhere

I also highly recommend checking out Jake & Paul's 203 conversation on HTTPS everywhere:

]]>
Sun Jun 21 2015 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/ssl-for-all//jsbin.com/blog/ssl-for-all
A change to the way our URLs workA change to the way our URLs work

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.

In short

  • Revisions are referred to as "snapshots".
  • Snapshots (the numerical identifier) only appear in the URL when take a snapshot (and want to share that snapshot).
  • The latest version is the default (i.e. without a number in the URL).
  • The share menu has been updated to be simpler, whilst also more powerful.

Revisions are now called snapshots

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

So we've changed this all to read as a "snapshot".

A snapshot is a static moment in a bin's lifetime. The shortcut is ctrl+ s to create a snapshot of the current code.

Snapshot numbers in URLs

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.

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.

Sharing simplified

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

New share menu

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.

Codecasting by default

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

Although the old /watch URL will still work, you can share the regular /edit URL and this has all the code casting built in.

]]>
Tue Jun 16 2015 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/urls//jsbin.com/blog/urls
Asset uploads & oembedAsset uploads & oEmbed

We said we'd be working on more pro features, and we are. Also, since we're open source, this awesome stuff happens from time to time: oEmbed as a community submitted feature.

Pull request that landed oEmbed

Asset uploads

As of today, I've released the asset upload feature to all existing Pro users. Simply drag & drop your assets into JS Bin and it'll upload instantly and insert an image tag with your newly uploaded asset.

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.

To manage your assets, head over to the assets account page and you can delete files and check your usage.

So what are you waiting for? Support JS Bin's continued development and go pro today.

You can see a demo of upload in action below:

oEmbed

Thanks to an awesome (and relatively simple) pull request, JS Bin now also supports oEmbed for rich content - allowing you to oEmbed the embed view of your bin.

A simple call to http://jsbin.com/oembed?url=http://jsbin.com/fajac/3 (the Dave's demo page) yeilds the following JSON:

{
  "type": "rich",
  "version": "1.0",
  "title": "JS Bin",
  "url": "http://jsbin.com/fajac/3/edit?html,output",
  "width": 640,
  "height": 480,
  "html": "<iframe src=\"http://jsbin.com/fajac/3/embed?html,output\" width=\"640\" height=\"480\" frameborder=\"0\"></iframe>"
}

And just like that, JS Bin links posted in Gitter (the awesome chat client) pulls in a live embeded bin.

]]>
Wed Feb 04 2015 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/asset-upload-oembed//jsbin.com/blog/asset-upload-oembed
Protecting you from yourselfProtecting you from yourself

JS Bin has recently had some subtle changes that help protect you from bugs in your own code.

Crash protection

Although we have loop protection in JS Bin, it's entirely possible that your JavaScript might side-step our protection, and crash the browser anyway.

If that happens, JS Bin will automatically disable the live JavaScript rendering when the page is refresh. This means that HTML & CSS is still live rendered, but the JavaScript waits for you to click "run with JS" (or use the ctrl+return shortcut).

Automatically disabled

Loop protection

We've long had loop protection (video) in JS Bin which meant if you accidently wrote an infinite loop, JS Bin would quietly exit out and warn in the browser console.

To disable the loop protection: add the following in your JavaScript:

// noprotect

Now you'll see a warning either in the footer of the JavaScript panel, or in the gutter (if you have gutter warnings enabled in your preferences).

Loop protection in JS Bin

We've also made the loop protection module available in our git repo under MIT, so you're welcome re-use it in your own projects.

]]>
Fri Aug 08 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/protection//jsbin.com/blog/protection
Announcements: Pro & ProcessorsAnnouncements: Pro & Processors

The last few weeks we've all been busy on that last stretch of work, that last 5% of work that always eeks itself out to be longer than you expect.

But now, we're live and two huge updates for you: Pro and processors.

Pro

We've been working on Pro accounts for the last 6 months (amongst a lot of other work) and our initial offering is now live.

Dave loves you, because you're a pro

To upgrade to pro, first you'll need a free account, then head to the upgrade page. Pro accounts are available monthly or yearly subscriptions currently offering 2 months free.

By upgrading to Pro accounts, your contribution helps support JS Bin as a continued open source project. Plus, you'll have access to private bins, dropbox support, vanity URLs and more.

Processors

The biggest news is that Sass & SCSS both with Compass and Bourbon support has landed. Also, we've restored Stylus, updated LESS and added Myth to the CSS processors. Full specifics on versions are also available.

Processors on JS Bin

In keeping with JS Bin being open source, our processor server is also open source, found under Pennyworth.

You can use Pennyworth for your own project if you want "Processors as a Service", or perhaps extend it to be a CLI tool, or a sublime plugin? It's online, documented and available under MIT.

So for forth and hack, learn, fix and teach!

Totally aside

With all the seriousness aside, you got to take a break, and frankly, this video sours into amazing at 2m49s! Enjoy. This guy is a genius.

]]>
Thu Jul 24 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/pro-processors//jsbin.com/blog/pro-processors
TWDTW #11: A week of securityTWDTW #11 - A week of security

This last week has had a particularly strong focus on security. Some of these changes might also have a direct impact on the way you use JS Bin.

Lint all the things!

After last week's release of JSHint setting control, Giulia released the new HTML, CSS and CofeeScript linting control. All available under the preferences and all of them take a JSON object to control your defaults.

The error reporting has also had an upgrade, so you can set if you want errors in the footer of the panel, next to the line or under the line - or even all three!

Example of full linting options in editor

Limited full output for anonymous bins

If a bin is created by an anonymous user, the full output (that is: with the JS Bin editor stripped away) is only available for 90 minutes after creation. After which the URL will redirect to the editor view.

If you're (freely) registered anyone can always view your full output. This change applies to all anonymously created bins as of around July 3, 2014 at 4pm GMT.

JS Bin has long been a target for spam and phishing and this is first change that would outwardly impact our users. After speaking to many of you, and taking your feedback, I feel like this change is the right balance between starting to address the issue, but also maintaining flexibility for those of you who use JS Bin for teaching.

General security

We've updated our SSL certificate for another 4 years until 2018 and recently closed latest openssl security issue (which you should read up on if you manage servers).

There was also an issue reporting that the jsbin.state and user object could be accessed, which has been also closed. The impact of which is that JS Bin can't be set in an iframe anymore but of course you can still embed (and if you happen to point an iframe to JS Bin, it'll automagically switch to embed mode for you).

Finally, if you're security concious, we'll be adding SSL for all of JS Bin for pro users as a configurable preference (you just need to make sure your external assets are protocol relative because you can run into trouble):

All of JS Bin under SSL

]]>
Wed Jul 09 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/security-limited-output//jsbin.com/blog/security-limited-output
TWDTW #10: JSHint, line highlighting and update on proTWDTW 10 - JSHint, line highlighting and Pro update

Today we pushed a fairly hefty release containing a few PRs to update libraries, but also a few extra features for all our users.

JSHint

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, you can now configure your default JSHint preferences:

/images/twdtw/10/jshint-prefs.png

Line highlighting

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

Now when you click in the gutter, it'll highlight that line for sharing. You can also shift+click to select a range:

/images/twdtw/10/line-highlight.png

An update on Pro

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.

Tweets like this is why we need you to go pro:

Best @CodeClub ever! @js_bin you are a life saver... – Oli Evans on Twitter

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.

So tell your friends, your co-workers, help support JS Bin and look out for the release coming very soon.

]]>
Fri Jun 20 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-10-jshint-linehighlight-pro//jsbin.com/blog/twdtw-10-jshint-linehighlight-pro
New processors. We need your inputNew processors. We need your input

We're doing the final testing on our new processor code. Sass and SCSS have been in high demand for a long time (#176), which has driven this rewrite (#1229).

But we now need input from you.

Compass, Bourbon, et al

Currently our thinking is this: we'll run both Sass and SCSS using the Compass compile tool. So if you want to include Bourbon, you just import it.

I'm not particularly a pro user of CSS preprocessors, so I'm not 100% sure if this what people expect or not. I like that everything is just there, and you don't have to mess around selecting the right config option in your bin.

A question to you: what extensions would you want to be available?

A nice benefit to our system, is that imports from one bin to another just works. The same way as being able to reference the JavaScript from one bit to another to create Ajax requests.

Other processors

We're in the process of documenting how you add more processors, and currently support (in our rewrite):

  • JavaScript: CoffeeScript, React (JSX), Traceur, Processing, TypeScript
  • CSS: Less, Stlyus, Sass, SCSS
  • HTML: Jade, Markdown

A question to you: are there others that we should add?

I've thought about adding sweet.js, and equally I can see how all the new processors might just spiral the options out of control!

JS Bin's ethos is that the processor should work in the client side, but I've made an exception for Sass and SCSS (due to the sheer demand), so I'm willing to make exceptions for other processors if there's the demand.

Get yourself heard

This is your oppotunity to tell us what you think. What's important to you and whether there's something obvious we're missing.

Either comment below, or comment directly on the pull request for the feature.

]]>
Tue Jun 17 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/new-processors//jsbin.com/blog/new-processors
TWDTW #9: Tweaks and maintenanceTWDTW #9 - Tweaks and maintenance

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. Go and have fun with it!

The small things that matter

We're often releasing multiple times throughout the week with small bug fixes and tweaks, a few that you might have noticed:

  • Github changed their URL format for gists, so we fixed gist import (which was broken for a short time) #1507
  • Logged in users can archive using keyboard shortcut ctrl+Y #1000
  • All the JS Bin keyboard shortcuts are documented in detail
  • We changed "Bins" to "File" in the top menu #1414 (more on why in a later post)

Spread your love

We love when you help us improving JS Bin by raising issues, bugs and pull requests, and we love it just as much when you tell us that you love JS Bin:

Why I Love JS Bin by Jimmy Lauzau @jimmay5469

Where Jimmy talks about using the Ember branded version of JS Bin, his preferences and default templates.

Totally aside

We like the classics and we like geeky strange ideas, so what's better than Star Wars, re-edited in alphabetical order..?

]]>
Mon Jun 09 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-9-tweaks-maintenance//jsbin.com/blog/twdtw-9-tweaks-maintenance
TWDTW #8: SVG support and settings liveTWDTW #8 - SVG support and settings live

With Giulia back from holiday and Remy easing back into work, the Left Logic offices have been a bit more lively, and pushing a few more bits to production.

SVG Support

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 using JS Bin:

<img src="http://jsbin.com/gecew.svg" alt="Source: http://jsbin.com/gecew/edit">

Source: http://jsbin.com/gecew/edit

Thanks to @jorgeATGU for the SVG madness!

The feature request came through from Emil on twitter, suggesting that the .svg extension serve up the right headers. So we opened a feature request, and one simple change later it was live.

Emil also blogged about his own workflow with JS Bin and SVGs. It's that easy to help make JS Bin a better product.

User settings live

/images/twdtw/8/settings.png

We've spoken a fair bit about the upcoming user settings in JS Bin and today we've started our staggered release.

We're releasing to 10% of users (using our feature flags) 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).

Want a JS Bin sticker? At BACON conf?

I'll be attending the BACON conference and I'll be armed with a swathe of JS Bin stickers, I look pretty much like my avatar, so hit me up if you want one for your laptop!

Totally aside

Myself and Giulia were in tears this week watching this clip over and over and over: Nick Cage knows how to dive:

]]>
Thu May 15 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-8-svg-settings//jsbin.com/blog/twdtw-8-svg-settings
How I run JS Bin in Zen mode!How I run JS Bin in Zen mode!

Since using JS Bin, I've discovered a number of ways to customise it to my liking, and I wanted to share how I'm running in Zen mode!

Zen mode

Vim mode

jsbin.settings.addons.vim = true;

Since we upgraded CodeMirror to version 4, we've added a lot of addons for CodeMirror, including Vim mode, which you can turn on by running the above command in the console. Just note that not all of the Vim functionality comes with the plugin, visual block mode, for example, doesn't work. But a lot of the Ex commands are there, including search and replace, which is great, as JS Bin doesn't support this in normal mode.

Custom theme

jsbin.settings.editor.theme = 'solarized light';

Solarized is a beautiful theme that I use everywhere (Terminal and text editors). We support both light and dark solarized themes, I use the light theme in the browser.

Default template

Default templates in JS Bin really make it your own, you can add default content to all three of the input panels, so if you always use jQuery, you can have JS Bin always include it for you. My default template is pretty simple. Our help articles have a post on default templates.

HTML

My default html panel just adds two metatags for webapps, and a custom title.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>@allouis_</title>
  </head>
  <body>

  </body>
</html>

CSS

The default css panel just contains a basic reset.

html, body {
  margin: 0;
  padding: 0;
}

JavaScript

This is my favourite of the panel templates, a single line, it just clears the console everytime the code is run!

console.clear();

Hidden toolbar

ctrl+shift+\

The hidden topbar lets me really focus on the code, most of the items in the menus can be accessed via keyboard shortcuts and for everything else, when I do need it, the topbar pops open when you hover near it.

Keyboard shortcuts

ctrl+enter

My favourite JS Bin keyboard shortcut, this command will force a re-render on your output, on all devices, so it's pretty handy for mobile testing. It also runs all your JavaScript so if you just have the console open, you can use it to run your code each time you make changes. Here is our complete list of keyboard shortcuts

Panel configuration

I like to place my console panel underneath my JavaScript panel, you can do this kind of panel configuration with all of the panels in JS Bin like so:

Panel Moving

Do note, that currently panel configuration won't save so you'll need to do this each time you visit.

]]>
Fri May 09 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/my-zen-mode//jsbin.com/blog/my-zen-mode
TWDTW #7: SCSS, Compass and searchTWDTW #7 - SCSS, Compass and search

Whilst Fabien continues with Pro user integration and Giulia goes on holiday, I've snuck out of paternity leave and cheekily completed a bit of dev.

SCSS, Compass and processors total upgrade

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.

In the same vein as Jobsworth (our zeromq based bin backup server), I've created Pennyworth: a server for running processors and spitting out rendered CSS, JavaScript or HTML.

There's a simple markdown module, but more importantly to user demand, there's modules for SCSS and SCSS with Compass (and more being adding before we go live).

Here's a couple of shots using a couple of Ana Tudor's excellent SCSS demos:

SCSS demos

Once I'm back from paternity leave (in 2 weeks) I'll be focused on releasing this entirely.

Help & blog search

This part of JS Bin (the blog and help) are statically generated using Harp, which makes search a little tricky (and bin searching is also on the roadmap, but a separate issue for now).

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.

Search example

Totally aside

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?

Huffington Post rescues us from a hard decision:

TV brain melt

]]>
Fri May 02 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-7-processors-search//jsbin.com/blog/twdtw-7-processors-search
TWDTW #6: Bin files, Dropbox, Pro AccountsTWDTW #6 - Bin files, Dropbox, Pro Accounts

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 files from bins and we're going to start experimenting with two-way syncing with Dropbox

Bin files

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 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 preproccesors. This will eventually allow files in this format to be dropped into JS Bin and populate all the panels, cool!

Dropbox

Remy 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:

Pro Accounts

Our pro account offering is being polished for when Remy returns to the office and we can release them, Danny 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!

Totally aside

Also, a very big congratulations to Remy and Julie - they've had a beautiful baby girl :D!

]]>
Fri Apr 25 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-6-syncing-pro-accounts//jsbin.com/blog/twdtw-6-syncing-pro-accounts
TWDTW #5: Heartbleed, Settings, User BackupsTWDTW #5 - Heartbleed, Settings, User Backups

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.

Heartbleed, no more

The Heartbleed bug definately took it's toll on Remy as he patched our OpenSSL, reissued SSL certificates and fixed weird MySQL issues, but we were no longer vulnerable!

This, from xkcd, does a good job of explaining the issue:

Are you still there, server? It's me, Margaret.

JS Bin settings & preferences

Giulia has been continuing work on our new account pages, with a new page for managing your default preferences, such as your starting open panels, templates, processors and so on.

We're hoping to release this to you all next week.

Preferences page

User backups

For the past couple of weeks, I've been working on a new part of JS Bin called Jobsworth. This is a task manager that communicates using zeromq 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).

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.

Totally aside

If you've not seen the oscar winning Gravity, well, you should, but this is Gravity for those of you without much time on your hands - enjoy!

]]>
Fri Apr 11 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-5-settings-dropbox-heartbleed//jsbin.com/blog/twdtw-5-settings-dropbox-heartbleed
Heartbleed and JS BinHeartbleed and JS Bin

If you've not heard about Heartbleed, means that potentially all your passwords can be compromised. This isn't a bug that's specific to JS Bin, it affects most sign in forms that go over HTTPS. Yes, it's that scary.

Note that if you registered with JS Bin after 9-April 2014 10pm UK time, then you won't be affected, but I still strongly recommend you familiar yourself with the issue.

Here's what we've done:

  • We've patched all our versions of OpenSSL
  • We've re-issued our SSL certificate for our login and register
  • We're recommending that you change your password

We can't control when the old SSL certificate gets revoked (serial number 842265), but we've already seen people on the new certificate (serial number 1169237). You can check you have the updated certificate by clicking on the "padlock", and digging into the certificate details, where you should see the issue "Not Valid Before" date, which will be 8 April 2014:

/images/ssl-cert.png

Note that if you use Chrome, you'll also need to ensure your browser checks for revoked SSL certificate by default:

/images/chrome-revoke.png

And importantly, what you'll need to (or I'm suggesting you) do:

  • Change your password
  • Log out and log back in again (to clear your session based on the old SSL certificate)
  • Read up and share what you learn about Heartbleed

We could (technically) reset everyone's password, but it's not that simple for us to code up, and really the complexity is in the user flow, and getting it right. So I decided against it in the end.

Some good resources I've found are:

]]>
Thu Apr 10 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/heartbleed//jsbin.com/blog/heartbleed
TWDTW #4: Tern live, and our upcoming Pro featuresTWDTW #4 - Tern is live

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.

Tern

A few weeks ago we showed off the demo of Tern, and now it's live. You need to manually turn it on via the addons:

jsbin.settings.addons.tern = true;

...then refresh and Tern is enabled in the JavaScript panel.

Upcoming Pro feature: vanity urls

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.

This means your shared URLs will include your username to your editable bins, like http://rem.jsbin.com/kuzef/2/ and more importantly, you can publish to your vanity url, as so: http://rem.jsbin.com.

The vanity URL will also support pointing your own domain directly at JS Bin (like code.rem.io).

Also in the works is Dropbox support (for your own copy of you bins but also quickly embedding external resources). More on that soon.

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 so you're ready for when it lands!

Totally aside

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

]]>
Mon Apr 07 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-4-tern-pro-features//jsbin.com/blog/twdtw-4-tern-pro-features
TWDTW #3: CodeMirror, User settings, HacksTWDTW #3

Last week we rolled out SSL support 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.

CodeMirror 4

CodeMirror 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):

/images/twdtw/3/cm4.gif

But isn't setting these sweet addons 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.

User Settings

But take a look:

/images/twdtw/3/settings.png

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.

The Autoprefixer hack - did you know...?

Last Friday I saw a tweet asking for Autoprefixer support (which coincidently landed in our friendly neighbour CodePen about two hours after we replied with...): JS Bin is extremely maluable.

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.

Then in the afternoon Giulia 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.

Totally aside

Fabien found and shared this site 8tracks that you can give it a tag, say "programming", and you can listen to tracks to suit that mood. So get your groove on.

/images/twdtw/3/dance.gif

]]>
Tue Apr 01 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-3-codemirror-settings//jsbin.com/blog/twdtw-3-codemirror-settings
SSL: A secure loginSSL: A secure login

Up until now all of JS Bin has been served over standard HTTP. This is fine for most of the site, however we've decided to upgrade the login and register (and eventually the account settings) pages to use SSL (i.e. encrypted data transmission).

This means your email and password are always sent over a secure connection, keeping those details safe.

If you're already logged into JS Bin you'll notice that the next time you visit you'll recieve a message and be prompted to sign in again, just the once, using the newer, SSL login.

If you have any questions, or find any problems with the process, please submit an issue on github.

Possibly related Why don't we use SSL on all of JS Bin?

]]>
Wed Mar 19 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/ssl//jsbin.com/blog/ssl
TWDTW #2: Addons, Collaboration, HardwareTWDTW #2

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 and maybe even a t-shirt or two.

User enabled addons

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

I've releases a dev feature (i.e. there's no interface, yet) 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:

jsbin.settings.addons.fold = true;

Gets you code folding:

/images/twdtw/2/fold.png

Or maybe you're a Vim beast, easy:

jsbin.settings.addons.vim = true;

Addons will be documented soon, but there are details in the pull request: #1273.

First pass at collaboration

Giulia took together.js and implemented under an experimental flag.

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.

As it turns out, this already affects all the sites that already use together.js with CodeMirror (the embedded editor that JS Bin uses).

So we're looking at whether we fork together.js and send a pull request to fix this, or go down the share.js route (which I personally think is highly likely for a few other reasons).

A hardware retreat

Well, we didn't actually leave the office, but we did take a complete break from coding on JS Bin to experiment with Arduinos, Sparks, soldering irons, Johnny Five and lots of LEDs.

/images/twdtw/2/hack.jpg

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!

Out and about

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 and LNUG. So come grab me!

Totally aside

This shouldn't be funny, but it's utterly hypnotic...

]]>
Fri Mar 14 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-2//jsbin.com/blog/twdtw-2
TWDTW #1: Sass, Tern, SecurityTWDTW #1

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.

We're working on local branches of JS Bin with a few cool features.

Sass

There's been tons of demand 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 and a few hours of hacking, JS Bin has a development branch with Sass (or more specifically SCSS) in a PR feature/scss (see Rodney Rehm's post on porting to sass.js).

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

/images/twdtw/1/sass.png

(Demo pitched from red-team-design.com)

Tern

I'm proud to say that my company, Left Logic was the first to back big behind the Tern project last year. And this week Giulia has been adding support to JS Bin.

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

/images/twdtw/1/tern.gif

Security

Finally, Fabien 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).

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:

/images/twdtw/1/login.png

SSL is likely to land next week, and this will also open the door to editor settings and preferences - without having to open devtools to have on the console!

Totally aside

How seriously sweet is this!

And yes, I have actually asked myself: how could I get JS Bin to control a drone...insane, I completely appreciate.

]]>
Fri Mar 07 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/twdtw-1-sass-tern-security//jsbin.com/blog/twdtw-1-sass-tern-security
Welcome to the new help & blogWelcome to the new help & blog

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.

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.

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

It's our own fault, but this new area of JS Bin will be the home for all the 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.

There's a few ways you can keep track of what's going on:

Say Hello to the Team

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:

And an equal hello to all the contributors over the years.

What's shipped just recently

What we're working on

There's a slew of projects going on at the moment, and we'll be posting as progress is made:

  • Pro accounts and white-labeled version of JS Bin (see emberjs.jsbin.com for example) - get in touch if you'd like to enquire about this
  • Monthly competitions giving away stickers and pro accounts
  • A vastly better mobile experience
  • SSL for login
  • Sass & SCSS support
  • Timeline recording and playback
  • And a lot more

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?

– Remy

]]>
Thu Feb 27 2014 00:00:00 GMT+0000 (UTC)//jsbin.com/blog/welcome//jsbin.com/blog/welcome

Show your support

You should support JS Bin and upgrade to JS Bin Pro here

Comments

comments powered by Disqus