Devin Riegle's Blog

Pilot

Thu, 31 Dec 2020 00:00:00 GMT

Hi there.

My name is Devin. Welcome to my blog. I'm just getting it all setup and tweaking the right way. I'm using Gatsby and Netlify and it has been really fun getting setup.

I'm excited to start writing on a regular schedule now that this is setup. I'm planning to post once a week. I have a lot of ideas tech and finance related that I'm excited to share. I'll also be sharing more about my journey into tech and the tools and resources I used to learn to code.

If you'd like to learn more about me now to decide if you're interested, check out my about me page.

2021 Goals

It's New Year's Eve and I'm tired of 2020 and I'm SO glad to reach the last day of this year, so let's set some goals.

I'm trying to set realistic goals this year. I had some super ambitious goals for 2020 and it was hard to reach them. They were the kind of goals where you felt like you failed if you didn't do them from Day 1. I'd rather set goals that I could reset each month/quarter instead.

If I fail to read 1 book in January, then on February 1st, I can start again. If I do it 11 months out of 12, I'll still feel successful.

Read at least 1 book per month
Write 1 blog post per week
Take more vacation time
- I did not take enough time off in 2020 and I'm feeling it.
Travel more
Upload 1 Youtube video per quarter.
- I know this should be more if I want to build my channel, but I only have a few videos on there now from late 2019 and I still get subscribers and views from it. I'm at around 8.3k total views now. Hopefully I can grow that in 2021.

Happy New Year to you and your family. Let's all wish that 2021 will be a better year than 2020.

Use Netlify Functions to upload files to Google Drive

Sat, 05 Jun 2021 00:00:00 GMT

I recently worked on a project where the client wanted to upload images to Google Drive from their Wordpress site. They wanted a custom built image uploader that could allow the users to drag and drop their photos to order them and then upload to a Google Drive. I'm going to talk about how I used Netlify Functions to solve this problem and how you can use Netlify Functions for almost any type of backend logic that you need.

I've had great success working with Netlify both for hosting frontend projects and for hosting Lambdas with their Functions product. The best part about Netlify is that almost every time I work with it, it just works. There are very few CI/CD tools that provide that same reliability.

Add the busboy package:

yarn add busboy

Let's start with a basic handler and the structure that we want:

export const handler = async (event) => {
  try {
    if (!event.body || !event.isBase64Encoded) {
      return {
        statusCode: 400,
        body: JSON.stringify({
          message: "no data",
        }),
      };
    }

    // Attempt to process file and fields sent up in the request using busboy

    // Upload to Google Drive

    // return the file ID and URL for viewing on the client

    return {
      statusCode: 200,
      body: JSON.stringify({
        fileId: ''
        fileUrl: '',
      }),
    };
  } catch (error) {
    return {
      statusCode: 400,
      body: JSON.stringify({ error }),
    };
  }
};

Now let's add our code to pull the image data and any fields out from the event:

export const processImageUpload = async (event) => {
  return new Promise((resolve, reject) => {
    const busboy = new Busboy({
      headers: {
        ...event.headers,
        "content-type": event.headers["Content-Type"] ?? event.headers["content-type"],
      },
    });

    const result = {
      fields: {},
      files: [],
    };

    busboy.on("file", (_fieldname, file, fileName, encoding, contentType) => {
      console.log(`Processed file ${fileName}`);

      file.on("data", (data) => {
        result.files.push({
          file: data,
          fileName,
          encoding,
          contentType,
        });
      });
    });

    busboy.on("field", (fieldName, value) => {
      console.log(`Processed field ${fieldName}: ${value}`);
      result.fields[fieldName] = value;
    });

    busboy.on("finish", () => resolve(result));
    busboy.on("error", (error) => reject(`Parse error: ${error}`));

    // pushes the event data into busboy to start the processing and using the event.isBase64Encoded property to tell which kind of data
    // we're working with
    busboy.write(event.body, event.isBase64Encoded ? "base64" : "binary");

    busboy.end();
  });
};

import { processImageUpload } from './helpers/processImageUpload';

export const handler = async (event) => {
  try {
    if (!event.body || !event.isBase64Encoded) {
      return {
        statusCode: 400,
        body: JSON.stringify({
          message: "no data",
        }),
      };
    }

    // Attempt to process file and fields sent up in the request using busboy
   const { files, fields } = await processImageUpload(event);

    // Upload to Google Drive

    // return the file ID and URL for viewing on the client

    return {
      statusCode: 200,
      body: JSON.stringify({
        fileId: ''
        fileUrl: '',
      }),
    };
  } catch (error) {
    return {
      statusCode: 400,
      body: JSON.stringify({ error }),
    };
  }
};

Now we need to build the code to upload to Google Drive. You'll want to make sure you've created a new project in the Google Cloud Console and have credentials that allow you Google Drive access. After downloading the credentials file from Google, you can set all these values as environment variables in Netlify for your project.

function getCredentials() {
  const credentials = {
    type: "service_account",
    project_id: process.env.GOOGLE_SERVICE_ACCOUNT_PROJECT_ID,
    private_key_id: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY_ID,
    private_key: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY.replace(/\\n/gm, "\n"),
    client_email: process.env.GOOGLE_SERVICE_ACCOUNT_CLIENT_EMAIL,
    client_id: process.env.GOOGLE_SERVICE_ACCOUNT_CLIENT_ID,
    auth_uri: "https://accounts.google.com/o/oauth2/auth",
    token_uri: "https://oauth2.googleapis.com/token",
    auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs",
    client_x509_cert_url: process.env.GOOGLE_SERVICE_ACCOUNT_CLIENT_CERT_URL,
  };

  let errorMessage = "";

  for (const key of Object.keys(credentials)) {
    if (!credentials[key]) {
      errorMessage += `${key} must be defined, but was not.`;
    }
  }

  if (errorMessage.length) {
    throw new Error(errorMessage);
  }

  return credentials;
}

const getDrive = () => {
  const auth = new google.auth.GoogleAuth({
    credentials: getCredentials(),
    scopes: ["https://www.googleapis.com/auth/drive"],
  });

  return google.drive({
    auth,
    version: "v3",
  });
};

export const uploadFile = async ({ name, parents, fileContent, mimeType, originalFileName }) => {
  const drive = getDrive();

  // upload file
  const file = await drive.files.create({
    requestBody: {
      name,
      mimeType,
      parents,
    },
    media: {
      mimeType,
      body: Buffer.isBuffer(fileContent) ? Readable.from(fileContent) : fileContent,
    },
  });

  // set permissions
  await drive.permissions.create({
    fileId: file.data.id,
    requestBody: {
      type: "anyone",
      role: "reader",
    },
  });

  return file;
};

import { processImageUpload } from "./helpers/processImageUpload";
import { uploadImage } from "./helpers/googleDrive";

export const handler = async (event) => {
  try {
    if (!event.body || !event.isBase64Encoded) {
      return {
        statusCode: 400,
        body: JSON.stringify({
          message: "no data",
        }),
      };
    }

    // Attempt to process file and fields sent up in the request using busboy
    const { files, fields } = await processImageUpload(event);

    // Upload to Google Drive
    const file = files[0];

    if (!file) {
      return {
        statusCode: 400,
        body: JSON.stringify({
          message: "no file uploaded",
        }),
      };
    }

    const uploadedFile = await uploadFile(file.fileName, {
      fileContent: file.file,
      mimeType: file.contentType,
      originalFileName: file.fileName,
      parents: [fields.folderId],
    });

    if (uploadedFile.status !== 200) {
      return {
        statusCode: uploadedFile.status,
        body: JSON.stringify({
          statusText: uploadedFile.statusText,
        }),
      };
    }

    // return the file ID and URL for viewing on the client

    return {
      statusCode: 200,
      body: JSON.stringify({
        fileId: uploadedFile.id,
        fileUrl: "",
      }),
    };
  } catch (error) {
    return {
      statusCode: 400,
      body: JSON.stringify({ error }),
    };
  }
};

Let's add a quick little function to our googleDrive.js file to get the public URL so the client can view the file.

export const getPublicUrl = async (fileId) => {
  const drive = getDrive();

  const file = await drive.files.get({
    fileId,
    fields: "id,webContentLink",
  });

  return file.data.webContentLink;
};

import { processImageUpload } from "./helpers/processImageUpload";
import { uploadImage, getPublicUrl } from "./helpers/googleDrive";

export const handler = async (event) => {
  try {
    if (!event.body || !event.isBase64Encoded) {
      return {
        statusCode: 400,
        body: JSON.stringify({
          message: "no data",
        }),
      };
    }

    // Attempt to process file and fields sent up in the request using busboy
    const { files, fields } = await processImageUpload(event);

    // Upload to Google Drive
    const file = files[0];

    if (!file) {
      return {
        statusCode: 400,
        body: JSON.stringify({
          message: "no file uploaded",
        }),
      };
    }

    const uploadedFile = await uploadFile(file.fileName, {
      fileContent: file.file,
      mimeType: file.contentType,
      originalFileName: file.fileName,
      parents: [fields.folderId],
    });

    if (uploadedFile.status !== 200) {
      return {
        statusCode: uploadedFile.status,
        body: JSON.stringify({
          statusText: uploadedFile.statusText,
        }),
      };
    }

    // return the file ID and URL for viewing on the client
    const fileUrl = await getPublicUrl(uploadedFile.id);

    return {
      statusCode: 200,
      body: JSON.stringify({
        fileId: uploadedFile.id,
        fileUrl,
      }),
    };
  } catch (error) {
    return {
      statusCode: 400,
      body: JSON.stringify({ error }),
    };
  }
};

That concludes the code needed to upload one file to GoogleDrive using Netlify Functions. Let me know if you have any questions. The full code is below if you want to copy and paste to use in your own projects.

export const processImageUpload = async (event) => {
  return new Promise((resolve, reject) => {
    const busboy = new Busboy({
      headers: {
        ...event.headers,
        "content-type": event.headers["Content-Type"] ?? event.headers["content-type"],
      },
    });

    const result: Result = {
      fields: {},
      files: [],
    };

    busboy.on("file", (_fieldname, file, fileName, encoding, contentType) => {
      console.log(`Processed file ${fileName}`);

      file.on("data", (data) => {
        result.files.push({
          file: data,
          fileName,
          encoding,
          contentType,
        });
      });
    });

    busboy.on("field", (fieldName, value) => {
      console.log(`Processed field ${fieldName}: ${value}`);
      result.fields[fieldName] = value;
    });

    busboy.on("finish", () => resolve(result));
    busboy.on("error", (error) => reject(`Parse error: ${error}`));

    busboy.write(event.body, event.isBase64Encoded ? "base64" : "binary");

    busboy.end();
  });
};

function getCredentials(): Credentials {
  const credentials = {
    type: "service_account",
    project_id: process.env.GOOGLE_SERVICE_ACCOUNT_PROJECT_ID,
    private_key_id: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY_ID,
    private_key: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY.replace(/\\n/gm, "\n"),
    client_email: process.env.GOOGLE_SERVICE_ACCOUNT_CLIENT_EMAIL,
    client_id: process.env.GOOGLE_SERVICE_ACCOUNT_CLIENT_ID,
    auth_uri: "https://accounts.google.com/o/oauth2/auth",
    token_uri: "https://oauth2.googleapis.com/token",
    auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs",
    client_x509_cert_url: process.env.GOOGLE_SERVICE_ACCOUNT_CLIENT_CERT_URL,
  };

  let errorMessage = "";

  for (const key of Object.keys(credentials)) {
    if (!credentials[key]) {
      errorMessage += `${key} must be defined, but was not.`;
    }
  }

  if (errorMessage.length) {
    throw new Error(errorMessage);
  }

  return credentials;
}

const getDrive = () => {
  const auth = new google.auth.GoogleAuth({
    credentials: getCredentials(),
    scopes: ["https://www.googleapis.com/auth/drive"],
  });

  return google.drive({
    auth,
    version: "v3",
  });
};

export const uploadFile = async (
  name: string,
  {
    parents,
    fileContent,
    mimeType,
    originalFileName,
  }: {
    parents: string[],
    fileContent: Buffer | string,
    mimeType: string,
    originalFileName: string,
  }
) => {
  const drive = getDrive();

  // upload file
  const file = await drive.files.create({
    requestBody: {
      name,
      mimeType,
      parents,
    },
    media: {
      mimeType,
      body: Buffer.isBuffer(fileContent) ? Readable.from(fileContent) : fileContent,
    },
  });

  // set permissions
  await drive.permissions.create({
    fileId: file.data.id,
    requestBody: {
      type: "anyone",
      role: "reader",
    },
  });

  return file;
};

export const getPublicUrl = async (fileId) => {
  const drive = getDrive();

  const file = await drive.files.get({
    fileId,
    fields: "id,webContentLink",
  });

  return file.data.webContentLink;
};

import { processImageUpload } from "./helpers/processImageUpload";
import { uploadImage, getPublicUrl } from "./helpers/googleDrive";

export const handler = async (event) => {
  try {
    if (!event.body || !event.isBase64Encoded) {
      return {
        statusCode: 400,
        body: JSON.stringify({
          message: "no data",
        }),
      };
    }

    // Attempt to process file and fields sent up in the request using busboy
    const { files, fields } = await processImageUpload(event);

    // Upload to Google Drive
    const file = files[0];

    if (!file) {
      return {
        statusCode: 400,
        body: JSON.stringify({
          message: "no file uploaded",
        }),
      };
    }

    const uploadedFile = await uploadFile(file.fileName, {
      fileContent: file.file,
      mimeType: file.contentType,
      originalFileName: file.fileName,
      parents: [fields.folderId],
    });

    if (uploadedFile.status !== 200) {
      return {
        statusCode: uploadedFile.status,
        body: JSON.stringify({
          statusText: uploadedFile.statusText,
        }),
      };
    }

    // return the file ID and URL for viewing on the client
    const fileUrl = await getPublicUrl(uploadedFile.id);

    return {
      statusCode: 200,
      body: JSON.stringify({
        fileId: uploadedFile.id,
        fileUrl,
      }),
    };
  } catch (error) {
    return {
      statusCode: 400,
      body: JSON.stringify({ error }),
    };
  }
};

Say Goodbye to Gatsby and Hello to Remix

Sat, 01 Jan 2022 00:00:00 GMT

New Year. New Me. New Blog.

I rewrote my blog to use Remix. The latest hottest new full stack framework to hit Javascript. My previous version of the blog was using Gatsby.js. I decided to try this new framework out and try to rewrite my blog to see how it easy it was.

My original version of the blog was created on January 1st, 2021 and, as many Gatsby sites do, I had a lot of plugins. Plugins for parsing markdown files, highlighting code snippets, Google Analytics, various GraphQL plugins, plus lots of development dependencies.

Dependencies...a lot of dependencies

I counted all the dependencies up before this rewrite 29 third party dependencies in total. All this code that I needed to continue to upgrade and maintain for a simple blog that converts markdown in HTML.

Now, I've used Gatsby on a larger scale project at my last company and really enjoyed it. The plugin system and the community are pretty great. I've even contributed to Gatsby's source code in the past.

You can find a plugin for practically anything. Just look up gatsby- on npm and look at the number of results: 5,212 (as of 1/2/2022).

Why did I decide to rewrite the blog?

I've been trying to go through my open source projects and get them all upgraded to the latest versions. I want all the security patches updated and make sure they're as relevant as possible. As part of that work, I looked at my own blog. I had a pretty old version of everything because I haven't upgraded any in over a year.

I tried upgrading one package, but it required a newer version of Gatsby.
So I upgraded Gatsby.
Now all the other gatsby- plugins broke, because they required the other version of Gatsby.
I decided to just upgrade everything to the latest. The app wouldn't build because of some GraphQL issues. I checked the latest documentation and it was still using the code in the same way I was.
I realized this dependency management is way too much for a simple blog application and decided I needed something simpler.
Remix has been on my mind for awhile now. I follow the creators on Twitter and have been wanting to try it out on a project.

Remix benefits

After rewriting this blog using Remix, I've landed at 15 third party dependencies. For those keeping track, that's about half the amount I had before. I still have the same functionality as before: I'm parsing markdown and turning it into HTML. I can highlight code snippets and I'm deploying my app to Netlify.

I still feel like 15 dependencies is a lot though. I really shouldn't need this many for a blog app, but I feel like these 15 are way easier to maintain. I have separate plugins that do their little piece well. It's feels like following the Unix Philosophy and it's truly a breath of fresh air. I have a single library just for parsing markdown into HTML. I have a single library that pulls frontmatter out of a markdown file. These plugins can all be upgraded independently without breaking the others. Obviously, there are some plugins like React and Remix that have dependencies on each other, but nothing else does.

This feels like a huge weight off my shoulders. We all want to keep our applications up-to-date, but the npm world makes that hard. Remix simplifies that for us. It feels like I'm working with plain JS again. There's certainly a lot of magic to Remix, but it's good magic. It's built in a way that you don't need to worry about the magic. You see and have the ability to customize where needed and can ignore all of the internals that aren't relevant. It's extremely nice to work with. I do think Remix is headed in the right direction in terms of developer experience in the Javascript world.

How to setup a dynamic sitemap.xml file on Netlify

Sun, 02 Jan 2022 00:00:00 GMT

I recently migrated my site to use Remix hosted on Netlify. I wanted to setup a dynamic sitemap.xml file using Netlify functions. Remix already runs on a Netlify function, so I just created a separate function for returning the sitemap. Here's how I did it.

Create a new sitemap folder in your netlify/functions directory with an index.ts file inside that directory.

mkdir netlify/functions/sitemap
touch netlify/functions/sitemap/index.ts

Inside your new netlify/functions/sitemap/index.ts file, create a new handler that returns a basic XML file with no content.

import type { Handler } from "@netlify/functions";

const handler: Handler = async () => {
  const xmlContent = [
    '<?xml version="1.0" encoding="UTF-8"?>',
    '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
    "</urlset>",
  ];

  return {
    statusCode: 200,
    headers: { "Content-Type": "text/xml" },
    body: xmlContent.join("\n"),
  };
};

export { handler };

To test this out, let's add a redirect from sitemap.xml to our newly created function. We can add it as a new redirect in the netlify.toml file. You can read more about file based configuration with Netlify here.

[build]
  command = "remix build"
  functions = "netlify/functions"
  publish = "public"

[dev]
  command = "remix watch"
  port = 3000

[[redirects]]
  from = "/sitemap.xml"
  to = "/.netlify/functions/sitemap"
  status = 200

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/server"
  status = 200

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

Start up netlify dev and make a request to localhost:<YOUR PORT>/sitemap.xml.

You should see a basic XML file returned:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
</urlset>

Add your URLs to the sitemap.xml file dynamically using Javascript.

import type { Handler } from "@netlify/functions";

const urls: Array<{ url: string; lastModified: string }> = [
  {
    url: "https://riegle.dev/",
    lastModified: "2022-01-01",
  },
  {
    url: "https://riegle.dev/blogs",
    lastModified: "2022-01-01",
  },
];

const handler: Handler = async () => {
  const xmlContent = [
    '<?xml version="1.0" encoding="UTF-8"?>',
    '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
    ...urls.map(({ url, lastModified }) => {
      return `
        <url>
          <loc>${url}</loc>
          <lastmod>${lastModified}</lastmod>
        </url>
      `.trim();
    }),
    "</urlset>",
  ];

  return {
    statusCode: 200,
    headers: {
      "Content-Type": "text/xml",
    },
    body: xmlContent.join("\n"),
  };
};

export { handler };

First, we define our site's URLs in an array with both the URL and the last modified date. These are the only properties I care about on my site, but you can feel free to add any additional fields you want from the XML sitemap specification.

After we've created our list of URLs, we can add it to our xmlContent array by mapping each URL into an XML string.

Wrapping up

Make sure you add all your URLs into the URL list and keep it updated as you add additional URLs/update existing pages. This will ensure your pages gets indexed correctly by search engines.

2022 goals

Mon, 03 Jan 2022 00:00:00 GMT

Man, it's 2022 already. Another year has passed, and I still suck at meeting my goals. 🤣 I want to walk through a quick review and talk about my new goals for this year.

Feel free to check out my 2021 goals here.

2021 Goal Review

It's crucial to do a review of your previous goals. You may have assumptions about how well you did or did not do. Once you do a review, you can be confident of how you did and make improvements.

[ ] Read at least one book per month.
- I didn't accomplish this goal, but I read about three or four books this year.
[ ] Write one blog post per week.
- I didn't achieve this goal either. I wrote a single blog post this year after a freelance project. A total of 86 unique users visited my site this year.
[x] Take more vacation time.
- I did not do a good job defining this goal. At a minimum, I should have explicitly explained what "more" means here. Even though I did a poor job establishing the objective, I met this goal. I did a better job at taking time off. I want to try to keep this goal in 2022, but in a vivid way.
[ ] Travel more
- COVID continued to make this challenging in 2021. I had expected to do more traveling outdoors. I spent a significant amount of time outdoors, just not traveling.
[ ] Upload one YouTube video per quarter.
- I uploaded 0 YouTube videos in 2022.

Takeaways

I need to do better with a few goals for 2022. One thing is being more explicit with my goals. The examples of "travel more" and "take more vacation time" come to mind. Those are agreeable goals, but they're hard to quantify at the end of the year. Another thing is that I'd like to follow a pattern for setting goals, in particular, the framework described by Sahil Bloom on Twitter. His tweet describes a precise structure for how to think about goal setting. I highly recommend it.

2022 Goals

Alright, on to the substance of this blog post. Let's talk about the goals I'm setting this year. I'm tracking the same goal categories that Sahil mentioned in his thread: Personal, Professional, and Health.

Personal

BHAG
- My Big Hairy Audacious Goal is to gain a significant Twitter and LinkedIn following, so I can help others learn to code and grow as software engineers. I aim to reach 1,000 connections on LinkedIn and 2,000 followers on Twitter.
Connected medium-term goal
- My connected medium-term goal is to have 50 followers on Twitter and 350 connections on LinkedIn by February 15th.
  - I currently have 335 connections on LinkedIn and 39 followers on Twitter. To accomplish my medium-term goal, I'll need to gain one follower every four days and a new connection every three days on LinkedIn.
  - Once February 15th comes, I'll create a new medium-term goal with a new timeline, whether I've accomplished it or not.
Process Goals
1. Write a Twitter post creating value each day, including following others and commenting on related posts.
2. Write a meaningful LinkedIn post once per week, connect with others and comment on related posts daily.
3. Write three blog posts per week.

Professional

BHAG
- My Big Hairy Audacious Goal is to grow as an engineer in Domain-Driven Development and Clean Code. By the end of the year, I want to give a conference talk on a related subject.
Connected medium-term goal
- My connected medium-term goal is to write a talk on Domain-Driven Design by March 31st, 2022.
Process Goals
1. Study the <a target="_blank" href="https://www.amazon.com/gp/product/0321125215/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0321125215&linkCode=as2&tag=riegleblog-20&linkId=31e3146555db0b8880081150e1630641">Domain-Driven Design</a> book by Eric Evans
2. Study the <a target="_blank" href="https://www.amazon.com/gp/product/0321834577/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0321834577&linkCode=as2&tag=riegleblog-20&linkId=1801f78bd75f2e2f1242259dca7ff1b9">Implementing Domain-Driven Design</a> by Vaughn Vernon book.
3. Write related blog posts and LinkedIn posts about the subject to get feedback from experts.

Health

BHAG
- My Big Hairy Audacious Goal is to weigh 200 lbs by the end of 2022. Currently, that's around 48 lbs to drop.
Connected medium-term goal
- My connected medium-term goal is to weigh 244 lbs by February 1st, a loss of four pounds.
  - I've read that one to two pounds per week is safe, so I'm targeting that for my goals.
Process Goals
1. 16/8 Intermittent fasting at least 5 days per week
  - I'll track this in the Zero app.
2. Cardio 5 days per week
3. Strength training 3 days per week

Goal Wrapping up

Happy New Year! I hope you have a great year. To our goals! 🍻

February 2022 Health Goal Update

Sat, 05 Feb 2022 00:00:00 GMT

I wanted to give a quick update on my health goal for the year. Feel free to check out my previous blog post where I talked about the health goals I have set for 2022. My long term goal is to weigh 200 lbs by the end of 2022.

I started on January 3rd at 248lbs.

Today, I'm currently weighing in around 245lbs.

That puts me at about a loss of 1/2 lb per week. I still have 45.6 lbs left to reach my goal weight. If I stick to the 1/2 lb per week, it would take me until the end of 2023 to reach my goals. I don't want to wait that long.

Right now, there are 47 weeks left in the year.

If I push myself to lose 1 pound per week, I'll reach my goal by the end of the year.
If I push myself to lose 2 pounds per week, I'll reach my goal by the middle of July.

I think it's time to push myself to lose 1.5 - 2 pounds per week. If I fail and only lose one pound, I'll still reach my goals.

New connected medium-term goal

I want to weigh 239 lbs by February 26th, 2022. That puts my target at two pounds per week for a total of three weeks.

I obviously need to make some changes to actually achieve this goal. Here's what I'm doing.

I'm going to step up my calorie tracking. I have been using MyFitnessPal for tracking calories, but have recently slacked off on that. I stopped after a weekend where it was harder to keep track of meals. I'm going to get back to using it every day.
Increase my exercise time. I started strong with riding on an exercise bike every day and using free weights every other day, but have found myself slacking in this area over the last few weeks. This happened after the off-weekend too. I'm recommitting to doing this again.
I just purchased James Clear's book about Atomic Habits. I've heard amazing things about this book and think it will be good for me to set small, achieveable goals in my daily life. I'm committing to read this book over the next three weeks as well.

Weight Chart

Date	Weight
01/04/2022	248.0 lbs
01/10/2022	247.8 lbs
01/15/2022	247.0 lbs
01/20/2022	246.0 lbs
01/27/2022	247.2 lbs
01/30/2022	245.6 lbs
02/04/2022	245.6 lbs

How to get the count of a relationship using Prisma

Wed, 19 Apr 2023 00:00:00 GMT

Example Problem

Imagine we want to build a page to display all our posts including the number of comments on each post. Something like this...

Posts Page

Prisma Schema

Let's start off by defining a Prisma schema that we can use in our example. We'll create a Post and Comment table. Each post can have many comments on it.

model Post {
  id        Int       @id @default(autoincrement())
  title     String
  body      String
  comments  Comment[]
  createdAt DateTime  @default(now())
}

model Comment {
  id        Int      @id @default(autoincrement())
  comment   String
  author    String
  post      Post     @relation(fields: [postId], references: [id])
  postId    Int
  createdAt DateTime @default(now())
}

Code

You can use the include property and the _count property inside of include to the get the count of any relationships.

This will add a _count property on your query results where you can get the count of the comments.

const prisma = new PrismaClient();

const postsWithCommentCount = await prisma.post.findMany({
  include: {
    _count: {
      select: {
        comments: true,
      }
    }
  }
})

return {
  posts: postsWithCommentCount.map((post) => ({
    id: post.id,
    title: post.title,
    body: post.body,
    commentCount: post._count.comments
    createdAt: post.createdAt,
  }))
}

SaaS Journey - Update #1

Mon, 24 Apr 2023 00:00:00 GMT

I'm on a journey to bootstrap a profitable SaaS application. I want to document it here for others and to hold myself accountable. I've been talking about doing this for years and feel like it's time that I have to make it happen. I've made a change in my career to free up time so I can focus on building my own business.

I have had the hardest time with focusing on a single idea. I think of an idea, find a competitor and just quit.

I've done that a countless number of times, but this time needs to be different.

I just watched a video where the guy did a 100 day challenge to build a SaaS app. It ultimately took longer than that, but they learned a ton and went on to build a successful software company afterwards.

Even if this first product idea sucks and fails, I'm going to keep working, listening to feedback and adjusting as needed.

I need to get used to shipping a product and seeing it through even if there are stumbling blocks in the process.

My first SaaS idea

A questionnaire/survey builder for small-to-medium size businesses for operators to easily create reusable templates for their employees. There are a million spreadsheets, paper templates, word documents, etc where people do this today. There are massive competitors in this space but I don't see a lot targeted at this area of the market.

One of the first products I worked on as a developer had a feature like this. It was focused on the Aircraft Maintenance niche. You could use premade reports or build your own inspection types.

I'm planning to build this in a generic way for any business type to easily build and manage questionnaires for their business. They'll be able to invite employees to the app to complete them. This will mainly be for internal use. I need to simplify the features and map out an MVP for this so I don't spend 6 months trying to build something that nobody wants to use.

MVP Plan

I'm trying to balance the idea of building something too simple and actually providing value. I want to build the smallest example product that is useful. I don't necessarily even want to launch something that somebody would buy. I just want to get something useful launched.

If I can build a very simple product that is useful, I can later add all the advanced features like authentication, reports, user roles, image uploads, mobile application, etc.

My current plan is to build a simple landing page that instantly allows you to start building a survey. You'll be able to save your surveys using your email address. I'll store them in your local storage too. (Very simple)

I could build the survey as a JSON format, base64 encode it and use that as the share link.

No authentication
No complex user roles
No database

The problem though...is this even useful? Will it be so damn simple that it's useless? Probably. Should I still do it? I don't know.

Here's an overly simplified example sketch of what I'm thinking.

Landing Page Example

Easily hide/modify output using tRPC middleware

Mon, 22 May 2023 00:00:00 GMT

When using tRPC, it's easy to run into a problem of duplicating output logic to try to hide/modify/change the output consistently. I'm going to show you how you can use tRPC middleware to dedupe that logic in a clean and reusable way.

Let's imagine your application has Projects and Users.

We have two types of Users (admins and members).

For simplicity, let's say we only want to return project descriptions for admins. Members cannot view descriptions.

Simplest solution

export const projectsRouter = createTrpcRouter({
  getProjects: publicProcedure.query(async ({ ctx }) => {
    const isAdmin = ctx.user.type === "admin";
    const projects = await ctx.prisma.projects.findMany();

    return projects.map((project) => {
      return {
        ...project,
        description: isAdmin ? project.description : "",
      };
    });
  }),
  getProjectById: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      const isAdmin = ctx.user.type === "admin";
      const project = await ctx.prisma.projects.findFirstOrThrow({ where: { id: input.id } });

      return {
        ...project,
        description: isAdmin ? project.description : "",
      };
    }),
});

Did you notice the duplication? 😱

Extracting shared logic

Let's try to refactor some of this logic so there's less duplicated code.

We'll create a mapProject function that takes in a project and whether the user is an admin and decides how to map the project.

import type { Project } from '@prisma/client';

const mapProject = (project: Project, isAdmin: boolean) => ({
  ...project,
  description: isAdmin ? project.description : '',
});

export const projectsRouter = createTrpcRouter({
  getProjects: publicProcedure.query(async ({ ctx }) => {
    const isAdmin = ctx.user.type === "admin";
    const projects = await ctx.prisma.projects.findMany();
    return projects.map((project) => mapProject(project, isAdmin));
  }),
  getProjectById: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      const isAdmin = ctx.user.type === "admin";
      const project = await ctx.prisma.projects.findFirstOrThrow({ where: { id: input.id } });
      return mapProject(project, isAdmin);
    }),
});

Using middleware to define the function with "context"

Alright, this is starting to look a little cleaner. Let's introduce "middleware" into the mix to see how this can help us clean up some more code.

Instead of creating the mapProject function outside of tRPC and using it, we can actually create it within our tRPC middleware. It will have all the information from the request that we need to make a decision. In this case, we can check if the user is an admin and decide if we should return a "description" from within the middleware.

import type { Project } from '@prisma/client';

const projectProcedure = publicProcedure.use(({ ctx, next }) => {
  return next({
    ctx: {
      mapProject: (project: Project) => {
        const isAdmin = ctx.user.type === "admin";

        return {
          ...project,
          description: isAdmin ? project.description : '',
        };
      },
    }
  })
});

export const projectsRouter = createTrpcRouter({
  getProjects: projectProcedure.query(async ({ ctx }) => {
    const projects = await ctx.prisma.projects.findMany();
    return projects.map(ctx.mapProject);
  }),
  getProjectById: projectProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      return ctx.mapProject(
        await ctx.prisma.projects.findFirstOrThrow({ where: { id: input.id } })
      );
    }),
});

Using tRPC middleware to it's full potential

We can actually do the entire mapping within the middleware so we don't need to even think about it inside of queries/mutations. Imagine a new engineer joins the project, you don't want to have to remind them to use the ctx.mapProject function.

Maybe you're on vacation and they accidentally ship code that reveals the description to all members. That would be horrible.

Let's see how tRPC middleware can solve this for us in a clean, reusable way.

First...our updated router. Look how simple this is.

export const projectsRouter = createTrpcRouter({
  getProjects: publicProcedure.query(async ({ ctx }) => ctx.prisma.projects.findMany(),
  getProjectById: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(({ ctx, input }) => ctx.prisma.projects.findFirstOrThrow({ where: { id: input.id } })),
});

Already, here's the moment we've all been waiting for...

const isProject = (project: unknown): project is Project => false; // needs to be implemented
const isProjects = (projects: unknown): projects is Project[] => Array.isArray(projects) && projects.every(isProject);

const projectProcedure = publicProcedure.use(({ ctx, next }) => {
  const result = await next();

  if (!result.ok) {
    return result;
  }

  const mapProject = (project: Project) =>  {
    const isAdmin = ctx.user.type === "admin";

    return {
      ...project,
      description: isAdmin ? project.description : '',
    }
  };

  if (isProjects(result.data) || isProject(result.data)) {
    return {
      ...result,
      data: isProjects(result.data)
        ? result.data.map((project) => mapProject(project))
        : mapProject(result.data),
    };
  }

  return result;
});

In our tRPC middleware, we can actually call the next() function and await the result. This will return the result from the query/mutation which we can use before returning the value to the client.

We await the result, make sure it was successful and then we check the return type to see if it is a project or list of projects, if so, we call the mapProject on each project to hide the description for non-admin users.

Full Example

import type { Project } from '@prisma/client';
import { createTrpcRouter, publicProcedure } from '../trpc';

const isProject = (project: unknown): project is Project => false; // needs to be implemented
const isProjects = (projects: unknown): projects is Project[] => Array.isArray(projects) && projects.every(isProject);

const projectProcedure = publicProcedure.use(({ ctx, next }) => {
  const result = await next();

  if (!result.ok) {
    return result;
  }

  const mapProject = (project: Project) =>  {
    const isAdmin = ctx.user.type === "admin";

    return {
      ...project,
      description: isAdmin ? project.description : '',
    }
  };

  if (isProjects(result.data) || isProject(result.data)) {
    return {
      ...result,
      data: isProjects(result.data)
        ? result.data.map((project) => mapProject(project))
        : mapProject(result.data),
    };
  }

  return result;
});

export const projectsRouter = createTrpcRouter({
  getProjects: publicProcedure.query(async ({ ctx }) => ctx.prisma.projects.findMany(),
  getProjectById: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(({ ctx, input }) => ctx.prisma.projects.findFirstOrThrow({ where: { id: input.id } })),
});

Caching & change detection Turborepo and Github Actions

Thu, 01 Jun 2023 00:00:00 GMT

"Remote Caching"

I recently worked on a project with Turborepo and wanted to setup caching without using Vercel's proprietary Remote Caching. I also wanted change detection to only deploy things that have changed. Here's how I did it.

First, let's just setup a basic CI workflow that runs our test suite.

name: ci
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 2
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      
      - run: npm ci
      - run: npx turbo run test

This file will run our tests, but does not setup any turborepo caching.

Here's how we add the turborepo cache:

Make sure you add the --cache-dir argument to your test call. This will tell turborepo where to save and restore your cache files.

name: ci
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 2

      - name: Cache turborepo
        uses: actions/cache@v3
        with:
          path: .turbo
          key: ${{ runner.os }}-turbo-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-turbo-
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      
      - run: npm ci
      - run: npx turbo run test --cache-dir=.turbo

Change Detection

Alright, we have that setup, but how do we do change detection for deployments? There are honestly several ways to do this but the most generic and simplest way is to use turborepo to detect if a package has changed and deploy it.

Let's start with defining our own custom Github Action that we can use within our repo for change detection.

You do have to put it within a folder and the file must be called _action.yml`

name: Has Changed?
description: Checks if a Turborepo Workspace has changed
inputs:
  workspace_name:
    required: true
    description: |-
      Name of Turborepo workspace
  from_ref:
    required: true
    description: |-
      Github Ref to detect changes from
  to_ref:
    required: true
    description: |-
      Github ref to detect changes to
  cache_dir:
    required: false
    default: .turbo
    description: |-
      Custom cache directory for turborepo
  turbo_version:
    required: false
    default: 1.9.3
    description: |-
      Turborepo version
  force:
    required: false
    default: false
    description: |-
      Used to force this action to return true

outputs:
  changed:
    description: |-
      'true' or 'false' value indicating whether the workspace changed
    value: ${{ steps.turbo_check_changed.outputs.changed }}
runs:
  using: 'composite'
  steps:
    - name: Setup Node.js environment
      uses: actions/setup-node@v3
      with:
        node-version: 18
        cache: 'npm'
    - run: npm install -g turbo@${{ inputs.turbo_version }}
      shell: bash
    - id: turbo_check_changed
      shell: bash
      run: |
        if [[ "${{ inputs.force }}" == 'true' ]]; then
          echo "changed=true" >> $GITHUB_OUTPUT
        else
          HAS_CHANGED=$(npx turbo build --cache-dir=${{ inputs.cache_dir }} --filter="${{ inputs.workspace_name }}...[${{ inputs.from_ref }}...${{ inputs.to_ref }}]" --dry-run=json | jq ".packages|any(. == \"${{ inputs.workspace_name }}\")")
          echo "changed=${HAS_CHANGED}" >> $GITHUB_OUTPUT
        fi

This code gets pretty complex in the last bash script. Basically what we are doing is npx turbo build and having it run a "dry run" of the build. It won't actually build the packages, it is just going to tell you what it will do. We set the output to json using the --dry-run=json argument. This allows us to detect which packages would be built and we can assume have changed.

We use the "echo changed=<value>"" >> $GITHUB_OUTPUT syntax to set the output for the action. The output can be used in our deployment workflow to decide if we should deploy it. Let's dive into that code.

name: ci
on:
  push:
    branches: ['main']
  workflow_dispatch:

concurrency:
  group: ${{ github.workflow }}
  cancel-in-progress: false

jobs:
  ci:
    uses: ./.github/workflows/ci.yml # use our exisiting CI workflow to run tests

  deploy:
    runs-on: ubuntu-latest
    needs: [ci] # make sure our tests pass before trying to deploy

    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 2

      - id: has-changed
        uses: ./.github/actions/has-changed # note: this the folder name we stored the "action.yml" file in earlier
        with:
          workspace_name: <your-package.json-name>
          from_ref: ${{ github.ref_name }}
          to_ref: HEAD^1
          force: ${{ github.event_name == 'workflow_dispatch' }} # this flag forces the package to be marked as changed so it gets deployed. This is useful when you manually trigger a deploy like with a workflow_dispatch event

      - name: Cache turborepo
        if: steps.has-changed.outputs.changed == 'true' # we only run this if the package has changed
        uses: actions/cache@v3
        with:
          path: .turbo
          key: ${{ runner.os }}-turbo-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-turbo-
      
      - name: Setup Node
        if: steps.has-changed.outputs.changed == 'true'
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      
      - run: npm ci
        if: steps.has-changed.outputs.changed == 'true'

      - run: <insert your deploy command>
        if: steps.has-changed.outputs.changed == 'true'

There is a lot here to unpack, but this workflow will only deploy if our code has actually changed. It also allows us to use Github's workflow dispatch feature to force deployments if we need to redeploy for some reason.

Let me know what you think or if you have any suggestions to make this better!