Higher Coding Standards through LLM's

I’m really excited about the possibilities to enhance code quality through language models. For example, take this simple frontend HTML code snippet, can you spot what’s wrong with it?

<div class="card">
  <div class="card-header">
    <h3>Featured Article</h3>
  </div>
  <div class="card-body">
    <p>Check out our latest insights below:</p>
    <button class="btn btn-primary">
      Read More
      <a href="https://example.com/full-article" class="inner-link">Full article here</a>
    </button>
  </div>
  <div class="card-footer">
    <a href="https://example.com/articles" class="more-link">View all articles</a>
  </div>
</div>

If you’re a trained frontend developer - you might have spotted that the issue above is with the link element inside the button element. I’ve highlighted the issue below:

<div class="card">
  <div class="card-header">
    <h3>Featured Article</h3>
  </div>
  <div class="card-body">
    <p>Check out our latest insights below:</p>
    <button class="btn btn-primary">
      Read More
      <a href="https://example.com/full-article" class="inner-link">Full article here</a>
    </button>
  </div>
  <div class="card-footer">
    <a href="https://example.com/articles" class="more-link">View all articles</a>
  </div>
</div> 

While your frontend code will build successfully, you won’t see linting errors/warnings, and it may even look correct in the browser, you’re not supposed to have a link inside of a button. You’re also not supposed to have a link inside of a link either.

Why are you not supposed to do this?

• Accessibility:
  Screen readers become confused when multiple interactive elements are nested, breaking the user's ability to reliably navigate content.

• User Experience:
  Clicking on the nested link inside a button may lead to unpredictable navigation, such as activating both links simultaneously or triggering unwanted side-effects.

• Browser Compatibility:
  Browsers interpret nested interactive elements differently, causing inconsistent behaviors across Chrome, Safari, Firefox, or mobile browsers.

• SEO and Validation Issues:
  This invalid markup violates HTML standards, potentially harming SEO rankings due to poor structural integrity.

I will also add under modern frontend frameworks you might get strange event propagation errors when you click incorrrectly, where the event might propagate up or emit up to parent components and trigger event handlers or extra network calls when they shouldn’t.

The resolution in the above example is to convert the parent button component into a simple div, but make the “Read More” into a link which is clickable and expand its clickable area to fit the entire div (so that we restore the button-like functionality). The “Full article here” link above can retain its existing features.

This is exactly the kind of situation the typical code review process may miss. It would be easy for other developers not to know about this bad practice, it would be easy for a dev lead to miss or forget to check for it, and the code may appear to be working under everyone’s nose the whole time!

However, this is a great example of the objectivity and rigour a language model could bring. Imagine having an LLM double check all code when it is raised for review, find tricky bad practices like this, educate developers, and even suggest remediation steps. Github copilot is currently working on new code review features but I can imagine something much bigger.

For the first time, we can focus on not just writing code and shipping features, but establishing formal standards and best practices making sure our code meets a higher standards experience. Software Architects could create a proprietary, internal standard for code quality and ensure it is being enforced to ensure clean, simple, and maintainable code. AI could double check our work like a hawk and help us build more robust systems. I find all of this to be a really exciting prospect as a developer.