top | item 31293727

I made a virtual bookshelf

328 points| petargyurov | 3 years ago |petargyurov.com

114 comments

order
[+] anandchowdhary|3 years ago|reply
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
[+] BigBalli|3 years ago|reply
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.
[+] petargyurov|3 years ago|reply
Very cool! I like that you can use labels on issues as tags. Neat project.
[+] rohithkp|3 years ago|reply
This is very cool! I just setup an instance for myself!
[+] Dachande663|3 years ago|reply
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/

[+] nevster|3 years ago|reply
I did the same thing. Then eventually did an export and import into goodreads when I came to realise how limited delicious library was.
[+] bredren|3 years ago|reply
What happened to all the data? Did you end up using it?
[+] mat_jack1|3 years ago|reply
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 :)

[+] aheilbut|3 years ago|reply
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.
[+] WalterBright|3 years ago|reply
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 :-)

[+] BigBalli|3 years ago|reply
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?
[+] WHA8m|3 years ago|reply
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...

[+] petargyurov|3 years ago|reply
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.

[+] f0e4c2f7|3 years ago|reply
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.

[+] user_7832|3 years ago|reply
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.
[+] petargyurov|3 years ago|reply
I've been thinking about something very similar too but given the challenges I opted for this approach... for now.
[+] robertlf|3 years ago|reply
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?
[+] Xeronate|3 years ago|reply
I think the vertical tiles could be okay, but color contrast needs to be improved.
[+] drBonkers|3 years ago|reply
I’d love this in the style of Stripe Press’s page [1].

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

[+] petargyurov|3 years ago|reply
Holy crap, that's beautiful and way better than mine! Any idea how they made it?
[+] brhsagain|3 years ago|reply
That website is unusably slow for me on Brave, any idea if I need to enable my GPU or some setting like that?
[+] pm90|3 years ago|reply
one issue here is that the spine covers are not universally available; while the book covers themselves are (etc on goodreads)
[+] rland|3 years ago|reply
> 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?

[+] fnordpiglet|3 years ago|reply
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
[+] nmstoker|3 years ago|reply
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)
[+] offbyewon|3 years ago|reply
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...

[+] jimmySixDOF|3 years ago|reply
Nice one! This is so helpful! I can't believe Amazon has no way to connect Audible with Goodreads. Thanks for this hack !
[+] benibela|3 years ago|reply
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

[+] relaxing|3 years ago|reply
What happened that made the libraries refuse to talk to you
[+] edmundo|3 years ago|reply
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!
[+] gastonhummel|3 years ago|reply
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.
[+] Brajeshwar|3 years ago|reply
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

[+] auggierose|3 years ago|reply
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.

[+] chromejs10|3 years ago|reply
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
[+] ananthakumaran|3 years ago|reply
[+] firstSpeaker|3 years ago|reply
This is pretty neat, what is the license on it? Aka, can I modify and use it for my personal website?
[+] FR10|3 years ago|reply
This is really nice, I like the graphs and the layout overall. How do you manage adding new books, JS?
[+] petargyurov|3 years ago|reply
I really like the vertical timeline. Lots of stats and charts, great stuff :)
[+] Fnoord|3 years ago|reply
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.