After a lot of work and refinement (and procrastination), this site's now live! Saying goodbye to my old PHP-based site feels great, and I'm really happy with all I've learned while building out this modern, fresh, less-janky version.

First off, this project is fully open-source, and while building it, I ended up spinning off several libraries! Most notably:

• sanity-ex, a barebones SanityIO client for Elixir applications
• svelte-maybe-transition, a util for easily conditionally applying transitions or changing their function on-the-fly
• svelte-breakpoints, for easily creating dynamic layouts using MediaQueryListeners
• vite-plugin-test-selectors, a transformer for easy stripping of test selectors and attributes (e.g. data-test-route="index") during production builds

Rebuilding this site started with rethinking the back-end - previously, my site was static, meaning I'd manually create new PHP pages for each route/post I wanted. Time-consuming, janky, lots of duplicated code, just a bad solution.

For this project, I opted to use Sanity.io over a traditional SQL-like database for content storage, and it turned out to be a solid choice. As a headless CMS, it's well-tailored for document-centric data, like blogs and primarily-text-content, as this site is. Not much needs to happen in terms of updates or mutations, besides changing page view metrics, so I felt going with a SQL-like solution would've been over-complicated given my minimal requirements of primarily just fetching data. Plus, Sanity's Studio front-end, being a React app, offers a lot of flexibility in extension and customization and saves me from writing my own interface for DB CRUD operations. Here's how I have the UI configured currently:

I chose Elixir for building out my site's API, straying from my prior use of JavaScript & ExpressJS. Diving into functional programming for the first time was challenging, but really rewarding. Elixir, with its prowess in low-latency and high-concurrency distributed systems, was amazing to work with for building out my site's API, and I can see how it excels at scaling. It significantly outperformed the initial Express + Typescript solution I'd cobbled together and booted significantly faster as well, with a lower memory footprint and CPU usage, allowing me to deploy it as a container to GCP's Artifact Registry and run instances on-demand with Cloud Run on-the-cheap.

On the front-end side of things, SvelteKit caught my attention right away and was the initial inspiration I had to rework this site in the first place.

I was initially drawn to it from a tweet I saw detailing its simple syntax, and I fell in love with its features and ease-of-use (not to mention its amazing performance when compared with other UI libraries such as React). Another huge advantage is its lack of dependencies post-compile - Svelte operates as a compiler, so unlike with a React app, there's no need to bundle 'react-dom'/'svelte' into the production build. Everything's compiled to native Javascript, and in the case of my site, is under 400kb total, including the requests to Google Fonts.

Although still in early stages compared to other Javascript UI libraries - it's just over a year old as of writing this article - it's been smooth sailing for me so far. I'd highly recommend checking it out if you haven't before.

Moving past the tech used, design was also something I spent considerable time on here. My initial sketches took shape in Figma, where I laid out the basic look and components I wanted. I wanted something both visually interesting, but simple enough that it wouldn't be distracting as some portfolio / blog sites I've seen are. TailwindCSS fit about 90% of what I needed to accomplish, and the rest (animations, scoped styles and the like) I used SCSS for.

However, looking forward, I'm considering Facebook's StyleX as a better alternative to Tailwind. It still allows for atomic construction of styles for elements, and isn't bound to any particular JS framework. But, instead of using element class names, it lets you construct 'style' objects within your JS code, then apply those to elements, merge them, and perform other operations. At compile-time, they're optimized to use as few unique classes and selectors as possible, greatly reducing stylesheet sizes. Definitely something I plan to keep my eye on as it matures more.

Another aspect of design I spent a while getting more familiar with was accessibility. It's always been a development topic I've steered away from, not knowing much about it, but for this project I dove in deeper and learned a ton. The site's far from perfect, but having tested it out with a screen reader and navigating around using purely the keyboard, I think it's a massive step-up from my previous website 😅

This project also presented an opportunity to improve my experience in CI/CD services. I kept everything to a single Github monorepo, leveraging Github Actions and runners to build, push, then deploy on GCP and Netlify. This setup streamlined development and made it super simple to iterate over time, while integrating the unit & E2E tests I wrote along the way to ensure I don't accidentally break anything over time.

I hope over the next few months to find some spare time to improve on my writing skills, come up with some interesting blog posts or tutorials, and write about my side projects in more detail. Feel free to drop me a line if you have any questions, and thanks for stopping by!