I made a virtual bookshelf | Hacker News Reader

I made a virtual bookshelf

petargyurov.com

328 pointspetargyurov114 comments

Looks super nice! I myself use GitHub Issues to track my reading here: https://github.com/AnandChowdhary/books. It has a GitHub Action that tracks reading and generates a summary and API: https://github.com/AnandChowdhary/bookshelf-action

This is very cool! I just setup an instance for myself!

Very cool! I like that you can use labels on issues as tags. Neat project.

Your repo gave me the inspiration to do the same with Eleventy [0] Thank you!

[0] https://cjlm.ca/reading/

Very interesting, thanks for sharing. Users of my book cataloguing app have been asking for "progress" feature and providing the page number seems like the easiest way to go.

Love this. Reminds of when I spent countless hours using a webcam to scan in all books, movies, and games to Delicious Library[0].

[0] https://delicious-monster.com/

What happened to all the data? Did you end up using it?

Lost to the sands of time. It had a feature where you could export as HTML and I did used to put it online (with all the thousands of small thumbnails and covers). It’s loss is what’s making me better at preserving history.

I did the same thing. Then eventually did an export and import into goodreads when I came to realise how limited delicious library was.

I'm very interested in visual ways to explore ebooks, papers, articles.

A physical library helps discovering new stuff or occasionally bumping in something. With files you need to be much more deliberate and I feel like you can accumulate a lot without really knowing what you have.

Even if this is a simple visualization it already gives ideas on how much more information you could convey with something similar. Like number of pages, color of the cover, to remind you of the book, different font, etc. A set of cues that can help you navigate in the list of books, at least I suspect :)

I would love a way to flexibly view and move around lots of PDFs at different scales, to simulate piles on a desk or the floor. For some purposes, something is lost by constraining organization to a regular grid or table.

When you've got thousands of books, you lose track of what you've got, just like with files.

It's not necessary to ask how I know this :-)

Sure you lose track, but it's so much easier with physical things to bump into already seen items and recognize them. Or also casually being interested by a cover or by the size of the books.

I feel like there could be a better way to handle lots of digital books/articles/songs/films/photos/etc

Have your lock screen show a random book cover from your collection!

I'm intrigued by the idea of "bumping into something". Totally agree! How would you describe for a digital environment if it's not a pure recommendation algorithm based on similar books?

I was thinking to a 3D representation of a library or a zoomable interface. It could leverage our good spacial memory while also allowing accidental discovery of books

Well done! Looks very charming :)

Like the other commenter, I've thought about something related before. But I thought about it more like on a platform. If I may... You could make an account and digitalize your bookshelf for you and others to see. You might pin notes, quotes, ratings, open a discussion thread (about paragraphs or the whole book), etc. to a book. The cover art that is displayed could be changed (like a book that was published multiple times under various publishers), but not only to original covers but also community made cover art (pixel art, collages from movie screenshots and so on). You could tag your books and rearrange them accordingly. And so much more...

Thank you!

I suppose Goodreads or Oku fill that space?

I wanted something a little... visual, hence why I made this instead of using those services myself (also I wanted to learn about CSS transforms).

Since this plugs easily into Jekyll, I have structured it such that each book entry is kind of like an empty blog post. The plan is to enter my notes or review in the .md file for each book and display that somehow.

Perhaps using one of those services as the data source for a library

Take a look at https://www.librarything.com/

I've thought about this before as a physical item. Like maybe a breadbox size ePaper screen that looks like a tiny bookcase with a API back to Goodreads or something to get the book spine images.

You could also have a section that displays random quotes from books in your library.

Unfortunately for now the licensing on color ePaper is still prohibitive and doing it with an lcd seems somehow tacky to me.

I've been thinking about something very similar too but given the challenges I opted for this approach... for now.

The physical display of the virtual bookshelf is one of my wishlists and this is my comments when ArtFrame was discussed in HN last month [1].

Perhaps if you can make the book width in proportion of the book's number of pages it will be great. Well done for the software, will try this soon.

[1]ArtFrame: E-paper wireless artwork for your living room:

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

I've also had a similar, but slightly different idea for a practical desktop display - get it to show nice tidbits like a wallpaper. For example, a Newton's cradle, or a spinning top, or a lava lamp or whatever folks put on their desks. Though coding it would be a bit of a challenge for a non-CS guy like me.

A nice virtual bookshelf that also has reviews / notes for all of the books is https://books.rixx.de/. It also has categories and a graph of relations between books. The code is open source as well: https://github.com/rixx/books.rixx.de

Oh I really like that. Thanks for sharing!

Wow, the connections component is very interesting... I might use it for my book cataloguing app.

Nice idea but the vertical titles are too hard to read. Why not just stack the books one on top of the other for the sake of usability?

I think the vertical tiles could be okay, but color contrast needs to be improved.

I find the mismatch between the cover and the spine somewhat dissonant. It would be great if an approximation of the background and text colors, and perhaps typeface as well, could be extracted from the cover image (perhaps with something like Tensorflow.js).

I’d love this in the style of Stripe Press’s page [1].

[1] https://press.stripe.com/

Holy crap, that's beautiful and way better than mine! Any idea how they made it?

I disagree that it’s better than yours. Looks like crap on my phone and is significant overkill for this. Yours is better.

I agree with codazoda, stripe page is borked on safari, but yours works

No, I don't. I was hoping one of our elder technonauts around the forum may be able to describe how it works to us.

I see my sibling comments think it's overkill. I wonder if there is a dialectic synthesis, or some best of both worlds, between your work and Stripe's implementation?

Basically if your models had the Stripe book models' spines. I see other people saying that's the tricky part though.

That website is unusably slow for me on Brave, any idea if I need to enable my GPU or some setting like that?

one issue here is that the spine covers are not universally available; while the book covers themselves are (etc on goodreads)

If you had physical copies of books, what would be a good way to scan or photograph their spines for something like this?

> While the Linux open source operating spans 15 million lines of code across 40,000 software files, Google engineers modify 15 million lines of code across 250,000 files each week.

Depressing. Can you imagine the utility to the world if all of this activity weren't being focused on selling ads?

To be fair they primarily offer services that attract people to their ads and a lot of those services are highly useful and generally beneficial. That said, yes, I wish they had found some other way to monetize and support their services that wasn’t so useless, annoying, and privacy invasive

Just a little thing: it's nice that it works on mobile too (many hover activities don't but here it's fine). And the text of the titles is selectable even though it's vertical (thanks to CSS)

That is a lot of fun, great job!

You might think of adding a link or two for each book. Say to the Wikipedia entry for the author, or a review of the book. I was curious about the, "Demon Cycle" for instance, and would have liked to read more about it.

https://www.goodreads.com/series/46817-the-demon-cycle

Ha! ty!

This is a cool idea. It motivated me to stash a list of the books I've listened to on Audible. I wrote a blog post that has a JS snippet you can run against the Audible webapp, which makes it easier to get the list of titles (it just parses the DOM and gives you a plain text version).

https://blog.techotom.com/post/2022-05-07-get-your-audible-b...

Nice one! This is so helpful! I can't believe Amazon has no way to connect Audible with Goodreads. Thanks for this hack !

I wrote an app to track all my read books in a table: https://videlibri.de/

The main feature is to import the books from a library account. At that time I was getting all my books from a library, so I never had to add any book manually, they just appear in my table.

But it is in German, because I only have Germany library cards. I cannot get any more library cards because the libraries refuse to talk to me

What happened that made the libraries refuse to talk to you

I do not know

I send them mails and do not get any answer

Very cool! I might borrow some of your ideas and implement them on my own reading log (https://edmundo.is/reading). Right now it’s just a list of all books I have read, but I'm working on implementing filters for genre and year (year only shows on hover for now, or by tapping the book on mobile), and maybe breaking the grid by year like you have!

Fun! I also did a similar thing [1] which is or more or less a GoodReads clone.

Still looking for a syndicated/federated booklist share tool, so I can track friend's books/reading lists.

[1] https://j11g.com/2019/11/16/foster-how-to-build-your-own-boo...

Looks great Petar! A virtual book shelf is also an engaging virtual background for online meetings! I built https://booktapestry.com to make it easy (and free) to create animated virtual bookshelves from the books in your e-reader collection. These animated backgrounds work with most online meeting solutions including Zoom, Google Meet and MS Teams.

This is nice. I didn't try but to get a pseudo-random variation of the book height, will it be possible to do a pre-defined Cicada Principle[1] method, say, pick 20-30 heights and keep picking them up.

There seem to be quite a lot of people who have their own book collection. I'm still looking for something simple that can spit out a HTML front; and yet to find something I like.

On another note, recently I was looking for a Library Management System for a small community, with a current book collection of over 25,000. I looked a bunch of Open Source Solutions (most are too complex). I also do not want to do build anything from scratch.

I settled on Libib[2] and the subscription is economical enough for what we are looking for.

1. https://lea.verou.me/2020/07/the-cicada-principle-revisited-...

2. https://www.libib.com

Great idea!

By the way, on the newest safari it doesn't work properly. I tried it then out with Chrome, and no problems there.

Came here to say this... The book animates behind all the other ones. I was like "...shouldn't the book be in front of the others so I can see the title? you know... I bet it's because it's Safari". Sure enough Chrome works as expected

self-plug: https://ananthakumaran.in/books

I really like the vertical timeline. Lots of stats and charts, great stuff :)

This is really nice, I like the graphs and the layout overall. How do you manage adding new books, JS?

All the information comes from the Goodreads CSV export. After I complete any book, I export the CSV file and run make task[1]

1: https://github.com/ananthakumaran/ananthakumaran.github.com/...

This is pretty neat, what is the license on it? Aka, can I modify and use it for my personal website?

I shared the repo in another comment, feel free to copy anything (except the blog post content). I will add a LICENSE file to the repo later.

Thank you for making the book timeline generation free. Could you provide a bit of information on does it work, do I need jekyll to generate the book page? Any hint on how to proceed with running that Makefile?

Let's say you want to use it in your personal website, you need to copy few files.

- public/js/book.js (all related js are here)

- public/css/books.css (css related to this page)

- books.html

The makefile contains two tasks

- book-json (convert goodreads csv to json)

- book-covers (gets cover images from goodreads)

This is the very high level picture. This is written for personal use and not designed with other users in mind, so you need to have some decent knowledge about css/js/html/nodejs to put together everything. Hope this helps.

My e-reader with e-ink shows percentage, but the visualization of how you did it looks much better. Not sure if its as practical in the e-reader situation given you hold it in a certain angle, have black/grayscale/white. Anyway, the nice thing about an e-reader is that it has this feature. It allows you to track where you are within your books, and its quite a portable device not requiring much battery.

I’ve tried similar myself but I love the visual simplicity of this. Much nicer than a list. If you’re interested I came across this year’s ago … some nice inspirations and ways of finding new stuff.

https://tomcritchlow.com/wiki/books/bookshelves/

My favourite is this one with the little toggle for reviews or comments:

https://daverupert.com/bookshelf/

Interesting there’s cover art for books, but it would be handy to have spine art too.

I used to buy lots of books and now have them stacked up, I’ve bought lots of eBooks and whilst I don’t trip up on them I don’t get into the habit of progressing them. From Physics I’ve set up collections for books I’ve got to 1%, 2%, 5%, 10%, 20%, 50% which roughly works out as equal, and I have the little triumph of moving a book forward.

That's a really interesting way to organize your books.

What's your distribution between those six categories plus 0% and 100%?

Pretty neat, I also keep a reading list on my personal site but it pales in comparison to what you've built: https://www.mathew-paul.nz/reading-list/

Fighting the urge to improve mine after seeing the variety of implementations in the comments!

Curious Incident of the Dog in the night time was the last physical book I bought. Such a good read. I really enjoyed that book.

I love this!!! I was hoping one day to getting around and making a virtual bookshelf myself to outline ideas in books I liked.

I expected somone to create a Zoom backdrop with photo realistic but personalized books in a bookshelf.

But didn't find one when I looked a while back.

This highlights one issue, that front covers of books are easy to come by, but not spines. I wonder how hard it would be to generate one from the other automatically.

I read the title as “VR bookshelf” and imagined someone scanning in an entire book and representing it in the ‘verse in some way. Not to derail from the content here too much, but I think this other idea could actually be pulled off pretty elegantly.

This guy yas some work with books in VR [1] and there is a full library example out there somewhere but I don't have the link handy. Some memory palace solutions make use of bookshelf type interfaces also.

[1] https://twitter.com/zachernuk/status/1464699404586151938

Openlibrary has physical size data for some books, which could add a degree of versimilitude here.

Even page count might be a rough proxy, or even more roughly publisher, e.g. Penguin Modern Classics probably share a standard height, width.

I had done a similar one, just without the images. My intention was to add a blurb for each of the books, but friction is the enemy of reading.

https://idiallo.com/library

self-plug: https://MyBookList.club Latest features: cover OCR (plus barcode), library value and finding people with common books. Looking to add reading progress... any ideas welcome!

I did the same in 2020! I haven’t updated the site in a few years and track on Notion now, but it’s fun! https://spaghet.me/bookshelf

Very cool. Are you getting the images manually? I built something similar a while back but never took off.

https://bookshulf.com/

Nice! Yeah, the images are manually added in; in fact, all of the book's metadata is.

I was hoping it to be divided into two bookshelves one for "books read" and much much more importantly one for "books have not read".

You don't learn much from what you already know.

Looks great! Two things you could do to make it super smooth is speed up the animation by about two thirds, and make it so one book is put back before the second one gets animated outwards.

I like the 2d idea! Throwing my reading page out here like others: https://www.dyl.dev/reading

Very cool! I wanted to try to make something like this so that I can make my own bookshelf background for zoom calls. I got as far as finding no book spine artwork data sources.

That's cool.

The one thing that would be nice, is if the book that you are examining, appeared over the book to the right of it. The other book's spine gets in the way.

very nice!

looks similar tech to some virtual birthday cards which didn't have enough time to be physically sent halfway across the planet

https://abbey-decorators.co.uk/cards/hoj.html

https://abbey-decorators.co.uk/cards/mij.html

https://en.m.wikipedia.org/wiki/Shelfari

This looks so cool! Thanks for making it open source and sharing.

This instantly reminded me of Shelfari, I had lots of fun adding and cataloging books on it.

I see a lot of Demon Cycle books. Are they good?

I’m finishing up on the last few Malazan books, looking for recommendations on what to read next.

I fell in love with the first book and wholeheartedly recommend the entire series. It's great.

This could use a proof-of-work algorithm, like a minimum score on a multiple choice test to put the book on your shelf.

Would be a nice coding project for somebody to add a pull from GoodReads etc to populate the books for people with accounts.

I have an old project where I tried rendering books as a shelf and pulled the data from GoodReads. Petar's book design is much nicer

e.g. https://bookshelf-maxmetcalfe.vercel.app/?author=7 (books authored by Bill Bryson)

Nice! Simple and effective. For those looking for something more goodreads-looking, I can recommend BookWyrm.

So cool! Would be nice to make the color of the edge match the dominant color of the cover, somehow

You could use this: https://www.geeksforgeeks.org/extract-dominant-colors-of-an-...

This is cool. It would be neat if I could click the book to view the Librarything page for it.

Oh this is great! Will be using on my site for sure. Thank you for sharing :)

Wow, that's amazing. Can you imagine if this was added to lazylibrarian?

Haven't heard of LazyLibrarian, but I've licensed this with "Unlicense" so it's effectively free to use for all purposes. Perhaps the authors of LazyLibrarian can use it in some way?

Nice job! Reminded me a bit of the e-reader Calibre.

I set up a copy, thanks for sharing!

Does not work in Safari

More specifically, in desktop Safari the books curtsey but are behind the unmoved books and you can't really see their covers.

I just use Librarything

This is really nice

very cool

Reply on news.ycombinator.com