Hardcover Live

Summary

In this conversation, Adam and Ste discuss their recent experiences, including attending the FANX convention and the upcoming Dragonsteel convention by Brandon Sanderson. They delve into the technical aspects of migrating their application from Next.js to Rails, addressing challenges and solutions encountered during the process. The duo also shares insights on the development of a customizable dashboard and stats page for their application, while contemplating the future of augmented reality and AI in reading and design.

Takeaways

Ste shares his experience at a friend's wedding and returning with a cold.
Adam discusses his excitement for the upcoming Mediterranean cruise.
FANX convention was a fun experience for Adam, with many panels and vendors.
Brandon Sanderson's Dragonsteel convention is highly anticipated.
The duo discusses the challenges of migrating from Next.js to Rails.
They explore the potential of a customizable dashboard for their application.
The importance of user-specific data in the migration process is highlighted.
Ste presents a mockup of the dashboard with various widgets.
The conversation touches on the future of augmented reality and AI in reading.
They express excitement about the potential of AI to enhance development. 

Chapters

00:00 Introduction and Personal Updates
03:00 FANX Convention Experience
05:58 Brandon Sanderson's Dragonsteel Convention
08:53 Gaming Cafes and Community Spaces
10:11 Migration from Next.js to Rails
10:55 Technical Challenges in Migration
14:52 Dashboard Mockup and Features
19:58 Stats Page Development
30:02 Future of Augmented Reality and AI

What is Hardcover Live?

Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.

Adam (00:00.812)
Hey, hey, stay, how's it going?

Ste (00:03.449)
I'm going pretty pretty well. I was telling Adam that I went to friend's wedding The past week and I've returned with one hell of a cold So I'm gonna be a little bit, you know talking from my nose on today's podcast. But yeah, otherwise it was really fun. Really nice really outdoorsy Good music not a lot of food, which was good. I know if you've been to an Eastern European wedding or like

weddings with lots of food in general, but that's the way it is in, you know, usually. So I was glad the food was like exactly what you could eat and nothing more than that.

Adam (00:40.108)
Mm-hmm.

Adam (00:48.258)
He didn't have a food hangover the next day.

Ste (00:51.243)
Yeah, exactly. Yeah food or drink hangover. Yeah, all the drink hangover, but yeah, no food hangover luckily Yeah, I hate it when you know, they fall like seven courses like literally seven courses of foods and You basically this is your like whole experience. This was only like two rounds. So yeah, it was pretty good pretty fun

Adam (00:56.341)
You

Adam (01:15.608)
Still, still enough room for cake at that point.

Ste (01:18.326)
Yeah, exactly. Yeah, the cake was actually good, too. Yeah.

Adam (01:20.332)
Do you think, nice. It sounds like it's just a cold and probably not COVID.

Ste (01:26.935)
Yeah, well you never know I mean I had it for three days Yeah, and it should be good, but you know there were lots of kids as well. I heard from parents that They've been like sick non-stop because kids go to daycare and the kindergarten and you know any parents listening might know that What I'm talking about so yeah

Adam (01:30.19)
With the vaccine, mean, yeah.

Ste (01:53.341)
Plenty of places where I could have gotten it from, but luckily it's on demand. So yeah, pretty good. How about you?

Adam (01:59.596)
That's

We're getting ready for our Mediterranean cruise later this month. And so I think we're going to get our COVID shots and our flu shots this week and cross our fingers that we don't get sick. Although I'm not, I'm kind of assuming that being on a cruise ship, we're going to get sick. mean, like, yeah. Yeah. We have a.

Ste (02:25.639)
Well, yeah, maybe you'll get lucky.

Adam (02:30.838)
friends who call it licking doorknobs when you're like just going out into the world, not really caring. You're like, well, if it happens, it happens.

Ste (02:39.104)
Yeah, on the other hand, you'll be on a cruise, so at least there's that. And I'm assuming, you know, it's like lots of outdoors time as well.

Adam (02:48.672)
Yeah, that's true. Probably not too much time in small enclosed spaces. Yeah.

Ste (02:53.787)
Yeah, that's nice, that's nice. And I know you've been to like FanX, I read it on the report. How was that?

Adam (03:00.172)
That was fun. Yeah, I've been like, you know, since I was in high school, been going to comic book and anime conventions like pretty much every year. And so when we moved to Salt Lake, we found FANX, which was previously called Comic Con, but due to some trademark disputes, they had to change the name to FANX. And it's a huge convention. it's, I think it's a...

Ste (03:22.407)
Haha, yeah, makes sense.

Adam (03:29.09)
I don't know, 50, 60,000 people in the convention center here and like thousands of vendors, like a lot of authors, a lot of artists, and then just a bunch of celebrities giving their talks as well. A lot of Q and A's. Yeah, that was fun. We went to, it was Thursday, Friday, Saturday, and we ended up going Thursday and Friday. And let's see.

Ste (03:49.639)
Nice.

Ste (03:56.403)
Hmm.

Adam (03:58.626)
I saw a couple of fun panels. We saw a fun Star Trek Next Generation panel with Will Wheaton and the actors who played Will Riker and Geordie. So that was fun. A couple other really good Q &As and just some panels run by geeky people in the community who are hyper-focused on a topic and they're like,

I'm gonna give a, I'm gonna do a panel all about the music theory on why anime intros are so catchy.

Ste (04:37.491)
Wow, okay. Well, that sounds really interesting actually. They are really catchy. I've been watching Spy Family with my kid and he's a really big fan of the intros so much that I've had to replay the Spy Family intros on YouTube and he was always jumping around when they come on. So I think that's his hook to, you know, it's beginning, my favorite anime.

Adam (04:42.338)
Yeah. Yeah.

Adam (04:56.61)
You

Adam (05:00.48)
Bye.

Adam (05:07.116)
That's cool.

Ste (05:07.744)
So yeah, that sounds like a fun panel and a fun convention.

Adam (05:12.822)
Yeah. Yeah. It was, it was a good one. We're like, it's, it's at the same space that, Brendan Sanderson's Dragonsteel conventions at every year, which I wasn't able to get tickets out to this year because it sold out in like two hours last year. It took like two months to sell out. So I thought I had time, but yeah, now I know they, apparently they had fewer tickets this year than last year too, which is part of it. So I'm, I'm still crossing my fingers and trying to get a ticket.

Ste (05:27.761)
Wow.

Adam (05:42.114)
because it's three blocks away from my apartment.

Ste (05:43.624)
Yeah. Yeah, Jesus. I mean, that's mad. Like two hours like sell out. And I'm assuming, you know, there's it's not like just like a couple of thousand tickets, but that's that's really like, yeah, maybe you'll catch some on the resell. Do you have like people who resell them when the convention starts in front of the or is that

Adam (05:58.934)
Yeah.

Ste (06:09.617)
I know some places that I always kind of like in the gray area, but yeah.

Adam (06:12.064)
Maybe. Yeah. I mean, I wouldn't be surprised. Like they, I've been checking the website and yeah, they only had, 6,000 general mission and 1500 VIP. And so that's what sold out in the first couple of hours. I think there's a Reddit community of people that are for, Dragon steel and some of them are reselling, but I have a feeling that as soon as some posts they want to resell, like people just swarm them. So yeah.

Ste (06:39.122)
Yeah, yeah, that's crazy like such such high demand

Adam (06:43.008)
Yeah, I applied to volunteer, so maybe I'll be able to get access that way.

Ste (06:48.697)
yeah, that's a good method of jumping in, especially if it's so close to like, it's practically where you live.

Adam (06:52.364)
Yeah.

Adam (06:58.194)
Yeah. And I'll probably go to the book release party for the fifth book in the Stormlight Archive series, which comes out during it.

Ste (07:05.238)
right. nice. Okay. So he's launching the book as well on this one.

Adam (07:11.008)
Yeah. Yeah. And he like, I guess normally books launch on Tuesdays or something. And then, so he switched it up. So it's going to launch on like the Saturday of the convention. That way it can be, they can do a book launch party just for it. So yeah.

Ste (07:17.564)
Yeah.

Ste (07:27.473)
wow, that must be nice. Salt Lake City, like Brandon Sanderson's headquarters or whatever you'd call his...

Adam (07:33.57)
You

Adam (07:38.282)
Yeah. He, he, he actually, he had a panel at, FANX and they announced or he announced that they had bought land for the new, like they're building a dragon steel, like physical location for his, and it's going to be like, a bookstore and it's kind of like an open, like mall space. So they're going to have like a cafe or like a gaming store, like some other, like a restaurant.

and it's all gonna be kind of in the little community. And then like there'll be tenants and they'll hopefully get like, you know, a nerdy cafe, like a nerdy restaurant. you know, keeping the theme going and not like, you know, an Applebee's or something.

Ste (08:16.006)
Wow

Yeah.

Ste (08:23.059)
Haha yeah, well that sounds great. mean that's a really good plan and is he gonna like make it to the Salt Lake? Did he buy the land in Salt Lake? Or... wow.

Adam (08:31.264)
Yeah. Yeah. It's down in, I think, I think I heard popular Grove, popular Grove. It's just like a, right between salt Lake and like Lehigh, but yeah, pretty much salt Lake area.

Ste (08:44.861)
So basically a Brandon Sanderson theme park. wow. Yeah, that sounds amazing. So much. It's actually like a good move. When I was back in London, I used to live near a newly opened gamer cafe. And it was a place with at least like 100 seats. And you could grab coffee, grab something to eat, and play some board games.

Adam (08:48.92)
Basically.

Adam (08:53.942)
Yeah.

Ste (09:12.035)
And they had stuff like Warhammer and all kinds of stuff with figures and dungeons and dragons. And it was always, always packed. And I was thinking, wow, look at such a good business. And I couldn't have imagined so many people gathering from the neighborhood because you wouldn't like... It was, I guess, a shot in the dark. But yeah, they made it. I was so happy to see that place.

Pop up over there. Yeah.

Adam (09:42.402)
It's pretty cool. Yeah. Yeah. That's, that's really cool. There's a couple of bars here that do that. Like they do like a weekly game night where a company will come in and they'll bring like a hundred board games and just kind of put them out on the counter for anyone to use. But, there are some weird alcohol laws here in Utah that prevent a lot of that. Like if you serve alcohol at a bar, like it has to be 21 and up.

Ste (10:11.165)
Okay, okay. Really?

Adam (10:12.066)
So you're not even allowed to bring babies in. So breweries here, no kids.

Ste (10:18.587)
wow, okay, so no kids like, no matter if they drink alcohol or not, not on the premises.

Adam (10:22.304)
Yeah. Right. The only, the only way you could do that is if it's a, like there's two distinctions here in Utah. There's a bar, which is like, you, you, can get up and order. You can move around with your drink and then a restaurant where you have a dedicated seat and dedicated seat places. You're allowed to have kids with alcohol.

Ste (10:38.478)
okay.

Ste (10:42.739)
Okay, that makes sense. Yeah. Well, I've just come from a bar in France and yeah, pretty much very kid-friendly, so pretty different here. But you know, they're the French, so it figures. Nice, nice. And on the hardcover side, I know you've been busy with trying out the migration for moving us from NAICS.js to Rails via inertia.

Adam (10:48.353)
You

Yeah.

Adam (10:55.414)
Yeah. Yeah.

Adam (11:09.542)
Yeah, it's been going pretty well. I feel like I'm solving all the high level problems for it on the first couple pages and then after that, it'll go a lot faster. Because I'm trying not to push those problems to the end because if we hit those problems and we have to turn around and go back to Next.js, I want to know that as soon as possible. But yeah, let me share my screen for a moment. I'll show you kind of.

Ste (11:22.674)
Yeah.

Ste (11:32.371)
Yeah.

Ste (11:36.401)
Yeah, that's perfect. I actually wanted to ask where do you see those bottlenecks and where would you see it as a problem for the migration to actually be successful. look at this.

Adam (11:55.872)
Yeah, so far the bottleneck is, or the kind of like the biggest thing I'm still trying to wrap my head around is how we do like the user specific statuses for every book they've interacted with and do that in a way that where we navigate between different screens.

updates it in a smart way without having to fetch everything from the database when you go from page to page. Like with Next.js you have these like nested layouts and when a page is loading it's only loading the page of like the most nested page view and everything else around that is a layout and that isn't changing. With inertia we're kind of like reloading the entire page but it ends up being really fast because it's

feeding the data in and it's just like rendering it to HTML. it, hypothesis is that it's gonna be faster. But yeah, I need to like figure out that one part about like user data. So that's gonna be part of this one. Yeah, this is an example of this page right now. And even in development mode, it loads like that fast, which is like,

so much faster than our current development mode.

Ste (13:22.927)
Yeah, that's basically like instant. You were telling me that's like nine milliseconds for it to load. That's basically like you won't even notice it. So it's basically you just like go through it and it shows up.

Adam (13:30.87)
Yeah.

Adam (13:34.368)
Yeah, like this is that request. Like it only had to load the book and then everything else was in Redis cache already after that first load. And then, yeah, this took 19 milliseconds, 11 milliseconds, know, 41 milliseconds. it's, yeah.

Ste (13:49.767)
Yeah, that's like, I mean, it doesn't even matter that it blows the whole page, anything I guess under like even 100 milliseconds, that's like not noticeable to the human eye. that's gonna appear like almost almost instant.

Adam (14:00.534)
Yeah.

Adam (14:10.102)
Yep. And then you have like, if,

Right now I haven't added login ability. So I have like some code I tweak to make it seem like you're logged in. So if someone's logged in, then they see like a little bit different stuff like, know, our header and your status for the book and like this panel down here. So I haven't read this one, but if I go to a book I have read,

Ste (14:26.064)
Yeah, here we go.

Adam (14:44.354)
And I go to...

Ste (14:44.434)
here we go.

Adam (14:49.794)
Yeah, it'll have like, you know, your, this section, like you'd expect. So, yeah. And this also allows us to do some other things like, have like, we, like right now, this part says on production, it says, like 16 plus friends have read this. Now we'll be able to do things like show how many friends have read this and then link to a page with everyone in your network who's read it or everyone in your network who's.

Ste (14:52.545)
nice. Yeah.

Adam (15:19.468)
currently reading it, that kind of thing.

Ste (15:21.827)
Nice, yeah. So basically like for any kind of complex set of data, especially like what we're doing now for the dashboard and for the stats, it's gonna be way more useful to have it like this.

Adam (15:23.042)
or want to read it.

Adam (15:38.72)
Yeah, exactly. Yeah, it's going to make it a lot easier to develop as well, which is, And yeah, one of the things that's been really helpful is a...

Ste (15:45.155)
Mm-hmm.

Adam (15:57.802)
show a moment of code here. So we have like.

Ste (16:01.37)
Here we go.

Adam (16:03.33)
Let me close as much of this as I can so it's not overwhelming with 20 tabs up.

Ste (16:11.265)
Yeah, I'm like that as well. I have a lot of stuff open.

Adam (16:15.048)
Yeah, like this is the entire code to get the data for that page, like from here to here. know, whoop. right. I was probably.

Ste (16:21.016)
I think you have to switch tabs.

Adam (16:30.733)
difference between share screen and share window.

Ste (16:33.961)
Yeah.

Adam (16:39.522)
Okay.

Adam (16:43.156)
screen, this window, share.

Adam (16:50.156)
Huh, it doesn't look like it's sharing, it?

Ste (16:54.304)
not yet.

Adam (16:56.384)
OK, let me try, I'll try entire screen instead of window.

Adam (17:04.863)
Yeah.

Ste (17:07.834)
Still doesn't do it.

Adam (17:09.91)
Weird, well, it's a.

Ste (17:11.672)
Yeah.

Adam (17:15.668)
Yeah, it says it's staring screen, but then it doesn't actually do it. Let me try it one more time after exiting it. Screen.

Adam (17:32.084)
Yeah, I think you might have to restart to do it and I'm not gonna go that far. yeah, the new thing I found is like, we have so much data that we're fetching from the server and we have to pass it off to the JavaScript side. And one of the parts I was a little worried about is like in TypeScript, you have all these.

Ste (17:40.288)
Okay

Adam (17:58.518)
like type definitions that define what the shape of the objects are that are being passed in. So like when you pass a book, you're like a book needs to have a title and it needs to have an array of contributors. needs to have a description, all that. when, in the current app, we've kind of done all that manually. Like we've created all these type files that say when we query for a book, has this, this, this, and this, but there's always the chance that

you'll write a GraphQL query that doesn't have all those fields. And so it won't satisfy that type and you'll just get weird errors. So the way that it's working now in Rails is we're using this library called like OJ serializers, which serializes Ruby objects down to JSON. And then there's another library called types for serializers or something like that, which will...

use those serializers and create TypeScript type objects, type definitions for it. So now throughout the app, the type files that we're going to be using aren't going to be written by us. They're going to be auto-generated by our Ruby code. So there's less chance of things getting out of sync. There's less chance of us making a mistake because like the types are the same all the way from the Ruby side to the client side. So I was a little...

I wasn't really sure how that was gonna work, but yeah, I just added it yesterday and it's already like really helping me find bugs in the system.

Ste (19:31.339)
nice. Yeah, that's good to know. mean, some of the bugs we've been like struggling with and, you know, with the app getting bigger and us building stuff, it piles on. and we're a small team. you know, it's basically us doing debugging. So, yeah, it's like very helpful to have some of those at least, you know, so you know where they come from, I guess.

Adam (19:58.518)
Yeah. Yeah, that's, that's pretty much an update on this. I've, I have a feeling that like, I don't have an ETA and how long it's going to take to re redo the entire rest of the site. I mostly because it's like, it's combining this like migration to rails with like all these other like high level bugs that we had around like networking around.

Ste (20:22.875)
Yeah.

Adam (20:26.178)
caching around authentication. And so it's like, I feel like if it takes a little longer, but we're also fixing these core issues that we've been wanting to fix, it makes it a little more worth it. So I have a feeling that pretty much this will be my October. If I'm done with this by the end of October, I'm gonna be very happy. And that's what I'm shooting for right now.

Ste (20:50.003)
That sounds good, that sounds good. Yeah, if it's gonna solve like a lot of the bugs we've been struggling with, it's definitely worth it. And in the meantime, I can show everybody what I was busy with. So basically, let me share my entire screen. Let's see if this works. Okay, here we go. Yeah, all good.

Adam (20:52.322)
you

Adam (21:15.488)
Yeah, I can see it. Yeah.

Ste (21:16.659)
Sure, okay, perfect. So Adam shared in the October report that I did a mockup for the dashboard and sorry, it's on the same branch. So it's a little bit messy, but yeah, I managed to like put this together. So this is like what the dashboard could look like. basically it has like these...

Adam (21:28.066)
Mm-hmm.

Ste (21:43.703)
lots and lots of widgets that you can freely resize, remove. So we've got four sizes. We'll have to see, guess, if we keep these names for them. The only one I'm having trouble with is the large because the small is this one by one, the medium is one by two, the large is two by one, and the extra large is two by two.

So let's remove this. Okay.

Adam (22:15.711)
Maybe instead of medium and large, we could call them like wide and tall and then extra large is large.

Ste (22:21.531)
yeah, yeah, yeah, that actually makes sense. Okay, let's do that. So, okay, we solved that. I actually like that. That's perfect. Here we go. Yeah, and yeah, it's really good. And I found like this drag and drop library and I managed to make it work well.

Adam (22:29.666)
You

Adam (22:34.474)
Yeah, it's really fast.

Ste (22:44.667)
I've been using for this dashboard the cursor composer modes because I don't think I could build this so fast but it basically like I told it what I wanted to do because I was very keen on having these like draggable and they actually work with the tailwind grid system so it's like pretty... they don't do like any like

Adam (23:09.41)
Hmm

Ste (23:13.945)
extra magic. It's just like a tailwind system. There's also like this fixed widget that will you have to move around if you're not a supporter. It will have a nice illustration here as well. you can also drag it at the bottom and just leave it like this. yeah, basically the plan if we know this is to like make the stats show like

all kinds of info related to your reading. So right now we've got currently reading. You can feature a list if you want, and maybe you will have like the completion percentage. So if you want to like show your own list and see how many books you've read from your own list, maybe you could see that. You could add a goal, you could add recommendations, and maybe for recommendations it can be like

selected depending on genre and maybe even other stuff. And you can also add the actual genres that we're working on. So this would be widgets that you can have on your dashboard. So every time you log in, you'll see that stat and it will also appear on the stats page, but probably in another form.

Adam (24:28.352)
Mm.

Ste (24:34.835)
Yeah, and I put upcoming releases over here as well. Maybe this is like coming soon since we don't have like much data on that or maybe, yeah, we'll like just have it there. So yeah, basically you can customize this any way you want. So I'm just deleting like stats here. It's also like saving them to local hosts here. So it's just, yeah, I figured like.

Adam (24:55.041)
you

Adam (24:58.645)
nice. Is it just like a JSON object, basically?

Ste (25:04.387)
yeah, I think so. basically, let's see. This is what it does here. It has like a cover layout and it has the widgets. It has a widgets registry. I mean, you'll have to clean this code up because it's not like, I'm guessing it's like very, very messy, but I just left it there because I guess cleaning code up is your thing. So.

Adam (25:17.94)
Mm-mm.

You

Ste (25:31.133)
Probably, you know, it's gonna make, I mean, hopefully it's gonna make things easier when you get to, you know, process it. Yeah, basically it's using like a JSON to store all these widgets. Nothing like really complicated. I told it to not make it complicated. So yeah, I'm hoping.

Adam (25:39.682)
Yeah.

Nice, yeah.

Adam (25:46.922)
Yeah.

Yeah, in the final version, we can just have that saved to our database, and then it'll persist it across multiple devices. So if you make a change to your dashboard on your mobile site, on your mobile app, or on one computer, it'll apply it to your other computer as well.

Ste (26:00.093)
Yeah.

Ste (26:07.803)
Yeah, that would be great. mean, yeah, I was wondering if that's possible or we could only like save it to localhost, but yeah, that's like way, way better. Yeah.

Adam (26:19.542)
Yeah, I think we'll need that anyways because on the back end, we'll need to find all the data that will pass to the front end. And so we'll need to know what widgets are being shown to fetch that data to pass it in.

Ste (26:29.016)
Okay.

Ste (26:35.021)
Okay, yeah, that makes sense. And with rails that should be like easier or...

Adam (26:39.944)
Yeah, yeah, that'll, it'll be, it'll be so much easier. And yeah.

Ste (26:44.185)
Okay, that's good to know. I was a bit worried about that because it's gonna be like, probably like a lot of data to sync. But as like an experience, I'm hoping, you know, it's gonna be like really fun to use because you can like customize the hell out of this. And yeah, it's gonna be like really, really, really nice to see what everyone's dashboard looks like and what they're building.

Adam (27:05.11)
You

Ste (27:13.935)
So you can even like just get a snapshot on this and share it on social. So I got like a little share thing. It doesn't do nothing. like, like, yeah. Does this. So yeah.

Adam (27:25.52)
Yeah. I was thinking that for some of these, that list component, for instance, I'm imagining that in some of these other widgets will need some kind of like settings for it. Like for a list, for instance, I was imagining that to show like your status for a list, right?

Ste (27:41.149)
Mm-hmm.

Ste (27:51.005)
Yeah.

Adam (27:51.33)
here's a list that you've created. You've read 18 out of 30 books on this list, maybe some covers of books you haven't or some kind of thing like that. So for that, you'd have to select from a dropdown to find your list that you wanna show there.

Ste (28:14.695)
True, yeah.

Adam (28:16.286)
And maybe for other things too that might need additional settings. That was the thing. I know we were talking about the idea of you hit Settings in that dropdown and it flips over and the settings are on the back of the card as one option. But I guess it depends.

Ste (28:32.175)
Uh-huh. Yeah, the settings could be there. Yeah, it could, mean, the way I see it, could either be that, and I think that would be like our first option. I'm actually gonna like implement like one version of this. So it could like flip the card or yeah, basically show settings instead of it. Or like...

after you load the widget. So let's see, you load the currently or let's see, add the list widget. Maybe it has like an initial state where basically you set up the settings. So for a list, would tell you, select the list you want to show up. And once you select it, just like persists that list. And yeah, maybe if you have to change it, you'd have to like delete that list.

Adam (29:00.418)
Hmm.

Adam (29:29.571)
Or maybe what if when you add it, it shows up like on it's like turned around. So it's like on its back. then if you go, and then once you complete it, flips over. And then if you go to edit, it goes back to that stage.

Ste (29:45.915)
Yeah, yeah, that sounds great. So basically over here we could add like an edit settings or just like a settings option and it will flip it and you'd have like contextual info about like this widget.

Adam (30:02.335)
Yeah, I could see that being useful for like, if you're adding a goal to the dashboard, like I want to show my reading goal. And maybe some people only want to show one reading goal. Some people might want to show like three reading goals.

Ste (30:11.453)
Yeah.

Ste (30:20.218)
Yeah, exactly.

Adam (30:23.21)
or like they have a page goal and a like total book school and they want to see them, see them both.

Ste (30:27.279)
Mm-hmm. Yeah, basically if you have like this goal and this goal, know, maybe this is a pages goal and this is like a books goal and you want to like show them side by side. So, you know, your dashboard is yeah, that that's perfect. Let's let's do it like this. So I'm gonna try to do it so that it's starts in settings mode. So that's basically the initial step and when you confirm your like choice for the widgets for the currently reading, for instance, it's just gonna be the currently reading.

Adam (30:38.498)
you

Ste (30:56.315)
I'm guessing.

Adam (30:59.348)
Yeah, maybe some won't even have or maybe maybe an option would be like the number of books you want to see or something like that. Or

Ste (31:08.355)
yeah, yeah, you could basically have like just one book or so you could be reading three, but you only want to see like your one list. It's also going to get I mean, for some of these I'm assuming, you know, we'll just have

like some options. So for instance, for the currently reading, this might be like a little bit too big, or we can just like in version one, we should just leave it and you know, if you wanna have your currently reading this big with just one book, well, it's your choice, but you know, you can make it smaller.

Adam (31:45.418)
Yeah. I was thinking like, sometimes I'll see someone who has like 20 books on their currently reading list. And for those cases, like, and like, if you go to your currently reading page on that page, we like have the update progress, version of the card where, know, you can drag it and select, like, yeah, update your progress.

Ste (31:54.226)
yeah.

Adam (32:14.508)
for this currently reading card, I'm thinking that this would be a great place for people to update their progress as well. But if they have a lot of books in progress, then that would be kind of tricky to show because it's like, I have a feeling these don't, like, it would be difficult to get them to grow based on content because that kind of does away with the whole grid system usefulness.

Ste (32:27.142)
Yeah.

Ste (32:39.909)
Yeah, yeah, I mean, it could, yeah, for a small like widgets, it wouldn't like show up properly. We can just like, I mean, I'd leave it up to everyone to figure out so that we don't create like lots of complexity for us. So, you know, you could, if you have like 20 books and you set it and let's say the currently reading has two options, you can either show like the

update progress option, or you can show only the covers of the books. So you can go or the book button. Yeah. Yeah, exactly. So we can have like multiple views like we did on the list page. So maybe for this one, you know, if they want to like have the update progress and they make this into a small widgets, you know, they're not going to be able to see much. So, you know, they can just make it extra large.

Adam (33:14.276)
or the book button and then you just update progress from the book button.

Adam (33:37.356)
That's true. Probably like small we show like covers horizontally, maybe in wide we do that as well. And in like medium we do that as well. But then in extra or in the extra large one, that's where we show the like the big versions of the cards that let you have the drag and drop option.

Ste (33:42.801)
Yeah. Yeah.

Ste (33:57.349)
Yeah, that sounds great. And we can do a scroll area here and you can like scroll through the widget and you have, if you have like 20 books, you know, you can just scroll through. That's like, I guess an edge case, but you could do that.

Adam (34:11.015)
Or one kind of crazy thought I just had is, you know, like on Goodreads, for instance, like if you're looking at your My Library page, it shows like a horizontal carousel of every book you're reading. We could do that here if we didn't want it to scroll, but then.

Ste (34:21.148)
Yeah.

Adam (34:36.928)
Like if you have 20 things to scroll through a carousel, that's not very user friendly. So we could always use like the covers at the bottom, almost like I'm imagining like your dock on your Mac as like an indicator. So you click on one in the middle and it like scrolls to that one and then you can update it.

Ste (34:42.277)
Yeah.

Ste (34:52.374)
yeah, yeah, exactly. Yeah, you could have like, yeah.

Ste (35:00.115)
yeah, that would be neat. That would be very cool. mean, yeah, that sounds great.

Adam (35:05.92)
Yeah, there's lots of options.

Ste (35:08.625)
Yeah, I mean, I think the next step for these would basically be to see like, these are all the widgets I was thinking, you know, could be useful. I still have to add some like stat widgets over here. But basically, I think this is a pretty good like first version. What do you think? Are there like any things that pop out to you when?

you're looking at like this list that we could add over here.

Adam (35:44.03)
Yeah, good question. Let me see. So.

Ste (35:46.791)
like something you really wanted or like I took the feedback we had from the dashboard survey and basically based it off of that. But I don't know if I missed anything.

Adam (35:58.645)
Mm-hmm.

Adam (36:02.946)
I

I have a feeling like maybe like recently read, like I have a feeling I've known people that like wanna see the books they've like just recently completed because it helps them give context for like, wait, there's a recently, I didn't even see that.

Ste (36:16.007)
Uh-huh.

Ste (36:21.157)
Yeah, we go. Yeah, recently read.

Adam (36:25.664)
Yeah. Let's see, is there anything else?

Ste (36:32.689)
I'm guessing some stats, yeah, I guess that's like coming up next to figure out like which stats we can actually show here and it would make sense.

Adam (36:43.158)
Yeah, I have a feeling a lot of the other things are like, yeah, stats and.

Yeah, there's the network activity one, which I'm imagining is like, what my what? Yeah. it's the feed. I was thinking like, what my friends are reading, like, you know, maybe like, here's, here's some usernames and the book icons next to them on what they're reading.

Ste (36:57.927)
Just the feed. Yeah.

Ste (37:05.082)
yeah, yeah, basically, yeah.

Ste (37:10.385)
Yeah, exactly. So basically, like what's going on in your following feeds and if you don't have like any, maybe we could do user recommendations at some point here if you don't have like any friends and also in the feed. yeah, basically it would be like a shortcut to the feed since we're like removing that as like the landing page.

Adam (37:29.41)
Hmm.

Adam (37:34.336)
Yeah, because we don't want it to go away. just want to have this be a jumping off point to lots of different places on the app. And the feed would be one of them.

Ste (37:42.405)
Yeah, yeah, yeah, exactly.

Adam (37:45.718)
Yeah.

Adam (37:50.912)
Yeah, let's see. Yeah, I mean, I think that's good start for sure. Like, I feel like once we start using it, we're gonna find the things anyways, but this feels like enough without trying to go overboard.

Ste (37:59.887)
Yeah, exactly.

Ste (38:05.263)
Yeah, yeah, yeah, yeah, I mean, it's more, these will have like lots, lots, lots of options, I'm assuming. The next thing would be like to see what common things we could use. So I'm thinking like a list shows books, recent read shows books.

Recommendations shows books, upcoming releases shows books. So maybe we can like find a common way of showing those with like the same options. But yeah, obviously for current reading, you'd wanna like have like an option to update progress as well. they might be, some might have like extra settings depending on what the widget is. But yeah, all in all, like this came together like surprisingly.

Adam (38:51.33)
You

Ste (38:52.605)
surprisingly fast. I'm hoping we could get it out with the stats. And speaking about stats, let me go to this page. So basically...

Adam (38:59.466)
Yeah

Adam (39:03.429)
We might even be able to do the dashboard first or I'm just thinking like, like if we wanted to like, you know, we've been talking about like putting them together. Like, you know, if we, if we were to start one and finish one first, what do you lean towards stats or the dashboard?

Ste (39:10.877)
it.

Ste (39:16.125)
Yeah.

Ste (39:27.015)
Well, I think this is closer to us being able to ship it because the stats might take a while longer just until we figure out the ideal way to show stats and what stats to show. I could, yeah, I think I might lean towards the dashboard. I don't know what's your feeling on this.

Adam (39:53.194)
Yeah, I think it would be easier to, it's also like the stats would be part of the profile. And then we've talked about like other profile related customizations as well, like making it bigger, adding the header, changing the background. yeah. nice.

Ste (40:05.563)
Yeah.

Yeah, let me go to like for the stats page. I actually like started with that. I mocked up like, yeah, what's what we did with the with the header. So basically this would be like your custom cover ideally. And yeah, you'd have like a profile info over here. Here you'd have your books and here you'd have like the actual the actual stats. And I just walked up like this one, which

is like

Adam (40:40.452)
cool.

Ste (40:42.003)
Yeah, it's I managed to, well, I still like work in progress. The styling is crap. So basically I also managed to make it so yeah, you just pick a date. Yeah. And yeah, and it actually, I asked it to, I asked Claude.

Adam (40:54.21)
Hmm.

Nice. Wow, that's looking great already.

Ste (41:06.963)
to make it so that it changes the URL. So I'm hoping we could do stuff like this. We could, right? With like routing. Okay, that's great. So.

Adam (41:13.182)
Yeah. Yeah. That's a, that's pretty much exactly what I was thinking. Like if we make that universal and yeah, it's kind of like whatever period we want, could just do in the URL.

Ste (41:29.319)
Yeah, that's great. Yeah, and changes this well. Not the way it should, but anyway. And I managed to make that graph in the background as well. It uses our Nevo slider, which is great. So basically, mean, you're probably the same as the dashboard, have a lot to work on the structure of this.

because I don't know if it made the components right, but yeah, it's, I guess, readable. It just generates random chart data now and let's see, it has the background chart over here. So it's just like a responsive line. So it's using responsive line. Yeah, I told it to use Nivo, so it's using...

Adam (42:02.924)
Yeah.

Adam (42:13.536)
Yeah, how does the background chart work? I'm curious. just Nevo.

Ste (42:25.703)
this with like options. I was surprised because it basically nailed this the first time and I just offered it a screenshot of our actual designs and it figured out, you know, how to make the curve, how to, yeah, basically set all these things so that, yeah, basically generated this. It also positioned it as well. It's got like 20 points now, but you know, we can make it.

Adam (42:32.78)
Thank

Adam (42:48.706)
That's cool.

Adam (42:53.154)
You

Ste (42:54.951)
We can customize it.

So yeah, this is what I'm working with. It's like coming together pretty fast. I just have to iterate on it and it's doing the stuff I'm asking it to do. So yeah, I'm also learning a lot of stuff in the process. Yeah, I just made placeholders for these and...

Adam (43:10.818)
you

Ste (43:25.841)
You probably like have to organize all of these, but at least it's like readable and you know.

Adam (43:31.946)
Yeah, it's looking great. What is the width you're using for the container page? it LG for the?

Ste (43:35.976)
Yeah.

Ste (43:41.064)
I think it's LG. Let me see. So stats. Yeah, I think it's the actual like stats page layout. yeah, LG.

Adam (43:51.936)
Yeah, that's good. Cause yeah, that's kind of our goal with to, to make it too. So might as well design it from scratch.

Ste (43:58.786)
yeah, could actually like, do you think we could like implement it from like the dashboard then? Because the dashboard is like LG as well. So, yeah, it's looking great on laptops. So.

Adam (44:09.046)
Yeah.

Adam (44:16.288)
Nice. Yeah, after spending so much time with the SM small width that we're using, it seems like so much extra space. I have to start thinking in multiple columns again.

Ste (44:23.815)
Yeah.

Haha, yeah.

Ste (44:32.152)
Yeah, I mean, the grid works pretty well with the dashboard and some stats, I'm guessing, will make like... So this is a four-column layout and basically we can pass it in as a prop and if we want widgets to span two columns...

or three and have like a small one here, we could do that. But yeah, I guess we'll have to see. I just wanted to like dive into the code so it's like more, you know, I get a better feel of how it actually looks like. And yeah, so far, pretty, it's going pretty well.

Adam (45:20.62)
Thanks.

Ste (45:21.841)
Yeah, let me stop sharing this. Yeah, so.

Adam (45:25.398)
Yeah. What a, have there been any like parts you've hit up against where it's like, how is this even going to work?

Ste (45:34.275)
Well, I'm actually like asking Claude whenever I get stuck. There was like when I was trying to figure out how the dashboard widgets would scale and how to adapt that info. I was a bit unsure of how it could like structure it, but it just...

like in the component, has like separate, it made the component and depending on the size you give it, it just renders different content. And I'm guessing, you we could duplicate that content or tweak it if it needs tweaking or replace it altogether if it's like, yeah. If, I mean, you probably could like come up with like a smaller way to do

to do that, but at least there was that. I wasn't sure how it would adapt. I was thinking you'd have to pass a million props or like, yeah. But yeah, it just rendered different content. If it's SM, you render this content. If it's small, you render this. If it's wide, you render this. If it's tall, you render this. So it's not adapting the same content.

But yeah, I guess we could do that as well. This was just like the simple, yeah, sometimes it's offering me like very simple solutions which like evade me completely. yeah, very, very good to go through that process.

Adam (47:23.052)
man, how often does it like this cloud end up breaking the app or the build completely?

Ste (47:32.084)
No, well, yeah, often, yeah. At least until it gets some of the components right. But I can just tell it to solve the warnings and it does that. Sometimes it solves it badly and sometimes I have to go back. So yeah, I have to take it step by step sometimes when I want it to do something.

And sometimes when I don't give it enough context, so I don't tell it what I want to use, it just implements something completely new and it brings a library or something else. And I'm like, crap, OK, don't use that library. And I don't think it can delete files. So it sometimes creates stuff and I have to delete it manually. that's a bit of a... But we've come a long way since like two years ago.

Adam (48:16.861)
Mm-hmm.

Adam (48:26.122)
Yeah, it's, it's crazy to think it was just like last year that, you know, LLMs really broke out in the world.

Ste (48:32.594)
Yeah.

Yeah, it still feels like they were here. If they continue on this, I still haven't used the OpenAI 01. I heard that's good as well. yeah, mean, if you really know what you're looking for, they're really helpful. They still mess up in a lot of ways, but they're very useful.

Adam (48:38.572)
Yeah.

Adam (48:54.476)
Yeah.

Adam (49:01.11)
I was reading about there's another editor that's not cursor. It's like, was it like open code or something like that? But the idea is it's another editor and you can tie it in with any models of your own. So you could download a model and run it completely offline with a model to run everything, which yeah, it's pretty neat idea.

Ste (49:21.682)
Mmm.

I think I've, yeah.

Yeah, that's, mean, I think that's basically what we're going to see in the future. Basically have your own hosted or integrated LLM and be able to do that. And yeah, it's very, very exciting. I've also seen like, we're also...

Adam (49:43.062)
Yeah.

Ste (49:53.853)
thinking of where could reading go. I was seeing the new meta glasses and that's like for reading, think that's gonna be a really good use case because those are way easier to use. And basically if you can...

Adam (50:05.346)
you

Ste (50:12.487)
them up to like a voice model. can also narrate the book and you can also like ask it about the book. It's like reading the book with someone, which is a bit, you know, uncanny, I guess. But, yeah, some.

Adam (50:25.89)
Yeah, it doesn't feel like you're like off in your own world like you are with the Apple Vision Pro headset. So it feels like you can be in the same room with someone and you're still in the same room with them. I mean, I think the pass through on the Apple Vision Pro is amazing and like it's an insanely insane device, but it lacks the human ability that you get from having just glasses.

Ste (50:38.482)
Yeah.

Ste (50:55.761)
Yeah, yeah, and I mean, there are some like pretty chunky glasses, but still, you know.

Adam (51:03.009)
Yeah. I mean, that's where it's at now. Like I can't, I wonder where it'll be at in five years. Cause yeah. Yeah. Augmented reality is one of the things that I'm most interested in. And like, as a concept, like just the idea of being able to walk out around in the world and have it say like, that tree is a, this kind of tree, this, you know, or, you know, I just have it annotate things like, this building was built in 1927. Here's the history of

Ste (51:08.978)
Yeah.

Ste (51:32.218)
Yeah.

Adam (51:32.8)
Like it opens up a new way of seeing the world, which I am very excited about. But there's also downsides of that if it's like Black Mirror episode where it's like, this person has a low reputation. Don't talk to them.

Ste (51:49.283)
I'm betting it's gonna be used like in the good cases and the bad cases, you know, just like the internet. mean, look at what we can do like for this kind of stuff. But you know, look at what's like bad stuff is out there as well. Yeah, Govind is saying maybe something like the Kingsman glasses, meetup, like, yeah, I mean, yeah.

Adam (51:57.89)
Yeah.

Adam (52:16.002)
convenient.

Ste (52:18.548)
I can't wait to actually like try some design. I don't want the meta ones I really sing but Yeah, I don't think I get to have them in Paris in Europe, you know even the LLMs like take a little longer for for approval not like the best move they made but Yeah, I'm using chat GPT right now. Like you said, you know taking photos of stuff like diagnosing my plans or like

doing stuff in the house. So if I get that through glasses, that's going to be like, well, OK. I mean, I don't know what more could I want. So if they actually nailed that sometime, at some point, I'm going to be really impressed.

Adam (52:56.054)
Yeah.

Yeah.

Adam (53:04.162)
It's kind of like, you you'd ask Siri a question and you're talking like verbally, but being able to like ask a question and like see it in like a little window over here. Like yesterday I was making a cocktail and I looked up the recipe. If I could just say, recipe for blah and it just like pins it over here.

Ste (53:23.079)
Yeah, exactly. Yeah, that's going to be like, mean, everybody's going to be wearing glasses, but everybody's on their smartphones now. And I'm really curious because for us, for books, like LLMs and AI-generated content and reading, it's going to be like a whole new thing. I don't even know what...

Ste (53:53.199)
what's going to happen to it, but I'm hoping we'll be thinking about this after we get the dashboard and the stats done.

Adam (53:56.245)
Have

Adam (54:03.939)
Have you seen the, what is it, the Google Notebook LLM?

Ste (54:10.383)
the one that makes a podcast out of everything. I've actually, didn't try it. Did you try it?

Adam (54:12.991)
Yeah.

No, I mean, unless this right here was created by the thing you're listening to. mean, you never know.

Ste (54:20.531)
Yeah, exactly. We could be LLM generated. Wow. I wouldn't like, I mean, as I was using this, it gets scarily good sometimes and I'm like learning now, but they put it in Figma. So they're like, basically like it's learning what designers do. It's learning what steps.

are needed to create a good design. It's already seems like to be able to like reason about what you want. It's basically back and forth, but there's a really nice comic a friend of mine sent me. I'm gonna give it to you because it's like a bit, it's a three-panel thing. But basically the idea is that it's a robot asking a human.

like the human's telling it, so you can do this, what's so special about that? And basically the robot convinces the human that, know, what they're doing is basically like the same thing. So it's like back and forth, like quick back and forth in your brain and basically like, that's like your decision process. So it's kind of like simulating that. I was thinking, shit, okay, maybe that's like how simple it is for us. mean.

I'm kind of like doing that. basically I'm saying something then I'm asking myself that I'm saying something. So basically if you could replicate that, that's like.

Adam (55:52.258)
Yeah, I think I saw something like that for like the breakdown of the, the O like the, is it? Like the O one one where it's like, yeah, I was like sequencing it out. like, I'm going to try this. And then it tries it and it's like, no, I'm going to iterate and try this. So it was like showing the showing your work mode was, was fascinating.

Ste (56:00.529)
Yeah, that'll work. Yeah.

Ste (56:12.529)
Yeah, yeah, that's also, that's like, yeah, that's a bit like, okay, is it actually gonna be so, you we're joking now that it's gonna replace because obviously, you know, it's gonna power like power up and speed up development, but maybe at some point.

Adam (56:32.546)
Yeah. I mean, just the idea, like, you know, when, when I was in high school, for instance, and I remember there were some, some books I like didn't read in time. And so I had to grab the Cliff Notes for right before a test. I imagine like nowadays you could say, I'm going to copy this code, put it into a Google notebook and say, make me a podcast in this form, describing everything that happens in the book. And then I listened to that on the way to school and that's.

That's downloading the book's info to my head. It's not reading the book, it's not getting the full feel of the book, but it's getting the blink list of it. It's getting the cliff notes of it.

Ste (57:06.556)
yeah.

Ste (57:14.001)
Yeah, exactly. Yeah, yeah, that's actually one of the good use cases. Nice. Well, I think we're like almost out of time. So I guess these were like the updates that we're working on. It's like we're trying to ship these like as fast as possible. We know, you know, we've been...

like building up to all of these features, but I think the migration to Rails and basically being able to get at least like a first version of this out the door and iterate on it, I think it's gonna sync up well.

Adam (58:03.626)
Yeah, I think so. Yeah, I think the dashboard we can probably write in as like the first thing that we can do rails first, which makes me think once I get to a good point on the inertia JS branch, what I'm planning on doing is merging it back into main. And then we could probably move the dashboard to the rail side and then we could, and the stats stuff to the rail side. And then

Ste (58:12.637)
Yeah.

Adam (58:32.14)
we can just continue iterating on it there because it won't be deployed. Even if we deploy it, it's not gonna be the site that people use. So we could basically build it up, keep deploying it, and then when it's ready, we just switch the entire site over to Rails. Cool. Yeah, once I get to the point I merged the inertia branch in, we can create like a

Ste (58:45.789)
True, yeah.

Ste (58:52.283)
Yeah, that sounds great, yeah. Yeah.

Adam (59:01.046)
you know, another branch or maybe it'll just keep being the inertia branch and then we'll just keep merging that into main whenever we're at a good point. Yeah.

Ste (59:11.281)
Yeah, that sounds great. I'm going to go ahead and do the settings for each stat and basically start building each one. I'm going to use like mock images and mock data, but if we get the feel of like each component, how it looks like in its final like mode, then you can come in with the data and I'm guessing, you know, it's going to be like pretty fast to hook everything up.

Adam (59:17.986)
Hmm.

Adam (59:40.544)
Yeah, yeah, yeah, if you use the if you're able to use like the book cover component for like the book covers, that would be good. That's that all.

Ste (59:49.841)
Yeah, I'll be trying to do that. Sometimes I'm getting some errors that are related, I guess, to server components. But we can maybe sync up on Discord for that and maybe make some mock components based on those client components so I can use them easier. But yeah, we can sync up on that and see. I'll try that. Yeah, use the book covers.

Adam (59:59.97)
you

Adam (01:00:15.778)
Sounds good. Yeah, or I could also help like maybe in the, yeah, with Rails we could have it like generate like, you know, X random books and just send those over and then it would show the right, those random covers or something like that. Like, so it's using the real thing but with mock data instead of real data.

Ste (01:00:32.334)
yeah, yeah, that could actually work as well, yeah.

Ste (01:00:40.613)
Yeah, yeah, that would actually work. Nice. Maybe we can sync up on that and yeah, make it so it's easier to mock stuff up. Perfect.

Adam (01:00:49.663)
Sounds good. Well, good talk, stay. I will talk to you next week. Have a good one. Bye.

Ste (01:00:56.891)
Yeah, perfect. Thanks everyone for watching. Bye bye. See you next week. Bye.