My Fresh Website

This site is my comfy place on the great wide web. I hope you feel welcome here. If you do not for any reason, please let me know.

So far, this site primarily houses articles I write. I hope to make more additions to this web home slowly.

Goals

My goal isn't to make the coolest or hottest website. Room temperature is fine for me.

I want my site to welcome visitors warmly, but I also want to reduce any friction for me as I enhance, maintain, and redesign it. I don't know how to make a perfect website for me or my visitors, so I experiment. I pick tools I want to play with, and hopefully I find some which are comfortable to live in.

History

Because I use this site as a test bed for various tools, I change how the site is built sometimes.

When I first began I used:

After living in this tech stack for a few months, I had some frustrations which led me to replace each one of the above tools.

Replacing EJS with React & JSX

I have worked in React a lot, but I don't enjoy it. I might expand on this in a future article, but in brief, React feels too complicated. Its Elm architecture does not feel like a good fit for 99% of what I want to do in websites.

That is why I surprised myself when I found that I enjoy React & JSX for static HTML templates. The Elm architecture which drives re-rendering, state changes, and behavior for React is only apparent on the front-end. Without all of that stuff, React on the server side is great!

Below is a comparison between my experience with EJS versus React & JSX. Some of these notes are React specific, some of them apply to all JSX. I haven't investigated other "back-ends" for JSX other than React because it fits my use-case, but I bet most of them would work well.

First, the upsides of React & JSX:

Now the downsides to React & JSX.

Interactivity on the website comes not from React but from hyperscript, htmx, and a pinch of custom JavaScript. Thank you Big Sky Software.

Enhancing Markdown with MDX

When I moved to React I switched to MDX to enhance my articles' Markdown. For my current set of articles, this offered no benefit in the body text. However MDX's JS export syntax lead me to add more complex metadata to each post, which feels like a big win.

My opinion on MDX is not well-formed. It feels like a lateral move at this moment as if I'm not exploiting MDX's maximum powers.

Replacing Eleventy with Vite

I replaced Eleventy with Vite and Brillout's vite-plugin-ssr. vite-plugin-ssr's "HTML Only" static generation allowed me to use React for static site generation, but load no React on the front-end. No hydration.

Replacing missing.css with Tailwind

Missing CSS was perfect for getting my site off the ground quickly, but I wanted to customize and play with my site's appearance more. I knew I wanted to replace Missing CSS with Tailwind. I would have to re-style the whole site, but it was worth it to make it more custom.

I had recently read Layout Breakouts by Ryan Mulligan and wanted to try it. It worked great!

Open

This site's source code including all content is public on my GitHub.

If you have any comments or questions about this site, I would love to hear them!

Discuss

To send me a private note click this button and fill out the form below:

To include a text selection in your private note, select some text from the article above and click the new "Leave a Private Note" button that appears.

You can also discuss this post in the official thread in the subreddit.

Addenda