Here you are! Reading about the page you are reading on. I made this website so that I might show all manner of things to the internet (read: ramble at the void). Every line was written by, and is in some sense a reflection of me. Do not be afraid of imperfection -- The triumphs and mistakes will at least be yours to own.
By your being here, I have to imagine it's actually the design and technology you'd like to know about instead. Otherwise... Any other button will do. Ta-ta.
Design
After developing the basic content, I decided I wanted to theme this website like those old 80s-90s hifi audio stacks - 'black plastic crap', according to some fans of the stuff. I've always loved this era of design, where sleek physical interfaces surround a digital core, before the era of touch screens and software-defined interaction.
There's something especially nice about the character of old VFD displays - like the 14-segment title bar at the top of this page emulates - how they blend digital segmented precision with a little analogue warmth. They can only produce soft colors through colored film, which spill out just past the limits of their crisp lines.
I took inspiration from a number of different interfaces from this era - particularly units like the colorful Sansui pictured above and the black monolithic Sony designs. You may notice a resemblance between their logo and mine (top-left).
Naturally, there's a limit to what I could do here between the limits of reason and the heat death of the universe. Goad it as I might, CSS isn't really meant to style things like this. So, I settled for a sort of skeuomorphic design - legible as a website that can hold normal content, but still in the obvious form of the physical hardware it emulates.
Most of the effects that give form to the stack are nothing more than gradients or stacked text. The horizontal gutters that divide sections? Just a vertical gradient with background-colored circles drawn over the edges for the impression of an indent. The volume knob is just a few manually positioned circles with gradients to emulate ambient occlusion. I could talk for hours about the various hijinks behind the content here, but neither you nor I have the patience for that amount of text.
If you'd like to read more about my experience with CSS, consider reading CSS: Taming the Dragon.
Hosting
This website was originally completely self-hosted on a machine in my living room - my roommate Nate's old laptop. Or, what remains of a laptop.
It has:
- A motherboard
- CPU/RAM
- Nothing else
It's actually amazing that this thing turns on. Except for the times that it doesn't. Then it's slightly less amazing. When I say nothing, I am telling you that this laptop does not have a battery.
Okay... Simple fix. Let's just change the BIOS settings so that it will turn on when connected to any source of power. A CMOS battery should keep BIOS memory powered regardless of the missing main battery. And guess what: there IS actually a CMOS battery that technically exists on the motherboard! Problem solved.
Either the ethernet adapter or computer itself seem to enjoy working for about 24 hours before failing for unknown reasons and refusing to reconnect. So, I restart... and half the time, it works! And half the time, the CMOS battery is dead. I forgot to mention that this battery has about 5 minutes of charge, if we're being generous. It also seems to be some uncommon expensive model, for reasons well beyond my understanding. And now I wait for nate to come back, find a keyboard and monitor and laptop battery to connect, and then reconfigure everything.
You might begin to understand why I am no longer self-hosting this website. As it turns out, Cloudflare has a very generous free plan for static sites. For the kind of content you'll find here, it is effectively infinite. I'd encourage you to give it a try.
If our machine is up right now, take a look at plaza.nate.town, where you can find all the things we occasionally succeed at hosting. It's a shame I couldn't use it, really. Dynamic DNS1 is pretty cool.
Technology
As you may have caught earlier, this is a static site. That means that it is compiled from source into simple HTML and CSS, with very little Javascript. There is no framework that dynamically changes content between several different pages; separate groups of content are nearly always pre-baked into separate pages hosted at separate URLs. Take a look at the blog page - you'll notice that if you click to the next group of posts, the URL in your browser bar actually changes. The list on the screen did not load a new set of posts - you are on a separate page, with identical content outside of the post headers.
You might think this seems wasteful. And in some sense, it is - there is a lot of duplication if you want to paginate content into smaller sets of items. But it's worth keeping in mind, this is tiny in real terms. The layout of many of these pages is less than 1KB in total. One single song from the music page? 6MB - 6000 times more.
This approach comes with a number of advantages that more than outweigh this cost. Primarily, ease of use / development and the complete lack of computational overhead on the client's computer. The internet is fundamentally centered around HTML and CSS; by working directly with them, we avoid a huge amount of complexity and unnecessary foibles for relatively simple content. I am not hosting a database. Text on a screen is their bread and butter.
Still, that kind of duplication means that pre-processing is vital to your health as a developer. To be able to quickly reuse sections of content, colors, and functions, I used a build tool called 11ty.
11ty
11ty is coordinator for tools that compiles your source files into their duplicative final versions. It is what allows you to create a static site without needing to copy-paste the same HTML layout (read: the title bar, background, text styling, etc.) between every article page. It is fundamentally agnostic to what tools you use, and only does a minimal amount of processing itself. I became familiar with it through the wonderful learn11ty.dev, which takes you through a pretty comprehensive example project to get used to everything you might need to use.
11ty does include a few features of its own, though: Javascript-accessible collections you can generate or write directly to a data file (say, a collection of all the posts on this site), pagination, front-matter (metadata accessible by tools), and hot-reloading when any of the included files changes.
Templating
Probably the single most useful feature of 11ty is the integration of a templating language. The templating language is effectively just a pre-processor with some logic flow. This allows you to create generic layouts, which you can then extend or specify directly from front-matter on a page and save the enormous amount of duplication that creating many articles would otherwise take.
I use Nunjucks personally, which is pleasantly simple. It is very similar to Django for those who know. Like any good preprocessor, you are also able to define macros to quickly create elements with variable settings.
It also allows automatic variations - see the differing angle on each piece of tape above a picture.
Nunjucks is embedded in pretty much any section of the site that might need variation. Blog post lists (macro to create headers and filter posts), navigation buttons (change styling such that the appropriate one is pressed), display all topic pages automatically, etc. It is by far the most important thing here.
CSS Processing
I am also using Sass - a CSS preprocessor. The most important function of Sass is to allow reusable variables between sections of styling, such as common colors, font sizes, and spacing constants. For a site of this size, each of these quantities would otherwise be copy-pasted no fewer than 30 times each. Youch.
Sass also includes a number of conveniences, such as extending one styling block from another, or composing parent-child relationships from within the parent's styling block instead of as many separate sections.
Notice the use of variables like $font-secondary to reference a specific font color - which I can change across the entire site by editing only one line. The ampersands here make it much more convenient to make styling decisions for children of this style specifically.
Markdown
I'm using markdown files as the actual page declarations. Using front-matter (a small YAML block at the top of the file), you declare what the actual html layout file should be, as well as title, date, and any other useful metadata. Through Nunjucks or another templating language, the layout file can import the text content of the markdown as the 'content' block wherever it makes sense inside of the rest of the page.
The other metadata can be especially useful to specify things like 11ty collections, or topic-specific titles for pages that otherwise share a layout. The Projects and Interactive pages both share a layout, but have different data specified in their metadata to differentiate the content.
Thoughts
As much work as creating a whole website from scratch took, I don't regret a bit of it. It certainly took more time (a month or so), but I also understand every inch of it in detail. I am not someone easily content to use complicated frameworks that abstract away what's actually going on. I am not a web dev, and I did not know how to use HTML, CSS, or Javascript to any real degree. Now I do.
Could I have done things more efficiently? Faster? Prettier even? Sure. But every part of this site is mine, and I never would have learned what I now know otherwise.
I don't regret learning how to self-host web services, or automate updating site files over SSH, or work with a domain provider to provide consistent DNS services for an inconsistent public IP.
I don't regret my choice of tooling either. A static site was absolutely the right choice for me. Performance matters, and so does cost to host (or, lack thereof).
Do I plan to make web dev my future? Absolutely not. As much as I kid, I am not a masochist... But it's a great part of my toolkit. I could not have a better place to show my work and thoughts to those who care to visit. Try it! Don't be afraid to make something - imperfection is human.