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.95)
Hey, hey, how's it going?
Ste (00:03.365)
Hiya, it's going good. How's it going on your end?
Adam (00:08.286)
Pretty good. Just have some friends coming over later to hang out and get some dim sum and watch a movie. So mostly just chilling for the most of the day, doing some house cleaning, you know, like you normally do before people come over.
Ste (00:19.729)
Okay... No... Haha, yeah, I know what you mean. What movie are you watching?
Adam (00:28.396)
Not sure yet. I think we'll figure it out together
Ste (00:31.561)
Okay, I was trying to watch old I saw it on Netflix and Well, no spoilers, but it's I haven't seen a movie like that in a while You know, it's about the I'm not gonna give you any spoilers. But yeah, it's it it Yeah
Adam (00:48.246)
Is that the one? Is that set on a beach? Okay.
Ste (00:52.221)
Yeah, it's the island that makes you old. It's about that, yeah. But oh, man. Yeah, it's something else. Remind me of that movie Snakes on the Plane, you know, when there's snakes on the plane and everybody's freaked out and it's so random. I mean, why are there snakes on the plane? It gave me the exact same vibe.
Adam (00:55.743)
Yeah.
I
Adam (01:06.478)
Hmm.
Adam (01:17.73)
interesting. One movie that old reminded me of is Time Trap, which was, it's a really good Netflix movie about a cave where basically time moves differently within this cave.
Ste (01:19.002)
Yeah.
Ste (01:34.845)
Okay, that actually sounds yeah more interesting you have to see this I mean, yeah, I'm curious I haven't like But yeah, that sounds great. It actually reminded me of lost. Have you seen lost?
Adam (01:48.14)
Oh yeah, I'm a huge Les fan.
Ste (01:50.693)
Okay, okay, yeah, yeah, I feel you. I'm a huge Lost fan as well. I was thinking of actually like Watching it. I think the fourth time. Yeah Yeah, yeah, it's it's been something I was watching it live when it appeared and I was like what like a teen and yeah, it's Kind of marked my existence. Who's it directed by?
Adam (01:59.998)
Oh, wow.
Adam (02:07.982)
I'm going to go ahead and close the video.
Adam (02:15.126)
JJ Abrams? Yeah, yeah. I was also watching that one live and listening to podcasts every week to try to get the, it wasn't really spoilers because no one knew what was gonna happen. It was fan theories on what's gonna happen. And that was half the fun of it.
Ste (02:16.353)
Yeah, yeah, big fan.
Ste (02:32.577)
Yeah, yeah, exactly. Yeah. Oh, yeah. The hype. I mean, I wish something would come out at that level nowadays. But yeah, that was like pre internet. I mean, you still had internet but it was like, free, like, so much content all over the place here. So yeah, I had a different feel to it.
Adam (02:54.794)
Yeah.
Adam (02:58.902)
And especially since most like really good stories that are adapted to TV and movies tend to be based on books. So you can like, you can just read the book if you're curious about how that story is going to end. Like there's a, a silo right now on Apple TV, which is this futuristic, whatever story where, you know, everyone is living in a silo, if they go outside, they die. And it's like, how did this world happen?
Ste (03:12.037)
Yeah.
Adam (03:29.122)
Like what happens when you go outside that makes you die. Like, you know, and my, my wife's, I read all the books for it. My wife hasn't. So we're watching it together and she's like giving all these theories about what she thinks happening. And I'm like, yeah, yeah, that's a good theory. Yeah. Yeah. Trying to not give any spoilers.
Ste (03:44.113)
Haha! That's great! Yeah, I actually wanted to watch that one. Okay, I actually added it to my list. Didn't know it was actually like a book adaptation. I have to search up the book as well. I'm wondering if we have it on hardcover. I mean, we must.
Adam (03:57.71)
Yeah.
Adam (04:02.062)
Uh, it's called wool is the name of the book. Um, it was, it's actually pretty interesting because the book actually started on, uh, his blog, like he was, he was writing individual chapters and people loved it so much that he packaged it into an ebook and sold that, uh, like straight to a consumer on like the Kindle store. And it got so much publicity. It became like a best seller. And then it got picked up by a publisher.
And then it was turned into an Apple TV series. So all from his blog to an Apple TV series.
Ste (04:33.829)
Wow.
Ste (04:37.189)
That's crazy. Yeah, what a success story.
Adam (04:42.667)
Yeah.
Well, what uh, what have you been up to lately besides watching old
Ste (04:46.106)
Thank you.
Ste (04:49.973)
Well, I had my parents over last week, so it was kind of intense, but good as well. I did lots of walking around and yeah, other than that, just chilling and yeah, keeping hydrated, keeping moving. I started working out. I have a bit of a sore, like everything.
Uh, well, yeah, that's good.
Adam (05:23.722)
What's your like workout approach?
Ste (05:28.597)
I mainly go to the gym and watch others, what they're doing. So I kind of like got my routine. It's a really nice gym because it's provided by the council over here. So if you pay your council tax in London, some councils offer you free gym on the weekends. So I'm over there with half the neighborhood. Yesterday was a bit, yeah, not so crowded, but usually it gets crowded, but it's really nice because.
And you can see people who are really into working out, like bodybuilders and those kinds of people. And also, I don't know, everyone, every age range, every, like, yeah, so it's interesting. And yeah, I just get glimpse of exercises and I just. I'm not sure if I'm gonna be able to do this.
Adam (06:16.59)
this.
Ste (06:18.97)
Yeah. Yeah. I saw Bruce Lee's gym schedule on Twitter. So he had like this list of things he did on in his gym. And that was kind of nice. I was going to look up the exercises, but yeah, they seem pretty complicated. So, yeah. But.
Adam (06:42.114)
Yeah.
Ste (06:43.301)
Pretty good. It wasn't that long. I was expecting Bruce Lee to have a much longer list. It was like 10 things and just a bunch of reps. Well, you know, maybe it's the repetition. Maybe it's the consistency.
Adam (06:50.126)
Yeah. Huh.
Adam (06:59.042)
Yeah, like if you can, I'm sure if you can do those 10 things with massive weight perfectly, then you're probably a very well-rounded, flexible person. Yeah.
Ste (07:09.453)
Yeah, exactly. Bruce Lee, basically. Nice.
Adam (07:13.31)
Yeah. One of, one of my favorite things at my past job was they offered like weekly yoga. So they would actually have like a yoga instructor come in and they like had one of the conference rooms where, um, like we would all just go in and do yoga every week, like mostly like stretching yoga. It wasn't, it wasn't like yoga that would make you sweat, but, uh, I realized that after just years of doing that, how much more flexible I was compared to not.
Ste (07:36.056)
Okay.
Adam (07:42.574)
just because I wasn't stretching on my own. So it was like, it gave me that space and time every week to make sure I focused at least a little bit on my own stretching. Definitely recommend.
Ste (07:53.373)
Yeah, yoga is great. I mean, yeah, yeah, yeah, yeah. I used to do it more often, but I usually do it at home, maybe once a week. But for working from home, yeah, yoga is the best. Also coupled with a little bit of meditation, I do that sometimes, yeah.
I'm breathing. Sometimes when I work, I forget to breathe. So that's like really important. I don't know if you do that as well, but I have to like remind myself. I'm sometimes like just like caught in the middle of something and I like at some point just gasping like, and I realized, oh, I forgot to breathe. That's funny.
Adam (08:34.318)
Yeah, you're like just really into it. And so do you associate that with like being in the flow of what you're working on or does it happen at like different times?
Ste (08:37.366)
Yeah.
Ste (08:43.977)
Yeah, probably. Yeah, maybe it's a byproduct of just liking what I do at that specific moment or getting really into it, I guess. Yeah, I guess that's it.
or just like, I don't know, not focusing on actually breathing.
Adam (09:04.254)
Yeah, I was trying to do like a Pomodoro stuff for a while, you know, the like 25 minutes on, five minutes off, but I ended up wanting to go much longer than 25 minutes and like taking that intentional break was like bringing me out of my flow earlier. So I don't think I figured it out yet, but sometimes now I'll like go, you know, an hour, two hour, three hour of just like heads down, like in the zone work.
Ste (09:09.003)
Mm-hmm.
Ste (09:22.519)
Ha ha!
Ste (09:29.78)
Okay.
Adam (09:33.438)
And then when I get out, I'm like, as soon as I like, actually like put my head up from it, I realize I'm exhausted. But it's like, well, I'm in it. I don't.
Ste (09:41.102)
Well, yeah, that's pretty good. That's a chunky pomodoro. That's like one of the longest pomodoro I've heard about, but it's good, you know, whatever works. Yeah, it's funny how it works so different for all of us, including with reading.
Adam (09:49.271)
Thank you.
Adam (09:59.02)
Yeah.
Ste (10:02.625)
I always wondered like how much I usually go like 15 minutes at least two minutes break, 15 minutes at least two minutes break. And after an hour, I kind of like feel the need to just like take a longer break or.
Adam (10:02.815)
Yeah.
Adam (10:18.154)
Hmm.
Adam (10:22.45)
Yeah, I, for me, it definitely depends on like what type of book I'm reading. Like if it's one where it's like, uh, I'm constantly wondering what's going to happen next, I'll end up reading like way more chapters than if it's like a nonfiction book where I'm like, okay, let's just read one chapter, let's learn one thing and then, then call it there. Like, uh, yeah.
Ste (10:28.11)
Oh yeah, sure.
Ste (10:42.841)
Yeah, yeah, some books definitely go faster than others. Right now I'm reading Dostoevsky and it's like the Gulag Archipelago, which is a huge like book with small writing. And it's like really intense because he details like a lot of what's been like going on. It's also gruesome. So I wouldn't like recommend it if you're, I mean, it's really tough, I guess. Boy, I've been struggling with it for the past two months and I'm just like.
and that's like 15 minutes, I have to take a break. Just like look around, go like, woof.
Adam (11:18.672)
Sounds like an intense read.
Ste (11:20.501)
Yeah, yeah, it's pretty intense. I have to get others like easier, like less like tougher ones like mentally I guess from my book, from my list. Yeah.
Adam (11:36.31)
Do you have multiple books going at once or do you focus on one at a time?
Ste (11:40.453)
Yeah, unfortunately I have multiple go. I have like three right now and I'm struggling to finish all three. Maybe I shouldn't, maybe I should like just focus on one, but I usually have like one, which is like longer and then I start like others.
Adam (11:59.475)
Yeah. Yeah. I have like one audio book I'm listening to and then like one physical book I'm reading. And I feel like I need like an audio book, then like a nonfiction physical and like a fiction physical. That way I have like, you know, something like when I'm not in the mood to pick up like a nonfiction, like right now I'm reading a nonfiction physical book. When I'm not in the mood to pick it up. I feel like if I had like a fiction physical book, I would probably read that.
But instead I'll like, you know, go online or do something that's not reading. So it's, yeah, it's like, yeah.
Ste (12:27.845)
Yeah.
Ste (12:32.781)
Yeah, that actually sounds good. Yeah, actually I haven't thought about it this way. I should start getting into audiobooks more.
Adam (12:42.17)
Oh yeah. I, I love audio books. Like I, um, like I think before audio books, I wasn't even that much of a reader. Like I'd read occasionally, but it wasn't very common. And now, now it's like for, for the last couple of years, I was listening to many more books than I was reading. Now it's probably starting to balance out more to 50 50, but yeah, it gives me something to listen to when I'm at the gym or, um, out doing errands.
Ste (13:12.81)
No, okay.
Adam (13:12.957)
I've switched from podcasts to mostly listening to audiobooks when I'm out and about.
Ste (13:16.689)
Okay. Oh, that's really nice. Yeah. I should do that because I don't have like the, I mean, I have the attention span for podcasts, but sometimes I don't know. I'm not like in tune with the actual like tempo. So I just stop. So maybe with audio books is different. Yeah. I have some audible credits. Maybe I should like check those out. What platform do you usually use? Is it audible or something else?
Adam (13:40.248)
Yeah.
Adam (13:45.558)
I used Audible for quite a few years. Lately, I've been using Libro.fm, which...
Ste (13:52.729)
Limbo done, okay, I forgot.
Adam (13:56.414)
Yeah. And it's worked out really well.
Ste (13:59.661)
It's India as well. Okay. Nice.
Ste (14:06.681)
Yeah, this is very good. I'll check it out.
Adam (14:07.714)
And, uh, and also just, uh, a local bookstore or local, uh, library. Um, like we can check out audio books from our library. And so we, there's a, there's a wait list. So sometimes you'll, you'll request it and then you won't get it for like four months. And then you'll have two weeks to read it once you finally comes on available.
Ste (14:31.265)
Okay, that's actually like an interesting challenge. I should check out if there are any like libraries. They must, there must be in London. Yeah, I'll actually look that up. Okay, that's really nice. And the two weeks like since, I mean, if you have that deadline, you're I guess much more likely to actually like do it, right?
Adam (14:49.405)
Yeah. I just had something come up and actually the same book came up for my wife and I, because I guess we both were at a similar place in line for it. So now we're both trying to make it through in 14 days.
Ste (15:01.573)
Wow, okay. Intense, that's really good. Okay, so on the hardcover fronts, what should we talk about today? Did you have anything in mind?
Adam (15:07.351)
Hehehe
Adam (15:16.038)
Um, I was, the only thing that was on my mind was kind of talking about the component library, but, uh, if you have anything else, uh, that can also wait, but anything on your mind.
Ste (15:27.417)
Yeah, now we can definitely talk about that. I started going through that doc, so to get a little bit of context for everyone watching, we have been building a component library for hardcover that will make it significantly easier for us to deliver features, because right now many of the things that we work on, because that's the way it goes, we've built from scratch.
And I'm guessing that would put faster pace of us being able to deliver and higher consistency. So you'll be seeing the same elements on the site, throughout the site. And we're trying to tidy that up because one of the problems is that there's a difference between design. So we use Figma for design.
the components are in Figma and the way components are coded on the website. So we have...
Ste (16:35.609)
what's it called, GAP or like this. They're not in sync. A drift, yeah, exactly. Yeah, they're out of sync. There's a drift there and we have to keep that in check. Even though we're a small startup and there's not many people working on the same components, it can get incredibly complex at times.
Adam (16:40.042)
Yeah, a drift.
Adam (17:05.034)
Yeah, there's, and a lot of the pages were made before we had like Figma as well. So a lot of them, we're kind of doing that normalization step now. And yeah, that'll, like I'm excited about what it'll mean because right now, every single page kind of has its own little style quirks and there's very little reuse. So yeah, I'm.
very pro with us normalizing it because it's going to make maintenance and development of new pages and even fixing bugs just a lot easier.
Ste (17:43.341)
Yeah, yeah. From one point of view, I was curious about fixing bugs because I had like this instinct that, okay, having the components, basically does it allow you to pin or to isolate the errors that might be related to that component better if we have everything as a component or what's the actual help there?
Adam (17:44.362)
So, yeah. So.
Ste (18:11.657)
I was always wondering how that translated.
Adam (18:19.572)
It would mostly be for style and normalization. If we realize that the color we use for a secondary color, like an offset color, is instead of being white and black for light and dark mode, it's gray 200 on dark and gray 700 on light.
And we want to change that color across the site. Right now, we hard code that color basically everywhere. So changing that color means going in and finding everywhere we have text that's secondary and changing that color. While if we have a component that's just like text, variant, secondary, then we change that color in one spot and it changes it across the site. So mostly it's
that normalization part. And the bugs often come in where, like maybe we didn't include what the light mode color should be at one spot. And so there's a bug on that page because we're not taking into account light mode. While if we use the component, we would always be taking into account dark and light mode.
Ste (19:35.793)
Okay, gotcha. Yeah, yeah, yeah. That makes sense. Okay, nice. Well, should we jump?
Jump in the dark.
Adam (19:46.334)
Yeah. Or do you want to start in, yeah, in Figma and...
Ste (19:52.705)
Yeah, that's perfect. Let me share the screen. OK.
Ste (20:00.453)
Here we go.
Ste (20:03.905)
So this is the component library we have in Figma right now.
Adam (20:04.26)
Mm. Mm.
Ste (20:11.717)
These are the, I guess, primitives that we've been using to build all of these pages. So all of these are components, these are avatars. Figma makes it like really easy to make variants out of design elements. So this is a title, this is a cover, you can change the...
size of the cover and these would be reflected on the actual code on the website as well. These are some tabs. So everything you see there, you can see here. And...
Ste (20:56.281)
Yeah, some of them have light mode and dark mode. Some of them don't, which I'm supposed to fix really soon. And we've also got some more complex components, which are components that are based off components. So you see an avatar here. These are the headers. This is the footer of the website. This is the nav bar. So this is how we're building everything. And this is how it's organized.
And right now we have to see which of these are actually used on the website, which is, let's see, it was here somewhere. Here we go. Yeah, so we have all of these. Sorry, if you hear something in the background, that's my cat's destroying its cat grass for some reason. Oh, well, she sometimes does that.
Adam (21:48.718)
Thank you.
Ste (21:56.67)
Yeah, so we have the buttons, we have the call outs and I started putting some of the things we have in Figma over here. And I actually wanted to ask how is it better to list these? Because the way I did is I put the HTML element over here and I also included the...
Adam (22:11.197)
Mm.
Ste (22:24.613)
potential props for that according to how they're laid in Figma. So for instance, for a tag, a tag might or might not have an icon. It might be dismissable or not. So for instance, if you added that tag yourself as a user, I'm guessing it could be dismissable. It could be set to have...
some sort of privacy. So, for some tags that appear in some places, you might want to set that. It could also have this number. So, let's say the tag is used on a book. It would show how many people tagged that book with that specific tag. So, the way I was thinking of doing it is actually having all of these props correspond to all of these. But...
this of course might not mean, or it might not be like the best way to treat them in code. So yeah, I'm hoping you Adam can tell me if this is actually like useful or we should just like put them the way they are.
So just tag.
Adam (23:40.442)
Yeah, we'll probably have like one that's just tag and it maybe has a, like the yellow variant and the gray variant, which would probably be like normal and I don't know, active, whatever, whatever the yellow one we call maybe accent. Keep it, keep it with our, our other one. And, uh, and then we create another.
Ste (24:02.028)
Mm-hmm.
Ste (24:06.487)
Oh yeah.
Adam (24:10.374)
another component called like Book Tag and Book Tag takes in a tag element and that tag element would have the icon, it would have the count, it would have the spoiler and then maybe it could have it could take in children so it would take in like the actual children to
and one of those children could be the close button. That way the close button is managed by the person who uses the tag rather than the tag itself.
Ste (24:49.837)
Okay, that makes sense. So, okay, that's perfect. Is it any help if I put these in here or... I was thinking, yeah, the same. It could be like, it could have a default, but yeah, what you're describing is definitely like, like the way to do it. So maybe I could just like write tag here and you can come in and, yeah, figure out how we'd actually do it.
Adam (25:14.911)
Yeah, yeah, that works.
Ste (25:17.641)
Okay, that's perfect. For all of these options, I'm thinking, so for the text, we have the colors and we have the sizes. These I should get in Figma, I'm assuming. So...
these correspond to the colors we're using. So for, should we use the description on the button for all the colors in general? So primary, secondary, tertiary, accent, warning, and ghost.
Adam (26:03.942)
Yeah, I'm done with that. And yeah, the buttons is kind of the default. So that, I mean, that way, when we see primary, we know it means like purple on dark mode and light mode. Yeah.
Ste (26:04.069)
What do you think?
Ste (26:21.321)
Okay. Do you think it's confusing to have primary and accent? That was the only thing that struck me as, okay, if we have primary, when are we going to use accent?
Adam (26:26.67)
Thank you.
Adam (26:36.53)
Yeah, I'm trying to remember where in the code base we actually use accent. Let me get an example of that just so I can have something in my mind.
Ste (26:46.977)
Yeah. Uh-huh.
Ste (26:54.529)
trying to find it in the actual designs. So everybody look at the high cover designs.
Adam (26:55.554)
see.
Adam (27:07.35)
So like on the, yeah, I was gonna say on the airlists, we use it for the controls and yeah, we use it for the book button. So, yeah, we use it for the book button.
Ste (27:07.461)
So I'm using it. Yeah.
Ste (27:19.874)
Mmm, okay.
Adam (27:22.695)
I think that makes sense. It's kind of like, it's more secondary than accent. Like by definition.
Ste (27:30.381)
Yeah, I know secondary kind of a... Exactly.
Ste (27:37.773)
Yeah, we're not using
Adam (27:38.541)
But I guess secondary works too. Sorry.
Ste (27:41.929)
Yeah, no, that's perfect. Yeah, I was gonna say that we're not really using this color scheme or I haven't used it because I didn't find like a place for us to use it, but I think it works. Yeah, we can use like the light gray as the secondary, you know, definition of our color scheme. Tertiary is basically like the most subtle one.
And I'm guessing this would switch on light mode. So this would become slightly darker and this slightly lighter, right?
Adam (28:22.122)
Yeah. Yeah. I think that's.
Ste (28:24.485)
And I was also thinking of maybe adding a green one for confirmation. What do you think? That was the only thing. So having confirmation here. You think that's see, whoop, there we go. Maybe darker shade. No, just do it like that. And instead of this red, go with a.
dark gray. This is great.
What do you think?
information.
Adam (29:06.914)
Yeah, I'm wondering if we need that or if we can just use the primary for like a, like confirm depending on the context.
Ste (29:15.245)
Yeah, that's true.
Adam (29:17.674)
But yeah, it's a bit, yeah.
Ste (29:21.169)
Let's just use the primary. Yeah, let's just use the primary. I think that works. You're right.
Adam (29:27.979)
Yeah.
Ste (29:31.064)
Okay.
Adam (29:31.25)
Right now, like in the global nav, like our buttons are tertiary. Like, and then the pricing is primary as an example.
Ste (29:42.561)
Okay. Oh yeah. Yeah, it is. Yeah. We can leave them like that. I think I'm okay with it. I made more colors for labels because I think we're going to need a bunch of colors for labels to differentiate. For instance, I was working on the profile and I was, yeah, thinking that we could use different colors for these.
So yeah, maybe we can add green for the labels.
Adam (30:11.997)
Hmm.
Ste (30:16.217)
and it can just have, let me see how I put them here. Oh, so they're actually like green indigo. They're color coded here. So they're not, I'm guessing a label should be, should it be primary, secondary, or yeah, maybe it can be just by color coded.
Adam (30:16.833)
Mm-hmm.
Adam (30:43.834)
Yeah, maybe just color code it. Cause yeah, labels don't really have a hierarchy the same way buttons do.
Ste (30:50.145)
Yeah, okay. That's nice. Yeah, we can leave it like that. And yeah, all the others just have variants. I was also working on the sliders. Maybe they could be a good addition. That's the only element I found. And maybe we can use it for the gold component as well. I'm seeing that sometimes is broken for some reason on the app. But I have to search for like...
where it's actually broken. I've seen it a bunch of times, but I couldn't figure out how it's actually doesn't show. I think it was a weird color that I saw. I'm just gonna flag it on GitHub. Yeah.
Adam (31:26.414)
Hmm.
Adam (31:37.17)
Sounds good. Yeah.
Um, yeah, one of the things that has, uh, come up when I've been going through a lot is, is like the most common thing for components is the typography. So like header titles in dark and light mode text in light and dark mode and, uh, links that are not buttons in light and dark mode. And especially the links.
We do a lot of links in different ways. I feel like when I was implementing a lot of pages, I was like, this doesn't make sense to do a, do a, uh, a different color or I'm going to make this one a little light, light indigo because it seems better than, than white for this button or this link. And I feel like now all of those design decisions are coming back to me. And it's like, Oh, we need to normalize this.
Ste (32:38.121)
Yeah, fully agree. How do you think we should approach this? So for the titles over here, I was thinking that they could have a default light and dark color, which would be like this gray 900 and gray 50 for light and dark. They could have a gray color, which is kind of like the...
tertiary level, let's say over here. The indigo could be primary. So let's just like call this tertiary. Let's call this primary and let's call this accent. Do you think that would make sense for the titles as well? And this would be the differentiation between dark and light mode. I chose different hues, different...
Ste (33:36.593)
brightness for these because on night mode, it looks better if it's a little darker, but on dark mode, it's a little too dark. So for instance, if you, let me quickly exemplify. So this is dark mode and this is...
light mode. So.
Ste (34:05.345)
On light mode, this seems a bit too light and on dark mode, it seems a bit too dark. But when I do this, they stand out more-ish. Does that make, let me just do a swap to, yeah. Exemptify this. So it kind of looks like this.
Adam (34:18.271)
Yeah.
Ste (34:26.301)
I know, is there like any notice? I feel they have more contrast and for accessibility, yeah, we gotta have contrast. It's still like retains the color, but it has more contrast. Or, I mean, actually we could use this one for light mode as well. Now that I, I should have done this from the start.
Adam (34:26.823)
Yeah.
Ste (34:46.98)
See.
Ste (34:52.013)
So if we use like this for dark mode, so it's the lighter one and this for light mode. Oh yeah, I think it actually works to use this for both. So, let's see.
Adam (35:08.13)
I'm okay either way. I could see the slight difference when they were, the light mode was a little bit darker, but I'm up for either. For the other ones, it stands out a lot more, like for grays and accent colors, but the Indigo is harder to spot the difference. And it could be like just 100 difference, like between 500 and...
Ste (35:29.482)
Yeah, and this
Adam (35:36.458)
600.
Ste (35:38.153)
Yeah, that's like a subtle difference. It works for yellow as well. I chose different yellows, but I'm thinking this one works as well, the slightly warmer one.
Ste (35:53.485)
Yeah, this is a bit light for a light log, so you can go like this.
Ste (36:00.057)
But what do you think of this separation? Is this what you had in mind?
Adam (36:07.822)
I think that covers most of it. I think the big step's gonna be like everywhere we use text in the mockups, setting it to one of these settings so that way we can, in the code, set it to one of these settings as well and not just, yeah, just not hard-coded in the code. Yeah.
Ste (36:35.792)
Yeah.
Adam (36:40.837)
Yeah, this is, this looks good. And then for the links.
Adam (36:48.65)
I'm wondering about like, I know you had some, some, uh, like more colorful link colors up top, but, uh, I wonder about using these colors for links as well, or if we need to do, uh, additional ones.
Ste (37:02.733)
Well, I think we can use these colors for links as well. I'm not seeing why we shouldn't. So yeah, I guess we could definitely do this. So it's primary, accent, secondary and tertiary.
Adam (37:33.57)
Mm-hmm.
Ste (37:33.705)
And these would just remove. What do you think?
Adam (37:37.246)
Yeah, I think that's probably good. And maybe a warning one, two, four. Well, no, I don't, I don't think we, I don't think we need a warning one, actually. Cause the warning one's probably going to be a button rather than a, than a actual link.
Ste (37:42.085)
Oh yeah.
Ste (37:48.481)
Yeah, it could be. Maybe we have delete or remove. Yeah, it's actually going to be a button. We can just leave it there. Maybe we need it. Maybe we don't. It can be just sitting there. And it can follow the same pattern. And maybe we can add the ghost one as well, since we have it there. So ghost is disabled for all intents and purposes, right?
Adam (37:54.646)
Hmm
Adam (37:59.223)
Yeah.
Adam (38:18.858)
Yeah.
Ste (38:20.657)
Should we name it disabled or should we leave it as a ghost?
Adam (38:26.202)
Um, I think ghost works. It just sounds cool. Yeah.
Ste (38:27.173)
I mean, Ghost sounds pretty... Okay, sounds pretty neat, so yeah. Okay, so Ghost is...
Ste (38:40.201)
This is looking good and we can keep the same system in every place.
Adam (38:47.999)
Yeah.
Adam (38:51.494)
Yeah. Let's see. I think some of the common ones I've been seeing for the site have been like at the top of, like the prompts page, the top of the list page, we do something where we have like an icon in the header and then we have like a paragraph description about what the page is.
Ste (39:18.309)
Mm-hmm.
Adam (39:20.102)
And maybe even that could be a component of components for what it means to be the header of a page.
Ste (39:29.389)
This one, right? So for prompts, I was thinking that to actually like have it just as a title so this would be like the title base So it would be our serif font and it would Maybe not have an icon I'm thinking, you know, it's I made it the same throughout the site I made it this way because some
Adam (39:31.871)
Yeah.
Ste (39:58.169)
pages had icons, some pages didn't have icons. And I was thinking that it would be better to keep it consistent. So if we don't put an icon, so for instance, on the recommended books pages, we could either put an icon there or like take out the icons. But I feel it's a little bit more consistent if we either use or...
Don't use the icon on all pages, on all titles. What do you think about that? And like, feel free to disagree. It just felt that way to me when I was designing it.
Adam (40:35.57)
I do like the consistency of having like an icon next to them. Uh, Hmm. Or, you know, I like having it all the same too, like whether we have, have it for all of them or don't have it for all of them, I think I like having it though.
Ste (40:54.317)
OK, well, that's good. So for instance, that means we should find an icon for each page. And yeah, we can definitely do that. I was thinking, let's say for genres, let's take this example. I'm guessing we could just go on. Where is it?
Ste (41:25.01)
Let's see if they have something.
Adam (41:28.27)
Like, because we have the explorer drop down in the header, and we could have them use the same icon as that, or like the explore page. So whatever we use on this page, we could also use on the individual pages.
Ste (41:39.561)
Oh, yeah, that's right. Yeah.
Ste (41:46.553)
Genres, okay, it's the hat. Ah, here's this book.
Adam (41:49.834)
Yeah, but we could, we could, oh yeah.
Ste (41:58.517)
For these icons, would it be okay to use the Duotone? I really like the Duotone better than the line icons because they have a little bit of depth to them, but that might just be me. I like the two-color thing. I feel like it pops a bit more and it's pretty subtle. I also used gray to make the actual title pop out more.
Adam (42:10.99)
Thanks for watching!
Adam (42:15.593)
Yeah.
Ste (42:26.065)
Let's see if I actually like edit at the end, if that works better. Jammas. Just added that at the top. I'll add the start.
Adam (42:35.65)
Hehehe
Adam (42:42.708)
Yeah.
Ste (42:44.609)
Yeah, that looks good. I mean, if we put it everywhere, let's put it on lists as well, which is the one that's for lists. Is it list?
Adam (42:45.989)
Yeah.
Ste (42:57.369)
our cover. Oh yeah, it's actually a list. And I'm guessing we have to normalize the icons as well. There are some places where we're using different icons, I think. Which is, yeah, it might be me because, you know, I know specifically I've changed some icons and we might've like both worked on different sets of icons.
Adam (43:12.966)
Yeah, I've noticed that too.
Ste (43:26.865)
for the layouts, but yeah, that's okay. So no padding and let's just make this into an auto layout and put an eight on it. So yeah, it looks good. I mean, we can keep the icons, but let's add them on every page.
Adam (43:45.822)
Yeah. And on a, on a page like this prompts page, um, like right now we have like a little thing that says what prompts are. I'm wondering about like how, what do you think about that?
Thanks for watching. Bye.
Ste (44:07.145)
Yeah, we could keep that. I was actually, okay. So I did a little bit of changing that. Yeah, it can definitely appear underneath. I think I made this page like this because yeah, it aligns with the others, but yeah, if you just put that text, I'm gonna get that prompts text.
Ste (44:39.642)
Here we go.
Ste (44:49.389)
And it would be like a secondary piece of text.
Adam (44:54.016)
Yeah.
Adam (44:58.872)
So in Figma, is there a way to say like this text right here is like a text component with certain parameters?
Ste (45:12.649)
Yes, but this is basically right now styled according to the tailoring components. So I think we could make like a secondary component. So we'd have this as a component, create components. So this is like text. And we'd have...
Ste (45:43.353)
So this is the actual text and here you can...
Ste (45:51.329)
Yeah, say, what's the context of this? And you can style it. So this like default text is really light and then you can add variant to the text where you say color and this one is default.
Ste (46:21.073)
make this so that's okay
Ste (46:33.161)
It shouldn't be an auto layout, why is it?
Ste (46:39.341)
Oh, well, I have to actually figure out what's going on over there. But yeah, anyway, this is the way you do it. And then you add another component and this is color two and it's like this. So when you take it out, this is the text sample. So you can actually write like any text here and you can change the color. So it's either the default one or the secondary one.
and you can add more components. So this is like the primary and the primary is Indigo. And then you can have another variant here, which is theme and light. And this is the light theme and you can make copies of all of these.
Ste (47:40.033)
see and then select dark and it's a dark theme and for dark mode, yeah, this actually turns into dark text, this actually turns into slightly grayish text and this basically remains the same.
when you change the mode here, this is basically like exactly like the website, right?
Adam (48:04.703)
Mm-hmm. Nice, yeah. Yeah, that's what I was thinking. Because.
Ste (48:08.189)
Okay, that's cool. I'm gonna do that for all the text options so that it's easier because we don't have any text. Yeah, sorry, Ash.
Adam (48:17.058)
Nice. Yeah, that would be awesome. Because, yeah, then when I'm going through the Figma prototypes, it'll be a lot easier for me to look at text and very easily say, oh, this text is this variant, this size, and this. Yeah, actually, I think those are the two big things, variant and size for text.
Ste (48:40.969)
Mm-hmm. Okay
Adam (48:43.498)
And having those use our component library variants and component library size rather than having tailwind colors and size in there will make it a ton easier for me to implement those pages for sure.
Ste (48:58.237)
Okay, that's perfect. Yeah, well, I'll switch everything to that then. The size is basically the tailwind size. So it's, yeah, okay. And that's actually great. One of the last details, text. The titles are, yeah, these. And I was thinking, you know, we have headings, but maybe we can also have the title component. So it's not just a heading.
Adam (49:07.86)
Yeah.
Adam (49:11.255)
Yeah.
Ste (49:26.149)
it's a title, would that make sense? Or would you rather have it tied to a heading? So this could be like, H1, H2, H3, H4.
Adam (49:45.182)
Yeah. Yeah. I think right now I created a heading component, which always uses the serif font, and then if we wanted to have just like text that used the serif font, we could add a variant to the text component, which would be like, um, variant, uh, I don't know.
Ste (50:05.513)
Ah, okay.
Adam (50:11.954)
Or, or yeah, probably like variant title or something like that. Variant, uh, scary.
Ste (50:16.553)
Okay, that's good, but I'm guessing, I mean, in the designs, I had like a pretty easy job to just use all of these sizes. So I didn't feel the need to have like regular text in the Serif fonts. So this would be if we had like six headings with these, yeah, with these...
attributes, I think they would cover pretty much every case. I mean, that's what I've used throughout the.
Adam (50:52.843)
I think so.
Ste (50:55.717)
So there would be no need to actually like have texts be in this refund at all. We can just keep that for titles.
Adam (51:04.266)
Yeah. Yeah. So if you see a serif font, it's going to be a heading of some level.
Ste (51:11.733)
Yeah, does it make sense from an SEO perspective? So for instance, we have here title SM and title SM would correspond to an H5. Are there cases where we'd want this to be like an H, whatever, three, two.
Adam (51:27.646)
Yeah, we would probably want that to be an H2. So maybe we have the size and the heading level as different things you can pass in.
Ste (51:39.725)
So this is size Excel and level H2. So you can have like the size base and level H2.
Adam (51:49.139)
Exactly. Yeah.
Ste (51:50.681)
Nice, okay. Yeah, let's keep it separate.
Ste (51:56.741)
We want that good SEO.
Adam (52:00.632)
Yeah, I having all those headers, like that's one thing we're definitely not doing very much today. Like we have, we have H ones, but we don't have like a good H two structure, a good H three structure. So yeah, that'll be, that'll be nice.
Ste (52:18.812)
Yeah, there's lots of potential like H2 to H4s on some pages. And we can definitely find more.
Adam (52:24.737)
Yeah.
Yeah, especially on the book page now with the redesign, there's going to be so many sections to it. Some of those headers will potentially be like even SR only because don't even show them.
Ste (52:33.425)
Yeah.
Ste (52:40.432)
Yeah.
Ste (52:46.63)
Nice.
Adam (52:48.846)
Cool. Well, yeah, I think this is going well. Right now I'm still converting all the pages from the pages directory to use the app directory. But after that's kind of wrapped up, I'm kind of like on the fence on if I should start converting existing pages to use components or just implement the new book page.
using components and that'll be like the first page that's like 100% componentized. And then we can start implementing components on the rest of the site after that, and I'm leaning towards that way, but I'm curious what you think.
Ste (53:30.657)
Yeah, that's a good approach. I'd say, yeah, we should definitely do that because the book page has lots of things on it. And yeah, right now it's using components. I'm gonna make texting the components as well. So yeah, it's all nice and dandy. And yeah, we can then use components for everywhere else. It's gonna be easy, especially if we implement things like this, because...
This is how we're showing things on all pages right now. So the reusability just for this way of showing the shelf is huge. So.
Adam (54:18.502)
Mm hmm. Yeah.
Ste (54:20.685)
Yeah, definitely a good approach. Yeah, good thinking.
Adam (54:27.602)
Yeah.
Ste (54:31.121)
There's also these tabs. If we get all of these implemented, yeah, it's going to be like really easy to shift all the other pages and that is going to look a whole lot different.
Adam (54:46.241)
Yeah, I've implemented the tabs component in the new.
Adam (54:54.398)
or as a component. So at least like so far, like as I'm implementing pages to the new app directory, they're all using the same tab styles. So at least we'll have one place to change it all.
Ste (55:04.527)
Nice.
Ste (55:08.579)
Yeah, well that's perfect. That's music to my ears.
Adam (55:12.334)
Cool. Yeah, I just can't wait to implement this page. I keep pushing myself back from it, like, no, no, you need to get the app directory and the new search out first, and then you can work on the book page.
Ste (55:14.449)
Great.
Ste (55:27.625)
Well, that's good. That's a good sign. But yeah, definitely the search is going to be important as well. So I'm definitely encouraging search as well. I know some people have been waiting for it. I think our search currently has some issues. So just replacing it with the new search is going to be a real breath of fresh air because the new search works so great. So it's going to be like a huge improvement. Yeah.
Adam (55:53.644)
Yeah.
Yeah. I, I think the current search got, it's getting slower, like as time goes on while the new search won't, um, yeah.
Cool. Well, anything else you wanna chat about?
Ste (56:10.649)
Great. Well, it's been a good session. Now I think we're good. We're good. We have lots of things to work on. I'll continue working on the designs and getting this library aligned. So that's, you know, it's easier for us to push stuff in the future. And yeah, it's looking great. I mean, lots of stuff to do.
Adam (56:35.6)
Nice. And I started posting all of the hardcover lives that we've had in the past on the hardcover blog. So now there's a, they're all on there. Everyone's linked on YouTube. And I think like this one, for instance, will go out on Wednesday. So I'm trying to do like a cadence of, we record on Mondays, release on Wednesdays.
Ste (57:01.013)
Nice. Yeah, that's really good. And shout out to everyone. If you want to appear on the Hardcover Live, you can definitely message us and we are eager to talk to you. If you're in the book space, if you're interested in books, if you're interested in tech, if you're interested in how to link books with AI, if you're an author, if you're a really eager reader, come and talk to us. These sessions, this is what they're for.
And we're also using them to build stuff live. So yeah.
Adam (57:32.85)
Yeah. Yeah, that's a good, good distinction. Like most of the time it's us just building hardcover, but it could also mean us talking with users. It could also mean us talking with authors or people. It's really about learning more about the people who could use hardcover, talking with other people in the book space to better understand them and sometimes building.
Ste (57:57.421)
Yeah, exactly. That's great. Perfect. Well, on that note, should we wrap up hardcover number 15? I got it right.
Adam (58:06.018)
Sounds good. Cool. Well, talk to you next week, stay. Bye.
Ste (58:07.545)
Perfect. Well, yeah, have a good one. See you. Bye bye everyone.