Treesaver.js - JavaScript library for creating magazine style layouts | Hacker News Reader

Treesaver.js - JavaScript library for creating magazine style layouts

treesaverjs.com

197 pointsmacco39 comments

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.

Confirmed, Chrome on Windows 7.

Confirmed, Chrome 9.0.597.84 on Ubuntu 10.04.

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.

Looks like it's an issue on all Chrome installations Confirmed, Chrome (Ubuntu 9.10)

Chrome 10 (dev channel) on Mac, no problems here.

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.

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.

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

It's detecting a horizontal scroll.

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

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

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.

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

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.

demo: http://demo.nomadeditions.com/real-eats/

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

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

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.

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.

Hi, thanks for the feedback. What browser are you using? I'd like to investigate the performance problem.

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.

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.

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

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?

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?

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

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

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.

I found both the demos really smooth on my iPad, worked great.

Doesn't look good in Opera:

http://tinypic.com/view.php?pic=2nrkivp&s=7

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.

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

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

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.

Got it. Thanks.

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

Exactly. Build once ship on all devices.

Reminds me of Google Fast Flip

http://fastflip.googlelabs.com/

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

The Wiki is a great place to start

Reply on news.ycombinator.com