I started this blog to write about topics that interested me, so naturally, the most important first step was to spend two weeks editing CSS and HTML files.
Blot
I first heard of Blot from Alex and Merlin on Do By Friday. Blot is a service that hosts a website using static files that you just drop into a shared folder in Google Drive or Dropbox. When Jarrod of Hey Dingus posted that Blot had added support for iCloud Drive, my curiosity was piqued. At only $6/month it felt like an easy way to get started without a huge commitment, and I loved the idea that I could post by just dropping a text file into a folder that was accessible from any of my devices.
Like any good blogging platform, Blot provides many premade templates you can start from which all suck. Fortunately, the templates are all downloadable as a collection of HTML and CSS files that you can customize. I picked one that had the bones of a structure I liked (“Mira”, if anyone’s curious) and began working on my own copy of it, which I called “Mira (Connor’s Version)”. I initially started working in Panic’s Nova which I bought years ago even though I’ve barely used it since.
Only two things stood in my way: a complete lack of familiarity with CSS or any aspect of web development from this or last decade, and a similar lack of creativity regarding visual design.
Me editing CSS
Artificial Aptitude
It was at this point that I started asking ChatGPT for help. “Given these HTML and CSS files, how should I implement this layout change?” I was initially impressed with ChatGPT for this: it restated my goal, recommended a set of changes, explained how they worked, and what the end result would be. And usually they were pretty good! But often I found that the changes only achieved part of the goal, and had unintended side effects. When I pointed this out, it gave me another great answer that once again only solved part of the problem while introducing other regressions. The deeper I got into a conversation the worse this pattern got. I eventually realized this was because it didn’t have enough context, or perhaps, it had too much context. It was struggling to keep track of the changes we had layered on top of the original files, and what changes served what purpose. And the process of copying-and-pasting edits back and forth into the source files was slow and painful, especially since ChatGPT’s versions were often subtly different from what was already in the file. But like a rat continually pressing a button wondering when the next treat will come out, ChatGPT’s answers were just impressive enough that I kept trying and trying and trying.
I will say this: this process unintentionally taught me a lot about how CSS works. The more we went back and forth, the more I was able to give more specific direction, and often noticed problems with ChatGPT’s suggestions before implementing them.
A friend suggested I try Cursor, and wow, I should have done this from the beginning. I suspect the difference probably came from a combination of a few different things: by having AI integrated directly into the editor, Cursor could always “see” the current versions of the files we were working on. I was also getting better at asking questions in a way that hinted at the specific changes that were needed. And Cursor uses Claude as the backing model by default, which I’ve heard is the best model for code editing and generation. That’s not to say Cursor was perfect: it still sometimes had the same issue of only partially solving a problem while creating new ones. But even the best human software engineers still do that to some extent. Working with Cursor was dramatically more productive, and in most cases enabled me to implement complex changes in just a few minutes.
As a standalone code editor for manual work, though, I would not choose Cursor. It aggressively autocompletes code snippets that I don’t want, and when it does, I find it hard to tell what code is being suggested vs what is already in the file, and how to dismiss the suggestions. But I was impressed with the capability of those suggestions. For example, I briefly toyed with adding emoji to the contact suggestions in the footer, and after I added an email emoji to the email link, it suggested adding an elephant emoji to the Mastodon link (which was exactly what I was going to do) and a blue heart to the Bluesky link (which was clever, even though I would have used the butterfly emoji).
A matter of taste
I consider myself a better editor than a designer: I know what I think looks good and doesn’t look good, but often don’t have good suggestions for what to do differently. I continued to leverage ChatGPT in situations like that, asking it for recommendations of colors to use, appropriate spacing between various elements, and ideas for how to lay out elements on the page, iterating on it with feedback on what I liked and didn’t like. And unlike working with a human designer, I felt no guilt whatsoever about behaving like a nightmare client: “What if it looked more like this?” “Hm, no, a little more like that?” “Actually show me the first option again.”
I also spent a lot of time looking for inspiration on other blogs with designs I liked. Things like how to lay out headers and footers, where to place menu items on the page, and where to use more vibrant colors or more subtle shades followed patterns I saw in other blogs.
As with any design decision, I’m sure I’ll eventually come to be embarrassed by choices I made earlier on, but for now I’m happy with how things have come together. If you have questions about how I used any of the tools I referenced above or suggestions for changes I could make, let me know!