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.
This document identifies common JavaScript code pitfalls, such as inefficient array methods and complex conditionals, and provides best practices for improving code readability and maintainability through modern JavaScript techniques and tools.
The article reviews TC39’s 2020 final meeting, outlines stage‑gate requirements, and explains key proposals—including Error‑cause, Module Blocks, Extensions, and Grouped Accessors—detailing their motivations, syntax, and potential impact on JavaScript development.
The 2020 TC39 meeting reviewed several ECMAScript proposals—including Error Cause, Module Blocks, Extensions, and Grouped Accessor—detailing their motivations, required champion work, and code examples, while noting that no proposal advanced to a higher stage during the session.
This article walks you through building a fully functional Promise library in JavaScript, starting with a basic implementation, then adding asynchronous handling, chaining, state management, error handling, and finally aligning with the Promise/A+ specification, complete with code examples and testing guidance.
This article explains three practical SSO implementation methods—using a parent‑domain cookie, deploying an authentication center, and leveraging LocalStorage with iframe/postMessage—to share session IDs or tokens across multiple web applications, discussing their advantages, limitations, and code examples.
This guide shows how to create a simple web page that converts a given text string into spoken audio using the HTML5 SpeechSynthesis API, with a complete code example, execution steps, and browser compatibility notes.
This article introduces AntV X6, a versatile JavaScript graph‑editing engine, covering its core capabilities such as node and edge creation, custom HTML/React nodes, rich connection styles, grid and background options, interactive tools like ports, grouping, selection, undo/redo, and provides links to tutorials, demos, and extensibility mechanisms.
This article explains how Taobao redesigned its web‑to‑app deep‑link system, introduced a lightweight JavaScript SDK, standardized protocol configurations, and built a control platform to improve deep‑link success rates by up to 40% during the Double 11 shopping festival, while providing detailed metrics and future optimization directions.
This article explains the concept of Progressive Web Apps, compares them with native and traditional web apps, details the implementation of core PWA features such as App Manifest, Service Worker, caching strategies, push notifications, and Workbox best practices, and shares metrics, challenges, and solutions encountered during the Sharee mobile project.
This article demonstrates how to replace heavy swiper libraries with a slim, pure‑CSS carousel using scroll‑snap‑type, scroll‑snap‑align, and scroll‑behavior, and adds a small JavaScript polyfill for smooth scrolling and automatic slide rotation, complete with npm packaging and compatibility notes.
This article introduces JavaScript fundamentals, explains three ways to include scripts, demonstrates simple click events, shows how to use selectors, outlines event handling, and covers DOM manipulation techniques such as modifying content, styles, and classes, including retrieving computed styles.
This article explains the differences between Node and Element in the DOM, clarifies the roles of NodeList and HTMLCollection, demonstrates how to inspect child nodes with code examples, and provides practical tips for handling these objects in frontend development.
This article provides a step‑by‑step tutorial on installing Node, vue‑cli, and Electron, explains the Electron source and project directory layouts, describes the main and renderer processes, and showcases two complete Electron‑Vue sample applications with full command‑line instructions.
This tutorial demonstrates how to create a lightweight chatroom by combining WebSocket on the front end with Swoole's WebSocket server in PHP, covering project setup, required environment, client‑side HTML/JS, server‑side PHP code, and steps to run and test the application.
The article introduces pure functions and shows how JavaScript functors like Box can lazily transform values with map, uses LazyBox to defer side effects until fold, then extends the concept to applicative functors and Either for composable validation via ap and liftA2 helpers.
The guide details how the Jimu Sketch plugin was transformed from a simple internal tool into a platform‑wide solution that supports multi‑business switching, automated library conversion, UI/UX enhancements, performance caching, a native inspector panel, and deep JavaScript‑Objective‑C integration for scalable design‑system workflows.
This article introduces the classic Hello World example in JavaScript, demonstrates the standard alert implementation, then challenges readers to output Hello World using only six characters through JSFuck techniques, explaining the underlying type coercion, array creation, and operator tricks that make it possible.
JavaScript’s 0.2 + 0.1 yielding 0.30000000000000004 stems from binary floating‑point representation, where many decimal fractions cannot be expressed exactly; the article explains decimal‑to‑binary conversion, the repeating binary of 0.1, IEEE‑754 format, and how to avoid precision loss using BigDecimal in Java.
This article provides CTOs and project managers with a comprehensive comparison of React and Vue, covering factors such as code quality, type checking, modularity, learning curve, developer friendliness, testing, server‑side rendering, performance, scalability, application size, and practical use‑case recommendations.
This article explains how Node.js's vm module creates isolated execution contexts, demonstrates several sandbox‑escape techniques using prototype chain manipulation, and offers practical solutions such as code scanning, using vm2, or building a custom interpreter to mitigate security risks.
tocbot is a JavaScript library that generates a table of contents from HTML content, allowing users to navigate documents easily with scrolling synchronization.
The 15th D2 Frontend Technology Forum, an Alibaba‑hosted online conference on Youku (Dec 19‑20 2020), offers early‑bird (30 CNY) and regular (98 CNY) tickets and features five tracks—including language frameworks, cross‑end tech, serverless Node.js, security, and diversified applications—showcasing ECMAScript, RxJS, Flutter, IoT, game‑level interaction and multimedia in a non‑profit, coffee‑price experience.
This guide explains the fundamentals of tensors in TensorFlow.js—including scalars, vectors, and higher‑dimensional tensors—demonstrates how to convert real‑world data such as the Titanic dataset into tensors, and shows how to build, compile, and train a simple neural network model using appropriate layers, loss functions, and optimizers.
A satirical list of ten misguided developer habits—from obsessively mastering JavaScript to ignoring communication—highlights how these anti‑patterns sabotage code quality, teamwork, and career growth, offering a cautionary guide for anyone aiming to become a better programmer.
This guide explains how to install Axios, set up a reusable HTTP module in a Vue project, configure environment‑specific base URLs, define request timeouts and headers, and implement request and response interceptors along with simple get/post wrapper functions.
Node.js 15, the latest runtime release, replaces Node.js 14 as the active line, introduces npm 7 with workspace and peer‑dependency auto‑install, switches unhandled promise rejections to throw mode, adds N‑API 7, updates V8 to 8.6, and includes QUIC support, though it is not yet LTS and isn’t recommended for production.
The article reviews the latest TC39 meeting, detailing the progression of multiple ECMAScript proposals—including Error Cause, Intl.DisplayNames, .item(), Import Assertions, class static blocks, resizable buffers, enumeration APIs, double‑ended iterators, integer math extensions, standardized debug, string dedent, and locale enhancements—while explaining stage requirements, implementation notes, and example code.
The article explains that JavaScript’s single‑threaded language model relies on the engine and runtime to provide asynchronous I/O and an event loop for concurrency, while multi‑core utilization is achieved through workers, child processes, or clusters, and synchronous APIs remain useful for short, predictable tasks.
In the era of big data and GDPR, front‑end developers must protect personal information beyond HTTPS by using a hybrid AES‑RSA encryption scheme, and this article explains the threats, compares symmetric, asymmetric and hash algorithms, and provides full client‑side and Node.js server implementations with code examples.
This article explains why JavaScript’s Number type, which follows the IEEE‑754 double‑precision standard, can produce unexpected results such as 0.1 + 0.2 = 0.30000000000000004, demonstrates the binary representation of numbers like 2.5 and 0.1, and offers practical techniques and libraries to mitigate floating‑point errors.
The TC39 meeting covered a range of ECMAScript proposals—including Error Cause, Intl.DisplayNames, .item() for indexables, Import Assertions, Class static initialization blocks, ResizableArrayBuffer, Intl.Enumeration, Double‑Ended Iterators, integer‑math extensions, Standardized Debug, String Dedent, Intl Locale and DisplayNames v2—detailing their stage‑gate requirements, example implementations, and impact on JavaScript development.
This article provides a comprehensive walkthrough of the Vue‑Router source code, explaining its initialization, matcher creation, routing modes, navigation methods, router‑view and router‑link components, and demonstrates how to implement dynamic route permission control using Vuex and global navigation guards.
This article identifies four common programming patterns—loops, conditional statements, vague variable names, and global scope—that hinder code clarity and maintainability, and shows how to replace them with higher‑order functions, data‑driven structures, purposeful naming, and encapsulation techniques.
This article demonstrates two ways to retrieve user-entered text in a React component—by accessing the event object's target value in an onChange handler and by defining a ref to read the input value directly—along with the supporting index.js setup.
This article explains Redux’s simple yet powerful state‑management model, its three core principles, key concepts such as actions, reducers, and store, and demonstrates how to integrate Redux with React using react‑redux’s Provider and connect APIs with practical code examples.
This tutorial introduces React fundamentals, covering installation, JSX syntax, component creation with functions and classes, props and state management, lifecycle events, controlled and uncontrolled forms, and component communication patterns and best practices.
This article introduces common frontend design patterns—creational, structural, and behavioral—explains the SOLID principles behind them, and provides clear JavaScript examples for each pattern, helping developers understand when and how to apply them for more maintainable code.
This article explains Vue's $nextTick by first detailing JavaScript's single‑threaded event loop, then showing how Vue batches DOM updates using macro‑ and micro‑tasks, and finally walks through a custom implementation with code examples and common pitfalls.
WeChat Mini Programs now support sharing to Moments via a new single‑page mode that shows a fixed navigation bar and bottom bar, imposes restrictions such as no login or navigation, requires setting navigationBarFit, and can be handled by detecting scene 1154 and using conditional logic, dedicated components, or an ExtendPage helper to adapt page behavior.
This article dissects HarmonyOS 2.0's embedded GUI stack, explaining its three abstraction layers—JS framework, JS engine/runtime, and graphics rendering—while detailing the underlying open‑source components, custom C++ integrations, performance trade‑offs, and practical code examples for developers.
This guide walks through building a Spring MVC backend that accepts multiple image uploads, returns them for preview, and covers front‑end HTML, JavaScript handling, multipart configuration, and common pitfalls such as parameter naming, file size limits, and global exception handling.
The article outlines practical front‑end performance tricks—caching object references, freezing immutable data to bypass Vue reactivity, using preload/prefetch/DNS‑prefetch/prerender/preconnect tags, and initiating parallel API and asset loads—demonstrating measurable bundle size reductions and faster page rendering in a Vue‑based Vivo site.
This article compares three real‑time data delivery techniques—long/short polling, Server‑Sent Events, and WebSockets—explaining their mechanisms, advantages, drawbacks, and providing sample client‑server implementations to help developers select the most suitable approach for a dashboard that streams GitHub/Twitter activity.
TWebLive, Tencent Cloud’s new web‑live interactive SDK, bundles TRTC, TIM and TCPlayer to let developers add push streaming, low‑latency WebRTC or CDN playback, and real‑time chat or bullet‑screen interaction with simple APIs, demo projects and open‑source code, replacing legacy Flash solutions.
The article shows how to avoid hard‑coded status strings in Vue by defining a reusable errorCode module, importing it where needed, and mapping backend response codes to human‑readable messages with a default fallback, simplifying maintenance across the project.
This tutorial explains how to configure a certified WeChat public account, construct the OAuth authorization URL, exchange the returned code for an access token, retrieve the user's basic profile—including nickname—and redirect back to the H5 page, while covering required parameters and token refresh details.
This guide shows how to protect plaintext passwords in a Vue login flow by using RSA asymmetric encryption with the JSEncrypt library, generating key pairs, creating utility functions, and storing encrypted credentials in cookies while providing decryption on retrieval.
Learn how to create a browser‑compatible MNIST image classification model using TensorFlow.js, covering data preprocessing with sprite images, model construction, training, and evaluation, while providing complete JavaScript code examples and practical tips for handling ArrayBuffer, DataView, and visualization.
Apache ECharts 4.9.0, an open‑source JavaScript charting library incubated by Apache, introduces new features such as polygon graph connections and horizontal funnel orientation, adds tooltip text shadow and brush style options, and resolves numerous bugs across components like toolbox, tooltip, and bar charts.
This article provides a step‑by‑step tutorial on installing Node, Vue‑CLI, and Electron, creating and running Electron projects, explaining the source directory layout, main and renderer processes, and showcasing real‑world examples such as a cloud music player and a QQ music client.
Using setInterval for repeated tasks in JavaScript can lead to unhandled errors, ignore network latency, and provide no guarantee of execution timing, causing request overloads and missed intervals; replacing it with setTimeout and dynamic scheduling ensures more reliable, controlled, and error‑resilient timing behavior.
This tutorial shows how to craft playful romantic messages and visual heart art using Python and JavaScript code snippets, including ASCII‑based text, a one‑line heart generator, QR code creation, and a canvas‑drawn rose, all illustrated with example outputs.
