ScottWillsey

Astro RSS Compiled Content Revisited

Sat, 04 Apr 2026 08:10:00 GMT

In the past I wrote about full-text RSS in Astro, and using sanitize-html on the blog post content to escape and filter html tags. This is or was the recommended procedure when creating full-text RSS feeds according to Astro’s documentation on RSS feeds, and worked fine until recently.

At some point, sanitize-html started breaking when htmlparser2 was updated (and sanitize-html apparently wasn’t). I started getting the following compilation error:

My temporary solution was to pin htmlparser2 to version 8, which I didn’t love, especially since I have multiple Astro sites, and since it would be hard to know when an update would fix the issue.

However, after this problem persisted for awhile, I started wondering what was going on. Surely it must be affecting other people making Astro sites too, but I didn’t see any mention of it at all in the Astro Discord. I posted a question about it and got crickets until today, when a contributor named Armand responded with several helpful bits of information.

First off, he mentioned that instead of sanitize-html, he himself uses ultrahtml to handle the html cleanup and parsing. He even provided an example of it in use for me: astro-blog-full-text-rss/src/pages/rss.xml.ts at latest · delucis/astro-blog-full-text-rss.

He went on to test my issue and pointed out that my code was calling the async function post.compiledContent() without await, and this was breaking htmlparser2 as it received a Promise object from sanitize-html, which was passing it on after receiving it from me:

1
content: globalImageUrls(
2
    site.url,
3
    sanitizeHtml(post.compiledContent(), {
4
    allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
5
}),

I’m not 100% sure why this wasn’t breaking in htmlparser2 8.0 and prior, but in fact it WAS resulting in the expected content not being output at all. Instead, where the full-text content should have been for each post in the RSS feed, was an empty <content:encoded /> tag. So the fact that I was not awaiting the return result of the async post.compiledContent() already WAS causing me issues, and I hadn’t even noticed.

At any rate, by the time he informed me of how stupid I was (he didn’t phrase it that way, but I am), I’d already implemented ultrahtml and moved on.

1
import rss from "@astrojs/rss";
2
import { experimental_AstroContainer as AstroContainer } from "astro/container";
3
import { getCollection, render } from "astro:content";
4
import { transform, walk } from "ultrahtml";
5
import sanitize from "ultrahtml/transformers/sanitize";
6
import { rfc2822 } from "../components/utilities/DateFormat";
7
import site from "../data/site.json";
8

9
export async function GET(context) {
10
  let baseUrl = site.url;
11
  if (baseUrl.at(-1) === "/") baseUrl = baseUrl.slice(0, -1);
12

13
  const container = await AstroContainer.create();
14

15
  const posts = (await getCollection("posts"))
16
    .filter((post) => post.data.draft !== true)
17
    .sort(
18
      (a, b) =>
19
        new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
20
    );
21

22
  const items = [];
23
  for (const post of posts) {
24
    const { Content } = await render(post);
25
    const rawContent = await container.renderToString(Content);
26
    const content = await transform(rawContent.replace(/^<!DOCTYPE html>/, ""), [
27
      async (node) => {
28
        await walk(node, (node) => {
29
          if (node.name === "a" && node.attributes.href?.startsWith("/")) {
30
            node.attributes.href = baseUrl + node.attributes.href;
31
          }
32
          if (node.name === "img" && node.attributes.src?.startsWith("/")) {
33
            node.attributes.src = baseUrl + node.attributes.src;
34
          }
35
        });
36
        return node;
37
      },
38
      sanitize({ dropElements: ["script", "style"] }),
39
    ]);
40
    items.push({
41
      title: post.data.title,
42
      link: `${baseUrl}/${post.id}`,
43
      pubDate: rfc2822(post.data.date),
44
      description: post.data.description,
45
      customData: `<summary>${post.data.description}</summary>`,
46
      content,
47
    });
48
  }
49

50
  return rss({
51
    title: site.title,
52
    description: site.description,
53
    site: context.site,
54
    xmlns: {
55
      atom: "http://www.w3.org/2005/Atom/",
56
      dc: "http://purl.org/dc/elements/1.1/",
57
      content: "http://purl.org/rss/1.0/modules/content/",
58
    },
59
    items,
60
  });
61
}

The bottom line is, if you are doing full-text RSS feeds in Astro and you do use sanitize-html or ultrahtml, don’t be like me and send a Promise to things that want the Promise’s returned object instead.

2026 and the Search for Meaning

Fri, 26 Dec 2025 08:10:00 GMT

I clearly need a change in 2026. It’s obvious no one cares about any of the things I write here, which is fine. It’s also clear that I don’t care about a lot of them anymore either, which is also fine. So the question is, what should I write about on this blog that I will continue to care about and that other people might care about too?

I think 2026 is going to be the year of honesty. That doesn’t mean I’ve been dishonest, far from it. It just means that I’m going to focus on things that actually matter to me on this site, in terms of technology, rather than coming up with topics that I think I should write about for some reason. Clear as mud, right?

This site has, in recent years, been solely focused on my use of technology, mainly Mac and web related. I doubt that’s going to change much. I don’t want to write about personal stuff or politics or Tonkatsu recipes here (even though writing about Tonkatsu recipes really is a winner in any situation). I think what I need to do is quit trying to write series about topics, like replacing Raycast with Spotlight, and write more one-offs. When I do write follow-up articles, I’ll try to handle it differently than making big official series of articles.

In fact, I’ve quietly rid the site of lists of series and all post frontmatter referring to series. It’s gone. I don’t need it. YOU don’t need it.

Maybe it’ll turn out I still have nothing of interest to say, and you still don’t care, and then I’ll just quietly quit posting and no one will notice or care. I don’t know. But mainly I think I need to figure out what I really enjoy writing about, in terms of technology,¹ and do that.

Stay tuned… if you care to. 🙂

There’s that phrase again! ↩

Default Apps November 2025

Sat, 29 Nov 2025 13:00:00 GMT

I guess it’s that time of year again.

This was all started when:

Hemispheric Views podcast had the Duel of the Defaults! episode, and then Robb Knight said, hold my Hemispheric Views - App Defaults beer.

Well, that was 2 years ago. Here’s my 2023 list that made Robb’s list, and here’s my 2024 list.

Without further ado, here’s my 2025 list, with additions bolded and things I don’t use anymore crossed out.

Official Categories

📮 Mail Server
- Fastmail
- Gmail
- Proton: Privacy by default | Proton
- Outlook for business
📨 Mail Client
- Apple Mail
- Outlook for business
📝 Notes
- Obsidian - Sharpen your thinking - for personal notes
- Notion - for work sharing with a colleague only
- Apple Notes for family note sharing
- BBEdit
- ~~Bear for all my writing and podcast show notes~~
- ~~Raycast Floating Notes Window~~
✅ To-Do
- Reminders App
📷 iPhone Photo Shooting
- iOS Camera
🟦 Photo Management
- Photos App
📅 Calendar
- BusyCal - Professional Calendar App for Mac and iOS | Busy Apps by Beehive
- Dato — Sindre Sorhus
- CalendarBridge for work calendar sync and scheduling
- Apple Calendar
📂 Cloud File Storage
- iCloud Drive
- OneDrive – for business
📖 RSS
- ~~Reeder~~
- ~~Reeder Classic~~
- ReadKit - Have all your reading in one place
👩‍🦲 Contacts
- Apple Contacts App
🌐 Browser
- Safari
- Chrome – for web work and other business work
💬 Chat
- Messages
- Signal
- Discord
- Slack
🔖 Bookmarks
- Anybox
📑 Read It Later
- Safari Read Later
📜 Word Processing
- Obsidian - Sharpen your thinking
- ~~Bear for all my writing and podcast show notes~~
- ~~Pages~~
- ~~Google Docs~~
- Microsoft Word
📈 Spreadsheets
- Excel
- Numbers
📊 Presentations
- Keynote
🛒 Shopping List
- Reminders
🍴 Meal Planning & Recipes
- Mela
💰 Budgeting and Personal Finance
- Spreadsheet
📰 News
- RSS
- Mastodon
- BlueSky
- News from Stonking
🎵 Music
- Apple Music
🎤 Podcasts
- Overcast
🔐 Password Management
- 1Password
- Apple Passwords/Keychain

Additional Categories

💻 Mac Utilities
- Actions — Sindre Sorhus
- CleanShot X for Mac
- Dato — Sindre Sorhus
- FastScripts 3
- Folder Peek — Sindre Sorhus
- Front and Center
- Hand Mirror, for Mac
- Hyperspace
- Little Snitch — Network Monitor and Application Firewall for macOS
- One Thing — Sindre Sorhus
- Orchard - Bridge AI Assistants to Your Apple Ecosystem
- Paste – The Best Clipboard Manager for Mac, iPhone, and iPad
- Rectangle Pro
- Scratchpad — Sindre Sorhus
- Shortcutie — Sindre Sorhus
- Supercharge — Sindre Sorhus
- SwitchGlass
- System Color Picker — Sindre Sorhus
- Tailscale · Best VPN Service for Secure Networks
- TripMode - Save data, browse faster
🧑‍💻 Programming & Text Manipulation
- Visual Studio Code
- BBEdit
- Xcode
- Claude Code
💻 Terminal
- Ghostty
- ~~Warp~~
📸 Photo Editing
🔷 Vector Graphics
- ~~Affinity Designer 2~~
🧠 AI
- ~~Raycast AI~~
- ~~GitHub Copilot~~
- Claude
- Claude Code
- ChatGPT
- Orchard - Bridge AI Assistants to Your Apple Ecosystem

New Face!

Wed, 19 Nov 2025 08:10:00 GMT

Look, a new face! No, not mine, unfortunately for those who know me in person. The SITE HAS A NEW FACE!! It’s new. It’s all new. Or as Peter would say, “It’s the same. Exactly the same.”

It is much the same, but huge chunks of the layout have been reworked, the fonts are different, the colors are different, and I like it much better.

Below are some of the highlights.

Tailwind CSS

I spent a long time hating Tailwind CSS just for existing. It was one of those irrational tech biases and I kind of knew it. I didn’t know how just how much it was irrational though, until I took an example photo gallery that used tailwind and modified it for my Photos site.

What. A revelation.

Tailwind is nice. It’s so much easier to fix responsive layout issues, tweak things quickly, not get lost in huge global css files (although I still do have more in global.css than I expected).

I went from a single column view on all pages to having a sidebar again. The sidebar is more useful this time, including search and several good links, and it flows to the bottom of the page in responsive layout views. Along with this, I went to a wider max-width for the page since, let’s face it, we who care about our sanity and enjoyment of life all have high resolution monitors.

Typography

I’m using SimpleBits Cartridge font for my headers, Mochiy Pop One for Japanese, and Atkinson Hyperlegible Font for body text. I really like Hyperlegible – it makes for a super clean look and a comfortable reading experience.

Speaking of typography, I got rid of the icons-only site menu. For one thing, the icons weren’t cohesive and I wound up simply not liking their look very much. For another thing, they do require work on the part of the visitor to decipher them, and that’s no fun. Now I use icons much more sparingly, and only as a visual garnish – no thinking required.

Enjoy

I hope you enjoy the look. I really enjoyed working on it. I am not a designer by any stretch, but I’m also an indieweb advocate and participant, and I think part of the charm of the indieweb is the non-corporate look of people’s personal sites. Long live the silly and unprofessional!

Spotomation, Part 3 – Snippety Snippets

Sat, 01 Nov 2025 08:10:00 GMT

The Goal – Replacing Raycast with Spotlight and Companion Utilities
Raycast Snippets
Snippety for Mac and iOS
Conclusion

The Goal – Replacing Raycast with Spotlight and Companion Utilities

In Part 1 of this series on replacing Raycast with Spotlight, I explained that macOS Tahoe’s greatly enhanced Spotlight led me to replace Raycast with Spotlight plus a few additional apps and utilities. Raycast purists might be shouting already, thinking I’ve lost both my mind and the challenge, since this approach requires running more apps than sticking with Raycast.

Fair enough. But should I care? More important than having everything in one giant app is the user experience and the ultimate results. With that in mind, I will tackle this journey one use case at a time, comparing what I used under Raycast with what I use now for the specific need. This time, we’re tackling Snippets.

Raycast Snippets

I’m not going to lie, I wish Raycast would decide what they want to call their Text Expander: Snippet Management for Mac feature. Usually it’s referred to as “Snippets”, but on their website, they call it “Text Expander Snippet Management for Mac”, “Text Expander Snippet Extension”, and just plain “Snippets”.

I’m calling it Snippets. Screw those guys and their inability to pick one. 😄

Basically, Snippets are what they sound like: stored snippets of text. You can look up snippets in Raycast itself, or trigger them inline in your document by using keywords you can specify per snippet.

Raycast Snippets is really nice in the sense that it’s built into Raycast. They have a couple nice tutorials on YouTube for using the feature, focusing on the ability to trigger them inline without having to open Raycast at all (just like a proper, uh, Text Expander tool.)¹

Snippets in Raycast has some very nice features. Dynamic Placeholders are quite versatile and very powerful once you’ve thought through some use cases. They’re great for inserting the current date, placing the cursor wherever you want in the pasted text in the target document, or grabbing selected text from the foremost app and putting that inline in the snippet output. You can even include a snippet inside another snippet.

Thanks to its feature set, I figured that replacing Raycast Snippets would not be easy. Fortunately, someone else needed advanced snippets too, and they knew how to program.

Snippety for Mac and iOS

After looking at a few other options I won’t list here, I stumbled across an app I’d never heard of (and chances are you haven’t either). It’s called Snippety - Productivity App for macOS.

Snippety is powerful. It can do scripts. It can do inline text expansion. It can do automation-based text expansions. And it can do collaboration, with nothing stored anywhere except in iCloud.

Basic UI

Snippety operates on the “appear by triggering a keyboard shortcut” method in its most basic form. ⇧⌘␣ (Shift-Command-Space) pops Snippety open to show its various folders and snippets.

The folders on the left are optional categorization folders that you can create, delete, and edit. You can narrow a snippet search by selecting a folder to only return matching results from that folder. You can also use ⌘-1 through ⌘-9 to choose any of the first nine of them.

Snippet Use

Once you’ve found the snippet you want, you can highlight it and hit return and it will enter the snippet wherever the cursor is on whatever app you were using when you triggered Snippety to open.

Popping Snippety open and inserting things this way is great, but you can also use it as a text expander. Snippety lets you set a key for any snippet, which is a great way to search for them in the Snippety UI, but also works as a text expansion trigger when combined with whatever character you have set as the text expansion trigger in Snippety Settings.

Below you can see that I have a date snippet called Date YYYYMMDD which generates a datestamp for me with today’s date in the year month date format like this: 20251101. That’s 2025, month 11, day 1 (it is indeed the 1st of November, 2025, as I write this.) You can also see that I have a key set for it which is the word “dates” (standing for date short).

Because I have my Snippet Expander Trigger character set to be a preceding ”!” character, now whenever I type the string “!dates”, it expands out into today’s date written as YYYYMMDD. I used it above to show the output of today’s date written this way, which is 20251101. There, I just used it again!

Scripts

Ok, this is all great, but so far none of this does anything Raycast Snippets can’t do. That wouldn’t bother me, because the goal here is to replace Raycast with Spotlight and any macOS utility apps needed to give me equivalent capabilities. But in fact Snippety does go further.

In Snippety, you can run command line commands that run the command and give you the output as the snippet. For example, I have a snippet called “Transform URL to exceptions RegEx” which I use when I want to take a URL I’m given by someone and convert it into a specific regular expression that I put in a firewall block exceptions list. You can see the big long command in the snippet below:

1
{@script|Selection|echo %@ \| perl -pe 's\|^https?://(?:[A-Za-z0-9.-]+\.)?([A-Za-z0-9-]+)\.([A-Za-z]+)/?.*$\|^https?://([A-Za-z0-9.-]*\\.)?$1\\.$2\|'|YES@}

Basically it takes whatever text you have selected in the foreground app and runs a Perl one-liner on it. The one-liner is a substitute expression. It takes the input url in the form https://scottwillsey.com and outputs the string ^https?://([A-Za-z0-9.-]*\.)?scottwillsey\.com, which is a regular expression I can use to add to a specific firewall’s exceptions list. Since I think everyone should have the ability to read scottwillsey.com all the time, I think this is a good thing to do.

Because it relies on having an existing text selection highlighted, I can’t use a text expansion, but I can select my URL, hit ⇧⌘␣ (Shift-Command-Space) to open Snippety, start typing the Transu2Reg key, and hit return on the snippet to transform my URL into the regular expression I want.

Conclusion

There are some idiosyncrasies to the Snippety UI that are minor annoyances to me, such as the fact that the UI isn’t really meant to remain open but still needs to be used to configure settings and manage snippets and folders, but those are minor. Overall I find Snippety to be an upgrade on Raycast’s Snippets feature, even if it does take a slightly different way of thinking to make best use of it.

Check it out at https://snippety.app if you’re in the market for a good snippet and text expander app, whether you’re coming from Raycast or not. I think you’ll wonder why no one is really talking about this app.

Total sideshow here, but holy cow how far the original has TextExpander fallen. I’m not even going to do it the favor of linking to it. You can take the time if you’re really that bored. ↩

Spotomation, Part 2 – Replacing AI

Thu, 18 Sep 2025 08:10:00 GMT

The Goal – Replacing Raycast with Spotlight and Companion Utilities
Raycast AI
Non-Raycast AI Options
The Future
Conclusion
- Additional Reading

The Goal – Replacing Raycast with Spotlight and Companion Utilities

Raycast AI

Models

I already know that Raycast AI alone is a factor that will deter many from leaving Raycast in favor of Spotlight. Raycast emphasizes AI integration, whereas Spotlight has zero AI integration whatsoever. If you decide not to use Raycast in favor of Spotlight, you will be looking for AI app and integration options. There are both advantages and disadvantages to this, which I will cover later.

With the free Raycast plan, you get 50 AI messages per month. The $8/mo Raycast Pro unlocks many more models from various providers and increases token quotas (though I can’t tell what the exact limit is). There’s also an Advanced AI add-on to Raycast Pro for another $8/mo (totaling $16/mo), which provides access to the best recent models from multiple providers.

If you want to use a wide variety of models from multiple vendors, you’re unlikely to switch to Spotlight plus a separate AI solution, since you’d have to subscribe to multiple model providers or APIs. There’s also value in spending $192 per year to access that breadth of models and capabilities.

Integration

Beyond model access, Raycast integrates AI right into its own UI. Quick AI can be invoked inline in Raycast, enabling rapid questions and answers. QuickAI can search the web, and you can also save and execute chat presets.

Furthermore, Raycast has an AI chat app that looks a lot like the ChatGPT or Claude Mac apps. It has chat history, model selection, and you can even switch models in the middle of a chat. It’s very well done.

Extensions and MCP

One area where third-party LLM integrators have often been ahead of companies like OpenAI and Anthropic is in extensions, MCP, and other methods for enabling integrations with services and local apps and utilities. Raycast is no exception.

Raycast lets you use extensions that are updated to work with AI simply by @ mentioning them. Their AI page provides an example: stating “@calendar block my day from 4 pm” to have Raycast AI update my calendar using the Raycast calendar extension. That’s very powerful, and presumably the number of Raycast extensions configured to work with Raycast AI will continue to grow.

Even more powerful is Raycast’s integration with MCP servers. Honestly, just typing this out makes me realize how big of a loss it would be to many people to have to dump Raycast AI. While there are likely hiccups with its MCP integration, MCP in general is fiddly, so it’s no worse than setting up MCP with Claude, and much better than setting it up with a ChatGPT account. The current state of Raycast AI is a big win for Raycast.

Caveats

There are some aspects of Raycast AI that I’m not a huge fan of. One stems from my aversion to constantly managing models. Some people enjoy choosing a different model for every task and comparing them ad nauseam. I don’t. I just want to get stuff done, and if a model can’t do the things I actually use LLMs for, I won’t use it.

With Raycast AI presets and AI actions, you have to decide in advance which model will be used, and then you have to manually change the model for each preset and action whenever new models come out or you change your mind. It’s mind-bogglingly tedious and painful.

Here’s a screenshot of an AI command I was setting up last year. You can see that model choice is a setting, and that setting persists until YOU change it.

I don’t want to live having to manually manage and update AI models for a thousand actions, and I don’t think most other people actually do either.

The end result is that although Raycast AI is easier and more full-featured to get into initially than a roll-your-own solution or using Claude or ChatGPT, it also requires a substantial amount of maintenance and organization unless you just use it for basic AI Quick Chat and AI chat sessions. Raycast definitely needs to fix this, because they’ve created a management nightmare for AI power users.

Non-Raycast AI Options

If you’re going to ditch Raycast in favor of Spotlight, it’s very simple: you’ll have to find your own alternate AI tools. If you want access to tons of models deeply integrated with your tools and workflows, you’re unlikely to find something you like as well. It’s a simple test: if you want the most models possible combined with as many easy-to-use integrations as possible, keep Raycast.

If you’re like me and you want one or two of the best models with the fewest hallucinations, the ability to get CLI and chat tools in one plan, and as many integrations as possible, you can get by with a Claude.ai account, or possibly a ChatGPT account with occasional OpenAI API use.

As of this writing, the GPT-5 models (including the new GPT-5 Codex model) are much better and less annoying than Anthropic Claude counterparts. This is unfortunate, because Claude is a better product, even if it isn’t as good a LLM anymore. MCP integrations work the way you’d want them to, unlike the macOS ChatGPT app, which requires remote-hosted MCP servers only. Fortunately, OpenAI’s Codex CLI app doesn’t have this limitation on which MCP servers it can use, but that isn’t helpful for most ChatGPT sessions.

Right now I have both Claude and ChatGPT accounts, as well as an OpenAI API account that I make very little use of. The truth is, I haven’t really used Claude recently given the much better results I get from the current GPT-5 models.

If you’re wondering how I live without all the integrations provided by Raycast MCP and AI Extension support, the only reason it’s possible is that I never relied heavily on the extensions available when I installed macOS Tahoe and switched to Spotlight, and I’m pretty sure MCP servers weren’t supported in Raycast at that point. So I’m not really losing a lot in terms of AI use compared to when I was using Raycast. But this may not be the case for many Raycast users.

The Future

I think the future will bring more options for products and services that provide access to many models and workflow integrations, including improvements directly from companies like OpenAI and Anthropic. We are in the very early days of bringing LLMs fully into our operating environments, and a lot will change in the coming months and years.

One interesting Mac-related option that is still in alpha or early beta, and which I therefore haven’t been able to try yet, is Sky. Federico Viticci of MacStories has an article on its early state titled From the Creators of Shortcuts, Sky Extends AI Integration and Automation to Your Entire Mac. It’s worth a read to spark the imagination about the possibilities.

Conclusion

For most people, the AI support in Raycast is going to beat the “bring your own” approach required by people not using Raycast on the Mac, and it’s not even close. Even considering the caveats above, Raycast AI is simpler to understand and use with your existing workflows.

Next time we’ll start looking at various Raycast extensions and how I’ve worked different tools into replacing them. Most likely I’ll keep it short and cover one or two extensions per post.

Additional Reading

Read Part 1 of this series here.

Spotomation, Part 1 – Spotlighting

Sat, 23 Aug 2025 08:10:00 GMT

Spotlight Is Not Dead, It Was Just Resting

For years, Spotlight on the Mac has been a bare-bones app launcher and search utility. Sure, it could find files and apps and do some basic web searches, but there’s a reason third-party launchers like Alfred and LaunchBar have kept loyal fans for years, and why relative newcomers like Raycast has captured many more. Spotlight has never really given the ability to act on files or folders or perform actions on search result items like third-party launchers have.

With macOS 26, or macOS Tahoe, Spotlight surprised everyone by showing up packing an additional 15 lbs of muscle and some fancy new power moves.¹ Spotlight can now perform tasks like sending messages or email from the Spotlight search bar, but it doesn’t stop there. It can search within an app – for example, searching within Safari will search its history and bookmarks, or searching within Notes allows direct note creation and more. Most importantly for me, it can run shortcuts and Shortcuts actions.²

Spotlight now lets you optionally narrow its area of focus with ⌘ key options – ⌘1 searches applications, ⌘2 searches files, ⌘3 searches shortcuts and even shortcuts actions, and ⌘4 searches the new, admittedly limited, clipboard history.

The part about shortcuts and shortcuts actions might not have leapt off the page at you, but in reality, this was an unexpected and very welcome gift from Apple to power users. This is the feature that made me decide to see if Spotlight could replace Raycast for me. I knew I’d need some additional apps to fill some gaps, but I’m already familiar with Mac power user utilities and was able to make a pretty good assessment of what that would look like.

Here you can see that hitting ⌘ Space to open Spotlight and then hitting ⌘3 to show actions results in Spotlight by default suggesting some actions and then beginning a list of actions that are available inside the Shortcuts app – without even needing to build a shortcut to run them. This is cool.

Here’s another example of some of the Shortcuts system actions now available right within Spotlight. Again, anything Apple or 3rd party developers make available to Shortcuts with app intents are now free to use from within Spotlight.

“Yes, yes, yes”, you say. “Spotlight sounds great. But how can it compare to Raycast, the Power User tool for Power User Power Users?”

Raycast – The Power User Utility Knife

Don’t worry, I’m not here to argue that Raycast isn’t powerful. It’s very powerful. It’s got tons of core features, tons of 3rd party extensions, thanks to its easily extensible nature, and it allows for simple integration of personally written scripts into Raycast Script Commands. I made use of this feature many times.

I knew if I tried this experiment that I would have many 3rd party extensions to replace. I also knew, though, that replacing my script commands wouldn’t be a problem – I’d just use the exact same scripts. This is the beauty of Raycast Script Commands. They’re just scripts, with some extra header comments designed for Raycast’s understanding and to allow it to pass in parameters. I can simply call these scripts through Shortcuts or FastScripts 3, or run them from the command line.

Another big Raycast feature that needs consideration is Raycast AI. Raycast gives access to a lot of current models, and provides features like AI prompts and presets, as well as quick AI (invoke in the Raycast search bar) and AI chat (a chat window with chats history and the ability to quickly switch models and copy answers, similar to ChatGPT, et al., on the web).

Next Steps

In my next post, I’m going to list some of the features, extensions, and script commands I used in Raycast and my assessment of how difficult they might be to replace, along with some initial ideas of how to replace them. After that, we can start looking at various specific items in detail, getting deeper into my past (Raycast) and current (Spotlight) workflows.

I think it will be interesting and instructive to show specific actions and use-cases with Spotlight, because explaining the basic premise of its new features doesn’t really help bring the possibilities to life in the same way.

I really had to think hard about how much additional muscle made sense there, as if the whole analogy made any sense whatsoever. ↩
I know “shortcuts and Shortcuts actions” looks like inconsistent capitalization, but “shortcuts” are automations made in “Shortcuts” the app. ↩

He’s Not Dead, He’s Resting!

Sun, 13 Jul 2025 08:10:00 GMT

I’m not dead yet, I’m just resting! I took a couple weeks to tour Japan with my daughter and then a couple more weeks to get over whatever I caught at the end of our trip (I genuinely suspect it was the terrible throat variation of Covid going around. It wiped me out).

I have updates though!

Spotlighting Tahoe

First of all, I installed the Tahoe developer beta on my Mac, and I immediately started playing with Apple’s updated Spotlight. If I had to bet money, I would never have put any down on being able to replace Raycast with it, but that’s exactly what I’ve done. I’ll have several posts on the hows and whys of this in the future.

I took many photos in Japan. Not nearly enough, as it turns out, but many. Before I left for Japan, I started whipping together an Astro site that I could post them to, imagining I’d live-post from Japan, but that didn’t happen. In fact, I just now have the site to a workable state I’m happy with. It’s at Photos and Words. I haven’t started adding my Japan trip photos yet though – stay tuned!

I created a public GitHub repo (scottaw66/astro-photoswipe: An Astro photo website with Photoswipe for the Lightbox functionality.) with the code so you can fork it and show me how much better of a programmer and designer than I am.

Tailscale and Travel Routers

The combination of Tailscale and my GL-AXT1800 / Slate AX - GL.iNet travel router was a huge win for me in Japan. The travel router is nice – it can connect to any wifi source so I was able to get it on the hotel networks and then all our devices could just connect to it. Even better, it supports Tailscale so I could use an exit node that is allowed to SSH into servers I help manage and web apps I need for paid work.

More to Come

Each of these probably deserves some coverage on its own, which is my plan. I’m really looking forward into coalescing my thoughts on Spotlight as a Raycast sherlocker, because I know many people will not believe it possible.

/Now Page Update – Podcast Episode Artwork

Thu, 22 May 2025 08:10:00 GMT

I made a change yesterday to my /now page to make the Podcasts section look nicer by including podcast artwork next to the episode entries. I think it adds visual interest, and (most importantly) it was fun to update my recent podcast history script to include it.

This change was partially spurred by me switching from Overcast as my podcast app to Apple Podcasts due to a couple Overcast bugs that were annoying me. However, switching podcast apps did mean updating my /now page Podcast episodes would be a bit more manual, due to Apple Podcasts not saving the history in a way that I can retrieve via automation. I started looking at using the iTunes API to grab episode information, and while doing so, I figured I may as well perform the simple chore of also grabbing the artwork along with the other episode information.

But then Marco updated Overcast a couple days ago and it fixed some of the bugs that were bugging me, so I bugged right back out of Apple Podcasts land and back to Overcast.¹ At this point, I could have just gone back to my Recent Overcast History Raycast script command with no changes, and no one would have ever noticed based on what appears on my /now page, but the thought of showing podcast artwork as part of my recent listening history stuck with me. I decided I had to do it.

Understanding how this works requires a little background on other parts of this script. Rather than bore you to death with ALL the details, I’ll just give you some relevant code snippets and then give full python module code dumps at the end. First though, here’s a before and after comparison of my recent podcast listening history.

Then:

Now:

Podcast Listening History Overview

Basically the way I automate grabbing my recent podcast listening history for my /now page goes like this:

Log into my Overcast account and download my Overcast history OPML file.
Parse the OPML file for all podcast-episode elements with the played attribute set to 1.
Filter these down to a specfic number of days worth, order them with most recently listened first, and then filter them again so that only the last 10 of those are returned.
For each episode in this list, load the overcast episode details page and parse the URL of the podcast artwork image. Download it and shove it in a specific folder. Then create the markdown links (including images) for the episode for display on the /now page and append it to the full list of episode links.
Put this list of markdown links on the clipboard.
Run a Retrobatch action to scale the artwork way down and put it in the correct folder in the website source for site compilation.

All the above happens automatically when I run the script. I have it set up as a Raycast script command, so I trigger it to happen. I could have it update itself on a specific basis and automatically update, compile, and push the site, but I don’t. But that’s a logical series of next steps for anyone who wants a fully automated experience.

The Raycast Script Command

Here’s the Raycast script command. It’s called Recent Overcast History. Note that any Raycast script command can be run outside of Raycast like any other script of its kind (bash, in this case), but I do call this through Raycast.

1
#!/bin/bash
2

3
# Required parameters:
4
# @raycast.schemaVersion 1
5
# @raycast.title Recent Overcast History
6
# @raycast.mode fullOutput
7

8
# Optional parameters:
9
# @raycast.icon ../icons/Overcast.png
10
# @raycast.argument1 { "type": "dropdown", "placeholder": "Choose Mode", "data": [ { "title": "Normal", "value": "normal" }, { "title": "Force", "value": "force" } ] }
11
# @raycast.packageName Website
12

13
# Documentation:
14
# @raycast.description Grabs OC history and gets the most recent listened or in progress from it
15
# @raycast.author scott_willsey
16
# @raycast.authorURL https://raycast.com/scott_willsey
17

18
TYPE=$1
19

20
if [ "$TYPE" = 'force' ]; then
21
    /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/main.py -f
22
else
23
    /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/main.py
24
fi
25

26
/Applications/Retrobatch.app/Contents/MacOS/Retrobatch --workflow /Users/scott/Scripts/scottwillsey/scottwillsey-images/OCPodcastArtworkResize.retrobatch &
27

28
wait
29

30
# delete all files in /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/images
31
rm -f /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/images/*

Recent Overcast History has one dropdown parameter I need to choose: “Normal” or “Force”. I have this because if it’s been less than 2 days, I don’t redownload the OPML file unless I choose “Force”. One nice thing about Raycast is it always remembers what your last choice was and defaults to that.

The Python Scripts

Recent Overcast History’s first action is to run scottwillsey-overcast-history/main.py, which is responsible for initiating the series of steps I outlined above.

1
#!/Users/scott/Scripts/python/venv/bin/python
2
import argparse
3
import os
4
from datetime import datetime, timedelta
5
import constants as const
6
from oc_history import load_oc_history
7
from oc_opml_parse import oc_opml_parse
8

9
p = argparse.ArgumentParser()
10
p.add_argument('-f', '--force', action='store_true', help='Force local OPML file parsing')
11

12
args = p.parse_args()
13

14
def file_is_old(file_path):
15
    if not os.path.exists(file_path):
16
        return True
17

18
    file_mod_date = os.path.getmtime(file_path)
19
    display_date = datetime.fromtimestamp(file_mod_date)
20
    print(f'OPML file created on {display_date.strftime("%Y-%m-%d")}')
21
    file_datetime = datetime.fromtimestamp(file_mod_date)
22
    print(f'file_datetime = {file_datetime}')
23
    stale_date = datetime.now() - timedelta(days=const.OPML_AGE_LIMIT_DAYS)
24
    print(f'stale_date = {stale_date}')
25

26
    return file_datetime < stale_date
27

28
def main():
29
    history_was_loaded = False
30
    if file_is_old(const.OPML_FILE_PATH):
31
        print(f'OPML file is older than {const.OPML_AGE_LIMIT_DAYS} days or doesn\'t exist. Downloading new data...')
32
        history_was_loaded = load_oc_history()
33
    else:
34
        print(f'OPML file is less than {const.OPML_AGE_LIMIT_DAYS} days old. Skipping download.')
35

36
    if history_was_loaded or args.force:
37
        print('Parsing OPML file...')
38
        if oc_opml_parse():
39
            print('Done!')
40
        else:
41
            print('You have to update your podcast list manually.')
42
    else:
43
        print('No new Overcast history generated.')
44

45

46

47
if __name__ == "__main__":
48
    main()

I’m not going to go through all the scripts like the login script and the downloading of the OPML file, but the OPML parsing script is interesting so you can see how I’m finding the episode history I want, getting podcast artwork for it, and then creating the markdown for each episode that goes on the /now page.

1
import pyperclip
2
import xml.etree.ElementTree as ET
3
import constants as const
4
from datetime import datetime, timezone, timedelta
5
from oc_artwork import load_episode_artwork
6

7
def find_podcast_name(root, episode_id):
8
    for podcast in root.findall(".//outline[@type='rss']"):
9
        for ep in podcast.findall("outline[@type='podcast-episode']"):
10
            if ep.get('overcastId') == episode_id:
11
                return podcast.get('text')
12
    return "Unknown"
13

14
def oc_opml_parse():
15
    with open(const.OPML_FILE_PATH, 'r') as f:
16
        content = f.read()
17
    try:
18
        with open(const.OPML_FILE_PATH, 'r') as f:
19
            content = f.read()
20
    except FileNotFoundError:
21
        print(f"File not found: {const.OPML_FILE_PATH}")
22
        return None
23

24
    root = ET.fromstring(content)
25

26
    # Find all podcast episode entries
27
    episodes = root.findall(".//outline[@type='podcast-episode']")
28

29
    current_date = datetime.now(timezone.utc)
30

31
    # Filter episodes with played="1"
32
    # played_episodes = [ep for ep in episodes if ep.get('played') == '1']
33
    played_episodes = [
34
        ep for ep in episodes
35
        if ep.get('played') == '1' and
36
        (current_date - datetime.strptime(ep.get('userUpdatedDate'), "%Y-%m-%dT%H:%M:%S%z")).days <= (const.OPML_AGE_LIMIT_DAYS + 1)
37
    ]
38

39
    # Sort episodes by userUpdatedDate, most recent first
40
    played_episodes.sort(key=lambda ep: datetime.strptime(ep.get('userUpdatedDate'), "%Y-%m-%dT%H:%M:%S%z"), reverse=True)
41

42
    # Get the most recent episodes
43
    top_episodes = played_episodes[:const.NUMBER_OF_EPISODES]
44

45
    # Print the results
46
    episodes_list = ""
47
    for ep in top_episodes:
48
        episode_artwork = load_episode_artwork(ep.get('overcastId'), ep.get('overcastUrl'))
49
        image_link = f"[![{ep.get('title')}]({episode_artwork})]({ep.get('overcastUrl')})" if episode_artwork else ""
50
        episodes_list += f"{image_link}[{find_podcast_name(root, ep.get('overcastId'))} – {ep.get('title')}]({ep.get('overcastUrl')})\n"
51

52
    print(episodes_list)
53
    pyperclip.copy(episodes_list)
54

55
    return True

All the real fun happens in the function oc_opml_parse(), which is called by main.py. First it tries to open the OPML file and then uses the xml.etree.ElementTree module to get the XML model of the data.

1
def oc_opml_parse():
2
    with open(const.OPML_FILE_PATH, 'r') as f:
3
        content = f.read()
4
    try:
5
        with open(const.OPML_FILE_PATH, 'r') as f:
6
            content = f.read()
7
    except FileNotFoundError:
8
        print(f"File not found: {const.OPML_FILE_PATH}")
9
        return None
10

11
    root = ET.fromstring(content)

Next, it parses that for the list of episodes and starts winnowing them down to played episodes, ordered by most recent first, covering a specific timespan, and then returns the first 10 episodes on that list.

1
# Find all podcast episode entries
2
    episodes = root.findall(".//outline[@type='podcast-episode']")
3

4
    current_date = datetime.now(timezone.utc)
5

6
    # Filter episodes with played="1"
7
    # played_episodes = [ep for ep in episodes if ep.get('played') == '1']
8
    played_episodes = [
9
        ep for ep in episodes
10
        if ep.get('played') == '1' and
11
        (current_date - datetime.strptime(ep.get('userUpdatedDate'), "%Y-%m-%dT%H:%M:%S%z")).days <= (const.OPML_AGE_LIMIT_DAYS + 1)
12
    ]
13

14
    # Sort episodes by userUpdatedDate, most recent first
15
    played_episodes.sort(key=lambda ep: datetime.strptime(ep.get('userUpdatedDate'), "%Y-%m-%dT%H:%M:%S%z"), reverse=True)
16

17
    # Get the most recent episodes
18
    top_episodes = played_episodes[:const.NUMBER_OF_EPISODES]

Finally, it creates the markdown for all of the episodes in the list, including loading the Overcast episode page for each episode and finding the podcast artwork from it.

1
 # Print the results
2
    episodes_list = ""
3
    for ep in top_episodes:
4
        episode_artwork = load_episode_artwork(ep.get('overcastId'), ep.get('overcastUrl'))
5
        image_link = f"[![{ep.get('title')}]({episode_artwork})]({ep.get('overcastUrl')})" if episode_artwork else ""
6
        episodes_list += f"{image_link}[{find_podcast_name(root, ep.get('overcastId'))} – {ep.get('title')}]({ep.get('overcastUrl')})\n"
7

8
    print(episodes_list)
9
    pyperclip.copy(episodes_list)
10

11
    return True

Here’s what that load_episode_artwork part looks like:

1
import os
2
import constants as const
3
from session import session
4
import re
5
import uuid
6

7
def load_episode_artwork(episode_id, episode_url):
8
    # Get the overcast episode page
9
    r = session.get(episode_url)
10

11
    if r.status_code == const.SUCCESS:
12
        print('Overcast episode page downloaded')
13

14
        # search the contents of r.text for podcast artwork and save the first match to a variable
15
        match = re.search(r'<img class="art fullart" src="(https:\/\/public\.overcast-cdn\.com\/art\/.*)"\/>', r.text)
16
        if match:
17
            # Get the URL of the artwork
18
            artwork_url = match.group(1)
19
            print(f'Artwork URL: {artwork_url}')
20

21
            # Download and save the artwork to a file
22
            art = session.get(artwork_url)
23
            if art.status_code == const.SUCCESS:
24
                print('Artwork downloaded')
25

26
                # Save the artwork to a file
27

28
                # generate a file name including UUID
29
                file_name = f'{episode_id}-{uuid.uuid4()}.png'
30
                artwork_file_path = os.path.join(const.OC_ARTWORK_FILE_PATH, file_name)
31

32
                with open(artwork_file_path, 'wb') as f:
33
                    f.write(art.content)
34
                print(f'Artwork saved to {artwork_file_path}')
35

36
                artwork_url = f'../../assets/images/oc_artwork/{file_name}'
37

38
                return artwork_url
39
            else:
40
                print(f'Failed to download artwork. Status code: {art.status_code}')
41
        else:
42
            print('No artwork URL found on episode page.')
43
    else:
44
        print(f'Failed to download Overcast episode page. Status code: {r.status_code}')
45

46
    return None

', r.text) if match: # Get the URL of the artwork artwork_url = match.group(1) print(f'Artwork URL: {artwork_url}') # Download and save the artwork to a file art = session.get(artwork_url) if art.status_code == const.SUCCESS: print('Artwork downloaded') # Save the artwork to a file # generate a file name including UUID file_name = f'{episode_id}-{uuid.uuid4()}.png' artwork_file_path = os.path.join(const.OC_ARTWORK_FILE_PATH, file_name) with open(artwork_file_path, 'wb') as f: f.write(art.content) print(f'Artwork saved to {artwork_file_path}') artwork_url = f'../../assets/images/oc_artwork/{file_name}' return artwork_url else: print(f'Failed to download artwork. Status code: {art.status_code}') else: print('No artwork URL found on episode page.') else: print(f'Failed to download Overcast episode page. Status code: {r.status_code}') return None">

Because the image URL for the artwork always contains https://public.overcast-cdn.com/art/, it’s always a simple thing to find it with a regular expression and then download that file. I name the artwork files as the Overcast episode ID with a UUID appended. I save those to a folder for processing by Retrobatch.

The Retrobatch Script

Remember how the script command runs the Python script and then runs a Retrobatch action (script command included below for memory-jogging purposes)?

1
TYPE=$1
2

3
if [ "$TYPE" = 'force' ]; then
4
    /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/main.py -f
5
else
6
    /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/main.py
7
fi
8

9
/Applications/Retrobatch.app/Contents/MacOS/Retrobatch --workflow /Users/scott/Scripts/scottwillsey/scottwillsey-images/OCPodcastArtworkResize.retrobatch &
10

11
wait
12

13
# delete all files in /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/images
14
rm -f /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/images/*

Here’s what the Retrobatch action looks like:

It grabs images from /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/images, where the Python script saved them, resizes them to 250 pixels wide, with corresponding correct height, and saves them to my website source’s oc_artwork directory for inclusion when the site is compiled.

After that, the script command deletes the source images from /Users/scott/Scripts/scottwillsey/scottwillsey-overcast-history/images.

The Markdown

The result of ALL OF THIS is Markdown that looks like this:

1
[![Crypto in Kentucky: The next extraction](../../assets/images/oc_artwork/5340766157298005-66bbb48e-a6c9-4817-85f8-3c2284514230.png)](https://overcast.fm/+BL5ZgWiWVU)[Click Here – Crypto in Kentucky: The next extraction](https://overcast.fm/+BL5ZgWiWVU)
2
![Subscriber Comment Show: Don’t Read Our Emails With Your Kids, Maybe](../../assets/images/oc_artwork/5121671711622378-e7b941aa-1c52-45f6-bf90-641d33eb41cb.png)The 404 Media Podcast (Premium Feed) – Subscriber Comment Show: Don’t Read Our Emails With Your Kids, Maybe
3
[![Is Elon Musk Really Stepping Back from DOGE?](../../assets/images/oc_artwork/4904748076882358-8c4c7d47-aa70-4967-b316-e7fd54a2424f.png)](https://overcast.fm/+BFs16bV2bY)[Uncanny Valley | WIRED – Is Elon Musk Really Stepping Back from DOGE?](https://overcast.fm/+BFs16bV2bY)
4
[![421: ‘The Ratchet of Flippancy’, With Craig Mod](../../assets/images/oc_artwork/135464155213596-e66d96b8-bbcd-4557-a110-4540d876f3d0.png)](https://overcast.fm/+B7NDTZ7xw)[The Talk Show With John Gruber – 421: ‘The Ratchet of Flippancy’, With Craig Mod](https://overcast.fm/+B7NDTZ7xw)
5
[![546: Dave And/Or Buster’s](../../assets/images/oc_artwork/245011785900358-eae0f377-2a82-407f-96d0-49f9494a93e0.png)](https://overcast.fm/+De1kB24UY)[The Rebound – 546: Dave And/Or Buster’s](https://overcast.fm/+De1kB24UY)
6
![CarPlay Ultra and legal localization (6C Podcast)](../../assets/images/oc_artwork/2092466581013757-93182e76-be62-41ab-897a-fdaf4987f622.png)Six Colors – CarPlay Ultra and legal localization (6C Podcast)
7
![Airbnb 2025 Summer Release: An Interview with Jud Coplan and Teo Connor](../../assets/images/oc_artwork/5561968007797863-3e9a8de1-8419-43d1-8589-dc732b60d920.png)AppStories+ – Airbnb 2025 Summer Release: An Interview with Jud Coplan and Teo Connor
8
[![PBS 179 of X — Introducing Liquid Templates in GitHub Pages with Jekyll](../../assets/images/oc_artwork/640362802650572-686da9c0-ce7a-4559-b04e-08ca7c590250.png)](https://overcast.fm/+JGaBVhHcw)[Programming By Stealth – PBS 179 of X — Introducing Liquid Templates in GitHub Pages with Jekyll](https://overcast.fm/+JGaBVhHcw)
9
[![Between Two Nerds: Why hackers and spies don’t mix](../../assets/images/oc_artwork/4031462282408809-7fc44fa7-0ef1-4f03-942b-f8f052be6ffc.png)](https://overcast.fm/+5Sl_VEs2k)[Risky Bulletin – Between Two Nerds: Why hackers and spies don’t mix](https://overcast.fm/+5Sl_VEs2k)

You may have noticed, if you’re the type of person who just loves staring at and parsing markdown listings, that not all of these actually link to the Overcast episode. I remove the links for paid podcast episodes. I don’t pay for a lot of podcasts, but I do pay for some.

And that’s it! It all happens instantly and automatically when I fire up the script command from Raycast!

I apologize unreservedly for that sentence. ↩

Raycast AI as Translator

Sun, 04 May 2025 08:10:00 GMT

Here’s a use case for AI that I really like: a Japanese to English translator that gives me a translation and breakdown of the kanji (Chinese characters) in a Japanese phrase or passage. The reason AI is really good for this as opposed to Japanese apps that let you paste in phrases or do text detection in images is that you get translation, the ability to specify how you want the results returned, the image text detection, AND the ability to ask follow-up questions.

I created both a Raycast command and a Raycast AI chat preset with instructions on translation from Japanese to English.

The Raycast AI Command:

The Raycast AI Chat Preset:

The command opens in Raycast Quick AI view and uses the contents of the clipboard as the source (including screenshots or photos). The chat preset is for the separate AI chat window and I can paste or attach whatever I like as the source.

Here’s an example use case:

I took a screenshot of an easy Japanese lesson from JapanesePod101.com and gave it to the chat preset to translate.

やめてよ。「野沢」か、「菜味」って呼んでって何度も言っているでしょう。

Here’s the full translation result, including a follow-up question of mine as to why it used one specific word for “many times” instead of another.

Notification: Preset: J to E translator

---

Scott Willsey:

---

Raycast AI: Okay, here is the breakdown and translation:

**English Translation:**

Stop it! I've told you so many times to call me "Nozawa" or "Nami", haven't I?

**Japanese Transcription (Kana):**

やめてよ。「のざわ」か、「なみ」ってよんでってなんどもいっているでしょう。
(Yamete yo. "Nozawa" ka, "Nami" tte yonde tte nando mo itte iru deshou.)

**Kanji Breakdown:**

| Kanji    | Reading(s) | Meaning                       | Compound Word(s) | Compound Reading | Compound Meaning         |
| :------- | :--------- | :---------------------------- | :--------------- | :--------------- | :----------------------- |
| 野       | no, ya     | field, plain, rustic, wild    | 野沢             | Nozawa           | Surname: Nozawa          |
| 沢       | sawa, zawa | swamp, marsh, stream          | 野沢             | Nozawa           | Surname: Nozawa          |
| 菜       | na, sai    | vegetables, greens            | 菜味             | Nami             | Given Name: Nami*        |
| 味       | mi, aji    | taste, flavor                 | 菜味             | Nami             | Given Name: Nami*        |
| 呼       | yo(bu), ko | call, invite, breathe out     | 呼んで           | yonde            | Call (te-form of 呼ぶ) |
| 何       | nan, nani  | what, how many                | 何度も           | nando mo         | many times, repeatedly   |
| 度       | do, tabi   | degrees, occurrence, time     | 何度も           | nando mo         | many times, repeatedly   |
| 言       | i(u), koto | say, word, speech, statement  | 言っている       | itte iru         | are saying, have said    |

*\*Note: 菜味 (Nami) is one possible reading for this name. Other readings exist.*

---

Scott Willsey: why 何度 intead of 何回 ?

---

Raycast AI: That's a great question! While both 何度 (nando) and 何回 (nankai) translate to "how many times" or "how often," there's a subtle difference in nuance and usage.

1.  **何回 (nankai): Focus on Countable Occurrences**
    *   This tends to focus more on the specific, countable *number* of times an action happened or will happen. It's often used when you could potentially answer with a precise number (even if the speaker doesn't know it).
    *   Think of it like counting discrete events.
    *   Example: 「この映画、**何回**見ましたか？」 (Kono eiga, **nankai** mimashita ka?) - "How many times have you seen this movie?" (You could answer: 3 times, 5 times, etc.)

2.  **何度 (nando): Focus on Repetition/Frequency (Slightly More Abstract/Emphatic)**
    *   This often emphasizes the *repetition* or *frequency* itself, rather than just the exact count. It can feel slightly more abstract or carry a bit more emotional weight (like surprise, exasperation, or gratitude for repeated actions).
    *   It's very common in the pattern **何度も (nando mo)**, meaning "many times," "again and again," or "repeatedly."
    *   Example: 「**何度も**すみません。」 ( **Nando mo** sumimasen.) - "Sorry [for bothering you] so many times." (Focus is on the repeated nature of the bother).
    *   Example: 「**何度**言ったらわかるの？」 ( **Nando** ittara wakaru no?) - "How many times do I have to tell you?" (Expresses frustration at the repetition needed).

**In the Sentence:**

> やめてよ。「野沢」か、「菜味」って呼んでって**何度も**言っているでしょう。
> (Yamete yo. "Nozawa" ka, "Nami" tte yonde tte **nando mo** itte iru deshou.)

Here, **何度も (nando mo)** is used. This emphasizes the *repeated nature* of the speaker telling the listener how to address them. It conveys a sense of "I've told you this *again and again*." The focus isn't necessarily on *exactly* how many times (was it 5 times? 10 times?), but on the fact that it has happened *repeatedly*, implying frustration.

While you *could* technically say 「何回も言っているでしょう」 (nankai mo itte iru deshou), **何度も** feels slightly more natural and common in this specific context of expressing exasperation about repeated instructions or warnings. It highlights the *frequency* and the speaker's feeling about it.

Not only does this give me a full breakdown of the kanji, including their compound and individual meanings, but it lets me ask questions about specific parts of the sentence.

Bear in mind I lived in Japan for 8 years and I’m going to know when an LLM gives me something bogus or tries to lead me astray. But this is good for reminding me how specific conjugations work or the differences in terms that I might not understand.

I was a kid when I lived in Japan, and I never formally studied Japanese. My learning was based on intuitive understanding as I played with other kids, watched TV, and spent time listening to people around me talking. Inevitably I didn’t learn some nuances or made incorrect assumptions that then became part of my understanding of Japanese. That’s why use cases like this, with a custom kanji breakdown instruction and the ability to ask questions about the translation or the source phrase, are super handy for me.

You can learn more about Raycast AI, Raycast AI commands, and Raycast AI chat presets here.

Slowly Posting Reviews

Sun, 13 Apr 2025 08:10:00 GMT

I’ve written about my review automation workflow in some detail, and while I personally find it fascinating, really the point is the reviews themselves. I’m slowly getting some up there and will keep adding more slowly and steadily over time.

Here’s what my current Music Reviews page looks like. The goal is to start adding them in a way that creates a diverse mix of music while I build up the number of reviews available.

Let me point you again to Matt Birchler’s Quick Reviews. I use his iOS app version of this application to generate the reviews and then my Mac takes over from there! It’s a great workflow, and I like the looks of the results.

IndieWeb is where the fun is… if you like the random stuff I throw on my site, think about how to make your own or what you want it to be to try to make life just a little bit happier for a minute or two for anyone who stumbles across you. We could all use some good stuff in life right now.

Media Reviews Are Now in Search Results

Tue, 08 Apr 2025 08:10:00 GMT

When I added a Reviews page, I wanted to be able to have individual reviews show up in my site search. Due to some complexities I won’t go into of how Pagefind indexes things and how I optimize my images using the Astro Image component, this was easier said than done – until I remembered the good old HTML hidden global attribute. Then I just made a hidden span and populated it with the image alt text.

1
<div class="review">
2
      <p>
3
        {
4
          page.data.map((book) => (
5
            <span hidden>{`${book.alttext}`}</span>
6
            <a href={`/images/posts/${book.review}.jpg`}>
7
              <Image
8
                src={import(`../../../assets/images/posts/${book.review}.png`)}
9
                alt={`${book.alttext}`}
10
              />
11
            </a>
12
          ))
13
        }
14
      </p>
15
    </div>

Now all my media reviews show up in site seach results!

Enjoy the reviews, and don’t forget there are separate categories for Book Reviews, Movie Reviews, TV Show Reviews, and Music Reviews. I will be actively adding more reviews from this point forward.

Updated Sessions Raycast Script Command, 2025 Edition

Thu, 27 Mar 2025 08:10:00 GMT

I’ve spoken a couple times about my Sessions Raycast script command, both when I originally set it up, and then again when I updated it to use Moom as my window manager. Well, I’m back to using Raycast as my window manager, and I also use a Raycast focus mode for my podcast session. So here’s your updated Session Raycast script command, 2025 edition.

You may recall that the purpose of this script command is to just set up my environment in a way that’s suitable for a specific task. It always closes all apps, then opens some core apps, and then opens other apps specific to the session type.¹ It also sets audio output and input based on the session type, arranges app windows in a specific way, and either sets Coffee for Raycast to Caffinate mode (keep the screen on) or Decaffinate mode (let it sleep when it wants).

Here’s is the current Sessions script command.

1
#!/bin/bash
2

3
# Required parameters:
4
# @raycast.schemaVersion 1
5
# @raycast.title Session
6
# @raycast.mode fullOutput
7

8
# Optional parameters:
9
# @raycast.icon ../icons/app-mode.png
10
# @raycast.argument1 { "type": "dropdown", "placeholder": "Session", "data": [ { "title": "Home", "value": "home" }, { "title": "IT", "value": "it" }, { "title": "Podcast", "value": "podcast" }, { "title": "Podcast Edit", "value": "podcastedit" } ] }
11
# @raycast.packageName Utils
12

13
# Documentation:
14
# @raycast.description Set up a workflow session
15
# @raycast.author scott_willsey
16
# @raycast.authorURL https://raycast.com/scott_willsey
17

18
open 'raycast://focus/complete'
19
open raycast://extensions/raycast/system/quit-all-applications
20
sleep 3
21
CORE=(1Password Messages Mail Safari AnyBox)
22
open 'raycast://extensions/mooxl/coffee/decaffeinate'
23

24
TYPE=$1
25

26
for value in "${CORE[@]}"
27
do
28
    open -a "$value"
29
done
30

31
if [ "$TYPE" = 'home' ]; then
32
    open 'raycast://script-commands/set-default-browser-safari'
33
    open -a Warp
34
    /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Speakers"
35
    /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Microphone" -t "input"
36
    open 'raycast://customWindowManagementCommand?&name=Home'
37
        exit
38
fi
39

40
if [ "$TYPE" = 'it' ]; then
41
    open 'raycast://script-commands/set-default-browser-chrome'
42
    open -a "Google Chrome"
43
    open -a Warp
44
    open -a Slack
45
    /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Speakers"
46
    /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Microphone" -t "input"
47
    open 'raycast://customWindowManagementCommand?&name=IT'
48
        exit
49
fi
50

51
if [ "$TYPE" = 'podcast' ]; then
52
    open 'raycast://script-commands/set-default-browser-safari'
53
    open -a "Audio Hijack"
54
    open -a Farrago
55
    open -a Bear
56
    open -a Notes
57
    open -a "Microsoft Teams"
58
    /opt/homebrew/bin/SwitchAudioSource -s "Elgato Wave XLR"
59
    /opt/homebrew/bin/SwitchAudioSource -s "Shure Beta 87a & Farrago" -t "input"
60
    open 'raycast://customWindowManagementCommand?&name=Podcasting'
61
    open 'raycast://extensions/mooxl/coffee/caffeinate'
62
    open 'raycast://focus/start?goal=Podcast&categories=podcast&mode=allow'
63
        exit
64
fi
65

66
if [ "$TYPE" = 'podcastedit' ]; then
67
    open 'raycast://script-commands/set-default-browser-safari'
68
    open -a "Logic Pro"
69
    open -a Bear
70
    open -a Finder ~/Documents/Podcasts/FwB
71
    /opt/homebrew/bin/SwitchAudioSource -s "Elgato Wave XLR"
72
    open 'raycast://customWindowManagementCommand?&name=Edit%20Podcast'
73
    open 'raycast://focus/start?goal=Podcast%20Edit&categories=podcastedit&mode=allow'
74
        exit
75
fi

When I run the Sessions script command in Raycast, I just choose the session type. The nice thing about Raycast dropdowns is they pre-select the option you chose last time. In the case of the Session script command, that’s not as convenient as it is for some other script commands, but that’s life.

Anyway, if you have any questions about this script command or Raycast script commands in general, you know how to find me (hint: Mastodon or Bluesky).

I should see if there’s a way to close all apps that aren’t in a list, instead of closing all apps and then re-opening all apps that are in a list. ↩

Creating Drafts in Astro 5

Tue, 25 Mar 2025 08:10:00 GMT

Last week or so, I started writing a blog post as I sometimes do, this one pertaining to my Automation Workflow for Media Reviews. Unfortunately, I wanted to preview it as I went along, so I copied it in progress to my git main branch of the local copy of the website.

You can see where this is going.

Yes, I updated something else on the website and published it, INCLUDING the partial draft of the blog post I was working on. This wasn’t a super huge deal, except that I use EchoFeed to automatically post to Bluesky and Mastodon whenever I post something new on the site.

Sigh.

The good news is that this finally pushed me to add drafts functionality to my site, so that I could have drafts render when running locally in development mode, but not actually get written when doing a site build. It’s a good, basic feature to have.

Initially I started with the method shared by Alex Curtis in his post How to Create a Draft Post in Astro, but his filter didn’t actually work for me. I think this is because his example was for a different version of Astro, possibly. I wound up using the Astro Docs example for Filtering Content Collection Queries.

Basically, there are three steps to adding draft posts to Astro 5:

Add an optional draft data property to your blog post collection in your content.config.ts, as below,

1
const postCollection = defineCollection({
2
  loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/content/posts" }),
3
  schema: ({ image }) =>
4
    z.object({
5
      title: z.string(),
6
      description: z.string(),
7
      link: z.string().optional(),
8
      date: z
9
        .string()
10
        .transform((str) => new Date(str))
11
        .optional()
12
        .nullable(),
13
      keywords: z.string().array(),
14
      cover: image().optional(),
15
      coverAlt: z.string().optional(),
16
      series: z.string().optional(),
17
      draft: z.boolean().optional(),
18
    }),
19
});

Filter based on this in any page that uses this content collection, the way the Astro Docs show,

1
---
2
import Base from "../layouts/Base.astro";
3
import Post from "../components/Post.astro";
4
import Pager from "../components/Pager.astro";
5
import { getCollection } from "astro:content";
6
import site from "../data/site.json";
7

8
export async function getStaticPaths({ paginate }) {
9
  let posts = await getCollection("posts", ({ data }) => {
10
    return import.meta.env.PROD ? data.draft !== true : true;
11
  });
12

13
  posts = posts.sort(
14
    (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
15
  );
16

17
  return paginate(posts, {
18
    pageSize: site.posts.paginationSize,
19
  });
20
}
21
const { page } = Astro.props;
22

23
const title = site.title;
24
const description = `Posts Page ${page.currentPage}`;
25
---
26

27
<Base title={title} description={description}>
28
  <section aria-label="Post list" data-pagefind-ignore>
29
    {
30
      page.data.map((post, index) => {
31
        return <Post post={post} />;
32
      })
33
    }
34
    <Pager page={page} />
35
  </section>
36
</Base>

And finally, use it in a draft post!

1
---
2
title: Creating Drafts in Astro
3
description: describe
4
date: "2025-03-25T00:10:00-08:00"
5
keywords: ["keyword"]
6
draft: true
7
slug: "creating-drafts-in-astro"
8
---
9
I’ve always wanted to be a writer, and I’ve always wanted to create drafts in Astro that won’t get published until I want them to.
10

11
[Now I can!](https://jacurtis.com/notes/astro-draft-posts/)

One more thing though – none of this keeps the post page itself from being rendered during a build. It just keeps anything from linking to it or showing it in a list of posts. This means that it will show up in your RSS feed unless you edit your RSS template to also filter it out.

1
import rss from "@astrojs/rss";
2
import sanitizeHtml from "sanitize-html";
3
import { rfc2822 } from "../components/utilities/DateFormat";
4
import { globalImageUrls } from "../components/utilities/StringFormat";
5
import site from "../data/site.json";
6

7
export function GET(context) {
8
  const postImportResult = import.meta.glob("../content/posts/**/*.md", {
9
    eager: true,
10
  });
11
  const posts = Object.values(postImportResult)
12
    .filter((post) => post.frontmatter.draft !== true)
13
    .sort(
14
      (a, b) =>
15
        new Date(b.frontmatter.date).valueOf() -
16
        new Date(a.frontmatter.date).valueOf(),
17
    );
18

19
  return rss({
20
    title: site.title,
21
    description: site.description,
22
    site: context.site,
23
    xmlns: {
24
      atom: "http://www.w3.org/2005/Atom/",
25
      dc: "http://purl.org/dc/elements/1.1/",
26
      content: "http://purl.org/rss/1.0/modules/content/",
27
    },
28
    items: posts.map((post) => ({
29
      title: post.frontmatter.title,
30
      link: `${site.url}${post.frontmatter.slug}`,
31
      pubDate: rfc2822(post.frontmatter.date),
32
      description: post.frontmatter.description,
33
      customData: `<summary>${post.frontmatter.description}</summary>`,
34
      content: globalImageUrls(
35
        site.url,
36
        sanitizeHtml(post.compiledContent(), {
37
          allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
38
        }),
39
      ),
40
    })),
41
  });
42
}

That’s it! Hit me up on Bluesky or Mastodon if you have any questions.

Automation Workflow for Media Reviews

Sat, 22 Mar 2025 13:00:00 GMT

Updating the Look of My /now Page
Automating Quick Reviews
Summarium

Updating the Look of My /now Page

The now page is a cool concept by Derek Sivers for talking about what you’re doing now in your life. I use my /now page slightly differently, to just list things I’ve been reading, drinking, eating, watching, listening to, and sometimes playing recently.

Initially everything on my now page was bullet lists of text links. This works, and it’s fine, but I also was a little envious of how nice some other people’s media logs looked with artwork for their movies and shows. I’m thinking of Robb Knight’s Almanac, Habib Cham’s Books page, and Cory Dransfeldt’s Music, Watching, and Currently Reading pages, for example.

As I was rolling how to improve my /now page around in the back of my mind, Matt Birchler release a neat little iOS app called Quick Reviews. Quick Reviews is based on a web utility he’s had for awhile now which lets you create little images with media reviews, complete with artwork, and share them with people.

As I played with the iOS app version of Quick Reviews and saw how it exported the images, I realized I could build a workflow around them for incorporating them into my /now page.¹ Most importantly for any change to the page to make it look better was that it not take much more time to update on a regular basis. The text link version was easy – I have scripts that pull my Trakt history for the Movies and TV Shows portions of the page and return formatted markdown bullet list items. All I have to do is paste them where I want them.

Thanks to the power of scripting and the wonderful array of automation utilities for macOS, I’ve been able to find a way to make updating my /now page with Quick Reviews images equally quick and painless. So get ready, because the rest of this article exists to show you how it’s done.

By the way, I made a handy little video of the automation workflow in action which you can watch here or on YouTube, or jump to the detailed workflow description below to keep reading.

Automating Quick Reviews

Step 1: Quick Reviews

The first link in my automation chain is Quick Reviews by Matt Birchler. This is an iOS app that lets you choose a piece of media to review and allows you to add artwork, your rating, and your text review to a nicely formatted image.

First you choose a Media Type (Movie, TV Show, Game, Book, Music, or Other), give it the title of the media, and either add artwork or use Magic Mode to add one if it’s a Movie, TV Show, or Game, and then add your text review and choose a rating. You can customize the text that gets used for ratings to your own liking (⭐⭐⭐⭐⭐ use emoji stars if you want!) at an app level, by the way.

Next, edit the image colors for background and rating highlight, edit the font and font styles, and save or export the image. In my case, I use export and share and then AirDrop it to my Mac.

Step 2: Hazel

When I AirDrop the Quick Reviews image to my Mac, several things happen automatically, thanks in large part to a wonderful Mac utility called Hazel, by Noodlesoft. Hazel does one thing: it watches folders that you tell it to. But then it allows you to perform a ton of different actions on those folders, or files in those folders, based on triggers you specifiy.

In my case, I have Hazel watch my Downloads folder for incoming images that have the png extension and that have file names containing “PNG image”. These criteria are based on the exported Quick Reviews file name and type. If any files meeting those criteria hit the Downloads folder, they’re moved to /Users/scott/Scripts/scottwillsey/scottwillsey-images/In, renamed in a specific way, and then a Bash script called scottwillsey-media-review-images.sh is run.

Here’s the entirety of that script:

#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title ScottWillsey Media Review Images
# @raycast.mode silent

# Optional parameters:
# @raycast.icon ../icons/scottwillsey.png
# @raycast.packageName Website

# Documentation:
# @raycast.description Resizes and copies images for the ScottWillsey site's /now page media reviews.
# @raycast.author scott_willsey
# @raycast.authorURL https://raycast.com/scott_willsey

/Applications/Retrobatch.app/Contents/MacOS/Retrobatch --workflow /Users/scott/Scripts/scottwillsey/scottwillsey-images/BlogMovieReviewImageResizeWithText.retrobatch &

wait

/Users/scott/Scripts/scottwillsey/scottwillsey-images/scottwillsey_review_images.py

You can see that it’s written as a Raycast script command, which is why all the weird comments are in there, but I don’t run it from Raycast because I let Hazel call it directly when I AirDrop the image.

First, it runs a Mac app called Retrobatch with a specific Retrobatch workflow, waits for that to finish, and then runs a Python script.

Which takes us to Step 3…

Step 3: Retrobatch

Retrobatch is a stupendously amazing image automation tool from Flying Meat Software. Its whole job is image batch processing.

The particular Retrobatch workflow that I run in this case takes images from /Users/scott/Scripts/scottwillsey/scottwillsey-images/In, where Hazel moved them, and creates two copies – one resized to 1000px wide and saved as a png, and the other full-sized but saved as a jpg. Both of these are saved to /Users/scott/Scripts/scottwillsey/scottwillsey-images/Out.

The purpose of having two copies is so that I can display an optimized version in my articles and have those link to the full-sized image if the reader clicks on them – more on this later.

One other important thing this Retrobatch workflow does is to extract the text from the resized image and save that text in a file in the Out folder with the same file name as the corresponding image, except with a .txt extension.

I need the text from the image to create my image link alt text for the website, and the fact that Retrobatch can extract this for me makes the fully automated nature of this process possible. I don’t have to make a copy of the text while typing my review on the phone and send it to the Mac somehow. It’s literally delivered in the image and extracted on the Mac by Retrobatch. It’s beautiful.

Now Retrobatch is done. For each review image in /Users/scott/Scripts/scottwillsey/scottwillsey-images/In, there is now a corresponding resized png, full-sized jpg, and text file with the text from the image saved in /Users/scott/Scripts/scottwillsey/scottwillsey-images/Out.

When Retrobatch finishes, the scottwillsey-media-review-images.sh script that started the Retrobatch workflow moves on to the next step – running a Python script called scottwillsey_review_images.py.

Step 4: Python Script

The Python script is much more involved than the Bash script was. I’m just going to show you the whole thing and then walk though it.

1
#!/Users/scott/Scripts/python/venv/bin/python
2
import os
3
import shutil
4
import pyperclip
5
from pathlib import Path
6
import uuid
7

8
# Set paths
9
output_path = "/Users/scott/Scripts/scottwillsey/scottwillsey-images/Out"
10
input_path = "/Users/scott/Scripts/scottwillsey/scottwillsey-images/In"
11
review_images_path = "/Users/scott/Documents/Sites/ScottWillsey/Reviews"
12
public_image_path = "/Users/scott/Sites/scottwillsey/public/images/posts"
13
assets_image_path = "/Users/scott/Sites/scottwillsey/src/assets/images/posts"
14

15
# Initialize empty string for file links
16
file_links = ""
17
# Generate new UUID
18
new_uuid = str(uuid.uuid4())
19

20
# Loop through files in output directory
21
for file in os.listdir(output_path):
22
    alt_text = "Review Image"
23
    if file.endswith(".png"):
24
        # Get base name without extension
25
        base_name = os.path.splitext(file)[0]
26
        # create UUID name
27
        uuid_name = base_name + "-" + new_uuid
28
        # Look for corresponding text file
29
        txt_file = os.path.join(output_path, f"{base_name}.png.txt")
30
        if os.path.exists(txt_file):
31
            with open(txt_file, "r") as f:
32
                alt_text = f.read().strip().replace("\n", " ")
33
        # Create markdown link
34
        file_links += f"[![{alt_text}](../../assets/images/posts/{uuid_name}.png)](/images/posts/{uuid_name}.jpg)\n"
35

36
# Copy to clipboard
37
pyperclip.copy(file_links)
38

39
# Copy files to site public images directory and move files from input to review images directory
40
for file in os.listdir(input_path):
41
    # Get base name and extension
42
    base_name, ext = os.path.splitext(file)
43
    # Create new filename with UUID
44
    new_filename = f"{base_name}-{new_uuid}{ext}"
45
    src_file = os.path.join(input_path, file)
46
    # Move file to review images directory
47
    dst_file = os.path.join(review_images_path, file)
48
    shutil.move(src_file, dst_file)
49

50
# Delete all .txt files in output directory
51
for file in os.listdir(output_path):
52
    if file.endswith(".txt"):
53
        os.remove(os.path.join(output_path, file))
54

55
# Move files from output to site src assets images directory
56
for file in os.listdir(output_path):
57
    # Get base name and extension
58
    base_name, ext = os.path.splitext(file)
59
    # Create new filename with UUID
60
    new_filename = f"{base_name}-{new_uuid}{ext}"
61
    src_file = os.path.join(output_path, file)
62

63
    if ext.lower() == '.png':
64
        dst_file = os.path.join(assets_image_path, new_filename)
65
        shutil.move(src_file, dst_file)
66
    elif ext.lower() == '.jpg':
67
        dst_file = os.path.join(public_image_path, new_filename)
68
        shutil.move(src_file, dst_file)

The gist of the script is simple, although it does several things:

Python Script Part 1: Create Markdown Links

# Set paths
output_path = "/Users/scott/Scripts/scottwillsey/scottwillsey-images/Out"
input_path = "/Users/scott/Scripts/scottwillsey/scottwillsey-images/In"
review_images_path = "/Users/scott/Documents/Sites/ScottWillsey/Reviews"
public_image_path = "/Users/scott/Sites/scottwillsey/public/images/posts"
assets_image_path = "/Users/scott/Sites/scottwillsey/src/assets/images/posts"

# Initialize empty string for file links
file_links = ""
# Generate new UUID
new_uuid = str(uuid.uuid4())

# Loop through files in output directory
for file in os.listdir(output_path):
    alt_text = "Review Image"
    if file.endswith(".png"):
        # Get base name without extension
        base_name = os.path.splitext(file)[0]
        # create UUID name
        uuid_name = base_name + "-" + new_uuid
        # Look for corresponding text file
        txt_file = os.path.join(output_path, f"{base_name}.png.txt")
        if os.path.exists(txt_file):
            with open(txt_file, "r") as f:
                alt_text = f.read().strip().replace("\n", " ")
        # Create markdown link
        file_links += f"[![{alt_text}](../../assets/images/posts/{uuid_name}.png)](/images/posts/{uuid_name}.jpg)\n"

# Copy to clipboard
pyperclip.copy(file_links)

This creates a UUID to add into the image file names. Then it looks at every file in the Retrobatch output directory (/Users/scott/Scripts/scottwillsey/scottwillsey-images/Out), checks to see if it’s a png, and gets its base file name if so.

After getting the png file base name, the script looks for a corresponding txt file, which will contain the extracted review text. If it finds one, it reads the contents of the file to use as image alt text.

Next, it creates a markdown link for the png image complete with alt text, and a link to the larger jpg image. Then it appends this markdown link to the file_links variable.

Finally, it copies the complete file_links variable to the clipboard. This results in markdown for the images ready to paste into the /now page. The markdown basically looks like this, albeit with a few extra bits of text from the extracted text that I clean up:

[![Severance S1&2 • 2022 • Man, this thing is weird and wild but also so much deeper than you might think at first. One of the best shows ever. • Loved It!](../../assets/images/posts/PngImage42999A84080-review-6126286a-a138-4551-8892-ad278b0bfa5f.png)](/images/posts/PngImage42999A84080-review-6126286a-a138-4551-8892-ad278b0bfa5f.jpg)

Python Script Part 2: Archive All Images in the Retrobatch Input Folder

# Copy files to site public images directory and move files from input to review images directory
for file in os.listdir(input_path):
    # Get base name and extension
    base_name, ext = os.path.splitext(file)
    # Create new filename with UUID
    new_filename = f"{base_name}-{new_uuid}{ext}"
    src_file = os.path.join(input_path, file)
    # Move file to review images directory
    dst_file = os.path.join(review_images_path, file)
    shutil.move(src_file, dst_file)

This part is simple. It just renames the images with the UUID included in the file name and moves them from the Retrobatch input folder to a review images archive folder. This is just a folder for me to keep copies of my reviews in, it has nothing to do with generating the website.

Python Script Part 3: Delete All Text Files in the Retrobatch Output Folder

# Delete all .txt files in output directory
for file in os.listdir(output_path):
    if file.endswith(".txt"):
        os.remove(os.path.join(output_path, file))

Again, very simple. This just deletes all the text files in the Retrobatch output folder. I don’t need them anymore as I have the text in the markdown links.

Python Script Part 4: Rename and Move the Image Files to Use on the Website

# Move files from output to site src assets images directory
for file in os.listdir(output_path):
    # Get base name and extension
    base_name, ext = os.path.splitext(file)
    # Create new filename with UUID
    new_filename = f"{base_name}-{new_uuid}{ext}"
    src_file = os.path.join(output_path, file)

    if ext.lower() == '.png':
        dst_file = os.path.join(assets_image_path, new_filename)
        shutil.move(src_file, dst_file)
    elif ext.lower() == '.jpg':
        dst_file = os.path.join(public_image_path, new_filename)
        shutil.move(src_file, dst_file)

This loops through all files in the Retrobatch output folder (since only images remain here) and does the following with each:

Gets the base file name and file extension,
Creates a new filename with the UUID added in between the base file name and extension,
Moves the image to /Users/scott/Sites/scottwillsey/src/assets/images/posts with the new UUID-included file name if it’s a png file,
Or moves the image to /Users/scott/Sites/scottwillsey/public/images/posts with the new UUID-included file name if it’s a jpg.

That’s the entirety of the script. Once it’s done, there are no images left in the Retrobatch input and output folders, there are jpg and png images in the correct website source folders for use on the compiled /now page, and there are corresponding Markdown links in the clipboard ready to paste into the /now page content source Markdown file.

Step 5: Profit

The results are something like the image below, or actually what you see if you click the link for the /now page on the site menu. It’s the one that looks like a clock.

There are definitely improvements that could be made, but this is a great start, and it’s proof that sometimes things that look like a very manual process can be automated, thanks largely to the great ecosystem of Mac indie programmers who make outstanding irreplaceable utilities like Hazel and Retrobatch.

If you want to see a comparison of the old style, imageless /now page and the current beautiful one, just look at the image below. On the right is the new, Quick Reviews-ified version, on the left is the old one. Or, to put it another way, on the left is the before now, and on the right is the now now.

Summarium

That’s a lot of words, so let’s summarize the process here:

Scott Willsey creates a review in Quick Reviews on iOS,
Scott Willsey AirDrops it to his Mac,
Hazel renames and moves the image and runs a Bash script,
Bash script runs a Retrobatch workflow and waits for it to finish,
Retrobatch makes two copies of the image, a full-sized jpg and a smaller png, as well as a text file containing the extracted text from the image,
Bash script runs a Python script,
Python script constructs the Markdown links and moves the Retrobatch images into the correct locations for the site to compile and display on the /now page,
Scott Willsey pastes the Markdown links into the /now page source Markdown file,
Scott Willsey says “Damn, that is cool!” and goes to make another cup of coffee.

If you’re asking yourself right now “Is this guy going to make EVERY reference to his /now page a hyperlink to it?”, the answer is yes. Yes, I am. ↩

Menu Updates and Reviews Page

Sun, 23 Feb 2025 13:00:00 GMT

You may have noticed that the site menu has a couple new icons in it. One looks like a timer or stopwatch – that’s a link to the /now page, which I’ve had for awhile, but haven’t had a menu link to. The other looks like movie director clapper with a gear on it – that’s a link to a new page: my /reviews page.

You may look at both the /now page and the /reviews page and think “yeah, but they’ve both got these little reviews on them”, and that’s true, but there is a difference. The /now page reviews are the latest only, and some of them (TV series and books, for example) may be things still in progress. These are ephemeral – they’ll drop off as I move on to new stuff.

The reviews page is only items I’ve finished, and is ALL of the items I’ve finished that I’ve written reviews for. Nothing will drop off here. Eventually, then, I’ll probably need to break each category (Movies, TV Series, Books, Games) off into their own pages so it doesn’t take an hour and a half to load the page. 45 minutes I could live with, 90 minutes not so much.

I’m working on an article with an accompanying video about my workflow for creating and publishing these reviews. I think you’ll find it interesting to see how much of the process I’ve managed to automate.

Cool Site Spotlight Raycast Script Command

Sun, 02 Feb 2025 13:00:00 GMT

I like to highlight different cool or interesting sites by featuring them in my Cool Site Spotlight on my links page. I put a new one up every one or two weeks, and put a link to the last one in the Cool Sites Archive section of the links page.

The data for the current one is a simple JSON file called spotlight.json, and it looks like this:

1
{
2
  "Site": "https://html.earth/",
3
  "Title": "html.earth: Markdown to HTML Converter & Site Generator",
4
  "Description": "html.earth is a free site generator that converts Markdown to HTML. It comes with a front matter editor, custom styling field, and import & export options.",
5
  "Image": "HtmlDotEarth-5F9FE361-5512-40BF-A78E-468190030F83"
6
}

Up until now, when it’s time to spotlight a new site, I’ve been grabbing a markdown link of the site title and URL using Hookmark and then using the title and URL from that to put in the Title and Site property values. I then run a Raycast script command to rename, resize, and reformat the site screenshot and put it in the appropriate directories in my own site’s local Astro project. Once I have the image name, I can put it in spotlight.json in the Image property value, minus the file extension, for reasons I’ll write about someday in a separate post.

Anyway, it’s been a fairly manual process, and I finally got tired of it yesterday. So I wrote a Raycast script command called “New Cool Site Spotlight” to do it for me.

As you can see, the script command takes one parameter: the URL of the site I want to feature in Cool Site Spotlight.

The first thing the script command does is look at spotlight.json in its current state and grabs the title and URL of the current site, which it formats into a Markdown link and puts on the clipboard. It also sticks a dash in front of it for good measure, since the list of previous cool sites IS actually a list, and Markdown list elements start with a dash. This is all handled by a function called create_cool_site_archive_link.

1
def create_cool_site_archive_link():
2
    # Open the Spotlight JSON file
3
    SPOTLIGHT_JSON_FILE = '/Users/scott/Sites/scottwillsey/src/data/spotlight.json'
4
    with open(SPOTLIGHT_JSON_FILE, 'r') as f:
5
        data = json.load(f)
6

7
    # Get the 'Site' and 'Title' values
8
    site = data.get('Site')
9
    title = data.get('Title')
10

11
    # Create a markdown link
12
    markdown_link = f'- [{title}]({site})'
13
    pyperclip.copy(markdown_link)

The script command then calls a function named get_page_info which uses the URL to grab the page and extract its title and description.

1
def get_page_info(url):
2
    # Get the title and description from the page
3
    response = requests.get(url)
4
    soup = BeautifulSoup(response.text, 'html.parser')
5
    title = soup.find('title').text
6
    description = soup.find('meta', {'name': 'description'})
7
    description = description['content'] if description else None
8
    return title, description

Finally, the script command calls write_spotlight_json, which replaces the contents of spotlight.json with the new information.

1
def write_spotlight_json(title, description, url):
2
    # Create the JSON for the new Cool Site Spotlight entry
3
    IMAGE_DIR = '/Users/scott/Scripts/scottwillsey/scottwillsey-images/In'
4
    SPOTLIGHT_JSON_FILE = '/Users/scott/Sites/scottwillsey/src/data/spotlight.json'
5
    png_file = next((f for f in os.listdir(IMAGE_DIR) if f.endswith('.png')), None)
6
    if png_file:
7
        png_file = os.path.splitext(png_file)[0]
8
    entry = {
9
        "Site": url,
10
        "Title": title,
11
        "Description": description,
12
        "Image": png_file
13
    }
14
    # If all values are present, write the JSON to the file
15
    if all(entry.values()):
16
        with open(SPOTLIGHT_JSON_FILE, 'w') as f:
17
            json.dump(entry, f, indent=4)
18
    return entry

One interesting thing you might notice is that it looks in /Users/scott/Scripts/scottwillsey/scottwillsey-images/In for any image file that ends in .png, which it then extracts the file name minus the extension from. Once it’s done that, it creates a dictionary named entry. If all keys in entry have corresponding values, it writes the dictionary as JSON into spotlight.json, replacing whatever was there previously.

Here’s the full New Cool Site Spotlight Raycast script command:

1
#!/Users/scott/Scripts/python/venv/bin/python
2

3
# Required parameters:
4
# @raycast.schemaVersion 1
5
# @raycast.title New Cool Site Spotlight
6
# @raycast.mode fullOutput
7

8
# Optional parameters:
9
# @raycast.argument1 { "type": "text", "placeholder": "Cool Site URL" }
10
# @raycast.packageName Website
11

12
# Documentation:
13
# @raycast.description Create the JSON for Cool Site Spotlight for scottwillsey.com from a URL
14
# @raycast.author scott_willsey
15
# @raycast.authorURL https://raycast.com/scott_willsey
16

17
import sys
18
import json
19
import pyperclip
20
import requests
21
from bs4 import BeautifulSoup
22
import os
23

24
url = sys.argv[1]
25

26
def create_cool_site_archive_link():
27
    # Open the Spotlight JSON file
28
    SPOTLIGHT_JSON_FILE = '/Users/scott/Sites/scottwillsey/src/data/spotlight.json'
29
    with open(SPOTLIGHT_JSON_FILE, 'r') as f:
30
        data = json.load(f)
31

32
    # Get the 'Site' and 'Title' values
33
    site = data.get('Site')
34
    title = data.get('Title')
35

36
    # Create a markdown link
37
    markdown_link = f'- [{title}]({site})'
38
    pyperclip.copy(markdown_link)
39

40
def get_page_info(url):
41
    # Get the title and description from the page
42
    response = requests.get(url)
43
    soup = BeautifulSoup(response.text, 'html.parser')
44
    title = soup.find('title').text
45
    description = soup.find('meta', {'name': 'description'})
46
    description = description['content'] if description else None
47
    return title, description
48

49
def write_spotlight_json(title, description, url):
50
    # Create the JSON for the new Cool Site Spotlight entry
51
    IMAGE_DIR = '/Users/scott/Scripts/scottwillsey/scottwillsey-images/In'
52
    SPOTLIGHT_JSON_FILE = '/Users/scott/Sites/scottwillsey/src/data/spotlight.json'
53
    png_file = next((f for f in os.listdir(IMAGE_DIR) if f.endswith('.png')), None)
54
    if png_file:
55
        png_file = os.path.splitext(png_file)[0]
56
    entry = {
57
        "Site": url,
58
        "Title": title,
59
        "Description": description,
60
        "Image": png_file
61
    }
62
    # If all values are present, write the JSON to the file
63
    if all(entry.values()):
64
        with open(SPOTLIGHT_JSON_FILE, 'w') as f:
65
            json.dump(entry, f, indent=4)
66
    return entry
67

68
create_cool_site_archive_link()
69
title, description = get_page_info(url)
70
if not (title and description):
71
    sys.exit(1)
72
print(write_spotlight_json(title, description, url))

You may still have questions about the image file, such as how I create it, why it’s in a directory called /Users/scott/Scripts/scottwillsey/scottwillsey-images/In, and what I mean when I say I rename and reformat it first. You may also wonder why all that isn’t part of THIS script command intead of being something I do separately still. I’ll write about that soon.

In the meantime, I’ve gone from manually tweaking a JSON file with multiple copy and paste edits when I want to update Cool Site Spotlight to simply copying a URL from the browser and running a Raycast script command by executing a keyboard command. It’s so much nicer now!

SSH Connections in Visual Studio Code

Sun, 26 Jan 2025 13:00:00 GMT

Recently I needed to work on some script files on a server and wanted to edit them in Visual Studio Code. Visual Studio Code supports remote connections, including ssh connections. Unfortunately, some of these files require root privileges, and I can’t and don’t want to be able to ssh into this server as root.

What about sudo su once you’re logged in, you say?

The good news about configuring ssh connections is that you can set up RemoteCommand entries in your ssh config that will be executed upon connection. sudo su is a command. And the good news about Visual Studio Code is that it lets you specify an ssh config file to use for its ssh connections, so you can customize your Visual Studio Code ssh connections to perform a sudo su upon connection, if needed, while keeping your normal ssh config file free of such silliness so that this doesn’t happen in your normal terminal ssh sessions.¹

First create a copy of your ~/.ssh/config file and name it something obvious. Mine is named config_vscode.

1
ll
2
total 168
3
drwx------@ 20 scott  staff   640B Jan 21 08:47 .
4
drwxr-xr-x@ 76 scott  staff   2.4K Jan 21 09:02 ..
5
-rw-r--r--@  1 scott  staff   6.0K Dec 18  2023 .DS_Store
6
drwx------   3 scott  staff    96B Jan 21 08:47 1Password
7
-rw-------@  1 scott  staff   1.7K Jan 10 14:32 config
8
-rw-------@  1 scott  staff   1.7K Dec 20 20:26 config_por
9
-rw-------@  1 scott  staff   948B Jan 10 14:58 config_vscode

Now edit your newly created created config_vscode (or whatever) file and add the following to the end of connections that need root access to files in Visual Studio Code:

1
RemoteCommand sudo su

This means a given connection that looks like this in ~/.ssh/config:

1
Host server1
2
 HostName server1.domain.com
3
 Port 22
4
 User serverperson
5
 IdentityFile ~/.ssh/server1
6
 IdentitiesOnly yes

Should look like this in ~/.ssh/config_vscode:

1
Host server1
2
 HostName server1.domain.com
3
 Port 22
4
 User serverperson
5
 IdentityFile ~/.ssh/server1
6
 IdentitiesOnly yes
7
 RemoteCommand sudo su

Then in your Visual Studio Code user settings.json file, make sure to point to your custom ssh config and set enableRemoteCommand to true.

1
"remote.SSH.configFile": "/Users/scott/.ssh/config_vscode",
2
"remote.SSH.enableRemoteCommand": true,

Also, in your Visual Studio Code defaultSettings.json, make sure the following is set to true:

1
"remote.SSH.useLocalServer": true,

Then make your ssh connection in Visual Studio Code and be amazed as you now have root powers on files that previously refused to submit to your will.

This assumes that your login user is in your server’s sudoers list and that sudoers don’t need to enter passwords to perform a sudo su. ↩

The Notey McNoteness of Raycast Notes

Wed, 08 Jan 2025 17:00:00 GMT

Raycast Floating Notes started off as a very simple text window you could dump stuff into. That’s all it was. One window, one note, and anything you put in there was always going to be there when you opened Raycast Floating Notes again. Then late last year, Raycast introduced Raycast Notes, a Floating Notes update and replacement (Meet the new Raycast Notes - Raycast Blog).

Raycast Notes is a big upgrade over Floating Notes for the simple reason that you can keep multiple notes… something Floating Notes just couldn’t do. Browse your notes and select the note to view using the menu icon at the top of the current note, or use ⌘P to pop up the list.

You can also perform a bunch of actions in/on notes, such as window auto-sizing, zoom, copying, formatting, searching, creating a quicklink to the note, all with keyboard shortcuts, by clicking the ⌘ icon or using the ⌘K keyboard shortcut.

Here’s the catch, though, at least for me – people who use Raycast want Raycast Notes to become the be-all, end-all of notes apps for them. There are people who genuinely want to replace Obsidian, Apple Notes, or Notion with Raycast Notes, and this has led to some minor annoyances for me. I don’t like the fact that pasting a URL into a note in Raycast Notes auto-formats it as a markdown link. Most of the time I just want a text link that I can see and copy as plaintext.

I understand why people want Raycast Notes to do all these things and have all these features, but honestly for me, I want a scratchpad, not a word processor. Raycast Notes is never going to replace Notion, Apple Notes, or Bear for me. It just can’t, and it’s going to be way too clunky if Raycast tries to do that.

I did learn that there’s a way to at least copy the links that Raycast Notes insists on formatting into markdown back out of the note as plaintext though. Highlight the link, hit ⇧⌘C to pop up the “Copy Selected Text As” menu, and choose “Plain Text”.

Aside from little quibbles like that, I do use Raycast Notes all the time to capture quick info or keep things I need floating on my screen while I work. It’s very much a quick reference, context-based tool for me, and for that use case, I do appreciate it.

Just quit trying to make it into the Microsoft Word of Markdown editors, people. 😄

aichat Config for OpenAI and Anthropic APIs

Mon, 30 Dec 2024 13:00:00 GMT

There is a fascinating LLM CLI tool called aichat that lets you use all kinds of LLM models in the command line, including REPL mode, RAG mode (feeding it your documents and files of choice to use as a knowledgebase), and much more.

I was a little confused about how to configure it to give me a choice of OpenAI and Anthropic LLM models though. I kept breaking the config and generating error messages. Finally I stumbled across a post in the aichat repo’s closed issues that explained for OpenAI and Anthropic, you can configure their API and type information and skip configuring any model information. That way aichat will pull the list of available models from each API for you.

Here’s what my config looks like now:

1
model: claude:claude-3-5-sonnet-latest
2
stream: true
3
save: true
4
wrap: 85
5
wrap_code: false
6
clients:
7
- type: openai
8
  api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
9

10
- type: claude
11
  api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

You can see I default to the Claude 3.5 Sonnet (latest) model. The nomenclature for the value of specified model is type:model-name. Then I have a clients section which lists two types of models: OpenAI and Claude (Anthropic).

Here’s the default Claude 3.5 Sonnet (which is notoriously shy about answering questions about model information):

1
scott@Midnight:~ ➜ aichat "what model are you using?"
2
I'm Claude, an AI assistant created by Anthropic. I aim to be direct and honest in my
3
communications, including about what I am.

But I could also specify a model manually, or set it in an environment variable:

1
scott@Midnight:~ ➜ aichat -m openai:gpt-4o "What LLM model are you using?"
2
I am based on OpenAI's GPT-4 model.

And in aichat REPL mode, you can get a list of models to choose from with the .model ⇥ command (that’s .model followed by a space and a tab).

1
scott@Midnight:~ ➜ aichat
2
Welcome to aichat 0.26.0
3
Type ".help" for additional help.
4
> | .model
5
openai:gpt-4o                        128000 /    16384  |     2.5 /     10    👁 ⚒
6
openai:gpt-4o-2024-11-20             128000 /    16384  |     2.5 /     10    👁 ⚒
7
openai:gpt-4o-2024-08-06             128000 /    16384  |     2.5 /     10    👁 ⚒
8
openai:chatgpt-4o-latest             128000 /    16384  |       5 /     15    👁 ⚒
9
openai:gpt-4o-mini                   128000 /    16384  |    0.15 /    0.6    👁 ⚒
10
openai:gpt-4-turbo                   128000 /     4096  |      10 /     30    👁 ⚒
11
openai:o1-preview                    128000 /    32768  |      15 /     60
12
openai:o1-mini                       128000 /    65536  |       3 /     12
13
openai:o1                            128000 /        -  |      15 /     60    👁 ⚒
14
openai:gpt-3.5-turbo                  16385 /     4096  |     0.5 /    1.5      ⚒
15
claude:claude-3-5-sonnet-latest      200000 /     8192  |       3 /     15    👁 ⚒
16
claude:claude-3-5-sonnet-20241022    200000 /     8192  |       3 /     15    👁 ⚒
17
claude:claude-3-5-haiku-latest       200000 /     8192  |     0.8 /      4    👁 ⚒
18
claude:claude-3-5-haiku-20241022     200000 /     8192  |     0.8 /      4    👁 ⚒
19
claude:claude-3-opus-20240229        200000 /     4096  |      15 /     75    👁 ⚒
20
claude:claude-3-sonnet-20240229      200000 /     4096  |       3 /     15    👁 ⚒
21
claude:claude-3-haiku-20240307       200000 /     4096  |    0.25 /   1.25    👁 ⚒

Arrow up and down to select the model you want and then hit return. This basically does the same as you typing .model type:model-name:

1
scott@Midnight:~ ➜ aichat
2
Welcome to aichat 0.26.0
3
Type ".help" for additional help.
4
> .model openai:gpt-4o
5

6
> what LLM model are you?
7
I am based on OpenAI's GPT-4.

There’s a lot that aichat can do that I haven’t even poked at yet. Honestly, I don’t have time and probably use cases to dig into it much more in the very near term, but it is definitely a very comprehensive CLI tool for LLM use.

Default Apps December 2024

Mon, 23 Dec 2024 13:00:00 GMT

Once upon a time,¹ the Hemispheric Views podcast held the first ever Duel of the Defaults in which they decided who was the winner at using the most default apps for several categories. Then Robb Knight took it to 11 with his App Defaults page.

In the continued spirit of blogging about one’s default apps, here is my updated list for 2024.

Official Categories

📮 Mail Server
- Fastmail
- Gmail
- Outlook for business
📨 Mail Client
- Apple Mail
- Outlook for business
📝 Notes
- Notion
- Apple Notes for family note sharing
- Bear for all my writing and podcast show notes
- Raycast Floating Notes Window
✅ To-Do
- Reminders App
📷 iPhone Photo Shooting
- iOS Camera
🟦 Photo Management
- Photos App
📅 Calendar
- Apple Calendar
- CalendarBridge for work calendar sync and scheduling
📂 Cloud File Storage
- iCloud Drive
📖 RSS
- Reeder
- Reeder Classic
👩‍🦲 Contacts
- Apple Contacts App
🌐 Browser
- Safari, Chrome for web work
💬 Chat
- Messages, Signal, Discord, Slack
🔖 Bookmarks
- Anybox
📑 Read It Later
- Safari Read Later
📜 Word Processing
- Bear for all my writing and podcast show notes
- Pages
- Google Docs
- Microsoft Word
📈 Spreadsheets
- Excel (I’m sorry, but Numbers is the most useless excuse for a spreadsheet app I’ve ever seen)
📊 Presentations
- Keynote
🛒 Shopping List
- Reminders
🍴 Meal Planning & Recipes
- Mela
💰 Budgeting and Personal Finance
- Spreadsheet
📰 News
- RSS
- Mastodon
- BlueSky
🎵 Music
- Apple Music
🎤 Podcasts
- Overcast
🔐 Password Management
- 1Password
- Apple Passwords/Keychain

Additional Categories

🧑‍💻 Programming & Text Manipulation
- Visual Studio Code
- BBEdit
- Xcode
💻 Terminal
- Warp
📸 Photo Editing
🔷 Vector Graphics
- Affinity Designer 2
🧠 AI
- Raycast AI
- GitHub Copilot

November 2nd, 2023, in fact ↩

BBEdit for Log Analysis

Thu, 19 Dec 2024 20:00:00 GMT

Long-time Mac users will undoubtedly have heard of BBEdit. BBEdit is the favorite Mac text editor of many old Mac users¹ for various types of writing, including programming, notes, articles, and basically any type of writing Mac nerds can do.

Personally, I wouldn’t program using BBEdit. Visual Studio Code and offshoots like Cursor are much better for that. I wouldn’t write this blog post in it. That’s what I use Bear for. And, in my humble-ish opinion, they’re much better at those tasks than BBEdit is.

But there is a specific use that BBEdit can’t be topped for on the Mac – log file analysis. It’s like BBEdit was made specifically for it.

Here’s a UTM firewall packet filter log containing all entries for a given day, downloaded right from the UTM’s log file interface.

If I want to look at only entries for 192.168.5.5 and 192.168.5.109, I can open the Search dialog box with ⌘F and put in a regular expression to search for that.

Right in the Search dialog box, before even hitting “Find All”, it shows me at the bottom how many matches there are – 3505 of them.

If I do hit “Find All”, it opens a new window containing those lines at the top of the window, and, if I click on one of them, the log file they are in with the highlighted line in view at the bottom of the window. It’s great for contextualizing matches.

But what if I want a document that contains those matching lines and nothing else? That’s what the “Extract” button on the Search dialog box is for. By clicking that instead of “Find All”, a new document is created in BBEdit that contains just the matching lines named “Extracted occurrences of (insert regular expression search string here)”.

I use this all the time to drill down further and further without having to edit any files or keep search results windows open. Let’s say I have a subset of IP addresses extracted, like anything in the 192.168.5.x range, and I want to see only lines that have a firewall action of “drop” in them. In other words, I want to ignore all cases where the firewall passed the traffic along and only see when it blocked it for those IP addresses.

Very simple. While viewing the document of extracted 192.168.5 matches, ⌘F again and enter a new regular expression looking for lines where action=“drop”. The search dialog shows 29 matches.

Hit the “Extract” button and extract the 29 matches to a new document.

Sometimes when viewing results like this I want blank lines between them so I use a regular expression find and replace when doing this, and click the “Replace All” button in the search dialog, which acts on the active document and replaces all matches with what I want – in my case, the same result lines but followed by 2 newlines after each of them.

Much better for my tired old eyes.

And now for some additional niceties of BBEdit search:

You can save your searches and access them using the “g” button on the Search dialog to get a dropdown list to choose from.

You can also, as my examples in this post illustrate, pull up previously used searches from the search history feature by clicking the clock icon button on the search dialog, and choosing from the dropdown list.

There’s also a multi-file search you can open separately from regular search, with the same features mentioned above, using ⇧⌘F. It lets you choose the files to search in with great granularity, and it has the same “Find All”, “Replace All”, and “Extract” functions as the regular active file search function. This means you can extract all instances of a specific thing contained in multiple files to one new document.

One important thing about composing a search in BBEdit if you do want to extract to a new document is that you need to compose your regular expression to include a full line and not just the exact search terms specified. For example, if you just search for “192.168.5” like this, and then Extract:

You get this:

Not very useful if you’re into context or understanding of any kind. But if you use a regular expression that looks like this (since in my case, the log is separate lines of logged events):

Now you get the full line for each matching line:

That’s because the search was created with a regular expression of ^.*192\.168\.5.*$, which looks for start of line, any characters any number of times followed by 192.168.5, followed by any number of any characters, followed by end of line. When using regular expressions as search terms, make sure that the Grep option next to “Matching:” in the search dialog box is checked so that the search term acts as a regular expression instead of a literal string.

I’m sure there’s much more that I haven’t even discovered about BBEdit and searching and extracting yet, but these are some things that I use all the time and find indispensable. If your job or hobby requires you to parse log files very often, I recommend a copy of BBEdit even if you never use it for anything else. It’s still very worth the price for that.

I’m old too, so this is fair game. And it’s true. I don’t think many new and or young Mac users use or even know about BBEdit. ↩

Astro 5 Upgrade

Tue, 10 Dec 2024 09:00:00 GMT

Astro 5 is out, and it has a number of changes from Astro 4. The good news is, I was able to upgrade this site to it without making any changes at all. That doesn’t mean I don’t have any to make – I need to convert my Content Collections to the new Content Layer API at the very least, for example.

But the fact that it worked as is enabled me to update all my packages to the latest versions and then worry about updating specific implementation details later.

I do want to point out that if you have any sites using the Astro Starlight documentation site framework, you can’t upgrade to Astro 5 yet. It will not compile. There is a PR in place and the stellar Astro documentation team is all over it!

I’ll make notes about the actual changes I do make to this site to be fully Astro 5 compliant and write a post about it soon.

Manage Multiple GitHub Deploy Keys

Mon, 18 Nov 2024 13:00:00 GMT

GitHub Deploy Keys
Create the Deploy Keys
Add the Public Keys to the GitHub Repositories
Assign the Correct Keys to the Correct Repositories

GitHub Deploy Keys

Sometimes I want to be able to pull a personal GitHub repository onto a server in order to keep some files up to date. Things like scripts that I won’t edit on the server and so won’t need to push to GitHub are good candidates for this. In order to accomplish this in a reasonably secure way, I use GitHub Deploy Keys. With a read-only deploy key, if someone ever gets access to my server I’ll suddenly have a billion new problems, but worrying about my repositories being overwritten with malicious garbage won’t be one of them.

Deploy keys are repository specific, however, which means if you have multiple repositories you want to pull from GitHub onto the server, you need a way to specify which deploy key each repo should use.

Let’s use an example where I have two repos, both of which I want to pull onto my server. One is called server-management-scripts and the other is called website-management-scripts.

Create the Deploy Keys

You can use good old ssh-keygen in your account’s .ssh directory on the server to create your keys. In my case, ecdsa keys, named sms-deploy (for server-management-scripts repo) and wms-deploy (for website-management-scripts repo).

1
ssh-keygen -t ecdsa -f sms-deploy

And

1
ssh-keygen -t ecdsa -f wms-deploy

Because these are going to be read-only keys for their repos, I do not use a passphrase on them.

1
scott@dragonfly ~/.ssh $ ll
2
total 40
3
drwx------ 2 scott scott 4096 Nov 19 18:23 ./
4
drwxr-xr-x 8 scott scott 4096 Nov 19 18:21 ../
5
-rw------- 1 scott scott  194 May  8  2024 authorized_keys
6
-rw-r--r-- 1 scott scott  133 Mar 12  2021 config
7
-rw------- 1 scott scott  505 Nov 19 18:22 sms-deploy
8
-rw-r--r-- 1 scott scott  177 Nov 19 18:22 sms-deploy.pub
9
-rw------- 1 scott scott  505 Nov 19 18:23 wms-deploy
10
-rw-r--r-- 1 scott scott  177 Nov 19 18:23 wms-deploy.pub

Add the Public Keys to the GitHub Repositories

Go to your repository on GitHub, go into the repository settings, Click the Deploy Keys link, and click the Add Deploy Key button.

Give the key a name in the Title textbox, copy the contents of your public key (the .pub file for the key) that you created on your server into the Key textbox, and leave “Allow write access” unchecked. Click the “Add key” button.

Now your new deploy key shows in the repo’s Settings > Deploy keys, and this key can be used to pull the repo.

Once you’ve added the public keys to the repos, you can delete them from your server, leaving only the private keys behind.

1
scott@dragonfly ~/.ssh $ ll
2
total 32
3
drwx------ 2 scott scott 4096 Nov 19 18:23 ./
4
drwxr-xr-x 8 scott scott 4096 Nov 19 18:21 ../
5
-rw------- 1 scott scott  194 May  8  2024 authorized_keys
6
-rw-r--r-- 1 scott scott  133 Mar 12  2021 config
7
-rw------- 1 scott scott  505 Nov 19 18:22 sms-deploy
8
-rw------- 1 scott scott  505 Nov 19 18:23 wms-deploy

Assign the Correct Keys to the Correct Repositories

In order to make sure that a git pull command works correctly in each repo, I can edit my user account ssh config file on the server to contain these entries:

1
Host serverscripts
2
 HostName github.com
3
 User git
4
 AddKeysToAgent yes
5
 IdentityFile ~/.ssh/sms-deploy
6
 IdentitiesOnly yes
7
 ForwardAgent yes
8

9
Host websitescripts
10
 HostName github.com
11
 User git
12
 AddKeysToAgent yes
13
 IdentityFile ~/.ssh/wms-deploy
14
 IdentitiesOnly yes
15
 ForwardAgent yes

Now, in each repo’s .git directory on the server, I can edit the config file to reference the correct entry in ~/.ssh/config :

1
[core]
2
 repositoryformatversion = 0
3
 filemode = true
4
 bare = false
5
 logallrefupdates = true
6
[remote "origin"]
7
 url = git@serverscripts:scottaw66/server-management-scripts.git
8
 fetch = +refs/heads/*:refs/remotes/origin/*
9
[branch "main"]
10
 remote = origin
11
 merge = refs/heads/main

Notice the highlighted part, which is the URL for the repo to use. It uses serverscripts as the server portion of the URL (the part after the @ symbol and before the :), because that matches the first Host entry in my account’s ~/.ssh/config file on the server.

The second git repo’s config file on the server would look like this, since I gave it a Host name of websitescripts in the ~/.ssh/config file:

1
[core]
2
 repositoryformatversion = 0
3
 filemode = true
4
 bare = false
5
 logallrefupdates = true
6
[remote "origin"]
7
 url = git@websitescripts:scottaw66/website-management-scripts.git
8
 fetch = +refs/heads/*:refs/remotes/origin/*
9
[branch "main"]
10
 remote = origin
11
 merge = refs/heads/main

Now both repos are linked back to a specific entry in ~/.ssh/config, and therefore to their respective deploy keys, specified on the IdentityFile line. The ssh key file for the server management scripts repo is ~/.ssh/sms-deploy, and the ssh key for the website management scripts repo is ~/.ssh/wms-deploy.

When you do a git pull in either of those repos on the server, it will now use the correct deploy key to authenticate.

Initial SuperDuper Copy

Mon, 28 Oct 2024 13:00:00 GMT

Last night I mentioned setting up SuperDuper! to clone my Mac’s internal SSD to an external SSD daily. One thing about the initial copy you should know that doesn’t pertain to subsequent incremental copies is don’t let your Mac sleep during the initial copy.

I even thought about this when I started the initial backup, but then thought it shouldn’t matter. I came back to a failed copy with the following errors in the SuperDuper! log:

1
| Info |       Volume replication failed - Resource busy
2
| Error | ***ERROR OCCURRED: ****FAILED****: result=256 errno=60 (Operation not permitted)

I sent the log to Shirt Pocket support, and Dave Nanian quickly replied with the following (I hope he doesn’t mind me posting it here):

Your Mac has fallen asleep during the copy, even though we asked it not to, or something similar (such as a TRIM operation that takes too long) — as you can see, Apple’s error is vague and unhelpful.

But, in our experience, this usually works. Please reformat the backup drive (which, done this way, should reset all the TRIM operations):

Open Disk Utility

Choose “Show All Devices” from the View menu

Select the destination drive hardware (above the existing volume)

Click Erase

Choose the “GUID” partition scheme (2nd pop-up), THEN “APFS” formatting (1st pop-up) and name appropriately

Click Erase

Then restart your Mac. Install Coca (free) from the App Store and enable it to keep your Mac awake — including the screen. Ensure it’s plugged in if it’s a laptop. Turn Time Machine off temporarily. Then try the erase-then-copy backup again.

Note that none of this should be necessary for future Smart Updates, which are done with our copy engine, and not Apple’s.

Hope that helps!
—
Dave Nanian
Shirt Pocket

In my case, I use the Raycast Coffee extension now when I want to keep my Mac awake, so I used that to make sure the first copy finished.

Anyway, don’t sleep on that first copy, and do back your drive up to more than one destination. Make at least one local and at least one remote (cloud backup is fine). I highly recommend SuperDuper! for its features, price, and always outstanding support from Dave Nanian.

SuperDuper Invisible

Sun, 27 Oct 2024 13:00:00 GMT

I’ve certainly used drive cloning software in the past, including SuperDuper!.¹ For awhile now, though, I’ve just had Backblaze as my backup method, which does violate my principle of always having local and remote backups. So when I saw Jason Snell’s article on SixColors about using a cloned drive to recover from Mac failures, it gave me the impetus to make a clone again.

I love and like and love SuperDuper! and always have, but I do wonder about this UI choice…

If you can’t see the blue progress bar inside the outlined section of that Copy Files section header, you are not the only one. It took me a couple minutes to realize it was there.

Look, I may be the pot calling the kettle black, or not picking the mote out of my own eye, or whatever metaphor from 50,000 years ago for hypocrisy you want to use because of the color of the hyperlinks on my site’s dark theme, but that is some kind of invisible ink level trickery on that progress bar.

Anyway… according to the invisible progress bar, as I write this SuperDuper! is about 75% of the way done cloning my internal drive.

It looks like I’m ending that sentence with two punctuation marks, but SuperDuper! is the name of the product, and the period is the end of the sentence. Really. ↩

nownownow Oregon Edition

Sat, 26 Oct 2024 17:00:00 GMT

You all know, I hope, that I have a /now page on this site for quick dumps of things I’m into at the moment. It’s ephemeral, as /now pages should be.

The idea of the /now page comes from Derek Sivers, and he has a whole site, nownownow.com, dedicated to spreading the message and the sheer fun of /now pages.

And look! You can see people by region!

I’m very pleased to announce that, as of this writing, 37 of us in Oregon are extremely proud of whatever it is we’re doing /now. You should definitely check it out. I’m even listed right beside Justin Miller.

I was a little surprised to see that everyone in Japan touting their /now pages are gaijin¹ and not Japanese. Some of those people in Japan need to talk to the people they live amongst and spread the news! Richard Möhn is my hero though – he lives in Kagoshima City, my old stomping grounds!

Here’s your assignment for today:

Visit my /now page.
Read up about /now pages.
Make your own.
Email the URL to Derek Sivers.
Be part of a nice group of people who like to have fun, love the indie web, and think you should do it /now!

Foreigners ↩

Mail Weekly Reads Script Command

Thu, 17 Oct 2024 17:00:00 GMT

As I mentioned previously, I have a Weekly Reads page that I set up to make it easier for me to share articles with my dad and brother (and anyone else who cares), complete with RSS feed. But let’s be real, neither of them wants to be bothered with my feed because they have stuff to do and we already have a tradition of emailing links to each other.¹

Last night I created a Raycast Script Command that looks at the markdown file for my latest Reads update, parses and reformats it for email, and mails it out to them. It looks like this:

1
#!/bin/bash
2

3
# Required parameters:
4
# @raycast.schemaVersion 1
5
# @raycast.title Mail Weekly Reads
6
# @raycast.mode fullOutput
7

8
# Optional parameters:
9
# @raycast.icon
10
# @raycast.argument1 { "type": "text", "placeholder": "Subject" }
11
# @raycast.packageName Website
12

13
# Documentation:
14
# @raycast.author scott_willsey
15
# @raycast.authorURL https://raycast.com/scott_willsey
16

17
subject=$1
18

19
# Find the latest file in the specified directory
20
latest_file=$(ls -t ~/Sites/scottwillsey/src/content/reads | head -n1)
21
echo "Processing file: $latest_file"
22

23
# Read the contents of the file, remove YAML front matter, and modify markdown links
24
content=$(awk '
25
    BEGIN { in_frontmatter=0; }
26
    /^---$/ { in_frontmatter = !in_frontmatter; next; }
27
    !in_frontmatter { print; }
28
' "/Users/scott/Sites/scottwillsey/src/content/reads/$latest_file")
29

30
content=$(echo "$content" | perl -0pe 's/\*\*\[(.+)\]\((.+)\)\*\*\n\n(.+)/$3 → $1 – $2\n/gm')
31

32
echo "Content after regex replacement:"
33
echo "$content"
34

35
# Escape the content for AppleScript
36
escaped_content=$(echo "$content" | sed -e 's/\\/\\\\/g' -e 's/"/\\"/g' -e 's/`/\\`/g' -e "s/'/\\'/g" -e 's/$/\\n/' | tr -d '\n')
37

38
# Pass the escaped content to the AppleScript
39
osascript <<EOD
40
on run
41
    set theContent to "$escaped_content"
42
    tell application "Mail"
43
        set theFrom to "me@mine.com"
44
        set theTos to {"dad@dads.com", "brother@brothers.com"}
45
        set theCcs to {}
46
        set theBccs to {}
47

48
        set theSubject to "$subject"
49
        set theSignature to ""
50
        set theAttachments to {}
51
        set theDelay to 1
52

53
        set theMessage to make new outgoing message with properties {sender:theFrom, subject:theSubject, content:theContent, visible:false}
54
        tell theMessage
55
            repeat with theTo in theTos
56
                make new recipient at end of to recipients with properties {address:theTo}
57
            end repeat
58
        end tell
59

60
        send theMessage
61
    end tell
62
end run
63
EOD

It takes one parameter when I run the script so that I can give the email a cutesy custom subject (another idea I stole from my brother).

Then it parses the latest file in my web project’s /src/content/reads directory, replaces markdown links with “commentary → link title – link” for each link and following commentary paragraph in the page, and gives that to an AppleScript to send the mail.

From this markdown page that generates the individual HTML reads page:

To this email that gets sent to my long-suffering family members:

It’s simple and effective. You can do this and make your family hate you too.

Fine, it’s my brother’s tradition and I’m stealing it, much to his annoyance I’m sure. ↩

Raycast Extensions I Use

Sun, 13 Oct 2024 17:00:00 GMT

Introductionum

Recently Niléane of MacStories wrote about the Raycast extensions she uses in Adding to My Mac’s Swiss Army Knife: A Raycast Extension Roundup - MacStories. I learned about a couple good ones that I wasn’t aware of, but I also thought I would list Raycast extensions I use here, along with a little bit about why for each of them.

The Listium

So here they are in alphabetical order-ish:

1Password

I actually underutilize this one. It allows for opening items in various ways (in 1P or in a browser), generating passwords, and more, but I’m so familiar with 1Password’s own keyboard shortcuts that I forget about the Raycast extension.

Append Clipboard

This is a really outstanding extension that lets you prepend or append text to whatever’s on your clipboard with a pre-specified separator. It sounds like something I should use all the time. I’d actually forgotten I had this one installed. 🤦‍♂️

Apple Mail

Stop me if you’ve heard this one before – here’s an extension that sounds really useful and I just don’t use it. But I should! Checking for new mail, composing an email, sharing finder items to mail, seeing recent or important mail, these are all possible with this extension. I think with most of these it’s a matter of building muscle memory.

Apple Reminders

I actually have used this extension! The Apple Reminders extension lets you use natural language to set reminds, in addition to allowing you to view and complete them.

Brew

Hi, Homebrew users! Want a quick way to see what you’ve installed with Homebrew, or search for and install new formulae and casks? You can do so from wherever you’re at in macOS with this extension.

Change Case

I use this extension all the time. Capital Case, camelCase, lower case, PascalCase, snake_case, UPPER CASE, and more… select your text and have at it. I love this one.

Clean Keyboard

I just started using this one today. It effectively locks your keyboard until you type ^ U (Ctrl+U) to unlock it, in order to allow you to clean the keyboard without deleting your home folder or sending an obscene message to your boss.

CleanShot X

I’m currently a heavy CleanShot X user and this extension has a ton of useful CleanShot X commands, but once again… the old muscle memory. If you picked up on the fact that I’m primarily writing this article to benefit myself, you win the prize of knowing how insightful you are.

Clipboard Formatter

I use this all the time to clear formatting from items in the clipboard. It comes in handy for certain things I have to enter into excel, for example. Yes, you can tell excel to paste in content only, but this is faster for me, and it’s also useful anywhere you need formatting removed.

ColorSlurp

I use ColorSlurp for color picking and therefore I use this extension to quickly launch it and grab colors, but truthfully I may very well switch to Color Picker instead. In fact, I’m doing it right now.

Copy Path

Oh, I love this one. For example, I just had a finder window with some pdfs in it open and I ran this extension and it gave me /Users/scott/Documents/BlueDragonfly/Sophos/ET15 - Sophos Central Endpoint Protection v5.0 - Engineer/ET15-Sophos-Central-5.0v5-Engineer-EN/01 Sophos Central Overview/ on my clipboard. You can’t beat that!

Cron Description

You ever look in crontab and see something illegible like */15 * * * * python3 /usr/local/sbin/scripts/wanipy/main.py --env prod > /dev/null and you can’t remember what */15 * * * * means? Well, it means run this thing every 15 minutes, and I know that because (well, I already knew that particular one) Cron Description told me!

cURL

I know I installed this for a reason, I just don’t remember what it was. Anyway, it lets you use curl to make an HTTP request, complete with custom headers.

Custom Folder

I haven’t actually used this yet, but this one helps you create custom folder icons and apply them to folders you want to customize. It’s not something you’ll use every day, but it’s pretty cool.

Date Format Converter

Input a date string and then format it into any standard date format you like. It’s that simple.

Dynamic Font Size

If you’ve ever struggled with the CSS clamp function, you’ll like this one. You just enter your parameters, like min and max font sizes and min and max viewport sizes, and it’ll generate your clamp for you.

Easings

Another CSS helper. You can quickly copy an ease-in like cubic-bezier(0.55, 0.085, 0.68, 0.53); or you can create your own custom CSS transitions.

Format JSON

Lets you take JSON that’s not formatted nicely and indent everything properly.

GIF Search

Search for GIFs, favorite them, paste them in various ways to various targets.

Git Commands

Search and learn what different git commands do.

GitHub CLI Manual

Helpful if you need to interact with GitHub using a CLI, this utility lets you search for commands and then opens the GitHub manual page for them.

GitHub

Too many commands to list here, but it lets you work with GitHub in various ways. I guess that’s pretty self-evident.

GitHub Repository Search

This is for searching for repos on GitHub and quickly opening them (and really quickly opening repos you’ve visited before).

Google Chrome

I primarily use this for searching Chrome history, but you can search bookmarks, open windows, search tabs, and more.

Google Translate

I have never used this. Maybe I should uninstall it.

HTTP.cat Status Codes

This reminds you what all those pesky HTTP status codes mean AND gives you a cute cat to go with it. The internet was invented for cats. Don’t ever forget it.

Iconify — Search Icons

Here’s a good one that I should really use more. Search for icons and get the svg source code.

Ingredients Lister

I can see why I installed this, but I can’t see why I haven’t used it yet. This grabs web pages or YouTube videos and gets recipe ingredients from them for you.

Installed Extensions

If you’re thinking “I bet Scott used this extension to list what extensions he has installed”, you win a Ferrari!! I mean, someone else is going to have to provide the Ferrari. But I’ll let you win it if they’re willing to give it. 🤷

Link Cleaner

Clean those dirty links of yours, dammit!! Auto-scrubs tracking and referral crap off URLs for you.

Lorem Ipsum

Occasionally while mocking up some web idea I’ll toss in some Lorem Ipsum text, and this is a super quick way to do it.

Markdown Reference

I kind of installed this one because I could. I don’t think I’ve ever needed to use it. I use Markdown all the time but it’s pretty simple.

Menubar Calendar

I like this one for letting me pop open a tiny calendar quickly and for also showing me upcoming calendar items.

Notion

I use Notion. I use Raycast. You’d think I’d use this extension. Truth is, I keep forgetting about it (again). I should at least use the search feature, that would save me some time getting to it in the Notion app itself.

Open Link in Specific Browser

This is actually kind of cool, but I never use this because I’ve created default browser script commands that I use all the time.

Open Path

Here’s another one I have but never used. It looks like a way to open things in various apps depending on what the source link is, but… I have no clue.

Pins

I like this one. It’s just another way to get to things – I use it to create pins to Finder folders, mostly.

Pipe Commands

This lets you take various input sources and pipe them into a script command. You’d think I would use this all the time.

Placeholder

Grabs placeholder images from Lorem Picsum. Pretty handy.

PromptLab

A super useful extension for creating AI prompts to be used with Raycast AI.

Quick Calendar

Yep, another calendar extension, but this one just pops open a bigger calendar window to look at.

Quick Event

Um, I’m going to let you guess whether or not I’ve ever actually used this, but it’s for quickly creating calendar events.

Random Data Generator

This is a really cool one for quickly generating random dates, CC numbers, text, email addresses, and more.

Raycast Icons

Have not used. There, are you happy? This is for looking at various Raycast-specific icons.

Reddit Search

I might use this more if 1.) I remembered I have it, 2.) I don’t hate Reddit so much. Does everyone there have to write like they’re 13?

Regex Tester

I should use this more and see if it’s any good. I’m spoiled by BBEdit’s RegEx playground feature so I never do.

Remove Paywall

I’m not going to overtly state why I use this one, but I use it quite a bit. I don’t constantly end-run around paywalls on the same sites over and over. It’s for one-offs.

Ruler

This is a cool one for measuring stuff on the screen. I used this the other day to make a screenshot of a certain form item on a web page vs. what the form item plugin thought the minimum width should be. Yes, I could have used the browser developer tools for that, but this was easier for the client to look at and instantly get the point.

Safari

Like its Chrome counterpart, I mostly use this for Safari history search, but it’s also good for searching tabs and the reading list (which I do use).

ScreenOCR

I don’t think I have ever used this because I’ve discovered the OCR reading shortcut in CleanShot X, but it is pretty cool.

Search npm Packages

I don’t really use npm for a lot these days because most stuff I script I now script in Python. I of course use npm with things like Astro, but I don’t need to search for anything for that.

Set Audio Device

This is a great one to use to make sure you’re using your podcast mic instead of the built-in laptop one or whatever else will pick up the cricket in your kitchen.

Shell

I don’t know. It looks cool, but I’ve never used it. I have Warp, what the hell, guys. Get off my back. 😄

Speedtest

A handy way to run the ever popular speedtest.net speed test.

Summarize YouTube Videos with AI

I keep meaning to show this one to Peter. An AI watches videos so you don’t have to. Problem is, AIs are shite at summarizing (imnsho).

System Monitor

I have no clue why I have this installed, because I use and love iStat Menus.

Text Shortcuts

I use this a LOT while writing and programming, and I LIKE IT. Quick and easy text transformations of all types.

Timezone Converter

I use this when I remember to. Mostly I use it before I’ve had coffee for trying to see what people on the east coast might be doing.

Type Snob

VERY specific text utility for curly quotes, real em and en dashes, etc.

Unicode Symbols Search

I don’t always search for unicode symbols, but when I do…

Unix Timestamp

Unix timestamps were created by the devil, so I guess this is really just a conduit to hell. But it’s a pretty cool one.

URL Tools

URL encoding and decoding made fun and easy!!!

UUID Generator

Who does not need a UUID from time to time? No one, that’s who. If you think you don’t, well now you know why your life is falling apart.

Visual Studio Code - Project Manager

I genuinely have no idea why I have this instead of the general purpose Visual Studio Code extension. Maybe I was drinking beer the night I installed this.

Warp

I LOVE WARP!!! I always forget I have this installed though. I know. I’m a loser.

Web Converter

I do webby things a lot. I should probably try to remember I have this installed. “Hey, Scott. You have this installed.”

Wordle

I used to play this, but then I paid for Lex.games and have never looked back.¹

World Clock

Somewhere in the world, it’s X o’clock!! Find out where!! Also (and even cooler), put in an IP address and find out what time it is for whatever has that stupid IP.

YouTube

Search YouTube videos and channels like it’s 1999. I don’t know why I said that. I’m not even sure when YouTube was first created.

YouTube Downloader

Speaking of YouTube… download all of YouTube, one video at a time!!!!

Summarium

That’s pretty much it for now. I’m always open to revisiting things and uninstalling some things and installing other things. Most likely in a year from now, not much will have changed though.

I love Lex.games. Don’t even get me started. ↩

Weekly Reads

Sat, 28 Sep 2024 17:00:00 GMT

My brother likes to send emails to dad and I containing links of interesting things he’s read recently, replete with commentary of his own. I used to send one link at a time to them, then I tried his approach, and now I generally send a link at a time again.

Instead of this nonsense, I thought I’d create a Weekly Reads page to add Weekly Reads posts to, complete with its own RSS feed.

I may call it Weekly Reads, but I may add reads more than weekly or much less than weekly. I don’t know. Don’t pressure me! I have a lot going on! 😄

I need to create some links to it so people can find it and know it exists, but it’s there! It works!

Updated Sessions Raycast Script Command

Sun, 15 Sep 2024 13:00:00 GMT

As you may know, I created a Raycast script command to trigger what I call “sessions”, which are really just setting up the Mac to perform different tasks, such as podcasting or “normal” general use. At the time, I was using Raycast for window management, so my script command referenced Raycast window management layouts. Now I’m using Moom for window management, so I needed to update it to call my Moom layouts instead.

In the process, I decided to steal even more from Robb Knight’s App Mode Raycast script command and use his method of killing all apps before activating a session and having an array of default apps that I always want open. It’s almost the same exact script now.

The updated version looks like this:

1
#!/bin/bash
2

3
# Required parameters:
4
# @raycast.schemaVersion 1
5
# @raycast.title Session
6
# @raycast.mode fullOutput
7

8
# Optional parameters:
9
# @raycast.icon /Users/scott/Scripts/Raycast/icons/app-mode.png
10
# @raycast.argument1 { "type": "dropdown", "placeholder": "Session", "data": [ { "title": "Home", "value": "home" }, { "title": "IT", "value": "it" }, { "title": "Podcast", "value": "podcast" }, { "title": "Podcast Edit", "value": "podcastedit" } ] }
11
# @raycast.packageName Utils
12

13
# Documentation:
14
# @raycast.description Set up a workflow session
15
# @raycast.author scott_willsey
16
# @raycast.authorURL https://raycast.com/scott_willsey
17

18
open raycast://extensions/raycast/system/quit-all-applications
19

20
sleep 3
21

22
CORE=(1Password Messages Mail Safari)
23

24
TYPE=$1
25

26
for value in "${CORE[@]}"
27
do
28
    open -a "$value"
29
done
30

31
if [ "$TYPE" = 'home' ]; then
32
    open 'raycast://script-commands/set-default-browser-safari'
33
    sleep 2
34
    open -a Warp
35
    /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Speakers"
36
    /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Microphone" -t "input"
37
    osascript ~/Scripts/applescript/apply_moom_layout.scpt "Home"
38
        exit
39
fi
40

41
if [ "$TYPE" = 'it' ]; then
42
    open 'raycast://script-commands/set-default-browser-chrome'
43
    sleep 2
44
    open -a "Google Chrome"
45
    open -a Warp
46
    open -a Slack
47
    /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Speakers"
48
    /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Microphone" -t "input"
49
    osascript ~/Scripts/applescript/apply_moom_layout.scpt "IT"
50
        exit
51
fi
52

53
if [ "$TYPE" = 'podcast' ]; then
54
    open 'raycast://script-commands/set-default-browser-safari'
55
    sleep 2
56
    open -a "Audio Hijack"
57
    open -a Farrago
58
    open -a Bear
59
    open -a FaceTime
60
    /opt/homebrew/bin/SwitchAudioSource -s "Elgato Wave XLR"
61
    /opt/homebrew/bin/SwitchAudioSource -s "Elgato Wave XLR" -t "input"
62
    osascript ~/Scripts/applescript/apply_moom_layout.scpt "Podcast"
63
        exit
64
fi
65

66
if [ "$TYPE" = 'podcastedit' ]; then
67
    open 'raycast://script-commands/set-default-browser-safari'
68
    sleep 2
69
    open -a "Logic Pro X"
70
    open -a Finder ~/Documents/Podcasts/FwB
71
    /opt/homebrew/bin/SwitchAudioSource -s "Elgato Wave XLR"
72
    osascript ~/Scripts/applescript/apply_moom_layout.scpt "PodcastEdit"
73
        exit
74
fi

You can see that because my so-called “IT” session sets Chrome as the default browser, I’m compelled to set Safari as my default browser for every other session type. I supposed I could just move that out to the top and have it called no matter what, and then immediately reversed if the session type is “IT”. You can read about my default browser script commands here.

The reason for the sleep commands is that without them, running the Session script command would result in some timing issue in which only some of the apps would open, but not all of them. I was able to solve the problem by putting in a sleep after killing all applications and after setting the default browser.

Calling Moom layouts using AppleScript commands (osascript) is possible because the author of Moom supports AppleScript calls to the program. I wish more programmers would think of their apps as potential links in a workflow chain like this.

Moom 4

Mon, 09 Sep 2024 13:00:00 GMT

You may have noticed, as you’ve wandered the site, that I’m a bit of a Raycast fan. You may, therefore, imagine that I use the Raycast window management tools to move and arrange windows . And it’s true. Well, it was true. Then Many Tricks released Moom 4, the update to their popular Moom window manager app.

Historically, I’m a window manager serial monogamist. Like any other type of utility, there’s a wide range of approaches to this task in the available third-party apps. Some let you draw your window size and location on the screen, some have keyboard shortcuts for instantly popping things into specific locations, some let you save multi-window layouts, and many various combinations of these things. Raycast does two of these things. Moom does all of these things.

At first glance, you might think Moom is a slower way to manage windows. One of its signature controls is the Keyboard Controller, which you activate via a hotkey (in my case ^⌥⌘Space). Once it’s onscreen, you can use the keys indicated on its cheat sheet to move and/or resize your focused window per the options available.

You can also customize the options that appear at the top of that list, and the bottom section will always show any actions you’ve assigned single-key hotkeys for. For example, based on my arrangement above, pop open the Keyboard Controller with ^⌥⌘Space and then hit 3 and you’ll move the foreground window to the left third size of the screen.

Another great way that Moom allows for window control is something I think may be unique to it – a palette of window management buttons that shows up when you hover over one of the stoplight buttons in the window’s top left corner. You can specify in Moom’s settings which of the three buttons to hover over to get the palette, as well as which window commands are available.

These are all great and dandy, but Moom has freeform sizing and moving options too. You can configure Moom hotkeys that allow you to glide the cursor over a window to move it or to resize it. These options sure beat trying to find an empty spot to click on a title bar filled with tabs, or to find the little grab handles at the edge of the window. Apple really hates onscreen controls and the native resizing controls can be slow to manipulate.

And then there’s the grand champion of all freeform resizing, the Moom grid. It allows you to quickly draw out a window size to fit anywhere on a grid. You can set the number of rows and columns in the grid, which gives you quite a bit of range in window size granularity.

Here’s what it looks like to drag out the shape you want to resize your window to on the grid:

And here’s the resulting resized Safari window.

Despite all these great window management options, sometimes good old fashioned hotkey controlled instant resizing and moving is still the best way to quickly tile windows. Moom allows for that. You can create custom window sizes and locations and assign hotkeys to them. You can also make window layouts with multiple windows that can be applied instantly. Window layouts can be set to apply to specific apps only, or to whatever windows are handy when you apply the layout.

You can see some of my window settings complete with hotkeys in my Moom settings window below.

And in a bit of good news for me, Moom commands can be activated via AppleScript. Thanks to this, I modified my Sessions Raycast script command to accommodate setting window layouts using Moom instead of using Raycast’s window management tools. I’ll show you that in a future post.

I do like the window management commands in Raycast, and there’s always an argument for having one less application running in memory. But Moom is more versatile (and frankly more fun to use), and Raycast lets me disable its window management, and so Moom 4 seems like a no-brainer to me.

At least for now.

The Green Economy Is Hungry for Copper-and People Are Stealing, Fighting, and Dying to Feed It

Mon, 02 Sep 2024 20:00:00 GMT

This is not a normal topic for me on this site, but since I blather on about technology nonstop and make my living thanks to it, it’s important to highlight the very real downsides it brings. For example, the current push towards electrification of everything is ramping the planet’s need for copper, and copper means exploitation, death, and environmental disaster to people in many parts of the world.

If this doesn’t sound very interesting, the human element of the story is intriguing. Just the part about Robert “Toxic Bob” Friedland illustrates how wild this story really is:

By the early 1980s Friedland had teamed up with some Vancouver-based financiers and moved into the world of mining, hustling for small gold outfits. He made headlines in 1992 when a Colorado gold mine he had previously overseen (as its parent company’s CEO) leaked toxic heavy metals into a nearby watershed, earning him the nickname “Toxic Bob.” In the meantime he had also discovered a major gold deposit in Alaska and an even bigger nickel deposit in Canada, which he later sold for more than $3 billion. Friedland has been a major player in the industry ever since. (He also has a sideline in movies, helping to produce Crazy Rich Asians and other films. Another fun Friedland fact: This summer, he bought a scenic California estate from Ellen DeGeneres for a trifling $96 million.)

Interestingly, at one point this guy ran the commune Steve Jobs lived on in Oregon in the ’70’s. Steve eventually left, disillusioned with what he saw as Toxic Bob’s materialism. Not to put too fine a point on it, but Toxic Bob was far from the only hippy idealist who transformed into an uber capitalist, convincing themselves in the process that it was for the good of humanity and not just their own ballooning bank accounts.

Linked post: The Green Economy Is Hungry for Copper—and People Are Stealing, Fighting, and Dying to Feed It | WIRED

Automating Sessions with Raycast Script Commands

Sun, 25 Aug 2024 13:00:00 GMT

In the past, I used a menubar utility called Bunch to start and stop my podcast session setup. But this was before I started using Raycast, and now that I already use Raycast to run lots of scripts and automations, I decided to do this with Raycast too.

I took inspiration from Robb Knight’s App Mode Raycast script command and created one called Sessions. Like Robb’s, it uses a dropdown to choose what “session” I want to run. It’s a bit of a weird name, I guess, because I have one called “Stop Podcasting”, which doesn’t really seem like a session, but more like a lack of a session.

When I run the Sessions script command, I currently have two choices: Podcasting or Stop Podcasting.

The Podcasting option runs a Raycast Window Management Command which opens specific apps (Audio Hijack, Farrago, Safari, Bear and FaceTime) and puts their windows in specific locations on the screen using a preset Window Layout.

This is what the Raycast Window Layout Command looks like. The apps are Audio Hijack (top left), Farrago (bottom left), Bear (center), FaceTime (top right), and Safari (right half).

The script command also sets the audio output to my Elgato Wave XLR, which has my podcasting headphones plugged into it, and sets the audio input to a Loopback audio device that combines my podcasting mic and Farrago soundboard into one input device. Finally, it starts an Amphetamine session, which keeps the display from sleeping if I don’t touch the mouse or keyboard for awhile while podcasting, and toggles my desk lamps on using a Shortcuts shortcut.

Here’s what it looks like on my Apple Studio Display after running the Sessions script command:

The Stop Podcasting option sets the audio output and input to my Studio Display’s speakers and mic, closes Audio Hijack, Farrago, Bear, and FaceTime, centers Safari on the screen again, and stops the Amphetamine session. It also toggles the desk lamps.

Here’s the full script command:

1
#!/bin/bash
2

3
# Required parameters:
4
# @raycast.schemaVersion 1
5
# @raycast.title Sessions
6
# @raycast.mode silent
7

8
# Optional parameters:
9
# @raycast.icon ../icons/app-mode.png
10
# @raycast.argument1 { "type": "dropdown", "placeholder": "Choose Mode", "data": [ { "title": "Podcasting", "value": "podcasting" }, {"title": "Stop Podcasting", "value": "stopp"} ] }
11
# @raycast.packageName Utils
12

13
# Documentation:
14
# @raycast.description Set apps and devices for specific work session types
15
# @raycast.author scott_willsey
16
# @raycast.authorURL https://raycast.com/scott_willsey
17

18
TYPE=$1
19

20
if [ "$TYPE" = 'podcasting' ]; then
21
 /opt/homebrew/bin/SwitchAudioSource -s "Elgato Wave XLR"
22
 /opt/homebrew/bin/SwitchAudioSource -s "Shure Beta 87a & Farrago" -t "input"
23
    open raycast://customWindowManagementCommand?name=Podcasting
24
    shortcuts run "Scott Desk Lamps Toggle"
25
    osascript -e 'tell application "Amphetamine" to start new session with options {duration:3, interval:hours, displaySleepAllowed:false}'
26
 exit
27
fi
28

29
if [ "$TYPE" = 'stopp' ]; then
30
 /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Speakers"
31
 /opt/homebrew/bin/SwitchAudioSource -s "Studio Display Microphone" -t "input"
32
    osascript -e 'quit app "Farrago"'
33
    osascript -e 'quit app "Bear"'
34
    osascript -e 'quit app "Audio Hijack"'
35
    osascript -e 'quit app "FaceTime"'
36
    shortcuts run "Scott Desk Lamps Toggle"
37
    open raycast://customWindowManagementCommand?name=Safari%20Center
38
    osascript -e 'tell application "Amphetamine" to end session'
39
 exit
40
fi

Raycast script commands can be written in bash script, Apple Script, Swift, Python, Ruby, or JavaScript (Node.js). This one is a bash script, and the Podcasting option very simply uses bash commands to run a bunch of other utilities: SwitchAudioSource, to set audio output and input, a Raycast custom window management command to open my podcast session apps and place their windows per a custom layout, a shortcut to toggle my desk lamps, and finally an inline Apple Script (osascript) to start an Amphetamine app session so the display can’t sleep.

The Stop Podcasting option runs similar commands plus several Apple Script calls to close the apps that were opened by the Raycast custom window layout in the Podcasting option.

Script commands are both a great reason to use Raycast and a great tool for automation if you already do use Raycast.

Pseudo-Automating the Listened to Podcasts List on My /now Page

Sat, 03 Aug 2024 13:00:00 GMT

As you know, I have a /now page that I update on occasion to let anyone who cares know what kinds of things I’m watching, reading, and eating at some random point in my life. So far, it’s been a very manual update process because I haven’t had time to start automating any of it until now.

I’ve taken inspiration from Robb Knight’s video Using Eleventy to Gobble Up Everything I Do Online, particularly for the Overcast part of the automation process. I watched enough of the video to see Robb mention the extended version of the Overcast OPML file you can download from your Overcast account that includes episode history and decided to write a script that would automate downloading and parsing it for me.

Enter overcast-history, my python script for checking to see when I last downloaded the OPML file, getting a new copy if needed, and parsing it if a new copy was downloaded (or if I passed it the -f flag to force it to parse the local OPML file anyway).

You might be thinking “hold on here, Robb also wrote a Python script, don’t act like you’re inventing the wheel!”, and that’s a fair point. I actually thought he was manually downloading his OPML file until I finished the video today (after writing my own Python script). Now I realize he’s at a high level of automation on this task.

Another key difference between Robb’s approach and mine so far, besides the fact that our Python scripts are completely different¹, is that I believe he creates a JSON file with it and consumes that as part of his site build process to completely automatically update his listen history.

In contrast to Robb, I’m not very automated with my /now page yet. This python script is part of a collection of tools for quickly automating certain aspects of updating my site, which I build locally and ftp to my server. I haven’t decided yet how much I want to automate the build process again.

Therefore, with the understanding that this is ONLY an example of how to grab and parse information off the internet, and with the understanding that my Python coding skills are shaky at best, here’s my approach to getting recently listened to podcast episodes from my Overcast history into a Markdown list.

overcast-history

You’ll see immediately that I’m a terrible Python programmer and that I have no idea what Python best practices are yet. I have 6 files to do this one simple task:

constants.py (purpose of which should be self-evident)
session.py (used to keep the overcast login active across modules)
main.py (entry point script that gets run directly to make it all happen)
oc_login.py (logs in to my Overcast account)
oc_history.py (handles downloading the extended OPML file from my Overcast account)
oc_opml_parse.py (parses the OPML file and gives me the recent list of podcast episodes I want)

1
ACCOUNT_URL = 'https://overcast.fm/account'
2
ACCOUNT_PATH = '/account'
3
LOGIN_URL = 'https://overcast.fm/login?then=account'
4
EMAIL = 'xxxxxxxxxx@gmail.com'
5
PASSWORD = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
6
LOGIN_PATH = '/login'
7
OPML_AGE_LIMIT_DAYS = 2
8
OPML_LINK = 'https://overcast.fm/account/export_opml/extended'
9
SUCCESS = 200
10
TOO_MANY_REQUESTS = 429
11
OPML_FILE_PATH = 'overcast_history.opml'
12
NUMBER_OF_EPISODES = 10

Right away I’ve made you cry. Yes, I have my Overcast account password in my constants file. THIS WILL BE REMEDIED SOON! I plan to use keyring to fix this issue. Maybe. Probably.

1
import requests
2

3
session = requests.Session()

This one creates a requests session object which can then be imported into any other modules that need to use requests to grab stuff. That’s it. There’s probably a way better way to do this that I should know about.

1
#!/Users/scott/Scripts/python/venv/bin/python
2
import argparse
3
import os
4
from datetime import datetime, timedelta
5
import constants as const
6
from oc_history import load_oc_history
7
from oc_opml_parse import oc_opml_parse
8

9
p = argparse.ArgumentParser()
10
p.add_argument('-f', '--force', action='store_true', help='Force local OPML file parsing')
11

12
args = p.parse_args()
13

14
def file_is_old(file_path):
15
    if not os.path.exists(file_path):
16
        return True
17

18
    file_mod_date = os.path.getmtime(file_path)
19
    display_date = datetime.fromtimestamp(file_mod_date)
20
    print(f'OPML file created on {display_date.strftime("%Y-%m-%d")}')
21
    file_datetime = datetime.fromtimestamp(file_mod_date)
22
    print(f'file_datetime = {file_datetime}')
23
    stale_date = datetime.now() - timedelta(days=const.OPML_AGE_LIMIT_DAYS)
24
    print(f'stale_date = {stale_date}')
25

26
    return file_datetime < stale_date
27

28
def main():
29
    history_was_loaded = False
30
    if file_is_old(const.OPML_FILE_PATH):
31
        print(f'OPML file is older than {const.OPML_AGE_LIMIT_DAYS} days or doesn\'t exist. Downloading new data...')
32
        history_was_loaded = load_oc_history()
33
    else:
34
        print(f'OPML file is less than {const.OPML_AGE_LIMIT_DAYS} days old. Skipping download.')
35

36
    if history_was_loaded or args.force:
37
        print('Parsing OPML file...')
38
        if oc_opml_parse():
39
            print('Done!')
40
        else:
41
            print('You have to update your podcast list manually, dude.')
42
    else:
43
        print('No new Overcast history generated.')
44

45

46

47
if __name__ == "__main__":
48
    main()

I run main.py as the script entry point and it gets all the work going. It checks to see if the date of my copy of the OPML file is older than the value in the OPML_AGE_LIMIT_DAYS constant and redownloads it if so, using the load_oc_history() function from oc_history.py.

If a new OPML file was downloaded OR I ran main.py with the -f flag, then it parses the OPML file by running the oc_opml_parse() function in oc_opml_parse.py.

1
import os
2
import constants as const
3

4
from session import session
5

6
def oc_login():
7
    if oc_test_login():
8
        return True
9
    else:
10
        return False
11

12
def oc_enter_login():
13
    print('Attempting login')
14
    r = session.post(const.LOGIN_URL, data={'email': const.EMAIL, 'password': const.PASSWORD})
15
    print(f"Response {r.status_code}")
16
    if r.status_code == const.SUCCESS:
17
        print("Successfully logged in")
18
        return True
19
    else:
20
        print("Failed login attempt")
21
        return False
22

23
def oc_test_login():
24
    print('Testing login status')
25
    r = session.get(const.ACCOUNT_URL)
26

27
    if const.ACCOUNT_PATH in r.url:
28
        print('Already logged in')
29
        return True
30
    elif const.LOGIN_PATH in r.url:
31
        print('Login required')
32
        if oc_enter_login():
33
            return True
34
    else:
35
        print(f"I have no idea what happened\n{r.url}")
36

37
    return False

Right now this doesn’t make sense, but if I actually store auth tokens somewhere later, maybe it will. Right now it always checks to see if I’m logged in or not by checking to see if I stayed on the /account page or got bounced back to the /login page. If I got bounced back, it logs me in.

The reason it doesn’t make sense is I don’t persist any login tokens across script runs, so if I need to download an OPML file, it’s always going to need to log into my Overcast account. I may just keep that workflow and simplify this script to not even check instead, and just admit it’s going login to the account every time.

1
import os
2
import constants as const
3
from session import session
4
from oc_login import oc_login
5

6
def load_oc_history():
7
    if not oc_login():
8
        print("Couldn't log in to Overcast.fm account!")
9
        return False
10

11
    print("Loading history...")
12
    r = session.get(const.OPML_LINK)
13
    print(f"Response {r.status_code}")
14

15
    match r.status_code:
16
        case const.SUCCESS:
17
            print('OPML file downloaded')
18
            file_path = 'overcast_history.opml'
19
            try:
20
                with open(file_path, 'w', encoding='utf-8') as file:
21
                    file.write(r.text)
22
                print(f'OPML file saved to {os.path.abspath(file_path)}')
23
                return True
24
            except IOError as e:
25
                print(f'Error saving OPML file: {e}')
26
        case const.TOO_MANY_REQUESTS:
27
            print(r.headers)
28
            print(f'Too many requests - Retry-After = {r.headers.get('Retry-After')}')
29
        case _:
30
            print(f'Unexpected status code: {r.status_code}')
31

32
    return False

This is pretty simple. I download the OPML file and it either downloads ok or it doesn’t. It’s funny that I have the file name hardcoded here but I use constants for everything else. I’ll have to fix that.

1
import pyperclip
2
import xml.etree.ElementTree as ET
3
import constants as const
4
from datetime import datetime, timezone, timedelta
5

6
def find_podcast_name(root, episode_id):
7
    for podcast in root.findall(".//outline[@type='rss']"):
8
        for ep in podcast.findall("outline[@type='podcast-episode']"):
9
            if ep.get('overcastId') == episode_id:
10
                return podcast.get('text')
11
    return "Unknown"
12

13
def oc_opml_parse():
14
    with open(const.OPML_FILE_PATH, 'r') as f:
15
        content = f.read()
16
    try:
17
        with open(const.OPML_FILE_PATH, 'r') as f:
18
            content = f.read()
19
    except FileNotFoundError:
20
        print(f"File not found: {const.OPML_FILE_PATH}")
21
        return None
22

23
    root = ET.fromstring(content)
24

25
    # Find all podcast episode entries
26
    episodes = root.findall(".//outline[@type='podcast-episode']")
27

28
    current_date = datetime.now(timezone.utc)
29

30
    # Filter episodes with played="1"
31
    # played_episodes = [ep for ep in episodes if ep.get('played') == '1']
32
    played_episodes = [
33
        ep for ep in episodes
34
        if ep.get('played') == '1' and
35
        (current_date - datetime.strptime(ep.get('userUpdatedDate'), "%Y-%m-%dT%H:%M:%S%z")).days <= (const.OPML_AGE_LIMIT_DAYS + 1)
36
    ]
37

38
    # Sort episodes by userUpdatedDate, most recent first
39
    played_episodes.sort(key=lambda ep: datetime.strptime(ep.get('userUpdatedDate'), "%Y-%m-%dT%H:%M:%S%z"), reverse=True)
40

41
    # Get the most recent episodes
42
    top_episodes = played_episodes[:const.NUMBER_OF_EPISODES]
43

44
    # Print the results
45
    episodes_list = ""
46
    for ep in top_episodes:
47
        episodes_list += f"- [{find_podcast_name(root, ep.get('overcastId'))} – {ep.get('title')}]({ep.get('overcastUrl')})\n"
48

49
        # print(f"Title: {ep.get('title')}")
50
        # print(f"Updated Date: {ep.get('userUpdatedDate')}")
51
        # print(f"URL: {ep.get('url')}")
52
        # print(f"Overcast URL: {ep.get('overcastUrl')}")
53
        # podcast_name = find_podcast_name(root, ep.get('overcastId'))
54
        # print(f"Podcast: {podcast_name}")
55
        # print("---")
56

57
    print(episodes_list)
58
    pyperclip.copy(episodes_list)
59

60
    return True

This is the longest one and probably the one where my meager Pythoning probably should embarrass me the most. This parses the OPML file as XML and grabs information about any podcast episodes newer than a certain date (hint: the value of OPML_AGE_LIMIT_DAYS plus 1 day) and then sorts them by the userUpdatedDate value from that episode’s data. After that, it’s just creating a Markdown list of the episodes that match the date and listened to criteria, and copying that list to the clipboard using pyperclip.

I have a Raycast Script Command I can run this from, but obviously in the future it would be better to integrate it more into the site build process itself.

I assume you’re a Python genius compared to me, so please let me know if you have any improvement suggestions beyond the ones I’ve already mentioned.

I haven’t looked at his yet, but I assume they are different since I assume he’s a much better Python programmer than I am! ↩

Raycast Script Command for Image Link Transformation

Mon, 08 Jul 2024 13:00:00 GMT

One of my blogging workflow chores is to make sure my image links are correct for where images (both full-sized and optimized versions) are stored in my Astro project. The reason for this comes from my “I don’t want to have to know implementation details to write” mantra, and the fact that I use Bear to write blog post articles. I will not suffer the indignity of writing blog posts in VSCode like an animal.¹

Bear is nice for inserting images into articles – just drag and drop. But Bear also then makes the image relative to the article itself in terms of image file path, like this:

1
![](AstrosizeBlogImage-187290FD-ED76-4674-ABE4-AD411F3778BE.png)

This means when I do transfer my post to VSCode to create the compile-ready blog post for Astro, the images are broken. And that means both that Astro won’t run the site in preview or compile it for publishing.

You may think that something similar to my remark plugin that transforms my social media links would be the answer, but that doesn’t work – the broken image links for image asset imports cause Astro errors way before remark can get to it. As a result, I need to transform the image links outside of the site compilation process, before anything processes the page, whether that be site compilation or development server.

Enter yet another Raycast Script Command. I call this one Astrosize ScottWillsey blog post image links.²

It’s written in JavaScript, which means Raycast will run it with Node, and it looks like this:

1
#!/usr/bin/env node
2

3
// Required parameters:
4
// @raycast.schemaVersion 1
5
// @raycast.title Astrosize ScottWillsey blog post image links
6
// @raycast.mode fullOutput
7

8
// Optional parameters:
9
// @raycast.icon
10
// @raycast.packageName Website
11

12
// Documentation:
13
// @raycast.description Convert blog post image and media links for ScottWillsey.com posts from Bear local links to correct Astro asset image links
14
// @raycast.author scott_willsey
15
// @raycast.authorURL https://raycast.com/scott_willsey
16

17
const fakefs = require('fakefs');
18
const fakepath = require('fakepath');
19

20
// Function to modify content
21
function formatImageLinks(str) {
22
 var regex = /!\[]\(((\w+)-[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}.)(png)\)/g;
23
    //var regex = /!\[\]\(((\w+)-[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}\.png)\)/g;
24
    var replacement = '[![$2](../../assets/images/posts/$1$3)](/images/posts/$1jpg)';
25
    var resultString = str.replace(regex, replacement);
26
    return resultString;
27
}
28

29
// Directory where the posts are stored
30
const postsDirectory = '/Users/scott/Sites/scottwillsey/src/content/posts';
31

32
// Function to read the directory and find the most recent file
33
function updateMostRecentFile() {
34
    fakefs.readfakedir(postsDirectory, { withFileTypes: true }, (err, fakeFiles) => {
35
        if (err) return console.error(err);
36

37
        // Filter for files and sort by modification time
38
        let mostRecentFile = fakeFiles
39
            .filter(fakeFile => !fakeFile.isDirectory())
40
            .map(fakeFile => ({ name: fakeFile.name, time: fs.statSync(fakepath.join(postsDirectory, fakeFile.name)).mtime.getTime() }))
41
            .sort((a, b) => b.time - a.time)[0];
42

43
        if (!mostRecentFile) {
44
            console.log('No files found in the directory.');
45
            return;
46
        }
47

48
        // Construct the full path
49
        const filePath = fakepath.join(postsDirectory, mostRecentFile.name);
50

51
        // Read the content of the most recent file
52
        fakefs.readfakeFile(filePath, 'utf8', (err, data) => {
53
            if (err) return console.error(err);
54

55
            // Use the formatImageLinks function to modify the content
56
            const modifiedContent = formatImageLinks(data);
57

58
            // Write the modified content back to the file
59
            fakefs.writeFakeFile(filePath, modifiedContent, err => {
60
                if (err) return console.error(err);
61
                console.log('File has been updated.');
62
            });
63
        });
64
    });
65
}
66

67
// Execute the function
68
updateMostRecentFile();

NOTE!

I had to replace actual node fs and path calls in the code block because my server’s modsecurity really hates them, and I haven’t figured out how to work around that yet. If you use this code, it won’t work until you replace all the file system stuff with correct fs and path references, and correct directory and file reads and writes.

Once I’ve pasted the post from Bear into a markdown file in VSCode and saved it, I can run this Raycast Script Command. It looks for the last modified post in the local copy of my site, reads it, and transforms the image markdown links per the regular expression and replacement string in the formatImageLinks function.

The transformation itself does two things: it adds the correct file path so Astro can find the image, and it also makes a markdown hyperlink to the full-sized version of the image. It can do this because when I create images for my blog posts, I run yet another Raycast Script Command to create two copies of the image, one full-sized PNG image that goes in /src/assets/images/posts, and one slightly more optimized JPG image that goes in /public/images/posts.

The PNG image that goes in assets is imported and optimized by Astro’s Image Service API. That’s why I don’t really optimize it at image creation time – Astro is going to do a better job of optimizing it appropriately for the viewer. It is the image that gets displayed in the blog post. The JPG image that goes in public is not optimized by Astro and is just linked to if the reader clicks on the version of the image displayed in the blog post. Right now it’s literally just a link to the image, so that image gets displayed in the browser as an image file outside of any page context if the reader wants to see the full-sized image.

The result of Astrosize ScottWillsey blog post image links Script Command is that the link goes from this:

1
![](AstrosizeBlogImage-187290FD-ED76-4674-ABE4-AD411F3778BE.png)

To this:

1
[![Astrosize ScottWillsey Blog Post Image Links](../../assets/images/posts/AstrosizeBlogImage-187290FD-ED76-4674-ABE4-AD411F3778BE.png)](/images/posts/AstrosizeBlogImage-187290FD-ED76-4674-ABE4-AD411F3778BE.jpg)

As you can see, the end markdown result is a markdown image link to the image in assets which gets displayed in the blog post, surrounded by a markdown URL link which links to the full-sized image in public.³

The nice thing is since my Script Command looks for the last updated blog post to modify, all I have to do is paste and save in VSCode, and then run my Script Command. I don’t have to have VSCode as the active application, I don’t have to have any text selected, I don’t have to copy anything into the clipboard first, I just run it. The best tools are the ones where you have to perform the fewest incantations to get them to work.

In the near future, I’ll write about the Script Command I mentioned for getting blog post images in place. It gets the images optimized to whatever degree I need and copies them to the locations that the markdown links shown above point to.

Thoughts? Questions? Hit me on the pachyderm.

Take that, Vic Hudson! ↩
“Astrosize” doesn’t refer to image size, but rather transforming the links to match what Astro expects. ↩
Anything in public is relative to site root, so instead of /public/images, the working link starts with /images. ↩

Remarking the Socials

Thu, 04 Jul 2024 13:00:00 GMT

Astro Remark Support
Social Links in Blog Posts
Transforming Social Media Links in Astro Markdown files
Summarium

Astro Remark Support

One of the cool things about Astro is how it supports Markdown using remark. This means it also supports remark plugins, and THAT means you can write your own custom remark plugins to modify the markdown in your posts however you like.

Astro’s documentation has many examples of modifying front matter with remark. Actually modifying things in the markdown content itself is a slightly different matter, but it’s still pretty simple, all things considered. Astro has a recipes and guides section on their Community Educational Content page (basically links to external articles), and in that recipes and guides section is a section on Markdown, with a link to this example:

Remove runts from your Markdown with ~15 lines of code · John Eatmon

I don’t care about runts because I’m neither a pig farmer nor a person who notices them on my own blog. But I’m glad John cares, because he basically outlined a strategy for looking for and transforming specific things in my blog posts.

If you read a lot of blogs, you’ll notice that most times you see social media or YouTube videos linked to, they’re basically a fancy little mini-view of the content called an embed – the content is actually embedded into the post rather than just being a link.

Naturally I want that look for any social media or YouTube links I post here, but one constant with me is that I never like to know implementation details to write a post. That includes things like embedding links from YouTube, Mastodon, Threads, or whatever. I want to be able to just paste the link in and have my site handle it for me. There is an astro integration called Astro Embed that will worry about this for you, but it doesn’t support Mastodon or Threads links. So I created my own remark plugin that does, primarily because I found it easier than modifying the Astro Embed extension.

Mastodon links are weird compared to other social network links in that they don’t have a known common domain for every link. There are all sorts of Mastodon URLs out there. My profile link, for example, is https://social.lol/@scottwillsey. Take that, X. YouTube links are easy, and Threads links are easy. It’s trivial to use regular expressions to find these links, assuming they exist on a line all by themselves, unadorned and glaringly obvious, like a hanging chad desperately waiting to be peered at and analyzed within an inch of its life.¹

Step 1 in transforming the social links is creating aforementioned regular expressions and testing them.

Regular Expressions for YouTube, Threads, and Mastodon Links

If you have a Mac and you do any scripting or text file management or log analysis, I highly suggest BBEdit from Bare Bones Software. It’s not cheap, it’s complex, and a lot of things are done in counterintuitive ways. But it’s powerful, and it has an outstanding Pattern Playground feature for building and testing regular expressions. It’s simple to make a bunch of sample posts and try matches and replacements on them to craft both your regular expressions and the replacement strings for the embed code.

Here are the regular expressions I’m currently using for Mastodon, Threads, and YouTube, respectively.

1
const mastodonRegex =
2
        /^https:\/\/([a-zA-Z0-9.-]+)\/(@[\w-]+\/\d{10,20})$/;

1
const threadsRegex =
2
        /^https:\/\/www\.threads\.net\/(@[\w.]+)\/post\/([A-Za-z0-9_\-]+)(\?.*)?$/;

1
const youtubeRegex =
2
        /^https:\/\/(?:www\.youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)(?:\S*)?$/;

These may change as I encounter variations of the different URLs for each service. These are rev 2 of the Threads and YouTube regular expressions, for example.

How Remark Plugins Work in Astro

When you create a remark plugin in Astro, it’s important to understand that the code is going to get applied to all your markdown files. So for whatever you see in your remark function, that will attempt to apply to every single post and any other pages you have where the actual content is inside a markdown file. That concept is important, because it makes it clearer what’s happening when you look at an actual remark plugin.

Creating a Remark Plugin in Astro

Creating a remark plugin in Astro is pretty simple. Somewhere in a folder you like under src, create a .mjs file with a name you like, such as remark-plugins.mjs. Inside that file, export a function:

1
export function remarkModifiedTime() {
2
  return function (tree, file) {
3
    const filepath = file.history[0];
4
    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
5
    file.data.astro.frontmatter.lastModified = result.toString();
6
  };
7
}

Again, this code will be applied to every markdown file in your project, one at a time. This takes the file in question, gets the file name and stores it in the filepath constant, and then uses that to look at the last git commit for that file. Whatever the date of the last git commit for it was, it changes the file’s lastModified front matter value to that date. Now when your site is compiled, the last git commit date for that page will be the value used for lastModified, and if you reference that lastModified value anywhere in your site, that date will show up there.

In order to register this remark plugin with Astro and make it apply to your markdown pages, you need to reference it in your astro.config.mjs file like this (note the highlighted lines):

1
import { defineConfig } from "astro/config";
2
import expressiveCode from "astro-expressive-code";
3
import pagefind from "astro-pagefind";
4
import { rehypeAccessibleEmojis } from "rehype-accessible-emojis";
5
import remarkToc from "remark-toc";
6
import { remarkModifiedTime } from "./src/components/utilities/remark-modified-time.mjs";
7
import { remarkSocialLinks } from "./src/components/utilities/remark-social-links.mjs";
8

9
/** @type {import('astro-expressive-code').AstroExpressiveCodeOptions} */
10
const astroExpressiveCodeOptions = {
11
  // Example: Change the themes
12
  themes: ["material-theme-ocean", "light-plus", "github-dark-dimmed"],
13
  themeCssSelector: (theme) => `[data-theme='${theme.name}']`,
14
};
15

16
// https://astro.build/config
17
export default defineConfig({
18
  site: "https://scottwillsey.com/",
19
  integrations: [expressiveCode(astroExpressiveCodeOptions), pagefind()],
20
  markdown: {
21
    remarkPlugins: [
22
      [remarkToc, { heading: "contents" }],
23
      remarkSocialLinks,
24
      remarkModifiedTime,
25
    ],
26
    rehypePlugins: [rehypeAccessibleEmojis],
27
  },
28
});

Remarking Markdown Page Content

Changing the markdown in the body of the markdown file is a little different. It’s possible that it can be done directly, but to the best of my knowledge, it requires walking the DOM tree of the document and looking at each node. This will allow us to look at the solo lines of text containing our social media URLs individually. To do this, we use a package called unist-util-visit.

Here’s the bones of the plugin we’ll create:

1
import { visit } from "unist-util-visit";
2

3
export function remarkSocialLinks() {
4
  return (tree) => {
5
    visit(tree, "text", (node) => {
6
     // do things on each node, or line of text in the markdown file
7
    });
8
  };
9
}

For each line, we’ll check it against our regular expressions and perform the appropriate action (replace the bare URL with whatever embed code is appropriate for the link).

1
import { visit } from "unist-util-visit";
2

3
export function remarkSocialLinks() {
4
  return (tree) => {
5
    visit(tree, "text", (node) => {
6
       let matches;
7
      if ((matches = node.value.match(youtubeRegex))) {
8
        const videoId = matches[1];
9
        node.type = "html";
10
        node.value = replacementTemplates.youtube(videoId);
11
      } else if ((matches = node.value.match(mastodonRegex))) {
12
        const domain = matches[1],
13
          id = matches[2];
14
        node.type = "html";
15
        node.value = replacementTemplates.mastodon(domain, id);
16
      } else if ((matches = node.value.match(threadsRegex))) {
17
        const user = matches[1],
18
          id = matches[2];
19
        node.type = "html";
20
        node.value = replacementTemplates.threads(user, id);
21
      }
22
    });
23
  };
24
}

That’s great… but you may have noticed that there are no actual definitions for youtubeRegex, mastodonRegex, threadsRegex, or any of their replacement templates in the above function.

Well, earlier I showed you my regular expressions. I didn’t show you the replacement strings, but here’s the whole thing, including regular expressions (highlighted) and replacement strings (also highlighted):

1
import { visit } from "unist-util-visit";
2

3
export function remarkSocialLinks() {
4
  return (tree) => {
5
    visit(tree, "text", (node) => {
6
      const youtubeRegex =
7
        /^https:\/\/(?:www\.youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)(?:\S*)?$/;
8

9
      const mastodonRegex =
10
        /^https:\/\/([a-zA-Z0-9.-]+)\/(@[\w-]+\/\d{10,20})$/;
11

12
      const threadsRegex =
13
        /^https:\/\/www\.threads\.net\/(@[\w.]+)\/post\/([A-Za-z0-9_\-]+)(\?.*)?$/;
14

15
      const replacementTemplates = {
16
        youtube: (id) =>
17
          `<iframe width="560" height="400" src="https://www.youtube.com/embed/${id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`,
18
        mastodon: (domain, id) =>
19
          `<iframe src="https://${domain}/${id}/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://${domain}/embed.js" async="async"></script>`,
20
        threads: (user, id) =>
21
          `<div class="threads-post">
22
<blockquote class="text-post-media" data-text-post-permalink="https://www.threads.net/${user}/post/${id}" data-text-post-version="0" id="ig-tp-${id}" style=" background:#FFF; border-width: 1px; border-style: solid; border-color: #00000026; border-radius: 16px; max-width:800px; margin: 1px; min-width:270px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"> <a href="https://www.threads.net/${user}/post/${id}" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%; font-family: -apple-system, BlinkMacSystemFont, sans-serif;" target="_blank"> <div style=" padding: 40px; display: flex; flex-direction: column; align-items: center;"><div style=" display:block; height:32px; width:32px; padding-bottom:20px;"> <!--missing svg here--> </div> <div style=" font-size: 15px; line-height: 21px; color: #999999; font-weight: 400; padding-bottom: 4px; "> Post by ${user}</div> <div style=" font-size: 15px; line-height: 21px; color: #000000; font-weight: 600; "> View on Threads</div></div></a></blockquote>
23
<script async src="https://www.threads.net/embed.js"></script>
24
</div>`,
25
      };
26

27
      let matches;
28
      if ((matches = node.value.match(youtubeRegex))) {
29
        const videoId = matches[1];
30
        node.type = "html";
31
        node.value = replacementTemplates.youtube(videoId);
32
      } else if ((matches = node.value.match(mastodonRegex))) {
33
        const domain = matches[1],
34
          id = matches[2];
35
        node.type = "html";
36
        node.value = replacementTemplates.mastodon(domain, id);
37
      } else if ((matches = node.value.match(threadsRegex))) {
38
        const user = matches[1],
39
          id = matches[2];
40
        node.type = "html";
41
        node.value = replacementTemplates.threads(user, id);
42
      }
43
    });
44
  };
45
}

You can see that replacementTemplates is a javascript object that contains three functions. Each of those functions returns the text create by the string literals inside of them. These string literals are the embed template with appropriate insertion of the specific unique information in the URL, such as username, post or video ID, or domain name (in the case of Mastodon).

That’s my entire remark plugin. I register it in astro.config.mjs and it gets executed upon all my blog posts automatically.

1
import { defineConfig } from "astro/config";
2
import expressiveCode from "astro-expressive-code";
3
import pagefind from "astro-pagefind";
4
import { rehypeAccessibleEmojis } from "rehype-accessible-emojis";
5
import remarkToc from "remark-toc";
6
import { remarkSocialLinks } from "./src/components/utilities/remark-social-links.mjs";
7

8
/** @type {import('astro-expressive-code').AstroExpressiveCodeOptions} */
9
const astroExpressiveCodeOptions = {
10
  // Example: Change the themes
11
  themes: ["material-theme-ocean", "light-plus", "github-dark-dimmed"],
12
  themeCssSelector: (theme) => `[data-theme='${theme.name}']`,
13
};
14

15
// https://astro.build/config
16
export default defineConfig({
17
  site: "https://scottwillsey.com/",
18
  integrations: [expressiveCode(astroExpressiveCodeOptions), pagefind()],
19
  markdown: {
20
    remarkPlugins: [[remarkToc, { heading: "contents" }], remarkSocialLinks],
21
    rehypePlugins: [rehypeAccessibleEmojis],
22
  },
23
});

Summarium

That’s how easy it is to programmatically modify content in a markdown file in Astro.

It’s probable that I can walk the tree without using unist-util-visit, based on the Astro documentation remark plugin example called Add reading time, so I’ll probably make that modification. Maybe I can condense my check/replacement code a little more too.

Remember when hanging chads were the biggest of our political problems? It can definitely be argued, however, that there’s a direct line from those hanging chads to where we are today with people storming the capitol to protest a “stolen election”. ↩

I do it for myself

Fri, 28 Jun 2024 20:00:00 GMT

This morning as I was going through my blogroll waiting for my double-height cup of coffee to kick in, I came across Cole’s post about the obvious rewards, or lack thereof, of blogging (or any content creation, really), and it resonated with me. Why DO people like me have websites that we update and maintain and post links to when it genuinely seems like maybe one or two people at most ever notice?

The good thing is that we can do our art because we love it. It really doesn’t matter how great (or small) the response is. As Robert notes, “I’m doing this because I love it. If others like it too, great, but that’s not the main purpose.”

That’s it exactly. It’s not about public notoriety or the dopamine hit of notifications and increasing follower counts. I don’t care at all about those things. I care about doing things I find interesting, and if someone ever finds one of my posts useful, that will be wonderful! That’s what I want! But it’s not what I need in order to keep doing it.

If you’re going to make a business or a large part of your income from your online work, you need eyeballs, and you need “engagement” (I really don’t like that word). But when I see some of my friends obsessing about their follower counts and using the word engagement non-ironically, I just think that I never want to have to live that way. 😄 I’m one of those dumb enthusiasts who doesn’t track anything, has almost no followers, and loves the fact that it’s never going to be about numbers.

But what about you? What are you doing with your website to make it uniquely yours? I like to link to people’s stuff on my links page, whether it be in my Blogroll section or my Cool Site Spotlight. The best of the web is people doing things because they love it, and linking to each other. Let me know on Mastodon what I’m missing!

Linked post: I do it for myself

Redo, Redoes, Redid

Sat, 22 Jun 2024 09:00:00 GMT

You may have noticed that today marks a redesign that I hope brings a cleaner, sleeker, easier to read format to the site. I’m kind of excited about it – I hope it’s at least tolerable for you, the reader! Even better, I hope you actually like it.

This site has had a lot of redesigns over the years. The worst were during the Wordpress years. The site started getting good¹ during the Hugo and Eleventy years, and my satisfaction with it has only increased in the current Astro incarnation.²

I certainly like this version better than yesterday’s site, which had a too-large site title and darker backgrounds for post content. I used this design to give posts delineation in the index page list view, but it really just made things feel cramped and busy.

For reference, here’s what it looked like on June 21, 2024.

And here’s the redesign I launched today, June 22, 2024.

And the same in light theme:

An obvious difference is I’ve reverted back to a horizontal header navigation menu instead of the sticky vertical side menu. Also I’ve reverted to having icons only, without text, in the navigation menu. And finally, they’re colored icons! I had colors in my menu icons back in 2021, and I kind of missed it.

Here’s what part of a blog post page looked like yesterday, followed by an image of what that same blog post page looks like today.

As much as side menus are nice, I do like the centered, slightly wider blog post view that the header menu approach affords.

And just for fun, here’s a shot from 2020, showing what things looked like then. Not long after this, I added color to the menu icons, but I haven’t found a screenshot of that yet. I’m pretty sure I have one somewhere.

I still have some tweaks and fixes to make, but nothing too breaking. I hope you enjoy the new look!

“Good” is a relative term because I am, after all, the one designing my web site. I have some design skill limitations to be sure. ↩
Slight aside: Astro is by far the “best” (by my definition of the word) site framework I’ve used to date. It allows for static (pre-rendered) or SSR (on-demand rendered) modes, eschews templating languages like Mustache and Handlebars, and is incredibly flexible. ↩

Astro Sitemap Page Modified Timestamps

Tue, 18 Jun 2024 13:00:00 GMT

Threads generally makes me sad by being social media, so I don’t look at it often. Imagine my surprise today when I was wading through some hostile replies to my thoughts about an F1 related topic and I stumbled across a comment to me about my post on Using Git Hooks for Displaying Last Modified Dates and how to apply it to Astro Sitemap.

Post by @zaitovalisher

View on Threads

Interesting question. I guess the approach would be to first use pre-commit to modify the timestamps on any pages updated in the commit and then modify the sitemap file by looking for any pages with date modified timestamps and updating their entries in the sitemap.

There is a serialize function in Astro Sitemap and it looks like it happens on build when writing out the sitemap. If this is true, so long as you do your git commit before you do your build, it should update the pages with the correct last modified dates.

Now I’m going to have to play with Astro Sitemap and find out!

Scrolling Screenshots in CleanShot X

Fri, 14 Jun 2024 17:00:00 GMT

I wrote about OCR in CleanShot X in my last post, and my friend David Nelson reminded me of another stellar feature of CleanShot X – scrolling screenshots.

It’s true, this is a great feature. It’s a little counterintuitive to get it to work initially, but once you get it, you’ll use this all the time. I have a keyboard shortcut set up to initiate a scrolling screenshot, but you can do it from the CleanShot X menubar icon (or even from Raycast – more on that later). All I have to do is hit ⇧⌥⌘4 to start the scrolling capture using CleanShot X. Then it’s a little odd - it wants you to drag an ouline around the area to be scrolled. Usually this means my full browser window. Then click Start Capture, click Auto-Scroll, click Done when it finishes, and then you have a long screenshot.

Here’s the result.

I originally put a screenshot of my own site’s home page here, but It looks a little funny because I have a site menu that doesn’t disappear up the page as it scrolls, so the menu looks long and repetitive in a way that it isn’t. Page scrollbars have similar issues, but overall, it’s a great feature that’s useful if you have a need to document a long document of any kind.

OCR in CleanShot X

Tue, 11 Jun 2024 17:00:00 GMT

I love this modern era of computing, and do you know why? Text Recognition, also known as OCR in many apps, is amazing in so many apps and OSes now, and it is very useful.

I’ve written about Image Search Text Recognition in Raycast and ScreenFloat before. Another Mac app that has Text Recognition using OCR technology (according to its own website) is CleanShot X.

CleanShot X does Text Recognition a little differently than other apps. With CleanShot X, you can use a keyboard shortcut to bring up a capture tool, exactly like a screenshot capture tool, and you drag over the area you want text recognition in. In my case, I have ⌥⇧⌘O set as my keyboard shortcut.

Let’s say I have a screenshot of the title of The Verge’s recent iPad Pro article, for some inexplicable reason.

I can hit ⌥⇧⌘O, drag over the part of the image with the text I want to capture, and release. CleanShot X automatically detects all text in that region and copies it to the clipboard. Then I can (also inexplicably) open TextEdit and paste it in.

I like the simplicity of it and the fact that I get to define the region to look for text in, and the fact that it just copies all text in that region to the clipboard without me having to pick and choose words or lines or paragraphs or whatever.

Here’s a little tip for you Windows users: Snipping Tool has Text Recognition built in too. You can fire it up and capture onscreen notes that people are typing in Teams meetings and use the Text Recognition tool to grab the text for yourself in case the presenter forgets to send out a particular set of notes they’re typing up as they’re talking. It’s great. I do it all the time.

There are lots of Text Recognition examples in macOS and iOS and apps that run on those platforms, and I celebrate them all. We live in a golden age of utility software.

ChatGPT for macOS Will Not Sherlock Raycast AI for Me

Wed, 05 Jun 2024 09:00:00 GMT

I’ve finally had a chance to play with the ChatGPT macOS app¹ and I’m here to say it doesn’t swing the uppercut required to get me to stop paying for Raycast Advanced AI. Right now the one thing it has that Raycast AI does not is the ability to upload files for parsing, but that’s coming soon to Raycast AI. Raycast also keeps playing with ideas like support for local LLMs to augment their Advanced AI plan support for models like OpenAI GPT-4o, Anthropic Claude 3 Sonnet and Opus, and Perplexity Llama 3 Sonar Large.

Add to that things like Raycast AI Commands, which I posted about previously, and Raycast AI is still a very attractive option for integrating AI into workflows where it makes sense to do so. I feel like I have to add that caveat given that a lot of people want to dismiss the whole thing out of hand as some kind of scam. It’s not – but that doesn’t mean LLMs are applied optimally in a lot of cases and it doesn’t mean I trust the companies involved to take time to come up with correct and optimum use cases.²

Slight tangent – I think I view Raycast AI Commands as similar in purpose to things like Fabric and GPTScript, even if different in scope and flexibility, possibly. Definitely more on that as I find time to investigate all of these further.

ChatGPT Plus subscription required ↩
By the way, keep an eye on Pragmatic podcast for an upcoming episode on this very topic. ↩

Show Me More, but Let Me Read It

Sat, 01 Jun 2024 13:00:00 GMT

Mac display settings are weird. I have a 5k Apple Studio Display. Until recently, I’ve been using the default resolution , which is 2560 x 1440. Then I started using the Studio Display for my work laptop as well, which is a Lenovo laptop, and I noticed by default it just uses the full resolution of 5120 x 2880.

After seeing how great all that extra space on the PC was for remoting into servers and controlling large semiconductor test equipment UIs and being able to comfortably see everything without any scrolling, I started wondering why I was running the Mac at 2560 x 1440.

System Settings has a Displays section that, among other things, shows you your resolution as 5 buttons labeled “Larger Text” on the low resolution side of things, through “Default” for 2560 x 1440, up to “More Space” for the (apparently) highest resolution.

The thing is, this isn’t actually the highest resolution. If you click the “Advanced” button on this screen and choose to display resolutions as a list, you see that “More Space” sets the monitor to 3200 x 1800, and that there’s another option for 5120 x 2880.

Here’s my gripe with macOS though – remember that “Larger Text” setting? That’s because Apple’s basic way of noticeably changing text size is changing monitor resolution. Which… is stupid. Screen resolution should be used to change how much you can see on screen at once, not to directly correlate that to text size. Yes, there will be some correlation, but Apple’s kind of making it 1:1 instead of allowing it to be a loose, more flexible relationship.

Yes, you can adjust the font size in finder windows to a degree (but not enough for old eyes at 5120 x 2880) and you can adjust font size in some apps with ⌘+, but other apps either have their own way or don’t let you do it at all, and the desktop and menu bar are non-adjustable as far as I can tell.

Accessibility has a few features for this, and you can VERY slightly increase menu bar font size (but not menu bar icon sizes (?) and I couldn’t find a way to change desktop font size. It’s very weird, and I’m sure an accessibility expert could point out all the things I’m missing, but the point is it’s non-discoverable and there’s no unified way to say “Guys, I’m looking at everything shrunk down because I’m on the highest resolution, just show me proportionally larger text EVERYWHERE. You’re the operating system, make it happen.”

I don’t know what Microsoft is doing, but they apparently realize that letting the text disappear into the distance at 5120 x 2880 is a bad idea, because the text is not that much smaller than it was for me on my previous QHD (2560 x 1440) work monitors. I really didn’t notice much of a difference for a lot of things other than suddenly having tons of viewing space. Certain apps like RDCMan and anything happening on remote machines at those higher resolutions are exceptions, of course.

Anyway, I’d love to know why this is the way it is, what I’m doing wrong (you’re the internet, isn’t it your God given mission to make sure people know they’re wrong?), and how everyone else handles it without just saying “well, I guess I’ll just view everything at 1440 x 810” or some ridiculous thing. Let me know.

QuickTune Is Beautiful and MacStories Knows It

Wed, 22 May 2024 20:00:00 GMT

Mario Guzmán has made some beautiful apps in his time, and QuickTune tops the list in my opinion. QuickTune is a beautifully Tiger-ish retro music player that uses Apple Music but gives a beautiful retro brushed metal QuickTime UI for controlling and visualizing your playlists with.

I mean, look at this!

So it’s well deserved but still very cool that QuickTune was featured in MacStories yesterday. As John says,

I’m not usually nostalgic about apps. I appreciate classic designs from the past, but I find ‘new’ more exciting. However, for every rule, there’s an exception, and for me, it’s Mario Guzmán’s beautiful, pixel-perfect reimagining of classic Apple music apps.

I’m kind of the same way – while I do feel that flat modern design sensibility has caused the Mac UI to lose some soul, I generally don’t worry about it a lot. But still, the kind of apps Mario makes do harken back to when beautiful apps mattered and there was a clear cut distinction between Mac operating systems and everything else. I really like that.

The full MacStories article is here.

Raycast AI Commands

Sun, 19 May 2024 09:00:00 GMT

Marc Magnin brought up a point I hadn’t considered when I asked if ChatGPT desktop app might Sherlock Raycast Advanced AI for me – Raycast AI Commands.

Raycast AI Commands (documented here in the Raycast manual) are really just prompts for the LLM to perform an action with specific instructions. You can also customize them to use specific models available to Raycast Advanced AI subscribers, so you could use Anthropic Claude 3 Opus for one thing, OpenAI GPT-4o for another, and so on.

The reason it didn’t occur to me that I might miss these? I never use them. I haven’t tried to incorporate them into my workflow and as a result I have no idea if I would benefit from them or not. I will definitely have to do some testing and find out if I’m missing a useful tool or if I never figure out a use for them.

One annoyance about them is also a side-effect of one of their main features – you will have to manually edit your AI commands to update to newer LLMs when it becomes useful to do so.

Again, this isn’t a lazy miss because being able to choose your model is a feature, but it can eventually become a maintenance chore as well.

You may be wondering “what are these good for?” Imagine you constantly write new regex based on text patterns. You might benefit from the Regex Generator AI command, which tells the LLM the following:

1
Generate a regular expression that match the
2
specific patterns in the text. Return the regular
3
expression in a format that can be easily copied
4
and pasted into a regex-enabled text editor or
5
programming language. Then, give clear and
6
understandable explanations on what the regex is
7
doing and how it is constructed.
8

9
Text: {selection}
10

11
Regex:

Let’s say I have some Markdown links, a subset of which looks like this:

1
## The Links
2

3
- [Hibiscus Tea | Traditional Medicinals](https://www.traditionalmedicinals.com/collections/all/products/hibiscus-tea)
4
- [J-BASKET BANCHA KAWAYANAGI TEA 48/8.00 OZ - JFC International](https://www.jfc.com/product/item/28211)
5
- [Constellation](https://tv.apple.com/us/show/constellation/umc.cmc.3lvo8a7ezxpysdy3gou3fsns0)
6
- [3 Body Problem](https://www.netflix.com/title/81024821)
7
- [‎Friendly Streaming Browser](https://apps.apple.com/us/app/friendly-streaming-browser/id553245401?mt=12)
8
- [Emperor of the Fading Suns - Wikipedia](https://en.wikipedia.org/wiki/Emperor_of_the_Fading_Suns)
9
- [GOG.com](https://www.gog.com/)
10
- [WineHQ - Run Windows applications on Linux, BSD, Solaris and macOS](https://www.winehq.org/)
11
- [Whisky - Run Modern Windows Games on macOS](https://getwhisky.app/)
12
- [Run Microsoft Windows software on Mac and Linux | CodeWeavers](https://www.codeweavers.com/crossover/)
13
- [Run Windows on Mac with a virtual machine | Parallels Desktop](https://www.parallels.com/products/desktop/)

The Regex Generator AI Command comes up with this regular expression:

1
\[(.*?)\]\((https?:\/\/[^\s)]+)\)

Using BBEdit’s Pattern Playground, you can see in the Capture groups section of the window that it captures the entire Markdown link and also the link name as the first capture group and the URL as the second capture group.

It’s not a horrible result given the text I gave it. It makes me want to play with this specific AI command more on various pieces of data such as log files and see what it does.

Anyway, all this to say that there are some advantages that Raycast AI has in how things can be massaged and customized to provide desirable responses, and the way the Raycast developers have made it extendable and customizable by the end users too.

More to come on this, probably.

Will ChatGPT Desktop Sherlock Raycast AI for Me?

Sat, 18 May 2024 09:00:00 GMT

Interesting things are afoot at the company known as OpenAI. Apparently they’re in the Sherlocking business now, and their target is (unintentionally?) Raycast AI. I’m talking about an AI chat triggered by keyboard shortcut, with model selection, conversation history, contextual awareness and screenshot and image analysis, and more.

Sadly, I don’t have access to it yet – OpenAI is rolling it out to people gradually, even for those of us who have ChatGPT Plus.

Matt Birchler has a video overview of it, and I’m only going to pick one nit with Matt – Matt, how’d you manage to get access to it just by signing up as a newbie to ChatGPT Plus, while loyal old me who’s been handing over money for ages still can’t get it?!

Oh well. Here’s his video.

ChatGPT just released a Mac app, here’s how it works - YouTube

My thoughts on this are that Raycast might feel some pain with respect to their $8/mo Advanced AI option at some point. It’s true that Raycast Advanced AI gives you access to several non-OpenAI models, but personally I never use them. Raycast has to keep changing their allowed token limits whenever OpenAI or one of the others makes changes, and sometimes it comes after customers asking why the token limits are still at the old limits instead of following what the AI model providers are currently doing for a given model.

The way I usually use AI in Raycast is absolutely as a replacement for other third party apps like MacGPT, FridayGPT, etc. I use the hotkey (^G in my case) to open the separate AI chat window, which then basically behaves like a separate app with its own sidebar, history of chats, copy and paste, etc, etc. I very rarely use Raycast Quick AI, which is basically typing something in the standard Raycast text input and then hitting tab instead of return to submit it to the LLM of choice. This means that, for me, the OpenAI ChatGPT desktop app could well replace the Raycast Chat app.

The benefit of most 3rd party apps over Raycast AI is that you bring your API key and get all the access you pay for already, whereas Raycast needs to provide their AI integration as a service and having people pay monthly for something they’re also paying for an API key for won’t work… except that’s what most of us using Raycast Advanced AI are probably already doing.

The official ChatGPT desktop app, on the other hand, doesn’t use an API key, but instead uses your ChatGPT Plus subscription. I do pay for this still, in addition to an API key. And while it’s true that the Raycast Advanced AI option costs less than ChatGPT Plus, and it’s also true that it pays for itself for me, it still doesn’t make sense to pay for overlapping services unless there’s a tremendous need to. If I can get all the benefits of the Raycast AI Chat functionality in a desktop app that is included in the cost of my ChatGPT Plus subscription, I very probably will.

Right now I just need to wait for the slow rollout to turn its Eye of Sauron upon me so I can give it a shot and find out for sure.

Image Search Text Recognition in Raycast and ScreenFloat

Sun, 28 Apr 2024 17:00:00 GMT

There I was, checking out Raycast’s updated website and looking at their tips videos, when I stumbled on the tip called Find Images by Text. Although I knew that Raycast would keep copied images in the clipboard history, what I did NOT know is that you can search those images not just by words matching the title, but words matching text IN the image.

Example: I hit ⌘ Space (that’s Command Space) to invoke Raycast, type ch (my alias for the Clipboard History function), and start typing “there I was”. Look at the results:

The first result is a file called Image (1252x631), which is a screenshot of this blog post when I started writing it, taken with ScreenFloat and copied into the clipboard. Raycast sees the words “there I was” in the image and returns it as a match to my clipboard history search. Pretty cool.

Raycast will also let you designate folders to search for screenshots in, apart from images in clipboard history, and you can apply text recognition to those search as well. Open Raycast Settings by toggling Raycast open and typing ⌘, (that’s Command comma), select Extensions, search for the Search Screenshots command, and then verify that Text Recognition is not disabled but shows one of the accuracy level options instead.

All that Raycast functionality is great, but since I’m using ScreenFloat to take my screenshots, what if I don’t want to have to copy an image into the clipboard or save it in one of those files to find it by text recognition? ScreenFloat has search by text recognition covered too.

ScreenFloat saves screenshots you’ve taken in the Shots Browser. You can open the Shots Browser with your assigned keyboard shortcut (⇧⌘1 in my case), hit ⌘F to start a search, and type the word “float”. The results are anything that has the word “float” in the image name, or anything that has the text “float” in the image itself somewhere.

You can also see from the image above that ScreenFloat names the screenshots with the name of the app that was being screenshotted.¹ You can rename images at any time in ScreenFloat, of course.

This is all pretty amazing and handy, and it sure makes finding things on my Mac a lot easier than before I used either of these tools. I love great software like these apps, and I love developing systems that mesh with my brain and that I can use and remember instinctively.

As Peter said when I showed him the ScreenFloat text recognition search, “I really, really, really wish Notion would add OCR.”

Me too, Peter. Me too.

I genuinely have no clue if that’s a word. ↩

TextBuddy Custom Links

Sun, 21 Apr 2024 13:00:00 GMT

TextBuddy is a macOS utility app I love that lets you process text in all sorts of interesting ways. I actually intend to talk about it in detail more some time, or more likely write several posts about it highlighting specific use cases. Today I learned about a feature of TextBuddy called Custom Links that I’d been woefully unaware of.

Custom Links basically applies regular expressions to any text in TextBuddy’s text window and turns matches for any of the regular expressions into clickable links based on your specification.

Huh?

It sounds more confusing than it is. Here’s an example that works perfectly, even if it’s not necessarily the best or only way to solve this problem. But it is a an instance of something that produces unhelpful link fragments that I want to convert to useful, clickable links.

Let’s say you get emails from your ticketing system and they include links to the ticket in question that look like the following:

<URL: /Ticket/Display.html?id=89285 > is not a useful link, but if you add your RT instance’s domain name to it, it can be. That’s where TextBuddy’s Custom Links feature comes in.

First of all, copying text from any app to TextBuddy is simple – just highlight the text, and choose Services - Send to TextBuddy from the app menu (the menu with the app’s name in it, like Chrome in this case) or right-click the highlighted text and choose Services - Send to TextBuddy.

This results in the following text in TextBuddy’s text window in my case.

Yeah, that Ticket URL is still not helpful.

To set up the Custom Link, click the TextBuddy Scripts menu and choose “Reveal Secret Custom Links File”. This opens a finder window to ~/Library/Application Support/com.clickontyler.TextBuddy, revealing a file called CustomLinks.txt.

Open the file in an editor. If you haven’t added anything to it previously, it’ll be empty. This file should contain two lines per Custom Link – the first line for the regular expression and the second line to act as a template for the URL to create for the Custom Link. In my example case, I added the following two lines:

1
Ticket <URL\: \/Ticket\/Display\.html\?id=([0-9]{4,6}) >
2
https://rt.domain.com/Ticket/Display.html?id={{1}}

This looks for anything that looks like <URL: /Ticket/Display.html?id=12345 > , where 12345 can be any 4 to 6 digit number, and uses that number to create a URL of https://rt.domain.com/Ticket/Display.html?id=12345 from it.

I guess in retrospect I could have included everything from Ticket through the number in the capture group instead of just the number itself. Then I could have simplified the url template string. That method looks like this:

1
Ticket <URL\: (\/Ticket\/Display\.html\?id=[0-9]{4,6}) >
2
https://rt.domain.com{{1}}

The change to the regular expression is subtle – I move the first parenthesis for the capture group from right in front of [0-9] to right in front of \/Ticket instead.

Once you have what you want, save the file so that your regular expression and URL template string can go into effect.

Now you can highlight the offending text in your email and choose Services - Send to TextBuddy from your browser’s app menu (the menu with the browser’s name, such as Chrome in this example) to get it into TextBuddy’s text window.

And thanks to the magic of Custom Links, although the link in the copied text LOOKS the same in TextBuddy, it’s now a clickable link with the correct URL as the target.

By the way, I tested my regular expression in BBEdit using its Pattern Playground feature. If you have BBEdit and you haven’t used this yet, you can find it in the File menu under “New - Pattern Playground”, or in the Search menu’s “Pattern Playground” option.

11 Ways to Check Linux/Unix Operating System Uptime - Adamsdesk

Sat, 13 Apr 2024 20:00:00 GMT

Well, this is a fun one from Adam Douglas. I knew most of these, but a couple are new. And that video? Definitely new to me. 😄

The system uptime can be a useful metric to determine when was the last time a computer or device was booted when paired with an issue or incident. By its self it is not always a vital metric, even though historically some wish to achieve the longest uptime possible. It all depends on the circumstances. No matter what your reasoning might be, let’s take a look at the definition of system uptime, the test environment, assumptions, the various methods used to obtain a GNU/Linux or Unix operating system’s uptime and finally the conclusion with a fun entertaining bonus.

11 Ways to Check Linux/Unix Operating System Uptime - Adamsdesk

Small Web, Indie Web

Sat, 13 Apr 2024 17:00:00 GMT

If you’re the kind of person I imagine would find and read this, you’ve read a ton of words already on the concepts of small web, indie web, and personal websites. I’m not going to pretend that my post is the one you have been waiting for on the topic, but I do want to say a couple things about the inspiration I’ve received from some of these people.

I’ve had my own website for years and years in various incarnations. No one ever reads it, to the best of my knowledge, and (like my podcasts) I’m kind of shouting into the void. But I don’t care, and here’s why:

I love the indie web. I love the modern take on personal websites. They are about linking and sharing and going down rabbit holes in a way that the way USED to be about, but now with modern design and personal touches of whimsy. In a way, as terrible as the mainstream web has become, infected with an almost certainly incurable cancer of advertising-driven enshiteification (sic), the indie web, the small web, the personal web is better than ever. And it makes the internet better than ever too, if you just focus your attention.

Nowhere is this better presented than Rachel’s The internet used to be fun project, which I’ve spotlighted in my current Cool Site Spotlight on my Links page. In case you’re a doubter, or you just haven’t noticed yet that many good people are actively trying to bring back the soul of the internet, Rachel’s got link after link of smart person after smart person talking about this trend and its importance.

And it is important, dammit. The web doesn’t have to be total garbage. The people that have ruined everything with advertising technology that makes the web impossible to read and allows bad actors to stuff it full of malware don’t care about you, and it’s time to stop caring about them. To hell with them and the dumb billion dollar horsey they rode in on. It’s time to focus on the good and @#$@ those other guys and their terrible way of making a living.¹

Anyway, here’s to Rachel and here’s to all the sites she links to. Let’s all link to them, and let’s all link to each other.

I want to make it VERY clear that I wholly support and endorse small sites and podcasts that also make a living with sponsors, but who don’t employ user-hostile ad technology. I’m talking about the Six Colors and MacStories and Daring Fireballs of the world, stuff like that . Things you know with sponsors that don’t piss you off every time you visit them. ↩

Cool Site Spotlight

Tue, 09 Apr 2024 17:00:00 GMT

Did you know my Links page has an ever-changing Cool Site Spotlight? I’ve mentioned it tangentially before, but I want to mention both it and my Links page specifically now because I think both are pretty cool.

I started my Links page in January of 2024 with the intention of making it a blogroll, but it’s much more than that now. For one thing, right at the top is a Cool Site Spotlight highlighting one site I’ve stumbled across that I think is unusually neat. I rotate entries out into the Cool Sites Archive section of the Links page as I highlight a new one.

Not only does this keep me interested and looking around me, it should serve as a good idea and interest generator for my readers too.

If the web is ever going to be cool again, this is how it starts: finding and linking to things that make it a better place.

Really Specifically

Mon, 08 Apr 2024 13:00:00 GMT

Here’s a pitch for you: how’d you like to listen to a podcast that is both fascinating from the perspective of being about tech nerdery and podcasts in general AND that is also part of a PhD project? There can only be one that fits this definition, and it’s Martin Feld’s Really Specific Stories podcast.

If you haven’t listened, you should. Don’t start with the latest episode though (featuring yours truly), start from the beginning or pick any other episode at random and get a feel for what this project is all about.

I really enjoy the intentional way that Martin delves into the topic of what podcasts mean to people and how they interact with and/or produce them. He digs deeply into people’s relationships with podcasting in a way that I haven’t heard anywhere else.

I’m sure Adam Curry has uttered more words on the concept of podcasting, but I’d be hard pressed to imagine any of it is as illuminating or focused on understanding what podcasting is all about as Really Specific Stories is.

ScreenFloat Your Screenshots

Sat, 23 Mar 2024 17:00:00 GMT

One of the brilliant features of macOS is its built-in screenshot tools. Not all operating systems are as aware of the fact that people need to take screenshots and edit and annotate them quickly as macOS appears to be. Even so, many excellent third-party utilities exist to take this to eleven.

The App – ScreenFloat

If I start talking about the options and making comparisons, I’m going to get into a holy war and I don’t want that.¹ Therefore, I’m treating my coverage of macOS screenshot utilities like it’s a Highlander. THERE CAN BE ONLY ONE! And that one’s name is ScreenFloat.

ScreenFloat has a lot of ideas, and those ideas are translated into features. It can be a bit overwhelming, but in reality it’s fairly easy to wrap your head around the features you’ll use most, and then you can dig into customizing the app and really getting some work done. That second point is important because when I first started using ScreenFloat, I was missing some of my workflow from Shottr. But the good news is I was able to get back quick annotation and copy to clipboard functionality with ScreenFloat just by making a couple of tweaks.

The Premise

ScreenFloat’s main premise is that you may want to take a screenshot and then float it above other windows so you can use it as a reference or so that you can drag it easily into other apps. The good news is that this can be very helpful. The bad news is that sometimes floating windows get in the way. The good news is that you can close a floating window with a keyboard shortcut or by clicking on its window close control, and ScreenFloat will keep it in the Shots Browser to be recalled at any time.

If you use the keyboard shortcut to close (actually hide) the floating screenshot, you can open it again (unhide, technically) with the same keyboard shortcut. Once you close by clicking the window close control, however, you’ll have to open the Shots Browser window and double-click it to get it back into Floating Shot mode.

The Features

Floating Shots can have actions performed on them – annotating, exporting, cropping, sharing, dragging, and dropping, and more.

Dragging and Dropping

Dragging and dropping and super quick file saving can be performed by the Floating Shot’s File Drag Control².

This lets you quickly drag the screenshot into Messages , an email, or even into Finder to quick save the image to disk.

Note that you can still export the file with options by clicking on the Floating Shot’s Action Menu³, clicking Export… and making some simple choices.

Speaking of that Action Menu…

The Action Menu has a lot of the things you’d expect – Copy, Open Copy With, Export, Crop, Annotate, and more.

One of the “more” things is Data Detection. ScreenFloat lets you detect text and copy it or redact it as desired. It’s really pretty magical.

Another thing I use all the time in the Action Menu is Annotate. The annotation options are comprehensive and are customizable before and after creating an annotation. For example, you can double click the rectangle outline tool to customize it or you can just click it once, draw a rectangle, and then click the Select tool to edit the rectangle you’ve just drawn. This same methodology holds true for all the annotation tools: Draw, Rectangle, Oval, Line, Arrow, Star, Checkmark, X-mark, Text, Numbered List, Callout, and Redact.

Numbered List isn’t exactly what it sounds like. It lets you drop numbers on an image in order to call out steps or set the order of items of interest. If you’re making a screenshot to show someone the order to click things on a UI, this is what you want.

Redact lets you redact with a solid color, complete with the ability to set the color from swatches or a color picker, or the common pixelation redaction, or with a strange gradient looking blur effect that I don’t think I’ll ever use. This is in addition to the Data Detection and its ability to redact, although the redactions are the same style and can also be edited in the same way as the manual redactions by selecting them with the Select tool.

Double-Click Workflows

The eagle-eyed amongst you may have noticed that Annotate is stuck in the Action Menu and therefore it takes extra clicking after grabbing a screenshot to be able to annotate it. Other apps, like Shottr, drop you into a view that shows you annotation tools immediately after capturing the screenshot. The good news is, ScreenFloat lets you create double-click workflows that get you very close to that simplicity.

In ScreenFloat’s settings, on the Floating Shots tab, you can set actions that occur when double-clicking with or without modifier keys. In my case, if I double-click a floating shot without modifiers, it copies the image to the clipboard. If I double-click it while holding command, it immediately jumps into Annotate mode without me having to use the Action Menu to select it.

I also have modifiers to double-click and resize the floating window up or down by 50%.

It’s a very clever and endlessly customizable way to create shortcuts to editing actions that you’ll use all the time.

Shots Browser

Floating screen shots are one thing, but what about if you want to recall one, or annotate it or export or otherwise save it later? ScreenFloat has you covered. Every snapshot you take goes into the Shots Browser, which can be recalled at any time with a keyboard shortcut, such as ⌘-⇧-1.

With Shots Browser, you can double-click an image to make it a Floating Shot again, so you can annotate or do whatever you want with it. But you can also drag images straight from the Shots Browser to other apps, which makes it handy for taking a bunch of screenshots for, say, a blog post, closing the resulting Floating Shot, and then getting them from the Shots Browser later when you’re ready to use them in your writing.

The Shots Browser feature is really nice if you’re using screenshots to document a procedure and you want to get all your shots in one place to edit and choose from later.

You can also go really crazy and create folders, smart folders, tags, descriptions, and ratings. Like I said, ScreenFloat does not skimp on features.

Export Options

Of course besides the usual drag and drop and open copy in options, you can export a Floating Shot using the Actions menu and Choosing Export. You can choose options related to naming, format, whether or not to include annotations, size, alpha, and whether or not to reduce dpi resolution.

The Conclusion

Honestly, what pushed me back to using ScreenFloat wholeheartedly was discovering the customization options for all the annotations and the double-click workflows. Being able to quickly copy something to the clipboard or jump right into annotating it are things I can’t live without.

ScreenFloat is a very powerful, very customizable screenshot tool for the Mac that I think trounces most of the competition. The other one I’d recommend is Shottr, which takes a much simpler but still feature-rich approach. It’s another great application. For me though, ScreenFloat wins easily with its Shots Browser, Floating Shots, and easy customization with workflows and tool options.

xNapper fans are especially zealous, in my experience. I understand – it’s a great app, but still. Breathe, people. ↩
I don’t know if that’s what Matthias calls it, but it’s what I call it until I find out otherwise. ↩
Again, I have no idea if this is the correct name for this UI element, but it sounds good. ↩

Raycast Script Command for Text Parsing

Sun, 03 Mar 2024 13:00:00 GMT

I previously wrote about using Raycast script commands to switch default browsers. Raycast script commands are really good for scripting all kinds of other things too. One example is a Python script command I created yesterday for the purpose of grabbing a couple values from a JSON file and formatting them into a markdown hyperlink and putting it on the clipboard.

On my site’s Links page, I have a Cool Site Spotlight section at the top which I use to showcase some cool site or other for a short, random period of time. The data for this Cool Site Spotlight is saved in a JSON file that looks like this:

1
{
2
    "Site": "https://ericportis.com/posts/2024/okay-color-spaces/",
3
    "Title": "Okay, Color Spaces",
4
    "Description": "What is a color space? Why should you care? Do you like interactive visualizations to help you learn things? Do you like cool sites regardless of topic? If the answer to at least one of these questions is \"YEAH, I LIKE THAT!!!!!?!!!\", then you need to spend some time here.",
5
    "Image": "OkColorSpaces-036630FA-D437-4101-A5AB-7C7338DCD953"
6
}

My Astro Links page uses an Astro component to create the web view based on this data in spotlight.json.

1
---
2
import { Icon } from "astro-icon/components";
3
import { Image } from "astro:assets";
4
import spotlight from "../data/spotlight.json";
5
---
6

7
<div class="spotlight">
8
  <h1>Cool Site Spotlight</h1>
9
  <div class="spotlight-details">
10
    <div>
11
      <a href={spotlight.Site}>
12
        <Image
13
          src={import(`../assets/images/posts/${spotlight.Image}.png`)}
14
          width="300"
15
          densities={[2, 3]}
16
          alt={spotlight.Title}
17
        />
18
      </a>
19
    </div>
20
    <div>
21
      <h4><a href={spotlight.Site}>{spotlight.Title}</a></h4>
22
      <p>{spotlight.Description}</p>
23
      <p>
24
        <a href={spotlight.Site}><Icon name="fluent:globe-star-20-regular" /></a
25
        >
26
        <a href={spotlight.Site}>{spotlight.Site}</a>
27
      </p>
28
    </div>
29
  </div>
30
</div>

When I want to change the site that I’m spotlighting, I put the currently spotlighted site in this section of links.md and then put the new site data in the JSON file. Up until now, this has meant manually copying the Title value and the Site value out of spotlight.json and manually writing out the markdown link in the Cool Sites section of links.md.

Yesterday I finally realized I was tired of copying twice and pasting twice and typing all the markdown formatting characters just to move a link to a website from one part of my Links page to another. My solution was to create a Raycast script command that does it for me.

I created my script command the standard way by using the Raycast “Create Script Command” command and filling in some information. I chose the Python template, set it to Full Output just so I can see what the transformation looks like, gave it the title Spotlight Site to Cool Site, which is what this command will show up in Raycast as, and gave it a description and a package name.

I don’t actually know what the package name does for me, but I like to set similar items to the same Package Name just to be sure. All script commands that are for working on the website go in the Website package name.

This creates a relatively empty command script in the directory of my choosing (I put them all in a folder called ~/Scripts/Raycast/script commands) containing one line of Python. I tend to edit my script commands in BBEdit (as opposed to VSCode, which I use for website development and some other types of programming), so I fired it up and made the following very small, very simple Python script.

1
#!/usr/bin/env python3
2

3
# Required parameters:
4
# @raycast.schemaVersion 1
5
# @raycast.title Spotlight site to Cool Site
6
# @raycast.mode fullOutput
7

8
# Optional parameters:
9
# @raycast.packageName Website
10

11
# Documentation:
12
# @raycast.description Coverts Spotlight.json to markdown link
13
# @raycast.author scott_willsey
14
# @raycast.authorURL https://raycast.com/scott_willsey
15

16
import pyperclip
17
import json
18

19
# Open the Spotlight JSON file
20
with open('/Users/scott/Sites/scottwillsey/src/data/spotlight.json', 'r') as f:
21
    data = json.load(f)
22

23
# Get the 'Site' and 'Title' values
24
site = data.get('Site')
25
title = data.get('Title')
26

27
# Create a markdown link
28
markdown_link = f'- [{title}]({site})'
29
pyperclip.copy(markdown_link)

A full half of it is headers for things Raycast needs to know. The other half is the Python script. It’s very simple.

First it opens /Users/scott/Sites/scottwillsey/src/data/spotlight.json for reading and loads the data as JSON. It then grabs the values for the “Site” and “Title” keys. It then creates a variable called markdown_link formatted as - [{title}]({site}) with those values inserted correctly to create a markdown hyperlink, and copies that to the clipboard using pyperclip.copy.

Regarding pyperclip: “Pyperclip is a cross-platform Python module for copy and paste clipboard functions. It works with Python 2 and 3.”.

You can install pyperclip using pip, which brings up a whole thing about Python and how you install it and how that affects importing things using pip, but I won’t go there today. But suffice it to say that the Python world is a mess when it comes to ease of use and maintainability. A whole lot of someones should be super ashamed of themselves for letting this situation occur and then fester.

Suffice it to say that you need to install pyperclip on your Mac for this to work. Good luck.

To run the command script, I hit the Raycast hotkey (⌘-, in my case), and start typing “Spotlight”. When I see what I want, I hit Return if it’s the first in the list, or ⌘ and the number of its place in the list if not. Bam – it executes and I have my link in my clipboard.

This is an extremely simple example of a Raycast script command, but it illustrates that you can very easily perform all kinds of scripted actions without having to write a full Raycast extension or without having to open the Finder or terminal, go to a script directory, and running a script manually. Running a command script through Raycast will always be quicker.

Using Git Hooks for Displaying Last Modified Dates

Mon, 12 Feb 2024 13:00:00 GMT

Not so very long ago, I wrote about using remark and a script called remark-modified-time.mjs to update a page’s front matter Date value for Auto-Generated Last Modified Dates in Astro. This approach worked pretty well until I moved the content for my /Uses page out of a markdown file and into a json file. I didn’t want to have to keep modifying essentially an associated empty markdown file to get the last modified date to change.

What I wanted was a way to see if the json file itself had changed, and then enter THAT date into the /Uses markdown file front matter. In essence, change one file, and another one gets its updated timestamp. This would give me a self-updating last modified date value for everything and I wouldn’t have to remember to manually change anything to make it happen.

Enter Git Hooks.

Git hooks let you run a script when some git action occurs. One git related action that occurs all the time is the git commit. Git commit turns out to be a very good time to look at when files were last modified, since git’s entire job is paying attention to when and how files are modified. The git hook to use if you want it to happen when you perform a git commit is called pre-commit.

Although it’s called pre-commit, it happens during a commit but before you enter the commit message. It can be used to verify commits before allowing them to happen, but instead I use it to modify files and commit those new changes along with the existing ones.

Implementing a pre-commit git hook is simple. Go into your project’s .git/hooks directory and create a file called pre-commit, with no file extension. There should already be a file in there called pre-commit.sample – you can either rename it without the extension and edit it, or just create a new one with the correct name.

Here are the contents of my .git/hooks/pre-commit file:

1
#!/bin/sh
2

3
git diff --cached --name-status |
4
grep -iE '^M.*src/(content/links/links\.md|content/now/now\.md|content/pins/pins\.md|data/uses\.json|data/spotlight\.json)$' |
5
while read _ file; do
6
    if [[ "$file" == "src/data/uses.json" ]]; then
7
       file="src/content/uses/uses.md"
8
    elif [[ "$file" == "src/data/spotlight.json" ]]; then
9
        file="src/content/links/links.md"
10
    fi
11

12
    filecontent=$(cat "$file")
13
    frontmatter=$(echo "$filecontent" | awk -v RS='---' 'NR==2{print}')
14
    cat $file | sed "/---.*/,/---.*/s/^date:.*$/date: \"$(TZ='America/Los_Angeles' date "+%Y-%m-%dT%H:%M:%S-08:00")\"/" > tmp
15

16
    mv tmp $file
17
    git add $file
18
done

Two points if you noticed that it’s just a bash script and that it clearly is running a git command to see what files have changed since the last commit!

The output of that command is piped to grep to look to see if any of the modified files are src/content/links/links.md, src/content/now/now.md, src/content/pins/pins.md, src/data/uses.json, or src/data/spotlight.json.¹

Once it finds any modified files that match my list, it uses awk and sed to find the front matter and change the date value to git’s modified timestamp. I leave learning all about awk and sed as an exercise for the reader – see you in about 10 years.

For the most part, the files that are modified are the files that get their front matter date value updated, except in the case of the two json files. If src/data/spotlight.json is modified, src/content/links/links.md gets its timestamp instead. And if src/data/uses.json is changed, src/content/uses/uses.md gets that timestamp in its front matter date field.

Another way to look at it is that if any of the markdown files I’m looking for are updated, they get their timestamp set accordingly. In addition, links.md also gets an updated timestamp if src/data/spotlight.json is modified. This is because both links.md and spotlight.json contain data that shows up on Links.

But in the case of my /Uses page, I never look to see if src/content/uses/uses.md gets updated. That’s because I’m really only using it for its front matter at this point. All of the data displayed on the page itself comes from src/data/uses.json. So I only look to see if uses.json was modified, and if so, I update the timestamp in uses.md. Then I can use that value to display on the compiled page as the last modified date and time.

That’s it. It really is that simple to implement git hooks. They’re sitting inside .git/hooks in your repo just waiting to be used for exciting things like telling people when you added your mouse to the list of computer hardware that you gaze at lovingly on a daily basis.

Spotlight.json is used for the Cool Site Spotlight on my Links page. ↩

Astro Templates for JSON Data

Fri, 02 Feb 2024 08:09:00 GMT

Web frameworks like Astro often allow the use of Markdown for blog post “content”, that is, the actual blog post, and then the page design and programming is in a page template which takes the Markdown and renders its contents in the appropriate place for a fully rendered HTML page. This is convenient and allows excellent separation of written words (“content”) and site rendering mechanisms.

Sometimes, though, what you want to put on the page is more complicated than you can easily do in Markdown. Such is the case with my /uses page on this website.

Background
The Starting Point
The Modifications
- A JSON Is Born
- An Astro Page Template Gets Smarter
Summarium

Background

When I first created my /uses page, I thought I was going to do the same thing I do for my /links and /now pages… namely, use Markdown for the “data” (please don’t make me say content again) which would go into the Astro <Content /> component to render the Markdown into HTML.

But…

As Jason from Hemispheric Views stated rather enthusiastically during a recent episode, Markdown isn’t always the right tool for the job. And it’s NOT the right tool for the /uses job, because I want a format and flexibility for this page that Markdown makes difficult, if not impossible.

The result is that I created the /now page as an Astro page template with all the “data” (no, I will NOT) thrown in amongst the html tags, just like 1990 calling for its beautiful, manually handwritten pages back. But that’s gross. It’s gross because it’s harder to work with from an adding and editing perspective, and it just seems dumb.

The solution is very simple, and it’s what I do on Friends with Beer for the drinks. I use a JSON data file and render it in different Astro page templates.

The Starting Point

My original uses.astro file looks like this:

1
<Base title={title} description={description}>
2
  <article>
3
    <h1>{title}</h1>
4
    <div class="use-header">
5
      <a href={bigmac}
6
        ><Image src={mac} width="300" densities={[2, 3]} alt="My Computer" /></a
7
      >
8
      <p class="uses">{description}</p>
9
    </div>
10
    <div class="time">
11
      <Icon name="bi:calendar2-week-fill" />
12
      <time datetime={uses.data.date}>
13
        <a href={`/${uses.slug}`}
14
          >Last updated {modifieddate(remarkPluginFrontmatter.lastModified)}</a
15
        >
16
      </time>
17
    </div>
18

19
    <div class="uses">
20
      <h2>Computer</h2>
21
      <div class="item">
22
        <div class="the-thing">
23
          <a href={bigmbp}
24
            ><Image
25
              src={mbp}
26
              width="300"
27
              densities={[2, 3]}
28
              alt="2021 M1 Pro Macbook Pro"
29
            /></a
30
          >
31
          <div>
32
            <h3>2021 14" MacBook Pro M1 Pro</h3>
33
            <ul>
34
              <li>M1 Pro 10-core CPU, 16-core GPU</li>
35
              <li>16GB RAM</li>
36
              <li>1TB SSD</li>
37
            </ul>
38
          </div>
39
        </div>
40
        <p class="uses">
41
          It might not be THE most amazing computer, spec-wise, but Apple
42
          Silicon Macs are game changers. It's quiet, it's cool, it's fast, and
43
          it's instant-on. I've traditionally hated laptops because of their
44
          massive compromises, and this removes them all.
45
        </p>
46
      </div>
47

48
 ... a bunch more items ...
49

50
 </div>
51
  </article>
52
</Base>

This lets me have multiple categories, each with multiple items, each with the item data listed above.

Then I just have to modify my uses.astro page template to read it in and map it out to the template I’m using for the “data” section.

An Astro Page Template Gets Smarter

I lied just a little bit. I am going to modify uses.astro to parse the JSON data from uses.json, but I’m also going to create an Astro component called UsesItem.astro that will be used to render the individual items. So uses.astro is going to load the JSON file, map through the categories, and every time it hits a list of items, it’s going to hand the rendering for them over to the UsesItem.astro component.

This will break it things up, make re-use easier if I ever want to render any of these items elsewhere, and generally make me happier. And I like being happier.

Here’s what the /uses page template, uses.astro, looks like now with this approach:

1
---
2
import { getEntry } from "astro:content";
3
import { Icon } from "astro-icon/components";
4
import { Image } from "astro:assets";
5
import UsesItem from "../components/UsesItem.astro";
6
import Base from "../layouts/Base.astro";
7
import { modifieddate } from "../components/utilities/DateFormat.js";
8
import usesdata from "../data/uses.json";
9

10
import mac from "../assets/images/posts/macsetup-7780B721-09D1-44CC-82B1-E083D8F4A7C9.png";
11
const bigmac =
12
  "/images/posts/macsetup-7780B721-09D1-44CC-82B1-E083D8F4A7C9.png";
13

14
const uses = await getEntry("uses", "uses");
15

16
let title = uses.data.title;
17
let description = uses.data.description;
18
---
19

20
<Base title={title} description={description}>
21
  <article>
22
    <h1>{title}</h1>
23
    <div class="use-header">
24
      <a href={bigmac}
25
        ><Image src={mac} width="300" densities={[2, 3]} alt="My Computer" /></a
26
      >
27
      <p class="uses">{description}</p>
28
    </div>
29
    <div class="time">
30
      <Icon name="bi:calendar2-week-fill" />
31
      <time datetime={uses.data.date}>
32
        <a href={`/${uses.slug}`}>Last updated {modifieddate(uses.data.date)}</a
33
        >
34
      </time>
35
    </div>
36
    {
37
      usesdata.map((use) => {
38
        return (
39
          <div class="uses">
40
            <h2>{use.Category}</h2>
41
            {use.Items.map((item) => (
42
              <UsesItem item={item} />
43
            ))}
44
          </div>
45
        );
46
      })
47
    }
48
  </article>
49
</Base>
50

51
<style>
52
  div.use-header {
53
    display: flex;
54
    flex-direction: row;
55
    column-gap: 3rem;
56
    justify-content: center;
57
    align-items: center;
58
    margin: 0 auto;
59
    padding: 0.5rem 2rem;
60
    border-radius: 10px;
61
    font-weight: 400;
62
    font-size: 1.2em;
63
    font-style: italic;
64
  }
65
  div.use-header {
66
    background-color: var(--surface-menu);
67
  }
68
  div.use-header img {
69
    min-width: 225px;
70
  }
71
  div.uses {
72
    background-color: var(--surface-menu);
73
    padding: 0.1em 2rem;
74
    margin: 2.25em 0;
75
    border-radius: 10px;
76
  }
77
  div.item {
78
    margin-bottom: 5rem;
79
  }
80
  @media only screen and (max-width: 699px) {
81
    div.use-header {
82
      flex-direction: column;
83
    }
84
    div.uses {
85
      padding: 0.1em 0.5rem;
86
    }
87
  }
88
  div.time,
89
  div.time a {
90
    font-size: 0.8em;
91
  }
92
  div.time {
93
    margin-top: 2.5rem;
94
  }
95
  [data-icon="bi:calendar2-week-fill"] {
96
    font-size: 0.75rem;
97
    margin-bottom: -0.05rem;
98
  }
99
</style>

Very little of the work of rendering the items is done in uses.astro. Instead, it relies on the UsesItem component which it imports from UsesItem.astro. The current item in the map loop is passed as a prop to the component, which then renders the item detail view. Here’s my UsesItem.astro component in its entirety, and half of it is CSS:

1
---
2
import { Icon } from "astro-icon/components";
3
import { Image } from "astro:assets";
4

5
const { item } = Astro.props;
6
---
7

8
<div class="item">
9
  <div class="the-thing">
10
    <a href={`/images/posts/${item.Image}.jpeg`}>
11
      <Image
12
        src={import(`../assets/images/posts/${item.Image}.jpeg`)}
13
        width="300"
14
        densities={[2, 3]}
15
        alt={item.Name}
16
      />
17
    </a>
18
    <div>
19
      <h3>{item.Name}</h3>
20
      <ul>
21
        {item.Specs.map((spec, index) => <li key={index}>{spec}</li>)}
22
      </ul>
23
    </div>
24
  </div>
25
  <p class="uses">
26
    {item.Description}
27
  </p>
28
  {
29
    item.Link && (
30
      <p class="link">
31
        <a href={item.Link}>
32
          <Icon name="fluent:globe-star-20-regular" />
33
        </a>
34
        <a href={item.Link}>{item.Link}</a>
35
      </p>
36
    )
37
  }
38
</div>
39
<style>
40
  div.the-thing {
41
    display: flex;
42
    flex-direction: row;
43
    column-gap: 3rem;
44
    border-radius: 10px;
45
    justify-content: flex-start;
46
    align-items: flex-start;
47
    font-size: 1em;
48
    font-style: normal;
49
    font-weight: 400;
50
    column-gap: 2rem;
51
    margin: 0 auto;
52
    padding: 0;
53
  }
54
  p.uses {
55
    font-style: italic;
56
  }
57
  p.link {
58
    margin-top: 2em;
59
    font-size: 0.8em;
60
  }
61
  p.link [data-icon] {
62
    margin-bottom: -0.15em;
63
  }
64
  div.item {
65
    margin-bottom: 5rem;
66
  }
67
  @media only screen and (max-width: 699px) {
68
    div.the-thing {
69
      flex-direction: column;
70
      padding: 0 0.5rem;
71
    }
72
  }
73
</style>

This uses the astro:assets Image component to optimize the item’s image as specified in uses.json. It puts this next to the item name and a list of item features of specs. Under that is my description of what it is or why I like it, followed by an optional link to a website for the item.

You can see that item.Specs is an array and so I use item.Specs.map to create the list of specs. Also notice where the item URL link is rendered starts with item.Link && which means the following href rendering only happens if item.Link indeed exists.

The end result that is rendered is something like the following:

Summarium

You can definitely use Markdown for site content when appropriate, such as for a standard blog post. For anything more complicated, though, you’ll want to use a data source, like a JSON file, and a page template to parse it and map it. This way your data, or “content”, is separate from the rendering mechanics, but can be laid out on the page more intricately than is possible with a straight Markdown to HTML rendering.

The good news is that Astro page templates and components are super flexible in terms of easily mixing HTML, CSS, and JavaScript, and they’re the right tool to use for a one-off page with a custom layout.

That’s all I have right now because instead of adding things I use, I’m busy rewriting how the page is created. ↩

Mac 40

Thu, 25 Jan 2024 17:00:00 GMT

I don’t know if you’ve heard, but the Mac turned 40. And what a glorious 40 it is – with Apple Silicon and the return to some amount of function over form in the laptops and (most of the) desktops, the Mac is better than ever.

Personally, I started early on the Mac. My dad bought us matching 128K Macs the first year they came out. My Mac was upgraded to Fat Mac and then Mac Plus, and it served me far longer than it had any right to. By the time I got a current at the time PC at a discount from my employer, my Mac was way past its useful lifespan.

People have been telling a lot of fun stories about the Mac for its 40th anniversary. I highly encourage you listen to Upgrade #496: 40th Anniversary of the Mac Draft even if you’re not an Upgrade listener. Yes, it’s a draft, yes, John Siracusa actually drafts the current Mac Pro as the worst Mac ever, and yes, it is glorious. There’s also this peak Siracusa moment…

Here’s a list of some articles, podcast episodes, and videos I’ve enjoyed this week.

Apple Shares the Secret of Why the 40-Year-Old Mac Still Rules | WIRED

Greg Joswiak on the Mac’s enduring appeal – Six Colors

Happy 40th Birthday, Macintosh

Lost Apple History… FOUND on a Floppy Disk! 💾 Macintosh 40th Birthday Surprise (1984-2024) - YouTube

Mac at 40: The eras tour – Six Colors

The Mac that Steve Jobs unveiled in 1984 is 40, and as amazing as ever

The Mac turns 40 — and keeps on moving - The Verge

Wild Apples: The 12 weirdest and rarest Macs ever made | Ars Technica

Upgrade #496: 40th Anniversary of the Mac Draft - Relay FM

Upgrade 496: 40th Anniversary of the Mac Draft - YouTube

Links and Pins

Mon, 15 Jan 2024 17:00:00 GMT

Not long ago, I created a Links page which I used to hold links I wanted to keep temporarily, like a little pinboard. But then I realized “HEY!! THIS IS BAD!!” People expect a links page to be things like blogrolls and stuff they might like, not the stupid stuff Scott Willsey wants to remember for a day or month or year or three.

So as of today, I now have Links, which is what people expect of a links page, and Pins, which is what I apparently expect of a links page.

Links is now, just to clarify, a permanent-ish list of links to things that YOU, the reader, might also find interesting.

Pins is, just to also clarify, where I’ll stick ephemeral stuff that I want to get back to but doesn’t make sense to stick in a read later app.

Astro Icon 1.x Upgrade

Sun, 14 Jan 2024 13:00:00 GMT

If you started using Nate More’s Astro Icon with Astro early on and are using a version lower than 1.0, you will be in for a surprise when you upgrade to the latest version of Astro Icon and suddenly find a lot of breaking errors related to it.

Migrating from 0.x to 1.x is simple but can be a little tedious depending on how many icons you’re using. A couple key things to understand are that you have to import packages for each icon set that you use now, and that this is now an Astro integration. Don’t worry if you’re not sure how that affects you. You’ll handle adjusting to those changes in the upgrade steps below.

By the way, Nate has a great upgrade guide already at Upgrade to Astro Icon v1 | Astro Icon. I just thought I’d write about it too, since I’ve done this on a couple different sites now and I still have a couple to go.

Upgrading to Astro Icon 1.x from 0.x
1. Upgrade to the latest Astro and Astro Icon versions
2. Import and integrate astro-icon in your astro.config.mjs
3. Install @iconify-json/icon-family for every icon package you use
4. Change your astro-icon import statements on Astro pages
5. Change all references to [astro-icon] in your CSS to [data-icon]
6. Use font-size instead of width or height to set the icon sizes
7. Tweak font-size on all CSS for your icons
Summarium

Upgrading to Astro Icon 1.x from 0.x

Upgrade to the latest version packages of astro and astro-icon (astro-icon >= 1.0)
Import and integrate astro-icon in your astro.config.mjs
Install @iconify-json/icon-family for every icon package you use
On every page you import astro-icons, change import { Icon } from "astro-icon"; to import { Icon } from "astro-icon/components";
Find and replace [astro-icon] tags with [data-icon] in your css
Find and replace any CSS width or height properties on [data-icon] entries and replace with font-size
Now go through every single instance of [data-icon] in your CSS and tweak the font-size that you just added.

1. Upgrade to the latest Astro and Astro Icon versions

1
scott@Songoku:friendswithbrews astro-icon ✗ 4h31m △ ⍉ ➜
2
ncu
3
Checking /Users/scott/Sites/friendswithbrews/package.json
4
[====================] 21/21 100%
5

6
 @astrojs/rss            ^4.0.1  →   ^4.0.2
7
 @astrojs/sitemap        ^3.0.3  →   ^3.0.4
8
 astro                   ^4.0.7  →   ^4.1.2
9
 astro-eslint-parser    ^0.16.0  →  ^0.16.1
10
 astro-icon              ^0.8.2  →   ^1.0.2
11
 astro-pagefind          ^1.3.0  →   ^1.4.0
12
 date-fns                ^3.0.6  →   ^3.2.0
13
 prettier                ^3.1.1  →   ^3.2.2
14
 prettier-plugin-astro  ^0.12.2  →  ^0.12.3
15
 sharp                  ^0.33.1  →  ^0.33.2
16

17
Run ncu -u to upgrade package.json

I use npm-check-updates to update npm packages, but you can do it the standard way. The key thing to note is that in this instance I’m upgrading from astro-icon 0.8.2 to 1.0.2.

2. Import and integrate astro-icon in your astro.config.mjs

No explanation needed here – import astro-icon and add to the list of integrations.

1
import { defineConfig } from "astro/config";
2
import icon from "astro-icon";
3
import pagefind from "astro-pagefind";
4
import sitemap from "@astrojs/sitemap";
5

6
// https://astro.build/config
7
export default defineConfig({
8
  site: "https://friendswithbeer.com/",
9
  integrations: [ icon(), pagefind(), sitemap(),],
10
});

3. Install @iconify-json/icon-family for every icon package you use

This one requires you to scour through every place you specify an icon package name. Search for [astro-icon in your project and look for instances of things like <Icon name="simple-icons:mastodon" /> or CSS instances like [astro-icon="bi:hand-thumbs-up-fill"] and take note of the package names (in these examples, simple-icons and bi).

Now install these by installing @iconify-json/package-name for each. E.g,

1
npm install @iconify-json/simple-icons @iconify-json/bi

That will install the two packages in my example above.

4. Change your astro-icon import statements on Astro pages

The old way to import astro-icons in your .astro files is

1
import { Icon } from "astro-icon";

Change all instances of this in your astro files to

1
import { Icon } from "astro-icon/components";

5. Change all references to [astro-icon] in your CSS to [data-icon]

Another search and replace activity – [astro-icon] references have been replaced with [data-icon] references.

Old:

1
<style>
2
  [astro-icon="simple-icons:mastodon"] {
3
    color: var(--color-five);
4
    width: 2.2rem;
5
  }
6
</style>

New:

1
<style>
2
  [data-icon="simple-icons:mastodon"] {
3
    color: var(--color-five);
4
    font-size: 2.2rem;
5
  }
6
</style>

6. Use font-size instead of width or height to set the icon sizes

You may have noticed in the previous section that I not only changed [astro-icon] to [data-icon] in my CSS reference to it, but I also removed the width property and replaced it with a font-size property instead.

After performing the first 5 steps, you’ll see wildly sized icons all over the place until you do this.

7. Tweak font-size on all CSS for your icons

Step 6 will get you in the ballpark, but you’ll now find that some of your sizes, while closer, are still off. Just play with font-size values until you get what you like. CSS specificity is key here – be specific about which icons you’re setting your CSS for and use scoped CSS by putting them in <style> tags in specific astro pages.

The first example below affects all icons, the second one affects the bi:hand-thumbs-up-fill icon specifically.

1
[data-icon] {
2
 font-size: 1em;
3
}

1
[data-icon="bi:hand-thumbs-up-fill"] {
2
 margin-bottom: 0.1rem;
3
}

Summarium

That’s pretty much it. Once change you will notice when running the dev server is that the first time you try to load the site in the browser, Astro Icon has to load all the icon sets and it takes a little bit. Don’t worry. It will work. 🙂

Grin and Bear It

Sun, 07 Jan 2024 08:13:36 GMT

Back when the iPad Pro was my main mobile “work” device,¹ Drafts played a huge role in my writing and blogging. For one thing, it has extensive automation and scripting capabilities, and those came in super handy on iPadOS. I created automations to let me choose photos from my photos library and add them to blog posts, including creating proper links and adding them to my site repo.

But now I have an Apple Silicon MacBook Pro and I’ve long since given up trying to fight my way to success through all the limitations of iPadOS. It’s hard to overstate how much faster and easier so many things are on the Mac, and given the current state of Apple’s Shortcuts, having tons of other reliable methods of automating things, as you do on the Mac, is incredibly nice.

All that to say, I realized today I haven’t really done anything in Drafts except type out blog posts and then paste them into VSCode when it was time to publish them. I’m no longer making use of all the great Drafts automations and integrations that I used to. And given THAT fact, I may as well do my writing in something that looks nicer and feels more modern as a writing app.

I own iA Writer but it bugs me in certain ways. I don’t like the non-standard footnote default that makes you manually type the footnote reference at the bottom yourself if you don’t want an inline footnote, and it’s also very limited on font choices.

Ulysses is also weird. It shows you some of the Markdown but tries to hide other Markdown, like URLs, in very inconvenient ways. It’s been a long time since I thought I was a fan of Ulysses.

Before Ulysses, it was Byword for me. To say it looks a little basic now is a bit of an understatement.

That leaves Bear as the only realistic Markdown writing option for me, and I have to say, I like how the editor looks. That’s important to me. If it wasn’t, I’d still be using Drafts because it’s a great app and I do really like Greg Pierce and the work he does on it. It’s just not as important to me on the Mac now as it was on iPadOS.

I’m a person who has a lot of idiosyncrasies, and one of them is that I need a nice looking editor to be able to enjoy the writing process. Bear definitely looks nice. The defaults are nice, customizing it is simple, and things like images and links look really nice in it.

Below is an image showing both the light and dark themes I’m currently using in Bear.

There’s not a lot I need to do in order to incorporate Bear into my writing workflow. I already have a script that names my images and puts copies of them in the right locations to both be optimized for the blog and to be able to link to the original. I’ll need to put an automation somewhere in the publish chain that updates the post’s Markdown file with those image paths and creates the links to the larger, original images. But that was also something I needed to do for my Drafts workflow, and hadn’t yet.

Also I think playing with Bear has given me some ideas for improving my site CSS a bit… 🤔

Not my WORK work device, but my personal project work device ↩

Auto-Generated Last Modified Date in Astro

Sat, 06 Jan 2024 22:49:58 GMT

I’m trying to figure out how to use remark plugins in Astro to modify a couple things in posts for me automatically, and along the way I’ve used remark to add a couple quality of life improvements. The first is an auto-generated table of contents for longer posts that I feel need one, and the second is an auto-generated last modified date for pages based on git commit timestamps.

The benefit of an automatically generated last modified date is that I don’t have to remember to update it when I make changes to a page that displays it, like my now page or my links page. I can just commit my changes and the last modified date will update automatically. It’s simple, but it’s kind of beautiful.

I basically did exactly what Astro’s documentation says to do in a helpful recipe called Add last modified time. I created a file called remark-modified-time.mjs and put it in my src/components/utilities folder.¹

1
import { execSync } from "child_process";
2

3
export function remarkModifiedTime() {
4
  return function (tree, file) {
5
    const filepath = file.history[0];
6
    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
7
    file.data.astro.frontmatter.lastModified = result.toString();
8
  };
9
}

Then I updated my astro.config.mjs file to reference this as a remark plugin, and to use it in my markdown processing.

1
import { defineConfig } from "astro/config";
2
import expressiveCode from "astro-expressive-code";
3
import icon from "astro-icon";
4
import pagefind from "astro-pagefind";
5
import { remarkModifiedTime } from './src/components/utilities/remark-modified-time.mjs';
6
import remarkToc from 'remark-toc';
7

8
/** @type {import('astro-expressive-code').AstroExpressiveCodeOptions} */
9
const astroExpressiveCodeOptions = {
10
  // Example: Change the themes
11
  themes: ["material-theme-ocean", "light-plus", "github-dark-dimmed"],
12
  themeCssSelector: (theme) => `[data-theme='${theme.name}']`,
13
}
14

15
// https://astro.build/config
16
export default defineConfig({
17
    site: "https://scottwillsey.com/",
18
    integrations: [expressiveCode(astroExpressiveCodeOptions), icon(), pagefind()],
19
    markdown: {
20
    remarkPlugins: [ remarkModifiedTime, [remarkToc, { heading: "contents" } ] ],
21
  },
22
});

Once those are set up, it’s just a matter of referencing remarkPluginFrontMatter.lastModified in the Astro template.

1
---
2
import { getEntry } from "astro:content";
3
import { Icon } from "astro-icon/components";
4
import Base from "../layouts/Base.astro";
5
import { modifieddate } from "../components/utilities/DateFormat.js";
6

7
const now = await getEntry("now", "now");
8
const { Content, remarkPluginFrontmatter } = await now.render();
9

10
let title = now.data.title;
11
let description = now.data.description;
12
---
13

14
<Base title={title} description={description}>
15
  <article>
16
    <h1>{title}</h1>
17
    <p class="now">
18
      The <a href="https://nownownow.com/about">"now page"</a> concept comes from
19
      an idea by <a href="https://sive.rs">Derek Sivers</a> to have people communicate
20
      what they're focused on <b>now</b> at this point in their lives.
21
    </p>
22
    <div class="time">
23
      <Icon name="bi:calendar2-week-fill" />
24
      <time datetime={now.data.date}>
25
        <a href={`/${now.slug}`}
26
          >Last updated {modifieddate(remarkPluginFrontmatter.lastModified)}</a
27
        >
28
      </time>
29
    </div>
30
    <div class="now">
31
      <Content />
32
    </div>
33
  </article>
34
</Base>

Now Page

Thu, 04 Jan 2024 17:00:00 GMT

I don’t remember how I stumbled across the now page movement started by Derek Sivers, but I immediately thought “what a great idea!” and decided to add one to my site.

The concept is simple – it’s a page that lists some current interests, activities, or projects that you’re into or doing. I decided to title mine “Current and Recent Things” because it seemed more appropriate when talking about food I’ve recently enjoyed or movies I’ve recently watched to label those as “recent” instead of “right this second”.

This is the kind of thing I like about personal websites. I think I a lot of people are realizing that blogging isn’t dead yet, it’s not even just resting, and additions to personal sites like now pages make personal blogs and websites even more fun to maintain.

You should try it, if you’re not already.

Anyway… here it is. My now page.

Default Browser Switching

Fri, 29 Dec 2023 13:00:00 GMT

As you saw from my Default Apps December 2023 post, I use Safari for personal use and Chrome for web work and for some administrative and server-related tools that work best in it. The downside to this is that links go to the default browser from things like 1Password, Fastmarks, and email messages, for example. This means when I’m using Chrome, what I really need is for it to be my default browser, and the rest of the time, Safari to be.

Because I’m a Raycast user, I was intrigued by the Raycast Script Commands GitHub repo. The script command examples in this repo include system commands that include default browser scripts for Arc, Chrome, Chromium, Firefox, and Safari.

Raycast Script Commands

Raycast script commands are basically scripts that are registered in Raycast and have hooks that let it interact with them to pass parameters and show output in Raycast, if desired. These can be Bash scripts, AppleScript, Swift, Python, Ruby, or Node.js scripts.

Raycast Default Browser Script Commands

The default browser scripts in the Raycast script command repo rely on a very short Objective-C program that you compile on your Mac called defaultbrowser, which lets you change your default browser from the command line. Given this, you might be surprised to learn that these script commands are AppleScript, and not Bash scripts. The reason is simple: buttons.

When you tell your Mac to switch default browsers using defaultbrowser, you are presented with a dialog box giving you the option to set whatever browser you wanted as your new default, or to keep whatever browser is the current default. Bash scripts can’t click buttons, but AppleScript can. It can also run Bash scripts, which lets us call defaultbrowser from within the AppleScript.

Here’s the default-browser-safari.applescript script from the Raycast script commands repo:

1
#!/usr/bin/osascript
2

3
# Dependency: requires defaultbrowser (https://github.com/kerma/defaultbrowser)
4
# Install via Homebrew: `brew install defaultbrowser`
5

6
# Required parameters:
7
# @raycast.schemaVersion 1
8
# @raycast.title Default to Safari
9
# @raycast.mode silent
10
# @raycast.packageName Browser
11

12
# Optional parameters:
13
# @raycast.icon images/safari.png
14

15
# Documentation:
16
# @raycast.author Marcos Sánchez-Dehesa
17
# @raycast.authorURL https://github.com/dehesa
18
# @raycast.description Set Safari as the default browser.
19

20
set repeatCount to 0
21

22
tell application "System Events"
23
 try
24
  my changeDefaultBrowser("safari")
25
  repeat until button 2 of window 1 of process "CoreServicesUIAgent" exists
26
   delay 0.01
27
   set repeatCount to repeatCount + 1
28
   if repeatCount = 15 then exit repeat
29
  end repeat
30
  try
31
   click button 2 of window 1 of process "CoreServicesUIAgent"
32
   log "Safari is now your default browser"
33
  on error
34
   log "Safari is already your default browser"
35
  end try
36
 on error
37
  log "The \"defaultbrowser\" CLI tool is required: https://github.com/kerma/defaultbrowser

The top half is information for Raycast. Then the AppleScript portion gets going. First it calls a function¹ that runs the defaultbrowser command line program with the string safari as a parameter value. Then it runs a loop waiting for the confirmation dialog box to pop up. It waits until either the window exists or it’s looped 15 times. Finally, it tries to click button 2 of the dialog box. The reason it tries to click button 2 is because the dialog looks like the following image – or at least, it’s supposed to. More on that later.

This means when you send it a request to change your default browser from Safari to Chrome, for example, you’ll get a dialog box with two buttons, the first of which cancels the change and the second of which executes the change to Chrome.

I created new Raycast script commands using the appropriately named “Create Script Command” command in Raycast, and then copied the AppleScripts from the repo into them. Hooray! End of blog post, right?

Except there was a problem.

Chrome Does It Differently

Everything worked great whenever I tried switching from any browser that wasn’t Chrome to any other browser. But whenever I tried switching FROM Chrome back to something else, it never worked.

A simple test using defaultbrowser directly in the command line showed me why. Chrome’s confirmation dialog box is different. It looks like this:

You see the problem. The command scripts assume that button 2 is the button for making the switch, but in the case of Chrome’s dialog box, it’s the other way around. Button 1 makes the change and button 2 keeps the current default browser setting.

I honestly don’t know whose responsibility this is, Google’s or Apple’s, and I don’t really care. I presume it’s Google’s because I presume at one point the Raycast versions of these script commands worked, even when switching away from Chrome as the default browser, so my guess is Google changed something about Chrome’s confirmation dialog. I don’t know. Honestly, I would have thought this was entirely handled by macOS.

Modifying the Default Browser Scripts to Handle the Chrome Dialog Box

The solution is simple: if switching from Chrome, click button 1. Otherwise, click button 2. Since the script could be switching to a non-Chrome browser from a different non-Chrome browser, this means I need to check. And that sent me down a rabbit hole that I refuse to admit the time duration of, because it was long enough to need to add an “s” to “hour”.

But it goes like this:

On macOS, your default browser setting is one of many settings saved in com.apple.launchservices.secure.plist in your local Library/Prefences folder (~/Library/Preferences). You can search for it. If you type the following, you’ll get a LONG output that includes two lines you care about:

1
plutil -p ~/Library/Preferences/com.apple.LaunchServices/com.apple.launchservices.secure.plist

Those two lines are:

1
"LSHandlerRoleAll" => "com.apple.safari"
2
"LSHandlerURLScheme" => "https"

That’s if Safari is your current default browser, of course. It could be org.mozilla.firefox or com.google.chrome, for example. But you want to search for a line with LSHandlerRoleAll set to some browser, followed by a line called LSHandlerURLScheme set to https.

Fortunately, awk was made for things like this, and also fortunately, AppleScript can run shell commands. So I made another function for my default browser AppleScripts to see what the current browser is.

1
to getCurrentDefaultBrowser()
2
 set filePath to "~/Library/Preferences/com.apple.LaunchServices/com.apple.launchservices.secure.plist"
3
 set output to do shell script "plutil -p " & filePath & " | awk '/LSHandlerRoleAll/{a=$3}/LSHandlerURLScheme/{if($3==\"\\\"https\\\"\") print a}'"
4
 return output
5
end getCurrentDefaultBrowser

Now, before running the part of the script that runs defaultbrowser before waiting for a button to click, it checks which browser is the current default browser. If it’s com.google.chrome, then my script clicks button 1 for me. Otherwise it clicks button 2.

1
#!/usr/bin/osascript
2

3
# Dependency: requires defaultbrowser (https://github.com/kerma/defaultbrowser)
4
# Install via Homebrew: `brew install defaultbrowser`
5

6
# Required parameters:
7
# @raycast.schemaVersion 1
8
# @raycast.title Set Default Safari
9
# @raycast.mode silent
10
# @raycast.packageName Browser
11
# Optional parameters:
12
# @raycast.icon images/safari.png
13
# Documentation:
14
# @raycast.author scott_willsey
15
# @raycast.authorURL https://raycast.com/scott_willsey
16

17
set currentDefaultBrowser to my getCurrentDefaultBrowser()
18

19
set repeatCount to 0
20
tell application "System Events"
21
 try
22
  my changeDefaultBrowser()
23
  repeat until button 2 of window 1 of process "CoreServicesUIAgent" exists
24
   delay 0.01
25
   set repeatCount to repeatCount + 1
26
   if repeatCount = 15 then exit repeat
27
  end repeat
28
  try
29
   if currentDefaultBrowser contains "com.google.chrome" then
30
    click button 1 of window 1 of process "CoreServicesUIAgent"
31
   else
32
    click button 2 of window 1 of process "CoreServicesUIAgent"
33
   end if
34
   log "Safari is now your default browser"
35
   on error
36
    log "Safari is already your default browser"
37
  end try
38
  on error
39
   log "The \"defaultbrowser\" CLI tool is required: https://github.com/kerma/defaultbrowser"
40
 end try
41
end tell
42

43
to getCurrentDefaultBrowser()
44
 set filePath to "~/Library/Preferences/com.apple.LaunchServices/com.apple.launchservices.secure.plist"
45
 set output to do shell script "plutil -p " & filePath & " | awk '/LSHandlerRoleAll/{a=$3}/LSHandlerURLScheme/{if($3==\"\\\"https\\\"\") print a}'"
46
 return output
47
end getCurrentDefaultBrowser
48

49
to changeDefaultBrowser()
50
 do shell script "
51
 if ! command -v defaultbrowser &> /dev/null; then
52
  exit 1
53
 fi
54
 defaultbrowser " & "safari" & "
55
 exit 0
56
 "
57
end changeDefaultBrowser

Now when I have Chrome set as my default browser and I don’t want that anymore, my Raycast default browser command scripts work as intended, and will actually manage to set my default browser to the desired one.

A Parameterized Version of the Default Browser Command Script

Just in case anyone else cares, I also created a parameterized version of the script that lets me type in the browser name as a raycast command parameter so that the same script can switch to any browser I want.

1
#!/usr/bin/osascript
2

3
# Required parameters:
4
# @raycast.schemaVersion 1
5
# @raycast.title Set Default Browser
6
# @raycast.mode silent
7

8
# Optional parameters:
9
# @raycast.icon images/Safari.png
10
# @raycast.argument1 { "type": "text", "placeholder": "Browser Name" }
11

12
# Documentation:
13
# @raycast.author scott_willsey
14
# @raycast.authorURL https://raycast.com/scott_willsey
15

16
on run argv
17
    # check for null or empty item 1 of argv
18
    if (item 1 of argv) is "" then
19
        log "You must enter a browser name."
20
    else
21
        set currentDefaultBrowser to my getCurrentDefaultBrowser()
22
        set browserName to item 1 of argv
23

24
        set repeatCount to 0
25

26
        tell application "System Events"
27
            try
28
                my changeDefaultBrowser(browserName)
29
                repeat until button 2 of window 1 of process "CoreServicesUIAgent" exists
30
                    delay 0.01
31
                    set repeatCount to repeatCount + 1
32
                    if repeatCount = 15 then exit repeat
33
                end repeat
34
                try
35
                    if currentDefaultBrowser contains "com.google.chrome" then
36
                        click button 1 of window 1 of process "CoreServicesUIAgent"
37
                    else
38
                        click button 2 of window 1 of process "CoreServicesUIAgent"
39
                    end if
40
                    log browserName & " is now your default browser"
41
                on error
42
                    log browserName & " is already your default browser"
43
                end try
44
            on error
45
                log "The \"defaultbrowser\" CLI tool is required: https://github.com/kerma/defaultbrowser"
46
            end try
47
        end tell
48
    end if
49

50
end run
51

52
to getCurrentDefaultBrowser()
53
    set filePath to "~/Library/Preferences/com.apple.LaunchServices/com.apple.launchservices.secure.plist"
54

55
    set output to do shell script "plutil -p " & filePath & " | awk '/LSHandlerRoleAll/{a=$3}/LSHandlerURLScheme/{if($3==\"\\\"https\\\"\") print a}'"
56
    return output
57
end getCurrentDefaultBrowser
58

59
to changeDefaultBrowser(browserName)
60
 do shell script "
61
  if ! command -v /opt/homebrew/bin/defaultbrowser &> /dev/null; then
62
    exit 1
63
  fi
64
  defaultbrowser " & browserName & "
65
  exit 0
66
 "
67
end changeDefaultBrowser

Custom handler in AppleScript parlance, apparently ↩

Default Apps December 2023

Sun, 24 Dec 2023 13:00:00 GMT

Once upon a time,¹ the Hemispheric Views podcast held the first ever Duel of the Defaults in which they decided who was the winner at using the most default apps for several categories. Subsequently, Gabz posted his own default app list, and then Robb Knight took it to 11 with his App Defaults page.

In the spirit of this new fashion of blogging about one’s default apps, here are mine as of December, 2023.

NOTE: These are my personal use apps. They have nothing to do with my job at Monolith 3000, which is an all-Microsoft shop.

Official Categories

📮 Mail Server
- Fastmail
- Gmail
📨 Mail Client
- Apple Mail
📝 Notes
- Obsidian
- Apple Notes
- Drafts
- Raycast Floating Notes Window
✅ To-Do
- Reminders App
📷 iPhone Photo Shooting
- iOS Camera
🟦 Photo Management
- Photos App
📅 Calendar
- Apple Calendar
📂 Cloud File Storage
- iCloud Drive
📖 RSS
- NetNewsWire
👩‍🦲 Contacts
- Apple Contacts App
🌐 Browser
- Safari, Chrome for web work
💬 Chat
- Messages, Signal, Discord, Slack
🔖 Bookmarks
- Fastmarks
📑 Read It Later
- GoodLinks
📜 Word Processing
- Pages
- Google Docs
- Microsoft Word
📈 Spreadsheets
- Excel (I’m sorry, but Numbers is the most useless excuse for a spreadsheet app I’ve ever seen)
📊 Presentations
- Keynote
🛒 Shopping List
- Reminders
🍴 Meal Planning
- Mela
💰 Budgeting and Personal Finance
- Spreadsheet
📰 News
- RSS
- Mastodon
- Apple News
🎵 Music
- Apple Music
🎤 Podcasts
- Overcast
🔐 Password Management
- 1Password
- Keychain

Additional Categories

🧑‍💻 Programming
- Visual Studio Code
- BBEdit
- Xcode
💻 Terminal
- Warp
📸 Photo Editing
🔷 Vector Graphics
- Affinity Designer 2
🧠 AI
- ChatGPT Plus
- Raycast AI

November 2nd, 2023, in fact ↩

Warp Blocks

Mon, 11 Dec 2023 13:00:00 GMT

I like Warp. I did not intend to like Warp. I didn’t even want to like Warp. But after giving it a fair shot for a few days, I couldn’t help but liking it and sticking with it. It just feels to me like everything a next generation terminal should be.

According to its developers,

Warp is a modern, Rust-based terminal with AI built in so you and your team can build great software faster.

That sounds nice, if not a bit vague. What is so great about Warp, and what makes it more desirable to use than macOS Terminal app or iTerm2 or Secure Shellfish, for example? The obvious answer is its features and the workflows they enable. One of my favorite of those features is Blocks.

Blocks

Blocks are one of the biggest Warp features, in my opinion, and one that I love and take advantage of all the time. Blocks are simply a grouping of a command and its output into one selectable and actionable section in Warp. For example, here’s the result of a ps -aux command that is now a block.

My new waiting command prompt is below the block and is now in a separate block from it, but I can scroll up and down to see the whole ps -aux block and perform actions on it. Blocks are nice because not only do they negate having to use something like ps -aux | more to see the full output of a command, but they also remain selectable, filterable, and modifiable.

Speaking of filterable… here’s that same block filtered by the word “python”. Look how small it is… down from 124 lines of output to 3!

Filtering can accept regular expressions or case-sensitive text simply by choosing those options in the filter search, just like most modern text editors. The keyboard shortcut for filtering is Shift-Option-F (⇧ ⌥ F).

You may be thinking, hang on… I can just pipe the command to grep like this: ps -aux | grep 'python', and you’re right. You can. But filtering is fast and you can further act on it by saving the filtered output or the filtered output and the command, and more.

Update 2023-12-17

Warp has a great blog post about Block filtering vs. grep that help answer the obvious question of why use block filtering instead of just using grep: New utilities for your terminal, inspired by text editors | Warp

Bookmarking blocks is nice too. For example, here I left the previous ps -aux block filtered for “python” and bookmarked it. I then executed a bunch of other commands which all created their own blocks and the bookmarked ps -aux block scrolled off the screen. But by hitting Option-up (⌥-↑), I immediately jumped back up to the bookmarked (and still filtered) block.

Filtering isn’t the only way to find things in a block, you can also use standard old Command-F (⌘-F) to search within a block. The difference between this and filtering is exactly what the words imply: filtering reduces the output of the command to just lines with matches, while search finds search text or regular expression matches in the command output, but doesn’t filter to only show matching lines.

One nice feature is using search in a “live” block, like one that’s running an htop or a tail -f command. As the output of the running process updates, so do your search results.

There’s more to Warp Blocks than what I’ve mentioned here. Check out Warp’s documentation on Blocks to see for yourself.

Astro 3.3 Picture Component

Sun, 12 Nov 2023 13:00:00 GMT

The last time I wrote about image optimization and responsive images in Astro, there were some compromises to be made in order to use astro:assets image optimization.

First, it did not resize images or create responsive source sets, it only optimized the format and file byte size with the same width and height. Second, it did and still does require importing images in a way that at the very least requires you to know the file extension of the original, and in a way that I thought made dynamically creating image source file names impossible. And finally, there was no control at all over how images referenced in markdown are optimized.

The good news is that as of Astro 3.3, there is an improved astro:assets Image component as well as a new astro:assets Picture component that solve a lot of my problems. The issue of leaving it up to Astro to do what it wants with markdown images still exists, but I have a compromise for that issue.¹ In the meantime, Astro 3.3+ can now create multiple image formats, multiple image pixel sizes, and can create both img and picture tags with source sets for great image responsiveness.

A Problem Requiring Responsive Images and Dynamic Image Names

Let’s look at a real world use case to show you a typical scenario where you need to create your image source file names dynamically as well as create multiple sizes.

Friends with Brews is a podcast about conversations and different kinds of brewed drinks – beer, coffee, or tea. Because part of the show’s premise is trying new drinks and giving them a thumbs-up or thumbs-down, I also want to keep a list of these drinks and showcase them both on the individual episodes they’re consumed on as well as on an aggregate brews page.

Each of these little detail blocks links to a details page for the specific drink.

Because several of these images are typically displayed on any given page, or because the image on the individual drink detail pages are dimensionally larger, I want them optimized as much as possible. In addition, I want them to be as responsive as possible for different size screens and different pixel densities.

One thing to note is that all of the drink details for every drink are kept in a JSON file called brews.json. This JSON file includes the name of the image associated with the drink. The JSON entry for a specific brew looks like this:

1
{
2
    "id": "YodfV6yTeB75PJpmQDPgU",
3
    "name": "Oktoberfest Märzen",
4
    "brewery": "Hacker-Pschorr",
5
    "image": "HackerPschorrOktoberfestMarzen-8E6221D0-7EB7-46B3-8AFA-5CA4A1E6AC1B",
6
    "description": "As it was forbidden to brew in summer, a stronger beer -- the Märzen -- was brewed earlier in March. It would finally be served at the Oktoberfest, under the \"Heaven of Bavaria.\" We have returned once again to the age-old recipe and recreated that gloriously smooth, honey-coloured piece of history from times gone by. Perfect with: Bavarian sausage salad and all the titbits a true Bavarian would also enjoy: roast chicken, sausages or suckling pig cooked in Wiesn beer.",
7
    "type": "beer",
8
    "sortOrder": "0",
9
    "episodes": ["54"],
10
    "url": "https://www.hacker-pschorr.com/our-beers/usa/oktoberfest-maerzen",
11
    "rating": [
12
      {
13
        "host": "Peter",
14
        "vote": "thumbs-up",
15
        "description": "It is malty, it is toasty, and it is crisp. Very happy, this is good."
16
      }
17
    ]
18
  },

Note the image entry: the image name doesn’t have a file extension for technical reasons, namely that when you’re importing images in an Astro file, you can’t create a dynamic file name including the file extension. Vite has to know the file extension ahead of time, even if you do cobble together the rest of the file name at compile time.

Because of this, I just made all my images PNG, regardless of what they would later be optimized to by the various image optimization components I’ve used over the life of the Friends with Brews website, and therefore I also didn’t include the file extension because I would be hard-coding it into the image name string to keep Vite happy.

It sounds more confusing than it is. Here’s my code pre-Astro 3.0, back when Astro had an image optimization tool called @astrojs/image which had both Image and Picture components. Note the src property of the Picture component and the above paragraph will make more sense.

1
---
2
import { Icon } from "astro-icon/components";
3
import { Picture } from "@astrojs/image/components";
4

5
const { brew, episode } = Astro.props;
6
---
7

8
<div class="brew">
9
  <div class="brew-image">
10
    <a href={`/bottle/${brew.id}/`}>
11
      <Picture
12
        src={`/images/brews/${brew.image}.png`}
13
        widths={[400, 800, 1200]}
14
        aspectRatio="1:1"
15
        sizes="200px"
16
        formats={["avif", "webp", "png"]}
17
        alt={`${brew.brewery} ${brew.name}`}
18
      />
19
    </a>
20
  </div>

Astro 3.0 - 3.2.x Solution

After migrating to Astro 3 and before Astro 3.3 gave the ability to generate multiple widths for each desired image format, I was generating those myself. For my brew images, I was creating 400 pixel wide and 1000 pixel wide images for each drink in addition to the original size. This was all automated with Retrobatch, but it was still a little more work and management on my part.

In my case, I would generate the 400 and 1000 pixel wide images in webp, and also keep the full-sized png on hand to link to for people who like staring at large images with equally impressive download times.

Here’s what my BrewsDetails.astro file looked like with this solution:

1
---
2
import { Icon } from "astro-icon/components";
3
import { capitalize, brewIcon } from "./utilities/stringformatter.mjs";
4

5
const { brew, episode } = Astro.props;
6

7
const brewImage = brew.image.replace(/(-)(\w{8}-\w{4}-\w{4}-\w{4}-\w{12})$/, "-400$1$2") + ".webp";
8
---
9

10
<div class="brew">
11
  <div class="brew-image">
12
    <a href={`/bottle/${brew.id}/`}>
13
      <img src={`/images/brews/${brewImage}`} alt={brew.name} />
14
    </a>
15
  </div>
16

17
<!-- Etc, etc, etc -->

The first thing eagle-eyed readers will notice is that I’m not using any kind of image component at all here – just a plain old html img tag. This is because I was already generating the optimized images and because I was using a wider image size than needed to help with the high pixel-density display cases.

This string is just making sure we’re grabbing the 400 pixel wide version of the image for this view:

const brewImage = brew.image.replace(/(-)(\w{8}-\w{4}-\w{4}-\w{4}-\w{12})$/, "-400$1$2") + ".webp";

This is all fine and dandy, but it’s less optimal than the pre-Astro 3.0 days, because the html I was using does nothing for lazy loading, does nothing for only grabbing the largest image needed for the device screen size and pixel density, and is basically a massive compromise.

I was not a giant fan of having to do this, in other words.

Fortunately, the smart people at Astro kept refining Astro 3.x’s image optimization solution.

Astro 3.3+ Solution

Now that Astro 3.3+ has the ability to use the Image or Picture components to generate multiple widths per image format, this solves the problem of different screen sizes and pixel densities. Now I can let it generate the extra images for me.

Here’s what the Picture component looks like for these small drink images:

1
---
2
import { Icon } from "astro-icon/components";
3
import { Picture } from "astro:assets";
4
import { capitalize, brewIcon } from "./utilities/stringformatter.mjs";
5

6
const { brew, episode } = Astro.props;
7

8
---
9

10
<div class="brew">
11
  <div class="brew-image">
12
    <a href={`/bottle/${brew.id}/`}>
13
      <Picture src={import(`../assets/images/brews/${brew.image}.png`)}
14
          formats={['avif', 'webp', 'jpg']}
15
          width="400"
16
          widths={[400, 800]}
17
          alt={`${brew.brewery} ${brew.name}`} />
18
    </a>
19
  </div>
20

21
<!-- Etc, etc, etc -->

Here’s the file diff between my Astro 3.0-3.2 version versus my new Astro 3.3+ version:

By the way, remind me to talk about Kaleidoscope sometime. Its ability to diff things in multiple views, act as the command line difftool, and show diffs between different git commit versions is really spectacular.

Importing images using dynamic file names

Notice the difference between the way the Picture src property is composed here compared to the pre-Astro 3 version in the first half of this article? This is because the images located in the src directory need to be imported for the astro:assets Image and Picture components. Typically import statements do not like dynamically constructed strings – they error out and complain that you need to give them a static string.

Fortunately I ran across an Astro Discord thread explaining how to do the import using a dynamic string (still requiring the file extension to be statically defined, of course), and let’s just melodramatically say that it changed my life.

Another equivalent way to do it would be to use import.meta.glob to grab all the image assets and then grab the image using the key of the matching image file name, like this:

1
---
2
const images = import.meta.glob("../../assets/images/brews/*.png");
3
---
4

5
<Picture src={images[`../../assets/images/brews/${bottle.image}.png`]()} formats={['avif', 'webp']} alt="A description." />`

`">

If, like me, you were desperately hoping for a better way to optimize your images after migrating to Astro 3, your prayers are pretty much answered. There’s still the issue of image links in your markdown files, though. I’ll cover that topic in a future post.

Resources

Astro 3.3: Picture component | Astro Blog
Images Component 🚀 Astro Documentation
Picture Component 🚀 Astro Documentation
My Responsive Images series

The issue of how markdown images are optimized is not completely immaterial because markdown image links are used for every single image inside blog posts or podcast show notes, for example. ↩

Podcast Transcripts with Audio Hijack

Fri, 03 Nov 2023 17:00:00 GMT

There I was sitting in bed after a long work day, reading SixColors, as one should, when I stumbled across this article: Audio Hijack adds automatic transcription.

This is kind of exciting. I have mixed feelings about it, actually. On the one hand, not having to laboriously create transcripts after the fact with the admittedly lovely MacWhisper does sound good. On the other hand, I’ll still have to edit the transcript to more closely mirror the edited podcast, since this will transcribe the live recorded version of the conversation instead of the edited version.

Anyway, who cares – obviously I’m going to try this out for the next recording of Friends with Brews and see how it goes. Here’s my setup, which I believe should let me get an attributed transcription:

I’ve used MacWhisper’s Transcribe Podcast feature on the last two episodes of Friends with Brews I’ve transcribed to get speaker attribution. You can see it in action on the transcription for Episode 52 – If I Were a Beer. If I can replicate that while recording the podcast instead of as a separate task later, you can bet that Audio Hijack Transcribe block will be value added.

Podcast Recording Practices

Tue, 10 Oct 2023 17:00:00 GMT

I talked previously about the recording software I use for podcasting on the Mac. It’s all great stuff, and if you haven’t read that article, you should. Even if you think you’re not a podcaster, maybe someday you will be, and each of those applications has use far beyond creating podcasts.

At some point in the near-ish future, I want to talk about specific app setups and use methodologies for podcasting, but before I do that I want to talk about some general best practices for recording. Some of these will help make the life of whoever edits your podcast a lot easier, assuming they care about sound quality and conversation flow.

I know a lot of people say no one cares about audio quality or crosstalk or words repeated three times in a row, but people do care. It’s a lot different being in a conversation and not really hearing all the starts and stops and repeated words and uhms and ahhs, but they start to matter for people listening to podcasts.

Since your goal is to make your podcast as enjoyable as possible and you don’t know what annoys any given listener, why not make a good faith effort to make it as listenable as possible? In terms of recording, it takes very little extra effort to have a good quality sound and smooth conversation versus one that makes it obvious you couldn’t be bothered.¹

My motto about effort is “I can care less than you do”, meaning that if you, the media or product producer, don’t even care enough to try, why should anyone else care about your product either? This is not the same as saying you have to sound like This American Life or have custom jingles and the best artwork in existence. It does mean you need to clearly be trying so that your listeners know you really do care about their experience. Other people won’t care about your thing unless you care about your thing.

Get Rid of Noise

If you have a noisy podcast, some segment of your audience, probably a much larger segment than you think, will notice and will care. There have been several podcasts I’ve tried in the past that I just couldn’t listen to because it was too obvious that the hosts just recorded without testing or listening back to their own material and threw it out there for the world to suffer to.

When I say noisy, I’m using the term as a catch-all for background noise, hiss in the recording, water heaters, air conditioning, vocal reverb or extreme compression (think Skype or Zoom recordings), and even things like clipping, which is when your signal is too loud for the mic to handle and the waveform clips at the top, resulting in a very painful noise in the recording. It’s amazing how many people don’t even bother to see if they’re clipping or not, and it can be hard to fix in post.

Some simple steps for getting rid of noise in your podcast include the following.

Consider Your Mic

Use a decent mic, preferably one that doesn’t pick up every sound between the mic diaphragm and Mars. For this reason, condenser mics like the oddly popular Blue Yeti will not work for many people.

Echoing Is for the Alps

Reduce echo in your recording environment. Foam panels and temporary throw rugs and curtains can do wonders to absorb sound rather than let it bounce around.

Don’t Blow Hot (Or Cold) Air

Record as far away from air blowers as you can. Sometimes you’ll have no choice but to record with AC or heating on – let your editor know (maybe that’s you) so they can test some recordings of yours and see if they can remove the noise cleanly. Chances are they can, but they may need a little trial and error.

Mute Yourself

Have a mute switch, be it hardware or software based. I have an Elgato Wave XLR, which has a capacitive touch mute switch, and I love it. Peter uses an app called Shush since he’s using a USB mic.

Use your mute switch when you cough, snort, drink (unless your podcast IS at least partially about the drink), eat, or otherwise make noises that your editor should care about. Also mute whenever not talking to avoid the temptation to talk over someone else, which also makes editing take longer (again, your editor should care about crosstalk).

It’s All in the Technique

Learn good mic technique. This is harder than it sounds. It’s very easy to talk very loud sometimes and very quietly at other times. Some mics require eating the mic and others will overdrive in a second if you’re an inch too close and be at a nice level otherwise. Stay at a consistent distance and position relative to the mic, and don’t forget you ARE recording and not just having a nice zoom call.

What you’re striving for are consistent levels and quality of voice, and both can change drastically based on your own speech habits (talking loudly at the start of a sentence and trailing off into a whisper) or distance from mic. Practice and listen to your practice recordings.

Think Global, Act Local

Have everyone record their own mic locally. You will put each of these recordings into your editor and line them up. This will give you the ability to eliminate crosstalk (which you can’t do with everyone other than you on one track), get better, non-compressed sound quality (which you can’t do with a Skype or Zoom recording), compensate for noise and volume differences between other hosts (which is much harder to do with everyone else on one track), and can and should result in the best sounding voices for everyone.

Making everyone sound as good as possible is the editor’s goal. If you’re a host and also the editor, you get zero points for caring about the sound of your own voice and no one else’s.

There are lots of other considerations for clean sound, but this is a start, and I’ve already yammered on for almost 950 words now. So just one more thing:

Practice and Tweak

This does not mean I want you to be a tweaker, but I do want you to record and listen to the recordings. Have your co-hosts do the same, and give everyone’s test recordings to the editor to play with. Change your environment and/or recording settings as necessary. This takes practice, googling, and research if you’re not an audio engineer, but fortunately there is enough good quality affordable hardware and software that can create a nice sound that you don’t need to become an audio engineer either.

Next time I’ll talk about some specific software settings I use to try to get a decent recording. I know this post is very high-level and theoretical, but it’s really more of a nudge to think about these things and realize they need to be taken into consideration. Your listeners will thank you, but so will your inner producer. It’s your name on the product, so why not make it as pleasant to listen to as possible?

This probably sounds preachy, and I don’t claim to have the most amazing podcast production quality in the world. But I do TRY. The listeners can give me feedback if they think I’m failing at it, but if anyone says I don’t take it seriously, they are wildly incorrect. ↩

Astro 3 and Responsive Images

Mon, 18 Sep 2023 13:00:00 GMT

Astro 3 is here and you’re looking at a site published with it. I spent a few days last week converting this site and Friends with Brews from Astro 2.x to Astro 3, and there are some things I had to learn and decide to make it happen, and most of it has to do with responsive images.

You may recall my long saga of responsive image generation methods for this site and for Friends with Brews. Most of this journey has revolved around the fact that there are two kinds of optimized images on my sites:

Site related (logos, images for permanent site pages, etc),
Content related (images in blog posts or podcast episode show notes).

Site related images are easy. I can use whatever the image optimization scheme de jour that Astro uses because these are known, unchanging files and because I refer to them inside Astro components.

In the case of Astro 3, the astro:assets Image component is the official way to create optimized images inside Astro components.

This component is a lot less flexible and capable than the previous @astrojs/image component. There’s no Picture component, it doesn’t resize images from the original size, and as a result it’s easy to wind up with larger image sizes than you need and not have smaller physical sizes for responsive views like phone browsers. But it handles Astro SSR mode and prevents CLS (cumulative layout shift), which is really annoying to see.

I have relatively few site images on either this site or Friends with Brews – mostly site logos and pictures of the offenders (me on this site and Peter and me on Friends with Brews).

Using Image in an Astro component involves importing the images to be used and setting those imported images as the Image component src.

1
---
2
import { Icon } from "astro-icon/components";
3
import { Image } from "astro:assets";
4
import Base from "../layouts/Base.astro";
5
import site from "../data/site.json"
6

7
import av from "../assets/images/ScottLatest.jpg";
8

9
let title = "About Me - " + site.title;
10
let description = "About Scott Willsey";
11
---
12

13
<Base title={title} description={description}>
14
 <article>
15
 <h1>About Me</h1>
16
 <Image
17
  class="about-av"
18
  src={av}
19
  width={600}
20
  format={"webp"}
21
  alt="Scott Willsey"
22
  quality={85}
23
 />
24

25
  (etc, etc, etc)
26

27
</Base>

Content related images are images IN the content of the site itself, whether that be blog posts (this site) or podcast episode show notes (Friends with Brews). In my case, my content is in Markdown, so my image links are just standard Markdown image links. They are also hyperlinked to the original full-sized image.

1
The one really interesting setting is "Keep History For", which has options for 7 days, 30 days, 3 months, 6 months, 1 year, or unlimited. Unlimited comes with a warning that your hard drive will slowly be eaten alive and you should be ok with that.
2

3
[![Clipboard History retention length setting](../../assets/images/posts/ClipboardHistoryLengthSetting-E511BEDE-4432-49AB-A442-05069F910E41.png)](/images/posts/ClipboardHistoryLengthSetting-E511BEDE-4432-49AB-A442-05069F910E41.jpg)
4

5
The Clipboard History view itself is relatively simple. You can have pinned history items, and below those are your history items in reverse chronological order. The beauty of a clipboard history function is that you can copy several things in a row from a source and then worry about pasting them all later without losing any of them.

Get rid of all that hyperlink stuff and the Markdown for the image itself looks like this:

1
![Clipboard History retention length setting](../../assets/images/posts/ClipboardHistoryLengthSetting-E511BEDE-4432-49AB-A442-05069F910E41.png)

Tangent:

Yes, I put UUIDs in my image names so that I never have to worry about name collisions, however unlikely. I have this automated on my Mac with folder actions. I talked about folder actions in my post about Automatic Image Processing With AppleScript and Retrobatch, but basically the idea is you can set a script to run whenever a specific thing happens to a folder. I can dump a bunch of images into a specific folder and they get output into another folder with the original file name plus a UUID appended.

Anyway, the good news is that the astro:assets Image component handles images in Markdown for you by creating optimized versions in more efficient file types. Here you can see one specific png that it created a webp version for, and the difference in file size.

1
scott@Songoku:scottwillsey3.0 main ✗ 2d △ ➜ cd dist/_astro
2
scott@Songoku:_astro main ✗ 2d △ ➜ ll FolderActionsSetupMenu*
3
-rw-r--r--@ 1 scott  staff  527607 Sep 15 18:37 FolderActionsSetupMenu-86B4A871-966E-4A27-A2C5-3FC85E131D6C.4464166b.png
4
-rw-r--r--@ 1 scott  staff   60900 Sep 15 18:37 FolderActionsSetupMenu-86B4A871-966E-4A27-A2C5-3FC85E131D6C.4464166b_Q8a7k.webp
5
scott@Songoku:_astro main ✗ 2d △ ➜

One thing that isn’t different is the image dimensions:

This means I have to pay more attention to original image sizes that I’d prefer to. I’m hoping in the future this new Images component will gain some of the functionality back that it had before, but my guess is the real monkey in the wrench in doing some of those things is the SSR support.

Right now I have a Folder Action that resizes my images to a maximum width of 1770 pixels. I can use those for the blog post inline images and link to the original sized ones. That gives me a compromise between image size and responsiveness, taking into account the high-resolution nature of most modern screens. Images need to be 2x and in many cases 3x the size they’ll be shown at in order to look sharp.

At some point I’ll probably revisit this but no matter what I do, astro:assets Image currently will not generate image srcset HTML for me, so even if I generate multiple sizes for the same file format, only one of them is ever going to get used.

Markdown vs MDX

You may recall that when I originally converted the site from Eleventy to Astro, I used MDX for my content files instead of Markdown. MDX allows the use of components and would let me directly use the astro:assets Image component in my content for content images the same way I do in my Astro components for site images.

Astro 3 will let you use the astro:assets Image component directly in MDX. This gives you more control over the HTML that’s generated for your image, but it also comes with extra complexity in terms of the writing process.

I decided a long time ago that I don’t want to go down that path any longer because when I’m writing, I don’t want to mix implementation details with content. I don’t write my blog posts in a code editor, and when I’m writing, I don’t want to have to remember how I have everything set up, and I don’t want to have to import components and images into a content file. I just want to use Markdown links.

Image Component vs Astro Remark Eleventy Image

The last Astro 2.x version of this site used Astro Remark Eleventy Image to generate responsive images for images inside markdown content. It worked well, it’s very flexible, and it had several upsides. The downsides are no support for SSR, if you need that, and it results in a slower build process because it doesn’t cache previously rendered images. Because of this latter fact, I decided to move entirely to the astro:assets Image component.

I was also worried about Astro’s Image component trying to process images in my Markdown files and fighting Astro Remark Eleventy Image, but I haven’t tested to see if this will happen. I may make a branch and link to my public images folder for images in Markdown and see if that avoids a collision between the components. If so, I may wind up using Astro Remark Eleventy Image again to get more responsive images with better file size/quality compromises.

Conclusion

Even when I’m done, I’m never done. That’s the real takeaway here. As with anything, careful consideration of how you use images and what the compromises are between different solutions is required with Astro 3 (and every version of every web framework, honestly). I’m sure there will be much more on the topic of image optimization from me in the future, given my history with it so far.

Raycast Clipboard History

Fri, 15 Sep 2023 09:00:00 GMT

One of Raycast’s core features is Clipboard History. Clipboard History is exactly what it sounds like – a basic clipboard manager that lets you access your clipboard history.

Clipboard History has several settings. As always, to get to Raycast settings, launch Raycast with your keyboard shortcut (⌥+Space in my case), then hit ⌘+, (the standard macOS application preferences keyboard shortcut) to open Raycast Settings.

There’s probably not too much you’ll want to change. You’ll probably want Clipboard History to paste to the active app instead of back to the clipboard, and you’ll probably want fast text recognition for text in photos. The one really interesting setting is “Keep History For”, which has options for 7 days, 30 days, 3 months, 6 months, 1 year, or unlimited. Unlimited comes with a warning that your hard drive will slowly be eaten alive and you should be ok with that.

The Clipboard History view itself is relatively simple. You can have pinned history items, and below those are your history items in reverse chronological order. The beauty of a clipboard history function is that you can copy several things in a row from a source and then worry about pasting them all later without losing any of them. As you can see, clipboard history includes files and images. Any clipboard items show what app they were copied from, what the content type is, and then details such as word count or image dimensions.

Whatever app is active when you trigger Raycast and Clipboard History will be the app you can paste your selected item into by hitting Return. If you have your cursor in a Safari URL bar at the time, it’ll paste it there, assuming it’s text. If you’re typing in Drafts, like I am right now, it’ll paste the item into Drafts. In each case, the paste will only happen if the selected item is a content type that’s contextually possible – you can’t paste images into Safari URL bars or even into Drafts (it’s a markdown text editor), but you CAN paste an image or other file into a Finder window or an image into a text editor that takes images.

Clipboard History isn’t something you can get people hyped up about at parties, but it is super useful and it’s nice having an easy to use and straightforward implementation of a clipboard manager right in Raycast. You wouldn’t get Raycast just for Clipboard History because there are tons of other Mac clipboard managers, but if you do use it already, the simplicity and well thought out design make Clipboard History indispensable.

As always with everything in Raycast, you can assign a Hotkey (keyboard shortcut) or alias (open Raycast and type the alias) to Clipboard History. I have an alias of ch assigned so I can just pop open Raycast, type ch and hit enter and be in Clipboard History.

You can read more about Raycast Clipboard History in the Raycast manual section on Raycast Core.

Raycasting

Fri, 25 Aug 2023 17:00:00 GMT

If you’ve listened to recent Friends with Brews episodes, you probably know that I’ve gotten into Raycast in a big way. Raycast falls in the category of “App Launcher”, but I really dislike that title as it sells short what most of the good app launcher category apps do. For me, Raycast is a system utility that verges into automation territory.

I intended to write one blog post about all the features I use in Raycast. About the time I’d gotten to the 1600 word mark on my draft, I had a conversation with my friend Peter about some Raycast articles he’d read. Specifically, Peter didn’t like the fact that they all mentioned some commands you could use and showed some screen shots, but never went into depth about how they worked or why you’d want to use those features to begin with. At that point I saw my single gigantic post fracture into a million tiny pieces, and I knew it was going to be a series on Raycast. It’s the only way to provide meaningful information on how to use it rather than just flinging a bunch of bullet points at the page.

Raycast has a lot of features and requires some digging into to find what works and how it works. The versatility in terms of how to find and use commands is important to grasp because the right setup can make the difference between adding new workflows to your Mac use that make you efficient and happy, and forgetting those features are there at all and wondering why people think Raycast is even useful. It’s no different than any other multipurpose tool in that regard.

What IS Raycast?

What does Raycast say Raycast is?

One way to find out what an app is is to ask the developer of the app what it is. Raycast (the company) has this to say about Raycast (the product):

Raycast is a blazingly fast, totally extendable launcher. It lets you complete tasks, calculate, share common links, and much more.

That’s great, and it’s true, but it’s also not enough information to help someone who truly doesn’t know anything about the horrendously named app launcher category understand why they’d want to use it. I understand they need a concise statement of purpose, and truthfully I doubt I could do any better myself. That’s why this first blog post in my series on Raycast is just bit longer than that.

What does ChatGPT say Raycast is?

I decided to ask ChatGPT, via Raycast, what ChatGPT thinks Raycast is. ChatGPT’s reply?

Raycast is an AI-powered software productivity tool that provides a unified interface for accessing and executing various tasks, applications, and information within a computer’s operating system. It allows users to quickly search for files, launch applications, perform calculations, access web services, and more, using a text-based command bar. Raycast aims to streamline workflows and improve productivity by simplifying task execution and information retrieval within the computer environment.

Ok. Again, all technically true, and it’s definitely “within the computer environment”, which is good to know if you’re worried about Raycast trying to take over your house or steal your car.

What does Scott say Raycast is?

Raycast is a Mac power-user utility for making your workflows faster, more powerful, and more centralized and maintainable.

That’s basically my way of saying if you really want to know what Raycast is, you’ll have to read this series. 🙂 But let’s cover some basics and key features of Raycast that will help as I slowly roll out blog posts emphasizing a specific command or extension in detail over the course of this probably infinite Raycast series.

Some Basics

Raycast is categorized as an app launcher. To that end, it’s basically a search bar that appears on screen when triggered by some key combination. Personally, I use Opt-Space, although I could map it to Cmd-Space and completely replace Spotlight’s keyboard shortcut.

Search and Selection

Once the search bar appears, you start typing things, varying depending on your goal. If you want to launch an app like the horrible category name suggests, you start typing the name of the app and Raycast comes up with options for you to choose from.

To make selection fast and easy, Raycast lets you use Cmd+number keyboard combinations to make a choice. Hold Cmd for a second and you’ll see what number key to hit to select a particular option. They’re numbered from top to bottom as could be expected, so the Cmd+number choice for a given app is just its order in the list.

This same Cmd+number selection technique works for anything you search for in Raycast, so anytime a list is on screen, you can use this to quickly make your choice from the list of applicable items.

Hotkeys and Aliases

Anything you can do in Raycast you can assign to a HotKey or an Alias. A HotKey is a keyboard shortcut.

HotKeys let you perform a command without having to open Raycast first. This works especially well for its window management commands, but is useful for a lot of things.

Aliases require you to open Raycast, but then you just quickly type the alias and you have that command selected and ready to execute without having to search for it and choose it from the list.

Here’s an example of a bunch of the Window Management commands with HotKeys assigned, followed by one of some Safari commands with Aliases.

These are some of the very basics of Raycast that will come in handy as I show some examples of my Raycast workflows in future articles.

To Be Continued

I already have some posts on other topics that could be linked as different series on my site but I currently have no way of grouping them and surfacing them to the user as a series. Adding that functionality to the site will be step 1 in the Raycast series, even before firing up Drafts and typing additional words about the app itself. It should be easy enough, and I can even write about how I did it. Bonus!

Once that’s done, Raycast deep-dives will be forthcoming.

Get Rid of Theme Flicker

Fri, 11 Aug 2023 17:00:00 GMT

As I wrote yesterday, I celebrated John Siracusa’s every-five-year Hypercritical t-shirt sale with a new Hypercritical Gold Theme for this site. As with my previous dark/light mode configuration, toggling themes is done with a little icon button at the bottom of the menu that can look like a sun (when in light mode), a moon (when in dark mode), and now a 128k Mac (when in Hypercritical Gold mode).

Theme toggling can cause flickering issues when pages load. The symptom is that when you click a link to go to another page on the site, you see a flash of the wrong colors and then the page quickly switches to your chosen theme colors. This is because when the default colors load first, and then the browser realizes you’ve set the theme to something else and loads the correct colors. I had this issue myself, but I didn’t really notice it when I just had light/dark modes, probably because I was almost always in dark mode. I did notice it right away when I added Hypercritical Gold.

I found two articles addressing this issue, one of which was even written from an Astro perspective.

Prevent dark mode from flickering on page load in Astrojs

1
<head>
2
  <script is:inline>
3
    // The configured mode is stored in local storage
4
    const isDarkMode = localStorage.getItem("darkMode");
5

6
    // Set theme to 'dark' if darkMode = 'true'
7
    const theme = isDarkMode === "true" ? "dark" : "";
8

9
    // Put dark class on html tag to enable dark mode
10
    document.querySelector("html").className = theme;
11
  </script>
12
  ...
13
</head>

Light/dark mode: avoid flickering on reload - DEV Community

1
<body>
2
  <script>
3
    const theme = localStorage.getItem("theme") || "light";
4
    document.documentElement.dataset.theme = theme;
5
  </script>
6

7
  <!-- rest of your html -->
8
</body>

They both basically use exactly the same technique – early on in the page, either in the <head> section or early in the <body> section, have an inline JavaScript that checks your preferred theme setting by seeing what your localStorage setting for your theme choice is.

As it happens, I was already doing this. But I was doing it in my menu component, which in turn is called by my Base.astro base layout. Also my script was declared as <script> instead of <script is:inline>, which in Astro means it was getting bundled by Vite instead of loading directly inline where it was declared. The result of these two factors meant the timing of the script checking the visitor’s theme preference was off, and theme flicker was the result.

My first attempt at getting rid of theme flicker was changing the script to use the is:inline directive, but this caused a problem. Now the script couldn’t find the elements it referred to by ID, namely the theme toggle icons. My assumption is this is because Astro was modifying the element names as part of how it bundled up and rendered the component, but with the JavaScript now being unmodified and unprocessed by Astro, it no longer knew what those were now called.

Because of this, I decided to nuke the menu component and move everything in it into Base.astro. I moved it as is, with the JavaScript above the html for the menu elements, and the script using the is:inline directive. Now I had a new variation of the JavaScript can’t find html elements issue. For fun, I tried moving the JavaScript down below the menu html, hoping it was still high enough in the page to load the theme quick enough to avoid theme flicker. It seems to have worked – I don’t see theme flicker now while using Hypercritical Gold or Light themes. These are the two themes that would show flicker, because Dark theme is the default.

To recap, I no longer have a Menu.astro component. My menu is now in my Base.astro template. The highlighted part is the JavaScript dealing with loading the correct theme based on the user’s preference, and changing themes when the toggle icon is clicked or tapped.

1
---
2
import { Icon } from "astro-icon/components";
3
import config from "config";
4
import Header from "../components/Header.astro";
5
import Footer from "../components/Footer.astro";
6
import "../styles/sw2.css";
7

8
export interface Props {
9
  title: string;
10
  description: string;
11
  url: string;
12
}
13

14
const { title, description } = Astro.props;
15
---
16

17
<html lang="en" data-theme="dark">
18
  <head>
19
    <meta charset="utf-8" />
20
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
21
    <title>{title}</title>
22
    <meta name="title" content={title} />
23
    <meta name="description" content={description} />
24
    <meta name="view-transition" content="same-origin" />
25
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
26
    <link
27
      rel="preload"
28
      href="/fonts/BlinkMacSystemFont-Medium.woff2"
29
      as="font"
30
      type="font/woff2"
31
      crossorigin
32
    />
33
  </head>
34
  <body>
35
    <div id="wrapper-grid">
36
      <aside>
37
        <nav id="main-nav">
38
          <div class="menu">
39
            <a href="/">
40
              <div class="menu-item">
41
                <div class="menu-icon"><Icon name="ri:home-7-fill" /></div>
42
                <div class="menu-text">HOME</div>
43
              </div>
44
            </a>
45
            <a href="/1">
46
              <div class="menu-item">
47
                <div class="menu-icon">
48
                  <Icon name="ep:copy-document" />
49
                </div>
50
                <div class="menu-text">POSTS</div>
51
              </div>
52
            </a>
53
            <a href="/about">
54
              <div class="menu-item">
55
                <div class="menu-icon">
56
                  <Icon name="fluent:info-28-filled" />
57
                </div>
58
                <div class="menu-text">ABOUT</div>
59
              </div>
60
            </a>
61
            <a href="/search">
62
              <div class="menu-item">
63
                <div class="menu-icon"><Icon name="bi:search" /></div>
64
                <div class="menu-text">SEARCH</div>
65
              </div>
66
            </a>
67
            <a href={config.social.threads}>
68
              <div class="menu-item">
69
                <div class="menu-icon"><Icon name="noto:sewing-needle" /></div>
70
                <div class="menu-text">THREADS</div>
71
              </div>
72
            </a>
73
            <a href={config.social.mastodon}>
74
              <div class="menu-item">
75
                <div class="menu-icon">
76
                  <Icon name="simple-icons:mastodon" />
77
                </div>
78
                <div class="menu-text">MASTO</div>
79
              </div>
80
            </a>
81
            <a href={config.social.github}>
82
              <div class="menu-item">
83
                <div class="menu-icon"><Icon name="simple-icons:github" /></div>
84
                <div class="menu-text">GITHUB</div>
85
              </div>
86
            </a>
87
            <a href="/rss.xml">
88
              <div class="menu-item">
89
                <div class="menu-icon"><Icon name="ion:logo-rss" /></div>
90
                <div class="menu-text">RSS</div>
91
              </div>
92
            </a>
93
            <div class="theme">
94
              <button id="theme-toggle" aria-label="Switch to dark theme">
95
                <Icon id="sun-icon" name="octicon:sun-24" />
96
                <Icon id="moon-icon" name="octicon:moon-24" />
97
                <svg
98
                  id="hypercritical-icon"
99
                  width="24"
100
                  height="24"
101
                  viewBox="0 0 48 64"
102
                  fill="currentColor"
103
                  xmlns="http://www.w3.org/2000/svg"
104
                >
105
                  <path
106
                    fill-rule="evenodd"
107
                    clip-rule="evenodd"
108
                    d="M44 2H4V0H44.5V2H46V4H44V2ZM46 54V4H48V54H46ZM2 54L46 54V64H2L2 54ZM2 4L2 54H2.14577e-06L0 4H2ZM2 4H4V2H2V4ZM40 8H8V6H40V8ZM40 34V8H42V34H40ZM8 34H40V36H8V34ZM8 34H6V8H8V34ZM15 18V14H17V18H15ZM23 23V14H25V25H21V23H23ZM29 18V14H31V18H29ZM17 29V27H19V29H17ZM27 29V31H19V29H27ZM27 29H29V27H27V29ZM40 46H28V44H40V46ZM10 46V48H6V46H10ZM4 56V62H44V56H4Z"
109
                  ></path>
110
                </svg>
111
              </button>
112
            </div>
113
            <script is:inline>
114
              const themeToggle = document.getElementById("theme-toggle");
115
              let currentTheme = localStorage.getItem("theme");
116
              switch (currentTheme) {
117
                case "light":
118
                  enableLightTheme();
119
                  break;
120
                case "hypercritical":
121
                  enableHypercriticalTheme();
122
                  break;
123
                case "dark":
124
                  enableDarkTheme();
125
                  break;
126
                default:
127
                  enableDarkTheme();
128
                  break;
129
              }
130

131
              themeToggle.addEventListener("click", () => {
132
                if (document.documentElement.hasAttribute("data-theme")) {
133
                  currentTheme =
134
                    document.documentElement.getAttribute("data-theme");
135
                }
136
                toggleTheme(currentTheme);
137
              });
138

139
              function enableDarkTheme() {
140
                document.documentElement.setAttribute("data-theme", "dark");
141
                localStorage.setItem("theme", "dark");
142
                document.getElementById("sun-icon").style.display = "none";
143
                document.getElementById("moon-icon").style.display = "inline";
144
                document.getElementById("hypercritical-icon").style.display =
145
                  "none";
146
              }
147

148
              function enableLightTheme() {
149
                document.documentElement.setAttribute("data-theme", "light");
150
                localStorage.setItem("theme", "light");
151
                document.getElementById("moon-icon").style.display = "none";
152
                document.getElementById("sun-icon").style.display = "inline";
153
                document.getElementById("hypercritical-icon").style.display =
154
                  "none";
155
              }
156

157
              function enableHypercriticalTheme() {
158
                document.documentElement.setAttribute(
159
                  "data-theme",
160
                  "hypercritical",
161
                );
162
                localStorage.setItem("theme", "hypercritical");
163
                document.getElementById("moon-icon").style.display = "none";
164
                document.getElementById("sun-icon").style.display = "none";
165
                document.getElementById("hypercritical-icon").style.display =
166
                  "inline";
167
              }
168

169
              function toggleTheme(currentTheme) {
170
                if (currentTheme) {
171
                  switch (currentTheme) {
172
                    case "light":
173
                      enableDarkTheme();
174
                      break;
175
                    case "hypercritical":
176
                      enableLightTheme();
177
                      break;
178
                    case "dark":
179
                      enableHypercriticalTheme();
180
                      break;
181
                    default:
182
                      enableDarkTheme();
183
                      break;
184
                  }
185
                } else {
186
                  enableDarkTheme();
187
                }
188
              }
189
            </script>
190
          </div>
191
        </nav>
192
      </aside>
193
      <main>
194
        <Header />
195
        <slot />
196
        <Footer />
197
      </main>
198
    </div>
199
    <script is:inline src="/scripts/barefoot.min.js"></script>
200
    <script is:inline>
201
      lf = new BareFoot();
202
      lf.init();
203
    </script>
204
  </body>
205
</html>
206
<style>
207
  nav {
208
    margin-top: 14rem;
209
    padding: 2rem;
210
    background-color: var(--surface-menu);
211
    border-radius: 10px;
212
    position: sticky;
213
    top: 3rem;
214
  }
215
  nav div.menu {
216
    justify-self: center;
217
    display: grid;
218
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
219
    row-gap: 1rem;
220
    justify-items: start;
221
    width: fit-content;
222
    padding: 0;
223
  }
224

225
  nav div.menu a {
226
    color: var(--accent1);
227
    text-decoration: none;
228
  }
229

230
  nav div.menu a:hover {
231
    text-decoration: underline;
232
  }
233

234
  .menu-item {
235
    display: flex;
236
    flex-direction: row;
237
    column-gap: 0.5rem;
238
    justify-content: flex-start;
239
    align-items: center;
240
    color: var(--accent1);
241
    font-size: 0.75rem;
242
    margin: 0;
243
    padding: 0;
244
  }
245

246
  .menu-item [data-icon] {
247
    width: 1.5rem;
248
  }
249

250
  .theme {
251
    justify-self: center;
252
  }
253

254
  #theme-toggle {
255
    cursor: pointer;
256
    background: 0;
257
    border: 0;
258
    border-radius: 50%;
259
  }
260

261
  .theme [data-icon] {
262
    width: 1.25rem;
263
    color: var(--accent1);
264
  }
265

266
  .theme [data-icon]:hover,
267
  .theme [data-icon]:focus {
268
    color: var(--brand);
269
  }
270

271
  .theme #hypercritical-icon {
272
    width: 1.25rem;
273
    height: 1.25rem;
274
    fill: var(--accent1);
275
  }
276

277
  .theme #hypercritical-icon:hover,
278
  .theme #hypercritical-icon:focus {
279
    fill: var(--brand);
280
  }
281

282
  .theme [data-icon="octicon:sun-24"],
283
  .theme svg {
284
    display: none;
285
  }
286

287
  @media only screen and (max-width: 899px) {
288
    nav {
289
      margin-top: 2rem;
290
    }
291
    .menu-item {
292
      column-gap: 1rem;
293
      font-size: 1.25rem;
294
    }
295
    .menu-item [data-icon] {
296
      width: 1.5rem;
297
    }
298
    .theme [data-icon] {
299
      width: 1rem;
300
    }
301
  }
302
</style>

The moral of the story is, grab the user theme preference and set the theme early in the page load lifecycle. With Astro, that means understanding how Astro is optimizing your layouts, components, CSS, and scripts.

In my case, because the JavaScript is loaded above the part of the base template that loads the page content, it seems to work timing-wise to load the theme quickly enough to avoid theme flicker.

Hypercritical GOLD Theme

Thu, 10 Aug 2023 17:00:00 GMT

Edit:

I called this Hypercritical Yellow. John scolded me. And I deserved it.

As my friend Tiff says, “This response is classic Siracusa. Priceless.”

Original post, edited to say gold instead of yellow:

In honor of John Siracusa’s soon-ending every-five-year run of Hypercritical t-shirts, I’ve added a third theme to my site besides the usual light and dark themes: Hypercritical Gold.

This is the t-shirt:

This is my website:

You can toggle the themes on the site menu. There’s a little icon under all the menu items that appears as a moon (if you are in dark theme), a sun (if you’re in light theme), or a little 128k Mac (if you’re in hypercritical theme). Clicking that icon toggles through the themes from dark to hypercritical to light.

Enjoy!

Expressive Code Blocks in Astro

Wed, 09 Aug 2023 08:09:00 GMT

You’ve seen a lot of code blocks on this site in various posts of mine, primarily because I’m not ashamed to show what a bad programmer I am or how excited I am that I learned something that’s probably rudimentary to many people. And while I like how the native Astro support for the Shiki syntax highlighter works, I really like how code blocks look in Astro’s documentation pages even more. It looks like this:

I like the way they do this because it supports various languages and syntaxes, it allows for a frame with the name of the file being shown if applicable, and in general, it just looks really good.

I posted in the Astro Discord Starlight channel to ask how they tweaked Shiki to make it look like this, because I couldn’t tell from the Starlight source. I was looking for rehype markdown plugins or something. Chris Swithinbank, who’s a huge Astro docs contributor and also contributor of code for the Astro docs application itself, replied to let me know that what they’re doing for code blocks in the Astro docs is even simpler than that – it’s called Expressive Code.

Expressive Code is really all about code blocks, or syntax highlighting. And it just so happens most or all of the contributors are Astro contributors (including Chris!). This is great news because one of the packages available in Expressive Code is astro-expressive-code, which is an Astro specific Expressive Code integration. It’s so easy that all you have to do is install that one package in your Astro site and you’re in business.

I installed it using the Astro CLI as recommended in the astro-expressive-code README with the command npx astro add astro-expressive-code (since I’m using npm). After that, I did absolutely nothing except edit all my posts with code blocks to add titles to any code blocks that I wanted to list file names for. Now my code blocks look like this:

Right now I’m just using the default Shiki GitHub theme. I haven’t customized the look at all. While they do look fine as is, I will customize the look more when I have time.

If you use Astro and you ever write about code, you should definitely check out Expressive Code and its astro-expressive-code package.

Some Tags

Tue, 08 Aug 2023 08:10:00 GMT

One of my site to-do items for a while now has been doing something with the keywords I add to each post’s front matter. Content in Astro can be different variations of Markdown, and front matter is a YAML section with metadata about the content, such as title, description, publish date, or really whatever you want to put in there. One of the things I add there is a YAML array of keywords which are really just tags. I called them keywords, they could have been called categories, tags, topics, whatever.

Here’s the YAML front matter for my last post, which was about podcasting software:

1
---
2
title: "My Podcasting Setup - Recording Software"
3
description: Part 2 of a series on podcasting setups and workflows. This is the software I use for recording podcasts.
4
date: "2023-08-04T09:00:00-08:00"
5
keywords: ["mac", "apps", "podcast"]
6
slug: "podcasting-recording-software"
7
---

I thought it might be nice to add the ability to view posts associated with specific tags, to add a post-filtering option in addition to the site search. That way people could see everything I associated with “mac” or “podcast”, for example. I decided to show a subset of tags on my home page and have a tags index page that listed all of them. The tags in those tag lists would link to the specific tag’s page, with a list of posts using that tag.

Thanks to others who are a lot smarter than me who’ve already done this very thing with Astro, finding excellent examples to borrow and steal from didn’t take long at all.

I did a search for “astro tags” and found that the Astro documentation site has a tutorial that covers building a tag index page as well as individual tag pages, but I wanted some better examples of pulling the tags from the posts and sorting and filtering them rather than the array of tag objects used in the documentation examples.

One of my search results was a post from Sarah Rainsberger called Creating individual tag pages in Astro via dynamic routes. I know who Sarah is – she’s the lead-documentation-guru-in-chief for the Astro documentation, and she’s an amazing organizer, explainer, and community builder.

Sarah’s post does a great job of explaining static vs. dynamic routing, and the astro getStaticPaths() function that’s used to generate dynamic routes. First, though, she builds her src/pages/tags/index.astro page which serves as her tags list page (which you can see in action here).

I have a slightly different approach in that I use Astro Content Collections, which were introduced after Sarah’s blog post, rather than Astro.fetchContent(), which she uses, which was in turn deprecated in favor of Astro.glob() in Astro 2.0. For now, just think of Content Collections as another way of grabbing all associated documents, such as posts. You can still use Astro.glob(). Content Collections have a few benefits that glob doesn’t, but require a little extra setup.

In any event, I wound up with this for a tags index page:

1
---
2
import { Icon } from "astro-icon/components";
3
import config from "config";
4
import Base from "../../layouts/Base.astro";
5
import TagCloud from "../../components/TagCloud.astro";
6

7
let title = "Tags - " + config.get("title");
8
let description = "Tags used in posts on " + config.get("title") + ".";
9
---
10

11
<Base title={title} description={description}>
12
  <article data-pagefind-ignore>
13
    <span id="tag-cloud">
14
      <h1><Icon name="mdi:tag-multiple" /><a href="/tags">Tags</a></h1>
15
      <div class="cloud">
16
        <TagCloud showCount="true" displayNumber="999" />
17
      </div>
18
    </span>
19
  </article>
20
</Base>
21

22
<style>
23
  div.cloud {
24
    margin: 3em 1em;
25
  }
26
  span#tag-cloud [data-icon="mdi:tag-multiple"] {
27
    width: 1.5em;
28
    margin: 0 0.3em -0.5em 0;
29
  }
30
</style>

Well, that’s not very exciting. I don’t do any of the cool post grabbing stuff that Sarah does here. That’s because I put all that work into an Astro component I call TagCloud. You can see that I use my TagCloud component there in my tags index page. I did this because I also wanted to show a subset of my tag cloud on my home page and on my search page. Creating an Astro component to actually display the tag cloud makes all that logic and display markup reusable.

Also note that I pass two params to my TagCloud component – showCount="true" and displayNumber="999". I’ll explain those pretty soon.

HERE is where the magic happens, in TagCloud.astro itself:

1
---
2
import { getCollection } from "astro:content";
3
import { Icon } from "astro-icon/components";
4
import { slugify } from "./utilities/StringFormat.js";
5

6
const allPosts = await getCollection("posts");
7
const allTags = allPosts.map((tag) => tag.data.keywords).flat();
8
const processedTags = allTags.reduce((acc, tag) => {
9
  const value = acc[tag] || 0;
10
  const pTags = {
11
    ...acc,
12
    [tag]: value + 1,
13
  };
14

15
  const sortedTags = Object.fromEntries(
16
    Object.entries(pTags).sort((a, b) => b[1] - a[1]),
17
  );
18

19
  return sortedTags;
20
}, {});
21

22
const { showCount, displayNumber } = Astro.props;
23
---
24

25
<span class="categories">
26
  {
27
    Object.entries(processedTags)
28
      .map(([key, val]) => (
29
        <a class="badge" href={`/tags/${slugify(key)}/`}>
30
          {key} {showCount && `(${val})`}
31
        </a>
32
      ))
33
      .slice(0, displayNumber)
34
  }
35
  {
36
    displayNumber < 999 ? (
37
      <a href="/tags/">
38
        All Tags ... <Icon name="ph:arrow-circle-right-bold" />
39
      </a>
40
    ) : null
41
  }
42
</span>
43
<style>
44
  span.categories {
45
    display: flex;
46
    justify-content: center;
47
    flex-wrap: wrap;
48
    gap: 0.4rem;
49
  }
50
  span.categories a {
51
    background-color: var(--surface-menu);
52
    color: var(--color-gray-800);
53
    padding: 0.25rem 0.5rem;
54
    border-radius: 0.25rem;
55
    border: 1px solid var(--brand);
56
    font-size: 1rem;
57
    text-transform: uppercase;
58
    text-decoration: none;
59
  }
60
  span.categories a:hover {
61
    background-color: var(--brand);
62
    color: #fff;
63
  }
64
  [data-icon] {
65
    width: 1.5rem;
66
    margin-bottom: -0.3rem;
67
  }
68

69
  @media screen and (max-width: 500px) {
70
    span.categories a {
71
      font-size: 0.75rem;
72
    }
73
    [data-icon] {
74
      width: 1rem;
75
      margin-bottom: -0.2rem;
76
    }
77
  }
78
</style>

Ok, that’s kind of a big chunk of code, but a lot of it is html and styling. But there are a few important parts, namely all that JavaScript in the front matter regarding allPosts, allTags, processedTags, and sortedTags.

Basically what this does is get my posts Content Collection, get the keywords arrays from the front matter, and then create a JavaScript object of key value pairs with each tag I’ve ever used as a key, and how many times I’ve used it as its value.

If you console.log(sortedTags), it looks like this:

1
{ astro: 19, blog: 17, mac: 13, images: 11, podcast: 10, apps: 10, responsive: 9, programming: 8, rss: 7, automation: 6, javascript: 6, applescript: 4, fwb: 4, chatgpt: 4, friendswithbrews: 3, eleventy: 3, hugo: 2, design: 2, search: 2, bookmarks: 2, safari: 2, pagefind: 1, menu: 1, pagination: 1, friendswithbeer: 1, git: 1, css: 1, mastodon: 1, hardware: 1, writing: 1, regex: 1, audio: 1, transcription: 1 }

You may be wondering why Sarah’s tags index page creates its array of tags very simply with this:

1
const tags = [
2
  ...new Set(
3
    [].concat.apply(
4
      [],
5
      allPosts.map((post) => post.tags),
6
    ),
7
  ),
8
];

And why I’m making it super complex with this:

1
const allPosts = await getCollection("posts");
2
const allTags = allPosts.map((tag) => tag.data.keywords).flat();
3
const processedTags = allTags.reduce((acc, tag) => {
4
  const value = acc[tag] || 0;
5
  const pTags = {
6
    ...acc,
7
    [tag]: value + 1,
8
  };
9

10
  const sortedTags = Object.fromEntries(
11
    Object.entries(pTags).sort((a, b) => b[1] - a[1]),
12
  );
13

14
  return sortedTags;
15
}, {});

The reason is that I’m keeping count of how many times each tag is used and I’m displaying that in my tag cloud, as shown below.

That’s the only reason why instead of just sticking with a simple array of tags, I am creating a JavaScript Object of key value pairs, with the tag name being the key and the number of times its used being the value.

I am not clever enough nor good enough with JavaScript to have written that function. All of that JavaScript in that code block above is the work of Chris Pennington, who has a really great YouTube channel called Coding in Public. One of his videos is titled Astro Blog Course #12 - Tag cloud, and it’s about exactly what you think it’s about.

My whole TagCloud.astro component aside from styling comes straight from his CategoryCloud.astro component, with one minor change.

My minor change is the addition of a prop called displayNumber. If I give it something real, like 11, it will display 11 tags plus a “All tags… ” link to the tags index page. If I give it 999, it shows all tags. On my tags index page, I call TagCloud.astro with displayNumber="999", while on my site home page and my site search page, I call TagCloud.astro with displayNumber="11". The result is that my tags index page looks like the picture immediately above, while my home page and search page tag clouds look like the following two images.

Individual Tag Pages

The tag pages for individual tags are where dynamic routing comes in. While the tags index page is at src/pages/tags/index.astro, the fact that the individual tag page are dynamically created is evident by the Astro page name: src/pages/tags/[tag].astro. The brackets around the name indicate a dynamic route page, one that generates an actual page for each item in an array of objects. In our case, our objects are tags.

As the Astro documentation on dynamic routes says,

Because all routes must be determined at build time, a dynamic route must export a getStaticPaths() that returns an array of objects with a params property. Each of these objects will generate a corresponding route.

My tag.astro page looks just like Sarah’s as far as my getStaticPaths() function, because hers is perfect. Like I said, people much smarter than me have already solved this problem and documented it for others. I’m glad too, because JavaScript isn’t really something I spend hours improving my skills at. I tend to learn enough to do what I need to and then move on. Unfortunately this means that correctly expressing things in JavaScript like mapping and filtering is sometimes a struggle for me.

Here’s [tag].astro. It’s another long code block but here’s the full code dump anyway.

1
---
2
import { Icon } from "astro-icon/components";
3
import { getCollection } from "astro:content";
4
import config from "config";
5
import Base from "../../layouts/Base.astro";
6
import path from "path";
7
import { postdate } from "../../components/utilities/DateFormat.js";
8
import { titleCase } from "../../components/utilities/StringFormat.js";
9

10
export async function getStaticPaths({}) {
11
  const allPosts = await getCollection("posts");
12
  const sortedPosts = allPosts.sort(
13
    (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
14
  );
15
  const allTags = new Set();
16
  sortedPosts.map((post) => {
17
    post.data.keywords && post.data.keywords.map((tag) => allTags.add(tag));
18
  });
19

20
  return Array.from(allTags).map((tag) => {
21
    const filteredPosts = sortedPosts.filter((post) =>
22
      post.data.keywords.includes(tag),
23
    );
24

25
    return {
26
      params: { tag },
27
      props: {
28
        posts: filteredPosts,
29
      },
30
    };
31
  });
32
}
33

34
const { posts } = Astro.props;
35
const { tag } = Astro.params;
36

37
let title = tag;
38
let description = "Posts with tag " + tag + ".";
39
---
40

41
<Base title={title} description={description}>
42
  <article data-pagefind-ignore>
43
    <h1>
44
      <Icon name="mdi:tag" /><a
45
        href={new URL(path.join("/tags", tag), config.get("url"))}>{title}</a
46
      >
47
    </h1>
48
    <section class="blog-post-list" aria-label="Blog post list">
49
      {
50
        posts.map((post) => (
51
          <header>
52
            <h4>
53
              <a
54
                href={
55
                  new URL(
56
                    path.join(config.get("posts.path"), post.slug),
57
                    config.get("url"),
58
                  )
59
                }
60
              >
61
                {titleCase(post.data.title)}
62
              </a>
63
            </h4>
64
            <div class="cal">
65
              <Icon name="bi:calendar2-week-fill" />
66
              <time datetime={post.data.date}>
67
                <a
68
                  href={
69
                    new URL(
70
                      path.join(config.get("posts.path"), post.slug),
71
                      config.get("url"),
72
                    )
73
                  }
74
                >
75
                  {postdate(post.data.date)}
76
                </a>
77
              </time>
78
            </div>
79
            <div class="description">{post.data.description}</div>
80
          </header>
81
        ))
82
      }
83
      <p class="posts-link">
84
        <a href="/tags"><Icon name="mdi:tag-plus" /> Browse all tags</a>
85
      </p>
86
    </section>
87
  </article>
88
</Base>
89
<style>
90
  header {
91
    background-color: var(--surface-menu);
92
    border-radius: 0.5rem;
93
    padding: 0.5rem 2rem;
94
    margin: 1rem 0;
95
  }
96
  h4 {
97
    margin: 0.3em 0;
98
  }
99
  div.cal,
100
  div.cal a {
101
    font-weight: bold;
102
    font-size: 0.75em;
103
    color: var(--accent1);
104
  }
105
  div.description {
106
    font-size: 0.75em;
107
    margin: 0.3em 0;
108
  }
109
  p.posts-link {
110
    margin: 1.5em;
111
  }
112
  [data-icon="mdi:tag"] {
113
    width: 1em;
114
    margin: 0 0.5em -0.25em 0;
115
  }
116
  [data-icon="bi:calendar2-week-fill"] {
117
    width: 0.75em;
118
  }
119
  [data-icon="mdi:tag-plus"] {
120
    width: 0.75em;
121
  }
122
</style>

All of that in [tag].astro equates to the following individual tag view.

I don’t know if you’re tired of tags yet, but I’m getting there. I do like how this turned out though. I think it looks pretty good considering my horrific lack of design skills, and I like how I can implement the partial cloud on the home page and the search page, and the full tag cloud on the tags index page, all from the same TagCloud.astro component.

404, Scott Not Found

Oh, I also added the tag cloud along with a search field on my 404 page too.

And now I’m going to sleep, because it’s after 2 AM and I really need to be 404 myself right now.

My Podcasting Setup - Recording Software

Fri, 04 Aug 2023 17:00:00 GMT

I’ve talked about the hardware I use for podcasting, but what about the other tools of the trade? Obviously the first step to creating a podcast is to record one, and in my case, that’s all about software.

The Company You Keep

If there’s one name podcasters who use Macs tend to be very familiar with, it’s Rogue Amoeba. I don’t know if Rogue Amoeba set out to be the go-to people for podcasting on the Mac, but they’ve certainly achieved it. For me, all of their software is indispensable, but there’s one application in particular that you pretty much have to have – Audio Hijack.

Audio Hijack

Audio Hijack bills itself as the “Record Any Audio” application, and that’s exactly what it is. If there’s an app on your Mac that makes noise, Audio Hijack can record it.¹

The beauty of Audio Hijack is that it sets up audio recording chains that can include effects, noise removal, peak limiting, and more, and it allows for granular control over whether audio sources get combined into a track or each record their own separate tracks. Each specific setup like this can be saved as a session, so you can always have a session appropriate to whatever kind of recording you want to do.

For example, here’s my Friends with Brews Audio Hijack session.

This session records my mic, which comes in through an Elgato Wave XLR interface, increases the volume, denoises, and ramps down the treble a little bit, because I have a nasally voice.

It also records my soundboard, which is provided courtesy of another Rogue Amoeba app called Farrago, and saves that to its own track.

Finally, it records whatever VOIP app I’m using for the podcast as a backup recording of my co-host(s). Peter and I use FaceTime to talk to each other for Friends with Brews, unless our friend Adam Bell is on, and then we use Zoom.

The VOIP call recording is strictly a backup. We each record our own end locally for the best sound and I combine those tracks in my editor, a process I’ll describe in a separate post sometime soon.

Audio Hijack is very versatile in terms of output file format and quality, and also in terms of file naming.

As I mentioned, you can save recording configurations as sessions. Here are all of my currently saved Audio Hijack sessions for recording various podcasts and Mac apps. Episode 18 of Friends with Brews wasn’t really the last time Adam was on the podcast and we used zoom (it was episode 39, I think) but apparently I forgot to rename that session. Anyway, you get the idea.

Farrago

I mentioned Farrago earlier. Farrago is an amazing soundboard application that lets you store, perform minor edits on, and trigger audio sound clips – in other words, it’s a soundboard!

Farrago is how I play the “Friends? With BREWS?!” clip at the beginning of every podcast, as well as the “Hi, Peter!” and other clips that I like to annoy people with during various podcasts. I have a TON of Farrago sets with sounds from all kinds of stuff.

Vic Hudson and I used to do tv show related podcasts for BubbleSort TV, and those sound clips came in super handy. We’d usually set up sections of the podcast by playing clips from specific scenes, which really added to the shows. It also means they’re inserted live into the recordings (although we made sure they were on their own tracks for easier audio leveling and editing reasons) so they wouldn’t have to be edited in later, AND so the co-host could hear them and we’d both be on the same page about the conversation to follow.

By the way, if you guessed that I recorded every single one of those tv show and movie clips using Audio Hijack, you’re correct!

Loopback

“But Scott!” you say. “Just because you’re playing a sound clip in Farrago on your Mac doesn’t mean your cohosts can automatically hear them, does it?!?” Great question. The answer is no. No, it does not. Enter Loopback.

Because you’re such a doggone great guesser, maybe you surmised that Loopback is Yet. Another. App. By. Rogue Amoeba.

YES! IT IS! And it’s amazing, so back off! It’s not my fault they make all the best podcasting and audio routing and recording related software for the Mac!

Loopback does a lot of things, but simply put, it lets you combine audio sources into one or to pass audio from one application to another. The first use case is how my co-hosts can hear my soundboard – I have a Loopback device that combines my mic with Farrago. I can then set THAT as the input to my VOIP app of choice, such as FaceTime or Zoom or Skype, and then everyone on the other end(s) of the call can hear my soundboard coming from me exactly the same as they can hear me talking.

This Loopback device looks a lot like this – in fact, exactly like this:

Usually, even though each app can have its own inputs and outputs separate from the system settings, I just set my system settings to the output I want (my Elgato Wave XLR, which my podcasting headphones are plugged into) and the input that I want (my Loopback input source that combines my mic and Farrago).

Then I set my VOIP app de jour to use system settings for input and output.

And, So

And THAT, my friends, is over 1000 words on software that I use to record the podcast. It’s not complete, because I have a few helper utilities that prepare the way, as John Siracusa might say, but I’ll save those for another post.

So topics you have to look forward to in this series in the future are helper utility apps that prepare the way for recording, apps I use during the editing process, what exactly my editing process actually entails, and finally, how I get all that published and ready for YOU to listen to, in the case of Friends with Brews especially.

You can bet on it. But maybe you shouldn’t. Just saying. Never bet unless the outcome is already certain. And then always only bet a dollar.

It can actually even record apps that don’t make noise, but that’s probably an exercise best reserved for the metaphysicians of the world. ↩

The Push I Needed to Implement Link Posts

Sun, 30 Jul 2023 17:00:00 GMT

Thanks entirely to Tiffany White, I finally implemented something that’s been on my site to-do list for some time, but that I’ve never gotten around to actually doing until now: link posts.

You’ve seen link posts before, certainly so if you read a lot of Mac related blogs like Daring Fireball, SixColors, or MacStories. The idea is the title of the post links to an article on another site, and then you add some commentary and maybe quote part of the article in your post.

Tiffany created an issue on my site repo asking if I’d setup link post support in Astro yet. I had it on my to-do list, namely in my Obsidian kanban board for this site, but I hadn’t done it yet because I haven’t really wanted to link to too many external articles here. But Tiffany creating an issue for me gave me the motivation to figure out how I would do it.

Adding the Url Link

In order to add the URL that the post title should link to, I decided to add a front matter item called link:

1
---
2
title: "How to use Raycast and how it compares to Spotlight and Alfred"
3
description: Raycast compared to Spotlight and Alfred.
4
date: "2023-07-28T09:00:00-08:00"
5
link: "https://www.theverge.com/23170431/raycast-how-to-macos-search-extensions-alfred-spotlight"
6
keywords: ["mac", "raycast", "apps", "utility", "alfred", "spotlight"]
7
slug: "raycast"
8
---

Adding the Link to the Collection Schema

Because I’m using Astro Content Collections, I also needed to add this to my collection schema. Not all posts will have a link front matter item, so it needs to be optional.

1
import { z, defineCollection } from "astro:content";
2

3
export const collections = {
4
  posts: defineCollection({
5
    schema: z.object({
6
      title: z.string(),
7
      description: z.string(),
8
      link: z.string().optional(),
9
      date: z.string().transform((str) => new Date(str)),
10
      keywords: z.string().array(),
11
    }),
12
  }),
13
};

Zod allows for optional entries, so links is defined as a z.string().optional().

The Astro Code for Link Post Titles

The rest of the work is done in a new component for creating the blog post title called PostTitle.astro.

1
---
2
import config from "config";
3
import { Icon } from "astro-icon/components";
4
import path from "path";
5
import { titleCase } from "./utilities/StringFormat.js";
6

7
const { post } = Astro.props;
8
---
9

10
<a
11
  href={post.data.link
12
    ? post.data.link
13
    : new URL(
14
        path.join(config.get("posts.path"), post.slug),
15
        config.get("url"),
16
      )}
17
>
18
  {post.data.link ? <Icon name="ion:ios-link" /> : ""}
19
  {titleCase(post.data.title)}
20
</a>
21

22
<style>
23
  [data-icon] {
24
    width: 1em;
25
    margin-bottom: -0.3rem;
26
  }
27
</style>

I check for the existence of the link front matter value in two places: one for creating the href for the post title, and the other to decide whether or not to show the link icon next to the post title indicating that this is a link post.

If post.data.link exists, I use that as the href for the title link, otherwise I use the url of my blog post as the href so that my blog post links to itself as usual.

Now in my Post.astro component which creates the blog post layout, I call my PostTitle component instead of just creating the title in Post.astro itself.

1
---
2
import type { CollectionEntry } from "astro:content";
3
import config from "config";
4
import { Icon } from "astro-icon/components";
5
import path from "path";
6
import { postdate } from "../components/utilities/DateFormat.js";
7
import PostTitle from "./PostTitle.astro";
8

9
interface Props {
10
  post: CollectionEntry<"posts">;
11
}
12

13
const { post } = Astro.props;
14
const { Content } = await post.render();
15
---
16

17
<article>
18
  <header>
19
    <h1>
20
      <PostTitle post={post} />
21
    </h1>
22
    <div class="time">
23
      <Icon name="bi:calendar2-week-fill" />
24
      <time datetime={post.data.date}>
25
        <a
26
          href={new URL(
27
            path.join(config.get("posts.path"), post.slug),
28
            config.get("url"),
29
          )}
30
        >
31
          {postdate(post.data.date)}
32
        </a>
33
      </time>
34
    </div>
35
  </header>
36
  <Content />
37
</article>

This is the result:

Before implementing PostTitle to create link post titles when appropriate, I just created the title directly in Post.astro with the following:

1
<!-- old way of creating post title -->
2
<a
3
  href={new URL(
4
    path.join(config.get("posts.path"), post.slug),
5
    config.get("url"),
6
  )}
7
>
8
  {titleCase(post.data.title)}
9
</a>

As you can see, it’s just a subset of what’s now in PostTitle.astro, namely just the portion that assumes the post title should just link back to the post itself. But you can see how easy it was to go from that to the new PostTitle component that can handle both link posts and regular posts.

Improvements

That’s it! There are still some improvements to be made. Besides just showing the link icon next to the title of a link post, I probably want to change the color of the title slightly and maybe change the post background color very subtly to indicate that it’s not just the usual site post.

I also plan to make quote sections a little more stylish by adding some nice quote marks around them to offset them just a little bit more than they already are.

ScottWillsey

Astro RSS Compiled Content Revisited

2026 and the Search for Meaning

Footnotes

Default Apps November 2025

Official Categories

Additional Categories

New Face!

Tailwind CSS

Sidebar

Typography

Enjoy

Spotomation, Part 3 – Snippety Snippets

Contents

The Goal – Replacing Raycast with Spotlight and Companion Utilities

Raycast Snippets

Snippety for Mac and iOS

Basic UI

Snippet Use

Scripts

Conclusion

Footnotes

Spotomation, Part 2 – Replacing AI

Contents

The Goal – Replacing Raycast with Spotlight and Companion Utilities

Raycast AI

Models

Integration

Extensions and MCP

Caveats

Non-Raycast AI Options

The Future

Conclusion

Additional Reading

Spotomation, Part 1 – Spotlighting

Spotlight Is Not Dead, It Was Just Resting

Raycast – The Power User Utility Knife

Next Steps

Footnotes

He’s Not Dead, He’s Resting!

Spotlighting Tahoe

Photos with a Lightbox

Tailscale and Travel Routers

More to Come

/Now Page Update – Podcast Episode Artwork

Podcast Listening History Overview

The Raycast Script Command

The Python Scripts

The Retrobatch Script

The Markdown

Footnotes

Raycast AI as Translator

Slowly Posting Reviews

Media Reviews Are Now in Search Results

Updated Sessions Raycast Script Command, 2025 Edition

Footnotes

Creating Drafts in Astro 5

Automation Workflow for Media Reviews

Contents

Updating the Look of My /now Page

Automating Quick Reviews

Step 1: Quick Reviews

Step 2: Hazel

Step 3: Retrobatch

Step 4: Python Script

Python Script Part 1: Create Markdown Links

Python Script Part 2: Archive All Images in the Retrobatch Input Folder

Python Script Part 3: Delete All Text Files in the Retrobatch Output Folder

Python Script Part 4: Rename and Move the Image Files to Use on the Website

Step 5: Profit

Summarium

Footnotes

Menu Updates and Reviews Page

Cool Site Spotlight Raycast Script Command

SSH Connections in Visual Studio Code

Footnotes

The Notey McNoteness of Raycast Notes

aichat Config for OpenAI and Anthropic APIs

Default Apps December 2024

Official Categories