The developers at Click Rain value many of Copilot's recommendations. Nonetheless, we consistently refine our code to ensure it is efficient, safe, and user-friendly.
GitHub Copilot is an artificial intelligence (AI) tool created for developers. It integrates with several code editors, like VS Code, and can provide suggestions to developers while they work. This tool uses information from public repositories, meaning anyone can access it. Specific programming languages with less representation in public repositories may have fewer suggestions than commonly used ones.
According to a large-scale survey by GitHub, 60-75% of Copilot users said they "feel more fulfilled, less frustrated, and able to focus on more satisfying work." Developers also reported that GitHub Copilot helped them stay in the flow (73%) and preserve mental effort during repetitive tasks (87%). These are some compelling statistics!
Every developer at Click Rain has Copilot installed in their code editor. We use the tool in several ways while working on projects. Some functions we've identified and tested include real-time suggestions and asking questions.
Integrating code into Craft, our content management system (CMS) of choice, is an everyday use case for us. While typing, Copilot tries to write the code it thinks we're looking for. The tool bases its suggestions on publicly available code and standard variable names used across publicly available repositories.
In this case, Copilot correctly infers that we'd like to add a title, close the </h2> tag, and then include a content variable. However, it does not close that ending tag with }}. The tool creates efficiency by adding all this code but often does not provide full-featured code that will function. A developer must always correct incomplete code, fix bugs, and verify that everything works.
Next is an example of where this code completion only sometimes works. Copilot infers what's intended to happen when we make a new line. In this case, it is entirely off. The tool does not use the classes and best practices used throughout the project but instead uses ones from outside projects.
Our development team found that Copilot can most accurately suggest code for Twig and JavaScript languages. But, the tool is not as helpful in cascading style sheets (CSS). Since every website has a custom look, we assume CSS is not a language Copilot can easily infer suggestions for.
Although Copilot does become more accurate the farther along we are in a project. It may suggest a typical style attribute used throughout the site, like a curved border or shadow size. As AI evolves, we'll continue to evaluate the accuracy of Copilot's real-time suggestions and answers.
Users can ask Copilot questions, much like ChatGPT. Submitting an inquiry will give you a general answer about how a specific code block could look. A developer can then grab and alter this code to suit their needs.
We can also use the tool to find bugs in code. For example, we misspelled a variable name and asked what was wrong. It recognized that "image" was misspelled and suggested how to fix it. This is a straightforward example, but it can help with more sophisticated code.
![GitHub Copilot chat showing a user reporting a bug. Copilot identifies a typo in a Liquid template: 'block.imae[raw]' should be 'block.image[raw]'. The corrected code snippet displays a div with class 'block-example', containing a title, content, and an image, all using Liquid syntax for dynamic content.](https://d3lqwvg0aszf3u.cloudfront.net/2021/general-uploads/Blog/_50x32_fit_center-center_100_none/282749/Blog-Image-4-1280x514.webp)
Additionally, Copilot can help developers understand code that someone else has written. Although this is a simple example, it can go line by line and explain what each item is for and what it likely does.
With the ability to receive real-time suggestions and ask questions, developers can improve their code writing and troubleshooting.
As noted, there are pitfalls in using Copilot to code, including accuracy and code quality. Copilot is trained using public repositories, which means the code quality can vary greatly. When we train an AI tool with poor-quality code, its output will need improvement. Code in public repositories may be of decent quality, but developers should evaluate it.
A developer needs to understand what the code they add to their project does. When copying and pasting code, it is easy to neglect quality-checking and testing. Minimal observation could introduce bugs, complicate a project, or even introduce security vulnerabilities. Our team is adamant about the quality of our code and its accessibility.
Finally, we want to touch on website accessibility. Unfortunately, many sites today still have hundreds of accessibility errors. Copilot can reference these sites with public repositories. That means the output can be inaccessible, worsening sites and user experiences.
TetraLogical, a company committed to website accessibility, wrote about using AI in code. They inquired about accessible code and Web Content Accessibility Guidelines (WCAG) adherence in three AI tools, but none could correct the accessibility issue. Even before AI, automated tools to test accessibility could not find every issue on a website. So, it is crucial to test sites manually for accessibility issues.
The developers at Click Rain enjoy using Copilot and appreciate many of its suggestions. However, we are constantly revising our code to be performant, secure, and accessible. If you want to learn more about AI in development, connect with our team to talk shop.
Kaitlyn (M.B.A., Dakota State University) plays a pivotal role on the Development team at Click Rain. From CMS builds to standard front-end development, she helps deliver high-performance websites for our clients.
Read more »
Monthly digital marketing insights sent straight to your inbox, on us.