Live Coding JS

&

Light Table IDE

MeetupJS Singapore 5 Aug 2013
Joshua Koo
(Skip to the last slide for links)

Outline



  1. Intro
  2. Demo
  3. Close



Creators need an immediate connection to what they're creating


Bret Victor (Inventing on Principle)




Proceed to Right Slide

(nothing much below)


Live Coding JS

&

Light Table IDE


Live Coding JS

&

Light Table IDE


Live Coding JS

&

Light Table IDE


Live Coding JS

&

Light Table IDE




Demo is over. Go to the next slide



Demo #0


Charts

(using threecharts)



Demo #1


(My JS1K) Game



Demo #2


Three.js 3D Particles



Demo #3


Realtime Web Application

(not part of zopim)

Fun Facts

  • LightTable is built with node-webkit (which is another cool project)
  • Raised $316,720 on KickStarter, then Funded on YC 
  • Created with ClosureScript for ClosureScript
  • Vim Bindings
  • Chris Granger, the guy behind Light Table IDE, worked on VS before this
  • Possibly inspired by Bret Victor's Inventing on Principle

Tips and Tricks

  1. Use Ctrl-Space for anything
  2. Use Cmd+Enter (or Ctrl-Enter) for Previews
  3. Cmd+Enter on HTML will launch the browser
  4. Separate css and js files from HTML to enable live coding
  5. Cmd+Enter on Variables/Functions/Block will eval section
  6. Move functions / variable scopes to a top level for hot code replacement / eval to work
  7. Use Tabsets to make your workspace neater
  8. Live coding also works with NodeJS and ipython processes



A large fraction of the flaws in software development are due to programmers not fully understanding all the possible states their code may execute in.


John Carmack on Functional Programming




Thoughts, Comments, Questions?



Thank you!

zz85nus@gmail.com

joshuakoo.com


Links

Official Light Table 

Blog, Docs and Videos on Light Table

Bret Victor Inventing On Principle

John-Carmack on Functional Programming in C++ 


Live Coding JS&Light Table IDE

By Joshua Koo

Live Coding JS&Light Table IDE

Slides for the intro / demo about Live Coding JS with Light Table IDE at talk.js. What you probably need to see is the last slide.

  • 5,229