A Bit of SaaS Weekly: Chill and Vibe

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

Correction: An astute reader wrote in and pointed out that the code and output of the tech tip section didn't match. I had originally written the code for light backgrounds, but the output didn't look good on dark backgrounds. When I updated the code, I forgot to put the new version in the newsletter. Thanks, Brian! You get a ⭐️.

The Best Bits

• Going paperless.
• 300+ Tailwind components for your site.
• How Instagram scaled to 14 million users with only 3 engineers.
• An open-source micro framework for observability.

What's in a UUIDv7

UUID Version 7 (UUIDv7) is a time-based identifier that encodes a Unix timestamp with millisecond precision in its first 48 bits. Of the entire UUID structure, 6 bits signify its version and variant, while the remaining 74 bits are randomized.

    0                   1                   2                   3
    0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |                           unix_ts_ms                          |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |          unix_ts_ms           |  ver  |       rand_a          |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |var|                        rand_b                             |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |                            rand_b                             |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

Due to its time-ordered design, UUIDv7 values are essentially sequential, resolving the index locality issue prevalent in databases. This sequential nature of UUIDv7 offers better database performance compared to the random design of UUIDv4. A study from the 2nd quadrant blog demonstrated that sequential UUIDs outperform random UUIDs in both writing and reading tasks.

Importantly, UUIDv7 maintains the standard UUID structure, ensuring it's compatible with systems currently using other UUID versions. This makes transitioning from UUIDv4 to UUIDv7 in systems like Postgres straightforward.

In my applications, I've been creating primary keys with the format:

prefix_UUIDv4

Where the prefix is a ~3-character identifier that identifies the resource. This makes it very easy to see what resource a key is for just by looking at it. I often take out the dashes as well to make it easier to copy.

The downside with my strategy is that the only column that works with this is text in Postgres. I can't use serial or uuid because it's neither of those things. This can lead to the same problem mentioned above, where the sequential writes result in poor index formation.

I'm excited to try the new UUIDv7 format for primary keys gaining the advantage of a time stamp as well as the uniqueness of a UUID. I will lose out on an easy identifier in that transition. We'll see if it's worth it.

Tech Tip

Some sites will use the favicon as an icon that can change depending on the site status (such as an alert or dashboard). You can do this easily with React:

import React, { useState, useEffect } from 'react';

function FaviconChanger() {
  const [faviconState, setFaviconState] = useState('default');

  const faviconMap = {
    default: '/path-to-default-favicon.ico',
    alternate: '/path-to-alternate-favicon.ico',
    // ... you can add more states and associated favicon paths here
  };

  useEffect(() => {
    let linkElement = document.querySelector("link[rel*='icon']");

    if (!linkElement) {
      linkElement = document.createElement('link');
      linkElement.type = 'image/x-icon';
      linkElement.rel = 'shortcut icon';
      document.getElementsByTagName('head')[0].appendChild(linkElement);
    }

    linkElement.href = faviconMap[faviconState];
  }, [faviconState]);

  return (
    <div>
      <button onClick={() => setFaviconState('default')}>Set Default Favicon</button>
      <button onClick={() => setFaviconState('alternate')}>Set Alternate Favicon</button>
    </div>
  );
}

export default FaviconChanger;

You can add this logic to another component instead of making it a separate component.

Cloud Chronicles

• YouTube Subscribers: 4,205 (+131 in the last 7 days)
• Newsletter Members: 781 (+27 in the last seven days)

My contract is going well! I'm ending week three, and I feel like I have my feet under me. I'm starting to impact some change at the company, and that feels good. I've also been reading The Subtle Art of Not Giving a F*ck to see if that imparts any wisdom with my approach to running my business.

Last Byte

• Making hard things easy.
• A modern Wine wrapper for macOS to run Windows games on Mac.