The article analyzes how AI tools like Cursor and Antigravity are reshaping front‑end work, identifying three high‑risk developer profiles—UI translators, CRUD‑focused API workers, and framework‑obsessed syntax masters—and offers concrete strategies for evolving into system designers and AI‑augmented full‑stack creators.
This article explains why both front‑end and back‑end data validation are essential for modern web applications, outlines the specific checks each layer should perform, and describes the combined benefits for security, data integrity, and user experience.
This article showcases a series of real‑world development cases—from implementing a guided inventory task in a Java backend and generating Vue rule code, to writing unit tests, analyzing report data, converting SQL to Hive, debugging startup errors, publishing Maven APIs, optimizing slow SQL queries, and resolving MySQL deadlocks—demonstrating how AI‑driven prompts can accelerate coding, testing, and troubleshooting across multiple domains.
This article traces the evolution of frontend engineering from static pages to modern modular workflows, explains the core responsibilities of bundlers, compares Webpack, Vite, and Rspack in terms of architecture, performance, configuration complexity, and ecosystem, and offers guidance on selecting the right tool for a project.
The article explains how modern CSS is shifting from fixed pixel and rem units to viewport‑based vw and the clamp() function, offering truly fluid, boundary‑controlled layouts that scale smoothly across any screen size while preserving accessibility where needed.
Alibaba has open‑sourced PageAgent, an AI‑driven web assistant that can be embedded with a single script to let end‑users control complex web interfaces via natural language, offering intelligent DOM understanding, security controls, zero‑backend deployment, and multiple integration options.
This article explains common pitfalls of generating unique IDs with timestamps and simple counters in JavaScript, demonstrates why those methods can collide under high concurrency, and shows how the built‑in crypto.randomUUID() provides a standards‑based, cryptographically secure solution.
This article traces the evolution of frontend engineering from static HTML pages to modular development, explains the core responsibilities of bundlers, compares Webpack, Vite, and Rspack in terms of architecture, performance, configuration complexity, and ecosystem support, and offers guidance on selecting the right tool for a project.
This article curates seven noteworthy open‑source projects—from a Linux‑based Windows app runner and a modern admin dashboard to AI‑focused tools like ComfyUI‑Manager, Claude quickstarts, and real‑time Whisper transcription—providing concise descriptions and direct repository links for developers seeking practical resources.
In modern web development, performing data validation on both the front end and back end is essential for security, data integrity, and user experience, and this article outlines the specific checks each side should implement and explains why their combined use is crucial.
This article explains why global error capture for XHR and Fetch requests is essential, shows how to intercept and report those errors, demonstrates injecting B3 trace headers for end‑to‑end tracing, and provides practical solutions for cross‑origin scenarios.
The author demonstrates how TRAE SOLO's AI-powered code generation quickly created a complete music player web page, detailing the initial HTML scaffold, automatic CSS styling, layout fixes, and final deployment, all illustrated with code snippets and screenshots.
This guide explains why Ant Design dropdowns, tooltips, and popovers are often hidden or misaligned, how the default rendering to document.body causes these problems, and demonstrates practical use of the getPopupContainer property to control popup mounting and eliminate visual bugs in React applications.
This article explains why duplicate order requests occur, analyzes the idempotency challenges, and presents practical front‑end and Redis‑based solutions—including button disabling, SETNX locking, and token validation—to ensure only one successful order per user action.
This article walks through a three‑step Vibe‑Coding workflow—structured prompt creation, prompt optimization with DeepSeek, and precise bug‑fix guidance—to automatically generate, refine, and extend a React + TypeScript front‑end for a multimodal RAG system using Trae Solo, covering architecture, streaming chat, and PDF citation features.
This article explains how to replicate Bilibili's subtitle masking effect by using a single mask image and the CSS mask‑image property, providing a complete HTML/CSS demo, visual results, and cautions about its experimental status.
This comprehensive guide explores the core concepts, protocols, implementation steps, and typical use cases of WebSocket, Server‑Sent Events, WebRTC, and traditional polling, comparing their strengths and weaknesses to help developers choose the right real‑time communication technique for web applications.
After two months of using Alibaba’s Qoder AI coding platform, the author explains why it beats alternatives on cost, compliance and maturity, debunks common myths, shares eight hands‑on best‑practice tips, and presents three real‑world case studies that show its impact on backend and frontend development.
This article traces the 20‑year evolution of browser automation—from Selenium’s early scripts to modern AI‑driven agents—highlighting the limitations of each generation, the breakthroughs introduced by Puppeteer, Playwright, and the emerging AI Browser Use, and what the next three years may hold for developers.
This article explains how developers struggling with inconsistent and unclear naming in Java and Vue projects can use a self‑built AI naming assistant—available as a lightweight web app and an IntelliJ IDEA plugin—to instantly generate clean, convention‑compliant identifiers from simple Chinese descriptions.
When debugging a web app, the author discovered that certain emojis occupy more than one character slot in JavaScript strings, revealing that emoji length varies because they are composed of multiple Unicode code points such as variation selectors and zero‑width joiners.
This article introduces the open‑source log‑lottery project, a Vue 3 and Three.js‑based 3D lottery tool, explains its configuration options, core features, tech stack, and provides a step‑by‑step guide to clone, install, run, and deploy the application.
This guide explains common pagination index problems in web apps and provides a step‑by‑step JavaScript solution—including a reusable function, a full HTML component, handling of empty and dynamic data sets, best‑practice tips, and complete code examples—for seamless user navigation.
This article walks through creating a lightweight, cross‑platform desktop chat application using Wails, demonstrating project structure, Go‑to‑frontend API generation, real‑time event communication, SQLite storage, UI implementation with Vue3, image handling, a one‑click dev script, and packaging size advantages.
This article explains why the traditional px unit and media‑query‑heavy approaches struggle on diverse devices and shows how the modern CSS clamp() function can create fluid typography and layout sizes that smoothly adapt from small to ultra‑wide screens without breakpoint jumps.
This article walks through the evolution of a typewriter‑style text animation for AI‑driven search results, from a simple pure‑text implementation using setInterval to a sophisticated Vue component that handles markdown, embedded cards, escape characters, variable typing speed, and DOM diffing to deliver a smooth, interactive user experience.
Using the literal string "null" as a username can silently bypass null checks, create phantom users, pollute databases, and cause debugging nightmares, so this article explains the pitfalls, shows real‑world examples, and provides concrete backend, frontend, and database validation techniques to avoid such bugs.
While the strict equality operator (===) works well for most cases, it fails with special values like NaN and distinguishes +0 and -0 incorrectly; JavaScript’s Object.is() method provides a more precise same‑value equality, correctly handling these edge cases and improving comparisons in Maps, Sets, and other structures.
This article details how, starting from only UI screenshots and no design files, a team used imgcook, an Aone Agent with MCP service, and prompt engineering to automatically generate mobile front‑end code, iteratively improving usability from 40% to 80% and documenting the full workflow.
Ant Design 6.0 and Ant Design X 2.0 were officially released at SEE Conf 2025, introducing smooth migration from v5, raising the minimum React version to 18, adopting pure CSS‑Variables, enabling React Compiler in the build, revamping component semantics, dropping IE support, and adding several new components such as Masonry, enhanced Tooltip, spinner‑style InputNumber, draggable Drawer, and blur‑mask overlays, with a clear upgrade guide and future roadmap.
This article explains why web pages feel sluggish, how React Fiber’s interruptible asynchronous rendering solves the jank problem, and walks through progressively refined implementations—from a basic React demo to a full Fiber renderer with work‑loop scheduling, diffing, and performance optimizations.
Vue 3.6 introduces Vapor Mode, a compile‑time rendering strategy that bypasses the virtual DOM to deliver higher performance and smaller bundle sizes, while still allowing developers to mix it with traditional VDOM where needed.
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.
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 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 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 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.
