[TRANSCRIPT]
0:00:09 - (Matt): Welcome to podcast awesome where we chat about icons, design, tech business and nerdery with members of the faun awesome. And now the web awesome team. I'm your host Matt Johnson and today we are talking with another web awesomer, Konnor Rogers, who is a developer at Web Awesome. I love having conversations about folks that have sort of a winding road to find their career and Konnor definitely has one of those stories. In a previous life, he used to be a paramedic and he taught himself web development.
0:00:55 - (Matt): I'm supposing sitting in the back of that paramedic car when he had downtime just chipping away at it hour by hour. It's a pretty cool story. We talk about some of the projects he's been working on lately, including many of those much anticipated stretch goals from the Kickstarter, some of the challenges that he came up against. And while nobody would ever want to be in a situation where a paramedic has to come and visit them for any reason, maybe it was my dark sense of humor that kicked in, but I just had to ask him. I hope it wasn't in poor taste, Konnor.
0:01:29 - (Matt): But I had to ask him if he had any peculiar or funny situations where he had to show up as a paramedic. So you'll have to listen to check that out. Konnor, thanks for coming on the nerd show and tell. You are the second web awesome person to grace the nerdshow and tell stage. So we appreciate you coming on. So Konnor, tell us a little bit about what you do at web awesome.
0:01:55 - (Connor): Yeah, so I am a software developer on web awesome. So I help make components with Corey. Corey is the other developer working with me on the project and we make components together. Right. That's our job in a nutshell.
0:02:09 - (Matt): So when did you meet Corey and what's the story there? When did you start working at Webawesome?
0:02:13 - (Connor): Yeah, so we'll back up a little bit. We'll go back to how I even started web development in the first place. I didn't have a traditional track here straight out of high school. I joined the army as a there, got back home from training about nine months later, started going to paramedic school. And so I worked as a paramedic in total about seven or eight years, about four or five years in, I started realizing like, hey, I can't do this forever. This is like killing my back. I need to be home with my kids and my wife and stuff. And so I started in the truck when we weren't on calls, I started learning to code because I had a few friends who were doing it. They made good money, they got to work from home, etcetera. So I was like, this sounds cool, let me do this.
0:02:58 - (Connor): So I started learning to code. I really enjoyed it. I never really coded much as a kid. I played a lot of like video games, like World of Warcraft, Starcraft two and stuff. And I did little like scripts here and there, but nothing major beyond that, right? I started learning it, fell in love with it, really liked the deep. Learning. Something I really liked about medicine as well, is like, the knowledge is a deep well, right? Like you can scratch the surface and get a baseline, but there is so much beyond that initial service area that you can just keep going deep and it just never ends.
0:03:27 - (Connor): So I started doing that. Went through a free Java programming learning course through University of Helinsky. Got to enjoy the joys of Java. And then I found another free online learning course called the Odin Project. There I learned ruby on rails and went through their ruby on rails track. Did all that. It took me forever to get through. It took me like a year and a half because it was all projects, but I didn't have a ton of time. It was like, some days at work I'd get an hour, other days I'd get none, like.
0:04:05 - (Connor): And I had two small kids at home. So it was like the time I could never do like a boot camp, for example, because I just would have never been able to keep up with the work. Cause it's some weeks I could work 10 hours total, other weeks would be not at all. So it was, I had very intermittent time. Anyway, fast forward, I get hired as a ruby on rails developer, and I start learning about these things called web components because I wanted to build like a custom select that you can actually style. Right? Like, that's a big one is the select element in HTML is very limited.
0:04:38 - (Connor): And I don't know exactly how I discovered shoelace, but I immediately loved it. It was like bootstrap without all the extra markup and classes and stuff, right? And it was. I never really enjoyed bootstrap. I never enjoyed, like, the column layouts and all that. I liked that shoelace was just, here's the component, just drop it in and go. And I don't know how it all came to be, but I made a few prs here and there.
0:05:04 - (Connor): And the startup I was working for when I first got my first job, I was there about nine months, and then they shut down. And as it shut down, Corey messaged me and was like, I know you've made a few prs to shoelace. Like, I'm working over at Microsoft and we're trying to recruit people. Long story short, I ended up getting hired at Microsoft to work on an internal design system with Corey, similar to shoelace.
0:05:27 - (Connor): So that's how we really got to know each other. I think in total, we were there about a year together. I was there about six months after he left. I started transitioning to doing a lot of AI work at Microsoft. Didn't love it, wasn't totally happy with it. And Corey was like, hey, we're looking for another developer to work on. Shoelace. At the time, hadn't even name change, wasn't even a thing yet.
0:05:54 - (Connor): He messaged me, interviewed with Dave and Travis, did the whole thing, and I got hired here. So it all started with working with Corey. Prs to Corey, just that open source work is what really got me in the door to knowing Corey. And then it turned into Microsoft. And then now font awesome and web awesome.
0:06:16 - (Matt): That's great, man. I always love hearing people's background on how they get to where they are now. And I've noticed, especially among the font awesome, web awesome team folks take a winding road to get to where they are, you know? I mean, I know it's definitely true for me, too. I'm not meeting folks, at least at faun awesome often that are like, oh, yeah, this is what I went to school for. And I stepped right into this kind of role. I've been doing it ever since.
0:06:45 - (Matt): It's always an interesting backstory, you know?
0:06:49 - (Connor): Yeah, it's one of those things that was hard when I was getting started, too, because I felt like I couldn't get past filters for companies. Like, I was sending tons of resumes. But a lot of people who are self taught can get by if they have a bachelor's in like, an unrelated field. Right. Or even an associates. Like, I have two semesters at community college to my name, and that's it. So there's no degree to put on there.
0:07:11 - (Connor): And then people see a paramedic license and they're like, what are you doing? Like, are you in the right spot? Are you lost?
0:07:18 - (Matt): Yeah, totally.
0:07:20 - (Connor): A couple interviews just around. What are you doing? How did you get here? Like, they just. They wanted to make sure that I was in the right spot. The way I got my first job was through networking, helping people on discord with ruby on rails. And somebody was like, hey, I'm looking for someone for a ruby on rails gig. And people recommended me, and that's how I got my first job and then lady Luck came by and the rest is history. Here I am now, four years later.
0:07:49 - (Matt): Yeah, that's awesome.
0:07:50 - (Connor): Still doing it.
0:07:51 - (Matt): What a great story, man. And what a time to be alive, to be self taught and to learn these programs. It's amazing. Like, I. I'm not particularly techie, I don't have that background, but when I started working at font awesome, I felt a little bit of pressure to understand things a little bit better. I've since realized the pressure was more in my head. I started diving into just simple HTML courses and stuff online, and I realized if I was really dedicated, I want to learn this, I could put something together for myself and take a year and have the basics down on development.
0:08:30 - (Matt): It's just amazing how much information is out there. Well, man, congrats. You know, for like, knocking that out and figuring that out. That's amazing.
0:08:40 - (Connor): Yeah, it wasn't easy. A lot of, not a late night, a lot of lost sleep. Some nights it was like, do I want to code a little bit more? Do I want to sleep? And that was always, it was a tough decision to make sometimes.
0:08:50 - (Matt): Oh, for sure. That's a hard trade off, man. So we're just past the Kickstarter. I mean, it was awesome, like, how much people stepped up and contributed. That was really exciting. What was going on behind the scenes for you during the Kickstarter? What were you working on?
0:09:10 - (Connor): Honestly, for me, behind the scenes of the Kickstarter was doing a lot of maintenance on the web. Awesome project. The 3.0 version that's coming out. A lot of things related to getting like, the layout component ready to go that we have. I think it's technically going to be called page component by the end, not have any name collisions with what people think layouts are. So there's, there's working on something called form association for our components. So, like, our components will be able to behave like normal form controls, like inputs, buttons, etcetera.
0:09:40 - (Connor): So for me, I wasn't involved so much on the marketing of the Kickstarter. I was still coding away and working on a bunch of stuff we have in our backlog that we want to get done for 3.0, some things moving towards using a native dialogue element, that kind of deal.
0:09:57 - (Matt): Yep. Can you tell us a little bit about some of the stuff that you're working on right now or some of the challenges that you've come across?
0:10:06 - (Connor): Yeah, so some of the things I'm working on, like right now, like I'm with the Kickstarter was working on form association of our elements. Previously we were kind of like hacking it on to we'd like make a fake input element or even a real input element, and attaching validations to it, and kind of mimicking a form association API before it existed. But now that we actually have it, now we get all these exciting new features where we get native constraint validation, and all these cool things we get to do to make a custom element behave like an actual form control without having to hack it on with all kinds of other things to make it happen.
0:10:56 - (Connor): Part of that is removing a lot of internal code. We had to make that happen. We were like adding an overload to form elements to check for our custom elements and then running validity checks on them. So it was a lot of, we were overriding some behavior of the browser to make it happen. And now that it's native to the browser, it relieves a lot off of us and it's not nearly as hacky. In fact, we have a open issue about having like a memory leak on our overloads on the form element. So it really alleviates a lot for us to move to that form association.
0:11:31 - (Connor): Some things, looking forward is the browser constraint validation the way it shows pop ups when things go wrong, or if like, you know, it didn't meet a certain requirement. The native browser one is not great because it's displayed differently across all the browsers. It looks particularly terrible on mobile. So we may look at seeing if there's a way we can smooth that API over to make it so that we can display these validations in a nice consistent way, and not necessarily and still use the browser constraint validation, but not necessarily use the pop ups that it shows.
0:12:10 - (Matt): Any challenges that came, that have come up during that process, that was a particularly difficult thing to lick.
0:12:17 - (Connor): So almost everything was fine. There's only two components that have given me particular issues, and that's what I'm working on today actually, is radio group and radios and radio button as well, those three components together. What would happen before is the radio group would control all of the radio buttons and all of the radios, and what would happen is the radio group was acting as like the form control, but in reality, in a native browser environment, you would expect the radio in the radio buttons to be the native form controls.
0:12:58 - (Connor): So I had to pull out a lot of logic from the radio group and add it into radio button and into radio to get it to behave more like a native HTML element. And it just, it's not that it necessarily broke anything, but it kind of changed some of the behavior of it, but it also allows you to do a lot more with radios and radio buttons and wrap them in something that is maybe not the web. Awesome radio group. Maybe you wrap it in a field set or your own custom div and add a role equals radio group.
0:13:33 - (Connor): Now, the hard part is particularly around accessibility. When we enforce the radio group only, we always got this group that would read like, you're on radio button one of three, right. But now that you can technically use these radios without having the radio group around it, if you use them without a radio group wrapped around them, the screen readers won't read how many radio options there are. So we have to, like, do a pretty diligent job of, you know, being like, hey, make sure you wrap this in some kind of radio group. So that's like, been the biggest challenge is usually.
0:14:09 - (Connor): It's usually the biggest challenge in any component is getting the accessibility.
0:14:12 - (Matt): Obviously we're gonna deliver on all of the stretch goals from the Kickstarter, but were there any along the way where. Where you're like, oh man, that's gonna be a challenge.
0:14:25 - (Connor): Yeah, the date picker.
0:14:27 - (Matt): Yep, for sure.
0:14:28 - (Connor): 100% the date picker. And you know, speaking of the Kickstarter, people really won that day picker component. Like last day, there was like over a hundred thousand to try and get that day picker component, which anyone who's built a date picker knows that that is one of the hardest components to build.
0:14:44 - (Matt): Yeah, I was talking to Lindsay about that, and that was interesting. It's funny, all the comments that we would see, and some people were kind of snarky about it, too. It's like, well, if you guys aren't doing a date picker, I'm out. You know, they were pretty adamant about it. So I'm curious, what is it that's so difficult about creating a date picker?
0:15:04 - (Connor): So the first problem is calendars, right? There's different calendars. There's more than just the gregorian calendar that we all use. I doubt we'll support more than that. The other thing is like, different months have different number of weeks in them, so you have to, like, account for displaying different numbers of rows. And the other thing is, some date pickers, let, are more than just like a calendar, right? Like they have an input where you can input a date, but you can also select from the picker below.
0:15:34 - (Connor): And this gets back into like the thing we called with a combo box where you have like this pop up underneath your input, and what you type into that input affects what's underneath. So because of that, it's a very hard pattern to support because it's essentially a combo box with a pop up that's a grid that you can navigate with keyboard, but you still want to be able to tab to different things and be able to select months. And like, there's a lot of small interactive bits inside of those calendars while still having to support that input.
0:16:05 - (Connor): From an accessibility perspective, it's definitely one of the hardest components to get right because you want to be able to read it with context, like what day you're on, etcetera. So there's just a lot of moving pieces to get it right.
0:16:19 - (Matt): Quite an involved process.
0:16:21 - (Connor): Combo box is a little challenging, but it's a little bit more manageable because the scope isn't as large. But definitely the day picker was the one that was like, oh, I know people want it, but this is going to be challenging.
0:16:34 - (Matt): Yep. Oh, we're going to deliver, though. They'll have themselves a date picker.
0:16:38 - (Connor): Yeah. And the thing too is like you said, with like the shape of methodology, iterative, right? Like maybe we don't have all the features out of the box, day one when delivered, right. But like we can keep working on it, keep pushing updates to it and, you know, it's, it's one of those things. It's like nothing is ever perfect the first time it's released. You gotta keep iterating on it, fixing, and, you know, eventually you get to something better day by day.
0:17:02 - (Matt): Oh, yeah, for sure.
0:17:03 - (Connor): The other one that I was looking at was the rich text editor. That one's another doozy of a challenge.
0:17:11 - (Matt): Yeah.
0:17:12 - (Connor): Which I don't think we actually got to. I think that one was at 800,000. Oh, yeah.
0:17:17 - (Matt): Could be in the future.
0:17:19 - (Connor): Yeah. I mean, honestly, all these pro components are so challenging. Yeah. You know, I'm, I'm not here to sugarcoat and be like, oh, yeah, it's gonna be great, gonna be easy. Like, these are legitimately challenging components. We've built some of them before, so they're not new to us, but they are still hard components to build, which is why they're gonna be in pro, because some of these are entirely businesses. Right? Like data grid, for example, there's a, there's a project called Aggrid that's a whole business alone. Right. Wow.
0:17:50 - (Connor): If you look at any of those three data grid charting and rich text editors, each one could be its own separate entire business because they're that big, that complex. And there's just so much to them.
0:18:08 - (Matt): So as I understand the syntax, FM podcast is pretty much one of the podcasts for the web Dev world, isn't that right?
0:18:18 - (Connor): Yeah, that's correct. That's my understanding, yeah.
0:18:20 - (Matt): Nice. And so what did you guys talk about when you were on that?
0:18:24 - (Connor): Yeah, so we largely talked about component libraries because they had a previous episode about component libraries and different types. Like, you have like more lower level component libraries that give you what's called like hooks to be able to build your own components. Something like a radix or react aria. And then there's more fully featured component libraries, something like a shoelace or web awesome that gives you these fully featured components out of the box.
0:18:55 - (Connor): And we kind of talked about differences in component libraries. Some of the challenges we face making these things, some different components. A big one that comes up is filterable inputs, which is actually like different from a regular input because they're what's called combo boxes. And so we dug into accessibility of different things and it was largely talking shop about a lot of the internals of shoelace and web awesome. Some of the things coming, some of the things that we're taking out, talking about the layout component that's coming, that kind of deal.
0:19:30 - (Connor): So that's largely what we talked about. Talked a little bit about the Kickstarter as well.
0:19:36 - (Matt): Gotta give a little slug there. Given sort of your interesting career path and finding to where you are now. I've asked folks in the past, I always think it's funny. Can you think of like the worst, either the worst or the most interesting job that you've ever had?
0:20:00 - (Connor): When I got back from the army, I worked as a lifeguard at a YMCA. I did the opening shift, so it was five in the morning to 09:00 a.m. Was my. Was my daily shift.
0:20:11 - (Matt): And it was so 75 year old ladies basically doing water aerobics.
0:20:16 - (Connor): Wow. You know exactly. You know exactly who showed up. And then there was the one triathlon trainer who would show up and she would get her morning hour swim in and then after that go do triathlon training with everyone else. And I was like, how do you do this? Wow. And they'd be there at like 445 in the morning, ready to go, waiting for me to open the door.
0:20:38 - (Matt): Oh, my goodness.
0:20:39 - (Connor): Wow.
0:20:40 - (Matt): That is driving determination.
0:20:42 - (Connor): Yeah, I'm like, I'm 18 years old and I can barely wake up for this. How are you doing this at 70?
0:20:51 - (Matt): All right, so hopefully this is not in poor taste, but I'll ask anyway. You can decline if you want. It just occurred to me you've probably had some interesting situations as a paramedic. I'm reminded of, I don't know if you ever saw that Saturday Night Live skit where it's sort of like hillbilly emergency room. Have you ever seen that?
0:21:14 - (Connor): I have not.
0:21:15 - (Matt): Okay, so you can imagine, like, people come in with injuries, and you're like, uh. That's interesting. Do you have any stories as a paramedic where somebody was in a weird, funny situation?
0:21:31 - (Connor): There's a few I can think of. I mean, there's the one guy who we had who I took three times in three months for riding his bicycle into a parked car and then needing to go to the hospital. Three times in three months, same guy. I was like, wow. I was like, again, like, once. It's like, all right. Twice is like, come on. Three times is like, all right, that's enough. We need.
0:21:55 - (Matt): It's like you're trying here. Wow. What. What was this scenario behind that? Just bad luck or what?
0:22:02 - (Connor): I don't know the guy. I don't. I wish I knew.
0:22:07 - (Matt): Yeah, don't look at your phone and text while you're cycling.
0:22:10 - (Connor): That's pretty much.
0:22:12 - (Matt): Yeah.
0:22:14 - (Connor): There was another guy. It was like, straight out of. Out of a movie where he was having lunch at a. At a, like, a local pub with a woman, and then he started having a heart attack. And then we get there, he's like, can you call my wife? We're like, what do you mean? Your wife is right here. He's like, no, that's my girlfriend.
0:22:35 - (Matt): Could you maybe not mention her?
0:22:37 - (Connor): Yeah. And then the wife and the girlfriend are having a fight in the little family room at the hospital, and we could all hear it. It was. It was straight out of a movie. Straight out of, like, what's it, Jerry Springer? I was like, you can't make this up.
0:22:51 - (Matt): Somebody's about to throw a folding chair here. Oh, man.
0:22:54 - (Connor): Pretty much.
0:22:55 - (Matt): Oh, my gosh. That's funny. What a trip, man. All right, so now we get to the very important portion of the conversation. Do you happen to have a favorite font? Awesome icon.
0:23:15 - (Connor): There's one that was shown a while ago. I believe it's called Islash. That's a good one. Just the name of it alone. Just.
0:23:23 - (Matt): It makes you whistle a little bit.
0:23:25 - (Connor): Yeah. Like someone slashed your eye. Like, I think. I believe it's just an eye with a slash through it, but just the name of it is just great.
0:23:32 - (Matt): Oh, yeah? Yeah. Seriously. Well, there's so many to choose from. Geez, like 30,000 something icons. It's wild. Yeah.
0:23:41 - (Connor): I can barely count the number of components we have, and we only have like 50 something. I can't imagine managing all those icons.
0:23:47 - (Matt): Yeah, seriously. So now that we have the web awesome team on board, do you happen to have a favorite component?
0:23:55 - (Connor): So I said somewhere else that it was the drawer, which, like, flies in from the side. I do really like that one. But I think as I've been looking more, I really enjoyed the pop up component. And now it's not a very visually exciting component. It's largely like an internal component used by, like, our tooltip. Tooltip and a couple other components that we have, like, select. But, like, it's just a fantastic wrapper around this library called floating ui, and it makes us really be able to make easy anchored floating regions for these tooltips, for these pop up etcetera.
0:24:35 - (Connor): And it's wrapped in a very nice API that I really like. Corey did a great job on that one, and I really enjoy using it.
0:24:43 - (Matt): In the nerd show and tell there. You know, you've probably heard that there is a very high emphasis put on sharing your nerd at. At faun. Awesome. And that we always like to chat about the things that are interesting or things we're curious about outside of work and our hobbies and things like that. Is there any particular thing that you like to spend time on outside of work? That is a peculiar or interesting hobby?
0:25:11 - (Connor): Yeah, I mean, I'm just active all the time with my kids always running around. So hobbies aren't really a thing at this point.
0:25:19 - (Matt): Yeah, maybe give it a couple years. It'll find. Maybe. Maybe it'll be woodworking or something.
0:25:25 - (Connor): Yeah, I mean, my big. My big hobbies back in the day and even kind of now is, like, I really enjoy games, particularly competitive games. I've always been a very competitive person when I played sports, whatever. Like, I used to play StarCraft two. I was in, like, masters league for that. I, you know, was Legend in Hearthstone for a while. Like, I. You know, I play Marvel snap right now and hit infinite every season. So, like, I.
0:25:48 - (Connor): Card games are great because, like, I can play them on my phone and just, like, I don't need to be fully engaged with them either. Like, I can put it down at any moment and it's fine. Like, not a big deal. I used to play World of Warcraft back in the day, but obviously, like, with kids and stuff, like, that's just not feasible these days. So, like, oh, yeah, always a big video game nerd.
0:26:08 - (Matt): Nice yeah. And World of Warcraft. Like, dang, man. Go down that rabbit hole. Becomes your entire. Can become your entire personality.
0:26:20 - (Connor): Yep. So Dave was like, yeah, I can't play mmorpgs. I know. I know the type of personality I have, and it won't work. I'm the same way. I, like, I either go so incredibly deep on something, or I don't at all. Like, there's no in between.
0:26:35 - (Matt): Yeah.
0:26:35 - (Connor): And it's like, if I get hooked on that stuff again, you'll probably never hear from me again because I'll just be so engrossed. So.
0:26:41 - (Matt): Totally. You gotta kind.
0:26:42 - (Connor): I know where my limits are.
0:26:43 - (Matt): Yeah, totally. I always remember this story that Jori was telling about how there were these really big lego sets that came out, and he's. He was so excited, and he ordered them, and they actually were delivered to his house. And he got him in the house, and then he just had this moment of realization, like, if I open this, there's no stopping. Yeah. Like, I'm. I'm a family man. I just do not have time for this. And he literally, like, sent it back.
0:27:17 - (Connor): When you order that millennium Falcon, and he shows up and you're like, ooh, I.
0:27:24 - (Matt): Yeah, sometimes you just need to know when to say no. Well, thanks, Konnor, for coming on the nerd show and tell today. And you know what, people? I'm not gonna lie. When he got into some of that technical stuff, it went way over my head. But we trust that you techie developer types out there are gonna be tracking that. And we're so glad that Konnor's on board help making awesome stuff. And if you like what you've heard, and maybe you have a friend who would benefit from checking out podcast awesome, maybe send them a link.
0:27:59 - (Matt): Maybe on the social, you could give us a like or review. And as always, podcast awesome is produced and edited by this guy right here, Matt Johnson. The podcast awesome theme song was composed by Ronnie Martin. The musical interstitials were done by Zach mom, and audio mastering was done by Chris ends at Lemon Productions.
