Matt: Welcome to Podcast Awesome, where we chat about icons, design, tech, business, and nerdery with members of the Font Awesome team. Font Awesome, go make something awesome. Font Awesome, go make something awesome. In this podcast, I catch up with Mike Wilkerson, Ed Emanuel, and Jory Raphael. We chat about how the Icon Wizard project came about, which is a new icon modifier feature. And as you'll hear, we channel our inner middle schoolers as we chortle about the original internal name of the project, which was originally called Barts. So here I am with Mike Wilkerson and Ed Emanuel and Jory Raphael talking about, I mean, can we just say Fawn Awesome farts? We could. We could. I mean, we could and we should. Yeah, we shall. Yeah. This came up on another podcast. I mean, why not get a little bit more mileage out of it? This project, known as the Icon Wizard, was originally Farts. So what's that about? Internal code name. Internal code name.
Jory: Acronym. Font Awesome Reusable Tidbits.

Matt: And just moments before the announcement went out, we decided maybe we should be a little bit more professional.

Jory: Yeah. Did you, Ed, did you, when you were coding up the actual little widget on the button, did it ever actually say farts?

Ed: Um, I don't think so.

Jory: Say yes.

Ed: Say yes.

Matt: Say yes. Absolutely. That's right. Yeah. So the icon wizard, this, uh, this is a project that came out of one of our SNAC activities. And we've talked about this on the podcast before the SNAC activities are these smallish little projects that we do often. They're sort of creative, sort of like to have not must have necessary, but like to have type projects that we do at the snuggle. And, um, So that was really fun to see as an outsider. Can you guys maybe talk a little bit about how that came about and maybe the moment you were like, hey, why don't we work on it right now?

Ed: I think. It kind of started with, uh, so most of the time Mike is very eager to work on these activities. And, uh, so we were sitting there at the table and I said, Hey, what does he want to work on this time? And he threw out a couple of ideas. Um, and it didn't actually start as like being able to customize icons. It was, uh, else, um,

Mike: I think it was a conversation with Dave talking about power transforms. We've a feature called power transforms for our SVG technology, but it doesn't work in web fonts. And so we just started talking about, well, why not? What would it take? And because I, I write the code that does our font building. So I'm thinking about how could we just do that in our fonts? And, uh, started playing around with that. What would it take? And I guess the thing that I was using as an example, which was, I always use like a beer, an empty beer mug icon or the coffee is my default icons. And I put a circle exclamation point over it as a power transform kind of layer or mask thing. And I guess somewhere along the line, it was like, Oh wait, that's kind of like the modifier or what we call modifiers. Now they, the farts idea. So it was playing around with, well, you said farts. Yeah. Well, it looked like I farted with this, um, beer mug and the explanation in a circle. And, um, yeah, so I was, I was trying to prove maybe we can do layering and masking or whatever. These are the things that were only happening with your SVG stuff. That's what I was working on. And somehow I don't know how, how we jumped the gap from there to,

Jory: The modifiers, but I was probably you see it. I was probably sitting across the room and I saw it or I was eavesdropping as I tend to do. And, uh, you know, it was like, Hey, because that modifiers pitch. So, you know, we brought up this pitch about this, the idea of creating what was, you know, we, as we've said multiple times, codenamed farts. And the crux of it was that we have all these little elements that we use to create icons and wouldn't be great if we could let people kind of on the fly something like similar to what we do with the power transforms is create their own versions of the icons. And as like one of the icon designers here we have. multiple variations of certain icons. So we have some icons like a microphone icon that also has a variation with a slash in it. And then we have like other icons that have a little circle plus in the corner, a little circle exclamation point, which is cool, but you have to be kind of, uh, you have to make decisions about which icons we're actually going to hard code those, those pieces into when we're creating an icon set. And we couldn't do it for every single icon. It makes no sense to do a slash version of every single icon in our library. Um, so, but it peaked, you know, I've always wanted to do it and we had that pitch kind of sitting out there and it kept bubbling up and kept not happening for various reasons. And so when you two got excited, um, I got excited.

Mike: Yeah. It's kind of happened. And so now we end up having kind of that functionality, uh, just for the icon wizard stuff. Cause anything that you do in the icon wizard does go right into a font. You know, your custom icons font has those modified icons in it. So. Fed two birds with one scone. That's right. That's the number of birds We like to feed with a scone when possible.

Mike: Yep, like birds and we like scones That is an absurd amount of icons. I mean how many modifiers? I don't remember we have 23 right now, I think Yeah, I think you're right sometimes so the possibility is like times 19,000 icons

Jory: Oh man, we'd have to, can we, can you, can you insert, can we say a number right now when you insert the actual number later, like in a robotic voice? Oh, sure. Yeah. So we have number of icons.

Matt: There's a lot of icons. Can't do the math on the fly here, but, um, Yeah, what a fun project. And it was funny to see you sort of to see Jory sort of jump on it, too. It was a great example of one of those activities where it's just a great project that picked up steam in the moment. And there was this excitement right there. And it's a great new feature that that we have. And we maybe wouldn't have had like an entire chunk of work dedicated to it. But it's one of those great little side projects we get to do at the Snuggles. It's just a great One of the little features of the snuggle.

Mike: It's great. It might have even been over two snuggles because maybe that conversation I had with Dave was from the previous snuggle because I, I remember finishing up a prototype of the first idea and, uh, and having it out there, uh, internally. And then it seems like I picked it up again on another snuggle and that's when Jory saw it. Yeah. Yeah. You're right. I farted.

Ed: And, and you both parted, let's be honest. Um, to talk more about what you, what you were saying, like, uh, picking up steam and stuff. Yeah. As we, as the week progressed and we had the feature got better and better and then showing off to everybody, everybody was like, Oh, that's really cool. Can you do this one? And, and just kind of jumping in and throwing out more ideas and stuff. It was a lot of fun.

Matt: Yeah and then you know it sort of sparked a creative thing in me too where hopefully there's a little bit of promo that will go along with this and we won't necessarily give it away but it sparked like some creative stuff for me too where it was like That's the great thing about these snuggles is that it's sort of hard to get that sense of excitement when we're all working remotely, but when we're in the room and we have some dedicated time just to sort of have fun and see what happens, it's a great example of what you can do when you're together.

Jory: Well, I don't know if you've noticed, but you two always sit in the same spot. It has become like your chairs at that little round table. It's right there in the center of the room. I would not think to take that chair. That's where all the good stuff happens. Yeah. And then you see me sitting on the outside, like, can I please be a part of it?

Matt: I want to sit at the cool kid table. Well, you do. I do.

Jory: You also sit there too. So do you sit at the cool kid table? Yeah. And Francis also is there often. So I don't think I've ever sat in one of those chairs.

Matt: Jory, do you want to sit there? I'd be willing. It's okay. You could, I mean, you could sit in my spot if you want to do it.

Jory: I'm going to do it tomorrow. Okay. Yeah. Sit in that chair. Do it. Cause we were in person right now. Yeah. We're recording staring longingly into your eyes, Matt.

Matt: That's right.

Ed: It's getting a little creepy.

Jory: Did you guys have any challenges with it? Any unforeseen roadblocks that you ran into while executing?

Mike: We have some that look weird still. So it's a beta feature and it turns out that some of the combinations don't look quite right. And I was just investigating that before I came over here. I think it has to do with fill rule actually. Again, the good old even odd versus non zero. Um, I think the library I'm using flow curves is re is returning the, the modified SVG in, um, even odd. And I didn't realize that. So. I can't wait to get back to my desk and convert those and see what it looks like.

Jory: So for anyone who's listening, Mike, do you want to explain a little bit what the what when you're talking about an SVG and you're talking about the the fill rule, even odd versus nonzero?

Mike: Oh, I always have to read, read stuff again to remind myself, but it has to do with So if you have like a solid, we'll take, take, um, one of our emoji smiley face. What does Mike even talking about right now?

null: All this tech stuff.

Matt: It just goes completely over my head. Anyway. Well, it'll be fun to go see the dungeons and dragons movie a little bit later. Um, Yeah. I wonder what's for dinner. Boy, it was heartburn city last night after that barbecue, that's for sure. Oh boy, I should probably eat a salad. Oh gosh, I should probably pay attention and kind of get back into the conversation here.

Mike: What the heck are they talking about again? Whether it's filled or not filled and then with even odd it just has to do with the number of times like an imaginary ray would would cross the edge of a contour if you drew it from some point out to infinity it's it's something like that

Jory: Yeah, what's interesting is that most, like a lot of vector programs like Figma, which we use for icons defaults to even odd when you're exporting the icons, because it's probably a lot easier to calculate because when you're drawing the paths, I think, um, but at the kind of the core of fun, awesome, the SVGs that we, we push into our build system need to be nonzero. Um, or well now we put, we can push in anything and we translate them to nonzero, but we need that nonzero single kind of winding path so that we can create. our typefaces and all our other magic.

Mike: And non-zero is the default for SVG, and it's what we need to take the SVG and convert it into the font glyphs to make the font. Uh, yeah. So I wrote the code that converts even odd to nonzero so that anything that gets uploaded by a customer and icon uploads or exported from whatever tool exports is even odd. Um, so now there can be converted into nonzero. So anyway, I've spent a lot of time dealing with this. And, um, so now that I'm seeing it crop up again, I'm thinking, Oh yeah, that. Yeah.

Jory: Yeah. Yeah. And it's interesting, it's kind of, and this is a layman's term, because I'm not a developer, but basically, if I'm understanding correctly, the way you build the icons with the icon wizard is we're taking this base icon path data, the shape of the icon itself, and we're taking a cutout, so like in the case of a circle, we kind of have a slightly larger circle. We cut that out of the top of the shape itself, and then we take the modifier, which is slightly smaller, and then merge it into the larger path data and create a new source of truth.

Mike: Yeah, and I've been assuming non-zero for every one of those things that you just described. And just before I came over here, I was reading the source code of flow curves, and it says in a code comment even odd. And I thought, oh, wait a second. So yeah, we're having a breakthrough.

Jory: I had a little breakthrough.

Mike: I mean, I, I got a test to see if it, if it really does break through, but it was very explanatory to see that comment in the code.

Matt: I love it. You seem to always get way in the weeds and like trying to troubleshoot and fix stuff.

Mike: It does. All of the projects. It does seem that way. It does seem that way. Do you like doing that? It is what happens. And I think I do like it. Yeah. Cause I keep doing it. Uh, but it is what happens.

Matt: Yeah. It just makes the icons awesomer. I mean, how about you, Ed? Was there, were there some challenges to some of the work that you did on the project?

Ed: Yeah, there were a few things. Um, but you're going to say, nope, went perfectly exactly as I expected it to, uh, like deciding how user interface stuff, making it easy for people to, to see the modifiers and be able to select them and stuff like that. I think originally I had like a dropdown with names in it and that's not super usable. You know, it's not, not as friendly cause you can't see what you're doing. You have to like my description of thing might not be the same as what the customers, looking for whatever so right yeah so we ended up switching that over to actually like rendering those little modifiers um so you can actually see them and click on them i did not have near the challenges that mike did well if you have any you can just give them over to him he likes doing that so yeah yeah any challenges troy do you have any challenges uh that you could give to mike oh man i have so many challenges

Jory: Oh, about the icon wizard? Any challenge you want. Or life in general.

Matt: I mean, he just, he likes challenges. He likes to fix stuff, so.

Jory: Yeah. I have too many to mention right now. Of all of us here, I guess, what's your favorite modifier? What is your favorite go-to addition?

Mike: I remember thinking the burrito modifier was really important. I can't remember why, but it seemed like you needed to be able to add a burrito to anything. Well, we don't have that modifier yet. Oh, did we not ship the burrito? Okay. Well, I felt that it was very important, but apparently it didn't get added.

Jory: That might have been one we took out at the last minute. I don't know.

Ed: So anytime I'm testing, I always reach for the poop modifier. Yeah. I mean.

Jory: How could you not? I do too. And I like to, I mean, because I'm a child, I like to add a poop to a poop. Yeah. You know? Yeah. And you have a big poop and a little poop right next to it. We do need we do probably need like a puff of wind modifier because then you know, then we can take the Icon wizard namesake and give it life and reality.

SPEAKER_02: Mm-hmm. Didn't you say something like, "FARTS: the second wind?" 

Jory: Yeah, that was Brian's idea for when, you know, the next version of the icon wizard as we improve it and add more features.

Matt: I sometimes want, cause Brian comes up with these great acronyms and ideas behind the scene. He always has names, the projects, all these really great things. I wonder if they just come to him. I don't have to talk to him about this or there's so many of them.

Mike: Yeah. Maybe we only hear a fraction of the, of how many come to him.

 Matt: I wonder if he has a moleskin where he just like jostle down his ideas all day. Like, okay.

Jory: What's amazing about it is, and in relation to this particular project that, you know, we talk about it being called farts and we kind of joke about it and it's funny, but when we first heard it, we thought it was funny. And then it just became the name we called it. And so in everyday conversation, we'd be like, just talking about farts and there was nothing funny about it. It was just like, so when you're working on farts, are you going to do X, Y, Z? And I think, oh, actually Dave asked me very specifically, he said that we should see if we get some feedback on this episode. And if there's enough support that we rename the feature.

Matt: Alright people, you know what to do. We'll do something official. People can vote. I don't know. So you're saying that there was a, at least in your mind, there was a burrito modifier or you more burritos as in like a plus sign.

Mike: I'm maybe it was adding a plus sign to the burrito. I can add burrito, more burritos. I think that was it. There was something with the burrito that was important to me at the time. We like, finally we can have this. Um, maybe I got it backwards.

Jory: I think we need to do is add a little sunshine modifier because then you could put that on the burrito and it could represent a breakfast burrito.

Matt: Oh, that's nice. There's, which is very important.

Mike: That is an important part of the snuggle as well. The breakfast burrito for me.

Matt: Yeah, me too. I think on the, uh, so it is tradition at the snuggles that Mike goes to Walmart and he gets a few bags of bags of burritos, breakfast burritos. Yeah, we have to have them. We got to have some breakfast burrito sustenance in the morning.

Jory: Did that, I mean, did that have anything to do with the naming of farts? No. Was that what happened? Were you sitting in the snuggle? You had your burrito. You felt a little bubbling in your tummy. No.

Mike: As far as I know, but see, Brian came up with the name, so you have to ask him what inspired the name. But burritos have been a part of my morning tradition is snuggles for a long time now.

SPEAKER_02: So, yeah, and I love it. It's a good tradition. Yeah. Well, there's so many options with the icon wizard. Um, I'm even thinking Jory, you have that great book of icons. Uh, what's that called? What's your book? Your icon puzzle book. Oh, it goes without saying. Yeah.

Mike: You could do another iteration of it. Didn't go without saying for me, I guess. I couldn't say it.

null: Yeah.

Matt: So we'll, we'll add a little, we'll add a little love to the show notes that everybody can check out Jory's book and maybe, maybe we can get a new edition. I mean, there's so many more stories we can tell with the modifier. Yep.

Jory: It's a little puzzle book that I like. Well, we need to add more modifiers too. Let's do it. We've talked about more features, being able to shift the modifier to a different side of the icon or nudge it or even like go back to the heart of that original idea you had about the power transforms and like, you know, actually overlay. Um, I know you're actually, Ed, aren't you at this current snuggle or toying around the, an addition or a, a, um, a, you know, sister feature to the, yeah, this, uh, I'm, I'm playing around with some ideas.

Ed: Um, it is. I don't want to spoil it yet, but it is definitely adjacent to the Icon Wizard. I need to ask Brian about a name for it.

Jory: We'll codename it Burps. Okay. It's like bits under… I can't do it.

Mike: Rust? It could be an R. Are you using Rust for it?

Jory: Yeah.

Ed: Okay. The backend stuff is Rust, yeah.

Jory: Bits using Rust per symbol. Okay.

Mike: That's not nearly as catchy. Brian does this much better.

Jory: Yeah, where's Brian when we need him?

Matt: Yeah, we'll trademark it. It's legally ours now. All right. Well, we will add, uh, notes to where folks can check out the icon wizard. So you know what to do. People go out there and check out the icon wizard. We're continuing to work on it. And maybe even at the time of the drop of this podcast, it'll be official. The second wind? The second wind. Yeah, second wind.

Jory: I do feel like I have to say, because we're being very silly about this and talking about the little poop modifiers and stuff, but it is an actual very usable feature for folks that, you know, and useful, I think, feature for folks where you can now literally add a slash to any icon that we have in any style that we have. You can add a little circle and plus, which is, you know, those are probably ones that are used much more often than the boot modifier. They're not nearly as fun to talk about, but there, there are a bunch of useful modifiers there as well.

Matt: Indeed. Yeah. Yeah. We want to be practical too. Cool.

Mike: Oh, good stuff. I want the burrito. I want the burrito modifier.

Jory: Okay. Version two, version two, version two. Once you figure out this, even actually do we have bacon?

Mike: Have we, are we adding bacon to everything yet?

Jory: Oh man. I mean, we have, well, we have the bacon icon and you can add a little plus next to it. Cause you know, add bacon to anything.

Mike: Okay. Yeah.

Jory: You've heard it here first and avocado.

Mike: You should be adding avocado to everything, I think.

Matt: So the millennials out there, they need their avocado. Yeah. Put on their test. All right, people. So I did give you fair warning. I said that we were going to bring out our inner middle schoolers on this one. So hopefully we didn't disappoint. And to reiterate what Jory said, really, The icon wizard does have a lot of great options that you can modify your icons with with the added benefit of having, you know, the fun ones like the poop modifier. Maybe one day we'll have a bacon modifier. We'll see. So, you know, the routine here, if you like what you've heard, please pass this on to your friends if they need a good laugh and give us a rating and review if you wouldn't mind. This podcast was produced and edited by yours truly, Matt Johnson. And yes, I did go looking for that fart sound effect and it probably took me way too long. The Font Awesome theme song was composed by Ronnie Martin and audio mastering was done by Chris Enns at Lemon Productions.