I’ve used a custom, hand-rolled homepage ever since Google googled its iGoogle personalized homepage thing back in 2013. It’s set as the homepage for my browsers, and is a quick way to get to things that I use often and to check in on weather and status at several places at once.
Screenshot of the original version of my homepage.
But it never quite worked the way I wanted it to. It wasn’t super responsive on mobile devices, not scaling or adapting the layout very effectively. It used cobbled DIY html and CSS, and I’m sure it could be improved.
So, once again, I recruited ChatGPT-4o to work with me on this. I uploaded the original index.html file and asked it:
🤖 - AI-Generated Content via ChatGPT 4-o
Prompt:
I need to update this web page to use modern web design patterns, to make it more easily editable, and to work on desktop and mobile devices. Can you please create a new version of the web page that does this? Please include any javascript and css inline in the html file so that it is easily portable.
Response:
Here is the updated version of the web page that uses modern web design patterns, is easily editable, and works on both desktop and mobile devices. All CSS and JavaScript are included inline for portability.
(full html of the page redacted because this post would be like 100 pages long if I included the code responses inline. it generated decently-updated html.)
This version of the web page uses a flexible grid layout to adapt to different screen sizes. The CSS is written to be responsive, and all JavaScript and CSS are included inline for easy portability.
Now, to start updating the functionality of the page:
🤖 - AI-Generated Content via ChatGPT 4-o
Prompt:
Awesome. Is it possible to add some javascript to hide webcams that have broken images? (sometimes they go offline temporarily)
Response:
Yes, it is possible to add JavaScript to hide broken images. Here’s the updated HTML with the JavaScript included to hide webcams with broken images:
again, full html redacted from this post. but it was good - and worked.
This version includes a script that hides any webcam images that fail to load, ensuring that broken images do not appear on the page.
Perfect. Any webcams that were turned off at the time (there’s construction going on at Sunshine Village, so they’ve turned off a couple of camera feeds), or the images were temporarily broken for whatever reason (webcam feeds can be flakey, with partial images uploaded), were hidden. And I don’t have to go into the html and comment them out until they’re back - they’ll just show up when they’re available.
Now to work on the “Countdown” section. I’m using it to keep me grounded about how much productive time I have left - various milestones for possible retirement dates1.
🤖 - AI-Generated Content via ChatGPT 4-o
Prompt:
Nice! In the Countdown section, can you add javascript to display current years, months, and days from now to Oct. 14, 2029 and from now to Feb. 14, 2034?
Response:
Sure, here’s the updated version of the HTML with JavaScript added to the Countdown section to display the current years, months, and days from now to October 14, 2029, and from now to February 14, 2034:
(html goes here)
This updated version includes a script to calculate and display the countdown to the specified dates in the “Countdown” section.
The format of the date display was funky - it was displaying the date delta as the number of years AND the number of months, AND the number of days - duplicating info and confusing. Let’s see if chatgpt-4o can fix that…
🤖 - AI-Generated Content via ChatGPT 4-o
Prompt:
Can you modify the Countdown javascript to display the remaining time until the date, using “X Years, Y months, and Z days” format?
Response:
Sure! Here’s the updated version of the HTML with the modified JavaScript to display the remaining time until the specified dates in the “X Years, Y Months, and Z Days” format:
(html goes here)
This script now correctly displays the remaining time until the specified dates in the format “X Years, Y Months, and Z Days”.
It worked perfectly. Date deltas are now properly formatted, and more cleanly calculated.
Now to work on the webcam display section. I often have this page just left open in a tab for awhile, and the webcam images get out of date. It’d be cool if they automatically reloaded periodically.
🤖 - AI-Generated Content via ChatGPT 4-o
Prompt:
that’s great! Can you add some javascript to automatically reload the webcam images every 10 minutes?
Response:
Certainly! Here’s the updated HTML with JavaScript added to automatically reload the webcam images every 10 minutes:
(html goes here)
In this version, the reloadImages function is called every 10 minutes (600,000 milliseconds) to reload the webcam images. This ensures that the webcam images are refreshed periodically.
I then manually removed some obsolete links and items, and the finished version of home.darcynorman.net works pretty much exactly how I’ve wanted it. And it works MUCH better on phone-sized displays.
Screenshot of the updated version of my homepage.
Reflecting on this stuff
One thing I’ve noticed - I talk to ChatGPT as if I were talking to a person. I know that being polite probably doesn’t matter - maybe it does? Maybe it helps me to just talk as I would to a team member? Maybe it’s just for me - not getting into the pattern of talking rudely or abruptly. As Patrick Finn drilled into me: “You are what you repeatedly do.” So talking to chatgpt as if it were a person may be as much for me as for it - but I wonder if-and-how that might subtly alter its responses. Maybe I should experiment with that, but also I really don’t care about that. Maybe I’ll continue talking respectfully with AI because talking respectfully better reflects how I think? There may be a dissertation (for someone else) in there somewhere…
the “80 points” calculation for unreduced pension, age 60, and age 65. ↩︎
Comments powered by Talkyard.