Hardcover Live

Summary

Adam and Ste discuss their recent family time and vacations. They also discuss the challenges of balancing work and personal life. They review the design for updating progress on a book and consider different options for the user interface. They explore the idea of using incremental page numbers and discuss the possibility of autosaving progress. They also discuss the placement of the change edition button and the design for editing the page number. In this conversation, Adam and Ste discuss the implementation of a feature that allows users to select their book edition. They explore different options for displaying and selecting editions, including using a combo box or a popover. They also discuss the possibility of users adding new editions and how to handle covers for different editions. They touch on the idea of using the same components for updating progress and edition selection. They also briefly mention upcoming features related to book statistics and progress tracking.

Takeaways

Balancing work and personal life is important for productivity and well-being.
Consider different options for user interface design to improve user experience.
Incremental page numbers may not be necessary if users can input the exact page number.
Autosaving progress can be implemented with a time buffer to prevent multiple updates.
Consider the placement and design of buttons and form fields for a seamless user experience. Users will be able to select their book edition, with options for different formats and covers.
A combo box or popover can be used to display and select editions.
Users can add new editions, which will be available for others to select.
The progress tracking feature will be updated to store pages read and audio position.
Book statistics and progress tracking will be enhanced in future updates.

Chapters

00:00 Balancing Work and Personal Life
16:04 Designing the Update Progress Feature
31:44 Implementing Autosave for Progress Updates
38:57 Optimizing Button Placement and Form Field Design
40:22 Implementing Book Edition Selection
56:03 Changing Progress Tracking and Adding Journals
01:08:17 Sneak Peek into Book Statistics

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

Ste (00:03.886)
Adam, pretty good, pretty good. How about you?

Adam (00:08.328)
Pretty well. We were just chatting about your, your mouse problems before things started.

Ste (00:13.998)
Yeah, I don't know. I think I have the mouse curse. I have two magic mice near me and none of them connects to the laptop. So, yes, I'm going to design on the trackpad again.

Adam (00:27.176)
Man, I'm still amazed that they designed that mouse where you have to like put it upside down like a dead mouse and charge it. So you can't use it while it's charging. Like Apple's usually so good at design, but I don't know how that one snuck through.

Ste (00:35.854)
Yeah.

Ste (00:43.15)
Yeah, I actually heard, I saw an interview with Tim Cook about the ergonomics of the actual mouse and they nailed so much stuff so well but yeah, it feels like it's dead when you actually try to charge it and it's like this. Plus, it doesn't actually connect half of the time so yeah, I don't know what's up with them. Definitely not magic.

Adam (01:11.208)
I really like the Magic Trackpad. Like I keep it plugged into my monitor and then my monitor plugs into my laptop. So it's kind of always, it's always connected.

Ste (01:17.998)
Yeah, I haven't used one of those, but I think I'll have to definitely check it out because I heard a lot of good things about it, especially from designers. So yeah, maybe next time if this, it connects, right? It has a wire.

Adam (01:36.936)
Yeah, it connects, but I think it's still a Bluetooth device. It's just kind of charging.

Ste (01:41.742)
Okay, that's still good. I switched to wired headphones because these are reliable. I don't know, maybe I'm just getting old or this is like, but I like the wired ones better. And I saw an article that mentioned that wired headphones are in fashion again. So they're actually an accessory now. So yeah, if you're using like the old wired headphones, you're like very fashionable. So here we are.

Adam (02:10.023)
So many people on TikTok, I see recording videos where they're like, you know, holding up those headsets and like, you know, have it bent over and they're like talking into it. Cause, cause it's a good microphone. Yeah.

Ste (02:19.47)
Yeah, yeah, yeah, it's really good. And it's reliable. They actually plug something in. I mean, Bluetooth is OK, except when it doesn't connect. Well, anyway, how have you been? We've taken a small break from hardcover live for the past two weeks to focus on family time.

Adam (02:43.528)
Yeah. Yeah. My, we had, I think like 14, 15 family members in town, staying for a week. And yeah, we kind of just took them all around Salt Lake. ate some tasty food, went on some hikes. yeah, we, we ended up like fording a river with my like, you know, 60 and 70 year old aunts and uncles, which was fun.

Ste (03:09.678)
Okay, why, why is that? Is it fording or forking?

Adam (03:15.592)
Yeah, fording a river. Yeah, it was like, there is a, there's a lot of snow melt on some of the trails. And so one of the trails had the bridge out. So people had put down logs over the river. So you're kind of just like walking on logs that are like way up high above the river to get across it. Not, not dangerous at all.

Ste (03:37.518)
Well, that does sound fun, but yeah, I haven't heard about fording a river before, so I guess I'll add it to my hiking vocabulary. Yeah, pretty neat. And how was it? What were the highlights except fording the river?

Adam (03:49.992)
Yeah.

Adam (03:57.448)
I mean, we played a lot of Mario Kart and concept and apples to apples, which is fun. Yeah, a lot of just like one of like, I think nine or so of the family were in one really big Airbnb. So we spent a lot of time just hanging out together there and ordering some food in. Yeah, and then to cap it off at the end, we went to this.

really nice hike that's really close by called Ensign Peak. It's like this peak that looks out over all of Salt Lake, but it's a really short hike. It's only like half a mile up, half a mile down. but from the top of it, you can see like all of Salt Lake Valley. So we went up there on the last night. Everyone was in town and, watched the sunset. So it was a nice way to cap things off.

Ste (04:48.046)
Yeah, sounds like a very good time and that's a lot of family. I mean, I know how these things get and it's good that 14 family members, that's a lot.

Adam (04:51.816)
Yeah.

the

Yeah, and speaking of family time, I think you were in Italy?

Ste (05:05.39)
Yeah, the week before I was in Italy, I was celebrating my son's first birthday. So we went to,

a place called La Spezia and then there are like five villages along the coast, Cinque Terre, because it's like five villages and that's what they call them in Italian. And yeah, it was really nice. I highly recommend it. Whoever wants to go to Italy, you can just go in Pisa Airport, then travel by train to La Spezia. It's pretty scenic because the train in the villages goes along the coast, so you can see the,

is that I think it's the Mediterranean. I'm hoping I'm not wrong. Yeah, on one side and cliffs on the other. Yeah, so that was pretty good and good food. Surprised how good the pizza level is at any random place in Italy. So yeah, very, you can't go wrong.

Adam (05:56.744)
You

Hmm.

Adam (06:05.288)
Nice. And, and that's on the west side of Italy. So were you able to see like really nice sunsets or anything like that or, do any swimming?

Ste (06:14.894)
yeah, I did some swimming there. One of the villages has a pretty nice beach and, the water was pretty cold, but it was actually good for, yeah, I did like a couple of times and yeah, took my son with his feet, kind of like before he got scared. Yeah. Yeah, exactly. He was a bit freaked out, but yeah, he was okay in the end. Yeah.

Adam (06:36.328)
too cold, too cold.

Ste (06:44.782)
And really salty water. I think it was the Mediterranean.

Adam (06:52.047)
Nice. Yeah. We, when we were walking through the, the water in the stream, which is all snow melt, we were thinking like, I think we could handle another five minutes of this before our feet, like get to the point where we're going to be in danger. Like that's how cold the water was.

Ste (06:52.462)
Yeah, pretty good.

Ste (07:06.958)
Jesus. Yeah, I bet. Yeah, I know river water and I'm imagining snow melt is like even colder than that. So, I mean, it is, right?

Adam (07:20.808)
Yeah, I think so. But yeah, I'm not good with cold water. Like we would swim in the springs sometimes in Florida. And that was nice because it's like 90 degrees and then it's like, you know, 60 degrees in the water. But I have a feeling like this was much colder than that. And I wouldn't be surprised if the Mediterranean was colder than that, too.

Ste (07:41.038)
Yeah, it was like pretty good actually. It was like not that cold, cold ice, I mean like colder weather, but yeah, that sounds pretty, pretty extreme. So you're not a fan of cold plunges or anything like that.

Adam (07:54.312)
I can handle a cold plunge if there's like a hot tub close by.

Ste (07:58.126)
Okay, I didn't actually like do one ever but I'm curious. I'm a bit scared. Did you ever like do like proper like cold plunge?

Adam (08:06.76)
I think I've done some like at, you know, when I was a kid at like a hotel that had like a unheated pool and a hot tub or something like that, but not really, not really in like natural cold water.

Ste (08:21.166)
Yeah, that's good. Yeah, it was nice to get some time off and it really puts stuff, once you take a distance from it, you get new ideas, I think, and also like some appetite for like doing stuff when you get back. So I guess I've been slowly like entering

like my natural working rhythm. And yeah, good to be back on the live.

Adam (09:00.355)
Was there anything you like, realized from having some time off that you like came back with fresh eyes of like, it would be neat to change this or this works well. This doesn't work.

Ste (09:12.782)
Yeah, I was actually thinking about, I thought about open sourcing a lot and how that could like play out, especially from my perspective, from the design perspective, how we could like do new stuff with contributors and how we could...

Adam (09:22.536)
.

Ste (09:36.846)
develop hardcover with the help of others. And like specifically, I've been thinking about something that hopefully we'll talk about today, the way you update progress on a book, because I was kind of stuck on that, not gonna lie. I started...

actually coding it, and now I moved it into design. So I'm hoping we brainstorm and find solid design for it before we jump back into coding and put it live. And the new stats, which we'll cover today. Yeah. How about you? How was it?

Adam (10:21.896)
I think one of the things that I realized is like, I try to be like so responsive to emails and Discord that that comes at a cost of like getting things done on hardcover sometimes. So I'm gonna try to set like better kind of like structure to that. So I'm not like, you know, checking my email as often, not maybe checking Discord as often because I need those long stretches of

like dedicated time to make progress on things we're working on. So, so sometimes that, so one of the things we talked about on our team meeting on Sunday was like, creating like a support queue for like emails that come in that we like rotate who's responsible for them. And yeah, things, things like that, that I think will help kind of make it so that I can focus for those long periods of time. And, and also just like, you know,

Ste (10:55.694)
yeah.

Adam (11:18.152)
Being okay with not having an email get responded to in a day or something.

Ste (11:22.382)
Yeah.

Yeah, that's definitely good. I mean, focus is like the most important thing. And yeah, I also find myself, I mean, you kind of need these breaks. It gets like very, very intense. Especially, you know, because we're a small team and we're like doing everything. Tons of new features, support, fixing bugs, fixing UI, fixing everything and marketing on the side, which I'm not going to get into. But yeah.

I think, actually it crossed my mind today that you know how they are on Steam, those cozy games that are so successful now? I actually saw one, I'm really excited to try out. They just released the demo, it's called Tiny Glade, where you build your little city. Yeah, Tiny Glade. And...

Adam (12:02.408)
Mm -hmm.

Adam (12:13.448)
Mm -hmm.

Ste (12:17.55)
was thinking that we're kind of like making this model of a cozy startup where we're building stuff. I mean, considering that we're such a small team and we're releasing stuff that is matching what's a company that's funded with a huge team output, we're doing that.

and we're still keeping a good balance between that and our lives. And I think one of the challenges is actually being able to do that because these past years, I think, I mean, for me, they taught me that you could do so much while keeping this balance. I mean, compared to other projects where you put so much work in and the results are like one -tenth

of what you'd see us doing on hardcover. This has been like really, yeah, I guess that's the conclusion I reached.

Adam (13:25.64)
It's, yeah. One thing that I've noticed, and I'd be curious if you feel this way at all, is like, I have a tendency when I'm working on some projects at least, to let them fill like all available space in my life. Like sometimes I'll like, you know, if I have free time, I'll be thinking about it. I'll be like planning it at night.

I'll be like, you know, thinking about a solution to a database problem as I'm drifting off to sleep. So if I, if I let that happen, it, it can just grow and grow and grow. So having, you know, other interests, other hobbies, like almost like forces myself to not be in that mindset.

Ste (14:13.038)
Yeah, that totally happens. I mean, I think I shared an update. I arrived in Italy and it was like we had like...

three places where we stayed and you can imagine we have a big luggage and with the kid that was like with Joe was really hard to move around. And I was still thinking about that updates progress thing and I shared a couple of designs to validate them. I mean, it feels good to have something occupy your mind, but it also is very, very useful to for

like that distance to not think about it because yeah, well I noticed and I mean you probably noticed this as well when you come back to it having fresh eyes on it is definitely helpful I mean I get stuck on something I think this is what happened with this I got like a bit stuck with how I was thinking about it and like

Adam (15:05.48)
You

Ste (15:15.406)
taking a break and not thinking about it at all. And I kind of feel like the brain does the work anyway. I mean, it kind of like surfaces it, like a notification, like, how about this? How about you think about this? And you actually have it in my mind.

the actual UI and you move stuff around. And it's exciting because I think we both like doing this. So that's the instinct. You like working on something, so you're going to think about it all the time. But yeah, that happens to me. So it's good when you take a break from it, even if it's for a week or sometimes we can just take a walk and you know.

Adam (15:37.16)
Yeah.

Ste (16:04.014)
It's... or a hike. Yeah.

Adam (16:05.608)
Yeah. Well, well, speaking of that, do you want to jump into the update progress, designs and Figma and, can see how it's going.

Ste (16:14.99)
Yeah.

Yeah, let's do that. Let me, yeah, that's perfect. Let me share my Figma window. I have the euros. I can't share my Figma. can you share it? I'm on a new laptop. I don't have the permissions on the browsers. Yeah.

Adam (16:34.44)
yeah, yeah, I can, I can,

Adam (16:39.816)
Yeah, let me share mine.

Ste (16:49.518)
Okay, here we go.

Adam (16:49.736)
See you.

So yeah, this is the idea that on the currently reading page where it lists out all the books you're currently reading, you're able to update progress from there. And then also from the book button, when you click on update progress, you'd be able to update progress from there as well. And those experiences would share some of the same UI elements, because right now they were kind of developed.

at different times and so this is unifying them while also solving some of the other big problems like being able to change the edition that you are reading and potentially create new editions from this area that have a specific page number that reflects the edition that you're reading. I think that's kind of the context for this design session.

Ste (17:44.91)
Yeah.

Ste (17:50.446)
Yeah, exactly. Neatly presented. So I screenshot the stuff we have right now. This is from the actual UI. And this is from what I was working on. And I replicated it in Figma over here so we can move stuff around. And I'm going to tell you what I think.

Ste (18:21.902)
is maybe an issue from what I experienced. So the thing is, now we have the slider, and people have been complaining that, especially on mobile, moving the slider is a bit daunting because you can't actually move it so you land on your page number, especially for books that have like...

Adam (18:46.152)
Hmm.

Ste (18:48.558)
a lot of pages. So now when you would click on the page, you'd actually be able to, well, if you would be in the browser, you'd get these little arrows and you could just increment it or you could actually write the page number you're on, like page, whatever, 324, and it would update

the progress. Now, I started with a progress gizmo where you could also tap this and it would increment the page number. It also had a scroll, so you could scroll and increment. But yeah, I gave that up since it's not really good UX. But I was thinking, and this is a question I wanted to

talk about, would it make sense to have an incremental page number? So this would be like a display, but if you would tap it, it would actually go to 124, 125, and it would increment that page number. And if you would hold it, it would just increment it until you stop clicking it or holding it on mobile. But my question is, yeah.

Adam (20:02.696)
Hmm...

Ste (20:17.646)
Do you think that actually helps or is it like extra from your point of view?

Adam (20:26.792)
I think those kinds of like increment buttons, I never really use them when I see them because I never know like what the increment's gonna be. Like is it gonna increment at one page, 100 pages? So I usually would either set it exactly using like this right here or use this right here.

As opposed to saying like, okay, I'm, I've read 18 pages, so I'm going to click this twice and then I'm still going to have to change it because there's no minus one to go down to 18. So I feel like, you know, if there was an incremental step, we would still probably want to use this to get the exact number. So the incremental thing would be more for people that don't want an exact number of pages read. They just want to a general.

Ste (21:16.174)
Mm -hmm.

Adam (21:23.816)
And if people want a general, they already have this that they could use to get a general.

Ste (21:29.294)
Yeah, that's true. Yeah, I thought, I mean, first I want like, you know, you update, let's say you have an Apple Watch and you just turn the crown and update the page number. I thought that could be nifty, but...

Adam (21:40.424)
Mmm.

Ste (21:44.078)
It's not like when you're using a mouse or when you're using a tab on mobile, it doesn't really work the same. I'm wondering, I mean, I think, you know, we could just leave it here and just make, make this thing work really well.

There are some people who read like five pages and this was basically for them because they could just like tap this five times and maybe they would just tap it as they go along reading the book. But they can like just as well do it here and they can increment this number, I'm guessing.

Adam (22:25.736)
Yeah.

Ste (22:26.03)
What do you think?

Adam (22:29.032)
Yeah, maybe, maybe we don't even have the plus minus or the up down. Maybe it's just a plus because people aren't probably going to go back pages. They're probably just going to be reading forward. So it could be just like a quick plus and all that does is incremented a page.

Ste (22:29.358)
I mean, yeah.

Ste (22:39.694)
to

Ste (22:46.382)
Yeah, let's make it the circle plus circle.

Ste (22:53.966)
Yeah, this is great. Yeah, I think we could like get rid of this altogether and yeah.

Adam (23:00.708)
This one, I was thinking for this, what if we keep this down here, but then instead of page 123, it's like just like 23 % done or something. And that way it works for both the audio and the page books.

Ste (23:22.03)
Yeah, that's actually, I mean, it's a good, I liked it because it was visually interesting. You could see the progress, which somehow with the slider doesn't feel the same. And, yeah, it's the same, but this is nice as well. Yeah, I mean, this could work.

Adam (23:41.256)
The other the other thing that came to mind was like using something kind of like this but like putting it over the cover But I feel like anytime we've put things over the cover. It's been a little a little dangerous

Ste (23:49.422)
Ste (23:54.67)
Yeah, I know what you're talking about. But maybe we like living dangerously. So what if we make it like small element group this thing and boom, boom, boom. Yeah, that's not, let's pick this bold. I mean, you have the slider and this is.

Adam (24:00.392)
you

Ste (24:16.174)
Maybe it's not even supposed to take up that much space. I mean, you do have like some space remaining on desktop here or there. Yeah, that works. So.

Adam (24:28.264)
Yeah, especially since it's not interactive anymore. So it's just a thing or.

Ste (24:37.294)
Yeah, maybe at the bottom since many books have the title over here.

Adam (24:42.44)
Yeah, I think, yeah, I don't know. Do you have a preference on the side versus like somewhere over the cover?

Ste (24:50.414)
Well, what if we make it like smaller so it matches the book button over here? Yeah, maybe, yeah, you're right. Maybe that's too dangerous. Maybe not put stuff over the cover.

Adam (25:00.008)
Yeah.

And if we do that there, then we could always change this to be like, instead of done, like of, you know, 387 pages.

Ste (25:13.71)
yeah, or...

the remaining pages or, I don't know, what are you more of a fan of, like 345 remaining?

Adam (25:21.672)
Mmm.

Adam (25:31.88)
Yeah, it's interesting. Yeah. Cause it's like the one thing that I wouldn't know if I was just looking at this is, is this the right edition for me? Like, does this, does this edition contain the right number of pages?

Ste (25:45.39)
Yeah, yeah.

Ste (25:51.342)
Yeah, let's do that. You are totally right. Yeah, now you know. Okay.

Ste (26:00.11)
And what would happen is you'd update, you'd see 750 pages or let's put some more reasonable number here. And you'd see, my book only has 300 pages. So I have to change the edition. And for this change edition button, this was my first thought. I mean, it could be here.

Adam (26:07.024)
wait, go ahead, say that again.

Ste (26:30.373)
underneath the progress change. So you'd notice this and see that your book has a different number of pages. So you'd be, okay, I need to change the edition. So you'd tap this one. But any other ideas on where to position it?

Adam (26:46.888)
I was thinking about that. Like one thought that I had was something kind of like, let me take a screenshot of something to insert it here. If we did something like this and then made this like, made this almost like a,

Ste (27:10.382)
Okay.

Adam (27:17.288)
this with a drop down.

Ste (27:21.774)
So.

Ste (27:31.534)
this a little bit bigger.

Ste (27:40.75)
or ya.

Adam (27:43.208)
Yeah.

Ste (27:44.238)
have run now.

Adam (27:48.04)
Yeah, something like that. And it could either have change edition text or not. I feel like it could go either way. But.

Ste (27:54.83)
Yeah, we do have like extra space here. So if we do this, yeah, maybe we can like put it.

Adam (28:01.96)
And that's.

Or maybe like on mobile it doesn't have change edition, but on desktop it does or something.

Ste (28:10.542)
yeah, that could work. I was also thinking we could make the slider longer and we could push this like, let's assume there could be books with thousands of pages or thousands of minutes and this could just be like this.

Adam (28:27.656)
Yeah, because another line could be for this whole line, it could be like currently on.

Ste (28:33.646)
or it could be like in front.

Adam (28:38.92)
Like 632 hours, 32 minutes.

Ste (28:46.542)
Yeah, good thinking.

Adam (28:50.6)
of 56 hours, you know, 40 minutes. Okay, that works out pretty well actually.

Ste (28:56.75)
Okay.

Ste (29:00.494)
Yeah, it would fit. I think, yeah.

Adam (29:04.18)
But yeah, if you were to change it, and like this would be, like if you were to change this, then this would become a form where you would need to be able to put in your hours, minutes, and seconds, which makes me wonder about this on another line.

Ste (29:22.766)
I think you got caught up for a second there.

Adam (29:27.272)
I was thinking like if this was...

currently like this, but then if it's being edited, then it would be like.

Adam (29:40.744)
These would all be form fields. Like there would be a form field for 34 hours, 32 minutes, 12 seconds.

Ste (29:48.878)
Yeah, that works. I mean, I'm wondering if we could set, like you're thinking having these separate numbers. Yeah, it wouldn't make sense to have a time input there, right? No, it wouldn't. Yeah.

Adam (30:04.296)
Yeah.

Adam (30:09.96)
What about, what about putting this, what about putting this first over here?

Ste (30:10.222)
Yeah, even... yeah.

Yeah, that could be an option. There we go. sorry. I just made these into like separate elements.

Ste (30:25.998)
Yeah, that would actually work.

Ste (30:33.23)
So you'd have this. Let me make this into a layout. Yeah, it still works. I mean, it's...

further down so it doesn't clash with the slider. And desktop is gonna probably be even wider. So see over here, you have like a bit of space. So we're probably working on a tablet resolution anyway. So it's good to know that it could work on that as well.

Adam (31:15.304)
Yeah, I have a feeling on the mobile it's going to seem a lot smaller.

Ste (31:19.79)
Yeah, we'll figure that out afterwards. But,

For this, I'm guessing we're taking the un -recommended path of doing desktop and tablet first, but on mobile, we can give up some of the elements, maybe the percentage. I mean, these are pretty like...

Actually, let's finish this and see. Does it need more elements? I mean, would you need more than that? So you would change addition by clicking this. You would be able to edit the page and increment it. You'd be able to change the slider. And you'd be able to see the number of pages over here. And over here, you'd see the progress. Anything else?

Adam (32:16.487)
I think the biggest one is like what it looks like when it's being edited. Like when you click on this to change the page number, maybe like a style for that with like the form fields there and like the save button. Cause like in addition to having a field for the page number and the hours, minutes, seconds,

There probably needs to be something for like save, just toggle between edit and non edit mode.

Ste (32:47.054)
Yeah.

Yeah, I had a question about that. So basically, I was thinking, how would autosave work? Because when you're updating it, let's say you're incrementing it. If you're incrementing one page at a time and you're tapping this, here we go. Yeah. If you're tapping this five times, let's say, it's not supposed to update your progress five times. It's just supposed to update your progress.

at the end of it. So for autosaving, do you think...

Ste (33:30.062)
that could actually work, so you just fill it in, and it saves it after you're done editing. Maybe there could be a time buffer. I'm not sure if that would work. You update the progress, and it creates an activity after, let's say, after 10 seconds. So let's say you like a...

toggle the slider, you go like this and you go like this accidentally. It's not supposed to create two activities. It's just supposed to create one. So maybe it saves it with a time buffer or yeah, we could do something like this.

Adam (34:10.152)
Yeah, because right now we can like debounce it so it only does it like once every second or something. And it's only gonna create one activity in your feed, but it might update that record multiple times. So we can have it like right now we have the activity part where it only will, like even if you update your page number 10 times, it's only gonna.

add an activity once every like six hours. So we can save it as many times as we want.

Ste (34:42.542)
Okay, that's good.

Ste (34:50.158)
Okay, so it could actually work. So let's say, you know, I go here, I added the page number, and I leave the field when that your that field isn't focused anymore. Maybe you could get toast saying

progress updated and it wouldn't create an activity because there's that time buffer. Do you think that would work? Just so, I mean, this creates like extra friction because you have to edit and then click save. If we could eliminate that step where you'd have to save and you'd edit it inline, I'm thinking that would be like a better...

a better approach for this but I don't know what are your thoughts on that or we could do something like this

Adam (35:43.912)
That could be neat actually. Like with the, you click it, you click the number and it pulls up a little pop over. Cause I feel like, I feel like with the edit fields, if we were trying to have them click somewhere else to finish editing, I think that's unclear on a regular form that that's like, but on a pop over that is kind of the expected behavior that you're clicking somewhere else.

Ste (36:07.022)
Yeah.

Adam (36:13.768)
But there's also, instead of save, we could always have this be like a checkbox or something, and that's what they use to finish the update.

Ste (36:28.91)
Okay, so it could just be like an icon. Check. Circle.

Adam (36:37.224)
Flippy.

you

Ste (36:45.998)
Or what else are you thinking? So right now, they could, if they tap on this, it's not like an inline field. Then change the color on this slightly.

Ste (36:59.982)
but you get this little thing where this is an input field and yeah. Let me make it for the audio book as well because that's a bit more complicated. Zero.

Adam (37:13.256)
Maybe.

Ste (37:16.686)
0 2

hours.

Ste (37:35.886)
Should we just do minutes or seconds?

Adam (37:38.856)
Probably seconds to.

Ste (37:40.878)
Yeah, okay. 42 seconds. Yeah.

Ste (37:51.662)
Bless me.

Adam (38:08.168)
Yeah, I think something like this could work. Yeah, we just would have to play with the size to make sure it's big enough that it's easy to click in. But we can easily change the size of it, and it won't shift everything else on the page, which is nice.

Ste (38:15.95)
Haha, yeah, exactly.

Ste (38:23.246)
Yeah, that was my issue with the Scene Line editing because it moves everything and it suddenly turns everything into a field and then it jumps back in. So it's either like we make this seamless or we could just make it as big as we want since it's a popover.

Adam (38:33.608)
Yeah.

Adam (38:44.744)
Yeah. And.

Yeah, I think something like this would work. Cause I mean, it's okay if it takes over the range slider because like, you know, it's one or the other. You can't edit both at the same time.

Ste (38:57.934)
The slider, yeah.

Ste (39:05.454)
Yeah, exactly. Yeah.

Adam (39:07.784)
And for this, I was trying to figure out how to do this in Figma, but how to change this from being underlined to being like a dashed underline.

Ste (39:17.934)
Okay, well, that's a trick. I don't know. Let me see if we can like details. Do they have that? No, they don't have dash underline. Wow, okay.

Adam (39:23.24)
it

Ste (39:38.222)
hehe yeah then we'll do the old -fashioned waves really? where'd you find it? this is new

Adam (39:41.96)
Yeah, there's solid. wait, there it is. Dash. There it is. Stroke. Yeah, yeah, I, I went to stroke and then I added a little dots and then dash. Then I had to add. What is that?

Ste (39:56.11)
Okay, okay, okay.

Ste (40:04.142)
here we go. Look at this. You're making art. I think you've added like a dash stroke to the whole number. Here we go.

Adam (40:11.176)
Wow.

Adam (40:15.624)
Okay.

Adam (40:22.504)
yeah.

Ste (40:25.326)
Yeah, I still don't know how you did that. So you had a stroke and because now it puts it on the number. How the hell?

Haha, well...

Adam (40:36.84)
Yeah, this one.

Ste (40:39.662)
Let's just copy it and see if it works. Okay. Yeah, see? It's not even copying it with that style. Okay, that's...

Adam (40:41.704)
You

Adam (40:50.408)
Yeah, I know what we can do. We can just delete this.

Ste (40:54.346)
yeah. Yeah. Here we go. Okay.

This will have to be studied.

Adam (41:01.48)
apparently on page 120.

Ste (41:10.478)
yeah, yeah, this is nice.

and you just update it here and.

Adam (41:19.88)
I'd like to sit on page 120.

Ste (41:21.71)
Yeah, I think it's easier in the HTML. You just like put a dashed underline underneath it. It's native, right? Okay, yeah. yeah, here we go.

Adam (41:29.16)
Yeah, that'll be easy. Yeah, I like the dash underline as kind of an indicator of inline editing.

Ste (41:38.734)
Mm -hmm. Yeah. Yeah, this is good. We can put it over here as well. So it's like on page 120 and remove the stroke. OK. wow. OK, I get what's happening. So it's another stroke that, OK. It's not that. Yeah.

Adam (42:07.624)
Yeah, I think the one like the one that's here in this popover, like how do we make it clear that that's like an editable field?

Ste (42:07.918)
If I delete on page

Ste (42:15.246)
Yeah.

Ste (42:20.846)
Well, we could just like add a stroke to it. I mean...

Adam (42:21.224)
and not just text. Yeah, like some kind of box or a form.

Ste (42:27.502)
Yeah.

same color as this one but let's okay and make it style it a little bit better and here we go yeah if it's a number it yeah

Adam (42:38.504)
And we can, like when you click on the 120 here, we can like pop this up and like focus in on the input box and select it so that they just have to type a number.

Ste (42:51.333)
Yeah, yeah, it doesn't need that's like smooth. It's gonna work really well. And then we can make this so they hit enter and save the progress. And then we show those that they update the progress. And then after that time buffer, we create an activity.

Adam (43:11.4)
Yeah. I think that, I think that all sounds good. I think having the pages over here seems a little off for me. Like what if, what if this was like here? Not sure if this should go at the end or before, but like almost so it reads as like a sentence.

Ste (43:22.222)
Yeah.

Ste (43:32.814)
Yeah, maybe we could even push this here. If this is a number, you'd get the native increment arrows. So, you know, we could even remove this. So, it's just like this.

Adam (43:40.488)
Mmm.

Ste (43:48.27)
Or we could like, I wouldn't put it next to the, yeah, because you can miss click.

Adam (43:53.684)
Yeah, I see the concern there.

Ste (43:57.422)
Yeah. We could just like, yeah, it's not clear because if you put it at the end, you know, what does it do? Does it like increase the total number of pages or whatever? We could just like leave it like that and have the popover.

Adam (44:08.808)
Hmm.

Adam (44:13.16)
Yeah, if people, if people ask for it, we can figure out a way to iterate it back in.

Ste (44:18.382)
Yeah, I mean, if it focuses it here, you can use the actual keys on the keypad. And if you're on mobile, you can just type it in. So yeah, that's going to...

Adam (44:24.744)
that's true.

Adam (44:33.864)
Yeah, it'll be a number input with one to nine and then you can just key it in. Yeah.

Ste (44:39.118)
Yeah, exactly. You don't have like incrementing arrows on mobile, do you? No.

Adam (44:45.832)
No.

Ste (44:46.958)
That's not the thing.

Adam (44:51.08)
Yeah, I think this is looking good. I think what about for this icon? We change it to, no, is that regular? Light? No, I was just seeing what the different ones look like.

Ste (44:51.278)
Yeah, this works. Yeah.

Ste (44:58.574)
regular book. I like that.

Ste (45:07.246)
Haha.

Yeah, I like the solid style.

Adam (45:12.872)
Good tone.

Ste (45:16.206)
Are you thinking about that deal at the moment? Okay.

Adam (45:20.328)
go back to.

Ste (45:26.734)
Yeah, like that works.

Adam (45:28.592)
Could be either of them.

And so.

Adam (45:37.832)
So, so one thing I was thinking is like, for this, this dropdown. So this is, this is kind of like the last, to me, this is like the last big thing to figure out is a changing edition.

Ste (45:41.234)
Yeah, actually doesn't look too bad.

Yeah.

Adam (45:52.936)
and

I guess there's like three, three things that come to mind for me for it. The first is, changing edition. Like, should it, should we, like right now we have this, option to kind of like toggle between, audio and ebook and physical book. Do we want to keep that toggle or do we just want to have like, you know, just, just have people select their specific edition.

this way.

Ste (46:28.846)
I think selecting the specific edition would be more in line with what we've heard from people. So they want their edition, but they also want to... So I think this would... no, it wouldn't actually because you're changing the total number of pages.

Ste (46:50.254)
I think having the addition there would be in line with the feedback we got, but on the other hand, I had some trouble creating this dropdown because it could get really complex. So I put the format here. I also put the cover because you're going to have different covers. And if you're reading something and you want to easily identify an addition, you can just look at the cover and maybe this one has a blue cover.

and you see the number of pages and it's in English and you just select this one. But I'm not sure. I mean, there are books with hundreds of editions. So I was even thinking of a combo box where you could search for your edition. But then again, what would you search for? So I don't know what alternative are you thinking about?

Adam (47:41.8)
Yeah, so.

It seems like it needs to be super simple to select like the reading format.

Ste (47:47.79)
because here I didn't even put the title, I put the pages because the title, yeah.

Adam (47:54.472)
Yeah, yeah, I like not having the title there actually. I'm thinking like, yeah, what was that combo box that I shared a link to a while ago? It was like a neat example, but let me try to find it.

Ste (48:15.63)
I don't know if it was the one on your side or... No, wait. I think I might know where it is.

Adam (48:23.72)
This one, no.

Ste (48:26.67)
kids.

Adam (48:39.624)
Maybe it was just a select option. Let me see.

Adam (48:46.408)
like searching a

Ste (48:46.798)
shot

Adam (48:53.256)
searching discord and trying to see it.

Ste (48:57.998)
I think you might have shared it in Femite, could have been even during the live.

Adam (49:08.008)
I think I think I found it. Yeah, let me try.

This isn't like the exact code I would say we use for this or anything, but it was a example of a combo box that I remember liking. Let me share my screen.

Adam (49:39.912)
Yeah, I think what was interesting about this one was like this category for like having like header sections. So like, you know, audio book, physical book, e -book. And then these aren't selectable, but these ones are.

Ste (49:52.366)
you

Adam (50:01.032)
And then...

Ste (50:01.198)
Mmm, yes.

Adam (50:04.68)
Yeah. So that, that like opt group idea, because I mean, this is basically a select box and

It's just, and then if you have a, well, that's the thing for like typing, for filtering. I'm not sure what, what people would want to type to change it other than like, you know, the number of pages in their book or something or language.

Ste (50:28.59)
Yeah, exactly. Yeah, but that's kind of, I mean, you wouldn't know right off the bat what to search for. This would actually, I mean, maybe we could.

Adam (50:42.28)
Yeah, maybe not for this actually. I think it would work if we had a much smaller number, like a finite number, but we could have a book with 500 editions and this would be too much.

Ste (50:55.406)
Yeah, I'm thinking like, yeah, exactly. What if, I mean, if it's not a popover, if we have like theoretically had more space to choose like the additions, how would it look like? So maybe it's...

that comes from the side of the screen where we create maybe even a model that lets you select like we do it with search because in search, you know, you have a lot of options. I was even thinking to put tabs to select the format. So, I mean, this is, I think, a pretty big...

where you'd toggle between the formats. So selecting a format could be something that you do separately, but I'm not sure how that would work. I mean, ideally you'd have to choose an edition, but...

Adam (52:03.336)
Yeah, because we're saving an addition for them either way. So there's always going to be some addition set. So yeah, that field actually can't be blank in our database right now. So we're always saying which addition you've read for every time you read a book.

Ste (52:16.014)
Okay.

Ste (52:21.23)
Yeah, could this actually change their display edition or their read edition? So if you choose an edition here, it also changes the cover that you have in the currently reading and for that read.

Adam (52:38.376)
That's what I'm thinking. Like if this is the only time you've read that book, then it would do that. Like if it's the second time you've read the book, then we wouldn't change it. But if it's the first time you've read it, then this would be changing that cover also.

Ste (52:53.23)
Yeah, that sounds good actually because people mentioned they want to like set their edition and if we just allow them to create like a custom page or audio length number.

they wouldn't switch to that addition. So our goal would be to have that addition in the system. So if we don't have it, they would just create a custom one. And I'm guessing that could also tell us, OK, there's an addition for which we don't have a cover. So they're reading an addition that we don't have in the database.

Adam (53:24.68)
Yeah.

Adam (53:34.536)
Yeah, what about something like this where it's kind of like what we currently do for dates read in a way where it's like.

I'm just going to copy this from here. It's similar to this, but yeah, with like tabs.

Adam (54:04.712)
And then...

Adam (54:11.208)
Yeah. And what, but what I'm thinking is like, it's something like that for choosing the, the, the format. And then it would filter for only those ones. And then at the bottom or at the, maybe at the either at the top of the bottom or maybe at the bottom, but like anchor to the bottom, there's like a add an addition and add an addition would.

create a modal and the modal would just be a super simple add an addition dialogue where they could just like, it would just fill it in with a default title. It would keep all the, it wouldn't be trying to get into the nitty gritty of the addition. It would be just about like, here's a new addition. It has this many pages or it's this many minutes.

And then maybe they can select a cover from like all the other additions. And that would be the cover that it uses. Something like that.

Ste (55:21.87)
I think that could work. I mean, the only way to simplify it, I'd see is for them to, yeah, basically input the number of minutes and then, you know, we kind of take care of the rest, but that doesn't, I mean, creating an addition with a bit more data and maybe they can even upload the cover if they want, if they're a librarian or not.

But this would signal to us that there's an edition that we don't have. And after they create it, it wouldn't just be for them, right? Other people could see that edition and choose it from that.

Adam (56:03.976)
Yeah.

Adam (56:07.592)
Yeah, so once one person creates it with like that number of pages, everyone else will start seeing it.

Ste (56:07.886)
I think that's...

Ste (56:13.454)
I think that's a good way of assuring we have addition data, which sometimes, you know, everyone's lacking addition data, but this could be like a good way to capture addition data.

Adam (56:26.632)
Yeah. Yeah, it's yeah. I think if we can make this really easy, we can get a lot of new additions added in a very easy way. We just have to not overwhelm people with that, that modal form. If we make that modal form so easy that they want to do it every time they, they don't see their audio book here. Cause that's what happens to me a lot. Like I'll be editing my dates read. I'll go to

Ste (56:41.518)
Yeah.

Adam (56:53.64)
I'll select the audio book and it'll say there are no audio books that exist for this book. And I'll be like, well, I don't, I don't really want to go through the process of adding a new audio book at that moment. So I usually just forget about it. But if we can make it easy in that moment without them leaving the page, I think that could, that could really work out well.

Ste (57:15.278)
Yeah, I mean, that sounds great. I was actually trying to see what we could put in there. So it would just be format, number of pages, or like depending on the format minutes, or it could be like the same component they use over here. And what else? So there's the cover. yeah, sorry. I'm just like drafting it over here.

Adam (57:37.32)
This is like the modal

Yeah. Yeah.

Ste (57:46.286)
the language although sorry about that

Adam (57:48.52)
Yeah, I think that I think the language would be important. That's I feel like that's growing important with the like how how diverse our discord community is getting. There's so many people that like are reading non English books that I'm kind of kind of amazed and it's definitely making me think more in terms of multiple languages.

Ste (57:52.75)
Yeah.

Ste (58:15.566)
Okay, sorry, I think you just caught up there, so yeah.

Adam (58:17.288)
and

Adam (58:21.08)
yeah. Maybe like title too. And we could default the title to the title of the book. That way, if it's like a, you know, a title that's specifically in a different language that, that.

Ste (58:28.942)
Yes.

Ste (58:41.654)
the author name won't change, so yeah, at least there's that.

Adam (58:46.6)
Yeah.

Adam (58:58.376)
Let me go to the edit edition page just to see what other fields are in there. Because we don't want all of them, but.

Ste (59:16.338)
like this.

pages. Well, I'm guessing this could be like a very, very easy.

Ste (59:26.478)
could have the cover here. How would they choose the cover?

This could be... Yeah.

Adam (59:33.864)
Mm -hmm.

Ste (59:37.038)
Maybe we could just like.

Ste (59:45.806)
set the default cover and make...

Ste (59:55.054)
you or

Ste (59:59.854)
but that would open a different thing, right?

Adam (01:00:08.456)
Yeah, because we can make the cover a drop down potentially where they like click on a drop down and they see all of the other covers that we've that other other additions have if we wanted to.

because it's right now.

Ste (01:00:27.278)
Yeah, that could be pretty long on mobile. I'm thinking, I mean, could we make a thing that where you see the covers like in a... Maybe in a carousel and you would like get to pick which one.

Adam (01:00:32.52)
Whoop, whoop, sorry, too big.

Adam (01:00:44.232)
The we I actually tried something with the carousel originally for the covers, but the problem is that there might be hundreds of covers.

Ste (01:00:52.526)
okay, crap. Jesus, yeah. Well, I'm guessing for the drop down, that's gonna be a problem as well. So maybe we can just like default it to the... So if they don't see their addition here, we can just default it or just make it or upload new.

Adam (01:00:56.232)
You

Adam (01:01:01.224)
Yeah, but it's easier to scroll through a hundred covers than to scroll right through a hundred covers.

Ste (01:01:17.966)
Or we could like make them like change it. But for hundreds of covers, yeah, that's going to be a bit.

Adam (01:01:28.904)
And, and this is like super small. Like if, are you thinking if this is a popover or like a full out modal kind of like the search modal.

Ste (01:01:39.854)
Yeah, exactly. This would be like a simple model. You can even close it and yeah, just be this thing that pops and it creates new condition or...

Adam (01:02:00.744)
Yeah.

Adam (01:02:04.584)
Yeah, I think with it being a little bigger, we could have more room for like, if we wanted to do...

Adam (01:02:18.664)
something else like a

Adam (01:02:36.712)
Because one thing I was thinking is like, what if this part right here.

Adam (01:02:51.944)
is like this. How do we do this? OK.

is...

Adam (01:03:07.784)
Chevron down.

Adam (01:03:15.272)
And it's like in its own little box that's like an addition select box.

Ste (01:03:22.094)
Okay.

Ste (01:03:26.35)
Gotcha, okay.

Adam (01:03:30.92)
and

Adam (01:03:36.008)
And one of the options in this pulldown is upload a new cover.

Ste (01:03:41.518)
Yeah, of course. We can do it similar to how we do it on the actual librarian editing screen.

Adam (01:03:53.032)
Yeah, not the best design, but that's the...

Ste (01:03:57.038)
Wow, we'll make it better in production.

Adam (01:04:01.544)
Yeah.

Ste (01:04:03.182)
Here we go. So we have the formats.

Adam (01:04:08.84)
And we can even have something that's like a...

Adam (01:04:17.964)
More fields or whatever.

Ste (01:04:21.71)
yeah, and you can actually like, do you think this would, I mean, this is basically the only trouble I see that some people are creating like a lot of additions or bots creating additions. But I'm guessing we can limit it to, I mean, maybe.

Adam (01:04:36.296)
Hmm.

Adam (01:04:47.944)
Maybe, maybe you can only, it'll only work if it's a book you're currently reading.

Ste (01:04:48.11)
Bye.

Ste (01:04:53.614)
Yeah, okay. Yeah, that's true.

Adam (01:04:55.24)
And then.

Ste (01:04:58.126)
Yeah, if you go through all of that, you're probably like a real person.

Ste (01:05:07.79)
can figure it out, you know, if we have that problem at the right time. But yeah, this is, this is looking good.

Adam (01:05:17.448)
Yeah, I think, and I think I'm going to use this as an opportunity to change how we store progress as well. because right now we store progress as a, a number from zero to 100 on the, on what we call the user book. So it's not, it's not, so a person has a representation of the book in their library and then they have multiple read throughs. So

My hope is that I'm going to change it from having progress on the user book to having pages on the user book read and audio position on the user book read. So it's, we won't be setting anything in local storage anymore. It'll all be in the database.

Ste (01:06:03.246)
nice. Yeah, that's good because we can translate it to all the devices as well. So if you're using the app and the site, it could actually sync that progress.

Adam (01:06:15.176)
Yeah. And I think as part of this, I'll probably also, make the first, backend work for journals. So like every time you update it, it's, it's a, creating a new log entry in like a journal for this book. So it says like, updated to this page on this date, updated to this page on this date. That way.

Like when we do get to journals, we'll at least start saving that data now.

Ste (01:06:50.67)
Nice. Yeah. Well, this seems to unlock like multiple things. I'm very happy that, you know, we're finally letting people choose their editions because that's been like a feature request. And maybe we can like use the same things when they're setting their editions in their library. So...

when they want to change that addition in the book page, we could use the same components. And if they don't see that addition, maybe we can use the same thing so you can quickly create a new addition.

Adam (01:07:16.744)
Hmm.

Adam (01:07:27.848)
Yeah, I think that would be good.

Ste (01:07:31.086)
Okay, that's perfect. And maybe we can change the same components to be used in the way you update progress through the Book button as well. So these things we're seeing here, like... Yeah, don't...

Adam (01:07:43.112)
Hmm.

Kind of this to this.

Yeah, because yeah, this could be like, this could effectively be that screen in the book drawer when you go to choose edition.

Ste (01:07:50.414)
Yeah.

Ste (01:08:00.078)
Yeah, exactly. Yeah, we still have some design to nail on that, but yeah, we're already like, we've covered a lot. We didn't even go to stats. I was hoping, yeah, we could, maybe we can show people some sneak peeks into stats and just like to finish off. They're like over in the, here we go.

Adam (01:08:09.928)
I'm sorry.

Yeah, I'll follow you.

Ste (01:08:23.182)
going on. Yeah, so, ta -da! Sneak peek into stats. Yes.

Adam (01:08:31.24)
Very cool, very cool.

Ste (01:08:33.55)
Yeah, getting there, getting there. I mean, ideally, this would be like snapshots you can take. I don't think it's sharing the Figma anymore. Wait.

Adam (01:08:37.543)
Yeah, I like.

Adam (01:08:46.184)
or I think I'm still sharing it.

Ste (01:08:48.782)
here we go. Yeah, I didn't update on my end. Yeah. So the idea is that you can screenshot this on mobile and share it directly on your socials. And I've also, I mean, I wanted to talk to you about how you change the actual timeframe. And I did a couple of options, but maybe we can talk about that in the next live or like.

Adam (01:09:14.44)
Yeah, I think talking about it next time sounds good because yeah, there's a lot we could do here. But this will be a tease for it.

Ste (01:09:18.765)
Yeah. yeah, definitely. Yeah, that's good.

Yeah, it's going to be like, they're going to be like very, very nice right now. And our goal is to make them like so nice. You have an incentive to share them like every month. You know, you have a very nice snapshots that you can share on your socials or wherever you want, or even like keep a journal of the progress. Yeah, it's going to be really, really cool. But next time we've already gone overboard a bit.

Adam (01:09:53.935)
Yeah, we were being too productive, couldn't stop.

Ste (01:09:58.446)
Yeah, exactly. Yeah, that's a lot to cover it. Yeah.

Adam (01:10:01.064)
For all the progress stuff we talked about today, I think you already have a branch for some of it. Do you want me to jump in and just start working on some of it there? Because I know a lot of this is going to be the back end changes for some of the updates.

Ste (01:10:21.678)
Yeah, definitely. I think it's book progress update or book progress on GitHub. So we can definitely do that there. And I can jump and update the UI with what we've been doing now. And yeah, people should see it live real soon.

Adam (01:10:45.064)
Yeah. Yeah. I definitely want to finish this, this month. And because like in our discord, we've had a bunch of people mentioning like progress bugs. And so it's, it's important to fix it because I don't like having things broken.

Ste (01:11:00.878)
Yeah, it's gonna be good, you know, having the texture predictability and yeah, it's gonna be neat to change the tracking live as you're reading the book right now. It's gonna solve like a lot of problems people have been mentioning with the slider and yeah, the way you do it. So it should be like really significantly smoother with these changes.

Adam (01:11:14.76)
Yeah.

Adam (01:11:25.64)
you

Ste (01:11:28.206)
awesome.

Adam (01:11:29.352)
I think I'm gonna go grab some lunch, but yeah, good session.

Ste (01:11:34.254)
Yeah, yeah, it was a great session and yeah, see everybody at next week's High Cover Live. Perfect. Have a good one, Adam. Bye, everyone. See ya.

Adam (01:11:39.88)
next

Sounds good. Talk to you later. Bye.