
Developing a website with a Copilot
How I used GitHub Copilot to assist in the creation of a new website from scratch.
I started developing a new website project using HTML 5, SCSS, and JavaScript. It is designed to be hosted in Amazon Web Services using the following services: Lambda, API Gateway, DynamoDB, S3, CloudFront, Certificate Manager, Route53, EventBridge, and Simple Notification Service.
It has been about five years since I used my programming skills to build a project. But I was going on a long trip and needed a project to fill the downtime. I also challenged myself to use current tools and build something fast, small, and inexpensive. I soon found myself using AWS for hosting the site and managing the backend. The cost so far will be a modest $0.53 a month to operate, plus the yearly cost for the domain name.
This project will be a personal blog site for myself. For years, I have wanted to share my personal projects and write down some history of the many products I have designed and developed over 40 years.
I was concerned about getting up to speed with current technology. I could see myself going into Google Hell, trying to search for answers to the simplest of questions. I wished I had a coworker sitting next to me so that I could ask a quick question or get some advice on the strategy for the thing I was working on at that moment. Or help figure out why I am getting this error message and how to solve it. The process could have been more appealing.
In steps, GitHub Copilot from Microsoft to ease my concerns. Copilot is an extension inside VS Code, a popular and free code editor providing two interfaces. The first interface is a "chat" window where you can ask a question relating to software development. The second is a pair programmer that watches the editor's text area where you are working, and inserts suggested code suggestions as you work.
Copilot Chat
The Copilot chat experience is like conversing with a coworker who can see your code and has much experience ready. You can ask it simple and complex questions relating to what you are working on. For example, you can highlight some code that was not working and tell Copilot to check:
location.reload;
A moment later, it states that it appears I was trying to call a function "reload" which will reload the current webpage based on the current location. But, this syntax requires "()" after the reload function.
location.reload();
At the time, this line of code was not generating an error, and all I knew was it was not working. Every programmer has stared at a line of code and can't see what is wrong. Hence, you ask a friend for a second pair of eyes to see what you could not see yourself.
Here are some of the questions I asked and got back great content.
- How do I install and use the UUID package to create a unique ID?
- Update the SaveArticle function and add error handling and HTTP response with CORS support.
- Should I use Cookie or Local Storage?
- I am getting the following error message: what is causing this?
- Look over this code. Do you have any suggestions?
I had JavaScript, CSS, HTML, and Amazon Web Services questions, which Copilot answered well. But a couple of things surprised me. One was that when I was working on a Popup on a webpage, Copilot suggested using "<dialog>" instead of what I was doing. I never heard of "<dialog>" before, so I asked it to elaborate. It explained that it was recently added to the HTML5 specification. It gave me a complete description with code examples. It even cautioned me that using this feature might only be supported by some browsers and that I should check before use. Given that the knowledge base that Copilot is based on is a few years old. It did not know that this feature was commonplace today in 97% of all browsers.
This raises a concern; things might have changed since CoPilot was trained. Another problematic interaction was related to using the Amazon Web Services software development kit (AWS SDK). The first time I asked it to create an example interface for a Lambda function to save a record in DynamoDB, it was correct, but it used SDK 2.0 instead of the most current SDK 3.0. I figured out that if I added "using AWS SDK 3.0," I would get the answer I was looking for, and I did.
Copilot Pair Programmer
The other primary way to use Copilot is in the programming editor. When turned on, it will put dim or ghost text in the window for you to accept. It is very good at figuring out what you are doing or getting ready to do and fill in the gap. The easiest way to see this is by entering a comment telling Copilot what you are about to write and seeing what happens. In this example, I create a string with some tags, then write a comment, and then hit return; less than a second later, it inserts the dim text with code to parse that string.
I forgot to sort the array, so I updated the comment and got an updated line.
This is a simple example, but you can get really complicated suggestions.
Cost
GitHub Copilot is available for $100/year and has a 30-day trial.
Epilogue
Give GitHub Copilot a try. It has saved me many hours of Googling for the correct information.