Subscribe
Share
Share
Embed
Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.
Adam (00:01.302)
Hey, hey, stay. How's it going?
Ste (00:03.81)
Hey Adam, excited to be here for hardcover number 13.
Adam (00:09.634)
How was your last week been?
Ste (00:12.77)
It's been good. I started driving lessons and that's been an extra thing on my plate. Uh, those are going well. I'm having lots of fun, but it's also, you know, hard to coordinate. I'm not the best coordinator, so I'm driving manual as well. And it's on the other side of the road because I'm in the UK. Well, yeah, that's been.
like most of it. We've had a coronation and everything was wild here for a bunch of days, but yeah, that was fun. How about you?
Adam (00:48.046)
Let's see, haven't been up to one on our first hike of the season now that it's a little bit warmer and the snow's melted. And last week there was this Next.js conference. So I've been like trying to learn all the new stuff that came out since then, which has been kind of fun.
Ste (01:07.23)
Yeah, I seen that's been like super huge and there were lots of updates, some of which we're going to use and we're probably going to talk about them today on the more, you know, take your note of our weekly podcast.
Adam (01:22.898)
Yeah. So you mentioned driving. Have you driven before or is this your first time ever really driving?
Ste (01:31.69)
I have driven before, but the reason I don't have a license is because I failed two times back when I was really young. Well, not that young, but significantly younger. So that was about 15 years ago. So I kind of left it like that and that was back in Romania. Now I'm retrying to do that again and it's on the other side of the road and in a different city.
So that's been good. I mean, it's been pretty fun. It's been pretty fun, but I'm not the most coordinated type of person when it comes to, you know, actual physical movement. So I've been trying to wrap my head around all the things that you have to do at once, but it's good. I mean, I'm driving. It's over here, they just like throw you in there. You're just supposed to like drive on the street right away.
So that's been good. It kind of freaked me out the first hour or two, but yeah, it's really slow over here, which is good. It's like 20 miles per hour. So yeah, not a lot of surprises there.
Adam (02:47.966)
One of my life goals is to live in a place where I can go a year without needing to drive at all. Here, everywhere in the US, or at least outside of the big cities, it's pretty hard to get around without a car. But it would be fun to move to a place that's very pedestrian friendly and just live there.
Ste (02:56.738)
Well, yeah, that...
Ste (03:04.61)
Yeah.
Ste (03:11.202)
Yeah, household like is it like good from that point of view? It seems pretty good from a pedestrian point of view from the photos.
Adam (03:19.89)
It's pretty good if you're just getting around in the main pedestrian areas. If you're going hiking in the mountains, then you might be going to a place where there is no public transit and you won't be able to get cell service to get a lift back because you're out in the wilderness.
Ste (03:38.363)
Uh, gotcha.
Adam (03:39.934)
So for a lot of areas, it's not really an option. But for a lot of things, like there's even a bus that goes up to the ski slopes. So a lot of people take that so that they don't have to drive through a lot of the mountain passes. But.
Ste (03:53.29)
Okay, that sounds pretty nice. Do you have a driving license?
Adam (03:58.746)
Yeah, and my wife and I share one car. We went, we had two when we were both working and we were both like out of the house every day, but going down to one car has been nice. It's, it's a lot, a lot fewer problems only having one car than having two cars.
Ste (04:16.314)
Yeah, I bet. Yeah, it's a liability. I mean, in my family, my wife knows how to drive. So I kind of like got around. I didn't have to get a license, but now I kind of do. And, you know, I kind of wanted to, but it's it's a life skill. You know, it's good that you had it, you know.
Adam (04:20.619)
Yeah.
Adam (04:32.867)
Thank you. Bye.
Adam (04:41.186)
Aside from that, what have you been up to on the hardcover side?
Ste (04:45.774)
I've been working on some of those OG images that we're going to talk about today. And generally, in the positioning area, we're trying to find better ways to talk about hardcover and talk about what we're doing here and what our plans are. So we've been through a moment where we
talked about that and try to uncover what those things are. And that's been like really good from many points of view. That's vital for startups in general and it's vital for us to know who we're talking to and what we're actually doing here. So we've done that. I've worked a bit on the branding as well. So there might be some new hardcover branding after we...
talk about it and revise it and iterate on it a little bit. So there's that. And generally some design updates. Yeah, how about you? I know you had a lot of things going on in the background.
Adam (05:59.594)
Yeah, I was so happy to finally release the ability to edit editions and books from the site for just anyone on the site. That took me probably like six weeks of work. And I am so happy to be mostly done with it. And I can move on to something else. I get kind of tired of working on a feature after about three weeks. So like six weeks on one thing was like.
Ste (06:18.964)
Yeah.
Adam (06:28.53)
It was it was reminding me of when I like had a job and it was like a month long sprint with other people But so yeah, very happy very happy. That's all but
Ste (06:35.237)
Yeah.
Yeah, was it tougher than you anticipated? I mean, I know it was, but you know, from what points of view?
Adam (06:44.039)
Yeah, I think the hardest part was that so right now or previously anyone who saw something off on the hardcover like something wrong with a book or an edition could create what we call a report which is really just open text that goes to a back end and in the back end I would normally like handle that report and mark it as either complete or skipped.
And that system was super basic. It was just a text field. It goes to the back end, and I mark it as that. Now, I was trying to create the system where once me or someone else goes through it and completes that report, it sends a notification back to the user saying what happened and with some text that an admin can provide.
but also giving all the tools to actually handle that request without doing what I would often do, which is actually like SSH into the server, open up a terminal, and run code to fix it. Because that was the only way to fix something. If someone reported a series had a different name or a book had a different title.
I would have to go into the database and change it. So now I was like going through all the reports that people were submitting over the last couple of months. And I would see like, does this new ability to edit editions and books solve this report? And then I would go through a couple of other reports and I would get to another report and there would be something that someone was commenting on and I would have to build out the functionality to edit that new part of it. And so.
Ste (08:04.302)
Wow, okay.
Ste (08:29.882)
Well, yeah, okay.
Adam (08:32.71)
Eventually, I got to the point where I was able to just go through a whole bunch of them, and I wasn't having to go into the console or build anything new. And that's when I kind of knew it was mostly done.
Ste (08:44.667)
Wow, okay. Yeah, that's quite right. Yeah.
Adam (08:49.686)
Yeah, but since then, go ahead. Yeah, since then, I was moving on to some like SEO and speed improvements for hardcover.
Ste (08:57.526)
Nah, nah, nah, you can go ahead, yeah. Finish your thoughts.
Adam (09:11.594)
Like right now, if you load a page, and this will get into like the OpenGraph stuff we'll be talking about today. When you load a page on hardcover, we do quite a few things. Like first we hit an API to get your API token that you'll use for all of your following API requests. And then we use that API token to hit the server.
and get information about the currently logged in user so that we can show your avatar up in the top right. And then we start hitting the server for anything that populates the current page that you're viewing. Like if you're on the book page, we hit the server and get the information about the book. So it's like a minimum of two requests just to get the template of the app set up. So what I was working on since then,
I think there's some background noise on your side, by the way. What I'm working on now is when you load that first request, it'll actually use server-side queries to actually get all that information and populate the layout.
Ste (10:05.803)
Oh yeah.
Adam (10:25.198)
using this thing in React called Suspense, which sounds like a really like action-packed movie star name or something, like a suspense movie, but all it's doing is basically the same thing that our client components do where we show like a loading spinner while something's loading, except that's happening on the server side and we're able to cache things for everyone.
So like right now, if you view the book page, we're going out and getting information about the book for every individual person that loads that page. So we're hitting the database to get information about the book once per view. This will change it into something where we hit it once every hour to get information about the book.
And then we'll do another query, probably on the client side, that'll get information about that user's interaction with the book. And that'll be specific to the user. So it's kind of moving it so that.
A lot of it happens on the server rather than on the client. And so on the actual, like when you go and view the book page, it would actually only maybe query the database once with an API request instead of what it does now, which is a minimum of three times.
Ste (11:43.814)
Okay. Yeah, that's very good. I mean, it's going to make things faster. That's like the main scoop of this whole thing, right? So when you get onto that page, you'll have way snappier loading times.
Adam (12:02.794)
Yeah. Yeah. And
Ste (12:03.074)
Which is going to be great because the, yeah, the book page is going to be significantly more complex than what we have now, especially in terms of interactions from you as a reader and other readers. So that's going to be a lot. You wouldn't want to spend like 20 seconds just like waiting for the whole thing to load.
Adam (12:27.158)
Yeah. And I think that the missing piece that I learned about in the past week is that before, I kind of thought about it as all or nothing, which is kind of how it was for Next.js 12 and under, where you were kind of loading all the data that needed to go into that entire page, and then you would show the page, or you might be able to show a loading version of the page in the meantime. Now...
each individual part of the page can load on the server, but show a loading state while it's loading. So for instance, when you load a page, like say a blog listing page, we can show you like.
the actual page like instantly because nothing is needed to be loaded yet. But then we'll show like a loading spinner where your icon is, and maybe we'll show a skeleton for like the blog posts and then they'll, they'll switch over into the actual blog posts. So I think that, uh, doing that architecture where like there's, you always want to get that first bite delivered to the
the user as fast as you possibly can without needing to wait on anything is kind of the approach we're taking now, which is kind of what we were doing on the client side, except we're now doing that on the server side. So, yeah, I'm pretty excited to work on it. I've been reading a lot and I'm having fun with it.
Ste (13:55.118)
That's nice. Yeah, I've seen there were lots of people, devs, especially excited about these announcements. And yeah, I kind of looked over the code and I got sort of an impression of the magnitude of these changes to people using the app. You know, it will change the whole experience of how everything loads and how everything moves.
So that's pretty good. Lots of things we can harness from that. Yeah, it's pretty exciting from a design perspective as well because we can do more complex stuff without, you know, having to worry about things that would load slower.
Adam (14:43.462)
Yeah, and I think that leads well into the Open Graph images because for, so for every page, like if you share it out on Twitter or somewhere else, it displays like an image preview of that page and right now we have like one Open Graph image that we use for the entire site.
So right now, that one's like hard-coded. So I think today we're gonna be talking about making those dynamic per page and maybe even per user.
Ste (15:18.582)
Yeah, that sounds great. I can jump in into the visual stuff, which is always clear. So let me share my screen, and let's dive into it. So these are the OG images. Can you see everything?
Adam (15:38.701)
Yeah, I can see it okay.
Ste (15:40.734)
Okay, perfect. So these are the Open Graph images. So images that when you share a link appear next to your link. So whenever you share it on Discord or on Messenger or on WhatsApp or on any other place on Twitter or on Mastodon, you get this image. And usually it's just one static image for most websites but now...
any part of that image can be customized, which brings a lot of interesting things that we can do. Something like this. So for a book, let's say you would want to share defined by Brandon Sanderson, and you would copy the link from the book page, and you would share it to your friend on Discord, who doesn't know anything about Brandon Sanderson.
And even before they enter the website, even before they click on the link for hardcover, they can see the book title, they can see the author's name, they can see the top two tags for that book, and they can see the average rating, the number of ratings, and the graph for all the star ratings. Of course, we have half star ratings, so you have 10.
bar charts over here and you can see how many five stars it has compared to how many one stars it has. And we can also share the cover, of course, our logo here because we're proud of this, so we want it to be there. And we can also share something that's not necessarily about the book, but also about your profile. If you share this to your friends, they're going to know that they can.
actually follow you on Hardcover. So they see your profile pic, they see your username, and they also see your flare on our website. So if you're a librarian, or if you're a supporter, or if you're an author, or anything else that's reader role on Hardcover, they're going to see it here. I kind of like that. So that's why I kept all of these elements.
Ste (18:05.37)
And this type of image can react to basically anything we want it to. So we can also have a very short description for the book that we're currently planning on using AI generation to basically sum up most books on hardcover.
And it can even show your review if you want to have your review shown, if you share the link to your review. So your friend can see you rated the font by Brandon Sanderson 4.5 stars. And this is before they even got to our website, before they got on hardcover. So this is what they would see. And of course, this would apply to anything. This would apply to
a common page, this would apply to a list that you've shared, this would apply to an author page that you share, and it could apply to your library in general. So these books could be the ones you marked as favorite or as owned or as your latest reads on HaraCover depending on what we have there. So those are...
like in short, the capabilities of the open graph images, like showing you a glimpse of whatever you want before you enter the website.
What do you think about these Adam?
Adam (19:47.338)
Yeah, I think they're looking great. Like one of the, so for like these first ones on the left for the book. So this would be, so if you just like go up to the URL for a book page and then grab the URL and share it like that, I'm thinking it probably wouldn't have.
this on it because in that case we wouldn't know who is sharing it. But then if you, if you will probably have like a button that says like share this page and we'll have that on the app as well. And that's the one that'll add the refer URL, like the person who's sharing it to the URL. And I think that page is the one that would have this custom part for the user. Does that make sense?
Ste (20:38.022)
Yeah, it does. I mean, if we can show this on some pages, I think we could. Else it can just be... Let me copy that so that we can see how it looks like without the information. So this would be centered horizontally and yeah, nice and clean. For this, because we don't have for some books...
so many reviews. I was thinking maybe if a book has under, let's say, 50 or 20 or something like that reviews or ratings, we could actually show either the beginning of the description or the really short 90 characters scoop that we're using the summary. How does that sound? So it would actually be
Adam (21:36.108)
Yeah.
Ste (21:36.706)
depend on the information. Would that complicate it technically? Okay.
Adam (21:41.13)
I think that makes sense. I think that would work. We would have to like, uh, set the exact number that we want for that. Like, uh, maybe if there's fewer than 50 reviews or something, or 50 ratings, then we showed the description.
Ste (22:00.139)
Okay, that sounds good.
Adam (22:00.83)
All right, yeah. All right, yeah. And when a...
Ste (22:05.579)
Yeah, either way it works. Yeah.
Adam (22:09.446)
One thing I was just thinking that would be probably useful to add on this card is like the next most... I realize this doesn't have a URL underline, but is the series information, if it's part of a series. I feel like that's one of those things that would potentially have someone click through, and potentially the year it came out as well.
Ste (22:27.604)
Mmm, yeah.
Adam (22:35.874)
Those seem to be like the top things people really look for.
Ste (22:36.432)
Yeah.
Ste (22:41.018)
That's very good. So what I'm gonna do here is put this.
Ste (22:50.99)
as a tag. I'm going to put it here because sometimes this, whoop, not like that, this title might go overboard. So let's actually put it here where we have more space. So if this isn't a referral kind of thing, we could also put this here or maybe even here or like underneath it.
I'm just going to place it here for now. And then I'm sure that's not the right year, but let's just say 2005.
Ste (23:34.13)
and we can put it after the book. How does this look?
Adam (23:40.974)
I think that looks good.
Ste (23:42.594)
maybe this here and let's change the background.
Adam (23:45.15)
Yeah, I think I do like it more on the left side than by the cover.
Ste (23:50.81)
Yeah.
So this is a 300. So what am I doing here? Not this. So this goes like this, this goes like this and 500 goes like this. I'm just trying to make a light modes that's pretty decent out of this. Okay.
Adam (24:20.046)
There are so few things where I'm working in light mode first on hardcover nowadays that I always worry when I switch from dark mode back to light mode. I'm like, it feels like turning on the lights in an old apartment. What am I gonna find today?
Ste (24:38.219)
Yeah, that's a good comparison. Hopefully, I checked light mode. I'm checking it every now and then, and it's still good. But for the new stuff we're building, yeah, definitely, it needs a bit of tweaking. It's not that hard because we're using Tailwind, so this is just replacing a couple of colors like I did there. So...
Adam (24:41.41)
Please.
Adam (25:02.998)
Yeah, and we're kind of moving things into components and then those components will have light and dark mode. So we'll have to worry about it less as we upgrade stuff.
Ste (25:03.503)
You kinda get-
Ste (25:13.474)
Yeah. Oh, that's another upgrade that will make this possible, right? So we'll have it at the component level.
Adam (25:21.845)
Yeah.
Ste (25:23.287)
Okay.
Adam (25:24.75)
So I'm thinking for this, like this one, I think this one looks great. Like I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like. I'm trying to think of anything else I would really want other than like.
number of reviews or something, but I feel like this is, this covers like the most important things for sure to me.
Ste (25:49.334)
Yeah. Yeah, if it has more reviews, it makes sense to have the graph. If not, like this description would make sense. I was also thinking of adding the description in here because that's kind of cool, but it kind of jams things up. So I just removed it. If we're gonna put the series on there, I think it looks good like this. So you just see the ratings.
Adam (25:51.63)
for us.
Adam (26:14.71)
Yeah.
Adam (26:18.99)
Yeah, and I guess if we wanted to we could see... I was trying to think like... we could we could always like show these too in the Discord channel and see which ones people really like to do a like a vote between do you want to see the graph or do you want to see the description?
Ste (26:41.162)
Mm-hmm. Yeah, that's a very good suggestion. That makes sense. We can just have these two and A-B test them with the hardcover community.
Adam (26:55.018)
I also like these tags on this one down here too.
Ste (27:00.87)
Could be nice. Let me just move in there.
Okay, they're not bad. We have, well, if this title will go on two rows, if Brandon Sanderson named it Defiant.
Ste (27:19.014)
really defiant, it would be something like that. So this is...
Adam (27:21.654)
Yeah, you're in center.
Adam (27:26.034)
Here's the book title that I'm currently reading by Brendan Sanderson. It is, oh, I can't, I don't have that font installed.
Ste (27:34.07)
Oh crap, I have to just paste it here and I can copy it. I'm going to send you the font. Wow, okay. Oh, that's a really good book. Ooh, okay. So maybe we'll have to have some type variations here as well.
Adam (27:42.432)
Okay.
Adam (28:02.206)
Yeah, we can make it smaller if it's longer than a certain part.
Ste (28:06.918)
Yeah, maybe this. I mean, the OGM is just pretty small, so I didn't want to jam a lot of things in there, but this doesn't look too bad. So.
Ste (28:21.582)
We can always do this as well.
But...
Adam (28:26.732)
I know.
Ste (28:28.778)
I think I prefer to have like a...
Adam (28:29.898)
Yeah.
Ste (28:33.09)
Yeah, let's just have like a 40 or 60.
Adam (28:34.995)
Yeah.
Adam (28:42.746)
If it's longer than like three lines, I feel like that's giving it enough space.
Ste (28:43.371)
option.
Ste (28:48.542)
Yeah, definitely. OK, this is looking great.
Adam (28:55.842)
Yeah.
Ste (28:56.962)
I mean, we normalize the fonts a little bit so that they're not too different.
There we go.
Adam (29:11.534)
I'm curious on your thoughts about either for this one or for the other ones.
Adam (29:21.046)
wait until you're moved in that. Oh yeah, yeah, I think that makes sense up there.
Ste (29:23.008)
Yeah.
Ste (29:26.914)
A bit there. Yeah.
Adam (29:33.587)
is for the reading.
Like if it were, you know, well, or both, like, like if it showed 4.3 stars and it had the like 4.3, same for like the individual user when they rate it.
Ste (29:41.098)
Oh, just the stars.
Ste (29:51.287)
Yeah.
Ste (29:55.894)
Yeah, that sounds good. Let's see, it has five stars. 5.0. It's a really good book. So.
Yeah, that looks good. I mean...
Ste (30:11.818)
Lots of info, but it's not, yeah, no, it's good. I like it, it's still clean. It's still really like clear design. And I always try to zoom out because these images are gonna be really small. They're, they usually have this ratio, 1,200 by 630, or at least that's however, so recommend you.
You do them, but yeah, this is looking good. So yeah, about here, works.
Adam (30:51.437)
Yeah, I think it's looking great.
Ste (30:54.573)
Yeah.
Adam (30:58.374)
And so this would be if someone shares the book page. And then the next one would be like, one of the things I'd love to figure out how we get people to do it is to share their review. Like they've finished a book, they've read it, they've rated it. Maybe they've reviewed it. The review is kind of optional, but most likely they've at least rated it.
Ste (31:21.702)
Uh-huh. This would be the rating, but I was thinking where to put the rating up top or to put it further down the bottom and to sort of have the title like this and.
Ste (31:42.63)
to show the first part of your review. So whoever sees this is interested in the first bits that you have to say. I actually got this from a hardcover review. What do you think about this? Should we?
Adam (32:07.534)
I think one of the hard parts is getting context. Like if you just saw this without someone tweeting and giving a description, like saying, I read this book and here's a link to it, I might not know that this was a review.
Ste (32:25.762)
Okay, we can do it. Yeah. Go ahead. Yeah.
Adam (32:27.37)
So one of the things that we have in the feed is when you review something, it says, yeah, exactly. It's like name reviewed, and then it's their review. And then, yeah, exactly. So that way, by the time they get to the review itself, there's context for it.
And then if they just rated it but didn't review it, then that would just say rated, and then we could use the description or something instead of their review.
Ste (32:56.961)
Yeah.
Ste (33:09.633)
Yeah, that's good.
Ste (33:16.942)
this is looking good maybe I can like report to this so it's like same font if it's a review and so by Brenda Sanderson so have the author yeah this looks good
Ste (33:35.194)
Maybe I can fix this.
Ste (33:39.347)
this.
Ste (33:42.934)
capital R. Is this better? And you can have the author underneath.
Adam (33:46.634)
I think so, yeah.
Ste (33:52.602)
So this is just like a post, but you get to view it before you actually go onto the website.
Adam (34:08.578)
I'm trying to think like for...
Adam (34:13.066)
It feels like the title needs to be. There's something with like the, what is it, like the categorization, the hierarchy of it. It seems off. But yeah, I think yeah, I think you're fixing exactly what was like on my mind, but I couldn't put a name on. It's like the, the focus of it is the review. But but it's also the book title.
Ste (34:25.452)
Uh huh.
Ste (34:39.222)
Yeah, maybe we can rub this a bit so it's slightly, and for books with longer titles, actually, let's see, I'll re-review this. And...
Ste (34:58.966)
you know, we have this type of over here. It should be like even, even smaller than this 35. Okay. That's two rows that should cover us. And here maybe we can like have three rows or put this here maybe.
Adam (35:11.991)
Yeah, maybe.
Adam (35:20.167)
Yeah, I was thinking that too.
Ste (35:20.924)
and remove the...
Adam (35:27.722)
And maybe this we could even do like there at.
Ste (35:34.43)
Oh yeah, yeah, that's great.
Adam (35:35.915)
Yes.
Ste (35:42.35)
Yeah, this is looking good. Let's show a bit more. OK. Even more like context.
Adam (35:49.834)
And I wonder if maybe we could take out the Brennan Sanderson, like the author avatar. But because we're already showing one avatar.
Ste (35:56.576)
Yeah.
Ste (36:00.266)
Yeah, that's true. That bugged me a little bit as well.
Ste (36:05.638)
Uh-huh, let's remove it here as well. So you have one avatar that author avatar goes.
Ste (36:18.134)
Not bad.
Adam (36:20.394)
Yeah, it's looking good.
Ste (36:28.155)
and we can add the stars.
Adam (36:28.302)
Let's see.
Oh yeah.
Ste (36:34.418)
So not 6 stars but 4.5. Well, it's going to be 4.5 once we code it in. Maybe let's make these a little bit.
Ste (36:51.482)
What's happening there? Okay, what I want.
Ste (36:58.56)
and let's delete this. Okay.
Adam (37:04.386)
Yeah.
Adam (37:08.85)
even make this uh like rated text like a little smaller what do you think
Ste (37:17.547)
It's already, it's got a render like a lot smaller than, yeah.
Adam (37:23.674)
true. It is pretty zoomed out.
Ste (37:27.586)
Yeah, maybe we can like play with the way we can make it like liar. So that's the actual rating stands out.
Adam (37:39.567)
Mm-hmm.
Adam (37:44.33)
Yeah, I think it's looking good.
Ste (37:51.766)
Yeah, this is great. Maybe we can talk about the... So there are some other key pages over here. We have the... A normal page. So if you would share a blog post or if you would share a page, I was thinking we'd have a default image that would be shared with that page.
And I was thinking it could have an avatar. So it has the referral link, but that's not really like necessary. So it could be like either this. I really like this because it shows where a network and I think readers sharing something that shows their avatar in a place where you don't actually get your avatar. It's usually like a
set image, it's going to be pretty surprising and pretty neat. Whenever I'm sharing pages from sites that worked on their Open Graph image and I can see my avatar, for instance, for calc.com, when I share my scheduling and I get my avatar there, it feels like really special that it feels like it did something.
So I kind of like it. If we couple that with the referral link and we actually implement that. So whenever someone picks on your link and goes to the page, you actually, if they sign up, get the bonus, that'll be pretty good.
Adam (39:40.969)
Yeah.
One of the tricky parts, I think, will be teaching people to click on a button to generate that URL rather than just copying it from their URL bar if they're on desktop. Because if they just copy it from their URL bar on desktop, then it's not going to have that refer ID in the URL.
Ste (40:07.018)
Alright, yeah, that's yeah, that's true. That's true Yeah How can we I mean? Yeah, that's a good point
Adam (40:23.178)
And on a mobile one, like for the app itself, there is no URL bar. So for all of those, we'll need to have like a share button that you click and it copies it to the clipboard. And for all of those, we can for sure add that referrer ID really easily to it. But
Ste (40:35.507)
Mm-hmm.
Ste (40:42.31)
Okay, yeah, that can be it because we are gonna have that button on the, where is it? Over here, on the book page. So we're probably gonna have to put a button like this on every page that has a link so that you can share it externally. And I'm guessing that would be pretty useful to have. That's.
This is a pretty useful place to have the referral ID.
Adam (41:15.07)
Yeah, yeah, exactly.
Ste (41:17.054)
Okay. Yeah, that's a good shout. We should put the ID there. And in case they shared like that, I'm guessing showing this would be pretty straightforward or not like that straightforward, but possible.
Adam (41:37.466)
Yeah, with the new app pages for Next.js, it'll be easy enough. And it could be like, yeah, like doing the difference between doing it with and without, not going to be a lot of work. The hard part is just going to be implementing that button on every page that links them to it.
Ste (41:42.994)
Okay, that's good. I can just like do live. Yeah.
Ste (42:07.274)
Yeah, that's going to be quite the challenge, but for the app, we kind of have to do it. I was thinking...
Adam (42:07.734)
But yeah.
Adam (42:13.666)
Yeah.
Ste (42:18.566)
excerpt of the post. We can do something simple for normal pages where you can have just the page title and the excerpt of the post, and then a nice image and our logo.
Adam (42:35.186)
And if this is like a blog post, we might have a featured image that we're able to get from WordPress that we uploaded in there for the post.
Ste (42:44.578)
Yeah, definitely. This is like the fallback. An image like this. This is not the final one, by the way. If people are seeing this, this is one of the directions that we're exploring now for illustrations. But we can talk about that more another time. Right now, so this is like a normal page. Like any page you would share would have this layout. If it's a book page, it would have this layout.
What if it's a list page? I was thinking this could be like a good one for the list page where you'd actually see the title of the list and you'd see the first six books on that list. And maybe have a created by.
Ste (43:45.804)
over here as well.
Adam (43:45.854)
Yeah, and there's.
there's optionally a description that people can add for a list too. So we could have the description if they provided one.
Ste (43:53.367)
Oh yeah.
Adam (44:02.73)
And we could, you could have like, there's other like metadata about the list. We could potentially have like a number of books on the list. Would probably be the big one.
Ste (44:11.82)
Okay, that's good.
Yeah.
Adam (44:19.978)
Yeah, that looks cool already.
Ste (44:20.166)
So, yeah, let's make this more.
Ste (44:30.718)
okay well hopefully no not really i'd wish well sometimes
Adam (44:30.838)
Are you going on a trip to the Maldives sometime soon?
Adam (44:42.346)
Yeah, when it's like the fourth month into snow season and we've been stuck inside for a while, then that's when I'm like, okay, I'm ready to go sit by a beach.
Ste (44:52.311)
Yeah, I think that was like my cue for writing this, but not anytime soon. Well, who knows.
Adam (45:03.794)
Yeah, let me look at our book page to see if there's any other data that seems like it would be good to add.
Ste (45:10.548)
Mm-hmm.
Ste (45:13.838)
We can have the followers there as well. So if, or the bookmarks, that's what we have.
Adam (45:21.938)
That's true. And we probably only show that if there's more than one, more than zero.
Ste (45:28.342)
Yeah, definitely. Yeah, let's just put the more realistic number here.
Adam (45:36.226)
Yeah.
Adam (45:41.335)
for the cover, or for this page, I had a thought for it. Let me see if I can illustrate this correctly here. It was like, what if for these, actually, I'm gonna make a copy of this so I don't completely mess it up.
Ste (45:51.019)
Mm-hmm.
Adam (45:59.918)
to this.
These were like taking up the entire thing.
Ste (46:13.562)
Okay, so it's just like a pattern of these books.
Adam (46:18.528)
Yeah.
Adam (46:27.714)
just kind of seeing how.
Ste (46:27.986)
I think you'd, yeah, this is perfect. Let me drag it. Thank you. Drag that one out of the frame, which I also do every freaking time. So, let's see. This has, let's just delete one book and say, okay. Kind of like this and it has this and then it has, let me duplicate this one.
Adam (46:36.871)
Oh yeah.
Ste (46:57.71)
Here we go. OK, yeah, this is good. I like that it shows more books. My only thing with it is that I like that this is more similar to how you'd see books in real life. So they kind of look like they're put on a shelf. So in real life, you wouldn't work with you. You could see them put like this in the library, right?
Adam (47:16.686)
Thanks for watching!
Ste (47:27.254)
So that's why there's a little bit of spacing in between. So that they kind of look like in a library, but I think this looks good as well.
Adam (47:41.302)
Yeah, I'm not attached to this one. I'm more... I was also thinking, like, if it was, if it went over, like, the entire thing, but, like, faded. But I think that's too messy for, like, trying to do text over it. Even with a fade or a gradient, I think it would be a lot.
Ste (47:46.69)
Yeah, no, it's a good. Yeah.
Ste (48:05.058)
Yeah, it might be. I like that we landed on this split design because we can show visual stuff on the right and we can show info stuff without it being really bothered by any type of other visual stuff going on on the left. So I'm guessing this is better for accessibility and in general to have that split of information.
Plus we won't have to do like 1 million layouts. It would just like be this layout and we'll have the info on the left and the info on the right. So yeah, this looks good actually. I think we can keep it like that. It kind of reminds me of the way letterbox shows movies. So.
Yeah, I think it's cool. And we can also use it for the library. So I was thinking how to reuse these layouts so that we, they're also predictable for people. And we also have an easier time to implement them. So I was thinking, OK, here is.
This is the reader's first name and then library and puts the number of books and maybe the bio goes here. So
Ste (49:43.642)
bio goes over here.
I'm gonna have this. Why do you think about like curated by, this is good for lists, but for libraries, I can follow glory.
Ste (50:09.282)
Okay, not bad. I actually answered my own question there. So yeah, what do you think about these?
Adam (50:19.304)
Yeah, let me see, what else would be useful to show there? Like maybe a number of followers or...
Adam (50:31.218)
number of people they follow. I was trying to find a Twitter card to see what their card looks like.
Ste (50:38.534)
Do they have a card? I don't even think they have a card. I mean, they have a card for users. So they display some info there. I think it's similar to, I was looking at that one. I made this.
Adam (50:47.155)
Yeah.
Ste (50:59.882)
So the new user display thing, yeah, where it shows the first name, the username, the simplified supporter badge, we'll talk about this, the similarity, the bio and how many books they've read and the number of followers and their favorite books up top. So, yeah.
Adam (51:06.815)
Mm-hmm.
Ste (51:29.288)
I think apart from that...
Ste (51:45.638)
So this can be like the aggregate score of books and this can be the red ones.
Adam (51:55.447)
Hmm.
Ste (51:56.302)
So we can, I'm guessing, you know, one to read isn't like really relevant.
Adam (52:04.31)
Yeah, I kind of think that this first one is probably the number of books they've read. And then
Ste (52:09.31)
Okay, so maybe red and 2000. Is it worth showing the total number of books or just the red ones? Yeah, just leave the red ones there. Yeah.
Adam (52:22.718)
I don't know if we need to. Yeah, I think just the red ones.
Adam (52:30.262)
We can probably say like, you think like books read.
Ste (52:34.199)
Yeah.
Ste (52:40.122)
Then number of reviews.
Adam (52:40.918)
Yeah, in the...
Adam (52:45.558)
bio might be a little longer. It might be like that.
Ste (52:49.49)
Yeah, okay. You can just like leave that there. You can change it to water if you want. There we go.
Ste (53:02.666)
Okay, so now maybe if we keep it to like three lines and just show that. Okay.
It's too bad.
Adam (53:20.894)
Tennessee, which one of these is lionite? Bob Allen.
Ste (53:25.422)
Yeah, here we go. Yeah.
Adam (53:29.739)
Yeah.
Adam (53:35.182)
This would be.
Ste (53:38.58)
at yet.
Ste (53:43.314)
Okay, not bad. It's really good that we'll be using like the previous layout.
Adam (53:51.126)
Yeah, I think that the only thing I was wondering if we want to show like a larger version of their avatar on this or
Ste (53:59.266)
We could, yeah, so this is like the larger one. We could have it there.
I put it here as well if it's...
Adam (54:21.834)
Yeah, because these are the ones where it's not the refer. Maybe if it's the refer, we show the smaller one. But if it's a page that is relevant to a specific user, then we show it in this size.
Ste (54:37.787)
Should we keep the CTA follow Warren Harkover or without it? I mean, you kind of like get that you can follow this user, right? Because we talk about followers and following. Okay. Yeah. So maybe we can keep that and yeah.
Adam (54:47.827)
Yeah.
Adam (54:55.326)
Yeah, I think that's good.
Ste (55:00.202)
Nice. Yeah, for the lists, maybe we can keep curated by, or should we remove it over here as well?
Adam (55:00.983)
Yeah.
Adam (55:10.486)
Yeah, curated by or created by.
Ste (55:13.748)
Okay.
Adam (55:16.29)
Sounds good to me.
Ste (55:17.63)
I like curated because it implies someone is still doing it while created is something in the past. Does that make sense?
Adam (55:27.227)
Yeah, yeah, I like curated.
Ste (55:28.542)
Okay, okay, we can keep it for now. If we don't like it later we can change it.
Yeah, this is looking good. This is looking great.
Adam (55:41.09)
Yeah.
And I think this will be the week I probably try creating one of these for like a blog post and seeing how that actually works in practice. But I'm excited to see.
Ste (55:51.336)
Haha.
Ste (55:57.386)
Yeah, are there any other pages? I mean, the only page I was thinking about, we can use one of these layouts is the author page because that's pretty good, but I'm not quite happy with how this turned out. So maybe you want to do that as well, or should we leave that to another time?
Adam (55:58.382)
Thank you.
Adam (56:20.162)
We could do a first pass at the author page, or the author OGMage, yeah.
Ste (56:23.102)
Okay, yeah, so let's see. We'll have this. So we'll have the name of the author. And okay, Jameson. Actually, maybe I could take the book page as well. Maybe that's a little bit more relevant to this layout. So this one.
Ste (56:52.358)
and just leave that there as well. And okay, Jameson, no author name, of course. Do the tags work for the author? I mean, the top two tags for the author, or is that not?
Ste (57:12.172)
I don't know.
Adam (57:13.183)
could get we could show tags but I don't know if that's well I don't know I think that could be useful actually because it kind of shows like where they where that author lives from a genre standpoint
Ste (57:23.174)
Yeah, that's true. Is there any chance of the tags being a little bit unclear or the tags not being good enough? So we have an author and the tags are messed up.
Adam (57:44.978)
We could do something where, so like to show these icons, for instance, that's gonna mean that behind the scenes, someone on the admin team sets an icon name for each icon. So we could say, only get the top two genres that have an icon. So that guarantees that those are genres that we've previously approved.
Ste (58:07.59)
Okay, well that sounds good. I mean, if we can do that, I think that's pretty good. So maybe here we're going to have the author picture and we can actually, if we're doing the book pattern thing, we can do it over here as well, right? So we can do this. Okay. And let's do this.
and let's do this again. Oh yeah, this is looking good. And the bio of course, I'll just leave this over there.
Ste (58:57.987)
What else?
Adam (59:03.298)
I was thinking about for, yeah, yeah, actually, I was gonna say the avatar on the left side instead of the right side, but I think just making it bigger kind of solves what I was thinking about.
Ste (59:03.494)
This is a bigger, yeah.
Ste (59:17.39)
Yeah. Let's do it like that. Okay.
Adam (59:24.622)
So me.
Ste (59:25.37)
and this is the year of their birth so what year were they born in? 1972 here we go
Adam (59:33.407)
1972.
Adam (59:39.71)
Or it could probably just be like a 1972 dash for like, they're alive.
Ste (59:45.246)
Oh yeah, oh yeah, perfect, yeah, yeah, that's great.
Ste (59:52.63)
Okay.
Adam (59:54.718)
And I'm thinking like, one of the things that's kind of useful when I look at an author is like, what are they known for? Like if there's like a book or couple books or a series, and it's like known for and then it could be like a one line or like a comma separated list of like two or three things.
Ste (01:00:06.312)
Mmm, yeah.
Ste (01:00:14.505)
Yeah.
Ste (01:00:21.35)
Mm-hmm. Should it be just yeah books and series I reckon
Adam (01:00:28.502)
Yeah, like, it would probably be like the... Yeah, it could be the most popular, the most popular three books that they've... That the three books that have the most readers from hardcover, or maybe like the two books.
Ste (01:00:43.63)
Hmm. Yeah, I think that's two books.
Ste (01:00:50.007)
Okay.
Ste (01:00:54.227)
So let's put this a little bit tighter over here and...
Ste (01:01:04.586)
Okay, this is looking good. Maybe we can like put it in like regular font. Okay, yeah. And put this in a slightly grayish version. Put this.
Adam (01:01:21.57)
I'm not making this like a semi-bold.
Ste (01:01:25.698)
Oh yeah, we can even put it, okay, I'm gonna do some.
Ste (01:01:39.099)
dogs but I can just put it like this maybe
Adam (01:01:46.086)
Oh, yeah. True.
Ste (01:01:50.726)
and we save a little bit of space and yeah it's looking great now.
Adam (01:01:58.786)
Yeah.
Ste (01:02:01.574)
Okay, let me just put this.
Adam (01:02:03.455)
and
Adam (01:02:06.794)
And if they don't have, if, for instance, they've only written one book, what do you think we would do on the right side? Like for, like, would we just top towel that book over and over?
Ste (01:02:18.008)
Um, I'm guessing.
Ste (01:02:22.418)
Well... Why not? I mean...
It wouldn't be too bad. If it's one book you want on like, if it was like their place in the library, if it was like the best selling book of the week, you would have the same book over and over again on a library shelf. So maybe, why not?
Adam (01:02:48.586)
Yeah, I think that works. I mean, that's what we do on our list pages right now. Like we just show the top 20 books over and over again. But if there's only one book in the list, we just show that one.
Ste (01:02:58.861)
Yeah.
Ste (01:03:02.486)
Yeah, over here, if they have more than three books, or if they have three books, it's going to be good because these have an overlay, so you can't see much. And the ones you're most able to see are the first three, then they're just cut off and they repeat. So that should be pretty good. And most authors have more than three books. So we should be okay. I mean, not most authors, but the prolific...
authors like the top red ones usually do or do they? Yeah, maybe, maybe they do.
Adam (01:03:38.687)
Yeah. Yeah.
And anyone who's written a series is going to automatically have a couple books.
Ste (01:03:47.59)
Oh yeah, exactly, yeah. I wouldn't worry about series writers.
Adam (01:03:53.898)
Yeah, cool. Yeah, this is looking great.
Ste (01:03:55.846)
Okay, let me just do this.
Ste (01:04:00.446)
Yeah. Okay. Yeah. I think we got all of them. Boom. Okay. Perfect. I don't think there's anything we missed. I don't know. Is there anything you were thinking of or?
Adam (01:04:16.494)
probably the prompts page, but it'll be pretty much the same as the list page, except it'll probably have some, some like additional emphasis on what the top results are of that prompt.
Like for instance, if it's my best fantasy books, then like showing the covers is neat, but showing like some kind of emphasis that like this is the number one.
Ste (01:04:34.703)
Mm-hmm.
Ste (01:04:40.419)
Yeah.
Ste (01:04:49.382)
kids.
Ste (01:04:54.746)
So it won't have this and it would have maybe, oh wait, I can do this, I'll run that.
Ste (01:05:08.262)
You can just have the book title. So book title by author. And this can be...
Ste (01:05:24.994)
sign. Here we go. Number one, book title by author. And it can show maybe the top two books.
Ste (01:05:37.634)
Well, maybe we can ditch this for this one. Or we can actually do.
Ste (01:05:48.87)
Like show them here, maybe.
Adam (01:05:50.666)
Yeah, I think that makes sense. Because then we could show more information about the prompt on the left side. Like, for instance, we have, let's see.
Ste (01:06:07.886)
So we have the top three over here and.
We can just center them.
Ste (01:06:29.83)
Let me see if I can do this. Maybe, no, okay, it doesn't work. Because if they have longer book titles, they're just gonna go all the way here. And let's put this title here just for fun. So, here we go.
Adam (01:07:00.098)
Book title is just messing everything up today.
Ste (01:07:02.542)
Yeah, I think we just like this. So, yeah.
We can think about the layout if you get other ideas, but yeah, I think this is pretty, pretty good, or we can just like show the covers. We can just like do this. So we can just show number one and that'll give people like, uh, an incentive to actually like go to the prompt page and.
Check everything out. So you'd have the top three covers.
Ste (01:07:46.295)
and it happened a bit bigger than this.
Ste (01:07:53.556)
Uh, well, okay.
Adam (01:07:54.118)
Yeah, yeah, I think I think I like them horizontal more than vertical.
Ste (01:07:58.662)
Yeah, they're better. And this is just a glimpse. So it's supposed to like make you visit the actual page. So I think this is a better solve for that. Maybe like a line.
Okay, and you can have the top three.
Adam (01:08:24.75)
Like right now we have this thing. Let me go to where you are real quick. Like a.
Ste (01:08:35.935)
Okay, yeah, let's get those ribbons
Ste (01:08:42.074)
Wait, okay, now that's better. Let me make them a bit bigger. So they're on the OJ images. No crap, not like that. Okay. So this is number one. This is number two. And this is number three. Yeah, good thinking.
Adam (01:08:56.598)
Yeah, I like the gold silver bronze imagery. It looks really cool.
Ste (01:09:03.806)
Yeah, nice. Okay, yeah, these are looking pretty neat. Let me make them a little bit bigger as well. Why not?
Adam (01:09:13.326)
And this even got me thinking, like, on the book page, if we wanted to show, like, prompts where that book is bronze, silver, or gold, like, you know, number one in best fantasy books for kids, number two in books I read in my childhood.
Ste (01:09:36.354)
Oh yeah, yeah, yeah, yeah, that's a really good one. Let me, do we have a prompts tab? Yeah, we do. So it could be maybe here or either on the like actual book info page. I'm just gonna add it as a comment. So this would be number example, number one on...
Adam (01:09:44.95)
We have a prompts tab yet.
Ste (01:10:06.982)
prompt title number two on another prompt title. Here we go. You're thinking to have it over here, right? So, here's the first one. So, here's the second one. So, here's the third one. So, here's the fourth one. So, here's the fifth one. So, here's the sixth one. So, here's the seventh one.
Adam (01:10:22.718)
Yeah, I was wondering what it would be like if it was on this first page, even if it wasn't showing like all of the books in that prompt, but if there was like an abbreviated way.
Ste (01:10:33.87)
Mm-hmm.
Ste (01:10:37.83)
prompts that feature the book or that feature, or featured prompts, prompts that feature book title. Let's just, we can like just rewrite the book title so people remember where it's at. So it could be like this.
Ste (01:11:07.158)
Yeah, we can actually show the actual prompt. We'll put what happened here. Okay. Maybe we can do that design and yeah, I just add it there as a prompt. I'll have to...
if you like this. And where's the prompts page?
Ste (01:11:34.67)
Maybe you can show like this component.
Ste (01:11:40.314)
Why not? Sorry about that.
Adam (01:11:43.494)
Yeah, like we could show, we could show like the best like one or two or three prompts for that book. And then they would go to the prompts page to see all the other ones.
Ste (01:11:59.702)
Yeah, and they can access it from here. Yeah, not too bad. Let me do this.
Ste (01:12:12.634)
this would be prompts page and it wouldn't show all of these maybe like the top six for desktop and
Ste (01:12:28.902)
I'll try that but I'm okay.
Ste (01:12:37.334)
Yeah, that's a good shot. It's gonna look good.
Ste (01:12:42.27)
Okay, wow, a lot of work, yeah.
Adam (01:12:46.58)
I feel like we covered a lot today.
Ste (01:12:49.526)
Yeah, well, that's good. I'm glad that we have this sorted. It's gonna look great. It's a nice little detail. And if we can add on some pages that refer links also tie that into the whole thing. It's gonna be like really, really good. Yeah.
Adam (01:13:08.034)
Yeah.
Cool. Well, maybe by next week we will have the first one of these out, which will be cool.
Ste (01:13:20.126)
Yeah, well, hopefully, yeah, that's really good. I can't wait to actually try them out and share them on Discord. So yeah, really good progress. Great, well, should we wrap it up for this week?
Adam (01:13:34.098)
Yep, I think so. Well, have a good week and there will be no Hardcover Live next week because I'll be traveling to Boulder for birthday weekend.
Ste (01:13:37.614)
That's perfect.
Ste (01:13:47.25)
Okay, okay, that's a nice little chip that's perfect well then see you two weeks from now and Yeah Have a good one until then Perfect. Bye everyone. See ya
Adam (01:13:57.746)
Sounds good. See you later. Bye.