This roundup highlights recent front‑end developments, including Nuxt’s open‑source MCP server for native UI rendering, Next.js’s adapter API that simplifies non‑Vercel deployments, Bitrise’s report on soaring React Native usage, plus two new open‑source UI libraries—Wiggle UI and Poopetti.
This article explains how a simple CSS mask‑image technique—using a single mask picture and a few style rules—can replicate Bilibili’s subtitle effect that avoids covering on‑screen characters, includes a complete demo, performance notes, and links to related CSS properties.
This article walks you through creating a visually striking hero section using Three.js, covering prerequisite knowledge, scene composition, nebula background, particle‑based star rings, custom GLSL shaders for animation, planet rendering with displacement maps, and performance‑boosting techniques like anisotropic filtering.
This edition of the Frontend Tech Weekly explores the convergence of efficiency, intelligence, and experience through case studies on TurboUIBuilder’s native visual page construction, deep Android crash‑attribution optimization, AI‑powered coding agents like Coding and Cursor, multimodal recommendation advances, MCP standards, and a curated selection of open‑source projects.
Anthropic’s team built a compact 400‑token Claude Skill that guides the model to generate distinctive typography, themes, animations, and background effects, avoiding generic fonts and layouts, and demonstrated its impact with before‑and‑after UI examples and a simple plugin installation command for frontend developers.
The article explains how modern CSS is shifting from fixed pixel and rem units to viewport‑width (vw) and the clamp() function, offering truly fluid layouts that scale smoothly across any screen size while addressing the boundary issues of vw alone.
This article walks through the complete front‑end architecture and implementation details for integrating Tencent Cloud speech‑to‑text into a React app, covering token authentication, SDK initialization, event handling, cursor‑aware text insertion, character limits, permission handling, error management, and state management with MobX.
The article shares the author’s struggle with inconsistent naming in front‑end Vue and back‑end Java code and introduces a self‑built AI‑driven naming tool—available as a lightweight web app and an IntelliJ IDEA plugin—that instantly generates clean, convention‑compliant identifiers.
enum-plus v3.0 introduces a milestone set of features—including removal of the as const assertion, new enum.named and enum.meta properties, revamped enum.values behavior, additional helper methods, a global configuration API, and a modular plugin ecosystem—while also detailing breaking changes and bug fixes for developers.
The article outlines practical steps for testers to quickly identify whether a problem stems from a code bug or an unstable test environment, covering self‑checks, environment monitoring, network analysis, and professional communication to avoid wasted effort and mislabeling.
This issue of the tech weekly explores the latest breakthroughs where AI meets frontend development, highlighting the launch of the Vike framework, AI-driven code testing and debugging workflows, large-model innovations from major companies, open-source AI CRM and model projects, and practical insights for developers and engineers.
Custom events let developers decouple UI components by broadcasting semantic actions, offering a flexible alternative to direct calls or global state, and improving maintainability, testability, and performance, with best‑practice naming, payload design, bubbling, and cancelable options explained alongside practical JavaScript examples.
This article explains how forgetting to remove event listeners can cause memory leaks, demonstrates proper listener cleanup, addresses closure pitfalls in loops, introduces event delegation, and provides practical debounce, throttle, naming conventions, and debugging techniques for robust frontend development.
This article explains the three main server‑to‑client push techniques—polling, WebSocket, and Server‑Sent Events—detailing their principles, advantages, drawbacks, browser compatibility, and appropriate use cases, and provides complete Node.js and HTML demos for implementing SSE.
This article reviews recent React developments—including the React 19.2 release, new Activity and useEffectEvent APIs, the stable 1.0 release of babel‑plugin‑react‑compiler—and explains how automatic compiler‑based optimizations replace manual memo, useCallback, and useMemo patterns, while also covering KeepAlive challenges and code examples.
The Vue team’s new markdown-exit library rewrites markdown-it in TypeScript, adding async plugin support, built‑in type definitions, and modern build integration, enabling seamless Markdown rendering for VitePress, Slidev, and regular Vue projects with zero‑migration effort.
This article reviews practical Model‑Chat Plugins (MCP) that front‑end developers can integrate into their workflow—covering Figma, Apifox, Context7, and Chrome DevTools MCPs—explaining setup steps, code examples, and how they dramatically improve efficiency and code maintainability.
Spec Kit is an AI‑native specification‑driven development toolkit that treats structured natural‑language specs as the single source of truth, providing end‑to‑end traceability, AI‑native collaboration, and automated code generation to accelerate project setup, planning, and implementation.
This article explains JavaScript static initialization blocks, shows how they simplify shared resources and custom element setup, provides practical code examples, discusses benefits, browser compatibility issues, and offers guidance on when and how to use them effectively.
The article explores the hidden complexities of front‑end work—ranging from HTML, CSS, and JavaScript to modern frameworks, build tools, TypeScript, and UI polish—while contrasting them with back‑end challenges like concurrency, scaling, and system architecture, revealing why both sides are equally demanding for developers.
Next.js, a React‑based frontend framework, combines SPA and MPA advantages through hybrid rendering, offering automatic file‑system routing, flexible SSR/SSG/CSR/ISR strategies, built‑in API routes, image optimization, middleware and edge computing, making it ideal for e‑commerce, CMS, enterprise dashboards and SEO‑critical sites.
This article explains why WeChat Mini Programs hit the 2 MB package limit, analyzes common causes of oversized main bundles, and provides a step‑by‑step guide—including pre‑slimming tactics, subpackage configuration, code examples, and performance tips—to reduce the main package below the limit and improve load speed.
This article walks through setting up Fabric.js on a web page, creating a canvas, drawing rectangles, adding zoom and pan controls, implementing object snapping and alignment guides, and provides complete source code so readers can quickly build an interactive canvas application.
Ant Design 6 drops IE support and adopts CSS variables, enabling smaller CSS bundles, easier theming, streamlined style overrides, conditional container queries, and scoped styling, while outlining practical code examples and compatibility considerations for modern browsers.
This article introduces twenty under‑utilized native browser APIs—such as ResizeObserver, IntersectionObserver, Web Share, and WebCodecs—each explained with a single‑line code snippet, real‑world use cases, compatibility notes, and hidden tricks, showing how they can dramatically improve front‑end productivity and performance in 2025.
This article explains various browser scenarios that indicate a user has left a page, compares the Page Visibility API, beforeunload/unload events, navigator.sendBeacon, and pagehide/pageshow handling, and provides practical code examples and recommendations for reliable detection and data reporting.
This article explains how the new CSS text‑autospace property automatically inserts proper spacing between Chinese characters and Latin letters or numbers, improving readability of mixed‑language web content and offering a simple, standards‑based solution with broad browser support.
While localStorage has long been the default client‑side storage for web apps, its security risks, synchronous blocking, limited capacity, and lack of advanced querying make it unsuitable for modern applications, and IndexedDB emerges as a superior, asynchronous, high‑capacity, secure, and query‑rich alternative, especially when paired with helper libraries like idb, Dexie.js, and localForage.
This article walks through creating a lightweight, framework‑agnostic HTTP request library that extends fetch with features such as request cancellation, automatic caching, retry logic, concurrent control, progress tracking, and intelligent Server‑Sent Events parsing, complete with TypeScript interfaces, CLI scaffolding, and comprehensive testing.
This article introduces fe-js-utils, a highly configurable JavaScript CLI tool that automates the extraction of hard‑coded Chinese strings, generates common and module‑specific locale files, intelligently classifies text, and replaces literals, dramatically accelerating internationalization workflows for front‑end projects.
This edition of the tech weekly spotlights the evolution of front‑end frameworks with Vue 3.6’s experimental Vapor Mode and Next.js 16 Beta, delves into Alibaba’s AI‑native application architecture, shares iOS app size‑reduction tactics from Huolala, and highlights open‑source breakthroughs such as JD’s xLLM, Xiaomi’s audio model, and the Sherpa‑onnx speech engine.
At React Conf 2025 the team announced the creation of the independent React Foundation under the Linux Foundation, launched the stable React Compiler 1.0 to automate performance optimizations, and released React 19.2 with new APIs and tighter integration, signaling a community‑driven future for the library.
The article argues that modern browsers now provide powerful native alternatives for routing, state management, and components, reducing the need for frameworks like React, Vue, and Angular, and explains how emerging standards are reshaping front‑end development, performance, and developer ergonomics.
This article explains why buttons are often clicked repeatedly in web apps, outlines common causes such as user habits, network latency, and bugs, and presents several practical front‑end solutions—including disabling the button, using a flag, CSS tricks, and backend idempotency checks—to prevent duplicate submissions and improve user experience.
LogicFlow, an open‑source TypeScript‑based flowchart editor from Didi, offers high customizability, rich interactions, plugin extensions, and a browser‑side execution engine, enabling developers to quickly integrate diverse diagram types—such as flowcharts, mind maps, ER and UML—into business applications, with simple npm installation and comprehensive examples.
The article explains why the JavaScript eval() function is prohibited by major companies due to severe security vulnerabilities, significant performance penalties, maintainability challenges, and provides safer alternatives and best‑practice recommendations for developers.
This article explains how a simple CSS mask‑image technique can make on‑screen subtitles avoid covering characters, reproducing Bilibili's non‑obstructive caption effect with just an image and a single CSS property, complete with a working demo and usage cautions.
This article explains why the traditional px unit struggles on varied screens, introduces the CSS clamp() function, and demonstrates how to use it for fluid typography and adaptable layout widths, eliminating complex media queries and achieving smooth, responsive designs across devices.
Discover 20 carefully selected VS Code extensions that enhance productivity across coding, reading, project management, and debugging, offering features such as in-editor novel readers, real-time financial trackers, JSON visualizers, workspace color themes, automatic file history, and code spell checking for developers of all levels.
This article explains why front‑end applications need automatic version detection, compares polling, Server‑Sent Events and WebSockets, and offers practical implementation tips and UX guidelines for prompting users to refresh to the latest release.
The article explains the purpose and historical popularity of the document.domain property for cross‑subdomain communication, details its deprecation across major browsers due to security and maintenance concerns, and provides practical migration strategies using postMessage, Channel Messaging API, and proper CORS configuration.
This article explores how a quirky snake game runs inside a browser’s address bar, the technical tricks behind it, and how recent security and API changes in modern browsers have turned such creative hacks into fragile experiments, highlighting the tension between innovation and safety.
This article explains why the ECharts library must be imported with the namespace syntax (import * as echarts) by examining ES Module and CommonJS differences, compatibility strategies, historical reasons, and practical guidelines for choosing the correct import style in frontend development.
This article explains the limitations of Promise.all, demonstrates how Promise.allSettled handles both fulfilled and rejected promises without aborting the whole operation, and shows practical code examples for building more resilient JavaScript applications.
This article explains why the traditional px unit struggles on diverse devices, introduces the CSS clamp() function as a modern alternative, and demonstrates how to create fluid, breakpoint‑free typography and adaptable layouts using simple code examples.
This article walks through using Vibe Coding’s AI‑driven workflow with the Trae tool to automatically generate a Vue 2‑based web management dashboard, detailing how to extract UI design rules, create project‑level prompts, run commands, troubleshoot, and refine the interface with iterative prompts.
This article explains how Vue 3.4's defineModel feature eliminates the boilerplate required for custom v-model implementations, showing side‑by‑side examples of the old three‑line approach and the new single‑line declaration for reusable input components.
This article curates ten essential front‑end tools—ranging from component libraries and SVG icon sets to animation kits and specialized React utilities—explaining what each does, why it’s valuable, and the ideal scenarios for their use, helping developers boost productivity and build polished web experiences.
This article outlines an AI‑driven workflow that streamlines interface documentation, code generation, and realistic mock data creation, dramatically reducing front‑end and back‑end integration time while improving code consistency, development efficiency, and overall software quality.
This article explains how to create a seamless, never‑expired user experience by using a dual‑token authentication system with Access and Refresh Tokens, detailing the workflow and providing a complete Axios interceptor implementation to handle token refresh automatically without disrupting users.
Understanding when users leave or hide a page is crucial for UX, analytics, and performance; this guide explains the Page Visibility API, beforeunload/unload events, the sendBeacon method, and pagehide/pageshow handling, offering code examples and best‑practice recommendations for reliable detection and data reporting.
The article compares the tiny, instantly‑rendered pages of the 1990s with today’s heavyweight React applications, showing how bundle size, JavaScript execution, and rendering pipelines create latency, and explains why modern tools still rely on classic performance principles to stay fast.
This article explains why storing JWT tokens in localStorage is unsafe due to XSS vulnerabilities, compares alternatives like HttpOnly cookies, BFF with cookies, and Service Workers, and offers guidance on choosing the most secure authentication strategy for modern frontend applications.
An in‑depth exploration reveals how setting the crossOrigin attribute on images prevents strong HTTP caching in Canvas operations, detailing the browser's cache‑key composition, the security implications of Canvas tainting, and practical strategies to standardize requests, configure CORS, and optimize performance.
This article walks through extending WangEditor V5 with custom plugins to reproduce the rich, multi‑style layouts found in WeChat public‑account articles, covering the analysis of required HTML/CSS patterns, defining new Slate‑based elements, registering menus, and rendering the styles within the editor.
This article explains why Server‑Sent Events (SSE) can replace heavyweight WebSocket connections for one‑way data push scenarios such as dashboards, news feeds, and notification systems, highlighting SSE's simplicity, lower overhead, and native browser support.
The article explores the emerging zero‑bundle paradigm that shifts rendering to the server and loads JavaScript on demand, reviewing tools like HTMX, Qwik, and Marko, and explains why this approach is becoming essential for faster, lighter web experiences in 2025.
This article details how integrating the AI coding assistant Cursor into a membership‑system frontend project increased development efficiency by 21%, reduced a 188‑hour task to 149 hours, and outlines practical methods for AI‑generated routing, UI‑to‑DOM conversion, mock data creation, code refactoring, and the limits of AI assistance in complex interactions.
The article lists several front‑end and back‑end frameworks that are no longer worth learning, explains why they have faded, and offers three concrete criteria—job demand, ecosystem activity, and problem‑solving ability—to help developers decide which technologies to invest in.
This article explains the hidden pitfalls of using JSON.parse(JSON.stringify) for deep cloning in JavaScript—such as circular references, loss of special types, prototype chain erosion, and broken collections—and introduces the native structuredClone API as a more reliable solution.
This article examines the shortcomings of the traditional setTimeout API and presents seven more reliable JavaScript timing techniques—including requestAnimationFrame, setInterval, requestIdleCallback, Web Workers, Promise/async‑await, the Web Animations API, and Intersection Observer—each with code examples and key advantages.
The Vue Official VS Code extension 3.0.7 now offers three previously paid features—template interpolation highlighting, focus mode, and reactivity visualization—for free, with simple JSON settings to enable them and boost developer productivity.
This edition of the Zhuanzhuan Frontend Weekly curates five insightful articles covering AI‑empowered frontend development, log system performance optimization, multi‑agent planning enhancements, AI‑driven workflow improvements, and an exclusive interview with an OpenAI researcher, offering practical techniques and forward‑looking perspectives.
This article examines the security, performance, and capacity limitations of localStorage and explains how IndexedDB offers asynchronous operations, larger storage, stronger security, and advanced query capabilities, while also recommending helper libraries to simplify its use.
Discover how to rapidly launch Vue3 applications using create‑vue, Nuxt, uni‑app, electron‑vite, and essential libraries like Vue Router, Pinia, VueUse, VeeValidate, UnoCSS, and UI frameworks, while also learning debugging, testing, and static site generation techniques for modern frontend development.
This article explains why modern Webpack applications still suffer from stale browser caches, analyzes the shortcomings of typical cache‑busting tactics, and provides a complete Nginx configuration that ensures HTML never caches while static assets with hashes are cached indefinitely.
Learn three practical techniques—state lock flags, disabling submit buttons, and function throttling—to reliably prevent duplicate form submissions caused by rapid clicks, reducing server load and ensuring a smooth user experience, complete with JavaScript code examples and implementation tips.
This article details how a modern frontend logging system was dramatically improved by implementing intelligent database cleanup, asynchronous module loading, dynamic JSZip imports, log queue throttling, and Rollup build‑time fixes, resulting in a much smaller bundle and smoother user experience.
The article explains Focus Chain’s core workflow for task lifecycle management, detailing task creation, execution, cross‑context persistence, and smart reminder features, and includes the parseCurrentTodoInfo parsing function, the ChecklistRenderer component, configuration protocols, and file‑editing integration, illustrating a comprehensive frontend solution for real‑time task tracking.
This article explores various techniques—from CSS animation to WebGL shaders—for rendering rain in a browser, analyzes the underlying algorithms, provides GLSL and Three.js code examples, and discusses performance optimizations and extensions such as snow effects.
This article presents twelve practical methods—including BEM naming, CSS Modules, Shadow DOM, @scope, custom properties, and dynamic generation—to dramatically reduce CSS style collisions and achieve reliable style isolation in modern front‑end projects.
This article explores how AI‑enhanced IDEs can transform front‑end development by streamlining requirement analysis, technical design, UI automation, code refactoring, test generation, and code review, offering concrete prompts, workflow tips, and best practices to dramatically improve efficiency and code quality.
This article walks through setting up an ECharts combo chart, then compares html2canvas and snapdom for one‑click screenshot and download, covering installation, core code, common pitfalls, performance benchmarks, and scenario‑based selection advice to help developers choose the right tool for reliable chart export.
This guide outlines twelve frequent mobile‑web problems—from 1 px borders and 300 ms click delays to safe‑area padding and image‑loading performance—and provides concise CSS or JavaScript solutions that developers can apply instantly to improve user experience across devices.
This weekly tech roundup highlights Meituan’s dynamic container performance breakthrough, Huawei’s Mate X5 foldable adaptation, ByteDance’s Rspack 1.5 features, AI‑driven automation advances, MQTT and Crush terminal tools, Alibaba Cloud’s AI platform milestones, and practical guides for performance optimization and Chrome extension development.
Promise.try lets you wrap any function—synchronous or asynchronous—in a Promise, eliminating the need for scattered try‑catch blocks and providing a cleaner, more consistent way to handle errors in JavaScript code.
This tutorial explains how to build a 3D card tilt effect that follows the mouse cursor by stacking HTML elements, applying CSS perspective and rotation, calculating rotation angles from mouse offsets, and updating CSS variables with JavaScript, complete with code snippets and a live demo.
A front‑end engineer investigates a client’s complaint that arrow‑key scrolling fails on a page, discovers the issue stems from Ant Design’s Tabs component assigning tabindex=0 to TabPane elements, which hijacks focus, and outlines how proper tabindex usage restores expected keyboard navigation.
The article explains the meaning of null in programming, why users registering with "null" can crash backend logic, and offers practical front‑end validation, back‑end safeguards, and logging strategies to prevent such human‑driven edge cases from breaking applications.
The article explains the pitfalls of manually concatenating URLs with encodeURIComponent, introduces the modern URL and URLSearchParams APIs, and demonstrates how these objects simplify encoding, adding, modifying, and deleting query parameters safely and cleanly in both browsers and Node.js environments.
The article explains why DOM screenshot tools like html2canvas are slow, presents benchmark data showing snapDOM being 30‑130 times faster across various scenarios, details snapDOM's native‑rendering implementation using SVG foreignObject, and provides step‑by‑step usage examples.
The article explores three unconventional programming projects—a canvas‑based fish‑swimming demo, a six‑year‑long wooden pixel display driven by Raspberry Pi, and a JavaScript recreation of the vintage Lisa GUI as a web‑based operating system—highlighting how personal curiosity fuels innovation despite limited commercial value.
This article compares polling and WebSocket approaches for delivering real‑time updates, explains their advantages and drawbacks, provides React and Node.js code examples, and offers practical guidance on selecting the appropriate method based on task frequency and user experience requirements.
Discover how using the AbortController API to manage event listeners can eliminate memory leaks, simplify cleanup code, and improve maintainability across vanilla JavaScript, drag‑and‑drop, and React projects, replacing the cumbersome removeEventListener pattern with a single abort call.
This article traces the history and reasons behind JavaScript’s module formats—from early AMD and UMD to Node’s CommonJS and the modern ECMAScript modules—explains migration challenges, tooling, testing nuances, and best practices for managing dual builds in contemporary projects.
This digest covers Oracle’s denial that “JavaScript” is a generic term, recent TC39 proposals, Vercel’s native support for Hono, a Vue‑React hybrid called Veact, V8’s JSON.stringify speed boost, CSS scroll‑spy tricks, masonry layout techniques, and an AI‑generated Space Invaders game.
When fetching multiple APIs concurrently, Promise.all aborts all results if any request fails, leading to poor user experience, whereas Promise.allSettled returns outcomes for every promise without rejecting, allowing graceful handling of partial failures and more robust UI rendering.
This article explains the hidden pitfalls of JavaScript's Object.assign—mutating the target object and performing only shallow copies—illustrates the bugs they can cause in modern frontend frameworks, and shows how the spread operator (or structuredClone) provides a safer, more readable alternative.
This article provides an in‑depth technical walkthrough of the iCart shopping‑cart drag‑and‑drop feature, detailing the architecture, grouping rules, collision handling, non‑droppable logic, hover calculations, placement callbacks, performance optimizations, and future improvements for a smooth, stable user experience.
This tutorial walks through creating a eye‑catching like‑button effect using only CSS and a bit of JavaScript, covering parabolic particle motion, an optional oblique bounce, batch generation of random emojis, a +1 number animation, and a brief note on canvas alternatives.
This newsletter curates five technical articles covering AI‑enhanced frontend productivity, a comparative deep dive into tree shaking across major bundlers, innovative AI code generation for e‑commerce frontends, a rapid AI‑assisted component refactor, and efficiency gains in ad‑monitoring development.
This article details how the open‑source SREWorks frontend evolved through a monorepo restructure, selective use of Webpack and Rollup, remote component loading, and build optimizations to achieve a more extensible, plug‑in‑friendly low‑code platform for cloud‑native operations.
The article details the open‑source release of Taro on HarmonyOS, explaining its architectural evolution, performance optimizations, multi‑platform development workflow, and real‑world results from JD’s HarmonyOS app, while outlining future roadmap and ecosystem expansion.
This article explores the evolution of low‑code front‑end development, detailing the sw‑frontend architecture, visual designer, component system, dynamic routing, form factories, data handling, and future roadmap for building efficient, serverless, cloud‑native operations interfaces.
This article details the evolution, architecture, performance optimizations, and open‑source progress of Taro on HarmonyOS, illustrating how a unified front‑end framework enables efficient multi‑platform development and delivers native‑level performance for complex applications.
This article demonstrates how to create a complete real‑time message broadcasting system using Spring Boot 3's reactive Server‑Sent Events (SSE) and WebFlux, covering the core Sink component, backend implementation, and a simple front‑end page to display live updates.
The article introduces easy.ui's honeycomb architecture that splits a monolithic frontend into an Express gateway, independent Nuxt sub‑projects, and a shared component library, detailing core code, development workflow, tech choices, pitfalls, and a future roadmap.
The article explains how CSS has finally added native Masonry layout support, detailing its history, the two syntax options (display: masonry and grid-template-columns: masonry), performance benefits, practical code examples, and current browser support status.
This article explains why caching an array's length in a JavaScript for‑loop is often unnecessary for standard arrays, but can cause serious performance issues with live DOM collections, and shows the proper way to handle both cases efficiently.
This article walks through building a realistic typing‑effect dialog box using CSS keyframe animation, JavaScript timers, requestAnimationFrame optimization, and a Vue 3 directive that splits long text into lines for smooth multi‑line display while minimizing DOM updates.
