This article surveys a range of front‑end topics—including alternative web‑framework solutions, the rise of pnpm, JavaScript stack memory, TypeScript overloads, integrating Golang with Node.js, innovative development approaches, and essential network security insights—providing concise technical overviews and references.
This article provides a comprehensive overview of Progressive Web Apps (PWA), covering their concepts, benefits, real-world case studies, implementation steps with Service Workers, App Shell, manifest files, and related JavaScript workers such as Web Workers, Service Workers, and Worklets, while also discussing their development challenges and future prospects.
This article explains how to create a basic HTML parser in JavaScript by using regular expressions and a stack to convert an HTML string into a tree of nodes, complete with code examples, initialization steps, and handling of opening, closing, and self‑closing tags.
This article reviews recent TC39 proposal progress—including decorators reaching Stage 3, type annotations advancing to Stage 1, new immutable array methods, RegExp set notation, decorator metadata, and function.once—detailing their syntax, semantics, migration considerations, and example implementations for modern JavaScript development.
This article explains free variables, defines closures in ECMAScript, shows why every function is a closure, and provides practical examples—including common interview pitfalls and solutions—illustrating how closures capture and preserve lexical scope in JavaScript.
This article introduces a set of ESLint rules that help developers write safer and more efficient asynchronous JavaScript by avoiding common pitfalls such as async promise executors, awaiting in loops, improper promise handling, and callback-related race conditions.
JavaScript’s upcoming “Change Array by copy” proposal introduces four non‑destructive array methods—.toReversed(), .toSorted(), .toSpliced(), and .with()—which provide immutable alternatives to existing destructive methods, and the article explains their behavior, usage examples, and polyfills while the proposal is in stage 3.
This guide shows how to transform an array of employee objects into a grouped structure by age using both a custom reduce‑based groupBy function and the modern Array.prototype.groupBy method, including examples of conditional grouping.
This article explores using IndexedDB for large‑scale client‑side data storage, covering database creation, CRUD wrappers, bulk inserts, performance testing, and multi‑tab coordination via BroadcastChannel and leader election, while providing practical code samples and optimization tips for robust offline logging.
SingleFile is an open‑source browser extension and command‑line utility that lets you capture any web page—including images and resources—into one self‑contained HTML file, with support for Chrome, Firefox, Edge, and other major browsers, plus Docker and manual installation options.
This article explains how JavaScript arrays are zero‑based, demonstrates traditional bracket indexing, introduces the new Array.prototype.at() method for both positive and negative indices, and shows concise code examples that make accessing the first, middle, and last elements easier and more readable.
This article explains the design and implementation of a minimal 40‑line Diff algorithm for React’s virtual DOM, covering node attribute changes, insertions, deletions, and moves, and provides a complete TypeScript demo that marks nodes with placement or deletion flags for efficient DOM updates.
This article introduces the ShadowRealm API, a new JavaScript proposal that creates independent, highly isolated realms for executing code, explains its type signatures, demonstrates .evaluate() and .importValue() methods with practical examples, and compares it with eval, Web Workers, iframes, and Node.js vm.
The article presents a series of JavaScript ES6 code‑review critiques, explaining why older ES5 patterns are problematic and demonstrating modern ES6 alternatives such as destructuring, spread operators, template literals, optional chaining, async/await, and array methods with clear code examples.
This article provides a comprehensive beginner-friendly guide to Babel, covering its definition as a JavaScript compiler, the parse‑transform‑generate workflow, AST concepts, core packages, plugin and preset classifications, configuration details, and step‑by‑step usage examples with code snippets.
Baidu’s new Live SSR approach adds a JavaScript computation function to the CSR directory, enabling seamless server‑side rendering without altering modules or pages, while leveraging end‑cloud collaboration, FaaS universal solutions, and component‑level reuse to boost SEO, user experience, scalability, and development efficiency.
This article presents a collection of ESLint rules for JavaScript asynchronous programming, explaining why patterns like async promise executors, awaiting in loops, returning values from Promise constructors, and others should be avoided, and provides correct code examples to improve readability, performance, and error handling.
The guide shows how to build a lightweight, browser‑based WebIDE using Monaco Editor by adding multi‑file support, preserving view state, integrating ESLint via a WebWorker, enabling Prettier formatting, and extending TypeScript definitions for rich code completion and navigation.
SingleFile is a cross‑browser extension and command‑line utility that lets users capture entire web pages—including images and resources—into a single HTML file, offering multiple installation methods, Docker support, detailed usage commands, and integration with custom user scripts.
The article explains how higher‑order functions such as every, map, and filter can replace repetitive loops over arrays or lists, reducing code duplication, improving readability, and lowering the chance of bugs while warning against over‑using functional style when it harms clarity.
This article explains Vue's error handling mechanisms—including global errorHandler, component-level errorCaptured, and the underlying source code functions handleError, invokeWithErrorHandling, globalHandleError, and logError—through detailed code examples, execution flow diagrams, and practical interview scenarios.
This article explains JavaScript's memory lifecycle, defines memory leaks, enumerates typical leak patterns such as accidental globals, timers, closures and DOM references, and describes the underlying garbage‑collection strategies (mark‑and‑sweep and reference counting) together with practical mitigation techniques.
This article examines NanoID as a modern alternative to UUID, detailing its smaller size, higher speed, stronger security, language support, custom alphabets, lack of dependencies, and compatibility, while also discussing its limitations and future prospects for unique identifier generation in JavaScript projects.
Integrating Rax with Huawei’s HarmonyOS leverages a driver‑adapter pattern to enable code‑share cross‑platform development, offering three strategies—syntax compilation, mini‑program runtime, and direct rendering—so developers can embed Rax output now while progressing toward a seamless full‑stack workflow and Harmony 3.0 release.
This article examines five active TC39 proposals—Pipeline Operator, Function Pipe/Flow, Partial Application, Call This, and Extensions—explaining their design goals, differences, and how they aim to improve function invocation readability, dataflow programming, method extension, and partial application in future ECMAScript versions.
This article explains how AntV S2 implements a wide range of interactions—such as click and hover highlights, brush selection, dynamic row/column resizing, column hiding, link jumps and custom events—by using canvas rendering, event delegation, state management and JavaScript code examples.
This article explains the fundamentals of compilation, compares compiled and interpreted languages, outlines the full compiler pipeline, and uses Babel as a concrete example to show how JavaScript code is parsed, transformed, and generated for broader browser compatibility.
This article explains how NanoID, a modern JavaScript identifier library, offers smaller size, higher security, faster generation, customizable alphabets, and broad language support compared to UUID, while also discussing its limitations and future outlook for developers choosing unique IDs.
This article demystifies JavaScript closures, explains how V8 builds scope chains and closure objects during compilation, and demonstrates why closures can cause memory leaks by retaining references, illustrated with multiple runnable code examples and practical debugging tips.
This article explains how NanoID, a compact and faster alternative to UUID, offers better security, smaller size, higher performance, and broad language support, while also discussing its limitations and future prospects for unique identifier generation in software development.
This article explains how to reverse‑engineer the Shumei slider captcha by retrieving its configuration API, extracting the obfuscated JavaScript, locating the decryption function, and using Python regex and execjs to capture dynamic parameters and DES keys for successful automated submissions.
This article compares NanoID and UUID, highlighting NanoID's smaller size, higher security, faster generation speed, language support, and flexibility, while also discussing its limitations and future prospects, to help developers decide when to choose NanoID over UUID.
This article provides a comprehensive overview of Vue 3—including its release details, performance gains, core architectural changes such as Proxy‑based reactivity, TypeScript support, the new Composition API (setup, ref, reactive, computed, watch, watchEffect), updated lifecycle hooks, new built‑in components like Fragment, Teleport and Suspense, project scaffolding with Vue‑CLI or Vite, and migration considerations from Vue 2.
This article explains what an Abstract Syntax Tree (AST) is, how the ESTree specification standardizes JavaScript syntax, and how Babel parses, traverses, and transforms code using AST nodes, providing practical examples, core packages, plugin creation, and real‑world application scenarios for developers.
This article explains why jQuery’s source uses a double assignment pattern, how assignment operators are right‑associative expressions, the impact of operator precedence on property access versus assignment, and demonstrates practical uses such as building linked structures in JavaScript.
This article traces the evolution of frontend development from server‑side rendering with PHP/JSP through AJAX and jQuery to modern MVVM frameworks, comparing React, Vue, and Angular in terms of syntax, data‑update mechanisms, performance optimizations, and code‑reuse strategies.
This article presents a detailed glossary of common JavaScript English keywords, objects, methods, and properties with their Chinese translations, organized into two comprehensive tables to help developers quickly understand and reference essential JavaScript terminology.
This article examines the single-spa micro‑frontend framework, explains its core mechanisms such as registerApplication, reroute, and lifecycle handling, demonstrates how it powers the qiankun solution, and provides practical code examples for integrating various front‑end stacks.
This article explains how JavaScript's single‑threaded engine uses the event loop to manage synchronous and asynchronous tasks, distinguishes macro‑tasks from micro‑tasks, and compares the implementations in browsers and Node.js, including version‑specific behavior and common pitfalls.
This article explains the core concepts of compilation and interpretation, compares static and dynamic languages, and walks through the V8 engine’s workflow—including parsing, bytecode generation, JIT compilation, and TurboFan optimizations—providing concrete code examples and command‑line tips.
Microsoft’s recent proposal to add optional type‑annotation syntax to JavaScript aims to let external tools like TypeScript perform static checks while keeping runtime behavior unchanged, sparking both excitement and debate among developers.
This article explains why B2B front‑end applications suffer from frequent API changes, introduces the anti‑corruption layer concept adapted from HAL and DDD, and demonstrates how to implement a robust, RxJS‑based layer that isolates UI code from evolving back‑end contracts while offering caching, fallback, and testing benefits.
This article explains the fundamental principles behind JavaScript execution, covering the distinction between interpreted and compiled languages, the architecture of JavaScript engines (including V8, SpiderMonkey, and JavaScriptCore), runtime environments, the single‑threaded event loop, call‑stack processing, lexical analysis, parsing, bytecode, JIT compilation, and the role of Web Workers in off‑loading CPU‑intensive tasks.
Formily is a data‑plus‑protocol driven form framework that leverages reactive programming to deliver O(1) performance for massive fields, supports multiple front‑end frameworks, offers a rich ecosystem of cross‑platform components, and provides design principles and extension strategies for building high‑efficiency enterprise forms.
This article walks through the evolution from simple SDK repositories to a full‑featured Yarn Berry monorepo, covering workspace setup, configuration, plugin integration, TypeScript settings, package scaffolding, release workflows, and practical tips for dependency management and linking.
This article reviews eight popular Node.js WebSocket libraries—SockJS, ws, Socket.IO, Faye WebSocket, SocketCluster, Sockette, and Feathers—detailing their features, popularity, installation commands, and typical use cases for building real‑time backend applications.
This curated list presents a range of frontend development resources—including articles on framework alternatives, defensive programming, low‑code H5 platforms, Engine.IO fundamentals, international web‑dev insights, monorepo strategies, Recoil internals, Vue/React debugging tips, JavaScript tricks, and Three.js 3D text effects—providing practical guidance and deeper technical understanding.
This article introduces the pinyin‑pro JavaScript library, explains its rich features such as tone handling, initials, finals, polyphone support, surname mode, non‑Chinese character filtering, custom pinyin definitions, and matching, and provides step‑by‑step installation and usage examples for both browser and Node environments.
This article explains the relationships among WebSocket, Engine.IO, and Socket.IO, details Engine.IO’s features, handshake, upgrade and disconnect mechanisms, and provides practical code examples for building real‑time communication in Node.js applications, including packet encoding, transport options, and debugging techniques.
This article explains how to master regular expressions by visualizing their abstract syntax trees (AST), covering basic patterns, character classes, repetitions, greedy vs. non‑greedy matching, groups, and look‑ahead/look‑behind assertions with clear examples and diagrams.
This article explains Alibaba's JavaScript Ahead‑of‑Time (AOT) technology, detailing the performance challenges of dynamic JS, the three compilation strategies evaluated, the chosen hybrid approach with profile‑guided and rule‑based optimizations, and the measurable speed gains achieved in production.
This article introduces the renowned "awesome" GitHub repository, highlights its extensive sub‑lists for various domains, focuses on the awesome‑web‑scraping collection, and presents a newly created Chinese version that aggregates Python, JavaScript, Go, and other language‑specific web‑scraping tools and libraries.
Building a Chrome extension that redirects network requests illustrates the complexities of message passing across isolated contexts, and the article shows how the browser‑extension‑kit framework abstracts routing, state management, and RxJS integration to streamline development, reduce boilerplate, and improve maintainability for React‑based popups and background scripts.
This tutorial explains how to create a Chrome browser extension that generates QR codes (optionally with protocol headers) and decodes them, covering the background motivation, directory layout, manifest and popup design, core JavaScript logic, installation steps, and a download link for the complete source.
The article explains how to overcome the limitation of browser ES Modules by creating inline‑import functionality with Blob URLs and dynamic import maps, providing both dynamic and static import capabilities for modular JavaScript in playground‑style environments.
This tutorial explains how to integrate the jSignature library with jQuery on the front end and PHP on the back end to provide a real‑time mobile signature feature, covering library download, HTML markup, JavaScript initialization, reset, AJAX submission, and server‑side base64 image handling.
This tutorial walks you through the entire process of creating a custom VSCode code‑completion extension, covering environment setup, the mechanics of suggestion panels, snippet configuration, core API usage, and advanced personalization techniques such as dictionary‑based word completion and automatic updates.
This article walks through practical ways to implement true dark mode on web pages—including manual toggles, system‑preference detection, CSS variables, stylesheet swapping, filter tricks, and common pitfalls—while providing complete code examples and explanations.
This article explains how JavaScript processes binary data for front‑end image handling, covering core APIs such as ArrayBuffer, TypedArray, DataView, Blob, File, and FileReader, and demonstrates practical techniques for previewing, downloading, converting, compressing, and detecting image formats using code examples.
ESModules load by fetching and parsing files to build a static dependency graph, then instantiate bindings before evaluating each module depth‑first, which ensures deterministic execution, enables concurrent loading and TreeShaking, and explains why circular imports can cause temporal‑dead‑zone ReferenceErrors when exported variables are accessed before initialization.
This curated collection highlights the 2021 State of JS findings, cross‑platform technology insights, JIT compilation explanations, Vue diff algorithm visualizations, Node.js learning resources, and practical tutorials on CSS perspective, React + Three.js 3D effects, Mermaid diagrams in Markdown, and Jest testing, offering a comprehensive overview for modern front‑end developers.
This article introduces Plyr, a lightweight and highly customizable HTML5 video/audio player library, outlines its rich feature set—including subtitles, speed control, picture‑in‑picture, and API methods—provides CDN and npm installation instructions, and demonstrates how to embed and style the player for web projects.
This guide explains why developers should join open‑source projects, how to choose Taro as a target, and provides a detailed, code‑rich workflow—from locating suitable issues and forking the repository to setting up the development environment, implementing fixes, testing, and submitting a pull request.
This article demonstrates how to modernize and simplify JavaScript code by applying ES6 techniques such as object destructuring, Set‑based array deduplication, includes() for condition checks, optional chaining for safe property access, and array flattening methods, improving readability and maintainability.
This comprehensive tutorial explains how selections and cursors work in web pages, covering the underlying Selection and Range APIs, handling editable and non‑editable elements, manipulating text in inputs, textareas, and rich content, and providing practical code snippets for every scenario.
This article describes how Ctrip Financial’s front‑end team measured, analyzed, and optimized key web‑performance metrics such as First Contentful Paint, DNS/TCP durations, and Cumulative Layout Shift for their server‑side rendered applications, providing concrete monitoring code, data‑processing methods, and practical optimization techniques to improve user experience and achieve a 70%+ instant‑load rate.
Web Components provide native, reusable HTML elements with Shadow DOM isolation, delivering lower CPU and memory usage than frameworks like React, and are increasingly adopted by companies such as Twitter, YouTube, and Adobe, offering performance, maintainability, and reduced vendor lock‑in for modern frontend development.
This tutorial walks you through WebXR concepts, the A‑Frame framework, ECS architecture, and step‑by‑step code to create a simple VR game, covering scene setup, assets, primitives, components, JavaScript interaction, and audio integration for a complete web‑based XR experience.
Node.js now offers a native fetch() API—an experimental, Promise‑based HTTP client introduced in v17.5.0 that mirrors the browser Fetch API, simplifying requests, improving performance, and paving the way for future LTS support.
This article provides a thorough analysis of Snabbdom’s virtual DOM implementation, explaining core concepts such as vnode structure, the diff algorithm, and the patch process, and includes detailed code walkthroughs and diagrams to help developers understand and apply these mechanisms in front‑end projects.
This article explains the concept of Remote Procedure Call (RPC), demonstrates how to apply RPC for web reverse engineering by injecting JavaScript through WebSocket communication, and introduces the Sekiro framework and related tools for automating encryption parameter retrieval in browser environments.
This article explains how JavaScript's spread operator works with arrays, objects, and strings, clarifies why strings are iterable, demonstrates using for...of loops, and shows how zero‑width joiners enable the creation of complex emoji sequences.
This article explains why a WeChat mini‑program’s share card lost its QR code due to incorrect assumptions about Object.keys ordering, dives into the ECMAScript specification and V8’s internal property storage, and shows how to modify wxml2canvas to correctly sort elements and avoid the bug.
This guide walks developers through building a personal photo Alipay mini‑program using Alibaba Cloud’s Serverless platform, covering setup of the development environment, configuration of app and cloud credentials, initializing the MPServerless SDK, handling authorization, uploading images, and storing metadata in the cloud database, all with step‑by‑step code examples.
This article explores how understanding and visualizing JavaScript’s control and data flow—through abstract syntax trees, data flow graphs, and control flow graphs—can guide effective code optimization, illustrated with hardware-inspired examples and practical Arduino code, while also introducing SSA and Node Sea concepts.
The article traces React’s state‑management evolution from basic useState hooks through unstated‑next and hox to the minimalist zustand library, showing how each step reduces boilerplate, eliminates prop‑drilling and deep providers, and enables precise, hook‑based updates for modern functional components.
This article explores how digital circuit concepts inspired by Claude Shannon relate to program control and data flow, demonstrating JavaScript optimization through abstract syntax trees, data flow graphs, control flow graphs, and the Node Sea technique with practical Arduino and code examples.
This article introduces functional programming as a programming paradigm, explains its core concepts such as pure functions, higher‑order functions, closures, currying, and functors, and demonstrates how these ideas are applied in modern JavaScript frameworks and libraries with clear code examples.
This tutorial walks you through recreating the 2022 Winter Olympics mascot Bing Dwen Dwen using HTML5 Canvas, covering the drawing of its body, ears, limbs, heart, logo, and facial features with ellipses, arcs, Bezier curves, gradients, and image rendering.
This article explains how the Rax framework integrates with Huawei's HarmonyOS to allow JavaScript‑based applications across multiple devices, covering the motivations for cross‑platform development, technical solutions, rendering architecture, build pipelines, and the roadmap for future collaboration.
This tutorial demonstrates how to recreate Baidu’s Yuanxiao Festival “Tangyuan” animation by using a sprite image and JavaScript’s setInterval to repeatedly shift background positions, providing complete HTML, CSS, and JavaScript code for both forward and reverse animation effects.
This article explains why cross‑platform development is needed, compares one‑code‑many‑devices versus separate codebases, introduces Rax as a React‑style framework, and details the technical architecture, rendering pipeline, build process, and development workflow for creating HarmonyOS applications with Rax.
Discover a curated collection of must‑read articles covering Esbuild tools, ES6 compatibility, Node.js require hooks, WebAssembly trends, React 18 batching, async error handling, Vite performance, Event Loop deep‑dive, micro‑frontends, V8 internals, and more for modern frontend engineers.
This article provides a comprehensive guide to Vue 3, covering its performance improvements, tree‑shaking support, Composition API, new global APIs, lifecycle changes, reactive system enhancements, and practical code examples to help developers migrate from Vue 2 to Vue 3 efficiently.
This article introduces eight noteworthy Vue.js UI components—Sweet Modal, Vue Scrollama, Vue‑parallax, Vue‑typer, Vue‑slider, Vue.js Popover, Vue‑bar, and Vue Infinite Slide Bar—detailing their features, use cases, and GitHub links for developers looking to enhance their web applications.
The article explains the recent TC39 progress of the reversible‑string‑split proposal, outlines the criteria for advancing to Stage 1, compares JavaScript’s split behavior with other languages, and describes the new splitN method that restores reversibility while preserving existing split semantics.
This article explains how React (pre‑16.8) batches multiple setState calls using batchedUpdates, demonstrates the internal mechanism with source‑level debugging, shows code examples including setTimeout edge cases, and summarizes the key steps that enable the framework’s performance optimization.
This guide shows how to integrate the speak‑tts library into a Vue component to trigger speech synthesis on button click, covering Chrome’s autoplay restrictions, npm installation, object initialization, button markup, click handler, and a complete working example.
This guide introduces Fabric.js—a library that adds an object model, SVG parsing, and interactivity to HTML5 Canvas—and walks through setting up a Vue project, installing the library, creating a canvas element, and drawing a red rectangle with concise code examples.
The recent TC39 meeting promoted the reversible-string-split proposal to Stage 1, outlining the criteria for advancement and introducing a splitN method that makes JavaScript’s string splitting reversible, while comparing it with split implementations in other major languages.
This step‑by‑step guide shows how to hook cookies in the browser, locate and export the encrypted jsrpc function, start a local ws service, register actions, and use Python requests to automate data retrieval from a target site.
This comprehensive overview examines recent frontend trends, highlighting the rise of Python over JavaScript, the popularity of TypeScript, emerging tools like Vite and zx, the evolution of frameworks, bundlers, low‑code platforms, AI integration, cross‑platform solutions, serverless, DevOps, 5G impacts, Web3, WebAssembly, and future directions for the industry.
The article walks through Webpack’s bundling workflow, explains Tapable’s hook system—including sync, async, and interceptor mechanisms—and demonstrates a minimal hand‑written bundler that parses an entry file, builds a dependency graph, transforms code, and emits a self‑executing bundle, illustrating core concepts.
This article presents a lightweight, framework-agnostic canvas layout engine that parses CSS-like styles, performs document-flow layout, renders via a depth-first canvas draw, supports interactive events, works across web and mini-program environments, and demonstrates its API, debugging tools, performance results, and future extensions.
The article reviews the most significant JavaScript ecosystem events of 2021, covering front‑end tools like Snowpack, Vite, React, Vue, back‑end updates such as Node.js 16 and npm 7, new language features, and notable deprecations, providing concise summaries and code examples.
This article explains common pitfalls when using conditional expressions in React JSX—such as rendering zero, operator precedence, ternary nesting, and using JSX as a condition—and provides clear recommendations like explicit boolean checks, parentheses, key usage, and avoiding overly complex ternary operators.
This article explains Vue 3's reactivity mechanism by dissecting the ref API, showing how dependency collection and triggering work through effect functions, and describing the bit‑mask optimization introduced in Vue 3.2 to efficiently update only stale dependencies.
This article introduces JsRpc, a WebSocket‑based bridge between a browser and a Go server that lets you execute custom JavaScript from HTTP‑style calls, enabling reverse‑engineering, encrypted function calls, and data extraction.
In this translated AMA, Three.js creator Ricardo Cabello discusses his journey from the Demoscene to Google, the evolution of Three.js, challenges of open‑source maintenance, performance optimizations, WebGL versus WebGPU, VR/AR prospects, and the future role of web graphics in the metaverse.
This newsletter curates a collection of technical articles covering WebAssembly's future, Deno's 2021 progress, JavaScript garbage collection fundamentals, front‑end debugging best practices, modern CSS color systems, FormData usage, and advanced JavaScript features like iterators and generators.
