Coding with Jesse

How I use GitHub Copilot to be more productive

March 1st, 2022

GitHub Copilot is a VS Code extension that brings machine learning into your development environment. It will upload snippets of your code to Microsoft's servers, and send back a list of suggestions of what it predicts will come next.

Some people have wondered whether our jobs as developers are doomed, now that machine learning can write code for us. Will computers be able to write all the code in the future without needing developers involved? I really don't think this will happen, but I do think our jobs will get a bit easier with help from tools like Copilot.

"Copilot" is a really good name for the tool, because although it won't write all your code for you anytime soon, it makes very helpful suggestions most of the time. Often, you'll have to make some tweaks to the suggestion to get it working correctly. You're still the pilot here, but Copilot is sitting beside you actively trying to make your life easier.

When I started using Copilot, I thought it was super creepy. I could write comments and Copilot would suggest code that does what the comment says. I'd never seen anything like this before. I also had mixed feelings about using code that seemed like it might be plagiarised directly from some GitHub project.

Three months later, it has become fully integrated into my development workflow. When I'm coding somewhere without Internet access, I'll find myself briefly pausing to see what Copilot suggests, only to realise that I'm on my own.

Generally, I write code the way I used to before, and GitHub Copilot will suggest just a few lines of code for me at a time. Much of the time, the suggestion is almost exactly what I would have typed anyway.

Even though I've been coding professionally for decades, Copilot has made me even more productive. Here are a few ways that Copilot has changed the way I work.

Don't repeat yourself, let Copilot do it for you

Probably the most reliable use of Copilot is to set up some kind of pattern and allow Copilot to repeat the pattern for you.

For example, I never have to type out something like a list of months. I can just write a descriptive variable name, and Copilot will suggest an array for me:

const MONTHS = // ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

If you want a different format of month, you just give it an example and Copilot will suggest the rest:

const MONTHS = ['Jan.', // 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'];

Notice how "May" doesn't even have a period after it? Copilot is surprisingly good at this sort of autocomplete.

In other cases, where your code has a repetitive nature to it, but you maybe don't want to over-complicate things by writing a loop, Copilot can save you the hassle. For example, if you're creating an object with property names, and the values use the name in some kind of pattern, give an initial example, Copilot will do the rest for you:

return {
    age: model.getAge(),
    address: // model.getAddress(),

With this sort of pattern, I go one at a time, pausing briefly after each property name and hitting TAB to autocomplete once Copilot figures it out. It saves me some typing and the inevitable typos too.

It finishes my sentences

VS Code is already quite good at using Intellisense to make useful suggestions, or to close parentheses and brackets for me. Copilot takes that to the next level, and often suggests the whole rest of the line for me. Sometimes it's wrong, but often it's exactly right.

For example, if I'm writing some filter statement, Copilot will make a good guess as to how the rest of it will look:

const activeItems = items.filter( // item => item.active);

Good guess! But if that's not how I named my variable, I might keep typing to give it more context:

const activeItems = items.filter(item => item.status // === 'active');

The more context Copilot has, the more likely it will guess correctly. At some point, Copilot generally figures out exactly what I was about to type, and when it does I can just hit TAB and move on to the next line. It's trying to read my mind, and when it gets it right, that means fewer keystrokes and probably fewer typos too.

Even if it only ends up suggesting a couple closing parentheses and a semicolon, I'm happy for the help.

Naming things is easier

Phil Karlton famously said that the two hardest problems in computer science are cache invalidation and naming things. Copilot makes at least one of these a bit easier.

You saw in the previous example, that when I was filtering on an array of items, Copilot suggested item as the argument in the filter function. This is a simple example of where Copilot gets things right almost every time.

Usually I'm not too picky about function or variable names, so if Copilot comes up with something half-decent, I'll go with it. I also think that it's probably well informed by what many others have chosen before, and I think familiar variable names are probably better names anyway.

For example, if I'm about to write a SQL query, Copilot will make up the table and column names for me as good or better than I will:

async function addBook(params) {
    await query( // `INSERT INTO books (title, author, isbn, description, image, price, stock) VALUES ('${params.title}', '${params.author}', '${params.isbn}', '${params.description}', '${params.image}', '${params.price}', '${params.stock}')`);

Wow, it did that with no context other than "book". Obviously there must be a bunch of open source code or demos that work with books in a database. Those might not be the names I end up choosing, and I probably won't need that exact list of columns, but often they'll be pretty good, and might make me think of something I'd otherwise miss. More than once, Copilot has suggested better names than I had planned on using.

But notice that there's something really dangerous in this suggestion! The values are being inserted into the database without being escaped! This is a security flaw, and a major reason why you still need to be careful and knowledgeable about the code that Copilot is suggesting. It won't always be secure, or even good. You still need to be the pilot here. Same goes with any code you find online.

I don't need Stack Overflow as often

Speaking of finding code online, I rarely have to actively go out and search on Stack Overflow or GitHub anymore. If I'm not sure how to do something, I'll use a descriptive function name or write a comment that describes what I'm trying to do. Most of the time, Copilot will make a useful suggestion. More than once, I've learned something new from the suggested code.

function getRandomNumber(min, max) {
    // return Math.floor(Math.random() * (max - min + 1)) + min;

I think of Copilot as searching through publicly available source code for me, to find examples where someone else has done the exact same thing before. I really don't want to accidentally plagiarise a large block of code from GitHub without knowing where it came from. But I will let Copilot suggest a line or two of code for me, that does something a bit tricky but fundamental, where the code would have been essentially identical had I worked it out on my own.

It knows how I intended to use that new variable

When I'm writing a function and declare a variable, Copilot will often have a good idea about how I intended to use that variable. Often, the suggestion here will be bang on.

function processItems(items) {
    const activeItems = 0;

    for (const item of items) {
        // if (item.active) {
        //     activeItems++;
        // }

Sometimes, I'll forget about a variable I'd declared earlier, so Copilot's suggestion ends up being a friendly reminder to use the variable. Even if the suggestion is wrong, the reminder ends up being useful.

Test-driven Copilot Development

The most surprising thing that Copilot has done, was suggest for me all the code I needed to make my tests pass, even though the tests were in a different file! I didn't know Copilot was capable of this, so it was a big surprise when it happened.

Let's say this was your test file, model.test.js:

import Model from './model.js';
import { deepEqual } from 'assert';

it('should return an empty array by default', () => {
    const model = new Model();

    deepEqual(model.get(), []);
});

it('should double the numbers provided', () => {
    const model = new Model();

    model.add(7);

    deepEqual(model.get(), [14]);
});

Open up a blank new file model.js, type export default and Copilot will automatically suggest the rest:

export default // class Model {
    // constructor() {
    //    this.data = [];
    // }

    // get() {
    //    return this.data;
    // }

    // add(number) {
    //     this.data.push(number * 2);
    // }
// }

Tests pass without writing any code! This brings Test-Driven Development to a whole new level, where you can focus on writing good tests, and Copilot will write the code that passes the tests! It doesn't always work this well, but when it does, you can't help but giggle in delight.

Conclusion

When I first tried Copilot, I thought it was super creepy. Now, I see Copilot as my delightful junior assistant, the two of us collaborating on writing code. The more predictable you can be, by using descriptive function names and variables, the more likely Copilot will correctly predict what you're trying to do.

As I write this, Copilot is still in Technical Preview, and so you have to apply to be on the wait list. I only had to wait a day when I applied, but you may have to wait longer or might not be approved at all. One day, Copilot will likely cost money to use. I think I'll probably be willing to pay for it, because it does save me time and energy, ultimately making my services more valuable.

I hope you get a chance to try out Copilot for yourself. It's fun to use, and can even make you a more productive programmer too.

How to add gravatars to your web page or blog

August 23rd, 2006

Last night, I added gravatars to the comments on this site. The best blog post to see them is Blog Tipping.

Gravatars are globally recognized avatars. It's a clever way to let people upload a little picture that goes beside their comments. This way, people only have to add them once (at the Gravatar website) and they automatically work across all web sites implementing them. They use the MD5 hash of your email address as an id, so you only need to put in the same email address when you write comments, and your gravatar will come.

Implementation is very easy. You don't need to make any HTTP request on the server or anything. You only need to add an image that points at the gravatar URL, with some optional parameters, and the browsers of people visiting your site will download the images from gravatar.com.

The only required parameter is gravatar_id, the md5 hash of the email address. Every programming language has a way of finding an MD5 hash. PHP probably has the most simple example:

<img src="http://www.gravatar.com/avatar.php?gravatar_id="/>

There are also optional parameters you can use. rating lets you make sure there are no pornographic or mature images on your site. size lets you set the width/height to something other than 80px. default lets you set the URL of a default image, in case you want to display something for people without a gravatar (a 1x1 invisible image is the default). border is supposed to let you set the colour of a 1px border on the image, though I wasn't able to get this working. So the output of a complex example might look like this:

<img src="http://www.gravatar.com/avatar.php?size=50&border=000&gravatar_id=eb22390416c3b62025dc9ad2120a8ade"/>

It's worth noting that adding gravatars can be a css and design challenge. You don't know whether the image will be a real gravatar or just a 1x1 invisible image. If you add margins or padding to the gravatar, they will end up on the invisible pixel as well, and this can look weird. I solved it by indenting all comments 60px to allow space for a 50px image. If the image isn't there, the comment is just indented anyway. You can also solve this by setting a default image to a "No gravatar" image.

Gravatars can really be implemented anywhere you know an email address and may want to show an image. There is a Thunderbird add-on that lets you see Gravatars while you're reading emails.

For more details, or to see how to implement gravatars in other languages and blog publishing software, the Gravatar web site has a detailed implementation guide. If you just want to upload your own gravatar, go sign up.