GitBlixt

toreyheinz / 2026-GR-WebDevElixirTalk

public
0
Files Issues Pull Requests Wiki Pipelines
Clone
main
1 Branch 0 Tags
CLAUDE.md
Blame History Raw Edit 2.7 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Presentation repository for "Elixir in the Real World: A Practical Introduction" — a ~50-minute talk at the GR Web Dev Meetup, February 23, 2026. Presenter: Torey Heinz (Vianet Management).

Three parts:

  1. slides/01-intro.html — Reveal.js slideshow: Why Elixir?
  2. 02-the-language.livemd — LiveBook interactive demos (runs live during talk)
  3. slides/03-real-world.html — Reveal.js slideshow: Production code from Vianet

No build step. Open HTML files directly in a browser. Press S for speaker notes view.

Key Files

  • slides/shared.css — All shared styles, component classes, color variables
  • slides/logos/ — Brand logos (SVG/PNG) for Vianet entities and companies
  • *.livemd — Source outlines; 02-the-language.livemd is the actual LiveBook presentation
  • outline.md — Detailed narrative structure and timing

Reveal.js Conventions

  • CDN: unpkg, Reveal.js 5.1.0 — no local install needed
  • Theme: white base + shared.css overrides
  • Plugins: Highlight (Monokai), Notes, Markdown

Slide Structure

<section data-transition="fade">

  <h2>Title</h2>

  <li class="fragment">Progressive reveal</li>

  <aside class="notes">Speaker notes on every slide</aside>

</section>
  • class="section-divider" + data-transition="zoom" for section breaks
  • class="fragment" for progressive reveals
  • data-line-numbers="1-5|7-8" for stepped code highlighting
  • class="small-code" (0.45em) / class="tiny-code" (0.40em) for dense code

CSS Variables

--elixir-purple: #48205D;       /* Official Elixir brand purple */

--elixir-purple-light: #8D8390; /* Official Elixir brand light */

Key CSS Classes

Class Purpose
.section-divider Purple gradient section break
.entity-card / .entity-grid Vianet company cards (3-col)
.company-card / .company-grid External company cards (2-col)
.small-code / .tiny-code Smaller code blocks
.muted / .small / .smaller Text utilities
.flow-diagram / .arch-diagram Monospace ASCII diagrams
.callout Highlighted insight box

Audience Context

Mostly JS/Rails developers in West Michigan. Slides use comparisons to familiar tools (Node event loop, Sidekiq, React, Redis pub/sub) to explain Elixir/BEAM concepts.

Related Repositories

Production code examples in Part 3 reference these Vianet projects (configured as additional working directories):

  • /Users/th/ViaNet/vianet-marketing — Email marketing system
  • /Users/th/ViaNet/OrbitFour/OrbitFourV2 — Domain registrar
  • /Users/th/ViaNet/vianet-admin — Internal admin app