Quinten's Daily Log

Weekly Update: Friday, July 4, 2025

2025-07-04T21:00:00Z

A Leptos calculator project, breaking and fixing my router, cool fonts, and other things I got up to this week.

Leptos

I wrote a calculator in Leptos to get a better feel for the framework. I've written something similar for work in vanilla JavaScript, so I thought it would be a good simple project to compare with.

It (of course) felt harder because I am not used to Leptos yet. I managed to get something very similar working, though!

It was difficult to figure out how to get the <select> box to dynamically update if the <input> box had a high enough value, but it kind of Just Worked when I called set() on the signal from a the on:input function of the <input> box.

The only thing I couldn't figure out how to do is how to set the focus on a specific element upon hitting the Clear button. This feature was simple to implement in vanilla JavaScript. I know how to set a property or call a method on an element using the web_sys crate, but I have a feeling that Leptos would make it easier than having to query the DOM when the element I'm talking about is right there in the code?

Self Hosting

Tailscale trouble

Tailscale has been acting up for me lately on Android, which is really spoiling my fun. It's supposed to let through all non-Tailscale traffic (since it's based on Wireguard), but recently it's been causing my phone's entire internet access to just not work. Maybe it has to do with DNS, but when I turned off "Use Tailscale DNS" it didn't help at all. Tailscale did recently do an update, so I kind of think that did something.

I was able to restore internet access to my phone by checking off every single app and service (besides my SSH app) in the "App split tunneling" section. There is no way to select all. When I want to do web development on my phone now, I have to go in there and uncheck my browser. I tried installing a second browser (Firefox) to only use with Tailscale so that I didn't have to do that each time. Strangely, when I have either browser unchecked, the other one also stops having connectivity.

It keeps giving me little warning messages like "we can't connect to Tailscale so your tables might be out of date" or "DNS is unreachable" with no apparent way to read more. Sometimes it works, sometimes it doesn't. When it does work, it's often spotty or I'll have to turn Tailscale off and on again.

I see a lot of closed issues that look very similar in symptoms to mine with short messages like "fixed" (no explanation), so I don't know if it's a regression or just some really common failure mode, but I don't have much of a way of knowing where to troubleshoot. The debugging messages they have people gather to report are cryptic, and I really prefer to understand what I'm sending people.

Well. Sometimes that's the price of magic! So I'm feeling really motivated to figure out Wireguard to access my LAN recently.

Wireguard inter-LAN test

I installed and configured Wireguard on my laptop using a combination of the Wireguard quickstart, the Ubuntu server documentation, and someone's blog post (which was helpful in showing me that the casual-friendly wg-quick command exists, ironically absent in the official quickstart). I feel a lot more confident about the configuration now, but I couldn't get a handshake with the router. I am equipped to test and troubleshoot now, when before I was just trying to connect through my phone.

Breaking (and fixing) OpenWRT

I realized that I hadn't used the same port for the Wireguard interface on the router and the port forwarding rule. After I... fixed? that, my router started struggling. The Wifi wouldn't respond, and I couldn't access the router over the web interface or SSH (even via Ethernet).

OpenWRT has a failsafe mode that you can boot into, but it turns off DHCP. To connect, you have to tell your network card to have a static IP address. That was stressful to figure out how to under pressure, especially when I wasn't even sure the connection would work when I did get it right!

Once I did get in, I was able to back up my config. I zipped up the relevant config files as explained in this backing up OpenWRT guide, but I had to change a couple things:

After logging in for the first time to failsafe mode, it seems that you can't log in again without a password. Enter didn't work, and I didn't know the password if there even was one. This made it hard to zip up the files and then use scp. I was able to set a temporary password with passwd.
That guide suggests doing the scp command from the router, which I couldn't get to work. I think my computer was silently rejecting the request, because it timed out. Not even temporarily opening my firewall worked. Trying to run scp from my computer gave some error, and through an OpenWrt forum post about the same scp error I discovered it was because my version of scp was trying to use sftp under the hood, which the router doesn't support. A -O flag on the command fixed the issue.
I also want to remind anyone reading this that the resulting backed-up config files contain secrets including Wifi passwords and Wireguard private keys, and they need to be stored accordingly.

After backing up, I did a soft factory reset and restored my config files one-by-one. Nothing broke. After installing the Wireguard backage and rebooting to enable it, the problem came back. I was able to delete the Wireguard interface from my config file in failsafe mode and then everything was fine again. I'm going to try again, very cautiously, using the official OpenWrt Wireguard documentation (which I hadn't used before because it doesn't use the web UI).

Icecube

We generalized our bitmap font code to allow another font option. Now we have a font trait, to be used for other font formats later. We aren't entirely sure how to best store the different kinds of fonts. For some reason I don't remember, it wouldn't let us put it in a Box.

The default fonts should get to be const, but image::load_from_memory wasn't letting us do that, despite the memory in question being loaded in with include_bytes!. Not sure if there's some fundamental reason, or if it's just because that crate hasn't made their functions const.

We'll need to decide which fonts to package with Icecube. Here are some fonts:

Not Jam Font Pack (CC0, TTF)
Tamzen Font (modify and distribute permitted, multiple formats)
Creep2 (MIT, multiple formats)
Cozette (MIT, multiple formats)
Nb Pixel Font Bundle (CC0, TTF)
Nb Pixel Font Bundle 2 (CC0, TTF)
Vonwaon (CC0, TTF)

Browsers

I built Ladybird. It took a long time, but was surprisingly straightforward. They have a script.

Through their docs, I learned about wpt.fyi, which is a project that runs all the tests on all the browsers. You can look for failing tests and run them. What a weird, big world browser development must be.

Since it's so easy to identify so many bugs, I thought it might be fun to try contributing. But upon reading their code of conduct, I decided I didn't want to invest a lot of energy into the project. There are so many explicitly welcoming projects that don't leave me wondering out there that I'd rather focus on.

I was disappointed, but then my friend and coding buddy John told me about a modular browser engine project called Servo. It seems like it could be a lot nicer. As an added bonus, it's in Rust, so it would be more fun to mess around with, too! I'll try building it soon.

Discoveries

Some podcasts I enjoyed this week:

Rustacean Station: Dioxus with Jonathan Kelley I thought the discussion on plugging into the Rust compiler to do hot patching was really cool. I was also excited to hear a cross-platform rust framework putting energy into playing nice with accessibility tools.
Change, Technically: You deserve better brain research This was about a paper people were sharing online about your brain on AI. I try not to let the AI hype machine occupy too much space in my brain so I hadn't payed much attention to it, but I guess it wasn't a very well-designed study! It's fun to listen to people talk about research. The podcast's backlog has some interesting topics about engineering and people's brains. I'm looking forward to the one about math anxiety.
Software Engineering Radio: Luca Palmieri on Rust In Production I had fun listening to this because I've had to be thinking about similar issues when preparing to share Accordion Task with other people. I'm always really excited to hear about books for how to do some software skill, but presented through Rust. I might take a look at it later, though it seems more relevant for when you have a backend, and my first web prototype for Accordion Task won't.

Weekly Update: Friday, June 27, 2025

2025-06-27T21:00:00Z

Better code block CSS, building Leptos on NixOS, a no-WASM fallback message in Leptos, among other things I did this week.

Website

I fixed a couple of earlier log entries that had too-long code blocks on mobile. It had forced a horizontal scroll bar to appear. I added wrapping for now. I also tweaked the print CSS styles.

Excerpt from the CSS Breakdown, where I explain the changes:

Code blocks

To avoid horizontal scroll for the whole page, especially on mobile, I need to either wrap the code blocks or give them a horizontal overflow. As for what I prefer personally, I think it actually depends on the language. I feel disoriented reading languages with meaningful whitespace and line breaks that have been wrapped like Python or shell commands. Wrapping HTML, for example, feels much less bad.

I am worried about making people scroll, though. It can be difficult to track lines. On some devices, it's more of a pain than others. I think that until I learn more, it's less risky to just wrap.
pre {
  white-space: pre-wrap;
}
I chose to put this property on the pre tag instead of the enclosed code tag, because I may someday want to preformat something that isn't code (like a TUI output, or something). That may or not play nicely with wrapping. It might make sense to have a no-wrap class for exceptions later. But at least this way I won't accidentally have four-way scrolling on mobile in the mean time!

There is a danger that the word wrap from white-space may still fail to wrap. It doesn't address very long single words. As a failsafe, I added horizontal scrolling for overflow (for screens only, because my testing on Firefox showed that it can cut off text when printing.)
@media screen {
  pre {
    overflow-x: auto;
  }
}
There is still more I want to do with code blocks. I want a subtle way to more clearly delineate them from the surrounding text. I want to explore my options for full-bleed code blocks to avoid unneeded wrapping on wider screens. (If I wanted to do it without hacks, I think I might have to restructure my current CSS?) But this is a good start.

Navigation when printing

I have hidden navigation in the bottom footer when printing because it isn't useful information when reading on a page. Examples of this right now are "back" and "first previous inxed next latest".
@media print {
  footer nav {
    display: none;
  }
}
I've kept header navigation visible because "Quinten's Blog Home" is useful: it tells you which website you're on. Eventaully, the header navigation might become a breadcrumb navigation. This could also be useful to understand the context of the page.

Accordion Task

Accordion Task's project page

Removing panics

Over the week I cleaned up the worst of the panicable error handling. My most recent commit explains:

Reduce panic locations in code

Still some remaining. Tried to move them up to app.rs so that the modules behave well, at least. Some remaining ones are unclear how to handle and suggest to me that I need better models of those areas. It also still panics on DST issues, which I will not be prioritizing.

I think I'm okay with there being some remaining panics IF I can mitigate data loss in the case of a panic that I had thought would never happen. I'm not sure how to do that yet. It might be more of a priority to work on usability than robustness right now, considering the nature of the tool.

Building Leptos on NixOS

To build Leptos on my home server so that I can build it from my phone, I had to figure out how to add the wasm32-unknown-unknown build target to my rust tools. This isn't as straightforward as installing the normal Rust compiler on NixOS, and I had to figure out how to do it.

The blog post Nix shell with rustup was the resource that ended up helping me. I still can't wrap my head around Nix Flakes (very popular but not yet standard; I don't want to give up a simple config file approach; its code examples look more complicated), so I really appreciated that this post gave an example for using rust-overlay for a newbie like me who couldn't understand the README's example. It uses nix-shell, which is a way that Nix can control the packages available for a project so that you can reproduce things more easily across machines.

I had to add a single line to that post's "classic" example in order to run the server-side-rendering server Leptos recommends for development: Trunk.

let
  rust-overlay = builtins.fetchTarball "https://github.com/oxalica/rust-overlay/archive/master.tar.gz";
  pkgs = import <nixpkgs> {
    overlays = [(import rust-overlay)];
  };
  toolchain = pkgs.rust-bin.fromRustupToolchainFile ./toolchain.toml;
in
  pkgs.mkShell {
    packages = [
      toolchain
+     pkgs.trunk
    ];
  }
# shell.nix

This, along with a toolchain.toml file containing:

[toolchain]
channel = "nightly"
targets = ["wasm32-unknown-unknown"]

was all I needed to get building! (I think I'll try using stable, though. The nix-shell command checks for updates every time I start a new session, which means that I have to do a fresh rebuild of both my project and Trunk. It's possible that nix develop, the Nix Flakes replacement for nix-shell, might help with that, too.)

Since I am developing headless, I need to be able to access the development server from my phone's web browser. I can't just use localhost like I'll typically do when developing from my laptop. Luckily, I already know how to do this from setting up port forwarding with Caddy in my NixOS config. This way, I can access the page from the url dev.[server name].lan from any computer on my LAN! I need a short config file to set the port and adress in Trunk.toml:

[serve]
addresses = ["[my server's IP according to the LAN]"]
port = [an unused port, that I give to Caddy]

Leptos WASM fallback message

Leptos can be used either for server-side rendering (SSR) or client-side rendering (CSR). I have decided to start with CSR because it means that it would be very cheap and easy to share the web version of Accordion Task, especially for users who are not familiar with server technology (which is most of the people in the world).

A major down side of using Leptos for CSR is that Leptos uses WASM, so it will simply not work when WASM is unavailable. In the CSR section of the Leptos book, it says that when using CSR with Leptos:

...what’s served is an HTML page with

the URL of your Leptos app, which has been compiled to WebAssembly (WASM)

the URL of the JavaScript used to initialize this WASM blob

an empty <body> element

When the JS and WASM have loaded, Leptos will render your app into the <body>. This means that nothing appears on the screen until JS/WASM have loaded and run.

I can accept that, when writing a program that uses a specific technology at its core, the program will not be availabe without that technology. That is to be expected. What I can not accept is to not have a helpful little message explaining why the program is unavailable, and maybe some suggestions on where to look when troubleshooting. This bare-minimum of graceful degradation is important to me because I don't want to feel embarassed when a user encounters such clumsiness, or have someone assume the program is broken and give up if a simple toggle could fix it.

Fortunately, I was able to come up with a way to add a fallback message. This centers around the fact that Leptos doesn't actually render an empty <body> element, which it replaces with the Leptos app using WASM (and JS to bootload the WASM). It renders whatever HTML is in an index.html file in the project root, and then appends the contents of the webapp to the end of the body.

First, I put a message to display when JS is disabled. We can use the handy <noscript> tag for this:

<body>
  <noscript>
    You don't have JavaScript enabled! You need JavaScript and WebAssembly enabled to run this webapp.
  </noscript>
</body>

There's no tag like this for WASM, so we need to display the message and then use WASM to hide it once it's loaded:

<body>
  ...
  <p id=nowasm>
    This webapp needs WebAssembly to run. It hasn't loaded yet. Either the WebAssembly is still loading, it failed to load, or WebAssembly is not enabled in your browser.
  </p>
</body>

To hide it, we need to enable some DOM manipulation features using the WASM library web-sys and its features Document and Element, and call this function at the top of our main function:

fn remove_nowasm_message() {
  let window = web_sys::window()
    .expect("global window does not exist");
  let document = window.document()
    .expect("expecting a document on window");
  if let Some(message) = document.get_element_by_id("nowasm") {
    message.set_attribute("hidden", "true");
  }
}

This will make the message display until the WASM runs, and then disappear. However there is an unpleasant flash of the fallback message. This is why it would be nice to have a <nowasm> tag!

We can get around this by running a timer before displaying the fallback. Add hidden=true as a default for the fallback:

<body>
  ...
  <p id=nowasm hidden=true>
</body>

Then add a script to unhide it after one second:

<head><script>
  setTimeout(() => {
    let nowasm = document.getElementById("nowasm");
    nowasm.removeAttribube("hidden");
  }, "1000");
</head></script>

in the likely event that the WASM function to hide the fallback runs before the one-second timer runs out, the fallback will still appear (above your webapp). To prevent this, we can just change the ID of the element to yeswasm after hiding it!

fn remove_nowasm_message() {
  //...
  if let Some(message) = document.get_element_by_id("nowasm") {
    message.set_attribute("hidden", "true");
    message.set_attribute("id", "yeswasm");
  }
}

The JS will still run, but won't be able to find any element with an ID of nowasm.

This is almost complete! The only thing I see left is to ensure it doesn't break for screen readers. I don't have experience with the details of morphing pages because I haven't done much DOM manipulation yet. I suspect the answer will be related to ARIA live regions. Maybe it should have an alert role? I need to refresh my memory on how screen readers interact with the hidden attribute, too.

I'll share the source code in full as a litte git repo once I'm confident the accessibility is sound.

I'll be working on getting more comfortable with Leptos by remaking a little calculator I made for work in vanilla JavaScript. I'm curious how the experience will compare.

Icecube

Icecube is a spinoff project of Pyx Rusterizer so that we can have a low-res, low-color-depth UI to play with our 3D rendering parameters in. John and I managed to add text wrapping to our render pipeline. It works! The video How Clay's UI Layout Algorithm Works by Nic Barker has been extremely helpful. It's a delightful, well-animated explainer and I'd recommend it to anyone who's into that sort of thing. I'm really enjoying the design challenge of turning a C library into (hopefully) ideomatic Rust.

Self Hosting

I set up a separate WiFi for IOT devices this video on configuring it with OpenWrt's GUI was the gentle reassurance I needed, and a helpful exposure to more networking concepts I'm gradually absorbing. With every device now on my router's WiFi, I was able to put my ISP's gateway thingie into plain-old-modem mode. It didn't magically make Wireguard work, but it's one less variable for when I get around to more troubleshooting.

Discoveries

I finished watching the first episode of a PCB lecture series. It was really exciting to watch because I was in charge of ordering (already-designed) PCB assemblies at a prior job, and it's cool to fill in the gaps in my learning from that experience. I found out about this series from a podcast episode: Small Scale Electronics Manufacturing With Colin O'Flynn.
I enjoyed the most recent episode of the Rust in Production podcast: 1Password with Andrew Burkhart. I thought it was fun to hear them discuss managing many different build targets and platform-native apps with a core library shared between all of them.
As I was looking up the current state of the Ladybird browser project, I encountered an online book they recommend to contributors: Web Browser Engineering by Pavel Panchekha & Chris Harrelson. It walks you throuhg building a browser from scratch in Python with a usable (if incomplete) browser at each step of the way! I sure have enough on my plate right now, but it seems like a really fun little project.

Weekly Update: Friday, June 20, 2025

2025-06-20T21:00:00Z

I am going to try weekly checkins at the beginning of the weekend. With my work schedule these days, I think this is more realistic.

Accordion Task

Accordion Task's project page

Done:

Redesigned the progress bar. Now it progresses when you check off tasks, proportionally to how long the task was originally scheduled to take.

Went through and addressed most Clippy Pedantic lints. Learned some cool language features I didn't know about, like this lint about let else, and this lint about nesting OR patterns.

Added Clippy Restriction lints to identify prototyping code to clean up (like unwraps and dbgs).

Decided that I'll prioritize making a webapp version and keep the TUI experimental for now. I am more experienced making things accessible in the browser than in a terminal emulator, and my wife is interested in trying Accordion Task if there is a browser version. I'm at the point where having detailed feedback from a few people could help me stay on the right track.

For fun over the weekend I'm trying to set up Leptos for a trial and potential later use. I watched a video about Leptos a while ago and thought the syntax looked appealing, and liked how it looks like it gives high control over the final product. I am worried about using WASM because my phone browser doesn't support it?! It is a new phone with GrapheneOS. I wonder if there's a setting to turn it on. (Update: It's opt-in on a per-site basis to prevent Just-In-Time JavaScript compilation for security reasons.) Is there a way to compile WASM to JavaScript for backwards compatability as a fallback?

I need to figure out how to compile Leptos on NixOS: I might need to look into alternatives to my current simple solution, because I don't know to target wasm32-unknown-unknown with the declarative installation yet. Might try fenix? ...but I still haven't figured out Flakes (Is it even possible to incrementally adopt them?) yet and that's probably making things harder.

I need to work through those Clippy lints to make the code more robust. Probably a good thing to do during my work breaks, because I am worried it might be boring.

I need to read about RustDoc and different philosophies around code documentation in general. There is a RustDoc book, and Write the Docs has a big guide, which I might cherrypick from.

I'm getting so close! Cleaning things up is a huge part of the work, but it feels much better to do it when you're excited to get to share.

Self Hosting

Set up a guest wifi on its own firewall group. I still need to make one for IOT devices (some home appliances my wife uses apps with), and then I'll be able to turn my ISP's gateway into a normal modem. That's the next step in debugging WireGuard access from my phone to the home server.

Some WireGuard resources that have been helpful for me:

The original WireGuard research paper has useful examples. Don't be scared away by the wall-of-text introduction!
r.obin's WireGuard for OpenWRT guide has been helpful in understanding how to attempt setting things up. I can now connect through WireGuard on my home network... from my home network.
The tip to try using WireGuard locally was very helpful. I got it from this OpenWRT forum post about WireGuard troubleshooting.
Reading about WireGuard has been intimidating because I don't know the terminology well yet. This WireGuard terminology guide has been helpful.

Learned how to upgrade NixOS so I could compile Leptos. I hadn't realized you have to change channels.

My mom gifted me a small unmanaged network switch. I want to put the printer on it! I need a couple more short Ethernet cables before I can use it.

Other

My brother is on summer break and wants to play Screeps with me. I played Screeps when it first came out. I see that you can use any language that compiles to WASM now, so it sounds like a fun time to try again! Last time, I felt very overwhelmed. I bet I'd be so much better at it now because I am better at abstracting and organizing my code. You can self host it. I don't really want to play with strangers, so maybe I'll try setting it up on my server.

I was having fun earlier this month writing about knitting math. I'm drafting it in Typst but would be transcribing it to MathML (I guess? I heard it has better accessibility now, but haven't done the research yet.) before putting it online. The Typst IDE really is a joy to write in.

I have to put together some art for an old game. I'll talk about it more when it's done!

The Roguelike Celebration is currently accepting submissions. I have an idea for a talk, but I'm not sure if I'll submit in time for the deadline because of the surprirse art project (with a deadline) that I have to do now. Either way, it is a delightful online conference and I'm looking forward to attending.

Discoveries

I just finished the audio version of Resiliant Web Design. It was a lot of fun. I definitely recommend if you like history or thinking about design. I am thankful for the audio version because I could listen to it at work. I wish more people recorded Creative Commons material for audio.
There is a new podcast called What the Spec?! that I've been listening to. It's interviews with web specifications people by someone trying to get into the field. I am enjoying it as someone who cares about accessibility and uses the web. It's incredibly hard to discover new podcasts unless they're already really big, so here you go.
Inside the Famicom by What's Ken Making is a series on YouTube that examines the Famicom in delicious detail. I like the presentation that alternates between modalities including oscilloscope, circuit diagrams, close-ups, and animations. As an added bonus, the channel's opening sequence makes me really happy. It's just so exciting!

HEXAWORM

2025-05-18T10:06:38Z

View live at Shadertoy

A nice little HEXAWORM swimming in a circle. Look at it go! Looks like it's from an alien planet, or perhaps it's like those pictures of viruses very close up. My inaugural non-hello-world glsl project.

Source code

// thanks inigo
// https://iquilezles.org/articles/distfunctions2d/
float sdHexagon( in vec2 p, in float r )
{
    const vec3 k = vec3(-0.866025404,0.5,0.577350269);
    p = abs(p);
    p -= 2.0*min(dot(k.xy,p),0.0)*k.xy;
    p -= vec2(clamp(p.x, -k.z*r, k.z*r), r);
    return length(p)*sign(p.y);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    
    vec2 st = (2. * uv - 1.) * vec2(iResolution.x / iResolution.y, 1.);

    // To mess with the signed distance function to make it glow
    float shine = 0.4 + 0.1 * pow(sin(0.600*iTime),2.);
    
    // To spin in place
    float a = .19 * iTime;
    mat2 post_rotation = mat2(-cos(a), sin(a),
                        sin(a) ,    cos(a));

    // Dist needs to be initialized outisde of for loop for scope
    // because we are composing multiple signed distance functions.
    float dist = 1.;
    // Make a bunch of hexagons:
    for (float i = 0.; i < 2.; i+=.1) { // TODO: make the loop conditions parameterized

        // To orbit center
        float b = i + iTime * 0.5;
        mat2 pre_rotation = mat2(-cos(b), sin(b),
                            sin(b) ,    cos(b));
        
        // Find the center of the hexagon:
        // Rotate about origin, offset, and change that offset depending on
        // the time and where you are in the worm, for that sweet undulating motion.
        vec2 p = st + vec2(.5 + 0.05 * sin(6. * i + iTime * 5.)) * pre_rotation;
        
        // Calculate the distance function for this hexagon.
        // The distance function is then taken to the shine'th power
        // (with a few tweaks for where you are in the worm).
        // This ends up giving the outline, but only if we use the magnitude of the
        // distance function as a threshold instead of the actual sign. (See below.)
        float segment_dist =  pow(sdHexagon(p * post_rotation, .1), 0.8 * i * shine);
        
        // Take the minimum of the current distance function and the old one to
        // compose the shapes.
        // Helpful link: https://numfactory.upc.edu/web/Geometria/signedDistances.html
        dist = min(dist,segment_dist);
    }
    
    // Decide on the g component depending on a hard threshold on the distance function.
    // This gives the crisp cyan of the hexagons.
    
    // If the condition on dist was dist == 0, nothing would show up.
    // Not sure entirely why! Do you know? 
    float g;
    if (dist < 0.1) {
        g = 1.;
    } else {
        g = 0.2;
    }
    
    // The b component instead depends on 1/dist, which gives the snazzy dark blue glow.
    float b = pow(0.4 / dist, 2.);
    
    // Output to screen
    fragColor = vec4(
        .0, g * 0.4 , b,1.
    );

}

Accordion Task

2025-05-18T09:40:25Z

A personal routine scheduler with flexible timing. If something goes wrong, the scheduler should be able to adjust the rest of the task durations to accomodate. Written in Rust with Ratatui. A TUI was chosen to keep things distraction-free and hopefully low-latency, as these are essential features.

I am to the point where I am using this daily myself. It's really helpful to offload the getting-ready part of my brain when I'm groggy in the morning. By the time I'm done with the program guiding me through getting ready for the day, I feel much more awake. Right now I use the app terminus on my phone to SSH into my computer to run it. Eventually there will probably be a webapp version, especially once I'm ready to share with other users!

Routines are be stored as portable, human-editable CSV files. Log files are generated for every time a routine is run. The goal of that is to set things up in the future for additional UNIX-philosophy-style tools that can adjust the times budgeted for each task with whatever method the user desires.

Resume Template

2024-11-10T06:48:05Z

A Typst resume template for anyone who wants to use or modify it. I got started with Typst a couple of days before and threw this together based on my old LaTeX resume.

Since creating my resume in Typst, I've had to go back and update or customize it a few times. It has felt much less cumbersome to do so with this template (and in Typst in general) than it was when I was fighting LaTeX or MS Word.

Usage

Define individual items in items.typ, add these items to the section lists in sections.typ, and customize the order of the sections in main.typ. If you open this in the Typst web editor and double-click on any of the text in the preview output, it will jump you to the point in the code to edit it.

I recommend making variables at the top of items.typ for things like schools and cities, if any of those repeat often in your resume data.

Limitations

The positioning of the (optional) links in the projects section is a little weird. If your project titles are too long, you'll have to adjust the position manually. Suggestions welcome.

Other Information

SVG's are from the free pack at Font Awesome. I only included the ones I used.

Thank you to my wife for supplying Discworld trivia for the sample resume. I have no idea who Contemplate Mibbons is, but I like the idea that silly academia wizards do weather analysis in Rust.

Rat Maze 3D Screensaver

2024-11-09T07:42:56Z

Play and view source code

Notes from Lexaloffle

Okay, somebody has to do it. I'm going to try making a version of the 3D Maze.

Update: This is usable as a screensaver now! There are more features from the original to implement, but I think it's already pretty fun as-is.

Controls

Press a to toggle automatic mode (on by default).
Out of automatic mode: Up/down keys to go forward/backward, left/right keys to turn, z/x keys to strafe.
In either mode: Press m to toggle map view and raycast render. Press s to display CPU and RAM usage.

Warning

[Picotron simulated] CPU usage is about 100%. The raycasting is expensive and I haven't felt like optimizing it yet because this project is for fun and that isn't where the fun is right now. I think it runs plenty smooth (60fps is overrated), but if your fantasy computer tends to overheat or you have big computations running in the background that you don't want your screensaver slowing down, watch out! :)

Changelog

Version 1.3

Added a cute little rat that runs around the maze. See if you can spot it! (Are you a rat, too?)

Version 1.2

Performance improvements from like 120% to 100%. Mostly moving some things out of loops and caching repeated calculations. Also turned the player's position into a vector. This was a slightly anti-performance improvement, but non-raycasting CPU is at 5% so the code clarity is very worth it.

Version 1.1

Added random maze generation! Using a plain old backtracking algorithm. (Let me know if you have any idea what algorithm the original rat maze used.) Fixed a bug where you got stuck in an infinite spin if initially facing the wall in a left-to-right hallway. You now start in a random position in the maze. Press "s" to pull up CPU and RAM stats. Press "m" to switch to an overhead view (was previously "enter").

Version 1.0

Changed textures and floor/ceiling to match the real screensaver. Added an automatic mode, which is on by default. This is the screensaver mode, where the player automatically follows the right wall in the maze. Added a maze, but it's always the same. Randomly generated mazes will come in a future update.

Version 0.5

Textured walls now pick their texture based on the map data.

Version 0.4

Implemented textured walls. It is very slow, but I haven't done any optimization yet so there's still hope. Changed movement to feel more natural in first-person mode.

Currently drawing pixel by pixel because I need to learn how to draw only a vertical slice of a sprite (userdata). Does anyone know how? The userdata docs are a little over my head.

Version 0.3.1

Fixed an off-by-one bug that was causing some walls to be studded with spikes. What a relief.

Version 0.3

Calculate which wall is closer (vertical or horizontal). Add raycast view (press Enter to switch to it). I'm getting a weird spike artifact in the render. Colored vertical and horizontal walls differently, revealing that the incorrect wall is identified as "closer" during the spikes. I don't know what's causing that to happen. Finished Part 9 (drawing walls) of Permadi tutorial.

Version 0.2

First public version. Finished Part 7 (finding wall intersections) of Permadi tutorial.

I'm going to start by working through Permadi's 1996 Ray Casting Tutorial. It's really cool to be implementing such an old graphics tutorial. Anyone know of any other gems out there?

Question for those with more PICO8 experience than me: Is it worth using bit shift operations instead of multiplication/division by a power of two? I'm keeping it as-is for now for readability reasons, but after the raycasting logic is finished, it might be fun to see if it speeds it up.

Shell Script: Daily Log Opener

2024-11-09T06:36:39Z

On October 28th, I mentioned that I had written a little script that allowed me to quickly and easily create or open my daily log entry for the day. I was inspired to do this because of a similar feature in Obsidian.

Algorithm

Get the date and time
If it's very early in the morning, use yesterday's date
Generate a filename based on the date (YYYY-mm-dd).md
Announce the name and location (in the configured folder) of the file
Check if a file of that name already exists
- If it does exist, open it
- If it doesn't exist,
  1. Take the template
  2. Replace all instances of {{date}} with the date
  3. Put the output in a new file
  4. Open the file

Configuration

I would love to make this script pleasant and useful enough for someone else to get to use! In the hopes of that, I've added in some configurations at the top of the script. I wonder how configuration files work, and if that might be better in the long run.

Here's what can be configured right now:

editor (can be any terminal command; mine is vim)
hour past midnight to change the day (6 for 6am for me, because I'll never wake up before then)
folder save location for the log entries
template location

Code

Here, I'll break down the script code.

Scripting language

#!/bin/zsh

I'm not sure if this should be bash or zsh. I use zsh, and when I tried to run the script explicitly with bash, it still told me it was using zsh. All of the resources I used for syntax were about bash. Not sure what to do!

Configuration

# What editor command would you like to use?
EDITOR=vim

# When do you want to acknowledge it's tomorrow? (24h fmt)
DAYCHANGE=6

# What directory will log entries go in?
FOLDER=".../log/entries"

# If you have a template, where is it?
TEMPLATE=".../log/entries/template.md"

I need to add a check to behave properly when no template variable is set. I'm not sure how it would fail right now.

Date and Time

DATE=$(date +"%Y-%m-%d")
HOUR=$(date +"%H")

if [[ $HOUR -lt $DAYCHANGE ]]
then
  # It's still late, so pretend it's still yesterday.
  DATE=$(date -d yesterday +"%Y-%m-%d")
fi

I was very impressed about the date command. It's so easy and simple to use!

If statements and comparison operators have a strange syntax. I'm not sure if I've ever seen it before. I don't understand what double brackets versus single brackets means. Below, I use single because it's from a different tutorial. Apparently it can be good for backwards compatability to do the single brackets, but I get an error when doing that up here.

Instead of doing the math of what yesterday was, I just call date again. It's cheap, and handles all of the special exceptions itself.

File Creation

FILE="$FOLDER/$DATE.md"

if [ ! -f "$FILE" ]; then
  # Log entry file doesn't exist,
  # so generate one from the template.
  echo "Creating $DATE at $FOLDER"
  sed "s/{{date}}/$DATE/g" "$TEMPLATE" >> "$FILE"
fi

I'm glad to know how to check if a file exists now, because I wouldn't want to overwrite anything important.

I used sed to find and replace all occurrences of {{date}} in the template. (The double quotes are important for using varialbes.) It appends the output to the (nonexistent) file to create and populate it. I chose to append instead of replace the contents, just in case I encounter a bug someday and run into data loss. This way, it's safer.

I wonder how much work it would be to add a verbosity option. I don't think it should announce every time it creates a file, but I'm keeping it now for my trialing period.

Opening

$EDITOR "$FILE"

Finally, the file is opened. I love that you can have a whole command as a variable like this, because it's just text replacement!

Next Steps

I have some cleaning up to do, and then I'll post it on GitHub.

On my system, I have to remind myself how to add a script to the list of scripts that will run without specifying their location. An 'alias', is it called?

I find myself wanting a similar tool that commits daily logs to git. My commit messages are very formulaic, so it should work well. Maybe it can be an optional feature of this tool, so that I never forget.

Glitter Jar

2024-02-17T00:12:33Z

video (framerate looks off, but you can get an idea)

This was my final project for Intro to Graphics. I was told I wasn't allowed to just turn the project into a physics simulation: most of the computation had to be graphics-related. We got to present our projects to a panel of local judges from industry, and I was given the award for "Best Smoke and Mirrors" due to all the tricks I used to make things convincing enough on a low computational budget.

Instead, I went through my physics textbooks to find inspiration to make something look convincing without actually having to simulate it. I found a description of the steady-state distribution of particles in a liquid due to gravity and statistical mechanics, and used that as a bias for my random glitter positioning.

I found that it didn't feel as busy as a real glitter jar with just the larger glitter particles (rendered with triangles) unless I had so many glitter particles on the screen that everything lagged. To solve this problem, I decided to render tiny glitter as little dots on a cylindrical texture.

To evoke the feeling of very lightweight glitter particles, I had these glitter dots do a meandering random walk (a gaussian distribution in velocity) that was calculated live. However I discovered that I could easily get away with having a smaller number of particles and tile them. The world of the glitter particle is a flat torus, which allows for convincing repeats in the texture. The repeats are visible when the texture is viewed by itself, but with the rest of the glitter it becomes much less obvious.

Replica TI-2550

2024-02-16T23:09:49Z

view live

A JavaScript calculator.

Font for the digital display is DIGITAL-7 by Sizenko Alexander. The DIGITAL-7 README with license information has been made available in this repo in the digital_7 folder.

This calculator is modeled off of the TI-2550, an early handheld calculator from the mid 70s with beautiful sky blue and orange accent buttons.

Taming Project Footage: Saturday, February 10, 2024

2024-02-10T21:00:00Z

Documented the ways I currently record video footage of my projects.

Sometimes I would like to record one of my projects in action in order to share and preserve its behavior. I want this to be as low-friction as possible. It may be rewarding, but it's also a documentation task. Documentation tasks can be hard to prioritize unless you make the activation energy low. Writing down my process here is a way for me to make it easier in the future.

Linux Mint Video Screencapture with FFmpeg for Processing

Screencapture

I'm currently using Linux Mint: Cinnamon Edition. When I press Ctrl + Alt + Shift + R, a little recording indicator shows up in the status panel, indicating that recording has started. Pressing this combination again ends the recording session.

The resultant videos show up in my ~/Videos directory as .webm files. The videos include the mouse cursor and capture the whole screen. I don't know how to configure output.

Cropping

I usually need to crop these raw output videos. I found this article on cropping videos with FFmpeg helpful for this task.

FFmpeg is powerful. It's popular enough that it's probably already installed on your computer for some dependency. Because of this, I would like to get more familiar with its CLI.

As explained in that article, we can preview a video crop without having to process the whole video.

ffplay -vf "crop=w:h:x:y" input.webm

Replace w:h:x:y with your values. To find these values, I just do a manual binary search, trying different values until I get the correct crop. This is a point where a simple GUI selector tool could be useful.

Once you've found your values, do the real crop.

ffmpeg -i input.webm -vf "crop=500:800:0:120" output.webm

The order of the arguments matters: the input flag and value must come before the video filter flag and value.

Conversion

FFmpeg makes format conversion very simple. (See the FFmpeg file format conversion documentation.)

ffmpeg -i input.webm output.gif

However simplicity comes with a price. I tested this with my 3D Glitter Jar project and the output gif was intensely dithered and much larger in file size than the original webm. It could be that the gif format just isn't suitable for this video due to the gradients and high detail, or it could be that customized compression settings might have helped.

For now, you'll have to settle for stills and a link to a video. A less dramatic conversion leap (from a modern video format to another modern video format) would probably fare much better. Gifs are weird and old.

Godot Screencapture

I have been playing with Godot 4 recently to learn how professionals organize larger projects. I'm still feeling a little of the friction that comes with using a new system, but I can tell that it will allow me to prototype ideas much quicker once I get comfortable.

One thing I really like about Godot is the built in screen capture functionality: movie maker mode. Movie maker mode is described as something fancy for making trailers and pre-recorded cutscenes, but I like that it's simple and built in. I use it for making a quick video when I've gotten something cool working and want to share with friends.

Custom Gif Program Output

Bitsy

Bitsy is a tiny game engine that restricts you to three colors per room, low resolution, and two-frame animations. The Bitsy editor has a built-in tool to record gifs.

Gifs respond well to a limited color palette and short, subtle animation. They are lossless and allow basic compression. These traits make it perfect for Bitsy and other low-res, low-color situations.

Bitsy can output both a gif recording and a gif "snapshot". A snapshot records a two-frame gif, which captures the idle behavior of a Bitsy room in a tiny, perfectly looping gif.

Pyx Rasterizer

John and I are currently working on making a perfectly looping custom gif exporter from scratch for our Pyx Rasterizer 16-color, low-res 3D rendering project in Pyxel, following the wonderfully readable description of the gif file format What's In a Gif. Our Pyx Rasterizer project is all about understanding things by building them from scratch, and this is a great continuation of that goal.

Tuesday, October 31, 2023

2023-10-31T21:00:00Z

Tried a plugin for Markdown task lists. Wasn't satisfied with output accessibility. Discussed alternative outputs.

Today's Plan

Done Enable markdown checkbox lists in eleventy (haha, that went long)
Write up daily log script
Go over what else I want to do

Markdown Checkboxes

I would like to be able to keep track of which tasks in my past Task Ideas have been completed. I think a good way to do this would be to use a markdown task list and add a link to the daily log entry of the day when I completed the task.

Eleventy's default markdown is strict to the original markdown standard, so I need to modify it in order to use the task list feature. I'm going to try this tutorial on extending eleventy markdown.

I'm getting an error that markdownIt is not defined. It looks like the author of that blog didn't include the definition of that varibale. From the official eleventy markdown doc page, it looks like I have to require the markdown-it library and set it to that variable.

Plugin Output

With that out of the way, it is now working properly. Here is the output:

<ul class="contains-task-list">
  <li class="task-list-item">
    <input class="task-list-item-checkbox" disabled="" type="checkbox">
    This is a task.
  </li>
</ul>

This is a task.

I do not like this. It seems semantically mismatched to use an input field for a checked-off task. Even if it were properly accessible today (which I'm skeptical of), it wouldn't be very future-proof. Designers of tomorrow will not be thinking about clever edge cases when maintaining backwards compatability.

Unicode Instead

I want something like this:

✓ This is a task.

I'm not sure about how robust the checkmark unicode symbol would be with a screen reader. Emojis and unicode can have inintended problems on screen readers. For an example, see the "Screen Readers Do Not See What You See" section of Blaming Screen Readers 🚩 x5 by Adrian Roselli, which shows some examples of cryptic, annoying social media memes that use unicode symbols for decoration.

Most relevant to my decision making today is that the emoji 🚩 is not read as "red flag emoji", but as "triangular flag on post". When unicode symbols are used in a way that doesn't match their semantic meaning, screen readers may say something completely irrelevant.

This has motivated me to use the "check mark" unicode symbol ✓ instead of the "ballot box check" ☑. After trying it, I do think that it's nicer looking to use unboxed checkmarks on completed tasks, and nothing on uncompleted tasks. There's less visual clutter.

Unicode with Aria

If I really wanted the ballot box check, there are options to try. I've seen some workarounds including the example from this article on accessible emoji in email:

We <span role="img" aria-label="love">❤️</span> email!

which makes the heart say "love" as intended, instead of "red heart".

Another approach would be to completely hide the ballot box check from the screen reader using aria-hidden. The article mentioned above about emails has a great example of this:

We <span aria-hidden="true">👏</span>
love <span aria-hidden="true">👏</span>
email! <span aria-hidden="true">👏</span>

Adding Redundancy with Plain Text

If applying this to my task list application, I would try something like the following:

<ul class="task-list">
  <li class="checked">
    <span aria-hidden="true">&check;</span>
    This is a task.
    <a href=2023-10-31>Completed 2023-10-31</a>
  </li>
  <li>
    This is a task I didn't finish.
  </li>
</ul>

This is a task. Completed 2023-10-31
This is a task I didn't finish.

The checkmark will not be read aloud. However I have added a link "Completed 2023-10-31". This achieves three things:

Reads clearly on a screen reader, so the unicode checkmark does not need to communicate the information.
Could remove ambiguity for sighted readers. This is especially important for readers with cognitive or learning disabilities.
Is an opportunity to add additional helpful information for everyone. Having a date and a link to the post where I discuss completing the task could be very helpful for someone who wants to know how I solved a problem.

I want to keep the checkmark because it helps with skimming.

Keeping HTML Clean with CSS `::before`

Using the CSS pseudo-object ::before, it's possible to keep the checkmark entirely out of the HTML. It can be drawn before every object that has the "checked" class.

<ul class="task-list">
  <li class="checked">
    This is a task.
    <a href=2023-10-31>Completed 2023-10-31</a>
  </li>
  <li>
    This is a task I didn't finish.
  </li>
</ul>

CSS:

.checked::before {
  content: "✓";
}

This is a task. Completed 2023-10-31
This is a task I didn't finish.

I like this solution. It is much easier to modify how I signify a completed task down the line than if I had the checkmark in the HTML.

Now I just have to figure out how to turn Markdown into this specific HTML... maybe I could modify the existing plugin? I wish I didn't have to learn how to do that, I'm busy!

Task Ideas

Have some sort of auto-check so that my daily log entries don't get published without an excerpt.
Explore other markdown-it plugins (slowly; I need to makes sure they don't break accessibility)
Add word wrap to code blocks?

Saturday, October 28, 2023

2023-10-28T21:00:00Z

Added summary to Atom feed. Discussed CSS list spacing. Wrote script for opening current daily log entry.

Today's Plan

Whatever I feel like doing. It's the weekend.

Adding summary to Atom feed

I had some trouble finding documentation for the Atom format, and the Atom feed validator seems to be down at the moment. I eventually found an example of an Atom feed that used the summary feature by going to the Atom wikipedia page. It looks like it is just <summary>. I added this tag to my Atom feed. It auto-generates from the page metadata for each log entry.

Discussing yesterday's list spacing CSS

I've added the following to the CSS Breakdown:

I've created a class .summary-directory for use in my Log index so that I can give an easy-to-understand amount of spacing for my long list of entries. Previously, this list was just a list of links with default spacing, which creates tap targets which are way too close together. In order to increase the spacing of the tap targets and the legibility, I have two strategies:

First, I've added summaries to each entry, and have put these on a new line below each link on the index. This (non-link) text helps create a buffer between links even with no styling. It also really helps readability to see a preview of each entry, because my date-titles are cryptic.

Second, I've increased the spacing with the following CSS rule. Each entry summary, the thing being selected with .summary-directory p (.summary-directory is on the <ul>), gets a little space between it and its entry link, and a lot of space between it and the next entry link. This keeps it clear which link it is describing.
.summary-directory p {
  margin-block: 0.5rem 1.5rem;
}

Script for opening today's log entry

I would like a script that checks the date, opens today's log entry if it exists, or generates a new one from a template if it doesn't yet. I want it to open yesterday's log entry if it's before 6am, because midnight is a very awkward time for the date to roll over.

Resources

I have the tiniest prior experience with shell scripting, but not enough to rely on. Here, I'll collect some tutorial and reference resources I believe I might need to put this script together.

if..else Statement
Get the current time and date
Get yesterday's date because I was a little confused from date's man page
Check if a file exists
Appending to a file
Find and replace with sed
Using variables with sed (I learned I needed to use double quotes)

(Most of these are from Linuxize, which is a pleasant, non-bloated site. A relief from most resources you sift through on Google these days. I'll be bookmarking it.) Edit: Never mind! It has horribly intrusive popup video ads on mobile. Only usable with an ad-blocker, unfortunately. That's a shame, because the content was helpful!

Someday: learn more about the shell ecosystem

I am enamored by all of these tiny, composable programs. The date command is delightfully flexible, yet simple to use. A few months ago I stumbled upon The Art of Unix Programming (2003) by Eric S. Raymond. It's a kind of socially-informed history of the UNIX design philosophy, and discusses how those little programs are interfaced. I read the introduction and I'd like to find the time to learn more someday. I think it would be very cool to learn more about why my operating system is the way it is.

Success!

I've successfully created a wonderful script to achieve all I desire. I will need to write it up tomorrow, because it is very late now.

Task Ideas

Look into where else a summary should go. Do SEO-type features need me to put it somewhere in the HTML head?
Add a subtle vertical line to block quotes, so that it's easier to tell that it's a block quote.
Test Atom feed.
Write about log entry script

Friday, October 27, 2023

2023-10-27T21:00:00Z

Discussed guiding questions for Knitting as Program Execution project. Added summary excerpts.

Today's Plan

Try adding excerpts to log entries: a short summary paragraph at the beginning of the page

Knitting as Program Execution

One of the projects I was hoping would strike inspiration during my Recurse Center batch is an exploration of knitting. The link between writing a knitting pattern and programming is something I've been daydreaming about for a long time. It's part of what inspired me to make my website about the intersection of math and craft. Here are some guiding questions.

Instructions

Can we think of knitting patterns as programs and knitters as interpreters? How simple would a programmatic knitting interpreter be able to be to work? Can standard modern patterns be read by a computer unambiguously?

Structure

How do you represent a knit object's structure in code? (A graph? What's a node, and what's an edge?) If it's represented as a graph, are there existing rendering algorithms that could do edge-springiness to vaguely represent the shape of the finished knit product? I have a copy of the amicable Introduction to Graph Theory by Richard J. Trudeau, so I might get to get into that a bit more.

Audience

How do you describe the anatomy of a knitting pattern to non-knitters to show how similar it is to a program? (Functions, loops, arrays, etc.) How do you describe to knitters how they already know how a program works if they can follow a knitting pattern? (I'm sure the overlap of these two groups knows exactly what I'm talking about by all this, right?!)

Excerpts

I have added short summaries of the topics discussed in each log entry using Eleventy excerpts and the help of How to use Excerpts in Eleventy to make sense of how to actually use them. It looks like this in my log files:

---
frontmatter here
---

This is my little summary.

<!-- excerpt -->

## Today's Plan
- blah blah blah

Uses

I've populated the log index with these summaries under each link. This spreads out the list of links nicely, keeping it easy to read and click/tap on. It is really cool to see an overview of what I've worked on each day from the index, too.

I'd like to supply these summaries to my Atom feed, so that I can control the preview people see. My log entry titles are a little cryptic, because they are just the date. I'd like the tagline to be more informative, at least.

Wishes

I wish this summary could be italicized in the log entries, to keep it distinct-looking. You can't really add a special tag to it for formatting automatically, I don't think? My options are:

Don't use the spcial custom frontmatter option, and instead put the summary in the YAML, then inject it into the page using the layout file.
Select the first paragraph of every entry page and style that with italics, hoping it's always the summary.

I also think it would be really cool to auto-generate these from the <h2>'s I've used. But I might prefer hand-written, anyways to control the message a bit more.

Task Ideas

Make a project page for my knitting ideas (paste today's writing into it)
Consider wrapping the about page in an <article> tag?
Add the new line of CSS to the CSS breakdown
Add excerpts to Atom feed

Thursday, October 26, 2023

2023-10-26T21:00:00Z

Learned about about Rust slices. Increased padding for mobile.

Today's Plan

Done Finish Rust book ch4.4
Done Add link to Atom feed to the log
Done Lengthen whitespace in the footer

Rust Slices

This section was much less intimidating than the previous one (on fixing ownership errors). I'm familiar with slices in Python and MATLAB, which are much more flexible. You can go backwards, and can also skip elements (with a stride size).

Slices in Rust can not do these fancy features. Instead, they can only refer to a contiguous subsection of a data collection. I suspect this is because conceptually, Rust is working closer to the physically-adjacent memory of the stack?

I bet that Rust uses iterators for skipping and going backwards, but I've yet to learn about those in detail.

Fat Pointers

Slices are really simple objects in Rust: just a 'fat pointer'. A fat pointer is a pointer that also has a little bit of data attached (a length, in this case). All string literals in Rust are fat pointers.

I remember learning in an intro CS class that strings in C are just char bytes that are adjacent in memory, and the program doesn't know when they'll end, it just keeps reading until it encounters a special character that signifies the end. That's something that can easily make you run into memory problems or unpredictable results if you aren't careful. I wonder if this is why Rust chose to bundle some pointers with metadata.

Page Padding

I've given my navigation header and footer some breathing room by increasing the padding of the HTML element. Here's my explanation, quoted from my CSS breakdown:

Instead of having zero padding for the top and bottom, I have added a little at the top, and a lot at the bottom. This is because I was encountering some problems with my header and footer navigation being too close to the edge of the screen on mobile. Either a browser footer covers my footer, or it's too close for comfortable tapping. I don't want buttons to be too close together, because it's an unnecessary barrier for people visiting the site.

Task Ideas

Tuesday, October 24, 2023

2023-10-24T21:00:00Z

Added a 404 page. Started reading Rust Book again.

Today's Plan

Add 404 page
Read about the Rust slice type

404 Page

I've added a very simple 404 page for when someone tries to visit a page that doesn't exist. Currently, it just links to the home page. It might be nice to revisit that someday once there's more content to navigate on here. Maybe more links. But for now, the home page is exclusively navigation, so there isn't anything else I would need to put.

Rust Book

I've been going through this Rust book, which I think is the same as the official Rust book, but with added quizzes and highlighting? They're researching the usage and comprehension of the book at this site to make it more effective.

I got halfway through section 4.4 today.

I've also encountered Yet Another Rust Resource, which I might go through quickly once my Recurse Center batch starts. It's intended to quickly get someone up to speed enough to do pair programming, but it has activities that are best done with a partner.

Task Ideas

Add a message to the log saying that there is an RSS feed

Monday, October 23, 2023

2023-10-23T21:00:00Z

Added a favicon, drawn in Pyxel Edit.

Today's Plan

Add a favicon

Linking a site icon

I've seen a lot of automatic favicon generator tools online, which generate a variety of sizes for different browsers and mobile devices. I wanted something really simple: just one 16 x 16 pixel image.

I had to ignore the generators and find the linking documentation on my own. I've put the following snippet into my HTML header:

<link rel="icon" href="styles/favicon.png" />

Drawing a site icon

I used Pyxel Edit to draw my icon. I've used this paint program before when working on designing Bitsy games, because it has a good tile painting mode. I wanted a paint program that was simple and optimized for small color palettes.

I had no idea what to do, so I just did a hand-drawn green Q (Q for my name, green for my favorite color). A added a fun fade/trail effect to make it more visible from a distance. I think overall it looks okay.

My icon ended up being 137 bytes.

Task Ideas

Implement a draft flag in Eleventy
Refactor moving writing of different kinds into a unified writing folder, so that it doesn't get lost

Thursday, October 19, 2023

2023-10-19T21:00:00Z

Set up an Atom feed.

Today's Plan

Gather resources for setting up RSS

Setting up an Atom feed

I set up an Atom feed and validated it. The Eleventy docs has a good plugin and instructions. I chose Atom instead of RSS or JSON based on an uneducated guess (and it being the default in the instructions).

I ran into a slight problem using the Eleventy plugin, because the supplied template doesn't specify a layout. Because of the Eleventy data cascade, the feed template then used the default layout I've assigned to the directory it's in. I suspect this might be an easy problem to run into, and the fix was really easy, so I suggested a change to the documentation to help others avoid my mistake.

I haven't really used an RSS reader since Google Reader (its death is a formative memory of mine), so I'll have to see what the modern software offerings are in order to test this feature.

Task Ideas

Add project page for Craftinatorics
Add automatic anchors for headings
Set up excerpts
Try some RSS readers for my growing blog bookmarks collection

Wednesday, October 18, 2023

2023-10-18T21:00:00Z

Added an About page.

Today's Plan

Done Add an About page

About page

Just a little writing today. It's hard to write about yourself.

I had to modify my collections. Now, the main page displays a list of pages in the "home" collection. Previously, it was displaying pages in the "navigation" collection. The about page should be linked on the home page, but it isn't a navigation page of any sort.

Task Ideas

Decide on a specific order for home page links, and how to specify that in code. I think now it's in order of least-recently modified.
Add a little more whitespace underneath the footer, so that links are easy to tap without hitting a back button on mobile.

Tuesday, October 17, 2023

2023-10-17T21:00:00Z

Tried Obsidian. Formatted dates. Discussed CSS minimalism. Formatted navigation footer.

Today's Plan

Done Make log entry titles have the day of the week
Make a less-than-bare-minimum CSS stylesheet for urgent concerns
- Done Format daily log navigation
- Done Maximum character width for body text
- Done More line height
- Not doing Even more line height for lists of links
  - I have decided I would rather add more space between links by interspersing them with page summaries. I'll work on this soon.
- Done Make a page linked to in the project page breaking down the CSS with itemized justifications for my decisions

Obsidian

I am trying out Obsidian today. It is a markdown editor that seems to specialize in easily linking notes together. It has that trendy modern IDE/Editor feel like Atom and VSCode. I hope there isn't too much latency.

I found a nice distraction-free theme that hides away all of the UI elements. I haven't tried the VI keys option yet, but it's good that it's there.

Obsidian has a built-in daily notes plugin, which I really like the looks of. You can just press a button and immediately it'll either open your existing daily note or create a new one from a template you've previously specified. It seems very in-line with what I'm doing on this site with my Daily Log. If I don't continue to use Obsidian, I'll definitely want to write a little script to do this kind of functionality myself.

Adding weekdays to dates

Wow, that was really straightforward! I found the formatting documentation for Luxon, which is what 11ty.rocks's tutorial led me to use. I found Luxon's formatting presets table and identified DATE_HUGE (output like Friday, October 14, 1983) or DATE_MED_WITH_WEEKDAY (output like Fri, Oct 14, 1983) as the two options I'd consider. I'm going with the huge option for now, because I really don't like how the medium abbreviates (for example) Tuesday as Tue when it really should be Tues!

I'm very pleased with having access to the day of the week at all. I might tinker more later, but this was a nice victory for today.

Minimal CSS and Accessibility

I've started working on my CSS and my CSS Breakdown project page. I'm prioritizing readability and inclusivity fixes. I am leaning heavily on Seirdy's wonderful article Best practices for inclusive textual websites. It is generally stricter than WCAG AAA, and focuses on concrete technical implementation. It goes over topics like backwards compatibility, layout and typography for readability, performance for slow internet connections, screen-reader compatibility, privacy, and unusual screen dimensions. It's 23 thousand words, but it has a very good table of contents.

I've done a lot of my own research on web accessibility, as it was one of my obsessions when I was first building my first website. I still have a lot to learn of course, especially as a beginner hobbyist who hasn't had the funding or connections to do user studies, but I've started to feel confident enough to form cited, well-read opinions and justify them to others.

The reason why I love Seirdy's article is that it's willing to make shininess sacrifices for inclusivity. I love that it explains their reasoning for each guideline, so that I can make an informed decision about which ones are right for my site. I like that it's maintained as a living document.

I don't want a shiny website. I want a welcoming, respectful website. By default. I want people to want to stay here a while.

Anyways. Passionate rant over. I think that my minimal CSS changes today are making this place feel a bit more like home. It is so, so helpful to have Seirdy's opinionated and implementation-specific advice.

I'm generally very happy with what I threw together to format the daily log navigation at the bottom of each log entry.

Styling

I have added these styles:

footer {    
  margin-top: 2rem;    
}    
    
nav.sequenceNav ol {    
  padding: 0;    
  list-style: none;    
  display: flex;    
  justify-content: space-between;    
  flex-wrap: wrap;    
  gap: 2ch;    
}

I removed the list styling, turned the ol tag into a flex container, and adjusted the flex settings.

The footer margin is to add some extra breathing room. Because I have no other visual cues to distinguish regions of my pages (like horizontal lines or background color changes), I want a little more whitespace to clarify.

I'm pretty happy with it! If I were making a shiny website, I would probably switch to symbols instead of writing out next, previous, etc. But I'm not, this time. I don't think it's necessary, and I think it has the potential to introduce confusion. This way is less likely to break.

HTML

I had to adjust the HTML a little. I found that listing the full page titles made things difficult to parse, so I moved to simply stating first, previous, index, next, and latest.

When there is no previous or next entry to link to, it now says "no previous" or "no next". I'm not completely satisfied with this, but I think it's less ambiguous than just saying nothing.

I gave this nav a class of sequenceNav so that I can reuse the styles in other parts of the site. I still need to refactor it into a partial template in Eleventy.

Task Ideas

Make a library (link directory) off of the home page
Increase font size of monospace code
Make a favicon
Make a basic 404 page
Can I make a little book-swirly? A tiny embellishment that doesn't take up too much bandwidth? Maybe generate an SVG from an old public-domain book?
Add a "summary" metadata to each log entry, so that I can make the daily log more discoverable once it gets longer.
- This can be auto-generated into the top of the article if I want,
- and can be entered in as the excerpt for SEO and sharing previews.
- Just a sentence or two!

Monday, October 16, 2023

2023-10-16T21:00:00Z

Added navigation footer to log entries. Sorted log index. Wondering about Liquid and Nunjucks. Published website on Netlify.

Today's Plan

Done Generate Daily Log page links
Done Reverse the order of the collection. I'd like most recent entries at the top.
Done Write bio draft for the Recurse Center directory

Generating Daily Log page links

I had assumed that I would be tapping into the "pagination" functionality of Eleventy because I want to be able to link up these log entries as if they were pages in a book, but it turns out that isn't what I want.

Pagination Navigation is a page in the Eleventy documentation that describes how to generate navigation for within a group of pages that are generated from one data file. For example, if you had one big file filled with cool poems, but wanted to make each poem its own web page. I have one page per data file for my daily log, so I don't need pagination.

Because I have my log entries all tagged as "log" in the Eleventy page data, they are organized automatically into a "collection", which you can interact with programatically as a list. I can use the previous and next collection filters and ask for the links to the page data objects I recieve.

It was very easy to set up! I just grabbed the code snippets in that previously linked documentation page, and links for next and previous were working perfectly in an instant.

The first and latest links were a little more difficult. I couldn't find any instructions for selecting the first or last item of a collection in Eleventy's documentation, so I looked it up on the Nunjucks templating documentation. After I had found that, it was very simple. There are Nunjucks filters for first and last, and filtering the collection with these seems to work just fine.

I am still a little unsure of what I want the design specifics to be for this navigation section. Right now, they say the relation (first, previous, next, or latest) and then the link itself is the title of the page. I'm not sure what to say when there isn't a next or previous page. Currently, when that happens, the code I copied checks to make sure that the next/previous page exists. When it doesn't, it just doesn't say anything, and I get a blank list entry in my navigation menu. That seems confusing, but I haven't thought about what specific fix to do yet.

It might be helpful to add the tiniest amount of CSS to this navigation menu to format it in a more traditional way. I want to keep the <ol> semantic structure to the menu, but I can remove the numbers and make the list entries go all on the same line.

Sort Descending

Sorting my auto-generated log index to display in descending chronological order was very straightforward, except for one hiccup. Eleventy has a code snippet to show how to sort a collection in descending chronological order, and all you have to do is add another built-in filter into the templating language.

I thought I had been working with Nunjucks in this file, because that's what I've been writing my template files with. However it's a MarkDown file, so the templating language is specified somewhere other than the file extention. Eleventy gives most code examples in Liquid, Nunjucks, 11ty.js, and Handlebars. I kept trying the Nunjucks filter, but it kept silently failing. No error message, it just wouldn't sort! After a little tinkering, I decided I wasn't making some simple typo and decided to try Liquid, just in case. That worked.

Liquid vs Nunjucks

From what I've seen so far, Liquid syntax looks to me like a slightly sugarier version of Nunjucks. I don't have much knowledge about how they're different under the hood. The reference pages I linked earlier in this paragraph might be good future reading, to compare the two.

As far as which one Eleventy decides to use, here's what they have to say on their languages documentation:

Special case: pairing a templating engine with md Markdown

Remember that—by default—Markdown files are processed with an additional preprocessor template engine set globally with the markdownTemplateEngine configuration option. So, when using templateEngineOverride on markdown files be sure to list each templating engine you’d like to use.

For example, you may want to process njk Nunjucks first and then md markdown afterwards. Markdown is supported either by itself or with another engine. No other templating engines can be combined in this way—Markdown is the exception here. Any other combination attempt will throw an error.

So I have to look at what my markdownTemplateEngine option is set to. Because my .eleventy.js config file doesn't mention this setting anywhere, it's probably whatever's the default. I guess that means Liquid, considering that was what worked for my MarkDown file. I'll have to think about if I'm okay with that, or if I want to change it.

Building and Hosting

I wanted to look into what options there were for automatically building a website project from a git hosting service. I know GitHub Pages does that (I've used it for tiny projects), but for Eleventy I saw a few blog posts complaining that route and no tutorials. I've been seeing a few Eleventy blogs talk about using Netlify and I appreciate that they have documentation specfic to Eleventy.

I thought I'd try it to see how hard it would be, and set it up in like five minutes from my phone. What?? That's absolutely absurd. I wouldn't say that I like Netlify, though. I don't trust them because you can't set a limit on metered feature usage, and I don't fully understand what counts as metered. I don't need forms or user accounts or anything. Are simple page visits 'metered'? Is there an auto-timeout if the auto-build gets stuck?

I'm still going to go ahead and try it out a bit more because it's extremely convenient and gets my page out there. I don't think there's that much risk because I intend to stay on the free tier which doesn't require a credit card, and because I can always leave. This is a website that can afford to be down for a few days as I locate a new service if needed.

A text-based static site is also the tiniest kind of website, and Eleventy is supposedly pretty fast, so I had better stay well under their limits for the free tier anyways. I would just rather understand a bit more what's going on, and I think their FAQ could be clearer about this stuff.

Task Ideas

Download some nice syntax highlighting extensions for vim? It is really struggling with these mixed-language files. I need my syntax highlighting!
Refactor log page-navigation into a partial
Set up RSS feed (will probably generate multiple eventually?)
Write description for the log index

Friday, October 13, 2023

2023-10-13T21:00:00Z

Commented on Eleventy performance improvements. Set intention for an ugly website.

Today's Plan

Done Improve daily log template
- Add hard-coded breadcrumb (I tried the eleventy navigation plugin and it did not look very automation-friendly, at least not to a beginner.)
  - Note: Instead of doing a breadcrumb, for now I am going to put a link to the Log index at the bottom of the page. Later this can be part of the pagination nav menu.
- Move top-level header to template
Done Start writing about the project I hope to achieve during my batch at the Recurse Center

11ty v2 Performance

A year or two ago I had worked with 11ty previously for my craft-and-math website, but it was with 11ty v1. It was very helpful, but I was frustrated by how hot my laptop would get while I was running Browsersync. With v2.0, there is a faster, custom-to-eleventy dev server, and I don't even notice it's running. Things go much more smoothly!

On Choosing To Be A Little Ugly

I am refraining from diving into the CSS of this blog right now. Pure HTML can be a little ugly at times, but it has built-in responsiveness and accessibility features. I think that's worth a little ugliness. I want to make sure to be careful that I am not accidentally undoing those features while making aesthetic 'improvements'. In time, I will likely add some subtle CSS tweaks, like making the pagination nav element horizontal and hiding the (semantically important, visually distracting) <ol> list decorations.

I try to refer to Seirdy's opinionated and thorough Best practices for inclusive textual websites when making a design decision. My previous website (about art) is very heavy on visuals. I am excited to experiment with the inclusivity of this blog, which is a primarily textual website.

Task Ideas

Look into pagination for log entries. Can I have a little "Latest, Next, Previous, Oldest" menu at the bottom of the page, like webcomics all have?
I want the day of the week visible. I wonder how hard that would be.
Add tags to log entries like project:blog or project:information-games so that they can be automatically linked to project pages later, when I have project pages.

Thursday, October 12, 2023

2023-10-12T21:00:00Z

Introduced blog. Confused about Eleventy frontmatter for dates.

Today I created the very beginnings of this blog, which is generated with the static site generator 11ty. I started from scratch with the help of 11ty.Recipes. I am creating it in preparation for my upcoming batch at the Recurse Center, so that it will be easy to keep a record of my time there from the very start.

Date Woes

I got very muddled down with trying to manage the dates of these log entries in a pleasant way. I learned some about date filters and computed data, but got too confused to really even understand if what I want is possible.

Currently, my front matter looks like this:

date: 2023-10-12 14:00:00-7
day: "2023-10-12"
eleventyComputed:
  title: "2023-10-12"

I have to manually enter a time and timezone so that 11ty won't think I'm talking about UTC instead of my home timezone.
I created a custom data key day where I manually re-enter the date as a string. This is used for generating permalinks and the page title.
I don't write the date in title directly because I might want to change how the titles are generated in the future, but don't want the permalinks to change.
11ty has a great variety of options for generating the date of a page, but I want a date option that is both stable under modification and can be retroactive (in case I forget to write a log for a day in time, but want to write it retrospectively).

This should be possible, right?

Task Ideas

This section is for tasks I want on my radar, but haven't committed to yet.

Create a projects section
Create an about
Describe my web development approach for this blog
Link to my craft/math site
Publish this blog
Write about my goals at RC
Write a page for the event I want to facilitate