Finally made myself work on ScreenCred!

I’m trying to get things polished up to release someday “soon”—or at least a public TestFlight. So, crossing things off my list.

I fixed a bug on iPad. Apparently the background images were covering some buttons somehow…even though they were clipped. Maybe a hack, but I just threw .allowsHitTesting(false) on them and now it works. Win. Easier than I thought it was going to be.

Then I started polishing, or at least moving things around, in my settings screens.

Small change, but instead of a toggle for where to open details in, I’m trying a segmented control. I think it’s a little more clear. But I might need to add some additional text to explain which details I’m talking about and whatnot.

Worked a bit on the about view as well. Mostly just moved things around, but I think it looks slightly nicer.

Before

After

Anyway, feels good to get back into the swing of things. Now I’m off to soccer practice. Not my practice, but my 6 year-old’s practice. She’s much better than me.

screencred devlog

I feel drained.

It’s been difficult to get myself to work on ScreenCred and other projects. It’s a combination of all sorts of things—poor sleep, new responsibilities at work, disruption from travel, kids schedules. I don’t do well when my groove gets ruined.

I need to make a list. ScreenCred is like 90% “done.” I’m at least thinking of it as feature complete. Of course the last 10% takes 90% of the effort—or whatever it is. I’ve got a few lists of odds and ends I need to consolidate and prioritize.

I would like to try and get things back to normal. But I’m also wondering if I need to make other changes, like finding a coworking place to go a couple times a week, or taking a day or two off and working on it exclusively.

I was on a pretty good streak. And I’m still interested in trying to work on things in a consistent and sustainable way.

I switched the web portion of ScreenCred to Astro and hosted on fly.io. Using this post, I was able to put Cloudflare in front of it. We’ll see how it goes.

I also found a little bug where sometimes the og:image failed to generate. To fix it, I added a redirect to the generic/default og:image.

try {
    const buffer = await makeImage(first, second);

    return new Response(buffer, {
      status: 200,
      headers: {
        "Content-Type": "image/png",
      },
    });
  } catch {
    return redirect("/images/screencred_social.png", 307);
  }

Simple enough.

Things seem to be working smoothly though. Image generation is taking about 750–1000ms. And this is on the free 256MB instance.

Now I need to get back to actually working on the app. Enough with this distraction!

screencred fly.io devlog

I’ve been putting a little notebook in my shirt pocket lately. I like having something around that I can take notes, write out tasks, etc. without getting distracted by my phone. I also like it because it’s thin. Not as thin as a Field Notes or other pocket notebook, but I like the spiral bind way better.

The other day, I was sitting on the couch. I got to thinking, what else can I put in my shirt pocket? What about snacks?

After some research, it looks like most snacks are too tall, thick, or otherwise bulky to fit comfortably in my pocket.

Time to take things into my own hands.

The Pocket Square

I decided to prototype my ideal snack. My wife came up with the best name for it. Introducing the Pocket Square.

An index card sized granola bar sitting on top of a small pocket notebook next to a Pentel EnerGel pen An index card sized granola bar sitting on top of a small pocket notebook next to a Pentel EnerGel pen

It’s a basic peanut butter chocolate chip granola bar, but rolled out as thin as I could get it. It ended up being about 4mm. Since it’s so thin, it fits very nicely into my shirt pocket. Success.

What doesn’t work

It’s too soft. Even after a night in the freezer, it still pretty soft since it’s mostly peanut butter. It would easily melt and get gross if I actually put it in my pocket and went outside. I could tweak the recipe a bit to get the consistency better, but I’m still worried about how it would hold up. So I don’t know that a granola bar is the best fit for a pocket snack. I still love it. The size is perfect.

I’m going to keep thinking about this and go to the grocery store for research.

prototyping edc

I have no idea what I’m doing.

I’ve been working on the ScreenCred website. It’s pretty simple—homepage, privacy policy, changelog, etc. Oh. And I need to dynamically generate go:images for when you share links from the app. Need might be strong, but I really, really, really want that. The problem is, puppeteer—the library I’m using to generate images—needs a bit of memory. That complicates things.

11ty on Netlify

Wanting to try some new things, 11ty with Netlify Builders was my first stop. All the content pages were simple and straightforward. I even made a Netlify Builder to generate the the og:images. But it’s slow. Like 10s slow. See Devlog: February 11, 2023 for more about getting this setup.

Node

My next thought was to offload the og:image generation to another service. I made a simple Node/express server to do this. Then I threw spaghetti at the wall until I ended up with a Dockerfile that I could use to host it on fly.io. I decided to try out fly.io because it’s free. And Docker seems like something I should learn.

This solution actually works pretty well. And if I’m smart, I should probably stick with this.

I am not smart.

Astro

I’ve been wanting to give Astro a try. I saw that they support endpoints with SSR. That got my wheels turning. I could keep everything together. It will pre-render pages like the landing page and privacy policy, but then will use SSR to generate my search pages, with an endpoint to generate og:images. So far, I’ve enjoyed working with Astro. Fits my mental model pretty well.

I got things working locally pretty quickly. Aside from some small issues¹, it was smooth.

Then I started on deploying it.

I started with again throwing some Dockerfile spaghetti to try and get things to work with fly.io. I eventually got it working, but for some reason, puppeteer kept running out of memory. Strange because it’s all the same code from my standalone Node server. Possibly because this is using Node 16 instead of 14? I’m not sure. I bumped up the memory on the machine for a few minutes to test, and that worked. Cool. But I don’t want to spend money now and you only get a 256MB machine for free.

I have a Synology in the closet…

After some time figuring out how to export my image to upload to my Synology, I got it running. I’m running Cloudflare tunnels to connect to some services on my Synology, so it was fairly simple to connect to this new Docker container running my Astro Node server.

Then I was getting:

Error: Expected an exported Astro component but received typeof undefined

What? Everything was working, why is it not working?

After a couple hours, I found the issue to be a link in the HTML head to a favicon that did not exist. Removed that, and it all worked. Woof.

Oh wait, an environment variable is not loading. Still haven’t figured this one out. I tried everything I could think of, but Astro (or Vite?) would not pick up the environment variable. I just hardcoded it for now. Maybe I’ll figure it out later.

What now?

So anyway, that’s where I’m at. Deciding between fly.io and my Synology. I could also throw it up onto my Linode. Or something else entirely. But I don’t want to spend too much/anything since this app will probably make me negative dollar bucks. But I at least feel good that I have options.

I’m thinking Astro with SSR is a better solution that 11ty and builders for me. Because of the nature of the app, I’m guessing most share links will be unique. So I don’t gain a lot by using Netlify builders, which caches the results. In fact, it would probably be slower in most cases because of the time it takes a builder to spin up. So seems like a good fit for SSR. That being the case, I could look into other solutions, but Astro seems to be a great fit. I like the philosophy and I don’t have to learn too many new things to use it. I’ll keep my eyes open though.

screencred 11ty astro docker devlog

I was procrastinating today, so I made a bash script. I had been using Espanso to make creating my develogs a bit easier with some text replacement. But then I thought, sure would be nice to just type dev into Raycast and have it create the file, insert the template, and open it in iA Writer for me. So Googled my way through to a bash script:

today=$(date +%Y-%m-%d)
publish=$(date -v +1H +"%Y-%m-%d %H:00")
titleDate=$(date +"%B %-d, %Y")
path="/.../Posts/[devlog]/_$today devlog.md"
template="---
Date: $publish
Tags:
---

# Devlog: $titleDate

"

printf -- "$template" >> "$path"

open -a "iA Writer" "$path"

Never worked with dates in bash before, so learned a couple things:

1. Add - to remove leading 0’s: %-d.
2. Use -v to change the date: date -v +1H to add an hour. I do this so develogs are published a little bit in the future.

And then with printf, needed to use -- to tell it to ignore the hyphens in my text, which I need to indicate frontmatter in the markdown.

A fun little script. Might make one to create a new blog post, instead of a devlog. But I don’t make posts very often. So we’ll see. This was a nice little distraction, and something that has been rattling around my brain for a few weeks. Nice to get it out.

raycast bash