How To Animate Code Using TypeScript 🪄
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.
How To Use P5.js In Svelte
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.
Avoid These Mistakes With Svelte Events
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.
How Is This NPM Frontend So Fast? 🔥
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.
Get daily AI recaps from
Joy of Code in your inbox
Get AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.