Hardcover Live

Summary

The conversation covers various topics including their recent trips, organizing and minimalism, and the progress of the Hardcover project. They discuss the implementation of the search functionality and potential improvements. They also explore the idea of an advanced search page with additional filtering options. The conversation concludes with a focus on the importance of snappiness in search results. In this conversation, Adam and Ste discuss various improvements and updates to the Hardcover platform. They focus on improving the speed of search results and finding readers with similar tastes. They also discuss the implementation and testing of these changes, as well as the upcoming release that includes upgrades to Next.js and performance improvements. Additionally, they touch on the importance of user-to-user discovery and location-based discovery. They conclude the conversation by highlighting the exciting updates in design and expressing their enthusiasm for the future of Hardcover.

Takeaways

Boulder, Colorado has limited real estate and high prices due to its proximity to the mountains.
Preparing for parenthood involves organizing and decluttering the home.
The Hardcover project is progressing well, with a record-fast search implementation.
Considerations for the search functionality include positioning, filtering options, and snappiness of the results. Improving search speed is a priority to provide users with fast and efficient results.
Finding readers with similar tastes is crucial for user-to-user discovery and inspiration.
Location-based discovery can help users connect with book clubs and readers in their area.
Reducing the JavaScript payload can significantly improve performance and memory usage.
Syncing design and development efforts can lead to a more cohesive and efficient workflow.

Chapters

00:00 Introduction and Catching Up
01:02 Discussing Boulder and Expensive Real Estate
03:04 Preparing for Parenthood
04:21 Reviewing the Hardcover Progress
07:04 Minimalism and Organizing
08:40 Styling Preferences and Collecting
11:15 Using Graph Paper for Room Layouts
13:28 Discussion on the Hardcover Search Functionality
16:24 Positioning and Tabs in the Search
18:13 Advanced Search and Faceting
20:27 Ranking and Sorting Search Results
23:56 Expanding the Standalone Search Page
25:38 Styling the Sidebar and Scrollbars
27:20 Filtering and Sorting Options
30:57 Navigating from Search to Book Page
36:12 Handling Book Button Context
39:34 Considerations for Book Button Interaction
41:02 Loading Book Status and Match Percentage
42:53 Prioritizing Snappiness in Search Results
43:11 Improving Search Speed
44:08 Balancing Speed and Quality
45:08 Implementing and Testing the Changes
46:05 Loading Book Information
46:49 Finding Readers with Similar Tastes
47:57 Ordering Readers by Similarity
49:48 User-to-User Discovery
50:56 Finding Book Friends
51:15 Location-Based Discovery
52:07 Adding Location Filters
53:13 Storing Location Information
55:00 Reducing JavaScript Payload
56:29 Overhauling the Design
57:39 Upcoming Release
59:34 Refactoring to Next.js App Directory
01:00:56 Improving Performance and Memory Usage
01:02:06 Syncing Design and Development
01:03:13 Exciting Updates in Design
01:03:27 Conclusion

What is Hardcover Live?

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.398)
Hey, hey, stay, how's it going?

Ste (00:03.804)
Hey Adam, it's good enjoying a nice London evening for hardcover number... Is it 13? 14! I always miss it, I should yeah, make that kind of like a thing. How are you?

Adam (00:11.362)
14.

Adam (00:20.142)
Pretty good. Just getting back into the flow of things since getting back from vacation last week.

Ste (00:26.82)
Nice. How was Boulder? Is it in Colorado? Okay.

Adam (00:29.182)
It was fun. Yep. Yeah, it's like just outside of Denver. It's one of those places that we've heard a lot about and we've always been curious. We have a short list of places where if we moved from Salt Lake, where would we want to move to? And that was kind of on that list. And we really liked it. We just don't like how everything is three times the price of everything in Salt Lake City.

Ste (00:53.972)
Wow, okay. How come it's so expensive? Is it like a hotspot or a hub or something else?

Adam (01:02.598)
I think it's just limited real estate. Like the city is not that big. And then like, so one of the, I guess, the advantages of Boulder is that it's really close to the mountains, which is kind of like Salt Lake. It's also really close to the mountains. But then if you move to like Denver or something, you're more like half an hour away from the mountains. So you're kind of paying for that proximity, which also means smaller amount of buildable space there.

Ste (01:31.592)
Oh, okay, I get you. Yeah, well, I live in London, so I know that feeling. Ha ha ha.

Adam (01:35.15)
Hehehe

Adam (01:39.894)
Yeah, it was, it was fun.

Ste (01:40.164)
Yeah, that's really good. Okay, was it lots of outdoorsy stuff or like more like in-city stuff?

Adam (01:50.762)
We had a couple hikes planned, but we ended up mostly just eating and going to breweries and going to bookstores. So yeah, it was a lot of fun. And we went to Meow Wolf, which is this really cool interactive art installation. That's like five stories with like hundreds of rooms, each one done by different artists, where you have like this

Ste (01:59.956)
Nice, well that sounds like a great holiday.

Adam (02:20.102)
card that you get when you start off. And it's kind of like you're playing a game and you're as you're tapping this card at different spots, you're learning more about the world and unlocking different parts of the storyline. It's really a really neat concept.

Ste (02:37.204)
Okay, that sounds amazing. You have to link up after the call because yeah, that sounds great. Was it Meow Wolf?

Adam (02:39.374)
Thanks for watching!

Adam (02:44.588)
Yeah, there's a, I think there's three of them, Denver, Santa Fe and Las Vegas. And I think they're building one in New York.

Ste (02:54.24)
Okay, I haven't heard about that. Sounds really intriguing. It's really nice.

Adam (02:55.233)
Yeah.

Ste (03:01.232)
Yeah.

Adam (03:01.764)
Yeah, what have you been up to lately?

Ste (03:04.856)
Well, I have my parents visiting and yeah, that's been pretty cool. It's finally gotten hot, so lots of walks and that's pretty much all I'm doing now because as I told you and the other people don't know, but in June I'm expecting my first kid, so yeah that's a lot of prepping. Thanks. So yeah, officially announcing the...

Adam (03:26.446)
Hehehe

Adam (03:34.326)
Oh, looks like stay dropped off. Let's see if he comes back real quick.

Ste (03:47.227)
Oops, I just dropped up in the middle of an announcement. Okay, here we go. All good. Yeah, so yeah, I've been doing a lot of prep work for that, but else yeah, doing lots of stuff, including hardcover, which is going great. I think we hit a record on how fast the search went from the designs we made to...

Adam (03:48.782)
Whoop. Whoop. Ha ha ha. Yeah, yeah.

Ste (04:12.779)
actually seeing it live today on the staging environment. And that's pretty freaking great.

Adam (04:21.63)
Yeah, for don't want to don't want to gloss over the big news. Is your like house already and like, are you like preparing? Um, I don't, I have a feeling there's a lot of like house prep involved bringing a kid home.

Ste (04:36.027)
Yeah, there was a lot of house people, but luckily I am and my wife and

Adam (04:45.735)
Wi-Fi issues today. I have a feeling today I'll jump back on in a sec.

Ste (04:57.637)
Oh, I'm sorry. I think they're doing some construction work, so it keeps cutting off. I'm hoping it's not that they sometimes cut the cable because apparently it's like, you know, that kind of area. But yeah, I'm hoping it's not that. But anyways, yeah, I'm really into organizing my way of organizing as well. So we merit condo the whole thing and now it's even more organized than before. I think we kind of managed to make more room, even though.

Uh, we brought in more stuff, but yeah, we have all the stuff, even the big stuff because, uh, you have, you know, you organize it and have the impression that there's only going to be like a few Amazon orders, but then it comes in waves. So it's the first order, then, uh, the first wave, then the second wave of stuff that you have to bring in. Then, then there's the third wave of stuff, which is stuff you haven't, you know, you had no idea at first, but.

Yeah, you actually have to get that. So that's been actually like quite fun in a weird way because I like organizing. But yeah, to answer your question, it's all here.

Adam (06:10.575)
Yeah, you've gotten rid of everything that doesn't spark joy, it sounds like.

Ste (06:16.357)
Yeah, exactly. Yeah, well, that's, that's exactly what I did. We got lots of clothing, lots of stuff, and I still have some, which I don't know, has more sentimental value, I guess. But it's probably gonna go in the next couple of months. I'm really on a serious like mission to edit the stuff I'm surrounded by.

So that's good. Yeah, feeling ready, which is, yeah.

Adam (06:44.822)
Nice. Yeah, I think like whenever I feel like a sense of relief whenever I like have a ton of stuff I'm getting rid of and like take it to goodwill or something. It just feels like the house is lighter with less stuff in it.

Ste (07:04.745)
Exactly. Yeah. That feeling of a liner house, like having, you know, a little bit of like area in between your objects. Yeah. It feels weirdly, weirdly good. And yeah. Would you say you are a collector or on the, let's say on the horror spectrum, more towards the horror or more towards the like heavily like editing.

Adam (07:35.49)
I put myself pretty close on the minimalist side. Like I just redid my desk. I actually got a new like Apple cinema monitor for as like a birthday present to myself and cleaned up my desk space. And now it's like, you know, three or four things on it besides my computer. And then my wife's desk is like tons of stuff. So.

Ste (07:39.402)
Okay.

Ste (07:49.858)
nice.

Ste (07:57.775)
Oh wow.

Ste (08:01.341)
Well, yeah, tons of stuff is also good sometimes. Yeah, I think, yeah, I'm in between. Like, I like to get stuff. If you can see behind me, I have like a collection of like really small things that are just like sitting there. And of course, you know, plants, my fern, really proud of it. So yeah, maybe something in between. But I do appreciate, you know, the minimalistic.

Adam (08:16.617)
Mm.

Ste (08:29.786)
approach on stuff. It's really hard to nail and it does, you know, it's good. It gives you a good feeling.

Adam (08:40.146)
Yeah. Are you and your wife like on the same page for minimalism or does one of you tend to like want more or less?

Ste (08:47.498)
Yeah.

Ste (08:51.769)
Yeah, I'd say I mean it depends I mean we've been trying to like style up the things There was that like really minimalistic wave that came like I guess Your four years ago where it was all like throw everything in your house You can like have all day each objects and feel serene in the middle of you know Your very tranquil place

So at that point, I think we were doing that. But because of that as a reaction, I think right now we're in a place where we feel the need to like, zhuzh up things and get more style, more color, more like personality and everything. And that's really good because, you know, if you start from that slate where you're like getting rid of stuff and then trying to add on top of it while making.

Adam (09:35.509)
Mm-hmm.

Ste (09:50.929)
The assessment is this good does this fit like aesthetically in the whole thing? I mean and most important do I like it. I think do I like it is a big one Got lots of stuff that you know gives the whole like the core I guess a eclectic feel Yeah Yeah, I've been watching Queer Eye and

Adam (10:15.176)
and 50 yet

Ste (10:20.449)
The part I like most is when Bobby does the home redecoration, because I mean, some of those ideas, they're freaking great. I mean, I'm always in awe of how something can change.

Adam (10:42.174)
Yeah, whenever they use wallpaper, I'm like, wow, I need to think about using wallpaper.

Ste (10:49.565)
Yeah, exactly. I mean, you can go so wrong with it in so many ways, but if you actually go right with it, well, I guess that's like most things in life. I mean, using something correctly, yeah, really pays off, I guess.

Adam (10:53.55)
I'm going to go ahead and turn it off.

Adam (11:00.344)
Mm-hmm.

Ste (11:05.097)
Well, yeah, some stuff I've been just like mind blown on that show.

Adam (11:11.948)
Nice.

Ste (11:13.671)
Yeah.

Adam (11:15.619)
Yeah, one of the things that I kind of love doing whenever I'm doing like major changes around the house is I'll use like physical graph paper and like measure out the proportions of a room and like cut out little paper cutouts for the sizes of the things in the room and like use that to move it around and like experiment with layouts that way.

Ste (11:40.429)
Wow.

Adam (11:41.322)
I can like, I can like see like, okay, how is this room gonna look after I put the couch here and the desk here and the, and that's kind of how we got this room to the way it is. It was like me pitching a lot of ideas to my wife and her saying, yeah, yeah, let's go with that one.

Ste (11:59.909)
That's really nice. That's great. I mean, the room looks really cozy. I actually do that in Figma. I have like, you know, scale models. So yeah, I totally get that thing, but I haven't like heard about it. Is it that like little square paper and you just cut it out? Wow, that's great. I love that. That's yeah, maybe I'll do that. That's actually pretty good.

Adam (12:07.694)
Hehehe

Adam (12:20.138)
Yeah. Yeah.

Adam (12:27.242)
I just have like a plastic bag with like all of the, like a ziplock bag of like every piece of furniture in our house, basically to scale.

Ste (12:35.849)
Wow, yeah, that's great. That's actually great. I love having that. Yeah, that's really nice. Nice. What do you think about today? What should we be talking about on the hardcover side? Do you have something that you want to focus on?

Adam (12:58.982)
I was kind of curious to just talk about the kind of the implemented staging search and talk about like anything we want to potentially change before like I still have I still have some work to do on it so I think it would be a good time to kind of get feedback before it like put the finishing touches on it and I have I have a couple ideas for a couple different parts and a couple thoughts I have on it.

Ste (13:04.997)
Uh huh.

Adam (13:24.322)
but I think that would be kind of a good place to start the discussion.

Ste (13:28.853)
Yeah? Sounds great. How should we do it? Yeah.

Adam (13:31.022)
Cool, I can probably share and then we can talk through this. Let's see.

Adam (13:39.31)
I'm curious what sharing on my new monitor is going to look like. If it's going to be too small, I'll probably have to make things bigger.

Ste (13:47.161)
Oh yeah.

Ste (13:52.025)
Haha, look at that. Yeah, I love that resolution. We can test like higher resolutions now. I mean, since we're both working on laptops, we only had like that width. So I'm curious how it renders on a bigger width.

Adam (13:52.542)
So.

Adam (14:00.395)
Yeah.

Adam (14:08.882)
Yeah, because this is, yeah, I have to get it like about like that big before it really starts using the full container. Yeah.

Ste (14:19.597)
Okay. Usually how do you on this monitor, how do you keep things? Do you keep the browser window full width usually, or do you have like multiple windows that you just like reposition?

Adam (14:35.566)
Um, sometimes I'll do two, like I'll do like one here and one here, but, uh, and then I, I just use this app called, uh, Divi with hotkeys for like positioning or like this thing which allows me to like set the width of it to like two thirds or I have like hotkeys for like, if I just want to do it for half. Yeah. Um.

Ste (14:37.737)
Yeah, like that. Hmm. Okay.

Ste (14:54.409)
at that. Okay.

Adam (15:04.732)
Very cool at little app. But usually full screen.

Ste (15:06.592)
Yeah.

Ste (15:10.563)
Nice.

Adam (15:15.502)
Yeah, we're not making any major changes right now for this page other than accessibility, performance, that kind of thing. I think aside from the search, which we'll get into, the only thing I've really changed on this page is that I'm making these parts not use motion in anymore, mostly because...

Ste (15:23.545)
Mm-hmm.

Adam (15:45.018)
with this changing to a server rendered page, it looks empty for a longer period of time before they actually come in. So everything else will still have framer motion to animate in, but these four would appear immediately, if that's okay.

Ste (15:53.07)
Gotcha.

Ste (16:00.369)
Mm-hmm. Yeah, well that makes sense. Yeah.

Adam (16:08.542)
Yeah, so we talked about using command K to bring up the search modal. And let me open up some notes to take these in the other window here. So.

Ste (16:21.855)
Mm-hmm.

Adam (16:24.994)
I guess starting from the basics here, the positioning on this, I just put it right at the top. But do you think that's good or do you think we need to move it a quarter down or some percentage down? Because right now, if you start typing.

Ste (16:39.189)
Well, it could be maybe... Yeah.

Ste (16:46.421)
Yeah, it's kinda good... Mm-hmm.

Adam (16:46.694)
One of the issues I had is when, yeah, it would like, as soon as I typed, it would like move up. While if it's anchored to the top, then it'll, this part will stay in the same position when you start getting results in.

Ste (17:00.457)
Yeah, that's great. Uh, I think the padding works visually. I mean, on this resolution, maybe it's a bit up, but on the one I tried it, it sits like where it should, uh, so I don't mind it. Uh, I was thinking to put it just below the header, but, uh, I think it works like right up there up top.

Adam (17:34.914)
see. See how we. Yeah.

Ste (17:36.033)
There's a French book, the French edition is first. They call this your Sier. Nice.

Adam (17:46.254)
Let's see. So right now, you know, in the mock-ups, there's the idea of having like different tabs for like authors and other things. And I'm thinking for this first phase, it would just be books. That would probably be the easiest way to do it. Which made me think maybe we should just get rid of the tab altogether, especially on mobile.

Ste (18:07.036)
Mm-hmm.

Adam (18:13.99)
where once there's a keyboard, like on keyboard, you only see

With the keyboard up, you'll see about from where the top of this row is to the top of the screen. So you only see these two results right now.

once the keyboard's up.

Ste (18:35.245)
Okay, yeah that makes sense. Yeah, we can get rid of it until we have the authors. What's cool about this is that When you type an author name, it would actually show you the books by that author, right? I mean, that's the way I tried it and any type of keyword you write even if it's like mistyped Actually shows you the the right book

Adam (18:48.536)
Yeah.

Adam (18:59.978)
Yeah, if I just type, yeah, it features the ones that have them in the title first, and then it starts to go down to the ones with them as the author, which makes me think that we'll probably have to do, like I think one of the nice parts about Algolia is that as people start searching for things and then clicking on results, those results will raise in, like those results will move to the top.

Ste (19:01.577)
Yeah, that's great.

Adam (19:28.786)
So if everyone searches for Sanderson and then clicks on Miss Porn, then eventually this will be the top result for Sanderson.

Ste (19:37.021)
Nice, okay, so it's doing all that ranking automatically in the background. That's great, yeah.

Adam (19:43.049)
Yeah.

Ste (19:53.245)
I was going to ask if it actually can show the most popular results first, but if with search it will actually do that, that's better. Is there a way to actually show the books with most readers or which have the... Yeah I guess most readers would be like the best metric, but maybe also reviews or that kind of thing.

in show up first in search.

Adam (20:27.11)
Yeah, so I'm going to pull over some code here. Oh, wait. Does it show up? Cool. So this is kind of how it ranks what's shown. So in addition to how similar it is to the text you're searching for.

Ste (20:34.526)
Yeah. Yeah, all good.

Adam (20:53.986)
These are the fields that it searches within. And then this is what it uses to optimize its sorting after it finds similar things. So users count is the number of users who have saved that book in any way, shape or form, whether it's the want to read or read. And then it's the number of people who rated it, the number of activities, and then it's the rating from high to low.

Ste (21:20.533)
Nice, okay. Wow, this is really comprehensive. Is this the Ruby or Algoia or both?

Adam (21:31.006)
Yeah, this is the Algolia search gem for Ruby. And one of the really neat things that this allows is, this is our Algolia interface. And so it created like this, they call them like an index of everything that you've created. And it created this like sample advanced search.

Ste (21:52.621)
Mm-hmm.

Adam (21:58.262)
based on just importing data. I didn't build this at all. And it has this idea of faceting. Faceting. So it's like narrowing down the results by these things on the left. So like you can narrow it down by genre, fantasy, and it's already filtered all of them down. Or

Ste (22:26.125)
Wow, okay.

Adam (22:28.29)
funny. And now it's like down to, you know, Harry Potter, checkers guide.

Ste (22:35.101)
Nice. This is great. This is the first time when it really feels like a huge win to have our own book data, our own database that we can do this with. If we didn't, if we just

Adam (22:56.562)
Yeah, definitely not. And this is something that I've seen come up a bunch on the Goodreads subreddit. It's people asking for an advanced search. I want to search for books that are this genre and maybe this release date. I want to get the most popular fantasy books in the last five years, things like that. And I think there's an option.

Ste (23:03.263)
Mm-hmm.

Ste (23:16.426)
Yeah.

Adam (23:23.39)
Um, like there are other options for parameters as well for like, uh, rating within a range or number of readers within a range as well.

Ste (23:39.031)
nice

Adam (23:40.91)
So this kind of got me thinking about our stand-alone search page. If we wanted to, we could make something even more elaborate for that page.

Ste (23:52.177)
Okay, what are you thinking? What should you throw in there?

Adam (23:56.714)
Um, I feel like genres and maybe like, if it has, it wouldn't be like this, but like if it has audiobook or an ebook available, maybe moods and tags.

Ste (24:15.903)
Uh huh.

And this would be a thing you can search by. So you would be able to maybe tap something or activate something or do something that allows you to filter with those parameters.

Adam (24:39.314)
Yeah, something in like on desktop, when you click on like, see all results, extra S there, when you see all results, that would go to kind of a page like this, that's like pre-filled with what you're currently searching for. So it would show up like this. And then you could start.

Ste (24:58.751)
Mm-hmm.

Adam (25:07.958)
like narrowing it down from there.

Ste (25:11.541)
Okay, gotcha. Yeah, that'd be nice. I think we can do something like that, maybe with the things we are, or the same layout that we're using on the list page to filter and sort things. Maybe. I'm thinking how it would work for mobile, because for desktop, yeah, definitely we can put that sidebar in, but for the full...

Adam (25:28.885)
Hmm.

Adam (25:32.482)
Yeah.

Ste (25:38.197)
search page on mobile. I'm thinking maybe we can use the actual book drawer or book drawer to do some of that, some of those actions.

Adam (25:51.154)
Yeah, kind of like the, what was it, like the review in the book page that like filter.

Ste (25:59.877)
Yeah, exactly. Yeah, where the drawer opens up and offers you because I was thinking of how to actually like place those buttons because it's going to be like probably like either lots of check boxes or things like that. So it's going to be cramped on mobile if you're going to go to that page because on mobile we won't have the fast search. We can even like strip it down. So on mobile.

Adam (26:02.335)
Yeah.

Adam (26:17.103)
Mm-hmm.

Ste (26:29.661)
you can't like search by though using those parameters, but it would also be nice to have them. So yeah, maybe I can find a way to integrate those so they show up well on mobile too. I'm wondering. Yeah.

Adam (26:42.273)
One.

Adam (26:46.566)
One other thought I had was a sidebar flyout kind of thing as well, something where you click on a button. Actually, maybe not like that. This is more for navigation, but I think we were exploring that for the book button as well.

Ste (27:02.826)
Uh huh.

Ste (27:07.797)
Yeah, it could be a thing.

Ste (27:13.657)
Mm-hmm.

Adam (27:17.179)
Yeah, either a button or a sidebar.

Ste (27:20.617)
Yeah, that works. Definitely. Let's find some criteria. What you mentioned was pretty good for like a starting version. It was the has audio book and genres.

Adam (27:39.086)
Yeah, we can hear the things that we can filter by. So we can filter by, yeah, genre, moods, content warnings, author names, contribution types, which is like author, illustrator, narrator. Tom.

Ste (27:46.497)
Moons content warnings.

Ste (27:57.225)
Hmm. Nice, okay. So you'd search for an author, you'd see if they are actually, let's say Brandon Sanderson has a side hustle translating things. You only want to see the books that he translated. You'll take that and you only see the books that he translated, right? Okay.

Adam (28:20.727)
rate.

Adam (28:24.098)
And then yeah, comp.

Ste (28:24.365)
Contribution types, yeah.

Adam (28:27.502)
compilation, which is like, is this, is this a standalone thing? Or is it part of a larger book? Like, like if you're getting the Sandman volumes one through five, that's a compilation of one through five. So you can say, I only want compilations or I don't want compilations.

Ste (28:48.161)
gotcha okay well those are all good cover color wow okay can you get the cover color

Adam (28:50.686)
And then that was just a funny one I added just to see if it would work. And, uh, I don't know how accurate it is though. Like the algorithm that I'm using to get a color color. I don't know if it's a quite there yet. Let me see if I do red.

Ste (29:09.399)
Is it the same thing we're using to get the color from the book cover for the backgrounds?

Adam (29:15.57)
Yeah, it just runs that through. Yeah. So yeah, this is like searching for red colors and they're

Ste (29:16.877)
Nice.

Ste (29:23.269)
Okay, those are pretty red. Red, red, okay, yeah, yeah, they're all red.

Adam (29:28.958)
Yeah. How about like, um, uh, blue? Yeah. So I feel like it's better. It's um,

Ste (29:36.981)
blue should be okay yeah oh this is gonna be yeah this is gonna be a hack for buko huge hack

Adam (29:47.85)
Yeah, I just realized you could do that. And I thought, well, might as well add that.

Ste (29:53.526)
yeah that's pretty cool yeah I love this stuff yeah that's pretty nice that's pretty accurate

Adam (30:04.002)
So yeah, having that, and one way we could do it is like we could, well, for starters, I'll probably like implement it so that for, you know, the first release, when you click see all results, it's still just gonna show these 30 results and then it's gonna have infinite scroll and it's gonna be on its own page.

Ste (30:27.087)
Mmm. Nice.

Adam (30:28.03)
and that'll be kind of the V1. So this will be like for after we get this all out, after we make sure it's working, this will be like a future iteration for this new page.

Ste (30:37.463)
Yeah.

Yeah, that's great. I mean, this is already a huge improvement and the readers asked us for that. Already saw some like really enthusiastic people in the supporters channel. Being really happy that we're listening to this. So I tried it. The command K is really good. So it's gonna really power up the search. I was wondering, there's a sidebar there.

styling sidebars, I know it's been an issue for us. Could we have like something that automatically stylizes that sidebar the way we want to? I know Eugene had some work done on the feed scroll bars at some point, or just like take it out because on some devices that sidebar might show up a lot chunkier. Yeah, yeah, that's the one. Yeah, yep.

Adam (31:31.97)
Do you mean this thing?

Ste (31:35.185)
On Apple, it's pretty nice, but I've seen it on other browsers and it might just be like a chunky piece of like thing like floating around, which is not even in the theme of the site. So I'd be okay with removing it or if we can install it. I was gonna search for something that does it as globally, you know, so globally on the whole website. Our style bars are looking like this.

uh... found a good solution but maybe if you search for one i'm actually asking you to do as well

Adam (32:13.97)
Yeah. Yeah, I yeah, it does look out of place. It's so so bright right now.

Ste (32:19.765)
Yeah, minor detail, but yeah, on some browsers, it might be like really, really, really.

Adam (32:24.609)
Yeah.

Ste (32:29.853)
not that subtle.

Adam (32:31.518)
Yeah, like I'd almost like it to just be like blend in with like a very notable indicator for where you are based on the, based on the total books.

Ste (32:41.345)
Yeah, that'd be nice. Yeah. Sidebars are such a... like... it's good, but it's like a design element that looks... I haven't seen something look so different on so many devices. I think if there's like a feature of a browser, that's the the sidebar. It comes like for every like scroll you have and scrolls are everywhere. So yeah, you have a sidebar everywhere.

Adam (33:12.079)
Yeah, one thing I noticed with this is kind of how things wrap. And I still haven't added the book button. That'll be probably one of the last things I add. And that'll be probably one of the most tricky parts of it, because this data is coming back from Algolia. And then we need to make another request to the server to get back the data.

Ste (33:23.402)
Mm-hmm.

Adam (33:40.226)
for the current user about each of these books.

Ste (33:44.413)
Okay. Just a question from a usability perspective. Do you think it would be annoying if you'd actually have to visit that book page to market as one to read? It might be. I mean, I'm like on the edge with this interaction because it might be easier to just go...

from the search to the book page. If you had like a really easy way to go back, that would be really neat so that you don't lose the context. But just going, yeah.

Adam (34:20.187)
Or, yeah.

Yeah, like if you click on search again, it pre-populates it with your last search. So if you click here, it takes you to that page, then you click search again, it pulls it up to where you left it off.

Ste (34:32.503)
Yeah.

Ste (34:40.013)
Mm-hmm Yeah, or there could be like a way of going back but going back to the search with the Prefills. Yeah with those same results Maybe we wouldn't need to add the book button You would just I mean even now I think the most common use case is you hear about the book you search

Adam (34:53.41)
Hmm... Yeah...

Ste (35:09.481)
it's type of author, whatever, you see it in that list. Whether you tap the book button from there or you tap the book and you tap the book button next, it's a one second interaction at most, but it takes you out of the search. But of course, if you're searching for something and you're done searching, you would wanna go to the book page. So you wouldn't wanna stay in search.

You'd want to go to the book page. My market does want to read. The question is, would you be, would you want to do anything else afterwards with the same search? So if we're taking you out, you're like, ah, crap. Okay. I had my search there. Uh, what's going on? I have to redo this thing. I'm thinking it might not be annoying because when you search the finality of that is that you just want to go on the book page and.

Adam (35:50.37)
Hmm.

Ste (36:06.609)
that book has one to read once you find it. But I don't know.

Adam (36:12.998)
Yeah, and one of the things that this will do, it looks like there's a bug in it right now, but if you clicked on, like if you searched for Ender's Game and you clicked on Ender's Game, what would happen is that this would close and it would take you to that book page. And then when you click on this again, it would populate with the thing that says recent searches and the top one would be Ender's Game. And if you hit down, enter,

Ste (36:38.777)
Oh yeah.

Adam (36:42.954)
it would take you to that page again, or you could click on that row.

Ste (36:48.437)
Well that sounds... Yeah.

Adam (36:49.854)
So it's one additional step compared to if it pre-populated it to the total search results. But yeah, I think it handles both cases. It makes it one more click rather than typing the entire search.

Ste (36:59.03)
Mm-hmm.

Ste (37:06.869)
Yeah, that's really good. I mean, I don't think like anyone would be bothered if we had the recent searches and they would just have to go tap, tap, tap. I'm not thinking, that's not a costly interaction. Would there be any other reasons for you to want to stay in the search rather than just going to the book page and marking it as want to read? Would you want to in the same search, maybe mark?

Several books has one to read. That's the only thing I'm thinking where it could be Mildly annoying but mildly I mean it's Okay, yeah

Adam (37:39.094)
Yeah.

Adam (37:48.01)
Yeah, like if you're going to do like all parts of a series, like want to read, want to read. Yeah.

Ste (37:54.658)
Yeah, that's a good piece. So it's all part of the series. There's more ways to go about it, I guess, because if you're on the series page and you see the other books in the series, I'm guessing you can just go on every book page and tap the one to read. It wouldn't be as easy as...

Adam (37:59.699)
and

Ste (38:22.825)
just tapping it in the search. But yeah, I'm thinking if it's like way to, there's also that. I mean, there's also like a quick preview that we can add. Maybe if we actually implement the book button with the drawer coming in from the bottom and the drawer has some info about that book.

So not, well, if we don't show the book button, but actually like tapping on the book would bring up the drawer with the, yeah, kind of something like that, but also with the book statuses. So if you want to read that book, you can do it from that drawer, but the button doesn't appear there. Well, yeah, that would actually mean the same.

Adam (38:52.479)
Yeah.

Ste (39:21.069)
thing for from a dev perspective, right? Yeah, you'd have to get that context.

That's... yeah, okay.

Adam (39:28.885)
Yeah.

Adam (39:34.562)
Hmm. Yeah, because right now we get rid of that that button on mobile, like our looks like, yeah, this little button. We don't show that on mobile, which makes sense because it's it's only a hover state thing. But yeah, would we it feels like on on mobile, we don't need it because like you're kind of just navigating to the book. And that'll be that'll be I think that'll be fast enough.

Ste (39:44.349)
Mm-hmm. Yeah.

Ste (40:00.undefined)
Mm-hmm.

Ste (40:03.985)
Yeah. And if we can, yeah. If we can make it so that it's functions really snappy with that context, but I'm guessing it would be like really costly to have that book button context for each book in the search, right? Would it slow it down?

Adam (40:04.226)
But yeah, but yeah, on desktop.

Adam (40:28.082)
It's so I haven't implemented it. I've been trying to rack my brain around how I'm going to actually do that. And I have a theory on how it's going to behave, but it would for sure, like any way you look at it, the results that are gonna come back from Algolia are gonna need to come back before we query our database to get your status for a book. So there's gonna be a time when it's, you see,

Ste (40:35.731)
Hehehehe

Ste (40:54.795)
Mmm.

Adam (40:57.846)
the results without your status for every book.

Ste (41:02.419)
Okay.

Adam (41:02.766)
So it's like, we might need like a loading status for the book button and also for match percentage because in that same query, we'll also get the match percentage for every book for you. And potentially like others of your friends who have also read that book, all of that will be coming back on this secondary query.

Ste (41:14.869)
Okay.

Ste (41:26.381)
Okay, gotcha. That looks straightforward enough, but I'm guessing, I mean, if we can avoid it and maybe just go directly to the book page, maybe that would be like an easier way to do it. Even with the match percentage, you can go to the book page, see your match percentage. I mean, if you find an easy way to...

do it without making it slower. I think the snappiness of it is the main goal here. And to have that extra layer of, I guess, context would be the secondary concern. The snappiness in my mind is like the biggest thing here, because if it doesn't load fast or even if stuff keeps...

Adam (41:56.009)
Oh yeah.

Adam (42:03.495)
Yeah.

Adam (42:10.887)
Yeah.

Ste (42:24.041)
loading for a while, I think it's still going to appear like, not be as fast and you'll have lots of other things you're going to wait to load. So I'm guessing one option would be to just like leave those on the book page. It would make things definitely easier and you won't see stuff loading up and flicking.

Adam (42:39.075)
Yeah, that's true.

Ste (42:53.745)
after while it's being fetched in the background. So after you made the search, the results appear. You're all look now I can like browse through all these and then stuff appears. Okay, you've read this.

Adam (43:11.166)
Yeah, yeah, there's, there's one way of doing it where, like, as we're loading all of that data, like, as we're loading their status for every, every book that shows up in the results here, and as we're loading that match percentage.

Ste (43:11.185)
I don't know. Yeah.

Adam (43:27.166)
we could be saving that. So maybe as they type, we've already loaded it. So they keep typing and then by the time, they've typed a couple more letters before they realize the results are already in. And by that time, we've already loaded it and we're showing it already pretty immediately. So it's one of the things I wonder about is, will it...

be so fast that by the time they've realized the results are loaded, we already have their book status. But I feel like the only way to know that is to like, implement it and then use it and see how slow it is or how fast it is.

Ste (44:08.088)
Yeah.

Yeah, that sounds good. Maybe it's fast enough. I mean, if it's that fast, even a bit slower than that. Should be good. The main thing I think we have to worry about here is not making an experience which is like really snappy and really fast, which is like really high in terms of quality, appear slow.

So if we do that, I'm guessing, you know, if you can pull that off, definitely. It's a good one. And yeah, you maybe want to know if you read the book. This is another use case. You search for a book. Maybe you don't remember reading it because you have another 200, 300 books in your want to read that year. And you actually want to know if you might have wanted to read before going to the book page.

Adam (44:38.606)
Yeah.

Ste (45:06.069)
That would be nice. It still falls secondary, I think, to the main purpose, which is finding results really, really fast.

Adam (45:08.055)
Yeah.

Adam (45:17.874)
Yeah. Yeah, that makes sense. I'll probably try implementing it and sharing it in the supporters channel this week. And we can see how it feels from a speed standpoint.

Ste (45:34.549)
Nice. That sounds really good.

Adam (45:36.374)
Yeah, and I think the solution that we'll use on search will also be able to use that on things like lists pages and other pages where we get a lot of book info all at once. With the new structure of hardcover for like this page and some future pages, we're gonna be loading

things in a different way. Like before, like when a page loads, we would just hit the database and get everything about that book, everything about that user's interaction with that book. Now we're kind of breaking those apart and the server is gonna provide everything about the book and then from the website directly to.

our database, we're getting the user's interaction with that book. So, we're breaking it up into two calls, and we're trying to do like really aggressive caching of those calls so that they will be fast. But yeah, it's still in progress. So, I think seeing it in action will determine if it works or not.

Ste (46:49.609)
Yeah, really soon, really soon, it's gonna get really snappy. We're gonna have a snappy situation. Well, it's already snappy, so. Yeah, that sounds great. I'm wondering for this search, if you search for, let's say, fantasy, would you be able at some point, not in the first iteration, find other readers that read fantasy or who have...

Adam (46:53.73)

Ste (47:19.409)
Yeah, lots of books Tagged with a certain genre in their library

Adam (47:26.718)
Yeah, yeah, I think like when we implement that, it'll be, it won't be using Algolio. So we'll be using like a straight database query for that. And yeah, I'm wondering like how we will want to do that because we could do either of those things. We could have it optimized by.

number of readers who have read fantasy. We could have it be people who most recently read a book tagged with fantasy. We could have it be like readers that most recently joined that read a fantasy book. Yeah, there are a lot of options there and we could we could choose any of them. But yeah, as soon as we choose one of them, that's that's the ordering.

Ste (47:57.126)
Mmm, yeah.

Ste (48:12.861)
Yeah. Okay. Yeah. That's good to think about. I'm guessing over here. Yeah. You'd maybe want to see people who you're really passionate about. Let's say an author or tag or maybe let's say what would be the most common genre. But I'm guessing, you know, that would be a bit misleading. You'd find like if you type in fantasy, maybe it's fine.

a hundred thousand people who read fantasy ordered by any of those criteria you mentioned. What would be the goal here? You'd want to find some people that read the same things as you so you can look in their library and find books from someone who is really an inspiration in that.

Adam (48:53.163)
and

Ste (49:11.214)
area, I'm guessing. So...

Adam (49:15.394)
It kind of makes me wonder if the place that someone would go for that is less search and more like they would find a book they really like, and they would be like, filtering down the reviews based on because the reviews are going to be like, these are the people with the highest match percentage to you for this book. So this might already kind of Yeah.

Ste (49:27.387)
Mm-hmm.

Ste (49:33.699)
Yeah.

Ste (49:37.929)
Yeah, mm-hmm. Yeah, that's actually a good

Ste (49:48.105)
Yeah. Sis? Yeah. I'm sorry.

Adam (49:48.606)
Yeah. I think that the user to user discovery part is still one I'm very like iffy on how we do it because it's a hard problem.

Ste (49:58.158)
Yeah.

It's a hard problem. I feel like is the one we have to crack. Why? I don't know why, but I feel like this is our problem. I think this is like the whole thing. Uh, the reader to reader or reader to author maybe even, uh, or let's say one of the things that we have to crack.

But yeah, it's really interesting, but you're right. I think through reviews, it's a really good way to discover like that exact thing that we're interested in. So yeah, that's good. That's good. If we get the book page and that's exactly this configuration, it should be really easy to find people with similar taste that you can take inspiration from. Because I guess that's like the.

bottom line a bit.

Adam (50:56.323)
Yeah, finding book friends. And one of the ways that people have, that came up in interviews for finding book friends is also by location. So finding people close to you, like within a certain radius that are on hardcover.

Ste (51:07.735)
Mmm.

Ste (51:15.109)
Yeah, how would that happen? Would that happen through search? Would that happen through where's a place where I mean you list the location on your profile for that exact same reason? um but

Adam (51:28.326)
Yeah, it would almost be like we would add something to this search that also does it by like location or something.

Ste (51:36.359)
Okay.

Ste (51:42.633)
Okay, that's great. Wait, I was just looking because I have a new

Ste (51:49.697)
search, if you go back to Figma, there's a new supporters page, which is under find readers. Yeah, that's where I'm at. And we can add it on those filters, I guess. Yep.

Adam (52:07.714)
Mm-hmm. Yeah, most similar recently. Yeah.

Ste (52:13.857)
And there's also like filters on, well, yeah, I think we'd have to choose between like this filters and this. So, you know, actually you can sort readers by similarity and the filters maybe can be about when they signed up or they could be one filter could be location. So.

Adam (52:42.399)
Yeah.

Ste (52:43.905)
That could be it, maybe. It would be approximate. Right now we're storing location as a text field, right?

Adam (52:54.166)
Yeah, we're not geolocating that in any way. It's just a text field.

Ste (52:58.525)
Yeah, yeah, we don't know your location if you're watching this. It's just like what, what you provided just the place for me is London. I mean, hard to find me, I guess with just that bit of info.

Adam (53:13.429)
Yeah, and that's probably what we would do. We would keep it like the city or the zip code or in general. What's like the UK equivalent to zip code? Would it be like?

Ste (53:21.405)
Mm-hmm.

Ste (53:26.473)
Well, it is actually like the zip code. So I'm in SE1. So the full zip code is usually two parts. So it's SE1, which is Southeast one and SE1, so each region has its two letter number and then two letter code and then a number. So I'm Southeast London.

one which is the zone and then there's another set of letters which pinpoints your location so you can get my exact same building with the six letter number but if you only have SE1 you kind of know so I could say I'm in SE1 are there any other readers in SE1 you want to go to Tanner Park and do a reading party on Saturday and do that kind of stuff

So does it work the same in the US? Can you like narrow it down or?

Adam (54:32.818)
Yeah, there's some lookup table. There are a couple ways of doing it. One of them is that if you have some in zip code, you can get the center location for a zip code, latitude, longitude. And then there's an algorithm to get the distance between two latitude longitudes, which is a pretty efficient way of doing things. So that would be one way. The easiest way would be that we store

people's latitude longitude in the database. And then they can provide, like we could default that latitude longitude based on whatever they type in in that location field. And then we would give them an opportunity to refine it. So we would like pull up a map and they can drag their pin somewhere else on the map, but it would start off wherever Google Maps says that string exists.

Ste (55:27.281)
Yeah, that's nice. I mean, yeah, definitely. Location is a pretty good one, I'm guessing for book clubs, especially that would be like a really good use case for getting someone's location at least approximate. I mean, not their exact location, of course, you wouldn't want to like put your home address. But like, I'm in this neighborhood because even in London, for instance, if you're

Adam (55:49.491)
Exactly.

Ste (55:56.369)
in South London. The chances you're gonna go to like a book club or reading somewhere in like North London depending on where it is. I mean of course you can go there but sometimes it's a one and a half hour train ride or bus ride or even car ride up there. So you're not gonna go there. You usually like stay local. So just getting those rough coordinates might be interesting.

or at least the city, you want to live in whatever city you're in and you want to find other readers. That's unlikely to happen, I'm guessing, with any app right now.

Adam (56:29.182)
Yeah.

Adam (56:49.471)
Yeah.

Ste (56:49.513)
Reddit asks for location, right?

Adam (56:54.074)
I don't know. I don't think so. Or I don't even know. I don't feel like it's listed on my profile, but I don't know.

Ste (56:55.809)
Today I'll have to check they might

Ste (57:05.083)
Oh yeah, it might not be.

Ste (57:10.089)
Yeah, nice. But search is coming up great. It's gonna be a great experience once it's out. After, to give all the people an APA on when we can get this in the live, on the live website, after we do the, yeah, round of...

the bugs I guess and yeah linking up things in this search it should be ready to go right in the first version

Adam (57:50.246)
Yeah, I have quite a few things still to do with it. Mostly not related to search, mostly just like, as part of this, we're also upgrading from the Next.js, from Next.js's pages directory to Next.js's app directory. And trying to do that in a way where some pages will use the app directory.

like the ones I'm converting, which is just going to be like a handful to start. And the rest of the pages on the website will use the pages directory. So there's a couple, and then we're also updating the book button to use the new book button. It's not going to be the full book button for starters. Like, uh, they won't have the ability to select, um, dates read like that. That part will still exist in the current modal. Um, so it's, it'll, it'll start off with just the book button changing.

And I think, so yeah, search, book button, Next.js 13, and speed improvements are kind of all rolled into this release. So I think that release, probably looking at another two weeks for, and then, so.

Ste (59:01.657)
Okay, that's great. Yeah. There's a lot of changes, especially with the Next.js app directory, but this is going to be a good refactor. I'm always wary of refactors, but this was a huge one, even by their standards. I mean, it's a whole React...

Adam (59:07.734)
Hopefully.

Ste (59:29.233)
overhaul as far as I can see from my place as mostly like a designer. But it seems like quite a big deal, like a paradigm shift in how things are done. I've seen lots of PHP memes going around. Like, yeah, but I'm guessing it's pretty good. I mean, yeah.

Adam (59:34.741)
Yeah.

Adam (59:50.29)
Yeah, I've been, yeah, it's, one of the things that it's making it very clear is that when the initial version of Hardcover was created, I was learning React as we were building it. And so, like when you load a page on Hardcover right now on production,

it effectively just loads all the JS you'll need for the entire app. Like, you know, when you load a random page, it loads like the component to edit a review, even if you're not even logged in. You know, it loads everything about the book status button, even if you're not logged in. So there's like all of this JavaScript that's being sent to the user that they just will never use. So part of this release is narrowing that down and only sending

what they will actually use. And so it's going to go from like 500k for the first load to like 100k, hopefully.

Ste (01:00:53.064)
Wow, okay, that's huge.

Adam (01:00:56.254)
So I think that'll be kind of one of the trickiest parts to get right because it'll mean like kind of digging into individual parts where there are kind of memory leaks and component leaks in the app. But I'm kind of just doing that on the template for starters and then if we get the template done and like the homepage and like the blog pages, then we can kind of slowly improve all the rest of the pages in the app over time.

Ste (01:01:07.225)
Hmm. Yeah. Yeah.

Ste (01:01:22.973)
Yeah, that sounds great. I mean, we also are overhauling how we're doing things in design. So I'm also planning to do the components, the, even the more complex components based on our UI library in the design. And now in the designs, I'm also using exclusively like componentized versions. So once we get that, if we can get it up.

Adam (01:01:46.568)
Nice.

Ste (01:01:50.381)
If we can like sync design with what's going on in development, that'd be great. We still have like a lot of things to work on, but there's lots of like momentum because we have all that stuff developed and.

Adam (01:02:06.47)
Yeah, I think it makes me think maybe we should start like a Google spreadsheet of like every component, and then every variant and size for that component. And then we can start like checking off which of them have been implemented and which of them haven't. And yeah, because

Ste (01:02:25.797)
Yeah, that'd be nice. Maybe we can start the GitHub issue actually about it. And yeah, see how it goes. Lots of stuff in the pipeline. I was also playing with the new email tool and I know that's not a priority, but I'm very excited how that's going. And yeah, lots of stuff on the design side. I was working on the support pages and generally like improving the navigation for all the other like pages we have that.

are right now in the footer, but maybe, yeah, we should surface better. So yeah, lots of exciting stuff for me as a designer and for you as a developer, I'm sure, and for us as like product people.

Adam (01:03:13.99)
Yeah. Cool. Well, yeah, I think this is a good discussion for the day. I have some things to work on on Search, but I'm having fun with it. So it's been a fun project.

Ste (01:03:16.362)
Yeah.

Ste (01:03:27.689)
That's good, that's good. That's perfect. Well, yeah.

Ste (01:03:34.637)
But yeah, that's wrapped up and shipped soon. So that's very exciting. Okay, well then we're gonna leave everybody until hardcover number 15, which I'm sure I'm gonna name hardcover 16 or 14. But yeah, until next time.

Adam (01:03:41.966)
Cool. Wow.

Adam (01:03:56.482)
Sounds good. Talk to you later. Bye.

Ste (01:03:58.733)
See ya, bye.