30 comments

[ 5.6 ms ] story [ 69.9 ms ] thread
I'd recommend pre-populating it with some examples. I didn't really know what to expect or what to do when I got there, I thought it was just live generating formatted markdown.
There is an example, see the Examples dropdown above the textarea.
Not sure how I managed to miss that, thanks. Beats the copy and pasting I was doing.
It would be great if the first example used something more real world than 'power levels'.
Jotux, would you please provide us with an example use case?
There is a dropdown box called "examples" at the top where you can select an example.
The dropdown box doesn't really work on iPad. I can bring it down, but when I tap "power level" it just closes the box and focuses the text field.
I made the default example auto-load when the page loads. Hopefully this helps.
No, a "use case" is what we can do with it, not what it does.

So far, I am clueless as to where and how I can utilise this technology.

Explaining fixed income investments to new investors.
My initial idea was to have reactive-text enabled forum posts or chat input. So in, say, a hacker news comment you could embed equations in the markdown formatting that explain a specific calculation. The recent posts about how much you need to save to retire with a decent income would be a good example.
A use case would be a document like this one: http://worrydream.com/TenBrighterIdeas/

or this one: http://worrydream.com/ExplorableExplanations/

Both by Bret Victor who as far as I can tell invented the idea. At the very least he’s certainly been effective at popularizing it.

For completeness here is Victor’s library that helps you create such documents Tangle: http://worrydream.com/Tangle/ , which is used by Fangle.

Web-based interactive documents were probably invented by some guy at Netscape doing Javascript (let's call him B. Eich). Bret has popularized a nice interactive presentation style, though is Learnable Programming document used embedded movies instead (I did this for a paper I wrote once, did anyone know PDF can embed quicktime movies?).

Interactive visualizations are not that new these days. I have a hard time seeing how text-based visualizations would be very useful though. Pretty much, the interaction occurs in some sort of rendered graphic that can't be easily expressed using markdown.

Warning: fanboy gushing ahead. Read at your own risk.

Interactive web-based documents are not new, nor are the ideas that Bret Victor is exploring, but a synthesis as sophisticated and holistic as Bret's is.

One core idea embedded in all of Bret's work is that learning happens best when students are able to explore multiple representations of a idea or aspects of an environment simultaneously. The more quickly one representation changes in reaction to the other, the stronger the learning feedback loop, and the more quickly the student builds an accurate mental model of how the thing they're interacting with works.

So, WRT your point, it's not about the fact that the documents are interactive, but that they're "reactive." The interactive bits are all related to each other, and when one part changes all the other parts change with it, in real-time.

There's something in this immediacy that even the slightest delay destroys.

That's not a new idea; anyone who has read Mindstorms (1980) or grew up on LOGO has had at least an inkling of it. Lots of research ink as been spilled over this, and many "pedagogical" programming environments (Scratch, etc.) flirt with it. Even Bret would say that, I bet.

But, well, he's taken it to a whole 'nother level. He's actively exploring this idea on multiple fronts, from reactive documents to reactive programming environments, and shitting gold all around town.

Every time he publishes something it takes months for people to react, absorb, and respond. See, e.g., http://www.lighttable.com/

Even if you don't think what he's doing is particularly special, there's something about the way he does it that causes big waves every time he publishes something.

Warning: recent history lesson ahead.

> One core idea embedded in all of Bret's work is that learning happens best when students are able to explore multiple representations of a idea or aspects of an environment simultaneously. The more quickly one representation changes in reaction to the other, the stronger the learning feedback loop, and the more quickly the student builds an accurate mental model of how the thing they're interacting with works.

Bret Victor's work brings a lot of visibility to this field, but he was hardly the first one; e.g. [1]. And more to the point, I wasn't the first one either; I believe Christopher Hancock [2] was, but even that is controversial if we begin to talk about visual languages all the way from Sutherland's SketchPad, and Jonathan's work on subtext [6] was a big inspiration to my own. And even I was inspired by some piece of software called SlideShow [4].

> So, WRT your point, it's not about the fact that the documents are interactive, but that they're "reactive." The interactive bits are all related to each other, and when one part changes all the other parts change with it, in real-time. There's something in this immediacy that even the slightest delay destroys.

50 milliseconds is the max, ideally you want < 20 ms (see [1], keep in mind 15 ms is your standard frame delay).

> But, well, he's taken it to a whole 'nother level. He's actively exploring this idea on multiple fronts, from reactive documents to reactive programming environments, and shitting gold all around town.

He is definitely a great communicator! But some of us get a bit irked by the fanboys that weren't around 8 years ago when we started this line of work (when I gave my Live Programming talk in Montreal, Ralph Johnson [5] said my work wasn't anything new! But he did the same thing for my paper I presented in Nantes the previous year).

> Every time he publishes something it takes months for people to react, absorb, and respond. See, e.g., http://www.lighttable.com/

Been there done that. Incidentally, it takes me around 5 or 6 years on average to absorb any of Conal Elliott's [3] papers.

> Even if you don't think what he's doing is particularly special, there's something about the way he does it that causes big waves every time he publishes something.

I love the way he communicates and the way he applies ideas in coherent meaningful designs. He really is a great designer. I just can't handle the gushing fan boys who are not curious enough to look at the bigger world of work in this area.

Bib:

[1] http://research.microsoft.com/apps/pubs/default.aspx?id=1793... (living it up with a live programming language circa 2007. Best viewed in Acrobat with Quicktime installed to see the embedded movies, I should get around to doing a webpage someday...)

[2] http://llk.media.mit.edu/papers/ch-phd.pdf (2003, best dissertation ever, most of Bret's work on learnable computing seems like a modernized version of what Christopher presented here, if you like liveness in programming read chapter 6)

[3] http://conal.net/blog/ (one of the inventors of FRP, has revolutionary ideas often)

[4] http://docs.racket-lang.org/slideshow/index.html (Matthew Flatt gave his job talk using this, he was editing the code for his slides in real time, not quite live, but it was definitely cool in 1999)

[5] http://www.cincomsmalltalk.com/userblogs/ralph/blogView (anything that I do apparently has already been done in Smalltalk :) )

[6] http://subtextual.org/ (lots of crazy cool ideas in that language)

Incredible, subtextual is at least 30 years ahead of its time. I imagine they will be using it with a giant touch table/wall or a regular table, AR glasses and infrared beams to track your hands.
First, OMG, thank you for all this information. I'm super interested in this field and spend all my time thinking about it and applying these ideas in practice as the co-founder of http://devbootcamp.com

Second, everything you said is true and doesn't surprise me. I admit my ignorance. I disagree WRT Bret, though. He's playing a clever game and I think his success is a directly result of that. Ironically, that game is nothing more than practicing what he preaches.

He applies these principles and ideas at every layer, including the meta-layer where the problem is not "help people build models around computation" but "help people build models around how to build models around computation."

Put another way, Bret's essays and presentations are themselves applications of these ideas. They practice what they preach.

"Learnable Programming," for example, is both a critique of Khan Academy's approach and a itself for the better approach he's advocating. Bret is giving me many representations of the idea he is trying to express around how people learn: symbolic, visual, and structural.

What I'm learning, though, is not how to program, but how to teach people how to program.

I'm going to read http://llk.media.mit.edu/papers/ch-phd.pdf for sure, but let's be honest: a 121-page PhD thesis about real-time programming and computational literacy isn't practicing what it's preaching. :)

Or maybe "show, don't tell" is a better way to put it?

This field is all about teaching and communication, right? It's about giving people the tools and models they need to explore their environment, get feedback from it, learn, and build, assimilate, and synthesize new models.

So, what more is there than being a "great communicator," at that point?

I think Bret's work is great, don't get me wrong. I just wish some of us who didn't communicate as well got some love too :)

Acadamia has a lot to offer if you have some patience. That 121 PhD thesis is well written and chock full of useful wisdom. Most PhDs are not as interesting (at least to me, everyone has their interests!). Papers are much more digestable though they still have some sort of rigor standard that prevents just outright visionary design.

Keep in mind also that back then there was no youtube, or we didn't know about, it wasn't popular. And no, we didn't really know how to do great interactive webpages either, or embed videos easily in them. The standards are much higher now, and I think we'll see more people follow Bret's lead.

This is the future of Hyper Text. We really need to innovate on the connotation of Hyper Text besides Hyper Links.

Can we see native browsers support this kind of markdown in the next decade?

Not a JS/Programming Pro here so please pardon my ignorance. One major problem faced by me in JavaScript is the weird handling of floats. This kind of application will end up dealing with floats. How should I avoid errors? or does Tangle itself handle the conversions?
You can get decent float parsing by doing Number() casting / regex cleanup, instead of parseFloat(). I don't know how tangle does it though
Right, yeah I use this one too for anywhere I need printf a-like formatting in JS.

But isn't this the other side of the coin? Formatting numbers as strings, not parsing strings to floats? (forgive me if I'm off base on this, I'm only looking sideways at this right now.)

Doesn't this miss the point of Markdown? I thought the main selling point of Markdown was that for plain text reading i.e. the markdown was clear and understandable as plain text. This introduces a bunch of additional features that can ONLY be represented accurately once parsed to HTML.

Maybe I'm missing the point, but I didn't think Markdown was invented because the world needed yet another markup language.

It's just using Markdown as the base for an alternative language to Tangle's HTML+JS. The point is simplifying the writing of interactive documents.

Tangle: http://worrydream.com/Tangle/

This is correct and I guess when I titled the article "reactive text generation from markdown" I implied it should be some kind of new markdown language, which is not what I want.

>The point is simplifying the writing of interactive documents

Yes.

Some weird stuff going on with the if clauses:

Switch His power level is 9000. It's almost 9000?!"

This should probably be:

#### Switch His power level is [p6=5000[5000..20000,1000]]. It's [warning_2[(p6 < 8000),(p6 < 9000),(p6 == 9000),(p6 > 9000)]low.,almost 9000?!,9000!,OVER 9000!!!]

Anyways, I think this makes for completely unreadable Markdown, which is the totally opposite direction of what it ought to be.