Github Co-pilot is Gonna Take ur Job

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes, Barracuda, Boz, and Scott, El Toroloco, Tolinski.

Welcome to syntax and the 409th episode of syntax. We will be talking about GitHub Copilot And why it's totally gonna come steal your job.

That's a facetious statement, but we are going to be talking about GitHub Copilot. It's gonna be a lot because Wes and I have both been using this thing, and we both think it's fantastic.

So my name is Scott Tolinski. I'm a developer from Denver, Colorado. And as always, is the Wes Bos. How you doing, Wes?

Oh, I'm doing great. Thank you. Excited to talk about your help copilot.

Yeah. Me too. Yeah. I'm I'm actually ready to go. You you Little behind the scenes here. We record these. For me, it's first thing in the morning. The kids, Courtney, they get out the door, go to work, go to school, And then I come into my office, and then we hit record. Essentially, it's how it is. Today, Courtney had to go into work early, so I woke up. I had my coffee. I had my workout, and I am, like, us well in advance. I'm I'm it feels like the afternoon for me here. It it feels Oh, boy. Yeah. It is a rock. I've I've been toying around the idea of Waking up early. I always see these people that

wake up at, like, 5 AM and get, like, an hour or 2 in before the family wakes up. And I'm like, man, that would be amazing. But, like, I am

I'm a zombie in the morning, so I don't know if I could do that. I would love to to make it happen, though. Yeah. My my uncle was the editor in chief of a couple magazines for a long time, And he he said his his whole thing in his career was that as long as he gets to the office an hour before everyone else, He can usually knock out his entire day's worth of work in that, like, 1st couple hours before anyone else gets to the office, Knock it out and then go to town and just, like, be social. Be you know, he's he was the boss in the office. He's editor in the chief. So it's like, He he could just be visible and be available and just get his own stuff done early. I was like, I always thought that was a really good strategy for dealing with that type of thing. This episode is sponsored by 2 amazing companies, LogRocket and FreshBooks. Both of these companies, they both supported the syntax for a long time. So Give both of their websites a look. Lock Rocket is the visual exception and error handling service that allows you to see a video replay. That's right. A literal video replay of the error happening. Let's say your users were filling in a form.

Something was wrong in the form. Maybe you coded some bug Into that thing, they hit submit. The user gets presented with an error. Then they, you know, they may just leave your service entirely.

But what you get You get is a video of them doing that. You can see what they typed, where they typed, where they clicked, enter. You could see The error pop up, and then you can check the console, the network requests, all of those things that you typically don't have access to and solve this a problem before the user can even let you know that there is a problem.

How cool is that? So check it out at logrocket.comforward/syntax.

Sign up, and you'll get 14 days for free. Thank you so much for LogRocket for sponsoring. And FreshBooks,

FreshBooks is the cloud accounting solution for your business. If you are a a small business, a large business, a freelancer, or just some guy sending an invoice to somebody that for you need to charge them for something.

FreshBooks is what you use. You get paid faster. They can pay online.

You can check really quickly who has paid. You can send automatic late payment Reminder so you don't have to actually bug the client to, hey. Can you please pay me? It will automatically send those FreshBooks. This awesome cloud accounting for your business. Check it out at freshbooksdot forward slash syntax. Make sure you use syntax in the how did you hear about a section. Thank you, FreshBooks.

Thank you, FreshBooks. Cool. Yeah. Great. GitHub Copilot.

Maybe we should start off with a a first kind of high level what the heck GitHub Copilot is for those of you who may or may not be in the know, And then we can talk about our experiences so that well, we think maybe some of the maybe I don't necessarily say problems or issues we've been having, but things like that. Maybe some of the downsides or or anything like that. So GitHub Copilot, what is this thing? Well, it's an AI powered sort of fancy auto completion As in it kinda guesses what you're going to type next. Sometimes with rather startlingly CS Startleries. Startler startling? Startlingly, just startlingly accurate results. It is Absolutely awesome sometimes. Sometimes you were just typing along and GitHub Copilot's like, hey. Would you would you like me to just Do everything that you're about to do for you, and then you just hit tab, and it auto completes everything for you. And you say, It was kind of scary how good that was.

Yeah. Like, you you install these things, and you go, oh, yeah. Autocomplete or, like, it's gonna Find a variable that you have in the file and and auto complete that. Like, no. This thing will guess what it is you're trying to do with, like, 87% accuracy, and it is amazing. Like, I installed them. I'm like, come on. How good can this possibly be? 87% Accuracy. Yeah.

Amazing.

I think the huge benefit of it is that there this is going to make you a much a faster and better developer, because the autocomplete is almost always as you start typing, you go, yeah. Oh, oh, that's exactly what I need. And, it.

It's unreal. Like, let's get into the specifics of why it is so unreal because I am thoroughly impressed. I know Scott's had access to it for a A couple months. I've had a couple of months. Try try, like, 5 or 6 months, Wes. Zach, k. I only I I don't have the, inside Scoop over at GitHub that Scott does, so I only got it about a month ago. And man, oh, man, is it good? I actually had access to it because I'm a I'm a GitHub Star West. Oh my gosh. I can't believe that I'm in your presence right now. Me too. I can't believe that I'm in my presence, but, I

I got, I kinda like an e it was, like, under an NDA where I got to, like, check it out before I could even talk about it. And it was so distressing For me to be able to use Copilot and not talk about how cool it was all the time. Yeah. This thing is awesome. I cannot wait, for other people to get their hands on this and try it out. And, it is one of those things that I've been using it for such a a little while now that It really feels like it's worked its way into my my brain process while I'm writing code. If I'm, like, thinking I'm typing something, like, GitHub Copilot could probably do this. I'll make an attempt for

it to do that. Many times, it doesn't even require that much thought. So, like, some examples is if you are in a JavaScript file, and you need to loop over, an array of items. And for each item, you need to, it. Create like, an example I have is, I did a little comment. It says, generate 5 IDs and create an image for each.

And I wrote that and I start typing function and it says function, get random ID, and you hit tab, and it gives you a whole function for generating a random ID.

And then I type f, and it's, like, for Const, ID of IDs, and then inside of it, it says, const image equals document dot create element, and then does image dot source, and it it goes through the entire thing. And I'm not lying. I I created, like, a probably a 30 or 40 line, create IDs, create images, and append them into the DOM. And all I had to do is document query selector The actual element and the rest of the code was written by GitHub Copilot, and it it got me probably 90, 95% of the way there. It. And I had I had a gotta jump in, and you kinda have to be careful because if you just accept this random code that it's giving you, Yeah. You have to definitely read over every single line. But for things like that that I do I've done I can do that in my sleep.

It's amazing how how quick it guesses what it is that you want. Yeah. It's not going to design your application

or, you know, design the the code of your application. But, Like, you mentioned a good example that I had to I had an, in the of all of the different states for the The checkout process. You know, the checkout flow, you have Yeah.

The cart phase, the the law the form, the CSS, maybe a login form if you need to log in. So there's a lot of different states there, and so I had all of those in an enum. And in my Svelte template, I did, you know, bracket pound if checkout step is equal to cart.

You know, it just did that. And then GitHub Copilot went through the enum and then filled out else if checkout step is equal to blank fl check For all of them, all of the things in the in spelled with the correct spelled syntax, and I was just like, oh, Yeah. This just like, it it's it's takes a minimal amount of time to copy all those lines, change the text, do whatever, but it's Taking you that time Totally. And it's still time that you you have to spend doing menial work that, you know, you really

Probably don't need to do. Right? One of the coolest things that it does is that you can write pseudo code in just a comment. Yes.

So for my example, I said I did forward slash forward slash get course code and product, state.

So I said course, space, code, and product, state. And then I hit the next line, and it automatically set up the React use state hook s. Where it says const square bracket course code, it properly, properly camel cased it, and then comma set course code. So it It it properly did the the setting of that equals use state, and and it started it off. It also I I feel like it is also type aware Because I I forget, somewhere else in the application, I had, course code, and it was a string. So it immediately inferred that somehow, and then it also did it for product. And just like knowing those types of things, somebody on Twitter said that it's it's fantastic for popular languages like React and Laravel and whatnot because, part of the way that it learns is that it GitHub Cohilot has access to, all the public code in the world pretty much, is because most stuff is hosted on GitHub, and it's able to learn both by, I think, analyzing your project locally as well as it has Millions and millions of lines of code that are written every single day and checked into GitHub. So, it's that's something I've said for a long time is, like, we aren't that special. We're all just building Yeah. You can't put boxes and saving them to databases at the end of the day. Right? So Right. It can find trends from that. Yeah. That I mean, that's such a good point. And, really, what it is CS doing for you. It is removing a lot of that busy work. I do think one of the most ideal ways to use it is

is to have it, to write the pseudo code in your comments.

When you do that, it, like, always seems to find the right name for functions, The right name for variables. Like, if you have your comment that's like update user, whatever, this update, and it'll make The the function name updates user thing, and it does it so well that it it again, it it can be rather startling sometimes. But I do I do think that If you write pseudo code in comments, you will see a tremendous benefit from using Copilot in terms of, like, it just doing the stuff for you. And likewise, I also found it's really good at writing comments for code that exists. Now I don't really, You know, understand exactly how it's doing that. It could just be, like, auto completing commonly used language, like English language, that it's it's seeing from, like, similar sentences because you can get Copilot to say some kind of funny stuff sometimes. I think if you, like, lead it in a direction like Wes was giving it seed phrases and seeing what it would autocomplete with, which is pretty funny. Yeah. But I did find it to be very helpful To write the comments for me on code that had already been written without comments, likewise, like, I found it'd be helpful to Write the code where the comments had been written. Yeah. I, just doing a little example right here,

where you have already have a loop And you have a variable named people.

And on each person, you change the name and it will say And you just do comments and say loop. It'll say loop over the people and, modify each person. And it's amazing that It also singularizes the people

array into person, which I was very, very impressed with. That's actually a great one too. Anytime you're doing loops With a callback like that and you're doing, like, iterating over anything, it usually gives you that variable name. And and that's just, like, one less thing you have to do that you pretty much always have to do. You're writing that arrow function with the variable that's like, oh, it's no longer items. It's item. But Copilot seems to handle that stuff exceedingly well. And really, again, just takes out some of that extra effort for you. So what languages does it currently work with? This is not even something I know. Do you are you aware of that? No. I have not hit any limitations. It pops up in just about any environment. Works for me. Have you been using it with CSS? Oh, Have I been using it with CSS? Because I actually don't know. I have been using it with CSS, but now it's not. I'm just in a CSS file. Sometimes I I don't know if it's Copilot or

just Versus Code? Oh, yeah. Yeah. It's it's working in CSS files. It's I think it's because I I was I was testing it in a A file that has a source map in it, and it probably knows to ignore that or something like that. But, yeah, it works really well in CSS files, Especially for a lot of the, boilerplate things like grid, display grid, justify content, align items, things like that.

It will just populate them right away for you.

It's I have seen the most benefit in JavaScript TypeScript files. That's just because that's what I code most of my days in, but I'm also very impressed with it in JSON files in HTML files.

I just did a quick form tag, and then inside of that, It already auto completed the name, email, and phone number with a placeholder in there and just things like that that You would have to type them yourself anyway or even things where I previously would use Emmet to get really, really quickly get it out on the page. It. It's even a step further because I don't even have to think about what is the Emmet shortcut for expanding all of these things out. Yeah. Right. A step before that because it's smart about it. It knows my environment. It knows my code. It knows these things that I've been writing. It knows, what 6 other 1,000,000 developers have written on input name and input email, those types of things. It puts a submit button in there for you, and it's Really cool that just scaffolds

it out for you. I just I just did a a, like, a wrapper div just now. I'm in a a self component just to see. Sometimes it it is fun just to see what it comes up with. So in a Svelte component, I just had a div wrapper, and then Copilot Notice all of the different these 5 other components that I had imported into this file, and then it wanted to autocomplete them as in the order that I imported them. But just, like, imagine you would have a wrapper div and you were just using as a container for many other components. It just did all of that for me. It's like, oh, You're importing these 5 components. You obviously wanna use them in this HTML.

So here, we'll just throw them into your HTML for you in a Svelte file. So it's like,

Wow. Cool. That's awesome. I just hit my first thing where I was like, I'm in an HTML file and I do, I type h one, and then it's like, did you want to do PHP echo hello world? And I was that's I'm not in a PHP file, first of all.

But that's probably something. Another thing I should say, I mentioned this in a couple episodes ago, is that I can, go into any of the courses that I've released, And I noticed that it will autocomplete it with the course code because there's been thousands of people that have taken my courses and put the code on GitHub.

It does a really good job at both auto completing the the comments that we write in the course, which is great because you don't have to pause a video and write the comment out, As well as auto completing the code that we write in the course. So that's a huge, huge benefit for me and and course creators because It will speed up that process, or if you're you want to get the syntax right or something like that, you know that, oh, that looks like the code that Wes wrote in his course. Yeah. Let's talk about some of the kind of scary things.

I posted a little YouTube video the other day about this, and there was there was quite a few comments of people being like, like, what? It. This is kind of scary as well Totally. Because, like, are we now going to be dependent on Microsoft to write code? Because I honestly think that this is going to be a bit of a competitive advantage in writing code, just from the sheer speed. It's it's not that Maybe we should address this first. I don't think that this is going to take your job. I think, like, any of the tools that we've had in the last 10 years that make us much better developers, This is another one of those, and this is going to allow us to write better and faster code, meaning that we as developers can create Bigger, better things. We can create more stuff.

So it used to be that web applications Couldn't do as much. Then we got a whole bunch of these new tools that allowed us to do a lot more.

And and what does that mean? Does that mean that we, cut out early and go sit on the beach and drink margaritas? Yes. No. It means that we we continue to make bigger applications that do stuff in the browser that We thought we could never do before, so I think that this is just going to be a tool that will excel.

Maybe at some point, it will take our jobs. I I don't really know. Yeah. Maybe at some point, it will take our jobs. At the end of the day, I mean, you do have to think about it is you are the person who is the genesis of the ideas And the code and all of those things, it's all coming from your brain still.

Co Copilot's not going to let you know of, like, If what you're doing is a good or a bad idea, but it's certainly going to help you get there faster, which sometimes, really, that is the barrier. Right? Sometimes you are the barrier to physically getting the code out, but you say, I know I wanna loop to do over. I wanna loop over this Code. I wanna pull out all of the IDs from this object, and I wanna put them into their own array with a map function. You know that. Yeah. You know how long that takes, And it could take, you know, 30 seconds to write, or it could take you just pressing the tab key after you've started it. And and and that really is the difference. It's not going to come up with the ideas for you. It's not going to largely come up with the syntax for you.

It it can, But you still have to know the syntax to know if it's good or bad or even the right thing. Yeah. And so you you still have to be aware of it. It's just a tool to help you Speed up and sometimes, honestly, it's a tool that can make me more accurate if I have misspelled something. I'm a I'm a, you know, misspeller. That's something that I do. So It can keep me in line in many of those sort of ways, but it is. There is a lot of, like, kind of, like, scary Bennett scary, scary components to it. Right? You are signing up to a service that is using other people's code to plug into an Artificial intelligence system to, you know, to spit out code that is now in your code base. I guess that's scary. Yeah. Behold being beholden to Microsoft like you said.

Definitely not something everybody would like. Like, what happens if you,

are somehow banned by Microsoft, and you're not able to access this type of thing. Like, is are we gonna become so dependent on this thing Where if we're without it at some point where we we can't do our jobs, you know, like it certainly could be a crutch, in that use case. But I think that's, I don't know if that's something I have the answer for or not, but it's definitely something Like, could could GitHub start charging for this? You know? And now there's a huge, that was one of the comments. It's like, is there gonna be a A bigger gap between the people who can afford to buy this thing and the people that can't. And then all of a sudden, those who can spend $200 a month on this thing are now 3 times faster than the people, and then that widens the gap in in that type of thing. It's certainly I don't wanna, like, rub off any of these concerns as they certainly are valid concerns. But at the same in the same breath, I'm Super excited about this type of thing. Right.

Whether to say it's a slippery slope is is, like, really hard to say right now in 2021.

But right now, it is fancy autocomplete. Right? It's nothing more than fancy autocomplete.

So there is there is a lot of those questions. You know, I sincerely hope This does not become like a have and have nots, you know, gap widening or anything like that where some people have access to it and others don't. Like, if this is truly a tool like that, everybody should get access to it and everybody, you know, should be able to gain that advantage if there is one to gain there. So, Yeah. It's there is definitely some some, you know, some future kind of concerns that you you wanna kinda keep in check, but does that Does that affect how we use this thing today? Yeah. It could. Definitely.

I I should also say it's it's really handy for writing types. It. So, if you already have an object, and you've you're done now and you want it, it will automatically scaffold out the types for you, which is Amazing because I have a GitHub or I have a Versus code extension that sort of does that already for you, And it's kind of kind of clunky to use, and now this is just kinda does it for you.

One thing I should say, though, is it's not really, like, syntax aware. It's kind of type aware. I've I've mentioned on that. But, it will often autocomplete, like a bracket that hasn't CS. Is not yet closing, and I'm used to my editor. Whenever I open up a quote or a curly bracket or a parenthesis, anything like that, it will automatically close that type of thing. I hate being in the state Where something's been open but not closed. Mhmm. And it doesn't seem to to do that for you. And also, if you're in the middle of a line of code, It's not gonna suggest anything for you. So iPad in the in the coming years, it will get much better at being syntax aware, it. Especially in languages like TypeScript, where it knows so much about your code already.

Yeah. I agree. And I I've had really good results with it with type there's the a TypeScript stuff. Just like I was saying with that, like, Enum where I'd written a TypeScript Enum, and it was able to realize that I wanted a if else For each of those things in that is just yeah. That that right there is that that warms my heart. That makes me feel good.

What is this note that you have here under gripes? My gripe was that it's not really syntax aware. Yeah. My my gripe is that it's it's occasionally a loose cannon.

You're you're out of control, Copilot. You're off your phone. Yeah.

I'll, like, type something, and then Copilot would be like, it. Hey. Is this, like, 40 line completion of, like, totally irrelevant code, what you want? Like, no. It's not. I have to hit escape.

And and that could be obnoxious too if you're, like, teaching something because Copilot will be like, can I help? And you'll be like, yeah, no. You're not helping. Go away. You're not helping right now.

Yeah. I haven't had it on any, a video yet, and I'm unsure if I will have it on during, tutorial. I don't think so because I don't want to just be the guy that's just like, alright. Sit back and tab along, friends. I've been getting released in the escape key a lot because it, like, It'll pop up and you wanna get rid of it, and it's, like, you're crazy there. Right? Oh, one other thing before we we finish this off is I was converting a bunch of code from parcel 1 to parcel 2.

And my parcel 1 had I I have, like, I don't know, 15 different CSS files in my CLI script.

And I was converting that to parcel 2 has this concept of targets, which is like a config file, and it detected I did one and, like, I I converted, like, account dot c a style to account dot CSS. I hit comma, And it said, oh, I see what you did there. You took one thing out of this list of 11 things in a bash script, And you're converting it to JSON, and it just auto completed the rest of them. I was, like, no way. Jeez. So it's it's so good at Pattern finding in that case, even from from 1 language bash to another JSON. Wild. It's it's it's occasionally like,

Wow. This is wild. There there are some definitely wow moments.

So check it out. I I think you can, it's not publicly accessible yet, but from everybody on Twitter, they say sign up, and the next day, you'll get an invite. So check it out, copilot. Github.com.

Anything else to add? No. Yeah. Give it give it a try. I think it's really, really worth your time to try.

I think you'll be surprised It's not perfect. It's not always going to do everything for you, but I think there's genuine moments of excitement and in shock when it it does look the perfect thing for you at the perfect time and saves you a whole bunch of time. So, give it a try. I I'm a big fan. I really hope that this audio is not used in a documentary 10 years down the road where if the downfall of Humanity. What I really hope here, Wes, is that this audio isn't used in an AI generated, anything. We are just like copilot. It's like, We'll make a podcast for you just by taking clips of other podcasters talking. That's a great idea. Yep. Alright. Let's wrap it up. We'll catch you on Wednesday.

Us. Peace.

Head on over to syntax.fm for a full archive of all of our shows, And don't forget to subscribe in your podcast player or drop a review if you like this show.