This Tech is Insane!
I asked ai to write code for me for the first time last night, and I was blown away by the experience.
If you don’t know me very well yet, I am a classically trained programmer. That means I studied at university and took standard computer science courses. I’ve been a career code monkey for over 20 years.
In a non-arrogant way, I know how the code works and what it should look like. With this knowledge I began a fascinating exchange with CGPT.
Ai Wrote Javascript and HTML for Me
The Project
I am working on a gamification project for my community Niad Club. I am using tools like SocialConnector, Zapier, ConvertKit, and Circle. Zapier is the magic that makes all the apps talk to each other. That in of itself saves me from writing tons of code I used to have to write for consuming web services and parsing the results.
The Progress
I am successfully awarding points to members of my audience for taking actions across the various platforms I use. Rather than have an isolated points system that exists only in my Circle community, any app that can talk to Zapier has an action that I can gamify. Points all over the place, baby!
Okay, so I am awarding points. I am keeping track of lifetime point totals. I have defined point levels where a badge or tag is awarded. Very cool stuff.
The Problem
I needed to be able to display a leaderboard in my community. My data lives in a Zapier Table. How do I get that data over to my Circle Community so I can format it as HTML and display it on a web page? I amazed myself at how quickly I was able to come up with a working solution.
The Visual Aid
Over there, that’s what I did. This is a simplified view. I primarily wanted to illustrate the data flow.
Don’t hate on my diagram skills. I haven’t diagrammed in over a decade. I’m rusty, okay?
Data Flow
Here we go:
- A member action kicks this off, such as making a new post or comment in my community.
- A zap recipe (yes I like to think of it as a recipe) in Zapier listens for the member action. It awards the points and does some other things via a zap that starts with a webhook.
- This zap saves the data to a Zapier table. Whenever the member earns more points their record in the table is updated.
Okay here comes the part where I found a way to get that data over to Circle.
- I noticed that when I make a post in Circle that I have the option to add custom html.
- Then I crossed my fingers hoping that this input also allowed javascript code that would execute rather than be parsed as display text.
- So I wrote my hello world Alert box. Success!
- I had read an article that introduced me to Zapier Storage. Now this was very interesting. I can save data in Zapier Storage and reference it via an api call and it will return the data. This was the golden key! How a web page can request data from Zapier.
- I thought, “okay Mr. Chatty G, let’s see what you can do.”
- I typed “write javascript to fetch data from a url”
- Yep, that is functioning code.
- I needed to feed the ai more details so it could rewrite the code to something usable for my custom project.
- I entered “update to put result in a div named divResults”, which birthed this baby:
- So now we can parse the data from Zapier and display it on the web page instead of the debugger console.
- Just a matter of formatting now, right?
- Next I described what the fields in the dataset were and it updated the code to separate each field into separate variables and looped to build the display.
- This was my first WOW!
- I told it that the data was actually JSON and that each field contained a comma-delimitted list. It adjusted the code properly.
- Then I said to display the results as a table and sort by points in descending order. This would be quite the task I thought. A few seconds later and here comes the new code, sorting properly, building a table.
- WHOA! This is when I started thinking that there is probably very little that the ai cannot do.
- Yadda yadda, I told it which fields to display or hide.
- I asked for alternating row colors.
- I told it I wanted to censor the email addresses to hide most but not all of the characters. Which then updated the code with a new function to format this output: pr***a@g***.com
- WOWWWWWW!
- I asked for logic to display my badge image if the user had enough points to earn it.
Closing Thoughts
I am beyond super impressed with how I was able to speak to ai in a way I would normally speak to describe code that I needed with specific details and it generated it. That would have taken so much longer to search api and syntax references to verify the right functions and such to use.
I’m going to continue playing with this and see what else is possible.
You are not my enemy AI. We can be friends.
Meir is a web developer who has been writing code since 2000. He enjoys his family, movies, cooking, golf, and bowling.
