A place for musings, observations, design notes, code snippets - my thought gists.
A neat CSS trick to add favicons to website links
I discovered a neat CSS trick that automatically lets you prepend an SVG ‘favicon’ before URLs linking to a particular domain. For example, for links to github.com, you can embed an octocat SVG using an attribute selector:
a[href*="github.com"]::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.35em;
vertical-align: -0.15em;
background: currentColor;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.62 7.62 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>') center/contain no-repeat;
}
We apply the favicon as a CSS mask to properly render the transparent components of the logo against the background.
MathJax v4.0 released
MathJax v4.0 has been released!
I just integrated MathJax v3 with Hugo last night for this blog to start writing some maths posts, and v4 is released today…
I’m hoping it improves rendering though, I was seeing some issues with SVG output for inline formulae in Safari. KaTeX is neat and fast, but I find the quality of the typesetting to be quite sub-par compared to MathJax.
A Character Study in Alliteration
I came across a short alliterative poem about Rorschach I wrote a good while back after reading The Watchmen:
Manic milieu meets maimed mien,
moralising meandering misanthropic menace,
metes most morbid measures masked,
macabre murmurs marry much moribund musings,
massacring measly men mirthlessly
I don’t know why I decided to pick ’m’ here for the alliteration, but I often enjoy writing such whimsical snippets. I’m not sure what you’d call this, but I suppose ’extreme alliteration’ or reverse lipogram would suffice. I quite like the whole field of constrained writing, it’s quite fun thinking about how to slot words into constraints just-so. Apparently there was (is?) a group of French mathematicians and writers who similarly delighted in such pursuits… the Oulipo (Ouvroir de littérature potentielle).
Amazingly, I asked ChatGPT who it thought the poem was about, with no other context provided, and it nailed it (link to chat).
Learning from LLMs ethically by practising code minimisation as a discipline
Like many people nowadays, I find LLMs an invaluable tool for learning new concepts or vibecoding in unfamiliar stacks and langauages. It’s undeniably a massive accelerator when it comes to quickly iterating and learning.
But it has its downsides. There’s a strong argument to be said that by offloading the challenge of learning something new, your core critical thinking atrophies and your ability to focus slides down the slippery slope of instant gratification.
However, there really are only so many hours in a day, and there are far too many days of learning to fit in. So a Faustian bargain I have done…
A useful exercise I employ is “how far can I cut this code down before it stops working”? LLMs seem to love overdoing things, even when instructed against it. I find the code produced by LLMs to be full of single-use functions, over-zealous try-except clauses, and overdone encapsulation. (Of course, the same could be said of any idiomatic Java programmer).
Of course, concision is not the sole determiner of ‘good code’, whatever that may be. But I think there is something to be said that parsimony is an ideal to strive for.1 Everything in computer science is just a long walk up a Ladder of Abstraction, after all.
In any case, I find that the sheer act of this “code minimisation” helps distill how the code works the way it does and I find myself learning huge amounts along the way.
-
This may also be a case of Stockholm Syndrome: my statistical modelling professor was particularly zealous about parsimonious linear models… ↩︎
Haptics at 300kph
Apple released a new “Haptic Trailer” for their new F1 movie - you can check it out in the Apple TV app. It’s a pretty neat experience, I’d never thought about adding haptics to a playback experience, but it really does add another dimension of immersion.
I was curious on how it was implemented, and stumbled across a great blog post that really shook it out for me… I’m sure it’d get horrifically overused, but it’d be interesting to see whether this gets adopted into more media streams in the future.
Building animations in Manim with LLMs
Manim is a Python animation engine designed to build animated mathematical explainer videos (examples here) created by Grant Sanderson of the superb YouTube channel 3Blue1Brown.
A couple years ago I wanted to write my own mathematics explainer videos with Manim, but found the learning curve to be pretty steep at the outset.
The user experience has since improved dramatically - in large part because of the Manim Community Edition, but also because there’s now enough samples in recent LLM training runs that they can produce workable Manim code!
I stumbled across a neat website (GitHub) that allows you to prompt either a SOTA LLM or a fine-tuned GPT-3.5 model and have Manim code generated and rendered in-browser. The quality is passable at best (and I’ve observed better results prompting whatever default model ChatGPT is serving up as of writing), but the barrier to entry just dropped remarkably. I can jump right in with a MVP and start tweaking!
Also shoutout to a cool project I stumbled along on the way: ManimWeb, a Dart-backed engine to build interactive maths animations for the web. Development seems to have died a few years ago, but the Fourier Transform example is neat to play around with.