This article walks through the complete process of creating a browser‑based H.265 video decoder by compiling a trimmed FFmpeg library to WebAssembly, designing a modular player architecture, and integrating the WASM module with JavaScript workers for real‑time playback of high‑resolution streams.
This article explains Babel's role as a fundamental JavaScript compiler, detailing its parsing‑transform‑printing pipeline, AST structure, core‑js polyfills, preset‑env configuration, and runtime helpers, providing frontend developers with a comprehensive guide to mastering Babel's ecosystem and optimizing bundle size.
This article explains a joint cross‑platform approach that lets developers share a single codebase across PC browsers, mobile web, and app WebViews by exposing adaptable UI and logic layers, using custom adapters and build tools to generate platform‑specific bundles while preserving existing tech stacks.
This article explains how the ECMAScript specification defines the behavior of Object.prototype.hasOwnProperty, introduces abstract operations, completion records, internal slots and methods, and shows how the spec’s pseudo‑code can be translated into concrete JavaScript examples.
This newsletter highlights two technical articles: one explains JavaScript's memory allocation, stack and heap usage, and garbage‑collection methods with examples of common leaks, while the other details Meituan Waimai's Flutter Web performance challenges and their mitigation strategies.
This article explains why React introduced the Fiber architecture, how it breaks rendering work into interruptible units, compares it with Vue's approach, and provides detailed code examples of Fiber's data structures, scheduling, traversal, and commit phases.
This article walks through a concrete example of Object.prototype.hasOwnProperty in the ECMAScript specification, explaining language and specification types, abstract operations, internal slots and methods, Completion Records, and the shorthand ? and ! used for error handling in spec algorithms.
This article explains what an Abstract Syntax Tree (AST) is, outlines its parse‑transform‑generate workflow, and demonstrates practical AST‑based code transformations using Babel, custom ESLint rules, and a JSX‑to‑object Babel plugin, complete with example code and visual illustrations.
Tapable is a flow‑control library used by webpack that implements synchronous and asynchronous hook mechanisms, enabling plugins to subscribe and publish events through a standardized interface, as demonstrated by source code analysis and generated function examples.
This article explains how to wrap a synchronous function that doubles array elements so that multiple calls return the expected doubled results while the underlying function is executed only once, using clever tricks, setTimeout‑based debouncing, and Promise‑based micro‑task scheduling.
This guide demonstrates how to replace a standard file upload in a ThinkPHP5 post feature with an Ajax-based solution that allows real‑time image preview, server‑side handling via PHP, and selective deletion of uploaded images, improving compatibility and user experience.
This article introduces Node.js by recounting its creator Ryan Dahl's background, explaining its core characteristics of single‑threaded, event‑driven, non‑blocking I/O architecture, describing suitable use cases, and reviewing basic code examples and popular frameworks such as Express, Koa, Nest, and Egg.
This article explains how to build a high‑performance large‑file HTTP upload service with resumable support by using a C‑based server, client‑side hash generation, cookie‑based browser IDs, AJAX queries for upload progress, and JavaScript code that slices files and tracks upload speed and progress.
This article explains why React introduced the Fiber architecture, how it breaks rendering work into small interruptible units, the role of requestAnimationFrame and requestIdleCallback, the underlying linked‑list data structures, and provides code examples that illustrate the render and commit phases for smoother UI updates.
This article introduces three Python libraries—PyExecJS, Js2Py, and PyV8—that enable execution of JavaScript within Python, showing how to set up runtimes, run code snippets, read JS files, and scrape encrypted web pages for more effective data extraction.
This article explains the history of global time standards, how computers represent time with Unix timestamps and the 2038 problem, details ISO 8601 and RFC 2822 formats, and provides practical JavaScript Date usage examples along with comparisons of popular date‑handling libraries such as Moment.js, Dayjs, and Miment.
This article explains the syntax and behavior of JavaScript's reduce method, compares it with map, forEach, filter and find, and demonstrates numerous practical patterns such as flattening arrays, counting occurrences, grouping by property, deduplication, and finding extrema, all illustrated with clear code examples.
Frontend developers are urged to spend a relaxed weekend reviewing the nearly completed ECMAScript 2021 specification—set for Ecma’s June approval—which will underpin the next generation of JavaScript implementations, with the full draft available at https://tc39.es/ecma262/2021/.
RedMonk’s latest ranking reveals the top 20 programming languages, with JavaScript, Python and Java retaining the top three spots, while languages like TypeScript, Kotlin, and Dart climb, and Ruby, Go, and others slip, offering a snapshot of current developer preferences.
The article reviews recent TC39 proposal updates—including Error Cause reaching Stage 3, the Temporal API replacing the flawed Date object, the new Array.findLast methods, and Module Fragments—explaining their motivations, design details, code examples, and how they aim to improve JavaScript development across environments.
Exploring the evolution of web-based editors and design tools, this article examines why traditional plugin architectures like Atom faltered, how VS Code’s more restrictive model improves performance and security, and delves into Figma’s sophisticated sandboxing techniques—including Realm, Duktape, and CSS isolation—to balance flexibility with safety.
This article explains how Vue’s mergeOptions function merges constructor and instance options, detailing the normalization of props, inject, and directives, and how extends and mixins are recursively combined to produce the final component configuration.
This article investigates why JavaScript's Object.keys() may return keys in an unexpected order, explains the specification‑defined sorting rules for integer and string properties, demonstrates the issue with timestamp tags on iOS and Android, and explores the actual implementations in QuickJS and V8 engines.
This article introduces Test‑Driven Development (TDD), walks through a complete FizzBuzz kata using Jest, explains the Red/Green/Refactor cycle, showcases common TDD patterns, and discusses challenges and best practices for writing clean, well‑tested code.
This article dissects San CLI's internal architecture, detailing its core modules, the distinction between main and service processes, the step‑by‑step execution of the san init command, the TaskList implementation that drives sequential tasks, and the design of Command and Service plugins that enable extensibility.
This article explores methods to prevent user-injected JavaScript from manipulating DOM objects, including using Shadow DOM and Web Workers to create secure sandboxed environments.
This guide explains how to locate the JavaScript responsible for generating URL parameters by inspecting event listeners and searching source files in Chrome, observe its execution with breakpoints, and then replicate the logic in Python using js2py to obtain login credentials.
This article compares three common JavaScript techniques—truthy checks, the in operator, and hasOwnProperty()—explaining their behavior with various value types, prototype inheritance, and edge cases, and provides code examples to help you choose the most reliable method for property detection.
This article introduces GoDB.js, a TypeScript‑based wrapper for IndexedDB that provides a concise, schema‑aware CRUD API, hides asynchronous connection handling, and offers batch operations, making client‑side data storage in modern web apps much easier.
This article explains the internal workflow of vue-loader, detailing how it separates style, script, template, and custom blocks in Vue single‑file components, injects a pitcher loader, clones webpack rules, and leverages resourceQuery to reuse user‑defined loaders such as less‑loader or babel‑loader.
This article introduces the window.history object, explains its key properties, methods and the popstate event, answers common questions about its behavior, and demonstrates practical uses such as single‑page routing, navigation control, and custom front‑end router implementations with code examples.
Explore six powerful JavaScript operators—including spread, Set, ternary, template literals, optional chaining, and nullish coalescing—through clear explanations and code snippets, showing how they simplify code, enhance readability, and boost efficiency in modern front‑end development.
This article presents a curated collection of 23 open‑source game projects hosted on GitHub, covering a variety of genres and technologies—from Vim plugins and JavaScript Tetris to Python Plants vs Zombies—providing links, brief descriptions, and usage instructions for each.
RedMonk’s February 2021 programming language ranking places JavaScript at the top, followed by Python, Java, and PHP, using GitHub pull‑request data and Stack Overflow activity to gauge popularity, and notes that half of the top‑20 languages have shifted unusually compared to the previous year.
Tapable powers Webpack’s extensible workflow by providing a dynamic function generator and a suite of over ten hook classes—such as SyncHook, AsyncSeriesWaterfallHook, and AsyncParallelHook—that let developers compose synchronous, asynchronous, bail‑out, waterfall, and looping pipelines, illustrated by a jQuery.ajax‑style service where each request phase is modularly plugged in.
Understanding how JavaScript manages memory, this article explains garbage collection concepts such as Stop‑The‑World pauses, reference counting, mark‑sweep, mark‑compact, incremental marking, and V8’s generational strategies, while offering practical code examples and optimization techniques to prevent leaks and improve performance.
This article explains the concepts of binary trees and binary heaps, describes their relationship, and provides a complete JavaScript implementation—including initialization, heapify, insertion, deletion, and sorting—illustrated with diagrams and runnable code examples.
This article details the technical implementation of Ant Group’s annual Five Blessings Spring promotion, covering the business breakdown, 3D scene construction using the Oasis engine, sliding control logic, visual effects, and extensive performance optimizations for memory, texture, buffers, and loading on mobile web.
This article explains the Manhattan routing algorithm used for automatic orthogonal connection routing in diagram tools, discusses its origins, references useful libraries like draw2d, and provides a full TypeScript implementation with code examples and practical application scenarios.
This guide demonstrates how to integrate ZXing into a SpringBoot backend to generate QR code images, expose them via a REST endpoint, and display the QR codes in a Vue front‑end dialog by fetching the image as a blob and rendering it with Element UI components.
The January 29 TC39 meeting reviewed progress on dozens of ECMAScript proposals, outlining the criteria for moving from Stage 3 to Stage 4, Stage 2 to Stage 3, and Stage 1 to Stage 2, and highlighting key features such as Intl.DateTimeFormat.formatRange, JSON Modules, Private‑in, class static blocks, resizable array buffers, and new Intl APIs.
In this translated interview, Ryan Dahl, creator of Node.js and Deno, discusses Deno’s goals, his preference for Rust, the future of JavaScript and TypeScript, security models, open‑source challenges, and practical advice for developers building modern backend systems.
This article examines the long‑standing debate over mandatory semicolons in JavaScript, explains Automatic Semicolon Insertion, shows code examples where omitting them causes errors, compares major style guides, and shares expert opinions to help developers choose a consistent approach.
This tutorial demonstrates how to easily create dynamic SVG animations by leveraging the GreenSock Animation Platform (GSAP), specifically focusing on TimelineMax and staggerFrom methods to manipulate DOM elements, apply easing functions, and sequence complex visual effects with minimal code.
This guide outlines the core JavaScript concepts, asynchronous programming fundamentals, package management, HTTP protocols, web frameworks, databases, caching strategies, template engines, real‑time communication, API clients, and testing tools that form a comprehensive learning roadmap for aspiring Node.js backend developers.
This tutorial explains what browser extensions are, walks through creating a simple Chrome extension with a manifest file, adds icons and a popup page, details background, content‑scripts, inject‑scripts, permissions, inter‑script communication, and demonstrates a practical HTTP‑Header extension example.
The TC39 January 29 meeting reviewed progress of multiple proposals advancing to later stages—including Intl.DateTimeFormat.formatRange, JSON Modules, Private‑In, Class Static Initializer Block, ResizableArrayBuffer, new Intl APIs, RegExp enhancements, Array findLast, defer import, and several internationalization extensions—detailing requirements, implementations, and upcoming milestones.
This article presents practical refactoring techniques for JavaScript code, illustrating how to replace callback‑hell request chains with Promise.all and async/await, transform tangled if‑else blocks into pure, modular functions, and adopt clean‑code principles to improve readability, testability, and maintainability.
This article explains how JavaScript processes Unicode characters, demonstrates the limitations of legacy APIs like charCodeAt and fromCharCode with supplementary characters, and introduces modern methods such as codePointAt, fromCodePoint, Unicode escape syntax, surrogate pairs, and polyfills for full Unicode support.
This article compares the performance of common JavaScript looping constructs—including for, reverse for, forEach, for...of, for...in, and for...await—provides benchmark code on a million‑element array, explains the speed differences, and offers guidance on choosing the right loop for readability and maintainability.
This article introduces the open‑source iMove tool, explains why front‑end development faces UI volatility, tangled logic and combined interfaces, and shows how iMove’s visual flow‑chart editor, low‑code node functions, online and local compilation, and automatic npm dependency parsing enable reusable, maintainable, language‑agnostic front‑end solutions.
This article explains why implementing partial recursive functions is equivalent to Turing‑completeness, defines the basic functions and operations of partial recursion, demonstrates how common arithmetic can be built from them, and provides JavaScript and TypeScript code that formally proves both languages are Turing‑complete.
This article explains how to enable and configure Hot Module Replacement for the San framework using san-hot-loader, covering both San CLI and manual Webpack setups, the underlying HMR workflow, module detection logic, and the core code that injects runtime updates for components and stores.
This article presents thirteen practical JavaScript optimization techniques—including concise conditional checks, streamlined if‑else statements, combined variable declarations, destructuring assignments, logical‑AND shortcuts, arrow functions, ternary calls, object‑based switches, default parameters, spread operators, template literals, and object shorthand—to help developers write cleaner, more efficient code.
This article introduces three lesser‑known JavaScript frameworks—Svelte, Ember, and Preact—explaining their unique compilation approach, MVC architecture, and lightweight React‑compatible API, while providing code examples to help developers evaluate them as viable alternatives.
This article examines the challenges of enforcing JavaScript coding standards in large‑scale frontend projects and presents EOS-JS, an AST‑driven static analysis tool that offers modular scanning, automatic fixes, multi‑scenario rule sets, seamless CI integration, and visualized data reporting to improve code quality and maintainability.
This article explains how EOS‑JS, a plugin‑based static analysis tool, uses AST pattern matching to enforce JavaScript coding standards across large front‑end teams, offering automatic fixes, multi‑scenario rule sets, seamless integration, and visualized data statistics to improve code quality and maintenance efficiency.
This article explains WebRTC fundamentals, covering camera and microphone basics, frame rate and resolution, tracks and streams, the getUserMedia API with constraints and error handling, device enumeration, MediaRecorder for client‑side recording, and screen sharing via getDisplayMedia, all illustrated with practical JavaScript code examples.
This guide walks you through the core source files of the popular “Big Watermelon” Cocos game, explains its simple click‑collision‑score‑display flow, and shows concrete code snippets for altering the scoring logic or other gameplay tweaks, while hinting at algorithmic optimization.
This article explains what Vue.js mixins are, how they merge component options, demonstrates their behavior with code examples, and shows practical use cases such as shared download logic to reduce redundancy across multiple components.
This article compares Webpack and Rollup, explains why Rollup’s tree‑shaking and ES6 module support make it better for a lightweight JavaScript utility library, and provides a step‑by‑step guide to set up the project with TypeScript, ESLint, Prettier, Husky, Commitlint and Jest testing.
The article reviews the Stage‑4 proposals slated for ES2021, explaining logical assignment operators, efficient string replacement techniques, the new Promise.any method, WeakRef usage, and readable numeric separators, each illustrated with clear JavaScript code examples.
This article explains why clear, meaningful naming is essential for maintainable front‑end code, showcases common bad naming patterns, and provides practical naming rules, conventions, tooling tips, and examples for JavaScript, CSS, and project structures.
This comprehensive guide examines JavaScript type-checking mechanisms such as typeof, instanceof, constructor, Array.isArray, and Object.prototype.toString, detailing their underlying principles, cross-realm limitations, prototype chain behaviors, and optimal implementation strategies for reliable frontend development.
This article introduces five new ES2021 JavaScript features—including replaceAll, Promise.any, logical assignment operators, numeric separators, and WeakRefs—explaining their behavior, usage examples, and browser support so developers can quickly adopt them.
This guide explains how to use WebSocket in a WeChat Mini‑Program to implement real‑time features such as live‑room comments, user join/leave events, likes, follows, and product shelf updates, covering protocol basics, handshake details, API usage, example code, heartbeat monitoring, and automatic reconnection strategies.
2020’s State of JavaScript survey, covering 137 countries and nearly 24,000 developers, highlights which language features, browser APIs, frameworks, and tooling have gained traction or lagged behind, offering insights into current front‑end trends such as the rise of TypeScript, Svelte, esbuild, and the modest adoption of WebAssembly.
This tutorial walks you through creating, debugging, and publishing a San CLI UI dashboard widget, covering project scaffolding, essential configuration files, API usage for registering addons and widgets, local testing steps, and final package release.
This article guides developers through implementing clipboard detection and paste functionality in WeChat mini programs, covering the use of wx.getClipboardData, regex URL extraction, conditional modal prompts, and provides complete sample code for integration.
The article explains JavaScript’s Functor, Applicative, and Monad abstractions—showing how map, ap, and chain (flatMap) on Box types such as Either, LazyBox, and a lazy Task can replace nested try‑catch and null checks, enable composable synchronous and asynchronous code, and support parallel execution with Task.ap.
The article analyzes the State of JS 2020 data, showing how emerging JavaScript libraries, front‑end and back‑end frameworks, testing tools, bundlers and other utilities rank in usage and developer satisfaction, and highlights the rapid rise of TypeScript, Jest, React, Vue.js and newer tools such as esbuild and Snowpack.
The D2 Language & Framework session covered Ben Lesh’s RxJS refactoring to reduce bundle size and boost speed, Ujjwal’s deep dive into ES2020/2021 features, monadic lift functions versus optional chaining, and practical performance gains achievable by targeting modern JavaScript standards.
This article provides a comprehensive walkthrough of Vue CLI's project initialization process, covering command‑line usage, entry‑file discovery, node version validation, intelligent command suggestion, preset handling, the Creator class workflow, prompt modules, plugin integration via Generator and GeneratorAPI, configuration extraction, and the final file generation steps.
This article introduces React Native, covering its core concepts, cross‑platform features, underlying architecture such as JavaScriptCore, Hermes, the Bridge, Virtual DOM, threading model, hot updates, and provides practical examples for building a modal animation on both iOS and Android.
This article provides a comprehensive overview of Vue 3, covering its evolution from Vue 2, key new features such as TypeScript support, the Composition API, performance optimizations, the modular monorepo structure, the reactivity system built on Proxy, and the Vite development server that powers its ecosystem.
Hummer, an ultra‑lightweight, dynamic cross‑platform framework co‑created by DiDi’s Puhui and R‑Lab front‑end teams, delivers sub‑1 MB packages, near‑native performance, and a low learning curve via its Tenon reactive API, supporting iOS, Android, and Vue‑based web, and is already deployed at scale across numerous DiDi services with a crash rate below 0.01 %.
This article explains D3.js fundamentals—including its selection, join, and scale modules—then walks through a step‑by‑step implementation of a fully customized bar chart using SVG, demonstrating how to bind data, create axes, and add interactive tooltips.
This article walks through the complete implementation of a lightweight MVVM framework—covering Object.defineProperty data hijacking, proxying, template compilation, publish‑subscribe reactivity, two‑way binding, computed properties and lifecycle hooks—using plain JavaScript.
During a weekend browsing session, I discovered Chrome's offline Dino game, inspected its global JavaScript objects, filtered out native properties using a fresh window, identified the Runner constructor, and manipulated its methods to control the dinosaur's behavior—all without altering the source code.
This article introduces five free, downloadable JavaScript/CSS3 countdown effect templates for the 2021 New Year, each with a brief description, preview image, and direct download link for developers to integrate into their web projects.
An in‑depth analysis shows why assigning a value at index 99999 in a large JavaScript array triggers V8 to switch from fast to slow (dictionary) mode, dramatically reducing memory usage by expanding capacity and converting holey arrays into a more efficient storage structure.
San DevTools implements a four‑module remote‑debugging architecture where the Message Channel uses WebSocket to multiplex bidirectional frontend‑backend communication, Chrome extensions exchange messages via ports and postMessage, and both a custom San DevTools Protocol and the standard Chrome DevTools Protocol are supported through hook‑based agents and client examples.
This article details the challenges and solutions encountered when upgrading QuNar's React Native from 0.61.3 to 0.63.2, describing the QRN framework, key RN changes, compatibility techniques, and practical lessons for large‑scale mobile projects.
This tutorial explains how to create a VS Code extension that automatically prefixes console.log statements with custom identifiers, covering project scaffolding, key file structures, activation events, command registration, implementation details, debugging, and publishing to the marketplace.
This article explains how state management in the React ecosystem has progressed from simple parent‑child props communication to using Redux, then Redux‑Saga, and finally the DVA framework, highlighting the benefits and practical code examples for each stage, especially in commercial real‑estate projects.
This article explains how to improve the rendering speed of highly customized stock K-line (candlestick) charts by optimizing canvas drawing commands, using caching strategies, and applying layered rendering to reduce unnecessary state changes and redraws.
This guide explains the scenarios that cause duplicate HTTP requests in web applications, demonstrates two Axios cancellation techniques, and shows how to encapsulate the logic in a reusable module with request tracking, interceptor integration, npm linking, and open‑source contribution steps.
This article presents a comprehensive catalog of more than seventy Baidu‑released open‑source projects, spanning front‑end UI libraries, data‑visualization tools, mobile frameworks, backend services, RPC frameworks, databases, AI platforms, and various development utilities for developers to explore and adopt.
This guide explains how to replace ThinkPHP's default error page by adding configuration entries and creating a custom HTML template, including CSS styling and JavaScript for automatic redirects, providing a more attractive and functional error display.
This article explores the challenges of uploading massive files from the browser, compares traditional form, iframe, FormData, and base64 methods, and provides detailed JavaScript and PHP examples for implementing chunked uploads, resumable transfers, and progress monitoring.
This article presents a comprehensive guide on using the WeChat Mini Program video component, covering component import, property configurations, event handling, API usage, layout strategies, permission logic, network interaction, fullscreen handling, playback continuity, URL expiration management, and eight common pitfalls to avoid.
Explore a curated collection of cutting‑edge frontend knowledge—including a zero‑cost micro‑frontend framework, reasons to drop CSS @apply, canvas‑based electronic signatures with PDF output, large‑scale SSR strategies, Chrome 87 enhancements, ECMAScript 2021 features, XSS defenses, automated SVG icon delivery, ESLint best practices, JavaScript metaprogramming, node_modules pitfalls, Monorepo management, and Rax mini‑program runtime insights.
This tutorial demonstrates how to detect, extract, and paste content copied from WeChat into a Mini Program by using the wx.getClipboardData API, applying regular‑expression matching, and displaying a confirmation modal only when the clipboard data differs from the previously stored value.
This article provides a detailed, step‑by‑step explanation of how a browser processes a simple HTTP request—from URL parsing, DNS lookup, and TCP connection through server handling, response reception, HTML/CSS parsing, layout, painting, reflow/repaint, and JavaScript execution—highlighting key concepts, optimizations, and common pitfalls.
This article explores the evolution of front‑end technology from early web effects to modern interactive media, detailing Alibaba's comprehensive interactive platform, the shift beyond mere efficiency, the impact of serverless architectures, and the expanding role of front‑end engineers in business‑driven product development.
A Tidelift analysis of over 6,000 developers reveals that JavaScript, Python, and Java dominate modern software projects, with detailed usage percentages, team size trends, and comparisons to other language rankings, offering valuable guidance for technology decisions.
This article introduces five distinctive jQuery-powered back‑to‑top animations—including a cartoon character, rocket launcher, starry rocket, floating rocket, and a music‑ding effect—explaining their visual style, providing brief descriptions, and offering download URLs for the source code.
This curated collection presents concise overviews of recent front‑end advancements, covering micro‑frontend architecture in Xiaomi CRM, G6 4.0 visual analytics, code‑quality best practices, 2020's hottest technologies, CDN fundamentals, CSS trends, component design, TypeScript popularity, VSCode inspection tools, watermark techniques, GPU.js acceleration, React DOM manipulation, and the top JS13K 2020 games.
Celebrating JavaScript’s 25th anniversary, this article traces its rapid 10‑day creation in 1995, its evolution into the world’s most popular language, the rise of TypeScript, the impact of V8, and emerging technologies like WebAssembly that extend its influence across the web.
This article explains the various ways browsers interpret the numeric value zero in JavaScript timers, numeric comparisons, type coercion, and CSS properties such as font-size, width, height, line-height, and transform, providing code examples and cross‑browser observations.
