The Cassette Tape
The Days Get Smaller
It's darker sooner lately with winter upon me, and my sleep schedule has been worse. And so the days have become absolutely tiny to me, like I'm much further towards the poles than I am. This is not helping my lack of energy.
And therefore I am once again searching for the smallest possible improvement to my blog. I was quite tempted to simply write a paragraph or three on burnout and the ways it can show up, or how disability can creep into affecting every part of your life in unexpected ways, but I think instead I'll update the tags.
Tag Along With Me
Let's start with post, which applies to every blog post. Eventually I'll add a home or main or similar. And let's also do december-adventure (see here). I'll double up with december-adventure-2024, so in the future I don't have to worry about doing a special collection of December Adventures by year that needs checking dates. And let's say fatigue, because I know I'm going to talk about that a lot, and I think this serves as an example of the effects of fatigue and how to work around it. A disability as well for the more general case (I might collapse those two into one, in the future).
I suppose blog works, for posts about the blog, and...tech? programming? Let's say web-dev, to pair with the future game-dev. For posts where I tackle some complicated programming problem or talk about it generally, that might get a programming. Some posts will get 11ty as well, and neocities.
...mildly tempted to have a nicky-case tag, but I think I'll save that for if I return to her stuff here in the future. Certainly deserves a spot or three on a thank you and credit page.
Actually Simple
And done! A nice, small bit of change that sets me up a little better for the future, creating tag collection pages and otherwise improving organization and navigation. I also added a few missing dates to my early posts.
👀
No, you can't see the tags. This was for me. You get the blog post. 😜 The visual list of tags near the titles will come in the future.
A Final Catch (Or Two)
what do you mean that yaml can't use tabs in indentation
Well that's annoying, albeit at least a quick fix with shift+tab. So much for pleasant indentation (I'm not shifting to using spaces only in frontmatter, that would be a headache).
Also, I managed to forget the title of this post, and then confuse myself repeatedly as I tried to figure out why this post wasn't at the top, but the text was. Turns out: it was at the top, I just didn't update the title in the frontmatter. I definitely want that automatic "first line of Markdown is a top-level header and that becomes the title" which I also use in Obsidian.
I Want It Dark
Wow, that tiredness really isn't leaving. What's the smallest unit of progress I can do?
Ow My Eyes
My eyes are not liking bright lights this week, and the website is starting to annoy them. I did discover a simple fix the other day...
Huh
Wow, that was actually easy. Plopped this in the header of both of my layouts, and all works.
<style>
body {
background:#000;
color:#fff;
}
</style>
Done And Done
Not perfect, I don't think, but I can experiment in the future, when my eyes are less sensitive and tired. It would be good to have accessibility testing tools available at the time, too.
Still! Something done, despite the exhaustion. Pretty pleased with that.
You Ever Feel Tired?
I'm disabled in a complex way. As in "so complex I regularly forget all the details until one knocks me down unexpectedly for the first time this week". So I'm pretty used to being tired, even if I'm well past being tired of it. Today features some delightful new forms of tiredness on top of how tired I usually am, and by "delightful", I mean "I guess at least I get a puzzle to solve with the tiredness this time".
The point is that the tiredness is eating my brain and maybe also my soul, and most of my desire to do blog stuff today. So what's something simple?
Not The Blog!
Actually, maybe the blog, I'm not sure yet.
I'm thinking it'd be a nice, simple project (inb4 jinx) to guarantee that all those posts in posts/ are Markdown — or, more specifically, that I remembered to have them end in .md. Actually, just end in anything, because there's going to be at least one JSON file present as well.
So I could either go simple and check for an extension (or just a .), or look to see if all are either .md or contain .11tydata (currently, that's just the JSON configuration file for posts). Let's go with simple.
Ideas include some kind of build system trigger in Eleventy, something in the blog that pops up a warning on all local build pages to alert me if something is wrong (might be nice to have generally, I can be oblivious), a git hook (the site lives in a repository), a VS Code plugin (VS Code being part of my blog editing workflow), or an AutoHotKey script that watches the folder.
Research Time
Let's glance at all of those.
Eleventy Build System
The events page looks neat. Seems like eleventy.before does what I want, though I'll need to refresh myself a bit on JavaScript in order to know what code to do. I'll need to do that eventually anyways, of course.
Blog Warning
Ought to be fairly straightforward, but potentially a massive time sink. I know I'd get sucked into making it look nice and dealing with all sorts of HTML/CSS things I've forgotten.
Git Hook
I've already forgotten repeatedly to commit for this project, because it feels so different from my usual ones. Probably best not to use this, even if I'm fairly certain it's doable. Minimal experience to draw from, too.
VS Code Plugin
So the ls-lint plugin works to check naming conventions. Neat. Requires one npm package that's separate (ls-lint itself), but that's simple enough since I already have that installed and recently updated.
AutoHotKey magic
It's not too hard to make a folder watcher, and AHK is the option here I'm actually most experienced with, apart from "searching for VS Code" plugins. Still, either I'd have an annoying seperate script to remember to start (or that I'd need to trigger by another method), or I'd have something sitting in the middle of my growing main AHK file, which is still named "Hotstrings.ahk" despite considerably more than hotstrings being present in it (even if they remain my most common use).
The Solution Is Simple
VS Code plugin it is. Looks too simple to not try first.
"not compatible with the current version of Visual Studio Code"
What.
Well, fine, I didn't want to bloat my VS Code profile with another extension anyways.
(Currently wishing I had my own set of emoji. A nice :huffymad: would be great right now.)
(Also this probably isn't the fault of the plugin. Updates be updating. I expect it'll work again before long.)
The Solution Is Semi-Simple
So I like the look of ls-lint, and it gets triggered by a CLI command. Can I force that on save or file rename?
Seems so, and Eric McWinNEr has a solid walkthrough. (And the VS Code extension in that does install successfully.)
Executing The Plan
Plugin and ls-lint now installed. I chose to make ls-lint local, to ensure this project will more easily work on another device (or, well, to make it easier to avoid some problems, at least). And it looks like (after making a YAML config file), ls-lint is working great! After a bit of fiddling with the settings, the plugin triggers on save.
"emeraldwalk.runonsave": {
"commands": [
{
"match": ".*",
"cmd": "node_modules\\.bin\\ls-lint",
"autoShowOutputPanel": "always"
}
]
}
The output panel is shown always because it took me less time to setup than to notice that it outputs there rather than the terminal, and it's going to be easy to forget.
Now just to figure out the right way to configure ls-lint.
Missing The Obvious
Ah. Dang. Extensionless files aren't even supported.
ls:
posts:
.md: kebab-case
.11tydata.json: kebab-case
I'm leaving the file like this as a bonus naming check, but looks like ls-lint isn't going to help me with my main issue. Still, the Run on Save extension seems useful, so it'd be nice to just let it run something else that solves my issue.
How about a quick batch file?
Ha Ha Ha No
for %%F in (*.*) do echo %%~nxf
Nope nope nope. 15 minutes of headaches struggling to remember syntax pls searches pulling up some rather contradictory answers is enough for me. Guess I'm learning a little PowerShell at long last.
How PoSh
WAIT I DIDN'T MEAN I WANTED TO LEARN.
Bleh.
So where am I starting with my knowledge?
...huh. I'd forgotten they were .ps1 files.
Yes, really, that's about where I'm at. That, and having a mild hatred for the syntax.
So this got me running a file...sorta. It wasn't clear to me regarding how to call a relative path, or when to use . vs. &. Thankfully this question and the responses helped, in particular me catching the '.\file.ps1 format in the question, and stanleykylee's comment on the first answer linking to this. More than that, though, was standleykylee's summary:
TL;DR "." calls script and runs in the current scope "&" calls script and runs in a different child scope and is thrown away
Useful! So now I have . '.\check-for-extension-presence.ps1' that runs my file nicely. Now to set that up in my Run on Save config...
M'kay, I need to set an alternate shell...and that doesn't seem to be working...
Solution: Apply Sledgehammer
By sheer luck, I found out that there's a fork of Run on Save called Save & Run, which just uses the PowerShell terminal as output! Perfect.
Out with the old and in with the new.
"saveAndRun": {
"commands": [
{
"match": ".*",
"cmd": "pwsh ${workspaceRoot}\\posts\\check-for-extension-presence.ps1"
}
]
}
Now to actually get the PowerShell nonsense working.
PwShering
https://stackoverflow.com/questions/72097924/how-to-list-file-and-folder-names-in-powershell
Well that was exhausting. Way too much time fiddling with things I don't know about. Still, I ended up with a working solution.
Get-ChildItem ".\posts\*" -Exclude "*.*" -File | echo
Simple enough...except it was such a pain, probably because I'm doing this at 1:30 AM. This got me started with listing things, and here is where I ran into -Exclude first. And then I flailed around with tons of commands until I discovered that I'd had the solution from nearly the start, when I had ".\posts\*.*" -Exclude "*". I flipped them around by accident later on to find the solution.
As an aside, I do not like the massive inconsistency in capitalization in PowerShell. Eventually I'm going to look up any common standards that exist, but I am sick of it for tonight.
At least it works now! If any files without extensions show up in posts/, then it'll echo the names of the files (and lots of other unnecessary info). Otherwise, I just see a series of commands being run in the terminal. Annoying to see the flicker out of the corner of my eye, but good enough.
So Done
So tired. So done. Was this the simple thing to fix?
...should've gone with AutoHotKey. Tomorrow will be a less grumpy day.
wait it already is tomorrow oh no
Eleventy Education Continues
Picking up with some of the listed items from yesterday.
A Bit Backwards
Let's start with something easy. How can I get the posts to default to the opposite order that they're currently in? I'll start with a planned rename of files to remove the dates in the filenames. (Like 2024-12-01-hello-world.md, which is based on how I title journal entries.)
Interestingly, despite stripping dates from filenames, things are still sorted correctly. What's the default?
Oddly, it's not written explicitly in the docs, at least not on the Collections page or the Pagination page. Not showing up on some quick web searches, either. Maybe I can test it quickly? Only so many reasonable defaults they could be using.
Experimentation Time
Let's make an ordered list version at the top of my main page for quicker experimentation.
Alright, that's collections.posts showing up in order of creation. (Note that I've removed the date from the URL and reset _site, so nothing being drawn from that.) Definitely not alphabetical order. Let's try collections.all.
Huh. That doesn't make sense, but...
Ah. I must've recreated the home page at some point, because the file creation date is 6 seconds after the Hello World post's file. So that makes this easy enough to test for sure.
A freshly baked file, and now let's do PS H:\projects\blog\posts (Get-Item test-file.md).creationtime=$(Get-Date "11/30/2024 12:01 am"). (That changes the creation time using PowerShell.)
🎉 Victory! Note that this is another thing that needs a _site reset to show up properly, for it to respect the ordering change. (And also after deleting the test file.)
So looks like the easiest thing is to just go ahead and learn a custom sorting tool to sort via a date I place in the frontmatter. I still want to know if there's a simpler way, but I dunno. Maybe if I search again, and click one of these results from older versions of the Eleventy docs...wait.
Wait.
Content Dates
Well, that put me on the right track. Apparently it's the Content Dates page that mentions sorting is done by dates in the frontmatter, which defaults to file creation date. There are also a number of keywords you can use to set alternate behavior, like the simple Last Modified (or Created, to get the default behavior.)
In hindsight, I feel I ought to have tested just using date in the frontmatter...
I still wonder, how did that get removed from the Eleventy docs? A web search had pulled up the Collections page in the 0.7.1 docs, on which I found the link to the Content Dates page, which I then searched for and found on the current docs. Looking back at the old Collections page, I can ctrl+f "reverse" and — yep, there's a way to reverse things. Let me look at the current docs, I still have that page up, and...oh.
internally screams
Turns Out The Docs Are Good, Actually
To sort descending in your template, you can use a filter to reverse the sort order. For example, it might look like this [...]
Link to the section in the docs
How did I miss that? I swear the page search turned red and did not jump like it does now. I'm not imagining things because I documented it above in this very blog post as I went along. Did the page not load for a while but finish before I came back? Did I typo something right near the start of the word so the search wouldn't jump to the result (in the bottom half of the page) at all? How did I fail to search the page for a simple word?
Particularly annoying, since the solution to my problem is also that word — adding reversed was all I needed to get the behavior I wanted. At least, if I want to use Liquid.
Fluidity And Weaponry
Turns out that Liquid is the default templating engine for Eleventy. My assumption that Nunjucks was the default came down purely to seeing njk files in Nicky Case's site files, and also seeing them come up in passing. Time to research many things.
It's quite a good thing that I'm doing this as a December Adventure, or else I'd still be "researching" (via copious consumption of blog posts and videos) this time next year. Deadlines are great! (Except when they aren't, but that's another post.)
From most to least important, I'm prioritizing support (both community and official), functionality, and ease of use. Hopefully that minimizes the likelihood of me wanting to switch in the future. It doesn't seem complex to change templating languages (Eleventy makes it as simple as a language swap can be, it seems), but it does seem annoying. And worse, time-consuming, which means I might never end up doing it.
Research Time
The first thing I find is in this Eleventy Walk Though, which points out that Nunjucks allows JavaScript in frontmatter and data, but Liquid doesn't. This feels like something that could be outdated, as it's from 2020. (I'm also not sure how much I need it, but see priorities above.)
Curiously, a lot of the articles I'm seeing (from a few related searches) are from 2020. A Google artifact or something else? No idea. A lot of other results seem clustered around 2023. 2020 articles prefer Nunjucks and its power, 2023 articles prefer Liquid and complain about Nunjucks not being updated for a long time. (Funny enough, the most recent Nunjucks update is from 2023, after those posts.)
One of the 2020 articles shows a comparison in formatting.
{% # Liquid %}
{% if data.publish-to contains 'mastodon' %}
{# Nunjucks #}
{% if 'mastodon' in data['publish-to'] %}
Reminds me that I need code formatting for this blog. And footnotes! This line would be perfect for on-hover footnotes.
Seems that Liquid has some slightly cleaner syntax overall, at least from my perspective, but neither is terrible.
Coding Detour
Slight problem: seems that Eleventy is refusing to build the site, because the above Nunjucks code is being shown as invalid Liquid code. True, but also very unhelful.
Solution: {% raw %} and {% endraw %}}} fixes it! Simple enough, and if I ever decide to just never put templating code mid-post, I could add that to the template (probably). For now, I'll just add that only when needed, to minimize future debugging headaches.
Bonus: I only caught the way that those commands weren't appearing in the final post...because they're escape codes. So I had to figure out how to escape the escape codes (kudos to Khaja Minhajuddin's answer for this), which ended up being something like
I tried to stack escapes so I could show that without a screenshot, but that ate up another 15 minutes and nope nope nope.
(Side note: do I want to provide different versions of that image in the future for light mode and dark mode? Do I want to find a code editor setup that is better for screenshots? Do I just want to return to redo this once I have better code formatting tools? Yes, to at least one of those, but preferably not all.)
Back On Template Engine Research
So for this month, I'm essentially defaulting to Nicky Case's blog when in doubt (and frequently when not in doubt). And what do they say?
In blog/eleventy.config.js: // Use nunjucks, please
Well, that could be taken many ways (mostly at least not negatively towards Nunjucks), and I don't want to overthink it more. They kindly state in their FAQ (which does not answer this less-frequently-asked question, alas) that they don't have the resources to help with individual projects, so I'm going to elect to not directly ask her about what was quite possibly a throwaway comment. (Goodness knows I'd hate to have someone hyper-analyzing every comment I made.)
Curiosly, the official Eleventy docs only have a "why pick this option?" for WebC, and not any of the other options. It also has community guides linked, like many doc pages but unlike the other templating engines. It's the newest (?) option at time of writing.
Reading into what is now my third option up for consideration, it seems that it essentially offers easier use of web components. Very neat — but unfortunately I am incredibly rusty at JavaScript generally, and have basically no experience with web components.
Of the stuff I do need JS for, the only critical thing that I can think of is a little swapping of CSS to enable a dark mode. How does Nicky do it?
Looks like some plain JS that activates on DOM load, and a listener on the dark mode toggle that changes things. Simple enough. Let me see what she does for dark mode...
body[dark_mode=yes]{
background:#000;
color:#fff;
}
body[dark_mode=no]{
}
...oh. I suspect I have been overthinking dark mode...
Decision Time
Okay, it's late in the day and I need to make a call.
Liquid is the default and seems fine, other than being more annoying to search for. (I can do "nunjucks [term]", or "webc [term]", but have to do "liquid template [term]" at the least.) Still has tons of resources. It's also the most starred on GitHub currently.
WebC is the newest and potentially the most powerful and long-lasting technology. That gives it fewer resources in general, at least for now. It seems like it will become the Eleventy default in the future, perhaps for v4.
Nunjucks is my default, given my temporary (?) Steal From Nicky Caseâ„¢ philosophy. Slightly worse syntax in some cases, but plenty of resources.
Hmm.
Screw it, let's say Nunjucks. I think I could waffle on this for years on and off, so let's stick with what works for the inspiration website.
Doing Shtuff
Hmm. Not really enough time left in the day to switch over to Nunjucks, honestly. What else can I do? (Or have already done but not written about?)
URL Formatting
What's the best way to label pages in URLs? I did a (relatively) brief amount of research, and my inclination towards dated hierarchies like blah.com/blog/2024/12/01/post.html is broadly advised against. I like it partly because you can easily chop off parts to get to a grouping of posts, and partly because it means it's harder to accidentally duplicate posts. The former is supported in this interesting article.
I noted that something was off when I saw "Update added 2005". Scrolled up to check the date that I had missed: March 20, 1999.
Guess dated hierarchies was extra correct.
Many other sites (like this Codemzy post) advertised something much simpler: either blah.com/blog/post.html or simply blah.com/post.html. Some places have a blog.blah.com/post.html subdomain (like blog.ncase.me/). I think I'll go with the straightforward cdrch.neocities.com/blog/post.html. I'll save the more direct cdrch.neocities.com/page.html for projects and other things.
Done and done. As the blog is four (4) days old and only three (3) articles are affected, I'll permit a little link rot as a treat. At least it'll be simple to fix for future archivists?
I Gotta Stop This
Dear self: please remember to name blog posts as .md. Otherwise, you'll spend at least a few minutes repeatedly rebuilding the site and checking _site to figure out why my work-in-progress post isn't appearing on the local build.
A project for the future: have an automated check for this. No files without extensions should be needed in this project (or at least not under posts/).
(Bonus project: an online to-do page for public projects.)
Learning About Images
The ImageMagick command of the day is magick mogrify -path "output" -trim -bordercolor "#fff"-border 10 -format webp -strip *.png. That takes all the PNG screenshots I took and drops them into a folder, trimmed to minimum and then with a solid border added, and converted to WebP. As much as I love my PNGs, I must admit that WebP is more efficient for a lot of uses. You can see the results earlier in this post.
Wait. I can't see the results. What...?
After Some Mild Panic About The Arbitrary Posting Deadline...
export default function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("assets");
}
Turns out that if you don't do this passthrough of files, they just are ignored by Eleventy! I suppose I could've figured that out from all the things like .gitignore that aren't being transferred over (note to self: put everything inside a src/ folder before the programmers get me), but it didn't occur to me that there's no processing of images (without a plugin for that).
At least it's working now! And conveniently with the standard  syntax, too. I'll eventually have to return and see about alt text for all images — normally I'd guarantee it's in place as best I can, but I'm being a little fast and loose this first month, considering how quickly the blog as a whole is changing.
Ouch, that delay put me past midnight...hmm.
I Can Just Lie
💠If I'm lagging behind on finishing and uploading a post, I can just put the correct date on it and pretend I wasn't late.
Wait It Doesn't Matter
Oh right, arbitrary deadline, with nothing riding on it. It's not even midnight for other friends in the country doing the same challenge. Up it goes with an approximately correct time. Maybe eventually I'll automate timestamping alongside website updating, but meh, I'm pretty sure I'm the only one who's going to see the timestamps anyways. I would like to make the dates visible, but meh. In any case, thus ends day #4 (technically) of my December Adventure.
Wow That's A Lot
A lot more written today than I expected. Neat!
Eleventy Things To Do
A series of things I've figured out, or not.
Adding 11tydata Extensions
A lot of JSON and JS files in Eleventy can have an extension to their extensions, such as changing posts.json to posts.11tydata.json, which makes it a bit clearer when trying to figure out what files are supposed to be during debugging. I'll be trying to make use of these extensions going forward.
Oh huh, I guess I just have one so far.
Turns out, though, that this is one of those things that requires deleting _site and rebuilding fully to work, otherwise Eleventy seems to stay rather confused and acts as if I had just deleted the file. (At least in the case of directory configuration files.)
Solution: do it. And now done!
And NJK
Nunjucks files are a thing that definitely exists. I should consider learning more, after years of putting it off. Probably bes to stick with it, rather than using an alternative Eleventy templating engine. I'll avoid the simple rename of files for now, despite...it not seeming to make a difference? But I'll figure it out (probably).
Solution: learn things (probably soon).
Edit 2024-12-04: Turns out that Liquid is actually the default templating engine!
Conditional Titles
I'm not entirely sure how I want the title of each page to look, but I'm leaning towards Post Name - The Cassette Tape, and just The Cassette Tape on the main page. This is mildly important to me to find a good solution for, since I frequently save all open tabs to a Markdown file for later browsing, and the page title gets used as the phrase that has the link. This usually works great, but not so much for the occaisional title barely related to the content, or which doesn't mention the source website.
Solution: don't bother with conditionals and just have different layout files for the main page and post pages. Done.
Reversable Order
I'd love to allow people to view posts in both chronological order and reverse chronological order, because I personally often want these (and greatly miss the frequent absence of one or both).
Solution: TBD. Probably a second page, linked from home, that shows posts from the start? I'll come back to this in the future.
Excerpts & Summaries
I like the idea of the main page listing out the posts, each featuring the title, a one-sentence summary (probably funny but still helpful, unless vague on purpose for setting up a twist), and an except of the first sentence or three. The hyperlink should go under that as a "continue reading" or the like.
Solution: TBD. Excerpts are easy to enable, and summaries can be placed in frontmatter, then extracted. I saved the solution a day ago, but it's buried in a list of around a hundred links I saved to Obsidian...whoops.
Drafts & Betas
I want the ability to do what I am doing with this document — work on it as I go, when I please, and not worry about it showing up on the site. I already have things set up to ignore a _drafts/ folder in .eleventyignore, but I think it'd be better to leave things in place where they will eventually go, and just use frontmatter to control if it builds or not. I think I want the ability to have a post be not built at all, built only locally, or built for the final version, but I suspect just the latter two will be fine if I include a big header at the top: THIS IS A DRAFT AND WILL NOT BE PUBLISHED or the like.
I'd also like the idea to be able to share a post directly with someone as a preview, even if it isn't generally accessible on the site without a direct link. Maybe even a temporary or custom link?
Solution: TBD. I saw a solution for this, which just requires a little JS. Unfortunately, it is in the Obsidian link pile...
Titles From Titles
I like to use the first top-level header as the title of posts/journals/files/whatever Markdown nonsense I'm up to. So it'd be nice to be able to keep doing that, and then have that translated automatically into the title frontmatter as an early part of the build, plus remove it if that makes more sense for the formatting of the page. This has already
Solution: TBD. Feels like an Eleventy preprocessor thing, and doable.
Speaking of altering Markdown headers...
Automatically Adjusting Headers
This probably isn't needed, given my desire for excerpts only on the main page, but right now it looks very awkward to have a second-level header for the title of the post and also all of the main sections. You can only tell titles apart by how they link to the post pages (where everything is fine).
Solution: TBD. Probably worth checking, but not needed, once the excerpts and summaries are in place.
CSS & Related
I love Nicky Case's clean site design, and I expect to start there. Once I've got the basic functionality I want in, I'll start adjusting visuals. I was reminded that the CSS Zen Garden exists, and it has incredibly cool stuff.
Then I discovered the work of Jen Simmons and holy shit. I have ideas, though alas, many too overly busy for a blog.
So many game ideas though...
Solution: TBD. Many decisions to make.
There are also two specific sub-categories to call out.
Dark Mode
Doubling my CSS decisions needed. :(
Solution: TBD.
Fonts
...I guess I'll steal from Nicky Case? I'm always quite indecisive on fonts. I don't think I want to leave things as browser default (which is currently the case), but it would be nice to make it easy to let a user request the site respect that preference. Maybe whatever works for Nicky's dark mode could do it?
Solution: TBD. I've yet to decide if I even prefer the OpenDyslexic fonts I currently use on my machine or not.
Other Accessibility Measures
The list is TBD, but I have websites to browse for ideas as to priorities. Starting off with this and this at the W3C, then probably going for look at criticism of that for things that are missed. And, because I already know and trust it, going over the Game Accessibility Guidelines to see what I can apply.
Additional Nicky Case Theft
I like littlefoot for visible-on-hover footnotes (the only kind of footnotes I like) and Nutshell for things needing more (optional) explanation. If I want analytics — and I think I do — then GoatCounter sounds pretty great with its minimalist and privacy-respecting nature. Much less critical is MathJax, but I think that whenever I get around to learning more math, it'd be handy to explain things here.
The biggest question mark for me is Orbit. It's a really cool way of doing spaced repetition (one of the most powerful tools for learning and retaining information), and I honestly like the idea of being able to mark things in my own blog that I want to remember. But also...I don't know how much I'll do that? And more than that, I don't know if anything will be worth others remembering long-term, that wouldn't be much better if they learned from resources I link to. Spaced repetition cards made on your own tend to be much better to learn from. And more than all that, I prefer Anki — and it'd be nice to keep everything in one place. If there was a way to integrate them fairly seamlessly, then I'd consider it more. I'll consider it much more strongly if I end up doing more educational content, rather than just discussion and opinion pieces.
Solution: integrate littlefoot, Nutshell, and GoatCounter (probably in that order), then return to the question of the others. All this can come near the end of this list of things to do, though already I've wished that I'd had footnotes to work with.
Anything Else?
No, I'm eepy. I can return to each of these and extending the list another day. But I plan to get all of the above done this month, which gets my blog up to a place I'm happy with leaving it in favor of largely just writing and creating. (...I think.)
Totally didn't tweak things to have exactly eleven to-do categories.
Eleventy Time
I was inspired to use Eleventy by Nicky Case's blog, and that is going to become increasingly obvious for little while, both in my posts and in the design of the website. Following that, I expect there will be quite a bit of divergence, but it is quite the fantastic inspiration to go from.
Eleventy is a static site generator (or SSG), something that turns a handful of simple files into a fully-functioning website that appears the same to everyone. It has some limits, but makes things delightfully simple and speedy if you can live in those.
I previously tried out Jekyll, and thought it was pretty neat. I don't really have the technical background to understand all of the differences between it and Eleventy, let alone between them and all of the other SSGs out there. I can say that I feel slightly more confident with Eleventy when it comes to building a very simple website after only a few minutes of tutorials than I ever did with any other website-building tool. Coming from someone as easily confused as I can be at times, I think this is quite the compliment.
The Rush
Going from ideas to a published website took less than three hours, and frankly I think it could have taken a lot less with just a little bit more focus. Still, focus is a valuable resource and this process felt relatively efficient with it.
I've got to give credit to yumaikas for a great deal of help here. I can bikeshed for ages, and he did a great job of helping me narrow down choices and just enough of a push that I felt like I actually could maybe finish on the same day. He reminded me of NearlyFreeSpeech (which I intend to return to one day, when money is less tight) and showed off did the test run for Neocities in a handful of minutes, which gave me the confidence to end up going with it as my host.
(Admittedly, I had always wanted a Geocities website, and have been wanting a Neocities one ever since the project started. So that played a bit of a factor in selecting it.)
He also gave me a heads up as to the requirements I would need to have updated so that I could install everything quickly. And, of course, he gave me the idea for the name of the blog.
Strictly speaking, the process of creating and uploading the blog took under an hour. I created the repository just past 11 PM. I carefully proceeded – by which I mean I made a git commit every time I made even a tiny change at first – and had Eleventy installed and running on localhost just before 11:30 PM. I had used the official Getting Started page to get this far, then transitioned to the recommended video tutorial: six minutes to blogging. My first post, all of two sentences and a title, took 10 minutes or less, and I had it showing locally by 11:52 PM. A minute later, I started installing the Neocities CLI, and it only took a few more minutes to get the first version of the website uploaded, with three minutes and three seconds to go until midnight local time. Incredibly fast and mostly straightforward, and it left me elated for a good while.
And The Downsides?
So far, I haven't encountered any major downsides? Everything was answerable with a quick web search or checking the docs, and some of the more complex things I've looked at since were answerable with community resources. The only annoyance, and it isn't a huge one given some of the headaches I remember having in the past with Node and JavaScript, is that I've experienced issues in a couple of cases where the website directory doesn't clear out deleted posts, leading to a lot of incorrect stuff on the built website. Simply clearing out the site directory fixes this, unfortunately, that can't be done without restarting the hot reloading, but that's a relatively small issue, and I suspect one that I could write a little script for in the future.
There was also a bit of a headache where I didn't realize the behavior of the website with changing based on whether or not I included a final trailing slash in the URL. I included it on occasion, leading my test to work, but frequently did not, leaving me to regularly make mistakes when it came to testing pages by directly navigating to them. Whoops.
Ongoing Work
Since officially getting something out there, I've been working on a few different things, including this post. I've got ideas of where to take the blog, mostly in terms of functionality at the moment. (See aforementioned expected barring from Nicky Case.) I'm genuinely not sure how I want to style things visually, other than being quite the fan of all sorts of blues. I want to make sure the website works well with various dark mode extensions and looks good with and without f.lux. I'm probably going to stick with something very plain, black on white, until I have a clearer picture in mind.
Today, I'm just making a few tweaks to the presentation of posts, and adding the blog name — The Cassette Tape! How much I actually bother to explain of that name...I'll decide that another day.
There's plenty of questions to answer, so I expect those questions and answers to dominate the blog posts here for a week or more. I honestly did not think I would make this my sole December Adventure, but I can see now how improving this could fill up an entire month without a break.
I suppose I'll get back to game development eventually...
Hello World
...that's the usual sort of introduction, isn't it? I'm not exactly software, but close enough.
More words to come, hopefully with great intensity as I start a December Adventure.
Edit 2024-12-02: added link to the December Adventure page.