19 ms·

Fangle - reactive text generation from markdown

72 points by jotux 14y ago

cgag 14y ago
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.
- sachleen 14y ago
  There is an example, see the Examples dropdown above the textarea.
  - cgag 14y ago
    Not sure how I managed to miss that, thanks. Beats the copy and pasting I was doing.
  - wodow 14y ago
    It would be great if the first example used something more real world than 'power levels'.
solox3 14y ago
Jotux, would you please provide us with an example use case?
- jotux 14y ago
  There is a dropdown box called "examples" at the top where you can select an example.
  - andrewflnr 14y ago
    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.
    - jotux 14y ago
      I made the default example auto-load when the page loads. Hopefully this helps.
      - andrewflnr 14y ago
        Yep, thanks.
  - solox3 14y ago
    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.
    - oscilloscope 14y ago
      Explaining fixed income investments to new investors.
      - jotux 14y ago
        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.
- nmcfarl 14y ago
  A use case would be a document like this one: http://worrydream.com/TenBrighterIdeas/ http://worrydream.com/TenBrighterIdeas/ or this one: http://worrydream.com/ExplorableExplanations/ 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/ http://worrydream.com/Tangle/ , which is used by Fangle.
  - seanmcdirmid 14y ago
    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.
    - jfarmer 14y ago
      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/ 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.
est 14y ago
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?
dirkk0 14y ago
This is great! I tweeted this but couldn't add you because I didn't find your twitter name or contact address ...? https://twitter.com/dirkk/status/294333906902196224 https://twitter.com/dirkk/status/294333906902196224
djd 14y ago
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?
- jasonm23 14y ago
  You can get decent float parsing by doing Number() casting / regex cleanup, instead of parseFloat(). I don't know how tangle does it though
  - jotux 14y ago
    I'm using this js sprintf library: http://www.diveintojavascript.com/projects/javascript-sprintf http://www.diveintojavascript.com/projects/javascript-sprint...
    - jasonm23 14y ago
      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.)
jalfresi 14y ago
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.
- wodow 14y ago
  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/ http://worrydream.com/Tangle/
  - jotux 14y ago
    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.
chmike 14y ago
Jeff Atwood suggested to upgrade Markdown in this blog post [1](http://www.codinghorror.com/blog/2012/10/the-future-of-markdown.html http://www.codinghorror.com/blog/2012/10/the-future-of-markd...). Does anyone know where this stands ? Maybe this system could be suggested as an addition to the new Markdown if this is in progress somewhere.
saebekassebil 14y ago
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.

72 points by jotux 14y ago

cgag 14y ago

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.

sachleen 14y ago
There is an example, see the Examples dropdown above the textarea.
- cgag 14y ago
  Not sure how I managed to miss that, thanks. Beats the copy and pasting I was doing.
- wodow 14y ago
  It would be great if the first example used something more real world than 'power levels'.

solox3 14y ago

Jotux, would you please provide us with an example use case?

jotux 14y ago
There is a dropdown box called "examples" at the top where you can select an example.
- andrewflnr 14y ago
  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.
  - jotux 14y ago
    I made the default example auto-load when the page loads. Hopefully this helps.
    - andrewflnr 14y ago
      Yep, thanks.
- solox3 14y ago
  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.
  - oscilloscope 14y ago
    Explaining fixed income investments to new investors.
    - jotux 14y ago
      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.
nmcfarl 14y ago
A use case would be a document like this one: http://worrydream.com/TenBrighterIdeas/ http://worrydream.com/TenBrighterIdeas/ or this one: http://worrydream.com/ExplorableExplanations/ 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/ http://worrydream.com/Tangle/ , which is used by Fangle.
- seanmcdirmid 14y ago
  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.
  - jfarmer 14y ago
    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/ 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.

est 14y ago

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?

dirkk0 14y ago

This is great! I tweeted this but couldn't add you because I didn't find your twitter name or contact address ...? https://twitter.com/dirkk/status/294333906902196224 https://twitter.com/dirkk/status/294333906902196224

djd 14y ago

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?

jasonm23 14y ago
You can get decent float parsing by doing Number() casting / regex cleanup, instead of parseFloat(). I don't know how tangle does it though
- jotux 14y ago
  I'm using this js sprintf library: http://www.diveintojavascript.com/projects/javascript-sprintf http://www.diveintojavascript.com/projects/javascript-sprint...
  - jasonm23 14y ago
    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.)

jalfresi 14y ago

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.

wodow 14y ago
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/ http://worrydream.com/Tangle/
- jotux 14y ago
  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.

chmike 14y ago

Jeff Atwood suggested to upgrade Markdown in this blog post [1](http://www.codinghorror.com/blog/2012/10/the-future-of-markdown.html http://www.codinghorror.com/blog/2012/10/the-future-of-markd...). Does anyone know where this stands ? Maybe this system could be suggested as an addition to the new Markdown if this is in progress somewhere.

saebekassebil 14y ago

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.