Kedasha Kerr 0:55
Nice. Thank you. Hello. Everyone, I am Kedasha. And I’m here today to hopefully give you some tips on how to get the most out of your AI programmer, or how to get the most out of GitHub co pilot. So today, we’re gonna learn how to code smarter and not harder with GitHub co pilot. So let’s just jump right into it. So I’m Kadisha. And I work as a developer advocate at GitHub. And I’m so excited to be here today to talk to you all about GitHub co pilot, and how to take advantage of this tool. I’m Jamaican, and I’ve been a software developer slash engineer for about three years now. And I absolutely love love love to create technical content on line. And you can find me on Insta tick tock, sometimes Twitter. And I just love doing it. So that’s why we’re here today. So let’s get into the meat of the matter, right. So I know that AI has been the most used buzzword in the tech industry as of late. And sometimes we may have the expectation that the tool is just going to do all the work for us. But just as we need to learn how to use a new framework or library, we also need to learn how to take advantage and how to get the best out of these AI tools and make them work for us to get the result that we need. Right. So today, I’ll be sharing some pragmatic techniques and ways to get the most out of GitHub copilot during your day to day development. So today, we’re going to be covering just take a brief look at what his GitHub copilot, what it’s good for a little bit of behind the scenes of how it works, and how the extension and plugin works, some tips on how to get the most out of GitHub copilot. And then we’re going to jump into the code editor live and make a lot of mistakes. To see how we can implement these tips in our daily development, there’s going to be a quick review and then a q&a session. So let’s get into it. Right.

Kedasha Kerr 6:54
So GitHub copilot is an AI pair programmer, that helps you write code faster. So just in case you didn’t know that’s what it is. And it is specifically designed to help you with program and task and serve as a an assistance while you’re working in your IDE. So when it comes to using GitHub co pilot, don’t ask me like, you know, questions that you would ask chatGPT, for example, GitHub Copilot is specifically for programming. So it’s also comprised of a suite of products that goes beyond just like code completion. So some of these tools involve, like a chat interface that’s right in your IDE, a command line tool, that that is through the GitHub CLI. So the GitHub CLI is a way for you to interface with GitHub without leaving your terminal. And then there is a GitHub copilot extension that allows you to get, like suggestions and explanations of shell commands and Git commands, whenever you forget something. So let’s say you forgot how to heaven forbid, push a folder to GitHub, you can ask GitHub, GitHub CLI, hey, how do I push a folder to GitHub, and you get a suggestion that you can copy and run right in your terminal. There’s also GitHub co pilot for PRs, which I hope to have time to show you today. So GitHub co pilot for PRS is essentially where you know, when you push your code, you can ask Capelle to generate a detailed pair description for you. It’s very amazing, very great. And it’s GitHub copilot. It’s also integrated into github.com. So this means that you can go to a repository that you’re unfamiliar with, and get an explanation of what the repository is, how to get started with it, where to find certain files, and all that jazz, a nice way to interact and chat with a repo on github.com. But today, I really want to get into the code completion feature of GitHub, show you how to get the most out of that for your day to day development. So GitHub copilot, the extension, the code completion portion of that suite of products is in your IDE. So it’s in Visual Studio, neovim, Visual Studio code, and in the JetBrains IDE is it works with a lot of languages, Ruby, JavaScript, shells, C, C++, go SQL, Java, etc. And it can help you get assistance with your code through all these languages. So it’s not just focused on like, you know, front end languages like Typescript and JavaScript, you can also use back end back end languages to get some help with Git from GitHub Copilot.

Kedasha Kerr 9:34
So what is GitHub copilot good for? It’s good for a lot of things. But what it’s specifically good at or like what it what it does really well are like boilerplate code and frameworks, like getting up and running with a new framework or a new tool or writing those, you know, that code that you write all the time to, like get our server running or to create a form component. That is really, really good at right Writing goes, it’s going to helping you with uncommon or confusing syntax, pattern matching, writing code faster. Of course, cron jobs and regex. It’s also really good. I’ve learned, I’ve learned recently at writing like CI/CD pipelines, like GitHub actions, it’s really good at writing those. But you do have to check the code that it delivers for like security leaks and such. It’s great at helping you remembering things that you forget. So oftentimes, you’ll forget how to let’s say, validate a phone number, and you have to go and google how to validate a phone number with copilot you can just ask right there in your editor, so you don’t like lose focus or like, we call it context switching, what you have to do, it’s good at extending and refactoring existing code. It’s also good at translating code from one language to the next, of course, you may have to, you know, go through and review modify the translation that it gives, but it gives you a really, really good head start and that it’s good at explaining unfamiliar code. So let’s say you’re new to a team, and you have no idea what this repository is doing no idea what this code is doing. There are no comments, there’s nothing for you to give an indication of what this function means or it’s doing, you can just highlight the function and ask copilot, Hey, what is this function? What does it mean, please help me understand it. It’s really good at documentation, which I know that we all love to write documentation. As developers, we’re excellent at documenting. But just in case you you know, you don’t copilot is great at helping you write those documentation. And it uses the JSdocs format, which I’m going to show you today, to get that documentation going. It’s really, really good at helping you understanding your error messages and fixing it. So it will say, Hey, this is what the error means. And here’s how you can fix it. And then you can just go and iterate with copilot as your assistant is great at writing unit test, and a lot more. So while it’s good at writing unit testing can’t really take the unit tests at face value, it’s just going to give you a head start. And you have to make sure that you go in and edit and make sure that co pilot is doing what you need to do. So what are some limitations of copilots. So Capelle is not a compiler, it will not compile your code, it will not run your code for you. It is just there to give you a head start, it also cannot read your mind. And although I really wish it could read my mind, it’s it cannot read your mind. So you have to be very specific in what you want to get the output or the results that you need from the AI. Additionally, GitHub copilot is not a replacement for good coding practices. And actually, if you have bad coding practices will be even more apparent when you start using copilot because it uses the patterns in your code to give you suggestions. So this means that if you have bad coding practices, you’ll get bad suggestions. So it’s important to keep that in mind when you’re using the tool.

Kedasha Kerr 13:00
Also, one of the most important points I want to drive home today is that GitHub copilot is a tool that can help you write code faster, and it’s up to you to decide how to use it. It’s not here to do your work for you or to write everything for you. If you’re to be a guide and assistant, it’s here to nudge you in the right direction, just as a coworker would if you ask them questions or guidance for a particular issue. You have couples here to do the same thing. So however much or little information you give copilot that’s kind of the response or the suggestion you’re gonna get back from it, right. So how does copilot work? So copilot draws context from the code that you’re working on to provide you with code suggestions. So on the left hand side, here, you see, I have a screenshot component that I was writing, and the like kind of grayed out. That’s pilot suggestion on what I want to do based on the code I have of the cursor, right? And so when it comes to context, what exactly is included in this context? I get this question all the time. What does this study show? What is it sending? Is it seeing my entire, you know, my entire project? What if I don’t want it to do that? So when it comes to context, in the completion feature of GitHub co pilot, it’s going to look at your current file. And when I say current file, I mean the current file that you’re working on that you ask it to generate something for, and then it looks at the entire file, save gonna look above your cursor below your cursor before your cursor after your cursor, the entirety of that file is going to give context to copilot as to what you want it to do. Copilot is also going to look at any open tabs that you have so and then the tabs closest to your currently your active file is given priority, assuming that they’re most closely related to the work that you’re trying to do. So when it comes to context, Copilot is looking at Your current file and all the tabs that you have open, right. And so as you’re coding as an as you’re adding comments to get a suggestion from copilot copilot is going to use, you know, we use the open AI, open API or open AI model behind the scene to parse your requests, and then return a suggestion based on your request in your IDE. And so at this point, you can accept, reject or modify to provide suggestions. This then means that you’re able to provide as much context as possible to GitHub copilot to get the best suggestion that you can, if your file is closed, GitHub copilot cannot access it. That’s something that is very keen and very important to remember is that if you have close files that you want it to have access to it is just like, Oh my God, why isn’t it? Why does it know what I want? Like, why isn’t it doing things exactly the way that I want it to do? Well? Do you have any additional tabs open? Right? Are all your other files close? Do you just have that one current file open? All these things work together to give you the best situation and the best suggestion from copilot.

Kedasha Kerr 16:06
So I want to now share with you six tips to get the most out of GitHub copilot when it comes to providing it with context, essentially, like how can we help GitHub copilot help us to get the best suggestion possible. So the first thing you can do is open your files, like I just said, copilot looks at the current and open files in your editor to analyze the context and create appropriate suggestions. So having your file open provide good pilot with context. And so when you have additional files open, it will help inform the completion that is returned. So remember, if a file is closed copilot cannot see that files content. So have a few file open in your IDE to give Copilot a bigger picture of what you want to accomplish. The second tip I have for you is to provide a top level comment. And so a top level comment is essentially. So let’s say you have an empty file open right now like you created a new component you add the file open. Right at the top you’re going to add a comment a very detailed comments are all the things that you want co pilots to do. So just as you would give a brief high level introduction or explanation to a co worker, a top level comment in a fire working on helps co pilot to understand the overall context of the pieces that you want to create. Right. So this is going to give copilot a GitHub copilot a goal on what to work on. It helps the guide co pilot to give a better completions. So the third tip for you today is to set includes and references. So this means that it’s essentially best to manually set includes or module references that you need for your work. So compiler can make suggestions, but you likely know but what dependencies you’ll need to include and like what versions of dependencies that you want to use. So this can also help to let GitHub copilot know what frameworks and libraries and what versions offset framework and libraries that you want to use when crafting a suggestion. Number four is that meaningful names matter. And so this goes back to you know, having good coding practices. So the name of your variables and functions are very important. So let’s say if you have a function that’s like, that’s named our foo, or bar, GitHub co pilot will have no idea what that means. And so it won’t be able to give you a good completion, you know, like, just as we would go into a file and see, you know, const, foo or const, bar equals etc, just like, what does this mean? Right? So having meaningful names matter. So if you have a function named fetch data, that would mean much to a coworker. And that would even mean much to you a few months down the line when you go back to it, and so it will mean much to copilot either. So having a lack of good coding practices will definitely show up when you start using GitHub copilots. So make sure you’re you know, you’re you’re naming your functions, you’re naming your variables properly, as as best as possible. But also tip number five, having a specific and well scoped function comments also helps to give copilot more context. So commenting your code helps you to get very specific targeted completions. So a function name can only be so descriptive, right? And if you try to make it as descriptive as possible, it may get overly long. So function comments can help fill in those gaps and those little details that copilot may need to know. So just remember this single specific short comments will help co pilot write better context. And the last tip I have for you is to provide a sample code right so like providing sample codes to co pilot will help determine what you’re looking for. This helps to ground the model and provide it with more context. It also helps GitHub Copilot to generate suggestions that match the language and tasks that you want to achieve. This can be especially helpful to jumpstart GitHub co pilot to a newer library version, when it defaults to providing older code suggestions. So sometimes I like to say to co pilot to get up co pilot, you know what, that’s incorrect, I actually want to use this version, can you provide a suggestion based on this version of the library, and it will say like, you know, like, Oh, I’m so sorry, here is what you’re looking for, or what I think you’re looking for. And so providing sample code is going to be very beneficial to helping give enough context to give up copilot. And so those are the six tips I have for you today. And a bonus tip is to remember to trust but verify. So do not blindly trust the completion or the suggestion that GitHub co pilot provides to you always refer to completion before accepting it. And even when you get a suggestion from GitHub co pilots, you can highlight the suggestion and ask your GitHub copilot, please explain this to me. And tell me did you answer my question? To kind of, you know, give it a little nudge? Like, listen, you didn’t really listen to me, that’s not specifically what I’m looking for. Especially if you provided a top level comment, you have the files open, you have tabs open, you gave it all the information that it needed to create the completion. Sometimes it’s good to, you know, give a corrective measure, like, hey, this isn’t exactly what I was looking for, can you please provide it this way based on this example. So always remember that the better the input, the better the output is going to be? So now, let’s go into some demos. We’re going to do some live demos right now.

Kedasha Kerr 21:42
And if I make mistakes, it’s okay. You know, don’t don’t be too hard on me. Let me just start share my code editor screen. No, I think is this one. Share? The browser can access my screen. Okay, let me try again. Yes, this one, yeah. Okay, there we go. Great. I hope you can see my screen. Let’s stream yard. Okay, let’s just go back right here. Great. So this is the project that we’ll be looking at today. And this project is called meal metrics. And so essentially, what this does is you can get nutrition facts for any recipe that you find on the internet. So here’s how it works, right? So if I go to a recipe, so I’m Jamaican, and I love Jamaican fried dumplings. So I can copy this recipe, put it in, I can pop it in the text, blocks, hit submit, and hope it works. Ah, and there we go. So essentially, this is what that recipe does, right? And so it’s a next Jas app, I’m using Express, and node for the backend or the server, don’t come from me, I still use Express. I know it’s not maintained right now. But you know, it works works out of the box. And it’s great when I want to do like a quick demo. And so that’s essentially the app and I’m using open the open AI model to get the suggestions immediately on the screen. And so one thing I don’t really like is I don’t like how the suggestion is being returned right here. It’s just like, it just looks like one long string. And so I want to have copilot helped me to split each facts or each, you know, each nutritionfacts into a new line. So it’s easier to read. And it’s easier for us to understand. So let’s go to the code editor. And here you see I have this index.js file, I have a generate info.js file, which is doing all the work of going to the GPT 3.5 Turbo instruct model. So yesterday, I learned that the previous model I was using was deprecated as of January 4, so I had to quickly update this model. And thankfully, it wasn’t too difficult to do.

Kedasha Kerr 24:58
So let’s start again. Right. So you saw the example here where we found the nutrition facts. And it’s just a dumping here of the facts. And I want Copilot to help me split this facts into like, you know, each separate line. So, okay, great. So I have this index.js file here, which is essentially the homepage. So it’s literally just the entire the entire app there, then I have this generate info.js file, and I’m using the GPT 3.5 Turbo instruct model, which I, as I said earlier, I had to update yesterday quickly, because the one I was using was deprecated. As of like, last week, tech moves so fast, it’s crazy. Okay, so let’s go here. And this is where I am fetching the nutrition data from the server that I created right here. And then I’m rendering the nutrition data right here, just like a legal blob called nutrition, right? I’m using the material UI design material UI design system. And so that’s where this typography component is coming from. And so let’s work on this nutrition data. Right? So I’m going to create a new file here. And I’m going to call it nutrition. facts.js. Awesome. And I’m going to give GitHub copilot a top level comments, like what we spoke about yesterday, I have a little notes here. So I’m just going to copy. So I don’t have to type all this and paste. And you may say Can a shot. That’s actually a lot of typing. Wouldn’t it just be easier for me to write the component myself. But think about all this as pseudocode? Right? Before we build a component, before we start coding, we actually have to figure out okay, what do I need to do. And so once you figure out what you need to do, you can just tell copilot, and it will help you to do it. So I have here create a component with the following specifications. And this is a high level comment, the component must split the receive string data at, you know, each new line and return a typography component for each string. So I’m providing here, a reference to the typography component from material UI, I’m telling it exactly what I wanted to do. The component was at a unique key for each component for each typography component and must return a div with the typography components that are that are that are returned null if the data is not a string. So let’s see what copilot does. And one thing about kappa is like loves to follow pattern. So because I had the comments here, it thinks I want to do that. So let me just give it a little nudge. And there we go. it important to typography component. And now it’s going to write the nutrition facts component. And here you can see it’s using the same name I have for the file to name the function. And this is why having like really good meaningful names matter when you’re using the tool. And so now here’s the first suggestion, right? So it’s gonna say if the data is on a string with her null, otherwise, it’s going to split the array at a new line. But if you notice, it’s missing some of the regex right here, because I said, you know, these two things, so like, let’s see the other suggestion. Still missing it right here. And then here we go right here, this is exactly what I’m looking for. So let’s accept this third suggestion by hitting tab, enter, export the components. And this looks, it looks good. It’s valid in the data, if it’s a string, if it’s not returned at all, like I said, above, and it’s just popping it into the typography component. And then it’s splitting the string at each new line. Now, if I didn’t understand what this means, I can highlight it, I can hit command I in VScode, and I can just say backslash X or slash explain.

Kedasha Kerr 29:19
Then it just goes ahead and explains that code to you. Right. Awesome. So let’s import this component into the index. Okay, thank you. Let’s import this component into the index.js file and see if it did what we actually wanted it to do. It knew I needed to import that. We’re going to grab this name go down here. And I’m going to pop it here year. And then data is going to be equal to that nutrition. I probably should have called this nutrition data or something is just the attrition. That’s we move on. Okay, so let’s see what this looks like in the browser, I’m going to copy all this, and just hit Refresh really fast. Pop the recipe and hit submit. And there we go. It actually did split everything the way I expected it to be. And so now it’s not in the same format on us here. Because in this component, I’m using the paper component from material UI. I didn’t ask GitHub Copilot to use the paper component. And so it didn’t generate that paper component for us. But I can actually go in here, like if I really wanted to, I can highlight the return. And I can say, command, I can say use the paper, component components from material, UI. hit generate. And you can see how specific I am being in what I want from GitHub copilot. So there went when it used to wrap everything in the paper components, I can then accept this suggestion.

Kedasha Kerr 31:20
Ooh, something’s not right, is it? Let’s do this. Again. Let’s highlight everything actually. I think it rewrote everything. She’s not what I wanted.

Kedasha Kerr 31:43
Okay, it’s just rewriting the entire file. Gotcha. So let’s accept. Make sure there are no duplications. All? Good. Let’s go back to the browser. Refresh, pop it back in submit.

Kedasha Kerr 32:08
Where is the paper components?

Kedasha Kerr 32:15
I think it’s because there’s no elevation, I can’t see it. It’s imported. So this is what I mean, when I say like, you have to really understand what you want from a co pilot. Because if I look at, I wanted it to look like this paper component, right? And all I said was use the paper component from material UI. So it was like, Okay, here you go. But if I come here, and they look at what I’m doing in this paper component, there’s an elevation and they also added a padding of 20 pixels. This is essentially what I wanted. And I should have told it in the mixture to add elevation of 24 and add a style padding 20 pixels. So you really have to be explicit, or like you know, very particular in what you want from copilot because it’s only going to give you what you asked it to give you. Everything compiled successfully. Let’s try it one more time. I’m using a lot of tokens as you can see. It’s still going into it. And I’m not sure why actually. So let’s debug this worked earlier. But let’s let’s see. All right. Let’s copy. Does it need to have like a maybe this, but it’s one rapper. So I don’t think that should matter. But let’s try to x copilot what’s going on here? Okay, the paper components, what’s that? It’s not rendering, right?

Kedasha Kerr 34:07
Can you tell me why?

Kedasha Kerr 34:14
It’s hard to determine the exact reason. I mean, that’s that’s how I feel, you know, because the data prop is coming back as a string. So maybe if we restart the server sometimes, even though it’s restarting. I find that sometimes doing that helps.

Kedasha Kerr 34:51
Now let’s do Oh, I’m not sure what’s happening. Oh, you know, I was having some connection issues earlier. I’m not sure See if that has something to do with this lagging right here now. But either way, either way, as we get him Capella, definitely follow the instructions that I gave it. And if I was even a bit more specific in my request, it would have made sure to add the elevation and the style, which is kind of sort of what I was looking for. And it definitely did the work of splitting those facts into separate lines for me to read, or occur, let’s look in the console to see if there’s anything over here. Because if there is, I can always ask a pilot to explain that to me.

Transcribed by https://otter.ai