New slide 29 "Vibe Coding — Robert C. 'Uncle Bob' Martin" pairs with the
existing Karpathy slide as a thesis/antithesis on vibe coding before the
deck's synthesis at slide 30 (Vibe Coding vs Agentic Engineering).
Layout: 2-column CSS grid (45/55 split). Left: Uncle Bob image with the
same rounded corners + box shadow style as Karpathy's image on slide 28.
Right: 3-sentence summary (setup → mechanism → punchline), attribution
line ("Robert C. 'Uncle Bob' Martin — author of Clean Code · Clean
Architecture · co-author of the Agile Manifesto"), and source link
matching slide 28's source-link styling but left-aligned for the
right-column context.
The 3-sentence summary preserves Uncle Bob's arc: vibe coding is
hazardous for novices, LLMs are mathematical functions predicting next
tokens via matmul on internet/GitHub training data, and they are power
tools where novices lose fingers. Italicized closing quote sets it apart
as Uncle Bob's voice rather than the deck's voice.
Heading renames for parallel structure on the back-to-back voices:
- Slide 28 "Vibe Coding" → "Vibe Coding — Andrej Karpathy"
- Slide 29 (new) "Vibe Coding — A Skeptic's View" → "Vibe Coding —
Robert C. 'Uncle Bob' Martin"
The earlier "skeptic's view" framing was authorial editorial; the new
name-attributed framing lets each voice speak on its own terms before
the deck stakes its synthesis position at slide 30.
Renumbering: former slides 29–55 shifted to 30–56. Total slide count
55 → 56. data-level distribution preserved.
Co-Authored-By: Claude <noreply@anthropic.com>
Slide 11 ("Tokens, not words"): heading and figcaption removed entirely —
now a pure-picture slide (just the OpenAI tokenizer screenshot at
max-width 1100px). The screenshot is self-titled (visible tokenizer UI
labels), so a slide heading was redundant. Flex-centering wrapper dropped.
Slide 14 ("💬 Models are stateless"): flex-centering wrapper dropped,
<h1> now uses default styling (no inline overrides) so it picks up the
deck's border-bottom separator. Dialog diagram retained with margin-top
adjusted for breathing room. The two-line caption strip ("Every turn is
a fresh API call." / "Memory only exists if the harness replays the
transcript.") preserved — it's the slide's conceptual punchline.
Slide 15 ("🦜 Stochastic Parrots"): the standalone large parrot emoji
that previously floated above the heading was merged into the heading
itself (matches the deck's emoji-prefix convention used by slides 14 and
17). <h1> uses default styling for the separator. Subtitle paragraph
preserved as the subheading below the separator.
Slide 16 ("🌡️ Even temperature = 0 isn't deterministic."): thermometer
emoji prepended to the heading, matching the emoji-prefix pattern. <h1>
uses default styling for the separator. Subtitle paragraph preserved as
the subheading.
All four slides now follow (or, in slide 11's case, deliberately depart
from) the canonical slide-17 heading-with-separator pattern. Slide count
unchanged at 55. No data-level changes. No SVG/asset modifications.
Co-Authored-By: Claude <noreply@anthropic.com>
Slides 12 ("How an LLM tokenizes input") and 13 ("What the LLM actually
sees: integer token IDs") restructured to use the heading-with-separator
pattern modeled after slide 17 (and just-applied to slide 10):
- <h1> uses default styling (no inline overrides) → border-bottom separator
- Outer flex-centering wrapper dropped
- SVG-internal title promoted to slide heading; SVG-internal subtitle
promoted to single-line bold caption
- Figure max-width: 860px → 1100px (slide 12); 960px → 1100px (slide 13)
Slide 12 heading shortened to "How an LLM tokenizes input" (was
"How an LLM tokenizes input and generates text autoregressively") — the
longer form was wrapping to two lines on a projector. Autoregressive
generation is already covered on slide 10; slide 12's caption makes
clear this slide's focus is tokenization specifically.
Slide 13 heading trimmed: "What the LLM actually sees: integer token IDs"
(dropped "(advanced view)" parenthetical — read as redundant scaffolding
in heading position).
Slide 13 caption: chose the comma-as-ID-11 line over the abstract
sequence-of-integers definition. The math notation from the SVG subtitle
was deliberately not promoted — it's been removed from the SVG entirely
(see paired commit b667fc5).
Co-Authored-By: Claude <noreply@anthropic.com>
Slide 10 ("How an LLM generates text") restructured to use the deck's
canonical heading-with-separator pattern modeled after slide 17:
- <h1> uses default styling (no inline overrides) → gets the default
border-bottom that acts as the separator
- Outer flex-centering wrapper dropped, matching slide 17's flat layout
Heading text changed from "One token at a time" → "How an LLM generates
text (autoregressive)" — promoted out of the SVG asset (which has been
trimmed to diagram-only in the paired commit).
Caption simplified to a single bold line: "Each predicted token is
appended to the input, then fed back into the LLM." (was previously the
SVG's subtitle). The secondary streaming/cost line is removed for focus.
Figure max-width increased 860px → 1100px (~28% larger) for projector
legibility — combined with the SVG's diagram-shifted-up restructuring,
the on-screen diagram is now roughly 2x the previous size.
Co-Authored-By: Claude <noreply@anthropic.com>
New slide plants the model-as-horse metaphor before the LLM mechanics arc
(slides 10–13: tokens, autoregression, IDs, statelessness). Stripped-down
version of the existing harness slide: horse body only, no harness elements,
no callouts. Two text lines:
"A horse. A model."
"The model is the horse. Raw power, no direction." (red)
The full harness reveal with all 5 callouts (Control loop, Tool allowlist,
Context management, Evaluator, State persistence) and etymology footnote
remains intact at its later position.
Mechanical changes:
- viewBox tightened to "110 25 340 345" (was wider to accommodate callouts)
- <defs> block dropped (no arrow markers needed without callouts)
- former slides 9–54 renumbered to 10–55 (the original harness slide moved
from position 18 to 19)
- Total slide count: 54 → 55. data-level distribution preserved.
Co-Authored-By: Claude <noreply@anthropic.com>
New slide goes one level deeper than slide 13 — shows the integer token IDs
the model actually receives, not just the colored subword tiles. Uses
llm-animation-tokenids.svg with figure max-width 960px (vs 860px for the
narrower LLM SVGs) since the asset's viewBox is 1360×600.
Caption translates the math notation deliberately left in the SVG:
- "The model never reads text — it reads a sequence of integers, each one
an index into a vocabulary of ~200,000 entries."
- "Notice the comma is always ID 11 — the same punctuation mark maps to
the same integer, everywhere, every time."
Renumbering: former slides 14–53 shifted to 15–54. Total slide count
53 → 54. data-level distribution preserved.
Co-Authored-By: Claude <noreply@anthropic.com>
New slides introduce LLM fundamentals before the Claude Code content for a PM
and beginner-technical audience:
- Slide 11 "One token at a time" — autoregressive generation (llm-basic.svg)
- Slide 12 "Tokens, not words" — tokenization basics (tokens.jpg)
- Slide 13 "Tokens in, tokens out" — combined view (llm-advanced.svg)
Renumbering: former slides 11–50 shifted to 14–53 by incrementing data-slide
attributes and updating SLIDE-N banner comments. data-level groupings
(agents/claude-md/skills/context/workflow) preserved. Total slide count
50 → 53. Asset path: ../assets/llm/.
Co-Authored-By: Claude <noreply@anthropic.com>
Adds a styled-HTML dialog diagram (User vs Model bubbles, dashed amber
divider labeled "new session — context wiped", and a two-line caption
strip) to make the stateless behavior of LLMs visible. Drawn rather than
imported as PNG, mirroring slide-12's inline-diagram conventions. Old
slides 10..48 shifted to 11..49 via sentinel-replacement; banner
comments updated in the same pass to keep the deck's zero-drift state.
No new CSS classes — all layout via inline styles consistent with
surrounding slides.
Co-Authored-By: Claude <noreply@anthropic.com>
Forked from presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html
on 2026-04-30 to serve as the ongoing main reference deck. Renamed and decoupled
from GDG/Gemini-specific branding:
- title tag, slide-1 H1, subtitle, and HTML banner all read "Claude Code Best Practice"
- favicon swapped from gemini-jumping.svg to claude-jumping.svg
- right-corner global Gemini mascot removed (left Claude mascot kept)
- GDG event badge replaced with neutral GitHub repo badge
- four trailing Gemini-comparison slides removed (49, 50, 51, 52)
- co-presenter intro slide removed
- inline <!-- SLIDE N: ... --> banners fully repaired (1:1 with data-slide values)
Final deck: 48 slides ending with "Thank you" closing slide.
Co-Authored-By: Claude <noreply@anthropic.com>
Shayan Rais