Tools
Vibe coding is a term that refers to using AI tools to generate code without any significant human oversight. This massively lowers the effort required to create a simple application, but comes with the trade–off that the code may be low quality.
Below are simple tools I've built by vibe coding. They are not intended to showcase my programming abilities, but may nonetheless be of interest or use.
Some of these tools were built before this website existed, so their styling may not work as intended with the other styling on this website.
There are currently 12 tools, with 27 versions between them.
Table of Contents
Reusable Tools
These tools are intended to be useful repeatedly (to the extent they are useful at all!).
One-off Tools
These tools were built to solve a specific problem a single time, and are not expected to provide any further value in the future.
Reusable Tools
Age Tracker
I can remember the names of my friends' kids but I often lose track of their ages, especially if I've not seen them for many years.This tool helps you track the ages of children in friends' families. It provides a simple interface to view and manage this information, with a focus on calculating and displaying ages in a natural, human-readable format.
Bible Tracker
Many years ago someone at church asked if I could write a simple app to keep track of reading every chair in the Bible. At the time I said no because the effort involved was too high for me to justify. Since vibe coding came along, these sorts of simple apps have become possible to create in mere minutes, and even if the technical quality is low it doesn't really matter for such a simple app.This app helps you keep track of your Bible reading progress in a visual and organized way. It displays all 66 books of the Bible with clickable chapter numbers that can be marked as read or unread, allowing you to see at a glance how much of the Bible you've completed and which chapters you still need to read.
HTML Structure Simplifier
This tool simplifies HTML, making it easier to develop user scripts. It removes unnecessary attributes and de-duplicates the structure, giving you a clean and simple version of the HTML to work with.Open HTML Structure Simplifier →
Modified Examen
Inspired by something in the book Introverts in the Church by Adam McHugh, this is a version of the Ignatian Examen which I have modified for personal usage.This tool guides you through this version of the examen. To use it simply open the tool, pray according to the prompt, then tap/click the screen to receive the next prompt.
Obsidian Text Escaper
This tool escapes special Markdown characters in your text, making it safe to use in Obsidian callouts and other contexts where you want to display the characters literally. It also includes an option to format the text for Obsidian callouts by adding `> ` to each line.Parent Pay Calculator
A simple tool to calculate Parent Pay allocations.PR Description Generator
This tool helps you generate a well-structured pull request description. It provides fields for context, contents, and areas to focus on, ensuring that your PRs are easy to review.Open PR Description Generator →
YNAB Category Lister
This tool allows you to enter a YNAB API key and view all the categories in your budget. This is useful for getting a quick overview of your budget structure.One-off Tools
Blue and silver colour combinations
On a whim I decided that I should try using silver text on a dark blue background (or vice versa for light mode) as the colour scheme for this personal website. To try and help me pick specific colours, I generated a grid of different blues and silvers to see what they would look like together.Open Blue and silver colour combinations →
Landing Page Template
This is a template for a personal landing page. It features a clean, minimalist design with a focus on typography and whitespace.Navigation Menu with Hand-drawn Circle Effect
This is a UI component that showcases a navigation menu with a hand-drawn circle effect around the active link. It uses an SVG background image to create the irregular circle shape.Open Navigation Menu with Hand-drawn Circle Effect →
Red to Green colour ranges
A while ago I wrote a simple application which involved picking a number from 1-5, where 1 is bad and 5 is good. I used CSS to select colours on a gradient between the CSS `red` and `green` values, but I was never very happy with how it looked. Only the 5 felt green to me, whereas 1-3 all seemed fairly red, so visually it felt skewed towards the bad.I used Claude to generate different sequences of colours, all ranging from some sort of red to some sort of green. Once I was able to visualise the intermediate colours, I was easily able to pick 5 colours that I was happy with.
Open Red to Green colour ranges →