Podcast Awesome
On Podcast Awesome we talk to members of the Font Awesome team about icons, design, tech, business, and of course, nerdery.
Podcast Awesome
The Latest on Web Awesome's Alpha Release
Dive into the wild world of web development with the Web Awesome team! Listen as Matt, Lindsay, and the (podcast) elusive Corey dish about their successful Kickstarter, the alpha launch of Web Awesome, and the exciting future of web components. You'll get the inside scoop on their perfectionist struggles, theming API adventures, and how they're revolutionizing the way teams collaborate. Plus, bonus cat cameos!
Timestamp Summary
| 0:10 | Web Awesome Alpha Launch and Team Reflections
| 3:22 | Redesigning Theming API for Web Awesome's Alpha Release
| 9:22 | Challenges in Developing Complex UI Components
| 10:49 | Building Web Awesome: From Open Source to Paid Product
| 15:38 | Web Awesome Pro Features and Launch Timeline
| 19:04 | Revolutionizing Team Collaboration with Functional Design Systems
| 23:04 | Exciting Updates on Alpha Release and Lifetime Discounts
"I think I can speak for the whole team that we're all a bit of perfectionists, so I don't think we were ever ready to release an alpha."
Lindsay - (0:02:54)
"The theming was a big thing that I think we wanted to have pretty much a bow on when we released the alpha."
Lindsay - (0:03:22)
"Shout out to Lindsey for her amazing work on the theming API, which is completely redesigned a lot, lot easier."
Cory - (0:03:59)
"Shout out to Connor, who's not on this chat today, but he did some amazing work to convert to all of the form controls to use a new API that never existed when these form controls were originally created."
Cory - (0:05:59)
"We've had quite a few issues reported so far that we're looking into a lot of discussion started."
Lindsay - (0:02:27)
"Obviously, we couldn't have done this without you."
Lindsay - (0:23:23)
"I kind of have a component addiction. I really like doing this stuff. So my hobby is also my career, and so that it's cool that that got to converge in such a way that I can work full time on something I actually really enjoy working on."
Cory - (0:13:46)
----------------------
Show Notes
- Font Awesome: Font Awesome Website
- Web Awesome: Kickstarter Website
- Twitter: @fontawesome
- The Font Awesome theme song was composed by Ronnie Martin
- Audio mastering by Chris Enns and Lemon Productions
Stay up to date on all the Font Awesomeness!
0:00:10 - (Matt): Welcome to podcast awesome, where we chat about icons, design, tech business and nerdery with members of the Faun awesome team. Font awesome font awesome. I'm your host, Matt Johnson, and today we get a chance to talk with Lindsay and Corey of the webosome team. And you may have noticed lately that we just finished the Kickstarter for web awesome. It was a great success. So thanks for everybody that pitched in and we've officially concluded the Kickstarter. But you can actually still go and donate if you missed out, and you might want to check that out because you can get some pretty steep discounts for life.
0:00:54 - (Matt): So in this conversation, we're going to talk a little bit about how the launch of the alpha went and the things that they've been working on lately and the things that they're going to build in the future have a very rare appearance here. Corey does not often make an appearance on podcasts. Awesome. So welcome. Thanks for coming on, both of you guys, and congratulations for the launch of web awesome Alpha.
0:01:23 - (Lindsay): Woohoo.
0:01:24 - (Matt): Woohoo. So are you, are you guys having a little sigh of relief or busy as usual? How was the release of the alpha?
0:01:35 - (Lindsay): Most of it has been people that didn't get the initial email emailing us to get access, but people seem really excited about it. They're obviously eager to jump in and start testing things. We've heard a lot on the Kickstarter through comments, through emails@helloebawesome.com. just everybody's wanting to dig in. We've had quite a few issues reported so far that we're looking into a lot of discussion started. So it's good happening so far. I think people are really responding to it and we're very excited about it too. But I would say for us, we're still just kind of developing. Like this was just a spot where we could be like, okay, we can release this to people, but we haven't stopped working in the meantime. It's not like we get to take a break or anything like that. It's just now we have this extra a group of people who are now in the know that we get to engage with, which has been really cool.
0:02:27 - (Matt): Yep, it's officially out in the wild, but just kind of pushing off onto the end of the voyage.
0:02:36 - (Lindsay): It's the down low wild. It's like deep forest.
0:02:40 - (Matt): There you go, deep forest. Everything that you guys had set out to build on the goals that you had to launch the alpha. Did you feel like you kind of landed where you wanted it to be? Orlando were there any challenges that came up leading up to the alpha?
0:02:54 - (Lindsay): I think I can speak for the whole team that we're all a bit of perfectionists, so I don't think we were ever ready to release an alpha. I think it's a bit of a vulnerable feeling to release something when you know you haven't done everything that you wanted to. But the free components that we're bringing over from shoelace, most of them have been refactored in some way, or at least we've audited them, looked at them. We know what we need to do with each of them. So we've made some changes to the public facing API for some components.
0:03:22 - (Lindsay): The theming was a big thing that I think we wanted to have pretty much a bow on when we released the alpha because there's a lot of back and forth with the theming, a lot of touching up different things, deciding how we want that to look, what's right, what's the right scope, what's the right naming conventions, things like that. So that's kind of a tough thing to change out from under people. So making sure that that was nice and settled before the alpha was released was important.
0:03:51 - (Lindsay): And I know Corey and Connor especially have worked on a lot of the component internals. I don't know if you wanted to speak more to that at all.
0:03:59 - (Cory): Yeah, a lot of the stuff are underpinnings, the things that are hard to talk about on a podcast and harder for users to appreciate because they just see a component and it just works. But shout out to Lindsey for her amazing work on the theming API, which is completely redesigned a lot, lot easier. And that's just for the alpha. So this is all prep work for what we're ultimately getting to.
0:04:31 - (Matt): I would imagine that many of these functions were present in shoelace. So what was the process of taking the tech and the knowledge that you had from shoelace and translating it over to web? Awesome. I'm assuming that it's not just, oh, we rebranded, now we have a new website. There's. There's a lot going on behind the scenes.
0:04:49 - (Cory): So there is a little bit of the rebranding going on there. Right, right. Because we did change the name. The internals that we talked about a little bit ago. You know, that's, again, that's stuff that people don't see. But the theming API, that was a huge pain point for shoelace is, how do I style this? And a lot of times the answer was, well, we just didn't get far enough to the point where that became easy and now it is much easier.
0:05:13 - (Cory): Shout out to Connor, who's not on this chat today, but he did some amazing work to convert to all of the form controls to use a new API that never existed when these form controls were originally created. So some of this is moving to what the platform now offers, what they didn't offer four or five, six years ago. So there's a lot of work like that to keep things modern, to remove code, you get the same functionality, or even sometimes more, and you get to remove code. So that's always a plus.
0:05:40 - (Cory): Things. Not to dive too deep here, but like the dialog, we now use the actual dialogue element. This wasn't ready when shoelace first created the dialogue element. We have been able to remove a ton of focus trapping logic that was always a little bit buggy. It's super hard to get right. So we, I mean, how many kilobytes of that are just gone now? And we have perfect browser, focus trapping and dialogue now. So things like that are what we're trying to do behind the scenes.
0:06:07 - (Cory): And the hope is that the end user only sees less bugs. No real changes there.
0:06:11 - (Matt): So I guess I should come back around and say congratulations for funding the Kickstarter. Like, to 2000 something percent.
0:06:19 - (Lindsay): Yeah, it's crazy.
0:06:20 - (Matt): You know, the goal. We set the goal low, but. But here we are, you know? What? What is it? We earned over 700,000. Is that right?
0:06:29 - (Lindsay): Yeah, it's like 720 something at this point.
0:06:32 - (Matt): That's great, man. It's awesome to see. It's been really neat coming into this world as a. Not really a tech oriented person and getting a sense of. Of what the open source community is like and how much goodwill and support there is behind that. There's always the weirdos, you know, I think that's us. Yeah, us. We're the weirdos. But it's just great to see how excited people get about these products and, like, getting behind it and funding it and all the encouragement. So that was just really fun to see.
0:07:15 - (Matt): But Lindsey, you were talking about some of the things that you had been working on, and folks can go listen to that podcast conversation, but maybe you could give us an overview of some of the stuff that you had been working on. So, leading up to, you know, just as we were coming towards the end of the Kickstarter, when we hopped on a call and had our podcast moment, what was it that you were working on leading up to that end of the Kickstarter, what, are you trying to get under the radar and finish it.
0:07:46 - (Lindsay): At that time, a lot of it was the theming API specifically. That was just a big rabbit hole for me, because again, this whole team is perfectionist. It was a lot of waffling on my part of what's the right thing to do here, what's going to be the most usable? And really you don't know the answers to that until it gets into people's hands, until people just start to use it and get used to things, try different things out in real world scenarios.
0:08:18 - (Lindsay): So that was the big thing that I had worked on up until the alpha launched for us. And part of that was also going through each of the components and making sure that each of those had custom properties similar to the global theming API that we have, but that would only be scoped to those specific components so that you can. So that was a big part of that prep after the Kickstarter and something that we knew we wanted to do for quite a while since we knew that web awesome would be a thing.
0:08:52 - (Matt): And of course, as we kept hitting these milestones throughout the Kickstarter, we're adding stretch goals. What else can we build? What are we wanting to build? And I imagine whether you hit stretch goals or not, it's stuff you're going to build anyway eventually. But. But it sounds like the date picker is going to be a bit of a challenge. Are there other stretch goals that stand out as ones that might be challenging? And if so, why is that?
0:09:22 - (Lindsay): I think what we put as stretch goals are all stretch goals because they're all very challenging.
0:09:28 - (Matt): They're all stretching you.
0:09:29 - (Lindsay): Yeah, yeah. I didn't want to necessarily promise things until we knew people were interested in the product. Like, combo box is a big one that once you decide on how you want it to work, it's not necessarily impossible for sure, but there's a lot of different permutations of how a combo box is used. There's a lot of different assumptions from the people using it about how it should work, and it's just a very common control. But similar to the date picker, you're integrating a lot of different input patterns to create something like that. Like it's not just a plain text input, it's not just a dropdown, it's some combination and amalgamation of all of those things that makes it just a little bit tricky to 100% get the accessibility right. Like anything that you're creating that's not based on or not just like a port or some kind of wrapper over, like a native HTML element, you've got to make up a lot of the rules yourself, which can get a little bit tricky, which a lot of our stretch goal components are like that. I think we want to build them because they're not things that you can just get in HTML, or if they are, they're not necessarily very intuitive or usable to a lot of people's standards. So the biggest challenge, I think, is just making sure that we're getting stuff like that right.
0:10:49 - (Matt): So what's coming next after this alpha? What are you guys working on now and what are you hoping to release in the short term?
0:10:56 - (Cory): My head has been in the code and what we have to do for back end stuff. We have two teams. We have the font awesome team and the web awesome team. And how do those teams interact? What support do they provide? Because they're managing a whole product that is, it's a much bigger ship than what we have right now. We just got our first users taking a peek at what we've been building, and they have many years of users who demand things to be up and running. We don't have certain demands like that on our side yet, but we know that we have a back end that we need to build, which is one of the things I'm focusing on pretty intensely as of this week. And we need to build it to support all the things that we've been discussing, planning out and designing out in pro.
0:11:39 - (Cory): So we've tackled the underpinnings and we're just moving in iterations towards getting this to where you can just log in, have your own account, your web awesome account. You can go and turn all those knobs that you saw in the themer, and they actually produce assets on the back end that can be then hosted to your live websites or to your, you know, private NPM repos. There's a whole lot going on in the back end.
0:12:01 - (Lindsay): There wasn't authentication concerns with shoelace. We didn't have to worry about any of that. So, I mean, that's a huge new thing that's been introduced in web awesome.
0:12:11 - (Cory): Yeah, that was a much simpler time. And it was just, here's some static content and some tools that you can use. And we didn't even run the CDN. It was all done through a public CDN. So that was kind of nice. But we are growing up now and we need to do more mature and responsible things. And that's all part of what we're building is that infrastructure to support all the cool stuff that, you know, you saw. Now we have to make it work put all the gears into it and ship it.
0:12:38 - (Matt): Mm hmm. You know, I was thinking about how, gosh, I'm sure this just very much varies from person to person, but say somebody who's working on an open source project, like, you were working on Shoelace and you built it over, I mean, like, several years is my guess. And that you have folks that are pitching in and you're building it as you go, as you have time. And contrasting that with now you're going live with a paid product and you got to hit deadlines. I imagine that would be stressful, exciting to squeeze time in to ship new things, and you're working with the open source community and folks that want to pitch in.
0:13:21 - (Matt): And now as you partner up with Fawn, awesome. And youre building out a paid product and you're shipping something, I would imagine that the cadence of getting something out there and how you have to prepare for releases, I'd imagine that would be, like, a real shift in your thinking. Right. What was that like to now say, okay, now we have a paid product, and we have to, like, hit a deadline. What was that like?
0:13:46 - (Cory): Yeah, I kind of have a component addiction. I really like doing this stuff. So my hobby is also my career, and so that it's cool that that got to converge in such a way that I can work full time on something I actually really enjoy working on, not just building whatever random thing. So, you know, deadlines weren't really a thing in the past. Like, if I have time, I do it now. We commit to things, and we do have those deadlines, and I don't mind them. I mean, deadlines existed before this became a separate thing. It was just in a different realm. And now there are at least things that we can control and contribute to and know that, you know, we have a better idea. Can we actually make these deadlines or nothing? Not just being mandated, they're being discussed by the whole team.
0:14:28 - (Cory): We all decide on things. Does this sound reasonable? If yes, cool, we'll do that. If no, well, what do we need to do to either scale it down or to extend that deadline out to make it all work? And I think we've done a great job at planning. I think we're really good on our timelines. I think I couldn't have asked for a better team to be working with on a day to day basis. You have a question. Somebody's in there with ideas and suggestions.
0:14:53 - (Cory): I like it. It's better than doing it solo, for sure, because, you know, as a solo maintainer, you have a lot of weight in your shoulders, a lot of responsibility with a team, you get to kind of distribute that and talk things through. You get a lot of time to say, hey, like, I need a sanity check here. Tell me what you think about this. And bouncing ideas off each other is, I think, pretty important.
0:15:14 - (Cory): You know, one person is not enough to manage some, you know, a project of what we're building here. So thankful for that opportunity and for having the right people on the team to make it happen.
0:15:38 - (Matt): So we've launched the alpha, which is web awesome free. Right. And we have. Pro is coming eventually. Do you have goals for the timeline of when folks might be able to expect that?
0:15:55 - (Lindsay): We're targeting the alpha version of Webawesome pro for December of this year. Sometime at the end of this year is when we're hoping to get that into people's hands. Only available to backers. I don't know if we wanted to plug that. You can still preorder Web awesome pro on Kickstarter. It's probably one of the last times ever that you'll be able to get discounted web awesome pro. So do it.
0:16:19 - (Matt): Get people, get on it. You can get a big discount.
0:16:22 - (Lindsay): Trust.
0:16:22 - (Cory): And those are lifetime discounts too. Yeah, I appreciate. That's how we plan it out. So, yeah, last chance.
0:16:30 - (Matt): All right. And just to give folks a general rundown on what they could expect when somebody subscribes to webawesome Pro, what will they be getting?
0:16:42 - (Lindsay): You get a free puppy. You get a unicorn. No, obviously not.
0:16:48 - (Cory): What type of puppy?
0:16:50 - (Lindsay): What type of puppy?
0:16:51 - (Matt): That does matter.
0:16:52 - (Lindsay): Name your puppy, you get it. Web awesome pro's big features are going to be the layout system, which Connor spent a lot of time on. The whole team wound up spending a lot of time on making, like, extras, not just for page level layout, but for. You can see a cat ear in my camera. Sorry.
0:17:12 - (Matt): That's perfect. I love it.
0:17:14 - (Lindsay): This is the cat. So anyway, let me start that over since I was so rudely interrupted. So web awesome pro includes the layout system that we have. Connor spent a lot of time working on that. The whole team is going to try to bring that together with even more. Not just page level layout concerns, not just solving those kinds of problems, but even lower level, like how to arrange things in a grid, how to do things like that. We're exploring an entire system to make layouts as a whole easier.
0:17:44 - (Lindsay): We've got a great start with that page component and then the themer is a big part. So not having to write your own css to style. Web awesome is huge. We've had a lot of fun working on that so far, and that's included in web awesome pro. Is this the ability to turn some knobs, manipulate some dials, and you get a theme that's completely tailored for your brand? We have an entire pattern library, which Kelsey on our team has been doing a ton of work to get a bunch of just copy and paste patterns ready to go for any kind of website. You name it, whether it's e commerce, marketing site, nonprofit sites, all that kind of good stuff.
0:18:25 - (Lindsay): So those are the three big ticket items. I would say the layout system, the theme builder, and then the pattern library are all big things that were including web awesome pro.
0:18:35 - (Matt): Excellent. So, you know.
0:18:37 - (Cory): Yeah, sorry. I was just looking at the cat, and the cat is so cool. And you're not editing.
0:18:44 - (Lindsay): Oh, yeah.
0:18:44 - (Matt): The kitty's back in the shot again.
0:18:46 - (Cory): Kitty, kitty, kitty. She's awesome.
0:18:48 - (Lindsay): This is noodle.
0:18:50 - (Cory): Instead of a free puppy, can we get a free kitten?
0:18:52 - (Matt): Yeah. Noodle awesome.
0:18:57 - (Lindsay): She's my supervisor.
0:19:00 - (Cory): Yeah. Too much time podcasting. Get back to work.
0:19:02 - (Matt): That's right.
0:19:04 - (Cory): No, I think you nailed it. Those are the main ones. Like, the pattern library. I feel like for some reason, maybe it's just because I'm not focusing on it right now, but we don't seem to talk about it enough, and I think that that's going to be one of the big anchors to web awesome. You're going to get so much more. Like, theming is so cool, but you can do everything with it. The layout stuff, you just copy and paste within minutes.
0:19:28 - (Cory): That's what I want to do. I want to get to that point where we talked about a video with the team. Gosh, it feels like a year ago, where you can just basically do, like, a five minute YouTube video and go from nothing and just, like, a text editor and just copy paste a few things, and then, boom, you have a whole page. Like, we get to that point, and we have the back end serving all these assets and stuff like that. That's the point where I think we know we've had met our first big, big goal. Like, we have a lot of little milestones in between, but, like, the main goal, get a product into people's hands that let them build stuff in a much more fun, easy way.
0:20:01 - (Cory): And I think that's it. Like, you know, you can tweak whatever you want. These are all just platform tools. But to be able to just go from nothing, from an empty canvas, to a whole webpage with just, you know, just a couple of moments. That's going to be really awesome to prove out.
0:20:18 - (Matt): Oh, yeah, that is so great. I just think about how great it's going to be for teams to be able to collaborate together and say, oh, I have an idea. Ta da. You know, minutes later, here's a general vibe for what I'm going for and how much that's gonna help folks with the speed of their work and the ease of the work. You know, it's just great.
0:20:37 - (Cory): I think it has the potential to change how people work on teams.
0:20:42 - (Matt): Right.
0:20:42 - (Cory): Because the designer can come in and style things at any point. They don't have to do it in Figma first. You can just, if I'm a developer and I know that I have these requirements, I can get all that stuff on the page and not worry so much about design right up front. I can get it functional, hand it over once it works, and then boom, the magic happens on that. Or, you know, there's so many way you could, you could start with designers first and create the whole, you know, your whole custom theme.
0:21:07 - (Cory): You know, you have your design system and then you can start putting those pieces into place. There's a lot of different things that could come of this, but I'm excited to see how people use it with these new abilities.
0:21:16 - (Matt): Yep, for sure. You know, while you're talking, what automatically came to mind is think about all of the time you can save not having meetings, you know what I mean? Death by meeting where, where you have, you know, developers and designers, like hashing it out. Like, no, these are my requirements. And the designer, you know, it's this back and forth and it's almost like you can kind of do these things simultaneously and so much easier, you know, which is awesome.
0:21:49 - (Lindsay): And it's a functionality first design system, which I think is crucial. Like, it's not your, your typical design system that you see in a lot of, you know, internal design systems in a lot of companies where you build it in Figma and then you make it work, it's very much first. How does this work for the user is the priority. Like it's functional, get it out of the box. So if your designer knows HTML, they can prototype their design or at least mock up their design with actual code, and then developers can come in behind the scenes and actually make that stuff functional, connect to the databases, whatever it is.
0:22:24 - (Lindsay): And I think that's the coolest part of this to me is you don't have to create things from scratch. It's just functional. It already works awesome.
0:22:34 - (Matt): Great. Well, we can do a wrap here, and then I have a follow up question for you guys that I figure will not go into the podcast, but, well, thanks guys, for coming in and giving us a little update on how the release of the alpha went. All exciting stuff. We're really looking forward to what you guys are going to ship next and all the folks listening get on it. You're gonna want to get that lifetime.
0:23:04 - (Matt): So, folks, you're gonna want to get that lifetime discount and that perpetual license so you can still back the Kickstarter, at least as of today and in the near future. So get on that. You don't want to miss out on that discount.
0:23:18 - (Lindsay): And big thanks to everybody that supported web awesome so far. Obviously, we couldn't have done this without you.
0:23:23 - (Matt): That's right. So you guys know what to do if you missed out on the Kickstarter and you're still wanting those sweet discounts, you can still slide under the radar and get those discounts for life. That'd be pretty nice. And you can still donate to the Kickstarter. I want to thank Lindsey and Corey for coming on the show today. And as always, this podcast was edited and produced by this guy right here, Matt Johnson.
0:23:46 - (Matt): The podcast awesome theme song was composed by Ronnie Martin, and the musical interstitials were done by Zack mom. And, and as always, that nice, crisp, clean tone that you're hearing is made possible by my voice, but also polished up real nicely by Chris Enz at Lemon Productions.