Subscribe
Share
Share
Embed
Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.
Adam (00:00.866)
Hey, hey, stay, how's it going?
Ste (00:03.153)
Adam, pretty good, pretty good. I'm enjoying my evening. How about you?
Adam (00:12.482)
We're well. We've started looking at like, what would it be like if we moved out of our apartment and bought a house in the area? Still not sure if we're gonna go that route, but we're at least like testing the waters of what that would look like, what our budget would be. So.
Ste (00:32.107)
That's exciting. How's the real estate market looking in Salt Lake? Did it calm down because I seen that prices might be going down?
Adam (00:44.622)
Yeah, it's, I think it's calming down now, like after the summer, lot of places seem to be still priced at what, what they were priced at when interest rates were at like 2%. So, and so a lot of places are staying on the market 40 days, two months. And a lot of the ones we've looked at have already started having price drops because they haven't been sold at what they were listed up. So yeah, there's a, there's a difference in what sellers think they can get and what buyers are offering right now.
Ste (00:55.861)
Mmm.
Ste (01:08.404)
Okay.
Ste (01:14.611)
Well, that's good. That's good when you're looking for a house. That's exciting. That's like a big step
Adam (01:22.643)
Yeah, so we're cautiously excited about it, but also trying not to rush into anything. Like we really like our apartment. Like having an apartment and just having everything done for us has been so nice.
Ste (01:39.815)
Yeah, I bet. mean, I'm a fan of apartments as well for that very reason. But the house, mean, I'm thinking like pretty, you know, a few years in the future, but definitely comes in with with its perks, especially if you're like in the middle of things. How is Salt Lake like? there a suburb area in the city center or what's like the
Adam (01:42.828)
You
Adam (02:07.648)
Yeah, there's, it's kind of a city center. There's a couple of like little communities that are like, outside the city center that are like good little walkway areas, you know, with like a cafe, a couple of restaurants, that kind of thing. But for the most part, it's like a whole lot of residential and then you'll get one of those every like half mile or so, or maybe, maybe every mile.
Ste (02:29.129)
Okay, that's a pretty good structure. that sounds... Yeah, sounds like a good, like, layout of the whole thing.
Adam (02:37.964)
Yeah. So we, I would definitely want somewhere where I can like, not need to drive on a daily basis. I feel like that's the, that's like the, the thing for me after driving so many years to go to work every morning, I feel like getting, getting up and going into a car to do anything reminds me of going to work.
Ste (02:45.872)
yeah.
Ste (02:50.294)
you
Ste (02:57.58)
Yeah, definitely does. And it's one of the huge perks, know, not having to drive anything anywhere. I live in Europe, so that's pretty much by default in most places here. So definitely, you know.
Adam (03:09.537)
Yeah, do you even have a car? would you even, yeah, you don't need one.
Ste (03:13.495)
No, I mean, it would be like impossible in the city. I mean, in London, it was like so, so expensive. In Paris, I looked it up and it should be like a bit cheaper, but because they got more parking space, I guess, and it's all like underground, but still, yeah, a pretty solid investment. And here, you know, we got to the city center in 30 minutes just by walking today.
with a stroller and at the pace of carrying a baby in it. that's definitely good, I'd say. And we live in the 19th around this month. So it's like, have to cross a canal. It's not that close, but it's really packed together.
Adam (03:49.827)
you
Adam (03:53.39)
.
Adam (04:01.344)
Yeah, yeah. How far away are you from the the Sen if you were just like walk down to there?
Ste (04:07.895)
Think about 40 minutes, 40 minutes, especially, you know, it's up a hill here. That's why you get this view. So when you're going down, that's very fast. When you're going up, it's a bit of, you you're sweating a bit, but that's good exercise. yeah. Yeah, exactly. That's what we do some of the times. yeah, sometimes we exercise.
Adam (04:19.393)
Thank
Adam (04:27.912)
You can always walk there and take the subway back.
Ste (04:37.675)
But yeah, that's great. That's great. I've been to one of those, I always wanted to get a deep dish pizza. And while I was in London, there were a couple of places that I didn't manage to go to. So I finally found a place with, I think it's Chicago style, right? Deep dish. Yeah, that kind of pizza. So I got one and yeah, it was really good. Kind of like pepperoni, sesame, all that like good stuff. Very...
Adam (04:37.952)
and
Adam (04:53.922)
Mm -hmm. Yeah.
Adam (04:59.414)
and
Adam (05:04.354)
seven pounds of cheese.
Ste (05:06.165)
Yeah, exactly. Well, it was more like French. It was like a bit more balanced, I guess. It wasn't like that like dump cheese on. Yeah, it was like a pretty balanced pizza. I'm guessing, you know, they had their own take on it. But yeah, I was very happy that I found I found that. And yeah, I found lots of bookshops. There are like ton of bookshops over here. Yeah, I went to a really like.
Adam (05:20.429)
Okay.
Adam (05:26.722)
Nice.
Ste (05:33.959)
artsy one, which is kind of like a cool place. It's in Marais, which is like the cool neighborhood and it's called OFR, Offer. So that has like a lot of art books, photography books, design books, lots of like the coolest magazines and yeah, I really enjoyed that. Very like good selection of books. Yeah, plus I went to a cafe which had like
Adam (05:55.79)
Nice.
Ste (06:02.263)
a very nice collection of art books, but like they were so rare. think the cheapest one was like 80 euros, which is like, I don't know, $100 or something like that. So yeah. but they were good books.
Adam (06:13.272)
Whoa, yeah. I know whenever we've traveled and we're in another country looking at bookstores, it's always hit or miss what languages they're in. We went to a bookshop in Korea and their English section was pretty small. Everything else is in Korean. So was neat seeing, here's a book I'm reading, but it's in Korean. How's the language side been?
Ste (06:37.735)
Yeah. Lots of books. mean, if you most of them are in French, especially, you know, I got a couple of kids books, kids books in French and I'm reading in French to my kid. But yeah, most of them are in French. The one I told you about is like predominantly English because like all the magazines are in English. When I'm away, yeah, it's the same thing. You know, I usually go to the.
Adam (06:42.478)
.
Ste (07:06.677)
like design section or illustration section because you're bound to get like very nice visual books, but the actual like book books, yeah, those are kind of like, I know how to read French, but some of the stuff still like puzzles me a bit, so.
Adam (07:28.438)
Yeah, yeah, I have never read a book in another language than English. So that would be an impressive level of understanding.
Ste (07:38.615)
Yeah, I mean some of them are pretty like I mean I guess the easier ones are okay -ish I'm always like reading with a phone next to me so I can translate and it's a good way of learning as well Because I gotta learn like French like fast forward as you can imagine People have been like nice which I haven't expected people have been like really nice plus most of them know English
Adam (07:59.674)
Yeah.
Ste (08:06.633)
It's a pretty young neighborhood as well, so everybody can speak English to a certain degree, but still it's way better when you do French. Sometimes when you do French and you're decent, it's kind of like a courtesy, so they start speaking in English. Else, I suspect some of them might not speak in English just to make it very difficult for you, very awkward.
Adam (08:16.931)
you
Adam (08:33.912)
Yeah, man.
Ste (08:35.755)
Yeah, interesting. It's been an interesting move.
Adam (08:37.133)
hehe
Adam (08:40.76)
Yep. Well, other than that, what have you been up to on the hardcover side lately?
Ste (08:49.268)
I've been slowly chipping away. I've been trying to convince the AI to do more iterations on the dashboard and I managed to...
I'll show you a video later on. I managed to implement the add widget, remove widget thing, which is working pretty good. I'm struggling to save the widgets I add to local storage as well. But I think that's going to be an easy one if I need to pass it to you, because I'm guessing you're going to have to redo that anyway.
Adam (09:07.186)
neat.
Ste (09:25.201)
But yeah, that's coming together nicely. I'm out of like, for Cursor, get a certain number of premium completions. So I switched to the free models and on the free models, they can't code as well. So I have to do more checking than I used to when I used the Claude. Claude is very good for coding.
Adam (09:36.162)
Mm.
Adam (09:53.751)
Hmm.
Ste (09:53.791)
And I heard the one that OpenAI literally released last week, O1, that's very good for coding, like the mini version. So I'm curious to try that. I might go on their premium plan just to ship this faster if we can to hardcover readers, see if we can iterate on it.
Adam (10:05.122)
Yeah.
Adam (10:16.87)
I could give you a hardcover API key to use in cursor. then I set up O1 in cursor and then used it for a day. And then I went to check how much it cost in the OpenAI API. It was like four cents. So yeah, because it's all based on usage.
Ste (10:34.839)
really? okay. definitely hook me up then. Yeah, okay. I would have expected like $20 or something.
Adam (10:45.088)
It's not that much per thing, but I haven't tried any like, here's my entire code base. do I do? It's always been individual, single questions rather than ones that have like a ton of tokens.
Ste (10:53.743)
okay. yeah. Yeah, would be interesting to see how it does with the composer mode because I think that counts as multiple tokens. So, yeah, we can try it out. Definitely. Yeah, thank you for suggesting. If we can hook that up, I can definitely try to see how.
how it goes. I've been trying it with the free models and you know, it's like coding with a very junior developer versus a pretty like mid level dev compared to. So yeah, it's amazing that, you know, you can see the difference in quality.
Adam (11:32.216)
you
Adam (11:37.646)
Yeah, I'm trying to see. So it was a total of 16 cents for the day for all of my testing.
Ste (11:45.735)
Wow, that's good. That's good. Yeah. Yeah, we can definitely work with that. It's definitely cheaper than going on the premium plan. Yeah, that sounds good. Yeah. And also, I've been making progress with design. So what I did based on our discussion last time, so to give people a recap, we talked about how we can show stats together.
Adam (11:53.315)
Yeah.
Ste (12:15.339)
with the dashboard, so how we can translate stats easily to dashboard widgets, and then how we can separate stats as well. And last time we talked about having stats as facts about your reading. So you've read a certain number of pages, you've read a certain number of books, and then having some stats which are more like insights, which we derive from your
usage of high cover and kind of give you thoughts on what your stats mean.
And I guess that separation could be the difference between the stats you get as a free hardcover user and a supporter. So you'd get all the facts as a free user. And as a supporter, you'd get more complex insights and more advanced stats that you can interpret as your own insights.
So yeah, I began doing that and I've tried to see if I can make the stats have the same structure. So a title in the same place, content in the same place so that we can easily adapt them to various sizes and to make building them easier. So that's what I was hoping to make progress on today in Figma.
Adam (13:48.226)
Yeah, yeah, that sounds good. Yeah, yeah, I'm really curious to see the visual design of it, because I definitely like the idea that we've done so well with componentizing our app. And so getting these component building blocks that we'll be able to reuse on stats in the dashboard. then if we want to change them, we just have our stat block card.
that'll change it across the board. yeah, think that's gonna be a good direction to go.
Ste (14:24.501)
Yeah, that's, I kind of like tried to wrap my head around exactly what you described, putting them into components. But maybe today we can figure out, know, because you know how the code base works and how it's structured, how, if we can like make improvements on that.
And yeah, I know you've been working on some big changes in the back end as well. How's that going?
Adam (14:55.73)
It's going, it's going well. hit like one roadblock. I'm still trying to get past which is, so I've been working on like, what if we move the app from next JS to Ruby on Rails and inertia JS and, like overall, like I'm really liking like the development flow of it, like how easy it is to work on things. Just being able to use a Ruby on Rails queries to query the database, get some
content and then send it over to the front end as JSON. That part's really good. The part that I'm still trying to figure out is like the server side rendering part. So I've gotten it to where like, let's say you load the index page and it sends down the HTML for the index page and then it rehydrates it. It, it works just like you'd expect. And you could turn off JavaScript, refresh the page. You'll still see the full.
the full page. The problem I'm running into is that it's very hard to debug that when there's a hydration error because of the way it's built. Like it needs to do so much building ahead of time. And then when you run the page, it compares like the tree structure that was generated through SSR with what it sends down to you when it rehydrates it. And so I'm trying to figure out a good way to debug that so I can just get
get to the bottom of like errors that coming through, it'll say like the code that was shipped down doesn't match the code that was on the server. So it can't rehydrate it in a way. And so trying to figure out what the difference is and what I need to change to make it is what I'm still working through. From what I can tell, one of the most common things are like, you you format a date.
with the user browser's date settings. And so it's gonna be different than what was done on the server. Or you do something that's like uses the window object and then that ends up having a different result if it's done on the server versus on the client's browser. So I'm still trying to get to the bottom of those errors and I don't wanna get too deep on like going wide across the site until I've gotten like one or two pages working 100 % perfectly.
Adam (17:19.79)
because otherwise I'm going to spread those errors across the rest of the site.
Ste (17:23.211)
Yeah, that makes sense.
Adam (17:25.358)
So yeah, that's where it's at now, but it's coming along.
Ste (17:29.331)
Okay, that's good to hear. That's good to hear. And hydrating basically means that the stuff that you see on your screen as a reader basically has, so if we're showing a number of books you've read, basically that has to match with what you get on the server. Or if you set the dates, yeah, basically that's what we have to on the server, and they have to match.
Adam (17:56.514)
Exactly. And one of the tricky parts with that is what was rendered on the server feature request might be a little bit different if it takes into account changes the user has made from the beginning of their session. They're on the third page of their session. Maybe they've added a couple of books to the library, and now they're on that third page. When we load that third page, I'm trying to figure out how to get it in a way where it will rehydrate successfully.
Ste (17:58.636)
Nice.
Adam (18:26.1)
when it has maybe different data that was fed by the user over those first three pages or if they did a full refresh. So to be determined, but that's a, think once I figure out some of these SSR related issues, then it's just gonna be easy going on a lot of the migration from Next .js to Rails. Aside from like creating, recreating the open graph images,
That's something I haven't looked into how I'm gonna do in Ruby, but I know it's possible, but it probably won't be as easy as next, but we'll see.
Ste (19:02.731)
Okay, gotcha. Yeah, those are like one of the things I actually wanted to ask about, but I'm guessing, you know, we'll find a way to do that. The open graph, yeah, images are pretty easy to do in Next .js.
Adam (19:12.312)
Yeah.
Adam (19:19.852)
Yeah, and as a stopgap, we could always just keep the next .js site going on for cell and then only use it for open graph images until we migrate those off or something like that.
Ste (19:33.101)
yeah. Okay. Yeah, that sounds great. I mean, I didn't know we could do that, but good to know. Yeah, man, this stuff is like so, so complex and it always like baffles me how like Tangled web development is just like to ship some info about books to someone.
Adam (19:37.24)
Yeah.
Adam (19:44.705)
Yeah.
you
Adam (19:52.76)
Yeah. And I had a question for you about composer mode and cursor and using that. I was wondering if you'd be down for like sharing my screen and I could like kind of get your thoughts on how you might approach a problem in cursor specifically.
Ste (19:54.666)
Nice.
Ste (20:01.78)
Yeah.
Ste (20:12.191)
Yeah, for sure. Great. We can do that. I'm guessing, you know, let's start with stats. I can show you what progress I've made with the actual stats. this is like what everybody has seen in the last sessions. So there's your minimized profile header. There's the...
Adam (20:27.661)
Yeah.
Ste (20:42.288)
Nav bar with the stats tab, and then you go to this overview, which in the background can, or we can decide about this later if we should show an image that's related to your most read genre in that period. I'm not sure about this, but we can leave it for now as TBD.
or we can remove it. But yeah, I just left it there. So...
Adam (21:16.002)
Yeah, I like something up there.
Ste (21:18.345)
Yeah, it looks good. Plus, I'm guessing, you know, it will look like very nice when you share it on Instagram and people might, you know, wonder, look at this. This is very nice cover. And in the long term, when we actually get artists to contribute photos for each genre, I'm guessing, you know, it would be like a very, very good place to maybe credit them and highlight who has this been made.
So maybe cover by artist name could go somewhere on here. I think that's a pretty nifty thing we could do to make some, you know.
Ste (22:08.787)
popular reference, I mean, give people credit for this genre image. Again, you know, we'd have to actually wait for artists to submit, which hasn't happened so far, but who knows? I think there might be artists out there who want to illustrate the genre.
And then basically I was thinking about this structure. So each of these components basically would have a title. It would have this little thing which could be a menu like this. So I was thinking this could either for like, this is not valid for this. So this would basically be for this not size, but
sharing, removing, or like other actions that we want to associate stats with. Here is kind of like an open, add to dashboard. Yeah, that was it. I was trying to figure out like, add to dashboard. I was trying to figure out.
Adam (23:10.69)
Yeah, add to dashboard.
Adam (23:21.017)
And we might not need remove here, but we could use remove on the add to dashboard version.
Ste (23:23.595)
Yeah.
Yeah, definitely. mean, this is like the app to dashboard version. So this is the dashboard version. I just put it here. Sorry, it might be confusing. So let's put like a plus circle here. And did we have anything else to put in there or is it just like share that to dashboard? I remember something, but I couldn't like figure it out when I was doing these.
Adam (23:31.765)
Mm -hmm.
Adam (23:52.706)
No, I think on the stats page, those are the ones that make sense to me.
Ste (23:57.065)
Okay, then I'll just leave them here so we know. for these, I'm just going to go through them so you can see how they're different and how they're similar. So basically, I think the only different thing would be the actual content. And I wasn't sure how to approach it. So for instance, if we want to have some covers featured here.
Adam (24:18.051)
you
Ste (24:25.775)
and a graph in one stat and another graph in the other, maybe it would make sense to have like this whole like content area as like a component that's like...
like basically is a children of like the main component. But I think a good question would be what else can we make like common to all components? So to all stats, stat images like these, apart from the title and the actions.
Adam (24:54.583)
and
Mm.
Adam (25:07.77)
Yeah, maybe some indicator if it's a supporter only one or not. Or I guess if it's not a supporter only one, then we wouldn't need anything. But if it is a supporter one, some kind of indicator.
Ste (25:15.543)
Okay.
Ste (25:22.977)
We could have like a badge or like a footer like you said last time.
Adam (25:32.622)
And another kind of related one is a link to some place to fill in missing data for it. That's one of the things that's come up on our current stats page where it's like, you've 100 books, but we're only able to calculate out 87 of them because the other 13 don't have a page count.
And so if there was some way to quickly link people to a list of their books that were missing that data for them to update, that would be very useful, both for us to get the data and for them to quickly have a way.
Ste (26:06.943)
Mmm, yeah.
Ste (26:15.385)
Would you think like just a link if it's missing data?
Ste (26:24.811)
missing data at the...
Ste (26:35.522)
How should the action be named?
Adam (26:38.318)
It could be like like 14 books missing data.
Adam (26:50.705)
And then that could just be a link or something. Or maybe just missing data from 14 books. And then the 14 books would be like a link.
Ste (26:55.209)
Yeah.
Ste (26:58.775)
See soon.
Ste (27:06.519)
So basically something like this, right?
Adam (27:09.282)
Yeah, it could be something like that.
Ste (27:11.849)
Okay, this is looking good. Should we add like, some people might not know what this is about. So if we add a tool tip, could we say like, this, sometimes we're not able to display or.
Adam (27:20.824)
Hmm.
Ste (27:40.917)
It's not about that to calculate, to...
Adam (27:44.534)
Yeah, it's like maybe it would be more like add missing data to these books and we'll include them in your stats.
Ste (27:53.695)
Mm -hmm.
Ste (27:59.487)
in your stats, please add missing data. And what kind of data are we talking about here? Is it like the cover data or it's actually like the red dates, right?
Adam (28:14.474)
Yeah, it'll depend on the widget. Like for this one, the you finished one, I don't think we would ever have it for this specific one, because this one you finished is completely dependent on finishing the books. That one would, I think that one would be complete either way. But for like this next one for pages read, that one would be like, like certain books you don't have, we don't have the pages, so we can't calculate it.
Ste (28:33.909)
Okay, yeah, let's put this here.
Ste (28:42.607)
Yeah, this is good. So let's have a little tip.
Adam (28:48.344)
What if this was like over here too, like to left of it?
Ste (28:50.859)
Yeah.
Adam (28:55.064)
somewhere.
Ste (28:56.053)
This is just like a copy this topic from this one.
Okay.
Ste (29:14.711)
please add, maybe we should make it contextual. if it's like the tool tip on this one, it should be reading dates or please add, is it reading dates or page counts?
Adam (29:24.92)
Bye.
Adam (29:28.692)
This would be like page counts and audiobook links.
Ste (29:35.031)
you
Ste (29:42.101)
Here we go.
Ste (29:55.087)
Okay, that's just like a tool tip.
Adam (30:01.004)
Yeah. And I like the idea that like, you're, if you're scrolling on this on your phone, like each one of these cards is taking up the full height. Is that kind of what you were thinking too?
Ste (30:01.444)
Okay.
Ste (30:13.053)
Yeah, yeah, exactly. I mean, this should be like a full mobile height for most mobile screens. Let me quickly grab like an iPhone, iPhone PNG so that we can put it there. me copy this image. So basically what this would be like, whoa.
Ste (30:44.695)
this. Here we go. So yeah, basically like this would be your phone and this would be like the thing plus the header, but basically the header auto hides. So we're also taking into account, you know, phones that are maybe shorter. So yeah, I think this is a good, it should be like 500.
Adam (30:51.52)
and
Ste (31:14.783)
a good height.
Adam (31:16.121)
Yeah, we could even scroll snap it as people scroll down from widget to widget.
Ste (31:23.096)
yeah, that would be great. Yeah, like we did on the Euron Books page.
Adam (31:26.998)
Yeah.
Ste (31:29.033)
Nice. Yeah. Yeah, this one, I followed your lead. So basically this would be like the aggregate and this would be like the pages read. But I'm not sure if for people who listen to audiobooks, we should actually make it into or make another section that is focused on minutes. So you have this view and you have the, you know.
Listened versus
Adam (32:02.358)
Right? It's like, yeah, because there's effectively like three lines really aren't there. There's a line for pages read, there's a line for audio books read, and the line for both of them combined. So maybe we could just add another third line to this one of audio ones.
Ste (32:03.765)
Yeah.
Ste (32:13.813)
Mm -hmm. Yep.
Ste (32:19.455)
Yeah, yeah, you're absolutely right. So maybe we should make it another color or let's hope that works.
Adam (32:23.736)
and
Adam (32:28.504)
Yeah.
Ste (32:30.711)
So.
Let's see, it's not accurate at all.
Adam (32:34.306)
So yeah, yeah. But the idea is that your red pages and your listend thing should add up to that third line.
Ste (32:44.617)
Yeah, exactly. It's not adding up. This is a mess, wait.
Adam (32:47.903)
But that's the idea. think that chart shows a lot of information all at once. And I like how it lets you compare your read plus your listened books in a neat way.
Ste (32:54.774)
Yeah.
Ste (32:59.335)
Mm -hmm. Yeah, that would be like, if we pull that off, that's going to be really nice. And maybe when you hover over it, maybe it could highlight the actual line. I think we do that on some of the charts we have in the stats. So this is basically going to be a tool tip. yeah, it's going to show different things depending on which line or point you hover.
Adam (33:28.866)
Mm
Ste (33:31.029)
Nice. Yeah. And this basically, so whenever there's a number, I put it here, but I'm guessing, you know, the other areas are going to have to be custom to the component depending on, So I'll remove this.
Adam (33:52.54)
Yeah, I like
Yeah, I think it's looking good. I think we probably need some kind of like x and y axis to...
to see some kind of indicator, if it's only like, even if it's just like a number amongst like one of these so that there's something.
Ste (34:11.959)
Yeah, that's true. So can we make this so that it's contextual? So for instance, this is 400. And this is 100, maybe. So just make it focus on so it doesn't start from zero every time.
So for instance, we would not have like a chart looking like this.
Adam (34:44.846)
I see. Yeah, I think, yeah, it's gonna be interesting to see what people do because the bottom axis is basically their lower boundary. And you might want it to have, or yeah, if someone has had a month where they were at zero, then it's gonna have a ton of variance. But if they read between 400 and 500 pages every period, then it's just gonna be a straight line.
Ste (34:53.718)
Yeah.
Ste (35:12.605)
Yeah, yeah, I mean, so for some people it might end up like this. I guess this is like the chart you were describing. maybe we can, yeah, let's see how people use this because it might not be the case. I mean, maybe we're just like overthinking.
Adam (35:20.757)
Yeah.
Adam (35:31.704)
Yeah.
Ste (35:34.711)
Yeah, and for the actual points, I'm guessing this would vary depending on what you select here. So if it's by year, so if it's like 2024, it's gonna be months. If it's like all time, maybe it's years, but with a few points in between, can we actually do that?
Adam (35:58.148)
Yeah
Adam (36:03.95)
I guess it depends on how many years. Because if they have 20 years of history versus if they have two, we would probably extrapolate it out so there's a minimum number of points. So there's always at least 10 points or whatever.
Ste (36:06.517)
Yeah.
Ste (36:23.369)
Okay, that sounds good. If we can do that, that's great. That's what I was thinking, but yeah.
Adam (36:28.14)
Yeah. One, one thing I was thinking is like this, supporter feature, like if we wanted some indicator, like if a stat is a supporter feature and if it's not, maybe we give them like a, you know, a blurred thing, something like some kind of, we need some kind of upsell in that case. so we probably need like two states, one where they've paid for a supporter feature or maybe three states.
Ste (36:50.463)
Mm -hmm. Yeah
Adam (36:57.598)
One, let me write this down. So we have like a state for.
Ste (36:59.702)
Yeah.
Adam (37:10.463)
owner looking at their stats indicating that it's a supporter one.
Adam (37:23.714)
I guess, supporter owner, and then we have a free owner looking at their stats, CTA, called action to upgrade. And then we have a free reader or a guest user looking at stats of someone who's a supporter. And you would be able to see someone else's supporter stats, but you wouldn't be able to see your own supporter stats.
Ste (37:53.661)
Yeah, that makes sense. So I was thinking for blurring, could just like maybe on some parts of it, I mean the essential parts, we could add something like this, but yeah, actually blur the actual thing so you can like remove it in CSS.
Adam (38:15.316)
Yeah, yeah, it it wouldn't be with real data it would be with like placeholder data
Ste (38:21.404)
yeah, that makes sense.
Yeah, I mean, would something like this work? Maybe a CTA like become a supporter or just a link.
Adam (38:32.219)
yeah.
Adam (38:41.623)
Yeah.
Ste (38:46.667)
Maybe something like this.
Adam (38:49.698)
Yeah.
Or we could just say like, become a supporter to see advanced stats. I mean, I guess that's one of the many things that it is, but.
Ste (38:58.335)
Yeah, yeah, exactly.
Ste (39:04.169)
Yeah, I mean this is looking good. I can play it even further.
Adam (39:10.248)
So this would be when you're looking at your own stats and you're not a supporter or yeah.
Ste (39:15.655)
Mm -hmm. Yeah, I'm thinking when you're looking at someone's page and they're a supporter, maybe we can, I mean, you're not gonna, or you are gonna see this, yeah, you are gonna see this little header. So, yeah, you can actually like see their supporter over here. So I'm thinking, you know, if we make this so that it sticks to the...
header of the page somehow. if you screenshot it, you know it's this person's profile. Maybe we can like, so it's something like this.
Ste (40:01.009)
and you're basically seeing their profile.
Adam (40:04.15)
I see. It's like the header that sticks around. But we're also thinking about making the date selector stick around.
Ste (40:15.332)
Yeah, so it would have like the header and the date. So maybe.
Ste (40:26.527)
I'm guessing this could work or...
Ste (40:35.6)
Should we include like the username in the actual title or in a header for each stat? I'm guessing that would be like a bit repetitive, right?
Adam (40:46.474)
Yeah, it seems like that would be repetitive.
Ste (40:50.527)
Or we can just leave it like this because when you enter their page you can see their supporter and basically what we'd want to achieve is
for you to see that this is a stat that's advanced and you can unlock it or you can see it if you're a supporter. So maybe we can just like pull badge here, support stat.
Adam (41:24.524)
Yeah, that's what we're doing it.
Adam (41:30.754)
And so if you're a free user and you're looking at someone's stats, who is a supporter, we would make it clear that the reason you're able to even see the stat is because this person is a supporter. So it's like, how do we, we need to make sure people know that like, well, I guess it could be either that you're a supporter or that that person's a supporter.
Ste (41:45.034)
Yeah.
Ste (41:53.621)
Yeah, exactly.
If they're a supporter, you're going to see their supporter stat because we take the time to calculate that because they're a supporter. If you're not a supporter, you're going to see that this is a supporter stat. And basically, we can make this a link so that you can become a supporter if you want. Because if you'd go, let's see you're browsing Jenna's profile, and you see, this is a cool stat. And you go to your profile, and you basically see that you have to become a supporter
see that. I'm guessing that's pretty clear. I mean the goal here is to not make it confusing.
Adam (42:30.505)
Yeah.
Adam (42:34.914)
Yeah.
Ste (42:36.403)
and have people ask, why am I seeing that? Why don't I have this?
Adam (42:40.534)
Yeah, and if you're a free user and you're looking at another free user's profile, it just wouldn't even show up on that other person's profile. I think we can only have this show up on your profile when you're looking at it. like, whenever you're looking at any other profile, all you see is filled out data, no other things.
Ste (42:49.9)
Yeah.
Ste (42:54.998)
Mm -hmm.
Ste (43:01.78)
Yeah.
Ste (43:05.493)
That sounds good. Yeah, we're just not going to show it and...
Ste (43:12.841)
If there are support, yeah, that makes sense.
Adam (43:17.747)
Yeah, I think this works. the other, did kind of also like it up here when you had it up there. But then again, it's like the first thing you see, which I don't think it needs to be the first thing you see.
Ste (43:27.56)
Over there?
Ste (43:34.195)
Yeah, well, I don't know, maybe it is. mean, we can leave it there. We can play around with the positioning, but I don't mind it there. It's a pretty nice notification, you know.
Adam (43:41.932)
And yeah.
Yeah, I the other option is kind of like with this one where we have like this bottom row. If there's like a bottom row and this is like.
Ste (43:56.538)
yeah, we could do that. Let me make this like, yeah. Support a stat.
Adam (44:05.325)
Yeah, it's kind of like in a footer. And maybe there is a question mark or something like that. Or it could be in the button for.
Ste (44:14.846)
Yeah.
Ste (44:20.123)
We could make the button a link and maybe have it there or yeah have that let's say for consistency purposes. wait this actually has an icon here we go.
Ste (44:39.497)
It's a circle question. OK. So.
Ste (44:48.843)
Is that like on so small? Scale to X. No, okay. Just like smaller than that. Okay. Let's just leave it like that. And maybe this like opens the tool tip and it says, if you want to see the stat on your profile as well, become a hardcover.
And maybe here we can make this into a link.
Adam (45:26.124)
Yeah, one thing that's tricky to me is when I see this, it looks like it's a button that takes me somewhere already.
Ste (45:32.873)
Yeah, true. Maybe it's best to not make it into like a... So we can maybe take the... It's just like a button and maybe we can have the tooltip here for this one or...
Adam (45:47.694)
So yeah, I'm thinking about it like, you know, there's gonna be two cases, one where you're a supporter and you're looking at this page and you wanna indicate that this is a supporter thing, but you don't need the CTA to go to the supporter page because you're already a supporter. And in that case, we just need to like, yeah, some kind of badge that's not clickable. But if you are a free user, that's when we need the CTA.
Ste (46:03.67)
Yeah.
Ste (46:15.276)
Or we can do this. And this is just link and it's pretty like self -explanatory that's, you know.
Adam (46:25.155)
Yeah.
Ste (46:26.187)
Hmm?
Adam (46:32.83)
One thing that is kind of interesting to me is like the idea that there's like this bottom part.
instead of having this be a different color, like with a badge, maybe the entire bottom part has like some slightly different color, not like completely yellow, but like some other...
Ste (46:59.763)
Yeah, let's try that. Maybe it can be like this is like the regular color. So maybe we can make it.
Adam (47:14.956)
Yeah, exactly, with the square tops and rounded bottoms. it still looks like the natural footer. it's a, yeah, that way we can have a free user footer color and a paid user footer color.
Ste (47:16.055)
So that's it.
Yeah.
nicely blends in.
Ste (47:31.069)
yeah, that would make sense. Let's see, so maybe we can make this like a primary and this would be like...
Ste (47:44.297)
Make it look a little bit more. Yeah, I I'm liking this.
Adam (47:49.89)
Yeah. I think we'll also sometimes need this like missing data part in the footer though. that'll, yeah, yeah, that could work.
Ste (47:58.771)
Yeah, we can just like do this. So it just like adds to the whole, to the whole height of the thing.
Adam (48:08.758)
Yeah, I think that's a good idea, because then we don't need this part to be in a different color than...
Ste (48:13.939)
Yeah, it's just like a small like nudge.
Adam (48:18.476)
Yeah, and we could even do, what if this bottom color was like a slight gradient? Well, I don't know. I'm split on that because I think it can look good, but it can look overdone too.
Ste (48:26.716)
yeah, definitely.
Ste (48:33.557)
Well, let's see. I'm also like, I'm going back and forth between gradients as a style choice for the site and... Wait, I made it a gradient with the same freaking color. Let's see. Sometimes they work, sometimes they don't.
Adam (48:41.895)
You
Adam (48:54.422)
Yeah. Yeah, I think I did like a better solid than with these.
Ste (48:59.711)
Yeah, usually, yeah, that's my conclusion, like most of the times, just like using different colors for like, yeah, it looks a bit thinner. Just using different colors and tweaking the contrast between those usually has better results.
Adam (49:26.88)
Yeah, I do like this colorful chart on a letterbox. This is using color for the chart itself as opposed to the background.
Ste (49:28.374)
Good put.
Ste (49:41.305)
yeah, the actual back. Yeah, I mean, we could make like gradient charts. I showed you like there's this example from that chart library I've been looking into. I mean, we're probably not going to use it, but it's got a good example. Let me paste it. Paste it in ShadCNCharts. It's got a pretty nice gradient chart. Let me just...
fetch it from here. So, you do stuff like this.
Adam (50:18.954)
Mm -hmm.
Ste (50:21.055)
or like this for bar charts. That could definitely work.
Adam (50:27.158)
Yeah, yeah, it was just, I do like those.
Ste (50:34.601)
Yeah, they're looking like, I mean, for this one's a really colorful one, so it kind of clashes a bit because these are the colors we use for the actual button colors. this is for, actually, this is for ones to read, right?
Adam (50:41.568)
and
Ste (50:56.321)
So it's yellow if you want to read it. It's what do we have for reading? Is it like the Indigo?
Adam (51:03.078)
I think it's like a green. It's like a light. I think we like have a same, like a different color green for currently reading and red, like a lighter green for reading and then a darker green for red.
Ste (51:12.798)
Okay.
Ste (51:20.951)
Okay, I'll have to double check on those. But yeah, kind of like this. It's looking nice, those colors match.
Ste (51:32.223)
Yeah, so this is like the library status breakdown and I'm guessing we can use it for the genre breakdown as well. Here we go.
Ste (51:44.913)
and I just put the profile picture of the person whose stat it is because I was thinking it could play well when people are sharing it so if this is your stat and you're sharing it you're gonna it's gonna be nice to have like as much personalization
Adam (51:49.314)
You
Ste (52:12.556)
here. That's why I've made these reads like you've read this amount of pages. So when people share it, the thinking was, okay, this person read like this amount of books. I'm not sure if it's better to do this or just yeah, Jenna reads red like this.
Adam (52:13.773)
and
Adam (52:33.204)
Username red. Yeah.
Adam (52:39.798)
Yeah, what if we did? Yeah, oops.
Ste (52:44.255)
Yeah, here we go. Yeah, I mean...
Adam (52:46.71)
Yeah. Or we do a tiny avatar at the top and say, like, full byline.
Ste (52:55.721)
It could be especially if we make the scroll snap. Let's put this in a really tiny avatar and basically bring it to the front.
Adam (52:57.154)
then yeah.
Ste (53:10.804)
I mean...
Adam (53:12.758)
It does, like, it does. Yeah, maybe, maybe it's like that if you're looking at someone else's profile and if you're looking at your own, it's like you read.
Ste (53:23.475)
Yeah, yeah, but I'm thinking like if you'd want to share it so people see. -huh. LinkedIn has like this thing where you can see your profile as a visitor. So, or you can just log out. Yeah, you can just log out. You wouldn't get access to the supporter features if you're a supporter though, if you're logged out. So, maybe we can just leave it like this and...
Adam (53:27.552)
Yeah, that's true.
Adam (53:40.213)
you
Adam (53:52.409)
Yeah.
Ste (53:55.627)
I mean, it's pretty obvious to you if this is your username that it's your reading.
Adam (54:01.73)
Yeah.
Yeah, I think this is very shareable. So yeah, and if you did share...
Ste (54:08.47)
Yeah.
Adam (54:16.172)
Yeah, I'm even thinking like, for like a, if there's like a V zero of this, what the sharing option would do, because like in an ideal world, it would generate an image and you would be able to share that, or it would like allow you to like share it straight to Instagram story. Like, you know, just click a button and it's on your Instagram story.
Ste (54:19.829)
If you share it, maybe...
Ste (54:40.859)
Yeah, maybe we can just like remove this since it has only two options. And I mean, you're going to screenshot it if it's like full length. I'm thinking, you know, that would be like the easy way to ship it for us as well. So we don't have to generate that image. So this thing basically, like if you screenshot it and you just screenshot like this part, you know,
That's like shareable. Maybe even the missing data would...
Adam (55:17.594)
It would be incentive to fix your data before you share.
Ste (55:20.745)
Yeah, yeah, exactly. Okay. Yeah. Yeah. Yeah. Yeah. Yeah. That's good
Adam (55:24.492)
And hopefully that'll go down to nothing as there's more book data in our system too.
Ste (55:31.625)
Yeah, this is looking good. mean, even if it's like this, you can always crop it to whatever you want. And you're going to have a nice shareable image of this whole thing. So maybe we can remove this. And if it's a stat that you'd consider adding to your dashboard,
Adam (55:48.344)
Mm
Ste (55:59.229)
maybe we can...
Ste (56:06.771)
it's available for dashboard. Because last time we talked about how not all stats would be available on your dashboard, right? So for instance, yeah, these all you would have on your like.
Adam (56:25.973)
Mm -hmm.
Adam (56:39.032)
Yeah.
Ste (56:39.639)
could like have like an icon here that
Adam (56:49.846)
Yeah, and I bet this footer part would only show if you're viewing your own stats too.
because
Ste (56:58.044)
yeah, that's true, yeah.
Ste (57:02.711)
class dashboard if we just do this.
Ste (57:09.312)
it be like
Ste (57:17.681)
Or what we could do is like up top or maybe here we could have like a share view that basically hides all of these elements. I don't know. I'm just like a...
Adam (57:31.948)
Mm.
Adam (57:37.622)
Yeah, I think.
Ste (57:38.049)
So this would be like...
Adam (57:43.105)
Yeah.
Ste (57:51.566)
Or not.
Adam (57:56.611)
Yeah.
Ste (57:59.177)
What do you think? Should we just like keep the ellipsis here? I mean, if you want to screenshot it, this wouldn't like bother you.
Ste (58:11.53)
and you just like.
Adam (58:12.086)
Yeah, I think the ellipsis there is good. But yeah. go ahead.
Ste (58:15.444)
or
Yeah, I was thinking, you know, what if you click the ellipsis, like click on share and then it hides it, but then yeah, that doesn't make sense. Sorry.
Adam (58:28.077)
Mm.
Adam (58:33.046)
Yeah.
Ste (58:34.665)
Any other ideas on how we could do it?
Adam (58:45.302)
Yeah, I'm not sure. think, I think like penciling it in to be behind the, the, ellipsis is the most flexible. And then as we start figuring out sharing, can, probably talk to some people about how they would actually share it. I feel like that's kind of the missing piece is that we haven't like talked to specific people who are like, I want to share this here because we haven't shown them the thing yet.
And so once we show them the thing, then we'll understand like where they could share it and how they would share it.
Adam (59:24.088)
Oops, I think my internet might have died.
Ste (59:50.0)
Okay, think add dropped off and we're nearly at time so
Ste (01:00:45.431)
Okay, I think add this internet one haywire.
Ste (01:00:55.445)
Okay, I'm just talking to a mom discord. Let's see if he rejoins. But I think...
Ste (01:01:06.921)
Yeah, he's saying it's not coming back. So we're pretty much at time. So our build session, I think we can end it there. It's been a really fun one. When did that hour go by? So I guess next steps for us would be to basically advance with the work we've been doing now.
Ste (01:01:38.679)
We've got a pretty good base on the dashboard as well. So I think next time we're going to still be doing that. yeah, I guess see everyone next week. And thanks for watching Hardcover Live number 59. Have a good evening and see you later. Bye -bye.