bshore.dev

Portfolio Revamp

Starting 2024 off with a full rewrite of my Portfolio, moving from Svelte to Go + HTMX.

Frontend Development Goes Full-Circle

The previous version of my portfolio was put together while I was learning the basics of Svelte back in April of 2023.

What I enjoyed most about using Svelte was that each .svelte file has it's own self-contained somewhat-vanilla HTML/CSS/JS.

I really enjoy Svelte's approach, especially after coming from React's CSS-in-JS and JSX/TSX where everything is JavaScript.

<script lang="ts">
  // imports, state, functions, etc...
</script>

<div>
  <!-- component HTML -->
</div>

<style>
  /* component style */
</style>

Nearly all my personal projects from April to December 2023 used Svelte for UIs and Go for backend servers. One project in particular had me delving deeper into Svelte, now using SvelteKit to perform server-side-rendering (SSR).

I went down the SSR path because I didn't want to expose my Go server to the public internet. My SvelteKit UI and Go server are on the same host, so it's pretty simple to just have them communicate over the internal network. SSR also helps with things like indexing and SEO because the HTML is fully generated before it reaches the browser!

...but hold on just a minute... the HTML is generated before it reaches the browser... what?! I've done this before! Back when I used Django!

Django uses templates that dynamically generate HTML at runtime and Go has html/template and text/html right there in the standard library...

WTF am I doing deploying two servers, duplicating my data types across TypeScript and Go, and adding an extra network call?

I remembered a library called HTMX floating around over the summer of 2023 and I figured it was time to see what all the buzz is about.

The aspects of Svelte that I enjoy, the somewhat-vanilla HTML/CSS/JS, have now led me full-circle back to template-driven websites.

HTMX

Frontend JavaScript frameworks have been pushing their way into the backend for a couple years now with React Server Components, NextJS, SvelteKit, and so on. Well, HTMX is sort of the same kind of movement but in the opposite direction.

The way I understand it, HTMX is just HTML with special hx-* prefixed attributes for where/when/what/how to interact with a backend server. The backend server then returns HTML, and HTMX puts that HTML on the page. No more JSON, no more virtual DOM calculating rerenders. Call an endpoint, put the response on the page, the end.

I have HTMX at work right here in my portfolio footer:

<div hx-get="/hx/command" hx-trigger="every 10s" hx-swap="outerHTML">
	<div class="flex justify-start">
		<div
			class="whitespace-nowrap overflow-hidden font-mono"
			style="width: 16ch; animation: typing 2s steps(16)"
		>
			git reset --hard
		</div>
		<div class="border-l-2" style="animation: blink 0.5s step-end infinite alternate">
			&nbsp;
		</div>
	</div>
</div>

Every 10 seconds, call the /hx/command endpoint and replace this element's outer HTML with the response. In this example the response is the same exact code snippet but with a different random command string.

The Rewrite

So I'm here writing this blog and you're here reading it, but how did we end up here?

Well, as I said at the start, my portfolio was initially written in Svelte. I initially chose a minimalist CSS library called PicoCSS to keep things simple while I was learning. This was great for getting started but I've been really liking TailwindCSS and DaisyUI lately.

So it seems things are just becoming HTML and CSS for me and now it's time to give this HTMX thing a shot. What a better way to learn and double dip by rewriting my portfolio from Svelte to HTMX using Go and templating for SSR.

My Go code embeds my HTML templates, handles routing for each page, routing for HTMX calls, routing for static assets (CSS/JS), and in the end compiles to a single binary. No adapters, no webpack, no NodeJS, I can deploy my binary anywhere.

That's pretty sweet if you ask me, I'm definitely going to be using HTMX more going forward.

rm -rf node_modules && echo "Hooray!"

Resumé/CV