Blog: What do I gain by using AI? (More Posts)
AI is something that is going to become part of all of our lives. I myself have been using it more and more in my projects. In this first blog of the year, I’m going to talk a bit about this and introduce an example of how I have used it within this last week.
I think the first observation that I have is that if it is possible to code, AI can give you a solution for any problem with the Front End. The back end, I haven’t really tested out yet.
I started out testing coding with AI as most people did, with ChatGPT. And then I tried a bit of Claude. These LLMs give you code for a problem and you can put it into your text editor.
And then I came across Cursor AI.
And that is a whole different ball game. It is a text editor in the vein of Visual Studio Code that is integrated with generative AI capabilities. That means it is designed to look at your code base and come up with solutions accordingly. It’s all as if it was its own version of ChatGPT. You get your files open and show it to Cursor and it understands your codebase.
With Cursor, I can either ask a question directly from a text file or copy code to a chat and run prompts on it. I can either copy it from the chat or use a button to apply the code directly.
With text prompts and feedback from Cursor’s chatbot, I get insights about what the code does, why it is there and why it is useful… all within other contexts of my project.
I get to use it as an example to store and reuse again in other projects- without necessarily needing to call on AI.
These are all very useful things for me and my neurodivergent brain.
So to answer the question, what do I learn from AI? About as much as I do pre-AI with the ability to do more. It really is that simple.
Now, I spoke earlier about an example.
Earlier this week, a client asked me to do some work for her on the backend of a Shopify store. It took work to examine the code I was given… explore the system; its CMS and the best place to fix it and then implement those changes.
It took 3 hours on my hourly rate. I have Excel Spreadsheets to help me track that. But with the dawn of AI… I now have the tools to develop a front-end solution.
In the markup below, I have a simple interface.
In this code, we have 2 elements and several buttons that will show us an hourly rate for the user to put in, and then buttons to operate a timer in hours, minutes and seconds to count up from zero. As the timer counts up, we will see a dynamically updated rising fee based on the timer, multiplied by the hourly rate. So we can see in real time what the fee will be for work completed on an hourly rate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N9WB623MVP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N9WB623MVP');
</script>
<!-- Slick Styling -->
<link rel="stylesheet" type="text/css" href ="slick.css" />
<link rel="stylesheet" type="text/css" href ="slick-theme.css" />
<!-- Styles -->
<link rel="stylesheet" type="text/css" href ="style.css" />
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Merriweather|Odibee+Sans|Quicksand&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="favicon.png" type="image/png">
<!-- Meta Tags -->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="image" content="">
<!-- FACEBOOK: Open Graph -->
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
<!-- TWITTER: Open Graph -->
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">
<meta name="twitter:card" content="css_project_2025">
<!-- Canonical link -->
<link rel="canonical" href="">
<title>Work Counter</title>
</head>
<body>
<header>
<h1>Work Counter</h1>
</header>
<main id="container">
<section id="input">
<h2>Choose Your Hourly Rate</h2>
<div id="input---container">
<div id="input---display">
<input type="number" id="input---display--rate" placeholder="£00.00" id="" title="" value="00.00">
<a href="" id="apply---hourly--rate">Apply Rate</a>
<span id="chosen---hourly--rate">Chosen Hourly Rate: <strong>£00.00</strong></span>
</div>
</div>
</section>
<section id="timer">
<!-- <h2>Timer</h2> -->
<div id="timer---container">
<div id="timer---display">
<div id="timer---display--hours">00</div> :
<div id="timer---display--minutes">00</div> :
<div id="timer---display--seconds">00</div>
<!-- <div id="timer---display--simple">00:00:00</div> -->
</div>
<div id="timer--controls">
<a href="" id="timer---controls--start" class="timer---control--buttons">Start</a>
<a href="" id="timer---controls--pause" class="timer---control--buttons">Pause</a>
<a href="" id="timer---controls--reset" class="timer---control--buttons">Restart</a>
</div>
</div>
</section>
<section id="fee">
<h2>Your Fee is...</h2>
<div id="fee---container">
<div id="fee---display">
<div id="fee---display--amount">£00.00</div>
</div>
</div>
</section>
<footer>
<a href="" id="reset---application">Reset Application</a>
<!-- <h2>Footer</h2> -->
<p>© 2025 <a href="https://www.jonniegrieve.co.uk" target="_blank">Jonnie Grieve Digital Media</a></p>
</footer>
</main>
<script src="app.js"></script>
</body>
</html>Now this sounds like a daunting task even with the machine learning arsenal of AI behind you. It’s a simple interface but an application with moving parts that link together in real-time. I’m just going to run through the prompts that I used.
PROMPTS
-------
1
Take the input from #input---display--rate number text box and Use #apply---hourly--rate to store that rate to be used as a basis for the rest of the appSo this is an instructional prompt. Having used Cursor for a little while now, I know I can reference elements with their IDs and classes and know that AI will know what they are and what to do with them.
Now here are the rest of the prompts.
2
This is good, as I see that the process can be repeated at any time, and we can apply new hourly rates - this is a test case for later on.
But for now, let's manipulate the visibility property of #chosen---hourly--rate to visible so it fades in, over one second when the apply button is clicked
3
click #timer---controls--start to start a counting timer in .timer---display which counts up in the following format: 00:00:00 hours:minutes:seconds
4
Yes let's work on pause functiinality. Ideally we'd want to have a seamless transiition between pausing and running. We'd want to be able to manipulate the "Start" button to stop saying "Running". And to be sure that we can pause and have the timer start again from where it stopped
5
Use #timer---controls--reset to change the timer display to zero. e.g. 00:00:00
If the timer is currently paused, it will not start counting up again.
If the timer is currently running, the timer will start counting up again
6
This next task might be tricky. We need to update #fee---display--amount so that the display updates in real time as the counter ticks up.
e.g. #fee---display--amount multiplied by #input---display--rate.
Can this be achieved? as it depennds on being able to divide the answer by a lot of variables.
7
Use #reset---application to restore the application to it's original state without affecting http requests or scroll positionI managed this in about an hour and a half, 7 Prompts of Cursor AI and just north of 170 lines of code.
It does everything I wanted of it. But what I like is how flexible it is. It’s all linked together very nicely. So I can change the applied Hourly Rate (#apply—hourly–rate) at any time. From say £75 to £100 at the dynamic fee is updated accordingly. This is at any application state, that is to say, whether the counter is paused or running. It is all completely seamless.
You might have seen from my tone in prompt 6 that I was very doubtful of what the AI could do for me there. I was envisioning something obscenely complicated but the function itself to calculate the fee was only a few lines of code.
The code that I was left with was very well presented and organised. And again, it’s easy for me to look at it in hindsight and say… Oh yes… It was all about just doing this or that.
It does seem that for me at least, it’s a new way of going about developing. My brain probably could not have managed to do this. Not in a matter of hours or even days.
My brain just cannot even begin to work out the tasks or even break them down. But all my experience of coding has come to the fore somewhere because I can understand and recognise certain coding patterns.
I’ll close this blog by reiterating my conclusions from my previous blog.
AI is a fantastic tool for coders of all levels of experience and abilities. And it can offer us all much. But at the same time, it needs certain guardrails…
It's best to see AI, in all aspects of our lives as something we can learn from and to help us in our tasks rather than letting it get ahead of us.This post has been assigned to the following categories
-
Uncategorised