Go + Hypermedia - A Learning Journey (Part 1)
Tags: webdev, htmx, go, learning
Published: 2024-02-23 18:47:45

---
title: Go + Hypermedia - A Learning Journey (Part 1)
published: true
description: A series on my learning journey with Go, HTMX, Templ, Echo, and TailwindCSS
tags: webdev, htmx, go, learning
series: Golang + Hypermedia - A Learning Journey
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8t8t520a9npqyw8clye.jpg
---

## Intro

This is the first post in a series where we use Go to build a full web project with a web framework, templating, HTMX, and TailwindCSS. The goal is to build something from the ground up, utilizing frameworks and packages that are both interesting and new (to me at least), and document the learning process as we go along.

## Motivation

I am constantly tinkering with and learning new tools, techniques, languages, etc., but primarily in private with varying levels of success/completion. To be clear, I am a 'coder', not a 'developer', but enjoy learning new tech and building things.

I've been digging into [HTMX](https://htmx.org/) lately (using Python web frameworks) and find the concepts and approach to be interesting and promising. The idea of hypermedia driven systems over the current practice of JavaScript based frameworks (I never really got into React, played with Vue, and enjoy Svelte/SvelteKit) and the ability to chose your language/framework for the backend while primarily leveraging HTML/CSS on the frontend just seems refreshing.

With that said, I tend to do most of my 'learning' in private...private GitHub repos, no external collaboration/feedback, etc. But a recent tweet by [Kelsey Hightower](https://twitter.com/kelseyhightower) motivated me to move some of that learning into public eye.

{% embed https://twitter.com/kelseyhightower/status/1760321330682151154 %}

By doing this in public, I hope to:

- Improve ability to communicate thought process and progress through documentation and walkthrough
- Drive the project through completion -> accountability to readers that are interested in what we are doing here
- Get feedback and input from readers, both on the technology/approach and how best to communicate said progress to the reader

Outside of learning the fundamentals of the language (which won't really be covered in this series), having an actual "thing" to build helps me to maximize breadth and depth of the tech and stay motivated to keep going.

I try to pick something that:

1) has practical use (at least for me, even better if more broadly applicable to others)
2) incorporates full functionality (frontend, backend, database, etc.)
3) pushes me into unfamiliar territory (new languages, concepts, patterns, etc.)

## The Project

With the background and motivation out of the way, what are we going to build? I think a blogging platform hits all the points covered in the previous section while also allowing for progressive addition of new functionality as the project progresses.

Initial thoughts on the major steps/milestones in the project:

### Foundation
Get the initial stack wired up

1) **Setting up the development environment** - I currently use [devcontainers](https://code.visualstudio.com/docs/devcontainers/containers) for most things, but may also dig into [nix](https://nixos.org/) -> isolated, portable, repeatable development environment
2) **Exploring Echo** - understand routing, requests, response, etc.
3) **Incorporate Templ** - integration with Echo, template composition, etc.
4) **Integrating TailwindCSS** - config for use with Echo/Templ, development cycle, deployment, etc.
5) **Add in HTMX** - endpoints, template structure, concepts, etc.
6) **hyperscript for interactivity** - client side interactivity

### Basic Blog
Be able to render posts written in Markdown

1) **Routes** - basic routes (home, about, posts, individual post, etc.)
2) **Templates** - template composition, HTMX, hyperscript, TailwindCSS, etc.
3) **Markdown Processing** - Markdown files just embedded into the app, basically just a static site builder

### Functional Platform
Blog post CRUD

1) **Database** - incorporate DB into the app, persist blog posts, etc.
2) **Build in Editor** - Markdown editor built into the platform

### Further Out

1) **Authentication** - interested in adding [passkeys/webauthn](https://webauthn.io/) as the primary authentication mechanism
2) **User Management** - owner can create/edit posts, users can comment on posts
3) **Comments** - support user post comments
4) **Deployment** - get this thing up and running in the real world (service provider selection, end to end deployment process, etc.)
5) **??????** - we'll see where things take us


## The Stack (for now)

[Go](https://go.dev) - programming language

[Echo](https://echo.labstack.com/) - web framework for Go

[Templ](https://templ.guide/) - HTML templating for Go

[HTMX](https://htmx.org/) - hypermedia functionality in HTML

[hyperscript](https://hyperscript.org/) - frontend interactivity

[TailwindCSS](https://tailwindcss.com/) - utility-first CSS framework

## Up Next

Getting the development environment setup is the first order of business. I use Windows with WSL for most of my dev work, using VSCode with devcontainers, so you *should* be able to use the repo on any platform with VSCode, Docker, and the VSCode remote development extension installed.

We will cover getting the prerequisites installed (VSCode, Docker, extension) and setting up the devcontainer with the required tooling, extensions, etc. in hopes that you can follow along regardless of your OS of choice.

If this project sounds interesting or your have any ideas/feedback along the way, please let me know in the comments. Looking forward to building and learning with you.