# Writing That Computes

*2026-06-09 · bosphorify*

> What this blog's posts can do: live components, charts, quizzes — and real executable code, like an interactive Fourier transform.

Posts here aren't static text. They're built from **blocks** — and some blocks compute.

> **How this page works**: Everything below is a configurable block: safe mini-apps need no code, and one advanced block runs real JSX in your browser.

## Mini-apps, no code

*Chart (area): tokens saved per post (illustrative) — values: 12, 19, 27, 41, 64, 80*

**Quiz:** Where does the advanced block's code run?

1. On our server during SSR
2. In your browser only
3. On the edge

## Real code: a Fourier transform you can play

Slide the frequency: the time-domain wave gets denser and the spectrum's peak — the dominant bin — tracks it.

```jsx
const Fourier = () => {
  const N = 64
  const [freq, setFreq] = React.useState(4)
  const signal = Array.from({ length: N }, (_, n) =>
    Math.sin((2 * Math.PI * freq * n) / N),
  )
  const mag = Array.from({ length: N / 2 }, (_, k) => {
    let re = 0
    let im = 0
    for (let n = 0; n < N; n++) {
      const a = (2 * Math.PI * k * n) / N
      re += signal[n] * Math.cos(a)
      im -= signal[n] * Math.sin(a)
    }
    return Math.round(Math.sqrt(re * re + im * im))
  })
  const dominant = mag.indexOf(Math.max(...mag))
  return (
    <div>
      <label>
        frequency: {freq} cycles{' '}
        <input
          type="range"
          min={1}
          max={16}
          value={freq}
          onChange={(e) => setFreq(Number(e.target.value))}
        />
      </label>
      <p>dominant frequency bin = <strong>{dominant}</strong></p>
      <Chart type="line" values={signal} label="signal x[n] — time domain" />
      <Chart type="bar" values={mag} label="|X[k]| — magnitude spectrum" />
    </div>
  )
}

<Fourier />
```

## Questions people ask

**Is author code safe?** — It runs client-only, never on our server, and only admins can author it.

**Can agents read this post?** — Yes — fetch it with .md or an AI user-agent and you get clean markdown.