1069 lines
47 KiB
HTML
1069 lines
47 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>Automatic Coding — From autocomplete to AI agents</title>
|
|||
|
|
<style>
|
|||
|
|
/* ── Theme overrides ── */
|
|||
|
|
:root {
|
|||
|
|
--r-background-color: #0d0d0d;
|
|||
|
|
--r-main-color: #e8e8e8;
|
|||
|
|
--r-heading-color: #fff;
|
|||
|
|
--r-link-color: #42b883;
|
|||
|
|
--r-link-color-hover: #6fd5a8;
|
|||
|
|
--r-selection-background-color: #42b883;
|
|||
|
|
--r-selection-color: #0d0d0d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Fragment highlight ── */
|
|||
|
|
.reveal .slides section .fragment.highlight-green.visible {
|
|||
|
|
color: #42b883;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Phase badge ── */
|
|||
|
|
.phase-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: #42b883;
|
|||
|
|
color: #0d0d0d;
|
|||
|
|
padding: 4px 14px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
font-size: 0.55em;
|
|||
|
|
font-weight: bold;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
}
|
|||
|
|
.phase-badge.warning {
|
|||
|
|
background: #f0a500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Cards ── */
|
|||
|
|
.problem-card {
|
|||
|
|
border-left: 4px solid #e74c3c;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
background: rgba(231, 76, 60, 0.08);
|
|||
|
|
border-radius: 0 8px 8px 0;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
.tip-card {
|
|||
|
|
border-left: 4px solid #42b883;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
background: rgba(66, 184, 131, 0.08);
|
|||
|
|
border-radius: 0 8px 8px 0;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Meme caption ── */
|
|||
|
|
.meme-caption {
|
|||
|
|
font-size: 0.5em;
|
|||
|
|
opacity: 0.7;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Fit-text headings ── */
|
|||
|
|
.reveal h1.r-fit-text,
|
|||
|
|
.reveal .r-fit-text {
|
|||
|
|
line-height: 1.05;
|
|||
|
|
font-weight: 900;
|
|||
|
|
letter-spacing: -0.02em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Section divider subtle grid texture ── */
|
|||
|
|
.reveal section.section-opener::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
|||
|
|
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
|||
|
|
background-size: 40px 40px;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
.reveal section.section-opener > * {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Context window diagram ── */
|
|||
|
|
.ctx-bar {
|
|||
|
|
display: flex;
|
|||
|
|
width: 90%;
|
|||
|
|
margin: 24px auto;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 54px;
|
|||
|
|
font-size: 0.45em;
|
|||
|
|
font-weight: bold;
|
|||
|
|
letter-spacing: 0.04em;
|
|||
|
|
}
|
|||
|
|
.ctx-seg {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0 8px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.ctx-system { background: #2d6a4f; flex: 2; color: #b7e4c7; }
|
|||
|
|
.ctx-history { background: #1d3557; flex: 4; color: #a8dadc; }
|
|||
|
|
.ctx-user { background: #6d4c41; flex: 2; color: #ffccbc; }
|
|||
|
|
.ctx-resp { background: #4a148c; flex: 3; color: #e1bee7; }
|
|||
|
|
|
|||
|
|
/* ── Drake-panel layout ── */
|
|||
|
|
.drake-panels {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: stretch;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
max-width: 820px;
|
|||
|
|
}
|
|||
|
|
.drake-panel {
|
|||
|
|
flex: 1;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 28px 20px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 14px;
|
|||
|
|
border: 2px solid rgba(255,255,255,0.1);
|
|||
|
|
}
|
|||
|
|
.drake-panel .big-emoji {
|
|||
|
|
font-size: 3.2em;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.drake-panel .panel-label {
|
|||
|
|
font-size: 0.65em;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
.drake-panel.bad { background: rgba(231,76,60,0.12); border-color: rgba(231,76,60,0.4); }
|
|||
|
|
.drake-panel.good { background: rgba(66,184,131,0.12); border-color: rgba(66,184,131,0.4); }
|
|||
|
|
|
|||
|
|
/* ── Review steps ── */
|
|||
|
|
.review-step {
|
|||
|
|
font-size: 1.1em;
|
|||
|
|
margin: 16px 0;
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: rgba(255,255,255,0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Closing slides ── */
|
|||
|
|
.big-word {
|
|||
|
|
font-size: 2.8em;
|
|||
|
|
font-weight: 900;
|
|||
|
|
letter-spacing: -0.02em;
|
|||
|
|
color: #42b883;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Misc helpers ── */
|
|||
|
|
.emoji-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 32px;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
.emoji-big {
|
|||
|
|
font-size: 4em;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.quote-block {
|
|||
|
|
border: 2px solid rgba(66,184,131,0.5);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 20px 32px;
|
|||
|
|
background: rgba(66,184,131,0.06);
|
|||
|
|
font-size: 1.15em;
|
|||
|
|
font-style: italic;
|
|||
|
|
margin: 20px auto;
|
|||
|
|
max-width: 700px;
|
|||
|
|
}
|
|||
|
|
.small-note {
|
|||
|
|
font-size: 0.48em;
|
|||
|
|
opacity: 0.55;
|
|||
|
|
margin-top: 6px;
|
|||
|
|
}
|
|||
|
|
ul.clean {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
ul.clean li {
|
|||
|
|
margin: 12px 0;
|
|||
|
|
font-size: 0.82em;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="reveal">
|
|||
|
|
<div class="slides">
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION 1: TITLE
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
|
|||
|
|
<section
|
|||
|
|
data-transition="zoom"
|
|||
|
|
data-background-gradient="linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 50%, #16213e 100%)"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text">AUTOMATIC CODING</h1>
|
|||
|
|
<p style="font-size:0.75em; color:#a0a0c0; margin-top:16px;">
|
|||
|
|
From autocomplete to AI agents — where are we actually?
|
|||
|
|
</p>
|
|||
|
|
<!-- ADD SPEAKER NAME HERE -->
|
|||
|
|
<p class="small-note"><!-- Speaker name --></p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Welcome everyone. Today we're going to cut through the hype and look at AI-assisted coding from a practical, engineering perspective.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION 2: LLM BASICS (vertical group)
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
|
|||
|
|
<!-- 2a — Section opener -->
|
|||
|
|
<section
|
|||
|
|
class="section-opener"
|
|||
|
|
data-background-gradient="linear-gradient(135deg, #0d1117 0%, #161b22 100%)"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text">FIRST:<br>WHAT IS AN LLM?</h1>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Before we talk about coding with AI, let's ground ourselves in what these things actually are.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 2b — MicroGPT interactive explainer -->
|
|||
|
|
<section
|
|||
|
|
data-background-iframe="https://growingswe.com/blog/microgpt"
|
|||
|
|
data-background-interactive
|
|||
|
|
style="height: 100%;"
|
|||
|
|
>
|
|||
|
|
<div style="
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: rgba(0,0,0,0.72);
|
|||
|
|
backdrop-filter: blur(6px);
|
|||
|
|
padding: 5px 16px;
|
|||
|
|
font-size: 0.38em;
|
|||
|
|
color: #aaa;
|
|||
|
|
text-align: center;
|
|||
|
|
pointer-events: none;
|
|||
|
|
">
|
|||
|
|
🔗 growingswe.com/blog/microgpt — interactive walkthrough of Karpathy's 200-line GPT
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
This is an interactive breakdown of Andrej Karpathy's minimal GPT — 200 lines, trained on 32,000 human names. Walk the audience through tokenization, softmax, backpropagation, and attention. You can live-demo it right here in the slide.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 2d — Neural network -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<h3>Neural Network at its core</h3>
|
|||
|
|
<div class="emoji-row">
|
|||
|
|
<span class="emoji-big fragment fade-up">🧠</span>
|
|||
|
|
<span class="emoji-big fragment fade-up">⚡</span>
|
|||
|
|
<span class="emoji-big fragment fade-up">📊</span>
|
|||
|
|
</div>
|
|||
|
|
<ul class="clean">
|
|||
|
|
<li class="fragment fade-up">Trained on massive text corpora</li>
|
|||
|
|
<li class="fragment fade-up">Predicts the <em>next token</em> — one word piece at a time</li>
|
|||
|
|
<li class="fragment fade-up">No memory between calls</li>
|
|||
|
|
</ul>
|
|||
|
|
<aside class="notes">
|
|||
|
|
At the most fundamental level, an LLM is a giant next-token predictor. It's stateless — it doesn't remember your last conversation unless you feed it back.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 2c — Context window -->
|
|||
|
|
<section data-auto-animate data-background-color="#111827">
|
|||
|
|
<h3>The Memory Problem</h3>
|
|||
|
|
<p style="font-size:0.65em; opacity:0.7; margin-bottom:4px;">What fits inside a "context window"</p>
|
|||
|
|
<div class="ctx-bar">
|
|||
|
|
<div class="ctx-seg ctx-system">System<br>Prompt</div>
|
|||
|
|
<div class="ctx-seg ctx-history">Conversation<br>History</div>
|
|||
|
|
<div class="ctx-seg ctx-user">Your<br>Message</div>
|
|||
|
|
<div class="ctx-seg ctx-resp">Response</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="fragment" style="font-size:0.8em; margin-top:20px;">Run out of context = amnesia 🫥</p>
|
|||
|
|
<p class="fragment" style="font-size:0.8em;">Every call starts fresh 🔄</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
The context window is everything the model can "see" at once. Past that — it's gone. This is why long conversations degrade and why agents need scaffolding to manage memory.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 2d — What LLMs don't have -->
|
|||
|
|
<section>
|
|||
|
|
<h3>What LLMs don't have</h3>
|
|||
|
|
<ul class="clean">
|
|||
|
|
<li class="fragment fade-up" style="color:#e74c3c;">❌ Understanding of consequences</li>
|
|||
|
|
<li class="fragment fade-up" style="color:#e74c3c;">❌ Real-time knowledge</li>
|
|||
|
|
<li class="fragment fade-up" style="color:#e74c3c;">❌ A "world model"</li>
|
|||
|
|
<li class="fragment fade-up" style="color:#e74c3c;">❌ Persistent memory (without scaffolding)</li>
|
|||
|
|
<li class="fragment fade-up" style="margin-top:20px; color:#42b883; font-weight:bold;">
|
|||
|
|
✅ Incredible pattern matching & synthesis
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<aside class="notes">
|
|||
|
|
These limitations aren't bugs — they're just what the technology is. A hammer is great for nails. Know your tool.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</section><!-- /section 2 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION 3: VIBE CODING (vertical group)
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
|
|||
|
|
<!-- 3a — Section opener -->
|
|||
|
|
<section
|
|||
|
|
class="section-opener"
|
|||
|
|
data-background-color="#1a0a0a"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text">VIBE<br>CODING</h1>
|
|||
|
|
<p class="fragment" style="font-size:0.9em; color:#e87c7c; margin-top:12px;">
|
|||
|
|
"Just vibe with it 🎵"
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Andrej Karpathy coined "vibe coding" — where you let the AI do everything and just vibe with the result. Let's talk about what that actually means.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 3b — What IS vibe coding -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<h3>What IS vibe coding?</h3>
|
|||
|
|
<div class="quote-block">
|
|||
|
|
Human is <strong>NOT</strong> in the loop
|
|||
|
|
</div>
|
|||
|
|
<ul class="clean">
|
|||
|
|
<li class="fragment fade-up">Never read the generated code</li>
|
|||
|
|
<li class="fragment fade-up">Just prompt harder 💪</li>
|
|||
|
|
</ul>
|
|||
|
|
<aside class="notes">
|
|||
|
|
The key defining feature: you don't read the code. You describe what you want, accept what you get, and ship it. Some people have shipped entire apps this way.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 3c — Meme: this is fine -->
|
|||
|
|
<section data-background-color="#0d0d0d">
|
|||
|
|
<div style="font-size:5.5em; line-height:1; margin-bottom:12px;">🔥</div>
|
|||
|
|
<p style="font-size:1.8em; font-weight:bold; margin:0;">This is fine.</p>
|
|||
|
|
<p style="font-size:0.85em; color:#e8e8a0; margin-top:10px;">
|
|||
|
|
The app is on fire but the tests pass
|
|||
|
|
</p>
|
|||
|
|
<p class="meme-caption">— Every vibe coder, eventually</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Tests green. CI green. Production on fire. The AI wrote tests that test the wrong thing. Classic.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 3d — The Problems -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<h3>🚨 The Problems</h3>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
🤖 <strong>Hallucinations</strong> — The code looks right but calls an API that doesn't exist
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
🧩 <strong>Maintainability</strong> — 6 months later, nobody (including the AI) understands it
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
🔓 <strong>Security</strong> — SQL injection on line 42, shipped to prod
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
⚖️ <strong>IP Risks</strong> — Did that code come from a GPL repo?
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
🧠 <strong>Cognitive Decay</strong> — You stop understanding your own codebase
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
👥 <strong>Team Load</strong> — Junior devs reviewing AI slop they can't evaluate
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Each of these is a real, documented failure mode. I'll elaborate on a couple during the demo section.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 3e — Engineers are so dramatic -->
|
|||
|
|
<section>
|
|||
|
|
<h2>Engineers are so dramatic! 🎭</h2>
|
|||
|
|
<div style="font-size:4em; margin:16px 0;">🙄</div>
|
|||
|
|
<p class="fragment" style="font-size:0.75em; opacity:0.8;">...or are they?</p>
|
|||
|
|
<p class="fragment" style="font-size:0.7em; color:#42b883; margin-top:12px;">Let's look at the data.</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Sure, we can be dramatic. But these concerns have shown up in post-mortems at real companies. Let's be precise about the risks rather than hand-wavy either way.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- cockpit analogy — slide 1: image + question -->
|
|||
|
|
<section
|
|||
|
|
data-auto-animate
|
|||
|
|
data-background-image="./assets/b737_cockpit.jpg"
|
|||
|
|
data-background-size="cover"
|
|||
|
|
data-background-position="center"
|
|||
|
|
>
|
|||
|
|
<div style="
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0; left: 0; right: 0;
|
|||
|
|
background: linear-gradient(to top, rgba(0,0,0,0.92) 60%, transparent);
|
|||
|
|
padding: 40px 60px 32px;
|
|||
|
|
text-align: left;
|
|||
|
|
">
|
|||
|
|
<h2 data-id="cockpit-question" style="font-size:1.4em; margin:0; line-height:1.2;">
|
|||
|
|
Would you fly on a<br>fully automatic plane? ✈️
|
|||
|
|
</h2>
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Let this land for a second. Modern commercial planes can fly, navigate, and land almost entirely on autopilot. Yet every flight still has two trained pilots in that cockpit. Why?
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- cockpit analogy — slide 2: the analogy revealed -->
|
|||
|
|
<section
|
|||
|
|
data-auto-animate
|
|||
|
|
data-background-image="./assets/b737_cockpit.jpg"
|
|||
|
|
data-background-size="cover"
|
|||
|
|
data-background-position="center"
|
|||
|
|
data-background-opacity="0.25"
|
|||
|
|
>
|
|||
|
|
<h2 data-id="cockpit-question" style="font-size:1em; opacity:0.7; margin-bottom: 24px;">
|
|||
|
|
Would you fly on a fully automatic plane? ✈️
|
|||
|
|
</h2>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🤖 <strong>Autopilot can do almost everything</strong> — yet every flight still has two pilots
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🧠 <strong>Skills & judgment matter</strong> — when things go wrong, humans take over
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
📋 <strong>Checklists & procedures</strong> — not because pilots are dumb, but because stakes are high
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
⌨️ <strong>Same goes for coding with AI</strong> — automation is a tool, not a replacement for understanding
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
The analogy is tight: autopilot = AI coding agent. The plane can fly itself — but you need a trained human who understands the system, can read the instruments, and knows when and how to intervene. "Vibe flying" is not a thing. Why should vibe coding be?
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</section><!-- /section 3 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION 4: AUTOMATIC CODING PHASES (vertical)
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
|
|||
|
|
<!-- 4a — Section opener -->
|
|||
|
|
<section
|
|||
|
|
class="section-opener"
|
|||
|
|
data-background-gradient="linear-gradient(135deg, #0f3460, #16213e)"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text">THE 5 PHASES</h1>
|
|||
|
|
<p style="font-size:0.75em; color:#a0c4ff; margin-top:12px;">
|
|||
|
|
of human-AI collaboration in coding
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Let's map out the spectrum from "AI suggests a word" to "AI ships the whole product." Each phase has a different human-in-the-loop model and different risk profile.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 4b — Phase 1 -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<p><span class="phase-badge">PHASE 1</span></p>
|
|||
|
|
<h3>Automatic Code Completion</h3>
|
|||
|
|
<p style="font-size:0.72em; color:#a0a0c0; margin:16px 0 24px;">
|
|||
|
|
Copilot, Tabnine, Supermaven — inline suggestions as you type
|
|||
|
|
</p>
|
|||
|
|
<div class="tip-card fragment">
|
|||
|
|
⚡ Fast & low-risk — you review every token before it lands
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment">
|
|||
|
|
⚠️ Can introduce subtle bugs — sustained attention required
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
This is where most developers started. The human is still typing, still in control — the AI just autocompletes. Lowest friction, lowest risk.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 4c — Phase 2 -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<p><span class="phase-badge">PHASE 2</span></p>
|
|||
|
|
<h3>Chat → Copy → Paste</h3>
|
|||
|
|
<p style="font-size:0.72em; color:#a0a0c0; margin:16px 0 24px;">
|
|||
|
|
ChatGPT, Claude.ai — generate in a chat, copy, paste into your editor
|
|||
|
|
</p>
|
|||
|
|
<div class="tip-card fragment">
|
|||
|
|
✅ You're still in full control of what gets committed
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment">
|
|||
|
|
⚠️ Context switching cost — the chat has no awareness of your project
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Many developers still live here. It's deliberate — you're choosing what to paste. But the lack of project context means the AI's suggestions can be subtly wrong.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 4d — Phase 3 -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<p><span class="phase-badge">PHASE 3</span></p>
|
|||
|
|
<h3>IDE-Integrated Agent</h3>
|
|||
|
|
<p style="font-size:0.72em; color:#a0a0c0; margin:16px 0 24px;">
|
|||
|
|
Cursor, Copilot Chat, Claude Code — agent reads your files, writes code inline
|
|||
|
|
</p>
|
|||
|
|
<div class="tip-card fragment">
|
|||
|
|
✅ Project-aware — can refactor across files, understands your codebase
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment">
|
|||
|
|
⚠️ Trust boundary blurs — review discipline becomes <em>critical</em>
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
This is where things get interesting. The agent can now see your whole project. That's powerful — and that's exactly why you need tighter review habits here.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 4e — Phase 4 -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<p><span class="phase-badge">PHASE 4</span></p>
|
|||
|
|
<h3>Multi-Agent Orchestration</h3>
|
|||
|
|
<p style="font-size:0.72em; color:#a0a0c0; margin:16px 0 24px;">
|
|||
|
|
Parallel agents, tool use, sub-agents — full autonomy pipelines
|
|||
|
|
</p>
|
|||
|
|
<div class="tip-card fragment">
|
|||
|
|
✅ Handles entire workflows end-to-end, parallelizes complex tasks
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment">
|
|||
|
|
⚠️ Hard to audit — failure modes are non-obvious and can cascade
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
This is cutting-edge territory. You might have one agent writing code, another reviewing it, another running tests. The coordination overhead is real and the audit trail can get murky.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 4f — Phase 5 -->
|
|||
|
|
<section data-auto-animate data-background-color="#1a1a0a">
|
|||
|
|
<p><span class="phase-badge warning">PHASE 5</span></p>
|
|||
|
|
<h3>Spec-Driven Development</h3>
|
|||
|
|
<div style="font-size:2.2em; font-weight:900; margin:20px 0; color:#f0c040;">
|
|||
|
|
Still a myth 🦄
|
|||
|
|
</div>
|
|||
|
|
<p class="fragment" style="font-size:0.68em; color:#c0c080; font-style:italic;">
|
|||
|
|
"Write a spec → AI ships production code → Deploy → ??? → Profit"
|
|||
|
|
</p>
|
|||
|
|
<div class="problem-card fragment">
|
|||
|
|
Reality check: We're not there yet. Maybe never for complex systems.
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Everyone's pitching this. Nobody's shipping it reliably at scale. For simple CRUD apps? Maybe. For systems with complex domain rules, security requirements, and performance constraints? We need humans in the loop.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
<!-- Phase 5 — real world case study -->
|
|||
|
|
<section data-auto-animate data-background-color="#0d0f1a">
|
|||
|
|
<p><span class="phase-badge warning">PHASE 5 — IN THE WILD</span></p>
|
|||
|
|
<h3 style="font-size:1em;">Case Study: A C Compiler, Built from Specs</h3>
|
|||
|
|
<div class="tip-card fragment fade-up" style="font-size:0.7em; margin: 16px 0;">
|
|||
|
|
🦀 <strong>106,000 lines of Rust</strong> — 351 files — compiles the Linux kernel
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up" style="font-size:0.7em; margin: 16px 0;">
|
|||
|
|
🤖 Generated with <strong>Claude Opus</strong> via iterative spec-driven prompting
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up" style="font-size:0.7em; margin: 16px 0;">
|
|||
|
|
🧩 Key insight: <strong>32 phases × ~11 files</strong> — modular decomposition was everything
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up" style="font-size:0.7em; margin: 16px 0;">
|
|||
|
|
💸 Cost: <strong>$20,000+</strong> in API calls — and the type checker doesn't work
|
|||
|
|
</div>
|
|||
|
|
<p class="fragment meme-caption" style="margin-top:20px;">
|
|||
|
|
🔗 <a href="https://shape-of-code.com/2026/02/22/investigating-an-llm-generated-c-compiler/" style="color:#42b883;">shape-of-code.com — Investigating an LLM-generated C compiler</a>
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Real experiment, February 2026. Someone used Claude Opus to write a C compiler capable of compiling the Linux kernel — 106K lines of Rust. Cost: over $20,000 in API calls. The trick was breaking it into 32 phases of ~11 files each and regenerating each phase ~13 times. It compiles real programs in 17 seconds. But: no type checking. This is Phase 5 in the wild — impressive, expensive, and not production-grade.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</section><!-- /section 4 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION 5: DEMO CLAUDE CODE
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
|
|||
|
|
<section data-background-gradient="linear-gradient(135deg, #0a1628, #0d2137)">
|
|||
|
|
<h2>🎬 Demo: Claude Code</h2>
|
|||
|
|
<ul class="clean" style="margin-top: 24px;">
|
|||
|
|
<li class="fragment fade-up">
|
|||
|
|
<div class="tip-card">
|
|||
|
|
🔧 <strong>Skills</strong> — OpticOdds fixtures integration
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment fade-up">
|
|||
|
|
<div class="tip-card">
|
|||
|
|
🪝 <strong>Hooks</strong> — Preventing credentials from leaking into context
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Live demo time. I'll show how Claude Code handles a real task — fetching fixture data — and how hooks intercept sensitive values before they hit the model's context window.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION 6: AI SLOP (vertical group)
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
|
|||
|
|
<!-- 5a — Section opener -->
|
|||
|
|
<section
|
|||
|
|
class="section-opener"
|
|||
|
|
data-background-color="#1a0000"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text">AI SLOP</h1>
|
|||
|
|
<p class="fragment" style="font-size:0.85em; color:#ff8080; margin-top:12px;">
|
|||
|
|
When volume beats quality
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
"Slop" is a term gaining traction — low-quality, high-volume AI output that gets merged because nobody has time to really review it.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 5b — What is AI Slop -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<h3>🗑️ What is AI Slop?</h3>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
📈 Code <em>creation</em> FAR outpaces code <em>review</em>
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
📉 Consistency erodes — style, patterns, naming — all drift
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
🧠 Team expertise declines — nobody owns anything anymore
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
The asymmetry is the core problem. AI can generate 500 lines in 30 seconds. A thorough review of 500 lines takes 30 minutes. Something has to give — and usually it's the review.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 5c — Drake-style panels -->
|
|||
|
|
<section data-background-color="#0d0d0d">
|
|||
|
|
<h3 style="margin-bottom: 24px;">Spot the difference</h3>
|
|||
|
|
<div class="drake-panels">
|
|||
|
|
<div class="drake-panel bad fragment fade-left">
|
|||
|
|
<div class="big-emoji">👎</div>
|
|||
|
|
<div class="panel-label">
|
|||
|
|
<strong style="color:#e74c3c;">Vibe coding this into prod</strong><br>
|
|||
|
|
<span style="opacity:0.7; font-size:0.88em;">No review. No context. No accountability.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="drake-panel good fragment fade-right">
|
|||
|
|
<div class="big-emoji">👍</div>
|
|||
|
|
<div class="panel-label">
|
|||
|
|
<strong style="color:#42b883;">Vibe coding this into a pet project</strong><br>
|
|||
|
|
<span style="opacity:0.7; font-size:0.88em;">Learn fast. Break things. Nobody gets paged at 3am.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Context matters completely. Vibe coding is a fantastic way to explore and learn. Vibe coding straight to production is a different thing entirely.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 5d — Ready to ship without review? -->
|
|||
|
|
<section>
|
|||
|
|
<h3>Ready to ship without review? 🤔</h3>
|
|||
|
|
<div style="font-size:3.5em; font-weight:900; color:#e74c3c; margin:20px 0;">NO.</div>
|
|||
|
|
<ul class="clean">
|
|||
|
|
<li class="fragment fade-up" style="font-size:0.78em;">Even senior engineers miss things under time pressure</li>
|
|||
|
|
<li class="fragment fade-up" style="font-size:0.78em;">AI confidently writes <em>wrong</em> code — the confidence is the bug</li>
|
|||
|
|
<li class="fragment fade-up" style="font-size:0.78em; color:#42b883; font-weight:bold;">The diff is your last line of defense 🛡️</li>
|
|||
|
|
</ul>
|
|||
|
|
<aside class="notes">
|
|||
|
|
The model doesn't know it's wrong. It sounds sure. That confident tone is exactly what makes it dangerous in review.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</section><!-- /section 6 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION 7: WISE STRATEGY (vertical group)
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
|
|||
|
|
<!-- 6a — Section opener -->
|
|||
|
|
<section
|
|||
|
|
class="section-opener"
|
|||
|
|
data-background-gradient="linear-gradient(135deg, #0d2137, #0a4a3a)"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text">A WISE<br>STRATEGY</h1>
|
|||
|
|
<aside class="notes">
|
|||
|
|
So what does a responsible, productive approach look like? Let's look at what the best open-source maintainers are already doing.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 6b — Open Source Maintainers -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<h3>Learn from Open Source Maintainers</h3>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🔍 <strong>Add friction to PR review</strong> — slow down intake, not speed up merges
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🔗 <strong>Always link to the AI conversation</strong> in the PR description
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
📋 <strong>No more breadcrumbs</strong> — full context required, or no merge
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Projects like Ruby on Rails, Homebrew, and others are already setting policy: if you used AI to write the code, you must link the conversation. This preserves the decision trail.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 6c — The Review Contract -->
|
|||
|
|
<section>
|
|||
|
|
<h3>The Review Contract</h3>
|
|||
|
|
<div class="review-step fragment fade-up">
|
|||
|
|
You wrote it with AI?
|
|||
|
|
</div>
|
|||
|
|
<div class="review-step fragment fade-up" style="color:#f0c040;">
|
|||
|
|
Then <strong>YOU</strong> are responsible for it.
|
|||
|
|
</div>
|
|||
|
|
<div class="review-step fragment fade-up" style="color:#e74c3c; font-weight:bold;">
|
|||
|
|
Not the AI. <strong>YOU.</strong>
|
|||
|
|
</div>
|
|||
|
|
<div class="fragment" style="font-size:4em; margin-top:16px;">🫵</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
This is non-negotiable. The AI is a tool. The engineer who commits the code owns the code. Full stop.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</section><!-- /section 7 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION 8: MY ADVICE (vertical group)
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
|
|||
|
|
<!-- 7a — Section opener -->
|
|||
|
|
<section
|
|||
|
|
class="section-opener"
|
|||
|
|
data-background-gradient="linear-gradient(135deg, #1a0d2e, #2d1b4e)"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text">MY ADVICE</h1>
|
|||
|
|
<p style="font-size:0.75em; color:#b0a0d0; margin-top:12px;">
|
|||
|
|
(completely unrequested)
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Nobody asked but here we are. A few things I genuinely believe will help you and your team.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 7b — Stop Sloppypasta -->
|
|||
|
|
<section>
|
|||
|
|
<h3>New tools, new manners</h3>
|
|||
|
|
<div style="font-size:2.4em; margin:20px 0;">🍝 Stop Sloppypasta</div>
|
|||
|
|
<div class="tip-card">
|
|||
|
|
<a href="https://stopsloppypasta.ai/en/" target="_blank" style="color:#42b883;">stopsloppypasta.ai</a>
|
|||
|
|
— think before you paste AI-generated code
|
|||
|
|
</div>
|
|||
|
|
<p style="font-size:0.6em; opacity:0.6; margin-top:20px;">
|
|||
|
|
New capabilities → new professional norms. The industry hasn't caught up yet. You can lead.
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Stop Sloppypasta is a movement around thoughtful AI usage in code. The name is funny but the point is serious: don't just accept and paste without thought.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 7c — AI & skill formation paper -->
|
|||
|
|
<section
|
|||
|
|
data-background-image="./assets/arxiv-skill-formation.png"
|
|||
|
|
data-background-size="contain"
|
|||
|
|
data-background-position="top"
|
|||
|
|
style="height: 100%;"
|
|||
|
|
>
|
|||
|
|
<div style="
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: rgba(0,0,0,0.72);
|
|||
|
|
backdrop-filter: blur(6px);
|
|||
|
|
padding: 5px 16px;
|
|||
|
|
font-size: 0.38em;
|
|||
|
|
color: #aaa;
|
|||
|
|
text-align: center;
|
|||
|
|
pointer-events: none;
|
|||
|
|
">
|
|||
|
|
📄 Shen & Tamkin — "How AI Impacts Skill Formation" · arxiv.org/abs/2601.20245 · AI use impairs conceptual understanding without delivering efficiency gains
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Randomized experiment: developers learning a new programming library. AI use impaired conceptual understanding, code reading, and debugging — without significant efficiency gains. The HOW matters: 3 out of 6 interaction patterns preserved learning. Efficiency ≠ competence.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 7d — Keep coding -->
|
|||
|
|
<section>
|
|||
|
|
<h3>Your coding skills still matter</h3>
|
|||
|
|
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🏋️ <strong>Exercise them</strong> — build pet projects just for the joy of it
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 7e — tsoding channel -->
|
|||
|
|
<section
|
|||
|
|
data-background-image="./assets/tsoding-yt.png"
|
|||
|
|
data-background-size="contain"
|
|||
|
|
data-background-position="top"
|
|||
|
|
style="height: 100%;"
|
|||
|
|
>
|
|||
|
|
<div style="
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0; left: 0; right: 0;
|
|||
|
|
background: rgba(0,0,0,0.72);
|
|||
|
|
backdrop-filter: blur(6px);
|
|||
|
|
padding: 5px 16px;
|
|||
|
|
font-size: 0.38em;
|
|||
|
|
color: #aaa;
|
|||
|
|
text-align: center;
|
|||
|
|
pointer-events: none;
|
|||
|
|
">
|
|||
|
|
📺 youtube.com/@TsodingDaily — raw, educational, zero-AI coding streams (C, Rust, Go, and more)
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Tsoding (Alexey Kutepov) live-codes real projects from scratch — compilers, game engines, tools — with no AI assistance. Pure fundamentals, highly entertaining, deeply instructive.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 7f — The Coding Train channel -->
|
|||
|
|
<section
|
|||
|
|
data-background-image="./assets/codingtrain-yt.png"
|
|||
|
|
data-background-size="contain"
|
|||
|
|
data-background-position="top"
|
|||
|
|
style="height: 100%;"
|
|||
|
|
>
|
|||
|
|
<div style="
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0; left: 0; right: 0;
|
|||
|
|
background: rgba(0,0,0,0.72);
|
|||
|
|
backdrop-filter: blur(6px);
|
|||
|
|
padding: 5px 16px;
|
|||
|
|
font-size: 0.38em;
|
|||
|
|
color: #aaa;
|
|||
|
|
text-align: center;
|
|||
|
|
pointer-events: none;
|
|||
|
|
">
|
|||
|
|
📺 youtube.com/@TheCodingTrain — creative coding with p5.js, Daniel Shiffman (1.76M subscribers)
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Daniel Shiffman teaches creative coding — algorithms, simulations, generative art — with infectious enthusiasm. Great for rediscovering the joy of programming from first principles.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 7g — Keep coding (continued) -->
|
|||
|
|
<section>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🤖 <strong>Use AI for exploration</strong> — not as a substitute for understanding
|
|||
|
|
</div>
|
|||
|
|
<p class="fragment small-note" style="margin-top:16px;">
|
|||
|
|
Prediction: in the coming years, many will try to do engineering without engineering knowledge. That gap will be visible. Your fundamentals are your moat.
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
The ability to read, write, and reason about code is more valuable now than many think — precisely because it's becoming rarer. It's a superpower when combined with AI tools.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════
|
|||
|
|
SECTION: NEXT LEARNING STEPS (vertical group)
|
|||
|
|
═══════════════════════════════════════════════ -->
|
|||
|
|
</section><!-- /advice vertical group -->
|
|||
|
|
</section><!-- /outer section -->
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
|
|||
|
|
<!-- NLS-a — Section opener -->
|
|||
|
|
<section
|
|||
|
|
class="section-opener"
|
|||
|
|
data-background-gradient="linear-gradient(135deg, #0a1f3c 0%, #0d3b2e 100%)"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text">WHAT'S NEXT?</h1>
|
|||
|
|
<p class="fragment" style="font-size:0.75em; color:#42b883; margin-top:12px;">
|
|||
|
|
Going deeper: AI features, local inference & model training
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Now that we've covered the coding-agent layer, let's look one level deeper — how do you actually integrate AI into your own apps, run it locally, and eventually train your own models?
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- NLS-b — Adding AI to your app -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<p><span class="phase-badge">LEVEL 1</span></p>
|
|||
|
|
<h3>Adding AI features to your app</h3>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
☁️ <strong>Hosted APIs</strong> — Anthropic, OpenAI, Gemini — drop-in inference, no infra
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🔀 <strong>HuggingFace Inference API</strong> — proxy to hundreds of open-weight models, same REST interface
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🧩 <strong>Patterns:</strong> chat completion · embeddings · structured output · tool use
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
⚠️ You are now responsible for <strong>prompt injection</strong>, <strong>data leakage</strong> and <strong>cost runaway</strong>
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
The entry point for most developers. Pick a hosted provider, grab an SDK, start with a chat completion. The hard part isn't calling the API — it's building the guardrails around it.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- NLS-c — Local inference -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<p><span class="phase-badge">LEVEL 2</span></p>
|
|||
|
|
<h3>Local inference</h3>
|
|||
|
|
<div style="display:flex; gap:16px; margin: 18px 0; font-size:0.72em;">
|
|||
|
|
<div class="tip-card" style="flex:1;">
|
|||
|
|
🦙 <strong>Ollama</strong><br>
|
|||
|
|
<span style="opacity:0.8">Run Llama, Mistral, Gemma locally — one command</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card" style="flex:1;">
|
|||
|
|
⚡ <strong>llama.cpp</strong><br>
|
|||
|
|
<span style="opacity:0.8">CPU inference, quantised GGUF models, minimal deps</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card" style="flex:1;">
|
|||
|
|
🤗 <strong>HF Transformers</strong><br>
|
|||
|
|
<span style="opacity:0.8">Python, full control, GPU/MPS acceleration</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🔒 <strong>Why bother?</strong> — data stays on-device, zero cost per token, works offline
|
|||
|
|
</div>
|
|||
|
|
<div class="problem-card fragment fade-up">
|
|||
|
|
⚠️ Hardware matters — a 70B model needs ~40 GB VRAM. Start with 7B–8B quantised.
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Local inference is now surprisingly accessible. Ollama is the easiest on-ramp — one brew install, one command to pull a model. HuggingFace Transformers gives you full Python control for more advanced use cases.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- NLS-d — RAG -->
|
|||
|
|
<section data-auto-animate data-background-color="#0d1a0d">
|
|||
|
|
<p><span class="phase-badge">LEVEL 3</span></p>
|
|||
|
|
<h3>RAG — Retrieval-Augmented Generation</h3>
|
|||
|
|
<div style="font-size:0.68em; margin: 14px 0; display:flex; gap:10px; align-items:center; justify-content:center;">
|
|||
|
|
<div style="background:#1a2e1a; border:1px solid #42b883; border-radius:8px; padding:10px 16px;">📄 Your docs</div>
|
|||
|
|
<div style="color:#42b883; font-size:1.4em;">→</div>
|
|||
|
|
<div style="background:#1a2e1a; border:1px solid #42b883; border-radius:8px; padding:10px 16px;">✂️ Chunk & embed</div>
|
|||
|
|
<div style="color:#42b883; font-size:1.4em;">→</div>
|
|||
|
|
<div style="background:#1a2e1a; border:1px solid #42b883; border-radius:8px; padding:10px 16px;">🗄️ Vector store</div>
|
|||
|
|
<div style="color:#42b883; font-size:1.4em;">→</div>
|
|||
|
|
<div style="background:#1a2e1a; border:1px solid #42b883; border-radius:8px; padding:10px 16px;">🔍 Retrieve</div>
|
|||
|
|
<div style="color:#42b883; font-size:1.4em;">→</div>
|
|||
|
|
<div style="background:#1a2e1a; border:1px solid #42b883; border-radius:8px; padding:10px 16px;">🤖 LLM</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🧠 Gives the model <strong>your private knowledge</strong> without fine-tuning
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🛠️ Stack: <strong>LangChain / LlamaIndex</strong> · <strong>ChromaDB / pgvector / Qdrant</strong>
|
|||
|
|
</div>
|
|||
|
|
<div class="fragment" style="font-size:0.6em; color:#42b883; margin-top:10px; font-style:italic;">
|
|||
|
|
→ Currently experimenting with this 🧪
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
RAG is the practical answer to "how do I give the model knowledge of my codebase / docs / database?" without the cost and complexity of fine-tuning. Chunk your data, embed it, store vectors, retrieve at query time.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- NLS-e — Training open-weight models -->
|
|||
|
|
<section data-auto-animate>
|
|||
|
|
<p><span class="phase-badge warning">LEVEL 4</span></p>
|
|||
|
|
<h3>Training an open-weight model</h3>
|
|||
|
|
<div style="display:flex; gap:14px; margin: 16px 0; font-size:0.68em;">
|
|||
|
|
<div class="tip-card" style="flex:1;">
|
|||
|
|
🎯 <strong>Fine-tuning</strong><br>LoRA / QLoRA — adapt a base model on your task with minimal GPU
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card" style="flex:1;">
|
|||
|
|
📊 <strong>Datasets</strong><br>HuggingFace Datasets — thousands of ready-to-use training sets
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card" style="flex:1;">
|
|||
|
|
🚂 <strong>Training</strong><br>HF Transformers + PEFT · Unsloth for fast LoRA
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card fragment fade-up">
|
|||
|
|
🤗 <strong>HuggingFace</strong> — one-stop shop: models · datasets · papers · inference API · model hub
|
|||
|
|
</div>
|
|||
|
|
<div class="fragment" style="font-size:0.6em; color:#42b883; margin-top:10px; font-style:italic;">
|
|||
|
|
→ Currently experimenting with local training + inference 🧪
|
|||
|
|
</div>
|
|||
|
|
<aside class="notes">
|
|||
|
|
You don't need to train from scratch. LoRA lets you fine-tune a 7B model on a consumer GPU in hours. HuggingFace is the center of gravity for the open-weight ecosystem — models, datasets, papers (via ArXiv integration), and inference all in one place.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- NLS-f — HuggingFace -->
|
|||
|
|
<section data-auto-animate data-background-color="#0d0d1a">
|
|||
|
|
<h3 style="margin-bottom:18px;">🤗 HuggingFace as your AI platform</h3>
|
|||
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px; font-size:0.65em;">
|
|||
|
|
<div class="tip-card">
|
|||
|
|
🏗️ <strong>Model Hub</strong><br>500,000+ open-weight models, filterable by task, size, license
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card">
|
|||
|
|
📦 <strong>Datasets</strong><br>Curated training data for every domain — ready to fine-tune on
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card">
|
|||
|
|
📄 <strong>Papers</strong><br>Daily ML papers with linked code & models — stay on the frontier
|
|||
|
|
</div>
|
|||
|
|
<div class="tip-card">
|
|||
|
|
⚡ <strong>Inference Providers</strong><br>Proxy to hosted open models — same API, swap models freely
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="fragment" style="font-size:0.58em; color:#42b883; margin-top:16px;">
|
|||
|
|
huggingface.co — the GitHub of AI models
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
Think of HuggingFace as the npm registry + GitHub + ArXiv for AI. The inference provider proxy is particularly useful: one API key, access to Llama, Mistral, Falcon and more — no individual provider accounts needed.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</section><!-- /next learning steps -->
|
|||
|
|
|
|||
|
|
<section><!-- re-open advice vertical group for closing slide -->
|
|||
|
|
|
|||
|
|
<!-- 7d — Closing -->
|
|||
|
|
<section
|
|||
|
|
data-background-gradient="linear-gradient(135deg, #0d0d0d, #1a1a2e)"
|
|||
|
|
>
|
|||
|
|
<h1 class="r-fit-text" style="color:#42b883;">EXPERIMENT.</h1>
|
|||
|
|
<h1 class="r-fit-text fragment" style="color:#f0c040;">REVIEW.</h1>
|
|||
|
|
<h1 class="r-fit-text fragment" style="color:#e8e8e8;">UNDERSTAND.</h1>
|
|||
|
|
<p class="fragment" style="font-size:0.65em; opacity:0.7; margin-top:20px;">
|
|||
|
|
In that order. 😉
|
|||
|
|
</p>
|
|||
|
|
<aside class="notes">
|
|||
|
|
That's the message. Experiment boldly. Review rigorously. Never ship what you don't understand. Thank you.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</section><!-- /section 8 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div><!-- /.slides -->
|
|||
|
|
</div><!-- /.reveal -->
|
|||
|
|
|
|||
|
|
<script type="module" src="/main.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|