Sharing the joy of code.
The video demonstrates how to create smooth, framework-agnostic animations of code blocks using Shiki Magic Move. It covers setting up a TypeScript project, importing Shiki and the Shiki Magic Move components, building a machine/renderer workflow to diff code and render transitions, and adds configurable styling such as line numbers, stagger, easing, and theme options to achieve polished animated code examples.
The video explores how to use p5.js inside Swelt with a simple wrapper, covering both a basic setup and a more advanced approach for dealing with stinky old libraries and add-ons. It explains global vs. instance mode, how to import p5 via dynamic imports for CommonJS add-ons, and demonstrates a working p5.js example in Swelt, plus notes on ecosystem quirks and how to handle compatibility with newer p5.js versions.
The video explains how SWEL handles events through delegation and bubbling, showing why this approach is more memory-efficient than attaching listeners to every element. It covers practical patterns—using SWEL’s on function and attachments, handling custom events like clicked outside, and ensuring proper cleanup—and then dives into the source code to reveal how event delegation, createEvent, and propagation are implemented and ordered for reliable behavior.
The video introduces npmx, a fast, modern browser for exploring the npm registry, and contrasts it with npm by highlighting speed, searchability, and richer data like install size and dependencies. It then dives into how npmx achieves speed (server-side rendering, caching, incremental static regeneration, multi-provider registry, and edge caching) and showcases features (routing, documentation, code browsing, ISAs like ESM/CJS, and social components using AT protocol). The discussion wraps with a look at implementation details, demos (SEO-friendly SSR, playgrounds), and a broader critique of current npmjs/GitHub ecosystems, ending with encouragement to try npmx.
The video surveys a slew of advanced CSS features introduced around 2025, showing how CSS is becoming more like a programming language with invoker commands, dialogue/light dismiss, popover hints, and container-based logic. It covers practical demos ranging from scrollable carousels and customized selects to container queries, scroll state APIs, 3D view transitions, and the expanded range syntax and custom functions—highlighting how these enable richer, JavaScript-free UI patterns and state preservation across interactions.
The video explains how console logs can mislead during debugging and presents ways to get accurate state information, including how JavaScript references work, how to safely copy data, and why using a debugger can be more reliable than console logging.
Get AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.
