Codebook

image

Codebook is an interactive programming environment I developed to make coding a little more fun by improving feedback and interactivity. I developed it in 24 hours for the HackU programming competition; it won first place. Codebook is an implementation of an idea from a fantastic talk by Bret Victor titled “Inventing on Principle”. Bret was kind enough to give CodeBook his blessing and let me post my implementation and it’s source.

You can play with Codebook, or check out its source on Github; please help make it better!

More after the Jump…

Codebook is a programming environment for javascript, written in javascript. It updates the running program in realtime each time the user makes edits. This technique lets you can see bugs appear as you write them. 

There have been several implementations of Bret’s idea since his talk went viral, however mine is unique in that it is the only 3rd party implementation I am aware of that has the canvas inspection feature. This feature highlights the line of code responsible for drawing the element your mouse is hovering over. You can try it out by clicking the inspect button and hovering over the canvas. It’s not the ideal UI for the feature, but, hey, I made this in less than 24 hours. 

I  put a lot of effort into making Codebook work for animated projects, such as games or moving art pieces, like the default code you see when you start Codebook. The big problem with this lies in the fact that variables, like as player position, change during runtime and recompiling would reset the variable back to its default value. To the user this would appear as if everything were jumping around the screen as they typed. The solution to this is to cache variable state before recompiling and then reinstate the values after the code has been compiled. It can be tricky to detect which variables to cache since Javascript’s variables are created in the global namespace by default. I haven’t seen any other implementations besides Bret’s that do this; please let me know in the comments if there are others.

Codebook takes advantage of web workers to process the user’s code in JSLint, an excellent code quality tool by Douglas Crockford. This allows the browser to remain responsive by parsing the code string in a worker thread. An added benefit of parsing the user’s code is that I can avoid submitting faulty code to the browser that would ordinarily break the preview window on the left.

Tags: Projects