This article explains how to use Webpack's code splitting techniques—including multiple entry points, the SplitChunksPlugin, dynamic imports, and magic comments—to break large bundles into smaller chunks, reduce duplicate dependencies, and improve loading performance in modern frontend applications.
The article traces the evolution of frontend scaffolding from manual copy‑paste templates to CLI tools, examines maintenance and version‑upgrade challenges, and introduces ByteDance’s cloud‑native “Engineering Scheme” with three initialization methods—template, cloud CLI, and webshell—offering automated, container‑based project creation and a marketplace for best‑practice solutions.
This document compiles student questions from the June 28, 2021 class and the instructor's answers, covering topics such as automatically generating basic HTML code, VS Code for macOS, Chrome DevTools shortcuts, Markdown preview layout, and other front‑end development tips.
The article proposes a unified cross‑platform front‑end API specification and SDK that abstracts differences among WebView, mini‑programs, React Native, Flutter, and other containers, consolidating 55+ APIs for 30+ apps, reducing duplicated code, maintenance, and testing while enabling extensible, reusable functionality across Alibaba’s ecosystem.
After creating a Hello World app with JavaScript on HarmonyOS, this guide details the project’s directory layout, configuration files, lifecycle hooks, path conventions, and demonstrates how to load i18n resources and render a data list with concrete code examples.
A recent incident where a profane comment accidentally made it into live front‑end code highlights the challenges of maintaining legacy systems, the limitations of current testing practices—especially for night‑mode features—and sparks a discussion on automating checks to catch such issues before release.
This article compiles a comprehensive collection of front‑end design resources, including color palette sites, icon libraries, plugin repositories, asset collections, font sources, online tools, and UI frameworks, each accompanied by URLs and brief descriptions to aid developers and designers.
The Eagle.gl Web 3D engine, built atop Three.js, provides a unified 2D/3D GIS platform that efficiently loads, renders, and edits massive point‑cloud, vector, and model map data with real‑time LOD, GPU picking, DEM terrain integration, and configurable styling, supporting AMap’s HD‑map production and future autonomous‑driving simulation.
This article explores why React moved from class components to the Hooks API, explains its functional‑programming roots, compares Hooks with Redux, Mixins, HOCs, Vue's Composition API, and demonstrates how TypeScript type inference and codata concepts can deepen understanding while providing practical code examples.
This article reviews the 2021 top five frontend JavaScript frameworks—React, Vue, Angular, Ember, and Preact—based on Stack Overflow surveys, State of JS, and NPM trends, explaining their origins, features, and adoption by major companies.
This article walks through the challenges and solutions of creating an integrated, searchable, multilingual documentation website for the Oasis Engine graphics engine, covering the selection of static site generators, the use of Gatsby with TypeDoc and GraphQL, custom plugins for embedding demos, and implementing Algolia DocSearch for global search.
This article describes how to refactor a large JavaScript hybrid‑app SDK into TypeScript, set up Rollup and Babel for building, create proper .d.ts type definitions, use generics, overloads, and type guards, and solve path‑alias issues for reliable IDE support.
This article walks through Vite's five static asset handling strategies—including public directory paths, import queries like ?url, ?raw, and ?worker—showing code examples, middleware behavior, and build‑time transformations so developers can quickly understand and apply each method.
This article explains how Webpack loaders work, outlines development guidelines, demonstrates synchronous, asynchronous, raw, and pitching loaders with code examples, and then guides you through creating and configuring custom plugins, covering hooks, async handling, and a practical build‑info plugin.
This article explains the core web performance metrics—First Paint, First Contentful Paint, Time to Interactive, Largest Contentful Paint, and First Meaningful Paint—along with how to retrieve them via the Performance API, calculate them, and interpret their impact on user experience.
This article introduces the free, open‑source Carbon tool, explains its key features such as language support, style customization, and background selection, and provides step‑by‑step instructions for creating and exporting attractive code screenshots in PNG or SVG formats.
This article explains how React synthetic events emulate native DOM events, details the event system architecture, provides core registration and execution code, demonstrates mixing with native events, and discusses the benefits and known issues of the synthetic event model.
This step‑by‑step tutorial shows how to create a dark‑mode toggle for a web page using HTML structure, CSS styling (including dark‑mode rules), and a small JavaScript script that adds or removes the dark class on user interaction.
This article presents a series of experiments comparing HTTP/1.1 and HTTP/2 request merging versus splitting, analyzing how concurrency, multiplexing, and header compression affect page load times for small images, large assets, and JavaScript under various network conditions.
This guide explains how to install and use Tkinter Designer, a tool that combines Python's Tkinter library with the Figma API, allowing developers to design graphical interfaces in Figma and automatically generate runnable Python GUI code.
This article explains how to adapt GrowingIO's no‑embed SDK for Taro 3 by intercepting runtime events and using a Babel plugin to preserve user method names, achieving a stable zero‑tracking solution for mini‑programs.
This article explains the evolution of JavaScript asynchronous programming, details the Promise/A+ specification, provides step‑by‑step custom Promise implementations with full code examples, covers additional Promise methods, and offers interview questions and best‑practice tips for frontend developers.
This article presents a comprehensive overview of JSX support in Vue 3, covering its origins, differences from template syntax, migration details, practical usage scenarios, handling of props and slots, performance considerations, and the underlying compilation mechanisms such as PatchFlags and SlotFlags.
This guide compiles a comprehensive collection of regular expressions for validating numeric formats, character sets, special inputs like emails and URLs, as well as IP addresses, dates, and other common data patterns, providing clear examples and explanations for developers.
The article details the design, architecture, and operational challenges of the Beidou frontend monitoring platform at 58 Group, covering SDK management, behavior trace logging, front‑back link integration, performance optimizations, minute‑level alerting, and permission management.
This article recounts a Tencent front‑end engineer’s QCon 2021 talk on upgrading to a serverless‑based full‑stack development model, covering business motivations, the SCF implementation process, migration to TKE, tooling, DevOps practices, cost optimization, and future technical directions.
This article explains the concept of a virtual tree, why it is needed for rendering massive data sets, and provides a step‑by‑step implementation—including flattening the tree, calculating visible nodes, simulating scroll, and decorating the list—demonstrating a speedup from 26 seconds to 0.19 seconds.
This article explains the design, configuration, and usage of the JD Logistics gateway frontend plugin built on Axios, detailing how it enables zero‑cost integration across multiple environments and account types while providing extensible request/response handling and customizable login redirects.
This article reviews the most recent TC39 proposals—including Realms, RegExp match indices, top‑level await, accessible hasOwnProperty, resizable ArrayBuffers, Intl.DisplayNames V2, extended time‑zone names, and RegExp set notation—explaining their key changes, current stage status, and practical code examples for developers.
This article explains the concept of unit testing, introduces the Jest framework and its configuration, demonstrates common APIs, matchers, asynchronous testing, mocking, coverage reporting, and shows how to test React components using React Testing Library with practical code examples.
The article reviews the eight dominant web design trends of 2021—including 3D graphics, parallax animation, custom illustrations, minimalist layouts, abstract shapes, bold gradients, digital product showcases, and embedded video—explaining how each enhances user engagement in a post‑pandemic digital landscape.
This article explains how top‑level await, introduced in V8 from version 9.1 and enabled by default in modern browsers, allows developers to use await directly at a module’s top level, simplifying asynchronous code patterns with examples, execution order details, and practical use cases.
Front‑end performance monitoring lets developers detect issues early, compare synthetic and real‑user approaches, track key metrics like LCP, FID, and CLS, and gather data via the web‑vitals library, Performance API, and error‑tracking hooks to systematically improve load speed, interactivity, and visual stability.
This article demonstrates how to integrate a canvas‑based snake game into the Quill rich‑text editor by creating a custom toolbar button, defining a SnakeBlot, registering it with Quill, and inserting the game as an embed, all within the DevUI framework for enterprise front‑end solutions.
This article analyses the performance problems of traditional bundled development with Webpack, explores unbundled tools such as Snowpack, WMR and Vite, and details a custom dev‑server implementation that leverages CJS‑to‑ESM conversion, esbuild bundling, plugin architecture, and fast HMR to dramatically reduce startup time for large monorepos.
This article explains what WebAssembly is, why it was created, how to compile C or Rust code to .wasm, integrate it into JavaScript projects, and showcases real‑world performance gains and use cases such as image processing and barcode scanning.
This article walks through building a front‑end‑only tool that reads student data from Excel, creates customized poster images using SheetJS, html2canvas, and JSZip, and solves out‑of‑memory crashes by analyzing JavaScript heap usage, refactoring recursive code, and optimizing DOM cloning with ignoreElements.
This article explains the CORS mechanism, detailing how browsers automatically add Origin headers, the difference between simple and non‑simple requests, the preflight exchange, required HTTP headers, and how servers respond to enable or reject cross‑origin communication.
Xianyu introduced a containerized page protocol and cloud platform that adds a fourth Container layer to its Page‑Section‑Component model, enabling dynamic, low‑code page adjustments, traffic splitting, AB testing, and robust disaster‑recovery through multi‑level caching, thereby cutting development effort and accelerating new business page rollout.
This article traces the evolution of web technologies from Tim Berners‑Lee's first static page and the birth of HTML, through the rise of JavaScript, CSS, AJAX, SPA, SSR, and NodeJS, to recent innovations like React Server Components and future trends in web rendering.
This article provides an in‑depth technical analysis of Webpack's runtime, explaining how bundles are composed of business code and runtime, the generation of __webpack_require__ helpers, the mechanisms behind asynchronous chunk loading, hot module replacement, and the internal dependency‑collection process that drives the final asset emission.
This article introduces a selection of open‑source projects that demonstrate front‑end and back‑end separation using technologies such as SpringBoot, Vue, Angular, and React, providing practical examples and resources for developers seeking to master full‑stack development and micro‑service architectures.
This article explains how to automatically replace literal color values with Semi Design CSS variables for dark‑mode support by parsing style files with PostCSS, calculating color similarity with chroma‑js, and applying a custom Stylelint rule that can lint and autofix the code.
TypeScript’s rapid rise stems from its incremental type system, strategic collaborations, and tooling ecosystem—including DefinitelyTyped, JSX support, and integration with Babel and modern build tools—while its future may involve native type annotations in JavaScript and continued community‑driven evolution.
This article explains the historical concept of Activation (or Variable) Objects in ECMAScript 1/3, why they disappeared after ES5, how modern JavaScript uses Lexical Environments as their successor, and how this relates to closures and function execution.
This article walks you through creating impressive big‑screen visual dashboards using FineReport, covering tool selection, data preparation, decision‑report setup, dataset creation, layout design, visual polishing, dynamic effects, and final preview to help you deliver compelling data visualizations efficiently.
Explore the evolution of frontend build systems—from early manual bundling and IIFE modules through AMD/CMD, webpack, Vite, and rollup—while learning key interview questions, practical optimization techniques, and how to build a comprehensive, future‑ready construction framework for modern web development.
This article explains the purpose of dark mode, outlines design principles such as layer hierarchy, color contrast, saturation, text opacity, and state representation, and distinguishes dark mode from night mode, providing practical guidelines for creating accessible and visually appealing dark‑theme interfaces.
The article reviews the 2020 State of JS and State of CSS surveys, highlighting global participation, emerging JavaScript features, popular frameworks, CSS layout and animation trends, and how these data-driven insights can guide developers in technology selection and future front‑end development directions.
The article explains why traditional global CSS is problematic for component‑based development, reviews several ways to write styles in React—including BEM‑constrained classNames, inline styling, CSS Modules and css‑loader—then introduces CSS‑in‑JS concepts, demonstrates the Emotion library, compares popular packages and offers practical recommendations for choosing a styling solution.
To prevent page failures and white‑screen errors, the team built a front‑end SDK that fetches fallback data from OSS + CDN, offers configurable black/white‑list rules, lightweight validation, and a visual backend, cutting error rates from over 8% to 0.55% and dramatically improving interface stability.
This article explains how React’s functional nature, rooted in pure functions and side‑effect management, leads to the design of Hooks such as useState and useEffect, and walks through their implementation details and practical considerations.
This article demonstrates how to leverage the @vue/reactivity package inside React by creating a custom useReactive hook for function components and a reactiveHoc higher‑order component for class components, explaining the underlying concepts, implementation steps, and practical usage with full code examples.
This article examines the evolution of frontend request libraries—from jQuery Ajax to modern hook-based solutions like useRequest, SWR, and react-query—highlighting their simplified loading state handling, cache mechanisms, refetching, and mutate features, and comparing their design differences with class components.
This tutorial explains how to configure PHPMailer in a ThinkPHP project, set up SMTP credentials, create a reusable sendMail function, generate verification codes, and integrate a frontend form with AJAX to send password‑reset emails securely.
This article walks through the technical foundations behind Taobao Life’s virtual avatar system, covering industry context, real‑time 3D rendering pipelines, dynamic clothing and beauty effects, facial‑capture AR integration, and the trade‑offs of building such experiences with Web technologies.
This article explains why a clean code structure matters, defines the characteristics of a good architecture, describes the roles of Model, Util, Service, DAO, and Controller, and discusses how these concepts apply to Web, Android, and iOS development for junior programmers.
This article traces the evolution of web development from the first static page in 1991 through the rise of HTML, CSS, JavaScript, dynamic server‑side technologies, AJAX, SPA, server‑side rendering, Node.js, and emerging trends like bigPipe, React Server Components and Web Components, highlighting the problems each breakthrough solved and the challenges that followed.
Spanning three decades, this article traces the evolution of web development from Tim Berners‑Lee’s 1991 static page through the rise of HTML, CSS, JavaScript, PHP, AJAX, SPA frameworks, server‑side rendering, Node.js, and emerging trends like React Server Components, illustrating how each breakthrough addressed the limitations of its predecessors.
This tutorial walks through the essential static components of Python‑Dash—such as headings, text, images, media, lists, blockquotes, and the special dcc.Markdown component—showing how to combine them with callbacks to create a fully functional online Markdown editor in just 60 lines of code.
In FY21 I led the Xianyu creator ecosystem as technical PM, building a cross‑functional team, defining goals, and making data‑driven decisions while delivering front‑end innovations such as a rule‑engine CEP, Flutter expansion, backend admin tools, and container strategy, ultimately boosting creator growth and platform value.
This case study details the massive traffic and rich interactive challenges faced by Kuaishou's 2021 New Year web event, analyzes resource download, host performance, and CDN dependencies, and presents tiered preloading, offline‑package splitting, dynamic animation degradation, and domain‑sharding solutions to ensure stability.
This article explores the challenges of displaying negative or "less‑is‑better" metrics with progress bars, examines real‑world examples such as remaining storage, countdowns, and expense tracking, and proposes UI patterns like inverted bars, gauges, segmented steps, and clear textual cues to improve user understanding.
The project designs a scalable Xianyu article publishing tool that uses a compressed JSON schema based on DingTalk’s we‑editor to store and render extensible, high‑fidelity content, separating text and images, adding plugin‑based cards, and optimizing performance to halve first‑screen load time while supporting future interactive features.
This article details the design and evolution of the ReX Dev front‑end engineering platform used by Alibaba's Hema, covering its layered architecture, robust metadata model, flexible pipeline engine, SPI‑based service extensions, LowCode/ProCode interconversion, and practical guidelines for building a high‑productivity, extensible development platform.
This article introduces the Hippy cross‑platform framework, outlines its key features for React and Vue developers, details its project layout, and provides step‑by‑step environment preparation and build instructions for iOS and Android applications.
This article explains why data exchange between numerous frontend plugins in large‑scale applications is hard to trace, reviews common debugging techniques, adapts backend tracing ideas, and presents a concrete implementation for retrieving and validating plugin data in real time.
This article explores how SpaceX’s rocket control console is built with JavaScript, examines Flutter 2’s cross‑platform capabilities, details the WebGL techniques behind GitHub’s interactive globe, breaks down logistic regression for recommendation systems, and provides an overview of Huawei’s Harmony OS for developers.
This tutorial walks through why catching front‑end component errors is essential, demonstrates how to implement a custom React ErrorBoundary with flexible fallback options, reset logic, higher‑order component wrappers, and hooks, and provides complete TypeScript examples and best‑practice summaries.
Eva.js, an open‑source interactive game engine developed by Alibaba, combines a lightweight ECS architecture, PixiJS rendering, and performance‑focused loading strategies to let front‑end developers create engaging web games with just a few lines of code, while supporting accessibility and state management.
Eva.js, an open‑source interactive game engine developed by Alibaba for two years, lets front‑end engineers create low‑cost, high‑performance web games using familiar HTML/CSS and PixiJS rendering, with ECS architecture, performance‑focused loading, accessibility support, and a lightweight state‑management system.
This article deeply analyzes Vue.js's mergeOptions function, explaining how merge strategies are defined and applied to options like data, props, hooks, assets, and watchers, with detailed code examples and step‑by‑step breakdowns to help developers understand Vue's option merging mechanics.
This article analyses the evolution of Baidu's search result page front‑end architecture, identifies scalability, coupling, and technology‑stack problems, and presents a three‑layer strategy—foundation, modular middle layer, and componentized top layer—along with concrete implementation steps such as TypeScript adoption, service‑oriented modules, dependency‑injection containers, and SSR performance optimizations.
This article recounts a technical interview where the author explains the complete lifecycle of a browser request—from URL parsing, DNS resolution, TCP handshake, and caching strategies to DOM construction, rendering, and performance optimizations—providing concise answers and practical tips for front‑end developers.
This roundup presents a selection of recent technical articles covering the Node.js 16 release, front‑end performance optimizations, CSS @property advances, WebRTC transport protocols, game‑engine dark‑mode implementation, Babel deep‑dive, and a new Flutter‑based web rendering engine, each linked for further reading.
This article details the background, research, identified issues, and step‑by‑step technical solutions—including code examples—for implementing comprehensive accessibility support in the JD Daojia React Native (RN) platform, aiming to enable visually impaired users to complete the full purchase flow.
This article provides a comprehensive analysis of CSS selectors, covering their classification, detailed usage of various selector types, and the calculation of selector priority with practical examples.
This article provides a step‑by‑step tutorial for installing and configuring a Spring Cloud microservice platform on a Mac M1, covering Nacos setup, MySQL installation, microservice startup, frontend portal preparation, and admin backend deployment with troubleshooting tips.
This article introduces gamification concepts, explains core 2D interactive techniques such as rendering, animation loops, sprites, nine‑patches and masks, and provides a step‑by‑step tutorial using Eva.js to build a simple moving heart demo with click events.
This article provides an extensive set of regular expressions for validating various numeric formats, character sets, special requirements such as email, URLs, phone numbers, dates, IP addresses, and other common patterns, accompanied by clear explanations and usage examples for developers.
This guide covers the essential TypeScript knowledge for React development, demonstrating how to import React, declare functional components with React.FC, use core hooks such as useState, useRef, useEffect, useMemo, create custom hooks, handle defaultProps, choose between type and interface, type props, manage forms and events, work with operators, and apply generic patterns for reusable components.
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.
