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 guide explains how Sentry's browser SDK integration tests are built with Playwright, covering test structure, helpers, fixtures, local execution commands, troubleshooting tips, and step‑by‑step instructions for setting up and running the tests across Chromium, Firefox, and WebKit.
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.
This article explores the evolution of browsers, the layered architecture of front‑end development, the role of standardization bodies, and how understanding browser internals—from multi‑process models to JavaScript engines—helps developers write more efficient, compatible, and future‑proof web applications.
The December TC39 meeting updated several proposals—including moving Intl.Segmenter to Stage 1 as V2, adding new timeZoneName values, expanding Intl.DisplayNames, introducing Array.prototype.groupBy and Array.fromAsync, and refining RegExp modifiers and buffer boundaries—while outlining the criteria for advancing proposals through the stages.
This guide shows how to generate smooth, high‑quality curves from a polyline in pure JavaScript by computing quadratic and cubic Bézier points, deriving control points via angle‑bisector geometry, assembling the segments, and rendering and animating the result on an HTML5 canvas without external libraries.
Canvas performance hinges on the number and size of drawn shapes, so optimizing by reducing draw‑calls, using layered or clipped rendering, and offloading heavy drawing to OffscreenCanvas or Web Workers can preserve frame rates and keep the UI responsive.
This article presents twenty concise JavaScript one‑liner snippets that boost front‑end productivity, covering tasks such as retrieving cookies, converting RGB to hex, copying to clipboard, validating dates, calculating day differences, manipulating strings, arrays, and detecting dark mode, each illustrated with ready‑to‑use code examples.
Node.js 12.22.8 (code‑named “Er”) has been released, featuring a c‑ares update to fix underscore CNAME resolution, updated Mozilla NSS root certificates, and a series of additional commits ranging from build and dependency upgrades to bug fixes across various modules.
This article explains React's event system, covering how onClick events are delegated to the document, processed through synthetic events, and handled via the fiber architecture, plugin registry, and priority-based dispatching in React 16.13.1.
This article provides a step‑by‑step tutorial on how to use html2canvas to screenshot Baidu Maps (both v3.0 and GL v1.0), handle cross‑origin image issues, adjust SVG overlay positions, and download the resulting images using canvas or base64 data URIs.
Optimizing HTML5 canvas performance involves reducing draw calls, using layered and clipped rendering, performing quick bounding‑box checks, and offloading heavy drawing to OffscreenCanvas with Web Workers, enabling smooth animation even when thousands of shapes are rendered.
This article explains how to build a lightweight virtual DOM library in JavaScript, covering the creation of VNode objects, the patch and diff algorithms, handling of attributes, classes, styles, and events, and demonstrates a step‑by‑step implementation using the Snabbdom approach.
This tutorial shows how to import the required OpenLayers modules into a Vue project, configure a map, add a Polygon draw interaction, handle the drawend event to compute and format the polygon's area using OpenLayers' getArea function, and provides a complete working example with code.
This guide shows how to load a GeoServer TileWMS layer in a Vue app with OpenLayers, configure map and line layers, add a selectable draw interaction for LineString geometry, capture drawn coordinates, and provides a complete Vue component example.
This tutorial walks through importing OpenLayers modules into a Vue component, defining line coordinates, creating vector sources and layers, styling the line, and integrating the line layer with other map layers to render a green polyline on the map.
This article explains Vue 3's Composition API, covering how to create reactive data with ref and reactive, use toRefs, define computed properties, apply readonly, watch and watchEffect, handle lifecycle hooks, pass props, and share state via provide and inject, all with practical code examples.
This article walks through building a Vue 3‑style reactivity system from scratch, covering effect functions, dependency collection with Set/Map/WeakMap, automatic tracking via Proxy, and the implementation of reactive and ref utilities, all illustrated with complete JavaScript code examples.
Markdeep is an open‑source JavaScript plugin that turns any plain‑text file into a fully rendered Markdown document with support for tables, LaTeX equations, charts and even PPT‑style slides, requiring only a single markup line and no additional installations.
This article details Laiye Technology’s AI R&D team’s end‑to‑end approach to designing and optimizing a custom entity‑relationship annotation tool, covering data‑labeling challenges, shortcomings of Excel and off‑the‑shelf solutions, architectural requirements, line‑breaking and mark‑position algorithms, performance improvements, and real‑world results.
This guide explains how to initialize JavaScript arrays with primitive values, shared object references, and distinct object instances using methods like Array.fill, Array.from, and map, highlighting pitfalls of shared references and offering practical code examples for each approach.
This article introduces the importance of frontend unit testing, presents survey data on current practices, compares popular frameworks like Jest and Mocha, provides step‑by‑step setup instructions, demonstrates code examples for JavaScript, TypeScript and async functions, and explains how to generate coverage reports and use common assertions.
This article walks through the process of creating both simple and advanced UI animations in an e‑commerce setting using imgcook, covering animation decomposition, state handling, transition delays, keyframe usage via Element.animate, and practical tips for avoiding repeated triggers.
This article introduces the use-gesture library, a lightweight React and vanilla JavaScript tool for enriching mouse and touch interactions, explains installation via Yarn or npm, demonstrates various gesture hooks with code examples, and showcases visual effects through animated demos.
This article introduces a pure‑frontend approach to Web AR using AR.js, explains core technologies like WebRTC, JSARToolKit, A‑Frame, and Three.js, guides through HTTPS setup, demonstrates image‑tracking and video examples, and shows how to integrate Agora video calls for remote cat‑watching.
This article explains the concept of Native‑ESM, traces the evolution of JavaScript module systems from IIFE to ES Modules, and shows how Vite leverages native ES modules, ESBuild, and caching to achieve dramatically faster cold starts and hot updates compared to traditional bundlers like Webpack.
This article explores the implementation of @mention functionality in modern front‑end rich‑text editors, covering background, industry examples from Weibo and Twitter, core concepts like Range and Selection APIs, cursor handling, search pop‑ups, key interception, and techniques for inserting custom @tags with code snippets.
This tutorial explains how to create a Chrome extension that injects JavaScript into Juejin pages to load a Live2D cat model, covering manifest configuration, script injection, canvas setup, optional real‑time chat integration, and step‑by‑step installation instructions.
The article introduces the vscode‑cats VSCode extension that embeds a Live2D cat into the editor, explains its motivation, installation steps, configuration options, core implementation using HTML and TypeScript, and provides troubleshooting tips for checksum warnings, offering a practical guide for developers.
This article explains how the JavaScript with statement creates a new lexical scope that can unintentionally create global variables, cause data leakage, and dramatically degrade performance, while also covering LHS/RHS lookup, execution contexts, variable/activation objects, and scope chain mechanics.
Konva.js detects whether a point lies inside a shape by assigning each shape a unique random color key, rendering a hidden hitCanvas with these colors, and then reading the pixel color at the click position to identify the corresponding shape, supporting up to 16.7 million objects.
This tutorial walks you through creating a full‑stack word‑cloud web application using Flask for the backend and Vue for the frontend, covering environment setup, project structure, dependency installation, core code snippets, and how to run and package the app.
This article explains how the V8 JavaScript engine allocates memory, why garbage collection is necessary, describes the memory layout of new and old generations, reviews common GC algorithms such as reference counting, mark‑sweep, mark‑compact and incremental marking, and offers practical tips for writing high‑performance JavaScript code.
Learn three JavaScript approaches—using map with join, map with manual concatenation, and reduce—to extract a specified property from each object in a JSON array and combine the values into a comma-separated string, with full code examples.
This article demonstrates how to refactor tangled asynchronous request chains and complex if‑else logic in JavaScript by replacing callback hell with Promise.all and async/await, extracting pure helper functions, and applying best‑practice principles to improve readability, testability, and maintainability.
This article explains how to build a QR‑code based login system by designing a token table, defining roles, creating two REST APIs (generate QR code and confirm identity), and integrating front‑end JavaScript with a Spring Boot WebSocket server, complete with full code examples and step‑by‑step instructions.
This document details the EE NEXT SDK team's technical decisions to adopt Web Components for front‑end component development, explains the benefits and drawbacks of Custom Elements and Shadow DOM, outlines challenges such as cross‑stack compatibility, bundle size, style isolation, and provides practical implementation guidance and best‑practice recommendations.
This article details the end‑to‑end development of Douyin's National Day mini‑game, covering the Lynx + Cocos tech stack, core Cocos concepts such as ECS, node hierarchy, lifecycle, a step‑by‑step walkthrough of the star‑catcher demo code, background looping strategies, checkpoint transitions, character Spine animation, resource loading pipelines, custom bitmap fonts, and a series of performance optimizations for mobile deployment.
The article outlines Microsoft’s TypeScript 4.5 release with its new type‑system features and performance fixes, then shifts to Google’s unveiling of the Fuchsia OS, its microkernel architecture, and growing speculation that Android 12 could be the final Android update.
This guide walks through extracting and reproducing the encrypted parameters required to post chat messages on Laifeng live streams, covering site navigation, packet capture, timestamp generation, signature calculation via JavaScript decryption, and a complete Python script that logs in, builds the request, and sends the comment.
This article reviews the most suitable programming languages for artificial intelligence, explaining why Python, R, Java, LISP, Prolog, C++, Haskell, JavaScript, and Julia excel in AI development and outlining their key advantages and typical applications.
This guide explains how to create a WeChat chatbot using the open‑source Wechaty SDK, covering required npm packages, QR code login, bot initialization, message sending, and important considerations such as Node.js version and npm mirror configuration.
Despite the rise of newer frameworks like React and Next.js, jQuery remains a dominant JavaScript library with a 78% market share, deeply embedded in platforms such as WordPress, and continues to evolve through updates to its core and UI components while facing performance debates.
This article explains what ESLint is, walks through its installation and basic configuration, dives into detailed rule, parser, and plugin settings, describes its AST‑based analysis process, and shows how to integrate it with tools like VSCode, Prettier, Husky and lint‑staged for robust JavaScript code quality enforcement.
Rust, a fast and memory‑efficient language adopted by major tech firms, is increasingly replacing JavaScript in web tooling such as bundlers, compilers, and linters, with projects like SWC, Deno, and WebAssembly demonstrating its performance, safety, and growing ecosystem for the future of JavaScript infrastructure.
This article explores the surprising 13KB JavaScript game "Space Huggers," explains the JS13k competition rules, and shares practical techniques—pixel graphics, minimalist sound, lightweight engines, and code trimming—that developers can use to create ultra‑small yet functional browser games.
This article explains the fundamentals of state and strategy patterns, introduces XState as a true finite‑state‑machine library, compares it with Redux/Vuex, discusses its advantages and drawbacks, and provides practical code examples for plain JavaScript, React, Vue 3 and Promise integration.
This article introduces RxJS, explains the prerequisite concepts of reactive programming, streams, observer and iterator patterns, and then details core RxJS constructs such as Observable, Observer, Subscription, and Subject with code examples and visual illustrations.
This article introduces six intriguing open‑source projects—including an audio‑based keylogger, a high‑accuracy face‑recognition library, a TensorFlow.js video‑person removal tool, a Chinese kinship calculator, a Java Word template engine, and a sleek macOS Markdown editor—each with brief descriptions, screenshots, and usage examples.
This article reviews recent TC39 proposals that have reached Stage 4—including Intl.Segmenter, Error Cause, Intl.DurationFormat, Array.groupBy, Destructuring Private Fields, String.cooked, RegExp modifiers, RegExp \R, buffer boundaries, Evaluator Attributes, and Bind‑this—explaining their goals, usage, and providing practical JavaScript code examples.
A SlashData survey of over 19,000 developers reveals JavaScript as the most widely used language, highlights rapid growth for Python, Rust, and PHP, and examines regional 5G involvement and salary‑driven job‑change motivations across the global developer community.
This article explains the need for JavaScript modularization, compares major module standards such as CommonJS, AMD, CMD, UMD and ES Modules, and traces their historical evolution, highlighting benefits, drawbacks, and practical usage examples for modern front‑end development.
This article introduces WebTorrent, an open‑source JavaScript library that brings BitTorrent‑style peer‑to‑peer file sharing and streaming directly to browsers using WebRTC, explains its advantages over traditional download tools, and provides step‑by‑step code examples for both web and Node environments.
This guide walks you through using Postman to automate API testing, covering result validation, batch execution, variable handling, environment management, and dependency resolution with practical JavaScript snippets and step‑by‑step instructions.
This article examines jQuery’s historic rise, its deep integration in platforms like WordPress, the reasons it survived the shift to modern frameworks such as React, Angular and Vue, and why it may still be a useful tool despite declining popularity.
This article introduces the five major new features of ES2021, including numeric separators, String.prototype.replaceAll(), Promise.any, logical assignment operators, and WeakRefs, with detailed explanations and code examples.
This article explains the concept of JavaScript sandboxing, outlines common use cases, walks through several implementation strategies—from simple eval wrappers to with‑Proxy‑iframe combos—and discusses sandbox escape techniques and how to mitigate them, providing practical code examples throughout.
By leveraging pixel color and alpha values, this guide explains how to determine whether a user click falls inside a Canvas shape, compares it with traditional methods like crossing number and winding number, and provides a practical implementation using Create.js with sample code.
This article provides a collection of practical JavaScript snippets covering cookie handling, color conversion, clipboard operations, date validation, string manipulation, array utilities, URL query extraction, time formatting, and dark‑mode detection, all useful for front‑end developers.
This article explains the concept of requestIdleCallback, its limitations, and how React Fiber implements a custom idle‑time scheduler using requestAnimationFrame and MessageChannel, complete with code demos and analysis of the underlying React source.
This tutorial walks through creating a 3D login page using Vue 3 and three.js, covering scene setup, lighting, camera configuration, renderer initialization, animation loops, and additional effects such as an orbiting earth, star field, and moving clouds.
The article explains that while a Vue root instance can define its data as an object or a function, a component's data must be a function to avoid shared memory between instances, illustrating the issue with code examples and detailing Vue's option‑merge validation.
This tutorial walks through redesigning a complex role‑relationship page using PIXIJS for 2D rendering, custom GLSL shaders for cloud effects, TWEENJS for smooth animations, and careful performance tuning to ensure responsive behavior across devices.
This article explains QR code fundamentals, including its advantages, structural components, error‑correction levels, design principles, generation workflow, JavaScript implementation details, and extensions such as artistic QR codes and mini‑program codes, providing practical examples and visual illustrations.
This article explains how to replace a heavy 78 KB GIF loading animation with the lightweight Fancy-Components wave‑filter web component, covering its installation, configuration, and usage in plain HTML, React, Vue 2, Vue 3, Vue‑CLI, Vite, and custom attribute options such as color, duration, amplitude, delay, mode, and interval.
This course introduces AJAX (Asynchronous JavaScript and XML), explaining how it enables browsers to fetch data without page refresh by sending asynchronous requests, and clarifies that AJAX is a technique combining existing web standards rather than a new programming language.
This article examines the limitations of the original DVA framework, proposes a mini‑async‑dva fork that adds async/await support to model effects, and details its implementation—including store management, dynamic model registration, and asynchronous component loading—while providing full code comparisons.
This article explains why React introduced Hooks, compares the official Hooks with popular third‑party libraries ahooks and react‑use, lists their most useful Hooks, shows how to install them, and provides a custom Hook example for displaying error modals, helping developers write cleaner, more reusable functional components.
This article provides a comprehensive overview of Redux, covering its design philosophy, core components, API implementation, React bindings, and practical code examples to help developers understand and apply state management effectively in modern front‑end applications.
The article explains how integrating Source Maps—generated by modern bundlers and automatically uploaded via a Webpack plugin—into iQIYI Hawkeye’s front‑end exception monitoring restores original file names and line numbers for minified production JavaScript errors, enabling rapid debugging despite bundle‑size and versioning challenges.
This article explains the evolution of JavaScript module standards—from early CommonJS and AMD/UMD approaches to the native ES modules (ESM)—and shows how bundlers, browsers, and tooling work together to manage dependencies, improve code organization, and enable modern web development.
