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.
Web Components provide native, reusable HTML elements with Shadow DOM isolation, delivering lower CPU and memory usage than frameworks like React, and are increasingly adopted by companies such as Twitter, YouTube, and Adobe, offering performance, maintainability, and reduced vendor lock‑in for modern frontend development.
This article details the motivation, technology selection, architecture design, and multi‑stage performance optimization of a server‑side rendering (SSR) solution built with Vue and Nuxt for the 360 Search Encyclopedia mobile project, covering challenges, experiments, deployment strategies, and final conclusions.
This article explains how establishing clear design specifications improves team collaboration, speeds up component assembly, ensures visual consistency across a product, and outlines a practical process for creating, reviewing, and iterating design guidelines within a mobile app ecosystem.
This article examines the limitations of bundle‑based tools like Webpack, introduces Vite’s ESM‑based approach, and provides a detailed analysis of Vite’s architecture, hot‑module‑replacement, module transformation, dependency graph, and plugin system, illustrating how it improves development speed and efficiency.
The article reports that WeChat’s departments are testing a 10‑am to 6‑pm workweek, Mozilla is seeking new revenue after its browser market share fell, and both Chrome and Firefox are preparing to release version 100, prompting developers to update User‑Agent parsing.
GitHub now integrates the Mermaid diagram plugin into Markdown, allowing developers to embed flowcharts, sequence diagrams, Gantt charts, and more directly in documentation using simple text syntax, which streamlines visualization, reduces maintenance overhead, and enhances collaborative understanding of project architectures.
This article demonstrates how combining Serverless computing with low‑code tools enables rapid development of a blind‑box lottery, covering architecture design, front‑end low‑code implementation, back‑end Django logic, security measures, deployment steps, and insights from both developer and vendor perspectives.
This article demonstrates how to build an interactive 3D Winter Olympics themed webpage using Three.js and React, covering resource import, scene setup, lighting, model loading, custom materials, particle effects, camera controls, and animation techniques.
This article explains how Vite leverages native ES modules, esbuild pre‑bundling, and a flexible plugin system to provide instant dev‑server startup, fast hot‑module replacement, and efficient dependency handling, contrasting its approach with traditional bundlers like webpack.
This tutorial explains how to set up and use Puppeteer together with the Mocha test framework to create, run, and report UI automation test cases for web and H5 applications, covering installation, a demo script, selector handling, and visual test reporting.
The article reviews the 2021 React Conf, summarizing React 18’s key innovations such as Suspense for data fetching, Concurrent Mode, automatic batching, new hooks, streaming SSR, and the roadmap for React Native, while also sharing upgrade tips, code examples, and community insights.
This article explains how front-end developers can directly download resources from CDN or object storage using HTML5's download attribute and JavaScript workarounds, addressing CORS limitations and providing code examples for implementation.
This article explains how Kraken, a high‑performance Web rendering engine, integrates Flutter widgets as custom elements, detailing the component architecture, registration process, rendering pipeline, adapter mechanisms, and advanced use cases such as optimizing waterfall‑flow performance for seamless hybrid Web‑Flutter applications.
This article examines why Web Components are gaining traction—covering industry adoption trends, native technical benefits like performance and isolation, reduced business costs, and how they complement rather than replace existing frontend frameworks.
This article explains the core‑plugin architecture, outlines the roles of Core, PluginApi and Plugin, and demonstrates how to create and integrate custom plugins for Babel and Webpack, covering AST transformation, visitor merging, Tapable hooks, and practical code examples to improve extensibility and maintainability.
This tutorial walks through building a simple React project, setting up Rust with Cargo and rustup, compiling Rust to WebAssembly using wasm‑bindgen and wasm‑pack, and finally importing the generated Wasm module into React components to demonstrate seamless Rust‑powered frontend functionality.
This article recounts the complete redesign of a 2500‑person factory's Delphi‑based supply‑chain system, detailing the shift to a front‑end/back‑end separated architecture using React, Ant Design, and .NET Core 3.1, while addressing data consistency, rounding issues, UI habits, printing, and deployment challenges.
This article introduces the use-gesture library, a lightweight React and vanilla JavaScript tool for enriching mouse and touch interactions, explains installation via Yarn or npm, demonstrates various gesture hooks with code examples, and showcases visual effects through animated demos.
This article provides a comprehensive guide to TypeScript’s built‑in and custom utility types, explaining their underlying principles, usage examples, and advanced programming techniques across 22 detailed examples, covering concepts such as keyof, conditional types, mapped types, and type inference for developers seeking to master TS type tooling.
This article demonstrates how to create a breakfast noodle dish using CSS, covering techniques like :before/:after pseudo-elements, box-shadow, and gradients to build a visually appealing and realistic food illustration.
From Vercel’s $150 million Series D round cementing its role as a leading web‑dev platform, to Remix’s open‑source launch as a strong Next.js competitor, plus a practical guide to using the concurrently CLI for parallel Node processes and an introduction to TypeScript’s never type, this roundup covers the latest front‑end developments.
During JD's 11.11 promotion, the team adopted the AI‑powered low‑code tool Deco to generate personalized event pages, replacing manual coding and low‑code platform workflows, achieving a 48% efficiency gain while detailing the workflow, component integration, code generation, data handling, and observed limitations.
This article introduces Jetpack Compose for Web, a JetBrains‑backed multi‑platform UI framework that lets developers write Kotlin code once and render responsive web interfaces, showcasing its features, composable DOM API, and several code examples for building cross‑platform user interfaces.
This article details Meituan’s Page‑Peach platform, a cross‑platform rich‑text management solution that empowers product and operations teams to create and publish simple, frequently changing pages without developer bottlenecks, while providing developers with fast code editing, preview, and deployment capabilities, ultimately reducing cost and improving efficiency.
This article discusses the development status, principles, and practical techniques for integrating Flutter for Web across multiple platforms, including configuration, compilation, deployment, and rendering methods.
Page‑Peggy, Meituan Medicine Technology’s cross‑platform rich‑text management platform, lets product and operation teams instantly create and publish FAQ‑style pages through a visual editor while offering developers a WebIDE for custom code, template markets, SDK integration and Open API, resulting in over 5,000 pages, 82 million views and adoption across dozens of departments.
This guide walks developers through downloading, compiling, and debugging WebKit’s complex source code—covering repository setup, Xcode and command‑line builds, creating debug projects, understanding the multi‑process architecture, and practical tips such as using TestWebKitAPI for effective analysis.
The author documents the creation of Codecity, a WebXR‑powered 3D code‑analysis environment that visualizes software metrics as a virtual city, discusses digital twins, immersive collaboration, and the broader technical and industry implications of the metaverse.
This article highlights recent web development tools and concepts—including Chrome's Recorder panel, Webpack's SplitChunksPlugin, detailed analyses of React Fiber and startTransition, Node.js architecture and multi‑process techniques, as well as source‑code explorations of Fabric.js, Vue2 utilities, and Svelte implementation—providing practical insights for both frontend and backend engineers.
This tutorial walks through creating your own image‑hosting site by setting up a Vue front‑end with Ant Design Vue, configuring a UCloud US3 bucket, and implementing Spring Boot backend code to handle file uploads, generate signed URLs, and return structured responses.
This article introduces a series of practical VSCode cursor techniques—covering horizontal and vertical movement, multi‑cursor creation, and custom keybindings—to help front‑end developers work more fluidly and efficiently, complete with visual examples and shortcut tables.
To meet rapid growth and diverse user needs, Vivo’s Game Center adopted a modular architecture that separates visual templates from data, enabling reusable UI components, configurable page assembly, and AB‑test driven experimentation, which together cut release cycles, streamline backend workflows, and boost scalability and developer productivity.
This article details the migration from Webpack to Vite, highlighting performance improvements and addressing common issues like SVG component support and third-party package bugs.
The article explains client‑side routing for single‑page applications, detailing three approaches—hash mode using location.hash and onhashchange, history mode leveraging the HTML5 History API’s pushState/replaceState with popstate handling, and memory mode storing routes in JavaScript or localStorage—plus their trade‑offs regarding URL readability, SEO, server configuration, and browser support.
This article explains the React Fiber architecture introduced in React 16, compares it with React 15, details how Fiber nodes form a tree, and walks through the source-level implementation of the Diff algorithm, including single-node and multi-node updates, with code examples and diagrams.
This article explores the inefficiencies in modern web development, focusing on collaboration challenges between UI/UX and frontend teams, data interaction issues, and code management difficulties, proposing solutions like component-centric development and improved data binding tools.
This article examines jQuery’s historic rise, its deep integration in platforms like WordPress, the reasons it survived the shift to modern frameworks such as React, Angular and Vue, and why it may still be a useful tool despite declining popularity.
This article introduces the five major new features of ES2021, including numeric separators, String.prototype.replaceAll(), Promise.any, logical assignment operators, and WeakRefs, with detailed explanations and code examples.
This article offers a comprehensive overview of W3C specifications—including HTML, CSS, and accessibility guidelines—explaining their purpose, lifecycle, key working groups, practical usage tips, and how developers can actively contribute to the standards development process.
This roundup highlights the latest Node.js v17 release with OpenSSL 3.0 support, the launch of VS Code’s browser version, a revamped React documentation site, and several noteworthy open‑source projects such as ts‑morpher, @swc/jest, and use‑context‑selector, plus an in‑depth look at Naive UI’s development process.
Chrome 95, released on October 19 2021, introduces fourteen new features—including native WebAssembly exception handling, Secure Payment Confirmation, the EyeDropper API, and a reduced User‑Agent string—each aimed at improving performance, security, and developer experience, with detailed opcode tables, usage examples, and privacy‑focused client hints.
This guide walks you through setting up a Spring Boot‑based logistics warehouse system, detailing required software versions, the project’s modular features, technology stack, database and backend configuration, frontend setup with Vue, and provides screenshots of key interfaces.
This article explains how Vite‑built micro‑frontends can be loaded as native ES modules in icestark, covering the advantages of ES‑module tooling, dynamic import techniques, necessary Vite configuration changes, and the resulting fast cold‑start and second‑load performance for progressive upgrades.
This article walks through creating a lightweight Hongxing Erke‑style e‑commerce mini‑program using WeChat's cloud development, covering tool setup, cloud database design, UI layout, tabBar customization, data loading, pagination, sorting, and detail‑page navigation with practical code examples and common pitfalls.
This article reviews the evolution of JavaScript frameworks over the past three decades, defines what constitutes a framework, explains their core concepts of constraint and support, and analyzes how changing web requirements have driven the development of modern front‑end architectures.
Google Search has officially stopped supporting Internet Explorer 11, a move announced by engineer Malte Ubl that reflects cost‑benefit calculations and will lead to a degraded search experience for IE11 users, signaling the browser's impending obsolescence for developers and enterprises.
This article explains how to use Pyodide—a WebAssembly‑based Python runtime—to run complex machine‑learning model pre‑ and post‑processing directly in the browser, covering memory layout, JavaScript‑Python interoperation, package loading, OpenCV usage, inference engines, persistent storage, and wheel packaging.
This article explains how CSS3 transforms and related properties promote elements to composite layers, detailing the browser rendering pipeline, the role of the GPU, practical demos, performance observations, and techniques for inspecting and optimizing animation performance in modern front‑end development.
This article explains why studying Vue 3 source code is valuable, outlines potential pitfalls, details Vue 3’s design motivations, compares old and new features, answers common questions, and provides step‑by‑step debugging instructions with code examples.
This article introduces the Jamstack architecture, compares it with traditional web stacks, and details how Douyin's e‑commerce 818 main‑hall performance optimization project applied Jamstack principles, CDN caching, API prefetching, and client‑side techniques to achieve faster, more scalable page delivery.
Baidu Reading/Wenku’s cross‑platform layout engine delivers professional book‑level typesetting on Android and iOS by using a single native engine that parses diverse formats into an abstract DOM, generates a memory‑resident layout description, and supports relative, multi‑directional, and reusable layout techniques for high‑quality, adaptive document rendering.
This article explains why using if‑else for state handling violates the Open‑Closed Principle, introduces the State design pattern with a light‑switch example, demonstrates its implementation in JavaScript (including class‑based and functional FSM libraries), and compares it to the Strategy pattern.
This article explains what WebAssembly is, why it was created, how its binary format and compilation model give it near‑native speed compared with JavaScript, and provides a step‑by‑step example of building and loading a simple Wasm module.
This article provides an in‑depth analysis of OpenHarmony’s open‑source JS UI framework, covering system architecture layers, ACE engine repositories, code structure, frontend implementations (command‑style, declarative, and card‑based), rendering pipeline, and practical build commands, while comparing HarmonyOS and OpenHarmony.
This roundup covers the Electron 14.0.0 release with new eight‑week cadence and expanded support, StackBlitz's quick Nuxt.js creation, notable open‑source libraries like react‑native‑elements and 7guis‑React‑TypeScript‑MobX, plus deep dives into NestJS practices, React Native's new architecture, Recoil state management, and a comparison of Object versus Map in JavaScript.
This article introduces a beginner‑friendly WeChat mini‑program demo that replicates the Himalaya Lite audio app, explains its core features, setup steps, and notes on API limitations, providing a practical learning project for developers with basic HTML, CSS, and JavaScript skills.
This article presents a detailed architecture solution for building a generic backend management system with Vue, covering project scaffolding choices, Vite configuration, ESLint/Prettier setup, CSS architecture (ITCSS, BEM, ACSS), JWT authentication, dynamic menu design, RBAC, route registration, component caching, and template generation using Plop.
This article explains the concept of Tree Shaking as a dead‑code elimination technique based on ES Modules, details how to enable it in Webpack, describes the underlying implementation steps, and provides practical tips for writing tree‑shakable code while avoiding common pitfalls.
This article introduces a React‑powered project that recreates a simplified Windows 10 desktop experience in the browser, detailing its multi‑user support, persistent file system using LocalStorage and IndexedDB, core features, missing components, setup instructions, and the open‑source libraries it relies on.
This guide explains how to migrate a React server‑side rendering setup to React 18 by installing the latest version, replacing renderToString with pipeToNodeWritable, and adopting the new API surface while handling Suspense and streaming nuances.
This article examines how to implement offline Web Push notifications in Chrome using Service Workers, covering background, technical concepts such as BrowserId and the Notifications API, step-by-step code for permission handling, key generation, BrowserId retrieval, and server‑side message delivery.
React 18 introduces the startTransition API, letting developers label non‑urgent updates as transitions so urgent interactions stay fast, outdated renders are discarded, and UI remains responsive even during heavy rendering or slow network operations.
This roundup highlights the Next.js 11.1 and Vue 3.2 releases with their new features and performance boosts, introduces several emerging open‑source projects such as quickjs‑rs, MDX, mdast, Puerts, wasm‑pack, instant.page and txiki.js, and summarizes practical articles on one‑click dark‑mode support and dramatically shrinking Next.js bundle size.
This article walks through the complete redesign of the Linggan VR website, detailing problem discovery, a five‑question analysis, three core design themes, storyboarding, collaborative development, responsive layout choices, technical trade‑offs for 3D animation, SEO considerations, and the final launch.
This article outlines why code review matters, defines the roles of authors and reviewers, details a step‑by‑step CR workflow, sets clear review standards, and explains how disciplined reviews boost code quality and team efficiency in frontend development.
This article is based on the 2021 GMTC Global Frontend Technology Conference's 'New Trends in Mobile Technology' sub-topic, sharing the theme 'VR and 3D Technology Architecture Design and Practice on the Web', and is organized from the original presentation.
This guide walks through adding Sentry to a frontend project—explaining core concepts, Docker deployment, environment‑specific integration, webpack source‑map uploading, alert rule configuration, ownership assignment, webhook/GitLab extensions, and common pitfalls such as URL prefix handling and HTTPS DSN setup.
This article explains Next.js's three pre‑rendering strategies—Server‑Side Rendering, Static Site Generation, and Incremental Static Regeneration—along with their hybrid combinations, illustrating when to use each approach, their benefits, trade‑offs, and providing practical code examples.
This article explains how Taobao’s open technology enables brands to build private‑domain ecosystems using mini‑programs and innovative widget cards, detailing design strategies, core script and rendering engines, business scenario integration, and future evolution to boost performance and efficiency.
The article traces the evolution of web icon implementation—from separate image files and CSS sprites to font icons, then SVG sprites and inline SVG—highlighting performance, maintenance, and accessibility trade‑offs, and describes Baidu’s centralized icon management platform that optimizes, version‑controls, and generates framework‑specific component packages.
This article explains how the CSS :is() pseudo‑class can replace long selector lists, compares it with :where(), shows compatibility across browsers, and provides multiple code examples demonstrating concise, readable selector patterns for styling elements like headings and buttons.
LOCO Design System, created by 58.com, evolved from a poorly named “Basic Interaction” into a comprehensive, code‑driven UI framework covering graphic, interaction, marketing, and motion guidelines, offering three component modes, multimedia suites, and cross‑platform support to enhance collaboration between designers, engineers, and product teams.
