Techie Tinkering: Come vibe with me - Episode 1
 |
| Create a cartoon of the person in this photo sharing a coffee and laughing with an anthropomorphised computer |
Vibe coding is a term coined by AI researcher Andrej Karpathy to describe a coding approach that relies heavily on natural language prompts to instruct AI tools to generate, refine, and debug code. - GoogleFor a while now I've wanted to try vibe coding something from scratch. So, let's do it.
What are we vibing on?
Remember my treadmill?
I shared this little graph of my progress:
This graph was generated by manually punching data into Excel and creating the chart from there.
Then remember I gave the treadmill brains?
The StepCounter 6.0 stores its results internally as CSV files. It would be cool to make a graph of them, as above.
My initial plan was just to copy these CSV files into the Excel doc every time I wanted to update the graph... but could we do something better...Could vibe coding help? Let's find out.
The StepCounter 6.0 stores its results internally as CSV files. It would be cool to make a graph of them, as above.
My initial plan was just to copy these CSV files into the Excel doc every time I wanted to update the graph... but could we do something better...Could vibe coding help? Let's find out.
How did I pick a tool?
I googled "get started with vibe coding" and clicked the top link.
I mean, the reality has slightly more research than that...but not much.
So what was the top link? replit.com
You'll be shocked to hear that I just clicked on the free plan for now. If there's something I need to pay for, I'll figure that out later.
I mean, the reality has slightly more research than that...but not much.
So what was the top link? replit.com
You'll be shocked to hear that I just clicked on the free plan for now. If there's something I need to pay for, I'll figure that out later.
So...You log in, you get a box to start typing. Let's go!
My first prompt
Create a web page that enables a user to select a CSV file
in the format of the example attached.
The first column is the date an activity happened and the
last column is the duration that activity happened for.
Show a graph that shows the total duration of activity
each day.Replit's first reply
I was really impressed with this. I'm not sure what I was expecting... but I think I was expecting it to just go ahead and try and build the thing I'd asked for - just as ChatGPT would if you asked it to draw a picture, or write a blog etc. The fact that replit plays your requirements back to you and outlines the plan ahead of time is really nice.
Anyway, it sounded like it had the right end of the stick, so I hit approve!
Replit's first build
Again, I was impressed that you don't just get a "TADA! here's your site!".
You get lots of updates about the different steps that are being taken etc.
This was interesting on an initial build - but it gets more valuable as you go along - you can see which files replit is changing in order to make your change. This starts to give you a bit of a feel for the underlying code.
Replit's first ouput
So, after about 3 minutes of whirring and clunking, what did it spit out?
Let's be real - this is probably better than I'd have done myself. Documentation telling the user what's expected of them? That's a nice touch. But what happens when you upload a file?
I had a small CSV file laying around with a couple of days' worth of data in it, so I chose that.
 |
| KABOOM! |
On the face of it, this is pretty cool! It's done basically what I asked of it. It's given the tool a sensible name. It's even added the nice summary stats by the side. I didn't ask for that, but what a good idea!
Let's tinker
My only slight reservation is the X-axis. Something weird is happening with the dates. I only take a quick glance and reckon the issue is that the software's expecting US date format, not UK... So I make that clear to replit:
It works well - but the dates are in the format dd/mm/yyyyThe response I get is interesting:
Again, I think I was expecting it to just not blindly and go "OK, I'll apply that change". But it actually told me that it had checked and the code was already right. And you know what, looking in more detail, it was already right.
The issue was just that it had repeated the same dates a few times on the X axis... So let's tell it not to do that.
 |
| Is it telling me I'm wrong!? |
Again, I think I was expecting it to just not blindly and go "OK, I'll apply that change". But it actually told me that it had checked and the code was already right. And you know what, looking in more detail, it was already right.
The issue was just that it had repeated the same dates a few times on the X axis... So let's tell it not to do that.
I only want to see each date once on the X axis of the chart.
Again, great comms. It plays back my request for me, then tells me what it's changing and why. And the result?
 |
| Super! |
Next up, I thought I'd try it with a bigger data set. So I took my Excel file I originally used to generate the chart for my blog and converted that into the correct CSV format and loaded it up:
 |
| More Super! |
Interestingly, having loaded a bit more data, replit decided to be proactive and suggest that storing this stuff in a database might be a nice idea:
I decided to skip this for the time being - I was only going for feature parity with Excel in the first instance.
So I pushed on with another request instead:
I decided to skip this for the time being - I was only going for feature parity with Excel in the first instance.
So I pushed on with another request instead:
The third column in the CSV file is the number
of steps
taken to achieve each activity.
Please sum the number of steps and show it next
to the sum
of the duration for each day.
Replit works away for a few seconds, then gives me a lovely written update on what it's been up to and asks me to try again:
I dutifully retest:
Pretty good...but I really wanted two bars, not a bar and a line, to match my original graph.
I would prefer a bar for each series instead of one bar and one line. 
And there we have it!
Perfect, right?
I mean, not perfect...But you start having to be pretty picky to find issues.The first one I noticed here was that it hadn't updated the title of the page to reflect that it was no longer just showing duration data... so I've had it change that now, I won't bother adding the pictures - you can imagine.
FWIW, I did double check the summaries etc and it does add up right :)
So, what did we learn?
I learnt that this works well.Honestly, getting to the correct bar chart here probably took me around the same time, if not less, than achieving the same thing in Excel. And it will be quicker to to see results next time I pull a CSV from the stepcounter too.
Rather than having to google which buttons I need to press to show a second Y axis in Excel (which was faffier than I expected), I can just type requests in plain English and get the thing done.
So I can see myself using little apps like this quite frequently when I just want to stand up little tools for ad-hoc analysis etc.
And for something like this I wasn't really worried about the underlying tech. I've never written a Streamlit web app before - and I'm OK with that, because I don't really have any intention of diving into the code here.
...and that's a kind of important distinction. As someone working in software engineering I have the same reservations as a lot of people - is this thing coming for our jobs?
The reality is that the thing I just build is no threat to our jobs - just as the Excel method of getting the same graph wasn't a threat to our jobs. When I build bigger things and intend to mess with the code base myself, maybe that perception will change.
What are we going to learn next?
I've quite deliberately capped this blog entry at a 101 level...just getting off the ground like a baby giraffe. But there's a lot further I'd like to push this example to learn more.1. I'd like to press the "yes please" button to the database question and see how that works.
2. I've not got as far as deploying the solution yet - keen to see what happens there.
3. I've not really strayed from the happy path yet - what happens if you upload something weird? How does it handle exceptions?
3. I've not really strayed from the happy path yet - what happens if you upload something weird? How does it handle exceptions?
4. For the sake of ease, I've been choosing the CSV file manually so far. I wonder if it's possible for it to go grab it from the raspberry pi. In my head I believe this is a step too far, but I wonder what replit will do when something is a step too far.
5. I want to learn more about the UI implementation here - is it responsive? Can I get light mode? And what happens when we have months and months of data?
6. Can we make it bigger / more complicated? When does it start to struggle, both in terms of capability, and in terms of my needing to pay for it. Can I get to a stage where I have an opinion on whether this tech really does constitute a threat to software engineers?
6. Can we make it bigger / more complicated? When does it start to struggle, both in terms of capability, and in terms of my needing to pay for it. Can I get to a stage where I have an opinion on whether this tech really does constitute a threat to software engineers?
7. I've mentioned that I wanted feature parity with my original excel file. In retrospect I wonder - if I gave it that excel file to start with, would it have replicated the graph quicker?
8. I realised that I tended to give my instructions to replit in a kinda technical way, referring to axes, series etc. I wonder if I'd talked in really plain English whether I'd have got the right result as quickly.
So, I'll get working on some of that stuff and...
See you next time
Thanks, as always, for sticking with me. Speak soon! xx