3 min read

A Bit of SaaS Weekly: Unplug into Summer

A Bit of SaaS Weekly: Unplug into Summer
Vermont

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

I enjoyed a long weekend in Vermont with my family. I tried my hardest to disconnect and take it slow. It was quite enjoyable; I highly recommend it.


The Best Bits

  • Open-source QuickBooks for running your business.
  • This neat open-source QR code generator that embeds logos.
  • Zod, TypeScript-first schema validation with static type inference.
  • Windmill, self-hosted cloud functions.

Building a Builder

I'm working on a SaaS builder built around Next.js. It will create the template for your SaaS project and get the boilerplate code out of the way. It will have a long list of features, but I'm just getting started at the moment.

The trick with the builder is to allow the user flexibility while not creating complicated code. I can't have the downloaded project include a lot of if/else statements to turn features on or off. All the code needs to be clean and focused.

Therefore, the complexity needs to be on the builder's side.

To build this out, most of the files are going to be templates that have logic in them depending on the parameters passed in. For example, to create the custom login page with Tailwind, the resulting template will have one set of markup. But then, switching the template to just using CSS modules will have a very different result.

I'm using Nunjucks to build out these template files. Nunjucks lets the logic live in the templates, and I can just pass in the variables used to turn features on or off.

{% if variable %}
  It is true
{% endif %}

So now I just need to build out the tooling around the templates and start adding features! I'm building them as I build my tutorials so I can dogfood them whenever I need a new project built.

Let me know if you have any features you'd be interested in seeing!


Learn to build SaaS

How to use React Aria TextField with React Hook Form
React Aria has a slightly different interface for some of its properties than the native DOM exposed by React. They do this so the library is more consistent and can be used cross-platform. This, most of the time, works great. When you want to build your own complex component, you

I'm deep in building out many things at once, and this annoyance came up again. React Aria (for good reasons) has a different interface than the native underlying elements. This means, sometimes, it doesn't play nice with other libraries.

I wanted to find an elegant fix for it and finally did some research. I think the resulting solution is good, although slightly annoying that an adapter is needed.


Tech Tip

A while ago, Docker switched how it built images to BuildKit. This resulted in better builds, but it also removes a lot of output. I was having trouble debugging an image the other day and wanted to get all the output, not just the high level stuff.

Turns out, there's a flag you can pass to turn that all back on again.

--progress string   Set type of progress output (auto, plain, tty).
                    Use plain to show container output (default "auto")

Go forth and build!


Cloud Chronicles

  • 🎉 YouTube Subscribers: 1,248 (+68 in the last 7 days)
  • Newsletter Members: 236 (+18 in the last 7 days)

I feel like I'm making progress on all my projects, but since I'm doing so many at once, nothing concrete is being done. For now, I'm okay with the chaos. I'm still prioritizing getting some more content out and the freelance work, but allowing myself to work on other projects as they need to be pushed forward.

I'm thinking of restarting my weekly update; or something similar, that'll go deeper into the details of what I've done over the past week. A wonderful reader (👋) reached out and let me know they really liked them. It's not all rainbow and butterflies as I figure things out each week.

Let me know if that would be interesting to you!


Last Byte