Live Coding with JavaScript
I have been messing around in JavaScript and d3.js a bit more than usual lately.
In the past my JavaScript prototyping environment was a collection of html/js/json files on my local disk and a basic HTTP server (like python SimpleHTTPServer). I would edit files and reload reload reload reload. Very tiresome. Not very "2014" if you ask me.
Well I have seen the light, there are a few ways to skin this cat and get into a more robust and interactive development environment.
1) JSFiddle (and many others like it)
Not necessarily a Live Coding environment like options 2 and 3 below but a place to barf out some code and give it a try. It is also helpful for sharing code if you need some help or want to demonstrate something quickly.
There are other websites like this, some are reviewed here.
2) Light Table
This is an editor that you run on your Windows, Mac or Linux workstation. It interfaces with a browser running on your machine and injects code changes directly into your browser upon your command. No page reload is necessary.
3) Tributary.io
Tributary.io is a a powerful online environment for experimenting with code. This is like JSFiddle on steroids. Not only can you assemble a working visualization with built-in access to d3 libraries, you have the ability to incorporate external libraries as well. As you type the JS code is evaluated. When you finish typing valid syntax any changes will immediately be rendered on screen.
Another fantastic Tributary.io feature is the ability to 'scrub' any literal values in your code. You can click on a number in your code and a slider will appear over it. Slide to change the value of the number and also see how it affects the rendering immediately. Instant coding gratification.
A great intro video by the creator of Tributary is available here. It will seriously blow your mind. Lots more videos available here.
Visit http://tributary.io and get your hands dirty!
-Dave
Add new comment