Kent C. Dodds (00:00):
Hello friends. This is your friend Kent C. Dodds. And I'm joined by my friend, Maggie Appleton. Say hi, Maggie.

Maggie Appleton (00:07):
Hello.

Kent C. Dodds (00:08):
I asked you to say, "Hi, Maggie." But that's okay.

Maggie Appleton (00:11):
Oh.

Kent C. Dodds (00:11):
I'm just kidding. So the audience is going to get really tired of this because I'm doing this with every episode this season. Some people are getting it, but yeah. Anyway, I have known Maggie for a really long time. We met through egghead. You started making just amazing artwork for the courses that I was putting on there as well as everybody else. And I've just always admired your work. And I can't remember how long we've known each other. I think I started at egghead before you did. This was many years ago now. When was it that you started egghead?

Maggie Appleton (00:51):
2016. So I just had my five-year anniversary.

Kent C. Dodds (00:54):
Oh yeah. Congratulations. That's great.

Maggie Appleton (00:56):
Thanks. It's a good place to be for five years.

Kent C. Dodds (00:59):
Yeah. Yeah. Well, I remember several years ago, I think just when you'd started, after you'd just produced some really awesome stuff. I was in a chat in Slack with Joel and John and said, "Don't let her go." And they were saying, they were like, "Well, it's not like we're holding her captive or anything, but we're not going to." So, I'm just so glad that you've stayed as long as you have, because it's just you've been an enormous, like you've had an enormous impact on the perception of egghead and just like the metaphors that egghead has to offer. So I've just been really pleased to work with you not only on egghead, but also epic react.dev and testingjavascript.com. You've been the brains behind it, all of what we have over there. And yeah. Anyway, before I get too carried away, I'd love for the audience to get to know you a little bit better. Could you give us a intro to yourself and what makes you tick?

Maggie Appleton (02:01):
Sure. Well, thank you for all those kind words and very glad that unintentional captivity worked and that I've stayed so long. So, I'm a mix of things at egghead. So it started out yes, as the illustrator for the first couple of years, and then morphed into being more of an art director and getting to hire other people to come do illustrations at egghead to. We have a wonderful little team that helps make all the beautiful illustrations now. And this past year I've been getting more into UX design and a bit more of how user flows work and wire frames and sort of the holistic experience of what it's like to be on egghead as well as our partner products, right? So like Epic React and Testing JavaScript and all our other wonderful ones.
So professionally that's sort of the role I'm in. Personally, I live in London. I also am a huge nerd for cultural anthropology, which is what I studied originally and digital gardening, which is a practice where you sort of grow things on your personal website over time, slowly, as opposed to just blog posts. So it's just a fancy word for blogging in a certain style. And I'm a huge metaphor nerd, which is hopefully what we'll get to talk more about today.

Kent C. Dodds (03:11):
Yeah, absolutely. And it's been really cool to see the evolution of you professionally within egghead. To see you start as the illustrator. And now I'm working with a lot of other folks with you as kind of the lead. Voita is one. I work with Voita a lot. And he's just amazing. I don't know if you found him or if Joel or somebody found him, but good job on that one.

Maggie Appleton (03:37):
I was quite proud of that. It was we worked at my previous company. Voita worked there too. And not that I sort of stole him from there, but I sort of did. And I'm very glad about it.

Kent C. Dodds (03:46):
Yeah, he's just marvelous. I love working with him just as a person and he's just very good at what he does. So yeah, for those who don't know, Voita basically built my website as it is today. We're doing a big rewrite and I think Voita is going to be helping with some of that maybe, but he basically built lots of Epic React as far as like the user interface, the way things look. Testing JavaScript as well. So yeah, people have been enjoying Voita's work, even if they weren't aware that he's behind the actual code on that. But you're behind all of the direction and how we visualize things. And I think my first experience of you having like a holistic or big metaphorical project was Testing JavaScript. And I remember having a chat with you about kind of the way I think about testing and how we can visualize that or make it visually appealing for people who are just getting started and getting introduced to Testing JavaScript. Why is it so important that the people's first impression, like visual impression of a product like that is a positive one and how do you make sure that that is a positive one?

Maggie Appleton (05:08):
Yeah. Well, I think metaphors is influential on everything. I mean, I'll go on for a while about I think metaphors are the foundation of how we sort of see everything in the world, which includes visual design and branding and illustration of course, because with a project like Testing JavaScript, right? I mean, you were great that you came up with this idea of the testing trophy really early on, which is like a wonderful conceptual anchor that sort of put the brand on to say, okay, this is going to be about trophies. And we have layers to the trophies. We're able to look at different elements of testing and think of it as a piece of whole. Google weighs testing, right? That doesn't have physical form. That's just this abstract idea that we need some visual to anchor to spiel. Oh, okay, I understand trophies or I understand measurement tools, so that's a nice metaphor to use with a lot of the illustrations. So yeah. I always find a strong visual metaphor is really key for people understanding things. Because it's just taking what's familiar and being able to map new concepts onto it. It's really critical for learning.

Kent C. Dodds (06:08):
Absolutely. And I'm glad that the trophy worked out so well for that metaphor. So can you dive a little bit deeper into what a metaphor really is? Like why can't we just have text that describes what we're doing? Like what does a metaphor add to this? Or even like, I guess you could represent a metaphor in text. So speaking more generally, not just visually, but what does a metaphor add to a person's experience in understanding a concept?

Maggie Appleton (06:42):
Yeah. So with metaphor, I mean, just to give a very simple definition. It does what it says on the tin, pretty much. Like a metaphor is when we understand one thing in terms of another, which sounds so simple that it's almost like why bother saying it. But there's a wonderful field of what's called cognitive metaphor. And this gets into cognitive science and sort of how our brains work in the world. That almost everything we experience in the world we experience through metaphor. So understanding one thing in terms of another and some more tangible examples of this.
Most of our metaphors are at some level grounded in our embodied experience of the world. So being a human body that has like an up and a down, and left and a right, and front and a back, and most of when we talk about abstract things. So things that don't have physical form, we talk about them in terms of this directionality and bodies, and also warm and cold, and soft and hard, all the things that are physical feelings in the world. So when we say the stock market has gone up, we're talking about an abstract idea of money has gone up. But money hasn't moved upwards in any direction, but we associate up with more money, so it's a directional metaphor. And then we do this a lot with programming and the internet because programming is inherently metaphorical because what's happening is like a bunch of electrical signals are firing inside a tiny motherboard that we can't see.
So it's very, very far away and abstract. So we talk about uploading things to the cloud. So we're using that directionality. Or downloading. We think the internet is above us, right? And our desktops are below it. And then when we're browsing around the web we go left to go backwards and right to go forward a page, which is kind of mapped to Western understandings of time as well. We think the past is to the left and the future's to the right. Or the past is behind us and the future is ahead of us because we look ahead to next week. We talk about last year. It's like behind us now. So all these directional embodied metaphors are kind of hidden in everything about the way we talk about the world. But I find, especially with programming in the web, we have to rely on them a lot because so much of programming is this. It's difficult to see. And we're a thousand layers of abstraction away from binary code. And we just need these higher level concepts to think with.

Kent C. Dodds (09:08):
Wow. I had never really thought about it that way, but that makes so much sense. It's everywhere and we don't even think about it at all. Yeah. That's very interesting. And so when you're presented with a project, how do you come up with ... So actually first, I just want to establish. It makes a lot of sense that we need to have a metaphor for the product that we're creating. There needs to be some sort of metaphor. Whether you demonstrate that metaphor in text, in like a blog post, or even better illustrated as well, to help that communication come across. Actually let's talk about that really quick. What is the benefit of using visual metaphors over text or is there a good balance of the two?

Maggie Appleton (09:54):
Mm-hmm (affirmative). Yeah. I think images are always great only because it is true, right? That the image is worth a thousand words and that it's quicker to get the concept. If I can look at an image of a visual like a robot or whatever, a waterfall, whatever it is, you get it really fast as opposed to text. I mean, sure, you can write a beautiful long piece of prose that poetically describes the waterfall. But it's so much faster to just have an image and get that. And in terms of the comparing them in terms of metaphors, I mean, you can kind of do metaphors in both. But I will say I also use language first when I'm designing metaphors.
So I don't jump to visuals immediately, but I look at the words people use around, especially with technologies. Because most of it is written in text, right? Like testing, something like that. I will do a lot of searching corpuses of language. So a corpus is a big collection of words. So things like all the words that anyone has ever written on the internet, there are tools where people have scraped those and you can search through them to see patterns in words. So you can say like what word always appears next to the word testing? Or what are the most common 10 words that appear in the same sentences testing. And from that you can start to see what kind of associations people have with the word testing. And that gives you an idea of what the metaphors they're already using in everyday language are around testing and what they associate with it. And so I use written language first before I draw anything.

Kent C. Dodds (11:26):
Yeah. That makes a lot of sense. So you typically, when ... Well, let me make an assumption then. When you're starting a new project, you typically don't try to create some fun new metaphor out of thin air. You're typically trying to find an existing metaphor for that product and then building on top of that. Is that right?

Maggie Appleton (11:49):
Yes. So I'll say there's like two ways to approach it. One of them is looking for existing ones cause that's great. That at least gives you an idea of what is already in people's minds, what they associate with that. So that's kind of one approach and I sort of balanced that with inventing new ones. And with inventing new ones, what you do tend to do is you sort of look more at the qualities of a thing that you want to highlight. Right? Because any concept we have, there's a whole bunch of qualities and attributes it has. Like, okay, React, let's say is fast. And it is reactive,
Like you can have hot reloading and it is component based. And it has all these tons and tons and tons of attributes. And we can kind of pick the two or three we want to highlight in this particular metaphor and then say, okay, if we want it to say it's component-based and data flows downwards, like we think these are the two important things we want to highlight, we then go looking for other things that share those qualities. And that becomes the basis of the metaphor because you're not going to find something that has all the same qualities as React because React is a big strange complex concept. But you can say, okay, if I want to emphasize downwards data flow, I can talk about React being a waterfall. Or I can talk about React being an upside down tree. So it's in isolating the qualities that you can find interesting metaphors.

Kent C. Dodds (13:09):
Yeah. Okay. Yeah. Earlier, when you were talking about Testing JavaScript, you said that you use the trophy as an anchor for the metaphor. So do you typically find one particular metaphor and then kind of branch out from that when you're working on a project?

Maggie Appleton (13:24):
Yeah. Yeah. So a essential metaphor is always really helpful. So another one I'm thinking of is Eve Porcello, we're working with her on a new GraphQL workshop. A nice big one that she's going to kind of cover all the things you could ever need for GraphQL. And we're going with a summer camp sort of theme and metaphor.

Kent C. Dodds (13:43):
I love that.

Maggie Appleton (13:43):
Once you have that central one ... Yeah, it's really fun and it gives you tons of opportunities for other visual metaphors to play with from it. So you can say, okay, we can have like a camping sign and a tent and a lake and you know, all these things, but then relate them back to a GraphQL concept. So you sort of backwards map from the theme back to the main idea. So yes, central organizing metaphors are really helpful for that.

Kent C. Dodds (14:08):
Yeah. That makes a lot of sense. Very cool. So, you're working on a project. You decided, okay, here are the metaphors that people typically use. Here are some branches off of that, that I can take based on the qualities of the technology we're talking about. So then ... And oh, one other thing that I wanted to mention with like text versus visual, I think that the text is also important for those who cannot consume the visual, right? People using screen readers and things as well. Do you ever do anything like specific to help, or yeah, to cater to just the text version of the metaphor as well?

Maggie Appleton (14:53):
I mean, we definitely always make sure we have good alt texts on all the images. It is difficult too because if you're doing alt takes, there's only so much you can put into words without it being some long paragraph sort of describing the image. Yeah. So I suppose I haven't done a lot of work doing written metaphor, although I definitely appreciate it, right? When there's really good writers when they can just like really describe a metaphor and flesh it out and like have it carry through a whole piece. I really do love that. And I suppose I pay attention to a modified list that do that, but I personally don't have a ton of like metaphorical poetic writing ability yet.

Kent C. Dodds (15:30):
Well, that seems like Joel in particular is very good at writing and bringing out. And one of the nice things that I found is when I have a metaphor that a visual metaphor that you've created, it's easier for me to talk about that. And I can take the visual and describe it a lot better. So they kind of go hand in hand like that. Okay. So we've decided on what the metaphor is going to be. What's your process for turning that metaphor into something visual?

Maggie Appleton (15:59):
So that's where, not that it gets easy from that point on, but metaphor design's sometimes the harder bit. Because from there, I usually will look for a lot of reference images. I think sometimes people think I like draw out of my head a lot. And I am strong on using reference images. And that's the way I was taught by my illustration teachers is you go find as much imagery as you can and do lots of very small rough sketches. So I'll usually do like 10 to 20, depending on the piece just to find the right composition and make sure everything looks the way it should look like and play around with colors and just lots and lots of small experiments. And then you kind of look at those all over, pick the one that is most promising, refine that.
So I usually work digitally. I'll work on an iPad in Procreate or on a SynTech in Photoshop. So a screen that I can draw on. And I'll do lots of layers over the top. So I'll take the rough sketch and refine it and then make it bigger and refine that more. And then with the illustrations I make in particular, I draw vectors in Adobe illustrator, and then I finish them off in Photoshop, just putting a little, few extra details painted in. So it's a very particular process. It's not like the only way that the illustration can be made, but it's just a style I've developed over the years.

Kent C. Dodds (17:18):
Very cool. And when you were describing that you would like draw with your hand in the air. I'm curious to know what tools you use as you're getting started? Once you get over to vectors and stuff, are you drag and dropping different points on the thing or like? I don't know these tools very well. They all seem very difficult.

Maggie Appleton (17:40):
I will say they are. I mostly use Adobe tools, which are a love-hate relationship because there are a thousand menus and you have to learn them before you can even make anything. It's like TypeScript or even JavaScript, right? It's the tool. You have to learn the tool before we can actually build the thing. So I think I learnt Illustrator fairly young, like in high school. And I did a lot of Illustrator and Photoshop just making like really bad wallpaper backgrounds for my computer to sort of learn that way. But yes, with vectors, you build up from simple geometric shapes all the way down, circles and squares and triangles. And then go in with what we call the pen tool, which is a vector point editor and add extra vector points and create curves and make sure it all lines up. So it quite mathematical. You're really trying to make sure it's all even and that the curve lines are all parallel and yeah, it's quite a fun technical little job.

Kent C. Dodds (18:37):
Yeah. Wow. That's amazing. So you don't actually, maybe early on you're using your hand and like actually drawing it, but once it gets to the time to actually make the thing, you're just like putting points. And I say just, but it's very complicated and you have to worry about like ... What are those called? Like the curves between as the points come around and you can control the angle that those lines curve.

Maggie Appleton (18:37):
Yeah, Bezier curve.

Kent C. Dodds (19:06):
Bezier curve. Yeah, yeah. Ah. I'm so glad people like you exist. It's wonderful you can do that. I just love enjoying that. Maybe one day I'll be able to figure out how to put something together, but you know, we can specialize. It's okay.

Maggie Appleton (19:06):
Yeah. Life is long. You can have in your fifties get really into illustration or something.

Kent C. Dodds (19:28):
Yeah. That's fun. Cool. So we actually still have quite a bit of time, but I've gone through your process of developing the metaphor and actually creating it. I guess that the next step would be, you've got the illustration, now how do you fit it into the product so that the metaphor isn't hiding away what the product really is but actually explaining the product. This comes into the design portion of things. How do you make sure that the metaphor isn't hiding what the product is, but it also is helping to communicate what this project is for people?

Maggie Appleton (20:14):
Mm-hmm (affirmative). I think that definitely comes in a balance of the copywriting and the visuals. So this is where it's great with egghead because we're a nice multi disciplinary team, and we're really great at working together. Joel and Taylor are the two people who mostly do the copywriting on the team. And they are really wonderful copywriters. So that's where I come up with a bit of a metaphorical idea and we have like rough sketches or even fully finished designs of them. Then I can work with Voita doing the more visual design layout of things along with me. And then Joel and Taylor will come in and do copywriting and we sort of we'll play off each other. So if there's already an established metaphor, they'll write the long form page that uses metaphorical terms but is explaining the literal thing of what it is, right? This is a JavaScript course that teaches you X, Y, and Z. And not just speaking in fuzzy metaphorical terms because that can get dangerous if you're not actually saying what the thing is.

Kent C. Dodds (21:15):
Yeah, absolutely. I can't think of a specific example, but I feel like I have seen some of those things where you get to the bottom of the page and you're like, I have no idea what this thing does. Like, what is this? So yeah, it sounds like there's a balance. Often you want to help communicate without having people having to read like a paragraph of text. What are some of the strategies that you use to help communicate what the product is without requiring people to read a paragraph of text?

Maggie Appleton (21:42):
I think that mostly comes in individual design techniques, so like spacing things out and using spot illustrations. You might have a big main illustration and then you'll have four to five spot illustrations down the page that highlight particular qualities of the product. Or talk about individual lessons, especially, right? Like if it's a big long course and you have modules or sections to the course, having a spot illustration for each of those that relates to the actual material that's in the section. Because that allows people to scroll quick, see sub-headers, see illustrations alongside it, get a sense of what that section is without really having to read the whole paragraph. So that scanability, that's where visuals and good visual design, spacing things out, letting things breathe, really comes in a lot.

Kent C. Dodds (22:30):
Yeah. Okay. That makes a lot of sense. And all of those spot illustrations, they're all just feeding off of that same metaphor. So it gets really cohesive. When you're on Testing JavaScript, you know you're there because there are trophies. And that winning sort of idea on Epic React. It's all about space and rockets and satellites and things like that, which is fun. Great. Well, is there anything else that we didn't touch on with regard to metaphors and your process for coming up with metaphors that you'd really like to mention before we wrap up?

Maggie Appleton (23:06):
Well, I suppose in the past year, so I had been on a big metaphor nerd thing, right? For like, oh gosh, I don't know when I first got obsessed. Maybe I was like 14 or something I started reading books about metaphor and was like, this is really interesting. And I would never let it go. But over the past year I've been getting into UX design more, which has made me look much more at the metaphors we use for websites as a whole. Because there's the directional, right? Up, down left, right. That stuff. But most of all websites, we think the web is made of paper, right?
That was the original idea that when Tim Berners-Lee invented the web, he went, okay, this is a place that people could put academic papers on. So it's going to be all text and it's going to be white backgrounds and black text. And people are going to send pieces of paper to each other. And we're still stuck in that. Not stuck. It served us really well. But everything you see on the web, you will have cards, which look like they're pieces of paper and they're on a white background. And even when you have like a tool tip, it still feels like there's all these bits of paper that are floating on top of each other, which like material design is based on that.
So we're very much, this is the operating metaphor of the web. But that doesn't necessarily have to be the way it is. We have to have convention so we can understand what websites are. But there's other ways to think about them. Like if you think about the way games work, like MMO, RPGs, or any game. They treat it more like a 3D landscape where you're like a figure moving through the plane. And they don't think that you're on a flat surface that just can only have texts and images. And so I've gotten really interested in that idea that we presume the way websites should and could be. And I think there's a lot more space for people to play that isn't happening at the moment.

Kent C. Dodds (24:51):
Yeah. And that especially is exciting with the rise of virtual reality being just so much more commonplace and stuff too. But now you're making me think. So you're helping me with the redesign of my website right now. And now I'm starting to think, oh man, maybe we should just like, have it be all a 3D thing where you're flying through space. Oy. Talk about scope.

Maggie Appleton (25:15):
We have some work to do.

Kent C. Dodds (25:16):
Yeah. Well, I think that's very interesting. I love hearing about what the future of interactivity on the web could be. I think that we've kind of put ourselves into a box and we need to take a step back and think about, okay, so why are things the way that they are. And maybe they don't need to be that way. And we can have a much more interesting and engaging experience. And once we unlock that then it turns into a brand new challenge for us to figure out, okay, so how do we make this so that it's consumable by people and communicates effectively in that sort of thing too. Kind of turning the web into a game.

Maggie Appleton (26:04):
Exactly. Yeah.

Kent C. Dodds (26:06):
There's one other thing I was curious about. Could you dive a little bit deeper into how you got into this idea of metaphors and using metaphors to communicate? Where did this obsession, I guess, come from?

Maggie Appleton (26:21):
I suppose, well, I know it came from my mother actually was a big metaphor fan and sort of got me reading metaphor books quite young. Well, they were just around the house and she wrote her thesis about metaphors and children's literature because she's a librarian. I was always aware of it. And then when I really decided I wanted to be an illustrator, I think I was about 20, so it's a bit late. And I was like, okay, this is what I'm going to do. It was definitely this obsession with like symbols and signs in society and how they're interpreted. And like how can one symbol mean one thing to one person and something different to another. I got really interested in how visual language worked and how signs and symbols work.
And then when I got into like working for egghead or essentially working in tech and making tech illustrations. Metaphors were like the answer I needed because I would be handed a concept like RX 3F callbacks or something. And I would just go, well, how do I draw that? Like, what do I do with that? And that was where I went, oh, this is where all that metaphor stuff I already know comes in. I know how to research metaphors. I know how to go look at language and look at the types of words that are being used around a concept and how to identify qualities and attributes and use those to find other metaphors. So I suddenly went, oh, this was the tool I needed the whole time. So then I got really, really into it, into metaphors.

Kent C. Dodds (27:47):
Oh, that makes a lot of sense. That's very interesting. Yeah. I think we're ready to give folks their homework. So here's the homework. Spend 10 minutes brainstorming metaphors for a website that you want to build or something that you're building right now. So think about like, and maybe listen to what Maggie has said already about her process. So like thinking about the different qualities that are associated to whatever it is that you're talking about. And you could even do this for a single blog post or something. It doesn't have to be a big thing, but like adding some sort of metaphor. And if you're not an illustrator like me than even coming up with a metaphor that you can describe in text can, as part of your blog post or something, could be really helpful as well. Do you have anything to add to that, Maggie?

Maggie Appleton (28:35):
Yeah. Cause I even think about in terms of metaphors for websites. Even, especially as JavaScript developers, right? People listening to this. Instead of trying to draw it or describe it in words, it also helps you think of just what in design we would call affordances or abilities of the website. So if you saw, okay, my website is going to be a maze, maybe it has doors that lead to other things in it. Or if you say my website's going to be a musical instrument. It's like, okay, my website is just going to make noises. So it's more about thinking about the things it can do and using the metaphors as a design tool to think about what kinds of things your website might be able to do if it was framed a certain way.

Kent C. Dodds (29:11):
Yeah. Yeah. I like that. One thing that came to my mind when you were saying that is, I feel like it could be a danger to include too many metaphors. You lose cohesion and stuff. So how many metaphors is too many? D you want to have just one metaphor for the whole site? Or how does that? Or like, maybe it's okay to have multiple metaphors, but don't let them mix or something like that?

Maggie Appleton (29:34):
Yeah. I'd say one dominant one is usually a good idea just to make it nice and clear. So, as humans, we're quite good at blending metaphors. That's quite established in literature. It's like, we think of the web as both paper and as physical space. We're able to sort of overlap them. But if you overlap tons and tons or if you're using really explicit metaphors. Like you're saying, my website is a drum kit, but it's also a forest, and it's also a waterfall. Everyone's going to be like, well, what exactly is this website doing? But having one dominant one is usually a much simpler approach in terms of design and helping your user understand what you're trying to help them do.

Kent C. Dodds (30:12):
Yeah. Yeah. Okay. That's really good tip there. Okay. What's the best way for people to follow you, keep up with what you're working on?

Maggie Appleton (30:21):
So I have a website at maggieappleton.com where I digital garden various notes and ideas. And there's a lot of metaphorical stuff on there. And then I'm always on Twitter at @mappeltons. So M Appleton S. Yeah, those are the two major places. And egghead, if you want to learn JavaScript stuff with videos and useful stuff.

Kent C. Dodds (30:44):
Excellent. Hey, thanks so much Maggie for your time. I really appreciate it. And thanks everybody for listening. We'll see you later.

Maggie Appleton (30:50):
Thanks. Bye.