The article explains how Firefox redesigned its accessibility engine—moving from a complex, multi‑process architecture to an asynchronous, cache‑driven model—to dramatically speed up screen‑reader interactions, cut thousands of lines of code, and roll out the improvements across Windows and Linux browsers.
This guide explores the principles, types, feedback mechanisms, and best practices of filter components in B2B product design, illustrating how precise and fuzzy search, dropdowns, matrix, tab, and combined filters can improve data discovery while addressing usability trade‑offs.
Vivo’s Houyi low‑code platform separates front‑ and back‑end, uses a self‑built JSON‑schema rendering engine, offers drag‑and‑drop visual configuration, scales to trillion‑level content delivery with sharded MongoDB and Redis, and seamlessly coexists with traditional code through iframe and SDK extensions.
This article walks through using the Zustand state‑management library in a complex React component, covering store initialization, actions, selectors, modular file structure, handling controlled vs uncontrolled modes, performance optimizations, and devtools integration, while sharing practical tips and code examples for scalable frontend development.
This article explains the design, architecture, and evolution of Ant Cube Tool (ACT), a Node‑based CLI and VSCode‑enhanced solution that compiles, previews, and debugs Alipay Cube card DSLs, enabling efficient cross‑platform mobile dynamic content creation.
This step‑by‑step guide walks developers through creating a ChatGPT‑powered WeChat mini program—from obtaining a mini‑program account and OpenAI API key, setting up the WXML/WXSS/JS project structure, integrating WeUI components, building a Node‑Egg backend, configuring Tencent Cloud API Gateway, to uploading, reviewing, and publishing the app.
React 18 introduces Streaming SSR and Selective Hydration, enabling faster initial page rendering and more efficient hydration by only rendering necessary components.
This article explains how to add a simple CSS snippet that applies a full-page grayscale filter, turning a website black-and-white, including the code, usage instructions, and notes on compatibility and alternative JavaScript methods.
This article explores Vite’s evolution and core architecture, detailing how it improves development server startup time, performs dependency pre‑bundling with esbuild, creates the dev server, handles HTML injection, and implements fast hot‑module replacement through WebSocket communication.
This curated guide explores key front-end topics—including unified browser storage APIs, comprehensive engineering configuration practices, deep dives into exception handling and performance optimization, essential packet-capture techniques, impactful micro-copy design, and a personal four-year front-end development journey—providing practical insights for modern web developers.
This tutorial walks through creating a lightweight rich‑text editor using ProseMirror's core modules, enhancing it with plugins like history and input rules, and then simplifying development with the Remirror React library to support Markdown formatting and custom extensions.
This guide walks through creating a React app, downloading the React source, building it, linking the packages, configuring webpack aliases, fixing import paths, disabling ESLint, adjusting environment variables, and resolving internal React errors so you can edit and debug the original React source directly in the browser.
This article guides developers through creating a customizable slider captcha component using Vue 3 and Vite, covering component design principles, Canvas drawing techniques, event handling, API configuration, and publishing the component to npm, with complete code examples.
This tutorial explains how to package a custom Web Components dropdown, publish it to npm using either Babel or Webpack, and then integrate the published component into a React application, covering project setup, configuration files, build scripts, and deployment steps.
This article explains React17's event mechanism changes compared to React16, covering event propagation phases, binding methods like inline HTML, DOM0, and addEventListener, event delegation for efficient handling, and browser event differences.
This article explains how to replace verbose nested if‑else statements in JavaScript with short‑circuit evaluation, ternary operators, switch‑case constructs, and object‑based strategy patterns, providing clearer, more maintainable code through concise examples and practical use‑cases.
The article examines Turbopack's claimed performance advantages over Vite, critiques marketing-driven comparisons in open-source tools, and emphasizes the need for transparent, peer-reviewed evaluations in frontend development.
This article introduces design patterns, explains their origins and core principles, and demonstrates how common patterns such as Publish‑Subscribe, Strategy, Adapter, Proxy, Chain of Responsibility, and Singleton can be applied in frontend development with practical code examples and usage guidelines.
GaiaX, an open‑source cross‑platform template engine created by Alibaba’s Youku team, tackles multi‑device UI component development bottlenecks by introducing a DSL‑based native rendering approach, dynamic updates, containerization, and tooling that together streamline design‑to‑code workflows and improve development efficiency.
This article explains the fundamentals of virtual reality, the WebGL and OpenGL APIs, and demonstrates how to create interactive VR panoramas for houses and cars using three.js, covering scene setup, cameras, renderers, geometry, textures, materials, lighting, and user interaction with concise code examples.
This article explains the Strategy design pattern, demonstrates its refactoring in JavaScript through bonus‑calculation and Axios adapter examples, and shows how applying the pattern improves code clarity, extensibility, and maintainability in frontend development.
This article describes how the Tongtian Tower platform breaks traditional R&D barriers by enabling zero‑code, one‑click conversion of design drafts into production‑ready floor layouts, detailing the underlying architecture, data processing pipeline, core capabilities, challenges faced, and future optimization plans.
Since 2019, Alibaba’s Big Taobao team has pioneered FaaS adoption across multiple business scenarios, sharing why, what, and how they migrated front‑end‑centric data‑assembly logic to serverless functions, detailing architectural changes, benefits, migration strategies, stability measures, and low‑code tooling insights.
This tutorial demonstrates how to build a lightweight function that loads a micro‑application by fetching its HTML, converting external CSS links to inline styles, applying scoped CSS isolation, executing JavaScript within a snapshot sandbox, and discusses entry‑point handling, isolation limitations, and routing integration.
The article explains how Vue 2’s diff algorithm uses head‑to‑tail comparisons and a key‑to‑index map to patch, add, or remove nodes, while Vue 3 improves efficiency by building a key‑to‑new‑index map, computing the longest increasing subsequence, and moving only non‑LIS nodes, reducing DOM operations.
This article explains how Vue Router 4 leverages the HTML5 Web History API through createWebHistory, detailing pushState/replaceState mechanics, server fallback handling, TypeScript definitions, the four‑step creation process, listener implementation, and comparisons with hash and memory histories, all illustrated with real source code.
WebAssembly (Wasm) is a binary instruction format for a stack-based virtual machine, designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications. It offers high efficiency, safety, openness, and standardization, allowing programs to run with near-native performance in web browsers. Wasm addresses the limitations of JavaScript, such as dynamic typing, by providing a more efficient and secure execution environment. It has applications in various scenarios, including AutoCAD, and can be used to extend functionalities in platforms like Envoy.
This guide details how to implement web push notifications with Firebase, explaining the underlying push principles, step‑by‑step project setup—including service‑worker registration, token management, and message handling for both notification and data payloads—while also addressing common issues such as service‑worker updates, cross‑browser compatibility, and permission management.
This curated collection presents insights on engineering productivity, JavaScript memory leak detection with MemLab, Rust's top challenges, V8 execution, advanced frontend tools like Lath and Plasmo, Playwright component testing, senior engineering perspectives, and practical guides on proxy patterns and Babel plugins.
This article provides an in‑depth overview of Babel, covering its origins, core purpose as a JavaScript compiler, configuration file options, plugin and preset usage, runtime optimization, integration with webpack, and the underlying parsing‑transform‑generation pipeline illustrated with a simple compiler example.
Adobe’s $20 billion purchase of the web‑based design platform Figma, announced in September 2022, sparks debate over its impact on web standards, open‑source alternatives like Penpot, and the future of frontend development built on technologies such as WebGL, JavaScript and WebAssembly.
TypeScript’s incremental compilation, introduced in version 3.4, speeds up build times by reusing previous build information stored in a tsBuildInfoFile, and this article explains the entry points, how old and current programs are created, change detection rules, and configuration of the buildInfo file.
The article examines how the mature internet industry can improve design and front‑end productivity through Design‑to‑Code (D2C) and Code‑to‑Design (C2D) approaches, introduces the C2D2C workflow, and highlights low‑code platforms as a market‑validated solution for accelerating B‑end product development.
Chrome 105 introduces 25 new web‑development features—including a blocking=rendering attribute for scripts and styles, the :has() selector, onbeforeinput event, 125 Hz timer alignment, CSS :modal pseudo‑class, restrictions on the default identifier, container queries, enhanced scroll and fetch APIs, and experimental gesture‑scroll DOM events.
Low‑code combines visual, model‑driven and cloud‑native technologies to dramatically boost efficiency and cut costs, and this article introduces twelve noteworthy open‑source low‑code projects—ranging from Appsmith and Amis to NocoBase and Awesome Lowcode—each with a brief overview and GitHub link.
This article introduces the fundamentals of data charts, covering their definition, advantages, core components, common classifications, typical use‑cases, and a curated list of useful plugins and websites to boost design efficiency.
Datav, Shopee’s internal low‑code data‑visualization platform, automates dashboard creation by providing a DSL‑driven designer, reusable chart components, and auto‑generated SQL, cutting project cycles from roughly 40 to 20 days and front‑end effort from ten to three person‑days while streamlining data‑source integration and permission management.
This article explains how to use SVG path commands and JavaScript to draw and animate Bézier curves for a fluid drag‑slider UI, covering background, curve theory, implementation steps, stroke‑dash techniques, offset‑path alternatives, and SMIL animation for interactive effects.
From a front‑end developer’s viewpoint, this article examines Rust’s learning curve, pros and cons compared with JavaScript/TypeScript, performance benchmarks, multithreading, testing, and real‑world application scenarios such as tooling, WebAssembly, and desktop clients, while also providing learning resources and reference links.
This article provides an in‑depth overview of TypeScript, covering its origins, basic and advanced type features, utility types, function overloads, generics, type inference, assertions, global types, and practical patterns such as enhanced Omit, deep Pick, and object assign type utilities for robust frontend development.
This article explores data visualization fundamentals, compares scientific, information, and analytical visualization, reviews popular frontend libraries like ECharts and AntV/G2, showcases real-world case studies, and details technical choices for building interactive charts and graph‑based analytics in modern applications.
The article introduces Vite 3.0's refreshed documentation, new template themes, CLI visual improvements, changed default port, rewritten import.meta.glob API, smaller bundle size, ESBuild minification, bug fixes, Node 14.18+ compatibility, and a yearly release commitment, emphasizing the need for developers to stay current.
This article explains how introducing a data source layer in a visualization building system reduces repetitive component configuration, improves reuse, and empowers non‑developers to create and manage APIs for dynamic UI assembly.
This article walks through building a Werewolf party game mini‑program, covering project overview, home page UI with player‑count selection, detailed WXML code for the home and game screens, role selection mechanics, and special character features, complete with screenshots and code snippets.
This article explains React's Diff algorithm and Fiber architecture, compares it with Vue2 and Vue3's double‑ended diff approaches, and discusses why Vue does not need Fiber or time‑slicing, providing code examples and visual illustrations of the underlying mechanisms.
This article explains the evolution of front‑end development, introduces the concept of low‑code, and details the design, architecture, visual configuration system, rendering engine, data handling, and practical experiences of the internally built "Ghost‑Craft" low‑code platform used to accelerate page creation and reduce technical debt.
This article explains how modern low‑code platforms evolve from simple API connections to advanced data‑mapping, request adapters, and API proxy solutions that address front‑end data format mismatches and cross‑origin restrictions, enabling seamless integration of legacy services without code changes.
This roundup highlights a Microsoft browser team interview on the web’s past and future, the practical use of HTTP 103 status code, advice against over‑abstracting components, Combine programming practices, live‑stream performance tuning, applying cognitive psychology to UX design, and insights on building effective frontend teams.
This article details how NutUI and JD Tech collaborated over multiple quarters to create NutUI‑JDT, a theme‑customizable component library that unifies H5 and mini‑program development, expands and adapts components, introduces a Sketch plugin, and outlines future roadmap and open‑source contributions.
This guide details RELAAAY's icon design system, covering standardized size specifications, line widths, corner radii, iconfont advantages, usage rules, and practical steps for creating, updating, and deploying single‑color icon fonts across platforms.
This article explains the core concepts of low‑code platforms, defining low‑code as visual (declarative) programming, comparing declarative and imperative approaches, and detailing front‑end rendering with JSON‑to‑React, multiple backend storage strategies, logic execution models, workflow engines, and future trends.
This article provides an in-depth overview of web and mobile navigation design, categorizing navigation types such as full‑screen, top, side, bottom, and mixed, and detailing their advantages, disadvantages, design principles, and practical examples to help designers create effective, user‑friendly interfaces.
This tutorial explores color manipulation in WebGL fragment shaders, demonstrating how to apply RGBA values, create gradient effects using coordinate mapping and cubic Bezier curves, and implement HSB color space conversions to achieve dynamic and visually complex rendering results.
This article explains the fundamental differences between JavaScript throttle and debounce techniques using an intuitive real-world analogy, provides clear code implementations, compares their execution behaviors, and demonstrates practical usage scenarios with the Lodash library for optimizing frontend event handling.
This article introduces Plasmo, a modern framework for building browser extensions using familiar web technologies like React, TypeScript, and Webpack, explains how to initialize a project, configure assets, debug with Chrome, and publish across Chrome, Firefox, and Edge stores, streamlining development and deployment.
This comprehensive guide walks developers through Chrome DevTools' powerful editing, debugging, and override features—including quick CSS/JS tweaks, workspace setup, console utilities, breakpoint strategies, and even Node.js/Deno debugging—empowering efficient front‑end development without leaving the browser.
This article discusses strategies to optimize H5 performance in mobile apps by implementing caching mechanisms and reusing webviews, significantly reducing loading times from an average of 2s+ to 1s+.
This roundup covers the official release of HTTP/3 (RFC 9114), key findings from a 2022 frontend development survey highlighting TypeScript dominance, an in‑depth Web3.0 industry panorama, Douyin's Android power‑saving practices, bundler considerations, first‑party cookie guidance, content‑visibility performance analysis, and a detailed Three.js ice‑cream Earth tutorial.
Over the past six months the author handled dozens of corporate website projects, identified recurring design problems such as limited resources, high labor cost, lack of brand identity and poor user experience, and introduced a systematic workflow—including resource integration, component libraries, modular templates and a code‑generation tool—that enables the rapid production of multiple web designs within a single day.
The article compares JetBrains’ IntelliJ‑based IDEs with Microsoft’s VS Code, examining their differing philosophies, feature depth, performance, and real‑world developer workflows, and concludes that while VS Code poses a serious challenge, it is unlikely to replace full‑featured IDEs.
This article discusses principles for designing effective forms, including minimizing user input, providing real-time feedback, and choosing optimal layouts like vertical, horizontal, or floating structures to enhance user experience.
This article analyzes the concurrent rendering problems that arise in OpenSumi’s file‑tree after removing throttling, explains their root causes, and presents a comprehensive solution—including operation prioritization, cancellable actions, and queued updates—to achieve both high performance and stable user interaction.
This article explains how Tencent created the open‑source TDesign system, its multi‑team organization, rule‑based governance, tooling, GitHub automation, documentation strategy, and contributor incentives, showing how a large‑scale design system can stay consistent while evolving across many technology stacks.
Microsoft’s Internet Explorer, once dominating the web with up to 95% market share, gradually declined due to performance issues and competition from Firefox and Chrome, leading to its retirement in 2022 and the rise of Edge, which now strives to reclaim relevance with a Chromium foundation.
The article analyses low‑code platforms by defining low‑code as visual programming, contrasting declarative and imperative approaches, examining front‑end and back‑end implementation schemes, interaction models, storage options, workflow engines, and future trends, ultimately showing that declarative foundations drive both strengths and limitations.
This article traces the evolution of responsive web design from Ethan Marcotte’s 2010 breakthrough to today’s component‑driven approach, covering CSS media queries for user preferences, the emerging container‑query syntax, and new media features that enable layouts to adapt to multi‑screen and foldable devices.
PyScript, a new framework from Anaconda, enables developers to embed and run Python code directly in standard HTML pages, offering first‑class Python support in the browser, seamless integration with JavaScript, package management, and UI components, all built on the Pyodide WebAssembly engine.
An in‑depth technical overview describes how a WebAssembly‑plus‑QuickJS sandbox architecture enhances web security, improves developer experience, and delivers benchmarked performance gains for next‑generation open web applications, while maintaining compatibility with W3C standards and integrating with existing e‑commerce platforms.
This paper proposes a WebAssembly‑QuickJS sandbox that isolates JavaScript execution and uses Shadow DOM/iframe for CSS isolation, delivering W3C‑compliant, high‑performance security for web apps, achieving 355× communication gains over mini‑programs while maintaining a lightweight, extensible ecosystem for e‑commerce plugins.
This article explains how Webpack 5's Module Federation feature enables dynamic code sharing and dependency sharing across micro‑frontend applications, walks through its core concepts, shows practical configuration and code examples, and discusses its advantages, drawbacks, and typical use cases.
This article details the motivation, design decisions, architecture, and practical outcomes of creating a low‑code page‑building platform for the 百瓶 app, highlighting challenges in traditional development, the benefits of free layout, data and behavior centers, and future roadmap considerations.
This article explains why Rust is valuable for modern development, introduces its memory model, ownership, borrowing, lifetimes, and copy semantics, and provides step‑by‑step guidance for building a WebAssembly image‑processing app with Rust, Cargo, wasm‑pack, and Vite.
This guide shows how to set up the Material Design‑styled Hexo theme "Fluid" by creating a Hexo blog, obtaining the theme via npm or direct download, configuring the theme in the site settings, and adding an about page, while highlighting the theme’s many built‑in features.
This article introduces RxJS, explaining its roots in functional and reactive programming, detailing core concepts such as Observables, Observers, Subscriptions, Subjects, and operators, and demonstrates practical code examples that illustrate how to manage asynchronous event streams effectively in modern front‑end development.
This article details how Alipay’s 2022 ‘Air Writing’ AR feature was built for the Five‑Fortune project, covering the technical challenges, the front‑end stack—including Vite, Oasis Engine, ARSession, and WebGL shaders—implementation steps for drawing, vectorizing, extruding characters, playback handling, and memory‑performance optimizations.
This comprehensive guide explains how RxJS brings functional reactive programming to web applications, showing real‑world examples such as online classrooms, autocomplete search, canvas drawing, and service‑layer design, while comparing it to Redux and offering debugging tools and best practices.
The article explains how to achieve real‑time AI‑driven AR beauty effects in browsers by unifying media input with MediaStream, down‑sampling frames, accelerating detection via WebAssembly‑SIMD and GPU, constructing a 2D facial mesh for mask positioning, rendering makeup with custom WebGL shaders, and integrating the full pipeline into Tencent Cloud Vision Cube for seamless web and mini‑program live‑stream experiences.
Learn how to build a simple global state management solution in React using custom hooks, starting from a basic counter component, extending it with initialization props, synchronizing multiple counters, and finally creating a reusable createGlobalState utility for shared state across components.
This curated collection highlights recent React ecosystem insights, a step‑by‑step guide to building a 100k QPS coupon system, techniques for creating a lightweight WebIDE, strategies for establishing front‑end standards, plus productivity habits, the Rust 2024 roadmap, React mind‑maps, open‑source programming books, and a new JavaScript sandbox using ShadowRealm.
The article explains, through a mock interview, why running npm run xxx triggers npm to look up the script in package.json, creates local binary links in node_modules/.bin, and executes the corresponding command such as vue‑cli‑service serve without requiring a global installation.
This article describes how a company refactored its Ant Design‑based React component library by standardizing on higher‑order component wrappers, adopting the dumi documentation tool, and organizing the codebase with a Lerna‑Yarn monorepo, resulting in significantly improved maintainability and developer efficiency.
This article provides a comprehensive beginner-friendly guide to Babel, covering its definition as a JavaScript compiler, the parse‑transform‑generate workflow, AST concepts, core packages, plugin and preset classifications, configuration details, and step‑by‑step usage examples with code snippets.
This article explains how AntV S2 uses a canvas‑based rendering engine and event delegation to provide advanced interactions such as cell highlighting, brush selection, dynamic resizing, column hiding, and custom tooltips for multi‑dimensional data tables, complete with code examples and implementation details.
This article introduces Alibaba's open‑source LowCodeEngine, outlines its key features, and provides a step‑by‑step tutorial for quickly building a low‑code development platform that generates React front‑end code, configures components, connects data sources, and exports the resulting code.
This article presents a curated collection of over sixty VS Code extensions, organized into categories such as appearance optimization, functional enhancements, coding efficiency, code formatting, and fun utilities, each with a brief description, usage tips, and screenshots to help frontend developers improve their development experience.
This article explains JavaScript's memory lifecycle, defines memory leaks, enumerates typical leak patterns such as accidental globals, timers, closures and DOM references, and describes the underlying garbage‑collection strategies (mark‑and‑sweep and reference counting) together with practical mitigation techniques.
Chrome 100 brings major frontend changes, including a Multi‑Screen Window Placement API for multi‑display apps, the ECMAScript Array Grouping proposal, reduced User‑Agent strings for better privacy, and the deprecation of the document.domain setter to strengthen same‑origin security.
This article details Alibaba's Feizhu journey of adopting WeChat mini‑programs, covering background, technology stack choices, integration platform design, performance and volume optimizations, and future front‑end challenges, offering practical insights for large‑scale mobile web development.
This article walks through building a browser‑based Duck Hunt‑style shooting game using Vue 3 for the UI framework, PixiJS as the rendering engine, and supporting tools such as Vite, SCSS, mitt, and GSAP to handle asset loading, scene management, animations, hit detection, and responsive scaling.
This article details the end‑to‑end development of a Sketch plugin—covering background motivations, toolchain setup with Skpm, Vue3, and webview, project architecture, build scripts, communication between webview and plugin, resource handling, drag‑and‑drop, data caching, and design‑validation features—providing practical solutions to common challenges.
This article explains why jQuery’s source uses a double assignment pattern, how assignment operators are right‑associative expressions, the impact of operator precedence on property access versus assignment, and demonstrates practical uses such as building linked structures in JavaScript.
This article examines the limitations of ESLint for error detection, the challenges of a non‑smooth coding experience, and how adopting TypeScript can improve productivity, type safety, and tooling while weighing its learning curve and ecosystem alternatives.
This article provides a comprehensive tutorial on Vite, explaining its core principles, architecture, and practical implementation, while detailing a step‑by‑step migration from Webpack—including handling JSX, aliasing, module resolution, CSS, HMR, and performance improvements—complete with code snippets and real‑world challenges.
Web animation enhances user experience by providing visual feedback and dynamic content, and this article surveys common frontend animation methods—including CSS frame and tween animations, JavaScript style manipulation, SVG animations, and Canvas/WebGL techniques—detailing their implementations, use cases, and performance considerations.
This article introduces pnpm, a fast and efficient JavaScript package manager that reduces disk usage by sharing dependencies, explains its core principles, highlights key features such as monorepo support and strict node_modules layout, and provides multiple installation methods for various operating systems.
Leading browser vendors Apple, Google, Microsoft, and Mozilla, together with Bocoup and Igalia, launched Interop 2022 to benchmark and improve cross‑browser support for emerging web standards, revealing score gaps and highlighting fifteen priority areas such as cascade layers, color spaces, containment, dialog elements, form fixes, scrolling, subgrid, typography, and viewport units.
This tutorial explains how to create a Chrome browser extension that generates QR codes (optionally with protocol headers) and decodes them, covering the background motivation, directory layout, manifest and popup design, core JavaScript logic, installation steps, and a download link for the complete source.
This article explores VS Code's space‑control concepts, detailing the main UI regions, editor group mechanics, keyboard shortcuts for switching and splitting files, command‑palette strategies, terminal operations, and sidebar toggles, helping developers optimize their workspace productivity.
This article details Taobao's front‑end engineer Lin Weixuan's experience migrating the massive store‑decoration codebase to TypeScript, establishing development and engineering standards, optimizing compiler performance, and exploring advanced type programming and tooling to improve code quality and stability.
This article explains the principles and implementation of server‑side rendering (SSR) in Vue, comparing CSR and SSR, detailing how Vue’s vue‑server‑renderer creates a bundle renderer, executes code via Node’s vm, traverses the virtual DOM to generate HTML strings, and relates SSR rendering to the generate phase of front‑end compilation.
