Code Writing Code — AI’s Role in the Website Development Process

Web developers reviewing HTML code on computer screen

Share this post

LinkedIn
Facebook
Twitter

Artificial intelligence is changing the digital world. Generative AI tools make content creation, image generation and other complex operations possible based on simple instructions. Code generation for website development is one example of a place where AI is already making a sizable impact.

Developing code can be very complex, and subtle differences in the way code is written can impact the performance of a webpage or a software application. Skilled developers, however, can recognize the most efficient coding approach based on considerations that include the client’s specific needs, data security and system capabilities, among many others. How can AI tools like Amazon CodeWhisperer, Tabnine, Sourcegraph Cody and GitHub Copilot make the coding process easier? Can generative AI write code? Could a marketer code an entire website just with generative AI? What are the security implications of using these tools?

In this, the first in a series of three generative AI blog posts, our Comprise web development experts examined how AI tools are being applied at different stages of the website development process. In this post, we’re sampling GitHub Copilot to see how it makes writing code more efficient. In future posts, our team will explore how AI tools transform content creation and website design.

WAS MY WEBSITE USED TO TRAIN AI?

Coding with CoPilot

After installing the GitHub Copilot extension, I created a simple challenge to test Copilot’s effectiveness. This challenge aimed to develop code that performs two actions on this page:

  1. Rearrange the items in each list in alphabetical order.
  2. Change the color of all dollar sign icons to green.
Front-end view of website lists that the code will modify

To prompt the AI, I wrote a comment describing the actions I wanted the code to perform. Copilot then suggested a code snippet to accept or ignore.

Screenshot showing a snippet of code generated by GitHub Copilot and the prompt

GitHub Copilot understood my request and translated it into functional code. Aside from a few minor syntax fixes, I did not need to drastically modify the output. Here are the results on the front end:

Front-end view of website lists with the changes applied by the code

3 Key Considerations When Using AI Coding Tools

1. Always Evaluate Your Output

When I tested the AI with variations of the same prompt, I noticed that the outputs also changed. In most cases, the code utilized similar logic but chose different methods.

Prompt 1 - More efficient output

“For each UL, select all LIs and rearrange them in alphabetical order. If the LI element has a child element with the ‘fa-dollar-sign’ class, change the color of the i element to green.”

Prompt 2 - Less efficient output

“For each list, rearrange the items in alphabetical order and change the color of the icon to green if the list item has a child element with the ‘fa-dollar-sign’ class.”

Screenshot showing code generated by Prompt 1 PROMPT 1
Screenshot showing code generated by Prompt 2 PROMPT 2

When writing code, several ways exist to achieve the same results. However, certain methods are more efficient or logical than others. While the code generated by each prompt successfully executes the desired functionality, the code generated by Prompt 1 is more efficient. The code generated by Prompt 2 collects every list item and manually checks for the dollar sign class. In contrast, Prompt 1’s code only selects instances of the dollar sign class without checking every list item. Prompt 2 also generated annotations and extra spaces with its output. This formatting can make the code easier to read and understand, but it also makes the file size larger. Inefficiencies like these can quickly add up, leading to slower loading times and inconsistent performance. Consequently, human developers are still required to identify the most efficient approach for the task at hand — and to evaluate the output to ensure that the code is streamlined and effective.

2. Protect Your Sensitive Data

Confidentiality is also important to consider when using tools like Copilot. AI coding tools collect and analyze usage data and public code bases to improve their accuracy. In fact, some organizations have banned their developers from leveraging AI-powered tools to help them code due to privacy concerns. Consequently, human web developers should never use AI coding tools when developing sensitive or proprietary code or handling sensitive data.

3. Leave AI Coding Tools to the Experts

While this test only assessed one of the generative AI coding tools out there, this example shows how AI could be a powerful problem-solving tool but that is most effective when used by an experienced developer to authoritatively validate the output code. Doyle Albee found some of the same results and limitations when he tested ChatGPT’s news writing ability. In short, Comprise is finding AI can be a great helper, but not quite ready to replace skilled humans.

The Comprise Perspective on AI Coding Tools

Generative AI coding tools can be helpful during the development process. However, we feel that generative AI is not a replacement for a developer’s unique experience and knowledge. At Comprise, we emphasize the following values when using generative AI during the development process:

  • Diversity: AI tools should not replace diverse experiences, insight or engagement.
  • Transparency: We will disclose if our team heavily leans on generative AI tools throughout the development process.
  • Privacy: Our team doesn’t use proprietary client information or new product details in generative AI tools for any reason.

We also work with all of our website clients to determine whether they want to accept generative AI scraping their sites for content. To learn more about generative AI web crawling — and whether your site was used to train AI — download our white paper.

And stay tuned to the Comprise blog for the following posts in this series!

Recent Posts