8 ms·

Treesaver.js - JavaScript library for creating magazine style layouts

197 points by macco 16y ago

paulirish 16y ago
demo: http://demo.nomadeditions.com/real-eats/ http://demo.nomadeditions.com/real-eats/ Try resizing your browser, or trying it in a mobile device.
teyc 16y ago
Nicely done. It renders beautifully on my Android. Smooth animation to boot, and it's not even version 1.
- trezor 16y ago
  Actually it runs better on my android than in stock Chrome on a reasonable powerful workstation. I get flicker, slow response and no visible animation between pages in Chrome. Seeing this I expected the worst when trying it on my phone, but there it actually runs quite fine.
benjoffe 16y ago
Maybe there's something wrong with my setup, but their 2nd example flashed on/off very quickly about 15 times, really quite a disturbing bug. Anyone else get that? edit: others who confirm are using chrome, I'm using chrome on mac so it looks like latest chrome on all platforms are affected.
- dekz 16y ago
  Confirmed, Chrome on Windows 7.
- wmwong 16y ago
  Confirmed, Chrome 9.0.597.84 on Ubuntu 10.04.
- corin_ 16y ago
  No issues in FF 3.6.13 on Win7, or in IE 9.0.7930.16406 (beta). In Chome 8.0.552.237 (also Win7) I got nothing on loading, but it did do the flashing thing five times on page three. Haven't been able to replicate it since on any page, though.
- es 16y ago
  Looks like it's an issue on all Chrome installations Confirmed, Chrome (Ubuntu 9.10)
- swah 16y ago
  Chrome 10 (dev channel) on Mac, no problems here.
- bramstein 16y ago
  I had a look at the problem and it seems to be related to the page transition animations (the amount of flicker seems corresponds to the animation steps.) I've created a ticket for this issue: https://github.com/Treesaver/treesaver/issues/issue/148 https://github.com/Treesaver/treesaver/issues/issue/148 We'll fix it, thanks for reporting it.
- 9ec4c12949a4f3 16y ago
  Confirmed, Chrome on Windows Vista. Excellent application by the way-- if you can fix this, and it's easy to implement, I'd make this my suggested preference over PDF for companies with newsletters etc, doubly so if you can get a metrics engine tied in so we can see what's interesting to the user.
- nitrogen 16y ago
  I didn't notice any unusual flickering in Chrome 10 on Ubuntu. Maybe it's been fixed in the 14 hours since you first saw the problem? Also, re: 9ec4c12949a4f3 (since I can't reply directly): I prefer continuously flowing text to paginated layouts. One of the things I like about the web is that I can choose the size of the chunks I read, rather than having a page layout defined for me. However, I do agree that an HTML-based paginated layout would be preferable to PDF for many things.
est 16y ago
Reminds me of Google Fast Flip http://fastflip.googlelabs.com/ http://fastflip.googlelabs.com/
narad 16y ago
Great find. But, I have seen Google doing similar thing using HTML5 entirely. I wonder what would be the difference between this and HTML5.
- benjoffe 16y ago
  > Great find. But, I have seen Google doing similar thing using HTML5 entirely. "HTML5 entirely" doesn't really mean much, for example my website uses mostly HTML 4.01, but is HTML5 as well (since it's mostly backwards compatible). eg. If you're using <div> tags then you're using HTML5.
- michaelpinto 16y ago
  This is more for doing layout techniques so it's more of a library where HTML5 is a markup language. You should think of this more like jQuery.
  - narad 16y ago
    Got it. Thanks.
hellweaver666 16y ago
Not bad, I like how the pages responded to two finger swipes on my Mac trackpad - I did it without thinking and it worked!
- btipling 16y ago
  It's detecting a horizontal scroll.
spektom 16y ago
Doesn't look good in Opera: http://tinypic.com/view.php?pic=2nrkivp&s=7 http://tinypic.com/view.php?pic=2nrkivp&s=7
- bramstein 16y ago
  That looks like a bug, I've created a ticket for this issue: https://github.com/Treesaver/treesaver/issues#issue/147 https://github.com/Treesaver/treesaver/issues#issue/147 Thanks for catching and reporting it.
Renaud 16y ago
Looks nice but sliding pages back and forth is really jerky on a iPad. Interesting project through, especially for slate devices for which the navigation is pretty natural.
- corin_ 16y ago
  I found both the demos really smooth on my iPad, worked great.
fortes 16y ago
Thanks all, author here (along w/ bramstein). The documentation and site aren't quite ready yet, but we're getting there. If you're curious to see how to use the framework, your best bet is to start with this tutorial we're working on: https://github.com/Treesaver/treesaver/wiki/Walkthrough https://github.com/Treesaver/treesaver/wiki/Walkthrough
btipling 16y ago
I like the scroll and history support. Nice touches. It is very well done.
jashkenas 16y ago
If you have a minute, take a peek at the code -- really nice JavaScript style, especially for fiddly UI work: https://github.com/Treesaver/treesaver/blob/master/src/ui/article.js https://github.com/Treesaver/treesaver/blob/master/src/ui/ar...
navs 16y ago
I've been waiting for this release ever since the first demo. Looking forward to seeing more examples and documentation. Playing with the walkthrough, I'm amazed with the performance on my aging iPhone3G.
giberson 16y ago
Nice work so far, but from the demos it's missing an important layout feature commonly seen in magazines. Spanning an image or text insert half way between two columns and having the text of the columns flow around it. A quick example I found in a google image search: http://irenevilar.com/images/uploads/elle_p1.jpg http://irenevilar.com/images/uploads/elle_p1.jpg If that could be incorporated then instant win.
- fortes 16y ago
  I would love to support this, but we don't right now due to performance reasons. Dirty laundry: Each paragraph is laid out and measured only once (at a specific column width), then the metrics are all cached. Layout is then performed by dumping paragraphs into each column and just clipping whatever overflows. The advantage is that this process is very fast, even on a mobile device. Try resizing a window and notice how quick the re-layout is. The downside is that certain layouts are not possible right now, such as the example you've shown. As browsers get faster, we'd like to start doing our own line layout, which would let us do far more here (with a performance penalty, unfortunately).
toddmorey 16y ago
I love great layout and I think this is impressively done. However, shuffling through pages somehow felt like more work to me than scrolling the same type of content on a webpage. I think that's because you can't really accelerate to skim. Am I alone in that thinking?
- fortes 16y ago
  Try holding down the arrow key (or j/k), goes through pages fairly quickly.
bkudria 16y ago
This is horrible on a real laptop - I have to scroll for ages before anything moves, and there is no scrollbar to indicate what is going on.
- fortes 16y ago
  Hi, thanks for the feedback. What browser are you using? I'd like to investigate the performance problem.
  - bkudria 16y ago
    I'm using Chrome on the latest Ubuntu. It's not a performance problem at all, the transitions are smooth and beautiful (and on this laptop, they had better be!) The issue seems to be that the transition occurs only at certain scroll points on the page, and there is zero feedback where those are - so it's scroll, scroll, scroll, and suddenly, bam transition to the next page. It doesn't help that the intervals between the pages seem to be ridiculously long.
    - scottkellum 16y ago
      Unfortunately some mice/trackpads output a stream of scroll events. There is a limiter here to prevent unintentionally streaming all the way through a publication. Thanks for your feedback, maybe we can adjust the limiter a little.
savrajsingh 16y ago
Awesome. In case you missed it, The key is that these magazine-style layouts automatically look great on all devices.
websta001 16y ago
"The key is that these magazine-style layouts automatically look great on all devices." Exactly. Build once ship on all devices.
adnanmahmud 16y ago
The Wiki is a great place to start
collypops 16y ago
I can honestly say, I have not been this excited about a project (or its potential uses) in a _long_ time. I'm now weighing up potential back-ends to turn this thing into a database-driven publishing framework, rather than a file-based one. Am I crazy, or has anyone else considered (or already acted upon) this?
martharotter 16y ago
For anyone who is excited about Treesaver and wants to start working with it full-time, Nomad Editions (Treesaver client) are looking for a developer proficient in JS/CSS/HTML. More info here: http://news.ycombinator.com/item?id=2168659 http://news.ycombinator.com/item?id=2168659 or feel free to contact me

197 points by macco 16y ago

demo: http://demo.nomadeditions.com/real-eats/ http://demo.nomadeditions.com/real-eats/ Try resizing your browser, or trying it in a mobile device.

teyc 16y ago

Nicely done. It renders beautifully on my Android. Smooth animation to boot, and it's not even version 1.

trezor 16y ago
Actually it runs better on my android than in stock Chrome on a reasonable powerful workstation. I get flicker, slow response and no visible animation between pages in Chrome. Seeing this I expected the worst when trying it on my phone, but there it actually runs quite fine.

benjoffe 16y ago

Maybe there's something wrong with my setup, but their 2nd example flashed on/off very quickly about 15 times, really quite a disturbing bug. Anyone else get that? edit: others who confirm are using chrome, I'm using chrome on mac so it looks like latest chrome on all platforms are affected.

dekz 16y ago
Confirmed, Chrome on Windows 7.
wmwong 16y ago
Confirmed, Chrome 9.0.597.84 on Ubuntu 10.04.
corin_ 16y ago
No issues in FF 3.6.13 on Win7, or in IE 9.0.7930.16406 (beta). In Chome 8.0.552.237 (also Win7) I got nothing on loading, but it did do the flashing thing five times on page three. Haven't been able to replicate it since on any page, though.
es 16y ago
Looks like it's an issue on all Chrome installations Confirmed, Chrome (Ubuntu 9.10)
swah 16y ago
Chrome 10 (dev channel) on Mac, no problems here.
bramstein 16y ago
I had a look at the problem and it seems to be related to the page transition animations (the amount of flicker seems corresponds to the animation steps.) I've created a ticket for this issue: https://github.com/Treesaver/treesaver/issues/issue/148 https://github.com/Treesaver/treesaver/issues/issue/148 We'll fix it, thanks for reporting it.
9ec4c12949a4f3 16y ago
Confirmed, Chrome on Windows Vista. Excellent application by the way-- if you can fix this, and it's easy to implement, I'd make this my suggested preference over PDF for companies with newsletters etc, doubly so if you can get a metrics engine tied in so we can see what's interesting to the user.
nitrogen 16y ago
I didn't notice any unusual flickering in Chrome 10 on Ubuntu. Maybe it's been fixed in the 14 hours since you first saw the problem? Also, re: 9ec4c12949a4f3 (since I can't reply directly): I prefer continuously flowing text to paginated layouts. One of the things I like about the web is that I can choose the size of the chunks I read, rather than having a page layout defined for me. However, I do agree that an HTML-based paginated layout would be preferable to PDF for many things.

est 16y ago

Reminds me of Google Fast Flip http://fastflip.googlelabs.com/ http://fastflip.googlelabs.com/

narad 16y ago

Great find. But, I have seen Google doing similar thing using HTML5 entirely. I wonder what would be the difference between this and HTML5.

benjoffe 16y ago
> Great find. But, I have seen Google doing similar thing using HTML5 entirely. "HTML5 entirely" doesn't really mean much, for example my website uses mostly HTML 4.01, but is HTML5 as well (since it's mostly backwards compatible). eg. If you're using <div> tags then you're using HTML5.
michaelpinto 16y ago
This is more for doing layout techniques so it's more of a library where HTML5 is a markup language. You should think of this more like jQuery.
- narad 16y ago
  Got it. Thanks.

hellweaver666 16y ago

Not bad, I like how the pages responded to two finger swipes on my Mac trackpad - I did it without thinking and it worked!

btipling 16y ago
It's detecting a horizontal scroll.

spektom 16y ago

Doesn't look good in Opera: http://tinypic.com/view.php?pic=2nrkivp&s=7 http://tinypic.com/view.php?pic=2nrkivp&s=7

bramstein 16y ago
That looks like a bug, I've created a ticket for this issue: https://github.com/Treesaver/treesaver/issues#issue/147 https://github.com/Treesaver/treesaver/issues#issue/147 Thanks for catching and reporting it.

Renaud 16y ago

Looks nice but sliding pages back and forth is really jerky on a iPad. Interesting project through, especially for slate devices for which the navigation is pretty natural.

corin_ 16y ago
I found both the demos really smooth on my iPad, worked great.

fortes 16y ago

Thanks all, author here (along w/ bramstein). The documentation and site aren't quite ready yet, but we're getting there. If you're curious to see how to use the framework, your best bet is to start with this tutorial we're working on: https://github.com/Treesaver/treesaver/wiki/Walkthrough https://github.com/Treesaver/treesaver/wiki/Walkthrough

btipling 16y ago

I like the scroll and history support. Nice touches. It is very well done.

jashkenas 16y ago

If you have a minute, take a peek at the code -- really nice JavaScript style, especially for fiddly UI work: https://github.com/Treesaver/treesaver/blob/master/src/ui/article.js https://github.com/Treesaver/treesaver/blob/master/src/ui/ar...

navs 16y ago

I've been waiting for this release ever since the first demo. Looking forward to seeing more examples and documentation. Playing with the walkthrough, I'm amazed with the performance on my aging iPhone3G.

giberson 16y ago

Nice work so far, but from the demos it's missing an important layout feature commonly seen in magazines. Spanning an image or text insert half way between two columns and having the text of the columns flow around it. A quick example I found in a google image search: http://irenevilar.com/images/uploads/elle_p1.jpg http://irenevilar.com/images/uploads/elle_p1.jpg If that could be incorporated then instant win.

fortes 16y ago
I would love to support this, but we don't right now due to performance reasons. Dirty laundry: Each paragraph is laid out and measured only once (at a specific column width), then the metrics are all cached. Layout is then performed by dumping paragraphs into each column and just clipping whatever overflows. The advantage is that this process is very fast, even on a mobile device. Try resizing a window and notice how quick the re-layout is. The downside is that certain layouts are not possible right now, such as the example you've shown. As browsers get faster, we'd like to start doing our own line layout, which would let us do far more here (with a performance penalty, unfortunately).

toddmorey 16y ago

I love great layout and I think this is impressively done. However, shuffling through pages somehow felt like more work to me than scrolling the same type of content on a webpage. I think that's because you can't really accelerate to skim. Am I alone in that thinking?

fortes 16y ago
Try holding down the arrow key (or j/k), goes through pages fairly quickly.

bkudria 16y ago

This is horrible on a real laptop - I have to scroll for ages before anything moves, and there is no scrollbar to indicate what is going on.

fortes 16y ago
Hi, thanks for the feedback. What browser are you using? I'd like to investigate the performance problem.
- bkudria 16y ago
  I'm using Chrome on the latest Ubuntu. It's not a performance problem at all, the transitions are smooth and beautiful (and on this laptop, they had better be!) The issue seems to be that the transition occurs only at certain scroll points on the page, and there is zero feedback where those are - so it's scroll, scroll, scroll, and suddenly, bam transition to the next page. It doesn't help that the intervals between the pages seem to be ridiculously long.
  - scottkellum 16y ago
    Unfortunately some mice/trackpads output a stream of scroll events. There is a limiter here to prevent unintentionally streaming all the way through a publication. Thanks for your feedback, maybe we can adjust the limiter a little.

savrajsingh 16y ago

Awesome. In case you missed it, The key is that these magazine-style layouts automatically look great on all devices.

websta001 16y ago

"The key is that these magazine-style layouts automatically look great on all devices." Exactly. Build once ship on all devices.

adnanmahmud 16y ago

The Wiki is a great place to start

collypops 16y ago

I can honestly say, I have not been this excited about a project (or its potential uses) in a _long_ time. I'm now weighing up potential back-ends to turn this thing into a database-driven publishing framework, rather than a file-based one. Am I crazy, or has anyone else considered (or already acted upon) this?

martharotter 16y ago

For anyone who is excited about Treesaver and wants to start working with it full-time, Nomad Editions (Treesaver client) are looking for a developer proficient in JS/CSS/HTML. More info here: http://news.ycombinator.com/item?id=2168659 http://news.ycombinator.com/item?id=2168659 or feel free to contact me