4 ms·

Fangle: create interactive documents from plain text

154 points by happy-go-lucky 9y ago

elliotec 9y ago
What is this? They used web technologies to try and recreate what the web already does?
- ori_b 9y ago
  It's markdown with widgets.
- gambler 9y ago
  To be fair, "the web" out of the box does jack shit for creating actual interactive documents of this kind. But it's definitely possible to do something similar using HTML as the core markup with the fraction of the code.
rubyfan 9y ago
Interesting concept. The variables seem a little unintuitive to me.
- jotux 9y ago
  Yeah, after I got it working I came to the same conclusion. I started to create a new spec for an easier-to-understand format but never got around to implementing it. https://github.com/jotux/fangle/wiki/Format-ideas https://github.com/jotux/fangle/wiki/Format-ideas
pmarreck 9y ago
HTML5: create interactive documents from plain text!
hellbanner 9y ago
http://twinery.org/ http://twinery.org/
jotux 9y ago
It's a bit weird to see this on the front page again. I did this ~4 years ago just as a proof-of-concept. I thought it would be a neat idea to have a plain-text way of writing forum posts that had calculations embedded. I'm an embedded systems engineer and work almost exclusively in embedded C/C++, so forgive my absolutely awful javascript/coffeescript coding. Previous discussion here: https://news.ycombinator.com/item?id=5107106 https://news.ycombinator.com/item?id=5107106
- djsumdog 9y ago
  Your coffeescript looks a lot like my early Scala code. I basically wrote Java style procedural code using Scala. Over the years I've learned more about functional programming, immutability, mapping collections, etc. I've slowly refactored one of my big projects (removing return statements, using Options instead of null checks, replacing vars with vals, etc.) Looking at your code, my brain is already reordering some of it :-P It looks clean though. I've noticed a lot of devs like to trash on coffeescript in favour of ES6 or TypeScript, but I've really grown to love the language. It's also neat to look at the compiled output and see what it does to make many of the functional elements work. Most of it makes sense.
- agumonkey 9y ago
  Had you new ideas regarding this kind of programs or just stopped thinking about it altogether since ?
gambler 9y ago
The core idea is nice (using simple markup instead of code), but it seems developers these days are completely oblivious to the fact that HTML is extensible and was literally designed to do this kind of stuff. Markdown is better for simple text editing, JSON is better for simple data structures, but HTML is far superior for complex documents where you need to attach structure and behaviors to text. Things it buys you out of the box: - No need to write a parser - You can make complex references via CSS selectors - Your structure (tags) has structure (attributes) - All the existing tooling will help you to debug if something goes wrong. On this note, I regret that HTML5 had thrown away the good ideas from XML (syntax consistency and namespaces) along with the bad (weird sub-formats, entity definitions, directives and other complex crap no one used well anyway).
mathisonian 9y ago
This is cool and has some overlap with a project I'm working on. https://idyll-lang.github.io/ https://idyll-lang.github.io/ Idyll provides this type of reactivity, but focuses more on making it easy for users to embed custom interactive components
- jf___ 9y ago
  impressive, the quality of the documents is stunning, especially when you think of the potential for didactic / documentation purposes. https://mathisonian.github.io/trig/etymology https://mathisonian.github.io/trig/etymology
- vanderZwan 9y ago
  Dammit, why didn't I know about this two weeks ago? This looks like a perfect fit for my flame maps page[0] - it even uses React for custom components. How do you handle dynamically resizing windows/screens and canvas? I had to jump through a whole lot of hoops[1][2] just to get it to play nicely with it Especially on Firefox canvas does not seem to play nicely with flexbox, or any kind of CSS where you don't set the width/height explicitly in pixels. [0] http://linnarssonlab.org/flamemaps/ http://linnarssonlab.org/flamemaps/ [1] https://github.com/linnarsson-lab/flamemaps/blob/master/src/components/canvas.js https://github.com/linnarsson-lab/flamemaps/blob/master/src/... [2] https://github.com/linnarsson-lab/flamemaps/blob/master/src/components/remount.js https://github.com/linnarsson-lab/flamemaps/blob/master/src/...
m-ou-se 9y ago
This made me laugh: "His power level is [3000.1]. That's 0.09999999999990905 more than 3000."
laythea 9y ago
What is the point? Why reinvent the wheel? HTML is text. Or do I miss something?

elliotec 9y ago

What is this? They used web technologies to try and recreate what the web already does?

ori_b 9y ago
It's markdown with widgets.
gambler 9y ago
To be fair, "the web" out of the box does jack shit for creating actual interactive documents of this kind. But it's definitely possible to do something similar using HTML as the core markup with the fraction of the code.

rubyfan 9y ago

Interesting concept. The variables seem a little unintuitive to me.

jotux 9y ago
Yeah, after I got it working I came to the same conclusion. I started to create a new spec for an easier-to-understand format but never got around to implementing it. https://github.com/jotux/fangle/wiki/Format-ideas https://github.com/jotux/fangle/wiki/Format-ideas

pmarreck 9y ago

HTML5: create interactive documents from plain text!

hellbanner 9y ago

http://twinery.org/ http://twinery.org/

jotux 9y ago

It's a bit weird to see this on the front page again. I did this ~4 years ago just as a proof-of-concept. I thought it would be a neat idea to have a plain-text way of writing forum posts that had calculations embedded. I'm an embedded systems engineer and work almost exclusively in embedded C/C++, so forgive my absolutely awful javascript/coffeescript coding. Previous discussion here: https://news.ycombinator.com/item?id=5107106 https://news.ycombinator.com/item?id=5107106

djsumdog 9y ago
Your coffeescript looks a lot like my early Scala code. I basically wrote Java style procedural code using Scala. Over the years I've learned more about functional programming, immutability, mapping collections, etc. I've slowly refactored one of my big projects (removing return statements, using Options instead of null checks, replacing vars with vals, etc.) Looking at your code, my brain is already reordering some of it :-P It looks clean though. I've noticed a lot of devs like to trash on coffeescript in favour of ES6 or TypeScript, but I've really grown to love the language. It's also neat to look at the compiled output and see what it does to make many of the functional elements work. Most of it makes sense.
agumonkey 9y ago
Had you new ideas regarding this kind of programs or just stopped thinking about it altogether since ?

gambler 9y ago

The core idea is nice (using simple markup instead of code), but it seems developers these days are completely oblivious to the fact that HTML is extensible and was literally designed to do this kind of stuff. Markdown is better for simple text editing, JSON is better for simple data structures, but HTML is far superior for complex documents where you need to attach structure and behaviors to text. Things it buys you out of the box: - No need to write a parser - You can make complex references via CSS selectors - Your structure (tags) has structure (attributes) - All the existing tooling will help you to debug if something goes wrong. On this note, I regret that HTML5 had thrown away the good ideas from XML (syntax consistency and namespaces) along with the bad (weird sub-formats, entity definitions, directives and other complex crap no one used well anyway).

mathisonian 9y ago

This is cool and has some overlap with a project I'm working on. https://idyll-lang.github.io/ https://idyll-lang.github.io/ Idyll provides this type of reactivity, but focuses more on making it easy for users to embed custom interactive components

jf___ 9y ago
impressive, the quality of the documents is stunning, especially when you think of the potential for didactic / documentation purposes. https://mathisonian.github.io/trig/etymology https://mathisonian.github.io/trig/etymology
vanderZwan 9y ago
Dammit, why didn't I know about this two weeks ago? This looks like a perfect fit for my flame maps page[0] - it even uses React for custom components. How do you handle dynamically resizing windows/screens and canvas? I had to jump through a whole lot of hoops[1][2] just to get it to play nicely with it Especially on Firefox canvas does not seem to play nicely with flexbox, or any kind of CSS where you don't set the width/height explicitly in pixels. [0] http://linnarssonlab.org/flamemaps/ http://linnarssonlab.org/flamemaps/ [1] https://github.com/linnarsson-lab/flamemaps/blob/master/src/components/canvas.js https://github.com/linnarsson-lab/flamemaps/blob/master/src/... [2] https://github.com/linnarsson-lab/flamemaps/blob/master/src/components/remount.js https://github.com/linnarsson-lab/flamemaps/blob/master/src/...

m-ou-se 9y ago

This made me laugh: "His power level is [3000.1]. That's 0.09999999999990905 more than 3000."

laythea 9y ago

What is the point? Why reinvent the wheel? HTML is text. Or do I miss something?