Cutting‑edge tech, article sharing, and practical insights from the ByteDance frontend team.
This article describes the design and implementation of a code‑review assistant powered by open‑source large language models and a privately hosted knowledge base, covering background, pain points, system architecture, model selection, vector‑store integration, prompt engineering, diff parsing, and practical reflections.
This article explains VisActor's animation system, detailing animation definition, trigger mechanisms, basic units like timeline and timeslice, effect configuration, global morphing via Bezier curves, and demonstrates one-to-one, one-to-many, and many-to-one shape transformations with code examples and demos.
This article explains the fundamentals of breakpoint debugging for web applications, covering the Douyin mini‑program developer tool, Chrome DevTools Protocol basics, browser‑side breakpoint communication, VS Code’s debugging architecture, launch configuration, source‑map handling, and how these concepts can be applied to IDE mini‑program debugging.
This article traces the history of frontend modularization from early global‑function scripts through IIFE, CommonJS, ES6 modules, AMD and CMD, explaining why modularization is needed, how each approach works, their drawbacks, and the key features of each specification.
The article introduces Semi D2C, a design‑to‑code solution built by the Douyin frontend team that converts Figma design files into reusable JSX/CSS code, explains its capabilities, implementation details, challenges, benefits for designers and developers, and how it differs from other D2C approaches.
This article explains the concepts of Inversion of Control and Dependency Injection, demonstrates how to implement a lightweight DI container in TypeScript using decorators and reflection, and covers advanced features such as provider registration, abstraction, lazy loading, and handling circular dependencies.
This comprehensive guide explains browser fundamentals, covering process and thread architecture, single‑ and multi‑process models, the V8 engine's data types, property ordering, memory allocation and garbage collection, compilation stages, the event loop, rendering pipeline, performance optimization techniques, and security mechanisms.
This article explains how WebAssembly is used to decode glTF 3D models compressed with Draco and Meshopt algorithms in Porsche's live gift system, detailing the decoding framework, implementation, and performance benefits and user experience.
This article explores how WebAssembly can break the speed limits of JavaScript by compiling both framework and business logic into WebAssembly, describes the design of the ByteReact front‑end framework, its custom Bytets compiler that turns TypeScript into WebAssembly, and presents performance measurements showing up to three‑fold speed gains for compute‑heavy UI tasks.
This article reviews the adoption of WebAssembly for a web‑based video editing SDK, covering its technical background, browser compatibility, JavaScript vs. WebAssembly trade‑offs, multithreading with Web Workers, OpenGL/WebGL rendering, virtual file‑system handling, package‑size reduction techniques, development tooling, and future directions such as front‑end synthesis and collaborative editing.
