Bitwise operations trip people up. Not because they're hard — the logic is literally AND, OR, XOR — but because our brains don't think in binary. You see 60 & 13 and your brain goes blank.
I built a visual bitwise calculator that shows the binary representation of each operand side by side. Green for 1, gray for 0. The result row updates as you change the operation.
Here's what 60 AND 13 looks like visually:
60 = 0011 1100
13 = 0000 1101
AND = 0000 1100 = 12
Seeing the bits aligned makes it immediately obvious why the answer is 12. The 1 bits in both numbers are only in positions 2 and 3.
The implementation is dead simple — vanilla JS, toString(2).padStart(8, '0') for the binary conversion, CSS Grid for the bit display. No WASM, no BigInt tricks. Just rendering the thing your brain can't do naturally.
The bit that surprised me: NOT is the operation people use least but ask about most. Seeing ~60 render as 1100 0011 (which is -61 in two's complement) makes the concept click in a way reading about it never did.
Live tool: bitwisecalc.com
Source: github.com/dayu2333-jinyul/bitwise-calc-demo
Top comments (0)