Little bobby HTML-bles lol

Author: davepeck

assets/img/bobby-tables-from-xkcd-by-randall-munroe.png

@@ -148,7 +148,10 @@ str(t"Please be a string!")
 # Processing templates
 
 <div v-click>
-<p>Given a <code>Template</code>, you can write or call <strong>custom code</strong> to:</p>
+<p>Templates are <strong>normal</strong> Python objects</p>
+</div>
+<div v-click>
+<p>You can write or call code to:</p>
 </div>
 <div v-click>
 <p>&ndash; Turn them into a <code>str</code></p>
@@ -188,9 +191,56 @@ image: /assets/img/f-strings-dangerous.png
 backgroundSize: contain
 ---
 
-# F-strings get **misused**:
+# F-strings are frequently **misused**:
 
 &ndash; Injection vulns
 
+---
+layout: image
+image: /assets/img/bobby-tables-from-xkcd-by-randall-munroe.png
+backgroundSize: contain
+---
+
+<div class="bottom-out"><center><p>(with apologies to randall munroe)</p></center></div>
+
+---
 
+# Bobby Tables
 
+<div class="smaller">
+````md magic-move
+```python314
+def get_user(name):
+	# Here be dragons
+	return f"SELECT * FROM users WHERE name = '{name}'"
+```
+```python314
+def get_user_query(name):
+	# Here be dragons
+	return f"SELECT * FROM users WHERE name = '{name}'"
+
+get_user_query("Robert'); DROP TABLE Students;--")
+```
+````
+</div>
+
+---
+
+# Bobby HTML-bles
+
+<div class="smaller">
+````md magic-move
+```python314
+def render_user(name):
+	# Here be dragons
+	return f"<div class='user'>{name}</div>"
+```
+```python314
+def render_user(name):
+	# Here be dragons
+	return f"<div class='user'>{name}</div>"
+
+render_user("<script>alert('Owned!')</script>")
+```
+````
+</div>

slides.md

@@ -23,6 +23,10 @@ strong {
 	margin-bottom: 0.25em;
 }
 
+.smaller .shiki {
+	font-size: 1.5em !important;
+}
+
 @font-face {
 	font-family: "apex-predator";
 	src: url("./fonts/ap-400.woff2") format("woff2"), url("./fonts/ap-400.woff") format("woff"),
@@ -107,6 +111,18 @@ strong {
 		opacity: 0.75;
 	}
 
+	.bottom-out {
+		font-size: 0.5em;
+		position: absolute;
+		display: flex;
+		width: 100%;
+		padding-right: 6.5em;
+		/* i literally have no idea why 6.5em works but let's move on */
+		align-content: center;
+		justify-content: center;
+		bottom: 0;
+	}
+
 	li,
 	ol {
 		font-size: 2.666em;