Podcast Awesome

The Snuggle Is Real: How Font Awesome and Shoelace Are on a Mission to Make Dev Work Easier

May 16, 2023 Season 1 Episode 8
Podcast Awesome
The Snuggle Is Real: How Font Awesome and Shoelace Are on a Mission to Make Dev Work Easier
Show Notes Transcript

Our guest in this episode is Cory LaViska, the founder of Shoelace — a component library that makes it easy to build performant, mobile-friendly websites using CSS grids and custom elements APIs.

Matt, Travis, and Cory discuss the partnership between Shoelace and Font Awesome, as well as their own experiences using different design systems and web components. Cory also touches on the benefits and challenges of modern web standards and the importance of keeping up with industry trends. Cory shares his favorite culinary icon, and busts Travis' chops for not having a Shoelace icon (yet.)
------------------------
TIME STAMPS

00:05:04 Customize CSS with Shoelace.

00:08:10 Reusable components for brand consistency.

00:11:50 Web Components: Easier Development.

00:17:06 Web components enable great tooling.

00:25:46 Use modern technologies.

00:30:17 Provide great software for free.

00:31:25 Open source technology is powerful.

00:36:04 Learn web programming with PHP.

--------------------

NOTES 






Stay up to date on all the Font Awesomeness!

01:00 Matt: Well, Cory, you're the boss of Shoelace.

01:07 Matt: We're excited to have you on Podcast Awesome.

01:10 Matt: And it sounds like this partnership between Shoelace and Font Awesome was maybe a long

01:17 Matt: time coming, maybe?

01:18 Matt: You guys have been introduced to one another for a while.

01:22 Matt: Travis, do you have a story about when you got to know Cory?

01:27 Travis: Yeah, getting to know Cory is more of a recent thing, but following Shoelace, the project,

01:34 Travis: kind of kept track of it off and on.

01:38 Travis: Looking at, thinking through design systems components, looking at when we first started

01:45 Travis: Fort Awesome, we used Bootstrap as kind of our design language, design system.

01:52 Travis: Then we messed around with tachyons and then we started doing some of our own stuff.

01:59 Travis: But back in the day, we'd kind of keep track of Shoelace just because it was kind of, and

02:06 Travis: I'll let Cory tell the story of Shoelace, but for me, it was kind of like Bootstrap

02:11 Travis: plus plus, one of the very first editions.

02:14 Travis: And then following on, keeping track.

02:17 Travis: I guess, I think with my RSS reader, a blog post came up where he talked about switching

02:24 Travis: from stencil to lit.

02:28 Travis: And we had been thinking about web components for a while and actually had one built in

02:32 Travis: stencil, was our icon chooser that Mike built.

02:36 Travis: And I was kind of like, interesting, I want to know.

02:38 Travis: Because we ran into some different things with our icon chooser with stencil and I was

02:42 Travis: just kind of like, okay, cool, is there something that he ran into that we saw?

02:47 Travis: And is it something I need to think about, that kind of thing?

02:48 Travis: And so, I blog post and I was like, oh wait, that's from the guy that does Shoelace.

02:54 Travis: And then I went and I was like, okay, what's been happening with Shoelace recently?

02:57 Travis: And it's like, oh, well now it's a web component library.

03:00 Travis: And so that's kind of where it's like, this is really interesting, because this is kind

03:06 Travis: of what internally we've been thinking about and mulling over and seeing where that plays

03:14 Travis: with what we're doing, just even for fun, awesome, say dot com or the apps we're building,

03:18SPEAKER_02: but also things that maybe pairs well with designer and developers.

03:25SPEAKER_02: We already talked to these are great tools.

03:27SPEAKER_02: Right.

03:28SPEAKER_02: Yeah.

03:29 Matt: So, Cory, glad to have you here and to meet you here.

03:32 Matt: Your first snuggle, first of all, how was the snuggle?

03:36 Matt: Did you think maybe you're joining in a cult initially when we called it?

03:41 Matt: Our biannual meetup is called the snuggle.

03:45 Matt: What's your first impression?

03:46 Cory: I mean, you saw the shirt I showed up in and it was the snuggle there and it said the snuggle

03:51 Cory: is real.

03:52 Cory: I'm all in.

03:57 Cory: Oh, yes, it's awesome.

04:02 Cory: Everyone I talk about the snuggle too, they're like, the what?

04:07 Cory: I think I share the same awkwardness or the ambition to make people feel awkward when

04:12 Cory: we talk about it as Travis and Dave.

04:15 Cory: But actually, I kind of want to rewind and talk about you said, oh, Shoelace and now

04:21 Cory: it's a web component library.

04:23 Cory: So you knew of Shoelace before 2.0.

04:25 Cory: Version one or whatever version it was in their version, that early, early Shoelace

04:31 Travis: that was kind of like, you know.

04:33 Cory: Okay.

04:34 Cory: Yeah, I'm impressed.

04:35 Cory: I did not have any awareness of that.

04:36 Cory: Shoelace didn't really pick up with popularity until 2.0 when it was web component based.

04:42 Cory: So I guess for those not aware, it initially was sort of a slim down version of Bootstrap.

04:50 Cory: And the idea was Bootstrap was primarily served over CDN and a lot of users would just import

04:56 Cory: Bootstrap.js and CSS and they wouldn't customize it.

05:00 Cory: And so my goal was number one, I want something a little simpler and slimmer and I wanted

05:04 Cory: to explore custom properties as a way of importing the library over the CDN, but still being

05:09 Cory: able to customize everything as much as possible.

05:12 Cory: And so that's where it actually started.

05:14 Cory: And of course, the natural pivot to leaning on platform things as web components became

05:18 Cory: more of a thing and browsers started supporting them.

05:22 Cory: That's where Shoelace 2.0 came out.

05:23 Cory: So I'm actually very impressed that you knew about Shoelace before.

05:27 Cory: That's why I kind of called it Bootstrap++.

05:30 Cory: Not that it had more, but it did interesting things that we ran into.

05:34 Cory: I mean, Bootstrap was a great library, is a great library for a lot of people and it

05:39 Cory: grew a lot with some of the things that slimming it down, giving you more choice, especially

05:46 Travis: around the things you were trying to do that I remember.

05:49 Travis: And again, this has been a few years, but the things you were trying to do around theming,

05:53 Cory: which we kind of always, we would take, a lot of times Bootstrap people would take it

05:57 Cory: and the complaint wind up being like, well, everything looks like Bootstrap because they

06:03 Cory: just kind of took the default theme.

06:05 Travis: And so we spent a lot of time and effort theming Bootstrap.

06:08 Travis: So you can look at Ford Awesome and it doesn't look like Bootstrap, but it is Bootstrap that's

06:13 Travis: running.

06:14 Travis: And so like, it's like, okay, is there a library like this that makes this process a little

06:17 Travis: bit easier?

06:18 Travis: Because we would do quite a bit of work around customizing the CSS or overriding them.

06:25 Travis: We used the SAS so that we could override a lot of the stuff and make it look different.

06:30 Travis: I was like, okay.

06:31 Travis: And I cannot even tell you what Google Foo I did to wind up on that first version of

06:38 Travis: Shoelace.

06:39 Travis: And so it was like, and I could tell it was newish.

06:43 Travis: And so it's kind of like, okay, I'm going to kind of keep an eye on this a little bit

06:46 Travis: and see kind of where it goes.

06:47 Travis: And then we kind of pivoted away from Bootstrap and so, and didn't really think about it for

06:50 Travis: a while.

06:51 Travis: And then when we got back into the web component kind of world and we were using Stencil, like

06:57 Travis: I said before, I found this article and I was like, oh, this is really well written,

07:02 Travis: really compelling, really well measured is why like Cory switched from Stencil to Lit.

07:09 Travis: I was like, oh, this is really good.

07:10 Travis: And then I was like, that name, and then I don't know if there was a link to Shoelace

07:14 Travis: or maybe I went to your site and whatever.

07:16 Travis: Anyway, it was like, oh, that's a Shoelace guy.

07:18 Matt: Shoelace guy.

07:19 Matt: Yep.

07:20 Matt: And here he is.

07:21 Matt: So for me, because I'm not a technical first person, you guys are speaking a few steps,

07:28 Matt: I mean, several steps ahead of me.

07:31 Matt: So for those that maybe aren't technically minded, can you talk a little bit about what

07:37 Matt: web components is and maybe how that, I don't know how that complements or how it's different

07:43 Matt: than say design systems?

07:45 Matt: How does that all fit together?

07:47 Cory: Yeah, that's a good question.

07:49 Cory: We could probably talk for hours about this, but at a high level, web components are really

07:54 Cory: a collection of web platform APIs that are built right into the browser and they let

08:00 Cory: you build basically custom HTML elements.

08:03 Cory: They solve a lot of problems that component models within frameworks were trying to solve

08:07 Cory: over the years, but now we have a native way to do that.

08:10 Cory: In terms of design systems, I think right now web components are a great fit for design

08:17 Cory: systems.

08:18 Cory: We have a lot of companies building design systems in React or Angular or whatever their

08:22 Cory: framework of the week is, and then they kind of lock their teams into using these components.

08:29 Cory: And the problem there is that not every team wants to use those frameworks.

08:32 Cory: And so web components sort of let you build your, can I say Lego bricks?

08:37 Cory: They sort of let you build Lego brick components that you can then assemble on top of to build

08:43 Cory: bigger and better things and with all the consistency and whatnot.

08:48 Cory: The nice thing about them is you can plug these into any framework and things just work.

08:54 Cory: So you can even pull your framework out later and continue using the same UI components.

08:58 Cory: And to me, that's just brilliant.

08:59 Cory: So while web component uses aren't limited to design systems, I find that they're a really

09:05SPEAKER_02: solid fit for them today.

09:08 Matt: So I've heard before a design system, maybe like a word picture, and let me know if this

09:16 Matt: is on the money or not.

09:18 Matt: Specifically, large organizations that maybe are building a lot of sites, they want to

09:21 Matt: have consistency for their brand, like the look and feel and sort of function of their

09:26 Matt: websites.

09:27 Matt: And you could maybe liken it to, and this is where you can tell me if I'm wrong, if,

09:33 Matt: I don't know, a real estate development company builds like a housing development and the

09:39 Matt: houses are pretty similar, but you would maybe have customizable options like a chef's

09:47 Matt: kitchen or something like that or an additional bedroom or something like that.

09:52 Matt: And it gives you sort of a template and a map and an architecture for how these sites

09:57 Matt: work, i.e. houses.

09:59 Matt: Does that kind of get at it or is it more complex than that?

10:04 Cory: I mean, kind of. Right. A design system is really not just components.

10:08 Cory: It's really more guidelines and specifications built to a brand standards.

10:12 Cory: This is how we want to represent ourselves.

10:14 Cory: Everything from your color all the way down to things like your buttons and patterns,

10:19 Cory: layouts. It's all inclusive into a design system.

10:22 Travis: So, yeah, I would say with your analogy, design systems, you know, yeah, gives like

10:31 Travis: again, like they're doing a whole development and they want their houses, you know,

10:36 Travis: similar and they're all within specification, but then they have options for changing.

10:41 Travis: Right. That's where you want maybe your design system custom customizability.

10:46 Travis: Right. Where you can change a few options and get a little bit something a little bit

10:49 Travis: different, but still on brand.

10:51 Travis: And yeah, with where web components play really well with the design system is they

10:56 Travis: can, you know, if built a correct way, you get able to change the look and feel of

11:02 Travis: those components, but they behave the same.

11:04 Travis: Right. So your foundation is the same.

11:06 Travis: You don't have to worry about is this button going to do something different now or do

11:10 Travis: I have to hook into this event system a little bit different now?

11:13 Travis: No, it's standard.

11:14 Travis: It's there. It operates the same.

11:16 Travis: I can make it look a little bit different or maybe I can move it around here or whatever.

11:19 Travis: And but it's going to it's going to still feel like what you're doing and you can easily

11:24 Travis: make it stay on brand.

11:26 Travis: The really nice thing, too, though, is that same button can be then taken to a different

11:31 Travis: development with a different look and feel or layout or whatever.

11:36 Travis: And you can change the look and feel, but the button still works.

11:40 Travis: Right. And you don't have to worry about the technology, the underlying technology.

11:44 Travis: So when he mentions like React, Vue, Angular, they're trying to solve these same

11:48 Travis: problems and were there first.

11:50 Travis: And I think it probably helped kind of foster the need for a web standard or platform

11:55 Travis: browser standard version of the same thing is now you can with web components take

12:02 Travis: that same button and go around in any kind of environment that's browser based and

12:07 Travis: use it. And it'll behave the exact same way.

12:09 Travis: You don't have to worry about the underlying SPA framework architecture or like whether

12:13 Travis: using Ruby on the back end or Elixir on the back end or PHP on the back end.

12:18 Travis: Doesn't matter because ideally you're just shipping HTML and HTML has been standard

12:24 Travis: since the web. Right. Since we started using browsers, it's just HTML.

12:28 Travis: It's just CSS. It's just a bit of JavaScript.

12:30 Travis: Right. And that's all standard based stuff that then you can rely on.

12:34 Matt: And that's what makes it pretty compelling.

12:37 Matt: Yeah. And I would imagine there's a ton.

12:39 Matt: You're taking a ton of headache and wasted time away from teams that have maybe built

12:45 Matt: in a different framework and everybody can play nice.

12:48 Matt: You have a I mean, imagine if somebody's like building something in a different framework

12:52 Matt: from somebody else, they can sort of stick with what they know and what they do well.

12:57 Matt: And they're going to build something together that works well and is consistent.

13:02 Travis: Yeah. The portability is, you know, when you're in development, sometimes you get to

13:06 Travis: choose what tools you get. Sometimes, you know, you're coming to a new company or a

13:10 Travis: new team or whatever and they already have what they know, you know, and they've, you

13:15 Travis: know, their customers don't care what tools they use.

13:17 Travis: They just want, you know, them to solve their problems.

13:19 Travis: Right. And so, you know, they already have tools.

13:22 Travis: They already know tools. And so, you know, you can start out with web components and

13:26 Travis: you can build one and multi-teams can use it with different, different languages.

13:30 Travis: Right. You know, and then you can start building more and you can, you don't have to

13:33 Travis: move all at once.

13:34 Travis: You know, you can move component by component and that way you can build a library that

13:38 Travis: everybody can use no matter what stack they've they're on or chosen or no or whatever.

13:43 Travis: You don't have to, you know, be super religious about it.

13:46 Travis: Right. You can just like, you know, if you like React, you like React, like Vue, you

13:50 Travis: but if they both need a color picker, right, there are color pickers on those things, but

13:55 Travis: maybe you want to have a certain set of swatches, all this kind of stuff.

13:59 Travis: Well, instead of configuring that both for both systems, you can build one web components

14:04 Travis: and now they both can use it and it stays on brand and stays on the swatches that are

14:07 Travis: allowed, you know, whatever.

14:08 Matt: So this is a pretty new partnership so far.

14:11 Matt: So there's probably been lots of talk about plans for the future.

14:15 Matt: Is there is there anything that you guys can talk about about kind of what you got up your

14:19 Matt: sleeve or what you're hoping for?

14:22 Matt: You're not committing to anything, by the way, that we will, you know, ship something

14:28 Matt: particular. But are there chats that you're having about how Font Awesome and Shoelace

14:32 Matt: will start working together and what the hopes are for the future?

14:35 Travis: Absolutely. So what kind of how Font Awesome and Shoelace have partnered up here is what

14:43 Travis: we were doing with Font Awesome and a lot of the challenges we were having internally,

14:49 Travis: just building projects and projects.

14:53 Travis: Is there a way that we can make designers and developers lives easier?

14:57 Travis: That's really the focus of Font Awesome.

15:00 Travis: Can we give you a great product?

15:02 Travis: Remove pain, remove extra overhead, because it's a hard job.

15:06 Travis: You know, designers and developers have really hard jobs because, you know, they said it's

15:10 Travis: cliche, but it's true. The Internet is eating the world, you know, and there's a lot of

15:15 Travis: companies. They have lots of projects they want to do.

15:17 Travis: They have a lot of problems they want to solve for people.

15:18 Travis: And, you know, any time you can take just a little bit of pain away, you know, and that's

15:22 Travis: kind of what Font Awesome did.

15:23 Travis: It gave you great icons on great tech.

15:25 Travis: You could just not you don't have to think about it.

15:27 Travis: It's like, you know what? I need some great icons.

15:30 Travis: And as we add more and more styles, right, so you can go grab what you need, put it in

15:34 Travis: there. It just works. You can get on the business of building whatever it is your task to

15:38 Travis: build. And we are thinking along the same lines of what else could we do with designers

15:43 Travis: and developers? You know, we were kind of solving these problems internal and we're like,

15:47 Travis: OK, can we build a really interesting system that's HTML forward, you know, CSS

15:53 Travis: forward, standards forward that you could easily theme, you could easily change the

15:58 Travis: look and feel, you know, make sure, you know, whatever visual design library or aesthetic

16:02 Travis: you're looking for, that it would support that, you know, and we were using that internal

16:06 Travis: and growing that internal and doing the FAA icon chooser and kind of playing around with

16:11 Travis: web components and seeing kind of where that world was because it changes rapidly.

16:15 Travis: I mean, it's a standard, but, you know, more things are coming and it's really exciting.

16:19 Travis: That really started piquing my interest personally, like, hmm, what could we do around

16:25 Travis: web components? What could we could we build a design language around this kind of thing?

16:31 Travis: Does this fit where we're trying to go?

16:33 Travis: And that article just kind of kicked off this really just this storm of activity where it's

16:40 Travis: like, you know, I started talking to Dave, you know, about, man, I wonder if this is the way to

16:45 Travis: do something. And then it's like, man, you know, Shoelace is doing this.

16:48 Travis: This is really cool. Like this this really looks like something we could either use or, you

16:55 Travis: know, educate ourselves on, you know, because it's open source and that's the beauty of open

16:59 Travis: source. It's like, you know, I can go look and say, oh, that's cool.

17:01 Travis: That's how you solve that problem. Maybe I'd solve a little differently.

17:03 Travis: I don't know. Maybe we build our own whatever.

17:06 Travis: And then Dave's like, hey, why don't you reach out and have a conversation?

17:09 Travis: Let's just talk to him.

17:10 Travis: I'm like, that's where Dave's great.

17:13 Travis: That's where Dave's great where I'm not.

17:14 Travis: He's like, hey, let's just talk to this person.

17:15 Travis: Yeah. And before long, we're talking and then it just kind of snowballs from there.

17:19 Travis: It's like there's there's something here.

17:21 Travis: And so on your question of, you know, where this fits with Font Awesome for our side, we

17:27 Travis: believe in and web standards.

17:29 Travis: We believe in HTML, Ford, CSS, Ford, JS, Ford.

17:33 Travis: We believe in all this stuff and we want to make that easier for designers and developers

17:39 Travis: so they can build great software.

17:41 Travis: And what that looks like, we can tease out maybe a little bit.

17:45 Travis: Yeah. Well, it's still new.

17:47 Travis: Yeah. Yeah. But we definitely have thoughts.

17:50 Travis: We definitely have ideas of how we can have a lot of fun and provide a lot of really good

17:57 Travis: tooling for designers and developers to make their jobs easier.

18:00 Travis: And that's kind of where we're going with Shoelace.

18:02 Travis: Taking Shoelace, the great thing that Shoelace is now and just adding some more.

18:08 Cory: Making it greater. Making it greater.

18:10 Cory: Plus plusing it. You can always add more sprinkles.

18:12SPEAKER_02: Yes, you can always add more sprinkles.

18:14 Matt: Making it awesomer.

18:19 Matt: Well, it sounds like it's right in the ballpark of maybe even solving internal problems for

18:29 Matt: Font Awesome too. Like, are there like, have you guys made use of this stuff and seeing

18:34 Travis: sort of on the ground how it's making things easier for our team internally?

18:38 Travis: Yeah, actually, it's a great story.

18:40 Travis: Jory, you know, he was he was thinking, you know, because a lot of this motion internally

18:46 Travis: and all this kind of stuff, he's like, you know, I wonder if I can just, you know, put a

18:49 Travis: little, you know, he's he's mainly design icon design, that kind of stuff.

18:52 Travis: He's like, I wonder if I can just pull something together with the documentation, grab some

18:57 Travis: of the components, you know, use a handy dandy CDN link and just started playing a little

19:02 Travis: bit of HTML. And there it is.

19:04 Travis: That's awesome. And, you know, you can just start using it.

19:06 Travis: It's it's it's really compelling.

19:10 Cory: Yeah, CDN is where it's at.

19:11 Cory: Yeah. I actually remember very well the day that I mean, you guys obviously were thinking

19:17 Cory: about stuff and talking about stuff before this ever happened.

19:20 Cory: But I remember the day sort of went down for me and it started with me.

19:25 Cory: I was I was at work at home at work and I see this like on Twitter and it was like, oh,

19:31 Cory: Dave Gandy followed you.

19:32 Cory: And I was like, oh, I totally know that guy.

19:34 Cory: In fact, you know, been using bootstrap for years and Font Awesome was pretty much the

19:38 Cory: unofficial official bootstrap icon library.

19:42 Cory: And then a few minutes later, direct message from Dave.

19:46 Cory: And so I think a few hours later, maybe even an hour or so later, I was on my porch outside

19:52 Cory: talking to him. And then what was it like a few weeks later?

19:56 Cory: If that I was I was in Arkansas having the time of my life with like what felt like a

20:01 Cory: new family. And this is actually my third trip out here.

20:05 Cory: It's pretty awesome. And you guys have just been incredible.

20:07 Cory: So I just that was sort of a life changing moment for me, a career changing moment for

20:11 Cory: sure. Going from a very, very big company with hundreds of thousands of people to,

20:16 Cory: you know, 18. And I can tell you, I'm not good with remembering names.

20:21 Matt: But on day one, is how much of a family presentation.

20:24 Matt: And I was counting you had everybody's name.

20:27 Cory: So I don't know. So I did Monday morning.

20:29 Cory: I got there Sunday night.

20:31 Cory: I met probably probably about half of the folks at dinner that night.

20:34 Cory: And then by Monday morning, I gave the presentation, went around the room and I had

20:39 Cory: everyone's name memorized, which for me felt like impossible.

20:43 Matt: Nice work. Nice work.

20:45 Travis: I have a question for Cory.

20:47 Travis: Yeah, because I actually don't know the answer.

20:50 Travis: Or maybe I did. I forget a lot. I'm getting old.

20:52 Travis: But how did you get into Web Components?

20:55 Travis: Like what, you know, Shoelace before wasn't Shoelace 2 is.

21:01 Travis: And you even went through technologies even on the Web Component front.

21:05 Travis: So when did that spark hit or when did that?

21:08 Travis: When that? Yeah. What's that story?

21:11 Cory: That's kind of goes back to the early to mid 2000s when I got into web development and

21:16 Cory: I was I just somehow fell into the A list apart group of, hey, web standards are

21:21 Cory: awesome. And that was probably from the pain of browsers being so different.

21:26 Cory: And, you know, but fast forward to Web Components, I was pretty big on bootstraps

21:31 Cory: starting with two and three, I think.

21:34 Cory: And, you know, frameworks started becoming front end frameworks started becoming more

21:38 Cory: ubiquitous. And we started building components and stuff.

21:41 Cory: This is cool. The component paradigm is really useful.

21:44 Cory: It just made a lot of sense.

21:46 Cory: But then I get bit by the framework bug.

21:48 Cory: And I'm not going to say which framework because I'm not throwing anyone as a bus

21:51 Cory: here. But stuff is to say, I still have a an app in production that's like in an old

21:57 Cory: version of a framework because it was just too painful to update.

22:00 Cory: And not only that, the component library that I used in that framework also had its

22:05 Cory: own version increase when the framework major versioned the the component library

22:10 Cory: effectively forked. And so not only did I have to upgrade a big framework, but I had

22:14 Cory: to upgrade every component in this component library.

22:17 Cory: And I was just pulling my hair out and I was like, you know, I'm not going to do it.

22:20 Cory: And that's sort of the light that went off.

22:21 Cory: Like, how how can we do how can we have components that we don't need to do this for?

22:26 Cory: And so, you know, at the time, Web Components were still new.

22:30 Cory: There was still a lot of questions. They had this V zero version that sort of got

22:34 Cory: reworked into, you know, and that's kind of rare for a standard when they standardize

22:38 Cory: things, they sort of just pick them up and run with them.

22:40 Cory: But Web Components went through sort of a shaky start and then it stabilized and then

22:45 Cory: it got really good and it keeps getting better and better and better.

22:48 Cory: And it was at the point where we realized IE11 was kind of dying because there was

22:52 Cory: not a lot of new stuff going into that.

22:54 Cory: So Web Components and IE11 were just not a lot of fun.

22:57 Cory: But it was right at that convergence of, hey, we actually have modern browsers with

23:00 Cory: modern APIs. Let's just start tinkering.

23:03 Cory: And it was a bit bleeding edge because not a lot of people were doing it.

23:06 Cory: But I think we're showing right now with what has a couple of years ago, 18 percent

23:11 Cory: or more of every page load tracked by Chrome uses a custom element.

23:15 Cory: And that's just unheard of.

23:17 Cory: Like five, six years ago, it was probably in the one percent.

23:20 Cory: And now they're just everywhere and they keep proving themselves over and over and

23:37 Matt: over. What's cool, too, is the philosophy of these two companies coming together.

23:41 Matt: You guys both.

23:44 Matt: You have a love for the open source community and you're both.

23:50 Matt: I mean, Font Awesome started to solve a problem.

23:52 Matt: You and Dave were working together and Dave couldn't get these icons to work that

23:57 Matt: he wanted the way that he wanted.

23:59 Matt: And like we have to figure out a way to fix this.

24:01 Matt: And you're actually solving a problem for yourself that resonates with other people.

24:06 Matt: And I love how it's like love for open source.

24:10 Matt: Love for wanting to serve the community of people building stuff.

24:14 Matt: So it makes great sense that you guys would come together.

24:18 Cory: So I'm not I actually have a confession to make.

24:22 Cory: I built Shoelace for me.

24:23 Matt: Well, yeah, but you're but you're you're solving a problem.

24:27 Matt: But then it resonates with people.

24:28 Cory: Absolutely. And it's a common thing here in open source.

24:30 Cory: Like I built this scratch my own itch.

24:32 Cory: And then people liked it.

24:33 Cory: And in this case, that was exactly what it was.

24:36 Cory: I was like, it was that same problem with the component library changing, the

24:39 Cory: framework changing. So I built this once again for me.

24:42 Cory: And then I just kept building it and building it.

24:44 Cory: And I was like, I'm going to use this for something.

24:45 Cory: I don't know what, but I'm definitely going to use this.

24:47 Cory: I'm so excited to like to finish this and start building something with it.

24:51 Cory: And that never happened because the more people got interested in it,

24:54 Cory: the more components that they wanted, the more things.

24:56 Cory: And I was like, yeah, that's a great idea.

24:57 Cory: And so I just sort of got entwined in building this library and adding more

25:01 Cory: and more and more. And there's components that I personally have never actually used

25:05 Cory: in a project, but I know a lot of people do.

25:07 Cory: And so I take the time, build it out, make it as stable as possible,

25:10 Cory: because one day the hope is I'll be able to go back and use every single one

25:13 Cory: of these components in something of my own.

25:16 Travis: I just haven't got there yet.

25:18 Travis: Yeah, that's exactly what happened. Awesome.

25:20 Travis: You know, it was scratching, like you said, scratching that own itch.

25:22 Travis: And it was like we were building

25:25 Travis: both David and I were at a different startup.

25:26 Travis: We were, you know, building something out.

25:28 Travis: And, you know, the way is kind of, you know, some of it is also fortuitous.

25:33 Travis: You know, like you said, a web component standard comes out.

25:37 Travis: Right. And as technologists, we like we like to peek by technology.

25:43 Travis: You know, at the time Font Awesome was coming out,

25:45 Travis: Retina displays were coming out. Right.

25:46 Travis: And now, you know, and you've got a problem.

25:49 Travis: Scaler versus graphic. Yeah.

25:50 Travis: And so it's like, OK, we're going to build this.

25:52 Travis: We're going to build it in a way that it will scale and it'll work.

25:55 Travis: And, you know, and it was solving our problem.

25:56 Travis: It's like, wait, this is a problem everybody could be having. Right.

25:59 Travis: Right. And let's just let it out. Mm hmm.

26:02 Cory: Yeah, I think I think Retina displays

26:05 Cory: single handedly killed those 16 by 16 silk icons that I love so much.

26:09SPEAKER_02: Yeah, yeah, absolutely.

26:11 Matt: So follow up question would be you're doing something to scratch your own itch

26:15 Matt: and to solve your own problem, you see that sort of catching on a little bit.

26:19 Matt: Did you ever have an inkling at any time like, oh, maybe this could wow.

26:23 Matt: Maybe this could be my bread and butter instead of working at a large corporation.

26:26 Travis: Did that ever occur to you since the inception of Shoelace as the,

26:30 Travis: you know, version one simple like bootstrap alternative?

26:33 Cory: My my hope and it was just it was totally a just a reach.

26:37 Cory: But my hope was like, maybe this could be the next bootstrap

26:39 Cory: because bootstrap was everywhere at the time.

26:42 Cory: And I never imagined that we'd start to pick up this kind of traction with it.

26:46 Cory: Yeah, I think everyone wants to see a side project succeed.

26:48 Cory: But I was a little bit more pragmatic in that this is a side project.

26:52 Cory: I don't have big expectations for it.

26:54 Cory: And maybe that's the formula.

26:55 Cory: I don't know. Put love into it. Keep at it.

26:57 Cory: I can tell you, my family thought I was a little bit crazy.

27:00 Cory: Like, why do you spend so much time doing this?

27:03 Cory: And well, jokes on you guys now, because we're having an awesome time

27:06 Cory: and we're building stuff that we really love.

27:08 Cory: And and and it's just it's been a really great experience

27:11 Cory: to see something like that that really never was supposed to be anything

27:15 Cory: turned into something that so many people find inspiration and really love.

27:18 Cory: And this thing is used in companies from some of some of the

27:22 Cory: I'm not going to name drop, but a lot of big companies in the FAANG levels

27:26 Cory: and everywhere in between.

27:28 Cory: And it's not uncommon for me to hear from people, hey,

27:31 Cory: I looked at how you did this.

27:32 Cory: And I really just appreciate like somebody's doing this

27:34 Cory: and showing the world how these things can be approached.

27:37 Cory: And I love to hear people are inspired by the Shoelace.

27:51 Matt: Some people belly ache.

27:53 Matt: Well, I don't know.

27:54 Matt: You guys tell me whether people belly ache about sort of the culture of

27:59 Matt: open source and then finding a a model.

28:03 Matt: So Fon Awesome was able to you've got an open source product.

28:06 Matt: Anybody can use it for free.

28:08 Matt: And then you figure out a way to to monetize it.

28:10 Matt: But you also at the same time are expanding

28:13 Matt: and exponentially all of the free services that you have.

28:17 Matt: Cory, do you do you have a thought on are there people that belly ache

28:22 Matt: that you've like gone to the dark side or something?

28:24 Matt: I don't know what it's like in in that community.

28:27 Matt: Or if there's any pushback or folks that get uptight about that.

28:33 Cory: I've been doing open source for a while, mostly smaller things.

28:37 Cory: And I've read the stories I've heard, and I've seen some

28:40 Cory: some projects, you know, quote unquote, sell out.

28:44 Cory: And it's kind of a double edged sword because you know,

28:48 Cory: while a lot of maintainers are happy to do this for free for a long time,

28:52 Cory: it does take a lot of time, it does take a lot of energy.

28:55 Cory: It's almost contradictory to say, hey, I'm doing free and open source project.

28:58 Cory: And now I want to make money off of it, because the second you bring money into it,

29:00 Cory: it's evil and you're selling out.

29:02 Cory: And what I can say about Shoelace specifically is I've been pretty transparent

29:06 Cory: throughout the process with a team that's also very big on open source.

29:10 Cory: I can confidently say, yeah, we're going to keep the components open source.

29:13 Cory: Everything that you have today is going to remain that way.

29:16 Cory: And I think that helps a lot.

29:17 Cory: So in plus the Shealy's community, it's full of forward thinking

29:20 Cory: individuals who kind of get that.

29:23 Cory: They're like, we love this.

29:24 Cory: We want to keep using this.

29:25 Cory: We get that you've been doing this for free.

29:28 Cory: And so it's OK.

29:29 Cory: We find that balance of how do we offer something above and beyond

29:33 Cory: that you can opt in and pay for if you want, but you don't have to.

29:35 Cory: We're not making you. We're not baiting and switching over here.

29:38 Cory: So they've been pretty fantastic about that.

29:41 Travis: No, no major complaints. Yeah, that's great.

29:43 Travis: And also it's fun. Awesome.

29:44 Travis: I mean, that's really our philosophy.

29:46 Travis: And when we we worked on it, you know, Dave was building the icon.

29:50 Travis: You know, we're all working for other people.

29:52 Travis: You know, Dave's building the icons.

29:54 Travis: You know, he hit me up, hey, can we add a little search the site?

29:57 Travis: All this kind of stuff.

29:58 Travis: And we decided to is there a way that we could make fun

30:02 Travis: awesome our full time job, you know, where we don't have to work

30:04 Travis: for somebody else and kind of do it whenever we have free time?

30:08 Travis: You know, can we make this our full time gig and really provide even more value?

30:13 Travis: And so the way we view open source and quote monetizing open source,

30:17 Travis: it's really just providing great software people that, you know,

30:20 Travis: for people that they can or can't, you know, they can buy or they don't have to buy.

30:24 Travis: And since we're able to do this,

30:27 Travis: the free set has grown exponentially, you know, and we provided

30:31 Travis: all these other services that you can buy that I believe for a great price

30:36 Travis: that provides a lot of value.

30:38 Travis: But that's like, to me, the most transparent contract with with anybody.

30:43 Travis: It's like, listen, we're not going to sell your data.

30:45 Travis: We kind of did this before Patreon came along.

30:47 Travis: So who knows if we would have went that model? I don't know.

30:50 Travis: Because, you know, a lot of people get to do that model.

30:52 Travis: That's really cool.

30:53 Travis: But for us, we thought it was like a pretty simple contract.

30:56 Travis: You can use our open source free now and forever.

30:59 Travis: Yeah, you know, and we love it.

31:01 Travis: We love open source.

31:02 Travis: We have amazing people.

31:05 Travis: Jeremiah, who just constantly gives his own time to answer the community is.

31:10 Travis: And I mean, that's what I love about open source.

31:12 Travis: You just these people I would have never met.

31:14 Travis: Yeah. And these amazing people that do it out of just the love of of the project,

31:18 Travis: the people they get to work with, they interact with.

31:21 Travis: And then on top of that, for us to have a company, we just we believe,

31:25 Travis: provide just a great product on top of it that you can take advantage of if you want to.

31:30 Travis: You know, and it seems like for us and we even put it on our front page.

31:33 Travis: It seems really clear.

31:35 Travis: So this is what we're doing.

31:36 Travis: No, no tricks. No, nothing.

31:38 Travis: We're just going to have this like we have fun. Awesome.

31:40 Travis: If I'm awesome, pro, you just get more.

31:42 Travis: You just get more if you live on awesome.

31:44 Matt: Yep. And it seems like that's a great model for just moving technology forward.

31:48 Matt: In general, people that have a love for it, that are fixing their own problems,

31:52 Matt: scratching their own itch, a recognition that it's helping other people.

31:57 Matt: I mean, what better way to like build things and also create a model

32:01 Matt: where people can continue to do what they love?

32:04 Travis: Yeah, this whole this whole industry was built on that kind of foundation of

32:08 Travis: we're very, still very young industry and technology, you know,

32:11 Travis: and the early stories with Bill Gates and Steve Jobs

32:15 Travis: and just building computers out of the garage and doing all this kind of stuff.

32:18 Travis: Lenis Torvold's and Linux and just how open source just kind of,

32:22 Travis: you know, it's kind of almost the standard bearer of when that came out.

32:25 Travis: It's like, hey, you can have a Unix system for free

32:27 Travis: and you get to see all the source code and you can contribute to it if you want.

32:32 Travis: You can fix your own bugs.

32:33 Travis: You can fix your own bugs and you can fix them for other people.

32:36 Travis: Love that. You know, and it's just being able to have a.

32:39 Travis: I love a world where you have a bunch of just these little independent

32:43 Travis: software vendors that solve this niche.

32:46 Travis: A lot of people love icons.

32:47 Travis: I don't know very many people that care about icons the way Dave, Jory, Noah care.

32:53 Travis: I mean, they care about icons even more than I do.

32:55 Travis: Like these guys just love icons, you know, and the whole team loves icons.

33:00 Travis: But those three in particular, the discussions they have around.

33:04 Travis: Right. And that's what I love.

33:06 Travis: Right. You talk to Cory about web components

33:10 Travis: and you're going to see a passion.

33:12 Travis: That's what the stuff I love about it is because and then you can take that.

33:16 Travis: Hey, if we can if we can make a living just providing this for people

33:19 Travis: that also love the stuff or it solves their problem.

33:22 Travis: That's what I love about most about anything.

33:24 Travis: It's not almost software. It's almost to me irrelevant.

33:27 Travis: What we what we solve because it's the people that write in to support and say,

33:31 Travis: man, I love you guys.

33:33 Travis: You just saved me so much time.

33:36 Travis: That's why we do it. Yeah, that's why we do it.

33:38 Travis: It's just be able to to solve those problems because we've all been there.

33:42 Travis: We've all worked in those jobs where just like, I mean, I had, you know,

33:45 Travis: open source projects. I was like, man, I just love those guys.

33:49 Matt: They saved me so much time. Oh, totally.

33:52 Matt: Yeah. And to occupy a tiny little sliver of the world

33:56 Matt: where people are working on things that they enjoy solving

34:00 Matt: and they enjoy sharing it, they enjoy sharing the joy of solving

34:04 Matt: that problem for other people, too.

34:05 Matt: It's just like if we all could be so lucky to have that tiny sliver of the world

34:11 Matt: where we were all feeling really good and a lot of

34:15 Matt: getting across this goodwill to other people.

34:17 Matt: Yeah. The world would be a better place.

34:19 Travis: Yeah. I mean, I think, you know, I always have fantasies of like,

34:22 Travis: I'd love to write novels.

34:24 Travis: You know, this is my novel. Right.

34:26 Travis: This is the way I share with the world, you know, and that's

34:29S Travis: that's where I've been skilled.

34:38 Matt: On the subject of sort of the love of things,

34:43 Matt: when did you start getting interested in tech and what is your background in tech?

34:51 Cory: I think it was about 12 and I was at a yard sale

34:55 Cory: and with my mom and my grandmother and I saw this cool little device.

34:59 Cory: And I guess I have to age myself to tell this story, but this is in the 90s.

35:04 Cory: And it was this TRS 80 pocket computer

35:07 Cory: with this little book that told you how to program it.

35:10 Cory: And I was like, I really, really, really, really want this.

35:11 Cory: So it was seven dollars, which at the time was like a billion dollars for me.

35:15 Cory: But my grandmother bought it for me.

35:17 Cory: And I went home and I just put batteries in it and I started building these programs.

35:22 Cory: And then I was like, I can change this.

35:24 Cory: And it just clicked.

35:25 Cory: And so from that point, I took that knowledge to one of my teachers.

35:30 Cory: I want my science teacher who said, hey, you know, you can do that with this computer, too.

35:35 Cory: And boom, I recognized that QBasic was a thing.

35:38 Cory: And I started tinkering with that.

35:40 Cory: And it just evolved.

35:42 Cory: There was a little bit of a gap there when I went in the army and did that.

35:45 Cory: When I came back, one of the things I had picked up on was learning how to put

35:48 Cory: like some of the stuff that we had been doing, like I wanted to share it

35:52 Cory: with some of the people.

35:53 Cory: I didn't want to burn that many CDs.

35:55 Cory: I really am aging myself here.

35:57 Cory: But it's a CD.

35:59 Cory: How can I put it somewhere where you know, I can just point to you some.

36:02 Cory: Well, that's a website.

36:03 Cory: And so I learned how to do that.

36:04 Cory: I bought a domain, learn how to do that, put all this stuff on there.

36:07 Cory: And then somebody was like, hey, did you know you can like program

36:10 Cory: on the web? And I was like, what?

36:12 Cory: And then boom, PHP.

36:14 Cory: And so it just kept trickling.

36:15 Cory: And like the more I got into it, the more I wanted to keep learning and learning.

36:17 Cory: And eventually, you know, I think we all

36:21 Cory: on the front and pivoted to JavaScript these days.

36:23 Cory: But I love for PHP and everything.

36:25 Cory: Web is really where like I love programming.

36:29 Cory: But I absolutely love, love the web.

36:32 Matt: Yeah, that's I think that's Ed's background to his his first

36:37 Matt: dive into technologies, the TSR 80.

36:40 Matt: And like the

36:42 Matt: going even farther back, the

36:45 Matt: the storage on that is actually a cassette, right?

36:48 Matt: A cassette tape. Is that right?

36:50 Cory: I think that's right for the TRS 80.

36:54 Cory: I never had the luxury of the desktop version.

36:56 Cory: I only had a tiny pocket one.

36:58 Matt: Nice. Nice. Oh, funny.

37:01 Matt: OK, so the speed around what is your favorite Font Awesome icon?

37:05SPEAKER_02: I'm going to say FATACO. Nice.

37:07 Matt: That's a solid choice right there.

37:10 Matt: Yeah, any particular icon categories that are favorite?

37:14 Travis: Let me rephrase the question. 

37:18 Travis: Any particular icon categories that are favorite

37:21 Travis: and why are they the tabletop gaming icons?

37:25 Cory: Nice. I still haven't played D&D yet.

37:27 Cory: I did see the movie last night, though.

37:29 Matt: Yeah, we'll solve that problem. Yeah.

37:32 Cory: I'm kind of a nerd, so it's not exciting.

37:34 Cory: But the like the rich text editing formatting buttons,

37:38 Cory: those because I've used those specific ones before

37:42 Cory: in an implementation of a rich text editor.

37:45 Cory: So I love those icons.

37:47 Cory: They're a lot better than what.

37:50 Cory: A lot of projects used natively.

37:53 Matt: Nice. And how about an icon category or a specific icon

37:57 Matt: that you wish was a part of the Font Awesome canon?

37:59 Cory: Still looking for a Shoelace icon.

38:01 Travis: Oh, snap. Ouch. Yeah.

38:05 Matt: We can solve that.

38:07 Matt: Well, thanks, guys, for taking some time to talk about Shoelace.

38:10 Matt: Cory, welcome to the Font Awesome team.

38:12 Matt: We're excited about the partnership between Font Awesome and Shoelace.

38:16 Matt: And if folks that are maybe unaware of Shoelace,

38:18 Matt: where can they go to learn more information or where can they find you?

38:23 Matt: Are you on Twitter or anything like that?

38:25 Cory: I am on Twitter still.

38:28 Cory: It's my only social media presence, so I hope it stays afloat for a long time.

38:32 Cory: Yeah. But see Loviska.

38:34 Cory: And if you're looking for Shoelace, you can go to www.Shoelace.style.

38:40 Cory: That's my best radio voice.

38:42 Matt: That's great. That's fantastic.

38:43 Matt: Retake. No, no, no. That's great.

38:45 Matt: All right, folks, you know what to do.