goth ftw
javascript sucks...
i know it's the language of the web and yotta yotta yotta. i'm not even sorry. this opinion isn't even really based on objective reasons like performance or third party ecosystems or programmming paradigms or any of that shit. it's purely down to my taste and the visceral emotion that i feel when i write javascript.
a triple f@!#ing equals sign?!?
if you're reading this (let's be honest you aren't), you might think "well, that's a weird take considering the blog where you are complaining about javascript is written in react which is... javascript."
well, i've decided to put an end to my toxic, co-dependent relationship with react, because i finally can.
all thanks to...
htmx
recently, htmx has been growing in popularity. this is, in my opinion, because it follows a fundamentally different approach to managing client-side state in web applications. in specific, it follows a paradigm known as HATEOAS. HATEOAS stands for "hypermedia as the engine of application state." this simply means that the hypermedia itself (aka html) of a web application should not only encode the state of an application, but it should also drive changes in state. how can it do this? don't you need javascript for that?
well, the short answer is "yes, but not as much javascript as you'd think." htmx is a javascript library consisting of roughly 5000 lines of javascript code. this code's primary aims are to (1) listen for events like clicks, hovers, etc. and (2) provide interfaces directly on html tags which can make ajax requests to a server in response to those events. then, it is the server's job to respond with mutated or new hypermedia (rather than JSON) to be appended, prepended, swapped, or even deleted from the DOM on the client side.
why is that so cool? well, it raises some interesting and often unasked question in the mind of developers:
do we really need react?
if i don't need react, could i build my web app using only my favorite backend language with some templating – can i finally write my blog in go?!? 😈
and thus, the GOTH stack was born.
the GOTH stack is a simple, lightweight stack comprised of:
- GO as the backend language
- Templates from the Go standard library for structuring views
- Htmx for server requests, rendering, and interactive insertion into the dom
one of its key features (for me at least) is that it reduces the amount of javascript you have to write for a web application to effectively zero. in fact, i am re-writing my entire blog using the GOTH stack, and so far i haven't written a single line of javascript. lfg.
while working with the GOTH stack, though, i noticed that i am not being a true GOTH purist. i am actually using a few additional frameworks to make life a bit easier/familiar. these include:
hence, i am dubbing this stack the GOTH FTW stack (or GOTH For The Win if you prefer).
while rebuilding my blog i am following some guidelines i set. these are:
- i want to use as little javascript as possible
- i have to be able to continue writing the blog posts in markdown
- cost of deployment has to be minimal. was free on vercel with react
- no sacrifices on any animation, styling, or interactivity
i'm really enjoying working in this stack, and i'm excited to see how this goes. i'll be documenting the process here as i go along, and i'll eventually deploy the new blog once it's ready.
cheers 🍺
[UPDATE 2024.06.11]
for hot reloading i am using air coupled with a Makefile to watch updates to css, template files, and markdown files for the blog posts. i've had very few issues with getting the same functionality into the blog as i had with react. hx-swap took some getting used to, but now that i have a basic understanding of it, i'm finding it to be very useful and intuitive. i also was able to implement an infinite scroll version of listing my blog posts, which i prefer over the original version i had in react – simple pages.
[UPDATE 2024.06.19]
this blog is now fully deployed using the GOTH FTW stack. i love it! i have feature parity with my original blog, plus some (like infinite scroll as i mentioned). also, i literally have only written 12 lines of javascript in the entire thing. and that was only for the stupid animation on the heart button for blog posts. i am also pretty sure i could get rid of even those twelve lines by adding the remove-me extension for htmx since the only reason i needed javascript was to delete the translucent hearts after they fade. there are also loads of other cool htmx extensions (like preload) i may play around with. you can find them all here.
[UPDATE 2024.12.20]
i originally had to write roughly 12 lines of javascript to make the heart animation work when you like a post. i have since been able to get rid of it by using Tailwind theme extensions to define the animations and hyperscript to trigger an event which removes the heart from the DOM. i literally have 0 lines of custom javascript in this blog – pretty fuckin' dope.
anyway, i can finally cut all ties with javascript and all those who practice its disgusting, dark ways. goth ftw.
