Podcast Awesome

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

Matt Johnson Season 1 Episode 8

🧩 Shoelace & Web Components: Building Better UI with Cory LaViska

In this Nerd Show and Tell episode, we lace things up with Cory LaViska, creator of Shoelace — a modern component library that makes it stupid-easy to build snappy, accessible, mobile-first websites using CSS grids and Web Components.

Matt joins Travis Chase and Cory for a jam-packed convo on:

  • How Shoelace + Font Awesome work together like peanut butter and SVGs 🍯
  • Why Web Components are the future of design systems (and sanity)
  • What it takes to stay sharp with modern web standards
  • And, yes, why Travis still doesn’t have a Shoelace icon 😤

Cory also reveals his favorite culinary-themed icon, drops wisdom on open source generosity, and reminds us all why boring ol’ PHP was a gateway drug to building cool things on the web.

⏱️ Episode Timestamps

  • 05:04 – Customizing CSS with Shoelace
  • 08:10 – Reusable Components & Brand Consistency
  • 11:50 – Why Web Components Make Dev Easier
  • 17:06 – Tooling Made Better by Web Standards
  • 25:46 – Embracing Modern Tech in UI/UX
  • 30:17 – Building Free, High-Quality Software
  • 31:25 – Power of Open Source Collaboration
  • 36:04 – The Humble Beginnings: PHP and Web Dev

🧠 Highlights

“Shoelace gives you fully accessible components with zero framework lock-in — it just works in the browser.”“Open source is how I give back. If it helps someone build something better, then it’s worth it.”“Weirdly, my favorite icon might be… the hamburger. The food one. Not the menu one.”

🔗 Links & Credits

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.



People on this episode