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.335)
Hey, hey, stay, how's it going?
Ste (00:03.874)
Hi Adam, pretty well. I was telling Adam that now I live a lot higher than I lived in London. I'm on the sixth floor in Paris. In London, I was on the first floor and it was way noisier. Over here, it's, mean, I think you can hear less background noise or no background noise, hopefully.
Adam (00:22.571)
Yeah, I haven't heard any police sirens or ambulances or anything.
Ste (00:27.04)
Well, let me tell you, with a kid, that was kind of starting to bug me. mean, whether it was just me and my wife, it was OK. having a kid wake up in the middle of the night because there was like a really busy road right next to our apartment. Yeah, that wasn't that wasn't really fun. So I'm glad, you know, at least that's solved. It's really quiet here, except for the French people who are partying a lot. But that's like the good kind of noise.
Adam (00:48.291)
you
Adam (00:57.074)
Is that just at like the park across the street? You can hear the noise from that occasionally?
Ste (01:00.79)
Yeah, there's a park on the other side and over here is just like people partying on their balconies, which is very nice. I mean, I'm not complaining. It's nice to hear people like live their lives and yeah, open bottles of wine, I guess, or champagne. You do hear a cork popping, you know, occasionally. Yeah.
Adam (01:08.685)
you
Adam (01:24.029)
We're also on the sixth floor here in Salt Lake City, it's, I have a feeling like your six floors are six floors of apartments, right? So like even the first floor, people are living on the first floor.
Ste (01:36.526)
Yeah, it's actually like it's weird because there's two elevators one that takes you from the ground floor to the first floor and one that takes you for the first floor to the sixth floor and that kind of like made moving like hell but It's kind of nice because they're sparking underneath. It's a weird. I haven't seen this building the 70s I think this apartments and it's like on a hill. It's very hilly where where I live
Adam (01:51.021)
you
Ste (02:04.928)
So yeah, that's interesting.
Adam (02:09.877)
Yeah, and for our apartment, it's the first two floors, like the ground floor and the what would be the second floor are both parking. And then floors three, four, five and six are residential apartments. And that style is like super common all across the US. It's called like four over one or four over two. And the idea is like the first two floors are built out of concrete.
and they're really heavy. They're like the stabilization for the entire building. And then all the residential floors are built out of wood, which is a cheaper material. And they don't have to do foundation with the wood. I guess it ends up being just a lot cheaper to build. So you'll see them all across the US.
Ste (02:51.928)
Okay. Yeah. That's smart. Okay, so it's not just the Solvig thing. It's like, and they have like commercial spaces at the ground floor.
Adam (03:05.091)
A lot of them do on the bottom floors, but I feel like usually those are for like more of the sky rise, like the buildings that are, you know, 20 floors. Then, then you get that. I would love if they added more like commercial space on the ground floor. Like, and usually it's just like parking and leasing office.
Ste (03:26.862)
That's, I mean, it's nice that you have where to park your car. Yeah, yeah, over here is like all commercial spaces and I think that's the like reason there's a lot of like bakeries and coffee shops and all that kind of stuff. We have like we've checked out and there's like three really good bakeries around us. And London was good with bakeries, but doesn't compare to Paris. I mean.
We've been getting some of those good baguettes and yeah, they're pretty nice, I have to say.
Adam (04:03.139)
Is there a term like, you know, when you go to college, it's like the freshman 15, putting on weight during your first year there. Is there a term for that in Paris? Like the Paris 20.
Ste (04:12.41)
Well, not that I... Yeah, that would be good to find out, but not that I know so far, but I don't know. I haven't seen one in Emily in Paris and I'm getting the feeling that's where that term would have been mentioned. But let's see, new season coming up, so maybe this season will... Yeah.
Adam (04:37.392)
We were joking because we were watching the Olympics and there was a, the actress from Emily in Paris was in a peri -a commercial. Like, okay, she's, she's really leaning into this. But we liked the first season. It was fun.
Ste (04:44.631)
Really?
Ste (04:48.814)
Yeah, yeah, yeah, I like it as well. I mean, it's cheesy and you know, it's usually like but it's Paris and it really is like that show makes it to be so far. I mean, there's also like other areas that they don't show on the show, but you know, contributes to the charm. I mean, so far I've been having like a really, really good time.
Adam (05:14.85)
That's awesome.
Ste (05:15.018)
made the whole effort after moving a lot easier to just dive into the whole, like all the things the city has to offer.
Adam (05:26.733)
Very cool.
Ste (05:27.968)
Yeah, awesome. And we've been doing a lot on hardcover lately. We've even had like an incident yesterday where we got a spike in costs because someone decided to download all of our, like literally all of our covers.
Adam (05:45.407)
Yeah, I'm writing a blog post about it now, but kind of the TLDR is that someone used our API and probably just downloaded information on every edition. they had, here are millions and millions of editions, each one with potentially multiple cover images. And then I guess they probably set up a script to just download in bulk those images.
And when I say in bulk, I don't mean like a couple of second. It's more like 9 ,000, 10 ,000 a second. So they were, they were doing this on a big scale and hitting our API. ended up being about, I calculated it out around like 15 to 20 terabytes of data that was downloaded, which is more than is in the entire bucket. So there must've been some issues with the script and they probably had to rerun it a couple of times because they were probably downloading the same files multiple times.
Ste (06:22.126)
Jesus freaking Christ.
Ste (06:45.292)
Wow, do you have a theory on what was the purpose of that? are they trying to, I know someone in the Discord mentioned AI, and I'm guessing that could be it. It seems like someone maybe, I mean, I hope it was just for a hobby project and someone really wanted to get all our data. But yeah, I think now we have,
Adam (06:51.491)
you
Ste (07:14.223)
It was a good thing that it prompted us to, like, we have some protections in place, like, triggered by that, by this thing, right?
Adam (07:25.335)
Yeah, yesterday I spent like half, the second half of the day debugging it and ended up making all of our images and content in our cloud bucket private. then, so now the way it works is like, we have to hit Google's API and get a temporary URL for every image. And then we cache that temporary URL and we serve that to people.
both through the API and through the website. And we can choose how long to that, that, that, that link will work for. So we can like pass it in. like you might want, you might want that link to only be able to be used for five minutes or something, or you could say, I want it to be for a month. And so like, just put it as one day. like right now, if you were to get any URL on hardcover, it's only going to work for a day.
Ste (08:12.811)
Yeah.
Adam (08:23.543)
But as soon as you've refreshed the page, it's going to get a new URL and it's going to work again.
Ste (08:29.29)
Okay. Yeah. I'm guessing like whoever wants to use the API to try a few stuff out and to make a hobby project. That's cool. someone using it to download our data. That's all of our data, including the covers. And like, there are so many people, including us who worked like so much together that data.
Adam (08:43.075)
you
Ste (08:48.707)
I'm guessing now it's a good time for this to happen. And yeah, I'm hoping, you know, this doesn't end up being like a major competitor down the line.
Adam (08:55.789)
You
Yeah, my guess is it's just someone wanting to do something with the data, like just personal. That's my guess. I mean, it's one of those things that's hard to know. Like we don't have like tracking from Google on like where the IP addresses are coming from for like GDPR reasons. Like they don't store that information. So we just know what was downloaded from it, but not.
Ste (09:23.979)
Yeah.
Adam (09:28.139)
like the users. So my hope is to like make some improvements to our API over the next month that gives us much more insight into who's using it, how they're using it, be able to deactivate users, be able to restrict access, rate limit access. So all of that will be probably coming down the line in the next month.
Ste (09:49.578)
Yeah, that sounds good. And I'm guessing it's also a good step that has to do with open sourcing. If we open source some materials, we could copy hardcover, put another logo, and they would also be able to get our data if we don't have these stops in place. But yeah, luckily now we do.
Adam (10:13.463)
Yeah.
Ste (10:16.982)
That's good. That's good. And today we're going to talk about stats.
Adam (10:22.209)
Yeah, we did some yearly planning on what we're gonna be focusing on for the rest of the year in our hardcover team meeting last week. yeah, stats was kind of our next big project that we need to design and then verify with users and then build. So right now we're still in that first design phase of it. But yeah, I'm excited to jump in.
Ste (10:47.082)
Yeah, perfect. Let me bring up the Figma so we can start off where we left off two weeks ago. Just one second as I'm showing this. Here we go. Okay, can you see everything? Perfect.
Adam (11:08.088)
Yes.
Ste (11:10.718)
So, quick recap for everybody. Last two weeks ago, we were focusing on how you choose the timeframe for your stats. So, basically, when you view the stats, we wanted to make it really easy for you to select a month.
or a year or a custom date depending on what you want to see. And we want to hit that sweet spot of making it as customizable as possible. So if you want to see like the last 10 days of your reading, you can do that, but also make it easy for having those really good defaults. And so if you want to see your March reading compared to your April reading compared to your
June reading or whatever, we want to make it really easy for you to switch between those periods of time without having to pick like 1st of March to 31st of March. So you just pick 2024, March and off you go. So that's what we've been trying to do. And I think last time what...
we did was use this bar so that if you click on the date, it brings you, I shouldn't have moved this, I wanted to clean up the Figma so I moved these, but basically let's bring this like over here. So.
Ste (12:54.894)
you'd be able to select the year, you'd be able to select the month then, and you'd also have these presets for like the past 60 days, 90 days, the past month, or a custom date. And I think that was the last one we explored, Adam, right?
Adam (13:18.475)
Yeah, yeah, I think that's kind of where we left it off. We wanted to make it easy to select months, years, or people that are kind of power users can select a full date. Yeah, yeah, yeah, this frame right here is the one that I remember. Like when you click on this, like it would pop up this and like by default, it would be all time on your stats page, but you could quickly.
Ste (13:21.143)
Yeah.
Ste (13:29.868)
Yeah, and the full date.
Adam (13:47.027)
set it to another range.
Ste (13:49.706)
Mm -hmm. Yeah, that's great. Are we happy with that? So basically this brings up this and you'd be able to select between these options.
Adam (14:04.471)
Yeah.
That makes sense to me.
Ste (14:07.47)
I'm guessing, okay, so basically I think we can leave it like that for now. I'm guessing, so basically when you tap on this, it would bring this up and you'd have all time selected. But if you click on 2023, you could select one of the years you have a history for, or...
Adam (14:33.644)
Yeah.
Ste (14:33.902)
you could select the month. I'm wondering here, the month would be dependent on the year over here, right?
Adam (14:46.643)
Yeah, maybe.
Hmm. Yeah, I guess, I guess you'd have to select the year and then by default it would be all months. So like if you selected year, it would say by month and maybe like the default month would say all and then.
Ste (15:08.878)
yeah, by month. if you'd select 2020 feet would be all. And then if you'd select the custom range, this would basically turn into this. yeah. Okay. I think that's, that's good to satisfy. Let's make this bigger so you don't like miss click. This is a...
Adam (15:20.373)
Yeah, I deselect all the others. Yeah.
Ste (15:35.983)
pretty non -standard select box, but I'm guessing it would work, right?
Adam (15:41.355)
Yeah. And yeah, we can just use our same like a drop down slash drawer on mobile.
Ste (15:48.927)
yeah, perfect. Yeah.
Ste (15:53.748)
Okay. And this would take you to a menu where you'd see, wait, let me see if I had it like, yeah, here we go. It would be like the same menu maybe, and it would take you to the section with like the...
Adam (16:02.551)
Hmm.
Ste (16:13.558)
specific stats. So maybe it would take you to stats about authors, that's about pages read, that's about moods, genres, and stats about librarians. And I'm guessing you could have like multiple stats.
Adam (16:21.943)
Mm -hmm.
Ste (16:30.868)
in each section. for moods, you know, I pasted all the stats we had. So for moods, for instance, you could have books by mood and you could have have genre versus mood by rating show up in that section as well. So it would just scroll to that stat. So you don't have to scroll like all the way down on mobile. That might be a little bit daunting. So I was thinking, you we could have this map icon.
Adam (17:01.635)
Sounds good. Yeah, it's kind of like the 2023 year in books kind of like link to another part of the current page you're on.
Ste (17:11.238)
Exactly. Yeah. Yeah, that was the inspiration. So let's put these two over here. And this is like the like pill that lets you select all of these. And I was thinking, you know, this could stick to the bottom of the screen. So you'd have like the phone over here and it would.
be sticky on the bottom so it would move as you scroll so you have it easily accessible.
Adam (17:40.971)
see. So yeah, that would be on mobile. And then on desktop, would it kind of stay at the top? Yeah.
Ste (17:44.054)
Yeah.
Ste (17:48.194)
Wow, that's, yeah, we could put it at the top. I brought like the desktop where we didn't do anything over here, but let me bring in like this, like header section and see how we treat it on desktop. Because what did I paste over here? Sorry.
So let me just paste this. This one's good. So maybe, yeah, on desktop you'd have this, you'd have like a wider, here we go, we have enough covers in there. That's good. And yeah, it gets a better like layout for this one. It would be just like Adams, Life and Books.
Ste (18:39.48)
Yeah, all of these over here and it could stick to the top. Anna, what do you think?
Adam (18:49.173)
Yeah, I think.
Ste (18:52.153)
or
Adam (18:52.535)
Yeah, I'm not sure we even need to make it stick on desktop because I feel like scrolling to the top of the page wouldn't be that bad in this view.
Ste (19:00.344)
Yeah.
Ste (19:04.632)
Yeah, that should be fine. mean, we can just like, the thing is it's like pretty easy to make this as wide as we want because we could just do this with the data. So it selects the custom period and you would also be able to select, maybe we'd bring up the menu if...
you click on either this or like this. Would that make sense?
Adam (19:34.891)
Mm, yeah.
Yeah, I think that would work.
Ste (19:40.448)
Okay, so this would be it on desktop and then...
Adam (19:45.091)
Yeah. And this, this might be like default to something like that or, or, or life. mean, either one.
Ste (19:50.665)
yeah, all time. Yeah.
Yeah, all time sounds good. Where should we put it? mean, maybe...
Ste (20:05.23)
So maybe this goes all the way up top.
Adam (20:08.269)
Take a work.
Adam (20:14.081)
You know, we could, we can also use like a full, a full screen background if we want on this page, like we do on like lists. If we wanted to do something behind the cover or behind the, the nav.
Ste (20:27.561)
yeah, yeah, that would look pretty great. Let's see. Yeah, that does look pretty amazing. Yeah, let's do that.
Adam (20:37.557)
Or what if this is the first page that we use the new, like, one of the things we wanted to do was add a custom cover image that you could set on your profile that supporters can change. What if this is kind of like the first page we use that custom header image on.
Ste (20:58.474)
Yes, perfect. me set this one so you can hear it here. And let me fetch a cover image. Okay, I'm going to fetch this. By the way, we're talking about the urine books that last year generated the controversy because...
We used AI imagery generated by us based on the books. But this year, we're going to make an open call to see if there are any artists who would want to both help us and promote their art, which would mean that after we get some idea about the books that are going to be featured, or the sections at least, we're going to post it on Discord and we'll reach out to the community.
We needed to see if there's anyone up for either sharing their pre -existing art on a theme. Let's say you're an artist that does sci -fi and you want to feature one of your images, of course, credited in art in your books. We're going to try to involve artists, like real artists, as much as possible. So yeah, we'll like.
Adam (22:18.824)
Yeah, looking forward to seeing how that goes. And really just like reaching out to people. That'll be fun.
Ste (22:21.516)
Yeah.
Ste (22:25.558)
Yeah, I'm wondering how many artists we have in the community. Yeah, I mean, this looks good. We should have a button here to allow you to change the cover, right?
Adam (22:41.581)
Hmm.
Ste (22:42.848)
if you're a supporter.
Adam (22:44.791)
Yeah, because it's going to use the same one as your edit. So it's probably going to be in your edit profile.
Ste (22:49.526)
Yeah.
Ste (22:54.098)
Okay, but yeah, maybe we should like just signal it's over here as well. Yeah So primary, secondary, not tertiary. Okay, change cover. No icon. Okay. Yeah, this looks good. Let's place it next to the share button maybe.
Adam (22:58.679)
Yeah, if you're logged in.
Adam (23:07.959)
Yeah.
Adam (23:18.775)
Yeah.
Ste (23:20.426)
Okay, change cover. Okay, yeah, good idea. This is looking great. Look at that.
Adam (23:32.172)
One question I have is like, like we're, like as someone's browsing through someone's profile, this is kind of like a information architecture question. So we have, you know, this is kind of like our header. Let's see. I just.
tasted it to the right of, yeah. So right now, when you click on stats, it's gonna go to this page. So I'm wondering, do we want any kind of consistency between these tab pages? Because right now, if you were to click on stats and it was to shoot you to this, it might feel a little.
Ste (24:01.848)
Here we go. Yes.
Adam (24:25.419)
Jarring to not have this like top -level nav bar anymore
Ste (24:29.452)
Yeah, maybe we should keep that. I don't have it like anywhere in the Figma. So yeah, that's a good question. I'm wondering like, you know, I've been wanting to make some changes to the profile so it's like more aligned with the book page and...
the lists page right now. So the cover is full width, for example, and the navbar sits on top of it. I'm wondering like how else we could approach that. Do you have like any other ideas or should we just like leave it like it is now and just add that navbar up top?
Adam (25:12.163)
Where's the author section that you prototyped? was curious to... I know you've brainstormed some of this for that and we might be able to use something similar.
Ste (25:16.797)
here it is. Yeah.
Ste (25:26.328)
Yeah, so this is, it's in the profile section, so.
Adam (25:28.847)
yeah.
Right, right.
Ste (25:32.11)
Here we go. here we go. Hmm. Yeah. So for this one, basically you have all of this up top and the nav stays at the bottom. So instead of being here, it stays or let's, we can go to like this.
Adam (25:34.828)
you
Ste (25:54.798)
profile page. So right now it's here and the idea would be to move it like underneath. So over here you have the profile info and just this for now. And here you have some of the stuff that's, you know, relevant like lists, stats.
Adam (26:18.731)
Mm -hmm.
Ste (26:23.586)
What do you think about this?
Adam (26:25.897)
So, let's see, let's see. So if you were to click on books, yeah, would we keep this top part for all of these?
Ste (26:37.43)
Maybe we could make a minimized version of it.
Adam (26:41.047)
That's what I was thinking, because that was in the prototype we had for the books page, too, that we never implemented, where we had a full -size header and a minimized header version. I think something like that could work well for these.
Ste (26:46.474)
Yeah.
Ste (26:55.998)
Yeah, let's just paste this over to the stats and see if it works. We should also do the minimized book version whenever we have. Yeah.
Adam (27:08.537)
Yeah, this could be a good test of how we do it from a technology standpoint.
Ste (27:15.104)
Yeah, so for this, let's say you have your custom cover, you have your profile picture and it's no longer so it's MD and maybe this goes away and
Adam (27:16.682)
Thank
Ste (27:29.934)
just like your profile info and this becomes smaller. And this one, this you would get if it's someone else's profile. So maybe there's just like the follow button that you put over here. And maybe we get rid of these as well.
Adam (27:58.165)
Yeah, I think we could get rid of those too. And that, and probably that. Yeah. Yeah, this is, I mean, it's, it's minimal, but that's kind of, it's kind of what you need.
Ste (28:00.332)
Yeah, so you don't have to flex. Yeah.
Ste (28:10.304)
Yeah, yeah, exactly. You can see the cover. I like, you know, on Lairbox, I think like one of the reasons people sign up for the pro profile is to get those awesome covers. And I'm thinking, you know, it could be a good incentive for some of the readers on
hardcover as well. Let's see how this would look like.
Ste (28:47.182)
there.
Ste (28:51.288)
here so you'd have your custom cover and maybe you wouldn't have like we'll just have this
Adam (29:04.163)
Let's see, and this is 611 width. And then I think we're talking about, how wide should it be? Like our main site, it's what?
Ste (29:09.57)
Yeah, we could... Yeah.
Ste (29:16.202)
We could make it wider because I think that's a good...
Adam (29:24.771)
Yeah, 1280 is our widest width layout right now.
Ste (29:30.67)
1280. Okay. I think this is, this is only 900. Hmm. That's interesting.
Let's make it full width and see where we go. I don't know.
Let's try that and if it doesn't work, it doesn't work. That might be too wide, but...
Adam (29:52.539)
Yeah, I like the idea that this could be the first thing we switch the profile with for, since I know that's been on the plate for a while. Might as well do it now.
Ste (30:10.302)
Yeah, it's gonna be good to make some changes to the profile because that's some pretty old code we'd have in there. So let's put the border around this so it stands out a bit more. And we have the house parts.
Ste (30:42.552)
So this is Jenna's life in the books.
Adam (30:46.893)
Yeah, so the idea would be that this top section is the same for every page on your profile. Like when you go to books, when you go to stats, when you go to lists, this top part would be the same for all of those. And then, and when you go to individual pages, some of them would be the same. Like for instance, like when you go to activities and you look at a single activity, it might be the same. But if you go to
Ste (31:02.882)
Yeah.
Adam (31:15.681)
It feels like if you go to a list and you go to a single list, that's the one page that's gonna be really different, which I think is okay for that one page to be different, because a single list is kind of its own entity, and it's less about you and it's more about the list.
Ste (31:27.404)
Yeah, definitely. even for like, yeah, exactly. I was looking at other stuff that could be relevant. But yeah, it's like you'd go to the books page, you'd see Jenna's library, and then you'd go to a single book and it would be just the book page. So it would be like...
consistent with the actual design.
Adam (32:05.207)
Let's see, I think these are.
Ste (32:15.788)
I'm torn between trying to box everything and...
Ste (32:24.854)
I'm hope, I mean, I don't know if it's making it easier or harder. So the idea is that over here, you could just screenshot one of the sections and it would work as its own social posts. But I think like that would be more important on mobile.
than on desktop because this would be maybe like more on the informative side. If you would screenshot this like wide section, you know, so if you would just, yeah.
Adam (33:04.696)
I guess the generated image would be the same, whether you're generating it from mobile or a desktop. it wouldn't exactly be a representation of what you're seeing. It would be kind of like an image representation of this data in a shareable size.
Ste (33:11.936)
Yeah, that's true.
Ste (33:21.792)
Okay, that's great because we can figure out a social sharing ratio like one -on -one and we can just make like a square image of this whole section.
Adam (33:37.249)
Yeah, yeah. think I admit I don't know what the best image share size is, but it seems like one -to -one would be pretty flexible.
Ste (33:49.454)
Yeah, one -to -one is like standard Instagram size, but you know, for mobile, you can go, guess, 920 by 1080, or the other way around, 1080 by 920. But I think like 180 by 180 pixels, that's like a good middle ground.
Adam (34:19.773)
Or under share we have like an option that's like square and then another one that's like long for like a phone size.
Ste (34:30.892)
Yeah, I love that. Could we do that? Yeah, I think we could. mean, yeah, it shouldn't be like you just make it responsive. We're going to generate them in code anyway. So that shouldn't be like too difficult.
Adam (34:42.997)
Yeah, yeah, because these will be, these will use the same thing we use to create our open graph images. And in that route that we generate those, we could pass it in probably like a height and a width, and then we could just like, you know, change the height and the width and it would just adapt.
Ste (35:05.888)
Yeah, I'm just gonna put it here so we don't forget. Actually, let's make this like the standard.
Ste (35:17.126)
one to one ratio
portrait
Ste (35:29.366)
Maybe these are like the three.
Ste (35:35.406)
How's it looking?
Adam (35:38.463)
Yeah, I was trying to look up icons in font awesome to see like.
Ste (35:47.704)
Yeah, put some nice icons in here.
Adam (35:47.809)
Like, yeah, because there's like rectangular, rectangle, vertical and.
Ste (35:57.006)
Thanks
Adam (36:00.833)
and then just rectangle.
Ste (36:04.265)
this is great. Yeah. Let me just paste this.
Adam (36:10.049)
And then square.
Ste (36:11.884)
and then square. Perfect.
weird.
Ste (36:19.474)
Not much of a difference between them but Why didn't they make them like more obvious rectangle horizontal Rectangle, okay. Yeah, that makes sense. Okay. I think that's pretty good
Adam (36:22.305)
Yeah.
Adam (36:30.827)
or just rectangle.
Adam (36:35.915)
Or rectangle, rectangle dash wide is a little, a little wider.
Ste (36:40.411)
they have that as well. Okay, yeah, I think that's like decent one -to -one score, but just square. I'm looking for like...
Adam (36:51.203)
There's also a...
Adam (36:56.259)
Let's see. Image.
Adam (37:00.972)
It's like.
Ste (37:02.055)
here we go. Yeah, that's
Adam (37:04.653)
think there's no landscape or is there a portrait landscape?
Ste (37:11.544)
Yeah, what's this image? You can just put like the image, like the mountain one.
Adam (37:22.243)
Hmm.
Ste (37:23.422)
Or yeah, just like that. I think it's good. We can figure it out when we actually code it.
Adam (37:30.763)
Yeah. Let me switch that one back.
Ste (37:32.546)
just to put it there so we don't...
so we don't forget. This is gonna make you sharing.
Ste (37:46.414)
Pretty good. And I'm guessing we could also use these standard sizes for the widgets. So we talk about being able to export the widget that you can integrate on your site or wherever. Maybe we planned these, these are the standard sizes for the dashboard as well. And for...
Adam (37:59.363)
you
Ste (38:14.454)
sharing so it's like universal.
Adam (38:17.421)
Yeah, yeah, I think that makes sense. So you'll be able to, so I guess the different ways that each of these views are gonna be visible are on desktop view, kind of just taking up the full width or whatever space is available on the screen. On mobile, pretty much the same. It's gonna take up probably like the full height and width because we'll probably have like one widget at a time showing on mobile. So that'll be kind of similar to this portrait one.
Ste (38:42.274)
Yeah.
Yeah.
Adam (38:45.685)
And then, then from each of these, you'll be able to export it as a square, a high, like iPhone phone shaped size or a wide phone on its side size.
Ste (38:59.062)
Yeah, that sounds good. mean, if we can pull it off for all the stats, that's going to be amazing. And it also pushes us to make them like as flexible as possible. So that's fine by me, like a bit more work on our end, but it also forces us to be really analytical about it, I guess.
Adam (39:00.267)
Okay. That's yeah.
Adam (39:11.81)
Yeah.
Adam (39:20.491)
Yeah, I really have no idea how we're going to create some of these on the backend because a lot of them use like client -side JavaScript to create the charts. So how we end up doing that will be its own fun project.
Ste (39:37.25)
Yeah, I'm guessing there's that npm library that exports them as an image and lets you download the image. So we could maybe use that. I don't know. But we'll see. Okay, I'm thinking this is looking pretty good. Let me put this on mobile as well. So we see how that looks like. move these. let's get this out and put this...
Adam (39:48.321)
Yeah.
Ste (40:05.58)
here so.
Adam (40:22.243)
Let's see, right now on mobile, it gets to about the T in list before it cuts off on production right now. So it's pretty close to.
Ste (40:33.994)
Okay, that's not bad. Yeah.
Ste (40:40.472)
So for follow, yeah.
Adam (40:40.767)
And I kind of wonder about this first one, if this should be like profile or the username. I do kind of like the way we have it now with like the icon, but since we're moving like a top row, we don't really need the icon anymore. So yeah.
Ste (40:57.772)
Yeah, what if it says either info or bio? I mean, it could just have like the username and we can remove it from here.
Adam (41:14.081)
Yeah, yeah, actually, I think the username and then removing it from there, I think that makes sense.
Ste (41:19.096)
Yeah.
Adam (41:25.921)
Yeah, because then you see the username for the current person every time, which is, I think, useful because someone could create a similar profile with the same name, but usernames are unique.
Ste (41:31.958)
Yeah, that's good.
Ste (41:40.108)
Yeah, and it also like lets this nice follow button breathe. Yeah, I think this is very, very cool. Okay, so...
Adam (41:49.484)
I kind of wonder, and so seeing this now, I'm wondering if we should have followers count or anything below here. If there's any secondary information besides the name and avatar.
Ste (41:54.988)
Yeah.
Ste (42:05.28)
Yeah, books read?
Adam (42:09.185)
I like books read. I like that more than followers actually.
Ste (42:13.312)
Yeah, books read and books reading.
Adam (42:19.521)
Maybe just books read. Yeah.
Ste (42:21.026)
Looks good, yeah.
Ste (42:26.156)
Yeah, think that's like, yeah, just books read. think it's cool. It's nice. It's minimal.
Adam (42:33.079)
Yeah. And if we wanted to do one more thing, maybe that user's flare.
Ste (42:40.122)
yeah, the flare. Where are the flares? Flares.
Adam (42:53.697)
Right now that's like a one custom flares like the one you get if you're a supporter or and that's really it.
Ste (42:59.094)
Yeah, let's just put in the supporter filter.
Ste (43:05.534)
Maybe we could make this extra extra. I mean, it's not like so important. And if you're on hardcover, you're going to know it's a spoiler flare. So maybe we can add a smaller size to that badge. What do you think? Should we put it next to the username or next to red, next to the username?
Adam (43:21.985)
Yeah, yeah, I think so.
Adam (43:30.699)
Yeah, I'm down for either. Or maybe next to the books because that one's not variable. I like it next to the username, but the username having a variable length is concerning.
Ste (43:35.18)
Yeah. Yeah, exactly.
Ste (43:41.002)
Yeah. Yeah, exactly.
Ste (43:52.706)
I think this is going to be really nice and shareable.
Ste (44:01.079)
Does this fit on one line?
If we make it more, let's see how it goes. I like it being like the centerpiece of the whole thing, but let's see.
Ste (44:18.926)
It looks good without the box as well. But let's see with the box too.
Ste (44:32.579)
the box and this is with the box. What do you think?
Adam (44:37.559)
I think I like it more with the box.
Ste (44:39.724)
with the box, yeah. Keeps it nice and structured.
Adam (44:45.227)
And I was thinking of like other things we could do to highlight like this top area besides showing covers, like something that gets like a quick indication of like this user's like active on hardcover. And I was thinking about like, what if we do almost like a background SVG of their like books read over per year over this ratio.
So kind of like, I'm thinking something like this. How do I create a multi -point line here?
Ste (45:23.783)
You just hit P on the keyboard and yeah, where the pen tool. Yeah, let me while you do that, I'm gonna bring, where's the discussions? Sorry, if I'm moving like around too quickly, but I'm just trying to find.
Adam (45:25.853)
Okay.
Adam (45:30.732)
So.
Adam (45:37.611)
Yeah, I think it would be similar to one of the ones we created, where it's like this, and then it has.
Ste (45:42.582)
Yeah, here we go.
this is cool.
Adam (45:52.675)
Until...
Adam (45:57.299)
It's like a...
Ste (46:07.486)
make these lines a little bit like this and then we could add like a layer of transparency or actually we could like send it to the back and have this be a little bit transparent. Nice!
Adam (46:24.233)
Exactly. And then if we wanted to add any like shading to it, we could even like add like a tinge of color or something or just keep the line itself as the thing.
Ste (46:40.382)
Yeah, it could be something like this. Let me add our default color to it.
Ste (46:55.822)
Actually, let me just like frame this whole thing. That's easier.
Ste (47:08.359)
Yep, it's pretty framed alright.
Ste (47:15.406)
so we can hide it by default and now we can just make the frame.
Ste (47:27.869)
What do you think?
So add my gradients.
Adam (47:36.001)
Yeah, I was thinking about that. The gradient was the part I was trying to figure out how to do.
Ste (47:36.643)
It's zero.
Ste (47:41.3)
Yeah, you just like hit this one and I just set everything to zero opacity and maybe this one will just make it into the hardcover color since it's like faded out. Something like this maybe.
Adam (47:47.138)
Mmm.
Adam (47:57.857)
Yeah, I think something like that. We might have to make it even lower so it doesn't go over the, or under the text, because then the text becomes a little hard to read.
Ste (48:08.393)
Yeah.
Ste (48:13.806)
Let's actually do that, yeah.
Adam (48:14.433)
I thought we might be able get away with it, but it.
Ste (48:22.023)
I think just like a bit this works. There we go.
Adam (48:28.353)
Yeah, it's something that doesn't really need a label. kind of just, it's like a quick indicator of like something's happening and you'll have to continue on with the stats to really see what this is.
Ste (48:40.532)
Yeah, yeah, I like that. I love that. That's like, that's very, good. And it will probably fit like your life in books have way more points to it. And that's, that's going to be nice. These are going to be like the years maybe, right?
Adam (48:57.761)
Yeah, that's what I was thinking. And then if it's a month, it might be, or maybe, maybe we use the same chart regardless of year. So it's always the same, same chart.
Ste (48:59.66)
Yeah.
Ste (49:06.189)
Yeah.
Ste (49:12.716)
Yeah, that's a good one.
Ste (49:18.67)
So Jenna's laughing books, three authors read, points answered. Nice, yeah, this is looking good. And then you can just like jump into the actual stats and 50 % capacity so it matches. What do you think? How are you feeling about like this first section?
Adam (49:40.641)
Yeah, yeah, I'm liking it so far.
Ste (49:48.022)
It's looking good. mean, let's put the share button over there as well and put this on the bottom too. So, and then you'll get, if you have this and then you'll get like the covers immediately after it, I think it's going to be like nice intro. What about this? Do you like the title bigger or smaller?
Adam (50:12.491)
I think the, the name is a variable length, it's, it's going to flow to multiple lines in some cases, if people have very long names.
Ste (50:24.151)
Yeah.
Adam (50:28.93)
Hmm.
except
Ste (50:32.084)
It would be just the first name, right? Or should we put the username as well? Or should we just put the username? Sorry.
Adam (50:35.978)
It's...
Adam (50:41.389)
Hmm. Yeah, I think just using their name name works.
Ste (50:49.25)
That I guess would be like, and if you put the life here.
We could maybe get away with longer names.
Adam (51:00.577)
Yeah, I think that'll work for most cases.
Ste (51:04.396)
and we can make the graph.
bottom and like this.
Adam (51:12.983)
Yeah, I mean, I think that's looking good. As you were mentioning the map here, it makes me almost wonder if each of these would be a link to a different section too.
Ste (51:23.546)
huh.
Ste (51:29.338)
yeah, we could actually do that. Yeah, let's do that.
And we could have, should we just remove this and just have the data on there and have...
Adam (51:41.335)
Yeah, maybe this just becomes the table of contents rather than having a separate table of contents.
Ste (51:45.366)
Yeah, yeah, I like that. Yeah, we can just like put the hover state over it so people know and they can play around clicking on them. Yeah, that's great.
Okay.
Ste (52:01.826)
Yeah, I'm liking this. And we've also changed the profile page up, so I'm very happy with where this is going. Over here, what if I'm thinking, maybe we show some covers, maybe the highest rated books from each of these periods, but I'm not sure how.
Adam (52:09.427)
Thank
Ste (52:23.531)
What would you think about that? So I'm thinking, you know, maybe on this chart we show some like small covers just to make it a little bit more fun, but I'm not sure.
Adam (52:37.249)
It is, it is fun.
Ste (52:39.406)
But maybe, not the right kind of fun.
Adam (52:47.277)
I like we're still trying to figure out our like tone and not being too serious.
Ste (52:51.05)
I'm thinking...
Ste (52:56.332)
Yeah, that's what I was thinking, but maybe, you let's leave it like a graph and we can figure out later if we want to add some more. We have other sections where we could make it more fun.
Adam (53:13.122)
Yeah.
Ste (53:14.932)
Okay, nice.
Adam (53:18.411)
Yeah, I'm happy with this as a starting point. And I think the only part that comes to mind so far for this first screen that you see is the duplication of this and this both being links to kind of the same thing.
Ste (53:18.552)
What do you think? Are you happy with how this is looking?
Ste (53:43.914)
yeah should we just make this like remove it would it be like enough to have yeah
Adam (53:50.604)
One.
One thing we could do is what if like, you know, it shows up with this when you initially load with, yeah, yeah, life actually that that's even better than what I was thinking, making that kind of a button. And I was thinking like, if that was up here and then as you scroll down, this first box kind of like collapses into a header line.
Ste (54:07.651)
No. Yeah.
Ste (54:19.63)
Yeah.
Adam (54:23.905)
And then as you scroll back to the top, it expands again. So it's almost like a sticky header for this whole section.
Ste (54:24.91)
this.
Ste (54:33.516)
I think that might work. me just add this.
That's how you tweak it.
Ste (54:48.973)
Here we go.
Ste (54:55.084)
this line and flip.
okay. Yeah, that's not looking too bad. What do you think?
Ste (55:09.876)
mashed with these maybe we can even like Jenna's
Ste (55:18.667)
life.
on its own line. we, let me actually copy it. So it looks bad. Just revert this frame.
Adam (55:24.501)
and
Ste (55:35.598)
So move these to bottom.
Ste (56:06.574)
Maybe just like drop down and hmm.
Adam (56:13.229)
Yeah, I think I like it on the second line. mean, it's kind of going to take up the whole screen when you're on mobile anyways.
Ste (56:22.09)
Yeah.
Adam (56:23.371)
So we have vertical space to use. as well use it.
Ste (56:29.378)
Yeah, I think so too. It's like...
Ste (56:35.714)
That's not too bad.
Ste (56:44.947)
And if it's like a longer month, could just, or it could just like default to a few rows and we could put the share button over here. it's like this and maybe make the graph.
Adam (56:55.8)
Mm
Ste (57:03.618)
Dynir and...
Adam (57:10.657)
Yeah, yeah, I think it's looking pretty good.
Ste (57:15.84)
Yeah, this is good. I mean, I like it. I could.
Ste (57:25.334)
I could see this.
Ste (57:29.582)
Should we leave it like that? Any other ideas?
Adam (57:29.837)
Yeah.
Adam (57:33.971)
I we've reached a good point for the day.
Ste (57:38.351)
here we go. Didn't even notice it's like already like past almost past the hour.
Adam (57:46.083)
This is like the first thing people see when they hit this page. So it's important that we're taking the time to make their initial impression as good as possible. So I think we made some good progress on it.
Ste (57:59.018)
Yeah, it's definitely, I'm liking this. I like the idea with the graph and I think now we've got more clarity on how you reach the stats page. And I'm thinking it would be even a big incentive for people to sign up for the supporter plan because if you go to someone's page and see their stats, you're going to see their supporter stats as well, right?
Adam (58:27.511)
Yeah, yeah, exactly. And that's how it is today too. If I'm a supporter and I share my stats, then people get to see my advanced stats.
Ste (58:28.994)
Nice. OK. Let me stop sharing this.
Ste (58:44.44)
Perfect.
Adam (58:44.45)
Yeah, yes. Yeah, this is exciting. I like that it's expanding into not just the stats page, but like general profile improvements that we wanna make and doing some of the work towards those already.
Ste (59:01.1)
Yeah, it's going to be a big change to the supporters and how your profile looks. And that's like, I think it's going to be like a big incentive for people to have even more of a reason to sign up because I mean, stats are the biggest support feature. And with a couple of those up with a nicer profile and get people to share it, that's going to be like very, very, very cool. Nice. Awesome.
Adam (59:27.319)
Yeah. Well, awesome. Yeah. Yeah. Thanks for driving in Figma. It's fun watching how fast you can move around in there.
Ste (59:35.459)
Yeah.
Yeah, and I don't even I mean I'm trying to connect this damn mouse and I've been trying to do that but it doesn't like I mean I think Jonah my kid has been playing with it and I think He threw it around. Yeah so much that I'm not sure it's even working anymore. But yeah, it's my age old curse. I'm gonna I Switched to the wired headphones. I think I'm switch to the wired mouse as well. Well, I'm gonna try I'll try the trackpad you recommended maybe that works
Adam (01:00:06.559)
yeah. Yeah. I've been living by this thing.
Ste (01:00:09.95)
Here we go. That's good. Yeah, might like make the jump. Perfect. Well, thanks everyone for watching and yeah, I guess see you all next week. Perfect. Bye everyone. See you, everyone.
Adam (01:00:23.585)
Yeah. Yeah. See you next week. Bye.
Bye.