Interactive kitchen sink
by Janaki Ram Puli
A reference of the reusable components available for writing notes on this site.
Each section shows the intended markup and how it renders. Components are designed to degrade gracefully: content stays readable even if JavaScript fails.
Contents
Callouts
Four kinds - info (default), tip, warn, danger. Use sparingly; a note that leans on callouts stops feeling like an essay.
Callouts use a left rule and a small-caps label. No emoji, no fill.
Prefer torch.compile once a kernel is stable - the overhead is paid per first run.
torch.cuda.synchronize() will silently hide launch-latency regressions if you wrap all your timings with it.
Do not rm -rf the wandb runs directory while a sweep is still writing.
Sidenotes
On desktop widths the note floats into the right margin 1 1. Margin note on desktop, inline on mobile. Use for asides that should not break the reading flow. , and the paragraph continues without interruption. Use them for pointer-level remarks: citations, caveats, a nudge to see a related note.
Tooltips
Define a term inline like shared memory Fast on-chip memory shared by threads in a CUDA thread block. without breaking the paragraph. Hover or focus reveals the definition.
Citations
Drop inline references like [1] Distill.pub popularized explorable explanations with strong typography and interactive components. in the middle of a sentence. The bubble appears on hover or focus and contains a short summary plus a link.
Tabs
#include <iostream>
int main() {
std::cout << "hello" << std::endl;
return 0;
}
def main() -> None:
print("hello")
if __name__ == "__main__":
main()
Code & copy
Hover a code block to reveal the copy button.
fn main() {
println!("Hello, world!");
}
Mermaid diagrams
flowchart LR
A[Global memory] -->|load| B[Shared memory]
B -->|reuse| C[Registers]
C --> D[Compute]
Statements
Three kinds: definition, theorem / lemma, and proof.
Softmax. $\sigma(x)_i = \exp(x_i) / \sum_j \exp(x_j)$.
If $A$ is symmetric positive definite, then it admits a Cholesky factorization $A = LL^\top$ with $L$ lower triangular and $L_{ii} > 0$.
Induct on matrix size. Split $A$ with a Schur complement; the complement inherits SPD and yields $L$ by induction.
Quote
Premature optimization is the root of all evil.
Checklist
- Verify shapes match
- Add ablation table
- Reproduce baseline
- Freeze random seed for reproducibility
Toggles
Assumptions
- i.i.d. data - bounded gradientsImplementation notes
Use mixed precision and fuse layernorm where possible.Nested - micro-optimizations
- fuse bias + activation - avoid unnecessary castsFigures
Click to zoom into a lightbox; Escape or click outside dismisses.
File links
Attach downloads inline: Download PDF
Margin figure
A small diagram that belongs in the right gutter on desktop and stacks inline on mobile - useful when a figure is supporting, not central.
Emoji image in the gutter on desktop; inline on mobile.
This paragraph continues flowing in the main column while the figure sits alongside. Good for architecture diagrams that illustrate a single paragraph’s point, small plots, or icon-sized schematics.
Side-by-side
Two columns for before/after, input→output, or alternative formulations. Collapses to a stack below 900px.
# imperative
total = 0
for x in xs:
total += x * x
# vectorised
total = (xs * xs).sum()
Math
Inline: $C_{ij}=\sum_k A_{ik}B_{kj}$.
Block:
\(\mathrm{FLOPs} \approx 2MNK\)
Stepper
Discrete steps - good for derivations, ablations, or walk-throughs.
Step 1. Start with a simple recurrence.
\[a_{t} = \alpha\, a_{t-1} + x_t\]Step 2. Each new token updates state.
The running average of past inputs is a linear combination governed by $\alpha$.
Step 3. Later outputs depend on stored information.
This is the essence of any recurrent model - the state is the memory.
Tables
| Component | Type | Notes |
|---|---|---|
| Callout | block | info / tip / warn / danger |
| Sidenote | layout | Margin on desktop, inline on mobile |
| Tooltip | inline | Hover / focus bubble |
| Citation | inline | Same bubble, with a link |
| Tabs | block | Arrow keys navigate |
| Code + copy | inline | Hover a <pre> to reveal copy |
| Mermaid | diagram | Rendered client-side |
| Statement | block | Definition / theorem / proof |
| Quote | block | Pull quote w/ attribution |
| Checklist | block | Strikes completed items |
| Toggles | block | Nestable <details> |
| Figure | block | Click to zoom |
| Margin figure | layout | Small figure in gutter |
| Side-by-side | block | 2-column, stacks below 900px |
| Stepper | widget | Prev/Next panels |