Rayhaan JaufeerallyandClaude Fable 5.1
9d6996c6c1
- Removed every fragment and stepped code highlight: a slide now shows everything at once. Two code blocks keep a static highlight on one line. - Dropped "What stands between you and an outage". - The UPDATE walked through in section 3 is now 2a0d:d740::/48 as AS210036 announces it to the SwissIX route servers: next hop 2001:7f8:24::c9 (pr01's port on the peering LAN), AS path 210036, MED 0 and 210036:10:2, matching what pr01's export filter puts on routes to peers. Encoded with the packet crate and parsed back to the identical message; the slide generator asserted every quoted number, including the next hop, against the bytes. Adds a MULTI_EXIT_DISC slide to the walkthrough. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Slides
A reveal.js deck structured like Matt Godbolt's newer talks (what-happens-beneath-accu-2026): no stock theme but a custom dark one, every slide on a rounded panel, IBM Plex Sans and Mono, monokai code with glowing stepped lines, 16:9 with fade transitions, and the content in one Markdown file per section.
What is ours: the palette, and the corner motif. His ring-and-thread became a chain of nodes and links, an AS path.
The talk
| Section | File |
|---|---|
| IP addresses and prefixes (IPv6) | sections/01-addresses.md |
| Where AS numbers and prefixes come from (IANA, RIPE) | sections/02-registries.md |
| BGP and the bytes of an UPDATE | sections/03-bgp-update.md |
| IP transit and Internet exchanges | sections/04-transit-and-ix.md |
| The lab: ferrix, pr01.rue and its exchanges | sections/05-lab.md |
The UPDATE in section 3 is 2a0d:d740::/48 as AS210036 announces it to the
SwissIX route servers: next hop 2001:7f8:24::c9 (pr01's port on the peering
LAN), MED 0 and the 210036:10:2 tag, which is what pr01's export filter puts
on routes to peers. It was produced with ferrix's own encoder and parsed back
to the same message, not captured off the wire; a capture from pr01 may differ
in detail (BIRD can append a link-local next hop). The byte slides step through
it one part at a time (press down), and every number on them was checked
against the bytes when the slides were generated. To change the example,
regenerate rather than edit the hex by hand.
The deck deliberately has no fragments or stepped code: a slide shows everything at once. Two code blocks keep a static highlight on one line.
| File | Holds |
|---|---|
theme.css |
the look: palette, type, panels, motif, title slide |
style.css |
components used by slides: columns, boxes, bytes, notes |
index.html |
section list, reveal.js loader and options, bird highlighter |
sections/*.md |
the slides |
Make it yours
Everything brand-like is a variable at the top of theme.css. To compare
accents without editing, open ?accent=green, ?accent=amber or
?accent=magenta (blue is the default); copy the one you like into :root.
The wordmark bottom-left is the <div class="wordmark"> in index.html.
For a full-bleed title image, empty the title <section> and give it
data-background="images/title.png".
Show it
The sections are loaded over HTTP, so open the deck through a server, not by
double-clicking index.html. Opened from disk, browsers block reveal.js and
the section files, and you would see a title and empty panels; the page now
says so instead:
python3 -m http.server 8000 --directory slides
Then http://localhost:8000. Keys: arrows to move, S speaker view with
notes and a timer, O overview, F fullscreen, B blank the screen.
Offline
slides/vendor-reveal.sh
copies reveal.js into slides/reveal.js/ (ignored by git). The deck uses that
copy when present and the CDN otherwise. Do this before presenting anywhere
with uncertain Wi-Fi. IBM Plex still comes from Google Fonts; without a
network the deck falls back to Helvetica/Arial and the system monospace, so
install IBM Plex on the presenting machine if that matters.
Write slides
Edit the files in sections/; add a section by adding a file and a
<section data-markdown=...> line in index.html.
----- next slide
--- next vertical slide (detail you can skip)
Notes: speaker notes from here to the end of the slide
Apply a class to the element above with <!-- .element: class="..." -->.
| Class | Effect |
|---|---|
big |
one large statement on the slide |
note |
quiet italic aside |
attribution |
small credit under an image or quote |
borders |
table with visible borders |
r-stretch |
image or iframe fills the remaining height |
blur-edges |
soft edge for photos |
Blocks: <div class="cols"> two columns, <div class="boxes"> labelled cards
(us, ok, bad), <pre class="bytes"> BGP bytes in the colours of the lab
page (add focus, and on to the spans to keep lit, to dim the rest),
<table class="decode"> for the explanation under them,
<svg class="diagram"> for diagrams drawn in the theme's colours (hot,
fabric, link, bgp, traffic). Code fences take a language and optional line steps, e.g.
```bird [1-3|5-9]; bird is a small highlighter defined in index.html.
<!-- .slide: class="bare" --> drops the panel, the motif and the wordmark
for one slide, e.g. a full-bleed image. The title slide does so by itself.
Open http://localhost:8000/?print-pdf in Chrome and print to PDF with background graphics on.