Treesaver.js - JavaScript library for creating magazine style layouts

http://treesaverjs.com/

by macco • 15 years ago

197 39 15 years ago

treesaverjs.com

paulirish• 15 years ago

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

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

teyc• 15 years ago

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

trezor• 15 years 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.

benjoffe2• 15 years 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• 15 years ago

Confirmed, Chrome on Windows 7.

wmwong• 15 years ago

Confirmed, Chrome 9.0.597.84 on Ubuntu 10.04.

corin_2• 15 years 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• 15 years ago

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

swah• 15 years ago

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

bramstein2• 15 years 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

We'll fix it, thanks for reporting it.

nitrogen• 15 years 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• 15 years ago

Reminds me of Google Fast Flip

http://fastflip.googlelabs.com/

narad2• 15 years 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.

benjoffe2• 15 years 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• 15 years 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.

narad2• 15 years ago

Got it. Thanks.

hellweaver666• 15 years 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!

btipling2• 15 years ago

It's detecting a horizontal scroll.

spektom• 15 years ago

Doesn't look good in Opera:

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

bramstein2• 15 years ago

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.

Renaud• 15 years 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_2• 15 years ago

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

fortes4• 15 years 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

btipling2• 15 years ago

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

jashkenas• 15 years 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/ar...

navs• 15 years 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• 15 years 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

If that could be incorporated then instant win.

fortes4• 15 years 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• 15 years 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?

fortes4• 15 years ago

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

bkudria2• 15 years 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.

fortes4• 15 years ago

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

bkudria2• 15 years 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.

savrajsingh• 15 years ago

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

websta001• 15 years ago

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

Exactly. Build once ship on all devices.

adnanmahmud• 15 years ago

The Wiki is a great place to start

collypops• 15 years 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• 15 years 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 or feel free to contact me

Treesaver.js - JavaScript library for creating magazine style layouts

Related Stories