javascript,jsenvy,tutorial

JS Envy: Embed yourself

31 Jan , 2015  

Let’s face it, the best part of JS Envy is also the most basic part: the on-page console. To make it a little bit sweeter, now you can load just the console. Taking it a step further, this means you can embed just the console.

Just a Console

You can embed any type of environment you want with the JS Envy console. If you just want to drop a console on your blog to let your readers mess around with a concept you threw at them it is simple:

<iframe src="http://jsenvy.com/console.html" width="100%" height="200"></iframe>

That yields this:

Use the share button, located right next to the link button, on the on-page console to quickly grab the embed code for your current environment.

Embed Button

Use this button to grab the embed code for your current environment.

Load your Library

Maybe you wrote some awesome library and what to provide a console along side the documentation on your website. Make it rain iframes my friend:

<iframe src="http://jsenvy.com/console.html#libs=http%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Flodash.js%2F2.4.1%2Flodash.min.js" width="100%" height="200"></iframe>

Now you can play with lodash:

Put on a Show

A final case may be something like a tutorial. Don’t just write some lame code with pretty syntax highlighting which your reader then has to go evaluate on their own, they are far too lazy for that anyway. Do it for them:

<iframe src="http://jsenvy.com/console.html#libs=http%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Flodash.js%2F2.4.1%2Flodash.min.js#logs=var%20values%20%3D%20%5B1%2C2%2C3%2C4%2C5%5D%2C%2Cfunction%20filter(value)%20%7B%20return%20value%20%3C%203%3B%7D%2C%2C_.filter(values%2C%20filter)" width="100%" height="200"></iframe>

Then just sit back and watch the show:

The best part is that now you know how to use lodash’s filter method.


Leave a Reply