index.html

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>Learning to code in the Age of AI</title>

	<link rel="stylesheet" href="dist/reset.css">
	<link rel="stylesheet" href="dist/reveal.css">
	<link rel="stylesheet" href="dist/theme/black.css">

	<!-- Theme used for syntax highlighted code -->
	<link rel="stylesheet" href="plugin/highlight/monokai.css">

	<!-- Umuzi theme things -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
	<link rel="stylesheet" href="umuzi-branding/theme.css" />
</head>

<body>
	<div
		style="position: absolute; bottom:0.5em; font-size:2em ; text-align: left; width: 100%; color: lightgray; padding-left: 0.5em;">


		@sheena@fosstodon.org | https://sheenaoc.com
		<!-- <img src="images/qr2.png" height="500em"/> -->
	</div>
	<div class="reveal">
		<div class="slides">
			<section>
				<h2>Links</h2>
				<ul>
					<li><a href="https://sheenaoc.com">Sheena's blog</a></li>
					<li><a href="https://fosstodon.org/@sheena">Mastodon: @sheena@fosstodon.org</a></li>
					<li><a href="https://twitter.com/sheena_oconnell">X/Twitter: @sheena_oconnell</a></li>

					<li><a href="https://www.coursera.org/articles/illusion-of-competence">Illusions of competence -
							don't fool yourself</a></li>
					<li><a href="https://www.sheenaoc.com/articles/2024-03-04-protege-effect">Protege effect - why
							teaching is a great way to learn</a></li>
				</ul>
				To navigate this slide deck:
				Use cursor keys or click on arrows on bottom right.
				Use Esc key to toggle overview

			</section>

			<section>
				<h1>Learning to code in the age of AI</h1>
			</section>
			<section>

				<h2>
					Hi, I'm <a href="https://www.linkedin.com/in/sheena-o-connell-0bb72527/"> Sheena </a>
				</h2>

				<table>
					<tr>
						<td style="vertical-align: top">
							<ul>
								<li class="fragment">
									Product dev & tech enablement lead <a href="http://umuzi.org/">Umuzi</a>
								</li>
								<li class="fragment">I build effective + efficient remote education systems
									<span class="fragment">== dev + syllabus + ux + ped/andr/heutagogy</span>
								</li>
								<!-- <li class="fragment">Learned to code around 20 years ago 🍌</li> -->
								<li class="fragment">Python is my love language 💚</li>

							</ul>
						</td>
						<td width="350" style="vertical-align: middle">
							<img src="images/Me no background.png" class="avitar" width="350" />
							<span class="fragment">🧗‍♀️🏕️🧭🇿🇦🖊️🛠️🔥</span>
						</td>
					</tr>
				</table>
			</section>

			<section>
				<h2>Umuzi's Purpose</h2>
				<h3>Reduce social inequality through education</h3>
			</section>

			<section>
				<h2>Figure out what skills are future-proof</h2>
			</section>

			<section>
				<h2>AI is making waves</h2>
				<ul>
					<li class="fragment">I personally use LLMs while coding</li>
					<li class="fragment">LLMs can be very useful in education</li>
					<li class="fragment">The biggest foot-gun around for software dev learners</li>
				</ul>
			</section>

			<section>

				<section>
					<h2>What is software development?</h2>
				</section>

				<section>
					<h2>A software developer's job is to...</h2>
					<div class="fragment">

						<h2>Write lines of code?</h2>
					</div>
				</section>

				<section>
					<h2>A software developer's job is to...</h2>
					<div class="fragment">

						<h2>Solve problems!</h2>
						Using code
					</div>
				</section>

				<section>
					<h2>A software developer's job is to...</h2>
					<h2>Figure out what the problem even is</h2>
				</section>

				<section>
					<h2>Like this?</h2>
					<img src="images/idea to code straight.drawio.svg" style="background-color: white; padding: 0.5em;"
						height="400" /><br />
					Translate the specification into code
				</section>

				<section>
					<h2>We start with a problem or idea...</h2>
				</section>

				<section>
					<h3>Full of assumptions about...</h3>

					<ul>
						<li class="fragment">the world</li>
						<li class="fragment">what is possible with current technology</li>
						<li class="fragment">shared understanding</li>
					</ul>

				</section>

				<section>
					<h3>Communicated imprecisely...</h3>
					<img src="images/imprecise communication.webp" height="400" /> <br>
					Pictures, flow charts, research artifacts, conversations, wire-frames, documentation, text...
				</section>

				<section>
					<h2>The most precise way to describe how an application works is...</h2>
					<h2 class="fragment">code</h2>
				</section>

				<section>
					<h2><s>Like this?</s></h2>
					<img src="images/idea to code straight.drawio.svg" style="background-color: white; padding: 0.5em;"
						height="400" /><br />
					Translate the specification into code
				</section>


				<section>
					<h3>The process</h3>
					<ul>
						<li>Follow up questions</li>
						<li>Push-back</li>
						<li>Tradeoffs</li>
						<li>Suggestions</li>
						<li>Inspiration</li>
						<li>Empathy for the user</li>
						<li>Solution architecture</li>
						<li>Selecting the right tools</li>
						<li>Validation of solution</li>
					</ul>
				</section>
				<section>
					<h2>Like this</h2>
					<img src="images/idea to code messy.drawio.svg" style="background-color: white; padding: 0.5em;"
						height="400" />
					Collaborative, iterative, exploratory process
				</section>

				<!-- <section>
					<h3>Solving problems</h3>

					<code><pre lass="hljs python">
			while True:
					find the next problem we need to solve
					solve the problem
					write it down
						</pre></code>
				</section> -->

				<section>
					<h3>Watch this...later</h3>

					<iframe width="560" height="315" src="https://www.youtube.com/embed/AS2m2rRn9Cw?si=RemyiNBlNf_7i90d"
						title="YouTube video player" frameborder="0"
						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
						allowfullscreen></iframe>
					<br />
					Dave Farley - Developer Jobs AREN'T What You Think They Are

				</section>

			</section>

			<section>
				<section>

					<h2>Evolution of code...</h2>


				</section>

				<section>
					<h2>Punch cards</h2>
					<img src="images/punch-cards.png" height="400" />
				</section>

				<section>
					<h2>Time passes... abstraction happens</h2>
				</section>

				<section>
					<h2>What is abstraction?</h2>
					<img src="images/car blueprint.webp" height="400" />
				</section>

				<section>
					<h2>C and C++ era languages</h2>
					<img src="images/C era languages.webp" height="400" />

				</section>

				<section>
					<h2>Python era languages</h2>
					<img src="images/python.webp" height="400" />
				</section>
				<section>
					As time continues, we move further from the machine. Programming languages become more "human".
				</section>

				<section>
					Reasonable to assume that languages will
					<ul>
						<li class="fragment">Keep evolving</li>
						<li class="fragment">Become even more "human"</li>
					</ul>
				</section>

			</section>

			<!-- <section> -->
			<!-- <section>

					<h2>If the language changes, what will stay the same?</h2>
				</section> -->

			<!-- <section>
					<h2>Software developers now</h2>
					<ul>
						<li>Solve problems</li>
						<li>Tell machines what to do</li>
					</ul>
				</section>

				<section>
					<h2>Future software developers</h2>
					<ul class="fragment">
						<li>Solve problems</li>
						<li>Tell machines what to do</li>
					</ul>
				</section> -->
			<!-- </section> -->

			<section>
				<section>
					<h2>How might the language change?</h2>
				</section>
				<section>
					<h2>Human languages</h2>
					Inaccurate! Imprecise! Confusing!
				</section>

				<section>
					<h2>Punctuation</h2>
					<pre data-id="code-animation"><code class="hljs, javascript" data-trim data-line-numbers>
							"The koala eats shoots and leaves"
							"The koala eats, shoots and leaves"
						</code></pre>

				</section>

				<section>
					<h2>Punctuation</h2>
					<pre data-id="code-animation"><code class="hljs, javascript" data-trim data-line-numbers>
							"She ran away from the fire, in her pajamas"
							"She ran away from the fire in her pajamas"
										</code></pre>

				</section>


				<section>
					<h2>Common mistakes</h2>
					<pre data-id="code-animation"><code class="hljs, javascript" data-trim data-line-numbers>
							"There, their"
							"Too, to"
							"It's, its"
						</code></pre>
				</section>

				<section>
					<h2>Misuses</h2>
					<pre data-id="code-animation"><code class="hljs, javascript" data-trim data-line-numbers>
							"Borrow versus lend"
							"Literally == figuratively"
						</code></pre>
				</section>

				<section>
					<h2>Staying hip with the times</h2>

					<pre data-id="code-animation"><code class="hljs, javascript" data-trim data-line-numbers>
							Lit 
							Kiff
							Drip 
							Cool 
							Cheddar 
							Goat
							DRY 
							Lol
						</code></pre>

				</section>

				<section>
					<h2>US CONSTITUTION, ARTICLE IV, SECTION 3 </h2>
					<a href="https://www.pushkin.fm/podcasts/revisionist-history/divide-and-conquer">Revisionist
						history</a>
					<h2>;</h2>
				</section>


				<section>
					<h2>🔨 Hammers and laser-beams 💥</h2>
					<ul>
						<li class="fragment">Human languages are like hammers</li>
						<li class="fragment">Programming languages like Python - more like a laser beam</li>
						<li class="fragment">C is still a thing</li>
						<li class="fragment">Even assembler</li>
					</ul>
				</section>


			</section>


			<section>
				<section>
					<h2>Code == </h2>
					Precise description of what machines should do
				</section>


				<section>
					<h2>Code up close</h2>

					<ul>
						<li class="fragment">What order things happen in</li>
						<li class="fragment">Under what circumstances</li>
						<li class="fragment">Where knowledge comes from, where it goes</li>
						<li class="fragment">How things change</li>
						<li class="fragment">When things repeat</li>
					</ul>
				</section>

				<section>
					<h2>Code up close</h2>
					<ul>
						<li class="fragment">Logic and algorithms</li>
						<li class="fragment">Written in a way that is clear to machines</li>
						<li class="fragment">Written in a way that is clear to people</li>
					</ul>
				</section>

				<section>
					<h2>What will get abstracted away?</h2>
					<ul>
						<li class="fragment">NOT if statements, loops, flow control</li>
						<li class="fragment">NOT functions</li>
						<li class="fragment">NOT variables</li>
						<li class="fragment">NOT classes and objects</li>
						<li class="fragment">NOT exceptions and errors</li>
					</ul>
				</section>

				<section>
					<h2>What will get abstracted away?</h2>
					<ul>
						<li class="fragment">NOT our ability to solve problems</li>
						<li class="fragment">NOT our ability to express ourselves</li>
						<li class="fragment">NOT our ability to describe algorithms precisely</li>
					</ul>
				</section>


			</section>

			<section>
				<h2>So far...</h2>

				<ul>
					<li class="fragment">Software dev == collaborate, exploratory, iterative problem
						solving</li>
					<li class="fragment">Code == a precise description of what a machine should do, clear to humans</li>
				</ul>
			</section>

			<section>

				<h2>AI is a foot gun</h2>
				<img src="images/foot-gun.webp" height="400" />
				<br />
				For people learning to code


			</section>


			<section>

				<section>
					<h2>Confusing things</h2>
				</section>

				<section>
					<h2>New devs practice their skills</h2>
					<p>

						Hackerrank, leetcode etc
					</p>

					<p class="fragment">But LLMs do it better, so what's the point of getting a human to do it?</p>
					<p class="fragment">Rather: let the humans practice using LLMs, that's the future proof skill!</p>

					<!-- <p class="fragment">The point is to become literate</p>
					<p class="fragment">The point is to practice skills in small ways</p> -->
				</section>


				<section>
					<h2>Problems</h2>
					<!-- <img src="images/problem-size.drawio.svg" /> -->
					<img src="images/problem-size2.drawio.svg" style="background-color: white;" />
				</section>

				<section>
					<h2>But wont AI get better?</h2>
					<h1 class="fragment">YES!</h1>
					<p class="fragment">LLMs will be able to do "harder" things in future</p>
					<p class="fragment">Token limits will increase</p>


					<!-- <h3 class="fragment">
						Problem solving is a transferrable skill
					</h3>
					<h3 class="fragment">
						Collaborative, exploratory problem solving smells a lot like AGI
					</h3>
				</section> -->
				</section>

				<section>
					<h3>Should humans even try to outpace LLMs?</h3>
					<!-- <p class="fragment">Definitely not!</p> -->
				</section>

				<section>
					<h3>Will software devs become redundant?</h3>
					<h2 class="fragment">Definitely not!</h2>
				</section>

				<section>
					<h3>When learning any language we...</h3>
					<p class="fragment">Start off by translating words and simple sentences</p>
					<p class="fragment">But we know the end goal is something more</p>
				</section>

				<section>
					<h3>When learning software dev</h3>
					<p class="fragment">Start off by translating simple problems into code</p>

				</section>

				<section>
					<h3>Software development is...</h3>
					<p class="fragment">NOT A TRANSLATION SERVICE</p>
					<ul>
						<li class="fragment">A collaborative, iterative, exploratory process</li>
						<li class="fragment">Code is an artifact output from that process</li>
					</ul>

					<p class="fragment">First step in learning this is: Translation and literacy</p>
				</section>

				<section>
					<h2>Like this!</h2>
					<img src="images/idea to code straight.drawio.svg" style="background-color: white; padding: 0.5em;"
						height="400" /><br />
					Translate the specification into code
				</section>

				<section>
					<h3>But can't AI learn ALL the skills of software dev?</h3>
					<h2 class="fragment">Still pretty far from AGI</h2>
				</section>

				<section>
					<h2>There is still a lot of hype to cut through</h2>
					<ul>
						<li>Only good at problems <a
								href="https://x.com/cHHillee/status/1635790330854526981?t=bdVc5pxCn1P_GV3ZF91X6w&s=35">it's
								seen
								before! </a>
						</li>
						<li><a href="https://x.com/sayashk/status/1638159652562038787">Strong evidence</a> of
							memorization
							of problems in training set</li>
					</ul>


				</section>

				<section>
					<h2>Watch this! (Later)</h2>
					<iframe width="560" height="315" src="https://www.youtube.com/embed/4jGwEOGunrU?si=GG_dsAD7PriRvTyD"
						title="YouTube video player" frameborder="0"
						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
						referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

					<p>Mirror, mirror: LLMs and the illusion of humanity - Jodie Burchell</p>

				</section>


				<!-- <section>
					When will LLMs be able to take part in a collaborative, iterative, exploratory process?

					<h2 class="fragment">AGI</h2>
				</section> -->
			</section>


			<!-- <section>
					<h2>We've covered...</h2>
					<ul>
						<li>What software developers do: Solve problems -> precise expression</li>
						<li>What code is -> precise description of algorithms and logic</li>
					</ul>
				</section> -->


			<section>

				<section>

					<h2>To become a software developer, start with</h2>

					<h1 class="fragment">Literacy!</h1>

					<p class="fragment">Learn to write: translate simple ideas into code</p>
				</section>


				<section>
					<h2>Then...</h2>
					<p class="fragment">Learn to apply that literacy to solve problems</p>


				</section>

				<section>
					<h2>Hackerrank etc</h2>
					<ul>
						<li>Practice literacy</li>
						<li>Practice applying skills to solve basic problems</li>
					</ul>
				</section>
			</section>


			<!-- <section>

				 <section>
					<h2>"Learning to code" == </h2>
					<ol>
						<li>Learning to read and express thoughts precisely</li>
						<li>Learning to think and solve small problems</li>
					</ol>
				</section> 

				
			</section> -->


			<section>
				<section>
					<h2>Body Builders</h2>
					<img src="images/body builder.webp" height="400" />
				</section>


				<section>
					<img src="images/robot lifting weights.webp" height="400" />
				</section>
			</section>

			<section>
				<section>
					<h2>
						Software developers
					</h2>

					<img src="images/dev thinking hard.webp" height="400" />
					<br />
					Solve hard problems
				</section>

				<!-- <section>
					<h2>
						How do devs get good at solving hard problems?
					</h2>
				</section> -->

				<section>
					<img src="images/robot thinking hard.webp" height="500" />
				</section>


				<section>
					<h2>Practice problem solving</h2>
					<p class="fragment">Apply what you know, solve small problems</p>
					<p class="fragment">So that you can learn to solve bigger problems</p>
				</section>


			</section>


			<section>


				<section>
					<h2>Practice precision</h2>
					<p class="fragment">Noob-friendly problems are simple. Maybe you can solve them with a hammer</p>
					<p class="fragment">But then you wont learn how to use laser beams</p>
				</section>

				<section>
					<h2>How?</h2>
					<p class="fragment">by PRECISELY describing small, simple algorithms</p>
					<p class="fragment">you learn the skills to describe big, complicated ones</p>

				</section>


				<section>
					<h3>Remember</h3>
					<h2>The most precise way to describe what a program should do is in code</h2>
				</section>
			</section>

			<section>


				<section>
					<h2>Learn to code in order to</h2>
					<h3>Learn to think</h3>
				</section>

				<section>

					<h2>
						Express your thoughts precisely to...
					</h2>

					<ul>
						<!-- <li class="fragment">learn to express ourselves accurately</li> -->
						<li class="fragment">get feedback from people</li>
						<li class="fragment">get feedback from the world</li>
						<li class="fragment">get feedback from our future selves</li>
						<li class="fragment">harden our own thinking</li>
					</ul>
				</section>

				<section>
					<h2>Sam Altman</h2>
					<img src="images/Sam_Altman_CropEdit_James_Tamim.jpg" />
					<br>
					<span class="fragment">
						"You should learn to code...learning to code was great as a way to learn how to think. I
						think
						coding will still be important in the future"
					</span>

				</section>

				<section>
					<h2>Reading... Japanese?</h2>
					<img src="images/japanese neo.webp" height="400" />
				</section>

				<section>
					<h2>Reading code...</h2>
					<ul>
						<li class="fragment">To read the minds of your team mates </li>
						<li class="fragment">To read the minds of powerful thinkers</li>
					</ul>
				</section>


				<!-- <section>
					<h2>Hackerrank etc are great!</h2>
					<ul>
						<li class="fragment">practice critical foundational software dev skills</li>
						<li class="fragment">NOT an accurate representation of what software dev is</li>
					</ul>
				</section> -->

			</section>


			<section>

				<section>
					<h3>
						Can AI help me learn software development?
					</h3>

					<h2 class="fragment">YES!</h2>
				</section>

				<section>
					<img src="images/foot-gun.webp" height="400" />
				</section>
			</section>

			<section>

				<section>
					<h2>Illusions of competence</h2>
				</section>

				<section>
					<h2>Richard Feynman</h2>
					<img src="images/Richard_Feynman_1988.png" height="400" />
					<br />
					<span class="fragment">
						"The first principle is that you must not fool yourself and you are the easiest person to
						fool."
					</span>
				</section>


				<section>
					<h2>Components of illusions of competence</h2>
					<ul>
						<li class="fragment">Dunning Kruger effect</li>
						<li class="fragment">Overconfidence in future-self</li>
						<li class="fragment">Hindsight bias</li>
					</ul>
				</section>

				<section>
					<h2>MASTERY</h2>
					<ul>
						<li class="fragment">NOT Familiarity </li>
						<li class="fragment">NOT Nodding while someone/something else does the thinking</li>
						<li class="fragment">NOT Housed in your short-term memory</li>
					</ul>
				</section>

				<section>
					<h2>MASTERY comes from</h2>
					<ul>
						<li class="fragment">Deliberate practice</li>
						<li class="fragment">Recall</li>
						<li class="fragment"><strong>Struggle!</strong></li>
					</ul>
				</section>

				<!-- <section>
					<h2>Bad strategy for solving problems</h2>

					<ul>
						<li class="fragment">"I don't feel like solving that problem..."</li>
						<li class="fragment">Get the solution</li>
						<li class="fragment">Convince yourself that you could have done it yourself</li>
						<li class="fragment">Stroke ego</li>
						<li class="fragment">Move on to next problem</li>

					</ul>
				</section> -->

				<section>
					<h2>Strategy</h2>
					<ul>
						<li class="fragment">Try it yourself first - embrace struggle</li>
						<li class="fragment">Opportunity to be wrong == Opportunity to upgrade yourself</li>
						<li class="fragment">If you get stuck - get unstuck</li>
						<li class="fragment">Recall things later on, practice over time</li>
						<li class="fragment">Learn to teach (to learn) - <a
								href="https://www.sheenaoc.com/articles/2024-03-04-protege-effect">protégé
								effect</a>
						</li>
					</ul>
				</section>

			</section>

			<section>
				<h2>Future-proof dev skillset</h2>
				<ul>
					<li class="fragment">Discover and solve problems</li>
					<li class="fragment">Algorithmic thinking</li>
					<li class="fragment">Communicate with precision</li>
					<li class="fragment">Learn!</li>
				</ul><br /><br />
				<h3 class="fragment">Become code-literate</h2>
			</section>


			<section>
				<h2>The end</h2>
				<img src="qrcode.png" height="350em" />
				<br />
				These slides - extra resources - links to my socials
			</section>

			<section>
				<h2>Attributions</h2>
				<ul>
					<li>https://en.wikipedia.org/wiki/Sam_Altman</li>
					<li>https://commons.wikimedia.org/wiki/File:Richard_Feynman_1988.png</li>
					<li>https://commons.wikimedia.org/wiki/Category:Punch_cards#/media/File:1915_NELA_Convention_report_on_punch_cards.png
					</li>
				</ul>
			</section>


		</div>
	</div>

	<script src="dist/reveal.js"></script>
	<script src="plugin/notes/notes.js"></script>
	<script src="plugin/markdown/markdown.js"></script>
	<script src="plugin/highlight/highlight.js"></script>
	<script>
		// More info about initialization & config:
		// - https://revealjs.com/initialization/
		// - https://revealjs.com/config/
		Reveal.initialize({
			hash: true,

			// Learn about plugins: https://revealjs.com/plugins/
			plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
		});
	</script>
</body>

</html>