Friday night code sessions - a lazy CleanShot X alternative
I've been using CleanShot for a bit over five years. I have no complaints except that it's attached to my SetApp subscription, something that I was fine paying for until some of my favorite apps left the service. I essentially now only use Lungo, TablePlus and CleanShot X – the first two of which I now have one-off licenses for.
I've come up with an "alternative" which is more like a "work-around" to fill in for the workflows I primarily used CleanShot for.
This means:
- I'm a macOS user
- I use CleanShot X primarily for taking screenshots
- I don't use any of its editing tools
- I only really upload to the cloud if I'm not dragging it into a Slack message.
The cloud part
Storing and serving stuff on the cloud has been a solved problem since even before a famous place to buy books started selling cloud storage. For this, I won't be using the bookstore, but Cloudflare R2 which is a great storage solution and uses the bookstore's S3 API.
I wanted nice previews too, so I'm using Cloudflare Workers to render a HTML page with a file preview and download link.
There's a handy built-in called HTMLRewriter which I'm using to inject attributes into a pre-made HTML template. This allows me to easily inject dynamic elements, such as a download link and preview image, into the HTML template.
I'm not using any fancy libraries to control the previews, just browser built-ins which work fine:
- Images, a good old
<img>tag - Videos, a
<video>tag - Audio, an
<audio>tag - PDFs, an
<embed>tag
Basically, when you hit the worker at https://cloudwrap.example.com/your-file.jpg, it'll serve a HTML page with a preview of the image and a download link.
I've open-sourced the project and you can find it here.
The screenshot part
I've been using Siri Shortcuts to automate all sorts of things on my iPhone for a while now. It's on my Mac too, but I've never really used it.
I decided to use it for this project. The key reason is that it lets me add a quick action to Finder and the share sheet.
I came up with this shortcut which:
Accepts an input from the share sheet or quick action menu
Uploads the file to the above worker
Copies the URL to the clipboard
Shows a share sheet which you can dismiss if you're just going to paste the URL
How does it feel?
While it's not as smooth as CleanShot X, it's not bad. I can take a screenshot, right click the file, hit the quick action, and then paste the URL. It's a few more steps than I'd like, but it's not bad.
Given how infrequently I used the cloud upload feature of CleanShot X, I'm happy with this solution. It's free, it's fast, and it's mine (ish).
The future
This was a fun Friday night project and I'm happy with the results. I will probably polish it a bit as needed, but for now it does what I need it to do - upload screenshots to the cloud and give me a URL to share.
I added a Deploy to Workers button to the GitHub repo, so you can deploy it to your own Cloudflare account if you want to use it.