GitBlixt
toreyheinz/2026-GR-WebDevElixirTalk

Refine intro slides: fix line numbers, stats, inline styles, flow diagram

Torey Heinz committed Feb 17, 2026
commit 080fa08f001edd8e8df5212dc49516bd27017bd3
Showing 2 changed files with 21 additions and 20 deletions
slides/01-intro.html +20 -20
@@ @@ -48,7 +48,7 @@
<!-- SLIDE 3: Vianet Entities -->
<section>
<h2>Vianet Management</h2>
- <p style="font-size: 0.7em; color: #888; margin-bottom: 10px;">
+ <p class="smaller muted">
Huge thanks to Vianet for fully embracing Elixir and giving us the freedom to adopt it across our stack.
</p>
<div class="entity-grid">
@@ @@ -82,13 +82,13 @@
<!-- SLIDE 4: What We're Covering -->
<section>
<h2>What We're Covering Today</h2>
- <p style="color: #888;">Three parts, about 50 minutes:</p>
+ <p class="muted">Three parts, about 50 minutes:</p>
<ol>
<li class="fragment"><strong>Why Elixir?</strong> &mdash; Where it comes from and why it matters</li>
<li class="fragment"><strong>The Language</strong> &mdash; Pattern matching, processes, and LiveView <em>(live demos!)</em></li>
<li class="fragment"><strong>Real-World Code</strong> &mdash; Production systems from my work at Vianet</li>
</ol>
- <p class="fragment" style="margin-top: 1em; color: #888;">Then we'll open it up for Q&amp;A.</p>
+ <p class="fragment muted" style="margin-top: 1em;">Then we'll open it up for Q&amp;A.</p>
<aside class="notes">
Here's the roadmap. First, why Elixir exists. Then we'll do live coding in LiveBook to explore the language. Finally, real production code from Vianet. We'll save time for questions at the end.
@@ @@ -107,16 +107,16 @@
<!-- SLIDE 6: Erlang -->
<section>
- <h2>Erlang <span style="font-weight: 400; color: #888;">(1986)</span></h2>
+ <h2>Erlang <span class="muted" style="font-weight: 400;">(1986)</span></h2>
<p>Built by <strong>Ericsson</strong> for telecom switches &mdash; systems that literally <strong>could not go down</strong>.</p>
- <p class="fragment" style="color: #888; font-size: 0.75em;">Think about what a phone network requires:</p>
+ <p class="fragment small muted">Think about what a phone network requires:</p>
<ul>
<li class="fragment">Millions of simultaneous calls</li>
<li class="fragment">A single dropped call can't crash the entire system</li>
<li class="fragment">Update software <strong>without</strong> hanging up on everyone</li>
<li class="fragment">99.9999999% uptime &mdash; <em>~31ms of downtime per year</em></li>
</ul>
- <p class="fragment" style="margin-top: 0.8em; font-size: 0.75em; color: #888;">
+ <p class="fragment small muted" style="margin-top: 0.8em;">
Battle-tested for <strong>40 years</strong> in phone networks, banking, and messaging.
</p>
@@ @@ -135,7 +135,7 @@
<li class="fragment"><strong>Per-process garbage collection</strong> &mdash; no stop-the-world pauses</li>
<li class="fragment"><strong>Built-in distribution</strong> &mdash; processes communicate across machines</li>
</ul>
- <p class="fragment" style="margin-top: 1em; font-style: italic; color: #888;">
+ <p class="fragment muted" style="margin-top: 1em; font-style: italic;">
Arguably the best runtime ever built for this problem.<br/>
It just had a developer experience problem...
</p>
@@ @@ -147,7 +147,7 @@
<!-- SLIDE 8: Elixir -->
<section>
- <h2>Elixir <span style="font-weight: 400; color: #888;">(2012)</span></h2>
+ <h2>Elixir <span class="muted" style="font-weight: 400;">(2012)</span></h2>
<p><strong>Jos&eacute; Valim</strong> &mdash; Ruby on Rails core team member &mdash; asked:</p>
<blockquote class="fragment">
&ldquo;What if we took the best runtime in the world and made it a joy to write?&rdquo;
@@ @@ -158,7 +158,7 @@
<li class="fragment"><strong>Metaprogramming</strong> &mdash; macros that extend the language cleanly</li>
<li class="fragment"><strong>Full Erlang access</strong> &mdash; 40 years of battle-tested libraries</li>
</ul>
- <p class="fragment" style="margin-top: 0.8em; font-size: 0.8em; color: #555;">
+ <p class="fragment small" style="margin-top: 0.8em; color: #555;">
Elixir doesn't replace Erlang. It <strong>runs on</strong> Erlang's BEAM.
</p>
@@ @@ -170,7 +170,7 @@
<!-- SLIDE 9: Who's Using It -->
<section>
<h2>Who's Using Elixir?</h2>
- <p style="font-size: 0.75em; color: #888;">Companies choose Elixir when <strong>reliability and scale actually matter</strong>.</p>
+ <p class="small muted">Companies choose Elixir when <strong>reliability and scale actually matter</strong>.</p>
<div class="company-grid">
<div class="company-card fragment">
@@ @@ -219,7 +219,7 @@ Request arrives
Response sent
</div>
- <p class="fragment" style="margin-top: 0.5em; font-size: 0.8em;">
+ <p class="fragment small" style="margin-top: 0.5em;">
Your app spends most of its time <strong>waiting</strong> &mdash; on databases, APIs, file systems.
</p>
@@ @@ -259,18 +259,18 @@ Response sent
<!-- SLIDE 12: Real Impact at Vianet -->
<section>
<h2>Real Impact at Vianet</h2>
- <p style="font-size: 0.8em; color: #888;">
+ <p class="small muted">
Migrated from <strong>Ruby on Rails on AWS</strong> &rarr; <strong>Elixir on Render</strong>
</p>
<div class="stats-row">
<div class="stats-item fragment">
- <div class="stat">&darr;</div>
+ <div class="stat">3x</div>
<div class="stat-label">Faster response times</div>
</div>
<div class="stats-item fragment">
- <div class="stat">&darr;</div>
- <div class="stat-label">Fewer resources needed</div>
+ <div class="stat">&frac13;</div>
+ <div class="stat-label">The infrastructure</div>
</div>
<div class="stats-item fragment">
<div class="stat">$10k</div>
@@ @@ -278,7 +278,7 @@ Response sent
</div>
</div>
- <p class="fragment" style="font-size: 0.75em; color: #555; max-width: 700px; margin: 0.5em auto;">
+ <p class="fragment small" style="color: #555; max-width: 700px; margin: 0.5em auto;">
This isn't because Rails is bad &mdash; I built my career on Rails and I still respect it deeply.
It's because <strong>Elixir's concurrency model is a natural fit for what web apps actually do.</strong>
</p>
@@ @@ -291,9 +291,9 @@ Response sent
<!-- SLIDE 13: A Quick Taste — Code -->
<section>
<h2>A Quick Taste</h2>
- <p style="font-size: 0.75em; color: #888;">If you've written Ruby or JavaScript, this should feel familiar.</p>
+ <p class="small muted">If you've written Ruby or JavaScript, this should feel familiar.</p>
- <pre><code class="language-elixir" data-trim data-line-numbers="1-5|7-8">
+ <pre><code class="language-elixir" data-trim data-line-numbers="1-4|6-7">
# Variables, strings, basic data types
name = "GR Web Dev"
year = 2026
@@ @@ -303,7 +303,7 @@ IO.puts("Welcome to #{name}, #{year}!")
IO.puts("We have #{length(attendees)} people here tonight")
</code></pre>
- <pre class="fragment"><code class="language-elixir" data-trim data-line-numbers="1-2|4-7">
+ <pre class="fragment"><code class="language-elixir" data-trim data-line-numbers="1|3-7">
languages = ["JavaScript", "Ruby", "Python", "Elixir", "Go"]
# The pipe operator |> chains functions (like Unix pipes)
@@ @@ -342,7 +342,7 @@ end
Math.factorial(10) # => 3628800
</code></pre>
- <p class="fragment" style="font-size: 0.75em; color: #555;">
+ <p class="fragment small" style="color: #555;">
That's already using <strong>pattern matching</strong> and <strong>guard clauses</strong> &mdash;
two features we'll explore in depth next.
</p>
slides/shared.css +1 -0
@@ @@ -257,6 +257,7 @@
line-height: 1.4;
color: #555 !important;
text-align: left;
+ white-space: pre;
display: inline-block;
background: #f8f8f8;
padding: 20px 30px;