Green Italic text in this article - by necessity - was created using AI.
Hello, everyone! Today, I’m excited to share with you a fascinating journey I’ve embarked on, exploring the immense power of Copilot. To create today's demo, I’ve been using Copilot to generate sample data, interrogate and change that data, and create code that presents that data online. It’s been an enlightening experience, and I’m thrilled to share the highlights with you.
Our adventure culminates with a simple script. Using Copilot I created an HTML page with a text area and a couple of buttons. The text area was designed to accept JSON data representing student records. Each record included the student’s name, major, keywords representing their skills, and a list of exams they’ve taken, complete with grades and comments.
The magic begins when we clicked the ‘Go’ button. Copilot created some sample data, took that sample JSON data from the text area and transformed it into a beautiful display of student records. Each student’s data was presented in a ‘card’, with their exams neatly organized in a table. It was a sight to behold!
But the journey didn’t stop there. I wanted to give users the ability to reset the data to a default set of student records. So, we added a ‘Reset’ button that populated the text area with demo data. With just one click, users could see a new set of results.
Here's the script, populated with a single Record of Data. Press "Go" to see it generate sample cards:
Throughout this process, Copilot was instrumental in generating the sample data, manipulating it, and creating the code to display it. It was like having a co-pilot on our coding journey, hence the name!
If you want to see the code do the same job with a different dataset, try copying and pasting this JSON (below) into the text area, and try pressing Go again. Notice how it creates new cards? You can manually change the data too... go ahead, give yourself that Grade A++. We'll get to the "why" behind all this in a bit.
[
{
"FirstName": "John",
"Major": "Computer Science",
"Keywords": ["Problem Solving", "Understanding", "Coding Skills"],
"Exams": [
{
"Class": "Programming 101",
"Grade": "A",
"Comments": "Excellent understanding of the subject and ability to solve complex problems."
},
{
"Class": "Data Structures",
"Grade": "B",
"Comments": "Good grasp of the subject, needs to work on time complexity analysis."
},
{
"Class": "Algorithms",
"Grade": "C",
"Comments": "Needs to improve understanding of dynamic programming."
},
{
"Class": "Artificial Intelligence",
"Grade": "B",
"Comments": "Enthusiastic about the subject, needs to work on implementation of machine learning algorithms."
},
{
"Class": "Operating Systems",
"Grade": "B",
"Comments": "Understands the concepts well but needs to improve coding skills."
}
]
},
{
"FirstName": "Emma",
"Major": "Mathematics",
"Keywords": ["Understanding", "Matrix Operations", "Problem Solving"],
"Exams": [
{
"Class": "Calculus",
"Grade": "A",
"Comments": "Praised for understanding of the subject and ability to solve complex problems."
},
{
"Class": "Linear Algebra",
"Grade": "B",
"Comments": "Understands the subject well but needs to work on matrix operations."
},
{
"Class": "Probability",
"Grade": "C",
"Comments": "Needs to improve understanding of random variables."
},
{
"Class": "Statistics",
"Grade": "B",
"Comments": "Interested in the subject but needs to work on hypothesis testing."
},
{
"Class": "Differential Equations",
"Grade": "B",
"Comments": "Understands the concepts well but needs to improve problem-solving skills."
}
]
},
{
"FirstName": "David",
"Major": "Physics",
"Keywords": ["Understanding", "Problem Solving", "Maxwell’s Equations"],
"Exams": [
{
"Class": "Classical Mechanics",
"Grade": "A",
"Comments": "Excellent understanding of the subject and ability to solve complex problems."
},
{
"Class": "Electromagnetism",
"Grade": "B",
"Comments": "Good grasp of the subject, needs to work on understanding of Maxwell’s equations."
},
{
"Class": "Quantum Mechanics",
"Grade": "C",
"Comments": "Needs to improve understanding of wave functions."
},
{
"Class": "Thermodynamics",
"Grade": "B",
"Comments": "Interested in the subject but needs to work on understanding of entropy."
},
{
"Class": "Optics",
"Grade": "B",
"Comments": "Understands the concepts well but needs to improve understanding of light phenomena."
}
]
}
]
The interpreter is built to be able to handle any properly formatted data... though it isn't yet built to reject invalid data - a key principal of using any AI-generated code is it's a starting point, not the finished article.
But what’s even more exciting is that this is just the beginning. The potential applications of Copilot are vast and varied. Whether you’re a seasoned developer looking to speed up your workflow, a student learning to code, or a business owner seeking to automate tasks, Copilot can be a game-changer.
Ok so we can get back to Human speak - it's me again, your dear Narrator. You might be thinking this is a stupid demo, and it is. I recently posted on LinkedIn about how I use copilot, and I got a whole bunch of whatsapps asking me to say more, so I figured I'd dream up a dumb example, and demo using that. How did we get here?
I opened up Copilot notepad, and I asked it to create a set of synthetic data. My prompt is on the left hand side, and Copilots response is on the right hand side. I was a bit gutted it didn't invent a very handsome and smart guy called Robbie... it's obviously not that good. We'll just have to work with John, Emma, and David:
Note the start time 15:42.
We've got a bunch of synthetic data now, in an unstructured format. Next up I clear down.
I let Copilot do its thing, "please turn this in to machine readable format", or words to that effect - I didnt specify the JSON (JavaScript Object Notation) Schema (this is basically the template / ruleset used for structuring the data) - but for our purposes, we don't really need to.
For the Random Creation House meal planning app, we spent an extraordinary amount of time writing and refining the Schemas, given the variety of data, and datasets we work with, but for this Student grades presentation demo script... Copilot, go ahead:
My prompt was a simple one. "Convert the data to JSON, pretty printed".
Aside - after the prompt, I ask Copilot to print the time. Though notice that its the exact same time as when the conversation started... it made an error, and continues to do so until the end.
I returned the favour by making my own error - I mis-prompt! I forget to remove the first line of the previous prompt, and then crack on with asking Copilot to add a Keywords element, and to describe the JSON so that I have a schema:
It's not easy to see here (because it's not on the screen, I scrolled too far), but the AI has gone ahead and added some keywords to the Student entity called John. Here's a snippet:
[
{
"FirstName": "John",
"Major": "Computer Science",
"Keywords": ["Problem Solving", "Understanding", "Coding Skills"],
"Exams": [
{
"Class": "Programming 101",
"Grade": "A",
"Comments": "Excellent understanding of the subject and ability to solve complex problems."
},
This is new information, based on interpretation... use with care!! AI isn't great with context it can't see.
Next up, I ask Copilot to build me a self contained Javascript, with some parameters. I'm pretty good with Javascript - it's one of the languages I studied at college (alongside C++, Java, VB, PHP, Perl and Python, and some other randoms... latterly I picked up a whole load of Powershell out of working-at-a-large-enterprise-necessity), so Javascript is one of my go-to's for when I need a quick and dirty demo.
Now this prompt gets most of the way there, but there's some trouble with it. I get a bunch of different snippets, which would be fine it we were building a standalone page, but my intention is to drop this on to a Wix page, and there's a few constraints that mean I really need the code to be in a single self contained unit.
It looks like I'm being lazy here, but I need Copilot to continue working with original code - it's possible for me to combine the HTML elements and Javascript elements later, but then I'd need to copy and paste back here... I may as well let copilot do it. Here's a gentle prompt:
At this point it's worth noticing that the date/time persists, even though I didnt ask for it. It's still wrong. AI can make errors, its important to check on facts.
The code looks (from a cursory eyes on) to be viable, and I'm pleased to see that copilot has added one of the three Student entities as a variable. That'll help.
At this point I ask Copilot to do a bunch of super simple testing on the code, make sure comments are up to date, I havent asked for error handling (by choice - I dont need it in the code right now), and I ask it to format the output so it looks pretty.
There's a screenshot missing in the middle here where Copilot starts to hallucinate new requirements and goes on a bit of a walk round the park: I "bring it back to the room" by providing it with a previous copy of the code, and ask it to focus on that script. My ADHD brain and this AI have never felt more similarly wired, than in this "unexpectedly taking a walk around the park" moment.
Since I've been getting used to Figma and Bubble and Dart, I've really fallen in love with Card layouts, which are used throughout the food app too. I ask Copilot to reset the output around a card model.
So then finally I ask copilot to make a few code tweaks, drop a button I now realise to be redundant.
I ask it to write me a blog post (which is everything in Green up top!), and I ask for a script that I ultimately ended up not using... I figured afterwards that you, my dear reader, are more than capable of copying and pasting some text :-)
The time on the clock is now 16:38 - according to the Copilot timestamps, we've been at this for 56 mins.
If this were a proper project, that I was going to industrialise, I'd be building out readme's at this point. I'd ask Copilot to summarise my prompts so far, probably into some form of requirements and decisions table, and I'd ask it to summarise the classes/methods/CLI parameters/whatever. I'd ask it to introduce basic error handling (outputs to logs etc), and probably to build some outline test cases. Recently I've been playing around with "design me an interface that does XYZ", and I've been trying to prompt "make sure this is WCAG AAA" - with mixed results. Key point... documentation is / can be boring... might as well let Copilot get some of that out of the way for you.
I jump across to Wix, which is the Random Creation House brochure-site host, and having done a good read-through of the javascript to convince myself its safe to run, and having made a small number of tweaks (not enough to make it "good", mostly fixing alignments), blog post goes live, and I demo the script at 17:09 according to this screenshot. It works.
Success. OR is it? I'm left with an absolute unease at the timestamp issue, and I still can't explain it. I go and check the create-times for the screenshots... I couldn't believe that I'd spent 15:45 to 17:09, almost 90 mins, on this demo... it didnt feel like that long.
Luckily, I'd been taking screenshots as I went, and I realised the creation times would give me absolutely accurate timings.
I need to update Powershell.
I started at 16:15, finished at 16:56.
Yes I've been saving my picture to my Desktop with random names
Yes I accidentally used Step 7, four times
41 mins end to end.
We've built a sample dataset, interpreted it from unstructured to structured, built a standardised JSON schema, built a basic javascript interpreter, written a blog post, and gone live on this site, in less than one hour. The javascript is reasonable quality, and the layouts worked first time.
It's imperfect, but its quick, and the demo shows how Copilot can be prompted in lots of different ways.
In my earliest prompts, I was asking Copilot to "Create", setting some objectives, and letting is be creative. It's a super lengthy, manual prompt.
In the second step, my only instruction was to convert to JSON. I let copilot do its thing re: creating schema.
In the third prompt, I ask Copilot to infer some keywords that describe the Student, and to explain the Schema. The first part is a creative request, the second is less so.
In the fourth prompt, I list a series of requirements for a Javascript, and then ask the AI to do some diligence cross checks. The purpose of the "dilgently check" repeat is a reminder, to convey to the AI the importance of getting this bit right.
In prompt 5, I express my dissatisfaction and tell it to try again. Sometimes Copilot can get annoyed at such directness, and will strop off with a "this conversation is done, bye". Awks.
After that, I let Copilot go wild - write me a blog post, enjoy yourself.
Copilot and I shake hands, agree that we've done a good job, and walk away. We grab a quick selfie to use as the article's featured image.
Copilot and I head off to the pub, and leave ChatGPT to write my Linkedin Post, and it doesnt disappoint. It looks exactly like every other ChatGPT / Copilot LinkedIn that we've all come to know and love (?):
