feat: add networking memes to intro, demo, DHCP, TCP handshake, and recap slides

Author: YoyoJesus

static/img/meme-dhcp-reservation.jpg

@@ -286,6 +286,21 @@ a { color: #a0e8c8; text-underline-offset: 4px; }
 .photo img { display: block; width: 100%; height: clamp(100px, 22vh, 240px); object-fit: contain; background: #0a1520; }
 .photo figcaption { padding: 4px 10px; font-size: 0.5em; color: #b6c8d2; border-bottom: 1px solid var(--border); }
 .photo figcaption a { color: #b6c8d2; }
+.meme { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
+.meme img { display: block; height: clamp(90px, 20vh, 220px); width: auto; max-width: 100%; border: 1px solid var(--border); }
+.meme figcaption { font-size: 0.5em; }
+.title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
+.title-row .meme img { height: clamp(90px, 34vh, 340px); }
+.with-meme { display: flex; gap: 12px; flex: 1; min-height: 0; }
+.with-meme .three-col { flex: 1; }
+.with-meme > ul { flex: 1; }
+.with-meme > .stack { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.stack + .meme img { height: clamp(120px, 40vh, 380px); }
+.network-path + .meme img { height: clamp(110px, 25vh, 260px); }
+.with-meme > ul + .meme img { height: clamp(110px, 28vh, 280px); }
+.with-meme .meme img { height: clamp(140px, 48vh, 460px); }
+@media (max-width: 900px) { .with-meme { flex-direction: column; flex: none; } .with-meme .three-col { flex: none; } .with-meme .meme img { height: 30vh; } }
+.meme figcaption a { color: #b6c8d2; }
 
 @media (max-width: 1000px) {
   html { font-size: 20px; }

static/img/meme-dont-touch.jpg

@@ -230,7 +230,7 @@ <h3>Cleanup</h3>
 <section class="slide-note"><div class="num"><span>Slide 16</span><span>20:00-23:00</span></div><h2>IPv6: the same job, more space</h2><ul><li>The 2001:db8:: example is reserved for documentation. Show hexadecimal groups and compressed zeros briefly.</li><li>IPv6 link-local addresses use fe80::/10. Neighbor Discovery uses ICMPv6 for functions including neighbor and router discovery.</li><li>IPv6 is not automatic encryption. Do not promise that the travel router or any upstream supports global IPv6.</li><li>Expand 2001:db8::10 to 2001:db8:0:0:0:0:0:10. Double colon compresses a run of zero groups and may appear only once in an address. The larger space changes notation and address management, not the need for local delivery and routes.</li><li>Contrast Neighbor Discovery using ICMPv6 with IPv4 ARP. Link-local addresses support local communication but do not establish global reachability. Keep subnet arithmetic and the full IPv6 configuration process for follow-up questions.</li></ul></section>
 <section class="slide-note"><div class="num"><span>Slide 17</span><span>23:00-24:00</span></div><h2>TCP and UDP</h2><ul><li>TCP delivers an ordered byte stream, not application messages. One socket write can be split across multiple reads, or multiple writes can be combined. Applications often add length prefixes, delimiters, or a protocol parser.</li><li>UDP preserves individual datagrams but does not supply automatic retransmission or ordering. The application decides whether and how to recover from loss. Neither transport inherently encrypts data, and neither makes every application faster.</li><li>For TCP, missing bytes can delay delivery of later bytes in the same stream while recovery occurs. That is useful for completeness but a tradeoff when freshness matters. Introduce the next slide as a requirements choice, not a vendor or performance ranking.</li></ul></section>
 <section class="slide-note"><div class="num"><span>Slide 18</span><span>24:00-25:00</span></div><h2>When does TCP or UDP make sense?</h2><ul><li>Choose based on the application requirements. TCP is useful when a reliable ordered stream is the desired interface, such as SSH or many database/file-transfer protocols. The application still needs its own message boundaries and error handling.</li><li>For interactive voice or game-state updates, a late update may be less useful than a newer one. UDP lets the application or higher protocol decide which data to retry, discard, or reorder. UDP itself does not promise low latency, and applications still need congestion control and a loss strategy.</li><li>These are examples, not universal rules. Classic DNS supports UDP and TCP. HTTP/3 uses QUIC over UDP, and QUIC supplies reliability and other transport behavior above UDP. A reliable UDP-based protocol is not a contradiction. Sources: RFC 8085, RFC 1035, and RFC 9114.</li></ul></section>
-<section class="slide-note"><div class="num"><span>Slide 19</span><span>25:00-26:00</span></div><h2>TCP: establish, acknowledge, recover</h2><ul><li>Walk the SYN, SYN+ACK, ACK exchange in order. Both sides synchronize sequence-number state before the usual application-data exchange. The diagram omits optional extensions and simultaneous open.</li><li>Sequence numbers track bytes. Acknowledgments report progress, and loss can trigger retransmission. Flow control protects receiver capacity; congestion control responds to network capacity. Neither makes a failed connection impossible.</li><li>IP addresses plus ports distinguish connections. TCP does not supply encryption or application success; HTTPS adds TLS, while HTTP/3 uses QUIC over UDP.</li></ul></section>
+<section class="slide-note"><div class="num"><span>Slide 19</span><span>25:00-26:00</span></div><h2>TCP: establish, acknowledge, recover</h2><ul><li>Walk the SYN, SYN+ACK, ACK exchange in order. Both sides synchronize sequence-number state before the usual application-data exchange. The diagram omits optional extensions and simultaneous open.</li><li>Sequence numbers track bytes. Acknowledgments report progress, and loss can trigger retransmission. Flow control protects receiver capacity; congestion control responds to network capacity. Neither makes a failed connection impossible.</li><li>IP addresses plus ports distinguish connections. TCP does not supply encryption or application success; HTTPS adds TLS, while HTTP/3 uses QUIC over UDP.</li><li>Meme: a SYN answered with RST instead of SYN+ACK. That reset is the normal reply when nothing is listening on the target port, so the connection is refused immediately rather than timing out.</li></ul></section>
 <section class="slide-note"><div class="num"><span>Slide 20</span><span>26:00-27:30</span></div><h2>DHCP: how a host gets its settings</h2><ul><li>Discover, Offer, Request, ACK is the common initial DHCPv4 exchange. A client starting without a lease can broadcast to find a server. The server supplies a lease and configuration options.</li><li>Leases expire and can be renewed; renewal does not always repeat all four initial messages. The router advertised by DHCP and the DNS resolver are different settings, even when one physical box performs both roles.</li><li>Connect this to the demo: the isolated Ethernet hosts use static settings, while the GL.iNet can supply automatic settings. A successful lease proves neither internet reachability nor working DNS. IPv6 uses different configuration mechanisms.</li></ul></section>
 <section class="slide-note"><div class="num"><span>Slide 21</span><span>27:30-30:00</span></div><h2>DNS: a name is not a route</h2><ul><li>An application asks for a name. A local cache or configured recursive resolver can supply an answer; on a cache miss, a recursive resolver can consult other DNS servers. A and AAAA records provide IPv4 and IPv6 addresses.</li><li>DNS records can be reused while cached according to their TTL. A hostname can have multiple addresses. DNS does not choose the host’s Ethernet next hop or establish an application connection.</li><li>Walk the full story: obtain settings, resolve the name, choose a route, resolve the local next hop, then attempt the transport and application exchange. Those stages can fail independently. DNS is not limited to UDP, and an address response alone does not prove a website works.</li></ul></section>
 <section class="slide-note"><div class="num"><span>Slide 22</span><span>30:00-32:00</span></div><h2>DSL and cable</h2><ul><li>Do not attach universal speed numbers to these technologies. Actual service depends on equipment, deployment, plan, and conditions.</li><li>The modem handles access signaling; routing is a separate function even when one box combines both.</li><li>The access medium is only one part of the path. Explain the distinction between a modem terminating access signaling and a router forwarding IP, even when the functions share a box. Neither technology replaces Ethernet/Wi-Fi inside the local network.</li></ul></section>

static/img/meme-eth0.jpg

@@ -2,8 +2,8 @@
   <header class="slide-header"><span class="tag">HacKSU Workshop</span><span class="timing">00:00-01:00</span><img src="static/HacKSU.png" alt="HacKSU"></header>
   <div class="slide-body"><h2 id="title-1" class="sr-only">Basic Networking</h2>
 
-<h1>Basic<br>Networking<span class="cursor"></span></h1>
-<p class="subtitle">What happens when your laptop sends data?</p>
+<div class="title-row"><div><h1>Basic<br>Networking<span class="cursor"></span></h1>
+<p class="subtitle">What happens when your laptop sends data?</p></div><figure class="meme"><img src="static/img/meme-dont-touch.jpg" alt="Meme: a dusty D-Link switch buried in cobwebs and tangled cables, captioned If it works, don't touch it." loading="lazy"><figcaption><a href="https://www.reddit.com/r/networkingmemes/comments/1ic7k8c/">u/auvikofficial, r/networkingmemes</a></figcaption></figure></div>
 <div class="network-path"><div class="network-node">Your laptop</div><span class="path-arrow" aria-hidden="true">→</span><div class="network-node">Local network</div><span class="path-arrow" aria-hidden="true">→</span><div class="network-node">Internet</div></div><div class="info-bar">HacKSU · Slides + hardware · About one hour</div>
   </div>
 </section>

static/img/meme-loud-switch.jpg

@@ -1,6 +1,6 @@
 <section class="slide" id="slide-2" aria-labelledby="title-2">
   <header class="slide-header"><span class="tag">Basics</span><span class="timing">01:00-02:00</span><img src="static/HacKSU.png" alt="HacKSU"></header>
   <div class="slide-body"><h2 id="title-2">Start with the equipment</h2>
-<div class="three-col"><div class="box"><h3>Catalyst 3560</h3><p>48 × 10/100 PoE ports.<br>4 SFP slots, no modules.</p></div><div class="box"><h3>TP-Link switch</h3><p>5-port Gigabit desktop switch.<br>Extend the wired network.</p></div><div class="box"><h3>GL.iNet AC1200</h3><p>Wireless travel router.<br>Show DHCP and a default gateway.</p></div></div><div class="info-bar">PoE powers compatible devices over Ethernet. All Catalyst demo links use copper Fast Ethernet ports.</div>
+<div class="with-meme"><div class="three-col"><div class="box"><h3>Catalyst 3560</h3><p>48 × 10/100 PoE ports.<br>4 SFP slots, no modules.</p></div><div class="box"><h3>TP-Link switch</h3><p>5-port Gigabit desktop switch.<br>Extend the wired network.</p></div><div class="box"><h3>GL.iNet AC1200</h3><p>Wireless travel router.<br>Show DHCP and a default gateway.</p></div></div><figure class="meme"><img src="static/img/meme-loud-switch.jpg" alt="Meme: a quiet gaming PC, a whirring old PC, and a chassis switch labeled with endless jet engine noise." loading="lazy"><figcaption><a href="https://www.reddit.com/r/networkingmemes/comments/1j55hof/">u/MemeLordAscendant, r/networkingmemes</a></figcaption></figure></div><div class="info-bar">PoE powers compatible devices over Ethernet. All Catalyst demo links use copper Fast Ethernet ports.</div>
   </div>
 </section>