Keynote: A Visual Guide to Fundamentals - Sarah Drasner 🔗 **Source:** [Keynote: A Visual Guide to Fundamentals - Sarah Drasner](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > [!note]+ Document Notes > tags: [javascript, rendering, performance, jsconf25] > author: [Sarah Drasner] > source: [MISSING] > reference: [https://www.youtube.com/watch?v=tGnv1ENzPmQ] > date created: > > # 🏷️ Title: Keynote: A Visual Guide to Fundamentals - Sarah Drasner > > 🧰 **Action Inbox** > - [H1] Draft “Excitement-first” teaching guide — video?t=60 #share > - [H2] Ship “Single-thread mental model” diagram — video?t=172 #articleseed > - [H3] Add event loop explainer to docs — video?t=195 #xref > - [H6] Write microtask vs task lab — video?t=356 #articleseed > - [H7] Create “long tasks cause jank” demo — video?t=420 #share > - [H8] Publish rAF batching example set — video?t=676 #articleseed > - [H9] Document iOS buffering vocabulary — video?t=1089 #xref > - [H10] Compile WASM portability case studies — video?t=1170 #articleseed > - [H11] Add LLVM bitcode primer to training — video?t=1266 #xref > - [H12] Plan meetup on joyful learning — video?t=1320 #share > <!-- deep-read:sections start --> ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Event loop overview (MDN). https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop - requestAnimationFrame guide (MDN). https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame - WebAssembly docs (MDN). https://developer.mozilla.org/en-US/docs/WebAssembly - Android graphics stack. https://source.android.com/docs/core/graphics/arch-sf-hwc - Core Animation overview. https://developer.apple.com/documentation/quartzcore ## 📝 Summary - Sarah Drasner teaches fundamentals with visual models. She centers joy in learning. - She explains JavaScript’s event loop, stacks, and queues. See [H2]–[H3]. - She contrasts CPU and GPU roles and browser pipelines. - She compares Android, iOS, and web rendering pipelines. See [H9]. - She highlights WebAssembly portability and performance. See [H10]. - Bottom line: excite learners, teach verification, and show internals. ## 📖 Main Content - JavaScript runs single-threaded with an event loop. Browsers and Node differ. - The loop drains the call stack, then microtasks, then tasks. - requestAnimationFrame batches writes near frames. It reduces jank risk. - Layout recalculation is costly. Transforms often avoid reflow. - CPUs handle diverse instructions. GPUs excel at parallel math. - Android composes layers via SurfaceFlinger and HWC. - iOS pipelines commit layers to Core Animation, then render. - Double or triple buffering reduces visible stutter. - WebAssembly enables portable, efficient modules across runtimes. - Uncertainties: exact iOS buffering details may vary by device. ### 🗒️ Notes #### ⏱️ [00:60](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=60) Teaching energy ### [H1] Enthusiasm supports contagious learning interest > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) by [[Sarah Drasner]]. Published [MISSING]. Accessed . > “when someone's really deeply excited about a subject, it's a little bit contagious, you know.” Use excitement to motivate deep study. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=60) #share ID:rw_[MISSING] #### ⏱️ [02:52](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=172) JS model ### [H2] JavaScript runs single-threaded by design > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “JavaScript is singlethreaded in nature,” Teach limits and host-provided async. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=172) #articleseed ID:rw_[MISSING] #### ⏱️ [03:35](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=215) Event loop order ### [H3] Event loop drains stack then microtasks > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “first it processes all of the things on the call stack to completion and then it will execute processes on the microtask Q.” Map typical frame work. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=215) #xref ID:rw_[MISSING] #### ⏱️ [04:31](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=271) Hosts matter ### [H4] Host environments expose different async APIs > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “The host environment is where the code is executed” Contrast browsers and servers in training. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=271) #xref ID:rw_[MISSING] #### ⏱️ [05:04](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=304) Stack behavior ### [H5] Call stack uses LIFO processing order > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “it's processed in a lastin first out order or LIFO.” Use visuals for stack frames. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=304) #articleseed ID:rw_[MISSING] #### ⏱️ [06:00](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=360) Microtasks ### [H6] Microtask queue prioritizes Promises handlers > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “They work on some high priority async such as promises.” Show FIFO microtask behavior with examples. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=360) #articleseed ID:rw_[MISSING] #### ⏱️ [07:00](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=420) Rendering risk ### [H7] Long tasks block rendering and cause jank > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “longunning code... can also block rendering as well” Teach budgeting for main-thread time. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=420) #share ID:rw_[MISSING] #### ⏱️ [11:16](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=676) Animation timing ### [H8] requestAnimationFrame batches visual updates > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “Request animation frames pretty special because it batches those requests” Pair rAF with transforms and opacity. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=676) #articleseed ID:rw_[MISSING] #### ⏱️ [18:09](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1089) iOS buffers ### [H9] iOS uses double or triple buffering > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “it does double or triple buffering where the frame is processed two or three steps before it's even rendered.” Explain hitch vs jank vocabulary. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1089) #xref ID:rw_[MISSING] #### ⏱️ [19:30](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1170) WASM pitch ### [H10] WebAssembly improves portability and performance > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “Web Assembly, though, neither Web nor Assembly offers portability, performance, and security.” Note use cases across platforms. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1170) #articleseed ID:rw_[MISSING] #### ⏱️ [21:06](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1266) Toolchain detail ### [H11] LLVM bitcode represents lower-level IR > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “It is called bit code which is a lower level IR.” Place LLVM in compilation diagrams. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1266) #xref ID:rw_[MISSING] #### ⏱️ [22:14](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1334) Joyful close ### [H12] Joyful learning accelerates community growth > [!quote] [Keynote](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “embrace the nerdiness of learning and the excitement that comes from it” Plan activities that model curiosity. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1334) #share ID:rw_[MISSING] ## 📚 References - MDN: JavaScript event loop. https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop - MDN: requestAnimationFrame. https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame - MDN: CSS transforms. https://developer.mozilla.org/en-US/docs/Web/CSS/transform - Android graphics: SurfaceFlinger/HWC. https://source.android.com/docs/core/graphics/arch-sf-hwc - Apple Core Animation. https://developer.apple.com/documentation/quartzcore - WebAssembly overview (MDN). https://developer.mozilla.org/en-US/docs/WebAssembly - LLVM Bitcode format. https://llvm.org/docs/BitCodeFormat.html - VSync background. https://en.wikipedia.org/wiki/Vertical_synchronization 🔖 **Zettel Candidates** - **Enthusiasm supports contagious learning interest** — Use energy to prime attention. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=60 - **JavaScript runs single-threaded by design** — Anchor mental models early. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=172 - **Event loop drains stack then microtasks** — Teach deterministic order. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=215 - **Microtask queue prioritizes Promises handlers** — Show FIFO microtasks. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=360 - **Long tasks block rendering and cause jank** — Budget main thread time. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=420 - **requestAnimationFrame batches visual updates** — Align changes to frames. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=676 - **iOS uses double or triple buffering** — Explain hitch vs jank. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1089 - **WebAssembly improves portability and performance** — Cross-runtime reuse. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1170 - **LLVM bitcode represents lower-level IR** — Place in pipelines. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1266 - **Joyful learning accelerates community growth** — Culture changes stick. https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=1334 ## 🗣️ Paraphrase - The talk celebrates curiosity and practical models. It teaches systems thinking. - It shows event loops, pipelines, and WASM. It encourages joyful mastery. ## 📰 Newsletter - Sarah Drasner showed systems with pictures, not fog. Learn the event loop, paint, and composition. Then compare Android and iOS pipelines. Finally, peek at WASM’s portability gains. WordPress folk can borrow these visuals for performance office hours and Core mentoring. Try rAF batching, transform-first animations, and provenance for assets. Watch the keynote and bring one diagram to your next meetup: https://www.youtube.com/watch?v=tGnv1ENzPmQ ## ✅ Action Items #### DevRel - Publish a “Loop → Layout → Paint” cheatsheet and talk. - Run office hours on microtasks, rAF, and long-task budgeting. - Build reproducible perf labs in CodePen and Playground. - Add verification prompts to examples and quickstarts. - Track workshop deltas with pre/post tests and surveys. #### OSPO - Codify guidance on WASM licenses and provenance checks. - Add SBOM generation to builds with freshness SLOs. - Define policies for GPU-accelerated features and fallbacks. - Provide consult hours on event-loop risks in apps. - Report quarterly on license and provenance exceptions. #### Community - Host a “rendering night” with platform comparisons. - Pair mentors on stack traces and perf jank cases. - Share open recordings with captions and diagrams. - Rotate “first issue” clinics focused on perf bugs. #### WordPress - Core: set performance budgets for main-thread time. - Core Performance: ship a rAF + transform demo gallery. - Core AI: require citations and provenance in generated docs. - **Core Program Team:** add perf retros and cross-team demos. - Mobile: test jank and hitch on iOS and Android. - Playground: build event-loop sandboxes and tests. - Community: include diagram kits in meetup packs. - Training: add WASM and rendering primers. - Marketing: spotlight small teams with perf wins. - Support: add “verify sources” in snippet guidelines. - Design: promote transform-first motion patterns. - Documentation: show last-reviewed dates and owners. - Photos/TV: require captions and accessible exports. - Polyglots: translate perf and rendering materials. - Accessibility: test reduced-motion and zoom scenarios. - Meta: track .org API reliability and latency. - CLI: add perf scaffolds and smoke tests. - Hosting: report real-user metrics with shared formats. - Tide: include provenance and update recency. - Openverse: show rights and source clarity for media. - Themes: include reproducible builds and LICENSE checks. - Plugins: verify maintainers and release hygiene. #### The WPOCC - Fund microgrants for perf education sprints. - Support fellowships on rendering and accessibility. - Publish transparent outcomes and retention metrics. ### FAIR - Provide local metadata and signature checks for assets. - Publish covenants for funding transparency and anti-capture. - Release reusable governance scorecards and operator agreements. ## 🧪 Hypotheses - rAF + transform patterns reduce jank by 25% on average. - Microtask education lowers Promise misuse bugs by 30%. - WASM modules cut startup by 15% in target flows. - Visual diagrams improve concept recall by 20% after 30 days. ### 📊 Methodology - A/B test animation strategies on identical pages. - Log long tasks and Core Web Vitals across cohorts. - Measure startup with and without WASM modules. - Run recall quizzes after diagram-based lessons. ### ❓ Questions - Which trust signals best guide copy-paste safety? - Where does buffering help most across iOS devices? - How can Playground teach microtasks interactively? ### 🔮 Future Research - Map GPU acceleration wins to device matrices. - Evaluate WASM sandboxing for plugin security. - Study diagram density vs retention for newcomers. ### 💡 Implications - Teaching internals reduces folklore and superstition. - Clear budgets and patterns tame jank across stacks. - WASM may cut duplication across clients. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch–Kincaid Grade ≈ 10. #### 👀 Visual learners - Present: diagrams and pipeline sketches. - Improve: architecture maps with captions and legends. #### 🔊 Aural learners - Present: recorded keynote. - Improve: 3–5 minute narrated summary. #### 🗣️ Verbal learners - Present: definitions and analogies. - Improve: a glossary for queue terms. #### 🧩 Kinesthetic learners - Present: coding demos. - Improve: guided labs with perf budgets. #### 🧠 Logical learners - Present: ordered pipelines and cause chains. - Improve: decision trees for async choices. #### 🧑‍🤝‍🧑 Social learners - Present: meetups and Q&A. - Improve: peer code-reading sessions. #### 🧘‍♀️ Solitary learners - Present: long-form notes. - Improve: self-check quizzes and prompts. #### 🌿 Naturalistic learners - Present: none explicit. - Improve: energy and device impact framing. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: headings and structure in slides. - Improve: descriptive alt text for diagrams. #### Keyboard navigation - Present: standard video controls. - Improve: visible focus and skip links in pages. #### Contrast and readability - Present: legible fonts. - Improve: check 4.5:1 across all slides. #### Text resizing and reflow - Present: responsive exports. - Improve: test at 200% zoom and reduced motion. #### Media and captions - Present: captions on YouTube. - Improve: downloadable transcript and audio descriptions. #### Forms and interactions - Present: N/A for keynote. - Improve: accessible feedback forms for events. #### Standards reference - Map gaps to WCAG 2.2 AA criteria. ### 🌍 DEIB Assessment #### Cultural breadth - Present: broad audience framing. - Improve: global examples and translations. #### Inclusive language - Present: neutral, encouraging tone. - Improve: plain-language summaries for jargon. #### Neurodiversity support - Present: consistent structure and visuals. - Improve: icon+text labels and repetition. #### Representation - Present: leadership by a woman in engineering. - Improve: showcase diverse case studies. #### Psychological safety - Present: permission to “nerd out.” - Improve: explicit guidelines for Q&A rooms. ### ✅ Logical Validity #### Strong reasoning - Causal chain: long tasks → missed frames → jank ([H7]). Clear mechanism. - Procedural order: stack → microtasks → tasks ([H3]). Matches standards. - Cross-platform analogy: pipelines share similar stages. Increases transfer. #### Fallacies - Overgeneralization risk: “WASM improves performance” in all cases ([H10]). - Fix: add workload and startup caveats. - Ambiguity risk: “single-threaded” without host caveats ([H2]). - Fix: mention web workers and off-main-thread APIs. #### Tone of voice - Encouraging, practical, and concrete. Uses stories and diagrams. ### 🛡️ DARVO Analysis - Deny: none present. - Attack: none present. - Reverse victim/offender: none present. - The keynote models curiosity, not conflict. ## 🎯 Conclusion - Systems knowledge improves performance and confidence. - Teach the loop, measure frames, and favor transforms. - Explore WASM where portability helps. - Keep the joy visible in every lesson. ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: **H3**. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] Excitement supports contagious learning interest > [!quote] [Keynote: A Visual Guide to Fundamentals](https://www.youtube.com/watch?v=tGnv1ENzPmQ) by [[Sarah Drasner]] via an unnamed author. Published [MISSING]. Accessed . > “when someone's really deeply excited about a subject, it's a little bit contagious, you know.” Two lines: use energy to prime attention and memory. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=60#H1) #xref #articleseed ID:rw_[MISSING] ### [H2] Event loop drains stack then microtasks > [!quote] [Keynote: A Visual Guide to Fundamentals](https://www.youtube.com/watch?v=tGnv1ENzPmQ) > “first it processes all of the things on the call stack to completion and then it will execute processes on the microtask Q.” Two lines: align code examples to real scheduling. [view highlight](https://www.youtube.com/watch?v=tGnv1ENzPmQ&t=215#H2) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) - Purpose: Promote reusable claims into Atomic notes. - Split level: **H4**. - Each item: one idea, present tense, specific, testable. #### [Z1] requestAnimationFrame batches visual updates - Works when layout changes occur near frames. - Pointer: ~11:16. - Links: [[Animation-Perf]] [[Main-Thread]] #### [Z2] Long tasks cause visible jank - Holds when main thread exceeds frame budget. - Pointer: ~07:00. - Links: [[CWV]] [[Rendering-Pipeline]] --- ### ✏️ Fleeting Queue (Extract by Selection) - Purpose: Capture quick actions or sparks for Fleeting notes. - Extraction: **Select one line** → “Refactor: Extract selection to new note (content only).” - Keep each line short and self-contained. - [F1] Sketch event loop cheatsheet — context/https://www.youtube.com/watch?v=tGnv1ENzPmQ #fleeting #inbox - [F2] Build rAF transform demo — context/https://www.youtube.com/watch?v=tGnv1ENzPmQ #fleeting #inbox - [F3] Draft WASM primer for plugins — context/https://www.youtube.com/watch?v=tGnv1ENzPmQ #fleeting #inbox --- <!-- deep-read:sections end -->