To check your usage limits, you can run the /usage slash command from within the Claude Code CLI tool, which brings up a menu that looks like this:

One major drawback is that this slash command can’t be used while the Claude agent loop is running and doing things. This has been a big frustration for me, as it really interrupts my flow of work to have to remember to check this only in the intervals where Claude is not actively doing something.

This is especially true when a task has been running for a while: I want to check to see how much usage this task is burning to determine if I should /compact or /clear the context and start over. This situation happens semi-frequently, like when Claude goes down a rabbit hole investigating something tricky but gets over-focused on a dead end.

I often find myself opening a new terminal just to start a separate Claude Code session and run /usage to see where I’m at, but this is really annoying to have to do all the time.

Quickly Checking Quota Usage

Initially, I looked into some popular tools such as ccusage, which describes itself as:

Analyze your Claude Code token usage and costs from local JSONL files — incredibly fast and informative!

While token usage is nice to know, I’m using a subscription plan and not the PAYG API model, so that doesn’t help me that much. While the tool does have a “5-Hour Blocks Report” feature, it seems like the estimated limits are just based on the local log files and some heuristics on total tokens & API usage cost.

There are a couple of relevant issues on Github about inaccuracies with these projections. Since Anthropic has never officially released the magic formula they use for subscription quota usage, the best we can do with this JSONL file approach is guess how much usage is remaining.

That wasn’t really good enough for me, and plus I knew there must be a better way. After all, the Claude Code tool itself can tell you your exact quota remaining, so we should be able to just reuse that for ourselves. I decided to try automating the built-in /usage slash command directly to get my usage data.

Using Expect

DISCLAIMER: After I implemented this, I noticed that using this script would occasionally increase my reportedly used quota by 1% even without any other Claude usage since last run. I’m not totally sure if this is just some delayed counting or if it’s really using quota, but some others on Reddit have reported that starting up a new Claude Code session burns some tokens for some sort of “warm start” feature.

The Claude Code CLI² is built with a JavaScript framework called Ink, which uses React to handle the UI. Unfortunately, this tool doesn’t have any sort of claude --usage flag support; the only way to get your usage is to launch Claude Code and then run the /usage slash command.

There’s this handy unix utility called expect that’s designed to help script/automate interactive applications like this. It allows you to easily wait for certain output, send an input to the program, and so on. Automating the Claude Code tool this way is relatively simple.

#!/usr/bin/env expect -f
set timeout 10

# Show the output to the user
log_user 1

# Start Claude Code in interactive mode
spawn claude

# Wait for the prompt ready signal
expect {
    timeout { puts "\nTimeout waiting for Claude Code to start"; exit 1 }
    -re "\\?1004h" { }
}

This doesn’t do much other than configure the timeout and output settings, and then starting a new Claude Code instance. The neat thing is this expect block, which uses a regular expression -re to wait for the ANSI 1004h escape code (which is an “enable focus events” command) that Claude emits when it’s ready.

Next is to send our /usage slash command.

# Give it a moment to be fully ready
sleep 0.3

# Type /usage
send -- "/usage"

Initially I tried to just send /usage \r, but this just appeared in the Claude Code CLI input field as the text of the slash command with a newline after it, as if I had hit Shift+Enter instead of actually submitting the text.

--------------------------
| /usage                 |
|                        |
--------------------------

After some debugging, it seems like this is because typing /usage causes this autocomplete window to appear, and hitting enter was possibly just selecting the entry from the autocomplete menu instead of actually submitting the command.

Instead, I found hitting escape closes this autocomplete menu, after which we can actually submit the slash command and get it to run.

# Wait for the autocomplete menu to appear
expect {
    timeout { puts "\nNo autocomplete menu appeared"; }
    -re "/usage.*Show plan usage limits" { }
}

# Dismiss the autocomplete by pressing Escape
send -- "\033"

# Small delay
sleep 0.1

# Now send enter
send -- "\r"

Now our /usage slash command is sent! We just have to wait for everything to load, and then we can exit.

# Wait for the actual usage data to be displayed (not just "Loading")
expect {
    timeout { puts "\nTimeout waiting for session usage data"; exit 1 }
    -re "Current session.*used.*Resets" { }
}

# Then wait for week data AND reset time to fully load
expect {
    timeout { puts "\nTimeout waiting for week usage data"; exit 1 }
    -re "Current week.*(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)" { }
}

# The script will exit and kill the claude process automatically
exit 0

Running it, you get to see the usage report immediately - rather than manually starting Claude Code, waiting for it to load, and sending the slash command yourself.

This is what it looked like before my redesign. Functional and not terrible, but to me it looked like a boring wall of text with each post stacked on top of each other like this.

The Grid

Beyond just moving the non-title text (date and tags) to a line below the title, I wanted to give it a little flair. I had the idea of using a CSS grid layout to put the date in a column to the left, then the title and tags subtext in the right column. On its own, this was fairly straightforward.

<div class="post-links">
    {% for post in site.posts %}
    <div class="post-date">
        <span class="post-subtext">{{ post.date | date_to_string }}</span>
    </div>

    <div class="post">
        <a class="post-link" href="{{ post.url }}">{{ post.title }}</a>
        <div><!-- tags go here --></div>
    </div>
    {% endfor %}
</div>

Beyond some styles for margins, fonts, and color, these are the relevant CSS styles to make this grid work.

.post-links {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1rem 1rem;
}

.post-date {
    text-align: right;
}

This grid-template-columns style sets the size of the two columns in the grid. max-content essentially sets the width for the first column equal to the width of the longest content of any row. The second value of 1fr sets the “growth” factor (similar to flex-grow) to make that column take up the remaining space¹.

It looks great!

Mobile Compatibility

…on desktop. Unfortunately, because our left column is a fixed size, it can take up ~1/3 of the screen width on certain mobile devices, which squishes the title column and makes things look off balance.

Instead, I’d rather have the left column start wrapping at some point to give the title more space. And I didn’t want to use @media queries, since that felt like a cop-out. Grid only!

Simple minmax()

To make our left column able to shrink and break, we can use minmax() to set a range of widths allowed in the column.

.post-links {
    display: grid;
    grid-template-columns: minmax(0, max-content) 1fr;
}

This works, but with a 0 minimum width, the left column could get really squished. Instead, we can use min-content to make the minimum width equal to the longest word² in that column, so it’s always at least a reasonable width.

.post-links {
    display: grid;
    grid-template-columns: minmax(min-content, max-content) 1fr;
}

We can simplify this further by using minmax(auto, auto) or even just auto, as these are generally equivalent.

.post-links {
    display: grid;
    grid-template-columns: auto 1fr;
}

According to the docs:

If used outside of minmax() notation, auto represents the range between the minimum and maximum described above. This behaves similarly to minmax(min-content,max-content) in most cases.

Better minmax()

While this does cause the date to wrap on very small displays, I noticed that on many larger phones the browser’s grid layout algorithm prioritizes shrinking the right column first, so the left column is still too wide. Ideally we could cap the left column to 20% of the screen (or parent) width. I tried using min() both on its own and within minmax(), but sadly this isn’t supported inside grid-template-columns.

.post-links {
    display: grid;
    grid-template-columns: min(max-content, 20%) 1fr; /* doesn't work! */
}

Instead, we can flip this around. A 20% maximum on the left column is roughly³ the same as an 80% minimum on the right column. So we could use minmax() on the right to let the right column shrink and grow as it pleases, but not smaller than 80%.

.post-links {
    display: grid;
    grid-template-columns: auto minmax(80%, 1fr);
}

As far as our right column is concerned, this minmax() makes it at least 80% wide on smaller displays, forcing the left column to wrap. Beyond that minimum, 1fr allows it to grow to fill the remaining space on large displays after the left column reaches its max width of max-content. Overall this works pretty much how we want!

Alternatively, fit-content()

After spending waaay too long trying to get minmax() to work exactly how I wanted, I read a little more of the CSS grid docs and found an even simpler solution: we could just use fit-content() on the left column. According to MDN, fit-content() essentially does min(max-content, max(min-content, argument)), which is almost exactly what we were looking for earlier with min().

.post-links {
    display: grid;
    grid-template-columns: fit-content(20%) 1fr;
}

Extra Left Padding

One drawback I’ve noticed is that just after the breakpoint where the left column starts wrapping, that column ends up with some extra padding on the left. I haven’t found a way to fix this without totally overhauling it to use some complex flex solution or @media queries, so if anyone has an idea let me know!

Searching Zillow

For whatever reason, Zillow seemed to be the best platform to look for these types of apartments. Maybe because people who buy and sell rental properties are familiar with the platform, so they also list them for rent there?

I was hopeful I would be able to apply some filter options to show only the smaller buildings, but for some reason this feature is totally missing from Zillow. You can select certain home types, but this wasn’t useful to me. Unfortunately lots of duplexes and smaller apartment buildings are listed as “apartments” alongside the big highrises. I didn’t want to limit myself to only renting houses or townhomes, which tended to be a little out of my price range.

They also have this filter option for apartment communities, which turned out to be the exact opposite of what I was looking for. I want to hide these “communities” but there’s no way to inversely check this box. It seemed like I would have to figure this out myself.

Editing URL Params

I wondered if I could do a little light hacking and modify the URL to include the filter I wanted, since it seemed like all the other filters were included as URL params. I pulled up both a regular search and one with the “communities” filter applied and copied the URLs.

After pasting the URLs into an online decoder, I could see a bunch of search params that were mostly meaningless to me. The two objects were almost identical, but with one difference. When the “communities” filter box is checked, it adds a value to filterState called "fmfb":{"value”:false}. I’m not sure why checking this box adds a false param, but this was definitely what I was looking for.

https://www.zillow.com/homes/for_rent/?searchQueryState={"isMapVisible":true,"mapBounds":{"west":-77.08456537521572,"east":-77.03984758651943,"south":38.83129148648382,"north":38.86047064887117},"mapZoom":15,"filterState":{"sort":{"value":"personalizedsort"},"fsba":{"value":false},"fsbo":{"value":false},"nc":{"value":false},"cmsn":{"value":false},"auc":{"value":false},"fore":{"value":false},"pmf":{"value":false},"pf":{"value":false},"fr":{"value":true},"fmfb":{"value”:false}},”isListVisible":true,"pagination":{},"usersSearchTerm":"","listPriceActive":true}

My hope was I could just flip this value to true and the search filter would exclude these highrises. Sadly, after manually editing the value and re-encoding it, navigating to the URL just showed me a regular search with both small and large complexes visible. There must be some backend validation happening, since it simply ignored my true value as if fmfb wasn’t there.

Scraping Zillow

My next idea was to scrape all of the properties both with and without the communities filter on, then subtract the second set from the first set. This should give us the properties that don’t appear when the communities filter is on.

I found a couple of semi-abandoned open source Zillow scraping projects online, but I didn’t have a lot of faith in them. I really didn’t want to get my account banned, and I figured Zillow probably has a lot of anti-scraping and anti-automation measures on their site considering how valuable real estate data is.

Plus, I was only looking at a relatively small number of places (around 800 total options, after applying some basic filters for price, bedrooms, and location) so I didn’t think full-fledged automation was necessary. It would probably be simpler to just view each search page manually and use my browser’s devtools to capture whatever JSON the Zillow APIs were sending.

The First Page

Zillow paginates its search results, so the 800 or so properties would show up across several pages. I thought each page would just be its own fetch request to get some JSON from the API, but the first page was different. When you initially load a Zillow search page, it loads a large HTML file that contains that first page’s data all within a <script> tag.

Later Pages

When you click on the next page button, it does hit the API and returns a JSON blob. The later page data is stored in a request called async-create-search-page-state. These two JSON objects contained some various extra bits of info that weren’t consistent between the two, but the actual search results data seemed to be stored under the listResults key in both cases.

Since the search data itself was formatted the same between the two, I decided to write a parser that could handle both an HTML and JSON file and spit out the JSON of just the search data.

Extracting JSON

The data we care about is contained between the opening and closing brackets immediately after the listResults string in our files. Initially I tried manually counting characters one by one, but unsurprisingly this didn’t perform well enough for even moderately large files.

Instead I resorted to using a StringScanner to extract our data. First, we skip to where we find the listResults: key in the file. The results sometimes had weird whitespace padding between various parts, hence the catch-all \s* in the regexp.

data = File.read(file)
scanner = StringScanner.new(data)
scanner.skip_until(/"listResults":\s*\[/)

Next, we count brackets to figure out where the array of search data ends. Every opening bracket adds one to our count, and every closing bracket subtracts. Our skip_until regex already captured the first opening bracket, so we start our count at one. Every opening bracket we encounter should have a corresponding closing bracket, so we continue in our loop until our bracket count returns to zero.

bracket_count = 1
while bracket_count > 0
  case scanner.scan(/[^\[\]]+|\[|\]/)
  when '['
    bracket_count += 1
  when ']'
    bracket_count -= 1
  end
end

If you aren’t a regex wizard, here’s the simple explanation. Brackets are a reserved character in regex, so when we want a literal bracket we have to escape it like \[. The first part of the regex [^\[\]]+ says: match one or more + characters that are not ^ an open or close bracket \[\]. The second and third part |\[|\] says: or | match exactly one open \[ or (again) | match exactly one closing \] bracket.

The scan function returns what string it matched, so in the case of a bracket we adjust our counts, and for other text (the actual data in the JSON) we just ignore it for now.

Of course, parsing HTML with regex doesn’t come without punishment. For some reason our scanner would sometimes skip a few characters past the end of the last bracket, even though bracket_count was at zero and the loop ended. I didn’t really feel like spending a lot of time debugging, so I just wrote a small manual backtracking loop¹.

end_pos = scanner.pos
end_pos -= 1 while data[end_pos] != ']'

Now, we can snip out the part of the file that has the JSON we’re interested in, surround it in curly brackets (that’s how all JSON must be), and parse it directly.

start_pos = data.index('"listResults"')
json_array = data[start_pos..end_pos]
json_array.strip!
json_array = "{#{json_array}}"
parsed_results = JSON.parse(json_array)

In the full script I added some extra logic for error handling and logging to help me debug various parse issues I ran into. The full source code is linked at the bottom.

Finding Apartments

Since Zillow paginated the results earlier, each of our two searches (with and without the communities filter) consists of multiple saved files, which I placed in their own corresponding directories all-apts and community-apts. Now that we have our file parser, we just have to parse each of these files and combine the results. Ruby has a handy flat_map function that combines the arrays returned by parse_file() into one flat array, equivalent to doing .map{}.flatten(1).

all_apts = Dir.glob("all-apts/*.html").flat_map { |file| parse_file(file) }

We do this for both the all-apts and community-apts directories to get two different arrays. Then we filter out the apartments in all_apts by kicking out any elements that also exist in the community_apts array, which gives us our list of small buildings.

small_apts = all_apts.reject { |apt| community_apts.any? { |community| community["id"] == apt["id"] } }

Exporting to CSV

The last thing is writing our data to a CSV file so I could create a nice color coded spreadsheet with sorting & filtering. Some of the entries were missing some fields, so I just skipped adding those to the CSV.

CSV.open('output.csv', 'w') do |csv|
  csv << ['detailUrl', 'address', 'unformattedPrice', 'beds', 'baths', 'area', 'latitude', 'longitude']  # Header row
  small_apts.each do |apt|
      if apt['detailUrl'] && apt['address'] && apt['unformattedPrice'] && apt['beds'] && apt['baths'] && apt['area'] && apt['latLong'] && apt['latLong']['latitude'] && apt['latLong']['longitude']
        csv << [apt['detailUrl'], apt['address'], apt['unformattedPrice'], apt['beds'], apt['baths'], apt['area'], apt['latLong']['latitude'], apt['latLong']['longitude']]
      end
    end
end

Look at that beauty! Out of nearly 800 options in the original search we ended up with 85 in our small apartment spreadsheet. Much better than going through all of that by hand. Ultimately, we used this sheet to find a couple places to tour and finally choose the perfect apartment for us.

In the past I’ve created a couple of web apps with Sinatra (in Ruby), and deploying them was relatively simple. It required just installing the Phusion Passenger packages with apt, enabling the Passenger Apache module, and editing the apache config to include the app at a certain subdomain.

Unfortunately, it seems like nothing like this appears to exist for Go apps. One of the benefits of something like Passenger is that it automatically handles app startup (after, say, rebooting my server) and can restart the app automatically if it crashes for some reason. All nice to have, but for this small personal project I decided it doesn’t matter that much.

Running With Gin

Instead, I decided to find a quick and dirty solution to get my website up and running. Gin comes with a simple built-in web server, which we can run from the command line.

// api.go
func main() {
	router := gin.Default()
	router.StaticFile("/", "./index.html")
	router.GET("/stories", getTopStories)
	router.Run("localhost:8080")
}

$ go run .

From here, we can simply hit Ctrl+Z to suspend the program, then disown it and make it run in the background¹:

$ disown -h
$ bg

And voila, we have our web server as a background process running forever (at least, until it crashes).

$ ps x | grep go
 217490 pts/1    S+     0:00 grep --color=auto go
3934484 ?        Sl     0:37 /usr/local/go/bin/go run .
3934514 ?        Sl     0:24 /tmp/go-build1016660365/b001/exe/api

Configuring Apache

Currently, our web app is only accessible from localhost:8080, but we want to make it available to the world! To do this, we’ll use the Apache proxy module to redirect traffic from a certain public subdomain to our local Gin server.

First we just enable the module:

$ a2enmod proxy 
$ a2enmod proxy_http

Next, we’ll create a new apache config for our subdomain and tell it to proxy all of our traffic to our Gin server²:

<VirtualHost *:80> 
        ProxyPreserveHost On
        ProxyRequests Off
        ServerName hn.caleb.software
        ProxyPass / http://localhost:8080/
        ProxyPassReverse / http://localhost:8080/
</VirtualHost> 

And bam, after restarting Apache, our site is now live at hn.caleb.software!

Front Page News

I like Hacker News. For all of its warts (looking at you, crypto bros) it’s a great place for finding interesting tech articles and blogs. The site guidelines are pretty straightforward, saying that “if they’d cover it on TV news, it’s probably off-topic.” While the posts and discussions are usually high quality, this doesn’t stop the occasional ragebait drama-politics from popping up on the front page from time to time.

Domain Categorization

I’ve noticed that most of the stories I don’t care about tend to come from the same hundred or so websites. The other day I had an idea: what if I could build a simple frontend for HN that would allow me to sort each post (and its domain) into a few categories? Then, if I’m just in the mood for some indie tech blog articles I could just the front page to only show those types of stories?

… and then I can use these domain classifications to train a neural network on keywords found in the article titles, maybe create a latent Dirichlet allocation, and then use that to preemptively predict what category a new post should… hold on, let’s just start with the first idea.

Caleb’s HN Reader

So I made a tiny REST API in Go which basically just acts as a proxy for the HN API¹, and a simple webpage which displays all of the stories alongside a little select box to categorize each one. It stores the sorted domain list in the browser’s local storage, so anyone can use it without me needing to deal with user accounts or a database. And yes, I spent exactly seven minutes creating the CSS styles for the page. Isn’t it beautiful?

Right now there’s just a handful of default categories: Technology, Miscellaneous, Business, Science, Projects & Companies, and Garbage. There’s also a settings page where you can import/export your domain lists for sharing as well as modify what categories are available.

I’ll release more details on the technical implementation and some things I learned pretty soon. In the meantime, you can check out the source yourself here on Github.

$ cd ~

is automatically expanded to

$ cd /home/caleb

which can be a very convenient shortcut!

In Ruby

Sometime in 2015², I had switched my computer over to Debian only a few months prior and I was just getting into programming with Ruby. I don’t remember exactly what I was trying to accomplish that day, but I had a script that was checking for the existence of a directory under my home folder and creating it if it was missing³:

Dir.mkdir('~/foo/bar') unless Dir.exist?('~/foo/bar')

Of course, the problem here is that Ruby, unlike Bash, doesn’t inherently support tilde expansion. Instead, you have to explicitly call something like File.expand_path() to handle the expansion. In retrospect this seems obvious, but to a young programmer I’m sure you can see why I expected this to “just work” here.

The first time I ran this script, it correctly detected the directory didn’t exist and went ahead and created it. But instead of creating the directory under my home folder, it created it right inside of the project directory I was currently working in… with the directory being named the literal ~.

And this is the point where I screwed up big time. I fixed my script, and then tried to get rid of that weird tilde folder inside my project directory, like so:

$ rm -rf ~

The command took a few seconds to run, which I thought was strange at first… until the realization hit me. I quickly spammed Ctrl+C to cancel the command, but it had already blown away half of my home directory.

Moral of the story: trying to learn a new programming language after 2 a.m. is a bad idea. Oh, and make backups.

Of course, a reader might find a link to a later entry in the series and want to start from the beginning, so it would be nice to link all of the other posts in the series at the top of the page. I could do all of this manually, but as the series gets longer and longer I would have to remember to go back and update every other post in the series to add the new link. I felt that long-term this would be a pain to maintain and could lead to broken or missing links.

Instead, this should be pretty easy to automate with Jekyll, which is the static site generator I use to publish my blog.

Frontmatter YAML

Each blog post on my website starts as a markdown file with a frontmatter header at the beginning, which is just YAML. We can add our own attribute to the post’s frontmatter to keep track of what series it belongs to. We’ll simply call the variable series and set it to whatever string we want. Then, we can set the same series value on other posts to link them together, just like the one linked at the top of this page¹.

---
title: "Publishing A Blog Series With Jekyll"
series: jekyll
---

... rest of the post

Liquid Templates

Next we’ll add some template logic to the layout page for our blog posts. Jekyll uses the Liquid template language, which allows us to use conditional logic and loops right inside our markdown files.

If the page has the series attribute, we’ll insert the div that contains the links to other posts in the series. After that, we just iterate through each post on the site, and add a link to any post that has a matching series value. We also skip the post if the title matches the current page’s title, since including a link to the current page would be pointless.

{% if page.series %}
  {% for post in site.posts %}
    {% if post.series == page.series %}
      {% unless post.title == page.title %}
      <a href="{{ post.url }}">{{ post.title }}</a>
      {% endunless %}
    {% endif %}
  {% endfor %}
{% endif %}

HTML Details

This works great so far, but for a long series this could add a lot of content to the top of the page before the actual post starts. Instead, I decided to hide all of the related posts within an HTML <details> section which is collapsed by default.

<details class="series">
  <summary>Related Posts</summary>
  <!-- list of posts goes here -->
  <a href="#">Another post in this series</a>
  <a href="#">Another post in this series</a>
</details>

I added some CSS styles to the section to change the font size, weight, and color. I also decided to change what the expand/collapse icon looked like since I thought the default triangle was boring.

details > summary {
    list-style-type: '[+] ';
}

details[open] > summary {
    list-style-type: '[\00AC] ';
}

That \00AC code point represents the not sign. But other than because I think boolean algebra notation looks cool, why use this? I tried a regular - as well as an en- and em-dash, but these symbols weren’t the same length as the + symbol. As a result, the “Related Posts” text would shift left/right every time you clicked on it and that really annoyed me.

There’s probably a better way to do this to ensure the symbols are the same width across different fonts too, but I couldn’t figure it out and gave up after a couple minutes. The summary::marker pseudo-selector doesn’t support the width property (or many properties in general).

All of my blog’s posts are generated from markdown files by Jekyll. To insert a paragraph separator in markdown, it’s just three dashes on their own line.

---

This inserts an <hr> element into the generated HTML, which by default just looks like a straight horizontal line (boring!) It’s pretty easy to add some custom styling to it via CSS - specifically, we can remove the line by removing the border attribute, then use the content attribute to make whatever characters we want appear in its place¹.

hr {
    border: none;
}

hr::before {
    content: '* * *';	
    display: block;
    text-align: center;
}

I didn’t like how close together the asterisks were, but adding additional spaces in between the characters like content: '* *' did nothing². I tried adding some &nbsp characters to the content, but the special characters weren’t being interpreted and the literal string &nbsp simply appeared on the page. Finally, I figured out we can use the escaped unicode value of an nbsp to add space between the characters³.

content: '*\a0\a0\a0\a0\a0*\a0\a0\a0\a0\a0*';

And voila!

1. Must be free
2. Should respect visitor’s privacy (no sharing data with advertisers)
3. Minimal performance impacts

Items #1 and #2 were usually mutually exclusive, except for some open source projects. Those projects generally seemed like more of a hassle to set up than what would be worth it. A lot of options also required including some extra javascript files, which I wanted to avoid too.

In the end, I settled on just using the logs generated by Apache web server and wrote a small ruby script to parse those log files.

Apache Logs

The default Apache logs include a good amount of information, but you can also configure Apache to log some additional information that’s useful for site analytics such as the Referer¹ and User-Agent header fields. You can find the Apache log configuration documentation here.

This is a snippet of my personal blog’s Apache config file with a custom log format:

# /etc/apache2/sites-available/caleb.software.conf

<VirtualHost *:80>
        ServerName caleb.software

        ErrorLog ${APACHE_LOG_DIR}/error.log

        LogFormat "%t %h %U %>s %{Referer}i %{User-Agent}i" blog
        CustomLog /var/log/site/custom.log blog
</VirtualHost>

First, we define a custom LogFormat named “blog” and then set the CustomLog file path and format. Here’s what each of the custom log flags mean:

• %t is the time of the request
• %h is the requester’s IP (or hostname if you turn on reverse hostname lookups)
• %U is the page requested (like “/index.html”)
• %>s is the request status code (e.g. 200)
• The %{xxx}i are specific request header fields

Make sure Apache has permission to write to the custom log file’s destination. I just created an empty file with touch custom.log and then chown‘d it.

Ruby Script

I wrote an accompanying ruby script to process these log files and get some insights from them. Since my blog is a static site built with Jekyll, the ruby script just spits out a markdown file which gets built into the final site. The script is only about fifty lines long, and you can find it here on Github Gists.

The resulting markdown file is also pretty simple, with just a couple of tables listing the most popular pages (including total views and number of unique viewers) and the most frequent referrers. Unique viewers are determined by combining the User-Agent string with the requester’s IP address… definitely not a perfect method, but good enough to give us a rough estimate.

Cron Job

Finally, the ruby script is run every hour by a simple crontab entry:

0 * * * * cd /var/www/site ; ruby analysis.rb && jekyll build

Roadmap

In the future, I have a few extra features I want to add to the script. It would be nice to see a chart of the number of viewers of each page over time. It would also be cool to see which posts result in the most email signups and engagement.

I played around with trying to implement this with an iOS Shortcut, but it turned out to be a little trickier than I expected and I had to get a little creative. I ended up using a combination of a shortcut and an automation (also via the Shortcuts app¹) plus an iOS Calendar to schedule messages to be sent later.

A New Calendar

First, we create a new calendar within the iOS Calendar app. I titled mine Delayed Messages here. We will use this calendar to store messages to be sent later, with individual calendar events storing the message text and recipient².

Under the “Calendars” menu you can toggle which calendars are shown, so you can hide this new Delayed Messages calendar if you don’t like looking at these messages on your agenda.

The Shortcut

A shortcut is a way to automatically do some tasks on iOS at the click of a button. They can save you a lot of time if you find yourself manually doing the same actions over and over again multiple times a day.

Below, you can see the structure of the shortcut. It’s pretty straightforward: first, we grab the text content of the message, pick what date we want to send the message, and we ask the user to choose a phone number from their contacts.

Then we create a new calendar item in our Delayed Messages calendar with the information. The title of the calendar is the recipient’s phone number, and the Notes field contains the text of the message.

If you want to try it out yourself, you can get the shortcut here (just remember you have to create the Delayed Messages calendar yourself first).

The Automation

An automation is very similar to a shortcut, as it allows you to automatically do things - the difference is that while a shortcut runs immediately when we click on it, an automation is scheduled to run at a certain interval (such as once a week).

Unfortunately, the most often an automation can be run is once a day at one specific time, so I couldn’t make it send my messages at different times throughout the day³. I settled on just sending all of the delayed messages at 9am, since I figured most people are awake at that point (sorry to my west coast friends!).

First, our automation will grab any events in our Delayed Messages calendar that need to be sent today.

Then, we loop through each of the calendar events, and send the messages to the listed recipient.

Finally, we delete the calendar events, though you could skip this step.

I turned off the “ask before running” and “notify when run” options just to make it a little easier. I’m also not sure how iOS automations handle cases where the automation wasn’t able to run (e.g. your phone is off/dead at 9AM on a certain day), so it might be a good idea to modify the automation’s Find action to fetch all calendar events at earlier dates as well to avoid a message from getting skipped (better late than never?)