This article explains WebRTC fundamentals, compares it with WebSocket, describes SDP, ICE, STUN/TURN NAT traversal, and provides full server‑side and client‑side JavaScript code to build a peer‑to‑peer video conferencing demo.
This article explains how to use Web Workers to offload heavy IndexedDB log processing, compares copy versus transferable data transfer, demonstrates a Promise‑based Worker wrapper, and outlines the limitations and best practices for improving front‑end performance.
This article explores eight practical techniques for implementing theme switching in web applications—including class toggling, stylesheet swapping, CSS variables, alternate rel links, Less modifyVars, Ant Design/Vant custom themes, Element‑UI dynamic theming, and JSS—detailing code snippets, advantages, and limitations of each approach.
This article walks through creating a lightweight Hongxing Erke‑style e‑commerce mini‑program using WeChat's cloud development, covering tool setup, cloud database design, UI layout, tabBar customization, data loading, pagination, sorting, and detail‑page navigation with practical code examples and common pitfalls.
This article explains the necessity, design principles, and concrete implementation of a full‑chain tracing system for Node.js applications, covering architecture choices, industry solutions, core Async Hooks concepts, the zone‑context framework, invoke‑tree construction, garbage collection, and practical demo code.
This article explores the V8 JavaScript engine’s architecture, from its historical origins and source‑code acquisition to its loading strategies, lexical analysis, parsing, compilation, and execution optimizations, illustrating how V8 achieves high performance in browsers and Node.js.
This article reviews the evolution of JavaScript frameworks over the past three decades, defines what constitutes a framework, explains their core concepts of constraint and support, and analyzes how changing web requirements have driven the development of modern front‑end architectures.
This article introduces RxJS, explains its reactive programming paradigm, core concepts such as Observables, Observers, Subjects, Operators and Schedulers, and demonstrates practical implementations like a draggable ball and toast notifications, providing code examples and best‑practice guidance for front‑end developers.
JavaScript, despite its evolution and flexibility, still retains three outdated features—void operator, with statement, and labels—that remain functional but are inefficient or confusing, and developers are advised to avoid using them in modern code to maintain readability and prevent bugs.
This article explains JavaScript’s event flow, detailing the three phases of capturing, target, and bubbling, demonstrates how to use addEventListener with the useCapture flag, and shows practical techniques for handling, delegating, and stopping event propagation in web applications.
This guide walks developers through DrawIO secondary development, explaining why integration is needed, how to set up Java/Ant, clone and build the source, configure dev mode, deploy via various platforms, and use core APIs like getCurrentFile and loadFile, with a starter scaffold on GitHub.
This article reviews a series of common Node.js utilities—type checking, async sleep, file handling, streams, HTTP requests, assertions, code coverage, debugging, deprecation warnings, source‑maps, child processes, and CLI testing—comparing community packages with built‑in APIs, rating their replaceability, and offering practical migration advice for modern Node.js development.
During the holiday the author introduces Chuncai, an open‑source desktop companion plugin that greets developers, displays messages, and can be customized, then provides the full JavaScript implementation, configuration details, Tuling API integration, and step‑by‑step instructions for embedding it into a web page.
This tutorial introduces full‑stack developers to distributed tracing, explaining core concepts such as spans, traces, identifiers, and trace context, and walks through a concrete JavaScript example that generates and propagates trace metadata across a browser app, API server, and background worker, while also covering logging challenges, OpenTelemetry, and Sentry’s monitoring features.
This article clarifies the misconception that JavaScript generators are only for async, explains their underlying pause‑and‑resume mechanism, demonstrates how they can model infinite sequences such as prime numbers by translating Haskell concepts, and shows practical API designs using generators.
This roundup covers the upcoming Nuxt 3 release with performance upgrades, the retirement of layui, interactive front‑end learning games, new zero‑config frameworks like siroc, a faster coloring tool Nano Colors, the unified unplugin system, Tailwind Mobile component library, plus articles on Tubi engineer culture and Rome's migration to Rust.
This article provides a comprehensive step‑by‑step guide for migrating a Vue 2 project built with Vue CLI to Vite, covering project structure analysis, removal of Vue CLI dependencies, configuration changes, handling of environment variables, alias setup, JSX support, asset handling, and additional build optimizations.
The article examines LayUI’s impending shutdown, its simple yet practical design for backend developers, distinctive visual appeal, the paid LayAdmin extension, technical limitations such as its custom module system and mobile support, and speculates on why the project is being discontinued.
The article explains how front‑end developers can prevent duplicate or stale HTTP calls by identifying identical requests with a unique key, then canceling them using Axios’s CancelToken or Fetch’s AbortController—integrated via React hooks, Axios interceptors, and route‑change cleanup.
This article explains what memory leaks are, how to identify them in Vue SPA projects using Chrome's memory tools, lists common leak patterns, and provides practical code‑level solutions—including proper event unbinding, timer cleanup, and correct use of keep‑alive—to keep your application performant.
This comprehensive guide walks you through installing Commander.js, declaring program variables, defining options (including booleans, required, variadic, and default values), creating commands and arguments, customizing help output, using hooks, handling async actions, and advanced parsing configurations for robust Node.js command‑line applications.
This article explains how to create a browser‑based 1‑to‑1 real‑time audio/video communication application using WebRTC APIs, covering media capture, SDP and ICE handling, signaling with socket.io, peer‑to‑peer connection setup, data channels, and NAT traversal techniques.
This article examines why modern frontend developers adopt frameworks, outlines their advantages and drawbacks, and then explores Web Components—custom elements, Shadow DOM, and HTML templates—as native alternatives that could potentially replace framework‑based componentization while preserving performance and compatibility.
This guide outlines ten Vue.js performance optimization techniques—including using stable keys in v‑for, freezing immutable data, defining component data as a function, lazy‑loading components, separating non‑reactive data, employing event delegation, leveraging functional components, and using provide/inject—to boost rendering speed, cut memory usage, and simplify maintenance.
WebAssembly is a portable, low‑size binary format that complements JavaScript by letting C, C++, Rust, and other languages compile to fast‑loading modules, offering near‑native speed, easy macOS setup with Emscripten, measurable performance gains such as a 1.9× speed‑up on recursive Fibonacci, and seamless interaction with JavaScript for compute‑heavy web applications.
Monaco Editor, the browser‑based code editor powering VS Code, originated in 2011 under Erich Gamma’s team, offers a lightweight editor control with rich UI widgets, and Monarch‑based syntax highlighting, and LSP‑compatible APIs, making it ideal for embedding advanced editing features into any web application.
This article explains the mathematical foundations of fractals, demonstrates how to use Canvas coordinate transformations and vector operations, and provides complete JavaScript code for drawing classic fractals such as the Koch snowflake, hexagonal snowflake, and a binary tree using recursive algorithms.
This article explains how to use the GoGoCode CLI tool to automatically convert Vue 2 projects to Vue 3 by following the official migration guide, installing the tool, running conversion commands, reviewing generated code, and handling common break‑change scenarios such as async components, custom directives, and API updates.
This article walks you through the fundamentals of abstract syntax trees, Babel, and Webpack's build process, then shows how to implement a simple mini‑webpack from scratch, install dependencies, configure the project, run the build, and verify the bundled output.
This article introduces Alibaba’s Cube technology, tracing its evolution from early hybrid native‑web approaches to a custom rendering engine that powers dynamic cards and mini‑programs on mobile and IoT devices, and outlines its architecture, tooling, quality system, and future roadmap.
This guide walks you through creating a client‑side static Wikipedia by downloading a dump, converting it to a SQLite database compiled to WebAssembly, and building a JavaScript front‑end that can be deployed on any static‑file host.
This article explains why using if‑else for state handling violates the Open‑Closed Principle, introduces the State design pattern with a light‑switch example, demonstrates its implementation in JavaScript (including class‑based and functional FSM libraries), and compares it to the Strategy pattern.
The article reviews the recent TC39 meeting, outlines the criteria for advancing proposals to Stage 4, and explains several upcoming ECMAScript features—including the relative‑indexing .at() method, Object.hasOwn, class static initialization blocks, the pipeline operator, and other proposals—providing code examples and implementation status.
This article explains how to create a reusable React hook that uses two canvas layers to let users select a region on an image, shows a gray‑out overlay with a border during selection, and returns the cropped area as a base64 PNG, including full implementation details and future enhancements.
This article explains how a quirky bomb‑plus‑poop animation for WeChat was built using the Lottie library, a quadratic trajectory, and tween.js, offering a short, open‑source example that demonstrates mobile‑friendly animation techniques.
This article explains how to create animated visualizations of 50 sorting algorithms using JavaScript and the HTML5 canvas by converting array elements into polar coordinates, randomizing their positions, and redrawing the canvas step‑by‑step during the sorting process, complete with full source code examples.
This article explains Babel's role as a JavaScript compiler, details its three‑step architecture (parse, transform, generate), introduces plugin creation using the visitor pattern with practical code examples, and demonstrates how to debug and configure Babel plugins in a front‑end development workflow.
This article explains what WebAssembly is, why it was created, how its binary format and compilation model give it near‑native speed compared with JavaScript, and provides a step‑by‑step example of building and loading a simple Wasm module.
This article introduces functional programming concepts including pure functions, currying, function composition, and declarative vs imperative code, with practical JavaScript examples and a Flickr API demo application.
This article explores Babel’s role in early ECMAScript feature adoption, explains its plugin ecosystem, compares compile‑time versus polyfill approaches, and offers practical tips to improve build performance and avoid unnecessary code duplication.
This roundup covers the Electron 14.0.0 release with new eight‑week cadence and expanded support, StackBlitz's quick Nuxt.js creation, notable open‑source libraries like react‑native‑elements and 7guis‑React‑TypeScript‑MobX, plus deep dives into NestJS practices, React Native's new architecture, Recoil state management, and a comparison of Object versus Map in JavaScript.
This article explains the challenges of managing UI state in modern web applications, demonstrates how incremental code examples lead to complex and coupled logic, and introduces XState finite state machines and statecharts as a structured solution with practical JavaScript examples and ecosystem overview.
This article explores the history and principles of functional programming, explains why it has become essential for front‑end developers, demonstrates how React class components can be replaced by functional components using hooks, and provides practical examples of pure functions, functors, monads, memoization, and related design patterns in JavaScript.
This article explains what memory leaks are in JavaScript, how to detect them using Chrome's memory tools, enumerates common causes in Vue SPAs, and provides practical solutions and code examples—including event unbinding and keep‑alive refactoring—to effectively eliminate leaks and improve performance.
The Modern.js developer survey of 612 respondents reveals that ES6+ and TypeScript dominate JavaScript usage, while React and Vue lead UI frameworks, CSS preprocessors like Less and SCSS remain popular, and tools such as Webpack, Vite, and VSCode are widely adopted across frontend and backend development workflows.
This tutorial explains how to create a fully interactive 3D maze game using CSS3D properties, matrix transformations, JavaScript mouse and keyboard controls, and a BFS algorithm to compute and display the shortest path within the maze.
This article explores the history and resurgence of functional programming, explains why it is essential for modern front‑end development, demonstrates class and function components in React, introduces hooks, functors, monads, partial application, memoization, and provides practical code examples for building robust, side‑effect‑free UI logic.
This article explains the theory and practice of handling SKU (Stock Keeping Unit) in e‑commerce platforms, covering product creation, cart selection, Cartesian‑product based SKU generation, adjacency‑matrix and set‑theory approaches, and provides complete JavaScript implementations for front‑end developers.
The 2021 ByteDance Modern Web Development survey of 612 developers reveals dominant use of ES6+, TypeScript, Vue and React, widespread adoption of CSS preprocessors, varied backend preferences, and preferred tooling such as Webpack, VSCode, and Prettier, highlighting current trends and gaps in the Chinese front‑end ecosystem.
This article explains how to enable two-way communication between React Native and H5 pages using WebView, covering message handling in both directions, code examples for sending and receiving data, and important migration notes from the built‑in WebView to react‑native‑webview.
This article explains JavaScript’s explicit and implicit type conversion mechanisms—including Number(), String(), Boolean(), toString and valueOf—through detailed code examples and clarifies puzzling expressions like [] == ![] and {} == !{}.
This article provides a comprehensive analysis of Axios, covering its core directory structure, internal request/response flow, interceptor mechanism, data transformation, adapter handling, and ways to customize or replace default behavior, illustrated with extensive source code excerpts.
This article explains how to build a high‑performance large‑file HTTP upload system with breakpoint resume, detailing server‑side C implementation, immediate disk writes, client‑side hash generation, cookie‑based IDs, and JavaScript code for chunked uploading, progress tracking, and error handling.
This article explains how ESM package distribution services convert npm packages to ESModule format, why such distribution is needed for modern browsers, the technical challenges involved, proposed solutions, and how these services can be combined with next‑generation unbundled development tools like Vite and Snowpack to dramatically speed up dependency installation and development server startup.
This article explains why HTML entities like "<" and ">" can disappear in rich‑text fields, analyzes the underlying tokenizer state machine, and provides a lightweight hack that inserts empty comment nodes to preserve the original text without breaking legacy rendering logic.
This article explains TypeScript’s @Decorator syntax sugar, showing basic examples, how the compiler transforms them into the __decorate helper, the various decorator types and factories, execution order, and the benefits and pitfalls of using decorators in frameworks like Angular and Nest.js.
This article explains how Node.js implements module loading using the CommonJS wrapper, demonstrates the role of the built‑in vm module for isolated execution, and walks through building a custom Require function with path resolution, file reading, extension handling, caching, and automatic extension resolution.
This article explains how the V8 engine parses JavaScript source code into an AST, establishes scope rules, creates isolates, handle scopes and contexts, and manages the execution context stack during interpretation and execution, illustrated with detailed code examples and diagrams.
The guide explains JavaScript/TypeScript decorators—an ECMAScript stage‑2 proposal used in frameworks like Angular, Nest.js, and TypeORM—by distinguishing the decorator pattern, function, and @syntax, demonstrating a four‑step manual implementation that logs execution time, and linking decorators to AOP, IoC, and DI concepts.
This comprehensive guide walks you through installing the WeChat Developer Tool, creating a Mini Program project, understanding its file structure, using WXML/WXSS for layout and styling, handling data binding, templates, imports, custom scripts, configuration files, sitemap settings, and event binding, all illustrated with step‑by‑step screenshots and code examples.
This article compares four popular programming languages—JavaScript, Haskell, Go, and PHP—by outlining their key advantages such as rapid prototyping, functional features, simplicity, and ecosystem support, as well as their notable drawbacks including dynamic typing, steep learning curves, lack of generics, and quirky language behaviors.
This article explains the concept of UI tearing in React, how synchronous rendering avoids it, why concurrent rendering can introduce visual inconsistencies, and illustrates the phenomenon with diagrams and code examples for developers.
This article compares three common JavaScript techniques—truthy value checks, the in operator, and hasOwnProperty()—explaining how each works, their handling of falsy values and prototype inheritance, and providing code examples and edge‑case solutions for reliable property detection.
This article explains the roles, differences, and practical usage of Prettier and ESLint in JavaScript projects, demonstrates how to configure and run them, and connects linting to clean‑code principles and effective team workflows.
This article chronicles the development of a new web live streaming solution, detailing the shift from Flash to HTML5 video, the integration of AI voice detection using hark, audio encoding with lamejs, WebRTC-based real‑time communication, and a systematic modular refactor that transformed the project into a reusable frontend framework.
This article explains the key differences between Legacy Suspense and Concurrent Suspense in React 18, covering how sibling components are handled, ref timing outside Suspense boundaries, and the impact on rendering and effects, helping developers adapt their code for the new model.
This article explains what JavaScript Promises are, their three immutable states, typical use‑cases for handling asynchronous operations, practical syntax and examples—including then and catch methods—while also highlighting their advantages over callback hell and their inherent limitations.
This article introduces the Web Audio API, covering AudioContext, audio nodes, routing graphs, various source types, processing nodes like AnalyserNode and BiquadFilterNode, as well as spatialization with PannerNode and convolution reverb, providing code examples and practical demos for frontend developers.
This article summarizes the CovalenceConf 2019 talk on VS Code’s startup performance, detailing measurement practices, code‑size reductions, lifecycle re‑ordering, V8 code caching, requestIdleCallback usage, and perceived‑performance tricks that together shrink launch time from seconds to under one second.
This article, based on the author’s experience and Martin Fowler’s book, explains what refactoring is, why it’s essential, how to spot code smells, and provides concrete principles and JavaScript examples to improve code design, readability, and maintainability without focusing on performance.
This article walks through embedding the V8 JavaScript engine into a C++ game server, demonstrates a HelloWorld example, shows how to bind C++ classes using Puerts, and explains how to compile and embed a full Node.js runtime, with complete code snippets and a GitHub repository link.
This tutorial walks through registering a WeChat public account, configuring developer information and JS security domains, creating a PHP class to obtain the JS‑API signature, setting up PHP file configuration, and embedding the required JavaScript/HTML to enable custom share titles, descriptions, links, and images on WeChat.
This article explains the concept of danmaku (bullet comments), why they improve user experience, and provides a detailed guide on implementing a danmaku system using HTML + CSS or Canvas, including stage design, track management, collision handling, and reusable code examples.
Although JavaScript runs on a single thread, it can handle asynchronous operations through mechanisms like setTimeout, and React 18’s startTransition lets developers separate urgent UI updates from deferred work, improving responsiveness by scheduling non‑urgent tasks after urgent ones complete.
This article explains JavaScript's single‑threaded nature, the various browser threads, how the event loop coordinates synchronous and asynchronous tasks, the roles of macro‑ and micro‑task queues, and how the execution stack processes them to achieve non‑blocking behavior.
This article analyzes popular programming languages—including PHP, Java, C, C++, Python, Go, and JavaScript—to help beginners decide which language to start with in 2021, highlighting each language's strengths, job prospects, and suitability for newcomers.
This article compares JavaScript's five main iteration constructs—for, forEach, map, for...in, and for...of—examining their syntax, use‑cases, performance characteristics, and how they handle break/continue, helping developers choose the most suitable method for a given scenario.
This article examines whether JavaScript destructuring assignment saves memory or runs faster than the traditional temporary‑variable swap by analyzing the creation of a temporary array, benchmarking loop performance, and discussing observed inconsistencies that may stem from JIT optimizations.
This article explains how to link start and end dates using Layui's date picker, setting the end date's selectable range from the chosen start date up to 90 days later, with detailed JavaScript code to compute and assign dynamic min and max values.
This article explores why the native setTimeout cannot achieve a true 0 ms delay, presents a postMessage‑based zero‑timeout implementation, and compares several asynchronous JavaScript techniques—including queueMicrotask, async/await, and MessageChannel—showing their performance advantages over setTimeout.
This article explains the concepts of debounce and throttle in JavaScript, illustrates their principles and typical use cases such as button submissions, search suggestions, window resize, and drag‑and‑drop, and provides practical implementations with code examples and options for immediate execution, timestamps, and timers.
This article explains the core concepts of RxJS—including Observable, Observer, Subject, and various operators—by walking through their fundamental principles, implementation details, and practical code examples that illustrate unicast and multicast data flows in reactive JavaScript programming.
While Angular, React, and Vue dominate the JavaScript scene, this article introduces three lesser‑known frameworks—Svelte, Ember, and Preact—explaining their unique approaches, core features, and code examples to help developers expand their toolkit.
This article provides an in-depth exploration of JavaScript's Streams API, covering core concepts like readable/writable/transform streams, backpressure, and practical applications such as video processing and data compression.
This article compares five JavaScript iteration constructs—classic for, forEach, map, for...in and for...of—explaining their origins, semantics, performance characteristics, and appropriate use‑cases, while providing concrete code examples and guidance on breaking, continuing, and avoiding common pitfalls.
The article reviews recent TC39 proposals—including Private‑in, Object.hasOwn, Realms, Array.findLast, ArrayBuffer Base64, and Array.groupBy—explaining their stage progress, technical details, usage examples, and potential impact on modern JavaScript development.
This article surveys essential front‑end knowledge, covering a comprehensive JavaScript algorithm curriculum, browser‑fingerprinting privacy concerns, collaborative design platforms like Figma, the Markdown‑to‑PPT tool Slidev, and a step‑by‑step guide to implementing the SLIC pixel‑art algorithm.
This article explains Taro 3's shift from a compile‑time heavy architecture to an interpretive runtime, detailing its JSX compilation drawbacks, the new runtime design that supports multiple frameworks, the implementation of a custom React reconciler, Web Components via Stencil, and how these changes improve cross‑platform development performance and flexibility.
This tutorial walks through setting up a basic Three.js project, explaining core concepts like scene, camera, and renderer, and provides step‑by‑step HTML and JavaScript code to display a simple axis helper and a wireframe sphere in the browser.
This article explains from a frontend perspective how JavaScript and native code communicate in hybrid apps, covering injection and interception bridge methods, their implementation details, SDK initialization, message flow, and native event listening with code examples and compatibility considerations.
Chrome 92, released on July 20, 2021, introduces 14 updates including the handy Array.prototype.at() method, the secure crypto.randomUUID() API, support for Display‑P3 color space in 2D canvas, and a manufacturer‑data filter for Web Bluetooth, while also upgrading the V8 engine to version 9.2.
This tutorial walks through creating a Chrome extension from scratch, setting up a Node.js WebSocket server with Express and Socket.IO, and wiring the extension’s background, content‑script, and popup scripts together so they can exchange messages and automate browser actions.
This article outlines a practical approach for implementing high‑performance large file HTTP uploads with breakpoint resume, covering server‑side C implementation, client‑side hash generation, progress tracking, chunked uploads using HTML5 File.slice, and detailed JavaScript code examples for robust file transfer.
Node.js 16.5.0 introduces an experimental Web Streams API, updates core modules like fs, upgrades npm to 7.19.1, and adds numerous build improvements for better performance, scalability, and compatibility across platforms.
The article introduces the Vue v‑timely‑validate directive, explains how it shifts form validation from blur to change for faster error clearance, outlines form structure, validation principles, usage steps, and provides complete code examples for seamless integration into i‑form components.
This article surveys the most interesting ECMAScript proposals—ranging from new data structures like Record & Tuple to syntax enhancements such as the pipeline operator—explaining their purpose, current stage, and practical examples, while also covering the TC39 process and related background for front‑end developers.
This article explains the core concepts of RxJS—including Observable, Observer, Subject, and various operators—by walking through their definitions, basic usage, static creation methods, and detailed implementation with JavaScript code examples, while comparing unicast and multicast behaviors.
This guide explains the roles of import and export in ES modules, demonstrates static and dynamic import syntax with code examples, and advises when to use dynamic imports for large modules in modern browsers and Node.js.
This article explains how to share UI modules via NPM packages and Module Federation, compares traditional iframe approaches, dives into low‑level and high‑level concepts, demonstrates practical webpack configurations, version‑selection strategies, and runtime loading mechanisms with detailed code examples.
This article traces the ten‑year evolution from Emscripten’s early C++‑to‑JavaScript compiler through asm.js to modern WebAssembly, highlighting key milestones, technical challenges, performance optimizations, and real‑world applications such as games, AutoCAD, and Google Meet, while providing code examples and installation steps.
