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.
This article explains how to build a Chrome extension that monitors TAPD bug and task status changes and automatically sends notifications to a DingTalk group via a webhook, reducing average resolution time from 4.8 to 2.9 hours and improving testing efficiency.
This guide walks through embedding an OpenLayers HTML page that visualizes vehicle navigation with image rotation into an Android app using WebView, configuring the view to enable JavaScript execution and pinch‑to‑zoom, and provides complete layout and Java code snippets.
This guide shows how to configure permissions, enable cleartext traffic, create a JS page, import the fetch module, and use fetch.fetch in the onInit lifecycle to retrieve JSON data from an external API and display it in a HarmonyOS UI.
This article introduces OpenCV.js, explains its basic concepts and demonstrates a complete workflow for detecting and correcting paper images in the browser using JavaScript, including matrix handling, resizing, filtering, edge detection, contour analysis, perspective transformation, and discusses challenges such as noise and incomplete edges.
This article explains a four‑level methodology for choosing JavaScript‑based machine‑learning tools, demonstrates practical code examples ranging from NLP with nlp.js to deep‑learning with TensorFlow.js, traditional ML with mljs, and statistical computing with stdlib, and shows how to run them entirely in the browser.
This article explains how to add a Gitalk-based comment feature to a Docsify‑generated documentation site, covering Gitalk fundamentals, GitHub OAuth app setup, integration steps, custom JavaScript tweaks for URL handling, common pitfalls, and a detailed appendix of configuration parameters.
This article reviews the most suitable programming languages for web development, comparing JavaScript, Python, PHP, Java, and Ruby, and explains why each language is favored for different aspects of building modern web applications.
This article explains the async/await syntax, compares it with traditional Promise chains, and outlines six practical advantages—including conciseness, unified error handling, clearer conditional logic, easier intermediate value handling, better stack traces, and simpler debugging—illustrated with real JavaScript code examples.
This guide shows how to import the HarmonyOS storage module, use its get and set methods, and integrate them into a todo‑list app’s lifecycle so that tasks are saved across sessions, with full code examples and screenshots of the result.
This tutorial walks through creating a full-featured Todo List app in HarmonyOS, covering page navigation, HML layout, data binding with for-loops, switch components, computed properties, event handling in JavaScript, and the accompanying CSS styling.
This article demonstrates three Vue decorators that use async/await to transparently manage component initialization status, add debounce and loading indicators to button clicks, and control the visibility of the component before the mounted hook finishes, with full TypeScript examples.
This article explains how to use Webpack's code splitting techniques—including multiple entry points, the SplitChunksPlugin, dynamic imports, and magic comments—to break large bundles into smaller chunks, reduce duplicate dependencies, and improve loading performance in modern frontend applications.
This article explains what an Abstract Syntax Tree (AST) is, demonstrates how JavaScript code is transformed into an AST, describes the tokenization and parsing steps used by PostCSS to generate a CSS AST, and shows how plugin mechanisms like AutoPrefixer can extend the toolchain.
This article explains what JSBridge is, details its implementation using URL interception and iframe tricks, and walks through the full communication flow between a WebView and native code on iOS, including code examples for registration, message handling, and callbacks.
The article proposes a unified cross‑platform front‑end API specification and SDK that abstracts differences among WebView, mini‑programs, React Native, Flutter, and other containers, consolidating 55+ APIs for 30+ apps, reducing duplicated code, maintenance, and testing while enabling extensible, reusable functionality across Alibaba’s ecosystem.
This article explains the complete lifecycle of JavaScript execution in the V8 engine, covering language fundamentals, AST generation, bytecode compilation, interpretation, just‑in‑time optimization, hidden classes, inline caches, and other performance strategies used by both browsers and Node.js.
This article compares the tree‑shaking mechanisms of Rollup and Webpack, explains the three stages Webpack uses (UglifyJS, BabelMinify, Terser), details side‑effects handling, configuration tips, and performance benchmarks, providing practical guidance for optimizing bundle size in modern JavaScript projects.
After creating a Hello World app with JavaScript on HarmonyOS, this guide details the project’s directory layout, configuration files, lifecycle hooks, path conventions, and demonstrates how to load i18n resources and render a data list with concrete code examples.
This guide explains how Zabbix 4.4+ lets you use custom JavaScript in webhook media types to send alert notifications, details the built‑in Zabbix objects, shows configuration steps, data validation, logging rules, and provides a complete DingTalk webhook script with testing instructions.
This article explains why React Hooks were introduced, walks through the fundamentals of useState and useEffect with clear code examples, and demonstrates how Hooks simplify state management, side‑effects, and component logic compared to traditional class components, enabling more maintainable frontend development.
This article reviews Google’s CSS fundamentals course, dives into React 18’s automatic batching, the new Suspense SSR architecture, the startTransition API, suggests a lightweight VS Code API client, and explains the basics of building user profiles for recommendation systems.
The article explains how to design and implement ESLint and StyleLint plugins for the San‑Native framework, detailing AST generation, processor creation, rule definitions for JavaScript and CSS, configuration sharing, and how these tools provide real‑time linting feedback for developers.
This article explains practical JavaScript naming conventions—covering camelCase, constant capitalization, acronym handling, meaningful and expressive names, verb consistency, boolean naming, and class naming—while providing numerous code examples to illustrate good and bad practices for clearer, maintainable code.
This article reviews the 2021 top five frontend JavaScript frameworks—React, Vue, Angular, Ember, and Preact—based on Stack Overflow surveys, State of JS, and NPM trends, explaining their origins, features, and adoption by major companies.
This article chronicles the ten‑year evolution from Emscripten’s C++‑to‑JavaScript compiler through asm.js to the modern WebAssembly standard, highlighting key milestones, performance challenges, and real‑world applications that have reshaped what browsers can achieve.
This article dissects Node.js Readable streams, explaining their initialization, internal state management, the distinction between flowing and paused modes, and how back‑pressure is handled, all illustrated with real source‑code examples and diagrams.
This article explains how Webpack loaders work, outlines development guidelines, demonstrates synchronous, asynchronous, raw, and pitching loaders with code examples, and then guides you through creating and configuring custom plugins, covering hooks, async handling, and a practical build‑info plugin.
This article explains how React synthetic events emulate native DOM events, details the event system architecture, provides core registration and execution code, demonstrates mixing with native events, and discusses the benefits and known issues of the synthetic event model.
This step‑by‑step tutorial shows how to create a dark‑mode toggle for a web page using HTML structure, CSS styling (including dark‑mode rules), and a small JavaScript script that adds or removes the dark class on user interaction.
This article explains the complete workflow for implementing SourceMap‑based exception monitoring across web and cross‑platform systems, covering transformer, bundler, minifier, runtime support, log collection, error deobfuscation, and the limitations of SourceMap in debugging and performance contexts.
The Node.js 14.17.1 LTS release introduces updated ICU to version 69.1, aligns source‑map stack traces, refactors several core modules for safety, improves benchmark performance, and fixes numerous build and runtime issues, providing a more stable and efficient JavaScript runtime for server‑side applications.
This article explores the historical reasons behind JavaScript's event loop, explains the task and microtask queues, compares browser and Node.js implementations, and provides concrete code examples to illustrate how tasks are scheduled and executed across environments.
This article explains Vue’s reactive system, compares Vue 2.6’s Object.defineProperty approach with Vue 3’s Proxy implementation, details how observers are defined, collected, and triggered, and shows why the asynchronous update queue improves performance and maintainability.
