new site... again

You think by this point I’d stop making such a hassle out of this, but no. I completely scrapped my site I just made in the spring over the past two months.

The reason I destroyed it this time had nothing to do with bad design. Don’t get me wrong, it was kinda weird looking for sure, but I enjoyed tinkering around with this tag or that. My main issue was I was expecting too much from plain html files.

the struggle

Most of my site design back in March and April was just vim (then eventually sed/regex) practice to see how efficiently I could change the exact same header fifteen times if I ended up changing a tag or two. I wanted cool features like article tagging and clever meta head stuff but by far the most cumbersome was multilingual content…

This was definitely the biggest issue I had, so I wanna show my hack solution to dealing with it. Here’s how I’d handle the html for my intro:

file: index.html<!doctype html>
<html lang="en-US">
  ...
  <h4 class="hl center">
    <span lang="en-US" xml:lang="en-US">Welcome to my site</span>
    <span lang="es-US" xml:lang="es-US">Bienvenidos a mi sitio</span>
    <span lang="de-DE" xml:lang="de-DE">Willkommen auf meiner Webseite</span>
  </h4>
  ...
</html>

Then I had this rule in my css:

file: styles.css/* what makes multilingual tags work */
html:not([lang="en-US"]) :lang(en-US),
html:not([lang="es-US"]) :lang(es-US),
html:not([lang="de-DE"]) :lang(de-DE) {
  display: none!important;
}

It was a pretty clever solution. I could just change the lang of the <html> tag itself as a switch for all my spans. The source was a real mess, and chrome offering google translate would break the site, but it worked normally besides those mishaps. The real issue was thinking this was a healthy way to write up a site.

It didn’t take long before I burnt out writing it all by hand, so I stitched up html fragments into full files with a shell script, but as long as I had to serve singular, static files, it was always gonna feel more like gluing a ransom note than making a proper templating system.

ransom note — The culmination of my html scripting

a new way forward?

It was bad enough that I was just gonna move to some premade hugo solution when I found this article that evangelized the power and simplicity of dynamic sites, specifically with Go.

It seems as good a thing as any to learn, so I learned go’s funny syntactic slang like std, pkg, and fmt (no YHWH yet.) It took very little time to figure out its power not just as a templating engine but also exposing to me what my reverse proxy, nginx, was doing the whole time serving particular domains by reading requests and writing responses.

why dynamic is better

A good analogy that helped me understand the power of dynamic sites is cassette tapes. My weird systems I devised to generate html files were me cutting up a bunch of riffs and drum solos and gluing them together into one long tape to be read by a deck for some ’80s kid to enjoy.

Dynamic sites are like those digital to cassette converters people get for cars too old to have cd players or aux. They don’t really have any magnetic tape and instead have a beam where the read head is to trick a cassette player into thinking it’s reading real tape, so you can play anything arbitrarily.

cassette tape held up in front of a car stereo system — A static file, ready to serve

I do wanna show off the templating system (that hugo uses too) cause I think it’s real neat. Here’s a lang aware func I made for the site in action:

file: index.tmpl.html<!doctype html>
<html lang="en-US">
  ...
  <h4 class="hl center">
    {{ translate .Lang
    "Welcome to my site"
    "Bienvenidos a mi sitio"
    "Willkommen auf meiner Webseite" }}
  </h4>
  ...
</html>

An here's a live demo (+ dynamic lang buttons):

Welcome to my site

simplicity is the best extensibility

The coolest part isn’t even go's http package or insane template engine. Dynamic stuff such as having language specific urls is great, but it wouldn't have been possible if it didn't make any sense to me.

The entire flow of control is self-written and, more importantly, self-understood. Making your own handlers and router may seem hard at first, but it's so much easier than messing around with config files in reverse proxies like nginx or apache you don't understand in the first place. Extensibility matters way less than comprehension. In fact, I'd argue you can't really utilize the former without the latter. Otherwise all you're gonna do is shrug your shoulders, copy a bunch of code, and pretend you know what's going on.

final thoughts

Static sites are cool. There's a real charm in being able to set up a site in three minutes and knowing that the url bar actually represents the directory structure on the server itself. But they're too restricive for me to enjoy using them anymore. Writing my site in go was a fun way to stretch out my feature set without having to use a godless flask/node/ruby on rails webstack hosted on AWS/azure/google cloud.

There’s still things I need to change like make a better md->html system and move to a sqlite server cause constantly parsing files for tags is painful, but after many months of writing angel-castaneda.com, I finally feel like I’ve made something I can be proud of.

Thanks again to jes for helping me to say no to big, clunky frameworks, dynamic or not. I also wanna thank my friend Alex for helping me make my original site back in 2021 as well as coding with me this summer to become dynamic.

Monday, August 7, 2023