The article explains how UI component tests should interact with real page elements instead of directly invoking handlers, using the “Front Door First” principle to achieve more comprehensive and reliable automated UI testing, illustrated with examples of a disabled Buy button and proper test code.
This article explains why front‑end performance is critical, outlines the most cost‑effective metrics such as FCP, TTS, and TSP, describes the SDK‑SLS‑Backend architecture, shares key technical decisions, and proposes future enhancements for a robust monitoring solution.
Recoil, Facebook’s experimental state‑management library for React, offers a hook‑based, orthogonal approach that reduces overhead compared to Redux and MobX, supports both synchronous and asynchronous selectors, provides utilities like atomFamily and selectorFamily, and integrates seamlessly with React’s concurrent features, making it a promising frontend solution.
This article explains the principles of streaming server‑side rendering (SSR) in React, compares it with traditional client‑side rendering, and demonstrates how lazy loading and Suspense can be used together with streaming SSR to parallelize data and JavaScript delivery for faster first‑paint and improved user experience.
This article explores the motivations behind React's Hooks API, contrasts it with the traditional Class API, delves into functional programming concepts, demonstrates practical implementations with Redux, Mixins, HOCs, custom Hooks, TypeScript type inference, codata theory, and compares React Hooks to Vue's Composition API, providing code examples and visual diagrams throughout.
This article chronicles Alibaba’s three‑year evolution of frontend intelligence, detailing the origins of AI‑driven code generation, key technologies like imgCook, BizCook and UICook, the methodology, toolchain, organizational integration, and future directions for boosting development efficiency and business value.
The article compares client‑side and server‑side rendering, defines key user‑perceived metrics such as FCP, LCP and a custom weighted‑area FMP, explains how to measure them with MutationObserver and performance APIs, and outlines business‑ and page‑level analysis plus optimizations—including pre‑loading, WebP images, bundle trimming and SSR tweaks—that collectively boost Lighthouse scores by over 20% and reduce data transfer by roughly 20%.
In this extensive interview, dexteryy, a senior Web front‑end engineer at ByteDance, shares his personal journey, reflects on the historical stages of Web development, discusses current challenges of mobile and immersive experiences, and outlines the vision for next‑generation application development tools and ecosystems.
This curated guide presents concise technical deep‑dives into JavaScript protection, pagination techniques, Babel async/await transformation, Web Worker sandboxing, V8 engine tuning, React Native launch optimization, collaborative editing algorithms, Windows defragmentation, CLS metric evolution, accessible UI components, and future‑proof CSS strategies.
This article explains why Babel 6 and Babel 7 produce typical errors such as "regeneratorRuntime is not defined" and "Cannot find module 'core-js/library/fn/**'", then walks through the roles of @babel/preset‑env, @babel/plugin‑transform‑runtime, core‑js versions, useBuiltIns options, and provides concrete configuration examples for both application and library projects.
This comprehensive guide explains what SVG is, how it differs from bitmap images, its XML foundation, basic syntax, viewBox and viewport handling, common shape elements, animation, gradients, usage patterns, comparison with Canvas, optimization tips, fallback strategies, and media‑query integration, all illustrated with code examples and diagrams.
This article walks through practical Vue performance enhancements—including basic web rendering tweaks, webpack configuration tricks, Vue‑specific code optimizations, and auxiliary measures like GZIP compression, HTTP caching, CDN usage, image handling, and lazy loading—to dramatically improve first‑screen load times and overall user experience.
Linke is a decoupled component framework for Xianyu’s frontend that separates UI (View) from business logic (Store) through a clear Interface, adopts MobX for lightweight state management, and thereby boosts code reuse, standardizes development, and cuts maintenance overhead across multiple projects.
This article explores the concept of 2.5D graphics, explains why it remains valuable for industrial internet applications, compares CSS+JS, SVG and Canvas implementations, presents code samples and component designs, and details how Alibaba Cloud’s Digital Space project adopted Canvas and Konva to build low‑cost, high‑performance visualizations for industry IoT.
This article explains how to implement a rectangular treemap for outpatient disease data using JavaScript, covering layout algorithms such as Slice‑and‑Dice and Squarified, color filling, and canvas event handling with detailed code examples and performance evaluation metrics.
This article introduces twelve essential Chrome extensions—ranging from site technology detection to responsive design testing, CSS inspection, JSON viewing, performance auditing, cache clearing, cookie management, live reloading, and API testing—that can dramatically boost a front‑end developer's productivity and code quality.
This article introduces a Promise‑based JavaScript animation library, explains how to create sequential animations using async/await, provides polyfills for requestAnimationFrame and es6‑promise, details the Animator class implementation, and demonstrates usage with code examples and easing extensions.
This article explains why list pages lose state in H5 applications, discusses the reasons behind it, compares Vue's keep-alive and React's lack of built‑in support, and presents a practical CacheHoc solution with code examples for storing list data and scroll positions using window storage.
This article teaches front‑end developers how to improve UI quality by applying three core layout principles—block segmentation, proper alignment, and effective color usage—backed by practical examples, commit‑message standards, and color‑model insights.
This article walks through installing pyecharts, explains its version differences, and demonstrates a series of bar‑chart techniques—including basic charts, axis labeling, multiple series, styling, horizontal orientation, mark lines/points, label rotation, and interactive zoom—complete with code snippets and visual examples.
This article shares a UI designer’s comprehensive guide to B‑side form design, covering basic, step‑by‑step, and advanced forms, essential components such as titles, labels, placeholders, inputs, validation, button placement, layout strategies, field width scaling, and research‑backed label positioning to improve usability and efficiency.
This article traces the evolution of web development from the first static HTML page through the rise of JavaScript, CSS, dynamic server‑side technologies, SPA and SSR, up to recent trends like React Server Components and micro‑frontends, highlighting why each breakthrough occurred.
This article explains why front‑end performance optimization is crucial for user retention and conversion, outlines loading‑time and runtime optimization categories, and provides practical techniques such as DNS prefetching, HTTP/2 adoption, resource compression, lazy loading, virtual lists, event delegation, and code‑level best practices with concrete code examples.
This article explains JavaScript's single‑threaded nature, the task queue, macro‑ and micro‑tasks, the event loop, and compares callbacks, Promises, Generators, and async/await with code examples and practical pros and cons for front‑end developers.
This article explains a collection of modern CSS strategies—including content‑visibility, will‑change, contain, font‑display, scroll‑behavior, GPU‑accelerated animations, stylesheet splitting, @import avoidance, and CSS custom properties—to dramatically improve page rendering speed and user experience.
This article presents a curated roadmap for web developers, examines Vite 2.0’s build innovations, explores AI-driven visual effects, discusses product‑centric design principles, and outlines the emerging role of digital currency in modern software ecosystems.
This article explores the evolution from ProCode to LowCode and NoCode in front‑end development, detailing iceluna's challenges, the design of visual logic orchestration, node abstraction, automatic layout, schema‑code conversion, debugging features, and future prospects for low‑code adoption.
This article traces the three‑decade evolution of web technology—from Tim Berners‑Lee’s first static page and the birth of HTML, through the rise of JavaScript, CSS, dynamic server‑side solutions, AJAX, SPA, and modern SSR/Node.js approaches—highlighting why each breakthrough emerged and how it shaped today’s web development landscape.
This article explains four practical approaches to creating 360° panoramic experiences for web pages—using pure CSS3 3D transforms, the Three.js WebGL engine, the lightweight Pannellum viewer, and the professional krpano tool—detailing their concepts, code implementations, advantages, and trade‑offs for hotel and real‑estate applications.
The article examines the evolution of front‑end architecture using Baidu's mobile search result page as a case study, outlining challenges such as massive codebases, coupling, and outdated tech stacks, and presenting a three‑layer solution involving foundation, modularization, and componentization with SSR optimization.
This article traces the evolution of web architecture from tightly coupled JSP‑Servlet models through semi‑separated Ajax/SPAs to fully decoupled front‑back end designs, highlighting how Node.js as a middle layer improves adaptability, performance, and maintainability for multi‑client applications.
This article explains why React introduced the Fiber architecture, how it breaks rendering work into interruptible units, compares it with Vue's approach, and provides detailed code examples of Fiber's data structures, scheduling, traversal, and commit phases.
A live discussion with Ant Experience Tech leaders and senior front‑end engineers explores the rapid evolution of front‑end development, career opportunities, the myth of industry "involution", and practical advice for aspiring developers on learning, interview preparation, and long‑term growth.
This article examines the evolution and challenges of large‑scale front‑end architecture, using Baidu's search result page as a case study to illustrate problems such as massive codebases, unclear responsibilities, and outdated tech stacks, and describes a three‑layer modular, component‑based solution with SSR and DI to improve maintainability and performance.
The article presents a three‑stage pipeline that automatically transforms Sketch design drafts into a DSL view tree, infers layout and style properties, and generates Meituan‑compatible static front‑end code, while offering visual tools for layer cleanup, component recognition, and property adjustment to ensure high‑fidelity mobile UI reproduction.
This article walks through the complete lifecycle of a browser request—URL parsing, DNS lookup, TCP handshake, OSI‑layer transmission, caching strategies, HTML rendering, and performance optimizations—mirroring real interview questions faced by front‑end engineers.
The Haro Mobility front‑end team tackled the challenge of maintaining three separate mini‑programs by adopting Taro 3.0 and a custom Babel‑based converter, cutting development effort from 127.5 person‑days to a month of work with four engineers and achieving a 1.4× productivity gain.
This article explores Alibaba Cloud's Feitian big data platform and its front‑end intelligent solutions—covering smart editors, code recommendation, code diagnostics, automated visualization, and algorithm engineering—to illustrate how AI enhances developer productivity and product intelligence.
This article explains the history of global time standards, how computers represent time with Unix timestamps and the 2038 problem, details ISO 8601 and RFC 2822 formats, and provides practical JavaScript Date usage examples along with comparisons of popular date‑handling libraries such as Moment.js, Dayjs, and Miment.
This article details the front‑end team's approach to rapidly delivering a government‑backed digital RMB activity, covering project characteristics, pre‑delivery preparations, data flow aggregation, UI decoupling, risk‑control tactics, module loading, deployment layering, and lessons learned for maintaining high availability.
The article shares how Ant Group's frontend engineering team improves build speed with cloud functions and multi‑process webpack, adopts Apple M1 hardware, tackles Android cloud‑device debugging, and launches a lightweight IDE, illustrating the challenges, innovations, and future directions of modern frontend development.
This article explains how Vue’s mergeOptions function merges constructor and instance options, detailing the normalization of props, inject, and directives, and how extends and mixins are recursively combined to produce the final component configuration.
Analyzing 2020 developer survey data, this article reveals emerging trends in package managers, testing tools, frameworks, backend runtimes, and build systems that are set to define the JavaScript ecosystem and web development practices in 2021.
The article describes a progressive front‑end rendering strategy that replaces synchronous template rendering with route separation, build‑time pre‑static HTML generation, and WebView pre‑creation, using skeleton components to cut first‑paint time, lower TTFB and JavaScript delays, and improve H5 performance, scalability and maintenance.
This article compiles a curated list of more than seventy open‑source clone projects—ranging from 2048 and Airbnb to Netflix and TikTok—providing live demos, source‑code links, and technology‑stack details to help developers learn modern frontend techniques.
This guide shares nine practical techniques—including issue templates, code linting, unit testing, commit‑message enforcement, continuous integration, GitHub badges, npm‑package monitoring, changelog automation, and contribution guidelines—to help front‑end teams efficiently maintain and scale open‑source projects like San CLI.
The Cloud Music DSP team unified its Vue contract platform and React bidding platform by embedding the React app as a qiankun micro‑frontend, replacing iframe and MPA approaches, configuring HTML entry, lifecycle hooks, routing and CSS isolation, and addressing routing, style, and CORS challenges for seamless integration.
This article analyzes the pain points of tangled data flow in large‑scale React projects and presents a layered store architecture, API anti‑corruption layer, and domain‑driven design using MobX to reduce complexity, improve reuse, and streamline development.
This article explains how to use codemod tools, especially jscodeshift, to automatically refactor a growing frontend codebase by replacing a monolithic constants package with per‑constant imports, covering the underlying AST concepts, step‑by‑step script creation, and practical CLI usage.
This article shares practical techniques for handling IE9‑plus compatibility, covering environment simulation, image distortion, 8‑bit color values, mirroring, Flex fallback, CSS hacks, history routing limitations, and ES6 polyfills, along with code examples and migration advice.
This guide walks through registering an AMap application, installing vue‑amap, configuring the API loader, building a reusable Vue component with search, geolocation, custom markers and styled info windows, and embedding the component into a page to achieve full map display and positioning functionality.
Facing tangled data flow, excessive template code, and scaling challenges in a large single‑page app, we analyzed business traits, identified pain points, and redesigned the architecture using layered stores, an API anti‑corruption layer, and domain‑driven design with MobX, achieving simpler, reusable, and maintainable front‑end code.
This article examines the evolution of front‑end component reuse, identifies the fragmented toolchains and duplicated packages that hinder efficient business component development across PC, mobile and mini‑programs, and presents a unified fusion package built with vdev that streamlines building, debugging, and publishing while reducing developer overhead.
This article explains the Manhattan routing algorithm used for automatic orthogonal connection routing in diagram tools, discusses its origins, references useful libraries like draw2d, and provides a full TypeScript implementation with code examples and practical application scenarios.
This article walks through the complete journey of a URL entered in a browser, covering URL parsing, DNS lookup, TCP handshake, OSI‑layer packet transmission, caching strategies, HTML parsing, rendering pipeline, and practical performance‑optimisation tips.
Learn how to use GitHub1s to open any GitHub repository directly in a browser‑based VS Code environment within seconds, explore its features, understand the underlying VS Code extension architecture, and bypass API rate limits with OAuth authentication.
This article reviews React Hooks, compares them with class components, demonstrates change‑driven coding with practical examples, introduces marble diagrams for visualizing state flows, and explores advanced patterns like custom hooks, immutable data handling, and global state management for more maintainable frontend development.
This article outlines the background, composition issues, and a three‑principle design system—consistency, interaction reasonableness, and flexibility—used to create a unified UI for 58’s multi‑business‑line messaging center micro‑chat, detailing component specifications, navigation rules, typography, colors, and layout guidelines.
This article explores the challenges of building business UI components across PC, mobile, and mini‑app platforms, details a unified fusion development approach using React, Rax, and Alibaba’s Fusion toolchain, and shares practical solutions for tooling, build pipelines, and automated component publishing.
LogicFlow, born from DiDi's intelligent middle‑platform, provides a flexible, SVG‑based flowchart editor with rich APIs, MVVM architecture, and extensibility that lets front‑end developers quickly build and customize workflow visualizations while outperforming competing libraries in rendering speed.
This article presents the background, research, design choices, core features, extensions, challenges, and outcomes of Mars, a proxy‑based lightweight frontend mock platform developed by Ctrip's IBU ticket team to improve development efficiency and testing flexibility across devices and environments.
This article introduces Dumi, a tool that combines component library project scaffolding with static documentation site generation, explains its three project modes, code structure, MDX-based documentation editing, on‑demand loading, build configurations, workflow commands, and publishing steps for frontend developers.
This article explains common frontend exceptions such as UI glitches, script errors, and network failures, classifies JavaScript error types, demonstrates handling techniques using try‑catch, finally, window.onerror, event listeners, Promise rejection handling, and framework‑specific solutions like React error boundaries, Vue errorHandler, and Axios interceptors.
This article explains how abstracting front‑end data into reusable models—illustrated with product, SKU, and exception handling examples—improves code safety, testability, and maintainability for complex applications such as a multi‑variant e‑commerce product publishing page.
This article introduces Pipcook, a machine‑learning framework designed for front‑end developers, explains its architecture and integration with TensorFlow.js, Boa, and Node.js, and discusses how it lowers the barrier to building intelligent front‑end applications through pipelines, plugins, and cloud‑native deployment.
This article presents practical refactoring techniques for JavaScript code, illustrating how to replace callback‑hell request chains with Promise.all and async/await, transform tangled if‑else blocks into pure, modular functions, and adopt clean‑code principles to improve readability, testability, and maintainability.
This article introduces a behavior‑based captcha solution that replaces traditional text captchas with slide‑puzzle and click‑word challenges, explains its terminology, interaction flow, project directory layout, and provides online demo links for both web and mobile implementations.
This article explains why excessive or large images hurt page load speed in e‑commerce sites and provides a comprehensive guide to selecting proper image formats, applying lossless and lossy compression, using tools, configuring webpack, employing CSS sprites, icon fonts, base64, CDN, lazy loading, preloading, responsive and progressive image strategies to improve web performance.
To improve SaaS B2B product efficiency and revenue retention, the article examines the unique challenges of frontend development in enterprise services, proposes a client‑side logging library—woodpecker‑log—detailing its design, storage with IndexedDB, performance considerations, API, and integration for rapid customer issue diagnosis.
This tutorial walks you through preparing two servers, installing Git, Nginx, and Jenkins, building two Angular projects, configuring Nginx for canary traffic routing, defining a cookie‑based gray‑release strategy, and creating Jenkins jobs to automate the entire deployment pipeline.
This article details how iQIYI Knowledge's web frontend team designed and implemented a comprehensive componentization strategy that improves code reuse, development efficiency, and maintainability across numerous independent projects while ensuring product consistency.
This article details how the Taro team optimized the 京喜拼拼 mini‑program by identifying performance bottlenecks, applying best‑practice coding patterns, refining virtual list handling, reducing setData overhead, and integrating native components, ultimately achieving smoother scrolling and higher experience scores across devices.
This article analyzes the differences between venue‑type and interactive e‑commerce promotion pages, proposes a layered layout, modular popup system, withdrawal component, and a custom CLI‑driven engineering workflow to improve reusability, stability, and development efficiency.
The article describes how Ctrip and Trip unified their disparate front‑end stacks by building a shared component library, splitting styles, adapting dark mode, implementing i18n/l10n, integrating automated testing in GitLab pipelines, and streamlining release and monitoring to improve development efficiency and reduce duplication.
This guide explains how to add Bootstrap 4 to a Laravel 5.5 project by installing the required packages, updating SCSS imports, compiling JavaScript with Laravel Mix, and configuring Blade pagination templates for the new Bootstrap styling.
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 guide explains why clipboard.js is a lightweight, dependency‑free solution for copying and cutting text, shows how to install it via npm or CDN, demonstrates configuration and various usage patterns—including data attributes, event handling, advanced options, and a Vue 3 integration—while also covering browser support.
This article explains on‑device machine learning concepts, compares front‑end inference engines such as TensorFlow.js, ONNX.js and WebDNN across CPU, WASM and WebGL, and presents practical optimization techniques like vectorization, memory layout, graph fusion and mixed‑precision to boost performance for real‑time applications.
This article provides a detailed, front‑end‑focused walkthrough of the complete browser request‑response lifecycle—from URL parsing and DNS lookup through TCP connection, HTTP handling, HTML/CSS parsing, JavaScript execution, to final page rendering—highlighting key concepts, common pitfalls, and optimization tips.
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.
Xianyu’s server‑side rendering solution uses a serverless Node.js app on Alibaba Cloud to aggregate backend data and render HTML, routing through Nginx and caching via CDN, which cuts first‑meaningful‑paint time, maintains high stability with low O&M, and seamlessly falls back to client‑side rendering when needed.
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 how to capture user interactions on insurance web pages by taking DOM snapshots, creating incremental snapshots with MutationObserver, leveraging the rrweb library for recording and replay, and converting the recorded data into high‑frame‑rate video using Puppeteer and FFmpeg to ensure reliable evidence.
The article explains how AMap JSAPI 2.0 achieves realistic 3‑D building lighting by applying the Blinn‑Phong model with ambient, diffuse and specular components, employing directional, point and spot lights together with a classic three‑point lighting setup—including a high‑altitude point light over the Oriental Pearl Tower—to produce depth‑rich, non‑flat visualizations.
This article compiles the most influential 2021 software development trends—from cloud, edge, containers, AI, blockchain, and more—alongside curated deep-dive resources covering frontend innovations such as smart code generation, TypeScript declarations, authentication mechanisms, node_modules challenges, React best practices, security protocols, and operational resilience.
The iQIYI Knowledge Web front‑end team built a developer‑oriented component library that splits UI and business logic into reusable basic and business Vue components, enforces clear input/output contracts, uses on‑demand loading and Storybook documentation, achieving high code reuse, maintainability, and consistent UI across independent projects while tackling bundle size and CI/CD challenges.
This article provides a deep technical walkthrough of san-loader, explaining how the Baidu‑developed San framework’s .san files are parsed, split into template, script and style sections, processed by san-loader‑plugin, and finally compiled into browser‑ready code with support for options like compileTemplate, esModule, and CSS Modules.
From 2020 to 2021, Zhenkunxing built a visual‑editing service, a unified UI component library, standardized development, compilation and deployment pipelines, a front‑end portal, an online‑form system, an OKR tool, and a micro‑frontend BOSS platform, while planning a low‑code platform to boost efficiency and scalability.
This article explains how design tokens serve as the building blocks of a design system, enabling theme customization, cross‑platform consistency, and workflow efficiency for digital products by standardizing colors, spacing, typography, and other style values.
This article explains how to implement a dynamic video‑clip effect using Bezier‑curve‑based position, rotation, easing functions, and motion blur in a WebGL shader for Tencent’s Weijian mini‑program, detailing the mathematics, shader code, and practical steps to achieve smooth, natural animations.
The article introduces EOS‑JS, a plugin‑driven JavaScript static analysis platform that leverages AST pattern matching to detect, suggest fixes, and automatically repair code‑style violations across large‑scale frontend projects, detailing its architecture, core modules, dynamic configuration, automation, and data‑visualization capabilities.
The discussion compares two API response designs—always returning an empty array for field B versus omitting B when it has no data—and evaluates which approach provides clearer contracts and easier handling for front‑end developers.
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 article explores the concept, use‑cases, and step‑by‑step implementation of a high‑performance dual‑column waterfall (masonry) layout for mobile H5, covering Flexbox structure, dynamic data distribution, error‑correction techniques, and a DP‑based optimal arrangement algorithm.
The 2020 China Open‑Source Annual Report highlights Taro’s rapid rise to the fourth‑ranked open‑source project, showcasing its cross‑platform capabilities, active community, industry collaborations, and extensive real‑world deployments that illustrate why it stands out among China’s top five projects.
This article examines Baidu's home‑grown MVVM framework San, tracing its origins, core features, size and performance benchmarks, ecosystem tools such as CLI and DevTools, and real‑world deployments across Baidu App, feed pages, and mini‑programs, highlighting why it became the unified front‑end solution.
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 article shares a frontend engineer’s perspective on thriving in business‑line projects, emphasizing mindset, all‑round skill development, cross‑disciplinary collaboration, problem‑solving, and continuous growth to turn perceived pressures into career advantages.
Bootstrap 4.6.0 has been released, introducing customClass support for tooltips and popovers, a new .navbar-nav-scroll class for mobile navigation, accessibility improvements, updated documentation built on Hugo, darker dropdown items, better form‑validation tooltip alignment, and fixed file‑input overflow issues.
This article walks through creating a fully CSS‑based star rating component using the HTML input type="range", exploring its shadow‑DOM structure, applying CSS masks, handling cross‑browser quirks, and providing complete code snippets for a flexible, lightweight solution.
