This article explains what cross‑origin requests are and presents four practical solutions—webpack proxyTable, SwitchHosts, Uuaper, and Nginx—detailing configuration steps, common pitfalls, and code examples to help developers overcome CORS problems during local development.
This article showcases an obscure JavaScript expression built from the characters ()+[]! that, when run in a browser, produces the same result as alert(1), and explains its origin on the Esolang Wiki and a popular GitHub repository.
This guide lists the essential server and frontend component versions—including JDK, Maven, Spring Boot, Spring Cloud, Node, and Npm—explains special considerations for Spring milestone releases, and provides ready-to-use Maven repository and pluginRepository XML snippets for proper dependency management.
The article chronicles the development of 360 Search's Easter eggs—from early on‑demand implementations to a reusable seasonal egg framework and automated animation tools using Adobe Animate, After Effects, bodymovin, and lottie‑web—highlighting how automation reduced front‑end effort and enabled interactive web animations.
The article explains the progression from tightly coupled MVC architectures to partially separated RESTful designs and finally fully decoupled front‑end/back‑end systems, highlighting the roles of Node.js, client platforms, server types, performance challenges, and stability solutions for modern mobile web applications.
The article advises front‑end developers to improve JavaScript function quality by adopting clear, English‑style names, using consistent prefixes for visibility, writing informative comments such as JSDoc, and applying defensive programming techniques—including default parameters, try/catch, and granular promise error handling—to create maintainable, robust code.
A viral post about the popular JavaScript FLV player flv.js reveals how a talented Chinese open‑source author struggles for fair recognition, highlighting technical merits, impressive GitHub stats, and broader systemic issues in China’s open‑source ecosystem.
This article explains how to use WebGL and the Three.js library to create a cross‑platform 3D medal system, covering model format choices, scene setup, rendering code, performance optimizations such as gzip compression, caching, skin switching, and graceful fallback for older devices.
The article outlines a front‑end engineer’s three‑stage journey—survival, growth, and system building—offering practical demand‑management tactics, efficiency hacks, business‑centric planning, and structured thinking methods to help developers balance heavy business workloads while advancing technical skills and career development.
This article describes the design and architecture of a front‑end monitoring platform, detailing its JS SDK, data analyzer, web UI, reference log‑collection architectures, use of Kafka, MySQL, Hive and HBase, scaling considerations, storage conventions, and operational best practices.
Facing rapid growth and the need to support dozens of OTT platforms, Tubi’s frontend team redesigned its web player into an independent, TypeScript‑driven module with a clear Adapter‑Player‑Action‑Reducer architecture, monorepo management, comprehensive testing and documentation, enabling higher code quality and a better cross‑platform playback experience.
This article explains the challenges of collaborating on multiple tightly coupled JavaScript packages, compares multirepo, monorepo and submodule strategies, introduces Lerna as a monorepo tool, and provides detailed guidance on its configuration, modes, and command‑line usage for efficient package management.
This article traces the historical evolution of frontend development—from early monolithic web architectures through the rise of distributed systems and front‑end/back‑end separation, to modern serverless and Backend‑for‑Frontend (BFF) approaches—highlighting the shifting roles, challenges, and emerging solutions in the industry.
This article examines how a complex brand‑page animation was implemented by evaluating GIF, Lottie, APNG, and HTML video options, ultimately choosing a lightweight MP4 video and detailing the numerous mobile‑browser compatibility challenges and React code needed to achieve reliable autoplay.
Learn how to create a Vue plugin that captures a page with html2canvas and generates a PDF using jsPDF, covering required dependencies, plugin implementation, installation steps, and usage example to export dynamic table content as a PDF file.
This article explores kbone's ability to compile Vue‑based web code into WeChat mini‑programs, detailing its build and runtime mechanisms, component adaptation, style compatibility challenges, practical implementation experiences, and tips for integrating kbone into new or existing projects.
This article examines the challenges of component coupling and state sharing in growing frontend projects and proposes a clear container‑presentational component standard, outlining when to lift state, use a store, or rely on events.
This guide walks through identifying intrusive Google search elements—such as related YouTube videos and product promos—and shows how to create Adblock Plus custom filters that hide those elements by targeting their CSS classes or IDs, complete with code examples and screenshots.
This article surveys the major software development trends for 2019, covering progressive web apps, chatbots, evolving front‑end frameworks, back‑end language choices, database advancements, cloud adoption, AI breakthroughs, and essential development tools, offering guidance on what to learn next.
This article chronicles three decades of front‑end evolution, covering the birth of the Web, the early static‑page era, the browser wars, the rise of JavaScript, prototype and jQuery periods, the explosion of modern frameworks, and the recent Chinese mini‑program wave.
This article provides a thorough front‑end guide to data visualization, covering its definition, scientific and information branches, a step‑by‑step workflow, common pitfalls, and a curated list of tools and libraries such as AntV G2, F2, G6, L7 and others for various scenarios including general reports, mobile, large‑screen dashboards, graph editing, and geographic visualizations.
This article explains how to calculate object positions using a parabolic formula, generate multiple translucent shadows to simulate motion blur, and implement the entire effect with JavaScript, covering parameter selection, acceleration calculations, and practical code examples for smooth front‑end animations.
This article explains how a mobile news‑feed application reduces first‑paint latency from 820 ms to 260 ms by pre‑fetching static templates and news data, inlining resources, and using a localized detail‑page strategy that works offline and mitigates WebView cross‑origin issues.
This guide walks you through using Docsify to create a lightweight, dynamic documentation website for the SpringBoot-based mall project, covering installation, project initialization, sidebar and navigation customization, search, code highlighting, copy‑code features, and deployment via GitHub Pages.
This article explores how applying constraint‑driven design, rooted in Don Norman's psychology, can reshape financial numeric input controls by limiting data ranges, minimizing UI interference, supporting integer habits, and enabling rapid adjustments, ultimately improving efficiency and reducing errors.
The article lists DOM properties and methods—such as element measurements, scrolling APIs, focus calls, getComputedStyle, and various window and document attributes—that cause browsers to synchronously recalculate styles and layout, explains why they are performance bottlenecks, and offers practical mitigation techniques.
In 2019 front‑end development, React, Vue and Angular stabilized and converged toward Web Components, while zero‑configuration stacks like Umi simplified tooling, PWAs matured, mini‑programs surged, TypeScript adoption accelerated, WebAssembly gained traction, and browsers evolved into universal runtime platforms across devices.
This article explains the fundamentals of mobile web adaptation, covering key concepts such as screen resolution, pixel density, device pixel ratio, viewport types, and presents several practical solutions—including flexible+rem, CSS3 media queries with vw, and pure vw approaches—along with implementation details and case studies.
This article explains the evolution of React component reuse—from legacy mixins and higher‑order components to modern React Hooks—provides step‑by‑step implementations of custom hooks such as useLogTime, useFetchHook, useInterval and useImgLazy, and demonstrates how to apply them in real‑world production code for better performance and maintainability.
The article summarizes Chen Cheng's 2019 InfoQ talk on Ant Financial's frontend framework evolution—from early Sea.JS and Arale to Umi and Bigfish—detailing the merged architecture, plugin system, asset market, micro‑frontend strategy, routing, performance optimizations, testing, monitoring, and future plans.
This article explores how artificial intelligence is influencing frontend development, detailing recent breakthroughs, practical frameworks like TensorFlow.js, real‑world applications, advantages, limitations, and emerging solutions for deploying machine learning models directly in browsers.
This article explains the principle of two-way data binding in Vue's MVVM architecture, detailing how Object.defineProperty is used to create observers that track property changes, notify watchers via a dependency collector, and how the compile process links view directives to model updates.
This article explains how React.memo, its second‑argument comparator, and the related hooks useCallback and useMemo can be used to avoid unnecessary re‑renders, handle function props correctly, and dramatically improve rendering performance in complex functional components.
This article reviews the evolution of front‑end programming languages, discusses why extreme attitudes toward language choice hinder productive discussion, explains how platform constraints shape language selection, examines the strengths and weaknesses of JavaScript, Java, and Objective‑C, and predicts increasing convergence and cross‑platform trends among modern front‑end languages.
This guide explains how to publish a GitHub repository as a front‑end website using the master branch, share specific code lines via URL fragments, auto‑close issues with commit messages, embed GitHub widgets, force language detection with .gitattributes, and monitor traffic and trending statistics.
The SuNing Technology Front‑End Exchange Forum gathered nearly a thousand developers and industry leaders to discuss mini‑programs, cross‑platform frameworks, Node.js, Unity Tiny Mode, and automation testing, highlighting recent breakthroughs and future directions in front‑end engineering.
This guide walks you through downloading Node.js, obtaining the mall‑admin‑web source code, installing dependencies, and launching the front‑end application on both Windows and Linux, including steps for using a local backend or an online API and configuring Nginx for production.
The article reviews the evolution of front‑end engineering from the early separation of HTML, CSS and JavaScript in 2003 through performance‑driven engineering, the rise of full‑stack and mobile‑first paradigms, to low‑code, serverless, AI‑driven intelligence and IDE strategies that define today's opportunities and future directions.
Front‑end monitoring must capture JavaScript runtime errors, resource loading failures, unhandled promise rejections, and asynchronous request issues using window.onerror, error event listeners, unhandledrejection handlers, and fetch/XHR wrappers, while also handling framework‑specific hooks and cross‑origin script restrictions through CORS or manual try‑catch reporting.
This article explores Vue 3's function‑based reactivity API, demonstrates how to implement a lightweight, framework‑agnostic reactivity library with watchable objects, functional combinators, and immutable updates, and shows practical examples such as a reactive counter, a todo list, immer‑style state handling, RxJS‑style pipelines, and React‑hooks‑style utilities, while discussing the underlying concepts and limitations.
This article details Tencent's online‑education mini‑program ecosystem, covering business matrix, native framework selection, engineering practices, audio/video integration, automated release pipelines, performance optimization through sub‑packages, and a comparison of WeChat and QQ mini‑program platforms.
This article explains what SVG is, outlines its key advantages such as broad browser support, small file size, scalability, CSS styling, animation, transparency, and SEO benefits, and shows why designers and frontend developers should adopt SVG to improve website performance and visual quality.
In this interview, Qunar’s front‑end lead Meng Chao shares his experiences with hybrid and QRN frameworks, discusses the GMTC conference, and explains how the company’s no‑instrumentation monitoring and performance‑optimization practices have driven large‑scale front‑end transformation and future cross‑platform opportunities.
This article traces the career of Yu Bo, from his early doubts at the Chinese Academy of Sciences to leading Ant Financial’s Experience Technology team, highlighting his open‑source contributions, his views on frontend value, and the management principles that drive today’s enterprise‑grade UI ecosystems.
This article details how Tencent Classroom moved 2.5 million videos to Tencent Cloud VOD, covering the overall solution, video upload and playback processes, web integration steps, encountered issues, code implementations, and monitoring strategies, all resulting in improved performance and user experience.
The Xianyu team’s new “black‑tech” system automatically transforms UI mockup images into production‑ready code by detecting components with deep‑learning models, extracting layouts via OpenCV, and employing a modular stream‑oriented architecture of units, tasks, and server layers that enables rapid testing, flexible composition, and future enhancements such as improved container recognition and semantic understanding.
This tutorial walks through setting up a zero‑configuration Webpack 4 project for multi‑page, multi‑platform applications, covering entry and output settings, dynamic entry generation, loader and plugin configurations, development server setup, and advanced optimization techniques such as code splitting, on‑demand loading, and asset handling.
This article details the development of Kirby, a Sketch plugin created by Ctrip's front‑end team to manage design resources, enforce design language standards, and provide a full stack of features—including design token handling, static scans, WebView GUIs, and native integrations—while explaining the underlying Sketch plugin architecture, APIs, and tooling.
This article explains WebRTC fundamentals, including SDP, ICE, and signaling, outlines the peer‑to‑peer communication flow, and compares RTMP, direct WebRTC, and media‑server‑based WebRTC solutions for live streaming, highlighting their advantages and drawbacks.
This article explains how to make web pages feel smooth by defining user‑perceived fluidity, discussing passive and active interactions, FPS targets, the RAIL model, pixel pipeline optimization, avoiding long tasks with Web Workers and time‑slicing, selector efficiency, layout thrashing, layer management, and using requestAnimationFrame.
This article analyzes a bug where rapid route switching in a Vue H5 project caused data from different routes to mix, explains how Axios CancelToken works, shows the implementation of request cancellation via interceptors, and discusses deeper insights and further possibilities for frontend developers.
This article explains the browser rendering pipeline—from network communication and HTML/CSS parsing to DOM and render tree construction—highlighting common misconceptions, performance bottlenecks, and practical optimization strategies such as DNS reduction, TCP reuse, HTTP/2 features, efficient CSS selectors, and JavaScript loading techniques.
This article explains Vue.js computed properties and watchers, detailing their definitions, usage scenarios, code examples, differences, deep and immediate options, and when to prefer one over the other for reactive front‑end development.
This article explains how a frontend team migrated from SVN to GitLab, leveraged GitLab CI/CD to automate building and publishing HTML assets, outlines the previous manual workflow, details the new CI/CD pipeline, runner configuration, .gitlab-ci.yml structure, encountered issues, and future improvements.
This article provides a comprehensive collection of regular expression patterns for validating various numeric formats, character sets, and special input requirements such as email addresses, URLs, phone numbers, IDs, passwords, dates, and IP addresses, with clear examples for each case.
At the Global Front‑End Technology Conference, Amap’s senior expert Wang Qianwei will present “Practical Engineering of 3D Map Rendering Based on GLES,” discussing mobile and automotive rendering challenges, cross‑platform architecture, data compression, OpenGL performance tuning, fast‑iteration toolchains, and future Metal and Vulkan graphics directions.
The May 25 WeDoctor Frontend Tech Salon, themed “Boundless,” gathered over 30 external companies and 100 internal participants to explore server‑side rendering, desktop and cross‑platform front‑end development through six technical talks covering Vue SSR, Node.js micro‑services, exception monitoring, NW.js, WebView integration, and Weex implementation.
The article describes a scalable placement system for Xianyu that links front‑end resource slots with multiple backend data sources via a visual‑schema‑driven API, enabling personalized banner and feed content, batch request optimization, rapid campaign management, and reduced developer effort while serving millions of users daily.
This article explains how to rapidly configure a full‑stack web development environment using the qvk scaffold, covering repository cloning, dependency installation, build steps, server and client startup, and basic usage of ThinkJS, Vue.js, and Webpack for H5 projects.
This article explains how to achieve pixel‑perfect restoration of design drafts on mobile H5 pages by adapting to different pixel densities and screen sizes, using global CSS units like rem and vw, and automating px‑to‑vw conversion with the postcss-px-to-viewport plugin.
Chameleon is a cross‑platform MVVM framework that standardizes APIs, components, DSL, and runtime protocols so a single codebase can be compiled and run on any mini‑program or native environment, with integration efforts from Didi, Mango TV, Alibaba, ByteDance and a six‑package extension guide.
This article explains how to achieve pixel‑perfect reproduction of design drafts on mobile H5 pages by adapting to different screen densities and sizes, using global CSS units like vw (and optionally rem), and automating the px‑to‑vw conversion with the postcss-px-to-viewport plugin.
This article reviews ten high‑performance JavaScript chart libraries—amCharts, AnyChart, Chart.js, Chartist.js, D3.js, FusionCharts, Google Charts, Highcharts, Plotly.js, and ZingChart—detailing their main features, pricing models, and where to find documentation, helping developers choose the best tool for their data‑visualisation needs.
This article uses physical analogies to explain why converting design drafts to web prototypes is challenging, clarifies the box model, positioning, and floating concepts, and shows how to visualize CSS layout as a three‑dimensional structure for more intuitive front‑end development.
This article provides a comprehensive guide to browser caching, detailing the mechanisms of strong cache (Expires and Cache‑Control) and conditional cache (Last‑Modified, If‑Modified‑Since, and ETag), their directives, step‑by‑step workflows, status codes, and a side‑by‑side comparison to help developers optimize web performance.
This article explains the concept of AJAX, why asynchronous communication is needed, how to submit forms and handle server responses using raw XMLHttpRequest and jQuery, compares GET and POST methods, and outlines the benefits, drawbacks, and suitable scenarios for AJAX in web development.
This article explores essential navigation design principles, various navigation patterns such as top menus, sidebars, breadcrumbs, tabs, pagination, steps, and dropdowns, and demonstrates their application through a case study of Suning Logistics' Tianyan platform, offering practical guidance for creating coherent, user‑friendly web interfaces.
This article examines how Alibaba Cloud’s frontend engineers evolved from a resource‑constrained role with shallow business insight to a strategic, horizontally‑aligned team that builds reusable engineering platforms, leverages serverless and BaaS, and delivers measurable business value across marketing, commerce, and sales.
This article explains why front‑end monitoring is essential for user experience, outlines the key data types to collect, and provides practical AOP‑based implementations for route changes, JavaScript errors, performance metrics, resource failures, API calls, and reliable log reporting.
This article explains JavaScript’s single‑threaded event loop, detailing how the call stack, macro‑ and micro‑task queues, and asynchronous APIs cooperate to schedule code execution, illustrated with diagrams and a step‑by‑step example.
An in‑depth guide walks through the essential layers of modern website architecture—including front‑end optimization, application frameworks, service distribution, storage solutions, backend processing, monitoring, security, and data‑center design—offering practical strategies for building high‑performance, scalable web systems.
This guide explains how to integrate Tencent's iHearing speech‑evaluation plugin into a WeChat mini‑program, covering plugin installation, configuration in app.json, JavaScript API usage, UI markup for word and sentence assessments, and handling of evaluation results.
This article details the practical implementation of the 360 AI speaker's landing page, covering screen‑resolution analysis, large‑image rendering choices, responsive rem‑based typography, HTML structure, CSS positioning, custom web‑font integration, and a pure‑CSS sticky‑footer solution, all built under tight time constraints.
In this interview, Qunar's senior frontend engineers discuss the Nanachi framework that enables one‑code‑base development for WeChat, Alipay, Baidu, and Quick Apps, highlighting its unique features, cross‑team collaboration tools, backend integration, resource allocation, and future roadmap.
This article explores the fundamentals of navigation bar design for mobile apps, covering component structure, why traditional bars need redefinition for financial products, layout rules for left/right actions and titles, and guidelines for fixed top bars to improve usability while maintaining visual consistency.
This guide compiles a curated collection of essential front‑end development tools, asset libraries, and community sites—including bookmark managers, placeholder image generators, code‑beautifiers, free image sources, UI design resources, and popular forums—to help developers streamline workflows and discover valuable online resources.
The guide shows how to create a WeChat community mini‑program with cloud development that lets users post text and up to six images, implements home, publishing, and personal‑center pages, handles data pagination, image preview and deletion, stores posts in cloud collections, manages user authorization and avatar display, and addresses typical permission and refresh problems.
This guide introduces five Android apps that let you write, compile, and run C/C++, Java, Python, front‑end web, and Linux code on a smartphone, with installation steps, key features, and screenshots to help beginners start mobile programming quickly.
This article details the front‑end performance improvements applied to JD's PLUS membership platform, covering architecture migration to Gaea 4.0, on‑demand Babel polyfill loading, PWA caching, request sequencing, skeleton screens, and modern image formats such as WebP and DPG.
This article introduces CSS Next, a PostCSS plugin that brings future CSS syntax to current browsers, explains how to integrate it into a Webpack workflow, and demonstrates key features such as custom properties, @apply, calc(), custom media queries, custom selectors, and nesting with code examples compared to Sass and Less.
This article explains the CSS 3D properties perspective and transform-style, shows how different perspective values affect a cube, demonstrates the impact of transform-style on child elements, and provides example code and reference links for practical implementation.
This article explains the three phases of a React component's lifecycle—mounting, updating, and unmounting—detailing each lifecycle method, its purpose, and best‑practice usage for resource management and performance optimization in frontend development.
This article analyzes the challenges of reproducing external‑network bugs, outlines common failure causes, and presents a complete design for a JavaScript SDK that records environment data, AJAX calls, errors, and user actions, stores them in IndexedDB, and visualizes the timeline for efficient troubleshooting.
This article explains how Ctrip's marketing team leverages WeChat mini‑program features—poster drawing with canvas, search‑direct navigation, and universal QR‑code routing—to create low‑cost, high‑conversion viral marketing campaigns, complete with code examples and implementation details.
This article compiles a curated list of the ten most popular free open‑source admin dashboard UI frameworks, detailing their GitHub star counts, repository links, core technologies, and visual screenshots to help developers quickly choose a suitable backend control panel solution.
Chameleon is Didi's cross‑platform framework that lets developers write a single codebase in CML, CMSS, and JavaScript to run on H5, various mini‑programs, and native‑like environments, dramatically reducing duplication, maintenance effort, and improving consistency across platforms.
This comprehensive guide walks you through essential webpack configuration topics—including entry, output, plugins, module resolution, caching, development experience enhancements, and advanced performance tricks like splitChunks and Terser—showing how to dramatically speed up builds and improve bundle efficiency for modern frontend applications.
This article reviews the evolution of web real‑time push techniques—polling, long‑polling, iframe streaming—and explains why WebSocket offers superior bidirectional communication, lower latency, and reduced bandwidth, while providing practical code examples for each method.
This article reviews the evolution of front‑end technologies—from Ajax and Node.js to React—explains the serverless concept, and argues that serverless will trigger the next major shift in front‑end engineering by reshaping deployment, scaling, and the role of web developers.
This article explains why data flow management is crucial in React, reviews React's built‑in state handling, and compares three popular third‑party solutions—Redux, MobX, and RxJS—highlighting their concepts, strengths, weaknesses, and suitable scenarios for use.
This article describes the design and implementation of a component template platform that separates front‑end components from Qunar's special activity system, introduces a layered architecture, presents code‑level file structures, and explains how dynamic configuration and on‑demand loading solve reuse, theming, and maintenance challenges.
An in‑depth look at how the NetEase Music 2018 Listening Report’s rich, emotion‑driven animations were crafted, from designer‑written CSS code and thousands of lines of motion design to practical decisions on formats like GIF, SVG, Lottie, and the custom BX‑AE2CSS tool that exports After Effects animations directly to CSS.
This article explains common mock server approaches, their limitations, and introduces a browser‑based HTTP request interception technique that enables seamless front‑end proxying, preserves authentication cookies, and works across browsers without modifying backend code.
The Taro UI 2.0 update introduces eleven new components, expands support to multiple mini‑program platforms, adds a customizable theme system with a visual theme generator, and provides an Issue Helper tool to streamline bug reporting, while outlining future plans for ByteDance mini‑program adaptation and i18n.
This article introduces the 58 Mini‑Program Cloud project, presenting the wto‑cli migration tool, the wbmp cross‑platform compilation framework, the wbui UI component library, and the mp‑scf‑sdk cloud development SDK, detailing their architecture, core features, migration process, and practical code examples for multi‑platform mini‑program development.
This article explores how to design and extend button components effectively by emphasizing early communication with designers, strategic naming conventions based on location, color, or function, and practical CSS architecture—including themes, sizes, shapes, states, and code examples—to achieve scalable and maintainable UI solutions.
This article explains the default stacking order of HTML elements, how z-index interacts with positioned, floating, and flex items, how to create custom stacking orders, and the rules for generating stacking contexts, providing practical examples and best‑practice recommendations for front‑end developers.
This article explains the concept of lazy loading in front‑end development, covering placement of placeholder elements, scroll event listening, viewport detection methods, detailed JavaScript implementations, and advanced optimizations such as throttling, vertical‑only checks, and extending lazy loading to other resource types.
This article details the comprehensive front‑end performance improvements applied to the JD PLUS membership project, covering the migration to the Gaea4.0 webpack‑based scaffold, PWA offline caching, Babel 7 polyfill on‑demand loading, request and image optimizations, skeleton screens, and build‑time caching techniques to accelerate first‑screen rendering on mobile H5.
This article explores the advantages and challenges of dark mode UI, offering practical guidelines on text color, spacing, typography, icon design, button states, dividers, color usage, visual hierarchy, and whitespace to create refined and readable dark‑theme applications.
