worthy of study
I was working with an agent to produce a new widget. I gave it a research task, gave it a direction, and when it came back I immediately stopped prompting it further to investigate what it did. The artifact that was generated wasn't merely functional, it did something that I did not understand and was therefore worthy of study.
It's an important moment that people show not ignore. But to help explain the situation, try playing with the widget below:
Drag left/right to scrub a value. Works for touch, mouse, and pen.
f(0) = ?
That's interesting, right? It feels like you're able to interact with Latex on the web. But how does this work? Mathjax puts the entire rendered latex in a single <svg> element. So that's impossible to bind events on that, even in hindsight.
So how does the widget work?
Details of Katex
The trick is to use a small, nearly hidden, feature of katex instead.
$$ f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{\frac{(x - \mu)^2}{2\sigma}} $$
See that math, this is the latex that generated it.
$$ f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{\frac{(x - \mu)^2}{2\sigma}} $$
But in Katex you're able to add more information! You could do something like below around $e$.
\htmlData{param=mu}{e}
This isn't standard latex, and it requires adding some extra katex settings.
katex.render(expandTemplate(), host, {
displayMode: true,
throwOnError: true,
trust: (ctx) => ctx.command === "\\htmlData",
strict: (err) => (err === "htmlExtension" ? "ignore" : "warn"),
});
Now, if you look at how $e$ is actually rendered, you'll notice this:
<span class="enclosing mtight" data-param="mu">
<span class="mord mtight">e</span>
</span>
See that? Two things:
- Katex renders every element in it's own
spaninstead of everything in a singlesvg - On top of that katex also provides a mechanism to add data params to the span object. And that let's you bind events!
Meta observation
To be clear, I used an agent to build this widget. But while it was clanking I took a moment to step back and to recognize that the generated code was worthy of study. It was a moment worthy of pause.
Not because the coding quality was amazing, but because it reveiled a pattern that I was completely unaware of. And understanding that pattern is going to help me longer term.
It's allmost like the coding agents makes you a wizard but you still need to understand what spells you're able to cast. And after doing a small deep dive, by recognizing that something was worthy of study, it feels like I gained a new spell that I can cast in the future. You can do a lot of cool things with maths/animations using this API!
