00:00 *Matt: * Welcome to Podcast Awesome. In this series of nerd show and tell episodes, we chat with members of the Font Awesome team, take a deep dive into some of their recent work, and share the nerdy interest that enriched their lives. I'm your host, Matt Johnson, and today we're talking with lead programmer Mike Wilkerson. In this nerd show and tell, Mike tells us about work he did related to the design tool used by the Font Awesome designers, and shares his fandom for the Marble Machine X music project. So maybe you can tell folks a little bit about what your professional background is and what your role is currently at Font Awesome.

00:54 *Mike: * Sure. My professional background, in college I studied math and computer science, computer information science actually. So I really loved the math part of it, but I didn't really fall in love with computer programming until after college. I worked at the Walmart home office, and I think the love for coding came from all the stuff I was doing outside of work especially. I was into Perl programming in those days, and I remember I had to be at my desk at Walmart at 7.30 a.m. in a tie. It was a very different culture. So I'd have to wake up way earlier than that in order to get a couple hours of coding in just for fun. 

There was a company in Seattle back in the 2000s when there was a dot com boom in those days, and they were very serious building some tools in Perl. The fact that I had learned a lot about the Perl programming language was an asset to get me to Seattle where I've been most of my adult life ever since. Then I ended up working at Microsoft after that. But then after some time there, I switched out of tech and did some people helping work for about 10 years. Then several years ago came back into tech full time and did a little bit of contract work, but then landed at Font Awesome. Dave and Travis, who founded Font Awesome, I went to high school with. So I graduated with Travis, and Dave was in the grade behind us. So yeah, we kind of reconnected years later after high school, and things just worked out to work together. So it's been great.

02:33 *Matt: * How was it sort of re-assimilating into that world? Had you spent some time just in your own free time working on projects or anything? How was it coming back? 

02:43 *Mike: * I did a little bit like website stuff that I hosted. I did a little like a WordPress site that I had. I would do little things with JavaScript on the front end or PHP on the back end to dabble with code here and there, but not very seriously. But yeah, maybe a year before, I could kind of see that it was going to be about time for me to switch back into tech. And I started brushing up on different coding stuff. 

Those 10 years to be out of tech were big years, I think, for the internet. Everybody was doing Ruby on Rails stuff, but I'd never even touched Ruby. So I started getting into doing some Ruby on Rails coding and React, JavaScript React on the front end. And so I did some things on the side with that before getting involved with Fun Awesome, where it's an Elixir shop. So then I learned a new language, Elixir, and they use Vue on the front end for JavaScript UI stuff. So learned Vue there and have learned more things since. But yeah, I started brushing up maybe a year prior to getting back into tech full time. 

Matt: Where were you working in the last split or maybe in the last couple splits? 

Mike: Well, so on this last split, I worked on something internally, we just call it the factory. It's the tool that our icon designers use internally to take icons from what they design in their design tool and export them as SVGs, which then have to be processed in a handful of ways to be scaled and formatted and various conversions need to happen to them and then optimized to be shipped as our Fun Awesome, like the standard way we format our SVGs. And then those SVGs that are processed in that way are also the inputs to the font building process so that what the icons that end up being built in the fonts, they come from the SVGs that have been processed from the ones that got exported from the design tools that the icon designers use. 

So we have been over the last several months overhauling on the back end how we store and manage all those icons. And so I've designed a relational database and a lot of just relational data integrity constraints and things in there now ensure that various ways of wrongly associating things can't happen anymore, which is just going to make it easier for us to not, just to be more organized with how the icons are stored. 

What ends up getting shipped usually works fine, but sometimes on the back end, there would be challenges with, you know, you've got all the icons have names, they can have aliases, but then what happens when the name changes and what if the Unicode also changes and then we also had Unicode aliases that were introduced in Font Awesome 6 and there's just enough kind of moving parts and how things can kind of get organized and we want to make sure it's just really clean on the back end as we're working with it so that that makes it even more straightforward for it to be clean and correct when we publish a build of it to ship another version of Font Awesome. 

So that relational database now is in production and the new version of the factory, which I worked on this last split, is the front end tool the icon designers can use to import their icon designs into our ecosystem and get them all converted into the right format. And then they can assign the names and the aliases and the unicodes and the categories and the search tags and all those other things that then end up being how we drive out a production shipment of the product. So the factory is what I worked on this past split. And that was all with the Elixir and Phoenix Live View stack for the kind of the front end and the middle tier. 

But then the core of it is still the all the SVG and font processing is written in Rust. So it's been fun to do native Rust modules that our Elixir apps can use to the Rustler package. And then the same codebase can be compiled as WebAssembly and run right in the browser. So we've consolidated all that code that works on the SVGs so that it can either run on the server inside an Elixir application or can run in the web browser as WebAssembly. So that's pretty fun to work on. 

Probably the nerdiest thing that I worked on nerding out on this last split was realizing that there was some strangeness going on with the circles. Some of the icons that have they're supposed to be circles. But the the tool that the icon designers are using to export some of these icons was I assumed what was happening is that as the SVGs were being processed, some approximation was happening and the the perfectness of the circles was being lost along the way. 

Matt: So it creates like a wobbling effect. 

Mike: Yeah, exactly. But then as I back traced it all the way to the original SVG that was being exported from the tool, it actually was even approximating things. So it started as an approximation of a circle. And so then by the time we scale and then you have to round things and true type font glyphs can't have floating point values anyway. So you're also rounding to integer point values and you end up with something that looks a little bit wobbly if you look close enough. And of course, I'm I'm looking very closely so I could see some of that happening. So I wrote some code to try to make those circles perfect instead of being approximate, at least in the SVGs. They could be perfect using elliptical arcs. And then, yeah, you still have to approximate if you convert it into a font glyph, but at least you're starting from a source SVG where there's a perfect circle there.

08:34 *Matt: * So what I was curious about, though, too, is that there were maybe certain browsers that were kind of problematic. Like, wasn't there something that popped up in Safari and like it looked OK? In some browsers and then maybe not others. Why? Why would that be?

08:49 *Mike: * Yeah, so that was a different that was the original wobbling icon issue that we found that had to do with the way that WebKit, which is underlying Safari, would figure out the font metrics. And I'm forgetting all the details. I was so in the weeds on that problem. But yeah, it would try to figure out the font metrics when we use the Unicode range property and CSS. In some cases, it would try to it what it was doing was falling back to using like Times New Roman or some sort of default font if it couldn't figure out what the font metrics were. And so it was just causing the box that the icon was in to be not like a perfect square or something. So then when it spins it, when you'd use FA spin, it would spin it around the center. The icon would wobble because the like the vertical metrics of that box were off because it was falling back to some other inappropriate font. 

So, you know, bugs have been filed and I'm sure it's being worked on in Safari, but we actually circle back around over the course of years trying to investigate and figure it out and figure it out. And we finally got help from Roel Nieskens at Pixel Unboxed. I hope I'm pronouncing that right to to finally drill down and get to the core of that and figure out the bug and get it filed. And so those icons that we will find a temporary work around for now for our our pro web font kits for that problem. But then the other one that I nerded out on this split with getting the circles perfect was another issue that just happened to kind of look like some wobble, even though it was really just like circles that were kind of approximated, not as well as they should have been. So, yeah, I've been dealing with a lot of circle wobbles lately trying to make things stop wobbling.

10:45 *Matt: * Yeah. So we had like a nice write up about that. And then we discovered, oh, actually, it's we haven't totally looked at the solution. We haven't looked at this problem quite yet. So hopefully we'll have something out there for folks to read once we feel comfortable about the solution. But, you know, some of it's a little bit out of our hands with Safari. So we'll see how that goes. 

So getting to the really important issues at hand here, do you think that there is an icon theme that's missing from the Font Awesome canon? Is there a wish list there for you that you wish Jory or Noah would would nail this one icon theme that's missing?

11:40 *Mike: * You recently got me thinking about the [heavy] metal category. And, you know, once you mention it, I think, well, yeah, there should be a metal category. Other than that, I yeah, I don't think I have any great ideas for the next icon category. 

Matt: OK, so how about what are your favorite Font Awesome icons? Well, one of my least favorite questions is a question about favorites, because basically my mind goes into like an algorithm of first enumerating all the possibilities and then sorting them and then picking picking the top one, because that's what you have to do for a favorite. So I just want to call this out right now that anything that I say, I'm choosing not to go with favorite because I don't want to do all that computation. 

Matt: So we're seeing like a beautiful mind, like math equations up in the air floating around. 

Mike: What I'm going to do instead is tell you about an icon that I use often, and that's just beer, the beer icon, because I love beer and it's just an easy one to remember. And then in Font Awesome 6, I guess Jory renamed it as a beer mug empty with hyphens or something. And so, I mean, the alias for beer still works. But yeah, also the Font Awesome 5 days, that's if I was ever like writing some test or something that needed an icon name, I would always use beer just by default or coffee. And then coffee changed to to be mug hyphen saucer. So the two things that were my go to beer and coffee, two beverages I love, 

13:24 *Matt: * the names changed on being very literal with the names. We don't want to be too prescriptive.

13:28 *Mike: * Yeah, that's right. This mug saucer could hold anything. This Stein could hold just about any beverage, right? Right. Yeah, that mug could hold coffee.

13:38 *Matt: * That is true. If you so chose to use a beer Stein for coffee, you could, I mean, you could do that if you wanted to. Any, well, on the topic of beer, any favorite beers that you like?

13:50 *Mike: * Well, I've been out here in the Pacific Northwest most of my adult life.

13:54 *Matt: * A great place for craft beer.

13:56 *Mike: * Such a good place for craft beer. So I'm spoiled with many, many varieties of wonderful IPA. So yeah, the IPA is the hoppy kind of grape fruity sort of flowery aromatic, you know, bitter, all that stuff in the IPA world is probably what I like the most. But the last time when I got a flight of things to taste the regional beers, it was half those IPAs and the other half was Stouts. So I like dabbling with Stouts also from time to time. But most of the time I'm drinking an IPA.

14:31 *Matt: * Deep, deep subjects. Again, what is the weirdest or crappiest job you've ever had?

14:53 *Mike: * Uh, well, a crappy job I had, I'm going to take a literal approach to that. So one summer, a buddy of mine, when we were, it was like, this is Kansas before we were driving, we must've been like 11 years old and we were down in this Creek and we realized you could catch crawdads in just this net thing that we had. And we thought we could probably sell these crawdads to a bait shop, you know, and we were too young to get normal, like hourly jobs anywhere. 

But if you can just get a little bit of money for some soda or candy bars or like Nintendo games, that would have been within a couple of years after the Nintendo entertainment system came out and you know, the, you know, Zelda and super Mario brothers and all of that. And so anyway, we probably wanted money to buy another one of those games, Contra, maybe. 

So yeah, one summer we, um, we spent time down in that Creek and it was crappy because, you know, we were stirring up a lot of crap in the Creek. And then we had this bucket of, of crawdads that we would, we'd take, put on a, you got a bucket, put on the handlebars of our bikes and right across to the bait shop. And, um, there was a lot of crap involved in that, but it was actually a lot of fun and great, uh, memories sort of like, uh, I mean, after watching stranger things, it's like, yeah, we pretty much, that was a classic. It was the eighties. We were on our bikes, uh, you know, at a ghost or an alien or something. And we would have been, you know, in one of those movies. Yeah. It was crawdads for sure.

16:11 *Matt: * And you found a bait shop guy that would pay for it.

16:15 *Mike: * He did. I don't know if he was just taking pity on us kids or what, but yeah, he, he sifted through them and picked out the big ones and gave us 75 cents or I don't know what it was.

16:27 *Matt: * Yeah. The country version of collecting cans. 

Mike: Yeah, that was great. 

Matt: We really value nerding out about stuff in general. Um, what kinds of stuff do you, is interesting you these days?

16:57 *Mike: * I've had a meditation practice for the last couple of years and, uh, I guess I nerd out about that. It's, I mean, I try to keep it as a daily practice most of the time. It's a daily practice. Um, but other than just saying, yeah, I'm, I'm dedicated to, um, to that practice. I don't really know what to say. It's hard to really talk about it. 

Matt: How do you talk about nothing? 

Mike: Exactly. 

Matt: This is going to get philosophical quick. 

Mike: Even the others that I, I'm in a practice community and there are others in there that are much more precise and talking about, you know, all the phenomenology of what's going on there and consciousness and experience and so forth, and I don't consider myself, um, particularly precise or eloquent in that regard. So I don't know that I'd be able to nerd out in any eloquent way about that, but it is something that I do, uh, outside of, I just went on a meditation retreat this last weekend, that's, you know, that's what I'm still working on when I sit in the morning.

18:00 *Matt: * If somebody is like, this all sounds a little woo woo, Mike, like, what do you think the, what do you, what's the benefit of like becoming aware of that or, or having some kind of basic practice for somebody that like is totally unaware of that world or doesn't get it?

18:14 *Mike: * Uh, well for me, it's mostly as in relationships, important relationships that I have in my life, like, uh, my wife, my kids. You know, um, and friends like you having a conversation. So bringing more, uh, spaciousness to kind of not be lost in my own stuff, but to be present with others in relationship and also to be more ready to kind of spontaneously adapt to what's going on in the environment rather than, you know, like I was planning on doing X, Y, or Z. And so if I don't end up doing X, Y, or Z, because you want to go check out this something or other, um, you know, being more adaptable to that, you know, being more spacious to, to flow with just the stuff of life and relationships. Yeah.

19:04 *Matt: * That's, that's one of the benefits that I experienced. We had a first crack at sort of the nerd show and tell, uh, which was dedicated completely to just intro an interest, maybe outside of work. And you had written sort of at length about the, uh, the music machine. Tell me a little bit about that. Are you still following that? And what's that guy's progress on that?

19:36 *Mike: * I haven't been following that. So that's Vintergarten and, uh, Martin Mullen is the, um, the inventor of that marble machine. Yeah. He spent like three years or so, um, building the second marble machine, the marble machine X, he called it after building the original one on a plywood and stuff. And then he made a, uh, a video that went viral on YouTube and kind of, I think launched a whole thing for him to continue building the next one.

20:05 *Matt: * We played 34,000 marbles for fail 36,000 marbles played for fail 40,000 marbles for fails. All four failed marbles. And it's basically a machine that I don't even know how to explain it. How would you explain it to somebody who isn't like looking at a video?

20:29 *Mike: * There's a bunch of steel marbles in this machine that, uh, basically has a crank that cycles these marbles through. So it's all mechanical and they drop down on the marbles, drop on to different things. There's a, there's a drum head, like a snare drum that would drop on to, um, there's a bass guitar strapped on it. So these marbles would drop onto the strings of the bass. So he can fret the bass with one hand, but the marbles are dropping to actually strike the strings. Um, um, and, uh, let's see, uh, a, um, vibraphone is a, is a, probably the main, um, part of it. So marbles are dropping onto the different keys, I guess they were recalled of the vibraphone. Um, and there, there are some other peripheral instruments in there too. 

Uh, so yeah, he got inspired years ago at a, I think the spiel clock museum, uh, somewhere in Europe. I can't remember where, um, where there were different music machines that had been made, you know, over the years. And so he thought, what if I could do this? And so he made one out of wood, made the video, but you know, he said he, it couldn't even play the song that the sort of famous marble machine song that came out with it. He couldn't play the whole song all the way through because the machine wasn't sturdy enough to do that. And it certainly couldn't like go on the road or something. 

So the idea was for the second one to be able to play many songs and be able to take it on a world tour and so forth. So he spent years trying to do that. And just with all the engineering challenges, uh, finally decided that's not going to work. So, uh, he started over again, kind of from first principles, just drafting and cadding. He was cadding on the marble machine X, but this one, he, he sort of committed to cadding things out more thoroughly before even manufacturing anything. But he got his, for the marble machine X, he got his own CNC machine. He taught himself how to do CNC. He taught himself how to do drafting, um, uh, or CAD, you know, CAD work.

 And, uh, and there's a whole community behind it that are like giving him tips and bringing their own expertise into different components that they have different specialties, like different machinists and so forth would, uh, would make different components according to whatever specs he drafted and send it in. And so it was really great. 

And I appreciate it because of the amount of, um, because it's both art and engineering or music, music and engineering, art engineering. And, uh, you know, I've lived in both of those worlds in my life. So kind of seeing all that come together in one project, I was pretty good. 

And then also he would occasionally talk about like meditation or dopamine or, you know, some other like life skills sort of stuff, which also is sort of the meta aspect of coming out of an engineering and art project that required persistence and creativity and problem solving and also continued inspiration and community management and all of that over time. So just bringing all that together is just really fascinating collection of things. And I've cared about most of those. I've never done any real engineering other than software engineering, but, uh, I've just, yeah, been really fascinated. Plus I love his music.

23:32 *Matt: * Yeah, that was a really cool project. And I loved how you talked about so many layers, so many aspects that went into it. Like not only was he having to learn things, but like you said, he would also discuss how to stay motivated when things were, when he was doing mundane work, you know, and that the art so often, like when we talk about art and creativity, we don't want to have to get in the weeds on stuff that's mundane and boring, but there's a certain amount of mastery there that you have to do to make it all work and come together. And so then you have broader conversations about how do you stay motivated when it gets dull? And it's really interesting. 

Yeah, it is the sort of byproduct of it. That's so great. And this is where it kind of brings in like the nerdery thing that we value so much is that when somebody has a passion to go deep on something like that, there's a whole, you're creating a whole community behind it. And when you share something that you're really, really into and that you can go really deep on it, suddenly there's, you know, this guy as this, this example of the music machine, there are all these people that want to, um, lend their expertise and help in some way. And it becomes this community oriented thing that is so great and that we value that so much at Font Awesome that like sharing your nerd, any given thing somebody nerds out about, it's not going to be everybody's cup of tea, but it is a community building thing.

 Like at our, uh, at our Snuggles, you know, some of us are really into mechanical keyboards and the craft of putting those together. And it's, you know, it's just this little thing, but it creates community doing it together. You know, it's so great.

25:16 *Mike: * Yeah. I was thinking about the mechanical keyboard, uh, phenomenon that hasn't been my thing as much. I I've had a ergonomic keyboard that I've used for years, which happens to be a mechanical, but then as, uh, others have gotten involved with mechanical keyboards, I have, that hasn't been as much my thing, but I've started to appreciate others' appreciation for, you know, some have these sounds more thocky or clicky or whatever the different terms are. 

Matt: I love the thocky. 

Mike: There's, there's sound, there's feel, there's color, there's texture, uh, there's, you know, the dimensions and how big it is, uh, and just all sorts of things that, that, you know, that people appreciate when they're working on those things. And so I've been appreciating their appreciation of something like that. 

And I think there's a thread that runs through, you know, being passionate about things and technical things like that. You know, what's great is when that just starts to become the normal cultural pattern that then gets brought into the product that we ship. So maybe not everybody loves seeing a perfect circle in SVG that doesn't wobble, but I do. And if I get to do dust off some of my calculus, you know, learning from way back in the day or some trigonometry or something like that, like I'm, I'm pretty excited to get to play with that stuff again and get these circles looking better, uh, stuff like that, you know? So that's appreciating, maybe something that a lot of people are never even going to see, but, uh, you know, maybe they will, maybe they will look at the SVG path drawing commands and, and, and see specific sequences of them. And no, that's no accident. You know, I made, I wrote the code to, uh, you know, make those smooth cubic curves out of the sequence of cubic curves or finding the sequence of cubic curves that could be turned into a sequence of elliptical arcs or something like that. Um, so I care about that. I want it to be good. I appreciate good curves and circles. And so, um, uh, 

Matt: Circles are gotta be curvy. 

Mike: Yeah. So, uh, anyway, I think just the, that's the thing about the nerding out is, uh, it's, it's appreciating and caring and like loving, it's loving what you do, loving the product or shipping, loving the tools you're using, doing it. I think all that love is just going to make a better project or product, but it also makes it more enjoyable to make it, which then is just this virtuous cycle, uh, hopefully of just getting everything's getting better and better.

27:51 *Matt: * A hundred percent. It's great that there is space that we make space for that, for that curiosity, that ongoing learning. Um, it just really helps with the culture of how we do work together. 

Mike: Yeah. 

Thanks for listening into podcast. Awesome. A special thank you to Mike for coming on the show. If you like what you've heard, please give us a rating and review and share this episode with your nerd friends. This episode was produced and edited by yours truly Matt Johnson. The fun, awesome theme song was composed by Ronnie Martin and the sneak peek of the heavy metal version of the fun. Awesome theme song was performed by Andy Mayer of belief agency. Audio mastering was done by Chris ends at lemon productions.