DEV Community: Patrick Neise

Go + Hypermedia - A Learning Journey (Part 1)

Patrick Neise — Fri, 23 Feb 2024 18:47:45 +0000

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 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 motivated me to move some of that learning into public eye.

// Detect dark theme var iframe = document.getElementById('tweet-1760321330682151154-28'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1760321330682151154&theme=dark" }

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 for most things, but may also dig into nix -> 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 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 - programming language

Echo - web framework for Go

Templ - HTML templating for Go

HTMX - hypermedia functionality in HTML

hyperscript - frontend interactivity

TailwindCSS - 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.

Svelte & Tailwind CSS Development in VSCode Remote Container

Patrick Neise — Mon, 15 Feb 2021 20:49:40 +0000

Background

It's been a while since my first post, so figured I would update the Svelte Remote Container example with some new additions and changes.

Features of the new VSCode devcontainer include:

Svelte with Tailwind CSS starter app
Tailwind CSS Debug Screens to show screen size during development
Snowpack configured to optimize production build
Dockerfile and nginx configuration for production build
nginx config with caching and compression enabled
Several VSCode extensions to support Svelte/Tailwind development

This setup has evolved over time as I've continued to learn Svelte and now Tailwind CSS (a great combination imho) and swapped out Rollup for Snowpack.

patrickneise / svelte-snowpack-tailwind

Getting Started

Clone this repo into a folder for your project

git clone https://github.com/patrickneise/svelte-snowpack-tailwind.git <your-project-name>

Change the origin to your project git repo

git remote set-url origin <path-to-your-project git repo>

Install dependencies

yarn install

Start the dev server

yarn start

Build something amazing with Svelte and Tailwind CSS

Major Frameworks and Tools in the devcontainer

Svelte - Front end development framework
Tailwind CSS - Utility-first CSS framework
Snowpack - Frontend build tool
Tailwind CSS Debug Screens - Shows the currently active screen

VSCode Extensions in the devcontainer

Svelte - Syntax highlighting, code formatting, and rich intellisense for Svelte components.
Tailwind CSS IntelliSense - Intelligent Tailwind CSS tooling
Refactor CSS - Helps identify reoccuring CSS class name combinations in markup
Headwind - Opinionated Tailwind CSS class sorter

Future Work

A few thoughts around what to add/update into the devcontainer:

Typescript support
Build out a more realistic starter app (components, pages, router, etc.)
Eslint and prettier configs

Any other input/recommendations for how to make this devcontainer better would be greatly appreciated.

Svelte Development with VSCode Remote - Containers

Patrick Neise — Fri, 27 Mar 2020 17:56:40 +0000

As my first post here, I thought I would write about three of the favorite things I have been using/learning lately:

Visual Studio Code Code and the Remote Development extension
Docker
Svelte

The combination of VSCode and the Remote Development-Containers with Docker has really changed my workflow for web apps and python apps.

And as someone still learning front end web development, I found that I really enjoy developing with Svelte over React and Vue (although I still like Vue).

The repo below contains a full development environment to get up and running with Svelte in VSCode in a few simple steps without having to worry about installing anything on your local machine other that VSCode, the Remote Development extension, and Docker.

After cloning the repo, you just need to open the folder as a remote container and you now have an Alpine Linux host with Node, Yarn, and Svelte ready for development.

Also, no need to worry about which extensions for VSCode to install, the remote container already has ESLint, Prettier, and Svelte-VSCode extentions for VSCode installed.

Please give it a try and let me know what you think. Next up will be development container with Svelte-Sapper.