Subscribe
Share
Share
Embed
Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.
Adam (00:00.918)
Hey, hey, stay, how's it going?
Ste (00:03.615)
Hi, Adam. I'm pretty good recovering from the cold I had last week and it's going well back in France and eating lots of good food. I've been to a really interesting restaurant yesterday. I'm to one tomorrow as well. There's this trend here of young chefs taking over places and leaving them as they are, but
just like working on some small details and obviously the menu. And I know at least two restaurants in my area who doing that. One of them was the one I went to yesterday and the food is like really good and very like a fresh approach to French cuisine. But it looks exactly like one of those old bars. They left everything intact. So basically you've got that.
That vibe going on. Yeah.
Adam (01:02.83)
There's a new way doing it. mean, focus on the food. Don't spend too much time on the rest of it.
Ste (01:09.633)
Yeah, yeah, exactly. It's really fashionable from what I'm getting. There's the other one I have near my place opened, I think about a couple of months to a year ago. And just last week, think Winifralcho was one of their guests. So they must be doing something right.
Adam (01:29.778)
I yeah, and I'm guessing they're all like within walking distance of you. Or subway.
Ste (01:30.968)
Yeah.
Ste (01:35.966)
Yeah 15 to 20 minutes now 15 to 20 minutes walking so that's like
Adam (01:44.11)
you
Ste (01:44.777)
decent even with a baby so yeah
Adam (01:47.928)
Nice. Yeah, we've been, we've been walking more now that it's not like triple digit heat here. So, that's been nice being able to walk around a bit more now that it's finally starting to come down from, summer to fall. We went out, we, we went out on a drive last week through the mountains to just like, look at the leaves that were changing and go on some little hikes around.
Ste (01:56.842)
you
Ste (02:05.361)
Yeah, well...
Adam (02:17.944)
There's this, there's this one that's kind of like, it's, it's kind of near where the Sundance resort is. And it's a, it's an, it's a spring that's coming out of the ground, like on a mountain. And so it's like, go at like, you see like all the water flowing down. It seems like it's a river just kind of coming down from nowhere.
Ste (02:39.068)
Wow, that's, yeah, that sounds scenic as hell. Sounds very good. I'm a big fan of.
Adam (02:45.335)
Just.
Ste (02:46.467)
Did you watch Twin Peaks?
Adam (02:48.524)
I have seen the first two seasons, but not the new one.
Ste (02:52.885)
Okay, so yeah, you know the scenery basically. I love the scenery, know, that mountain type scenery. And yeah, I love like that American type of landscape. Very, very good. Especially in autumn, I mean, I'm guessing, you know, lots of very good like foliage. Yeah, all the colors. I love that.
Adam (02:59.576)
Mm-hmm.
Adam (03:05.084)
Yeah.
Adam (03:13.046)
the
Adam (03:18.142)
Yeah, I grew up in Florida. So there was very little leaf changing. It was more just like all the oak trees just like shed their leaves for the season. that's, that's like it, everything just gets, it doesn't really get to the colorful parts of fall. It's just kind of brown. So
Ste (03:36.569)
Yeah, well, it's got its other features. We were just out of our team meeting and Jeff is in for the luckily seems to not be affected by the weather events that are going on over there. So yeah, the soul they get any like extreme weather events or are you like shielded from that part of things like
Adam (03:41.805)
Yeah.
Adam (03:55.63)
Yeah.
Adam (04:06.8)
Not too much. think the only thing really is snow. Every once in a while we'll get what's called like a snow squall, which is just kind of like the front of a storm. It has like the most wind and the most snowfall and it kind of goes from not really doing any snow, not really, you know, dropping any snow to just dropping a ton really, really fast. And those can be dangerous as if you're like driving or
Not expecting it because then all of a sudden you have to figure out how to get home and every street has like two feet of snow on it. So.
Ste (04:36.601)
Thanks
Ste (04:41.121)
wow, okay. I was about to say that sounds fun more than anything, but it actually might be a little bit scary.
Adam (04:48.48)
Yeah, we, like, two years ago we went, or maybe it was last year, we went to, we drove over to park city, which is like 45 minutes away. And we went to this, rec clef restaurant. It was like a buffet. If you know, like the rec clef, it's like the big thing of cheese where they heat it up and then they like, like slice off some of the cheese. And it was like a full buffet with that as well. It was delicious. And we got out of it.
And that's when I realized that a snow squall hit while we were eating. And now we had to do a 45 minute drive through the mountains back home in the snow. And, and it took us like two hours at like 20 miles an hour.
Ste (05:24.929)
Wow. Jesus.
Ste (05:32.575)
Okay, did it involve any shovels or like...
Adam (05:35.382)
Luckily not. We pretty much just like got behind a really big truck and we're like, okay, we're just going to stay in their shadow in our, in our Fiat.
Ste (05:43.641)
Yeah, that's lucky. And the good adventures. Snow adventures are always like the best adventures. I'm thinking, yeah, nothing compared to those. I began watching Lost 4, like the nature. Did you watch Lost? Like... Yeah, one of my favorite. I'm watching it like a third time. So, like the nature in there, very, very good.
Adam (05:47.699)
Yeah
Adam (06:02.668)
yeah, I loved last.
Adam (06:10.286)
You
Ste (06:13.561)
I mean, 50 % is the nature, 50 % the weird phenomena going on with that. But then nature does it for me. But still, yeah, snow would like top that. yeah, yeah, in Hawaii, Snow I think would top that. So would top last. And that says like a lot about snow, I guess.
Adam (06:22.872)
Yeah, everything filmed in Hawaii.
Adam (06:29.718)
You
Adam (06:36.078)
Yeah. It's, I think, this year we might try doing some like snowshoe hiking. Like we keep meaning to do it. There's a couple of places that like rent snowshoes for the day. So you can kind of see how you like it. So it might, might try a hand at that if we're like cooped up inside and want to get out because once it's too cold and there's snow everywhere, it's hard to, it's hard to get outside unless you're like going skiing or something.
Ste (07:02.349)
Yeah, I bet. Are the snow shoes the ones that are like big tennis rackets like in Tom and Jerry? really? They're like that? Okay. That was a wild guess.
Adam (07:03.47)
you
Adam (07:08.364)
Yeah, exactly. Yeah, except most of the ones nowadays, they're like big plastic ones or they have like a metal ring around the edge with some netting. Yeah, same principle though.
Ste (07:17.753)
Okay.
Ste (07:24.633)
Sounds great. Sounds like a lot of fun. Yeah, nice. Definitely like send pictures if you do that. Well, yeah, speaking of winter, like we haven't got much to go until winter. And for hardcover, that means like we've got to like gather all of our plans and see what we can ship until the end of the year, because we've got lots of stuff that needs to be solved.
Adam (07:27.464)
Yeah.
Ste (07:50.649)
you're doing the inertia jazz migration. And we're trying to see basically if we can ship stats and the dashboard, which is going to be like a fit in itself. So fingers crossed, you know, not, not making any promises that, but maybe, yeah. And we've also got the 2024 year in books, which is creeping like closer and closer. So, maybe, you know, we can give everybody an overview of.
what we're planning for the end of the year and then maybe we can jump in where we left stats and yeah, pick it up from there.
Adam (08:29.602)
Yeah, it sounds good. Yeah. We, we, couple of months ago, we created a very, very ambitious plan for what we wanted the rest of the year to look like. And, one of the, a lot of the areas for hardcover were like maintenance bugs, performance security, like, when, when our, images were kind of crawled and that ended up costing us a couple hundred bucks out of nowhere a couple of months ago.
we kind of realized, okay, we probably need to start taking security a little more, a little more seriously. So a lot of this, a lot of this migration is about those kinds of things, bugs, security performance. And they're gonna take a little bit longer than I would like, but it'll be, it'll be so much like relief for me to not have to worry about those things and just have a good solution in place.
So that's one of the big ones. And then you mentioned the dashboard and user stats as kind of our next ones. And we're talking about doing those in the new branch, which is like the new way of loading data, which will make it faster than the current stats could ever be, just from the architecture from a development standpoint. So we're...
we're upgrading the architecture of hardcover to be able to support faster speeds and more security and all these other things. so yeah, I think, dashboard stats and then year in review are kind of the, the things we'd really like to figure out how to get out this year. think the year in review is probably going to be the easiest of those because we, already did it last year. And so we can use kind of that code base and, then kind of.
Go from there.
Ste (10:26.763)
Yeah. And this is the kind of stuff you don't usually like see, but it has like a lot of impact on how data is loaded and how fast, you know, your experiences. People have been asking us and sending us things that were happening on their stats page. And one of the reasons why we're doing this is to actually make it possible for the stats, stat page to loads all that data, which is.
Getting, I'm guessing, maybe Adam, you can share more details into why this is getting pretty hard in our current architecture, which is basically, I guess, cutting edge, so we're not using any outdated tech. On the contrary, we're using the latest versions of the latest framework, I guess, which is Next.js.
But yeah, this amount of data, I think makes it very difficult for us to ship stats that loads in a way that doesn't impact your experience. Because we have very complex stats and that kind of gets clunky with what we're using now.
Adam (11:47.34)
Yeah.
Yeah, our whole like the kind of what I'm starting to realize is like one of my assumptions on the architecture of hardcover was that, you we'd have next JS and it would hit graph QL and that would kind of be our source of truth for all of our API. And then that API would go and hit Postgres to get data. It would sometimes hit rails when it needs to do like business logic. And then maybe rails would hit graph QL.
and then way on the front end on the Next.js side, we would cache things as it made sense so that we wouldn't even have to hit Next.js. That was kind of the hypothesis of how everything would work. And I think that that still pans out. But the problem is that the amount of data we have to load from GraphQL and the speed of the GraphQL API is significantly lower than just connecting to
A Postgres database and pulling the data in. And I'm talking like the difference between half a millisecond and 20 milliseconds. And when you start adding those up with like dozens of queries for a stats page where maybe you have to do lots and lots of complex calculations, some of those 22nd millisecond ones go up to 40 and 80 and a hundred. And then all of a sudden it's the difference between five milliseconds and a second. And so it's, it's like.
it really starts to add up. So even though like right now we're hosting Next.js on Google Cloud Run and it's doing fine. We really have no issues. It's been cheaper than hosting on Vercel and it's working. But in order to make everything performant, we would likely have to add like a Postgres ORM into Next.js.
Adam (13:46.838)
and then start accessing it straight from that, which bypasses our API in the first place. And then we have all these other things for auth and API access that we would also have to improve. So this is kind of like, we could either make all of those improvements on the next JS side, or we can make them all in Rails. And yeah, have you been following anything for like the Rails eight things that have been released in the past couple of weeks?
Ste (14:15.164)
No, not really. I was about to say that
I've seen from several developers that I'm following that they're saying they're expecting the Rails resurgence. I mean, I don't know if it has anything to do with that, but yeah, the Rails renaissance is being like, yeah, I'm hearing things about it. So maybe there's something in there.
Adam (14:43.084)
Yeah, there's a couple of like high level concepts that they're like, some of them are kind of core ethos of the Rails ecosystem and some of them are new for Rails 8. But like some of the things are no vendor lock-in, like you can host a Rails app anywhere. There's no official Rails host, you can do it anywhere. And there's even a new deployment framework called Kamal 2.
Ste (15:01.497)
Mm hmm.
Adam (15:11.27)
and you can deploy like an entire Rails app on like even like a bare metal server that you just rent. doesn't even have to be in a cloud like Google cloud or Amazon. You can just rent a server and then spin it up and throw a website on it with like less than like 20 lines of configuration code, which is pretty insane.
Ste (15:36.336)
Yeah, it sounds like very different to what the setup would be now. I mean, I've just heard that it's very hard to get out of that, you know, cloud hosting vendor lock-in. That's why it works, I guess.
Adam (15:54.592)
Yeah, yeah, exactly. And one of the reasons that it's able to do that is because of how it does caching. Like on Next.js on Vercell, they kind of intentionally hide how caching works on Vercell because that's part of their secret sauce. So because it's like this edge cache where things are being cached on the edge at areas closest to you on CDNs, while the Rails way of caching
Ste (16:14.201)
Mm.
Adam (16:24.17)
is like you have your app and you have some memory store, which is storing like little strings. And then, you your Rails app will go check the cache and then it'll, if it's in there, it doesn't have to query the database. Instead, it just returns that result to the user. And for the past 15 years in the Rails world, there's been a couple of different caching mechanisms that people have used.
There's on disk cache where it's just writing things to the file system. There's memcache, which is just an in-memory store of what's being cached. Redis, which is kind of the same thing, kind of took over a lot of memcaches usefulness because it handles JSON better. And then kind of the new way is something called solid cache, which is basically just like, we're just gonna use Postgres to cache everything. And so you create a separate Postgres instance, which,
Ste (16:53.749)
.
Adam (17:20.242)
it basically just is really fast at reading and writing too, because it doesn't have to do much in terms of complex SQL queries. It's just like, is this thing in the cache? Yes. Okay. Get it and return it. And, because of that, like database, like, space is a lot cheaper than, like Redis memory space.
Ste (17:21.155)
Okay.
Adam (17:47.502)
because Redis, you're in memory versus Postgres, which you can write to the disk and then access really fast. So instead of having a four gigabyte cache for 100 bucks a month, you could get a 200 gigabyte cache for 100 bucks a month. And with that, start, it changes how you cache the site. So instead of caching a book page for six hours,
we can cache a book page for 30 days, but then if that book changes, the cache key that we use to look up that cache entry changes. So it automatically expires it and we're able to always get the latest version without having to worry about long set future cache expiration dates. It's a lot to say that it's gonna be faster.
Ste (18:28.505)
Okay. Yeah. No, that makes sense. That makes sense. mean, all of these changes, like are due to the fact that it's hard to figure out what's going on in next-gen now. So we're kind of like looking at the black box and, you know, it's not...
Adam (18:50.977)
Yeah.
Ste (18:55.137)
Good, because we can control some of the stuff people are experiencing and they're telling us on Discord. I know why this data hasn't changed on my profile, it's probably because it has been stored somewhere and it hasn't been refreshed, so you're seeing the same data. And oftentimes it's just trying to figure out, is this a bug or is it just seeing the same data? yeah, lots of those. mean, they're supposed to like...
I mean, this would be like ways there to debug and to figure out using what you're building now, right?
Adam (19:32.62)
Yeah, so much easier.
Ste (19:35.265)
Yeah, that sounds great. mean, it's an infrastructure update and we've been doing lots of those, know, not much to see on the front end, but significant. mean, after it's done, it's going to be like super noticeable. yeah, it's going to be like very, very good, good updates to have all of our apps will be working like way faster. The dashboard will be working way faster and that like.
Adam (19:58.626)
Yeah.
Ste (20:04.734)
requires a lot of data. yeah, it's all for it to come together and allow us to ship these things. Someone in the chat is asking, does GCP meet expectations? I'm guessing that's where we're at then, GCP.
Adam (20:27.051)
yeah, yeah, I talked about that with the Google Cloud Run for Next.js.
Ste (20:34.099)
Okay, here we go. Yeah, that's good. That's good. Nice. Well, so until the end of the year, I guess, our plans are for Adam and Daniel on our team to try to figure out this shift to inertia JS. And meanwhile, I'm going
Adam (20:40.589)
So.
Ste (20:58.207)
stats and the dashboard, then hopefully sometime in November we'll be able to match my UI with that data and basically put this thing all together, which is, yeah, quite, quite, quite the mission, but, I'm, curious how, how it will, like we'll have like updates each week on the podcast. So you'll know how it's going.
And until then, maybe we can make some progress on stats. I can also tell everyone about... So, for the book pages, we have those covers that are right now AI art. And we've been trying to find replacements for that without us...
making custom illustrations because that's like very, very... Yeah, here we go. Yeah, so this is the fantasy cover. So for quite a while, we've been thinking of getting artists to contribute their artwork for their favorite genre and being credited on the book page, which would basically mean that on every book page that has that genre, if your artwork...
Adam (21:58.721)
like that.
Ste (22:21.611)
matches the hardcover style and it's something that we can use, you'll basically have it on all of those. And right now, let me share my tab here.
Ste (22:42.393)
We've made this form that has a little bit of info of how you can contribute. It's got the size of the genre covers and the placeholder covers. So the placeholder covers are the ones that you see when the book has no cover. Now, most books have a cover, but some don't. And you could have your artwork there instead of the AI artwork if you want.
There's also a Figma file here that you can access where you can see the actual format. You can use Figma or you can use like anywhere you want to export this from Photoshop or whatever you work in. And yeah, we just need your name, your link and your hardcover user handle and you can upload stuff here and we'll review it and we'll tell you.
If you want to check, you know, if your style, so if you're playing to illustrate the genre, let's say you want to illustrate fantasy and just want to check before like working on something, if the style is suitable for hardcover, you can just send us via this form, some samples of what you do, or you can check on this chord wherever you want this fine.
just for us to be able to confirm that this is good and if you do something in this style, it will be able to go on the cover for the genre. Yeah, and we'll be releasing this on Discord, I guess, after this call, and you'll be able to submit via the forum. So...
Adam (24:36.099)
Yeah, that'll be cool.
Ste (24:36.599)
Yeah, I'm hoping, you know, there are artists in our community and ideally it will, we will have artists making custom stuff or like stuff from their artwork. So if you're a fantasy illustrator and have a really neat illustration, you can just like crop that to size and it can be the fantasy cover. But yeah, I'm hoping to have.
or artwork be contributed by someone real. And as we're open sourcing, I'm guessing this is a small part of that on the visual side.
Adam (25:20.588)
Yeah. Yeah. And we have the ability on the setting side to set like cover images or not coverage, like the header images per book as well. And, know, we have, we can set cover images per book, of course. So we, we could even say like, you know, the books that are on the hardcover year in books or, you know, the book of the month, like
If we had more people contributing these, could create custom headers per book as well as per genre for at least popular books.
Ste (26:00.333)
Yeah, very good point. mean, I didn't even know that was a possibility to like have it per book yet. We know, I know we discussed about it. So basically now, I mean, if you have a favorite book, not even a favorite genre, maybe we can like do that. I'll change the description because I think many artists have a favorite book and it's going to be great to, you know, include some
some fan art in there.
Adam (26:33.132)
Yeah, I think the only ones that have like a custom header right now are like the way of Kings has like a custom one that was generated just for the way of Kings, but you kind of, you kind of can't see it all because it goes a little farther down. And I think Circe has this one that's kind of, you know, kind of a old Greek goddess kind of themed, but
Ste (26:49.07)
here we go. Yeah.
Ste (27:02.391)
Mm-hmm.
Adam (27:02.53)
That's kind of the vibe we were thinking, like people could create these that are very, that tie into the book, but without spoilers, just in a fun way.
Ste (27:12.294)
Yeah, yeah, exactly. Like the atmosphere, the vibe of the book, if you can illustrate that, or if you have like any kind of illustration that you already made that you think fits with any book, yeah, we'd love to see it. I mean, it's gonna, that cover gives you like a whole like intro into the atmosphere of the book. So it's gonna be great.
getting this contribution. the sizes are in the Figma hands in the form and yeah, feel free to check in with us and send your artwork if you want to verify it first, especially if you're doing something custom. So yeah, that's like the contributor's announcement.
You were saying that maybe we'll even make like a contributors page on hardcover where we could have like an aggregate of everyone who contributed, including librarians, including people who will contribute to the open source when that happens.
Adam (28:21.314)
Yeah, well, I was initially thinking more of a place to put all the areas that we invite contributions from the community in. We invite librarian contributions, we coding in this way with open source, we invite artists in this way with that. And then, having another page which is like, here's everyone that's ever helped out hardcover would be really cool.
Ste (28:30.56)
And that's it.
Ste (28:47.469)
Yeah, yeah, that'd be neat, especially if later we can tie it in with badges.
Adam (28:52.78)
Yeah, true.
Ste (28:54.553)
maybe a project for next year. But for this year, yeah, maybe we can jump in. We have half an hour left to do stats. So let me share the screen for my Figma. Where is it? Here we go.
Adam (28:56.162)
You
Ste (29:15.299)
So this is where we left off. I started doing the UI and let me actually share the actual code I have over here as well. yeah, over here, I made some progress on this. Not much, but I'm still trying to figure out how to get these book covers. I think every link is broken, but...
We'll do that after the call. But it's working. It's got a good structure to it. I managed to make this. So basically when you change this, it also changes the URL. So I don't know if that's helpful at all, I could make it so it.
Adam (29:45.902)
You
Adam (30:00.302)
Mm-hmm.
Adam (30:07.725)
Yeah.
Ste (30:11.752)
It's working for every year and for every month. And it stops at the point where you don't have any data. And I don't know if you can see the URL, right? you can see the bar, right? OK. Here we go. Yeah. And yeah, it has the custom date picker as well. OK, this is not working.
Adam (30:18.572)
Nice.
Thank
Adam (30:29.895)
Yeah, I can see the URL. Yeah, from to.
Ste (30:42.817)
at least this is. So, yeah, I'm guessing.
Adam (30:47.106)
If you're scrolling things though, can't see it. It's kind of staying at just the top of the page.
Ste (30:54.323)
Okay, here we go. Let's just leave it like that. So it's working except for the custom data. I'll have to figure out why that isn't working. It's not showing the custom data. It's just like, yeah, making it into October. But the idea is that all the busy, you know, working on the UI for this and by the time Adam and Daniel are finished with the inertia migration, you know.
We're hoping to hook this up so that it has your data. And of course, yeah.
Adam (31:27.916)
Yeah, I'll just plan on, yeah, I'll just plan on not like really doing like converting the current stats page. The current stats page on the inertia branch can kind of just be a blank placeholder for the new stats page.
Ste (31:43.609)
Yeah, that sounds good. also like this compared to our current profile has like a higher width and it also has this like very nice cover image. So I'm hoping that mainly with this update we can even make
place in the settings for supporters to upload their own custom image, but we'll have to see. I mean, I'm not sure how hard that is on the code and backend side because it involves uploading and that kind of stuff. But if it's not.
Adam (32:21.73)
That's not too bad. Yeah, we've done it enough times with uploads that we kind of have the code for uploading and adding a new column to a database for all that pretty down. think the idea would be that if you're a free user, the cover image we show would be your most popular genre. But if you're a supporter, you would be able to override that with an uploaded cover image.
Ste (32:45.619)
Mm-hmm.
Ste (32:51.186)
Yeah, exactly. Yeah. So it could show like whatever you choose to be here. I put some like nice little like fairy hills. Yeah.
Adam (32:59.769)
Yeah, yeah, that sounds good. And is this a LG with for this page?
Ste (33:04.811)
Nice.
Ste (33:10.169)
Yeah, yeah, I think it's all analogy with because the header has analogy with let me bubble check so
Adam (33:15.383)
yeah, yeah, you're right.
Ste (33:18.137)
Yep, I think it's that page layer, LG. So LG is our large container. I'm hoping we can move everything to LG once it's moved to inertia. So all of the pages will have this width, which is way better on laptops and white screens.
Adam (33:37.976)
Yeah.
Adam (33:46.402)
Yeah, well, as we start converting pages, I'm sure we'll need to make some multi-column to make it so it's not like, you know, like, because reading a sentence over that long a width is too many characters for a line. So it's just a matter of how we divide up the page. But that'll be to be determined page by page.
Ste (34:05.699)
Yeah.
Ste (34:09.451)
Yeah. Yeah, that is a thing we have to take into consideration. I was also thinking for stats that, you know, these are obviously mock-ups, but for some stats, if it makes sense to have them like in half a column, if it displays the info better, would that be something, you know, to do? I made it so that...
You can specify the width of each stat container. So you can have the stats layout as an LG width, as a SM. This is an SM, and this is an MD width. Let me make that.
Adam (34:53.836)
if you're showing something, I can't see it. It's kind of stuck on the.
Ste (34:58.073)
Okay, it doesn't okay. Okay. Yeah, I was Let me stop shit Yeah it's basically having stats that are on Half a column instead of like full width. So it's like you'd see like two stats one next to each other I'm not sure if that will work but for some stats it might yeah
Adam (35:05.454)
you
Adam (35:26.4)
Yeah, I think for, for some it'll, it'll work. think for our, our current stats, it's a small width and we're dividing some stats in half. So this will, this will allow them to still be like double the size they currently are.
Ste (35:37.624)
Mm-hmm.
Ste (35:44.203)
Yeah, exactly. I'm thinking for those stats exactly. I mean, I might try to move. Yeah.
Adam (35:47.184)
we know our current sets are wide, even though the headers small. Isn't it? Yeah.
Ste (35:56.663)
Yeah, I think for some of those that are on two columns, maybe it makes more sense to have it for width, but I guess I'll see once I start coding the actual UI.
Adam (36:14.786)
Yeah.
Adam (36:21.228)
Yeah, I think it'll be easier on mobile where it's like one stat per view as you're scrolling.
Ste (36:28.629)
Yeah, that definitely would, I mean, it is easier. I'm starting from desktop though, so I'll probably like have to scale it down. I think that might be, you know, closer to how our readers view the stats.
Adam (36:50.648)
Yeah.
Ste (36:50.733)
but almost all you get is the full height, so you can share it easily. I'm thinking maybe we could go through the designs because we have our current stats, but I wanted to ask you, out of those stats, which ones will we keep and which ones do you think we could ditch or move?
Ste (37:22.957)
because right now, let me log in or maybe if you can, let me see if I'm logged in to hardcover.
That's it. we go.
Adam (37:39.01)
Yeah. feel like a lot of them, I feel like a lot of them, or at least like the high level ones, like books per year, pages per year, pages per day. I feel like those are the ones that we'll keep, but then we can like restyle them so that it's like a uniform look and feel and like that kind of thing. Yeah.
Ste (37:44.557)
Well, more.
Ste (38:04.705)
yeah, definitely. We'll restyle everything. Just like the content. mean, I'm only interested in like the actual like content and priority on the page.
Adam (38:20.034)
Yeah.
Ste (38:20.119)
because we do have like our.
results from the survey and I'll basically be following that. But I'm thinking, you know, we could grab some stats that are already here. I'm thinking, you know, about stuff like the top-liked author or like the most liked review. I'm guessing those we could like keep and just restyle.
Adam (38:51.854)
Yeah. I, one thing that I'm thinking about for this refactor is like how much we want to rely on the Nivo library and other libraries and how much we just want to do as a straight SVG image. Cause anything we can do as like a straight SVG image ends up being just a lot, a lot easier for maintenance. but
Ste (39:04.728)
Mm-hmm.
Ste (39:19.257)
Yeah, there are like, yeah, the child libraries. mean, I've been looking at Nivo. I've been looking at recharge and I've been like actually trying to see if it's worth doing anything else other than what we're doing right now. I know with the current one, we've had problems styling it and we've had like some issues with the mobile layouts.
Adam (39:21.345)
It'll depend.
Ste (39:45.335)
because sometimes on mobile, know, it's not like that adaptable. So I was looking at Recharts and I was looking at a couple of other smaller libraries. think Recharts is like the best like supported one other than Nevo. Still there are some issues on mobile. So for mobile, I'm not even sure if it's worth like...
having all charts because some charts we can just like make a different version of for mobile or we can just like not show them because you know you're not gonna have a good time browsing like a thing where you're like struggling to read something and struggling to like tap on something to get to get the tool tip. I'm not sure what are your thoughts on like the chart.
library? you think SVGs will actually, I mean, I'm not even sure how to do those. I can like design them in Figma, but I wouldn't know how to like code them. Would you, is that something that you like doing?
Adam (40:58.51)
Depending on the chart, some of them might be a little more cautious about, like the steam chart, for example. That one's pretty difficult to code. But for more simple ones, like bar charts and line charts, those would be super simple. Same for ones that are like a grid or like that kind of thing. Those are really easy. So yeah, think for the easy ones like that,
Ste (41:06.361)
Mmm.
Adam (41:27.822)
doing them straight in SVG wouldn't worry me. Like for instance, the stats page where we show like, or on the book page where we show that graph of like the ratings distribution, like here's how many five stars, here's how many four stars this book has. Like that's just a straight SVG that's being created. it uses a like D3,
Ste (41:48.889)
Mm-hmm.
Adam (41:57.342)
scales to do the math behind the scenes. then so the D3 is kind of just doing the math for like, is how you calculate the height of this bar. This is how you calculate how wide each bar should be in order to have X number of bars showing. And so D3 can handle all that math in a surprisingly easy way.
Ste (42:17.348)
Okay.
Ste (42:22.347)
that's good to know. I know you love doing charts, so that's why I asked. Adam's big into visualization, yeah. I mean, if you want, for the ones that are graphic, I can just design them in Figma and try to figure out, or maybe we can try to figure out together which ones we can use a graph for and which ones we can actually do from scratch.
Adam (42:27.023)
Yeah.
Ste (42:52.121)
for maintenance mobility.
Adam (42:55.638)
Yeah, yeah, I think that's a good way doing it.
Adam (43:01.806)
going to see, like, give you an example of what this looks like real quick.
Ste (43:08.365)
Yeah, I'm curious to see how that can be achieved.
Adam (43:14.734)
Yeah, OK, let me share my screen here for a sec.
Ste (43:27.275)
any pie chart, that kind of thing, I'm assuming it's the same.
Adam (43:32.224)
Yeah, similar stuff behind it. So this is the ratings graph that shows ratings for these points. And effectively, all it's doing is
like getting an array of like the different counts. like, you know, a rating of 0.5 has 10 ratings, rating of one has eight ratings. And so it gets this little hash and then it defines some constants.
Ste (44:10.113)
Okay.
Adam (44:16.214)
And then we use these scale band and scale linear functions from D3. So scale band comes from D3 scale. And all that does is say like, given this array of ratings, so like, know, this object just says 0.5 all the way to five. And then given, you give it this much space to fill in and then,
you want a little bit of padding between each one. And now this creates a function. So you pass in a rating to that function and it generates a scale for how, for where that band should start. And then you do something similar with, so this is like, this is kind of, if you think about like the bar chart, this is like,
Ste (45:09.055)
Okay.
Ste (45:16.626)
Yeah.
Adam (45:17.292)
the lower left corner, a bar chart that's just going up. This is the left corner of every bar that's being showed on the bar chart.
Ste (45:20.817)
huh.
Ste (45:28.479)
Right, so you're defining basically like the coordinates of the rectangle. That's just like a SVG rectangle. That's what you mean by SVG. So if it's like a SVG primitive, like a rectangle or like circle or like something like that, we can do stuff with it.
Adam (45:34.6)
Exactly. Right.
Adam (45:44.93)
very easily like this and then.
Ste (45:47.295)
Okay, that's very good to know. Okay.
Adam (45:50.53)
And yeah, so the Y is kind of doing the same thing for determining the height of each bar based on the number of the number of books and the number of people who've rated a book for each specific rating. And then, yeah, the height is just another thing of like the Y at zero plus the Y of the top. And that's the height. And this is kind of a special function for determining the width of a block.
based on it knows how many ratings there are, it knows how much padding there's going to be between them, and it knows how much space it has to give. So it's able to use all of that to determine, like, OK, so that means that each one is going to be exactly the same width, and it's going to be that width.
Ste (46:21.397)
Okay.
Ste (46:37.309)
Here we go. Yeah. This is like straightforward geometry. Well, if you actually know how to code it. Okay, yeah, this is fascinating. Definitely, I think it's going to be better because we can control more of the styling on the stats. have like a bit of trouble styling some...
Adam (46:43.146)
Exactly.
Ste (47:00.821)
of the older stats or the current stats. So yeah, definitely down to try that.
Adam (47:06.35)
Mm.
Adam (47:11.974)
And you can do the same thing with like a X or Y coordinate grid and doing a point or like a line that goes through it with some like curvature pretty easily as well.
Ste (47:21.87)
Okay. Okay, so you can do actually like the curved lines, nice smooth curved lines with the SVG.
Adam (47:30.828)
Right? It's.
Ste (47:32.439)
Nice, okay, I'll actually look into that. It sounds very, very good. I mean, we have them in Figma, so if we can replicate the graphs exactly like that instead of relying on the library to customize it, yeah. Okay, that sounds great. That sounds great. Nice. So I'm guessing...
Adam (47:47.532)
Exactly.
Ste (47:55.929)
for the stats, what would you think a good next step would be? Maybe making the, like we did for the dashboard, making all the mock stats, stat boxes, and then filling them with the UI one by one. Would that seem like a good approach?
Adam (48:17.238)
Yeah, yeah, I think that sounds good. Cause then we could potentially like get the stats page in that point. And before we implement it, we could show it to people, get some feedback on it and see if there's anything we need to tweak before we move it to the development.
Ste (48:28.525)
Mm-hmm.
Ste (48:34.005)
Yeah, that actually sounds great. I'm going to just drop everything in there, and the UI, I'm going to do one by one, which is what I'm going to do for the dashboard afterwards as well. I just want to get the stats on that page. Maybe you can show me how to figure out...
how to get the covers in because I think some of the links are broken.
Adam (49:06.468)
Yeah. Yeah, I have a feeling it's like an environment variable I changed. yeah, it probably just needs to be rebuilt from Docker. Yeah.
Ste (49:18.059)
Okay, yeah, if it's that easy, yeah, hopefully it's that easy. Okay, this sounds good, this sounds good. I mean, I think these are like, this is a solid planning for the end of the year. If we're going to be able to ship it, I think the app is going to look like in a very good spot. It's going to load faster. It's going to stop having all these weird errors and...
is going to have a dashboard finally and new stats.
Adam (49:54.134)
Yeah. And yeah, less to worry about for us. I think that's one of the things that I struggle with is like, when there's so many things going wrong, it's hard to like focus on the community feedback we're getting. So it's, getting us into a better place to be able to support that community feedback and be quicker to adapt to it. Because if we're, if we're able to adapt to that feedback, then we're like capitalizing on everyone's like excitement around hardcover.
Ste (50:09.901)
Yeah.
Adam (50:23.19)
It always feels like when we're waiting to solve something, then it's like that excitement kind of, you know, it's hard to sustain excitement over a long period of time when you're waiting for something.
Ste (50:23.844)
Yeah.
Ste (50:35.737)
Yeah, yeah, exactly. I totally felt that as well. part of building a startup is being deep on the tech side, being deep on the community side, being there with the community. I think the most fun thing is talking to people on Discord in the community. But apart from that...
We also got work on bringing the updates and thinking about what to make next and what to build next. So I think this is going to be like a very welcome, welcome change. And I have a hunch, you know, it's going to be good for the future. It seems like, you know, we're basically like a good example of the state of web development right now.
because I think two years ago, Next.js was like the most promising thing there was and everyone was like jumping in on it. But, for us, it's like stopped working the way it should have. So, I'm feeling good about, know, something that allows us to move, to a place where we have more control because. Yeah.
I mean, must be frustrating to not have that control, especially when you see like all these bugs coming from everyone signaling, like lots of stuff going on and we're like, okay. Let's see what actually like is going on. But most of it is not like dependent on us. And we have to like spend a lot of time seeing what infrastructure like provider is like causing that. And what.
part of their setup is responsible for this weird thing you're getting. yeah, make stuff way harder.
Adam (52:35.448)
Yeah.
Adam (52:40.623)
And one of the things that's just been a struggle is that the development time, like when you make a change to when you see it in your development environment, locally with Next.js for us has taken a real hit. Like sometimes it might take 20 seconds between when I click save and when I tab back over to the browser and I see a change while in Rails, like I'm hitting save, I'm tabbing over.
I'm waiting and then I realized it happened in that time between when I tabbed over. I'm like, it's like that rather than 20 seconds. So that's the difference in iterative speed that we're going to be able to get. And I think the hope was that with Next.js they have this new like turbo compiler, which is the attempt to do that. But our app was never able to run under the new turbo compiler.
It would be nice if it would have been able to, so we could compare those apples to apples. But yeah, guess we were using some, we're still using some dependencies that just don't work with it, including tailwind, which is pretty big dependency.
Ste (53:52.939)
Really, I mean, that's a big oversight. Tailwind, I mean, everyone's using tailwinds.
Adam (53:58.412)
Yeah. It's, yeah, it's kind of weird when it says it's like 98 % done with the conversion, but part of that last 2 % is tailwind.
Ste (54:07.393)
Yeah, like all the styling, the things people actually like see on the app. Jesus. Okay. Yeah.
Adam (54:13.056)
Yeah, it's like if you're using styled components or other systems for styles, then you don't run into it. But I guess because of how Tailwind like crawls and like does a list of all the different classes you're using. At least it wasn't last time I checked. think it was like a dependency that Tailwind uses was causing an issue.
Maybe the new, I think Tailwind's up for a major version bump that they're either, like that's an alpha beta right now. So maybe that one will also fix it.
Ste (54:41.942)
Yeah.
Ste (54:53.567)
Yeah, still like all the startups are using Tailwind, like even OpenAI is using Tailwind. I mean, everyone is using Tailwind. So that's a big like oversight not have like priority that's prioritized for the compiler. Well, anyway, I mean, I think everyone is excited about Rails in general. So it's definitely making a resurgence. So, yeah.
Adam (54:55.022)
Thank
Adam (55:11.598)
You
Ste (55:21.973)
I think it will prove to be a very good move.
Adam (55:28.096)
Yeah. I'm, I'm excited about it. Yeah. Well, one, who, take a break for the day there and, yeah, we're going to be off the next, three weeks. Cause I'm going to be traveling on a vacation for, for a little bit and be back, beginning of November.
So we'll be...
Ste (55:53.363)
Yeah, that sounds good. Good to get a bit of time off finally.
Adam (56:00.738)
Yeah, I think I'm going to be, you know, eating a lot of tasty food and drinking a lot of tasty cocktails for, for a couple of weeks in Europe.
Ste (56:10.873)
Nice. It's like, hopefully you're going to get great weather. I think where you're going, it's likely to happen and definitely well deserved. when we come back, when you come back, I'll hopefully have the UI done for the stats page at least, or have it in a good place.
Yeah, we can start showing updates to people.
Adam (56:43.224)
Yeah. Sounds like a plan.
Ste (56:45.817)
Great. Well, thanks everyone for watching and yeah, see you at the next Hardcover Live in a couple of weeks. Perfect. Awesome. We'll see you next time. Bye-bye.
Adam (56:51.32)
Yeah, yeah, see you next month. Bye.