9.12: news.adds/cp4e/Code.org`Code Studio:
techcrunch.com:
Code.org Launches Code Studio,
A Toolset And Curriculum For Teaching Kids Programming
Rather than having kids pick up a language like Python
(as you would in a college or AP Computer Science class),
Code Studio teaches the underlying concepts in programming
through the composition of interlocking graphics,
a lot like MIT’s Scratch, though Code Studio uses HTML5
(so it can run in most browsers).
Showing posts with label cp4e. Show all posts
Showing posts with label cp4e. Show all posts
2014-12-31
2012-09-23
adde influenced by Bret Victor, Chris Granger
9.8: 9.23: adde/adde influenced by
Bret Victor and Chris Granger:
. Granger's write-up of Light Table
-- and the Victor video that inspired it --
have me wanting something new for adde:
. as it runs your code,
it opens all the files being called by main,
and also opens a simulation of the code
( some of that idea is already embodied
in the adda feature where all types
have an associated graphical image,
and you just have to start debug mode
in order to see the image of
every variable in main .
)
. once you get some working code,
it is constantly rerunning your test case
with every change to your code .
. so we get not only continuous testing,
but also continuous simulation of the testing;
and, of course,the simulation and the code are linked;
so, selecting one selects the other .
"(In light mode, Light Table lets you
see called functions not just by
highlighting their calls in your code,
but also by showing you their code to the side.
We shouldn't have to constantly
navigate back and forth to see this .
)
. this works for small files,
but for much larger ones
I would like a combination of this and
Apple's idea of being able to
open and close a file simply by
toggling the space bar .
. in my combination,
the main is opened on the left;
then for each file used by main,
it opens that file only partially,
just to show a thumbnail view of say 5 lines
to show the function's header info:
the signature and the summary string .
. when you click on the thumbnail, it opens fully,
when you arrow down, that full view is
filled with the next thumbnail's file .
. the programmability of this is important:
the layout editor should have a language for
describing not only how windows are arranged,
but also how they are behaving .
. the first time I had that idea
was wondering how to tell the editor
that we need 3 windows to be columns,
such that text being added
flows first into the first column,
with overflow going to next column, etc .
. we might have other behaviors,
so, how do we let the user design that,
and create a command for it ?
. in a composite doc' we have the choice of
whether regions overlap or not .
. when I open a thumbnail,
it covers other thumbnails,
but it doesn't cover other subwindows
like that of the simulation or the main text .
. an alternative behavior for a subwindow
is that instead of an open file
being allowed to overlap the thumbnails,
it pushes them aside,
and the region becomes scrollable,
so that I can see a stream of open files
mixed in with a stream of thumbnails .
. there are subwindows with dedicated purposes:
the project's folder system, the simulation,
the main, and the subprograms main calls .
. there are a lot of subprogram subwindows
so we can toggle them as all thumbnails,
all open, or opening only the
currently running subprogram .
. if your center of attention is not main
but something main called,
then you want main's region thumbnailed,
just like a stack of activation records:
closing your currently active file
means seeing the stack of thumbnails
that it jumped out from .
that of showing the activation stack:
we're showing not just the code,
but wherever there was a
variable name in the code,
now there is a named box with a value in it
-- and of course,
every var in the code is instantiated
so there are values at
every mention of that variable .
. variables should be
toggle-able between the image and code:
an array may represent a picture,
or a list of (rgb) color vectors .
. another dimension of toggling
is the outliner feature:
all code and values are {collapsible, expandable}
and you can do this symbolically too:
there are not only commands like close all,
but such things as:
open only what names match (this pattern) .
. watching the Granger video again,
I see he does automatic filing of functions:
you can start off in one editor window,
and then when we start code for a new function,
it buds into a new editor window too;
and -- my idea here --
when you have nested functions
then you should have nested editor windows,
and of course,
they can be resized with scrolling bars,
or made so control-arrows and page{up,down}
can do the scrolling .
. the outliner menu includes
several massive window controls;
eg, we can say:
recently used windows are 25 lines high,
or say:
all windows are 10 lines long until I
focus on it for a full view .
calltree:
. a primary feature seen from the vid,
is that when the side region is showing the
files that are called by the main region,
they become part of the debugger show:
ie, when you start launching main's test program,
the files to the side turn into instantiations of
the function`bodies that main enters;
so, -- my question here --
what should it do if you have recursions,
and multiple instances of a subprogram?
the 2 obviously possible behaviors are:
# show all instantiations;
# show the current instantiations .
. in the [show current] alternative,
as the new instance is created,
you see the new instance
overwriting the previous instance .
. after the instance is done,
it is re-overwritten by the prior instance .
. in the [show all] alternative,
we need to show a call tree
perhaps expressed as dots for each node,
and then you use [birds eye view]:
drawing a box around the part you want
or using the pinch gesture
on the part of the call tree
that you want to see thumbnails of
(thumbnails are opened in the usual way).
. from the call tree's [nodes as points] view
you can also use arrow keys to
turn nodes into files or thumbnails,
one node at a time:
up= parent node, down= 1st child node;
{right,left}= nearby sibling nodes .
. we can use the finder with opener, eg:
open all the instances of subprogram x .
Bret Victor and Chris Granger:
. Granger's write-up of Light Table
-- and the Victor video that inspired it --
have me wanting something new for adde:
. as it runs your code,
it opens all the files being called by main,
and also opens a simulation of the code
( some of that idea is already embodied
in the adda feature where all types
have an associated graphical image,
and you just have to start debug mode
in order to see the image of
every variable in main .
)
. once you get some working code,
it is constantly rerunning your test case
with every change to your code .
. so we get not only continuous testing,
but also continuous simulation of the testing;
and, of course,the simulation and the code are linked;
so, selecting one selects the other .
"(In light mode, Light Table lets you
see called functions not just by
highlighting their calls in your code,
but also by showing you their code to the side.
We shouldn't have to constantly
navigate back and forth to see this .
)
. this works for small files,
but for much larger ones
I would like a combination of this and
Apple's idea of being able to
open and close a file simply by
toggling the space bar .
. in my combination,
the main is opened on the left;
then for each file used by main,
it opens that file only partially,
just to show a thumbnail view of say 5 lines
to show the function's header info:
the signature and the summary string .
. when you click on the thumbnail, it opens fully,
when you arrow down, that full view is
filled with the next thumbnail's file .
. the programmability of this is important:
the layout editor should have a language for
describing not only how windows are arranged,
but also how they are behaving .
. the first time I had that idea
was wondering how to tell the editor
that we need 3 windows to be columns,
such that text being added
flows first into the first column,
with overflow going to next column, etc .
. we might have other behaviors,
so, how do we let the user design that,
and create a command for it ?
. in a composite doc' we have the choice of
whether regions overlap or not .
. when I open a thumbnail,
it covers other thumbnails,
but it doesn't cover other subwindows
like that of the simulation or the main text .
. an alternative behavior for a subwindow
is that instead of an open file
being allowed to overlap the thumbnails,
it pushes them aside,
and the region becomes scrollable,
so that I can see a stream of open files
mixed in with a stream of thumbnails .
. there are subwindows with dedicated purposes:
the project's folder system, the simulation,
the main, and the subprograms main calls .
. there are a lot of subprogram subwindows
so we can toggle them as all thumbnails,
all open, or opening only the
currently running subprogram .
. if your center of attention is not main
but something main called,
then you want main's region thumbnailed,
just like a stack of activation records:
closing your currently active file
means seeing the stack of thumbnails
that it jumped out from .
Granger's Code with a little illumination:
"( Here I find a bug where I wasn't passing x correctly.--. this is the same idea I just mentioned,
I type (greetings ["chris"]) and immediately see
all the values filled in
not just for the current function
but all the functions that it uses as well. )
that of showing the activation stack:
we're showing not just the code,
but wherever there was a
variable name in the code,
now there is a named box with a value in it
-- and of course,
every var in the code is instantiated
so there are values at
every mention of that variable .
. variables should be
toggle-able between the image and code:
an array may represent a picture,
or a list of (rgb) color vectors .
. another dimension of toggling
is the outliner feature:
all code and values are {collapsible, expandable}
and you can do this symbolically too:
there are not only commands like close all,
but such things as:
open only what names match (this pattern) .
. watching the Granger video again,
I see he does automatic filing of functions:
you can start off in one editor window,
and then when we start code for a new function,
it buds into a new editor window too;
and -- my idea here --
when you have nested functions
then you should have nested editor windows,
and of course,
they can be resized with scrolling bars,
or made so control-arrows and page{up,down}
can do the scrolling .
. the outliner menu includes
several massive window controls;
eg, we can say:
recently used windows are 25 lines high,
or say:
all windows are 10 lines long until I
focus on it for a full view .
calltree:
. a primary feature seen from the vid,
is that when the side region is showing the
files that are called by the main region,
they become part of the debugger show:
ie, when you start launching main's test program,
the files to the side turn into instantiations of
the function`bodies that main enters;
so, -- my question here --
what should it do if you have recursions,
and multiple instances of a subprogram?
the 2 obviously possible behaviors are:
# show all instantiations;
# show the current instantiations .
. in the [show current] alternative,
as the new instance is created,
you see the new instance
overwriting the previous instance .
. after the instance is done,
it is re-overwritten by the prior instance .
. in the [show all] alternative,
we need to show a call tree
perhaps expressed as dots for each node,
and then you use [birds eye view]:
drawing a box around the part you want
or using the pinch gesture
on the part of the call tree
that you want to see thumbnails of
(thumbnails are opened in the usual way).
. from the call tree's [nodes as points] view
you can also use arrow keys to
turn nodes into files or thumbnails,
one node at a time:
up= parent node, down= 1st child node;
{right,left}= nearby sibling nodes .
. we can use the finder with opener, eg:
open all the instances of subprogram x .
CP4E hero Bret Victor
9.8: news.adde/light table and bret victor:
. Bret Victor's video has a cp4e mission
and shows off the new tools he's built
that help us develope our creative ideas .
. amazing what he's done;
he has an IDE where you can click on any var,
and it turns into the widget needed to adjust it;
but then it's also
re-running your code after every change;
so, if your program generates a picture,
his scripts are custom GUI's for
painting particular classes of pictures
where you paint by both coding
and by adjusting code parameters
-- all by GUI! (as you do edits,
the page is sprouting widgets to help you).
. when you slide a for-loop var,
the program is re-running for every
value in the for-loop's change range
which is causing an animation effect
-- a new way to experiment with video .
. even more amazing,
this IDE creates a complete mapping
between the subpicture being drawn
and the line of code that drew it;
so clicking in the picture
causes the editor to highlight a line of code,
and conversely, selecting a line of code
highlights the subpictures it drew .
. now, speaking of animation,
the next thing needed for visualization
is to create trails for specific subpictures,
so that as you modify a parameter,
it immediately shows how that is affecting
the path of the trail .
. first he's pausing at the
end of the interesting time interval,
then he's using rewind to get to the
beginning of his time interval of interest;
and finally when he's adjusting parameters now,
for each new parameter change,
it's drawing a new trail specific to the
time interval of interest .
. why are there symbols in a schematic?
because it's the easiest way to pen them,
Victor notices ( and there's the icon effect
-- creating instant recall of the concept );
but now that schematics are in computers,
we should be using their dynamic expression:
so, in an electronics diagram,
we could replace the symbols with
little videos of the analog signals
that are generated at that symbol's node .
. likewise, computers can make coding so easy
that any one can do it;
indeed, it seems that the best coders
are just those who are best at
imagining a computer's working internals,
but we have the computer to do this for us,
so why don't we?!
. for example he shows another IDE,
this one being tuned for coding instead of drawing
in which the editor has 2 areas:
on one side is the code,
and on the other is a simulation of the code;
ie, the simulation has a list of all the locals
that are so far declared in your function,
-- and it does this in real time:
eg, as you write the function's header,
the simulation shows the parameters as undefined;
then you can modify the simulation
by instantiating any undefined variables
(so the assignment happens only in the simulation,
not your code), and then as you have code
assigning a complex expression to a var,
the simulation tries to eval that assignment;
and, this way you are testing as you code
-- every time you hit enter,
it's relaunching the build&run
for per-line-of-code testing (quick!).
. if you add a loop to your code,
then all the var's being affected by the loop
are placed in a matrix
with vars in the columns,
and iterations per row (or vice versa).
. he then gives us a history of people who
had a passion for using computers to
help people with making full use of their brains;
pointing out that this work is important because
people need these dynamic tools
to unleash their full human potential .
. he was especially impressed at
those who made computers child's play;
and reminded the audience's budding techies
that we can choose as our identity
to have a social conscience,
and not just a technical expertise .
pioneers of cp4e:
(computer programming 4 everybody)
# Larry "nomodes.com" Tesler:
. not just the developer of copy&paste
but the one realizing we could do better than
obstructive modal versions of copy&paste:
he recognized a wrong
that was unrecognized by the culture .
# Doug Engelbart -- enabling mankind:
. propent of realtime human-computer interaction
not just the inventor of the mouse:
he wanted to solve mankind's urgent problems with
computer-assisted knowledge workers .
# Alan Kay -- enabling children:
. everything he did for windows, menus, and oop,
was to enable children to be computer literate
to make them more enlightened adults!
. he studied those who studied how children think,
in order to help them use computers .
[. in 2006, Kay's Viewpoints Research Institute
was funded by USA's NSF for the proposal:
Steps Toward the Reinvention of Programming:
A compact and Practical Model of
Personal Computing as a Self-exploratorium [pdf]
(see comments of it:
. they critiqued him for bucking the trend of
taking advantage of cheaper hardware
by filling it with more features and bling;
but ironically, that attitude
still hadn't been able to provide all children
with a computer that would help them learn
-- children's computers need to be
as cheap as calculators;
but instead we insist on continuing to
code above the child's price point .]
# Richard Stallman -- freedomware:
. the king of fighting to change culture
for the good of mankind .
9.8: web: i-programmer.info`
Alex Armstrong 10 March 2012`
A Better Way To Program
[ it was funded by a kickstarter page .]
You can now try Light Table
via the Light Table Playground!
9.8: web: Bret Victor
. Bret Victor's inspiring resume
and his many cool writings .
. Bret Victor`Inventing on Principle [vid]
from CUSEC 2012 (Canadian University
Software Engineering Conference)
Light Table --a new IDE concept
. an image in the article at this point
shows a desktop where a folder full of files
is represented by a box
whose title is named after the folder
with file names inside the box .
. the right side has boxes of code;
so, for each function you inspect,
it also shows you called function`bodies .)
--
. this reminds of composite editing,
where the editor holds the entire desktop;
so, it serves as desktop layouts that can be
suspended and resumed as if a vmware .
. desktops and their windows
can be edited the same as
when an editor embeds images in text .
. the first compound docs I saw
were ms`office embedded objects:
you could mix & match Word's text columns,
Excel's spreadsheet windows, and various images .
. browsers have this feature (the embed tag);
but browsers are short on editing abilities,
and editors need to be integrated with the OS;
such that I can open a file,
and it unleashes a desktop of windows
all arranged in the way they were before .
. also, the layout editor needs to
control the border style of its windows;
eg, embedded graphics in text
should often have no border at all .
. a 1st class composite document
has everything we like about vmware,
but instead of windowing OS's
our compositing app is windowing apps .]
aside from the view's detail modes
(nodes-view vs thumbnails vs fullview)]
stcredzero/"I told you so!"
. embraces most (if not all)
of Light Table's principles.
--
As always, the multi-media programming environments
are miles ahead and nobody knows about them.
Field[by The OpenEnded Group] is amazing.
{Max/MSP, Pd, ...} are a different paradigm altogether,
but have had live editing, documentation a click away, etc
and have been in heavy use for 20+ years.
list of multi-media programming environments?
. the big names are Max/MSP, Pure Data,
vvvv, QuartzComposer, SuperCollider,
ChucK, Processing, openFrameworks,
Cinder, and Field[The OpenEnded Group].
But there are many more smaller projects
such as Lubyk, Overtone, LuaAV,
Faust, Plask, Impromptu and Fluxus.
I also want to plug NoFlo, which is a
'flow-based programming' library for node.js,
which integrates with a visual editor.
gfodor, vdm, nickik:
recommend some reading materials?
Victor's writings
The Design of Design (see part 4)
simplicity’s virtues over easiness’
Alan Kay`Programming and Scaling [vid]
Viewpoints Research Institute
Mindstorms: Children, Computers, And Powerful Ideas
PLATO Learning System [vid]
udacity -- cheap edu
coursera -- cheap edu
khanacadamy -- free videos
. Bret Victor's video has a cp4e mission
and shows off the new tools he's built
that help us develope our creative ideas .
. amazing what he's done;
he has an IDE where you can click on any var,
and it turns into the widget needed to adjust it;
but then it's also
re-running your code after every change;
so, if your program generates a picture,
his scripts are custom GUI's for
painting particular classes of pictures
where you paint by both coding
and by adjusting code parameters
-- all by GUI! (as you do edits,
the page is sprouting widgets to help you).
. when you slide a for-loop var,
the program is re-running for every
value in the for-loop's change range
which is causing an animation effect
-- a new way to experiment with video .
. even more amazing,
this IDE creates a complete mapping
between the subpicture being drawn
and the line of code that drew it;
so clicking in the picture
causes the editor to highlight a line of code,
and conversely, selecting a line of code
highlights the subpictures it drew .
. now, speaking of animation,
the next thing needed for visualization
is to create trails for specific subpictures,
so that as you modify a parameter,
it immediately shows how that is affecting
the path of the trail .
. first he's pausing at the
end of the interesting time interval,
then he's using rewind to get to the
beginning of his time interval of interest;
and finally when he's adjusting parameters now,
for each new parameter change,
it's drawing a new trail specific to the
time interval of interest .
. why are there symbols in a schematic?
because it's the easiest way to pen them,
Victor notices ( and there's the icon effect
-- creating instant recall of the concept );
but now that schematics are in computers,
we should be using their dynamic expression:
so, in an electronics diagram,
we could replace the symbols with
little videos of the analog signals
that are generated at that symbol's node .
. likewise, computers can make coding so easy
that any one can do it;
indeed, it seems that the best coders
are just those who are best at
imagining a computer's working internals,
but we have the computer to do this for us,
so why don't we?!
. for example he shows another IDE,
this one being tuned for coding instead of drawing
in which the editor has 2 areas:
on one side is the code,
and on the other is a simulation of the code;
ie, the simulation has a list of all the locals
that are so far declared in your function,
-- and it does this in real time:
eg, as you write the function's header,
the simulation shows the parameters as undefined;
then you can modify the simulation
by instantiating any undefined variables
(so the assignment happens only in the simulation,
not your code), and then as you have code
assigning a complex expression to a var,
the simulation tries to eval that assignment;
and, this way you are testing as you code
-- every time you hit enter,
it's relaunching the build&run
for per-line-of-code testing (quick!).
. if you add a loop to your code,
then all the var's being affected by the loop
are placed in a matrix
with vars in the columns,
and iterations per row (or vice versa).
. he then gives us a history of people who
had a passion for using computers to
help people with making full use of their brains;
pointing out that this work is important because
people need these dynamic tools
to unleash their full human potential .
. he was especially impressed at
those who made computers child's play;
and reminded the audience's budding techies
that we can choose as our identity
to have a social conscience,
and not just a technical expertise .
pioneers of cp4e:
(computer programming 4 everybody)
# Larry "nomodes.com" Tesler:
. not just the developer of copy&paste
but the one realizing we could do better than
obstructive modal versions of copy&paste:
he recognized a wrong
that was unrecognized by the culture .
# Doug Engelbart -- enabling mankind:
. propent of realtime human-computer interaction
not just the inventor of the mouse:
he wanted to solve mankind's urgent problems with
computer-assisted knowledge workers .
# Alan Kay -- enabling children:
. everything he did for windows, menus, and oop,
was to enable children to be computer literate
to make them more enlightened adults!
. he studied those who studied how children think,
in order to help them use computers .
[. in 2006, Kay's Viewpoints Research Institute
was funded by USA's NSF for the proposal:
Steps Toward the Reinvention of Programming:
A compact and Practical Model of
Personal Computing as a Self-exploratorium [pdf]
(see comments of it:
. they critiqued him for bucking the trend of
taking advantage of cheaper hardware
by filling it with more features and bling;
but ironically, that attitude
still hadn't been able to provide all children
with a computer that would help them learn
-- children's computers need to be
as cheap as calculators;
but instead we insist on continuing to
code above the child's price point .]
# Richard Stallman -- freedomware:
. the king of fighting to change culture
for the good of mankind .
9.8: web: i-programmer.info`
Alex Armstrong 10 March 2012`
A Better Way To Program
This video will change the way[ an implementation of Victor's idea .]
you think about programming.
The argument is clear and impressive
- it suggest that we really are building programs with
one hand tied behind our backs.
After you have watched the video
you will want the tools [that he has] demonstrated.
We often focus on programming languages
and think that we need a
better language to program better.
Bret Victor gave a talk that demonstrated
that this is probably only a
tiny part of the problem.
The key is probably interactivity.
Don't wait for a compile to complete
to see what effect your code has on things
- if you can see it in real time
then programming becomes much easier.
Currently we are programming with
one arm tied behind our backs
because the tools that we use
separate us from what we write and what happens.
Interactivity makes code understandable.
Moving on, the next idea is that
instead of reading code and understanding it,
seeing what the code does is understanding it.
Programmers can only understand their code by
pretending to be computers and running it in their heads.
As this video shows, this is incredibly inefficient
and, as we generally have a computer in front of us,
why not use it to help us understand the code?
...
if you watch just one video this year
make it this one.
Update:
See Light Table - a Realization of a New Way to Code
[ it was funded by a kickstarter page .]
You can now try Light Table
via the Light Table Playground!
9.8: web: Bret Victor
. Bret Victor's inspiring resume
and his many cool writings .
. Bret Victor`Inventing on Principle [vid]
from CUSEC 2012 (Canadian University
Software Engineering Conference)
-- a three-day event that brings together9.8: web: chris-granger.com`
undergraduate and post-graduate students
for learning, networking,
and sharing their passion for software.
Light Table --a new IDE concept
Despite the dramatic shift toward[9.8:
simplification in software interfaces,
the world of development tools
continues to shrink our workspace
with feature after feature
in every release.
Even with all of these things at our disposal,
we're stuck in a world of files
and forced organization
- why are we still looking all over the place
for the things we need when we're coding?
Why is everything just static text?
Bret Victor hinted at the idea that
we can do much better than we are now
- we can provide instant feedback,
we can show you how your changes affect a system.
And I discovered he was right.
...
all of this culminates in the ability to see
how values flow through our entire codebase.
Here I find a bug where I wasn't passing x correctly.
I type (greetings ["chris"])
and immediately see all the values filled in
not just for the current function
but all the functions that it uses as well.
Light Table is based on a very simple idea:
we need a real work surface to code on,
not just an editor and a project explorer.
We need to be able to
move things around, keep clutter down,
and bring information to the foreground
in the places we need it most.
Light table is based on
a few guiding principles:
You should never have to look for documentation
Files are not the best representation of code,
just a convenient serialization.
Editors can be anywhere
and show you anything - not just text.
Trying is encouraged
- changes produce instantaneous results
We can shine some light on related bits of code
Docs everywhere
When you're looking at new code
it's extremely valuable to be able to
quickly see documentation left behind by the author.
Normally to do so you'd have to
navigate to the definition of the function,
but lightable ghosts this information in to the side.
Want to know what partial does?
Just put your cursor on top of it.
This makes sure you never have to worry about
forgetting things like argument order ever again.
. we should be able to search all our documentation
in place to quickly see what it is.
Don't remember what was in the noir.core namespace?
It's one ctrl-f away.
This is especially handy for finding
functions you may not even know exist
and seeing their docs right there.
No need to look at some other generated documentation.
Instant feedback
. to try things out, we can do better
than lispers' REPL - we can do it
in place and instantaneously.
For example we can type in (3 + 4)
and immediately we are shown the result
- no ctrl-enter or anything else.
Light Table takes this idea as far as it can
and doesn't just show you variables to the side,
but actually shows you how the code is filled in.
This lets you see how values flow through
arbitrarily complex groups of functions.
This level of real-time evaluation and visualization
basically creates a real-time debugger,
allowing you to quickly try various inputs
and watch it flow through your code.
There's no faster way to catch bugs
than to watch your program work.
We built drafting tables for a reason
. desktop windows aren't a good abstraction
for what we do as software engineers .
Other engineers have large tables
where they can scatter around
drawings, tools, and other information .
A drafting table is a better abstraction:
We shouldn't need to limit ourselves
to a world where the smallest moveable unit
is a file - our code has much more
complex interactions that we can better see
when we can organize things conceptually.
. We saw an example of this with Code Bubbles,
but why can't we embed a running game ?
Then we can interrogate it,
and have our environment answer them for us.
. an image in the article at this point
shows a desktop where a folder full of files
is represented by a box
whose title is named after the folder
with file names inside the box .
. the right side has boxes of code;
so, for each function you inspect,
it also shows you called function`bodies .)
--
. this reminds of composite editing,
where the editor holds the entire desktop;
so, it serves as desktop layouts that can be
suspended and resumed as if a vmware .
. desktops and their windows
can be edited the same as
when an editor embeds images in text .
. the first compound docs I saw
were ms`office embedded objects:
you could mix & match Word's text columns,
Excel's spreadsheet windows, and various images .
. browsers have this feature (the embed tag);
but browsers are short on editing abilities,
and editors need to be integrated with the OS;
such that I can open a file,
and it unleashes a desktop of windows
all arranged in the way they were before .
. also, the layout editor needs to
control the border style of its windows;
eg, embedded graphics in text
should often have no border at all .
. a 1st class composite document
has everything we like about vmware,
but instead of windowing OS's
our compositing app is windowing apps .]
Code with a little illuminationLight Table at news.ycombinator.com:
There's no reason our tools can't
help us understand how things are organized .
In light mode, Light Table lets you
see what functions are called by
the one you're currently working on,
not just by highlighting ones in your code,
but by also showing you their code to the side.
We shouldn't have to constantly
navigate back and forth to see this .
Finally, all of this culminates
in the ability to see not just how
things I type into a scratch editor evaluate,
but how values flow through our entire codebase.
Here I find a bug where I wasn't passing x correctly.
I type (greetings ["chris"]) and immediately see
all the values filled in
not just for the current function
but all the functions that it uses as well.
What languages will it support?
. The first two are Javascript and Clojure,
.... we hit $300k! Python will be the
third language supported out of the gate.
. additionally,
new languages can happen through plugins.
Will it be open source?
. a firm believer in open source software
and open source technologies.
we can guarantee you that Light Table will be
built on top of the technologies that are
freely available to us today.
As such, we believe it only fair that
the core of Light Table
be open sourced once it is launched.
At some level, this is an experiment in
how open source and business can mix
- it will be educational for us all.
What's a license then?
. In order to download packaged distributions,
you'll need a license. Preliminarily,
we're thinking, for individuals,
licenses will be based on a model of:
"pay as much as you can of
what you believe it is worth".
. This gives everyone access to the tools
to help shape our future,
but also helps us stick around to
continue making the platform awesome.
We think what we build will be worth at least $50,
and so that's what we've used for our rewards.
Is it a standalone app?
. there's an instance of webkit as the UI layer
-- completely an implementation detail.
It will run locally on virtually any platform
and out of the gate will support
the big three (linux/mac/windows).
Can I script/extend it?
. It will be scriptable in Javascript
(and many other languages can be
translated into Javascript).
Ultimately the goal of the platform
is to be a highly extensible work surface
- even the initial core languages
will be written as plugins.
This allows us to build development interfaces
we haven't even imagined yet.
What about key bindings?
. by using the awesome CodeMirror editor,
this is something that is easily adapted.
If you're looking for a way to contribute,
help improve CodeMirror
and its emacs/vim plugins!
--[
CodeMirror is a JavaScript component
that provides a code editor in the browser.
When a mode is available for your language
[c, python, go, js, ...]
it will color your code,
and optionally help with indentation.
. rich programming API and a CSS theming
for customizing CodeMirror
and extending it with new functionality.
. it's used by Mergely which is a
powerful online diff and merge editor
(Browser-based differencing tool)
that highlights changes in text.
It can be embedded within your own Web application
to compare files, text, C, C++, Java,
HTML, XML, CSS, and javascript.]
How can I help in the meantime?
. The better CodeMirror is,
the better all internet editors can be!
Past that, help us spread the word.
The more money we get
the more people I can involve in the project,
the more languages we can support,
and the more powerful the entire platform.
There's tremendous potential
-- we haven't even scratched the surface yet!
About the Developer:
. helped design the future of Visual Studio,
and released numerous open source
libraries and frameworks.
. for Microsoft was the Program Manager for
the C# and VB IDE
-- countless hours behind a one way mirror
learning how people develop things.
Since then steeped in the world of
startups and OSS.
. worked with the guys at ReadyForZero
to build readyforzero.com,
created the Noir web framework,
built the SQL abstraction layer Korma,
and released a host of ClojureScript libraries
to make client side development a breeze
- many of which are now featured in
the canonical books for Clojure.
Even more recently,
built Bret Victor's live game editor
after watching his inspiring
"Inventing on Principle" presentation .
One thing Light Table could pick up / learn--[. I think he's refering to the call tree idea
is the ability to scale as function set grows,
to gain a kind of fractal navigability.
aside from the view's detail modes
(nodes-view vs thumbnails vs fullview)]
stcredzero/"I told you so!"
Smalltalkers have been doing [LightTable]shykes:
--[the right thing]-- since the 80's
(If only we could have communicated
about this as well as Mr. Granger).
The first and the last points [under Also:]
were satisfied by lightning-fast searches of
"senders" and "implementers" .
1980's smalltalk:
- Smallest unit of code is the function.
- Able to get instant feedback on code changes.
- Multiple editors with just one function in it.
Show code in an "area of concern" not just in a file.
- The coding environment can show also
results, app windows, graphics, other tools.
- Can save the configuration of the above.
Also:
- You should never have to look for documentation
- Files are not the best representation of code,
just a convenient serialization.
- Editors can be anywhere
and show you anything - not just text.
- changes produce instaneous results
- We can shine some light on related bits of code .
. Dan Ingalls, the father of Smalltalk,Field (programming environment)
has picked up the baton again,
this time using Javascript.
Check out the MIT-licensed Lively Kernel
-- a new approach to Web programming
. the live demo at JSConf was jaw-dropping;
completely in line with the Smalltalk legacy .
It provides a complete platform for Web applications,
including dynamic graphics, network access,
and development tools.
. embraces most (if not all)
of Light Table's principles.
--
As always, the multi-media programming environments
are miles ahead and nobody knows about them.
Field[by The OpenEnded Group] is amazing.
{Max/MSP, Pd, ...} are a different paradigm altogether,
but have had live editing, documentation a click away, etc
and have been in heavy use for 20+ years.
list of multi-media programming environments?
. the big names are Max/MSP, Pure Data,
vvvv, QuartzComposer, SuperCollider,
ChucK, Processing, openFrameworks,
Cinder, and Field[The OpenEnded Group].
But there are many more smaller projects
such as Lubyk, Overtone, LuaAV,
Faust, Plask, Impromptu and Fluxus.
I also want to plug NoFlo, which is a
'flow-based programming' library for node.js,
which integrates with a visual editor.
gfodor, vdm, nickik:
recommend some reading materials?
Victor's writings
The Design of Design (see part 4)
simplicity’s virtues over easiness’
Alan Kay`Programming and Scaling [vid]
Viewpoints Research Institute
Mindstorms: Children, Computers, And Powerful Ideas
PLATO Learning System [vid]
udacity -- cheap educoursera -- cheap edu
khanacadamy -- free videos
2012-07-04
scriptability with sandboxing
6.30: addx/scriptability with sandboxing:
. I was surprised to learn that Preview
-- one of Apple's own apps -- is unscriptable;
but, perhaps that's because it's so costly to produce
the needed scripting dictionary .
. one of addx's motivating features
was the pervasive use of the MVC pattern;
with that in place, app's always come in 2 parts:
# the model that can talk to any controller
(because it's a command line tool);
# the gui controller that humans will need
in order to interact with the model .
. the scripting dictionary comes free
(without the developer having to do anything)
because in order to get an app installed in the system
it had to be submitted to the system librarian,
who put the model's specification in the library
which is viewable by humans and controllers alike .
. I was surprised to learn that Preview
-- one of Apple's own apps -- is unscriptable;
but, perhaps that's because it's so costly to produce
the needed scripting dictionary .
. one of addx's motivating features
was the pervasive use of the MVC pattern;
with that in place, app's always come in 2 parts:
# the model that can talk to any controller
(because it's a command line tool);
# the gui controller that humans will need
in order to interact with the model .
. the scripting dictionary comes free
(without the developer having to do anything)
because in order to get an app installed in the system
it had to be submitted to the system librarian,
who put the model's specification in the library
which is viewable by humans and controllers alike .
can a scripting engine really be safe?
6.1: addx/can a scripting engine really be safe?:
. I just heard that Apple will no longer allow apps to
communicate by sending each other AppleScripts;
instead they need to use each other's API .
. this I found confusing because I had a different understanding
of applescript connectivity:
. apps exported an API that applescript could understand,
and then applescripts could use all such apps .
. I guess what they were saying is that, counterintuitively,
only AppleScript had been able to use such API's:
you couldn't do so from the native lang (objective C).
. anyway, this got me to asking the question:
can a scripting engine really be safe?
here's my yes:
. I just heard that Apple will no longer allow apps to
communicate by sending each other AppleScripts;
instead they need to use each other's API .
. this I found confusing because I had a different understanding
of applescript connectivity:
. apps exported an API that applescript could understand,
and then applescripts could use all such apps .
. I guess what they were saying is that, counterintuitively,
only AppleScript had been able to use such API's:
you couldn't do so from the native lang (objective C).
. anyway, this got me to asking the question:
can a scripting engine really be safe?
here's my yes:
2010-01-31
computer programming for all (children) is here!
10.1.31: news.addx/scratch.mit.edu
. filling out the form to get updates about Scratch:
School or Organization: Americium Dream Documents
Role: Researcher
Where did you hear about Scratch?
suggestions-for-an-embeddable-scripting-language-for-iphone:
Can you build a visual (touch based)What interests you about Scratch?
programming environment like Scratch?
http://scratch.mit.edu/
cp4e (computer programming for everyone)
Anything else you want to share about your background or related experience?
addx -- a secure and friendly system
that promotes computing as a universal 2nd language
free {pc, mac} downloads with tons of support
Scratch Installer For Mac OS X (MacScratch1.4.dmg)
Scratch Installer for Windows (ScratchInstaller1.4.exe)
. user doc's include the support page's links:
getting started page
release notes
Getting Started Guide (pdf)
faq
new user forum
other forum pages (28,400 pages)
learnscratch.org (115 pages)
Scratch Reference Guide
Scratch Cards
Videos about Scratch
Scratch 1.4: Beginner's Guide ($32 book)
Scratch Programming for Teens ($20 book)
evangelism
[. if you are redistributing an official copy,
or pointing at where to get it, then ]
you can include a description of Scratch
and the Scratch logo:
"Scratch, a project of MIT Media Lab's
Lifelong Kindergarten group,
makes it easy to program your own
interactive stories, games, and animations
-- and share your creations on the web.
As you create and share projects with Scratch,
you learn to think creatively,
reason systematically,
and work collaboratively .
It is available for free download
from scratch.mit.edu .
scratch reviews in the news
Research Papers and Presentations
Scratch: Programming for All. Communications of the ACM, November 2009 (pdf)
What video game making can teach us about learning and literacy:
Alternative pathways into participatory cultures. (pdf)
Alternative pathways into participatory cultures. (pdf)
All I Really Need to Know (About Creative Thinking)
I Learned (By Studying How Children Learn) in Kindergarten. (pdf)
I Learned (By Studying How Children Learn) in Kindergarten. (pdf)
Creative coding: The role of art and programming
in the K-12 educational context. (pdf)
in the K-12 educational context. (pdf)
2005 Some Reflections on Designing Construction Kits for Kids. (pdf)
some confusion about linux sources
. no need to recompile if are using
a recent version of Ubuntu (7.x or 8.x).
However, if you do need to rebuild the binaries,
they have source code for the Squeak virtual machine
and
source code for the special Scratch plugins is available
at "(mks://localhost/Source_Code) ?
mks ? perhaps refers to this:
MKS Toolkit Vs. Cygwin: You Get What You Pay For - New
browser and other tools
inside the Squeak programming environment.
To get started,
first copy the Scratch application
( pc: "Scratch.exe"
, mac: "Scratch.app"
) from your normal Scratch folder
into the Scratch source code folder.
(The Scratch application is actually just a
Squeak virtual machine,
so any recent Squeak virtual machine should also work.)
Also, put a copy of the Squeak source code file
in that folder if needed
(this file is included in the zip file
starting with the 1.4 source release).
Finally,
drop the file "ScratchSourceCode1.4.image"
onto the Scratch application.
The Squeak programming environment will start up,
allowing you to view and modify the Scratch source code.
Scratch is built on a modified Squeak 2.8 image .
That version of Squeak is documented at
the squeak.org site, and two books:
Mark Guzdial` "Squeak: Object-Oriented Design with Multimedia Applications"
and {Mark Guzdial, Kimberly Rose}`
"Squeak: Open Personal Computing and Multimedia"
Both the source code and pre-compiled binaries
for the Squeak virtual machine are available at www.squeakvm.org .
. classes that appear in the original Squeak 2.8 image
are covered by the Squeak license
while all code in the remaining classes is covered by the Scratch license.
The Scratch classes are easy to find in practice:
nearly all of them appear in the class categories starting with "Scratch-".
doc's for developers
. comments are embedded in the code
and see the Scratch project file format .
. both developers and users are finding personalized help
at the advanced forum;
eg, the great list of tips
-- many of these will someday make their way
into the official user doc's .
. researchers might also get help by contact form .
license
. the source code license includes certain restrictions
intended to avoid confusion between the Scratch product
and research projects built on the Scratch source code.
If members of the Scratch user community
stumble on a research project based on the Scratch code,
they should be able to tell at a glance
that it is not the Scratch product.
The Scratch Source Code License
[. it's like the GPL plus...]
. for non-commercial uses
. you cannot use the word "Scratch"
to refer to derivative works
(except in the phrase
"Based on Scratch from the MIT Media Laboratory"),
. you cannot use the Scratch logo
nor the official (copyrighted) Scratch cat;
you cannot implement the ability to upload projects
to any MIT Scratch website
. and see the full license in "license.txt"
included in the source code download package.
2003 NSF grant Proposal:
A Networked, Media-Rich Programming Environment
to Enhance Technological Fluency
at After-School Centers in Economically-Disadvantaged Communities. (pdf)
educator doc's
getting started for educators
1-page overviews:
Creating with Scratch (pdf)
Learning with Scratch (pdf)
and Programming with Scratch (pdf) .
educator resources
educator forum
map of interested educators
Programming Concepts in Scratch (pdf)
. the computational concepts and skills
young people can develop .
Scratch and 21st Century Learning Skills (pdf)
. the learning skills young people can develop .
Learning by Designing (pdf)
. design-based approaches to learning .
find doc's in your language
--. some have their own websites:
( portuguese (6800 pages)
arabic.edu (400 pages)
hungarian (310 pages)
estonian (100 pages)
israeli.org (40 pages)
spanish.{org, educa}(25 pages)
dutch.{edu, org} (6 pages),
italian.com (1 page)
scratch openware
This source code release (4.8mb)
is based on the source code of Scratch 1.4
with a few changes [to conform to the license]
To view the source code,
just drop the .image file onto a Squeak virtual machine
(e.g. Scratch.exe or Scratch.app,
which come bundled with Scratch).
. source code for the Squeak virtual machine .
Scratch UI "Skin" resource:
The Scratch User Interface is a
ScratchFrameMorph.class`ScratchSkin.Dictionary .
. readSkinFrom(folder) can load the skin
from this skin folder download. (zip)
ScratchPlugin and UnicodePlugin source code (zip)
(for Windows, Mac OS X, and Linux) .
ScratchPlugin for Squeak
is a shared C library that extends the Squeak VM
to support image filters, presentation mode, the help button, ... .
. UnicodePlugin lets Squeak support text rendering .
A Networked, Media-Rich Programming Environment
to Enhance Technological Fluency
at After-School Centers in Economically-Disadvantaged Communities. (pdf)
educator doc's
getting started for educators
1-page overviews:
Creating with Scratch (pdf)
Learning with Scratch (pdf)
and Programming with Scratch (pdf) .
educator resources
educator forum
map of interested educators
Programming Concepts in Scratch (pdf)
. the computational concepts and skills
young people can develop .
Scratch and 21st Century Learning Skills (pdf)
. the learning skills young people can develop .
Learning by Designing (pdf)
. design-based approaches to learning .
find doc's in your language
--. some have their own websites:
( portuguese (6800 pages)
arabic.edu (400 pages)
hungarian (310 pages)
estonian (100 pages)
israeli.org (40 pages)
spanish.{org, educa}(25 pages)
dutch.{edu, org} (6 pages),
italian.com (1 page)
scratch openware
This source code release (4.8mb)
is based on the source code of Scratch 1.4
with a few changes [to conform to the license]
To view the source code,
just drop the .image file onto a Squeak virtual machine
(e.g. Scratch.exe or Scratch.app,
which come bundled with Scratch).
. source code for the Squeak virtual machine .
Scratch UI "Skin" resource:
The Scratch User Interface is a
ScratchFrameMorph.class`ScratchSkin.Dictionary .
. readSkinFrom(folder) can load the skin
from this skin folder download. (zip)
ScratchPlugin and UnicodePlugin source code (zip)
(for Windows, Mac OS X, and Linux) .
ScratchPlugin for Squeak
is a shared C library that extends the Squeak VM
to support image filters, presentation mode, the help button, ... .
. UnicodePlugin lets Squeak support text rendering .
some confusion about linux sources
. no need to recompile if are using
a recent version of Ubuntu (7.x or 8.x).
However, if you do need to rebuild the binaries,
they have source code for the Squeak virtual machine
and
source code for the special Scratch plugins is available
at "(mks://localhost/Source_Code) ?
mks ? perhaps refers to this:
MKS Toolkit Vs. Cygwin: You Get What You Pay For - New
. source code is best explored using the$479 MKS Toolkit for Developers is a Windows development product
for software, script, and Web developers,
who can choose from command-line
or graphical Visual Studio® build environments.
It is ideal for developing common, cross-platform scripts
for UNIX, Linux, and Windows,
from a single Windows desktop.
Using the power of more than 300
command-line utilities, and CGI scripts.
browser and other tools
inside the Squeak programming environment.
To get started,
first copy the Scratch application
( pc: "Scratch.exe"
, mac: "Scratch.app"
) from your normal Scratch folder
into the Scratch source code folder.
(The Scratch application is actually just a
Squeak virtual machine,
so any recent Squeak virtual machine should also work.)
Also, put a copy of the Squeak source code file
in that folder if needed
(this file is included in the zip file
starting with the 1.4 source release).
Finally,
drop the file "ScratchSourceCode1.4.image"
onto the Scratch application.
The Squeak programming environment will start up,
allowing you to view and modify the Scratch source code.
Scratch is built on a modified Squeak 2.8 image .
That version of Squeak is documented at
the squeak.org site, and two books:
Mark Guzdial` "Squeak: Object-Oriented Design with Multimedia Applications"
and {Mark Guzdial, Kimberly Rose}`
"Squeak: Open Personal Computing and Multimedia"
Both the source code and pre-compiled binaries
for the Squeak virtual machine are available at www.squeakvm.org .
. classes that appear in the original Squeak 2.8 image
are covered by the Squeak license
while all code in the remaining classes is covered by the Scratch license.
The Scratch classes are easy to find in practice:
nearly all of them appear in the class categories starting with "Scratch-".
doc's for developers
. comments are embedded in the code
and see the Scratch project file format .
. both developers and users are finding personalized help
at the advanced forum;
eg, the great list of tips
-- many of these will someday make their way
into the official user doc's .
. researchers might also get help by contact form .
license
. the source code license includes certain restrictions
intended to avoid confusion between the Scratch product
and research projects built on the Scratch source code.
If members of the Scratch user community
stumble on a research project based on the Scratch code,
they should be able to tell at a glance
that it is not the Scratch product.
The Scratch Source Code License
[. it's like the GPL plus...]
. for non-commercial uses
. you cannot use the word "Scratch"
to refer to derivative works
(except in the phrase
"Based on Scratch from the MIT Media Laboratory"),
. you cannot use the Scratch logo
nor the official (copyrighted) Scratch cat;
you cannot implement the ability to upload projects
to any MIT Scratch website
. and see the full license in "license.txt"
included in the source code download package.
Subscribe to:
Posts (Atom)
