How developers code, is changing. We now have amazing ‘assistants’ in the form of AI models, able to generate code quickly and easily. But how good are they really? I’ve been playing around with OpenAI’s ChatGPT 4 quite a bit lately. But on receiving an invitation, I’ve now given Google’s Bard a whirl. It’s pretty cool as well, but is it as good? To find out I set a couple of quick challenges.

 

Challenge 1: Converting jQuery to Native JS:

Something I’ve been doing a bit lately is swapping out jQuery code with native JS. Modern browsers are now pretty standardised and the need for jQuery as a bridge is less of a thing. Also Web Core Vitals are keen to reduce any unnecessary code ‘bloat’, so libraries like jQuery become a bit of a ‘page blocking resource’. So my first task was to regenerate the following basic jQuery function to native JS:

Me: “Please can you convert the following Jquery in native Javascript:”


function scrollWin(element_id,speed){
	$('html,body').animate({
		scrollTop: $("#"+element_id).offset().top
	}, speed);
}

 

Bard: “Sure, here is the native JavaScript code for the scrollWin function:”


function scrollWin(element_id, speed) {
  // Get the element by ID
  const element = document.getElementById(element_id);

  // Get the top position of the element
  const topPosition = element.offsetTop;

  // Scroll the window to the top position of the element
  window.scrollTo({
    top: topPosition,
    behavior: 'smooth',
  });
}

 

Bard: “This code is functionally equivalent to the jQuery code, but it is written in native JavaScript.”

—-

Interestingly the first time I tried this when the function was part of a wider code block it gave me back jQuery without converting it, so I needed to be able to recognise that and flag it up to Bard to try again. But this time is seems to have nailed it. It also shows me various other ‘drafts’ so I can see what other solutions might be suitable, which is a nice feature. I then asked Bard to create me a test page to demonstrate this function and it did, and it works, but as the page doesn’t really need to scroll given the short content, I had to add some extra dummy text for it to actually ‘do’ anything.

Now lets give ChatGPT 4 a try:

ChatGPT 4: “Sure, here’s the jQuery code you provided converted to native JavaScript:”


function scrollWin(element_id, speed) {
  const targetElement = document.getElementById(element_id);
  const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;

  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const startTime = performance.now();

  function animation(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / speed, 1);
    const newPosition = startPosition + (distance * progress);
    window.scrollTo(0, newPosition);

    if (progress < 1) {
      requestAnimationFrame(animation);
    }
  }

  requestAnimationFrame(animation);
}

 

ChatGPT 4: “This code uses the native JavaScript getBoundingClientRect method to calculate the target position, and the window.pageYOffset property to get the current scroll position. The performance.now() function is used to get the current time for smooth scrolling. The requestAnimationFrame function is used to animate the scrolling by updating the scroll position during the animation.”

—-

I then asked for a demo page and was given this. It’s certainly cooler looking and works straight off the bat without any input from me. I also like how it explains it’s rationale. They both ultimately work and I’m actually not sure which I prefer. For simplicity, probably Bards attempt, but I guess it depends to some extent on the application.

 

Challenge 2: Writing new Javascript code for tabbed content

Something I’ve found myself using jQuery or Bootstrap more specifically for in the past is tabbed content, so rather than rely on these libraries I thought I’d see if AI can quickly generate me a native JS alternative. These are the results:

Me: “Please can you write me some javascript/html/css which has tabs for content?”

Bard: “Sure, here is the HTML, CSS, and JavaScript code that you requested:”


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabs</title>
</head>
<body>
  <h1>Tabs</h1>
  <ul class="tabs">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1">
      <h2>Tab 1 Content</h2>
      <p>This is the content for tab 1.</p>
    </div>
    <div id="tab-2">
      <h2>Tab 2 Content</h2>
      <p>This is the content for tab 2.</p>
    </div>
    <div id="tab-3">
      <h2>Tab 3 Content</h2>
      <p>This is the content for tab 3.</p>
    </div>
  </div>
  <script>
    function showTab(tabId) {
      const tabContent = document.getElementById(tabId);
      const tabs = document.querySelectorAll('.tabs li');
      const tabLinks = document.querySelectorAll('.tabs a');
      for (let i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active');
        tabLinks[i].classList.remove('active');
      }
      tabId = '#' + tabId;
      tabContent.style.display = 'block';
      tabId = tabId.substring(1);
      tabs[tabs.indexOf(document.getElementById(tabId))].classList.add('active');
      tabLinks[tabs.indexOf(document.getElementById(tabId))].classList.add('active');
    }
  </script>
</body>
</html>

 

This code is a good start but ultimately doesn’t work. There’s also no CSS code. So I kept going back and forth with Bard sharing error codes and asking for revisions and it kept coming back with perfect seeming solutions, but in the end I just gave up as it didn’t work. So that’s a fail.

ChatGPT 4: “Sure, I can provide you a simple example of an HTML page with tabs using JavaScript, HTML, and CSS. Copy the code below and save it as an .html file, then open it in your web browser to see the tabs in action.”


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabbed Content</title>
  <style>
    .tab-container {
      display: flex;
      justify-content: flex-start;
    }
    .tab {
      padding: 10px;
      cursor: pointer;
      background-color: lightgray;
      border: 1px solid darkgray;
      border-bottom: none;
      margin-right: 5px;
    }
    .tab:hover {
      background-color: darkgray;
    }
    .content {
      display: none;
      padding: 10px;
      border: 1px solid darkgray;
    }
    .active {
      display: block;
    }
    .active-tab {
      background-color: white;
    }
  </style>
</head>
<body>
  <div class="tab-container">
    <div class="tab active-tab" data-target="content1">Tab 1</div>
    <div class="tab" data-target="content2">Tab 2</div>
    <div class="tab" data-target="content3">Tab 3</div>
  </div>

  <div id="content1" class="content active">
    <h2>Content 1</h2>
    <p>This is the content for Tab 1.</p>
  </div>
  <div id="content2" class="content">
    <h2>Content 2</h2>
    <p>This is the content for Tab 2.</p>
  </div>
  <div id="content3" class="content">
    <h2>Content 3</h2>
    <p>This is the content for Tab 3.</p>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab');
    const contents = document.querySelectorAll('.content');

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        tabs.forEach(t => t.classList.remove('active-tab'));
        tab.classList.add('active-tab');
        contents.forEach(content => content.classList.remove('active'));
        const targetContent = document.getElementById(tab.dataset.target);
        targetContent.classList.add('active');
      });
    });
  </script>
</body>
</html>

 

Wow, nailed it!

 

Conclusion

So this was just a tiny little test and it’s early days in the world of AI generated code, but it would seem that currently ChatGPT4 is better (atleast in my tiny tests) than Bard. This will probably all change at some point and it also probably depends on the task in hand. Both tools seem to be really handy but you still need to know what you’re doing to make use of them, which is a little bit of a relief in some ways. It should however make creating new things online much quicker, easier and hopefully less mundane in the future now we have these awesome coding assistants to help us.