debugging strategy: use sounds or pictures

I'm still not super satisfied with the examples in this one, I'd love to hear examples of how you use visualizations or sounds to debug

@b0rk If you naïvely interpret certain forms of binary data (e.g. a stream of integers) as raw PCM audio data, certain patterns can pop out more easily due to the… alternate… pattern matching machinery used by the brain. Anything like a repeating pattern, or distinctly different period of pattern, can highlight interesting points.

Fun facts: you can use JPEG to compress PCM, and you can use MP3 to compress images. The artifacts are very similar, due to the signal processing (DCTs, &c.) used.

@b0rk Ah, and to follow up with a far more practical example of visually breaking something down, let me introduce x-ray CSS: https://gist.github.com/amcgregor/71c62ea2984839a9063232ed2c0adf27#file-xray-css

Example: https://codepen.io/amcgregor/details/PoZoPYv

More complete Facebook login page (defused) example: https://codepen.io/amcgregor/details/jOWObBM

My own HTML5 boilerplate sans most of the code. Because there's too much Romulus-be-damned boilerplate, and people fail to realize almost none of it is in any way needed. For more details than you probably wanted, ref: https://codepen.io/tomhodgins/post/code-that-you-just-never-ever-need-to-write formerly https://tomhodgins.hashnode.dev/code-that-you-just-never-ever-need-to-write-cjpblnfff00km0ys149kbttbg

My own HTML5 boilerplate sans most of the code. Because there's too much Romulus-be-damned boilerplate, and people fail to realize almost none of it is in any way needed. For more details tha...

Gist
@alice this is amazing
@b0rk If you see hot pink, you're doing it wrong. (> 15 levels of nesting.) Facebook are doing it wrong. 😏

@alice @b0rk

Thank you for this!

This whole thread is blowing my mind. I can't believe I never thought about using Hi-Fi sound to sift through large amounts of data before. I mean beyond beeps and boops.

Our brains have all this built in machinery for finding or hiding patterns in audio data. I can hear 24 simultaneous sounds* much easier than I can look at 24 simultaneous pictures.

Where can I read more?

*(8 musical instruments, left, center, right channels).

@alice @b0rk if I had to find a pattern in a large messy pile of data, especially if I didn't know what I was looking for, my instincts would be to either visualize the data, or use math (clustering, searching, pattern recognition). I wouldn't have thought to consider converting it to some form of audio, but it makes so much sense as a potential option now that you point it out.

I know our brains don't do FFTs, but the net effect is similar.

@mekkaokereke @b0rk There are a number of ways to map data to sound. Time-series data makes the connection more obvious, but here's an example (mild flashing and loud tones warning) that uses the "value" being read (for comparisons, initially, then for confirmation at the end) as the frequency shift.

You can absolutely hear the difference between these algorithms. You can even intuitively pick up that some… are not optimal.

https://www.youtube.com/watch?v=kPRA0W1kECg

15 Sorting Algorithms in 6 Minutes

YouTube