I’m not great at CSS and, like many others, find that positioning elements on a web page can range from tedious at best to utterly frustrating at worst. Fortunately, ChatGPT-4 is pretty adept at stuff like this. I’m not saying it’s perfect every time, but usually, I can arrive at an answer after a few iterations.

I use ChatGPT for this in two primary ways. The first is by asking it to create a stand-alone page with the necessary elements and styling. I can then load that page into Chrome and continue iterating with ChatGPT. This approach has worked well, especially when I’m developing a new web page.

However, I often need to modify existing web pages, which can be quite complicated. These pages often feature both an external stylesheet and intricate inline styles. The challenge lies in conveying this information to ChatGPT so it can suggest improvements. I’ve tried pasting just the relevant section of HTML, along with any referenced parts of the external stylesheet, but this method is tedious and may miss critical positional information from higher up in the page hierarchy. Pasting the entire web page and stylesheet is not feasible, as the data is just too large.

To address this, I’ve developed a JavaScript function that calculates the computed styles for a set of elements and writes those styles directly into the elements as inline styles. This allows me to use the Developer Tools inspector to copy the relevant element tree. Pasting that into ChatGPT gives it all the positional information it needs to assist me.

Here is the function to iterate over an element and its children:

Note that I limit the inlining to only the relevant positional styles and try to avoid including default values. To use it, call inlineStyles() on the element at the top of the tree that you wish to edit.

I’ve just started using this technique, but it already proved quite helpful in resolving a tricky issue on the Groups.io chat page this evening.

As a developer, I’ve found ChatGPT to be an invaluable resource for getting quick answers to programming questions, brainstorming solutions, and even tackling the occasional debugging conundrum. It’s even helping write this blog post. It’s like having a virtual team of experienced developers at your disposal 24/7. But as much as I have come to rely upon ChatGPT, I needed a better way to organize my chats with it.

Enter Obsidian, a powerful note-taking and knowledge management app that is my go-to tool for organizing thoughts, code snippets, and more. I realized that if I could import my ChatGPT exports into Obsidian, I’d have a highly efficient way to search, reference, and build upon my ChatGPT conversations.

I wrote the following small Go program to parse a ChatGPT export file and generate a series of Markdown files from it, one per conversation, suitable for Obsidian or any other Markdown based editor. The program takes two arguments, the name of the conversations.json file from the export, and the directory where the generated Markdown files should be place.

To generate a ChatGPT export, click on Settings from the hamburger menu at the bottom left corner of the page. That will bring up a dialog with a Export Data link. You will be emailed a link to download the export when it’s ready.

I have migrated this blog from Wordress to Hugo. I did so mainly because Wordpress wouldn’t let me do a few things. I wanted to add a rel=me link so that Mastodon would associate my @wingedpig@hachyderm.io account with this blog. And, I wanted to be able to customize the blog more than Wordpress would allow me to do. These are my rough notes on how I did the migration.

First, I exported my Wordpress blog. Then I used the Blogger To Markdown tool to convert the exported Wordpress files to markdown files compatible with Hugo.

I am currently hosting the blog using Linode’s block storage system. I followed the instructions in Deploy a Static Site using Hugo and Object Storage to set that up.

I am using the Ananke theme, but I have customized it. The biggest change was making the home page display full blog posts, instead of summaries. I did that by creating a new layouts/index.html file, using the themes/ananke/layouts/index.html file as a template.

Another important change I made was with the RSS file. Hugo defaults to having the RSS file at /index.xml, but my Wordpress blog’s RSS feed was at /feed. I didn’t want to lose my existing RSS subscribers. To change the RSS URL, I had to make two changes. In the config.toml file, I had to add the following:

[mediaTypes]
  [mediaTypes.'application/rss']
    suffixes = []

[outputFormats]
  [outputFormats.RSS]
    mediatype = "application/rss"
    baseName = "feed"

I also had to copy the internal Hugo RSS template into the file layouts/index.rss.

The final change I had to make was to set the blog post URL structure to match the old Wordpress blog structure, so that links to old blog posts would not be broken. To do that, I added the following to the config.toml file:

[permalinks]
  posts = '/:year/:month/:day/:title/'