{
  "version": "https://jsonfeed.org/version/1.1",
  "title": "stuff&amp;things",
  "language": "en",
  "home_page_url": "https://my.stuffandthings.lol/",
  "feed_url": "https://my.stuffandthings.lol/feed/feed.json",
  "description": "Just some stuff about things.",
  "authors": [
    {
      "name": "Jason"
    }
  ],
  "items": [
    {
      "id": "https://my.stuffandthings.lol/blog/2026-02-28/what-have-i-done.html",
      "url": "https://my.stuffandthings.lol/blog/2026-02-28/what-have-i-done.html",
      "title": "What have I done?",
      "content_html": "<p>In a <a href=\"https://my.stuffandthings.lol/blog/2026-02-09/some-more-updates-and-fixes-to-my-site.html\">previous post</a>, I noted I moved to a self-hosted Forgejo instance on a locally homed Raspberry Pi. That was fun! (It was, even with a few hiccups along the way). And, as part of all of that, I set up a forgejo-runner on a Hetzner VPS that would deploy this here site to a <a href=\"https://bunny.net\">Bunny</a> Storage Zone and out to the interwebs.</p>\n<p>Back then, so many weeks ago, the DNS was handled by Cloudflare. This caused a few issues with the local repos and, just generally, I wasn’t entirely happy being back on Cloudflare. We’ve seen what happens to the world wide web when something with Cloudflare goes down (it doesn’t stay so world wide for a while).</p>\n<p>So, I set up Caddy on my Hetzner VPS to handle the reverse proxy to my RPi. That’s all it’s currently handling. And then I set up <a href=\"https://docs.dnscontrol.org\">DNS Control</a> to manage my DNS settings because I migrated my records from Cloudflare to Bunny. The thing I really like about DNS Control is that I don’t have to login to anything (besides the VPS via SSH) to update/change my DNS records. They’re all in one place, accessible (mostly) anywhere (as long as I’m on my tailnet because I setup my VPS on my tailnet as well).</p>\n<p>Since I’m using the VPS via Caddy as the reverse proxy for my Forgejo instance, I used the SSH link to clone the repositories on my computers. I could’ve used its Tailscale IP but if I was not on my tailnet and needed/wanted to do something, I wouldn’t have been able to. I may rethink this in the future as that is one of the benefits of having a tailnet to begin with. For now, it made sense to me to set it up as I have.</p>\n<p>One thing that got in my way setting up SSH for the repos is that I forgot about the reverse proxy. I had all of the SSH keys set up and added to my instance but forgot that I had to do some configuration on the VPS because that’s where the DNS records point to. I kept trying to push to one of the repos and kept getting prompted for a password. It took me longer than I care to admit to diagnose that issue and then reverse engineer in my brain what I had done. I plan to document (beyond this post) what’s set up and <strong>why</strong> in case anyone else ever needed/wanted to access it and/or shut it down.</p>\n<p>I’m happy with this setup so far. I don’t have a NAS, so I’m not yet interested in Ente or Immich because I don’t really have storage space for the photos themselves (19,000+) and don’t feel like paying for cloud storage elsewhere.</p>\n<p>This has been a great dip of my toes into the self-hosting waters. I like that I have control over some of this stuff. The overall costs are not prohibitive <strong>to me</strong>, though I understand where they can be to others. I essentially pay for the VPS, which will be about $8/month starting in April, and Bunny, which is coming out to less than a $1 a month at this point.</p>\n<p>These sorts of things help me keep my mind occupied from dwelling on things like, oh, you know, a new war. It is complicated issue and I am not prepared to go into or debate the takes on it. I will say this is another unconstitutional war in my lifetime and I am sick, tired, angry, whatever of it. The timing is suspect at the least.</p>\n<p>Take care of yourselves and your loved ones.</p>\n",
      "date_published": "2026-02-28T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2026-02-09/some-more-updates-and-fixes-to-my-site.html",
      "url": "https://my.stuffandthings.lol/blog/2026-02-09/some-more-updates-and-fixes-to-my-site.html",
      "title": "Some MORE Updates (and Fixes) to my Site",
      "content_html": "<p>This wasn’t without trials and tribulations. I’ve been sick the past few days and this was something I could do to stay un-bored. I moved my site to a self-hosted Forgejo. It wasn’t that I didn’t love that <a href=\"https://source.tube\">Source Tube</a> exists and I get it as part of my subscription to <a href=\"https://home.omg.lol\">OMG.lol</a>. I was afraid of taking up too much space. I wasn’t even halfway there yet, but I have some newer project ideas and wanted to rebuild now while I didn’t have too many repositories there.</p>\n<p>Anyway, I’ll probably write a longer post about this at some point. This post was really a final test to make sure the new instance is pushing the site and the actions are working properly (especially since I just updated forgejo-runner).</p>\n",
      "date_published": "2026-02-09T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2026-02-05/some-updates-and-fixes-to-my-site.html",
      "url": "https://my.stuffandthings.lol/blog/2026-02-05/some-updates-and-fixes-to-my-site.html",
      "title": "Some Updates (and Fixes) to my Site",
      "content_html": "<p>Some time ago, in the midst of all of the fires burning around us, I decided to make some changes to my site. Some of this was born to move it from GitHub, which I did via Codeberg then via a Forgejo instance hosted by <a href=\"https://social.lol/@adam\">Adam</a> via <a href=\"https://home.omg.lol\">OMG.lol</a> (definitely worth checking out).</p>\n<p>I was deploying the site to Codeberg Pages prior to that, which you can find some more info about <a href=\"https://my.stuffandthings.lol/blog/2025-10-08/an-11ty-site-codeberg-pages-and-cron.html\">in this post</a>. But never to be satisfied, in the move to Forgejo, I had to find a new deployment avenue and decided that would be <a href=\"https://bunny.net\">Bunny CDN</a>. And I had it sort of working for a day. Then, after a minor redesign (or reverting a new design back to my old design), realized something wasn’t working. Locally, in my repo, and Bunny storage all of the files for the new design were there but the site live on the interwebs was still showing the old design. I couldn’t figure that out. With some help by <a href=\"https://vim.wtf/@wq\">John</a>, it was discovered my <code>deploy.yml</code> file was a little, well, wrong. Or overcomplicated? Or wrong.</p>\n<p>The big streamlined fixes are in the bottom of this code in the section <strong>Deploy to Bunny CDN</strong>:</p>\n<pre class=\"language-yml\" tabindex=\"0\"><code class=\"language-yml\"><span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Deploy 11ty Site to Bunny CDN\n\n<span class=\"token key atrule\">on</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">push</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">branches</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> main\n  <span class=\"token key atrule\">workflow_dispatch</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">schedule</span><span class=\"token punctuation\">:</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">cron</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'0 */4 * * *'</span>\n\n<span class=\"token key atrule\">jobs</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">build-and-deploy</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> docker\n    <span class=\"token key atrule\">container</span><span class=\"token punctuation\">:</span>\n      <span class=\"token key atrule\">image</span><span class=\"token punctuation\">:</span> node<span class=\"token punctuation\">:</span>20<span class=\"token punctuation\">-</span>bookworm\n    \n    <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Checkout code\n        <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/checkout@v4\n      \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Install dependencies\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> npm install\n      \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Build 11ty site\n        <span class=\"token key atrule\">env</span><span class=\"token punctuation\">:</span>\n          <span class=\"token key atrule\">WEBMENTION_TOKEN</span><span class=\"token punctuation\">:</span> $\n          <span class=\"token key atrule\">MASTODON_INSTANCE</span><span class=\"token punctuation\">:</span> $\n          <span class=\"token key atrule\">MASTODON_USERNAME</span><span class=\"token punctuation\">:</span> $\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> npm run build\n      \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Deploy to Bunny CDN\n        <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> https<span class=\"token punctuation\">:</span>//source.tube/jasonm/bunnycdn<span class=\"token punctuation\">-</span>storage<span class=\"token punctuation\">-</span>deploy@v2.4.0\n        <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n          <span class=\"token key atrule\">source</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"dist\"</span>\n          <span class=\"token key atrule\">destination</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"/\"</span>\n          <span class=\"token key atrule\">storageZoneName</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"$\"</span>\n          <span class=\"token key atrule\">storagePassword</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"$\"</span>\n          <span class=\"token key atrule\">storageEndpoint</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"$\"</span>\n          <span class=\"token key atrule\">accessKey</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"$\"</span>\n          <span class=\"token key atrule\">pullZoneId</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"$\"</span>\n          <span class=\"token key atrule\">upload</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"true\"</span>\n          <span class=\"token key atrule\">remove</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"true\"</span>\n          <span class=\"token key atrule\">purgePullZone</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"true\"</span></code></pre>\n<p>That updated file is about 30 lines shorter than the previous iteration and far less complicated. And guess what? It. Just. Works.</p>\n<p>But I made some other changes in the meantime. I have a <a href=\"https://my.stuffandthings.lol/social\">Social</a> link on the site. The previous <code>.js</code> file that feeds it used to have the <code>instance</code> and my <code>username</code> hardcoded into it. Not in and of itself a major issue, especially if you follow me on the Fediverse, but to make it a little secret(?) I created environment variables. And that worked great!</p>\n<p>But I noticed, while trying to fix the Bunny deployment issues, that the Social link was showing sporadically. I didn’t realize at the time that the sporadic nature was because the deployment wasn’t purging the cache of the old files and so was retaining the Social link at times. But THAT was actually wrong! It shouldn’t have been showing it at all. When I created the environment variables for the <code>instance</code> and <code>username</code>, I never added them to the <code>deploy.yml</code> file. So they were always going to error out. I just hadn’t realized it because the whole site was not deploying correctly. After John’s help, I figured that last piece out.</p>\n<p>And, finally, last night I added a <code>JSON</code> feed to the site and, in fact, that’s what’s now linked at the <a href=\"https://my.stuffandthings.lol/feed\">Feed</a> link. This was really to help add options to the <a href=\"https://echodfeed.app\">EchoFeed</a> echo that posts to Mastodon when I post to this. (I didn’t remove the Atom feed so that anyone who was subscribed to that wouldn’t need to change anything.)</p>\n<p>Ok, P.S.? I really finally lastly changed my authentican for <a href=\"https://webmention.io\">Webmentions</a> to email rather than GitHub (or TwiXtter). Yes I need to get sent a code now via email, but I think that was the last component that had me tied to GitHub (since I long ago moved my Tailscale account from authenticating via GitHub to Apple authentication via Hide My Email … something to be revisited on another day).</p>\n<p>Anyway, yes, things are awful out there and I think a lot about what’s happening in Minneapolis, Chicago, LA, LV, and across the country. It keeps me up at night. It’s affected my appetite and mood. It has galvanized parts of me that haven’t been awakened since my early 20s. The lack of sleep is what’s “freed” up the time to make these changes talked about here and is probably also why I broke some of them in the process. But there are far better people in the Fediverse, reporting via some non-major news outlets, and out on the streets doing the work than me and you should find them and read and listen to them if you’re not already. We must – and will – overcome what’s happening but it will take all of us who care to do so. And there are all levels of engagement in doing that. But take care of yourself as well as best you can.</p>\n",
      "date_published": "2026-02-05T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2025-10-28/ten-pointless-facts-about-me.html",
      "url": "https://my.stuffandthings.lol/blog/2025-10-28/ten-pointless-facts-about-me.html",
      "title": "Ten Pointless Facts About Me",
      "content_html": "<p>Some folks are answering these questions and so I did, too.</p>\n<h2 id=\"do-you-floss-your-teeth\">Do you floss your teeth?</h2>\n<p>Periodically, yes.</p>\n<h2 id=\"tea-coffee-or-water\">Tea, coffee, or water?</h2>\n<p>Coffee (unless I’m sick, then tea).</p>\n<h2 id=\"footwear-preference\">Footwear preference?</h2>\n<p>Sneakers of some sort generally.</p>\n<h2 id=\"favourite-dessert\">Favourite dessert?</h2>\n<p>Cheesecake of any type.</p>\n<h2 id=\"the-first-thing-you-do-when-you-wake-up\">The first thing you do when you wake up?</h2>\n<p>Clean a litterbox.</p>\n<h2 id=\"age-you-d-like-to-stick-to\">Age you’d like to stick to?</h2>\n<p>I’d like to say somewhere in my 30s, but having worked in the hospitality industry for most of my 20s and 30s, I’m not sure that’s right. Each period of my life has had its ups and downs and I don’t know that I could settle on any one. That said, I do wish I was still in a band so maybe I’ll just need to do that again now in my 40s.</p>\n<h2 id=\"how-many-hats-do-you-own\">How many hats do you own?</h2>\n<p>A lot. As a person who started balding at 17, I generally need a hat for sun protection or to keep my head warm. I have different hats for different purposes (chore hats versus outing hats, etc.).</p>\n<h2 id=\"describe-the-last-photo-you-took\">Describe the last photo you took.</h2>\n<p>Not posted anywhere, but of the train ride at Knoebel’s amusement park and one of the Halloween displays featuring skeletons.</p>\n<h2 id=\"worst-tv-show-recently\">Worst TV show recently?</h2>\n<p>Honestly, the new iteration of, “Matlock.”</p>\n<h2 id=\"as-a-child-what-was-your-aspiration-for-adulthood\">As a child, what was your aspiration for adulthood?</h2>\n<p>To be a chef. I still enjoy cooking but I had no real idea how to go about that at the time and not really the support structure to do it. That’s not to say people intentionally did not support that dream, per se, but maybe also did not know how to access the resources, etc., to point me in the right directions.</p>\n",
      "date_published": "2025-10-28T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2025-10-08/an-11ty-site-codeberg-pages-and-cron.html",
      "url": "https://my.stuffandthings.lol/blog/2025-10-08/an-11ty-site-codeberg-pages-and-cron.html",
      "title": "An 11ty Site, Codeberg Pages, and Cron",
      "content_html": "<p>Some time ago I moved my 11ty site from Cloudflare and Github to Codeberg Pages. It was not without its trial and tribulations but <a href=\"https://codeberg.org/johnnyjayjay/pages-tutorial\">this tutorial</a> from user johnnyjayjay was invaluable and, in fact, I deviated very little from it for deploying the site from terminal to Codeberg Pages.</p>\n<p>That said, the other issue I wanted to resolve was rebuilding the site every few hours to capture any social media posts for the <a href=\"https://my.stuffandthings.lol/social\">Social</a> page, which is just my Mastodon posts. In my research for it, I found plenty of posts about deploying but not necessarily setting up a cron job.</p>\n<p>Codeberg does have plenty of documentation and eventually I found enough articles that pointed me to using their Woodpecker CI to implement my <code>.woodpecker.yml</code> file. If you want to use the CI, you’ll <a href=\"https://codeberg.org/Codeberg-e.V./requests\">need to request access first</a>. I think it took about 45 minutes to get access, but I also requested late at night.</p>\n<p>Once you have access, you’ll need to log into Woodpecker using your Codeberg credentials, give access to the repos you want, and set up two secrets (one for a Codeberg token, one for the repo name), under Settings. You’ll also set up the cron details here as well.</p>\n<p>For the Codeberg token, log into your account and go to Account Settings &gt; Applications and set up a token. You’ll only need to give it read/write repo access (but can give it whatever other additional access you like, if you choose). This is focusing on actually setting the <code>yml</code> file up for an 11ty site. Once you create the token, copy it to the Woodpecker secret. For the repo secret, the variable should be in the format <code>username/repo</code>.</p>\n<p>So, with all of that out the way, the actual <code>yml</code> file, which goes in the root of your <code>source</code> website’s repo (not the <code>pages</code> repo), looks like this:</p>\n<pre class=\"language-yml\" tabindex=\"0\"><code class=\"language-yml\"><span class=\"token key atrule\">when</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">event</span><span class=\"token punctuation\">:</span> cron\n  <span class=\"token key atrule\">cron</span><span class=\"token punctuation\">:</span> deploy<span class=\"token punctuation\">-</span>pages\n\n<span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> build\n    <span class=\"token key atrule\">image</span><span class=\"token punctuation\">:</span> node<span class=\"token punctuation\">:</span>20<span class=\"token punctuation\">-</span>alpine\n    <span class=\"token key atrule\">commands</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> apk add <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>no<span class=\"token punctuation\">-</span>cache git\n      <span class=\"token punctuation\">-</span> npm install\n      <span class=\"token punctuation\">-</span> npm run build\n\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> deploy\n    <span class=\"token key atrule\">image</span><span class=\"token punctuation\">:</span> alpine<span class=\"token punctuation\">:</span>latest\n    <span class=\"token key atrule\">environment</span><span class=\"token punctuation\">:</span>\n      <span class=\"token key atrule\">CB_TOKEN</span><span class=\"token punctuation\">:</span>\n        <span class=\"token key atrule\">from_secret</span><span class=\"token punctuation\">:</span> cb_token\n      <span class=\"token key atrule\">CB_REPO</span><span class=\"token punctuation\">:</span>\n        <span class=\"token key atrule\">from_secret</span><span class=\"token punctuation\">:</span> cb_repo\n    <span class=\"token key atrule\">commands</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> apk add <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>no<span class=\"token punctuation\">-</span>cache git openssh<span class=\"token punctuation\">-</span>client\n      <span class=\"token punctuation\">-</span> git config <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>global user.name \"Woodpecker CI\"\n      <span class=\"token punctuation\">-</span> git config <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>global user.email \"woodpecker@ci\"\n      <span class=\"token punctuation\">-</span> cd dist\n      <span class=\"token punctuation\">-</span> git init\n      <span class=\"token punctuation\">-</span> git checkout <span class=\"token punctuation\">-</span>b pages\n      <span class=\"token punctuation\">-</span> git add .\n      <span class=\"token punctuation\">-</span> git commit <span class=\"token punctuation\">-</span>m \"Deploy to Codeberg Pages <span class=\"token punctuation\">[</span>CI<span class=\"token punctuation\">]</span>\"\n      <span class=\"token punctuation\">-</span> git push <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>force https<span class=\"token punctuation\">:</span>//$CB_TOKEN@codeberg.org/$CB_REPO.git HEAD<span class=\"token punctuation\">:</span>main</code></pre>\n<p>A few things to note here. The image I’m using is <code>node:20-alpine</code> because I’m running the 11ty version 4.0-alpha, which requires &gt;20. The cb_token and cb_repo are the secrets I created in Woodpecker – name them whatever but the name should be lowercase. Finally, you’ll note there are not <code>{}</code> around the tokens in the <code>git push</code> command at the end. That is not a typo.</p>\n<p>I hope this helps someone else out there. I may update with more details instructions on setting up the secrets and/or the cron in Woodpecker.</p>\n",
      "date_published": "2025-10-08T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2025-09-07/some-vaccines-and-rings.html",
      "url": "https://my.stuffandthings.lol/blog/2025-09-07/some-vaccines-and-rings.html",
      "title": "Some Vaccines and Rings",
      "content_html": "<p>Today I got my COVID booster and pneumonia vaccine. It was the first time for the pneumonia vaccine for me but my PC recommended it given my asthma history that was the result of having pneumonia in the first place. I got pneumonia in 2019, when I was running for office in a competitive race. It was the combination of long days (working full-time, taking graduate level courses, and campaigning) as well as the tail-end of campaign door-knocking in cold weather.</p>\n<p>Let me tell you this: don’t get them in the same arm. I sort of feel like the Hulk punched me in the arm after seeing a yellow VW Beetle go by. I don’t know who all gets that reference anymore but suffice it to say the left arm’s a tad painful. That said, the pain is preferable to either COVID or pneumonia. It’s not all bad, though. I’m rewatching the extended versions of “The Lord of the Rings.” I’m currently on, “The Two Towers.”</p>\n<p>It’s the small victories these days, I suppose. Remember to look out for each other.</p>\n",
      "date_published": "2025-09-07T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2025-08-23/og-images-using-11ty-screenshot-service.html",
      "url": "https://my.stuffandthings.lol/blog/2025-08-23/og-images-using-11ty-screenshot-service.html",
      "title": "OG Images using 11ty Screenshot Service",
      "content_html": "<div class=\"markdown-alert markdown-alert-note\"><p class=\"markdown-alert-title\"><svg class=\"octicon octicon-info mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"></path></svg>Note #2</p><p>08/31/2025<br>\nI fixed some typos and unfinished sentences in the post. I must’ve been asleep writing it.</p>\n</div>\n<div class=\"markdown-alert markdown-alert-note\"><p class=\"markdown-alert-title\"><svg class=\"octicon octicon-info mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"></path></svg>Note #1</p><p>08/24/2025<br>\nI updated the <code>og-image.njk</code> code below (and added the date to the images). And my inspiration for digging into this yesterday can be found <a href=\"https://labyrinth.social/@starshaped/115079773764546971\">at this Mastodon thread here</a>. Additionally, you do not need the <code>og-image.njk</code> if you just want your OpenGraph Image to be a screenshot of your page.</p>\n</div>\n<p>I made some lasting adjustments to the OG images for the site. I used the <a href=\"https://www.11ty.dev/docs/services/screenshots/\">11ty Screenshot Service</a> and added an <code>eleventyComputed</code> to my <code>post.njk</code> template. From there, I created an <code>og-image.njk</code> file to create the images using screenshots of the site name and post title.</p>\n<p>To get all of that working, I added a filter in my <code>eleventy.config.js</code> file to URI encode the address during build. It now seems to be working well. The actual additions are below:</p>\n<p>In the <code>post.njk</code> I added:</p>\n<pre class=\"language-yaml\" tabindex=\"0\"><code class=\"language-yaml\"><span class=\"token key atrule\">eleventyComputed</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">ogImage</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"https://v1.screenshot.11ty.dev/{{ ('https://my.stuffandthings.lol/og-images' + page.url) | uriencode }}/opengraph/\"</span></code></pre>\n<p>In my <code>eleventy.config.js</code> I added:</p>\n<pre class=\"language-js\" tabindex=\"0\"><code class=\"language-js\">eleventyConfig<span class=\"token punctuation\">.</span><span class=\"token function\">addFilter</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"uriencode\"</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token function\">encodeURIComponent</span><span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre>\n<p>And the <code>og-image.njk</code> template vaguely looks like this (add your own CSS, etc.):</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\">---\nlayout: false\npagination:\n  data: collections.posts\n  size: 1\n  alias: post\npermalink: /og-images{{ post.url | replace('.html', '') }}.html\neleventyComputed:\n  title: \"{{ post.data.title }}\"\n---\n\n<span class=\"token doctype\"><span class=\"token punctuation\">&lt;!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>html</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>viewport<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">></span></span><span class=\"token style\"><span class=\"token language-css\">\n\n        <span class=\"token selector\">body</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 40px<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">font-family</span><span class=\"token punctuation\">:</span> <span class=\"token function\">var</span><span class=\"token punctuation\">(</span>--font-family<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> #090200<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #f2f6f7<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">flex-direction</span><span class=\"token punctuation\">:</span> column<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">justify-content</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">align-items</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 630px<span class=\"token punctuation\">;</span> <span class=\"token comment\">/* OG image height */</span>\n            <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 1200px<span class=\"token punctuation\">;</span> <span class=\"token comment\">/* OG image width */</span>\n            <span class=\"token property\">box-sizing</span><span class=\"token punctuation\">:</span> border-box<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token selector\">.logo</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 100px<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 100px<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token selector\">.site-name</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 68px<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">font-weight</span><span class=\"token punctuation\">:</span> bold<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">text-align</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">line-height</span><span class=\"token punctuation\">:</span> 1.2<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">max-width</span><span class=\"token punctuation\">:</span> 900px<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token selector\">.title</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 44px<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">opacity</span><span class=\"token punctuation\">:</span> 0.8<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        <span class=\"token selector\">.description</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 28px<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n            <span class=\"token property\">opacity</span><span class=\"token punctuation\">:</span> 0.8<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>body</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>site-name<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>text</span> <span class=\"token special-attr\"><span class=\"token attr-name\">style</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token value css language-css\"><span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #50d0ee</span><span class=\"token punctuation\">\"</span></span></span><span class=\"token punctuation\">></span></span>stuff<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>text</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>text</span> <span class=\"token special-attr\"><span class=\"token attr-name\">style</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token value css language-css\"><span class=\"token property\">color</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>246<span class=\"token punctuation\">,</span>36<span class=\"token punctuation\">,</span>89<span class=\"token punctuation\">)</span></span><span class=\"token punctuation\">\"</span></span></span><span class=\"token punctuation\">></span></span>&amp;<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>text</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>text</span> <span class=\"token special-attr\"><span class=\"token attr-name\">style</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token value css language-css\"><span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #f7ca18</span><span class=\"token punctuation\">\"</span></span></span><span class=\"token punctuation\">></span></span>things<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>text</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>title<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>{{ title }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h2</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>description<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>{{ description }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h2</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>html</span><span class=\"token punctuation\">></span></span></code></pre>\n",
      "date_published": "2025-08-23T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2025-05-01/thoughts-on-the-state-of-things.html",
      "url": "https://my.stuffandthings.lol/blog/2025-05-01/thoughts-on-the-state-of-things.html",
      "title": "Thoughts on the State of Things",
      "content_html": "<p>I’ve been trying to write some thoughts about everything happening and I’m sure like many of you I find it all at times all-consuming and suffocating. As others have have shared elsewhere, some of that is by nature at the US Federal level; some of it in the tech (and others) world is a manifestation of the centrist mindset, “Both ‘sides’ are a problem; we’re neutral.”</p>\n<h3 id=\"to-be-clear-neutrality-is-a-political-statement\">To be clear: neutrality is a political statement.</h3>\n<p>The choices in the current US menu are 1) a side that wants to work towards making life better for everyone as imperfect as they may be at it or 2) authoritarianism and fascism. The “both sides” argument typically boils down to neither side being “civil” in their disagreements and wanting to bring back some bipartisanship. First, there is quite literally nothing civil about fascism and authoritarianism. It is their structure to be uncivil - the bending of the will of the people until it breaks. Second, I don’t want bipartisanship with fascism and authoritarianism. Some of you have seen the meme of “meeting halfway” where the line is constantly moved. Authoritarians operate in that manner and the GOP in the US in general has done that over the past 20+ years. Compromise happens under good faith and the GOP ran out of most forms of true faith years ago. <em><strong>Neutrality in the face of this is a political statement.</strong></em></p>\n<h3 id=\"but-but-but\">But … but … but …</h3>\n<p>But let’s dissect something else in the US and that is largely the Democrats muted response to what is happening. There are some speaking out (AOC, Bernie Sanders, etc. etc.). But largely it’s been: THE HOUSE IS ON FIRE SEND MONEY. I have spoken to a lot of Dems and a good chunk of them are sick of the calls for donations when there’s little evidence of any response, coordinated or otherwise.</p>\n<p>Of course we hear the arguments from some Dems, mostly centrists, that the Dems can’t do anything because they’re out of power. I’ve said this before, probably on Mastodon somewhere, but what did they do when they were in power? They held all branches of government at one point and did not codify abortion rights, women’s rights, LGBTQIA+ rights, civil rights, and the list goes on and on. So that we expect anything from them out of power I guess may be shame on us? That’s not to say Dems have always been even good on this front. We (should) know the history of the US on rights: “All* men are created equal. *Please see pages 14 through 28 for exceptions to this.” As George Carlin said, “Rights aren’t rights if someone can take them away,” and there are a lot of people in this country going back centuries that were never “given” them in the first place. I quote it because I think I’d amend his quote that, “Rights aren’t rights if someone believes they can give them to someone.”</p>\n<p>And as a friend recently pointed out, the GOP out of executive power, voted time and time and time again to repeal the Affordable Care Act. Not because they knew it would succeed – well, the vote anyway. But they knew the power of the message to their base: we’re doing something about it even if we don’t have the votes.</p>\n<p>And the base ate it up.</p>\n<p>Dems nationally also need to stop blaming everyone else for their failures. It wasn’t supporting Diversity, Equity, and Inclusion that lost the election. It wasn’t supporting immigrants that lost the election. It wasn’t speaking up about Gaza that lost the election (because most didn’t anyway). It was a messaging catastrophe and backing a candidate that should not have run in the first place. If people keep telling you prices are high and your response is, “BEST ECONOMY EVER,” you’re going to piss those people off. (I won’t debate today whether some people used egg prices to mask their racism and xenophobia because that’s not really a debate.)</p>\n<h3 id=\"ok\">Ok?</h3>\n<p>The opposition party today sits mostly on their hands at the national level. Thankfully there are other organizations out there using the levers available, primarily the judicial system, to fight back. There are groups organizing protests and rallies in the face of the encroaching authoritarianism. I also still contend that the local level is where the immediate action happens. Run for something, anything. Start taking back the local offices that will help enact some of the Federal executive orders (think Dept. of Education orders and who controls your school board).</p>\n<p>And at the local level we can work directly to protect vulnerable communities from immigrants to trans people. Your non-profits and mutual aid organizations work locally. Find out what they need. Sometimes it’s <em>just</em> time; sometimes it’s money or supplies. But they’re usually happy with whatever you can give.</p>\n<p>The next few years will not be easy. And there is no lightswitch that will turn this all off at the next election. Whatever’s been done will take time, who knows how long, to unravel and rebuild. Take care of and build trust with your community and some of that rebuilding will be smoother. Be realistic.</p>\n<h3 id=\"thats-enough\">That’s enough</h3>\n<p>It’s ok to breathe, too, and sit in silence. And it’s ok to yell into a paper bag. Be mad; be angry; be hurt. It’s ok to be paralyzed by everything on some days, too. But it’s also ok to laugh and enjoy things as well. Keep your humanity close. Love your trans brothers and sisters and immigrant families, and everyone who makes this world a beautiful and special place. It’s still it out there. I know it’s hard to see it.</p>\n",
      "date_published": "2025-05-01T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2025-04-10/some-updates-to-the-site.html",
      "url": "https://my.stuffandthings.lol/blog/2025-04-10/some-updates-to-the-site.html",
      "title": "Some Updates to the Site",
      "content_html": "<p>I’ve done a little clean-up on the site. While I didn’t participate with naked CSS yesterday it got me thinking about streamlining my CSS. My <code>index.css</code> file is probably still large at 600 or so lines but I’ll be paring that down over the next few days/weeks. I’d like to keep colors throughout, etc., but I let the design get out of control overall. Rather than leveraging design elements across pages, I’ve skewed and there’s some inconsistencies.</p>\n<p>Of course some of those are intentional – I’d rather the <a href=\"https://my.stuffandthings.lol/social\">Social</a> page be different than the <a href=\"https://my.stuffandthings.lol/blogroll\">Blogroll</a>. But there are some shared design elements that I’ve recreated for each creating some redundancies.</p>\n<p>Anyway, just wanted to write something, anything, as a distraction. So there’s this post and over the next few days some CSS.</p>\n",
      "date_published": "2025-04-10T00:00:00Z"
    }
    ,
    {
      "id": "https://my.stuffandthings.lol/blog/2025-03-20/i-would-ride-600-miles.html",
      "url": "https://my.stuffandthings.lol/blog/2025-03-20/i-would-ride-600-miles.html",
      "title": "I Would Ride 600 Miles",
      "content_html": "<p>Of course this post and title would’ve been better at 500 miles, but who has time for that?</p>\n<p>Yesterday, on a commute to a meeting, I hit 600 miles on my e-bike. This is a little over six months since I started e-bike commuting in earnest. I’m proud of that. Most of my daily commuting is under five miles total. Yesterday’s was around 31 miles when all was said and done, including a detour due to storm damage from a downburst that rolled through our area on Sunday.</p>\n<picture><source type=\"image/avif\" srcset=\"https://my.stuffandthings.lol/img/UUmKdamcAy-1536.avif 1536w\"><source type=\"image/webp\" srcset=\"https://my.stuffandthings.lol/img/UUmKdamcAy-1536.webp 1536w\"><source type=\"image/png\" srcset=\"https://my.stuffandthings.lol/img/UUmKdamcAy-1536.png?v=2674ecbb4d72 1536w\"><img loading=\"lazy\" decoding=\"async\" src=\"https://my.stuffandthings.lol/img/UUmKdamcAy-1536.jpeg?v=2c6700715373\" alt=\"Six hundred miles reached shown on an odometer of the e-bike\" width=\"1536\" height=\"2048\"></picture>\n<picture><source type=\"image/avif\" srcset=\"https://my.stuffandthings.lol/img/Ywgceuu0uQ-2048.avif 2048w\"><source type=\"image/webp\" srcset=\"https://my.stuffandthings.lol/img/Ywgceuu0uQ-2048.webp 2048w\"><source type=\"image/png\" srcset=\"https://my.stuffandthings.lol/img/Ywgceuu0uQ-2048.png?v=2ad9ebeac31d 2048w\"><img loading=\"lazy\" decoding=\"async\" src=\"https://my.stuffandthings.lol/img/Ywgceuu0uQ-2048.jpeg?v=37a03507faa9\" alt=\"A sunset on the ride\" width=\"2048\" height=\"1536\"></picture>\n<picture><source type=\"image/avif\" srcset=\"https://my.stuffandthings.lol/img/_f1kwy9cpd-2048.avif 2048w\"><source type=\"image/webp\" srcset=\"https://my.stuffandthings.lol/img/_f1kwy9cpd-2048.webp 2048w\"><source type=\"image/png\" srcset=\"https://my.stuffandthings.lol/img/_f1kwy9cpd-2048.png?v=af3a52e07bfc 2048w\"><img loading=\"lazy\" decoding=\"async\" src=\"https://my.stuffandthings.lol/img/_f1kwy9cpd-2048.jpeg?v=3a3fc7f6c8ba\" alt=\"A sunset behind me on the ride\" width=\"2048\" height=\"1536\"></picture>\n<picture><source type=\"image/avif\" srcset=\"https://my.stuffandthings.lol/img/8ImaJf7nbY-2048.avif 2048w\"><source type=\"image/webp\" srcset=\"https://my.stuffandthings.lol/img/8ImaJf7nbY-2048.webp 2048w\"><source type=\"image/png\" srcset=\"https://my.stuffandthings.lol/img/8ImaJf7nbY-2048.png?v=d34a6b37cb74 2048w\"><img loading=\"lazy\" decoding=\"async\" src=\"https://my.stuffandthings.lol/img/8ImaJf7nbY-2048.jpeg?v=10f338a8726f\" alt=\"A tree blocking the road after a storm forcing a detour on the ride\" width=\"2048\" height=\"1536\"></picture>\n<p>I love it. I think I feel better overall. Yesterday was a really nice day, though, and makes me look forward to Spring now that it’s here. I’ll check back in July when that heat sets in. …</p>\n",
      "date_published": "2025-03-20T00:00:00Z"
    }
    
  ]
}