Subscribe
Share
Share
Embed
Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.
Adam (00:01.28)
Hey, hey, stay, how's it going?
Ste (00:03.531)
Hey Adam, hey everyone. Pretty well. Doing good. I had my wife's parents here to help with the baby for the past week and last week we went to an Indian restaurant where I had the very good ice cream. Did you ever have coffee?
Adam (00:25.038)
How do you spell that?
Ste (00:26.923)
It's K -U -L -F -E. It's Kolfi. I'm not sure if I'm saying it right. Yeah. It's like on a stick and it's really milky and it's got like, it was from an Indian restaurant, a very good one, Dishoom in London. We celebrated an anniversary and we went there.
Adam (00:30.958)
I've never, yeah, I don't think I've tried that.
Ste (00:48.363)
And yeah, this is my, I think it's my favorite ice cream. It's on a stick and it has pistachio or caramel or what was the other one? I'm not sure, but it was like a, it's my favorite one. I think it's called malai or something like that, but I'm not sure what it is. Yeah.
Adam (00:48.558)
Uh huh.
Adam (01:09.902)
Yeah, I'm jealous of all of your good Indian food in the UK.
Ste (01:15.563)
Yeah, yeah, this one is one of yeah, I think it's one of the best I saw that this guy there's a show on Netflix better fit Phil and he's one of his Phil's friends and he's bringing them to All sorts of location. I think they were in Mumbai and the guy from the issue Introduced him to the food scene
Adam (01:40.654)
Yeah, I saw that episode. That was a really good one.
Ste (01:44.107)
Yeah, yeah, it was really nice. Yeah.
Adam (01:46.99)
It's, it's like part of our, like, uh, evening routine. If we're like having dinner, sometimes we'll like watch a food show while we, while we eat, whether it's, uh, uh, somebody feed Phil or like master chef or something like that, just, uh, or, or watch some hot ones.
Ste (02:06.355)
Oh yeah, I love hot ones. Yeah, I love better fit Phil. I don't know, I mean some people, my mom especially, my mom like hates Phil for some reason, I don't know why.
Adam (02:20.494)
There's like the shows, Everybody Loves Raymond, the show that he's on. There's another show that came out. I think it's called Kevin Can Go Fuck Himself. That's the full name of the show, but they'll have to give a content warning on this episode. But the episode is like, it seems like it's from like a sitcom point of view, but then like the camera turns and the colors change and it's like.
Ste (02:38.859)
Ha ha.
Adam (02:48.782)
the real world look at that and then it'll like jump back to the sitcom view and it'll jump back to the like the real world view of what's going on. It's a dark but funny show.
Ste (02:58.251)
Nice.
Ste (03:02.059)
Okay, I was just searching for that. I bookmarked. Okay. All right. I think I know what you're talking about. I haven't seen this, but yes, since it's a recommendation from you, I'm definitely going to it on the list.
Adam (03:20.718)
And I think for us lately, we've been preparing for our trip to Korea that we leave on Sunday for. So we'll be there for two weeks in Seoul. And yeah, we've been looking forward to this for a while.
Ste (03:38.347)
Yeah, I know you booked it for a long while now. I mean, it was supposed to happen way earlier, right?
Adam (03:44.27)
Yeah, supposed to happen in March of 2020. So yeah, this is our first international trip since before COVID. So we're, yeah, we're very excited about it. We've been scheduling lots of tours and things.
Ste (03:47.043)
Oh god, yeah, we all know what happened then.
Ste (04:00.393)
Yeah, I bet.
Nice. Yeah, well, it's well deserved. I mean, we've been working our asses off for hardcover, so that's good.
Adam (04:14.202)
Yeah. I think the things I'm looking forward to most besides just like eating all the things and just wandering around and getting the feel of the culture is, uh, we're going on a mountain folklore hike to like a national park there. So we found a tour guide who, who runs a Korean history podcast. And, uh, so the hike is kind of up to the top of the mountain. And like, as you're hiking, he's like,
telling you folklore stories about the area and different sites that you're passing by. So it's gonna be a neat way to kind of get away from the city and see a little bit of nature while also learning some history.
Ste (04:56.139)
Yeah, that sounds amazing. And are you gonna also go camping or is it like a hike -hike?
Adam (05:05.838)
I think it'll just be a day hike, like, um, meet there, go on the hike, or maybe they pick us up from a hotel. I can't remember, but yeah, we, uh, we'll be sleeping in our, our bed in the hotel every night.
Ste (05:15.015)
Nice.
Ste (05:19.515)
Well, that's good. I don't want any surprises. Yeah, but I mean, yeah, that sounds wild. I mean, the folk stories must be like at another level. Yeah, that sounds very exciting.
Adam (05:33.294)
Yeah. I'm happy with that one. And of course, some like a food tours, like going to some night markets. And we went to a really good one in Japan on our honeymoon, where like a guy just like took us through a couple of local markets and like he had deals with all the different vendors. So he's like, okay, you're going to have try this and this and this. It was like a best of tour.
Ste (05:58.667)
nice that sounds great yeah very I mean it sounds like you're gonna have a lot of fun
Adam (06:06.862)
Yeah, I'm still deciding if I'm going to bring my laptop or not.
Ste (06:11.935)
Well, yeah, tough choice, but I mean, I'd support like just living at home. We'll be okay. We'll be okay with hard cover. Yeah, especially now that we have like two more people on the team that's are, yeah, in their initial stages of onboarding. So that's cool. There are two devs, Colman and Luca. So yeah.
Adam (06:35.438)
Yeah.
Ste (06:36.715)
Hopefully now we'll be able to tackle even more things. And I can get, I mean, I wanted to talk a bit about, you know, we've been talking about open sourcing our cover. So we're doing like progress in that area. And it's good that, you know, we've got new members of the team that can help us with that process.
Uh...
Adam (07:06.638)
Yeah, that's, that's one of them. I think we'll, we'll get there this year. I feel like most of the, the limitations at this point are around like making sure the, we have the licensing in place to like have contribute contributions from the community. Um, but also, uh, just like making it a good experience for someone who wants to develop on it right now. Um, a lot of the, like the bootstrapping of the code.
Um, we're pulling down like a copy of the staging database and we'll, we'll need to change up how people load the app locally for this. So yeah, it's still some work to be done to get it to the point where someone could just like run it. And even then it's, you're going to be running it without like all the data that we have in our database. So it's not going to have every book. It's not going to have everything. So it's, it's a, it's less something that.
you could take and go host on your own and have it make sense. You could host it on your own, but then you'd have to add every book you read, you'd have to do a lot of things manually. So it's more open sourcing it so that those contributions can come back to the main branch that's hardcover .app, if that makes sense.
Ste (08:28.331)
Yeah. Mm -hmm. Yeah, it does. So it's like basically the part that's facing people, you know, when you go on hardcover, it's all that code. It's exciting because we're taking steps. I haven't seen that. I mean, is there any like open source book app? I mean, this is why it's like mainly exciting for me. I haven't like seen anyone do this with a book app, not any of our competitors that I know of.
Adam (08:55.63)
I think Bookworm's kind of the only one that really jumps to mind since they're federated using an activity pub.
Ste (09:06.557)
Uh huh. Yeah. I think they kind of have to be open source, right? To function.
Adam (09:10.03)
Yeah. Yeah. They have a neat license actually. Their license is a, you can't make money off of this license, but anything else you can do.
Ste (09:19.903)
Okay, that's a good license. Yeah, I'm wondering what types of licenses are most popular with open source. But I'm also glad that we're talking about this and taking steps. And the end of the year is a really good deadline. If we could actually make that, that would be amazing. And in the meantime, focusing on new features, which is what the episode today will be about.
Adam (09:49.262)
Yeah, do we want to jump in and talk about some list updates?
Ste (09:56.235)
Yeah, of course. So right now we're working on a new list page which will put way more sense into how we display books throughout the app. And it will also allow you to make, to have better control over lists. And we can start maybe by going through the designs again. And what do you think?
Maybe you wanna go through the codes as well, or should we do that now?
Adam (10:26.336)
Yeah.
Adam (10:32.622)
Yeah, maybe we could look at the Figma first if you want to open that up and then jump from that to kind of the current state of it locally on my dev setup.
Ste (10:44.619)
Yeah, that sounds great. Okay, let me jump over here. Can you see it?
Adam (10:47.052)
Ahem.
Adam (10:50.606)
Yes.
Ste (10:52.523)
Okay, so this is where we left off last week. We've made the table view for this list and added some key things like being able to search through the list. This is a quick search, so you'd be able to search for any term. And we've added this nifty reader view, so you'd see the graph of the readers. Let's put one on here as well.
that the book had, and this would be like the maximum, and it would be like relative to the book. So this book had 120 readers, like at some point, but now it's like a bit down. You could add columns. And one of the things that's been requested feature, bulk editing, which will allow you to...
bulk edits any list so you can do stuff like, where is that? Change the status of your books in bulk, change the rating, add tags, remove tags or mark books as owned. And yeah, this would make hopefully things like a lot easier when you're dealing with large lists or your library.
Adam (12:18.478)
Yeah, I'm, I've been reading, uh, invincible the comic and I was realizing like, if I read like eight issues in a day and I wanted to like mark them all, like doing that now means like going to the series page, clicking on the book button, like clicking the rating or maybe, maybe setting it to currently reading, then setting it to red and then changing the rating and then doing that for each one. And so being able to like,
Maybe select the first one I want to select, hold shift and select the last one and have it select all the ones in between. And then opening up the dropdown and then just say like red four stars or something. And then boom, that would, that would be very helpful for those situations.
Ste (13:00.467)
Yeah.
Ste (13:04.171)
Yeah, yeah, that would be amazing. I mean, there's lots of cases where, you know, you have to manage big lists, right? And yeah, this will be very helpful. I was thinking for that, I mean, we have the bulk edit, do you think?
Adam (13:14.126)
Yeah.
Ste (13:19.115)
As you were saying, I was thinking that when you do that, when you select a book and press shift and select another book and it selects all the books in between, would it make sense to highlight the bulk edit when you select books? Or should we make this check mark appear when you tap the bulk edit button?
Adam (13:43.246)
So yeah, as I was working on this, I was noticing that this, like where that bulk edit dropdown is, we might wanna change where that is. And well, I think it's good to still have the bulk edit view there so that like you're kind of going into the bulk edit view in some way, the same way you would go into like table view or card view or shelf view. But then like the dropdown that has the options.
Ste (13:54.249)
Mm -hmm.
Ste (14:08.585)
Okay.
Adam (14:13.048)
I hadn't figured out a good place for it yet, but I could show you, actually maybe I could show you what I have now just to jump into that.
Ste (14:26.507)
Yeah, that sounds good. Let me stop sharing and we can jump in dev mode. Everyone can see how the development process goes from design to dev back and forth. So this is how we're doing things usually.
Adam (14:31.07)
Thanks for watching!
Adam (14:38.542)
Share screen.
Adam (14:44.558)
Okay, so for one, like this page, I initially set it up in December. So it was kind of before some of our current iterations. And I haven't been focusing on the exact, like, pixel perfect version yet, mostly just getting the high level concepts on here. So for one, there's this background. And...
Ste (15:07.69)
Yeah, this is good.
Adam (15:13.678)
I was playing with the idea of this like kind of rounded gradient box on the top as kind of like a cutout for it. That way it always has some opacity and then at smaller screens, it would kind of like fade away a bit.
Ste (15:33.803)
Yeah, I've seen that. It's not, I mean, I would, I like that idea. I don't know if I'd like, maybe just tweak the positioning, but in terms of like the background, yeah, that could work. I'm wondering if we can also like make it, make the header with, without any opacity like we have on the book page right now.
me go on hardcover to any book and yeah so when you go on the book yeah exactly would that that work?
Adam (16:05.038)
Mm.
Adam (16:14.766)
Yeah, we could. I mean, that would just mean moving this probably down to here so that we're not having text show up on top of it. I think it works good for here because a cover and this part show on top of it, but that's not text. But for here, I wouldn't want any of this text to show up any higher than right here.
Ste (16:22.827)
Oh yeah, exactly.
Ste (16:27.603)
Mm -hmm.
Ste (16:38.507)
Yeah, that works. I mean, we can tweak it. On the book page, does it actually have a negative margin? So it pushes the...
cover image underneath the header.
Adam (16:52.834)
Yeah, yeah, exactly.
Ste (16:54.923)
Okay, so that's what we were doing. Okay, just checking.
Adam (16:58.094)
Yeah, this one also has a negative margin. And this one actually does show up underneath here usually. I think maybe I've like scrolled a bit or something, but yeah. So this header wouldn't, it would show up kind of like this with the header, like with the clear header. But I think there's a, we have a part in the code that says like on certain pages, use a clear version of the header that doesn't have this dark background. And so.
Ste (17:26.891)
Yeah, I was suspecting that was the case. Uh -huh. Yeah, it might look cleaner. Yeah, it kind of looks like it has a ceiling over there with that header. So I think just removing that opacity would make it work.
Adam (17:29.006)
Yeah, we just have it hard coded.
Adam (17:41.038)
Yeah.
Um, but yeah, and then, uh, I think I've been kind of adding most of the things that are in the mockup in some way, um, like ability to like little options for the owner. Actually, this probably won't even be owner stuff. It'll probably just be general controls for the book or for the list. So like, um, another one would be like, report this list or maybe copy this list.
Ste (18:07.571)
Mm -hmm.
Adam (18:13.248)
Eventually if you wanted to like make a copy of someone else's list your profile you can put those things up here
Ste (18:18.027)
Mm -hmm. Yeah, I think we also have share, but yeah, that's just another button. So those would be like share, edit, pin, duplicate, and report.
Adam (18:22.764)
Yeah.
Adam (18:31.822)
Yeah.
And yeah, I was playing with where to add this, where you add the status of the list or the privacy. I initially had it down here, but it seemed to make sense up here, because this is describing the list. And these are like.
Ste (18:44.467)
Mm -hmm.
Adam (18:55.822)
It seemed like a different contextual thing. So it made sense to have this up here, especially since if the list is public, this is not gonna even show up.
Ste (19:03.851)
Yeah, that's really good placement from both like a spatial point of view and the context. It sits well. I would have done the same. Any empty space in design, boom, throw something at it.
Adam (19:23.086)
Yeah, I haven't redone this component, but I know in our designs, there's like a new version of this, but yeah.
Ste (19:32.713)
Oh yeah, we can spend time on styling, you know, once we have the... That should go like really, really easily.
Adam (19:39.502)
Yeah, that'll be the easy part for sure. But the hard part is anything from here down is kind of the, what we're calling like the letter, letter books, which is letterbox inspired books. And I think that the things, the one thing I've changed from the prototype is I made it so it showed the current one year on in a different color and with the text of it.
Ste (19:41.995)
Yeah.
Adam (20:08.526)
So if you switch to table view, it shows the view you're on like that.
Ste (20:08.777)
Nice.
Ste (20:13.821)
Yeah, that's very good. That's very good. I was going to ask because I saw it when you shared it in the Discord, if maybe we can make it so that when you hover, it like animates each one. So, you know, you don't have to click through them. Maybe you just like hover over them, but yeah, this works. Just, just as.
Adam (20:30.482)
It's funny you mentioned that, because I actually did something where when you hover over it, it would say card view, and it would transition the width. But the problem was, if you were on this one and you covered over this one, getting bigger would potentially change the point of your mouse. And so your mouse might now move outside of the thing. But it's, yeah.
Ste (20:54.123)
Okay, gotcha. Okay. Yeah. Yeah, that's a tough one. Yeah, I think yeah, maybe this is better. Just let's just leave it at that.
Adam (21:03.726)
And tooltip still works.
Ste (21:05.739)
Yeah, exactly. Oh yeah, here we go. Yeah, and on mobile, you're not going to be able to hover, so same thing.
Adam (21:16.27)
So yeah, this is kind of basic shelf view. And then we can decide like what, what breakpoints we want to set for like number of books at different breakpoints. Like right now it's just like large has eight and everything else has four, but we could probably do like an intermediate for like iPad with of like something in between.
Ste (21:30.931)
Mm -hmm. Yeah
Ste (21:45.195)
Yeah, we can tweak that. I mean, we can go 8, 6, 4. Yeah.
Adam (21:50.798)
Yeah, but it looks really good on mobile. Like this is shelf view on mobile and assuming the header was clear also, like that's.
Ste (21:59.987)
Yeah.
Adam (22:01.998)
Getting there.
Ste (22:03.211)
Mm -hmm. Yeah, this is going to be really, really nice. And it looks a lot like how Letterbox displays movies.
Adam (22:17.294)
Yeah. And these still have like four controls.
Ste (22:24.811)
Yeah, this is great.
Adam (22:29.198)
I think the thing I've been working on mostly lately is kind of this sorting option. And the idea is that depending on where you're looking at a list, there are going to be different sorting options. So right now you're looking at a list. But if you're looking at your books by status, like your books that you've read, it's not going to have a list number.
Ste (22:38.899)
Mm -hmm.
Adam (22:57.774)
If you're looking at a prompt, prompt has like number of people who upvoted it and then maybe like prompt rank. And those will only show up if you're looking at a prompt, but some of these like book title, book popularity, these will be shared by just about everyone.
Ste (23:16.907)
Yeah, that's great. I mean, the fact that they change depending on where you see the list makes a lot of sense. And it's really nice that it's using the same component and you made match percentage work. So I was waiting for that to happen. That's huge.
Adam (23:36.65)
That ended up being some very tricky SQL code, but it's really optimized, so it runs really fast now. That's been one of the problems, is that our current recommendation engine is getting to the hundreds of millions of rows in that table. And so this is making it run a little faster.
And yeah, this is something that I was gonna ask you about. Depending on if you're sorting or filtering, there may be something where we filter the books that are shown. So for instance, if you filtered by books released since 2020, for instance, we would show some kind of message that says, according to all of your sorting and filtering criteria that you've given us,
Now there are only 22 books that meet those criteria to show.
And yeah, I was curious if you had any thoughts on like how to show this or if this works.
Ste (24:50.731)
I think it works. Yeah, we can just leave it there. If we get any other ideas, we can just style it. But yeah, for now, I mean, it's right underneath where you're filtering or where you're doing the action. So if you see something that's corresponding to what you've been doing, that's a good place for it. We can tweak the positioning. The styling is okay. I mean, you wouldn't want more emphasis on that. Or like, if...
anyone asks why is it showing 22 out of 100 books they can just change the sorting or the filtering and it becomes obvious how that changes so I think it's clear enough.
Adam (25:36.142)
Cool. Yeah, I was, I was realizing when I said, when I filtered by like my rating and then it was showing 68 out of a hundred books, cause I've only rated 68 out of a hundred of these books.
Ste (25:50.731)
Okay, yeah, I was about to ask. So it only shows the books you actually rate. That's a good way of seeing which books you've actually rated because you can see the others you've not rated or you can filter, actually, I guess. If you filter by your rating, it would only show books with the rating. I'm wondering if you can filter so it...
shows books without something like a rating or a review. But we can talk about that when we get to filters. I just realized like it would be a good way when you're in your library or on a list to see what books you've missed when you were rating or reviewing. I guess that's it basically.
Adam (26:28.654)
Oh yeah.
Ste (26:46.891)
or maybe lists without a reason why they were added on that list.
Adam (26:53.902)
Oh yeah. Yeah, I could see those all as filters that someone could do. Ari in the chat mentioned like based on your filter. So I just was adding that to try it out.
Ste (27:06.987)
Okay, yeah, that would make it even more clear, so.
Adam (27:12.046)
Yeah, and one of the things that we have, one of the things with search in general is like there's two directions for search. And so I was originally, like if you remember like our current one lists.
Ste (27:13.483)
Yeah, it looks good.
Adam (27:37.614)
Let me open up the same list on production here.
So we have this sort by option and then you can sort like Z to A or A to Z. So in order to reproduce like sorting both ways, what I had tried to do is like you click on title and it sorts it A to Z and then either you click it again to reverse the sort or we could make like,
Ste (27:52.585)
Mm -hmm.
Adam (28:13.87)
some other way, but this seems like the easiest. And then it has like this little, like this is gonna change, like when you hover over it, it's like change it from Z to A to that.
Ste (28:25.259)
Yeah, that's perfect. That's smart. I mean, I like it. It's better than having a toggle in there. Just tapping it, yeah.
Adam (28:36.11)
And I think most people are just going to do it the first time. Like I think it's more common to filter by or sort by most popular books rather than like least popular books.
Ste (28:40.137)
Mm -hmm.
Ste (28:47.755)
Oh, yeah. Yeah, exactly. Does it apply it when you change it to all of the, like, orders? So if you're, like, Z to A on something and you switch on popularity and you switch to length, does it save what you previously had, or does it go back to A to Z?
Adam (29:15.254)
It saves it in that if you hit the back button, it'll go to the previous state.
Ste (29:23.283)
Okay, okay, perfect, yeah.
Adam (29:25.262)
And every one of these is a unique URL. So like anytime you've, you know, I've sorted by match percentage. If I just like, um, refresh this page or shared it, bookmarked it, it would, it would go back to the exact same sorting options.
Ste (29:36.139)
Yeah.
Ste (29:41.899)
Yeah, that's great. I mean, if you want to show someone a list, ordered or filtered by your options already, so they would see what you're seeing as well, you just copy the URL and they will paste it and it would be the same on their end. So.
That was very good.
Adam (30:07.79)
And I haven't really started table view yet. These are just placeholder placeholder data. Same with bulk edit view. I haven't started that yet.
Ste (30:11.543)
Yeah, well it's a table. It's looking like a table.
Adam (30:17.934)
Yeah.
Adam (30:21.806)
Same with pagination, that'll probably be one of the next things. But I was gonna ask about that one. For our current one, we kind of do standard pagination.
Ste (30:25.323)
Yeah.
Ste (30:31.307)
Mm -hmm.
Adam (30:34.83)
We could do something similar to this, or you could just do like infinite scroll where it just kind of like loads more books as you scroll. But then I think combined with having good list options that could work, but it does make it so that it's no longer shareable on a URL level. Because if you like infinite scroll to page eight and you're seeing books, you know,
Ste (30:44.297)
Mm -hmm.
Ste (31:02.059)
Yeah.
Adam (31:04.128)
700 to 800 and you share that URL, it's still just going to show someone zero to 100.
Ste (31:12.063)
Yeah, that's true. I mean, I think infinite scroll... Actually, let me ask you what's apart from that downside, is there any other downside to infinite scrolling?
Adam (31:26.67)
Um, not that I can think of, like from a technical standpoint, I think, I think it's, it's like, we have like, you know, an array of books. It's whether, whether we put them on top of each other or replace it.
Ste (31:33.235)
Yeah.
Ste (31:41.653)
Okay, yeah, I mean it's good but I think what would be better would be if we kept it the way it is but I'm thinking maybe you know how every pagination can toggle how many books you see per page. I'm wondering if we should add that in. It kind of feels like at least in table view that could work, you know.
Adam (32:01.836)
Mm.
Ste (32:10.719)
On car view and shelf view, if we're able to do it differently, it would make sense because those are a bit more interactive. But I feel like for table view, if it's like infinitely load something, it's kind of like an interaction that I'd associate with stuff like the feed or how should I say, some less technical and more entertainment related.
the UI components, the table kind of feels like it's very technical. So you wouldn't, there's something weird about that interaction. Can't really like put my finger on it, but I don't know. Do you feel?
Adam (32:52.718)
Yeah, it's kind of like if you were working in a spreadsheet, you wouldn't expect to go to the next page. You would just want the spreadsheet to continue loading as long as you were scrolling.
Ste (33:06.955)
Yeah.
Adam (33:12.206)
Yeah, so maybe, yeah, maybe we could just, well, one other option is that we infinite scroll it, but as we load more, like as we load page two, we actually change the URL. And so if someone shared that URL, they wouldn't see books one through 200, they would see books 101 through 200.
So it's, it's like the URL is, is changing to be the most recently fetched set of books, but you're like, if you've started on the page, you're seeing everything.
Ste (33:51.467)
Yeah, I mean, if you'd share it from this point of view, I wouldn't like if you'd if it would load fast enough, even if it loads from the top, I wouldn't see a problem, you know, sharing it and someone just going there. Let's say you're viewing like.
it loads 25 books at a time in your view, you book 100 and you'd have to wait for three consecutive loading stages to get to that. If it was fast enough, you'd just go, and both people would see the same thing. But the question is, would it load that fast on a normal connection to not be annoying?
Adam (34:40.654)
I think it would load pretty fast. Yeah, I don't think it would be annoying on the loading side, regardless of which one we do. I think the tricky part would be if we wanted to load books 0 to 300 at one time, or if someone's on page 100 and we're loading books 0 to 10 ,000, that's when it starts to get a little hairy. This is how I ended up doing on the trending page where,
Ste (35:05.203)
Yeah.
Adam (35:10.958)
Like you get to the bottom and it's just like next. And then it's the next next 25. It's, it's kind of the most basic version of a pagination.
Ste (35:15.423)
Hahaha.
Yeah.
Ste (35:21.803)
Well, the best pagination, you know, previous, next, what's simpler than that? Just go either back or forth. So, yeah, I guess what you're saying. Maybe, yeah, either I feel like it would get hairy and it would be a bit unclear if you'd share something and, you know, the other person would just see like a selection and you would see like the whole...
Adam (35:25.23)
Yeah.
Adam (35:49.166)
Yeah.
Ste (35:51.371)
That's what my worry is. But then again, would they also be able if they go up, let's say it's an order list, if they go up with things loads on top or they would just load at the bottom, right?
Adam (36:08.514)
I have a feeling we probably would have to do something similar to the feed where like when you Navigate away from the feed and go back. We have this like load previous button We probably have to do something like that if you link to page three
Ste (36:18.219)
Hmm. Yeah.
Ste (36:26.283)
Yeah.
Ste (36:29.835)
I don't know. Then again, why would you feel like a pagination would be out of place here? Just trying to see, you know, which option would be better. Does it feel bulky or?
Adam (36:40.398)
Mostly I'm thinking it's just an extra click. Like if I was, like if someone shared a list with me and I was just wanting to go and browse it, I might just like look at it until I've reached the bottom of the list. And then I'd say, okay, I'm done looking at this list. So I wouldn't even, ideally I wouldn't even think about pagination, like as a user.
Ste (36:53.163)
Mm -hmm.
Ste (37:08.523)
Okay, then let's, yeah, let's do the infinite scrolling. I guess that would be like from, you're not, what you described is I think the most usual use case. You just want someone shares a list. You just want to quickly look at it. The pagination would be when you are like really into organizing things and you want to organize.
Yeah. Huge lists that maybe I mean lists that you own or like huge lists that someone else. Yeah. Yeah.
Adam (37:38.894)
Yeah. Like your red books list, your want to read list. Yeah. Those are the ones where, yeah, it's like, how often are you going to link someone else to page two of your want to read list? It's.
Ste (37:53.483)
Yeah, we can just do infinite scrolling because that's like the most, I guess, like most usual use case for this. I'm wondering, and yeah, this might be wrong, but if we hit bulk edit to switch to pagination with that, it wouldn't make any sense, right?
Adam (38:21.518)
I think it would work normally with the infinite scroll in Bulk Edit mode. Because that way, if you've selected entries 98, 99, and 100, and then you want to select 101, you would have to go to Bulk Edit, make your Bulk Edit change, then go to the next page, and then select 101, then go to the Bulk Edit menu and do it again.
Ste (38:26.419)
Yeah.
Ste (38:43.499)
Yeah.
Ste (38:48.011)
Okay, yeah, I get it. So you wouldn't be able to jump pages, just like shift, select a book on a page, then go to another page, shift, select, and it would select books on both pages, right? Yeah, then definitely let's stick to infinite scrolling. I mean, more than one reason. So yeah, let's just do that.
Adam (39:00.91)
Yeah, I was.
Adam (39:09.902)
Yeah. And I think like for, I think as long as we have good sort options and good filtering options, that kind of helps solve a lot of it. Like, I feel like a lot of the reason why I might today go to page like, you know, four of this list is because I want to see the end of it as opposed to here where I could just like, you know,
Ste (39:22.131)
Yeah.
Adam (39:38.702)
sort and see the end of it.
Ste (39:40.587)
Yeah, here we go. Yeah, that's good. One UI thing that we could do here is instead of the loading spinner, maybe we could show a skeleton of posts loading. I think that would be better than just that spinner because it feels slightly better. It feels like we're loading stuff faster.
Adam (39:52.396)
Mm -hmm.
Adam (40:01.814)
Yeah, that would be cool. Yeah, I like that. It can probably make a separate skeleton for each of you.
Ste (40:10.315)
Yeah, yeah, that'll work. We have the skeleton component, so it will just like, hover stuff, maybe with lower ring opacity, so you just see stuff like, boom, boom, and then the actual stuff would appear.
Adam (40:20.75)
Yeah.
Adam (40:24.526)
Yeah.
Ste (40:26.635)
Cool, great. You wanna work on the car view next? I think that's like, or what other questions? Like.
Adam (40:37.678)
I think that covers most of the things I had. I think the only other one that was on my mind was, this page is very wide right now for shelf view and card view. And then for table view, I feel like we need a lot of width because it's gonna be really big. So I was playing with the idea of what if different views have different.
Ste (40:38.155)
you.
Ste (40:54.803)
Mm -hmm.
Adam (41:05.772)
size for like this wrapper area. And so like, you know, all of this would be kind of down here. And then if you switch to card view, then it gets wide like this.
Ste (41:08.637)
Mm -hmm.
Ste (41:16.939)
Yeah.
Adam (41:23.534)
But what do you think?
Ste (41:25.387)
Well, I was saying in the Discord that the only thing that would be worth, so you're in shelf view. You see this narrow container, everything's nice and compact. And then you jump to table view, and it expands, and everything moves out of place for the header. So that shift might be a bit...
visually disturbing, also thinking that it's a big shift. So yeah, that looks great. So my question was, could we maybe animate it so that it has a nice transition? I'm not sure how that would work. But I'm thinking either with CSS or maybe with Framework Motion, we can.
Adam (41:53.836)
Hmm.
Ste (42:19.531)
make it so that it transitions from an SM to or whatever it is right now, MD or whatever to like the larger container. But I don't know. I...
Adam (42:30.51)
Yeah.
I mean, there's also just like.
transition all and then we just like change the size and then. Let me.
Ste (42:46.795)
Would that work? Yeah, yeah. There's also the transition. Yeah, you can just transition all. But yeah, I'm curious if it actually moves the way you'd resize the browser window. So just make it more responsive just to not have that shift, layout shift. Because it could be, I mean, normally I wouldn't have a problem with it, but it might be pretty, oh, here we go.
Ah, did it? Did it actually do it?
Adam (43:18.162)
Yeah, let me try doing this again. Like, what is the, it was really fast. There's like transition duration.
Ste (43:26.571)
Duration, yeah, it can be 300, and you can put ease in out to make it.
Adam (43:36.494)
Let me try duration 300 and then timing function ease in out.
Ste (43:42.283)
that might actually be, yeah. Yeah, I think it's just like is sort slash dash in dash out. Oh, here you go.
Adam (43:50.126)
So here's getting smaller and there's getting larger.
Ste (44:00.299)
Okay, ah, that's, yeah, it works. Okay, yeah.
Adam (44:04.238)
Yeah, that could work. Yeah.
I could play with that.
Ste (44:11.467)
Yeah, that's, I mean, usually firms, I've tried some transitions on some buttons, but sometimes it's better to just like swap everything instantly than have an animation on it. But this feels like a big like shift and it's kind of cool that it animates. So, I don't know, if it just like play with it, if you find it annoying, maybe we can like rethink it. But this would be like a good solution to shift the layout.
from table to shelf to card view.
Adam (44:45.07)
And I have a feeling on other pages like here, we won't need that here because this part right here below this tab, that's all going to be letterbooks. So it might start off this wide when you're in card and shelf view, and then when you go to table view, it might just make it a little wider out to here. But.
Ste (45:02.825)
Mm -hmm.
Ste (45:14.347)
Yeah, that works. I mean, that's a good...
solution to.
Our problem is that sometimes we have UI that fills the screen and there's too much UI. And sometimes we have so little UI that, you know, it makes sense to have it narrow in the same place. And, you know, people have been telling us, so you could add stuff to the right and to the left because it feels empty, but it has to, I mean, those decisions are harder than they look because, you know, it's not, when you throw something in there, there's going to be a bunch of.
of happy people that they see that, but there's also going to be a bunch of people who hate that. So we really have to be careful what we add and that it has like a clear purpose.
Adam (46:05.934)
Yeah.
Ste (46:06.987)
But that looks good. And also for the tables, I was wondering if, you know, you're on a table and let's say you add like 10 more columns, how would it act? Like I know Airtable does this cool thing where the first column is fixed and then everything just scrolls underneath. So you have that first column that's fixed in place and then, yeah.
Adam (46:32.236)
Yeah.
Ste (46:34.731)
I'm wondering if we could do that so we'd have like the title, the number, just like you have it here, I guess, maybe, yeah, styled differently.
Adam (46:46.51)
Maybe we can make something where it's like you have a little button and it like locks that column or something.
Ste (46:56.619)
Oh, yeah, I mean, we could. Yeah. Because I wouldn't... The thing is, I wouldn't have it edge to edge. I wouldn't allow scrolling all...
Adam (46:59.854)
That way, like, cause, yeah, go ahead.
Ste (47:14.347)
all the way, it feels like it should be aligned to the left, especially now that we have the wider container. And yeah, just keep it in bounds. I mean, yeah, over here it's way too narrow, but I just realized that's a good thing that we're changing it.
Adam (47:28.268)
Yeah.
Adam (47:31.886)
Yeah.
Adam (47:36.622)
Yeah, it is.
especially since like this is showing genres, like it doesn't really need to show genres. Same with like, like if I change this to just have that.
Ste (47:44.009)
Yeah.
Ste (47:49.131)
Yeah.
Adam (47:51.97)
Yeah.
Cool. But yeah.
Yeah, this is, this is going to be so much, so much cleaner.
Ste (48:04.012)
Yeah, and way easier to use.
Adam (48:08.174)
Yeah.
Ste (48:10.217)
I'm wondering now that you're showing the covers, we've ditched the size controls.
Ste (48:21.611)
and we're going to leave them ditched. So this is like the default size, I guess. I think that's a good... I just, I had the instinct to ask if it's worth like putting another like slider for the shelf view, but I think it's good to just leave it like this for now. And yeah, if we get...
Adam (48:25.698)
Yeah.
Adam (48:30.51)
Yeah.
Adam (48:45.742)
Yeah, I think so.
Ste (48:48.715)
a lot of feedback saying people want to bigger covers, but yeah.
Adam (48:54.286)
Yeah, there's one thing here that I was going to ask you about.
And this is more of a, I guess, just a question of what we want to do here. But let me do this here. Let me just put a setting in here and then see it. So these are all uniform cover sizes. So we're resizing every cover, regardless of how big it actually is, to be the same size. But these are the actual sizes of the covers. Some of them are,
You'll see like this is using the same height for all of them and the parent container. But the, you know, some of these are going to be square. Like this one is more of a square cover. So, uh, one option is that we keep them exactly the way they are, which is I think what I'm leaning towards. Like we keep it, we keep it like this. And if covers are square like that one, they just kind of get slightly resized.
Ste (49:38.291)
Mm -hmm.
Ste (49:44.841)
Mm -hmm.
Ste (49:53.225)
Mm -hmm.
Ste (50:03.113)
Mm -hmm.
Adam (50:03.886)
And it looks better when looking at them in bulk. And then if you wanted to actually go to this one, that's when it would show the.
Ste (50:11.019)
Yeah.
Adam (50:11.982)
cover proportions.
Ste (50:14.131)
Mm -hmm.
Yeah, I'd say let's do that because in any case, the cover for the main book in this case shouldn't be an audio book. It should be, I'm assuming that's why it has the square cover. It should be like the paperback or hardcover.
Adam (50:38.798)
Yeah.
Ste (50:38.923)
So yeah, I'll be down to keeping them uniform.
Adam (50:42.606)
And this is very satisfying too.
Ste (50:44.747)
Yeah, exactly. For that particular reason as well. Yeah, let's keep it like that for now.
Adam (50:49.038)
Yeah.
Adam (50:52.526)
Cool, cool. And someone asked in the chat about our recommendation engine that we're using for things like this match percentage. And we're using kind of a really basic collective filtering technique in Ruby. It pretty much like generates this graph of everyone who's ever rated a book and then it looks at all of your ratings and their ratings to figure out.
what we would guess your rating would be on any book that you haven't read. And one of kind of the issues with that set up right now is that that means that we're storing everyone's predicted rating in our database for every book. So you can probably imagine that table is very, very big. And so this is one reason why I think for this, one thing I'm thinking about,
is what if we make match percentage as a whole feature a supporter feature?
Ste (52:02.059)
That would sit, I mean, it takes like a lot of resources on our end. And, you know, I mean, when we first did the match percentage, the idea was, let's see if, you know, it actually offers good recommendations because that's one of our goals to, I mean, predict the way you'd like a book. I think...
Right now, we're at the point where we've had a lot of feedback of how it works in real life. So, yeah, I mean, definitely. I was gonna ask...
I mean, we know it works because we've heard from people that it works from books that have a high match percentage, but what about books that have a low match percentage? I'm curious if it's like, if you read a book that we said has a low match percentage, did you hate it or were we wrong?
because we asked the question, is our match percentage actually useful? Do you have like a 98 score on something you read it and you're like, oh crap, okay, this is, I wouldn't have read this, but it was a good match percentage and this is why I read it. And that's, it was right. We had those cases. People told us that, readers on Huckaburr said that.
You know, they found books like that. I'm wondering at the other end if, you know, we haven't, like, had any kind of data. But, yeah, I mean...
Adam (54:00.878)
Yeah. Yeah, it's, it's a tricky one because, uh, right now, as soon as you've read a book and rated it, we can't generate a match score for you because we know, we know your score on it. So we need to, we'd have to figure out how to like, um, we could probably do something where we like exclude the current users ratings and then, and then generate match scores for every book that they've rated.
and then compare that score with their actual scores, their actual ratings. And we could say like, these are the books that you like more than average, and these are the books that you like less than average. We do something like that on the stats page. I think it's like the books you like more than other people, like,
books you rated higher than average and lower than average, which I need to reread Pandora star. That shouldn't be a one. Um, but, uh, yeah, this is, this is just your rating versus the average rating, but we could do something similar to this with your rating versus our predicted rating. But.
Ste (55:21.707)
Yeah, that sounds good. And it was like initially we thought of it as a feature for supporters. And we could use this opportunity to also redefine what you're getting as a supporter because I feel that we've been adding more things for supporters and shout out to supporters. You've been really like...
helping us develop this whole thing. Right now, we're recovering half of our costs from supporters, right, Adam? Last time I checked, that was nearly half. So we're nearly half there because of supporters. So yeah, maybe this is a good timing to remind people that, you know.
Adam (55:59.278)
Yeah.
Ste (56:15.371)
you're getting a lot of things through the support plan and making it even more clear. Of course, it's also support for us, but I think we're at the point where you're actually getting a lot of things you're not getting on other networks. So, yeah.
Adam (56:34.446)
And, and I don't, I don't think I see any other features except maybe like a copy list or something like that being supporter.
Ste (56:42.091)
Yeah, the copy lists, yeah. And the cover. I mean, the cover image, yeah, exactly. I'd see like authors or book bloggers or just like people who want to customize their lists want to change that. And that could definitely be a support feature.
Adam (56:46.638)
Hmm. This background.
Adam (57:11.886)
Yeah. And, and maybe, uh, maybe like what we could do is, uh, we allow people to select from like a dropdown of covers and those are like, um, you know, here's our, our default fantasy cover. Here's our default sci -fi cover. Here's our default romance cover. Um, but if you want to upload a new one, then that's a supporter feature.
Ste (57:12.363)
What do you think?
Ste (57:34.763)
Yeah. Oh yeah. Yeah. Yeah, that's cool. I think we kind of either had that or we're planning to have that in the Figma, but yeah, I can update it. That's going to be really nice to design.
Adam (57:46.766)
Yeah, oh yeah, you already have it. Let me...
Ste (57:54.859)
Okay, yeah, there was art gallery. Maybe, yeah, I wanted to design art gallery as well. So, yeah.
Adam (57:59.982)
like this.
Yeah.
Ste (58:05.629)
Oh yeah, and the default view, I forgot about that. Here we go.
Adam (58:09.518)
Yeah, default view.
Ste (58:12.651)
Yeah, the editing is going to be very nice as well on the list itself. I'm very, very excited for having this live.
Adam (58:14.99)
You
Adam (58:28.046)
Yeah, I think once I get to a place where I have like filtering working, then I'll probably jump over to this edit page. But luckily the edit page is only going to be for lists. We don't have an edit page for any of the other places we have lists of books.
Ste (58:38.921)
Mm -hmm. Yeah
Ste (58:47.819)
Yeah, that's cool. Thank you, Maria. Maria says, that's looking way cool. Yeah, doing our best, doing our best. And I was also going to say that maybe until next time we can try out on Discord a few options for the card view since we're out of time now, but that's going to be a really nice view to design. My only observation was that right now the card view is kind of like,
kind of like a table, so it has that row. I wanted to try and make it like we had it in the original designs, like an actual card, but have it work way better than that. So maybe we can chat about what to put in there, and after we figure out the basic level of info, we can hit Discord and ask everyone what they think, if they add something in there, if they like how...
They'd be displayed. So maybe yeah, we can do that the following days until you move to South Korea.
Adam (59:55.95)
Yeah. Sounds good. Yeah. I think one of the ideas for the card view is like, yeah, it's, it's like rounded corners. It's like a little darker than the rest of the page. So it like stands out that or something like that. I'd be down to try that.
Ste (01:00:09.183)
Mm -hmm. Yeah, that's exactly what I had in mind. I liked that the background that we were doing that sourced the color from the cover. Do we still have that in place, the code?
Adam (01:00:22.444)
Mm.
Adam (01:00:26.926)
It's still an option. Like I think we have it, like, I think that's still part of our card view. When you go to.
Ste (01:00:37.707)
size right?
Adam (01:00:38.99)
Yeah, so just to.
This is like when you go to CardView, oops, I'm local.
Adam (01:00:56.59)
It's like when you go to a large size here, yeah, it's like this background color.
Ste (01:01:01.099)
Yeah, this one. Yeah, maybe we can re -engineer this one because it's looking a little weird right now. And should the info, I mean, do you think the info on here is like a good level of info to include?
Adam (01:01:17.07)
I, that's such a hard one. I feel like I haven't figured out, I haven't cracked this. I feel like this card for trending works really well for trending books. In that specific context, when you're looking for trending books, this is kind of the information you wanna see. But when you're looking at a card view of a list, the information you might wanna see in the card could be different.
Ste (01:01:20.907)
Hahaha
Ste (01:01:32.779)
Mm -hmm.
Adam (01:01:46.606)
So I don't think I have a good answer for that yet.
Ste (01:01:46.973)
Mm -hmm.
Ste (01:01:50.827)
Okay, that's, I mean, that's useful. Because over here we have the details about the book, which are definitely useful. We have the genres and we have the tags. I mean, they're all like important. So maybe I'll start from this. If anyone watching has any opinions on, you know, if you've ever been to a list in CardView on the medium size and saw this, you know, if you'd see stuff.
in there or out of that card, definitely, you know, shout out Maria saying that you don't want description for the car view. Yeah, maybe it works. That's like good feedback. I could design one without, yeah, okay. I get why. That's a large car.
Adam (01:02:39.342)
Yeah, especially since like that was before we added this like more info thing, which shows.
Ste (01:02:44.811)
Uh -huh. Oh, yeah, right. That's why it got left there. Mm Yeah, you can just click on the book and, yeah, read the description. Yeah, that's right. Yeah, see, this kind of feedback, very, very helpful. So I can design it without that description. And yeah, then we can check this chord and...
get feedback.
Adam (01:03:08.622)
Yeah, and I'm designing it on the code side where each context can have its own card view. So we can have a card view for prompts, a card view for lists, a card view for goals, and each one of those can show different data.
Ste (01:03:30.923)
So we have the card view and yeah, maybe we can, we were talking about that list. Maybe we can design it for every type of card and then check the designs and get feedback on them. I feel like the card before books is like the most important and then we can derive all of the others. But yeah.
Adam (01:03:55.886)
Yeah, I was noticing that when I was starting on books by status, so like your want to read list. When you're looking at that, you might want additional data for like when you added it to that list or potentially in the future, like notes on why you added it to your want to read list. But then when you're looking at your read books list, you might want to see when you've read the book.
Ste (01:04:17.291)
Mmm, okay.
Adam (01:04:25.518)
in the card. So it's yeah, it's like all those little tweaks based on where the card is.
Ste (01:04:32.651)
Yeah, I should have made a note of that. I'm hoping you're going to remember it for when I'm going to ask on Discord. Okay, yeah, that's perfect. That's what we're going to do next. Sounds great, yeah. It's so nice designing at this stage. When we were first designing this, we didn't know what to design, so we just did whatever we thought was good.
Adam (01:04:37.932)
Oh, yeah.
Ste (01:05:01.355)
But now, you know, I think both for someone in design and someone in dev working with stuff that's already there and just like shifting it according to what we found out from the people that are using hardcover that, I mean, it feels good to be at this stage.
Adam (01:05:18.062)
Yeah, it's, yeah, it feels, it does feel really good. It's kind of that iterative stage where we're able to just have fun and make it better rather than invent it from scratch.
Ste (01:05:29.771)
Yeah. Nice. Well, I think we're at overtime even. Well, maybe we can wrap it at that.
Adam (01:05:38.222)
Yeah, I think that's a good, a good stopping point. And, uh, yeah. Well, I will be out of town for the next two weeks. So the next one we can meet up on the 17th and, uh, yeah, continue on then.
Ste (01:05:41.067)
Yeah, that's perfect. Yeah.
Ste (01:05:55.595)
Yeah, sounds good. Thanks everybody who joined in. We're very glad for the feedback and the presence. And yeah, see you in two weeks, I guess.
Adam (01:06:07.156)
Bye. Have a good one.
Ste (01:06:08.971)
Bye, have a good one everyone. See ya.