This is a weekly newsletter on the Software as a Service world. Learning, building, and shipping. Written by Ethan Mick.

This week, I've started building out "A Bit of SaaS," the Product. I'm building ways for you to develop your applications faster and better. Let me know what you wish you had when you put together your application.

The Best Bits

• This website is dedicated to hating modals.
• Serverless Postgres, with a free tier.
• Make animated text gradients or try shimmering text.
• Implement DNS in a weekend, a fun learning exercise.

How much is it worth to pay for laziness?

This past week I started building my SaaS to help you make yours. Pretty quickly into it, I started looking at where I was going to host my Postgres database. There are lots of options:

• Self-hosted
• Supabase
• Vercel Postgres
• AWS

etc, etc.

It's not a secret that anything hosted for you will cost more money. The more work you don't do, the more you pay for convenience.

But how much is that arbitrage these days?

If you self-host on Digital Ocean, you can get 1 GiB Memory, 1 virtual CPU, and 25 GiB of SSD storage for... $6 a month [0]. Now, you need to install and run Postgres yourself, but I have a guide for that. It takes about 5 minutes to set up.

Switching to Digital Ocean's managed Postgres provider for the same specs will cost $15 a month [1]!

Supabase has a free tier, which is excellent for getting started. Once you pay, the lowest tier is $25 a month [2]. It's per project as well, so if you want to separate your projects, you'll need to shell out quite a bit.

I looked at Vercel's serverless Postgres to see if it would be a good fit. You have to dig to find the limits and pricing, but for free, you get 256 MB of storage and 60 compute hours with 1 database. If you have a Pro plan, that bumps up to 512 MB of storage and 100 hours of compute.

That's... not a lot. A month is ~700 hours, which means if your database is used often, you're going to burn through that quickly. Depending on your app, you might be paying extra from the get-go.

It's also very hard to know exactly how much you'll be paying with all these extra fees that can be snuck in. If your database is not used a lot and then you release a new feature that pings it every 5 minutes, you will be hit with an extra $60 a month. And that's not heavy usage of a database!

The kicker of all of this, in my opinion, is that Vercel is partnering with Neon to host the database. Vercel doesn't host the database at all. They're just handling the user interaction and passing the technical requests to their partner. So what about the partner pricing?

If you sign up and use Neon directly, you get 3 GiB of storage for free! And for storage costs, it's $0.11 GiB/month, but Vercel charges the exact same thing at $0.30 GiB/month.

That's the convenience arbitrage.

Where do you fall?

Learn to build SaaS

I completed and posted the third and final video on making a fantastic button. This button is also the start of my component library, which I'll share more about later. It all goes together with "How can I help you build your product as fast and well as possible." I win when you win.

For this guide, we switch to React Aria and wire it up with hooks. In the past, I've used Framer Motion to handle the button changing size when it's pressed, but this time around, I wire up data-* props and use CSS transitions instead.

It's pretty awesome. Take a look!

Blog Post

Here is the blog post that goes with the video.

Advanced Button - React Component

In our last post, we improved the button to give it variants, a loading state, and to use forwardRef so it plays well with other components. The button functions well, but it has some issues across different devices. To solve these issues, we’re going to have to get really deep

Build SaaS with EthanEthan Mick

Tech Tip

I was doing some Docker work this past week and wanted to execute a binary within the container. The problem was, when I built it on my Mac and then moved it to the Docker container, it wasn’t the right format. It was being built for ARM (my M2 MacBook Pro) instead of x64.

I could not, for the life of me, get it to compile in the right way. So instead, I forced the docker image I was building and using to be x64 instead of ARM. Docs here.

You can do this in one of two ways. Either in the Dockerfile itself:

FROM --platform=linux/amd64 node:lts

Or you can do it from the command line:

docker build --platform linux/amd64 -t organization/image .
docker run --platform=linux/amd64 organization/image command

Go forth and build!

Cloud Chronicles

• 🎉 YouTube Subscribers: 1,180 (+61 in the last 7 days)
• Newsletter Members: 218 (+9 in the last 7 days)

We’re back on the content train! I have several videos and guides coming out, and I’m aiming for them to be released once a week. I also have some ideas for shorts that might make for some quick consumable content, but I haven’t executed any of those yet.

I’ve started building out the product behind “A Bit of SaaS.” I want the site to be many things:

1. This newsletter; move it from my domain to its own domain.
2. A SaaS that provides features you can use to build yours. Things like Form backends, feedback gathering, feature flags, and i18n management.
3. My personal component library
4. Variations of those components that you can copy and paste.
5. A SaaS starter project. This probably will cost money and jump-start you.
6. A community discussion board/discord.

It’s early on, so let me know if you have any ideas!

Last Byte

• Use pkg to compile node scripts into standalone executables.
• A no-code website editor.
• Take a look at GitHub Copilots instruction set for its new GPT-powered chat.
• Non-sequitur: Modding Age of Empires II to have custom sprites (this was my favorite game growing up).