Author: chris

Sound Buttons is an intentionally tiny, mildly meditative, app for your iPhone. Find it here: https://apps.apple.com/us/app/sound-buttons-tiny-music-toy/id6743234562

Why did I make this?

I made Sound Buttons in order to try out a few things:

• Reacquaint myself with React Native
• Make something small and game-like
• Tinker with LLMs in the coding process

Overall, this was a successful project! More on each of those points below:

React Native

I’d last tried React Native about 4 years ago. My experience with it came up recently in an interview and I wasn’t satisfied with my current knowledge, so I set out to make a small toy app to prove that I could go from concept to something live in the iOS App Store built on React Native.

As is typical with greenfield projects the hardest part is figuring out the tooling and workflows. React Native is pretty good these days! The less said about the developer experience of the App Store the better. 

One thing I appreciate about React Native is the ability to start the app in the terminal, open a simulator, make changes to the code, and see them represented in the simulator with minimal fuss. I’ve done a handful of games in Unity and the process of seeing a Unity game in a simulator would take a LOT longer back in the day. We are making progress!

The component tree in this app is an Index route where we enter the app and handle some high level setup and a component that’s reused for the buttons themselves. The buttons have logic to handle pressed events that changes their animations and updates their background colors.

Game-like

Steve Kemsley, my collaborator at Scope Creep Studios, and I keep gravitating towards making small meditative and minimalist experiences (although, go check out Bug Drop! if you want to play a pretty great platformer). Sound Buttons was also born from that sensibility. What if the primary and only interaction was just tapping buttons and hearing some nice sounds?

With that as the hook for the project I fired up React Native and the Expo framework and started to explore Expo Audio to handle the sound. The circles are HTML/CSS and are animated with react-native’s built-in Animated library.

Steve tried out my first iteration with some test sounds I’d dropped in and immediately texted back:

He was, of course, right and way too kind about it. A few hours later he delivered a folder of mp3s for an expanded sound palette. I added them to the build and sent it off to the app store for review.

LLMs

On the LLM front, I wanted to see how ChatGPT could help me get acquainted with new libraries. For something like this where you mostly need search documentation for correct syntax it’s fantastic. My first use case was in building the sequence of animations. I knew the Animated library would support the things I needed (opacity and x/y positions) even if I wasn’t sure of the ins and outs of the API. Asking ChatGPT to build that sequence gave me a block of code that was not quite right; however, gave me enough context to tweak it from there.

I also used it to reformat some repetitive imports for me. There are 15 sound files in the app, instead of writing each line myself I gave ChatGPT this prompt:

“Given this string, repeat it 15 times but replace 1 in the string for the next number in the sequence: const sound1 = require(“./Sounds/1.mp3”);”

It easily gave me:

const sound1 = require("./Sounds/1.mp3");
const sound2 = require("./Sounds/2.mp3");
const sound3 = require("./Sounds/3.mp3");
// etc.

Could I have done that in another way? Yes, absolutely. I’m sure VIM users are screaming right now about how I wasted my time. Heck, I bet excel could do it even faster. However, it was fast enough for something quick like this. I could see formatting being a strong use case for integrating LLMs into text editors.

Lastly, for kicks I sent the text of this post through ChatGPT and asked it to rewrite it for LinkedIN. I hated the result! If I was on a deadline to get something handed in I might have felt differently about what it gave me.

What did I learn?

I feel much more confident about the current state of React Native and it’s nice to get my head back in the space of thinking about making games again! I’m still a curmudgeon about LLMs for certain things, although do find value in them for documentation lookup style tasks.

And, if Sound Buttons gets any updates I have plenty of ideas for what to do next. It probably needs a settings page to tweak colors, shapes, speeds, and sounds. And a credits screen as well. Maybe a way to track how many buttons you pressed during each session? There’s always more to do! I’m confident that the structure of the app can easily support those new features, which is a great place to be for an initial launch.

Go check out Sound Buttons on the iOS App store!

Always fun opening an old code base!

Years ago a friend and I published an iOS app that we designed for our (at the time) toddlers to play. It’s a really simple colors, shapes, and sounds app that is purposefully designed to not be annoying for parents. That’s an underserved niche on the app store!

It’d been a while since we did an update and Apple had pulled the app down. I finally got a spare day to open up the project and get it updated. For the most part the update involved getting it to work with the modern version of Unity and then ripping out and redoing our audio engine. The plugin we relied on was no longer usable. I reworked it to use Unity’s audio engine instead. Then fought with app store connect off and on for a day and now we’re back in business:

Night Lights Toddler Toy on the iOS App Store

A year or so ago I was working with an intern who was new to TypeScript. It made me realize that getting up to speed on syntax for types can be somewhat tricky. At the time it was hard to google for answers to basic questions (I think the age of LLMs being everywhere has mostly made this easier). I wanted a one page cheatsheet for the basics of using TypeScript to be able to point people towards.

“Go read the docs” is great advice for someone who knows what they are doing and less great if you’re lost in a sea of brand new information.

This is by no means exhaustive. The idea is that this is a quick reference for basic information. If you think there’s anything that you consider “basic” that should be here, let me know!

// Setting types for a variable:
let foo: string;
foo = "string";
// Will result in an error of: "Type 'number' is not assignable to type 'string'."
foo = 1;

const bar: number = 1;

// Define a type to be used as an argument
type ArgumentType = {
  name: string;
  anotherProperty: string;
};

// Define another type that'll be used as a return type
type TypeUsedForReturn = {
  returnString: string;
};

// Interfaces use a slightly different syntax
interface UnusedInterface {
  name: string;
  anotherProperty: string;
}

// Syntax for an arrow function with typed args and a return type
const arrowFunctionName = (argument: ArgumentType): TypeUsedForReturn => {
  const { name, anotherProperty } = argument;
  return {
    returnString: name,
  };
};

// The same as above written as a plain function declaration
function functionName(argument: ArgumentType): TypeUsedForReturn {
  const { name, anotherProperty } = argument;
  return {
    returnString: name,
  };
}

// Arrow function with destructured args and a defined return type
const arrowFunctionDestructured = ({
  name,
  anotherProperty,
}: ArgumentType): TypeUsedForReturn => {
  return {
    returnString: name,
  };
};

// The same as above written as a function declaration
function functionProperty({
  name,
  anotherProperty,
}: ArgumentType): TypeUsedForReturn {
  return {
    returnString: name,
  };
}

// Alternatively, make a type that defines args and a return type for the whole function:
type TypingAFunction = (argument: ArgumentType) => TypeUsedForReturn;
const arrowFunctionWithType: TypingAFunction = ({ name, anotherProperty }) => {
  return {
    returnString: name,
  };
};

// Use angle brackets when defining a function with a type
function functionWithType<TypingAFunction>({ name, anotherProperty }) {
  return {
    returnString: name,
  };
}

// Typing when the function does not return anything
type TypingAFunctionWithNoReturn = () => void;
const noReturn: TypingAFunctionWithNoReturn = () => {
  console.log("This space intentionally left blank");
};

// Inlining your types
const inlinedTypes = ({ name, foo }: { name: string; foo: number }) => {
  console.log("This space intentionally left blank");
};

Recently picked up a used Denon DP-300F for a very good price from FB Marketplace. The price was due to a few issues it had that I was pretty sure I could fix. The seller disclosed the first one and the second one was a surprise:

• When you hit play or stop the tone arm wouldn’t raise up enough and would drag the needle on the record
• The audio was about 5% too fast

Both adjustments, now that I have done them, were easy to do with a few screwdrivers. I’m writing this post to serve as a reference for myself and hopefully for someone else out there who has the same issue and doesn’t want to go digging through forum posts and youtube videos like I did.

Travel Issue

For the travel issue there’s a screw on the lifter that if you turn will set how high or low the arm moves when using the automatic start/stop feature. Move the lifter lever in the up position and move the tone arm out of the way to access it. You’ll need to fiddle with a bit to get it right.

Speed Adjustment

Adjusting the speed is trickier. I’m not sure why Denon buried the adjustment. I guess aesthetics? Anyway, it’s on the base of the turntable and there’s a slot for the 33 and 45 speeds. You have to put a screwdriver through the hole and then push it through a foam membrane to get to the trim pot. Since you’re doing this essentially blind it is way harder to locate than it should be!

This post on the VinylEngine.com forum was key to understanding what is going on:

The pot (adjustment) knobs are an open (female) plus sign design. This means a too big screwdriver will not fit through the pot frame hole and a too small screwdriver falls through the open + slot. The correct size is about the width of a dime. You can lay your screwdriver with blade perpendicular to the table up against a dime and run your fingernail across to feel which is taller. I’ll say up to a penny will work but at a penny it starts dragging on the pot frame. 

The pots rotate about 340 degrees (almost full turn; typical for pots) with some drag. If you think you are turning several times with no effect, you are not turning the pot.

Recommend, even with the right size, doing this unpowered or with a plastic / nylon screwdriver since you can blow the motor op-amp very easily. The pots are soldered to the underside of the board here. Holes in the board provide some guidance, but also hot spots when powered.

I’ll note that if you touch the metal screwdriver to metal inside of the record player it will short it and make the motor run as fast as it can! I used the RPM app to adjust the speed and it requires you to put your phone on the platter itself (raised up in the center on something circular like a tape dispenser roll). Whenever I shorted it it would send my phone flying off due to centripetal force (someone fact check me on my physics knowledge)!

You really do need to use a dedicated screwdriver for this, not a bit. If, like me, you try a bit the shank will likely be too wide to allow you to get the depth that you need and you will think you are adjusting the pot when you are not.

What you’re looking for is a set of “precision screwdrivers” or jeweler’s screwdrivers. I ended up buying this set from Home Depot and using the 1/16″ flathead. Anything along those lines should work.

Here’s what the holes look like. Again, there’s some foam you push the driver through:

This setup worked well for adjusting it. Open the cover to provide a counterweight and then hang the front left foot off of the edge making sure the other three are securely there.

Then you can reach underneath to put the screwdriver in there and start moving it around until you get purchase on the trim pot and can adjust the speed:

I’ve been very happy with my move to Namecheap for hosting. The only downside so far has been their SSL certs. They don’t support Let’s Encrypt in their cpanel and instead make you pay for certs. The first year, however, is free! Well, it’s been about a year and I started to get emails about renewals. Reasonable prices, but would have added up to a lot for the number of websites I have on their service.

I went looking around for a way to do certs via let’s encrypt and finally found this guide that uses Acme to add/handle certs:

Simple guide to add TLS cert to cpanel

If all goes well about once a day it’ll check to see if I need a new cert and handle it for me.

March 12 2025 update: nope, happening with Plexamp as well. Guessing this is just a problem with the Caldigit dock and M1 macbooks. It does seem to get worse the more than is going on with my computer. Probably related to system resources.

Feb. 24 2025 update: I switched to using a usb-c to headphone jack adapter (still connected to the Caldigit) to see if that would have any effect. Still the same issue. Recently though I’ve started using Plexamp as my music player and that’s been rock solid. My guess is there is something up with a library or API for playing audio that Plexamp does not use and the others do use.

Jan 12 2024 update: Zoom is definitely triggering the issue. Turning off the EQ in spotify has solved it for Spotify. I think when Zoom is trying to aggressively process audio it can sometimes trigger the issue across the system. Leaving the zoom call fixes it. As near as I can tell there isn’t a way to adjust Zoom’s settings to fix it.

Dec 19 2023 update: Zoom seems to trigger this issue somehow.

Currently attempting a fix by disabling the equalizer in Spotify. Will update this post if that doesn’t work.

This is one of those “blog about it to save someone else the hassle later on”: I use the Caldigit TS3+ dock with my M1 macbook(s) and have had a persistent issue with audio playback slowly becoming garbled and distorted when listening to music in Spotify. For whatever reason it seems that selecting a different audio source and then going back to the Caldigit one fixes it for a while.If I plug the audio cable directly into my macbook it never seems to have a problem.

The actual audio input shows up as a USB 3.0 device in System Report called: “Caldigit Thunderbolt 3 Audio”.

It also seems to effect Zoom, although I haven’t determined if that’s because Spotify is also open at the same time Zoom is open.

Something I discovered today buried in a forum is that the Spotify Equalizer might be a problem. I’m going to disable that and see how it goes for a few weeks. An hour in and it seems to be doing better.

There was a surprisingly robust hardcore music scene in the extremely suburban county I grew up in. I was never fully in that world for a lot of reasons; however, I hung out on the periphery and have a fondness for it.

Recently I ran across the work by Dave Hofer to digitize the music and video from that time period. It’s amazing to me just how much of that exists! This was before the ubiquity of cell phones and digital cameras. Apparently a lot of people thought to record what was going on and I’m sure I rolled my eyes at this effort back then and now I’m very glad for it.

Hofer’s youtube channel is full of concert videos and it’s wild to watch these. The music is often unlistenable (a really “you had to be there” sort of sound), but seeing glimpses of people I knew back in the day having a lot of fun playing music or just jumping around is delightful.

Strength in Numbers

I quickly scanned through this video and while I don’t think I was at this concert I was definitely at similar show in that basement for Strength in Numbers. As a parent I have to admit I’m a little alarmed at all these kids throwing elbows in a finished basement. That said, I also not-so-secretly hope my kids do the same someday: