Component gallery: every post block on one page

This page uses every post component once, to show how each looks and works in a post, and so styles, scripts and performance can be checked in one place. All data is illustrative: addresses come from the documentation ranges, hosts are example.com names, and hashes, serials and timings are made up unless the text says otherwise.

Network

A raw request and its response, instead of a screenshot of a proxy's request pane:

POST /login HTTP/1.1
Host: app.example.com
Content-Type: application/x-www-form-urlencoded

user=alice&password=REDACTED

HTTP/1.1 303 See Other
Location: /
Set-Cookie: session=REDACTED; Path=/; Secure; HttpOnly; SameSite=Lax

A packet list with its field tree and bytes, instead of a protocol analyzer screenshot:

Bytes and layouts

Named fields over a hex dump, instead of a hex editor screenshot:

A C structure as bytes and a field table, instead of a struct diagram or pahole output:

The bits of a register, instead of a figure from a processor manual (flip a bit to see the fields decode):

A process tree, instead of a screenshot of a process explorer:

Debugging and reversing

Disassembly with addresses and bytes, instead of a disassembler screenshot:

Debugger snapshots to step through, instead of debugger screenshots or a stepping GIF:

A backtrace with the key frame marked and library frames folded, instead of a crash dialog screenshot:

A control-flow graph, instead of a screenshot of a disassembler's graph view:

0x401126  cmp esi, 0x10
0x401129  jne bad
0x40112b  xor ecx, ecx

0x40112d  movzx eax, byte ptr [rdi+rcx]
0x401131  xor   al, 0x5a
0x401133  cmp   al, byte ptr [rdx+rcx]
0x401136  jne   bad

0x401145  xor eax, eax
0x401147  ret

0x401138  inc ecx
0x40113a  cmp ecx, 0x10
0x40113d  jl  loop

0x40113f  mov eax, 1
0x401144  ret

An executable's headers, sections and imports, instead of a PE viewer screenshot:

A process memory map, instead of a screenshot of vmmap or /proc/<pid>/maps in a terminal:

Code

A shell session where readers copy only the commands, instead of a terminal screenshot:

$ file ./hello
./hello: ELF 64-bit LSB pie executable, x86-64
$ id -u
1000

Numbered notes on lines of code, instead of a screenshot with arrows drawn on it:

ssize_t n = read(fd, hdr, sizeof *hdr);
if (n != sizeof *hdr) return -1;
if (hdr->len > MAX_BODY) return -1;
body = malloc(hdr->len);

1. read may return fewer bytes than asked for, even on a regular file.
2. A short read is an error here; n may also be -1 with errno set.
3. The length comes from the input: check it before it sizes an allocation.

A patch with word-level marks and a split view, instead of a screenshot of a code review:

Two listings side by side, instead of two screenshots next to each other:

.method public static check(I)Z
    const/4 v0, 0x1
    return v0
.end method

static boolean check(int x) {
    return true;
}

Data

A JSON document to fold and search, instead of a screenshot of a decoded token:

A sortable, filterable table with typed columns, instead of a spreadsheet screenshot:

A chart drawn from the numbers, with its data table, instead of a chart image:

A log to filter by level and text, instead of a screenshot of a log console:

2025-03-02T09:14:00.120Z INFO  [main] auth - listening on 127.0.0.1:8443
2025-03-02T09:14:07.004Z WARN  [http-3] auth - login failed user=admin src=198.51.100.7
2025-03-02T09:14:07.513Z WARN  [http-3] auth - login failed user=admin src=198.51.100.7
2025-03-02T09:14:08.020Z WARN  [http-3] auth - login failed user=admin src=198.51.100.7
2025-03-02T09:14:08.533Z WARN  [http-3] auth - login failed user=admin src=198.51.100.7
2025-03-02T09:14:09.041Z ERROR [http-3] auth - rate limit reached, blocking 198.51.100.7 for 900s
2025-03-02T09:14:31.870Z INFO  [http-5] auth - login ok user=deploy src=192.0.2.24 mfa=totp

Formulas in TeX instead of pictures of equations: inline, XOR cancels itself ($a \oplus a = 0$), and on a line of their own:

Security artefacts

An advisory card whose badge follows the CVSS score, instead of a screenshot of a CVE page:

Multi-engine scan results, instead of a screenshot of an online scanner (the sample is the EICAR test file; the engine names are made up):

A certificate chain judged against a stated date, instead of a screenshot of a browser's certificate viewer:

Indicators of compromise, grouped and defanged, instead of a screenshot of a threat report table:

Narrative

A dated timeline, instead of a timeline slide:

Numbered steps with folded output, instead of a series of screenshots:

The same task per platform, instead of one screenshot per system:

openssl s_client -connect example.com:443 -servername example.com </dev/null | openssl x509 -noout -dates

$tcp = [Net.Sockets.TcpClient]::new("example.com", 443)
$tls = [Net.Security.SslStream]::new($tcp.GetStream())
$tls.AuthenticateAsClient("example.com")
$tls.RemoteCertificate.GetExpirationDateString()

A sequence diagram drawn in the browser, instead of an exported drawing:

sequenceDiagram
  accTitle: A cross-site POST under SameSite=Lax
  accDescr: A page on evil.example submits a form to app.example.com; the browser sends no session cookie, and the server refuses.
  participant E as evil.example
  participant B as Browser
  participant A as app.example.com
  E->>B: auto-submitted form POST
  B->>A: POST /transfer (no session cookie)
  A-->>B: 403 Forbidden

A terminal recording that plays in the page, instead of a GIF:

An image, for what only a picture can show:

Compiler-style callouts for asides, pitfalls and the bug itself:

And a CTF flag behind a spoiler: