Webpack transforms entry files into modules through four stages—create, add, build, and processDep—where it generates a module instance via factory hooks, registers it in the compilation, runs loaders and parses the source into an AST, groups and resolves dependencies, and finally prepares the modules for bundling.
This article introduces Puppeteer, a Node library for controlling Chrome, and demonstrates its use in automating web performance analysis and scraping tasks.
The article explains how React Node Desktop (RND) combines React JS, Node.js, and a native UI engine to enable lightweight, cross‑platform desktop apps, then details React Fiber’s architecture—its tagging, workloop, update and commit phases—and describes RND’s JS‑native messaging, bundle splitting, animation support, and future relevance for JavaScript‑driven desktop UI.
This article explains how Webpack's Hot Module Replacement works, covering its benefits, the build and watch processes, the role of webpack-dev-middleware and webpack-hot-middleware, and provides detailed code examples to illustrate the communication between the server and the browser.
This tutorial shows how to convert a traditional class‑based Redux component into a modern functional component using React hooks, covering refactoring to a function component, reading state with useSelector, dispatching actions with useDispatch, and providing complete code examples.
This tutorial explains six different approaches—using z-index, opacity, borders, box‑shadow, element cloning, and canvas—to create a guide overlay (mask layer) that highlights specific page areas without relying on image assets, complete with code examples and visual demos.
This article explains how to create a high‑stability image magnifier in Vue by calculating mask positions based on mouse events, moving the background image accordingly, and optimizing performance with initialization checks and scroll handling, providing full source code and usage instructions.
This article explains the three-stage execution process of JavaScript in V8, compares interpreter and compiler approaches, describes how the JIT combines their strengths, and provides practical tips for writing JavaScript that maximizes performance by leveraging V8’s optimization mechanisms.
This article compares five JavaScript diagramming libraries—DHTMLX, JointJS, Rappid, yFiles for HTML, Google Charts, and GetOrgChart—by examining their features, documentation, and user experience to help developers choose the right tool for creating online organizational charts.
This article explains the main factors that drain battery power on mobile and laptop browsers and provides practical front‑end techniques—such as minimizing timers, using CSS animations, leveraging visibility APIs, and optimizing network requests—to keep web pages energy‑efficient and extend user device battery life.
Although both browsers receive identical data, Chrome and Firefox display sorted results differently due to their distinct underlying sorting algorithms—Firefox uses merge sort while Chrome employs a hybrid of insertion and quick sort—this article explains the issue, demonstrates implementations, and compares performance and optimization techniques.
This article provides an extensive, categorized catalog of JavaScript libraries and tools for front‑end development, covering package managers, loaders, bundlers, testing frameworks, UI components, data visualization, storage, internationalization, security, and many other functional areas of modern web programming.
This article explains the inner workings of Babel, the JavaScript compiler, outlines what syntax it transpiles versus what requires polyfills, describes its three compilation stages, demonstrates AST generation and tokenization, and provides step‑by‑step examples of creating simple Babel plugins for code transformation.
This article explains how modern browsers now support native ES2015 modules, why earlier performance concerns were based on outdated tests, and provides detailed guidance on using Rollup, code‑splitting, dynamic imports, modulepreload, and polyfills to achieve faster, smaller, and future‑proof web applications.
This article introduces the concept of React Hooks, explains the built‑in hooks such as useState, useEffect, useCallback, useMemo, useRef, and useContext, demonstrates their usage with complete code examples, and guides readers on creating their own custom hooks for reusable logic in functional components.
This article explains how to use AST in JavaScript by introducing three essential components—a parser, a traverser, and a code generator—showcasing practical examples with esprima and Babel to parse, modify, and regenerate code, and exploring advanced use cases such as removing console statements, variable obfuscation, arrow‑function conversion, tree‑shaking, and generating SVG flowcharts, while also highlighting AST applications in other languages.
Understanding JavaScript's Abstract Syntax Tree (AST) is crucial for modern code analysis, enabling tools like Babel, ESLint, and Webpack to parse, transform, and generate code beyond regex, with a clear process from lexical analysis to syntax analysis and standardized specifications such as ESTree.
This article introduces the Kangax ES compatibility table, showing how to view new ECMAScript features, their support across browsers and Node.js, and explains the table’s layout, version selectors, and color‑coded compatibility indicators for developers seeking up‑to‑date feature information.
This article explains how to use simple shapes like circles and rectangles for fast 2D collision detection, reviews vector mathematics, provides a reusable Vector2d class with operations such as addition, subtraction, length, dot product and rotation, and shows concrete JavaScript code for circle‑circle, circle‑rectangle (both axis‑aligned and rotated) and rectangle‑rectangle collisions using AABB and OBB techniques.
The article details Webpack’s loader execution pipeline, showing how a shared loaderContext is built for each module, how the loader‑runner pitches loaders in order, then processes the resource and runs each loader’s normal method from right to left, handling synchronous, Promise‑based, and async callbacks via runSyncOrAsync.
This article explains how modern Web Components—custom elements, Shadow DOM, slots, and native element extensions—provide a framework‑free way to build reusable UI, offering better performance, true CSS scoping, and progressive enhancement while discussing when abandoning traditional frameworks makes sense.
This article provides a comprehensive guide to JavaScript functions, covering their various forms, execution contexts, scope chains, arguments handling, return values, the dynamic this keyword, and advanced functional programming techniques such as currying, decoration, and function composition.
This article provides a comprehensive guide to JavaScript’s object model, covering object literals, constructor functions, prototype inheritance, prototype chains, and practical coding patterns, illustrating how to create, extend, and manage objects efficiently in modern frontend development.
This article explains JavaScript’s object model, contrasting class‑based and prototype‑based paradigms, and shows how to create objects with literals, constructor functions, and prototypes, covering property access, method sharing, inheritance, the prototype chain, __proto__, and Object.create for clean, maintainable code.
This article describes the design and architecture of a front‑end monitoring platform, detailing its JS SDK, data analyzer, web UI, reference log‑collection architectures, use of Kafka, MySQL, Hive and HBase, scaling considerations, storage conventions, and operational best practices.
The article explains Webpack loader configuration by detailing rule definitions, inline loader syntax, the symbols that control loader inclusion, the internal parsing and matching process that groups pre, normal, and post loaders, and practical tips for ordering and debugging complex builds.
RND (React Node Desktop) is a lightweight cross‑platform desktop framework that merges a React‑based JavaScript layer, an embedded V8‑powered Node runtime, and a native UI engine (Lyra with Yoga layout), employing a dual‑thread model, shared V8 isolate, asynchronous bridge, modular resource handling with hot‑update, and integrated Chrome/VSCode/Electron debugging.
This article explains how JavaScript engines hoist function and variable declarations, compares the behavior of var, let, and const during creation, initialization, and assignment, and demonstrates the resulting runtime errors and output through clear code examples.
This article explains why and how to use various JavaScript design patterns—such as module, revealing module, ES6 modules, singleton, factory, and decorator—by describing their purpose, benefits, and providing clear code examples while warning against over‑use.
This article explains JavaScript Promises, covering their purpose in avoiding callback hell, the core API (constructor, then, catch, static methods), practical code examples, chaining behavior, comparison with callbacks and async/await, and even a custom implementation, providing a comprehensive guide for frontend developers.
Electron 6.0, the newest stable release, brings Chromium 76, Node.js 12.4, V8 7.6, enhanced Promise support, async dialog APIs, new shell.showItemInFolder, and numerous API improvements such as excludedFromShownWindowsMenu, all_frames support, Linux preview, Touch ID, and more, all installable via npm.
Webpack resolves every import by mapping the request string to an exact file path through a configurable chain of resolver plugins for normal modules, node_modules packages, and loaders, and developers can speed up builds by using aliases, limiting module directories, and keeping extensions short.
The article presents a scalable ESLint‑based framework for large front‑end teams that combines a layered, unified rule configuration, CI/CD and pre‑commit lint checks, a one‑click onboarding CLI, and automated metrics collection with dashboards, enabling consistent code standards across diverse projects while reducing maintenance overhead.
This article reveals eight lesser‑known DOM and Web API features—such as addEventListener options, smooth scrollTo, optional timer arguments, defaultChecked, normalize/wholeText, insertAdjacent methods, event.detail, and scrollHeight/scrollWidth—explaining their purpose, browser support, and providing practical code examples.
This article explains how to calculate object positions using a parabolic formula, generate multiple translucent shadows to simulate motion blur, and implement the entire effect with JavaScript, covering parameter selection, acceleration calculations, and practical code examples for smooth front‑end animations.
This article explains the inner workings of Tapable—the hook library behind Webpack—by detailing its synchronous and asynchronous hook types, registration and invocation methods, the lazy‑compilation code‑generation process, and how these mechanisms give Webpack a performance edge over naïve event loops.
This article explains the evolution of Google V8's Promise implementation, details the JavaScript single‑threaded event loop with macro‑ and micro‑tasks, describes various programming models, and walks through the internal V8 code that realizes Promise construction, chaining, and utility methods such as Promise.all and Promise.race.
This article explains how the V8 JavaScript engine generates machine code for floating‑point addition on Intel x64, covering V8’s architecture, the IEEE‑754 representation that causes precision loss, and a step‑by‑step analysis of the relevant C++ source and the resulting addsd instruction.
This article reviews the evolution of front‑end programming languages, discusses why extreme attitudes toward language choice hinder productive discussion, explains how platform constraints shape language selection, examines the strengths and weaknesses of JavaScript, Java, and Objective‑C, and predicts increasing convergence and cross‑platform trends among modern front‑end languages.
The article dissects Webpack’s internals, showing how every asset becomes a module processed by loaders, how the bootstrap creates a __webpack_require__ function to link modules, how dynamic import() generates separate chunks loaded via script tags, and outlines the full compilation pipeline from configuration parsing to final asset emission.
This article walks through the background, monetization considerations, and detailed implementation steps—including canvas creation, enemy and player sprites, movement, collision detection, and touch handling—required to develop a basic WeChat mini‑game, with full code snippets and resource links.
This article introduces MXFlutter, a JavaScript‑based dynamic framework that enables full‑runtime UI updates for Flutter apps on iOS, explains its architecture, code implementation, performance advantages over Dart VM, and discusses rendering optimizations, memory management, threading, and developer ergonomics.
Front‑end monitoring must capture JavaScript runtime errors, resource loading failures, unhandled promise rejections, and asynchronous request issues using window.onerror, error event listeners, unhandledrejection handlers, and fetch/XHR wrappers, while also handling framework‑specific hooks and cross‑origin script restrictions through CORS or manual try‑catch reporting.
This article explains JavaScript’s event mechanism, distinguishes macro‑ and micro‑tasks, and provides a comprehensive guide to using Promises—including their states, API methods like then, catch, finally, and utilities such as all, race, with practical code examples and common pitfalls.
This article explains the Template Method design pattern, illustrates it with real-world soup recipes, provides JavaScript code simulations for both abstract and concrete classes, compares the processes, and discusses abstract class limitations in JavaScript, offering a clear guide to implementing the pattern.
Understanding how JavaScript engines work—covering scopes, closures, and the event queue—empowers developers to debug more effectively and write more efficient code, and this guide offers a clear, beginner‑friendly overview that bridges theory and practical application.
This tutorial explores why the .reduce() method feels intimidating, demonstrates its basic usage with addition and multiplication, and then showcases five unconventional applications—including converting arrays to objects, flattening nested arrays, performing dual calculations in a single pass, merging map and filter, and sequencing asynchronous calls—while providing clear code examples and performance considerations.
Mpx 2.0 is an enhanced mini‑program framework that provides full cross‑platform support for WeChat, Alipay, Baidu, Toutiao and QQ, enabling developers to compile existing WeChat projects and native components to other platforms while offering sub‑package optimization, conditional compilation, setData efficiency and near‑zero migration effort.
Discover how a playful setTimeout‑based sorting trick leverages JavaScript’s event loop to produce correct ordering, while explaining the core concepts of synchronous vs asynchronous tasks, the execution stack, task queue, and why this method isn’t practical for large datasets.
This article explores JavaScript functions as first‑class citizens, detailing how to set default parameter values in ES5 and ES6, the impact on the arguments object, the temporary dead zone for defaults, and the usage and constraints of rest parameters with practical code examples.
This article explains why JavaScript developers often avoid bitwise operators, highlights the specific scenarios where they provide performance and code‑size benefits—such as fast integer conversion with x|0, using ~ for -1 checks, creating bit fields, and leveraging them in databases and BigInt.
This article introduces GraphQL as a query language for APIs, explains its history, shows how to define a schema and resolvers with graphql‑js, demonstrates query execution, error handling, built‑in types, and presents useful development tools such as GraphiQL and graphql‑import.
This article explains Vue.js computed properties and watchers, detailing their definitions, usage scenarios, code examples, differences, deep and immediate options, and when to prefer one over the other for reactive front‑end development.
This article explains why Safari on iOS throws “Invalid Date” for date strings like “2018‑12‑10 11:11:11”, demonstrates the incompatibility with Chrome, and provides a simple regex‑based solution to convert the format so the date parses correctly across browsers.
Learn how to enable static type checking for JavaScript in Visual Studio Code using JSDoc comments, covering configuration, type definitions, generics, type casting, and runtime safeguards to improve code reliability without a separate build step.
This article reviews the top ten programming languages, explains why learning multiple languages matters, and offers practical advice on choosing the most beneficial language for your career, covering Java, JavaScript, Python, Kotlin, Go, C#, Swift, Rust, PHP, and C/C++.
The article chronicles San, Baidu’s MVVM framework, detailing how template parsing, hotspot pre‑heating, cloneNode element creation, property‑handler caching, traversal interruption, list‑rendering shortcuts like trackBy, and numerous micro‑optimizations such as avoiding call/apply and extra loops collectively boost view creation and update performance.
This article explains React Hooks introduced in version 16.8, their backward‑compatible design, how they replace class components, and provides detailed guidance on using useState, useEffect, custom hooks, useReducer, useRef, useMemo, useCallback, and related linting rules with performance‑focused examples.
The article summarizes the latest JavaScript enhancements presented by the V8 team at Google I/O, covering massive async performance gains, new engine components like TurboFan and Orinoco, and a suite of language features such as class fields, private members, numeric separators, bigint, extended Intl APIs, top‑level await, Promise.allSettled/any, and WeakRef, illustrated with practical code examples.
RedMonk's Q1 2019 language ranking, based on GitHub and Stack Overflow data, reveals JavaScript topping the list, modest shifts among the top 20, and highlights notable moves such as TypeScript's rise and Kotlin's surge into the top‑20.
This guide walks through building an electronic business card in a WeChat Mini Program with Cloud Development, covering account setup, data CRUD, single‑ and multi‑image upload, AI‑powered OCR, custom QR‑code generation for sharing, and automated template‑message alerts when the card is viewed, demonstrating reduced backend effort.
This article reviews ten high‑performance JavaScript chart libraries—amCharts, AnyChart, Chart.js, Chartist.js, D3.js, FusionCharts, Google Charts, Highcharts, Plotly.js, and ZingChart—detailing their main features, pricing models, and where to find documentation, helping developers choose the best tool for their data‑visualisation needs.
This article explains what an Abstract Syntax Tree (AST) is, its role in JavaScript tooling such as Babel, UglifyJS, and type checking, details the lexical and syntactic analysis stages of AST generation, and demonstrates a practical Babel plugin example that modifies console output using visitors.
This article explains the fundamentals of AJAX, including its definition, the need for asynchronous communication, how form submissions work, the XMLHttpRequest object methods and properties, jQuery implementations, advantages, disadvantages, and typical application and non‑application scenarios, with complete code examples.
This article explains the concept of AJAX, why asynchronous communication is needed, how to submit forms and handle server responses using raw XMLHttpRequest and jQuery, compares GET and POST methods, and outlines the benefits, drawbacks, and suitable scenarios for AJAX in web development.
This article explains why front‑end monitoring is essential for user experience, outlines the key data types to collect, and provides practical AOP‑based implementations for route changes, JavaScript errors, performance metrics, resource failures, API calls, and reliable log reporting.
This article explains JavaScript’s single‑threaded event loop, detailing how the call stack, macro‑ and micro‑task queues, and asynchronous APIs cooperate to schedule code execution, illustrated with diagrams and a step‑by‑step example.
This guide explains the fundamentals of HTML5 Canvas, covering how to obtain the canvas and its context, draw rectangles, lines, circles, clear the canvas, and manipulate images with drawImage and clipping, all illustrated with clear examples and code snippets.
The paper presents a custom JavaScript automatic binding tool for iQIYI’s React Node Desktop framework that parses C++ headers with libclang, applies user‑written YAML rules, generates multi‑inheritance‑aware wrappers via the Mate abstraction, and abstracts engine specifics through a Node‑Addon‑API‑based common layer to support both V8 and JavaScriptCore.
The guide walks through creating a full‑stack markdown publishing system for a WeChat mini‑program using Cloud Development, detailing project initialization, defining an “article” collection, importing .md files via cloud functions, displaying lists, rendering markdown on detail pages, and debugging cloud functions without a separate backend.
This guide explains how to integrate Tencent's iHearing speech‑evaluation plugin into a WeChat mini‑program, covering plugin installation, configuration in app.json, JavaScript API usage, UI markup for word and sentence assessments, and handling of evaluation results.
This article details the practical implementation of the 360 AI speaker's landing page, covering screen‑resolution analysis, large‑image rendering choices, responsive rem‑based typography, HTML structure, CSS positioning, custom web‑font integration, and a pure‑CSS sticky‑footer solution, all built under tight time constraints.
The guide shows how to create a WeChat community mini‑program with cloud development that lets users post text and up to six images, implements home, publishing, and personal‑center pages, handles data pagination, image preview and deletion, stores posts in cloud collections, manages user authorization and avatar display, and addresses typical permission and refresh problems.
This article analyzes the challenges of reproducing external‑network bugs, outlines common failure causes, and presents a complete design for a JavaScript SDK that records environment data, AJAX calls, errors, and user actions, stores them in IndexedDB, and visualizes the timeline for efficient troubleshooting.
This article explores blockchain programming fundamentals, compares public and permissioned chains, reviews major development platforms, and evaluates the top five languages—C++, JavaScript, Python, Go, and Solidity—highlighting their strengths, weaknesses, and real‑world blockchain applications.
The article introduces Tencent’s open‑source Omi framework, a next‑generation frontend solution built on Web Components that enables developers to write code once and deploy it across desktop web, mobile H5, and various mini‑program platforms, highlighting its features, setup commands, debugging tools, and React‑to‑Omi component conversion.
This article explains what JavaScript Promises are, their immutable states, advantages and drawbacks, details the constructor, instance and static methods, provides code examples, and walks through the source implementations of resolve, reject, all, and race.
This article explains the four new ES2018 regular‑expression features—lookbehind assertions, named capturing groups, the dotAll (s) flag, and Unicode property classes—showing how they work, when to use them, and providing clear JavaScript code examples.
The guide explains how to combine WePY’s Vue‑style component model with Tencent Cloud Development—showing project initialization, cloud‑function setup, common pitfalls, and a token‑caching example—so developers can build and launch a full mini‑program in roughly 24 hours while competing for best‑practice prizes.
This article introduces React Hooks, explains how they enable state and other React features without classes, provides official resources, outlines migration advice, details supported packages, tooling integrations, testing APIs, installation methods, and summarizes the changelog and post‑alpha updates for the stable 16.8 release.
This article explains the concepts, implementations, and practical use cases of debounce and throttle in JavaScript, showing how they limit function call frequency to improve front‑end UI performance for events such as scrolling, resizing, and input handling.
This article compiles a comprehensive set of regular expressions for validating numeric values, character strings, and various special formats such as emails, URLs, phone numbers, and monetary amounts, providing developers with ready‑to‑use patterns to streamline data validation tasks.
This article introduces Nomi.js, a lightweight Node.js micro‑framework built on Koa2, explains its design goals and pain‑points it solves, outlines its key features, and provides step‑by‑step instructions with code examples for installing the CLI, initializing a project, and creating MVC‑style controllers and services.
This article explains how to create a first‑login guided tour using the intro.js plugin in a Bootstrap project, configure its options, and employ cookies to display the tour only on the user’s initial visit.
This article explains the MEAN stack—MongoDB, Express.js, AngularJS, and Node.js—detailing each component, comparing it with LAMP/LNMP, and highlighting its JavaScript‑centric, cost‑effective, open‑source advantages for modern web development.
The article examines the perceived conflict between JavaScript and CSS/UX developers, explains how community segregation and social media amplify the divide, and proposes practical steps for fostering collaboration and reducing the "JS vs CSS" war in front‑end development.
The article introduces the major ES2018 additions—including rest/spread properties, asynchronous iteration, Promise.prototype.finally, and four RegExp enhancements—explains their syntax and usage with examples, and lists Node.js versions that support each feature, helping developers adopt the latest JavaScript capabilities.
This article presents a JavaScript solution for locating the maximum element in a bitonic (first increasing then decreasing) array, explaining that the problem is a variant of binary search and providing a complete implementation using a binary‑search‑based algorithm.
This article walks through the evolution of JavaScript asynchronous patterns—from basic callbacks and their pitfalls, through Promise creation, chaining, and error handling, to the modern async/await syntax—showing how to write clear, maintainable code for real‑world API calls.
This article walks through the theory of k‑nearest‑neighbors, explains feature selection and normalization, shows how to implement the algorithm with plain JavaScript classes, visualizes results on an HTML canvas, and discusses practical limitations and extensions.
The article describes how to quickly build a lightweight WeChat Mini Program for note‑taking using Cloud Development, covering registration, cloud setup, and core code for creating, querying, and editing notes with text and images, while eliminating the need for separate servers, domains, and certificates.
The article forecasts the major technology trends for 2019, highlighting the rise of artificial intelligence, the transition beyond smartphones to wearable interfaces, global 5G deployment, the surge of progressive web apps, expanding blockchain applications, low‑code development, cloud services growth, and the continued dominance of JavaScript and modern development practices.
This article introduces Chrome DevTools console shortcuts—including $0‑$4 for element references, $ and $$ for query selectors, $_ for the last expression result, and $i for importing npm libraries—explaining their usage to streamline front‑end debugging and testing.
This article explains how Web Workers enable true multithreading in browser JavaScript, covering their API, communication methods, limitations, practical use cases, and compatibility, helping developers prevent UI blocking and improve user experience.
The article presents 19 practical recommendations for Node.js developers in 2019, covering type systems, linters, architecture, async hooks, serverless, emerging JavaScript features, API design, testing strategies, security, package management, deployment, Kubernetes, blockchain, machine learning, open‑source exploration, Linux internals, and scientific learning methods.
The article presents ARES, JD.com's cross‑platform mobile application framework comprising Engines, Websites, Studio, Store, and Console, and details its mini‑program conversion tool that bridges ARES Engines with WeChat mini‑programs through command‑line usage, AST manipulation, runtime integration, component alignment, third‑party library support, routing, animation, and conversion constraints.
HTM is a pure‑JavaScript library that implements a JSX‑like syntax without a compiler, offering sub‑kilobyte bundle sizes, seamless integration with React/Preact, ergonomic syntax enhancements, and a new Babel plugin that dramatically improves performance and flexibility for frontend developers.
This article explains how to register a website as a share target using the Web Share Target API, update the manifest file, handle incoming shared data with JavaScript, and outlines browser support, usage scenarios, and example implementations for modern front‑end development.
This article introduces the Web Share API, explaining its purpose, syntax, usage examples, browser compatibility, and best practices for integrating native sharing functionality into mobile web pages; it also covers required HTTPS conditions, user‑gesture triggers, and provides sample ES6 code snippets for developers.
This article explores how WebAssembly, compiled via Emscripten from C/C++ code, can accelerate file‑scanning tasks in a web‑based email attachment uploader, detailing the compilation pipeline, runtime communication, performance benchmarks against pure JavaScript, and practical optimizations for worker‑based processing.
