WEBVTT 00:00:12.120 --> 00:00:15.900 Scott: Welcome to the Bikeshed Podcast, where we talk about all things software engineering, 00:00:16.710 --> 00:00:22.500 Scott: current technical challenges we've been facing, and not if, but when AI will take our jobs. 00:00:23.460 --> 00:00:29.620 Scott: I'm your co-host, UI cheerleader, local coffee critic, and keyboard collector, Scott Kaye. 00:00:30.820 --> 00:00:44.200 Scott: And alongside with me are my wondrous co-hosts, an unused dependency's worst nightmare, the open source workhorse, the man who graduated summa cum laude and GitHub contributions, Matt Hamlin. 00:00:45.640 --> 00:00:53.640 Scott: And my other marvelous co-host, who's always stirring the pot because he knows how to spice things up, Dillon Spicy Take Curry. 00:00:54.940 --> 00:00:56.700 Scott: Matt, what's on the docket today? 00:00:58.180 --> 00:01:05.960 Matt: Yeah, today we're going to kick off with our stand-up updates, where we talk about what's new with us over the past week, what we've been doing, etc. 00:01:06.880 --> 00:01:10.400 Matt: And then we're going to dig into our main topic for today, which is all about design systems. 00:01:11.640 --> 00:01:16.000 Matt: Which is maybe not that much of a hot topic these days, but I think it'll be an interesting discussion. 00:01:17.180 --> 00:01:22.040 Matt: And then after that, we're going to wrap up with our final segments, Two Takes and a Fake and Spicy Takes with Curry. 00:01:22.920 --> 00:01:25.060 Matt: Dillon, do you want to kick us off with your stand-up update 00:01:25.060 --> 00:01:25.540 Matt: this 00:01:25.540 --> 00:01:25.640 Matt: week? 00:01:26.720 --> 00:01:27.920 Dillon: Yep, I can take that, Matt. 00:01:29.900 --> 00:01:30.320 Dillon: I'll go 00:01:30.320 --> 00:01:32.120 Dillon: quick work 00:01:32.120 --> 00:01:32.540 Dillon: update 00:01:33.320 --> 00:01:34.720 Dillon: because we're in stand-up. 00:01:36.860 --> 00:01:38.980 Dillon: Got shifted from one project to another project 00:01:39.040 --> 00:01:42.140 Dillon: because the other project is more important right now. 00:01:43.080 --> 00:01:43.500 Dillon: Needs more help. 00:01:44.300 --> 00:01:45.600 Dillon: But it's been fun to just be like, 00:01:46.740 --> 00:01:48.280 Dillon: take a pause on what I was working on 00:01:48.380 --> 00:01:49.420 Dillon: for a very long time 00:01:49.740 --> 00:01:52.220 Dillon: and just like jump into some other things 00:01:53.039 --> 00:01:55.419 Dillon: and sort of help people 00:01:56.040 --> 00:01:58.720 Dillon: that didn't have time to work on those things. 00:01:59.850 --> 00:02:00.460 Dillon: So that's been fun. 00:02:02.560 --> 00:02:05.340 Dillon: Also, diving into code that I wish I could just completely rewrite, 00:02:05.500 --> 00:02:06.520 Dillon: but there's just not time. 00:02:07.850 --> 00:02:09.160 Dillon: I was talking to Matt about that yesterday. 00:02:10.740 --> 00:02:14.020 Dillon: And besides that, I started listening to an audiobook 00:02:14.610 --> 00:02:16.720 Dillon: just while running and commuting. 00:02:17.820 --> 00:02:19.320 Dillon: I don't usually listen to books or read books, 00:02:19.590 --> 00:02:21.260 Dillon: so it's been kind of cool. 00:02:21.270 --> 00:02:22.460 Dillon: It's a book called Sapiens. 00:02:22.900 --> 00:02:23.700 Dillon: People probably heard of it. 00:02:23.900 --> 00:02:25.420 Dillon: It's like a history of humankind book. 00:02:26.260 --> 00:02:29.680 Dillon: It's like the sort of book most people probably listen to to fall asleep. 00:02:30.500 --> 00:02:31.720 Dillon: But it's been kind of interesting. 00:02:33.700 --> 00:02:37.400 Matt: Yeah, so I guess this is maybe not necessarily a stand-up update for me, 00:02:37.540 --> 00:02:40.000 Matt: but for the podcast, apparently we're going viral in Romania. 00:02:40.210 --> 00:02:44.360 Matt: We're in the top 170 or so technology podcasts, 00:02:45.420 --> 00:02:49.180 Matt: which makes me wonder, are there only 170 technology podcasts listed in Romania? 00:02:52.000 --> 00:02:53.120 Scott: A lot of podcasts. 00:02:53.140 --> 00:02:53.380 Matt: Yes. 00:02:54.480 --> 00:02:56.440 Scott: Hopefully we can get to 160 soon. 00:02:57.580 --> 00:02:57.980 Matt: Yeah. 00:02:58.960 --> 00:02:59.680 Matt: Outside of that, 00:03:01.140 --> 00:03:05.120 Matt: and kind of like outside of work stuff, I've been exploring the Cloudflare 00:03:05.360 --> 00:03:07.260 Matt: Vite plugin, which is pretty neat. 00:03:07.420 --> 00:03:11.460 Matt: It lets you sort of build a worker and also like a client-side app all in one go, which 00:03:11.460 --> 00:03:12.460 Matt: is pretty sweet. 00:03:13.780 --> 00:03:19.740 Matt: And along with that, I've also been experimenting with TinyBase, which is like a sync engine, 00:03:20.140 --> 00:03:22.360 Matt: I guess, for web applications. 00:03:23.460 --> 00:03:23.780 Matt: I don't know. 00:03:24.400 --> 00:03:26.380 Matt: It's a little bit early days, but it's 00:03:26.700 --> 00:03:28.080 Matt: pretty cool to explore this stuff. 00:03:28.640 --> 00:03:29.280 Matt: Scott, what about you? 00:03:29.420 --> 00:03:30.560 Matt: What's your stand-up update? 00:03:31.640 --> 00:03:33.580 Scott: That's better than me. 00:03:33.700 --> 00:03:34.440 Scott: I've been pretty lazy. 00:03:35.240 --> 00:03:36.840 Scott: So I've been off this week because I'm 00:03:37.000 --> 00:03:38.060 Scott: starting a new job next week. 00:03:38.560 --> 00:03:39.520 Scott: So I did some home chores. 00:03:40.260 --> 00:03:42.040 Scott: I re-grounded the tiles on my first floor. 00:03:43.020 --> 00:03:44.960 Scott: And at my front door, I had my front door replaced. 00:03:45.140 --> 00:03:48.680 Scott: Maybe sometime last year, I finally 00:03:48.700 --> 00:03:53.580 Scott: Re-grouted the tiles up front there, fixed some grout in the shower, and cleaned out my car. 00:03:53.760 --> 00:03:55.740 Scott: Felt really good about getting some of these things done. 00:03:56.120 --> 00:03:59.500 Scott: Also fixed the leg on my couch, which was really great. 00:03:59.500 --> 00:04:04.020 Scott: I have this old Wayfair couch that I got with Wayfair Rewards dollars, and the leg was starting to get... 00:04:05.960 --> 00:04:09.660 Scott: It was starting to flap around, essentially, and I used the old wooden dowel trick. 00:04:09.660 --> 00:04:16.200 Scott: I put a wooden dowel in where the wood was starting to fray, and I re-screwed a screw in, and it's nice and tight now. 00:04:16.519 --> 00:04:19.600 Scott: So I was glad I was able to fix it and not have to buy a whole new couch there. 00:04:20.140 --> 00:04:24.120 Scott: But as far as work this week, I did a little bit. 00:04:24.120 --> 00:04:26.900 Scott: You'll notice we have a new Bikeshed Podcast logo. 00:04:27.420 --> 00:04:31.120 Scott: And we updated some of our metadata and our episode title covers. 00:04:31.780 --> 00:04:33.420 Scott: So we're really excited about that. 00:04:34.220 --> 00:04:37.220 Scott: I started some work on an incremental Bun compiler. 00:04:37.760 --> 00:04:39.580 Scott: I basically built out a new monorepo. 00:04:40.640 --> 00:04:45.100 Scott: And I was just playing with, it's a Bun runtime monorepo. 00:04:45.740 --> 00:04:47.760 Scott: I kind of use a template that Matt has all the time. 00:04:48.170 --> 00:04:50.800 Scott: I wanted to just make sure I understood the inner workings of it. 00:04:51.660 --> 00:04:55.820 Scott: And I wanted to build some Bun tools since there's opportunity there. 00:04:56.170 --> 00:05:02.040 Scott: I listed a bunch of other tools I might build to Matt in my free time towards the end of this week. 00:05:02.480 --> 00:05:05.640 Scott: And I'm going to go back to my Moon monorepo after this. 00:05:06.040 --> 00:05:08.420 Scott: So this monorepo I've been building uses Turbo. 00:05:08.820 --> 00:05:13.680 Scott: I wanted to try out Moon and also create a back-end apps 00:05:14.060 --> 00:05:15.980 Scott: for Golang to see what the differences are, 00:05:16.060 --> 00:05:18.700 Scott: the discrepancies, and just kind of understand the setup. 00:05:19.230 --> 00:05:20.820 Scott: So just been playing around a little bit, 00:05:21.780 --> 00:05:24.760 Scott: looking for opportunities to build some non-UI focused things 00:05:25.720 --> 00:05:26.620 Scott: in that Bun compiler. 00:05:28.020 --> 00:05:28.280 Matt: Nice. 00:05:28.720 --> 00:05:28.860 Matt: Awesome. 00:05:29.820 --> 00:05:29.920 Matt: Yeah. 00:05:30.810 --> 00:05:33.180 Matt: Yeah, I think we should maybe transition to our main topic. 00:05:34.100 --> 00:05:38.260 Matt: So yeah, as I said before, today, 00:05:38.640 --> 00:05:42.780 Matt: really just want to dig in into design systems. There's, I think, I think it's a really broad 00:05:42.940 --> 00:05:47.060 Matt: topic, kind of like maybe some of our past episodes. So, you know, we may not cover all 00:05:47.110 --> 00:05:51.480 Matt: the things that people may want to hear about design systems. But I think we want to talk a 00:05:51.510 --> 00:05:56.640 Matt: little bit about, you know, what are the benefits? What are the trade-offs when building or setting 00:05:56.650 --> 00:06:01.620 Matt: up a design system? Maybe even touch upon, like, do you need a design system? Does your company 00:06:01.780 --> 00:06:07.320 Matt: need a design system? And possibly also cover a little bit of, like, you know, so the three of us 00:06:07.340 --> 00:06:09.200 Matt: worked on a design systems team at 00:06:09.200 --> 00:06:09.580 Matt: Wayfair. 00:06:10.360 --> 00:06:12.080 Matt: So maybe we'll talk a little bit about our history there 00:06:12.280 --> 00:06:15.180 Matt: and interesting things that we had learned 00:06:15.260 --> 00:06:18.000 Matt: from that experience and other takeaways 00:06:18.120 --> 00:06:18.980 Matt: that maybe we can share. 00:06:20.340 --> 00:06:21.000 Matt: Yeah, Scott, I'm curious, 00:06:21.960 --> 00:06:23.660 Matt: what are some of your high-level thoughts 00:06:23.680 --> 00:06:24.440 Matt: on design systems? 00:06:24.640 --> 00:06:26.220 Matt: And maybe we can kind of go from there. 00:06:27.480 --> 00:06:28.440 Scott: Yeah, that's great. 00:06:29.160 --> 00:06:30.680 Scott: Unprepared, fully acapella here. 00:06:32.940 --> 00:06:35.760 Scott: So I think design systems are very helpful, 00:06:36.260 --> 00:06:37.740 Scott: especially at a larger corporation. 00:06:39.200 --> 00:06:41.020 Scott: I think the approach we would take 00:06:42.220 --> 00:06:45.240 Scott: where you have UI pieces that are standardized 00:06:45.820 --> 00:06:49.140 Scott: and reusable across a corporation 00:06:49.970 --> 00:06:51.180 Scott: does make you move faster. 00:06:51.880 --> 00:06:55.160 Scott: It does create brand consistency and cohesiveness 00:06:55.610 --> 00:06:58.320 Scott: and make it easier to do rebrandings. 00:06:58.820 --> 00:06:59.440 Scott: Definitely helpful. 00:07:00.040 --> 00:07:02.760 Scott: I do think these same applications 00:07:03.620 --> 00:07:04.680 Scott: apply to smaller companies, 00:07:05.140 --> 00:07:12.280 Scott: but today I'm very pro Shadcn or getting a portion of that together for you, 00:07:12.680 --> 00:07:14.840 Scott: whereas basically the difference in approach, 00:07:14.840 --> 00:07:18.180 Scott: a lot of design systems tend to be packages in which you consume 00:07:18.800 --> 00:07:21.780 Scott: and someone manages that package and they make the updates. 00:07:22.520 --> 00:07:25.200 Scott: In a large corporation, it's a little bit easier for folks 00:07:25.800 --> 00:07:28.020 Scott: to take ownership of that area or space 00:07:28.760 --> 00:07:32.020 Scott: and distribute changes out to the rest of the organization. 00:07:32.560 --> 00:07:42.260 Scott: In a smaller business, you're not always going to be focused on just the design system, or it might be too much for a team to just focus on the design system. 00:07:42.740 --> 00:07:56.240 Scott: So using something like Shadcn, where you actually consume into your application the components you need to solve a problem, but you already get some of the best impacts out of it, the accessibility, you get to style it pretty quickly. 00:07:56.940 --> 00:07:59.440 Scott: if you pair it with Tailwind, since it's a first-class citizen. 00:08:00.050 --> 00:08:04.920 Scott: With Shadcn, you can more easily style from the start in your CSS 00:08:05.320 --> 00:08:09.260 Scott: what the theme looks like, and you get a lot more out of the box. 00:08:09.780 --> 00:08:14.780 Scott: So I believe design systems are necessary as you scale, 00:08:15.660 --> 00:08:19.620 Scott: but I also believe there's a lot of nuance to a design system. 00:08:20.020 --> 00:08:22.500 Scott: It's not as simple as one team knows best. 00:08:22.960 --> 00:08:26.280 Scott: It's also not as simple as something I've said in the past on the podcast 00:08:26.300 --> 00:08:34.719 Scott: that in a spicy take that like you should just do what other teams want you to do every time they 00:08:34.740 --> 00:08:40.680 Scott: need you to conform. I think Dillon kind of talked about this single response principle rule, but 00:08:41.000 --> 00:08:48.740 Scott: understanding that at a low level, we should document and understand what each component we 00:08:48.980 --> 00:08:55.000 Scott: expect its expectations to do. And we haven't gotten there yet, but something that we never 00:08:55.020 --> 00:08:59.440 Scott: really got to with the design system we all worked on together was creating patterns what we called 00:08:59.560 --> 00:09:05.560 Scott: recipes but essentially patterns of components that were leveraged often we started to flex into 00:09:05.740 --> 00:09:11.900 Scott: this with Rogin and i when uh the Dillon and Matt kind of moved on from the design system where we 00:09:11.930 --> 00:09:17.900 Scott: would start identifying common patterns that some of our partner teams would need and we would build 00:09:18.060 --> 00:09:22.600 Scott: those for them so that they would be less work up front we wanted to create a design system that 00:09:22.600 --> 00:09:29.600 Scott: was flexible instead of a design system that was very rigid. And this can be difficult. We started 00:09:29.760 --> 00:09:34.520 Scott: in a rigid position so that we got the unity that we needed, the consistency that we needed. 00:09:34.940 --> 00:09:39.640 Scott: And then over time, we realized we wanted to let folks be able to do more. But with flexibility 00:09:40.300 --> 00:09:46.880 Scott: comes more work to set that up. And the way we wanted to tackle and solve that is create and 00:09:46.900 --> 00:09:53.620 Scott: identify common patterns that teams would use so that we could kind of create a registry or a 00:09:54.480 --> 00:10:00.700 Scott: place to find these common patterns and try to create a community that would help grow this 00:10:01.040 --> 00:10:04.620 Scott: together where they didn't just need the folks on the design system to determine these things, 00:10:05.100 --> 00:10:10.400 Scott: but teams would talk to each other to do that. So I believe design systems create a real 00:10:10.340 --> 00:10:14.600 Scott: collaborative environment if done well and foster a lot of creativity. 00:10:15.560 --> 00:10:20.980 Scott: But it's very important to empathetically take someone's use case and always approach 00:10:21.100 --> 00:10:24.980 Scott: it as likely we need to use it or we need to do that. 00:10:25.520 --> 00:10:29.800 Scott: But what is the best approach to get there and to not take a negative stance on that 00:10:30.000 --> 00:10:33.000 Scott: or to say, oh, no, we don't want the design system to do this. 00:10:33.140 --> 00:10:33.740 Scott: You need to do this. 00:10:34.440 --> 00:10:37.460 Scott: Teams need to come together and find, OK, you have this problem. 00:10:37.660 --> 00:10:42.720 Scott: chances are some other team is eventually going to walk into this exact same issue. 00:10:43.320 --> 00:10:44.400 Scott: How do we document that? 00:10:44.650 --> 00:10:46.420 Scott: How do we show that to everyone? 00:10:46.900 --> 00:10:51.900 Scott: Because one thing we know with design systems and what we've learned is you can make a component 00:10:52.050 --> 00:10:55.860 Scott: or you can make some code that does a certain few things. 00:10:56.680 --> 00:10:57.940 Scott: A team is going to use it. 00:10:58.180 --> 00:11:01.140 Scott: People are going to try to leverage it for a use case you cannot foresee. 00:11:01.900 --> 00:11:06.960 Scott: So you want to do your best to document all the use cases for something. 00:11:07.900 --> 00:11:09.860 Scott: and then when a new use case arises, 00:11:10.480 --> 00:11:11.380 Scott: have a great conversation 00:11:11.700 --> 00:11:13.060 Scott: with the entire community around it. 00:11:14.980 --> 00:11:16.000 Matt: Yeah, I think you hit upon 00:11:16.340 --> 00:11:18.240 Matt: a lot of interesting thoughts there. 00:11:18.840 --> 00:11:19.740 Matt: It might take us a while 00:11:19.820 --> 00:11:22.120 Matt: to sort of dig into each one in the nitty gritty. 00:11:22.580 --> 00:11:25.600 Matt: I think some of the stuff that you were saying 00:11:26.260 --> 00:11:27.220 Matt: resonates a lot with me. 00:11:27.540 --> 00:11:30.260 Matt: And one of the things that sort of came to mind 00:11:30.420 --> 00:11:31.340 Matt: as you're talking is that 00:11:31.900 --> 00:11:33.320 Matt: I think a lot of organizations 00:11:33.840 --> 00:11:35.100 Matt: look at a design system team 00:11:35.160 --> 00:11:38.800 Matt: as a team that's meant to sort of only really deliver 00:11:39.070 --> 00:11:41.340 Matt: a component library and like some guidelines. 00:11:42.800 --> 00:11:43.940 Matt: But I think really the core benefit 00:11:44.140 --> 00:11:47.780 Matt: or like the core value proposition of a design system 00:11:47.960 --> 00:11:50.480 Matt: is basically building up a UI contract 00:11:51.200 --> 00:11:52.260 Matt: across the organization, 00:11:53.010 --> 00:11:56.840 Matt: like basically a pact between designers and engineers 00:11:57.780 --> 00:11:58.800 Matt: and product folks, 00:11:58.900 --> 00:12:01.440 Matt: basically anyone that has a vested interest in the product 00:12:01.440 --> 00:12:07.240 Matt: to have a consistent way to approach solving those UI and UX problems. 00:12:08.700 --> 00:12:12.100 Matt: Sometimes that means that you're delivering an atomic component, 00:12:12.880 --> 00:12:15.420 Matt: like a button or a toast or something like that. 00:12:15.720 --> 00:12:19.860 Matt: But also sometimes it's just more vague and broad. 00:12:20.700 --> 00:12:24.960 Matt: Here's a pattern that you should use for solving these kinds of problems. 00:12:27.880 --> 00:12:34.180 Matt: And usually that's delivered to everyone across the organization in the form of documentation. 00:12:35.440 --> 00:12:36.140 Matt: At least that's my point. 00:12:36.170 --> 00:12:51.260 Matt: It's like the design system team is basically just an organization that lets you sort of specify an outline and share those common standards and patterns across the whole team or the whole company in a consistent manner, 00:12:51.700 --> 00:12:57.880 Matt: rather than just delivering on atomic components or whatnot, 00:12:58.620 --> 00:13:00.660 Matt: or design tokens or et cetera. 00:13:01.680 --> 00:13:04.700 Matt: But I think also just because that team exists 00:13:04.900 --> 00:13:07.200 Matt: and it's meant to deliver on those standards and patterns, 00:13:07.420 --> 00:13:11.340 Matt: it's like you're not meant to solve every single UI problem 00:13:11.440 --> 00:13:12.640 Matt: that pops up across the organization. 00:13:13.080 --> 00:13:16.740 Matt: There's got to be sort of a, maybe it's like a 70-30 split 00:13:16.840 --> 00:13:19.320 Matt: where it's like 70% of the most common problems 00:13:19.340 --> 00:13:21.500 Matt: the design system team can help provide guidance for. 00:13:22.180 --> 00:13:25.740 Matt: And then the 30% is, you know, that's a really specific use case 00:13:25.920 --> 00:13:29.840 Matt: or, you know, specific to, or in like a niche of the product 00:13:30.080 --> 00:13:32.380 Matt: that like that team should own making the decisions 00:13:32.600 --> 00:13:33.520 Matt: on how they solve those problems. 00:13:36.019 --> 00:13:38.340 Matt: Yeah, like I think that basically reiterates 00:13:38.360 --> 00:13:39.460 Matt: what you're saying, Scott, also. 00:13:39.720 --> 00:13:44.560 Matt: But yeah, I think it's like most people look at design system teams 00:13:44.620 --> 00:13:46.720 Matt: as just like they just build components. 00:13:47.080 --> 00:13:50.760 Matt: And I think that's maybe a false perspective, potentially. 00:13:51.800 --> 00:13:53.260 Scott: Dillon, do you have any thoughts before I lock 00:13:53.260 --> 00:13:54.200 Scott: in and pop off again? 00:13:57.000 --> 00:13:57.420 Scott: Go ahead. 00:13:58.620 --> 00:13:58.740 Dillon: Yeah, 00:13:58.760 --> 00:13:59.520 Dillon: yeah, I got some thoughts. 00:13:59.640 --> 00:14:00.260 Dillon: I got some thoughts. 00:14:00.720 --> 00:14:02.140 Dillon: Just poking it all in. 00:14:02.240 --> 00:14:03.600 Dillon: There's a lot that was said here. 00:14:05.160 --> 00:14:11.300 Dillon: I'm just going to start from the top of what I think is the most beneficial part of a design system. 00:14:12.420 --> 00:14:22.380 Dillon: And to me, it's just having a single source of truth for the design for a company, whether that's design tokens or the UI in Figma. 00:14:23.600 --> 00:14:25.680 Dillon: It's sort of top. It comes from there. 00:14:25.760 --> 00:14:27.700 Dillon: And that's what we're using. 00:14:27.820 --> 00:14:32.740 Dillon: And it comes top down to every other application that uses that brand identity, I guess. 00:14:35.100 --> 00:14:39.420 Dillon: And to me, I've gone from working at Wayfair where I joined. 00:14:40.339 --> 00:14:43.340 Dillon: you guys already kind of had a design system before I even showed up 00:14:44.200 --> 00:14:47.860 Dillon: and we just continued to iterate on it and I think it's probably one of the most mature ones I've seen 00:14:48.560 --> 00:14:52.120 Dillon: but I don't have a lot of exposure, one of two companies 00:14:52.480 --> 00:14:55.860 Dillon: so now I'm at a smaller company where we know we need a design system 00:14:57.079 --> 00:14:59.780 Dillon: but we just don't have the resources to 00:15:01.259 --> 00:15:04.180 Dillon: dedicate for like one team to build that thing 00:15:04.220 --> 00:15:08.160 Dillon: we have one designer that really wants to do it, a couple engineers that really know 00:15:08.180 --> 00:15:15.480 Dillon: it's important but we just don't have time um and like we're using shad cn and i think we want to 00:15:15.540 --> 00:15:19.840 Dillon: like hook up to figma and like source tokens from there and do things like that we just don't have 00:15:19.840 --> 00:15:24.160 Dillon: the time so it's interesting to maybe we don't have to jump into that we can go straight into 00:15:24.230 --> 00:15:29.380 Dillon: what scott wants to cover but maybe later on we can talk about like size of company and and 00:15:29.380 --> 00:15:30.040 Dillon: what 00:15:30.240 --> 00:15:35.180 Dillon: when it makes sense to to invest in a design system 00:15:30.240 --> 00:15:35.180 Scott: so the single source of truth is a really 00:15:35.200 --> 00:15:42.800 Scott: great point, Dillon. The way I interpret that is, you know, we have one thing that can be updated 00:15:43.060 --> 00:15:50.000 Scott: everywhere. I probably kind of glossed over this doing this like quick monologue rant, but we want 00:15:50.000 --> 00:15:54.680 Scott: to be able to move faster. We want to be able to make changes faster and having the tokens and UI, 00:15:54.880 --> 00:16:00.800 Scott: like you said, it helps us build a vision that people can buy in and have cohesion. And then 00:16:01.300 --> 00:16:04.880 Scott: for the design system team, I know I said like visual regression testing is useless recently. 00:16:05.520 --> 00:16:09.920 Scott: however for this team you can easily just put all those things in one place and see 00:16:10.570 --> 00:16:15.880 Scott: the output uh you can see a before and after really easily i want i want to go over quickly 00:16:15.890 --> 00:16:22.020 Scott: the point i was making about providing patterns is that like matt said it's it's like 70 maybe 80 00:16:22.260 --> 00:16:28.280 Scott: of the code is going to be done again but we want to be able to identify those things and if we're 00:16:28.400 --> 00:16:34.280 Scott: writing the same code twice we really should be documenting in a repository somewhere like patterns 00:16:34.300 --> 00:16:40.460 Scott: that we approve of or that we foresee and foresee often because we really shouldn't be making it so 00:16:40.700 --> 00:16:46.160 Scott: folks build these things twice and this is where i'm talking about the atomic versus maybe some 00:16:46.320 --> 00:16:52.040 Scott: more complex patterns like they would call them i said atoms molecules so molecules and 00:16:52.500 --> 00:16:59.320 Scott: layout related things we might provide some layout components however i think the struggle 00:16:59.340 --> 00:17:08.720 Scott: tends to be like how do these components move into like molecule-like structure or larger 00:17:08.939 --> 00:17:15.459 Scott: structures how do they take form into more compositions than just like at a really small 00:17:15.689 --> 00:17:21.280 Scott: level and how do you document that and something we talked about for a while when we worked together 00:17:21.420 --> 00:17:25.900 Scott: was having this repository of these patterns and we should have been better about giving that 00:17:26.199 --> 00:17:27.720 Scott: because if the purpose of a design system 00:17:28.400 --> 00:17:29.900 Scott: is to make it easier to move fast, 00:17:31.220 --> 00:17:32.940 Scott: these are ways to make you move fast. 00:17:33.600 --> 00:17:35.860 Scott: Whether that's, like, we had a code sandbox. 00:17:36.720 --> 00:17:38.580 Scott: Kudos to you guys who actually worked on this, 00:17:38.610 --> 00:17:40.500 Scott: but we had basically our own sandbox 00:17:40.820 --> 00:17:43.040 Scott: where you could pull in all of the components in scope 00:17:43.510 --> 00:17:44.140 Scott: and build something, 00:17:44.920 --> 00:17:45.780 Scott: but it would have been great 00:17:45.780 --> 00:17:47.480 Scott: if you could have just, like, picked some components, 00:17:47.780 --> 00:17:48.460 Scott: moved them around, 00:17:49.000 --> 00:17:51.920 Scott: had a little bit of an easier way 00:17:52.050 --> 00:17:53.820 Scott: of seeing all those things 00:17:54.220 --> 00:17:56.240 Scott: and all the different use cases. 00:17:56.820 --> 00:17:58.600 Scott: Because here's a very specific example, 00:17:58.900 --> 00:18:01.580 Scott: like filters are something we built 00:18:02.520 --> 00:18:03.780 Scott: for our browse pages. 00:18:04.040 --> 00:18:05.760 Scott: Very common thing that would happen. 00:18:06.620 --> 00:18:07.720 Scott: But we almost should have built 00:18:07.960 --> 00:18:10.100 Scott: like a bunch of different filters 00:18:10.220 --> 00:18:11.160 Scott: and just tag them filters. 00:18:11.340 --> 00:18:12.320 Scott: Or every time we built them, 00:18:12.480 --> 00:18:14.120 Scott: put them in this repository space. 00:18:14.660 --> 00:18:16.660 Scott: So we saw like starting points, 00:18:16.840 --> 00:18:20.620 Scott: places to just get started and have UI. 00:18:21.160 --> 00:18:22.540 Scott: So we could move more fast 00:18:22.820 --> 00:18:24.000 Scott: into building something new. 00:18:24.680 --> 00:18:26.060 Scott: And it would, in theory, 00:18:26.440 --> 00:18:27.880 Scott: as long as we're taking care of those molecules 00:18:30.280 --> 00:18:31.480 Scott: or atomic elements, 00:18:31.800 --> 00:18:35.480 Scott: we could make sure that these kind of still worked. 00:18:35.680 --> 00:18:37.240 Scott: But basically just creating ways 00:18:37.560 --> 00:18:39.360 Scott: that not everyone has to do the same filters 00:18:39.620 --> 00:18:40.400 Scott: every single time. 00:18:41.120 --> 00:18:43.740 Scott: Not everyone has... 00:18:43.860 --> 00:18:45.860 Scott: We have different provided patterns 00:18:46.440 --> 00:18:48.580 Scott: and jump off points for different avenues. 00:18:49.220 --> 00:18:50.820 Scott: And something I want to back up and just say 00:18:50.920 --> 00:18:52.520 Scott: is Wayfair's design system 00:18:52.580 --> 00:19:00.640 Scott: was very complex. We provided design systems for stores, but we also did for internal UI, 00:19:02.240 --> 00:19:08.260 Scott: sorry, internal tools, and as well as like admin tools. So tools for our suppliers, 00:19:09.080 --> 00:19:16.700 Scott: tools for customers in our store, and tools that developers and other parts of the business would 00:19:16.720 --> 00:19:24.400 Scott: use. So we were trying to solve a lot of use cases and do that almost infinitely in a small space. 00:19:26.000 --> 00:19:30.080 Matt: Yeah, I think I wanted to touch upon some of the stuff you were talking about, Scott, in terms of 00:19:31.100 --> 00:19:35.940 Matt: pre-building patterns or building multiple variants of the same patterns, using the example 00:19:36.100 --> 00:19:42.760 Matt: like filters. I think that was one of the pain points that I remember us running into on the 00:19:42.700 --> 00:19:47.680 Matt: design system team at Wayfair was that for many of us on the design system team, we were 00:19:48.240 --> 00:19:51.740 Matt: pretty far removed from the feature and product teams that we were supporting. 00:19:53.520 --> 00:19:57.100 Matt: Every once in a while, we would get maybe a new person on the team that transitioned 00:19:57.360 --> 00:19:58.940 Matt: from another product team into us. 00:19:59.080 --> 00:20:06.800 Matt: They would have the recency understanding of what were the pain points that feature 00:20:06.940 --> 00:20:09.540 Matt: teams ran into when using the design system or when building out features. 00:20:10.560 --> 00:20:15.280 Matt: what are the most common ask for features from product or whatnot. 00:20:16.310 --> 00:20:18.200 Matt: But I think for most of us on the design system team, 00:20:18.460 --> 00:20:20.620 Matt: we had been there for a couple of years, 00:20:21.980 --> 00:20:26.800 Matt: and we were pretty far decoupled from the actual feature teams, 00:20:27.200 --> 00:20:30.120 Matt: the teams that maintain the actual, in the case of storefront, 00:20:30.160 --> 00:20:33.120 Matt: the actual features that customers interact with when they go through the flow 00:20:33.760 --> 00:20:36.180 Matt: or in case of our supplier-facing features, 00:20:36.280 --> 00:20:40.800 Matt: It's like, you know, like what suppliers are actually using day to day. 00:20:41.920 --> 00:20:54.600 Matt: And so I think like one of the, you know, one of the pain points we really encountered was just like trying to understand the problem space of building those more, you know, higher level components, higher level abstractions in order to provide guidance there. 00:20:55.140 --> 00:21:06.560 Matt: And it's just, we were so, you know, it, it, I think things we tried to do to, to make that better was like, try to encourage collaboration or like, um, contribution from those teams back to the design system. 00:21:06.800 --> 00:21:10.040 Matt: Like, Hey, you know, the browse team that maintain those filters, right. 00:21:10.440 --> 00:21:18.980 Matt: Like contribute back to the design system with your insight, your patterns that you built up around how you, how you manage filters in, in your product space. 00:21:20.320 --> 00:21:20.720 Matt: But 00:21:20.720 --> 00:21:21.240 Matt: I think 00:21:21.240 --> 00:21:23.900 Matt: we never really saw great success there. 00:21:24.140 --> 00:21:31.000 Matt: But yeah, I think that was just like an interesting dichotomy of like, you know, your design system, you want to provide guidance for all these other features. 00:21:31.340 --> 00:21:39.500 Matt: But usually you're in sort of an isolated team and you're like pretty far from how those features are actually created. 00:21:39.700 --> 00:21:40.780 Matt: It's like, you know, I don't know. 00:21:41.200 --> 00:21:45.260 Matt: I feel like I want to reach for a really terrible metaphor, but I'll avoid doing that. 00:21:45.760 --> 00:21:48.060 Scott: Yeah, this is where I kind of brought up that hot take. 00:21:48.840 --> 00:21:54.580 Scott: maybe a few episodes back where I said that the design system should conform to what the users need. 00:21:55.980 --> 00:21:57.180 Scott: I think we did this well. 00:21:57.310 --> 00:22:03.280 Scott: And I kind of dove directly into the toughest problems we saw in a mature design system. 00:22:04.700 --> 00:22:05.580 Scott: We did this well. 00:22:05.930 --> 00:22:13.040 Scott: However, we could have been better in the sense we should have had teams actively try to work together 00:22:13.070 --> 00:22:18.120 Scott: and saying, these solve multiple teams' needs and building out that repository of, 00:22:18.240 --> 00:22:18.760 Scott: These are patterns. 00:22:18.990 --> 00:22:21.340 Scott: And allowing the teams who are building these things 00:22:21.670 --> 00:22:24.440 Scott: to contribute those patterns to a repository. 00:22:24.710 --> 00:22:30.120 Scott: Because from there, we actually could curate and find solutions 00:22:30.420 --> 00:22:33.940 Scott: that teams were solving together. 00:22:34.050 --> 00:22:35.300 Scott: And that would foster more community. 00:22:35.330 --> 00:22:38.200 Scott: Like teams would be responsible for contributing back, 00:22:38.700 --> 00:22:41.340 Scott: while the more atomic or layout-related elements 00:22:42.000 --> 00:22:43.120 Scott: were owned by the design system. 00:22:45.000 --> 00:22:47.240 Scott: But we should probably also just note-- 00:22:47.260 --> 00:22:51.400 Scott: So to give a more of a broad history, our design system-- 00:22:51.650 --> 00:22:53.160 Scott: I mentioned this a little bit. 00:22:53.280 --> 00:22:59.660 Scott: The design system we worked on, it started very fixated 00:22:59.960 --> 00:23:02.660 Scott: on data and the code were combined. 00:23:02.900 --> 00:23:04.260 Scott: So it was very rigid. 00:23:05.540 --> 00:23:07.440 Scott: Everything was like you pass an object into the component, 00:23:07.890 --> 00:23:09.180 Scott: and it can only do so many things. 00:23:09.710 --> 00:23:12.100 Scott: I think buttons, you couldn't add icons at first. 00:23:13.660 --> 00:23:15.060 Scott: You might have been able to through children, 00:23:15.240 --> 00:23:16.280 Scott: but there might not have been support. 00:23:16.700 --> 00:23:28.020 Scott: So it was really about a design system, usually when you start, is about getting consistency, cohesive branding, applications that feel and look like one another, 00:23:29.140 --> 00:23:36.700 Scott: and getting people used to these APIs that will allow teams to not worry about the UI as much and reduce UI overhead. 00:23:37.660 --> 00:23:42.860 Scott: But as they become more complex, some of these use cases prop up where things are more flexible components. 00:23:45.180 --> 00:23:46.300 Scott: There are multiple layers. 00:23:46.370 --> 00:23:47.140 Scott: There are more components. 00:23:47.170 --> 00:23:49.400 Scott: They're broken out into more abstractions. 00:23:49.970 --> 00:23:52.900 Scott: And essentially, teams start to unpack 00:23:53.210 --> 00:23:56.940 Scott: some more difficult problems to solve 00:23:57.750 --> 00:24:02.380 Scott: and essentially look for ways to make things 00:24:03.270 --> 00:24:05.480 Scott: a little more unique for their portion of the site. 00:24:07.280 --> 00:24:10.800 Matt: Maybe to sort of tangent off into a slightly separate topic 00:24:10.830 --> 00:24:11.520 Matt: on design systems. 00:24:11.530 --> 00:24:14.279 Matt: I think, Scott, earlier on you were talking about 00:24:16.280 --> 00:24:20.980 Matt: organization size and whether or not it makes sense to invest in design systems, or more so, 00:24:21.840 --> 00:24:25.500 Matt: what does your investment in a design system look like, depending on the size of your organization? 00:24:26.040 --> 00:24:31.120 Matt: I think that's an interesting thread to pull on. At Wayfair, we maybe benefited from having a 00:24:31.300 --> 00:24:38.320 Matt: pretty large organization, which also in turn meant a fairly large investment in generally 00:24:38.540 --> 00:24:42.440 Matt: platform tooling, and that's where our design system lived as well. So it's like we had 00:24:42.820 --> 00:24:51.780 Matt: a decent amount of support, you know, up until before maybe we left. But we, you know, through 00:24:51.960 --> 00:24:57.300 Matt: that investment, like, it allowed us to spend a lot of time in building not only the, you know, 00:24:57.390 --> 00:25:04.160 Matt: the tokens, the tooling, the, you know, tokens, the components, the Figma components and things 00:25:04.190 --> 00:25:11.659 Matt: like that are originally using Sketch, but also all the, like, meta stuff that comes with the 00:25:11.580 --> 00:25:17.480 Matt: a design system so for us that was like documentation site like documentation features uh that you know 00:25:17.680 --> 00:25:21.200 Matt: scott you had talked about like our sandbox that we had built for that you know it's like all the 00:25:21.400 --> 00:25:25.940 Matt: like investing in lint rules and like tooling that helps other teams adopt the design system 00:25:26.520 --> 00:25:32.640 Matt: i think that's like a really you know i think most most companies that you know maybe are smaller 00:25:33.000 --> 00:25:38.800 Matt: don't have the opportunity to spend that investment um yeah yeah so i think i think just like sort of 00:25:38.820 --> 00:25:43.460 Matt: organization size kind of impacts what your design system looks like um you know maybe we can kind of 00:25:43.460 --> 00:25:44.420 Matt: dig into specifics there 00:25:44.420 --> 00:25:50.960 Dillon: yeah i have a thought Matt i want to say that like i think we got a little 00:25:50.960 --> 00:25:57.600 Dillon: bit lucky in terms of like being at a time and a place in a company where it's like it it's growing 00:25:57.880 --> 00:26:06.460 Dillon: and it's it's allowing the engineering team to to invest in in this sort of area and and go off on 00:26:06.380 --> 00:26:11.300 Dillon: their own in a sense and like improve the internal tooling um because i don't know if you guys 00:26:11.500 --> 00:26:15.000 Dillon: remember but one of the biggest challenges we had while being on the design system team 00:26:15.780 --> 00:26:22.160 Dillon: was like quantifying and selling the value of what we were doing um and i think that's a lot harder 00:26:22.280 --> 00:26:26.400 Dillon: at a smaller company but if you're at a larger company where there's like a lot of money to throw 00:26:26.620 --> 00:26:32.860 Dillon: around i guess is lack of a better word um where you can just invest in the internal tooling 00:26:34.440 --> 00:26:41.240 Dillon: it just makes it a lot easier to be creative and improve these things where at my current company 00:26:41.260 --> 00:26:46.100 Dillon: I found that like we just don't have those resources so it's really hard to to find the 00:26:46.220 --> 00:26:51.700 Dillon: time to invest and it's not like design systems are not something you can just spend half of your 00:26:51.840 --> 00:26:57.340 Dillon: time on you need dedicated people that are thinking about this every day and and thinking of ways to 00:26:57.880 --> 00:27:02.840 Dillon: set it up for your company in the best way possible and and also documenting and educating 00:27:03.100 --> 00:27:04.820 Dillon: the teams on how to use things properly. 00:27:06.420 --> 00:27:08.140 Dillon: There's a ton that goes into it. 00:27:08.230 --> 00:27:08.520 Dillon: So, yeah. 00:27:10.440 --> 00:27:10.600 Scott: Yeah. 00:27:10.830 --> 00:27:13.360 Scott: And it's very hard to account for every component use case 00:27:13.930 --> 00:27:14.960 Scott: while you're building those systems. 00:27:15.080 --> 00:27:16.580 Scott: So that's why it takes those dedicated folks. 00:27:16.990 --> 00:27:18.800 Scott: But also, we were very lucky to have 00:27:19.960 --> 00:27:22.880 Scott: some really good people to create buy-in. 00:27:23.030 --> 00:27:26.440 Scott: We had strong leaders who really pushed for this. 00:27:26.810 --> 00:27:29.700 Scott: And we even created some tools that showed adoption. 00:27:30.260 --> 00:27:31.799 Scott: And I think those tools that showed adoption 00:27:32.360 --> 00:27:35.740 Scott: really pushed our leadership to understand that, 00:27:36.510 --> 00:27:38.260 Scott: oh, wow, this can happen pretty quickly. 00:27:39.120 --> 00:27:41.740 Scott: It's hard to quantify time saved 00:27:41.810 --> 00:27:43.000 Scott: by building something like this, 00:27:43.820 --> 00:27:46.620 Scott: but we tried to use the tools that showed adoption 00:27:46.820 --> 00:27:48.500 Scott: to help ease that trouble. 00:27:48.820 --> 00:27:51.480 Scott: And these are tools that our leadership could view and use, 00:27:52.040 --> 00:27:54.900 Scott: and it helped sell the design system a little bit more. 00:27:55.780 --> 00:27:57.420 Scott: Something else I wanted to bring up 00:27:57.450 --> 00:28:01.040 Scott: is that I kind of maybe surface level touched this, 00:28:02.060 --> 00:28:03.880 Scott: But component libraries versus design systems. 00:28:04.780 --> 00:28:07.740 Scott: I don't know which I fully prefer these days. 00:28:08.050 --> 00:28:12.640 Scott: I think maybe design system, if it's a corporation, makes more sense. 00:28:12.840 --> 00:28:18.740 Scott: But essentially, I don't know if this is more of just kind of how Matt and I have talked about this, 00:28:18.980 --> 00:28:21.540 Scott: but a component library is more like your bootstrap. 00:28:21.960 --> 00:28:23.740 Scott: It's not really opinionated. 00:28:24.250 --> 00:28:25.980 Scott: It gives you some things out of the box. 00:28:26.480 --> 00:28:27.880 Scott: It's very much Shadcn. 00:28:28.620 --> 00:28:33.900 Scott: although even Shadcn is more opinionated than your traditional component library. 00:28:34.260 --> 00:28:39.160 Scott: But essentially, it gives you a great starting point that you can change. 00:28:39.720 --> 00:28:42.080 Scott: It doesn't have too many opinions on how you use the pieces, 00:28:43.420 --> 00:28:47.160 Scott: but it gets you further than what you get for free out of the native browser. 00:28:47.720 --> 00:28:50.700 Scott: Whereas the design system is very much strongly opinionated. 00:28:51.060 --> 00:28:55.980 Scott: It may include some things that you weren't looking to use, 00:28:56.460 --> 00:28:58.760 Scott: or it may be a little bit more rigid. 00:28:59.290 --> 00:29:01.900 Scott: While I believe design systems should have flexibility 00:29:02.450 --> 00:29:03.600 Scott: and that is the right path, 00:29:04.120 --> 00:29:08.380 Scott: you will get more opinionated pieces using a design system. 00:29:08.920 --> 00:29:12.120 Scott: So it is worth noting that you should use one of the two. 00:29:12.190 --> 00:29:14.360 Scott: You should have some semblance 00:29:14.980 --> 00:29:17.480 Scott: or decision-making on consistency. 00:29:19.220 --> 00:29:21.920 Scott: However, you need to determine the right path 00:29:22.120 --> 00:29:25.160 Scott: for your organization size, which works best for us. 00:29:25.580 --> 00:29:30.400 Scott: Or do these things need to be in every single application your company owns? 00:29:31.000 --> 00:29:36.200 Scott: So I talked about how Wayfair, we were like, oh, the admin tools have a design system. 00:29:36.580 --> 00:29:37.560 Scott: But did they really need one? 00:29:38.000 --> 00:29:42.240 Scott: The problem we were trying to solve was more of we just want consistency. 00:29:43.160 --> 00:29:45.740 Scott: But again, design systems are really opinionated. 00:29:45.820 --> 00:29:51.800 Scott: And if you're not looking at what are the types of components, internal admin tools need 00:29:51.800 --> 00:29:53.200 Scott: to be used all the time. 00:29:53.560 --> 00:29:55.160 Scott: And you're not going to dedicate time to that. 00:29:55.600 --> 00:29:59.780 Scott: you're creating more friction for those folks when in reality they might have just needed some 00:30:00.040 --> 00:30:04.820 Scott: off-the-shelf component library or shad cn to solve their problem and in reality we don't care how 00:30:04.900 --> 00:30:08.840 Scott: they use the pieces we just want to make sure they have normalized pieces and they can make 00:30:08.960 --> 00:30:14.860 Scott: those decisions but there's cohesion as to how it looks across applications 00:30:14.860 --> 00:30:17.600 Dillon: all right Scott i gotta 00:30:18.200 --> 00:30:24.200 Dillon: i'm gonna argue semantics here and you can punch back if you want i think component libraries are 00:30:24.220 --> 00:30:31.560 Dillon: just like one of the puzzle pieces of a design system like if you're just using component library 00:30:31.920 --> 00:30:36.780 Dillon: library you're just using like a small piece of what a design system can be but there can be a 00:30:36.780 --> 00:30:44.240 Dillon: lot more structure to it um yeah i'm just arguing semantics it's like a design system is just a 00:30:44.640 --> 00:30:51.419 Dillon: like a structure that you can follow that can lead you to a consistent design for your company 00:30:52.740 --> 00:30:53.300 Dillon: does that make sense? 00:30:54.060 --> 00:30:55.160 Scott: Yeah, I actually, I agree 00:30:55.520 --> 00:30:57.520 Scott: I think that a component library 00:30:58.100 --> 00:30:59.020 Scott: is just a little 00:30:59.420 --> 00:31:01.480 Scott: I keep using unopinionated and opinionated 00:31:01.600 --> 00:31:02.780 Scott: I think I stole this from Rogin 00:31:03.340 --> 00:31:04.900 Scott: but it's a good descriptor 00:31:05.280 --> 00:31:06.980 Scott: essentially a component library 00:31:07.540 --> 00:31:09.560 Scott: is a building block that is like a design system 00:31:09.880 --> 00:31:11.840 Scott: it does, it looks a certain way 00:31:11.860 --> 00:31:12.800 Scott: it does a certain thing 00:31:13.360 --> 00:31:15.520 Scott: but it has more flexibility 00:31:15.900 --> 00:31:16.600 Scott: it is less rigid 00:31:17.120 --> 00:31:19.440 Scott: and if you want to change it, it's easier 00:31:19.680 --> 00:31:20.740 Scott: it's like a starting point 00:31:20.760 --> 00:31:22.280 Scott: is how I see it. 00:31:23.000 --> 00:31:27.760 Scott: Or it is a styled UI solution 00:31:27.960 --> 00:31:30.640 Scott: that should work across browser compatibility. 00:31:32.020 --> 00:31:33.960 Scott: And it doesn't really care how you use it. 00:31:34.010 --> 00:31:36.620 Scott: And I say that in sense of like, 00:31:38.740 --> 00:31:41.060 Scott: you could use a drawer to solve everything. 00:31:41.370 --> 00:31:43.320 Scott: You could use a button as a link. 00:31:43.480 --> 00:31:44.720 Scott: It doesn't really care. 00:31:45.180 --> 00:31:46.460 Scott: Whereas in a design system, 00:31:47.000 --> 00:31:50.520 Scott: there's probably a little bit more of a rigidity to that. 00:31:50.900 --> 00:31:56.560 Scott: whereas like maybe all buttons look like buttons and you can't do that i would argue that's probably 00:31:56.560 --> 00:32:03.540 Scott: a bad example uh however you might see more apis in a design system that you're locked into 00:32:04.140 --> 00:32:10.660 Scott: there might be icons walked into places maybe you can change the icon but you have to have an icon 00:32:10.880 --> 00:32:15.160 Scott: there's just likely more rigidity to it 00:32:10.880 --> 00:32:15.160 Matt: yeah 00:32:15.160 --> 00:32:18.380 Matt: i think that like kind of similarly like i think the 00:32:18.400 --> 00:32:22.340 Matt: the core maybe differences between a component library and design system is that the design 00:32:22.470 --> 00:32:29.240 Matt: system includes things that are usually like non-tangible um whereas a component library is 00:32:29.300 --> 00:32:33.660 Matt: like just like the code basics at least that's how i view it and i was kind of you know kind of like 00:32:33.940 --> 00:32:40.080 Matt: like my earlier point of like a design system is like a contract it's like it's sometimes it's more 00:32:41.060 --> 00:32:46.380 Matt: the like meta around using a component library it's like the you know the rules and guidelines 00:32:46.400 --> 00:32:51.260 Matt: which sometimes code doesn't enforce sometimes it can't enforce but sometimes it's more so just like 00:32:51.520 --> 00:32:56.280 Matt: here's you know a number of paragraphs about why you should use this variant of a button for this 00:32:56.400 --> 00:33:01.940 Matt: use case when in reality you know like the like any feature team could probably end up pulling in 00:33:02.120 --> 00:33:06.340 Matt: a component and using a different component for that use case and it's like might solve the 00:33:06.460 --> 00:33:10.220 Matt: customer's problem but it probably doesn't necessarily meet the you know what the design 00:33:10.240 --> 00:33:16.340 Matt: system is intending to lead the feature or the product towards, I guess. 00:33:16.940 --> 00:33:22.560 Scott: Right. That's a better example, Matt, like the destructive state of a button. We might have red 00:33:22.780 --> 00:33:28.000 Scott: buttons that are very specifically for these states, whereas when you get a component library, 00:33:28.460 --> 00:33:33.800 Scott: it's just like an out-of-the-box, it works in all the browsers, and it gives you a consistent default, 00:33:34.500 --> 00:33:35.680 Scott: And it's malleable. 00:33:35.880 --> 00:33:39.520 Scott: You can change it to be whatever you want. 00:33:40.200 --> 00:33:44.960 Scott: And you have a little bit of autonomy to do that in the system. 00:33:45.520 --> 00:33:46.600 Scott: You may not build it that way. 00:33:47.160 --> 00:33:51.500 Scott: However, a component library would be meant to give you some more autonomy. 00:33:52.380 --> 00:33:58.120 Matt: I think we could probably talk a whole weekend about design systems as a topic. 00:34:00.640 --> 00:34:05.580 Matt: unless you guys have any like either like further pressing thoughts here um i think we could 00:34:05.740 --> 00:34:10.379 Matt: probably look at transitioning into our um our segments for the rest of the episode but 00:34:11.440 --> 00:34:14.899 Matt: yeah any any further thoughts there Dillon or scott 00:34:14.899 --> 00:34:16.740 Dillon: I think all my further thoughts are spicy takes 00:34:19.139 --> 00:34:25.980 Matt: perfect um unfortunately you have to save them for after two takes which is our next segment scott 00:34:29.440 --> 00:34:29.919 Scott: Here we are, 00:34:29.919 --> 00:34:34.800 Scott: two takes and a fake, everyone's favorite segment. This is where I ask Matt and 00:34:34.940 --> 00:34:45.159 Scott: Dillon questions about tweets or skeets or zets or skeets. Yeah. So I stay on X, not really, 00:34:45.620 --> 00:34:52.740 Scott: but I mostly am now looking at Bluesky, where I look for some takes from people in the software 00:34:52.780 --> 00:35:00.820 Scott: community that are real and then one that i just make up so it's up to Dillon and matt to 00:35:00.820 --> 00:35:01.100 Scott: guess 00:35:01.340 --> 00:35:07.960 Scott: which one is the fake so here we go 00:35:01.340 --> 00:35:07.960 Matt: before we before we dig in scott what's do you remember 00:35:08.020 --> 00:35:10.020 Matt: our score like who is winning 00:35:10.020 --> 00:35:11.860 Scott: i i think 00:35:11.860 --> 00:35:12.420 Scott: it's one 00:35:12.420 --> 00:35:14.140 Scott: one 00:35:14.140 --> 00:35:15.520 Matt: I thought Dillon had taken the lead 00:35:16.040 --> 00:35:18.380 Matt: but i'm not sure 00:35:16.040 --> 00:35:18.380 Scott: points 00:35:18.380 --> 00:35:20.800 Scott: are all made up and they don't matter i i don't know 00:35:20.800 --> 00:35:21.420 Scott: we're 00:35:21.420 --> 00:35:22.000 Scott: gonna say it's 00:35:21.980 --> 00:35:23.720 Scott: 1-1 and I'll look into it. 00:35:24.840 --> 00:35:26.000 Scott: Because we didn't do this last week. 00:35:26.160 --> 00:35:26.940 Scott: So, all right. 00:35:27.750 --> 00:35:29.480 Scott: So the three topics this week. 00:35:29.550 --> 00:35:32.380 Scott: We have in the next version of Bun, 00:35:33.920 --> 00:35:35.060 Scott: the Vercel changelog, 00:35:36.340 --> 00:35:36.960 Scott: and Next.js. 00:35:37.920 --> 00:35:40.480 Scott: And if any viewers want to leave some comments 00:35:41.060 --> 00:35:43.380 Scott: about anything they want us to do in two takes and a fake, 00:35:43.440 --> 00:35:45.620 Scott: we'd be happy to take those topics. 00:35:47.000 --> 00:35:48.760 Scott: Please influence our segments. 00:35:49.360 --> 00:35:49.600 Scott: All right. 00:35:49.930 --> 00:35:51.020 Scott: In the next version of Bun, 00:35:52.300 --> 00:35:57.260 Scott: Okay, in the next version of Bun, Bun gets one megabyte smaller on Linux and Mac OS. 00:35:59.680 --> 00:36:05.780 Scott: In the next version of Bun, Bun.serve gets built-in support for hot reloading front-end applications. 00:36:08.260 --> 00:36:13.420 Scott: In the next version of Bun, Bun automatically converts JavaScript code to Rust for optimal performance 00:36:14.940 --> 00:36:17.420 Scott: Start with Matt. Matt, which one is the fake? 00:36:19.680 --> 00:36:21.140 Matt: I think I'm going to go with the third one. 00:36:21.820 --> 00:36:23.240 Matt: the converting JavaScript to Rust, 00:36:23.450 --> 00:36:25.440 Matt: although it sounds like a really exciting, cool feature, 00:36:25.720 --> 00:36:27.520 Matt: but I know Bun is a zig shop 00:36:27.760 --> 00:36:29.680 Matt: so I don't think they would want to convert it to Rust. 00:36:30.780 --> 00:36:31.120 Scott: All right. 00:36:32.000 --> 00:36:32.600 Scott: Matt's locked in. 00:36:32.760 --> 00:36:34.440 Scott: Dillon, which one is the fake? 00:36:36.799 --> 00:36:38.600 Dillon: I'm scared to go with the obvious choice, 00:36:39.619 --> 00:36:40.820 Dillon: but I don't know, man. 00:36:40.890 --> 00:36:42.180 Dillon: It has to be that third one. 00:36:42.940 --> 00:36:43.920 Dillon: Like, that has to be the fake. 00:36:45.080 --> 00:36:45.860 Scott: All right, locked in. 00:36:46.680 --> 00:36:47.700 Scott: You're both correct. 00:36:48.380 --> 00:36:49.520 Scott: This week, I wanted to start 00:36:49.520 --> 00:36:50.080 Scott: it off with 00:36:50.080 --> 00:36:50.820 Scott: a little bit. 00:36:51.320 --> 00:36:52.960 Scott: of something you might be able to get. 00:36:53.380 --> 00:36:54.820 Scott: I think we've been a little difficult. 00:36:55.140 --> 00:36:56.060 Scott: So, all right. 00:36:56.140 --> 00:36:57.620 Scott: They don't get any easier from here. 00:36:57.820 --> 00:37:00.900 Scott: So we got a tie, 1-1. 00:37:01.380 --> 00:37:02.120 Scott: Vercel changelog. 00:37:02.280 --> 00:37:03.180 Scott: Okay, first one up. 00:37:05.200 --> 00:37:07.680 Scott: Vercel now maps dependencies in your lock file 00:37:07.760 --> 00:37:09.440 Scott: to applications in your monorepo, 00:37:10.080 --> 00:37:12.340 Scott: reducing build queuing by deploying 00:37:12.680 --> 00:37:15.280 Scott: only the apps affected by dependency updates. 00:37:18.320 --> 00:37:20.360 Scott: Number two, the Vercel firewall 00:37:20.380 --> 00:37:23.140 Scott: now supports using an OR operator 00:37:23.470 --> 00:37:26.480 Scott: for custom WAF rules, conditions, and groups. 00:37:29.040 --> 00:37:31.220 Scott: Number three, Vercel edge config 00:37:31.550 --> 00:37:34.640 Scott: now includes built-in AI-powered caching, 00:37:35.160 --> 00:37:37.080 Scott: automatically predicting and serving 00:37:37.840 --> 00:37:40.800 Scott: frequently accessed data for faster response times. 00:37:43.340 --> 00:37:44.220 Scott: Which one's the fake? 00:37:46.080 --> 00:37:48.080 Dillon: I'll start it off this time just to make it fair. 00:37:48.540 --> 00:37:49.520 Dillon: I'm just going to go with three again, 00:37:49.940 --> 00:37:52.600 Dillon: but also say, I don't know what's going on. 00:37:52.810 --> 00:37:55.120 Dillon: I don't know what any of these features are in Vercel. 00:37:55.120 --> 00:37:56.000 Dillon: I don't use Vercel. 00:37:58.680 --> 00:37:58.860 Scott: Right. 00:37:59.520 --> 00:38:00.360 Scott: Three is locked in, Matt. 00:38:01.480 --> 00:38:02.700 Dillon: Anti-AI this time again. 00:38:04.100 --> 00:38:05.740 Matt: Yeah, I think three is the fake one. 00:38:06.220 --> 00:38:08.520 Matt: It sounds like something they would 100%, 00:38:08.880 --> 00:38:09.940 Matt: like hopefully, you know, 00:38:10.120 --> 00:38:11.300 Matt: maybe a Vercel employee is listening 00:38:11.520 --> 00:38:12.420 Matt: and they're going to be like, 00:38:12.450 --> 00:38:14.260 Matt: yeah, let's take this idea right up to Guillermo 00:38:14.390 --> 00:38:15.880 Matt: and say, let's build this. 00:38:16.350 --> 00:38:19.000 Matt: But I think three is the fake. 00:38:19.380 --> 00:38:22.120 Scott: You know I'll tweet this at Guillermo that they need to build this. 00:38:22.500 --> 00:38:23.320 Scott: You're both right. 00:38:24.000 --> 00:38:24.540 Scott: Two for two. 00:38:24.760 --> 00:38:25.300 Scott: This is great. 00:38:25.540 --> 00:38:26.140 Scott: I'm loving it. 00:38:26.940 --> 00:38:27.340 Scott: All right. 00:38:28.060 --> 00:38:30.780 Scott: Our last topic, Next.js. 00:38:33.140 --> 00:38:35.380 Scott: Tired of debugging slow Next.js builds? 00:38:35.920 --> 00:38:37.740 Scott: Just migrate everything to plain HTML. 00:38:38.100 --> 00:38:38.640 Scott: Problem solved. 00:38:42.640 --> 00:38:44.900 Scott: Number two, navigation feels slow in Next.js. 00:38:45.360 --> 00:38:48.260 Scott: Use loading.tsx instead of suspense when possible. 00:38:52.460 --> 00:38:56.820 Scott: stop complaining about the performance of frameworks like next js if your web application 00:38:57.040 --> 00:39:03.440 Scott: is slow it's because you're a failed developer it's actually because you're failed as a developer 00:39:04.280 --> 00:39:04.420 Scott: same 00:39:07.520 --> 00:39:12.180 Matt: Dillon do you want to guess first 00:39:07.520 --> 00:39:12.180 Scott: yeah Dillon go ahead 00:39:07.520 --> 00:39:12.180 Dillon: for sure yeah i'll go with number one 00:39:12.600 --> 00:39:17.240 Dillon: art of debugging migrate to plain html yeah 00:39:17.240 --> 00:39:19.660 Matt: i think i think number one is the fake also uh 00:39:20.800 --> 00:39:28.140 Matt: maybe because i i for sure saw number two posted so i'm i'm also terminally online so 00:39:28.880 --> 00:39:29.040 Scott: well 00:39:29.040 --> 00:39:34.480 Scott: that's the whole point of this is being are you terminally online um you're both right 00:39:34.820 --> 00:39:40.020 Scott: this is unbelievable you're both three for three the tie stands we need some foghorn sounds 00:39:41.500 --> 00:39:46.980 Scott: good job boys all right that's that's two takes in a fake 00:39:49.880 --> 00:39:53.540 Dillon: nice should we kick it up kick or go straight into spicy takes after this 00:39:54.600 --> 00:39:56.340 Matt: yeah let's do it all right 00:39:56.340 --> 00:39:59.720 Matt: Dillon do you want to introduce uh yeah like what what are spicy takes 00:40:02.380 --> 00:40:05.220 Dillon: we're gonna go straight into the spicy take segment that's the 00:40:05.600 --> 00:40:11.100 Dillon: spicy takes with curry my last name is curry um there's a joke there probably we 00:40:11.100 --> 00:40:12.900 Scott: take the taco 00:40:13.080 --> 00:40:23.700 Scott: bell packets as our scale it is mild medium hot fire diablo we're all shooting for the diablo takes 00:40:24.200 --> 00:40:28.860 Scott: all mine are typically mild who wants to start us off 00:40:31.420 --> 00:40:32.200 Dillon: I can kick us off 00:40:33.280 --> 00:40:33.720 Dillon: um 00:40:35.060 --> 00:40:36.760 Dillon: alright first spice I got two spicy 00:40:36.980 --> 00:40:37.540 Dillon: takes if that's okay 00:40:38.640 --> 00:40:38.700 Scott: it's 00:40:38.700 --> 00:40:39.900 Scott: usually not because 00:40:39.900 --> 00:40:40.820 Scott: Matt says it's not 00:40:40.980 --> 00:40:42.740 Scott: but I'm okay with it Dillon give us two 00:40:42.940 --> 00:40:43.980 Scott: spicy takes it's 00:40:43.980 --> 00:40:44.560 Scott: your segment 00:40:46.000 --> 00:40:46.960 Dillon: I miss 00:40:47.240 --> 00:40:48.760 Dillon: using storybook I'm at a company where 00:40:48.760 --> 00:40:50.460 Dillon: we don't have it and I 00:40:50.900 --> 00:40:52.500 Dillon: it's a spicy take I actually 00:40:52.760 --> 00:40:53.540 Dillon: think I like it 00:40:55.280 --> 00:40:55.940 Dillon: most people 00:40:57.180 --> 00:40:58.960 Dillon: yeah most people seem to hate it 00:40:58.980 --> 00:40:59.960 Dillon: but I think I like it now. 00:41:00.620 --> 00:41:02.260 Scott: Wait, so your take is, 00:41:03.320 --> 00:41:05.900 Scott: I miss Storybook, I like Storybook. 00:41:06.800 --> 00:41:07.000 Scott: Yeah. 00:41:08.300 --> 00:41:09.520 Scott: Matt, can you please go first? 00:41:09.650 --> 00:41:11.280 Scott: I'm still digesting this take. 00:41:12.220 --> 00:41:14.400 Matt: That is a Diablo take, in my opinion. 00:41:15.840 --> 00:41:17.220 Matt: Because, you know what? 00:41:17.420 --> 00:41:19.020 Matt: I'm going to jump the gun here. 00:41:19.160 --> 00:41:21.520 Matt: My hot take was that you don't need to use Storybook, 00:41:22.000 --> 00:41:24.500 Matt: which seems very mild now compared to what you were saying, Dillon. 00:41:25.700 --> 00:41:26.640 Matt: Storybook is the absolute 00:41:26.640 --> 00:41:26.960 Matt: worst. 00:41:27.440 --> 00:41:29.460 Matt: So the fact that you've miss using it is, 00:41:30.100 --> 00:41:31.620 Matt: yeah, that's Diablo, 100%. 00:41:32.520 --> 00:41:33.060 Dillon: That's awesome. 00:41:33.740 --> 00:41:37.740 Scott: I have fallen out of my chair twice for the viewers, the listeners. 00:41:38.540 --> 00:41:40.300 Scott: That is absolutely a Diablo take. 00:41:40.660 --> 00:41:41.300 Scott: I'm with Matt. 00:41:41.790 --> 00:41:45.740 Scott: It took me like, I feel like Mr. Krabs in the SpongeBob meme. 00:41:45.900 --> 00:41:46.980 Scott: I don't know what's going on. 00:41:47.300 --> 00:41:48.520 Scott: We'll post that in the show notes. 00:41:49.280 --> 00:41:49.620 Scott: I 00:41:49.620 --> 00:41:50.020 Scott: don't know 00:41:50.020 --> 00:41:50.640 Scott: where we are. 00:41:51.820 --> 00:41:56.480 Scott: I just remember Storybook having so many dependency issues that I can't agree. 00:41:57.200 --> 00:41:58.680 Scott: I'd rather build my own storybook. 00:41:59.700 --> 00:41:59.860 Scott: Wow. 00:42:00.310 --> 00:42:00.600 Scott: All right. 00:42:01.480 --> 00:42:01.780 Scott: Go ahead. 00:42:01.840 --> 00:42:02.620 Scott: Your second take, Dillon. 00:42:02.860 --> 00:42:02.960 Scott: Sorry. 00:42:03.440 --> 00:42:07.880 Dillon: My second take is that drawers and modals are just design anti-patterns. 00:42:08.620 --> 00:42:11.340 Dillon: It's like the junk drawer where you just take the things. 00:42:11.390 --> 00:42:12.160 Dillon: We don't know where to put them. 00:42:12.190 --> 00:42:13.900 Dillon: We just stick them in the modals in the drawers. 00:42:15.439 --> 00:42:16.680 Dillon: Any spice on that? 00:42:16.730 --> 00:42:17.420 Dillon: Or is that just mild? 00:42:18.060 --> 00:42:19.520 Scott: Did I add an amendum to that? 00:42:19.880 --> 00:42:20.280 Scott: Can I say 00:42:20.280 --> 00:42:21.860 Scott: that toasts 00:42:21.860 --> 00:42:22.140 Scott: are too? 00:42:23.680 --> 00:42:23.760 Dillon: Yeah. 00:42:23.860 --> 00:42:27.340 Dillon: I was going to say full page modals, but that should never exist. 00:42:27.720 --> 00:42:28.540 Dillon: I agree with that. 00:42:29.340 --> 00:42:30.700 Matt: As the original creator 00:42:30.700 --> 00:42:32.120 Matt: of the full page modal at Wayfair. 00:42:32.160 --> 00:42:32.380 Dillon: It's 00:42:32.380 --> 00:42:33.520 Dillon: still haunting my dreams. 00:42:33.920 --> 00:42:34.020 Dillon: I 00:42:34.020 --> 00:42:35.140 Dillon: created it at Wayfair 00:42:35.140 --> 00:42:36.840 Dillon: and then it was just abused and used. 00:42:37.160 --> 00:42:37.720 Scott: People used it? 00:42:38.180 --> 00:42:39.640 Scott: I never really noticed these cases. 00:42:39.860 --> 00:42:40.660 Dillon: Now I'm a new company. 00:42:41.960 --> 00:42:46.880 Dillon: My current company, they're resizing the modal to be full page in certain screens. 00:42:47.020 --> 00:42:48.560 Dillon: I'm just like, son of a boy. 00:42:48.760 --> 00:42:50.240 Scott: I like modals for alerts. 00:42:51.620 --> 00:42:56.440 Scott: Like, the thing is, it's hard for me to rate this as, like, a Diablo take because I just agree so much. 00:42:57.320 --> 00:43:00.600 Scott: But, like, it is, I guess, still a hot take. 00:43:00.740 --> 00:43:02.180 Scott: Like, it's still right in the middle of the scale. 00:43:05.840 --> 00:43:07.260 Scott: I use toasts. 00:43:07.660 --> 00:43:10.220 Scott: And I think modals, again, modals are great for alerts. 00:43:10.560 --> 00:43:16.340 Scott: And I actually think one great use case Matt and I did at Fireworks was our friction modals. 00:43:16.900 --> 00:43:18.660 Scott: Basically, like, do you want to delete this thing? 00:43:19.020 --> 00:43:24.820 Scott: Are you sure you want to delete this thing with an input where you had to type in a key and confirm that you were going to delete? 00:43:24.850 --> 00:43:27.200 Scott: So delete confirmation modal, we called it. 00:43:27.530 --> 00:43:29.620 Scott: I think that is a good use case for a modal. 00:43:31.019 --> 00:43:35.780 Scott: But we've seen so many abused use case. 00:43:36.100 --> 00:43:42.980 Scott: Well, they're not use cases, but abusive drawers and modals in our lifetimes that I think we're all just in shock. 00:43:43.680 --> 00:43:52.740 Scott: Man, I was absolutely abusing toasts at Tolvit, which that was just, unfortunately, this was like a Shadcn pattern that is adopted. 00:43:53.960 --> 00:43:57.800 Scott: I don't always agree with it, but yeah, people love toasts these days. 00:43:58.320 --> 00:43:59.720 Scott: It's kind of just like, I don't know what to do with it. 00:43:59.800 --> 00:44:01.980 Scott: I'm going to use a modal toast or drawer. 00:44:02.680 --> 00:44:04.020 Scott: And yeah, not great. 00:44:04.520 --> 00:44:16.300 Matt: I still remember like our first version of a modal at Wayfair in the design system would go between a full page modal on mobile web or like basically like a drawer, a full page drawer on mobile web to a regular size modal on desktop. 00:44:16.620 --> 00:44:18.360 Matt: Like the same component would do those two different things. 00:44:18.500 --> 00:44:21.080 Matt: And it's like the worst thing, try to untangle that. 00:44:21.740 --> 00:44:37.120 Dillon: Yeah, I just think it's a crutch of like the page is built a certain way and they're the designer or the team or the product manager is just like too lazy to adjust the page and how it looks like what the UI is on the literal page. 00:44:37.200 --> 00:44:39.860 Dillon: So they just like throw it in some other UI that pops 00:44:39.860 --> 00:44:40.500 Dillon: up on the page. 00:44:41.520 --> 00:44:42.640 Scott: It is absolutely a crutch. 00:44:42.980 --> 00:44:46.180 Scott: There have been some abhorrent use cases, but I do want to note. 00:44:47.560 --> 00:44:49.320 Scott: There are some times when they make sense. 00:44:50.640 --> 00:44:55.500 Scott: But, you know, few and far between, I think it's harder for me to think of one off hand. 00:44:56.080 --> 00:45:01.680 Scott: But agreed, like you should question if you need those things before you recommend them. 00:45:03.400 --> 00:45:06.160 Scott: Like, I guess like filters could be a decent drawer use case. 00:45:06.270 --> 00:45:09.460 Scott: I don't know if I love that, but I've seen it done okay. 00:45:11.300 --> 00:45:12.320 Scott: I'm just trying to give an example. 00:45:13.720 --> 00:45:16.540 Matt: As always, Scott, Scott coming in with the it depends. 00:45:18.020 --> 00:45:19.920 Scott: I don't want to say it depends here. 00:45:20.020 --> 00:45:26.980 Scott: i guess i guess it depends applies but but more than anything like i think you should say ask 00:45:27.100 --> 00:45:32.940 Scott: yourself do i really need a modal drawer or a toast before i do this like how can i do yeah like toast 00:45:33.100 --> 00:45:37.240 Scott: like earth i'm gonna rant about toast but like they're just like yeah sure they show up at the 00:45:37.310 --> 00:45:41.960 Scott: bottom of the page or maybe the top wherever but like why not just put the error message right next 00:45:42.040 --> 00:45:47.100 Scott: to where the error occurred like that's usually what it's used for right like i mean sometimes i 00:45:47.120 --> 00:45:51.680 Scott: think it makes sense it's it's an easy pattern it's something you know sometimes developers 00:45:51.920 --> 00:45:56.240 Scott: take these patterns because it's just like it's it's there and i'm just gonna use it and move on 00:45:56.880 --> 00:46:03.340 Scott: but if you have designers they should really be thinking through flows we've seen a lot of i 00:46:03.520 --> 00:46:08.540 Scott: remember watching user flows sorry i was gonna say this but i remember watching user flows at w 00:46:08.980 --> 00:46:14.500 Scott: where users would just get so confused because they'd have to go in and out of a drawer it's 00:46:14.520 --> 00:46:20.520 Scott: like why would you make them go back and forth at all unless they're filters again the only use 00:46:20.640 --> 00:46:28.040 Scott: case that i think is maybe okay i'm not advocating for it 00:46:20.640 --> 00:46:28.040 Matt: is that your hot takes Scott? 00:46:20.640 --> 00:46:28.040 Scott: do i have a hot 00:46:28.180 --> 00:46:35.940 Scott: take 00:46:28.180 --> 00:46:35.940 Matt: well i was wondering if that's your hot take 00:46:28.180 --> 00:46:35.940 Scott: i mean it might as well be can i have two then 00:46:36.430 --> 00:46:42.020 Scott: i mean i i'm on a rant dude i am caffeinated beyond belief at this point i 00:46:42.020 --> 00:46:42.680 Dillon: was about to say 00:46:42.740 --> 00:46:47.180 Dillon: we might want to rename, or maybe we need a new segment called The Daily Rant or something, 00:46:47.500 --> 00:46:47.660 Dillon: because 00:46:47.660 --> 00:46:49.400 Dillon: we're going on. 00:46:49.400 --> 00:46:50.180 Scott: Scott's Caffeine Corner? 00:46:51.620 --> 00:46:51.740 Dillon: Yeah. 00:46:52.140 --> 00:46:53.260 Scott: Kaye's Caffeine Corner. 00:46:54.540 --> 00:46:54.780 Matt: Yeah. 00:46:56.240 --> 00:46:58.420 Matt: All right, Scott, what's your hot take for this week? 00:46:59.680 --> 00:47:00.600 Scott: Yeah, let me find it. 00:47:01.160 --> 00:47:03.520 Scott: It's so mild in comparison. 00:47:04.580 --> 00:47:04.860 Scott: All right. 00:47:05.300 --> 00:47:08.360 Scott: I said that I wanted to keep it on the topic of design systems. 00:47:09.040 --> 00:47:09.960 Scott: a very last minute 00:47:10.680 --> 00:47:12.260 Scott: rough take but all design systems 00:47:12.660 --> 00:47:13.940 Scott: should allow class name overrides 00:47:14.780 --> 00:47:16.440 Dillon: that's pretty I don't know I feel like 00:47:16.440 --> 00:47:18.440 Dillon: it's pretty hot take 00:47:16.440 --> 00:47:18.440 Scott: you can roast me you can 00:47:18.540 --> 00:47:19.060 Scott: say it's mild 00:47:20.920 --> 00:47:21.800 Scott: well it's like 00:47:22.380 --> 00:47:23.860 Scott: it's it's controversy right 00:47:24.420 --> 00:47:25.480 Scott: it's controversial yeah 00:47:26.500 --> 00:47:28.560 Dillon: I think it works 00:47:29.280 --> 00:47:30.260 Dillon: if the 00:47:30.980 --> 00:47:32.400 Dillon: teams that are using the components 00:47:33.940 --> 00:47:34.500 Dillon: have 00:47:35.620 --> 00:47:36.160 Dillon: like experience 00:47:36.880 --> 00:47:38.500 Dillon: and know what not to do 00:47:39.700 --> 00:47:41.300 Scott: so my my 00:47:41.300 --> 00:47:48.640 Scott: point on that would be like to expand on this just a little i would say they should 00:47:48.650 --> 00:47:54.300 Scott: have class name overrides but teams need to be educated right like my thought is unless it's like 00:47:55.700 --> 00:47:59.780 Scott: a group of components that you need to change the layout in reality you should just be changing 00:48:00.250 --> 00:48:06.260 Scott: class names stylistic changes so separating layout and style concerns but certain components 00:48:07.340 --> 00:48:08.700 Scott: I don't know if you have components for like 00:48:09.560 --> 00:48:10.820 Scott: you know grids and flex 00:48:11.540 --> 00:48:13.120 Scott: elements but essentially 00:48:14.340 --> 00:48:15.280 Scott: it's really styles 00:48:15.360 --> 00:48:17.100 Scott: you want to change and it may be 00:48:17.260 --> 00:48:19.100 Scott: some cases it's layout depending 00:48:19.260 --> 00:48:20.960 Scott: on again if it's like a collection of components 00:48:22.160 --> 00:48:22.940 Scott: so education 00:48:23.640 --> 00:48:24.620 Matt: I feel like I'm 00:48:25.360 --> 00:48:26.820 Matt: torn on my rating of this I feel like 00:48:26.980 --> 00:48:27.180 Matt: as 00:48:27.180 --> 00:48:28.740 Matt: a design system engineer like 00:48:29.200 --> 00:48:30.860 Matt: I feel like that would that take would be 00:48:31.000 --> 00:48:32.860 Matt: like a Diablo take but as a product 00:48:33.040 --> 00:48:34.440 Matt: engineer I feel like that's a mild take 00:48:35.060 --> 00:48:39.320 Matt: you know like i feel like i agree engineers yeah like they 100 agree design system engineers 00:48:39.640 --> 00:48:44.060 Matt: realize that doing that is going to make it basically impossible to roll out changes to 00:48:44.260 --> 00:48:44.400 Matt: components 00:48:44.400 --> 00:48:46.040 Matt: which 00:48:46.040 --> 00:48:49.980 Matt: is something that we're seeing at a hope spot at the moment actually like trying 00:48:49.980 --> 00:48:54.680 Matt: to burn down usage of style and class name on components because it makes it literally impossible 00:48:54.780 --> 00:49:00.520 Matt: for them to roll out new designs um so i guess i'll i guess i'll rate it fire from that perspective 00:49:00.540 --> 00:49:07.260 Scott: If you go down this path a little bit more, you could just look at every class name string and only accept certain ones. 00:49:07.620 --> 00:49:09.660 Scott: But I guess that would require to use something like tailwind, right? 00:49:10.620 --> 00:49:11.960 Scott: And then you could curate it. 00:49:12.620 --> 00:49:17.320 Scott: So you do have some control over what people do when you do that. 00:49:19.240 --> 00:49:19.660 Matt: Yeah, I don't know. 00:49:19.660 --> 00:49:27.740 Matt: It feels like a straight fire way to get bug reports to the system saying they pass in a class name. 00:49:27.840 --> 00:49:28.480 Matt: It's not being applied. 00:49:28.630 --> 00:49:29.500 Matt: Why is it not being applied? 00:49:30.600 --> 00:49:31.120 Scott: you 00:49:31.120 --> 00:49:34.500 Scott: didn't read the fine print on the opinionated design system no just kidding 00:49:36.140 --> 00:49:41.140 Dillon: i was gonna give one quick thought when we were at wayfair we didn't allow this but eventually 00:49:41.490 --> 00:49:47.280 Dillon: we did basically add like a hundred props to every component and maybe it didn't feel like we did but 00:49:47.280 --> 00:49:55.220 Dillon: we definitely did which gave like a subset of um classes that were allowed to be applied maybe you 00:49:55.120 --> 00:49:59.960 Dillon: guys were touching on that so it's like we kind of went the same route but within like a range of 00:50:00.640 --> 00:50:06.160 Dillon: control like you can do these things but you can't go outside of these bounds 00:50:00.640 --> 00:50:06.160 Matt: i think that's the like 00:50:06.380 --> 00:50:06.800 Matt: the right 00:50:06.800 --> 00:50:13.760 Matt: balance to draw from at least at a large system at large company large system like the right 00:50:13.840 --> 00:50:15.260 Matt: balance is the you know 00:50:15.260 --> 00:50:15.960 Matt: give 00:50:15.960 --> 00:50:20.320 Matt: a suite of props that allow customization within some boundaries 00:50:21.160 --> 00:50:23.440 Scott: it is good that i like 00:50:23.440 --> 00:50:26.420 Scott: that solution i thought it was good but like adding 100 props to a component 00:50:26.700 --> 00:50:33.520 Scott: has its ups and downs um like i i think what we did was really a great solve but i might have 00:50:33.600 --> 00:50:40.120 Scott: tried the same thing using class name and just providing like all the options on for the user 00:50:40.580 --> 00:50:48.900 Scott: in one prop as opposed to um having 100 props because it's like what do they call that but 00:50:48.900 --> 00:50:52.000 Scott: Basically, it's like prop over saturation, I guess. 00:50:53.140 --> 00:50:56.060 Scott: There's so many props, it starts to become a little crazy. 00:50:56.460 --> 00:50:58.560 Scott: However, the way we did it was very smart. 00:50:59.680 --> 00:51:03.460 Scott: We separated those types of props into their own group and bucketed them 00:51:04.080 --> 00:51:06.440 Scott: to make it a little bit more clear that they were something different. 00:51:06.530 --> 00:51:08.020 Scott: So I do think the solution was great. 00:51:08.620 --> 00:51:11.800 Scott: But I guess that I'm more pro-class name now 00:51:12.100 --> 00:51:15.900 Scott: because of using Shadcn so much and Tailwind. 00:51:15.940 --> 00:51:18.820 Scott: and I, uh-oh, here it comes. 00:51:19.020 --> 00:51:22.320 Scott: I think Tailwind is phenomenal. 00:51:22.640 --> 00:51:24.100 Scott: I have a blog post about it. 00:51:24.220 --> 00:51:25.160 Scott: You should try it. 00:51:25.680 --> 00:51:27.660 Scott: And just because you can write really good CSS, 00:51:27.960 --> 00:51:29.040 Scott: oh my God, it's a new hot take. 00:51:29.280 --> 00:51:30.500 Scott: Just because you can write really good CSS, 00:51:30.780 --> 00:51:32.440 Scott: you should be able to write really great Tailwind 00:51:32.800 --> 00:51:37.020 Scott: because Tailwind does all the hard parts of CSS for you. 00:51:37.280 --> 00:51:39.040 Scott: And when you have a really big application 00:51:39.460 --> 00:51:41.920 Scott: and you have styles that need to load 00:51:42.060 --> 00:51:43.360 Scott: in the header fast and whatnot, 00:51:43.940 --> 00:51:45.440 Scott: Tailwind does that for you. 00:51:45.900 --> 00:51:52.460 Scott: it does the hard parts for you just it is great to be great at css but you should be able to do both 00:51:52.840 --> 00:51:54.860 Scott: tailwind is a great solution 00:51:54.860 --> 00:51:57.060 Dillon: i don't know is 00:51:57.060 --> 00:51:59.680 Dillon: that mild for most people i feel like most people love 00:51:59.820 --> 00:52:05.020 Dillon: tailwind but at the same i've been using it lately and maybe i'm just like going against the grain of 00:52:05.020 --> 00:52:07.420 Dillon: it because i my hot take is that i kind of 00:52:07.420 --> 00:52:07.660 Dillon: hate 00:52:07.660 --> 00:52:12.160 Dillon: it it could be that the way that people are using 00:52:12.180 --> 00:52:18.020 Dillon: it is just really really bad like i'm seeing where like one div has 48 class classes on it 00:52:18.540 --> 00:52:23.480 Dillon: and it just feels impossible for me to like read the code and understand what's happening and it 00:52:23.480 --> 00:52:28.420 Dillon: just gets like put on one line and i just don't know what i'm looking at and i just like miss the 00:52:28.580 --> 00:52:33.100 Dillon: days of like oh there's one class it has five properties i know exactly what it's doing and 00:52:33.100 --> 00:52:34.280 Dillon: it's being applied to this element 00:52:34.280 --> 00:52:38.160 Matt: i think to your point i think there's like this old guard of like 00:52:38.500 --> 00:52:43.100 Matt: you know web developers that like maybe hate it because of that lens right like because they 00:52:43.750 --> 00:52:47.460 Matt: they were so used to uh just like plain old css 00:52:47.460 --> 00:52:49.920 Dillon: yeah you just can't teach an old old 00:52:49.920 --> 00:52:50.540 Dillon: dog new tricks 00:52:50.710 --> 00:52:51.380 Dillon: i guess 00:52:50.710 --> 00:52:51.380 Matt: exactly 00:52:51.380 --> 00:52:54.300 Matt: unless you're scott 00:52:51.380 --> 00:52:54.300 Scott: that's 00:52:54.300 --> 00:52:56.520 Scott: exactly it my take is like if you haven't 00:52:57.600 --> 00:53:01.100 Scott: if you have if you don't like tailwind you just haven't used it long enough to experience the 00:53:01.200 --> 00:53:07.420 Scott: benefits you haven't tried it enough that's my honest take because that is the one problem and 00:53:07.440 --> 00:53:12.960 Scott: everyone complains about it but guess what there are all these like class names or Shadcn has like 00:53:13.040 --> 00:53:22.020 Scott: it's cn um function essentially you can provide different strings you can organize the class names 00:53:22.070 --> 00:53:26.860 Scott: into multiple subsets of strings you can put layout related stuff together you can put um 00:53:27.340 --> 00:53:33.000 Scott: responsive stuff together you can you organize it the way you want so it might have tons of class 00:53:33.020 --> 00:53:37.760 Scott: names on it because what you could also set that to a constant or a variable so it looks the way 00:53:37.780 --> 00:53:43.400 Scott: you like Dillon like there are ways around this so to me like when engineers just complain like oh i 00:53:43.400 --> 00:53:50.920 Scott: don't like it's a long string i was like yeah but there's with every new solution comes a new series 00:53:51.200 --> 00:53:59.260 Scott: of problems but there are ways around it looking that way so to me it's just this outsider outsider's 00:53:59.280 --> 00:54:05.000 Scott: view that I don't like the way it works. It's different than what I'm used to. You haven't 00:54:05.140 --> 00:54:07.040 Scott: tried it long enough to experience the benefits. 00:54:08.680 --> 00:54:10.480 Matt: I think we should do a whole episode on Tailwind. 00:54:10.560 --> 00:54:10.860 Matt: I feel 00:54:10.860 --> 00:54:11.560 Matt: like it could be a 00:54:11.560 --> 00:54:14.160 Matt: really interesting discussion. 00:54:11.560 --> 00:54:14.160 Scott: We have it and we have to. 00:54:16.020 --> 00:54:21.400 Matt: All right. I think that about wraps it up for this week's episode. I just wanted to sort of 00:54:21.540 --> 00:54:25.680 Matt: end on a quick outro. Please like and subscribe and share this podcast with your friends and family. 00:54:26.260 --> 00:54:30.100 Matt: We don't do any paid promotion and like we don't go out there and tell people to promote the podcast yet. 00:54:30.600 --> 00:54:35.260 Matt: You know, maybe we start dropping in on other friends' podcasts and sharing it around. 00:54:35.460 --> 00:54:37.700 Matt: But yeah, we don't do any paid promotion currently. 00:54:37.800 --> 00:54:39.300 Matt: So we can entirely rely on word of mouth. 00:54:39.940 --> 00:54:42.460 Matt: I think that's how we got to like the top 170 in Romania. 00:54:42.720 --> 00:54:43.940 Matt: It must be word of mouth there. 00:54:44.160 --> 00:54:51.020 Matt: So, you know, hopefully we can hit the top 170 of the U.S. or other countries around the world. 00:54:52.060 --> 00:54:53.120 Matt: As always, thanks for listening. 00:54:53.880 --> 00:54:54.260 Matt: Peace out. 00:54:55.200 --> 00:54:55.880 Matt: Catch us next week. 00:54:56.280 --> 00:54:56.520 Dillon: Later. 00:54:56.940 --> 00:54:57.080 Scott: Peace.