Clone
Milestone: Reveal.js Slideshow Conversion
Date: 2026-02-06 Overview: Converted LiveBook markdown outlines into Reveal.js HTML presentations for the GR Web Dev Meetup talk "Elixir in the Real World."
Features Implemented
1. Shared Stylesheet (slides/shared.css)
- Extracted all CSS into a reusable stylesheet (442 lines)
- Elixir purple (
#6e44ff) accent, light theme for projector readability - Component classes: entity cards, company cards, comparison grids, stats rows, flow diagrams, architecture diagrams, tables, callout boxes, pattern grids, resource lists, key-value lists
- Utility classes:
.muted,.small,.smaller,.small-code,.tiny-code - Section divider styling with purple gradient background
2. Intro Slideshow (slides/01-intro.html)
- 15 slides covering: title, about me, Vianet entities, agenda, Part 1 (Why Elixir), Erlang history, BEAM, Elixir (2012), who's using it, I/O bound insight, language comparison, Vianet impact ($10k savings), code taste (2 slides), transition to LiveBook
- 30 fragment animations for progressive reveal
- Speaker notes on every slide
- Code highlighting with line-number stepping for Elixir blocks
- CDN-based Reveal.js 5.1.0 (unpkg) — no build tools needed
3. Real-World Code Slideshow (slides/03-real-world.html)
- 32 slides, 50 fragments, 32 speaker notes
- Section 3.1 — Email Marketing: Architecture diagram, supervision tree, rate limiter GenServer (token bucket), comparison table (Redis vs Node vs DB vs GenServer), mailer worker
withchain,elseblock walkthrough, scheduler streaming (500k records, constant memory) - Section 3.2 — Domain Registry: EPP challenge,
withchain connection, binary pattern matching (<<length::32-big>>), connection pool GenServer, health check pattern matching (5 clauses, zero if/else), OrbitFour supervision tree - Section 3.3 — Internal Admin: Philosophy (separate admin app), multi-DB architecture (5 databases), LiveView forms with
assign_async, real-time presence tracking, async charts withpush_event, flow explanation - Summary: 6-card pattern grid mapping patterns across all 3 systems
- Wrap-up: Recap, pitch, getting started resources, thank you/Q&A
Technical Decisions
| Decision | Rationale |
|---|---|
| CDN-based Reveal.js (unpkg) | No build tools, just open in browser — keeps talk prep simple |
| Light theme (white background) | Better for projectors and presentation venues |
| Shared CSS file vs inline styles | Both slideshows use identical styling; extracted after building 01-intro |
small-code / tiny-code classes |
Dense code slides (production examples) need smaller font sizes to fit |
| Section dividers with zoom transitions | Visual break between major topics; purple gradient reinforces branding |
| Line-number highlighting on code blocks | Guides audience attention during code walkthroughs |
02-the-language.livemd stays as LiveBook |
Interactive code demos require live execution — LiveBook is the right tool |
Code Changes
| File | Action | Size |
|---|---|---|
slides/shared.css |
Created | 442 lines, 7.3KB |
slides/01-intro.html |
Created, then refactored (inline CSS → shared.css) | 19KB |
slides/03-real-world.html |
Created | 42KB |
Key Patterns
- Reveal.js CDN boilerplate: 4 CSS links (reset, reveal, theme, highlight) + shared.css, 4 JS scripts (reveal, highlight, notes, markdown), standard
Reveal.initialize()config - Slide structure:
<section>per slide,class="fragment"for animations,<aside class="notes">for speaker notes,class="section-divider"+data-transition="zoom"for section breaks - Code blocks:
<pre class="small-code"><code class="language-elixir" data-trim data-line-numbers="...">for highlighted Elixir with stepping
Next Steps
- Review both slideshows in browser, adjust timing and content density
- Consider adding slide numbers / progress bar configuration
- Potentially add a title card or navigation between the 3 parts (01-intro → LiveBook → 03-real-world)
- Practice run to verify speaker notes flow naturally
- Check code highlighting on Elixir-specific syntax (pipe operator, pattern matching, binary syntax)