tinker.ph

my hypertext journal + learning in public
© 2026 Marc Obaldo
  • 17,541,360 keys ⌨️
  • 6,129,603 clicks 🖱️
  • 395.80km mouse 📏
  • 1198.26d 🆙
  • 9283GB down 📉
  • 947GB up 📈

  1. Animated equations on the web: Part 2

    I got around to working on animated equations on the web again, just out of sheer procrastination and refusal to do the things I should actually be doing.

    Here’s my idea:

    • Convert LaTeX to HTML using katex ✅
    • For each equation, generate a diff of the dom between the current and the next ✅
    • Generate the transition dom between the current and the next, using revealjs to animate.

    So far, I’ve gotten to the diff part, and the only thing left is to assemble the transition, but my brain is fried from work, so I’m taking a break for now.

    diff between DOM

    Side note, I am really loving my Astro setup. Each entry is essentially its own playground with my own vanilla JS just running, so I wrote code above literally inside this entry as I was writing it.

  2. See what I'm working on

    I am used to knowing every detail of every layer of a product, but in my current role, it seems like I am at a point where it is becoming too much, and I have to compromise keeping up-to-date with one area in order to keep tabs on another. It seems like this happens to even the best engineers:

    I probably had my personal “moment of truth” around the beginning of Doom 3’s development, when it became clear that it is no longer possible to deeply understand every single part of a modern application. There is just too much. Nevertheless, I found that I could still enjoy my work when confined to a subset of the entire project, and I have thus remained committed to the high end. However, the appeal of smaller systems still lingers.

    -@ID_AA_Carmack, taken from his Nov 02 2007 .plan

    For me, it’s the opposite. I still thirst for learning new things at the lower level.

    I was inspired to start incorporating .plan files, outdated as they may be, into my routine. I primarily use Windows because I find it tedious to keep switching between the Mac and Windows when I am in video game mode and building mode. So I started by implementing my own fingerd in Rust for use in Windows, as well as incorporating it into my Obsidian/Astro workflow. Although I ended up dockerizing this into a very small linux container and deploying to my k8s cluster, the code runs and compiles on Linux, macOS, and Windows, and would run on bare metal as well.

    Now you can keep tabs on what I’m currently working on by just running:

    Terminal window
    finger marc@grove.tinker.ph

  3. How to destroy engineering organizations

    In 1944, the CIA released the Simple Sabotage Field Manual with the following goal:

    Sabotage varies from highly technical coup de main acts that require detailed planning and the use of specially trained operatives, to innumerable simple acts which the ordinary individual citizen-saboteur can perform. This paper is primarily concerned with the latter type. Simple sabotage does not require specially prepared tools or equipment; it is executed by an ordinary citizen who may or may not act individually and without the necessity for active connection with an organized group; and it is carried out in such a way as to involve a minimum danger of injury, detection, and reprisal.

    @prakhesar translates it to how modern organizations are sabotaged from within, some of which I’ve personally encountered in my career.

    • Create a strict leveling system with a long hierarchy
    • Encourage tons of meetings, lots of 1:1’s, lots of weekly syncs, and lots of planning meetings
    • Hire people that do not directly improve the product, or do not directly sell the product
    • Write lots of tickets, created a PRD for everything
    • Lots of cross-functional collaboration that results in blockers
    • Hire consultants with no subject matter expertise
    • Reward the loudest in the room with the biggest bonuses
    • …and the list goes on.

    This is why I enjoy being in special projects organizations within larger organizations. We typically have a different set of issues, and our difficulties don’t come from simple sabotage.

  4. The return of 2Advanced Studios

    If you’ve been in the web industry long enough, you might have heard of 2Advanced Studios. A lot of their work can still be found in the web design museum. They were the pinnacle of design during the flash era of the web, and they’re coming back from the dead.

    As a kid, I was inspired by 2A to take up Flash and Flash-related tools that outputted .swf files. ActionScript was the first actual programming language I learned before JavaScript and BASIC. I’m very excited to see what they’ll be working with, especially since so much has changed with web design and interactivity since then.

  5. Generating random bright colors

    On the index page of the site, you can see a chronologically sorted list of posts. When you hover this list, you’ll notice that the colors are randomized.

    I originally tried to implement this using the Cicada Principle. However, I ran into two main issues: first, I had to hand-code all the colors I wanted, so the list was definitely finite, and second, it wasn’t really random - the pattern is definitely static. That effectively meant that the order of the colors was static, as if you passed a seed to the RNG.

    I ended up deciding to use JS, since I figure I’ve been adding JS to random posts here anyway (ah the joys of Astro and markdown!). Between generating bright and dark colors, HSL is much easier to use. The code below lets you generate bright colors, which is exactly what I use for this site. To generate darker colors, simply change the range for the lightness!

    And of course, for the demo: here’sa randomlist of linksto showcasemy point.

    1
    const generateBrightColor = (() => {
    2
      "use strict";
    3
    

    4
      const nextInt = (min, max) => {
    5
        return Math.floor(Math.random() * (max - min + 1)) + min;
    6
      };
    7
    

    8
      return () => {
    9
        const h = nextInt(0, 360);
    10
        const s = nextInt(95, 100);
    11
        const l = nextInt(70, 90); // don't go too far high
    12
        return `hsl(${h},${s}%,${l}%)`;
    13
      };
    14
    })();