This article explains how to use the new Picture-in-Picture Web API to enable floating video playback on web pages, covering setup of video and button elements, request handling, error management, event listeners, window‑size tracking, feature detection, and best‑practice UI considerations.
Learn how to create reusable, encapsulated UI components using Web Components by building a simple counter element with Custom Elements, Templates, Shadow DOM, properties, events, and attributes, and see how to integrate it into any framework, handle data binding, and dispatch custom events.
The article details a production‑ready Hybrid app bridge built with a custom bridge.js that enables bidirectional communication between Native code and H5 pages, outlines its four‑step nativeCall flow, Android compatibility tricks, protocol categories, event hub, proxy requests, and a suite of reusable functional APIs.
The article explains how to use a custom URL schema together with a WebSocket channel to let a web page detect whether a mobile app is installed, attempt to launch it, and fall back to downloading the app when the launch fails, including practical blur‑event tricks.
This article introduces the most frequently used encryption techniques in frontend development—including Base64 encoding, hash functions, salting, slow hash algorithms, key‑hashing, XOR, symmetric and asymmetric encryption, digital signatures, and practical CryptoJS usage—explaining their principles, appropriate scenarios, and providing ready‑to‑use code examples.
On October 23, React 16.6.0 was released, introducing React.memo for function components, React.lazy with Suspense for code‑splitting, a simpler static contextType API, new error‑boundary methods, and deprecations in StrictMode, along with installation instructions and a detailed changelog.
This guide explains how to calculate viewport dimensions for different operating systems and browsers, use CSS viewport units and media queries to create a single-page design that adapts smoothly across desktop and mobile screens, and provides Sass functions and JavaScript logic for robust implementation.
This article explains the differences between macrotasks and microtasks in the JavaScript event loop, shows how they affect Promise execution, provides practical code examples, and discusses how frameworks like Vue implement task scheduling, helping developers avoid dead‑loops and improve performance.
This article explains how JavaScript reference equality for objects and functions affects React's shallow prop and state comparison, shows common pitfalls that cause needless re‑renders, and provides practical techniques—such as defining functions outside components and caching event listeners—to dramatically improve rendering performance.
This article explains how Lighthouse can measure JavaScript execution time, reveal unused code through coverage, and offers practical steps—such as sending only needed scripts, minifying, and removing dead code—to reduce JavaScript overhead and improve user experience on web pages.
This article examines why console.log may produce surprising results in different Chrome DevTools states, explains the underlying asynchronous I/O handling, and offers practical debugging advice for developers working with JavaScript in the browser.
JavaScript’s NaN represents undefined numeric results, appears when operations like Math.sqrt(-1) occur, has multiple binary forms, and is distinguished as Quiet or Signaling; because NaN !== NaN, comparisons rely on special checks such as isnan, with implementations varying across environments like V8 and Apple’s C library.
This article provides a comprehensive guide to using Jest for front‑end unit testing, covering the lack of tests, benefits, installation, basic assertions, matchers, asynchronous testing, lifecycle hooks, mock functions, module mocking, snapshot testing, and best practices to improve code quality and development efficiency.
V8 7.0, released on October 15, introduces memory‑saving Embedded built‑ins across platforms, preview support for WebAssembly threads via chrome://flags, new JavaScript features such as Symbol.prototype.description and a stable Array.prototype.sort using TimSort, plus API changes accessible through git logs and checkout commands.
This article introduces the "wave fluctuation equal distribution" algorithm that splits a value into N parts within a bounded range with random variation, explains its characteristics, and provides two JavaScript implementations—an exhaustive enumeration method and a fast random allocation method—along with performance analysis and validation techniques.
This article provides a comprehensive walkthrough of React‑Router's internal architecture, detailing the implementation of key components such as Router, Route, Switch, Redirect, Prompt, Link, and withRouter, while explaining how history, matchPath, and path‑to‑regexp work together to enable client‑side routing in modern React applications.
This article explains how Mozilla optimized the Firefox engine to dramatically speed up function calls between JavaScript and WebAssembly by reducing bookkeeping, eliminating trampolines, merging activations, applying monomorphic call optimizations, and improving built‑in function handling, resulting in call performance that now exceeds native JavaScript‑to‑JavaScript calls.
The article explains the Virtual DOM as a lightweight JavaScript object with tag, props, and children, shows how JSX compiles to VD using a custom pragma, provides helper functions to create real DOM from VD, and outlines how batching updates reduces reflows, previewing a future diff algorithm.
This article compiles a series of practical solutions for frequent WeChat mini‑program challenges, covering iOS date parsing, live‑stream message throttling, storage sharing, navigation depth limits, floating‑point precision, QR‑code scene length, image preloading, and server‑client time synchronization, with code snippets and explanations.
The article examines WebAssembly as an emerging web development paradigm that offers a compiled, language‑agnostic alternative to JavaScript, discusses its integration with .NET via Mono and Blazor, compares tooling like NuGet to npm/WebPack, and highlights both the benefits and the continued need for JavaScript in modern web applications.
This tutorial walks you through creating a fully functional progressive web app (PWA) game using Preact, covering functional requirements, UI design, routing, component implementation, game logic, offline support, and deployment in a clear, step‑by‑step manner.
The article explains that compiling experimental JavaScript features like JSX or class properties inside node_modules tightly couples libraries to build tools, leading to breaking changes, coordination overhead, and prolonged upgrade pain, which is why Create React App avoids such compilation.
The article explains how Node.js now supports native V8 code‑coverage via the NODE_V8_COVERAGE environment variable, describes the limitations of traditional tools like Istanbul, outlines the benefits and challenges of using V8’s built‑in coverage, and provides practical steps and tools (c8, v8-to-istanbul) to generate readable coverage reports.
This article explains how JavaScript’s single‑threaded model achieves asynchronous behavior through macro‑tasks and micro‑tasks, compares the browser and Node.js event‑loop implementations, and demonstrates the timing differences between setTimeout, setImmediate, and process.nextTick with practical code examples.
This article explains ES6 JavaScript generators, covering their syntax, how they differ from regular iterators, the role of the yield keyword, available generator methods, and practical examples such as custom generators, random number streams, throttling, Fibonacci sequences, and integrating generators with HTML to simplify iterative tasks.
This article explains how to dissect a WeChat mini‑program .wxapkg package, examines the structure and purpose of compiled files such as app‑config.json, app‑service.js, page‑frame.html and resource assets, and provides step‑by‑step Node.js scripts to automatically restore the original source files for further development and debugging.
This article explains JavaScript date and time concepts—including GMT, UTC, ISO 8601, RFC2822, timestamps, parsing, formatting, timezone offsets, localization, and practical internationalization strategies—providing developers with the knowledge to correctly manage time across different regions and platforms.
This article explains the JavaScript Event Loop mechanism in depth, covering the call stack, heap memory, macro‑ and micro‑tasks, and their queues, and demonstrates the execution order through detailed examples and step‑by‑step visualizations of multiple event‑loop cycles.
This article introduces ten indispensable JavaScript array methods—including forEach, includes, filter, map, reduce, some, every, sort, Array.from, and Array.of—explaining their purpose, usage, and providing visual examples to help developers efficiently manipulate arrays in web development.
The article explains Haskell‑style lazy lists, shows why lazy evaluation is useful, and walks through implementing lazy lists in JavaScript using custom classes, the ES6 iterable protocol, and generator functions, providing examples such as repeat, cycle, iterate, range and lazy operators like map, filter, take, and zip.
This article explains why the ESLint no-fallthrough and no-undef rules exist, shows how switch case fall‑through can cause bugs, and provides practical ways—using comments or local variables—to silence warnings while keeping code clean and maintainable.
This article explains ESLint’s no‑empty and no‑empty-function rules, showing how to fix empty blocks by inverting conditions, adding comments, handling silent failures, and using intentional no‑op functions or proper callbacks to keep JavaScript code clean and readable.
This article explains the ESLint rules no‑return‑assign and no‑constant‑condition, shows why they trigger, provides clear examples of problematic code, and offers practical refactoring techniques to resolve the warnings while keeping JavaScript code clean and intention‑clear.
This article explains why ESLint’s eqeqeq, no‑bitwise, and no‑implicit‑coercion rules require manual fixes, demonstrates the pitfalls of using ==, !=, and bitwise operators, and provides clear code examples showing how to replace them with safer, more readable alternatives.
This article introduces the ANU mini‑program framework, explains why WeChat mini‑programs need transpilation tools, compares existing solutions, details ANU's features and limitations, and provides step‑by‑step instructions with code examples for building and running a React‑like mini‑program project.
This guide walks developers through creating a WeChat Mini Program using Tencent Cloud's Serverless Cloud Functions, covering IDE installation, project configuration, cloud environment setup, file upload, cloud‑function development, and invoking functions from the Mini Program, enabling a fully serverless backend without traditional servers.
This article explains why a unified Generic Sensor API is needed, lists the sensors it supports, and provides step‑by‑step JavaScript examples for creating, configuring, and using sensors such as gyroscope, accelerometer, ambient light, magnetometer, and composite orientation sensors, while also covering privacy considerations and future extensions.
This article explains how the render props pattern solves the flexibility and prop‑passing limitations of earlier React design approaches, illustrating the concept with JSX examples, Babel compilation details, and comparisons to props.children for creating highly reusable and readable components.
This comprehensive guide walks experienced front‑end developers through the browser's multi‑process model, internal threading, rendering pipeline, JavaScript single‑threaded execution, event loop mechanics, Web Workers, and performance‑related concepts like macrotasks, microtasks, and hardware‑accelerated compositing.
WeChat Mini Program Cloud Development offers a serverless backend—cloud functions, database, and file storage—exclusively for Mini Programs, providing simple login, generous free tiers, and easy JavaScript integration, while developers must handle promises for async calls and supplement its limited permission model with custom logic.
This article introduces WeChat Mini Program Cloud Development, explains its serverless architecture, compares it with PaaS and BaaS solutions, outlines suitable scenarios, highlights advantages such as built‑in login and free storage, warns of common misconceptions, and shares practical tips and a GitHub demo project.
This article explains how to create smooth, multi‑path paper‑plane flight animations for a mini‑program using CSS3 keyframes, transform versus position, canvas drawing, a reusable Game class, Bezier curve calculations, and inverse‑trigonometric rotation to achieve realistic motion and design flexibility.
This article explains how to handle the ESLint "no-fallthrough" and "no-undef" rules, showing when to add explicit comments, convert globals to locals, and why the comment‑based fix is often the most efficient for legacy JavaScript code.
This comprehensive guide walks you through browser multi‑process architecture, the relationship between processes and threads, the rendering pipeline, Web Workers, and the intricacies of JavaScript's single‑threaded execution and event‑loop mechanisms, providing a solid knowledge framework for front‑end developers.
Chrome extensions are small HTML‑CSS‑JS programs whose functionality is defined in a manifest.json that lists permissions, icons, and components such as background scripts, content scripts, options pages, and UI actions, with communication via runtime messaging, storage via web or Chrome APIs, and updates managed through an update_url.
This article explains React higher‑order components, defining the pattern, distinguishing between props‑proxy and reverse‑inheritance implementations, and illustrating each with practical examples such as Ant Design’s Form.create and a loading wrapper, while discussing lifecycle handling and the advantages of reverse inheritance.
This article provides a comprehensive guide for mobile developers on JavaScript fundamentals such as callback hell, Promises, async/await, the arguments object, call and apply methods, mixins, and prototype inheritance, illustrating each concept with clear explanations and practical code examples to improve React Native coding practices.
This article explains when React's setState behaves synchronously or asynchronously, how batch updates are merged into a single render, and the proper way to retrieve the updated state using the callback parameter, illustrated with clear diagrams and code examples.
This article explains how to resolve the ESLint "no‑empty" and "no‑empty‑function" warnings by refactoring empty blocks, adding explanatory comments, using noop helpers, and validating callbacks, providing concrete code examples and step‑by‑step reasoning.
This article explains the distinction between ECMAScript and JavaScript decorators, walks through the TC39 proposal stages, demonstrates how to work with property descriptors, Object.defineProperty, Object.defineProperties, Object.create, and shows practical examples of method, class‑field, and class decorators using Babel.
This article explains how to transform React class components into WeChat Mini‑Program Component({}) calls by building a custom Babel plugin that extracts class inheritance, methods, state handling, and replaces import/export statements, while also mapping React lifecycle patterns to Mini‑App equivalents.
This article examines the challenges of using WeChat Mini Programs, proposes a React‑style component architecture by mapping Mini Program concepts such as Component, Page, and App to React's state, lifecycle, and JSX, and provides concrete code examples for definition, lifecycle handling, styling, templating, and configuration.
This tutorial walks you through creating a configurable lottery wheel using Canvas in a WeChat Mini Program, covering the overall concept, required WXML layout, animation setup, interactive button handling, and how to display prize rules, with a complete code example.
The G2 3.2 release from AntV introduces a richer visual cognition system with tail‑legend support, region‑filter color guides, new data marker guides, more flexible component configurations, and chart‑level theme customization, while providing installation options via npm or CDN for developers to try the latest features.
RxJS brings the Observable pattern to JavaScript, enabling asynchronous multiple-value streams that combine observer, iterator, and functional concepts, and the article shows how to use it in React and Redux for clean subscription management, data aggregation, advanced async handling, and time‑based operations.
This article demonstrates how to use Selenium WebDriver with JavaScript to automate the Geetest sliding captcha, covering installation, element interaction, image capture, pixel analysis, and human‑like sliding trajectory generation to illustrate both the challenges and techniques involved.
A former communications engineering graduate shares a detailed chronicle of ten front‑end interview experiences across startups, small firms, mid‑size companies, and a pre‑IPO e‑commerce firm in Shanghai, highlighting interview questions, personal reflections, and actionable lessons for aspiring developers.
This article examines WebAssembly’s core features—loading speed, execution performance, memory model, garbage collection, API access, multithreading, and portability—comparing them to JavaScript, and discusses suitable use cases such as high‑CPU tasks, gaming, and image processing, while noting current limitations and future prospects.
This article explains the performance characteristics and implementation details of common linear data structures such as arrays, hash maps, sets, lists, linked lists, stacks, and queues, showing their time complexities, code examples, and how to choose the right structure for efficient programming.
This article explains Node.js's internal architecture—including the standard library, bindings, V8 engine, libuv I/O library, code structure, event loop, and concurrency model—providing a comprehensive overview for developers who want to master backend development with Node.
This article introduces JavaScript’s Proxy object, explains its core concepts—targets, handlers, and traps—and demonstrates practical uses such as property validation, data binding, and wrapping RESTful API calls with code examples, highlighting its versatility for developers.
This article provides a detailed overview of ReactJS, covering its origins, virtual DOM mechanism, component‑based architecture, common misconceptions, setup steps, JSX syntax, component properties, state management, lifecycle methods, and practical code examples for building interactive web interfaces.
This article introduces SpriteJS, a cross‑platform canvas library from 360 Qiwang Team, showing how to create structured UI, draw shapes, apply transitions, use the Web Animation API, work with textures, paths, groups, events, D3 integration, physics engines and particle systems, all with practical JavaScript code examples.
SpriteJS is an open‑source, cross‑platform JavaScript library that simplifies canvas drawing by providing a DOM‑like API for creating sprites, paths, groups, and animations, integrating seamlessly with tools such as D3, Matter‑JS, Proton, and CurveJS for rich interactive visualizations.
SpriteJS is an open‑source, cross‑terminal canvas library from 360 Qiyou that provides a DOM‑like API for drawing shapes, creating sprites, animating with transitions or the Web Animation API, handling textures, vectors, groups, events, and integrating with D3, physics engines and particle systems.
Yu Guo’s talk surveys future‑oriented full‑stack trends—rising languages like Python, mobile‑first Swift, shifting frameworks from jQuery to React/Vue, evolving build tools, and practical learning strategies such as deliberate practice, skill‑model mapping, and algorithmic optimizations—emphasizing continual adaptability for developers.
This article explains how to protect data exchanged between front‑end and back‑end services by using HTTPS, request signing, SSL pinning, and a Spring Boot starter that transparently encrypts/decrypts all API traffic with AES, complemented by JavaScript AES utilities and Axios interceptors for front‑end encryption.
This article introduces a lightweight easing algorithm that moves an element by half the remaining distance each frame, provides a requestAnimationFrame polyfill, a reusable Math.easeout function, and shows real‑world usage in Qidian's scroll‑to‑top and other UI effects.
This article explains how React 16 rewrote its server‑side rendering layer to support four rendering modes—including string and streaming approaches—by introducing the ReactPartialRenderer and ReactMarkupReadableStream classes, and details the process of converting virtual DOM trees into HTML strings.
This weekly newsletter curates nine insightful articles covering Google’s Guess.js toolkit, I/O 2018 web highlights, front‑end AR techniques, Chrome’s autoplay restrictions, a deep dive into Redux, WebAssembly versus JavaScript performance, comprehensive CSS line‑break methods, ten common software architecture patterns, and guidance on front‑end engineer career advancement.
This article explores extracting dominant theme colors from images directly in the browser using Canvas, compares the median‑cut and octree algorithms, provides full JavaScript implementations, and evaluates performance and accuracy against server‑side CGI results.
The article advises beginners that the specific programming language matters less than learning core concepts, recommending Python, Java, Ruby, and JavaScript as strong entry points while emphasizing flexibility, job prospects, and the importance of not getting stuck on a single language.
This article explains the WebSocket protocol, compares it with traditional Ajax polling, shows client‑side JavaScript and server‑side Python implementations, details the handshake, frame parsing, and message framing, and highlights its suitability for real‑time applications.
This article explains JavaScript's type coercion mechanisms, covering both implicit and explicit conversions for strings, numbers, booleans, objects, and symbols, and demonstrates how abstract operations like ToPrimitive, ToString, ToNumber, and ToBoolean affect runtime behavior.
This newsletter highlights design principles for massive JavaScript applications, secure sandboxing techniques for Node.js, the latest Node.js 10 and V8 6.6 features, WebAssembly debugging, and the CRNWEB framework enabling a single codebase across React‑Native, web, and PWA platforms.
GitHub’s security alerts, launched in October, have dramatically cut remediation times for Ruby and JavaScript projects—nearly half of alerts are addressed within a week and 98% of actively maintained repositories patch within seven days—identifying over 400 million vulnerabilities across more than 500 thousand repositories, with detailed notifications delivered via the platform, email, and a new weekly summary, and future support planned for Python.
This article reviews the major additions and deprecations introduced in React 16, including component array returns, portals, error boundaries, fragments, strict mode, the new context API, createRef/forwardRef, fiber architecture, and async rendering utilities, illustrated with code examples.
This article introduces the Quick App platform, explains its front‑end‑based architecture, provides a step‑by‑step Windows setup and project initialization guide, showcases UI layout and JavaScript code examples, compares it with Mini‑Programs and JDReact, and offers resources for developers interested in rapid, install‑free mobile app development.
This guide introduces Quick Apps, explains their front‑end‑centric architecture, walks through environment setup, project initialization, UI layout, JavaScript logic, debugging, deep linking, and compares Quick Apps with WeChat Mini‑Programs and JDReact, providing practical code snippets and tips for Android developers.
JSSDK is a JavaScript SDK that enables H5 developers to quickly integrate JD app features such as sharing, deep linking, and native function calls across platforms, offering modular, version‑compatible, and type‑safe APIs to streamline mobile web development.
This article analyzes the ten most frequent JavaScript errors identified from over a thousand projects, explains why each occurs, and offers practical code examples and preventive techniques to help developers avoid these common pitfalls.
This article explores practical JavaScript and DOM optimization techniques—avoiding eval, using local variables, minimizing reflows, and leveraging efficient string handling—to dramatically improve web application performance.
This article introduces WebAssembly, explains its performance advantages over JavaScript, details the setup of development tools like Emscripten, CMake, and WABT on macOS, and provides step‑by‑step examples for compiling C/C++ code to .wasm, loading modules in JavaScript, and using advanced features.
This article explains the theory and JavaScript implementations of various knapsack problem variants—including 0/1, complete, unbounded, and multi‑knapsack—detailing state transition equations, space‑optimisation techniques such as rolling arrays and binary decomposition, and provides full code examples for each solution.
This article explores WebAssembly’s origins, technical architecture, current browser support, limitations such as lack of OOP, garbage collection, and multithreading, and discusses its security concerns and roadmap, ultimately questioning whether it will ever supplant JavaScript in the web ecosystem.
An in‑depth exploration of React Hot Loader’s origins, underlying HMR principles, challenges with state and DOM preservation, the development of proxy‑based solutions, React Transform, and the progression to newer versions, providing practical code examples and insights for frontend developers.
G3D is a WebGL‑based JavaScript 3D rendering engine created by Alibaba’s terminal team to run in hybrid environments like Weex and React Native, offering core 3D features while addressing the limitations of existing engines such as three.js and Babylon.js.
This tutorial walks you through creating a Chrome extension—from understanding what extensions are, setting up the manifest and HTML files, testing in developer mode, adding movie‑background features with the TMDb API, to publishing the finished extension on the Chrome Web Store.
This article walks through the inner mechanics of JavaScript Promises, explaining their basic prototype, asynchronous handling with the event loop, state management, chainable behavior, and error handling, all illustrated with step‑by‑step code examples and diagrams.
This guide demonstrates how to create a CAPTCHA verification feature in Java by generating random characters and interference lines using Graphics, serving the image via a servlet, and integrating it into an HTML registration page with JavaScript for dynamic refresh.
This article explains the fundamentals of hash tables, covering their basic concepts, construction methods, various collision‑resolution techniques such as open addressing and chaining, and compares several widely used hash functions with performance insights.
This article compares the traditional XMLHttpRequest‑based AJAX approach with the modern Fetch API, highlighting its Promise‑based design, cleaner syntax, better compatibility strategies, common pitfalls, and practical usage tips for frontend developers.
Loder is a lightweight, declarative web loader that optimizes resource‑task dependencies, enables ultra‑fast app startup, and provides performance tracking, helping developers overcome the limitations of traditional linear loading especially on constrained mobile devices.
This article examines how developers can decide on their first programming language by analyzing job market trends, long‑term prospects, learning speed, and project potential, using data visualizations and expert opinions to highlight why JavaScript often emerges as the top choice.
This article presents a comprehensive, up‑to‑date guide for invoking native apps from H5 pages on platforms such as WeChat, QQ, Weibo and Safari, covering universal links, scheme URLs, fallback strategies, platform‑specific quirks, testing tips, and a ready‑to‑use JavaScript implementation.
This article explains what a Webpack loader is, how it works, how to configure single or multiple loaders in webpack.config.js, best‑practice guidelines, and provides a complete example of an html‑minify loader with both synchronous and asynchronous implementations.
This tutorial walks you through installing Node.js, configuring npm to avoid permission issues, using npm in both global and local modes, managing package versions with package.json, searching for packages, cleaning the cache, and leveraging version managers, providing a complete guide for modern JavaScript development.
This article explains the rules, scoring system, and level design of the classic "Popstar" match‑3 game, then details a full MVC implementation in JavaScript—including tile representation, wave‑average distribution, shuffle, wall solidification, view updates, control bindings, and a discussion of the knapsack‑style max‑score problem—while providing complete code snippets and a GitHub repository link.
This article explains the evolution of JavaScript performance, introduces WebAssembly concepts and browser support, provides step‑by‑step installation of Emscripten, WABT, and related tools on macOS, demonstrates WebAssembly APIs such as validate, Module, compile, Instance, Memory and Table, and shows practical examples of compiling and invoking C/C++ and Rust code from JavaScript.
This article explains how LINE Manga uses a custom Page Stack architecture, inspired by iOS UINavigationController, to deliver native‑like, smooth page transitions in a web environment, addressing back‑button latency, scroll restoration, and lazy‑load image issues with practical React/React‑Router examples.
