
Treesaver.js - JavaScript library for creating magazine style layouts - macco
http://treesaverjs.com/
======
benjoffe
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.

~~~
bramstein
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>

We'll fix it, thanks for reporting it.

------
hellweaver666
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
It's detecting a horizontal scroll.

------
fortes
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>

------
jashkenas
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/ar...](https://github.com/Treesaver/treesaver/blob/master/src/ui/article.js)

------
giberson
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>

If that could be incorporated then instant win.

~~~
fortes
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).

------
navs
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.

------
paulirish
demo: <http://demo.nomadeditions.com/real-eats/>

Try resizing your browser, or trying it in a mobile device.

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

~~~
trezor
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.

------
bkudria
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
Hi, thanks for the feedback. What browser are you using? I'd like to
investigate the performance problem.

~~~
bkudria
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
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.

------
martharotter
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> or feel free to
contact me

------
collypops
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?

------
toddmorey
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
Try holding down the arrow key (or j/k), goes through pages fairly quickly.

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

------
Renaud
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_
I found both the demos really smooth on my iPad, worked great.

------
spektom
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
That looks like a bug, I've created a ticket for this issue:
<https://github.com/Treesaver/treesaver/issues#issue/147>

Thanks for catching and reporting it.

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

~~~
michaelpinto
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
Got it. Thanks.

------
websta001
"The key is that these magazine-style layouts automatically look great on all
devices."

Exactly. Build once ship on all devices.

------
est
Reminds me of Google Fast Flip

<http://fastflip.googlelabs.com/>

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

------
adnanmahmud
The Wiki is a great place to start

