blog.hal.codes

👋

Hello world

I made a blog. You’re reading it. I think it’s pretty neat.

This’ll be loosely focused on software development, and in particular iOS development. I’ve been writing software professionally for a few years; I’m still learning, and this blog will help me share that process.

Look for some fresh content soon. I’m hoping to actually be diligent about posting here. There’s an RSS feed if that’s your thing.

Technical Details

A normal, well-adjusted human being would have created a Medium account or made a WordPress site for this. Instead I made a whole project out of creating a custom blog. It’s been fun, and I’ve learned a lot. It’s great to break out of my normal iOS development bubble and play with all of the latest meme-worthy technologies.

GraphQL

I built my blog around GraphQL. My coworkers have been building GraphQL APIs at scale and I really love the idea of a typed API. At work, I mostly use Swift, a strongly-typed language. An API that provides type information by design is an attractive prospect compared to a typical JSON API, which requires writing a lot of Swift boilerplate to interact with.

As you might have guessed, this blog’s content comes from a GraphQL API (👈 check it out). How do I transform that nice (typed!) API into the flawless website you’re visiting now? With Gatsby, a React static site generator. Gatsby uses GraphQL internally and can consume content directly from a GraphQL API, so it’s a perfect fit for my GraphQL backend. I use a GraphQL query to extract all the data required to build blog post pages; here’s the actual query:

{
  blogPosts(per: ${perPage}, page: ${i}) {
    nodes {
      title
      kicker
      body {
        html
        markdown
      }
      preview {
        html
      }
      slug
      meta {
        published
      }
    }
  }
}

All that precious content is funneled into React components and rendered into a static site bundle. Once rendered, the site can be hosted on any static file host (most are free) like Amazon S3, Netlify, or GitHub Pages. I picked Netlify.

Gatsby is kinda wild; this blog has 1,778 NPM dependencies. That’s a lot of JavaScript just to build a relatively simple site! But in return for downloading a mountain of dependencies, I get a lot of great stuff:

  • React components
  • Automatically combined, minified, and cross-browser-supported CSS & JS
  • HTML 5 history routing (instant page loads!)
  • Preloaded routes on hover
  • RSS

Personally, I’ll take all that even if it means the initial setup is a bit convoluted. Modern web development is actually pretty great.

Like every other developer blog in 2019, my blog posts are written in Markdown. A cool trick to impress your friends with: you can see the original Markdown for any of my posts by adding .md to the URL (inspired by Daring Fireball, which provides post Markdown with .text).

CMS

Where does the content served from my GraphQL API come from, you might wonder? A CMS that I’m calling Pigeon. I truly went off the deep end and decided to build a CMS from scratch using server-side Swift. It’s still very much a work in progress. Building a CMS has been a great way to get a better understanding of server-side development, databases, and GraphQL. On the other hand, I’ve become a cliché. Yet another rookie programmer building a Markdown-powered static site generator; another jerk building a CMS because they don’t like WordPress. At least I’m enjoying it!