GitHub Copilot CHANGES THE GAME for Coding!

As software developers, we have access to many different AI tools now, but one of them in particular is working significantly better for me compared to all of the rest. Hi, my name is Nick Coantino and I'm a principal software engineering manager at Microsoft. In this video, I wanted to start talking about GitHub Copilot. And I don't mean just in VS Code or in Visual Studio. I mean github.com using Copilot to go solve issues and create pull requests. Now, on my live streams and on my other YouTube channel, Code Commute, when I start talking about this stuff, I get super excited because it is performing actions and tasks for me that I've really been hoping agents could be doing in Visual Studio, VS Code, and Cursor. And maybe they can, but they don't seem to do it for me. But using GitHub C-Pilot has absolutely transformed how I've been developing software outside of work. And over the past 3 weeks or so, I've started building up a lot more experience trying to navigate building software this way. I'm going to do a few different videos on this, but this one in particular is going to be a walkthrough on some of the scenarios where I think it's doing an absolutely awesome job, and that's going to be across two different repositories I have. So, I'm excited to start walking through this with you. If that sounds interesting, just a reminder to subscribe to the channel and check out that pin comment for my courses on domain. Let's jump over to GitHub and see what's going on. All right, so I lied. We're actually going to be looking at three different repositories, but the first one is just very brief because I've already put together a video on getting my codemute.com website set up and the entire thing was basically vibecoded using GitHub copilot. This is just some proof of how I had things set up and then I made a bunch of different issues and had pull requests done by GitHub. So, this is just an example page of all of those closed poll requests, but the two that I want to walk through instead are for Brand Ghost, which is a social media and content posting platform that I'm building on the side for all of my content creation purposes. So, if I go up here, you can see that I have uh this set of pull requests here on Oh, that's the issues. Sorry. Here's the pull request. You can see that I have 21 open, 76 closed. Okay, so there's some of them that I've closed off because they weren't super helpful, but I want to focus on some of the closed issues. So, let me jump back here, go to closed. I made a short list of ones that I want to talk through. And then the other one is on the front end. So, if I head over to the front end, which is in a different repository, I have a bunch of different closed issues. And again, I have a short list that I want us to go talk through. So, we're going to start in the front end because that's actually where I was experimenting with some really simple ones. And for me, I don't like working in the front end. It's not that I have anything really against our front end. I just find myself more naturally gravitating towards back-end software development. And I often find that making things look pretty or making them look like they're, you know, user friendly is a bit of a sticking point for me. I understand workflows and how to make things usable, but in terms of their appearance, not a strong point. So, I figured why not leverage Copilot for some help. The first one is right at the bottom, and this one is called fix content library search and filtering functionality. So, if I just pop this open here, you can see that I ended up having this pull request done. But if I go check this pull request, we can see the issue I made because I want to show you how I'm talking to co-pilot. This is literally all that I gave it. I just said within this IDE part of brand ghost. So we have a new screen and sort of layout that's coming where you can sort of navigate creating content kind of like as a software developer with code but for content creators and we had some functionality that was broken for searching and filtering. So I just said it's not working right it's currently not working needs to be fixed. Copilot was like say no more. It goes ahead and it starts this pull request and it's pretty cool because it updates some of its information that it posts in the beginning. It starts finding the spots that need to be fixed, right? And then it goes ahead and does it. Now, if you haven't used this before, you can go check out the sessions that it does. It's really cool because if you're curious if it's messing up or you want to understand how it's navigating things, view the session. You can see on this one I said the searching should only look for results in the latest revision of content. So, I realized what it was doing was that it's not quite right. I didn't give it enough context and then it basically made a revision to it. And I guess, no pun intended, it made a revision to the revision fix. But anyway, it was pretty simple, right? I could see that when I pulled down the code and tried it out for myself, it didn't do exactly what I wanted, but I realized it didn't tell it the answer. Now, just to show you how this works, if I go into Brand Ghost, if I go to the IDE, which is not really released yet. Basically, when you were searching in here, it didn't actually do what you wanted. If I search in here now, these are video transcripts from Code Commute that automatically get imported, which is a super cool feature that Copilot also helped me build. But you can see that it's actually searching in here. So, if I get rid of those post body, right, it's actually searching across them. And I'm not going to go demonstrate it in this video, but basically, you can have different revisions of the content and based on the text that's there. We just wanted our searching to go look across only the first revision. So, Copilot was absolutely able to nail this one. Another one that I want to check out because it's very similar is add sorting and filtering to the top extreme list. We'll pull this one open. This is the pull request. I just want to show you again what the issue looks like. So I said on this screen that lists topic streams, I need navigation controls that just do these things. I'm not telling it how it needs to go implemented. I'm just telling it the things I want. I want to be able to sort by the name. I want to sort by a created date. I want to do a keyword search and in the name of the description. And then I want to be able to basically toggle whether or not a stream is enabled or disabled. Right? So super high level. You can see right here, I'm not doing a ton of interesting stuff in terms of defining how it needs to be done, just what I want. And it goes ahead and it figures it out. Now, I'm picking these ones as examples because I gave it very little instruction and it actually delivered quite well. The other one that I showed you, I only had to leave one comment on it. This one, I'm pretty sure it just worked. I didn't have to even like I pulled it down and I tried it and it just worked. And to show you, right, I'm going to go back into Brand Ghost. I'm going to go to the main part of the app. I'll go to topic streams. It added this whole part that's at the top, right? So, if I wanted to search for my topic streams that have blog posts on them or shorts, right? Or um I don't know, anything that's by brand ghost itself, I can do that. I can change the sorting, right? All of this works. I can hide I can only look at the um the disabled ones, right? So, I'm building up a topic stream for building in public. I don't want it to post right now. So, I can basically just show that. So, it's super cool. It did all of this first try and I gave it such a minimal amount of prompting in the beginning in the issue. So, awesome stuff. As we were building out that other screen that I showed you that we called the IDE, we had a couple of things in terms of usability that I wanted to address. And one of them was being able to schedule a post from that screen and the other one was being able to add it to a topic stream. So if I just pull up this one here, I gave it some instructions. I'm not going to go in depth on all of these just to save a little bit of time. But you can see like this one pretty lightweight. I have like what two or three sentences here. That might just be two. And here is what it was able to do. So I'm going to jump back into the IDE for you. What I could do now is I can say boom and I can schedule a post. And so if I press this, it will go pop up this uh you know postuling piece of like controls that we have. This is actually from a different screen. So it was able to pull it in and you can actually navigate through it. The um other interesting one, and I'm not going to, like I said, go into all of them in detail, is that to add to a topic stream is similar, but it basically had to go refactor the workflow to pull this part into the front. So, when I first did the scheduling one that I just showed you, it didn't have to change the flow of this wizard that you see popped up on the screen. But when I had to go do the second one, add to topic stream, that flow wouldn't work. So, we actually had to well co-pilot figured out that it had to go pull this stuff up front. Super awesome. This one is like I would say it did it probably like 85% of the way, but I think the only things that were weird um were nothing to do with the flow in terms of like the user controls and stuff like that. I think it was just that the panel wasn't resizing properly in the window. with very little instruction, it was able to go add in um one really simple feature and one that was a little bit more complicated. So overall, like that's a huge timesaver for us because these are things that in my opinion like we should go do them. They're quality of life things, but are they the highest priority? Not really. But that's exactly why I've been using Copilot to go chip away at all of these things. Another one that I wanted to do is that we wanted to have lost authentication. Let's go check this out in the issue. Basically, what happens is that when you have your social media accounts at different points in time, you can lose authentication that you've set up with us. And that's possible because if you change your password on some social media site, a lot of the time, what can happen is that your authentication that's stored across other sites to leverage your social media account, you can lose your tokens. They need to be refreshed. You need to refresh your authentication. When that happens, we need to be able to tell our users, hey, look, you don't have authentication anymore, and we need to make it very obvious. This was one that if I check out the pull request, I'm pretty sure this worked first try. I didn't have any comments in here. I don't have anything in the in the UI to show you, but um let's just explain it super quick. So if I go to social platforms on this screen, what happens is that when your authentication is lost and it can check that on the API response when it's getting this list, all that it does is it makes it so that you have a sort of different highlight for the list items and then it indicates when authentication was lost because that's present on the API. Super simple. I think in this one, no, I Okay, so I did tell it a bit of information about the API call, right? Because one tricky thing here is I have two repositories. One's for the back end, one's for the front end. I had to tell the front end, and this is the repository we're in. I had to go tell it what's going on, how to leverage this API. So, that's all that I had to do for a little bit of extra instruction, but it absolutely nailed this one. It worked first time. The other one is really simple. There's two that are um really similar. Sorry. Um let's go back to the list. I have YouTube O refresh because YouTube is special. So let's go to here. There it is. YouTube authentication just to explain. I'll pull up the issue that I made. I said that we have the ability. I'm just giving it some background. Right? So I'm trying to figure out as I'm navigating this like how much background do I give it. And then I said only for YouTube authentication refreshing. We need to provide a modal dialogue that users need to acknowledge before proceeding. And this is because YouTube's kind of weird. Once you authenticate with us, it's like it stores the application connection to your user account. If you try to like reconnect, it just doesn't work. You have to go remove our connection and then you can refresh and then it's fine. So I said, you just need to have a dialogue that should let them know they'll need to visit their YouTube account and remove Bran Ghost as an application before trying to refresh again. And then I was like maybe I should like remind it that we have like dark and light themes because even in our own development sometimes we've been messing up the themes. So little bit of extra detail on there but I just want to show you that it actually figured out more detail than I gave it. I'm going to scroll down. I have a lot of social media accounts which is a good reminder that if you enjoy the content I'm putting out then you can basically follow across absolutely every platform right including Reddit. We can see that if I jump down to even our uh YouTube account for brand ghost, right? If I press refresh, it made this dialogue based on what I said. It's not really a complicated change. Like it's just a dialogue. It's not really that complicated, right? But like I didn't tell it this, right? I didn't say anything about going to security. I didn't give it this text here. It's just super interesting that it was able to kind of infer this and then it did exactly what I wanted where I wanted people to acknowledge it. So overall a super simple one. If we have a look at the pull request, what it did the first time was that because that IDE screen I was showing you that actually has a different flow for some of the social o, it went and adjusted it there. So I was like, "Oh crap, I have to tell it don't don't do it there. I actually want it in the other spot." So I just told it to go do it there. And then I realized that it uh duplicated a little bit of code. Okay, so I just said like don't duplicate it. And overall, awesome stuff. It like it worked the first time that it made the code change. So super awesome. Another thing I'll just mention it because it's here. This is pretty interesting that if you are using GitHub Copilot, you can have it do code reviews as well. It's kind of funny. It's reviewing its own code. Like you would think that if it wrote the code, it probably doesn't have much to review, but it does. There's another instance where uh it was reviewing code and suggesting to me I should cache something. It's like, hey, if you're doing this a lot, you should probably cache it so you're not, you know, wasting cycles. It's not changing, which is great advice. So that's the YouTube O one. The other one that was very simple is renaming. So this is something that, you know, it's a really simple quality of life thing on our platform. So, here's the pull request. I'm just going to jump back over to the issue. So, I said I need to be able to rename things on the /platform screen. And then, because I had worked with Copilot to go build the backend code, I basically took the information that it had in terms of the web API that it made. Okay. So, I just gave it some of this information, pretty simple. I think Copilot on the back end actually put this into like the the docs, which is kind of neat. Realistically, I probably don't need docs generated like this. I should probably be using, you know, generated documentation for web uh API endpoints. But anyway, I had this available. I gave it to the front end so that it knew the new API to use and it writes out what it's doing like basically it's its thought process. But of course, like I said, if you wanted to view the session, you could go watch the or read through the session here. That's pretty interesting. just jumping around back here. And then the same thing where it went and did it on the IDE page instead of the platforms page. So it's like, oh, you're absolut It's, you know, kind of like how chat GPT or C-pilot always talk back to you and they're like, oh, like you're correct. Same thing happens here. It's kind of funny. And then it basically just applied the change to the spot that I wanted it to. And just to show you that this functionality that you see here with this little pencil icon to be able to type in this all worked basically the first time. So I can go type a new name here, press the check mark and it's fine or press the X to dismiss it. The reason just for context why this is beneficial is that uh when we're linking social media accounts originally like for example this LinkedIn one probably has a page ID or like it's not quite what you would want. Sometimes it's the handle automatically. I think for Facebook pages we get a numbered identifier there sometimes. To be able to allow users to rename things is a very nice quality of life thing. And it's simple, right? It's a simple change, but is it a like a really big priority for us right now? Not not really. So having C-Pilot do it huge value ad. I mentioned that Copilot was able to do the renaming API endpoint. So, if I jump to the other repository, I'm just going to close out the front end stuff now. We're kind of through the front end stuff, but this was an issue that I filed, right? I said the front end needs to be able to tell the back end that an O entry should be renamed. So, let's go create that API endpoint. And then the pull request, right? So, it said it knows that there's already an O social update endpoint API usage, right? So, it's going to use a put social account ID, the name that it wants to use. Super cool. up tells me how it's going to update um in the database. Excellent stuff. And I think on this pull request, I had one thing that I noticed when I was reviewing. I saw that it was using a transaction. Not that it's wrong necessarily, but it was a single single update to the database. So, I just said like I don't think you need that. And based on the error handling with the transaction and rolling it back, I was like, this is just it's just overkill. It's going to fail or it's going to go no matter what. So just gave it that piece of feedback and otherwise it built this API totally correct. The first time I was able to use Postman kind of work through it, prove that it worked and then that's how I was able to go ask the front-end repository with Copilot to go build the userfacing feature. The last one that I want to talk through in this list and you can see right there's lots of stuff that it's been able to do but it's for um templating email notifications. So email notification styling. Let's have a little look at this one. In our platform, I've been trying to build a notification system. And that's because, as I mentioned, we have social media posts that go out. Now, social media posting is both simple and complicated because to post to a social media site, simple, right? Not a ton involved. There's APIs for these things. But when you're trying to take one post and post it across all of these different platforms, we have to do a lot of work to make sure that things are able to go to all of those platforms. Whether that's the length of the post, whether that's the media format, you could have one, we had like blue sky outages not long ago, we had Twitter outages, things can go wrong along the way. We need to make sure that we have a notification system so that users know when that kind of stuff happens. I've been building this in the background. I have been enabling it for myself so I get email notifications. And as it's getting closer and closer to release to users, I started going, okay, but our emails are basically just like text. There's no styling. There's nothing. So I said, we already have uh this library we're using. I don't know how to pronounce it. Scribbin. Scribbin. I really like using this. I think it's pretty handy for templating. So I said, here's what we use, but I don't know anything about styling email. So, I just said using modern approaches to theming and styling, add this functionality to the email notification feature we have today. I didn't Oh, I wonder if I used voice. I might have used uh voice to text. I'm just realizing this. That That's got to be what happened. Instead of Nougat, it said Nougat. So, that's hilarious. You're allowed to use Nougat packages to be able to accommodate this as long as they're actively maintained and have a free licensing model. Because again, this is something where I'm like, I'm not totally comfortable giving it a direct suggestion. I don't know the answer to this. I could go do my research, but I want to see what Copilot's going to do. This is something I have to get done at some point. It's not the most urgent priority. There's a lot of, you know, we got a lot of things that we can and should be working on. This is something I'm doing in the background. So, I wanted to see what it could do. Let's pull this up. Walks through the problem. Walks through the solution. Right. content rendering uh scribbin or scribbin templates render notification data to HTML. It's not changing that. And then it's going to do theme wrapping. So rendered content is wrapped in a configurable email theme templates for styling. Seems pretty cool to me. Then it was able to gave me uh give me two built-in theme. So a basic one and a branded one. And then we can actually just configure it in the app settings. So, we can have a whole HTML template defined. Two built-in ones and uh extensibility like heck yeah. So, it walks through how all of that works, explains with some documentation, but if we have a look again, I'm I'm showing you the the conversation back and forth inside of the pull request. I think I had to go fix a couple of compilation issues on this one cuz you can see that I did a force push. So, I might have No, this is a rebase actually. I said looks good to me. And then I needed to I think I just was rebasing something locally. So I probably rebase and fixed a compilation issue and just said let me just force this up to the the pull request and it was done. This is the one I think where after co-pilot had a suggestion around caching this, right? So great point. We should cach this. But this feature worked so well and this was actually one that I was more nervous about. So, all of the other features for the most part that I've been walking through, they're they're very straightforward. Small UI change or call this API now and then put the controls in the UI for it. This was one where I was like, okay, I don't have a ton of faith that it's going to do the right thing. I think it's going to do something, but is it going to do the right thing? Is it what I want to include? I don't know because I don't even know what I want to include yet. So, I was not really expecting a lot. And I remember when I was first looking at the code change, I was going, "Oh man, this probably overco complicated it. It has built-in themes. It has like I I'm didn't even tell it what the theme was." Like, I don't know how it came up with that. So, I'm getting nervous that it probably went off the rails. I pulled down the code locally. I was exploring it. I was I was sending myself notifications and I went, "Holy crap." Like, they're actually themed with our brand colors. I don't I still don't even know where it got the brand colors from, but it basically came up with an email theming system that all worked out of the box. I'm not going to show you the emails. There's still probably a lot to be desired, but the branded ones actually have like a blue kind of brand ghost style like color banner and then they have the Brand Ghost logo as well. So, it did a really good job and honestly, like I said, I think I probably fixed compilation issues on this locally and pushed it up. So, not perfect, right? Couple of things, but I should also mention that I think on these, I have not given Copilot the ability to go run my build in the actual pull request. So, when it comes to fixing compilation things, I don't know if it has the exact same tools that I'm able to leverage locally. At least, I haven't set it up that way yet. So, it's like it's not running my test infrastructure either. So, there's some things that it's kind of screwing up. And I think that I could probably make that better for Copilot. Overall though, this one I was nervous about and it absolutely crushed it. That's all for my list in this video. So, that was a good handful of different features or bug fixes for Co-Pilot to go do. In the follow-up videos, what I'm going to do is walk through sort of two other flavors of this. It's going to be ones where it absolutely misses the mark. It's things that I might expect that it should be able to do and maybe sometimes I'm stretching it a little bit. And then the other one that I want to talk through is it's actually similar to this email uh theming system one where I give it something a little bit more open-ended and I'm not expecting that it's actually going to work or to finish it. But I'm giving it something open-ended because it's on my mind. I don't have time to go prototype it. Why not let AI go prototype it? and I can see different ways to think through the problem. So, I will walk through a couple of different scenarios like that because I think that they're a very powerful tool for me to use at least to get ideas. So, thanks so much for watching. I'm curious your thoughts on using Copilot this way. Maybe you're able to do this effectively in your IDE with cursor with Copilot in Visual Studio Code or in Visual Studio. Would love to hear from you. But this has been absolutely changing how I'm building software. Thanks for watching. I'll see you next time.