
Sketch-n-sketch: Programmatic + direct manipulation + SVG - seanmcdirmid
http://ravichugh.github.io/sketch-n-sketch/
======
ivan_ah
Very cool! I'm stongly in the TikZ camp for creating vector diagrams, but with
tools like this, SVG is starting to look very attractive...

link to demo: [http://ravichugh.github.io/sketch-n-
sketch/releases/index.ht...](http://ravichugh.github.io/sketch-n-
sketch/releases/index.html) (click on v0.4 link)

------
zokier
I'm immediately reminded of Bret Victors work:
[http://worrydream.com/#!/LearnableProgramming](http://worrydream.com/#!/LearnableProgramming)

I hope this is really the future

~~~
tomyws
Great resource, thanks for sharing this!

For me, transparent meaning is far easier for understanding systems than, for
example, visual programming (I'm thinking the Unreal Blueprint[1] system)

[1]:
[https://docs.unrealengine.com/latest/INT/Engine/Blueprints/i...](https://docs.unrealengine.com/latest/INT/Engine/Blueprints/index.html)

------
corysama
For those short on time, skipping through the videos helped me understand why
this is cool pretty quickly.

[http://ravichugh.github.io/sketch-n-sketch/blog/03-user-
stud...](http://ravichugh.github.io/sketch-n-sketch/blog/03-user-study-
videos.html)

------
willlma
Great concept. The text editor is broken for me (I place the caret, then try
to type, and it only works half the time and jumps around to other spots the
other half of the time without inputting any text). Also, I'd like to see
results directly, à la CSS editor in Chrome devtools rather than having to run
the code.

~~~
_mhr_
It's broken for me too. When I try to type, it places the cursor at the top of
the code, no matter what I try.

~~~
junke
You have to switch between "Run code" and "Edit code".

~~~
_mhr_
I see. That's what I get for going straight to the demo without checking the
documentation.

~~~
vanderZwan
To be honest, I think clicking on the left or right window should
automatically switch between these modes.

------
slantyyz
This is neat. It reminds me a lot of WebCode for the Mac, which has a real-
time SVG mode.

[http://www.webcodeapp.com/](http://www.webcodeapp.com/)

------
morgante
This is pretty cool and I definitely think direct manipulation is essential to
learnable programming.

That being said, direct manipulation should ideally work both ways: it's
awesome that changes to the image update the code in real time, but code
updates should also instantly update the image. The "run code" workflow is
very clunky, especially when popular tools in production today actually do hot
code reloading.

------
gcb0
it's just a IDE for a programmatic manipulation. Nothing else.

the very thing they show on the 1st video as a flaw of the old approach (run
script, then delete some random nodes) still can't happen on their solution.

------
donpark
Liked it. Reminded me of CMU's Andrew project from, egad, decades ago.

