Light Table - Embracing Abstraction

It's interesting that the author, who is speaking about things that were happening 20 years ago, graduated from college in 2008 (http://www.chris-granger.com/resume/) and thus 20 years ago he was likely a very small child.

This combination of lack of depth and yet grandeur is seen in other projects and is annoying because it means that one is forced to wade through a lot of noise to understand projects like nodejs, couchdb, etc. And it does the people who write like that a disservice. Rather then overselling their weak knowledge they should point out the cool stuff in what they are doing and let that speak for itself. It's counterproductive to pretend to be smarter than you are.

Even UML had support for PSM, PIM, etc.

Yes, get your history and citation right to avoid being flamed. But no, it didn't end with Smalltalk (or Lisp, or whatever) and we are not just going back to that.

In principle gdb could look at everything that's going on, but in practice doing so would (a) hit a bug in the compiler's debug output and fail, and (b) take forever for any program worth debugging.

--

So the first thing I thought we would do is create a little custom git widget that shows the files modified in our repository.

So we add a custom object.

And we're going to write some clojure script code just to hold the state of our (circle??) the git status

We just need a way then to get that

So we ask the server for it

And... here we're just creating some html representation of our list of files

And then when we save

We're going to make sure we update

So if we run this

We should see

Yes, there we go we have a list of modified files

We can add some css to make it look prettier

And now I can just move this wherever we want

I'll put it down here

And let's actually open a file and modify it and prove that our widget is actually working

So, we have server.clj here

And when I save it

Yes, there we go

It's changed

And if I remove that modification, then it goes away, great!

Then I thought we should do something a bit more interesting than that.

I've been working on a game with my little brother

So let's build an environment to play that game in and work on it

It's written in Javascript so we're going to need a canvas element

So that we can put the game on the canvas

Canvas by default isn't visible so you dont't see it immediately

So Let's give it a background, black just so we can actually see that we added something.

here we go

And we'll move this over to this this side so don't have it in the middle of our workspace

And that as well

Let's run the game to make sure this is all working as expected

There's the game

there is the javascript file

execute it

there we go

Now we have the game running, You can see I can play it here

You can move around, some little bad guy shooting me. Cool!

now I talked about being able to build, to bring your abstractions into the environment

Let's control the game from light table

I add another custom object

We're going to create start and stop buttons for the game

We start writing the clojure script here

we create a little function to create a button

That has a label and an action

And here is our init which just returns the html that we want it to to be represented as

And you can see after executing it you get a start and stop

Some css here , that's a little too big

Let's actually shrink the font size a bit

that's still too big.. 11 60

Great, now if I click stop, he stops moving there you go

And If I click start he starts moving again

And you can see what this init function is doing is calling our javascript code

Move this guy down here

So let's take this up a notch

Let's actually bring one of the abstractions from the game directly in.

So games are usually composed of entities that get drawn to the canvas

So let's create a list of all the entities

to do that

We need some state for our entities

And a way obviously to add and remove them

And then we need a representation of them in html

We have this little item function

We're setting our on-add and on-remove functions within our game to our add and remove

Execute this and

Do the magic of some data binding here

We'll see that

Every time something gets shot a new entity is added to the canvas

So if I shoot this guy, he actually explodes into a bunch of shrapnel

let me show this

there you go

so there is a bunch of shrapnel that's been added

And as it sort of fades away it goes away again

Cool!

So we've actually created a little environment for our game here

the whole thing was less than about 50 lines of code

And it was completely trivial to build

there you go!

Fun little way to show how

You can extend light table

You can see the results here http://www.universalsubtitles.org/en/videos/9Ws8B7yC3Fjl/en/... and you can also help make the subtitles better.

[edit: Just saw somebody else linking to this same site. Sorry.]

I believe this will help immensely when approached from the right side, e.g. projects split into separate components with each having its own IDE setup (world, if you may) developed from the ground up together with the component itself.