My book website now has book shelves!
Notably, the books are displayed in proportion to their real size (where known and within reason). Where I didn't know the size, the spine width scales with the number of pages. Since I know the dimensions for over 600 books, I had a good source for the factor of pages per cm thickness.
The spine colour is derived from the cover colour, so it's easier to find books I'm looking for. Credit for the idea goes to Alex via https://alexwlchan.net/2019/08/finding-tint-colours-with-k-means/, though I added a particularly hacky hack to get a better colour selection.
The book shelves resize with different browser window sizes fluidly, by the magic of flexbox. Cover images are loaded once you hover on the books so that the main page doesn't throw 600-or-so images at you.
All of this was a very productive and good use of my time, and not at all a sudden day-long hyperfocus on a stupid idea I had during breakfast.
@rixx I think the color picking from the cover and the width-setting from the # of pages is really cool!
@rixx wow, so cool!
How much time do you spend each day reading?
What did you use for the site - is the source code available somewhere?
@rixx Did you see my blog entry from April?
@Drops I don't think I did – or I've forgotten about it and it served as subconscious inspiration?
I considered SVG at first, because I use it already for the statistics page: https://books.rixx.de/stats/
But the downside is scalability for different page sizes, and that I'd have to do all the boring "fit a box into another box" math, when HTML rendering is pretty good at fitting boxes into other boxes already.
@Drops But looking at your blogpost, I think that I might want to add colour coding via small rings/stripes to show if a book is included in one of my lists!
@rixx ...and I think I will use the linked Idea of getting the main color from the book cover, except, that i think of getting a color for each row of the title cover, so it's more a signature stripe than a signature color
@Drops I considered that, but I think it would be really messy visually. One highlight colour works better to pick out "the book with the red cover", etc. I don't want to drown in visual noise.
@rixx It's incredible. I love it.
@ghostdancer Thank you!
@rixx this more pertains to the content on that site than its presentation, but I'm so glad someone else loved *This Is How You Lose the Time War*
@rixx (I hope you don't mind that I sent you a friend req on goodreads)
@acciomath Not at all, though goodreads is currently just the secondary platform that my reviews get pushed to :D
Hope you don't mind the follow request here, always glad to find people with compatible reading interests. No worries if I was overly eager with the request, though.
@rixx not at all! :D
@acciomath That book *still* resonates. My list of 🌟🌟🌟🌟🌟 books is not terribly long, and this is very very firmly on it.
@rixx I have learned that I am very generous with my 5 star ratings, but I wish I wasn't so I could rate it higher
@acciomath For me, I usually give up to four stars very liberally, and five stars are reserved for books that feel life-changing to me, no matter if I think they are "objectively" or "technically" good. It's a useful system to keep a list of books that are close to my heart.
@rixx I like this idea! I may just go through my ratings at some point and do that
or just add a shelf lol
@acciomath I'm actively terrible about maintaining shelves, though my book site will make it easier and more natural, I hope.
@rixx fingers crossed! your site looks really pretty btw
@rixx How does one reach your 🌟🌟🌟🌟🌟 list? I've browsed around a bit, but couldn't figure out an obvious way to do that. (Other than checking your Goodreads profile, of course.)
@rixx This looks _so_ amazing! 😍
@zeitschlag Thanks! I had a ton of fun building it
Das ist soooooo cool!
@schokopflaster Ich bin total hin und weg!
@rixx i know this concept from Microsoft Bob.
chaos.social – a Fediverse instance for & by the Chaos community