Transcript:

• My name is Adam Frank. You can call me Frank if you want to, Pratik. Here’s some things I did. But what I mostly do is I build software every day with some of my favorite people in the world at Vehikl in Waterloo, Ontario, Canada. Any Canadians here? Okay, good. Well, my coworkers. I’m glad I took those hockey jokes out. I’m still upset about seasons seven and eight of “Game of Thrones”. And as of just over a week ago, I’m a core contributor to Pinia. It wasn’t a grammatical comma, that was an important comma, okay? One of the reasons I wanted to do this lightning talk because I wanted to share a little bit about my job, which I love, and then show you something I made. Oh, it’s a little lightning talk, I guess. At Vehikl we call my role the navigator, because if we’re driving a vehicle, my job in the vehicle would be to navigate my team to the finish. My personal goal though, as a navigator, is three part. The first and foremost is to care about my squaddies. Then my next objective is to grow with my squaddies. And then once I’ve accomplished those two things, then we’re delivering software. I liken myself in a lot of ways to Stede Bonnet, the gentleman pirate. At first, he wants to make sure his pirate crew is cared for. Then he wants to make sure his pirate crew is engaging in personal and professional growth. And then they’re ready to assault the main royal fleet. And as part of ensuring that these goals happen is through our core practices. So we have daily growth sessions, which is a portion of our day where we hone our skills and we work with people that aren’t necessarily on our small squad. We do weekly one on ones. Those are scheduled one-on-ones, not when I get to it one on ones. And good day, great day, which is a talk on its own. So if you wanna know more about those other practices or you have some of your own that you feel accomplish those three goals, I’d love to hear about them. I’m always looking for new things for my team. And blah blah, whoops. Another one is our morning sheet. So our squad starts the day with the morning sheet because we mob program for an hour and a half in the morning and an hour and a half in the afternoon. And the morning sheet helps us coordinate and exchange a lot of important information in a short amount of time. This is what it looks like. It’s just a Google Doc and we co-edit as a team and we fill it out every morning. So the structure of it is we got action points from retro from last week. We have process changes that we’ve agreed to try this week. Meetings and events, active tasks, completed work, and speed bumps that we wanna flatten. But the one that I think is the most special and is what my talk is about is the traffic light. The traffic light is simple. Every team member gives themselves a color in the morning, green, yellow, or red. It’s a way of asking, like, how are you today? The colors have no prescribed meaning necessarily. And the most important part is that my squaddies are not expected to have to qualify or explain why they’re the color they are today. They don’t have to, I’m red because this, just I’m red, end of story. It’s fast. And despite there being no defined meaning of the colors, it could be really useful information to have about each other. Like maybe I can offer my ear to them or, you know, maybe an extra one-on-one, maybe they need someone to talk to. Maybe they just wanna be left alone, I don’t know. But there’s some problems with the traffic light that I would like to solve that I’ve noticed. One of them is sometimes it can be exhausting to have to announce yourself as something when you’re the only one, or like perpetually that thing. So I don’t want my squaddies to ever feel like they’re the other or the red one because they were red every morning, that just might make them feel worse. You know, nobody wants to be the one making sad trombone noises in stand up every day. The second problem is that our lights are fluid. They change throughout the day. So just asking you in the morning how you’re doing is not as effective because maybe at lunch, something happened, right? And maybe you feel better or maybe you feel worse. So I made a thing. So just a little prototype app to tackle these problems. It’s a Chrome extension. You can find it on GitHub if you wanna browse the code while I do my talk. 'Cause it’s limited time, so I can’t go over all of it. But since I’ve been working mainly with React and React Native and Unity and other things the past couple of years, I wanted to make it in Vue to kind of catch up. And hopefully it inspires more of you to go for it and submit your own lightning talk. I mean, you’re listening to me because not enough of you submitted lightning talks, so here I am. I think they’re the one of the best parts. And although I’m a professional software developer, I consider myself a perpetual novice. Like most of you, I’m here to learn and I’m always learning. And I’ll tell you something, like, a lot has changed in Vue over the past two years. It’s like a wormhole. So that means I’ve learned a lot and I wanna share it with you. So here we go, we gotta move fast. So the thing is a very simple Chrome extension where you can enter a team key, add your name, and update your current traffic color. The other squaddies who have the room key can see your updates in real time. There’s no auth whatsoever so they can also change your status for you or delete your name or the whole team. There’s some trust involved. This is an MVP, I mean, that means something to me still, at least. So let me talk about some cool things I learned. There are some Vue CLI and Vite starter templates for Chrome extensions. Here’s one by antfu, I think this is, I think this might, yeah, this is WebEx. Yeah, this is it. He made it, it looks really good. I didn’t use it, there’s others out there. The one that I found first was by sanyu1225 from Taiwan. If you’re here, I just wanna compliment your avatar, it’s badass. Shirt is literally exploding off of them. And this is the documentation for the setup, which at first seems brief but it actually got me there. It makes this file structure, covered all my basic template needs for my extension and getting my development setup was easy too. I run yarn build, which builds my extension into a dist folder like that. I go into the extensions manager in Chrome. I put that boy into develop remote. And then I click load unpacked and then select the dist folder, boom, app. The next thing I learned was the manifest file. You know, it’s a core of every Chrome extension and it’s where you tell the browser what files contain your apps. But according to the documentation, Manifest V3 represents one of the biggest shifts in the extensions platform since it launched a decade ago. So that is to say that if you’re gonna roll the dice and check Stack Overflow for help, you might wanna limit your results to within the past year. Yeah, it’ll get you. Script setup syntax, that was new to me. Last Vue comp, the composition API kind of scared me a little bit. So I didn’t wanna try, I just stuck with what I knew, but I really like the look of it. It’s less code. And for me personally, it’s like how I want to write my components. Firebase Firestore. So I wanted to be able to store information on a computer for an extended period of time, but I mainly make buttons look pretty. And so like I went with Firebase 'cause I wanna skip the part where old PHP devs tell me I’m not a real boy on the internet. So Firebase is awesome for that. Here’s some things I get to do for free. You know, there’s the getDoc where I get a reference to a document in Firebase. I can create new documents with addDoc. And if I wanna set a team member color, I get a reference to the member in Firestore and then I call the updateDoc function with the new data. I also learned about onSnapshot, it’s dope. You basically have a function where you have a reference to the document and then a callback of what happens when that document changes, super easy, I found anyways. And I get real time updates. So I’m gonna actually demo with for you. And if I’m starting to run outta time, would someone say? Cause I’d like to just, all wrap it up if you can.

• Got one minute.

• Okay, gotcha. Whew! All right, and then this is on a different screen. So I log in, I go to cool team and I get, yeah. And then these guys are good. So pretend you’re a different person, you’re over here. Cool, you’re on the cool team. And then I click here. And that you see, you got little real time updates. And I got that for basically free. I don’t know how this works. Some other stuff I learned. And then I probably got like what, 20 seconds now? Chrome storage. There’s like a difference between sync storage and local storage, which means that like, it syncs with your Chrome, no no no, your Google account. I learned about Pinia, which is dope. I learned about Pinia, which is extensible. I actually wrote a couple like, plugins for it. Am I doing it right? No, probably not. And there’s some other things I wanna learn still. I wanna learn about the Vite templates. I wanna make it accessible for any of my squaddies with disabilities. And I wanna actually release the extension. AppWright, the guys over at the AppWright table are like, you don’t need Firebase, bro. And I was like, okay, well I already wrote the talk, so. And then authorization of course for bad actors. Thank you very, much my name is, well, that’s my email. I’m not on Twitter. I’m not on Reddit for mental health reasons. And yeah, you can get in touch with me by that. Or you can, you know, send a raven or something. Thank you.

• All right. Big round of applause for Adam Frank.