Colophon

Philosophy

This site is built using Go, Fiber, and SQLite for speed and simplicity. It doesn't use any JavaScript frameworks or client-side routing. It's just a server that renders markdown to HTML and sends it to a browser.

The modern web has become bloated with large JavaScript frameworks that add unnecessary complexity. A personal site doesn't need any of that. It just needs to load fast and be readable.

Technology Stack

┌─────────────────────────────────────────────────────────┐
│                         Browser                         │
│                    HTML + SCSS + TS                     │
└────────────────────────────┬────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────┐
│                        Go + Fiber                       │
│                Request Routing & Templating             │
└────────────────────────────┬────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────┐
│                          SQLite                         │
│                      Posts & Contacts                   │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────┐
│             Browser             │
│        HTML + SCSS + TS         │
└────────────────┬────────────────┘
                 │
                 ▼
┌─────────────────────────────────┐
│             Go + Fiber          │
│   Request Routing & Templating  │
└────────────────┬────────────────┘
                 │
                 ▼
┌─────────────────────────────────┐
│              SQLite             │
│          Posts & Contacts       │
└─────────────────────────────────┘

Go

The backend is written in Golang. The language is intentionally simple, which, in my opinion, makes it one of the best languages and simultaneously the most boring language. There's pretty much only one right way to do things. Its performance is roughly on par with Java and C#, but doesn't carry the enterprise-grade bloat of the last few decades and likely never will.

Fiber

Fiber is an Express-inspired web framework for Go. I originally learned backend development with Node.js and Express, so I've always had a bias towards its architecture. Fiber provides routing and middleware and doesn't use Go's built-in net/http library. It instead uses FastHTTP, which is much faster than net/http. Not that the site needs it, but it's nice to know.

SQLite

SQLite stores the blog posts and contact form submissions.

I've always used Postgres or MySQL but decided SQLite was a good enough option because it's simple, and I appreciate the single file.

SQLite handles more concurrent traffic than this site will ever need. It powers more applications than any other database engine.

Markdown

Blog posts are written in Markdown and rendered to HTML with gomarkdown. Rendered HTML is cached in memory to avoid re-parsing on every request.

Markdown provides a good middle ground between writing each blog post in HTML and using a CMS. It's readable as a plain text, version-controllable, and I can embed HTML for edge cases.

I write the posts locally and then use a CLI tool to sync them to the server.

Frontend

The frontend is vanilla HTML, SCSS, and TypeScript. No React, Vue, Angular, or other framework of the month. Frameworks like React do three things great: components, reactivity, and providing a scalable structure. In exchange, it gives you the virtual DOM. People reach for it too quickly, thinking it has no drawbacks and makes developing much faster. There are many cases where React is a good choice, but this isn't one of them. The contact form alone would have doubled in complexity.

esbuild compiles SCSS to CSS and TypeScript to JavaScript. It's fast and simple. When I use a larger framework, I use something like Vite instead.

Typography

The entire site uses Fira Code, a monospaced font with programming ligatures. It's the font I've used in my editor and terminal for nearly a decade. Every time I've switched, a few weeks later I see Fira Code and say, "Wow, what font is that?" It also offers a technical feel because it's monospaced, which works well with the site's design.

The base font size is 18px on desktop, scaling down to 16px on mobile. Reading should be comfortable.

Color Palette

The color scheme is a dark monochromatic palette. The background is a dark slate hsl(215, 16%, 7%), and most of the text is a dull white hsl(40, 25%, 90%).

Text colors are warm neutrals with a slight yellow tint. I was inspired by one of my favorite car colors from BMW: A53 Platinum Bronze Metallic. It's also easy on the eyes.

My system for designing UI color palettes is largely inspired by Refactoring UI by Adam Wathan and Steve Schoger, the developers of Tailwind. Despite being a certified Tailwind hater, I find their methods easy to follow and timeless. Regarding colors, I lay out every color I need, then create 8-12 shades of it. I put my time into developing the palette early and then trust that it works later.

The site has two themes that are just inverted versions of each other. I am a defender of having both a dark and light theme. I like dark mode because I have dark floaters in my eyes, which make it difficult to read black text on white. Other people have other conditions that make it hard to read white on black. The accessibility of themes isn't discussed enough. If there's a lot of reading content on your site, you should have at least a light and dark theme.

ASCII Art

       ░▒▓█▓▒▒▓█████████▓▒░
       ░▒▓█▓▒░  ░▒▓█▓▒░
       ░▒▓█▓▒░  ░▒▓█▓▒░
       ░▒▓█▓▒░  ░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░  ░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░  ░▒▓█▓▒░
 ░▒▓██████▓▒░   ░▒▓█▓▒░

The logo and decorative elements use Unicode block characters to create ASCII-style art. These characters (░▒▓█) create gradients using text. It was made using a tool called figlet and then modified.

ASCII art has an interesting history that started at Bell Labs in the 1960s. In the early 90s, three friends, Frank Sheeran, Ian Chai, and Glenn Chappell, created a C program to generate text in large ASCII fonts. Since then, people have greatly expanded their work. I chose ASCII art for the logo because it fits the theme I was going for, and honestly, it's really hard making a logo for yourself.

Using text instead of images also means the logo scales perfectly at any size and works even if stylesheets fail to load.

Performance

Note: Stats can vary significantly between hardware and network conditions. These were measured with Lighthouse on my desktop.

Pages are small because there's no JavaScript. The largest files come from the fonts, which are loaded from Google Fonts. I do utilize extra space by serving all the CSS in a single file. This makes subsequent requests faster due to caching.

What's Not Here

• Analytics

  I don't need to know how many people visit or where they click. If the site is useful, people will use it.

• Comments

  Comments require moderation, spam filtering, and authentication. Email and the contact form exist for those who want to respond.

• JavaScript frameworks

  React, Vue, and friends are great for applications. This is a mostly static site.

Source Code

This site's source code will be available soon.