Swimmies
Swimmies is a tiny hack that creates ASCII animations within your web browser’s Elements Inspector. It’s running live, right here on this website. (Viewable on desktops.)
I first created this “swimmies” idea—hiding animations within the Elements Inspector—back in 2013, somewhere between leaving Google Creative Lab and joining Yahoo. I’d been debugging my Rubik’s Cube Explorer which used CSS 3D animations, making the transform style commands visible in the Elements Inspector. Watching these DIV elements smoothly tween their transform values gave me the idea of creating animations in the Inspector itself. I’d never seen anyone do this before—or since. (It is terribly silly, after all.) I shopped this concept around within Yahoo; a passive means of recruiting curious web hackers who’d perhaps make for good future employees. (But company interest was minimal.) And so it swims on in my own website here.
View it live
On a desktop or laptop? Pop open your browser’s Elements Inspector to see the animation, which is currently running live on this website; hidden just below the surface. (These instructions are for Mac, though they ought to extrapolate to other systems easily.)
| Browser | Key command | Menu location |
|---|---|---|
| Chrome |
⌥
⌘
C
Option Command C |
View → Developer → Inspect Elements |
| Firefox |
⌥
⌘
I
Option Command I |
Tools → Browser Tools → Web Developer Tools |
| Safari |
⌥
⌘
I
Option Command I |
Develop → Show Web Inspector |
| Edge |
⌥
⌘
C
Option Command C |
Tools → Developer → Inspect Elements |
Little fish, big fish
Curious where the text comes from? It’s an old Polly Jean Harvey lyric from her single “Down By The Water” (1995). The line can be heard as it’s whispered around 2:04 in the studio track. This is itself a reference borrowed from an early 1900s folk song “Salty Dog Blues”; PJ having substituted the word “daughter” for “quarter.” The context of her edited line is dark and haunting; a mother drowning her own daughter. Kill your darlings, eh? (Oh—in the US, “swimmies” is the common term for inflatable armbands worn by children to aid their buoyancy as they learn to swim.)
Cross-browser support
It seems that line breaks within DOM comment nodes are only respected in Chrome. In order to support Firefox and Safari, the animation requires one comment node per line of text. Similarly, Safari and Firefox attempt to collapse runs of whitespace in comment nodes down to a single space character. To combat this I replace all regular space characters (\x20) with non-breaking ones (\xa0). Et voilà.