S.R. Wild

Raspberry Pi Infrared Camera

Sun, 08 Feb 2026 16:32:45 GMT

I’ve been working on building an infrared camera with a Raspberry Pi. I took it to the beach to take some test shots. A partially cloudy evening was not an ideal time, and the photos are still unedited DNGs, but I can see the potential. By spring, I will have all the kinks worked out in time for actual foliage and sunny days.

There are some issues. Focus is unpredictable; the capture script requires adjustment. The biggest issue is guessing what the composition is, so I need to add some sort of viewfinder. Unpredictability is fun and all, but….

Eventually, when I get a good working prototype, I’ll house it in a wooden box to make it aesthetically pleasing and user-friendly. I’m imagining a wood box like early cameras.

I got the idea from this post where someone converted a camera into an infrared camera using a Raspberry Pi. I really liked the photos with vegetation. Looking at the parts and code, it seemed pretty straightforward to me. I used what they did as a starting point.

Sure, I could convert an old DSLR to infrared, and I probably will someday, but I like building things and doing things the hard way.

The parts

Raspberry Pi Zero 2W
Raspberry Pi Camera v3 NoIR
OLED display
Momentary on switch
USB battery pack. I’m looking for a better solution.
Cardboard boxes
720nm infrared filter. It replaced the DIY filter: unexposed, developed film.

Notes of note

The script is written in Python.
Photos are saved as DNGs.
The sensor is 12 MP. The quality is better than I expected.
Total cost so far is about $75. The IR filter was a third of the cost!

Roadmap

Add a viewfinder.
An enclosure that is not a janky cardboard box.
Write files to an external SD card. Currently, I have to remotely connect to the camera over SSH in the command line to download the photos.
Battery that’s in the housing and not stuffed up my sleeve.
Manual control. It’s currently all automatic.
Add an intervalometer. I’d build that separately so I could use it on other cameras. That’s another rabbit hole.

Accessible Kaomojis

Sun, 09 Nov 2025 16:32:45 GMT

Kaomojis are emoticons that use a combination of text characters to represent faces and other visuals. The precursor to emojis we know and abuse. For example, (╯°□°)╯︵ ┻━┻ or ¯\_(ツ)_/¯, ᘛ⁐̤ᕐᐷ, or the classic :(.

When a screen reader announces them, it’s frequently not helpful. For the table flip kaomoji, VoiceOver announces the characters and symbols in Japanese that aren’t words or sentences, as far as I could tell. Interestingly, VoiceOver announces the frown kaomoji as “frown,” which makes sense since it’s a common one that’s been used for decades. Emojis, on the other hand, are usually announced with helpful descriptive text. 😹 is announced as “laughing with tears cat face.”

To make kaomojis and other text-based visuals accessible, add role="img" and aria-label. For more details, read the Web Accessibility Initiative’s (WAI) article Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak.

<span role="img" aria-label="Person flipping a table">(╯°□°)╯︵ ┻━┻</span>

I do wonder if using visually hidden text would be better because some browsers don’t translate aria-label. Although, copying the text would copy the visually hidden text along with the kaomoji. I may be overthinking it.

If you want to get sidetracked and go down an emoji rabbit hole, Face with Tears of Joy: A Natural History of Emoji sounds fun. I haven’t read it yet; it’s on my list. He also wrote Shady Characters, which is a wonderful book. Isn’t it‽

Did you know?

Some emojis are made up from other emojis chained together with a zero-width joiner (\u200D). I was blown away when I first learned about this. Useless trivia? Maybe not. This could be useful to know if you need to do character counts that contain emojis because 🐻‍❄️ is four characters long!

'🐻‍❄️'.split('\u200D');
// [ '🐻', '❄️' ]

'👩‍🔬'.split('\u200D');
// [ '👩', '🔬' ]

'👩‍💻'.split('\u200D');
// [ '👩', '💻' ]

Case-insensitive Git

Sat, 24 May 2025 00:00:00 GMT

Changing the case of a file on macOS or Windows won’t be recognized by Git. git mv MY-FILE.txt my-file.txt can be used to tell Git it changed. On Linux, which is case-sensitive, Git does recognize the change. How did I learn this?

I was building an Astro component to dynamically render SVG components. It’s passed an SVG’s filename as a string, gets all the SVGs as components, finds the right one if it exists, then returns an SVG component — I’m oversimplifying things, it does more.

When I deployed to Netlify, two SVGs weren’t showing. My work wasn’t complete when I deployed because I wanted to show a coworker what I was working on. I figured I did something silly. Scrolling through the deployment log, I saw Cound not find "my-file.svg". But, it was there. I thanked myself for including an error message and got to work.

I cleaned up the code, added some more error handling, nitpicked, then redeployed. The two SVGs still weren’t showing. “I don’t like that”, I muttered.

In the component, I temporarily added a console.log() to print all the SVGs that were being found, and redeployed. After the deployment finished, I scrolled through the long log, and found where all the SVG names were being dumped. I didn’t notice right away, but then I saw My-File.svg in the array of SVGs. Locally, the filename was my-file.svg. That’s it!

I went into the markdown file that set the SVG name in its frontmatter, and changed it to all caps. Now, locally, the SVG wasn’t loading because it was looking for the file in all caps. I found the file, changed it to all caps, then staged the fi… there wasn’t an SVG to stage. I was confused, but then realized Git wasn’t case-sensitive. For kicks, I tried it on Linux, since that’s what Netlify uses, and it did recognize the case change. It all made sense now.

I changed the filenames back to their original names, then ran git mv File-Name.svg file-name.svg on each one — there were only two, so no need for a Bash script. I deployed again, and was relieved to see all the SVGs were there. Finally.

What happened is I changed my mind on the naming convention of SVGs. At the same time, I was adding more SVGs. I didn’t notice the renamed files weren’t being committed because of all the other SVG noise.

I was reminded of a few things. If the case changes had been separate commits, I would have noticed. Error handling is a good friend. And, of course, I should have written tests in Vitest and Playwright from the start.

I know there’s a way to configure case sensitivity locally, but I would rather not do that. It seems like it could make a mess when working with others, always think about other people. In addition, I know there are multiple puns available to use in this post, but I will not use them. I don’t like puns. Lastly, this is really long, but I’m trying to get better at writing.

CSS Console Log

Sun, 18 May 2025 19:04:27 GMT

I have an Alfred snippet !or that spits out outline: dashed 1px red;. I use it numerous times a day to test if a class is working or finding an element on a page. Using outline prevents elements from resizing. I also add a consolelog class to my CSS with the same outline property, which is useful for testing conditionally displayed classes.

Alpine Content Link

Sat, 19 Apr 2025 16:32:45 GMT

A frequent component to build is a card. I’ve built many. A common request is to make the card “clickable” — a not so distant relative of “make it pop”. Or, in other words, make the card a link. Click card, something happens.

Usually, developers wrap a card in an a element. Which, if you test it with a screen reader, it will announce it as a link, and then all the content in there: image alt text, text, subtitle, or whatever. That’s not helpful for screen reader users. It will also prevent people from selecting the text or right-clicking on the images to download. And, it looks gross.

<!-- DO NOT DO THIS -->
<ul>
  ...
  <li>
    <a href="/nowhere">
      <img src="blep.jpg" alt="Cat with a blep, holding a pen" />
      <h2>Cat Doctors of Space</h2>
      <p>Something something content content stuff and things, oh yeah.</p>
    </a>
  </li>
  ...
</ul>

Instead, the heading should be the link. I can’t recall who said it, but a card is a mini webpage. You wouldn’t make your entire page a link now, would you? No, you would not do that. However, moving the link to the heading, the card has no clicking powers.

In Heydon Pickering‘s Cards chapter in Inclusive Components, they go over solutions for card links — the book is a valuable resource. I used their solution, but wanted something a little easier to work with. Like, add an attribute, make client happy, dramatically close laptop and walk away.

I use Alpine on pretty much every project. Unless I’m being a snobby purist(?). I usually create a custom Alpine directive in the codebase for card links. This is fine, but wouldn’t it be easier to install a package? Having more dependencies is always a good idea, so I created Alpine Content Link.

Here’s an example of how to use the Alpine content link. For working examples, visit the Code and Work index pages of this site.

<ul>
  ...
  <li x-data x-content-link>
    <img src="blep.jpg" alt="Cat with a blep, holding a pen" />
    <h2><a href="/nowhere">Cat Doctors of Space</a></h2>
    <p>Something something content content stuff and things, oh yeah.</p>
  </li>
  ...
</ul>

Obviously, since this is my first npm package, I’m sure I’m doing something wrong — I ooze confidence. If so, please let me know, just don’t be a wet sock. I obsessively winged it until things worked and were moderately clean. Making mistakes is a great way to learn, as long as no one gets hurt, like in life.

Safe journeys, web fans… wherever you are.

Starting Over Again

Tue, 01 Apr 2025 00:00:00 GMT

Jeepers, this is like the 20th time I’ve rebuilt this site. Very few have actually launched. No one but me has seen them, and I’ve forgotten most of them.

I’m starting fresh. Except My Best S, which I’m proud of, all the old content, what little there was, is gone. Poof. Archived in a folder or git repo, never to be seen again. I don’t know, things change, I change. It’s good to start over. I don’t need or want to preserve everything I’ve ever done or said. Let’s be honest, I doubt more than a few people will actually read this. If you are reading this, hi.

This version of the site had been in the works for months. It’s not done, nor will it ever be. I’d rather have something up right now that’s better than what I had. Building a site for yourself is hard. I’m never happy with it, and I constantly change it and break it.

That’s the point of a personal site. It’s something to experiment with. There are no rules, or people to disappoint.

For the current version of this site, I’m using Astro. My previous site was in Eleventy, Jekyll before that, and Textpattern before that. Although I absolutely adore Eleventy, I wanted to try something new.

Brief rundown of what I’m using.

Astro
Lang by Arrow Type
Alpine, but there’s not much JavaScript on this site
SCSS
TypeScript
Netlify
Deno I had to switch back to Node because Deno 2.0 doesn’t work with Netlify without some work. Deno is rad, though. I’ll switch back to it when I can.
Playwright
Vitest

Astro has been fun, and I’ve learned a lot. I’m also using it to build a new site for the agency I work for. Like most of my side projects, my professional projects benefit from them.

I don’t need a Content Management System (CMS) for this site. A CMS is overkill for a lot of sites. I write in Markdown, static site generators work with Markdown. The time I’d spend setting up a CMS could be spent doing more important things, like adding Easter Eggs.

This not a good post. To be honest, I just wanted to write something, so I had at least one post on the site when I launched it. If you’ve read this far, wow.

My Best S

Sun, 15 Jan 2023 00:00:00 GMT

I think this is the best S I’ve drawn. Ss are really hard to make. It’s not perfect, but I’m very pleased with it.