MDX Conference speaker interview with Kathleen McMahon
Chris Biscardi: [00:00:00] Welcome Kathleen. Uh, would you like to introduce yourself?
Kathleen McMahon: [00:00:05] Sure. Uh, hi Chris. Thanks for having me on here. I am Kathleen McMahon and I am a software engineer most recently before all this, um, COVID fund happened. I was the tech lead for the O'Reilly media devices. And right now I am, I'm finishing up some interview cycles for my next greatest and most fun role.
Chris Biscardi: [00:00:30] Technically borough Riley, the sign system sounds, sounds pretty big. Uh, what was that like?
Kathleen McMahon: [00:00:36] Well, um, but see, it's a pretty big ask for a pretty small team. So the team usually hopper between two to three people and the role of the tech lead it around me for the, for the design system in particular, with making sure that you are unblocking, your teammates.
And then ensure that you are paying down the tech debt of the component library and in particular anticipating the needs of the systems in terms of, for example, how to architect a whole new design tokens, scheme support, um, an existing brand versus a newer brand. How to do that. So the teams can do to utilize tokens.
In a way that can, um, enable the team to start. How do you say this? Um, like youth use the, um, youth, whichever tokens they need for the project. Indeed. Like if they aren't ready to use the new, you know, our new theme, they can use an old theme, have a behind a feature feature, flag, use context to, you know, to show, you know, the older thing.
Also with this token architecture, the goal was to make sure we have a way for the web teams and the mobile teams to have a common way of sharing, for example, color in particular. So if you made anything, any changes at the architecture, architectural level, all the teams would get those updates at once.
That was the goal. Nice. Yeah. I
Chris Biscardi: [00:02:12] feel like, uh, I feel like people don't talk about feature flags in the context of like, Either library development or design systems and things like that. Um, could you go into like what those are and how were you, how you were using them?
Kathleen McMahon: [00:02:25] So with, um, so using feature flags, um, you could set a flag, um, using LaunchDarkly to either turn on a feature or not.
So if a feature was turned on and you were testing out something in production, it could, um, show. It could show new colors. It could show different, you know, different texts, depending on how you're leveraging context. In combination with those flags. It's just a way to, um, show a certain experience to one group of individuals.
And while the other one other set of individuals don't see that feature. And that way you can test things out in production without breaking anything. It's a nice way to beta test something. In terms of with using, um, context in react, you could use, use react context and create a theme context where you could pass in.
Um, for example, a theme value, whether it's like. Theme a or theme B. And if I'm the developer, it passes in theme as a wrapper around their components. The component children can take on the properties of whatever. Like for us, when we're using CSS variables, it would, you know, load up specific CSS variables to, um, to style parts of the site.
You could also use it to, you know, you could pass in content if you wants you to, which is pretty cool. But that's, that's the Mo you know, like a short gift of how you can leverage, um, context and feature flags and pair it with the design system, the component library in particular.
Chris Biscardi: [00:04:06] That's pretty awesome.
I haven't used, I haven't heard of too many people using feature flags specifically in combination with things like CSS variables to sort of like, uh, change all of those kinds of hooks that we build into them. Uh, when we, when we're building design systems,
Kathleen McMahon: [00:04:21] It's pretty cool. It's just, it's uh, sorry. Um, it's, it's warm out here.
I'm in Massachusetts and it's let me look. It's 89 degrees. Super cute. The humidity, but the breeze just came by. Through the window cause I had the fan off. So you don't y'all don't hear like the
Chris Biscardi: [00:04:39] fan
Kathleen McMahon: [00:04:41] in my microphone. So I have like the side breeze right now. I'm very, very happy.
Welcome to my train of thought. So back to things like feature flags and context, um, It's just passing in a property. So it's just really nice the way that you could just pull in your variables and, you know, turn things on and off at will to try things out.
Chris Biscardi: [00:05:10] Yeah. I think it's super powerful and it's something that I wish, uh, more and more people would do.
Um, I saw a tailwind recently put feature flags inside of their open source library, which is extremely cool and something that I would love to see more people
Kathleen McMahon: [00:05:22] doing. Yeah, be pretty fun to experiment with that more and to see, you know, the possibilities with that. I, when I was working on the architecture part, um, my fellow dev teammate, she was working on the content text and a feature play stuff, so she could speak more to it, but she, she was experimenting in ways.
That was pretty cool with like, Hey, we can turn on colors, but Hey, what if we just pass in content? You know, like with content, like you have a toggle and you pass in, like you turn the toggle on and off the button would show cat or dog. So it's just really cool how you could pair things together to not just, you know, pass in, you know, variables for colors or sizing and spacing.
You could also, you could you combine that with, um, react context and flags to pass in content. That's pretty awesome.
Chris Biscardi: [00:06:13] So we were talking a little bit before we started recording about a mini design system that you want to build. So how does that differ from this sort of large industrial strength, a design system that you were working on for a Riley?
Kathleen McMahon: [00:06:26] So the mini design system that I want to build is, is it's as a result of the blog site, if might the digital garden site that I built for my, um, for my personal work. Yeah. When I was, when I was, and I want to be talking about this in the, my MDX conference, talk about digital gardens and the medic MPX.
And when I was building this site, I was doing this whole look and feel, you know, how would I design this for a mobile and all the different break points? And like, what type of components would I use in the system? Like, Oh, you're not going to use the typical form elements you get started there and add in, you know, like form elements, links, buttons, cards.
Cause we always, for some reason have to have a carton like this. But when I was looking at this, I was thinking, well, one, this could be a good way to start off a design system. Um, cause you want, like, for me, I want to start small. I just don't want to just throw everything in there. I just want to think of something that might be a commonly used component.
That I could leverage. And over time, you know, create a sense of consistency for like different like buttons, types and sizes and colors, and the same with links, whether I want to support icons or not. And the reason why I want to have this design system, which I'm going to, you know, eventually extract, extract out of my site and make it into its own package.
I'm going to use that, to share it among the other sites that I've done. So over the years I built, I built a portfolio site.
Alright next change that. Oh, I could, what should I change that? What do I do? How would I structure it? And you're like, then time passes, like, alright, you know what? I'm going to stand up a new site. Hey, here's a site and bootstrap, let me just do it. Stand it up. And do a bunch, you know, put some more, you know, like I have, my, my WordPress site is all like design and interaction, design and motion graphics and, you know, motion reels and yeah.
Exhibit work and my debt portfolio, which is the fruit strips. I'm like, Ugh, here, here's some coding stuff that you see also designed, but different stuff tweaks to, we can all say, right. And I'm like, well, I can rebuild this site, but you know, this bootstrap site gets beat and I'm like, But then I have to rebuild, rebuild that, and then we'll have to rebuild all these projects in there to update the code base.
Cause you know, it's not perfect, but then perfect is the enemy of done. Like, alright, what am I going to do? All right. I'm going to make a digital garden.
Chris Biscardi: [00:08:56] That's true. That's definitely, definitely true
Kathleen McMahon: [00:08:59] everything together. Like if I want to do a blog post, I can do it. I don't have to finish it. I can just start it, come back to it.
But this digital garden site is still is my portfolio site, but also points to my other portfolio sites like, Hey. This is how I've taught and here's my notice site. Oh, you want to see a portfolio? Here's one, here's another one. And as I update them, I can just update the links, but this is a way to just keep moving and rather, and rather get stuck in that option paralysis that tends to happen when you start playing with new technologies.
So, yeah, that's that's um, so that's why I have this digital garden, but at the same time, I'm like, But if I use, you know, if I abstract those components out to design system, when I redo my other site, I can have these components and I can theme them. I don't think they build them and I can pop them, you know, as a package somewhere else.
And then just, um, you know, establish new, you know, CSS variables for themes, turn on a theme and voila.
Chris Biscardi: [00:09:56] Yeah, that sounds really cool. I've got a couple of questions now, but, uh, what do you think is the, um, like the smallest point at which you would consider creating a design system? Right. So you've got a number of different sites and that makes sense to me.
And I think that would probably make sense to most people where you're trying to share a bunch of components and you can theme them across different sites. What's the smallest, um, like surface area that you would consider creating a design system for
Kathleen McMahon: [00:10:26] in terms of site or in terms of components.
Chris Biscardi: [00:10:28] Uh, psych components.
However you want to answer that question.
Kathleen McMahon: [00:10:32] Um, you'll hear a different, different philosophy here because like a design system is terms of like color stockpot graphy and components. It's not just, it's not just a style guide. It's not just a component library. It's like this whole system that you put together.
Uh, if you listen to Dan mall, he's pretty great. They'll say you can make up, you can make a, you could use a button, make a design, you know, if you make a button, what library there is, there's your design system. Well, it's your component library, you know, but if you have, you know, the styles and you know, like the styles and the colors, the typography for that button, also, including with that component library, you have a mini design system.
Um, for me, my smallest way of thinking of a design system is, do I have a site? Am I going to have things that are repeatable? Right. So am I going to be using a button everywhere? Like, you know, I could, I can make, you know, make a component share, but once I start having another site, I'm like, I'm going to still use buttons and form elements and all these other things, rather than redo this, I can just make, you know, make a library and share it for me.
I start thinking once I get the two sites, because that's what I want to share. Cause right now in, in my project. And it's, you know, the code is open source right now. All the components are in there. They're not abstracted out into a package, but they're ready to, I built them. So they are ready to extract out already with that anticipation of, I know eventually going to obstruct these out of making the components, making them flexible, documenting them as I go document them for me with prop types.
Any other things that I want to start passing in of like ways that do I want to support coaster. I want to support classes, anything like that, start building it that way in anticipation. If I might be abstracting this out later. So it'll take me time and having to go back and think through this again.
Chris Biscardi: [00:12:15] Yeah. That makes a lot of sense for me, especially since you already have an expertise in doing this, um, it's not like you're building your first design system and like, Oh, now I'm going to have a second site and I'm going to build this design system for the first time. Like you've done this before you have an expertise in it.
Yeah. You know what you're going to run into. So it makes a lot of sense to me that you would start basically immediately and be like, okay, I see where this is going. I'm going to start doing it internally. And then when I need it externally, I can pop them out.
Kathleen McMahon: [00:12:42] Right. And it just, it's just a big time saver when you're thinking in that way.
Cause you're thinking you're already starting to think in systems. Yeah,
Chris Biscardi: [00:12:51] I really liked that. Um, you mentioned the digital garden and you talked a little bit about what it is, but could you sort of give us the rundown of what a digital garden is and how it fits into, uh, your ecosystem of
Kathleen McMahon: [00:13:02] sites? So a digital garden and there's, um, there's this great post by Joel hooks on what this is?
Um, my, the way I think about a digital garden is it's a, it's more of a, it's a way of thinking of, you know, creating and writing your content. So you don't have to think about the state of done. It's just a way of putting everything down and getting, you know, move it, keeping things moving. For example, when you have a garden, right?
You, you, you know, you start with ideally some soil and you know, some nutrients in that soil. Hopefully it's good soil. And with their, um, and, um, I'm thinking about my mom's garden right now, um, is, you know, you could plant, you could plant bulbs, you know, at certain times of year and they will come up, like daffodils will start coming up and spring and the day lilies, which are perennials, they will come up in the summer.
So you can plan like things that will. You know, sprout at certain States of doneness and then you can start culturing them and move things around in your garden. As you see things that make, you know, that makes sense. Oh, you know, I shouldn't have planted this over here. The sun does, you know, the sun doesn't hit the, you know, that plant very well.
Let's pull it up and move it over here next year. So there's a way that you can, you have something that continually gathers and grows and has this winding path that you can have this nice experience depending on what place you enter that garden to.
Chris Biscardi: [00:14:19] Yeah, that's super exciting to me because I feel like a lot of people wait too long to publish their thoughts.
They're like, I would like to write this post and I want it to be a 6,000 word, like, uh, the definitive article on whatever they're talking about. And, uh, the, the idea that you're describing in a digital garden is sort of more like you come in and you're okay. What do I want to, what do I want to do today?
What do I want to. Work on today and then you work on a little bit of it and it's all published and it's there and it's still your garden and you can work on it a little bit tomorrow. And, uh, I don't know. I really liked that sort of incremental approach that you've described
Kathleen McMahon: [00:14:57] and you can come back to it too, and any time, which is great.
Um, for, for example, like, like if you're learning a new technology technology and, uh, you're writing your notes down for a future, you, if you like, what if you drop that technology can pick it up, back up again. You can come back to where you got stuck. Which is a perfect way to do that. Um, also a friend of mine, he is, he is a really good internet marketer.
His name is Ian lorry and he's a blogger. His and I, you know, was, I've been listening to him, him for years about, you know, SEO techniques and yeah. All the different things and how Google changes all the rules. But one of the things he always would talk about with like the only way you're going to get better at writing is by writing every day.
Even if you write a sentence, even if you write a paragraph. No, that fits perfectly with this digital garden model of, you know, just get in there, keep doing it because your soil will get Richard. Your garden will get richer. Everything will get better. Your writing will get better. Your learning will get better digital garden.
Chris Biscardi: [00:15:55] I love that. That's, I'm definitely putting that clip on Twitter. Um, we're running out of time. Uh, is there anything else that you would like to say before we close out?
Kathleen McMahon: [00:16:05] Well, I'm excited to give my talk on the magic of MDX and digital gardens, and it'll be nice to see how I can, um, hopefully get some components in there to start playing more with, Oh, especially at those interactive code blocks.
And, and then like then my next, um, my next goal was making sure my, my talks for the fall, my remote talks are ready.
Chris Biscardi: [00:16:31] Yeah. Where can people find you on the internet if they maybe want to follow up with you and a, or other talks as well?
Kathleen McMahon: [00:16:37] So to follow me on, on the internet, you can first either find me@kathleenmcmahon.dev.
So that's K a T H L E N M C M a H O n.dev. And that has links to my, my, um, Twitter, which is resource 11 on Twitter. Resource 11 on Instagram, of course, 11 on YouTube, which means I have to share. And on Twitch, I need to share, um, some of my Twitch streams I've saved them to YouTube. So I just need to show them again, like reveal them as published so people can follow all the things.
Chris Biscardi: [00:17:14] Nice. Well, thank you so much for coming on and, uh, I'm really looking forward to your talk at MDX.
Kathleen McMahon: [00:17:19] My pleasure. Thank you for having me.