Reflections: Case Study Widget
Some notes on something I made a few weeks ago, for my own reference but also in case it’s useful to anyone else.
A few weeks ago, I started looking for a good test project for using Claude Code. I’d done a bit of vibe coding last year, but everything seemed a bit half-baked as yet, and as someone who had done pretty light front-end dev work ten+ years ago, I didn’t feel like I could pick up the slack. Especially not in Python. I’ve always wanted to like Python, but I’ve never succeeded in liking Python.
So the idea I came up with was creating some kind of widget for my static website. Armed with my specs — a vague high level of list of projects to cover, and one of my Terrible Sketches™️, my dormant github site, and half a dream, I jumped in because why not?
My personal site, kyrce.com, was an experiment I did last year using 11ty, because I was really interested in Static Site Generation. The template I used, Eleventy-Excellent, had a really straightforward customization methodology and was logically laid out. Helped that I also liked the style.
Pass One
So I made a first pass on the widget in Claude, adding some really basic context about what I wanted and it looked something like this:
I was so surprised how close it came to what I had sketched! Only the process and year were switched (which made a lot of sense, honestly).
It was also Claude that named it a “Case Study” widget, which seemed exactly right.
The biggest issue was that the process bar wasn’t adjustable. My goal with that was to show for each of these case studies where my work came in.
So I went back to Claude.
Pass Two
The most critical thing here was making sure that whatever changes were made were also accessible. I didn’t just want the ability to color change; I also wanted to make sure that information was available for a screen reader. So I made sure to include that in my instructions, and here is my second pass.
This was pretty good, except it didn’t leverage the really nice color work in the theme. But I figured that was something I’d do myself.
Get Kyrce Swenson’s stories in your inbox
Join Medium for free to get updates from this writer.
Another piece I wanted to do for myself was re-organizing the widget so that it followed the same format as similar types of widgets in the theme.
Hand-Touched Pass
Finally, here is how I adapted it to leverage the styles in the theme:
Most of the work I needed to do was around getting dark mode set up and completed. I’m still not entirely satisfied with dark mode, but we are closer!
What I learned
- Integration was harder than I expected, and there are still places where I would like it to act more “normally.”
- There were definite breaks in understanding and catchup when the tokens ran out. My next project had more defined context journals to help with this.
- If I was going to do this again, or if my primary goal hadn’t been to test out Claude Code on something it would be easy for me to evaluate, I would have just used the already existing card template.
Next Steps
- Accessibility Testing — Contrast. I’m not convinced the dark mode is cascading correctly, and I don’t think it has high enough contrast. If it were anything but this experiment, I would have ditched the created code at this point and gone back and built it myself.
- Accessibility Testing — Screen Reader. I’ve had an open item to test this, and I have been too distracted by other new shiny objects to do it.
- Add my open bugs to Github. Because I can!
- Add a description of the pipeline to the top of the Case Studies page, because it’s not clear what exactly it means. I think this will be critical for the screen reader as well.
Here endeth my lab report for this experiment. I hope Mr. Dr. Schraer, my high school bio teacher would be proud, because for once my lab report is not even late!
