prompting claude to build a sleep journal

First, yes, ick. I am still conflicted about generative AI. And yet, it’s a thing that I need to deeply understand in order to be able to cut through the breathless hype. Which means that I need to plug my nose and use it. And I’m trying to document some of my GenAI explorations.

I’ve been using Claude since the 3.5 model was released, and have been paying for the Professional tier for the last 5 months (and counting). $30 CAD per month for a tool that I use pretty regularly. All AI companies are problematic, but Anthropic feels slightly-less-problematic than OpenAI, certainly less so than Grok. Claude feels less gimmicky - it is strictly a text generator and doesn’t generate images. Its ability to build simple software is pretty impressive, even if the process can be mind-numbingly frustrating at times.

What kinds of things have I used Claude for?

• Building a plugin for Obsidian to better work with meeting agendas
• Pulling together information about several campus platforms
• Converting my markdown CV into a LaTeX-formatted resume
• Providing a super-high-level summary of a book that I had no interest in actually reading
• Designing an optimal AI communication language (haven’t tested this, but it looks potentially useful)
• Transcribing handwritten notes and whiteboards into Markdown for use in Obsidian (using the iPhone app)
• Pulling together some arguments for/against the ITIL “business vs. service” separation to help think that through
• Acting as an “executive coach” to help me think through various topics without just “solving” them for me
• Writing and revising HR-related documents - this has been a huge time-saver, given the typical week-or-two delay for feedback on these kinds of documents
• Redesigning my browser homepage
• Building a searchable dashboard for a CSV report of third-party software acquisition requests
• etc. etc. etc. I have 121 chats in my Claude chat history

I’ve been struggling with chronic insomnia for years, and am working with a sleep therapist to address it. We’re making progress (yay!) but part of the process involves keeping a “sleep journal” (he calls it a “sleep diary”, but no…). He handed me a sheet of paper with a table to use, proudly saying that I can fill it in each morning and we can use it to track things. As someone who spends a lot of time in spreadsheets, and who has some decent experience with data visualization, the thought of hand writing data into the jankiest 19th-generation photocopy of a crappy Word table was like nails on a chalkboard. I did it, but didn’t like it.

This week he checked the page and then started making some calculations. By hand. Estimating things and having to cherry-pick dates because it was too tedious to use all of the data. Friends, it took everything I had not to start critiquing his professional practice right there. I swallowed that down, we finished the conversation to plan the next few weeks, and I resolved to build a spreadsheet to do this properly.

I spent a few minutes in Excel, and it was ok but not really working how I wanted it. Then I thought of asking Claude to give it a shot:

I need to build a “sleep journal” to document my sleeping patterns. I need it to be a standalone web page that stores the journal entry data, visualizes the data and calculates trends. Sleep journal entries will be entered every morning, to document sleep from the night before.

It needs fields for:

• Time I went to bed (time)
• Time I started trying to sleep (time)
• How long it took to get to sleep (minutes)
• How many times I woke up (integer)
• How many times I got out of bed (integer)
• How long I got out of bed (minutes)
• How long I was awake during the night (minutes)
• What time I woke up (time)
• How I rate the quality of sleep (very poor, poor, fair, good, very good)

And it needs to calculate total time asleep in hours and minutes (time from trying-to-sleep to wake-up, minus how long it took to get to sleep, minus how long I was out of bed, minus how long I was awake during the night for each night).

I need to visualize the data over time, and calculate and display average nightly time asleep over the last week, 2 weeks, month.

The “standalone web page” thing was a trick I figured out to avoid having Claude build some stupid React or Node.js monstrosity. I just want a simple web page, nothing to compile, nothing else to download.

I didn’t ask for Chart.js - something deep in Claude’s LLM innards suggested it. It built an HTML page, previewed it in a panel (which displayed a script error), and I downloaded it to run in a browser tab. It threw a different error in Safari, so I copied the relevant bits from the javascript console:

I get an error message:

[Error] Error: This method is not implemented: Check that a complete date adapter is provided.
	yn (chart.min.js:13:100959)
	init (chart.min.js:13:184924)
	(anonymous function) (chart.min.js:13:90456)
	d (chart.min.js:7:1040)
	buildOrUpdateScales (chart.min.js:13:90178)
	_updateScales (chart.min.js:13:92940)
	update (chart.min.js:13:92097)
	bn (chart.min.js:13:88649)
	initializeCharts (sleep-journal.html:612)
	initializeApp (sleep-journal.html:413)
	(anonymous function) (sleep-journal.html:393)

Claude responded:

It was basically working at that point. I’d noticed a display issue, and because it’s a standalone browser app, I wanted to add a way to backup/restore the data so it doesn’t go poof if/when the browser loses the data.

This is awesome. I’m worried about data loss - can it be modified to export and import data? And the chart shows Sleep Duration Over Time properly, but the vertical axis says “Hours” when it should be “Minutes” - please convert to “Hours” (so, the current value / 60)

I basically talk to Claude as though I was talking to myself, or to a colleague. That seems to help - at least it helps me frame questions/responses, and Claude seems to parse the nuances from that kind of prompt pretty well.

This went back and forth over an hour or so (while on the couch watching garbage TV). I’d ask for a new thing, Claude would build a thing that almost did it, but maybe broke something else. I’d paste in javascript console error messages and Claude would say something like “oh, right, that shouldn’t work at all - it’s an easy fix though” and create a version that doesn’t have that bug. Even Claude Pro with Extended Thinking apparently is not able to approach writing code by ensuring it actually works and is complete code (with proper syntax), without feedback.

And then, because I am a serious person, I had a random thought to add an easter egg to make the web page look more like the janky 19th-generation photocopy of a crappy Word table.

as an easter egg - the sleep therapist gave me the form as what looked like a 19th-generation photocopy of a printed word document. it was at an angle, not centred on the page, and had lots of schmutz marks that somehow accumulated over time. Is there a way to have a button that turns on a CSS mode that looks like that (including an option to print that way)?

Claude loves the idea! With emojis, even! The button didn’t do anything, so I told Claude that. It came up with new code to fix the button, then to fix the CSS, then to fix printing.

In all, there were 53 iterations of back-and-forth before the final product. Sure, half of those were for the easter egg. Worth it. And even the intentionally distressed easter egg version looks significantly better than the embarrassingly bad photocopy I was given.

Is this something I could have built on my own? Probably, given lots of time to learn and test and hit various forums to figure stuff out. It would have taken me waaaay longer than an hour. Is this something I would have invested that much time and effort into? Not in a million years. But, spending some partial-attention time chatting with Claude while watching TV? Sure. That I can do.

Anyway. The Sleep Journal web app is available for anyone to use. It comes with no warranty - it’s AI slop and I have no idea if your data will be valid or useful. It doesn’t save anything to the server - all data is stored locally in your browser.