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.
This article provides a comprehensive reference for Moment.js, covering how to add or subtract time, set moments to the start or end of units, format dates with tokens, handle localization, compute relative times, and convert moments to native values, all illustrated with concrete code examples.
The article explains how JavaScript engines store variables in stack and heap memory, clarifies why const primitives are immutable while object properties can change, shows that new objects reside in heap, and discusses allocation efficiency and garbage‑collection behavior of both memory regions.
Through a playful narrative featuring SpongeBob and a rival boss, this article explains the high‑frequency front‑end interview topic of the Observer pattern, illustrates its core concepts, shows one‑to‑many relationships, and provides a complete JavaScript implementation with clear code examples.
This article introduces the Unified text‑processing ecosystem, explains its AST‑based core, surveys major plugins such as remark, rehype, retext, and demonstrates practical usage examples—including Node.js documentation, dumi, and react‑markdown—to help developers understand its capabilities, workflow, and integration patterns.
Discover how the open‑source Heti project lets you effortlessly apply traditional Chinese typography to web pages, offering grid‑aligned layouts, built‑in ancient poem styles, dark‑mode support, and simple CSS/JS integration for flawless text rendering.
Playwright, Microsoft’s open‑source end‑to‑end UI testing framework, supports all major browsers, multiple programming languages, isolated contexts, auto‑waiting, and powerful selectors, making it a fast‑growing alternative to Selenium for developers seeking reliable, cross‑browser automation.
Taro v3.4 introduces official Preact support, expanded Vue 3.2 capabilities, extensive H5 performance and routing improvements, new defineAppConfig/definePageConfig macros, a list of bug fixes and breaking changes, plus a step‑by‑step upgrade guide for developers.
This article walks through the creation of a Spring Festival themed mini‑game using Vue.js, covering game rules, global settings, menu generation, sound handling, bullet‑chat implementation, enemy (NianShou) behavior, firecracker control, bullet mechanics, a timed quiz system, and end‑game handling, all illustrated with code snippets.
This tutorial explains how to set up and use Puppeteer together with the Mocha test framework to create, run, and report UI automation test cases for web and H5 applications, covering installation, a demo script, selector handling, and visual test reporting.
This tutorial explains how to create a fully functional web H.265 video player using JavaScript stream demuxing, WebAssembly‑compiled FFmpeg, Canvas rendering and AudioContext, covering project setup, Nginx configuration, HTML integration, and the core modules and threads that drive playback.
A seasoned front‑end engineer shares ten VS Code extensions—ranging from HTML snippets and CSS class IntelliSense to Live Server and bracket colorizers—that dramatically streamline coding, improve productivity, and simplify common web development tasks for developers of all levels.
This article explains the browser's rendering pipeline—from render trees and layers to compositing and rasterization—and provides practical techniques such as passive event listeners, requestAnimationFrame, CSS containment, and will-change to dramatically improve animation smoothness and reduce layout and paint costs.
This article explores the most popular front‑end development trends for 2022, covering JAMstack, progressive web apps, JavaScript dominance, single‑page sites, AI chatbots, Gatsby, and React, while explaining why these technologies are reshaping web user experiences.
Markdeep is an open‑source JavaScript plugin that transforms plain‑text files into fully rendered Markdown documents—including tables, LaTeX math, and charts—without installing extensions, and can be used by simply adding a single line to any text editor, making offline, browser‑based publishing effortless.
This article explains how to implement native HTML5 drag‑and‑drop, details the required draggable attribute, describes all related events, shows a simple JavaScript demo, discusses common pitfalls such as repeated ondragover and ghosting, and compares popular React libraries for drag‑and‑drop.
This article introduces the ZRender canvas rendering engine, explains its underlying Canvas2D API, demonstrates how to integrate ZRender into projects, and provides detailed code examples for creating shapes, handling events, adding animations, and extending the library with custom elements such as video support.
This report details the development, requirements, core JavaScript implementation, probability testing, and functional verification of the 2022 annual meeting lottery tool, demonstrating that the random selection algorithm yields fair and statistically expected results for all prize tiers.
This article dives into V8's internal optimizations for object properties, covering fast and slow properties, in‑object storage, hidden classes, array holes, fast/slow arrays, and inline caches, and offers practical advice for writing high‑performance JavaScript code.
This article traces the evolution of JavaScript asynchronous handling from callbacks to Promise and Async/Await, explains their internal mechanics with code examples, compares implementations, highlights limitations, and discusses how future frontend engineering may address these challenges.
This article explains the conceptual and practical differences between JavaScript's null and undefined values, covering their definitions, type checking methods, comparison behavior, arithmetic conversion, JSON serialization, and best practices for usage.
The article explains why readable code matters, shows a messy JavaScript example, lists common readability problems, and provides concrete guidelines—consistent style, meaningful naming, proper comments, small files, shallow nesting—along with tooling tips such as ESLint, Standard Style, husky and lint‑staged to enforce them.
This article explains how front-end developers can directly download resources from CDN or object storage using HTML5's download attribute and JavaScript workarounds, addressing CORS limitations and providing code examples for implementation.
Based on LinkedIn, Indeed and Glassdoor data, CodingNomads ranks the most in-demand programming languages for 2022, highlighting Python, Java, JavaScript, C++, and others, and reveals average U.S. salaries, career prospects, and recommendations for beginners on which language to master first.
The article explains how the V8 engine parses source code into an AST, compiles it to bytecode and optimized machine code, describes JavaScript execution concepts such as scopes, call stacks, and the event loop, and provides practical performance‑tuning tips with code examples.
This article explains why React introduced Hooks, how they solve state‑reuse and component‑complexity problems, details the internal fiber architecture behind useState, useReducer, useEffect, useLayoutEffect, useCallback and useMemo, and provides practical code examples for each.
This article explains how JavaScript's parseInt function works, its handling of radix and floating‑point numbers, why it produces surprising results with very small values, and recommends safer alternatives like Math.floor for extracting integer parts.
This article walks through the fundamentals of Figma plugin development, explaining the architecture of main and UI threads, demonstrating core features of the lego‑quiz‑figma plugin, and providing a complete workflow from creating the manifest to publishing the plugin, complete with code examples and best‑practice tips.
This article details the complete design and implementation process of a mobile signature component using HTML5 Canvas, covering requirements, architecture, event handling for touch and mouse, landscape mode handling, drawing optimization, and file export techniques for both base64 and File formats.
This article presents a curated collection of 2022 New Year web animation effects—including countdown timers, fireworks, CSS text animations, and dynamic greetings—each with a brief description, preview image, and direct download link for the JavaScript or CSS code.
Immer.js, created by the author of MobX, provides a lightweight immutable data library for JavaScript using ES6 proxies, offering simple APIs and seamless integration with React’s state management, while comparing its concepts, implementation details, and trade‑offs against Immutable.js and manual cloning techniques.
Writing robust front‑end code involves systematic exception handling, thorough input validation, disciplined code‑style practices such as default cases and optional chaining, careful selection of mature third‑party libraries, and proactive robustness testing like monkey testing to ensure the UI remains functional under unexpected conditions.
