I signed up for Github copilot a while ago and have already forgotten about it. Today, however, I got an email saying technical preview is available! Which is really awesome!
I haven’t started yet and I’m writing as I go along.
Getting started
I’m kind of coming in to this with low expectations, trying not to get high hopes.. Is this just a fancy auto-complete? Or Am I going to get mind blown??
Here we go…
So after clicking the button in my email I got to a github page (well makes sense) and I have picked this getting started with Visual Studio guide.
So the installation is using a plugin, it asks to login through github (as this is a limited preview) and I have to accept some terms and conditions…..
Alright let’s see what they want..
5 seconds later…
It wants some extra telemetry.. well.. Guess evil enterprises already know me..
Ok then. we’re in!
Baby steps
Following the guide, as a first step after installation it suggests writing a function header and see a suggestion.. Here’s what it suggests to try out first:
function calculateDaysBetweenDates(begin, end) {
Here’s how it looks on my machine:
Here’s the code it came up with after I accepted the suggestion using the tab key:
function calculateDaysBetweenDates(begin, end) {
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(begin);
var secondDate = new Date(end);
return Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
}
Well, not too bad. Not sure what this functions accepts as arguments, but it’s a nice display of capabilities.
Now the guide suggests to try out other suggestions. I’m on linux so I’m supposed to us alt+[ or ] to scroll through suggestions. This however doesn’t seem to work.. I’ll try the UI way. That’s a bit inconvenient, but we’ll let it slide this time.
So for this calculation function it has two suggestions, the first one, and:
function calculateDaysBetweenDates(begin, end) {
var date1 = new Date(begin);
var date2 = new Date(end);
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
return diffDays;
}
Not very different, a bit of different style and the first uses Math.round while the second uses Math.ceil. Well, I’m not yet impressed.
Oh the shortcut keys are working for me, must’ve been me somehow.
Alrighty then… Seems like we can also choose suggestions from a list… I Kinda feel like skipping that one, but let’s do it anyway!
So, you there’s a button you can click that can open more suggestions, this is how it looks like:
Oh! And we have a winner!!!!
function calculateDaysBetweenDates(begin, end) {
// if we don't have two dates, we can't do anything
if (!begin || !end) {
return 0;
}
// get the number of days between the two dates
var days = 0;
var beginDate = new Date(begin);
var endDate = new Date(end);
while (beginDate <= endDate) {
days++;
beginDate.setDate(beginDate.getDate() + 1);
}
// return the number of days
return days;
}
Seriously? A while loop for that? Interesting if this code comes from some open source repo?
Found this
blog post:
Can’t say this is a very good suggestion by my book. To give Goose (this is how decided to name my copilot, if you’re under 30 you might not get the joke) some points, this suggestion was last on the list. Also, don’t forget that at some point this code was suggested by a human, on the big scary internet (a place you shouldn’t copy paste code from without understanding it).
Happy I didn’t skip that part.
Comment to code
Next step is code generation from a comment. Let’s see how that goes.
So the comment suggested on the guide is:
// find all images without alternate text
// and give them a red border
function process() {
This is what we got:
// find all images without alternate text
// and give them a red border
function process() {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var image = images[i];
if (image.alt == "") {
image.style.border = "3px solid red";
}
}
}
This is actually very good. Let’s see if we can challenge it with more instructions. Changed “give them a red border” to “thick red border”
// find all images without alternate text
// and give them a thick red border
function process() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];
if (img.alt == '') {
img.style.border = 'thick solid red';
}
}
}
Nice, let’s see another challenge. Changed “red” to “colorful” and added “really thick”, how will it look like now?
// find all images without alternate text
// and give them a really thick colorful border
function process() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];
if (img.alt == '') {
img.style.border = 'thick solid red';
}
}
}
Pretty much the same… Let’s try “huge random color border”
// find all images without alternate text
// and give them a huge random color border
function process() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
if (images[i].alt == '') {
images[i].style.border = '5px solid #' + Math.floor(Math.random()*16777215).toString(16);
}
}
}
Let’s have some fun
I think 5px is hardly huge, but it hit the spot with the random color!
That’s just me having fun:
This is actually pretty cool, although I don’t see any garbling:
Ok, so I decided to help Goose a little bit and generated this from a garbling function header:
function garbleSnar(snar) {
var garbled = "";
for (var i = 0; i < snar.length; i++) {
garbled += String.fromCharCode(snar.charCodeAt(i) + 1);
}
return garbled;
}
Not to bad. Then I created a class (which it also generated).
class Snar {
constructor(snar) {
this.snar = snar;
}
getSnar() {
return this.snar;
}
getGarbledSnar() {
return garbleSnar(this.snar);
}
}
Then asked it with a comment to garble the snars like before.
That’s actually really cool.
Here’s the code it came up with:
// Garble all the snars if they have a low opret score.
function garbleSnars() {
var snars = document.getElementsByClassName("snar");
for (var i = 0; i < snars.length; i++) {
var snar = snars[i];
var score = snar.getAttribute("opret-score");
if (score < 0.5) {
snar.innerHTML = garbleSnar(snar.innerHTML);
}
}
}
class Snar {
constructor(snar) {
this.snar = snar;
}
getSnar() {
return this.snar;
}
getGarbledSnar() {
return garbleSnar(this.snar);
}
}
function garbleSnar(snar) {
var garbled = "";
for (var i = 0; i < snar.length; i++) {
garbled += String.fromCharCode(snar.charCodeAt(i) + 1);
}
return garbled;
}
Trying to work on simple code
What just happened is pretty creepy I have to say.
If I have ever wondered how machines will take over the world, now I understand.
Here’s my example socket client code:
// Include Nodejs' net module.
const Net = require('net');
// The port number and hostname of the server.
const port = 8080;
const host = 'localhost';
// Create a new TCP client.
const client = new Net.Socket();
// Send a connection request to the server.
client.connect({ port: port, host: host }, function() {
// If there is no error, the server has accepted the request and created a new
// socket dedicated to us.
console.log('TCP connection established with the server.');
// The client can now send data to the server by writing to its socket.
client.write('Hello, server.');
});
// The client can also receive data from the server by reading from its socket.
client.on('data', function(chunk) {
console.log(`Data received from the server: ${chunk.toString()}.`);
// Request an end to the connection after the data has been received.
client.end();
});
client.on('end', function() {
console.log('Requested an end to the TCP connection');
});
At the end of the file I typed “//” and this jumped out:
You there Goose? Are you helping me write this blog post?!
Let’s have some more fun
OMG I’m using VS code for this…. Can it auto complete my blog post?
Seriously, guys… Was that really AI?
I’m starting to like this.
Ok, I had just literally laughed out loud. The AI have written this text with my help (I wrote the creepy part and added some spacing):
So my experience with the copilot is that it’s creepy.
And also it knows it’s name is “Goose” and it’s a bit of a “Goose” in the end.
Also, it’s a bit of a “Goose” in the beginning.
Sometimes I feel like I’m a “Goose” in the end.
And sometimes I feel like I’m a “Goose” in the beginning.
Other days I feel like I’m a “Goose” in the middle.In other words, I’m not sure if I’m a “Goose” or not. How do I know? Because I’m a “Goose” in the middle.
Closing words
I had fun today with the Github copilot and for now have concluded that this is in fact a very powerful tool. It’s definitely a whole lot more than a fancy auto complete. Of course, that was only playing around with it.
I feel like I should explore it a bit more, see if it actually helps to speed up work. Of course, you’ll be reading about it here when I do. I bet it can do wonders on an existing medium-large code base.
I’ll tell you what though, I’m not going to let it write any of my blog posts for me!
Thank you for reading!
