Show HN: Bubblin – Next-generation books

by IpxqwidxG • 11 years ago

65 45 11 years ago

IpxqwidxG8• 11 years ago

Hello, Hacker News!

My name is Marvin (see: https://marvindanig.com/), and I just released the first version of Bubblin, my project for superbooks. https://bubbl.in/.

Bubblin is all about gorgeous e-books that are possible simply because of the web. You can use it like codepen (a code playground) to write the pages of your book, and publish it like a blog. It can be a lot of fun, I mean serious fun, to do stories/book via code.

For example, I wrote this ~full book on The Solar System:

https://bubbl.in/cover/the-solar-system-by-marvin-danig

... which was supposed to be a small demo initially. I'd initially planned for only 10-15 pages but I ended up writing the whole book instead!

All the code of this superbook is available on Github under MIT license if you want to play:

https://github.com/bubblin/The-Solar-System

Bubblin is pretty basic as of now, but it has a great feel to it. I expect the books to work silky on iPads/tablets but given it's a web approach support is sorta okayish on most platforms - mobile or desktop. I'm not too worried about it right now, but I would love some help/advise on making it omnipresent on any and every device in the world.

I hope you like the project. Good/bad whichever way, help me with your feedback and ideas please!

Yo! - M

Edits: Edited links, 'coz no markdown on HN :(

cmews• 11 years ago

It looks great and I love the concept. Does it support epub format? If this is possible it is easy to write markdown on leanpub (export to epub format) and use bubbl.in for the perfect examples in javascript which would be a killer combination.

vidarh3• 11 years ago

Bubblin is all about gorgeous e-books that are possible simply because of the web.

They're possible because of the web, but they're also unnecessary because of the web. To me, the reader presents as unnecessary annoying constraints that I'll tolerate if I'm e.g. reading PDFs that were actually formatted for a specific paper size (tolerate, not like), but which seems just silly when reading content that was clearly meant to be shown on screen.

Also: hate,hate,hate page-flip animations - either they slow down the page transition, or they're there to obscure a too-slow page transition; either way they get in the way of the experience very quickly.

Overall, on my desktop, it wastes too much screen space to margins and too large text (and another pet peeve: breaking text zoom is a big no-no; to zoom out it eventually work after zooming multiple levels, but of course then don't re-flow, but zooming in is basically broken). On my phone (which is my primary device for reading books) the experience feels excruciatingly slow thanks to the page flips.

It baffles me how many e-book readers are around, and how few even get close to getting even the fundamental stuff right. If you want to innovate in the e-book space: Make a reader that's faster and smoother than the Kindle app for the basics first, and then add features without at any point sacrificing things like zoom, fast page-flips, adjustable contrast and text-reflow.

monsterix• 11 years ago

Make a reader that's faster and smoother than the Kindle app...

Except that Kindle isn't any of those. Neither fast, nor smooth. But that's a kool-aid you've been drinking for too long. And even believe that books should not come on the web and have their own native experience.

Also: hate,hate,hate page-flip animations - either they slow down the page transition, or they're there to obscure a too-slow page transition; either way they get in the way of the experience very quickly

It's all hatred and propaganda my friend.

Page-flips are an important experience of books, even iBooks has it! And I like it that way. I just checked on this one that transitions are close to 60fps. Agree with you on zoom-in part though, but then I'm reading it on my iPad so I don't need zooming so much.

They're possible because of the web, but they're also unnecessary because of the web.

I'm afraid that is not your decision to make. It is absolutely necessary and does good for the children to move beyond stuck up books that are locked in time and technology of 15 years ago.

I wonder what do you have to say about that?

bryanrasmussen2• 11 years ago

Hi, I like it, but not so much in the browser - I am expecting you will be making some sort of library app or make it possible to export directly to iBooks / epub at some point? If so I think it's great in the browser then exists as a fallback / place to check out the book before you actually put it on your device. In the browser itself the whole book metaphor has always seemed cumbersome - is the code for that modular enough that it could be easily switched out with other interfaces? I am envisioning it as sort of theming the 'book'

IpxqwidxG8• 11 years ago

Native apps are planned. Here I answer some of these questions about us: https://bubbl.in/faq

I believe that it must be simple for the book writers to create, publish and sell. And probably have an extra legroom for creativity too -- using the power of the web and all that.

I have some rough ideas on where and how we'll proceed towards integration with other formats/platforms. But this is a fairly large undertaking, so I'm gonna need all the help and guidance we can get.

Note, Bubblin is FREE for the authors, a non-profit, so we need financial aid too. Read more about us here and donate if you like:

https://bubbl.in/foundation

mdup• 11 years ago

Nice job! I like the idea and the implementation. A not-so-minor nitpick though: I have a decent recent laptop yet the Solar System book takes forever to load on Firefox (29s including 25s where the whole UI thread is blocked.) Maybe some kind of lazy loading would help?

panglott3• 11 years ago

Thanks for this link. I really hate it when Web site splash screens fail/refuse to show you what they're about unless you sign up.

And sorry, but the page-flipping animation immediately puts me in a critical mood: it's not even subtle, it's a really over-the-top one. It blocks highlighting/selecting text, which negates the main value of reading electronic books: immediate access to dictionaries, encyclopedias, and reference sources.

I don't like the narrow, san-serif font. A good san-serif font can be quite clean and readable, but this one is too narrow IMO.

The drop cap words look terrible, typographically, misaligned and jarring. I don't understand why you're (inconsistently?) using drop cap words, initial drop caps, and paragraph headings without drop caps. The style is all over the place.

The animated illustrations are great! They add a ton of useful information to the text.

IpxqwidxG8• 11 years ago

The animated illustrations are great! They add a ton of useful information to the text.

Thanks! I'm glad you liked those... :-)

I too prefer clean san-serif usually. For this one I chose a narrow @font-face to do some analysis. No worries it's just a demo book.

Web site splash screens fail/refuse to show you what they're about unless you sign up.

It's not a splash screen. It's a plain home page with a direct link to the about page at the center. You don't have to sign_up to learn about us or me. In fact you don't even have to sign up to read the entire book there!

Here, let me relink it for you: https://bubbl.in/about

If it's a book then page flip is a must. There's is no escaping that. Else it's a slideshow. But I do know a lot of people who prefer slides/powerpoint presentations over books.

armandososa• 11 years ago

Hi Marvin!

I used to work at a web reader platform and we found that this page flipping animations a) are very hard to do well, b) are bad for performance and c) people HATE them.

As you can see, people ignore everything else and just focus on how much they hate the page metaphor when in fact I think what you've done with the inline visualisations is pretty cool. So, I'd advise you to consider ditching it.

wingerlang• 11 years ago

What's the purpose of emulating a physical book?

Slackwise• 11 years ago

"Let's move forward, by moving backwards!"

The web is already a document system.

It doesn't need to be skeuomorphically constrained into a 'book' with cute page turning animations, and no ability to use a scroll wheel, shift-space to go back (looks like `space` is hardcoded in his script, but only works half the time), or any of the features you already have in a browser. (I wonder how accessible it is in a Screen Reader, too.)

x5n1• 11 years ago

this will be really cool once we can get physical books like these. which i doubt is that far away. it will be all the future we were promised.

sixQuarks• 11 years ago

I agree. The true next generation book will feel, look, and function just like a book. Resolution will be perfect, no eye strain, full color. Just like looking at a magazine.

yissachar• 11 years ago

Very cool!

On page 17 of the Solar System book I want to rotate the globe but can't manage to do that without also initiating a page flip, which is pretty annoying.

Also, the formula rendering on page 21 is not quite right (Firefox).

IpxqwidxG8• 11 years ago

Touch it very lightly, like a feather. Or hold it strongly and then roll it along with the page, then take your fingers off. It should work. That it is curling up is the expected behavior so you're just fine there!

Mathjax is loading/rendering a bit incorrectly on FF, for we're hammered right now. Will fix!

QuantumRoar• 11 years ago

Yeah, equations seem to be completely broken on Firefox. Is there a reason you use Mathjax?

Personally, I prefer using LaTeX -> PDF -> SVG and simply including them as images. Nothing's going to break with that, I guess.

gosub• 11 years ago

I wish there was a light markup language for this kind of work. Something like: markdown + a less verbose SVG for static illustrations + elm for the interactive part

bborud• 11 years ago

I don't really get it. This is an interface inside an interface with its own custom behaviors and just a few pages in I get to the TOC, click a page and I'm presented with a popup that tries its best to confuse me. Yes, the animations are cute and stuff, but really: why do I want another reader-within-the-browser book reader? There's already good reason I don't use the ones that came before it.

weego• 11 years ago

Wow did we already forget all the lessons from years of developers abusing UIs with Flash?

boogdan• 11 years ago

I love it, however I have some suggestions:

1. Please, please use the metric system units or at least add both the imperial and the metric when you explain something. For example the Earth's rotation is in mph...you can at least say: 1000mph (1,674.4km/h).

2. On the Sun's chapter, you drew it yellow. Well, this is a common misconception, however the Sun is essentially all colors mixed together, which appear to our eyes as white.

3. There are too many links that forces the reader to constantly deviate from what he reads, thus killing the experience. You can come up with something similar to Apple's "look up" functionality [1]

4. No love for Pluto :(

[1]http://i.imgur.com/CWgjdCU.png

bryanrasmussen2• 11 years ago

You can fork the book on github, so you can make the changes and then send him a pull request :)

IpxqwidxG8• 11 years ago

Hey thanks for the awesome thoughts on the book!

1. Please, please use the metric system units ... 1000mph (1,674.4km/h).

Absolutely. Will do!

On the Sun's chapter, you drew it yellow.

Oh yes, it's actually bright intolerable white once you're outside the atmosphere. I wrote this book for my nephew and he totally loves sitting next to me when we do these creatives. So I'm gonna leave it like that for now and revisit later in the day (it's 5:30 am here in DC!) with him.

There are too many links that forces the reader to constantly deviate from what he reads ...

I realized it midway that traversal would be more-or-less linear and then reduced the number of anchor links per page later on. I guess I'm gonna leave it on the writers to choose what's best for their book. Will come back on the look_up feature later, but thanks for sharing your insight here.

4. No love for Pluto :(

There will be love for the dwarfs very soon! :-)

=====

Meanwhile, to those who are unhappy about the idea of having books with flipping animation on the browser, here's a little note: A lot of kids, especially my nephews, love it. It might be that you are not the right audience for it, but kids really love flipping the page as it is. And they love the animations and visuals within too. There's a reason why Apple chose to have flipping behavior for iBooks - cuz otherwise it'd feel more like a slideshow. Fast/performant is another thing, but books must have a bifolia experience that flips comfortably at a soft reading pace. There is no doubt about that.

While I understand the passion with which people want to impress what should or shouldn't be on the web, but there's no point making it a turf war. There have been several occasions where exactly the same thing - i.e. books - have been appreciated by hackernews on the browser itself. By the very same people who at other times chose to batter the idea.

For example, this book on Startup School Doodles from my friend Greg Koberger was loved invariably by all of you:

https://news.ycombinator.com/item?id=8449652

So it's all a matter of context and audience.

vidarh3• 11 years ago

Fast/performant is another thing, but books must have a bifolia experience that flips comfortably at a soft reading pace. There is no doubt about that.

I don't doubt that some like it, and that it's an important option to have, but likewise it is important to offer the ability to turn it off, or you will lose people like me that will outright refuse to deal with your books if I have to suffer through page flipping animations. I've discarded dozens (and this is not an exaggeration) e-book readers over page-flipping behaviour, because when dealing with e-books, page flipping behaviour is one of the most noticeable UI behaviours.

I car about pretty much these things in an e-book reader: page-flipping behaviour, speed, text-zoom/reflow, ability to set contrast freely (including invert to light on black background), and well rendered/readable fonts. Everything else is secondary. Animations and interactivity can be fun, but a reader that fails on any of those items is a reader I'll never use.

panglott3• 11 years ago

Yea, the page-flipping behavior is my least favorite thing about iBooks vs. Kindle.

I wonder if there are really good technical reasons for it, or merely if iBooks was developed during the era when Apple still liked skeuomorphic designs.

jobigoud• 11 years ago

1000mph (1,674.4km/h)

Could we all agree to use a space (or nothing) as the separator for thousands? In French culture this is read as less than 2 km/h.

unexpected• 11 years ago

I would expect a book written in French to follow French conventions, unfortunately, in English (American), a space would read as very confusing!

Frozenlock• 11 years ago

Right:

"A space should be left between groups of 3 digits on either the right or left hand side of the decimal place (15 739.012 53). In four digit numbers the space may be omitted. Commas should not be used."

http://www.npl.co.uk/reference/measurement-units/si-conventi...

In addition, put the odd unit in parentheses, not the SI one.

1 674.4 km/h (1000 mph)

sdrothrock• 11 years ago

First, I love the concept. I've often been reading interesting books and wished I could dynamically jump through them. I've even wanted to do this in fiction -- for example, if characters reference something I forgot about, I wish I could just click that and go back to that original chapter/scene and refresh my memory.

I suspect that any UI awkwardness will be growing pains caused by it being a new idea for books.

Technical Issue

1. I click a planet expecting to go to a chapter about that planet (say, Saturn), but nothing happens despite the page reloading and the address bar changing to #saturn. Chrome 43 on OS X 10.10.

Content Issues

1. I love the animated cover, but it wish it had relatively accurate orbits and periods (within reason). One of the coolest things for me as a kid was realizing that Pluto and Neptune switch places.

2. The summary for the book says "all ages," but very shortly in you have a bunch of math and symbols that don't make sense unless you've already had geometry.

3. The homepage presents Bubblin as "for developers," which doesn't seem to fit. Do you want authors to present books (as suggested by your own), or do you want developers to use it to present stuff (documentation, use cases, white papers?) about development? It's also at odds with your statement "Meanwhile, to those who are unhappy about the idea of having books with flipping animation on the browser, here's a little tip: A lot of kids, especially my nephews, love it," so I feel like there's a little bit of confusion about the audience. :)

A nice idea/platform! I just wish I had something to use it for.

IpxqwidxG8• 11 years ago

The homepage presents Bubblin as "for developers," which doesn't seem to fit.

Fixed and deployed.

It's an authoring platform for superbooks. The zing here is that authors can write HTML, CSS and JavaScript to produce the pages of their book. Hence the term developers is used interchangeably.

bejuizb2• 11 years ago

Fantastic stuff! Truly novel reading experience.

The biggest challenge for you to build tools around this. Expecting writers to know basic web development is a huge ask. You need a tool like Adobe Indesign [1] or Amazon's Kindle book publishing tools[2]. The second challenge is to go cross platform/device. The biggest challenge here, to reduce the size of the entire artifact book and not just rendering speed/quality.

[1]http://blogs.adobe.com/creativecloud/publishing-for-everyone...

[2] https://kdp.amazon.com/help?topicId=A3IWA2TQYMZ5J6

sktrdie• 11 years ago

Doesn't iBooks Author already provide a platform to develop interactive books? https://www.apple.com/ibooks-author/

bejuizb2• 11 years ago

Yes it does. Missed it. But obviously gets restricted to an Apple only platform.

kraftman• 11 years ago

From the contents page, if i click on say page 22, it opens in a new tab and pops up saying 'you left off on page 13', then has the options to go back to page 13 or the beginning. It isn't obvious that to actually get to 22 I need to close that window, and im not sure why it has to open a new tab rather than just go to that page?

ctvo• 11 years ago

Forcing me to click around 3+ times to even find out what this is about makes me regret clicking on the link. I suspect if I were the average user I would have clicked back on the landing page.

tenpoundhammer2• 11 years ago

I thought the solar system book was incredible and I am going to talk to my wife about using it as a home school resource. I would definitely love to see more materials show up that are like this. It would be great to have some options for turning things on and off, like page flipping, removing some of the higher level math as it might throw off younger students, and it would be great to have a lock-in mode.

The lock-in mode would be a parental control that keeps a child from going to other sites, so that I could set my kid loose on a book and know they aren't playing video games.

While I acknowledge that other platforms make e-books and interactive books, I love that you are making a centralized location on the web for the creation and curation of these resources.

IpxqwidxG8• 11 years ago

Thank you @tenpoundhammer, I'm glad you like it! :-)

I feel almost every book out there can be re-written to bring impactful visual/substance that's possible only because of the web. There can be cute books written with toddlers on the mind, easy-to-read books for younger children and good college books that explain the fundamentals to adults like children.

Let me know if your wife likes it (although this demo book is slightly for a more senior group, above 10th grade) I'll be happy to do something for toddlers and middle school too! Hit me on marvin@bubbl.in :-)

tenpoundhammer2• 11 years ago

I read the material, and a good portion of it appears to be at a much lower level than 10th grade, but the mathmatical portion appears to be high school level if you stripped a few pieces of this book you would have something around 4-5th grade level ish.

kzhaouva• 11 years ago

Gorgeous!

Show HN: Bubblin – Next-generation books

Related Stories