This article analyzes common misuse of Vue 3's watch for handling both synchronous and asynchronous updates, demonstrates how excessive watchers create spaghetti code, and shows how refactoring with computed can streamline logic, improve maintainability, and help new team members onboard faster.
This article explains the Inversion of Control (IoC) principle, why it matters for growing front‑end applications, and demonstrates how to refactor a simple App component using dependency injection and a module registration system, turning the App into a container that manages its dependencies rather than directly instantiating them.
This article explains the problems of using deprecated deep combinators in Vue scoped CSS, shows concrete code examples, walks through the Vue compiler’s AST transformation, demonstrates the correct :deep() syntax, and proves that nested :deep selectors are not supported.
This article explains how to use Vue 3's ref and shallowRef for reactive state, demonstrates one‑way data flow between parent and child components via props and events, and introduces a custom useRefState composable that mimics React's useState for cleaner state management.
This article explains what Hooks are, demonstrates how to use them in Vue 3, and guides readers through building reusable custom Hook functions such as useMouse and useTable, covering pagination, parameter handling, and best practices for clean, maintainable frontend code.
This article explains how React Hook Form, a React‑hooks‑based library, reduces form boilerplate, improves readability, and optimizes performance through built‑in validation, smart dependency tracking, and minimal re‑renders, providing code examples and a deep dive into its register implementation.
This article compares Flexbox and CSS Grid for creating grid‑style, backend admin, and responsive layouts, provides complete HTML/CSS code examples for each approach, discusses compatibility issues, and explains when to choose one technique over the other.
This article explains the fundamentals of the same‑origin policy, the security risks it mitigates, and how CORS and preflight requests work in browsers, illustrating the concepts with diagrams, header details, and a complete request flow chart.
The article explains how treating UI as composable components, avoiding tangled conditional rendering, and using early returns can reduce cognitive load, improve type inference, and make React code easier to extend and maintain.
To meet soaring marketing‑tool demand with limited front‑end staff, the team built a three‑layer, micro‑frontend architecture—page container, scenario template, and business customization—augmented by a plugin‑style micro‑kernel, enabling over 50 % faster development, consistent UI, and configurable blocks, while acknowledging added complexity and performance trade‑offs.
This article walks through creating a Vue component library using Vite, reorganizing the project structure, configuring aliases, writing reusable components with a global install helper, setting up routing, customizing Vite build outputs, generating TypeScript declarations, and documenting the library with VitePress.
Discover 20 practical JavaScript techniques—from using let/const and destructuring to async/await and debouncing—that help you write more concise, efficient, and maintainable code while improving overall development workflow.
This article analyzes the reasons for preferring EventSource instead of WebSocket in a browser‑based ChatGPT chat system, covering protocol basics, system characteristics, advantages, code examples, performance trade‑offs, and future extensibility.
To simplify large‑scale Vue upgrades such as Vue 2→Vue 3, Webpack 4→Webpack 5, or migration to Vite, the author presents an automated AST‑based migration scaffold that parses JavaScript, Vue, and style files, applies transformation rules with GoGoCode and PostCSS, and rewrites code, reducing manual effort and error risk.
This article details the design and deployment of an intelligent alert attribution system for Ctrip Hotel's front‑end, describing the background challenges, the unified data pool, weighted alert rules, three attribution algorithms, achieved improvements in accuracy and troubleshooting speed, and future enhancement plans.
This article details the design and evolution of a low‑code platform used for electronic menu and TV screens in retail stores, covering architecture diagrams, component decomposition, material market, plugin system, schema compatibility, data fetching optimizations, and resource caching strategies to improve scalability and stability.
Bilibili’s front‑end team built a custom “mirror” SDK and full‑stack monitoring platform that captures JavaScript and resource errors, detects white‑screens, logs user behavior offline, routes data through Kafka‑ClickHouse pipelines to visual dashboards, and provides one‑click alerts, now serving over 1,700 projects across 85% of business lines.
This article explains how JD Financial's dynamic UI framework uses standard Flex layout (with Yoga as a cross‑platform engine) to build responsive container and item structures, details common Flex properties, list and absolute layouts, view visibility controls, and provides practical troubleshooting guidance for complex layouts.
Front‑end development transforms a URL request into a rendered page by downloading HTML, CSS, and JavaScript, building the DOM and CSSOM, executing scripts, constructing a render tree, then performing layout and paint, while modern workflows use component frameworks, build tools for bundling and minification, versioned or hashed assets with long‑term CDN caching, and non‑overlapping gray‑release deployments to ensure smooth updates.
This article explains how to build a Vue.js admin interface with role‑based access control, covering ACL vs. RBAC concepts, dynamic route generation, layout composition, Pinia state management, custom permission directives for page and button visibility, and alternative v‑if based checks.
Drawing on a decade of front‑end experience, the article explains why many developers mistakenly view front‑end work as simple, explores the hidden complexity of modern web technologies, cross‑platform development, and the importance of strong fundamentals, while urging respect for the role.
This article explains the concept of technical debt, its various classifications, the distinct impacts on front‑end and back‑end development, the multi‑dimensional cost consequences, and practical governance methods—including identification, prioritisation, repayment planning and preventive measures—to help teams manage and reduce debt effectively.
This guide outlines the comprehensive technology stack a full‑stack developer needs, covering front‑end frameworks, back‑end languages and frameworks, databases, mobile development, cloud platforms, UI/UX tools, and DevOps practices for building modern applications.
This tutorial explains how to integrate the open‑source ECharts library with a PHP backend to produce interactive statistical charts that include custom labels and legends, providing step‑by‑step code examples for data preparation, HTML markup, and JavaScript configuration.
This article walks through building a 1v1 WebRTC audio/video call demo with Vue, explains the underlying PeerConnection setup, media control, and datachannel messaging, then expands to discuss real‑world challenges, adaptive solutions, and compares Mesh, SFU, and MCU multi‑party architectures.
This article walks through creating a basic 1v1 WebRTC audio‑video demo with Vue, then expands to detailed code explanations for call setup, media handling, data channels, and explores multi‑party architectures (Mesh, SFU, MCU), discussing their trade‑offs, deployment challenges, and practical solutions for production environments.
This article explains how the new global function structuredClone() provides a reliable, fast, and simple way to deep‑clone JavaScript objects—including nested structures, circular references, and undefined values—outperforming traditional JSON or manual recursion methods.
This article provides a comprehensive guide to using Vue Flow—a lightweight Vue 3 component library—for building dynamic flowcharts, covering installation, core concepts such as nodes, edges and handles, theme customization, composables, controlled flow demos, and detailed code examples.
Modern JavaScript/TypeScript development should default to using const instead of let, because const enforces immutability, improves readability, and avoids bugs, while let is reserved only for truly mutable cases such as loop counters, with tools like ESLint’s prefer‑const rule helping enforce this practice.
Rsbuild 1.0, built on the high‑performance Rspack engine, offers a lightweight, easy‑to‑use TypeScript‑friendly API, dramatically faster dev/startup times, fewer dependencies, and a rich plugin ecosystem, positioning it as the most efficient modern frontend build tool compared to CRA, Vite, and Rspack CLI.
This comprehensive guide explains the value, classifications, styles, principles, and step‑by‑step workflow of icon design, offering practical standards and tips for creating consistent, recognizable, and brand‑aligned icons in contemporary user interfaces.
This article explains the motivation, research, architecture, implementation details, lifecycle hooks, configuration options, multi‑framework support, and future directions of AIGCDesign, a cross‑platform AI component library built with Taro, React, Vue and native technologies, including code examples and streaming techniques.
The article introduces AIGCDesign, a cross‑platform frontend component library that leverages AI generation capabilities, explains its motivation, research of existing solutions, architectural layers, lifecycle hooks, configuration examples, multi‑framework support, business integration cases, and future stream‑processing enhancements.
JSON Hero is a lightweight, feature‑rich tool that offers multiple visualizations of JSON data, easy local installation, direct web usage, searchable tree structures, and shareable links, making JSON inspection and editing faster and more intuitive for developers.
This article explores how to make text color automatically adapt to background brightness and how to let users freely customize theme colors while ensuring sufficient contrast, using JavaScript libraries, CSS blend modes, relative color functions, and contrast‑adjustment algorithms.
Babel is a micro‑kernel JavaScript transpiler that parses source code into an AST, lets plugins and presets transform it, and generates backward‑compatible code with optional source maps, while its runtime helpers, polyfills, and close alignment with the evolving ECMAScript specification ensure modern syntax works across legacy environments.
This article analyzes the challenges of maintaining high‑traffic detail pages across multiple business teams and proposes a three‑layer, dependency‑injection‑enabled framework that ensures reusability, flexibility, and stability while supporting fast onboarding and robust quality assurance.
This article explains the decorator pattern and how Aspect‑Oriented Programming (AOP) can be used in JavaScript to dynamically extend object behavior, provides classic and Vue‑based code examples, discusses advantages and drawbacks, and outlines practical scenarios for applying decorators in front‑end development.
This article explains the fundamentals of the Same-Origin Policy, its security implications for DOM, data, and network access, and provides a detailed walkthrough of CORS, including simple requests, preflight requests, and handling of credentials to protect web applications.
The Daily Must‑Grab mini‑program order system evolved from a DX XML‑based UI to a React‑like Rax framework and finally to a native Ao Chuang solution, delivering cross‑platform support, smaller bundles, faster launches, better async handling, and extensible plug‑in architecture while leveraging Taobao’s transaction core.
The ZhuanZhuan Frontend Weekly curates five recent technical articles—including a Rust‑based JavaScript bundler, Airbnb’s seamless React upgrade, HarmonyOS ArkUI framework, a JavaScript Super Mario game, and the Interface Segregation Principle in React—providing concise English summaries and links for developers.
This guide explains why the author chose VitePress for a personal blog, walks through creating a VitePress project, configuring essential files, and deploying the site to GitHub Pages using a GitHub Actions workflow, including troubleshooting tips for build failures and CSS issues.
This article presents a detailed TypeScript learning roadmap covering fundamental concepts, data types, classes, inheritance, generics, modules, and advanced features, organized into two chapters with multiple sections to guide learners from installation to practical application.
This article provides a comprehensive front‑end guide to WebRTC, covering its core concepts, differences from WebSocket, browser compatibility, typical use cases, advantages and drawbacks, and detailed usage of key APIs such as getUserMedia, getDisplayMedia, RTCPeerConnection, and RTCDataChannel with practical code examples.
This course provides a comprehensive guide to developing rich WeChat Mini Program applications by teaching learners how to use and customize a wide range of built‑in and extended components, covering fundamentals, UI design, data binding, and practical project implementation.
This roundup highlights the latest releases and insights across the front‑end ecosystem—including React Native 0.75, Nuxt Scripts, the 2024 State of CSS survey, a SourceMap CLI tool tutorial, the evolution of hybrid mobile apps, Vue 3 Composition API animation, lessons from Japan’s lost decades, user‑centric documentation practices, and systematic approaches to front‑end stability—plus curated recommendations for deeper exploration.
This article describes how to create a feature‑rich, extensible React admin panel by implementing a convention‑based routing system, unified navigation with menu and draggable tabs, a Redux‑centric state management strategy, and a modular plugin architecture, while also integrating MUI, Next.js, and AI‑assisted code generation.
This article explains how to combine duplicate API calls, ensure only the latest request result is displayed, and control concurrent request limits in JavaScript/React applications, providing practical code examples and execution flow analysis.
This article explains the complete browser navigation flow from URL entry to page rendering and provides practical optimization strategies for DNS resolution, HTTP protocols, CDN usage, and front‑end resources such as HTML, CSS, JavaScript, images, and fonts to improve performance and user experience.
This article explains the complete browser navigation process—from URL entry, DNS resolution, TCP and HTTP communication, to resource loading and page rendering—and presents practical optimization techniques such as DNS prefetch, HTTP/2, CDN usage, and HTML, CSS, JavaScript, and image improvements to boost frontend performance.
This article explains why using a JavaScript framework isn’t always necessary, outlining five practical scenarios—simple projects, pure HTML/CSS solutions, modern ES6 features, creative freedom, and HTMX—that allow developers to build efficient web applications without added complexity.
The article details how Taobao’s AI team automated repetitive UI tasks for B2C front‑end development, achieving a 15 % efficiency gain across five projects, and outlines key challenges—prompt cost, low OCR accuracy, hallucinations, excess nodes, and customization variance—along with practical solutions such as a dedicated evaluation platform, OCR translation, model upgrades, prompt segmentation, output simplification, and a reusable component library.
This article examines the challenges of front‑end event tracking testing, compares popular tools, and presents a custom real‑time validation solution using WebSocket and gateway integration to improve accuracy and efficiency across diverse platforms.
This article explains how to create Apple‑style scroll‑driven line and list‑item animations in a Vue3 website by using a normalized scroll formula, adjusting it for specific sections, and applying a throttle algorithm to keep the animations smooth and performant.
This article introduces V0, an AI‑driven tool from Vercel that transforms natural‑language prompts or design screenshots into ready‑to‑use React, HTML, and Tailwind CSS code, compares it with other front‑end solutions, and provides step‑by‑step guidance on creating, editing, and exporting components.
This article details the design and implementation of a single QR code page that directs users from WeChat, Alipay, and Douyin to appropriate mini‑program pages, covering community joining, user identification via unionid, web authorization, mini‑program launch, and responsive CSS sizing with Taro.
This article explains how modern frontend applications use comprehensive monitoring, real‑time alerts, performance metrics, custom reporting, and scheduled inspections to maintain system stability, improve user experience, and proactively address errors across web, mini‑program, and native platforms.
This article describes how a large enterprise front‑end team implements real‑time monitoring, scheduled inspections, alert strategies, performance metrics, error handling, custom reporting, and mobile/native monitoring to ensure system stability, improve user experience, and continuously optimize application performance.
This article explains how to achieve paginated print preview and PDF generation in a Vue 3 application by using vue3‑print‑nb for on‑demand printing, html2canvas to capture DOM elements as images, and jsPDF to compose multi‑page A4 PDFs with custom headers, footers, and spacing.
When a new ChatGPT web release triggers a "Oops, an error occurred! (Try again)" message on older browsers, the article explains how the missing Array.prototype.toSorted() method causes the failure and guides readers through creating a Tampermonkey user script that injects a polyfill to restore functionality.
This article explains the history, key technologies, benefits, drawbacks, and practical recommendations for adopting a frontend‑backend separation architecture, especially for startups seeking scalable, maintainable, and efficient web applications.
This tutorial demonstrates how to build a four‑level province‑city‑district‑town address cascade selector using a custom dialog in Huawei HarmonyOS, covering preparation, custom dialog creation, component communication, logic implementation, and data handling with complete code examples.
This article explains how to use Workbox to simplify Service Worker development, covering installation via CLI or CDN, core concepts like caching strategies, route matching, and custom handlers, and provides practical code examples to improve offline support and performance for web applications.
This article traces the historical evolution of web application architecture—from tightly coupled JSP/Servlet models through semi‑separated Ajax‑driven approaches to fully separated SPA and Node.js‑mediated full‑stack designs—highlighting the motivations, drawbacks, and benefits of each stage for modern front‑end development.
This article explains how to correctly use React's useRef hook with TypeScript across several real‑world scenarios, compares different initialization patterns, highlights typical mistakes with useLayoutEffect, and provides best‑practice solutions for forwarding refs, merging refs, and exposing imperative handles.
This article showcases a React‑based Windows 11 clone web app, detailing its interactive desktop, start menu, taskbar, draggable windows, responsive design, and the modern tech stack used to recreate core OS features for educational purposes.
The July 14 DeWu tech salon showcased how large language models are reshaping frontend development, featuring insights from NetEase, Alibaba, and DeWu experts on AI‑driven low‑code platforms, intelligent coding assistants, and practical implementation strategies, with over 20,000 online viewers.
This tutorial demonstrates how to build a realistic snowfall animation on a web page by using CSS radial gradients for snowflakes and a JavaScript class that generates, styles, and animates thousands of snow particles with requestAnimationFrame, including advanced enhancements like speed variation, swing motion, 3D perspective, and rain integration.
This article explains practical principles—action orientation, user awareness, and assuming public visibility—to help front‑end developers and other professionals produce clear, actionable, and durable work documents such as reports, plans, and post‑mortems.
This article analyzes how JavaScript’s rich functionality, expanding ecosystem, and single‑language workflow have reshaped web development, outlines the essential front‑end and back‑end skills for full‑stack developers, and explores the career advantages and future trends such as WebAssembly.
JSON Hero is a lightweight, user-friendly tool that offers multiple views—column, tree, and raw JSON—enhanced features like automatic content preview, search, and shareable links, with optional local installation via npm or instant online use by dragging files into its web interface.
A curated roundup of the latest frontend and AI development resources, covering React 2023 insights, new CSS font-size-adjust support, Astro 4.12 release, zero‑width character pitfalls in phone validation, the relevance of global state, form‑design strategies, and AI‑assisted coding workflows.
This article explains how to create a reusable Vue calendar component by designing its data structure, generating a 7×6 date matrix, implementing navigation props and events, and applying customizable styles, providing complete code examples for template, script, and scoped CSS.
This comprehensive guide explains what popups are, distinguishes modal and non‑modal varieties, outlines essential design principles for titles, content, buttons, and overlays, and provides a step‑by‑step workflow for selecting and implementing the right popup type to improve user experience.
This article explains how to design and implement a canvas‑based editor for customizable store promotional materials, covering requirement analysis, system architecture, canvas library selection, component initialization, event handling, drag‑and‑drop, form integration, and future enhancements.
This tutorial walks through the fundamentals of building ArkTS components for HarmonyOS, covering project setup, key decorators like @Entry and @Component, styling with @Styles and @Extend, handling events, managing properties and state, conditional rendering, functional components, and slot implementation.
This article explains how to prevent multiple simultaneous token requests in a web application by using a custom repeatOnce function that caches the token in localStorage and coordinates pending calls through an event emitter, ensuring only the first request fetches the token while others wait for its result.
Swizec Teller argues that in most React projects the useCallback and useMemo hooks are unnecessary, explains how they work, shows common pitfalls, and provides concrete alternatives for writing cleaner, more efficient components without over‑optimizing.
This extensive article presents a systematic approach to front‑end stability, covering observability systems, full‑chain monitoring, high‑availability design, performance management, risk governance, process mechanisms, and engineering practices to ensure reliable user experiences and business continuity.
This article describes how a legacy Vue2‑based cloud management system was profiled with Lighthouse and webpack‑bundle‑analyzer, then optimized through static asset compression, dead‑code removal, tree‑shaking, code‑splitting, async loading and server tweaks, achieving a three‑fold reduction in bundle size and a 13.6‑second improvement in first‑contentful‑paint time.
This article explains the same‑origin policy, its role in browser security, how CORS enables controlled cross‑origin requests, the distinction between simple and preflight requests, credential handling, and best practices for configuring related HTTP headers.
The article recounts a JD.com front‑end engineer’s evolution from a fresh graduate to a technical leader, highlighting practical advice on mentorship, coding habits, project ownership, innovative ad‑tech solutions, and the transformative role of AIGC in modern front‑end development.
The article describes Gundam, Kuaishou's front‑end engineering scaffold, its goals of unified standards and efficiency, the practical challenges faced during the New Year Eve project, and the future direction of engineering standardization and automation through a layered engineering funnel approach.
The article showcases a collection of JavaScript snippets—ranging from simple if‑statement drills and password handling tricks to messy loop structures and formatting quirks—illustrating typical beginner mistakes and how to spot and improve them.
This article walks you through the fundamentals of Chrome extension development, covering its advantages, required prerequisites, manifest file creation, core components such as popup pages, background scripts, content scripts, and context menus, complete with practical code examples and configuration details.
This article introduces a lightweight admin dashboard template built with Vue 3.4, Element‑plus, and Vite, detailing its project structure, technology stack, coding standards, configuration files, component integrations such as UnoCSS, mock.js, canvas, SVG and WangEditor, and provides step‑by‑step commands for development, linting, formatting, and production build.
Svelte 5 launches with fine‑grained universal reactivity, a powerful Signals system, a slimmer compiler output, and Rich Harris’s enthusiastic take on React Server Components, promising a faster, smaller, and more composable framework for modern web developers.
Chrome Canary’s experimental Gemini Nano feature enables local execution of a large language model in the browser, offering easy deployment, hardware acceleration, offline use, and a Prompt API with createTextSession and streaming calls, plus step‑by‑step instructions and a demo for in‑page translation.
This article introduces ten lesser‑known but highly useful VSCode extensions—ranging from workspace theming and comment coloring to TODO management, Git visualization, partial diffs, project switching, console logging, and Zen mode—to help front‑end developers dramatically improve productivity and workflow.
This article explains the fundamentals of the same‑origin policy, its impact on DOM, web data and network requests, and provides a detailed overview of CORS, simple requests, preflight requests, and the necessary response headers to securely enable cross‑origin communication in modern browsers.
Front‑end developers must embed unique page identifiers in URLs, capture incoming source parameters, and propagate them through outbound links so that traffic, source, interaction and conversion metrics can be automatically recorded by the SDK, enabling data‑driven product optimization and business insight.
The article details how the author leveraged Doubao MarsCode's AI‑powered online IDE to quickly set up a Vue3 project, import a git repository, switch Node versions, install dependencies, develop a paginated carousel component with full code snippets, and evaluate the platform's strengths and weaknesses.
Lexical is a highly extensible, framework‑agnostic JavaScript text‑editing library created by Facebook, offering a lightweight core, plugin architecture, custom nodes, themes, and state management for building rich‑text, collaborative, and native‑like editors across web applications.
This article explains why browsers enforce same‑origin policy, how cross‑origin requests affect front‑end and back‑end communication, and presents six common solutions—including JSONP, Spring @CrossOrigin, WebMvcConfigurer, CorsFilter, Nginx proxy, and other advanced techniques—complete with code examples.
The project consolidates three separate detail‑page implementations into a single, reusable framework that separates business, component, and framework layers, employs dependency‑injection and scoped lifecycles to support diverse scenarios while ensuring stability through comprehensive logging, monitoring, and staged gray‑release testing.
The article shows how to build a smooth, infinite 3D carousel using only CSS by sharing a common motion path, staggering items with negative animation delays, defining keyframes (including optional pauses), and optionally leveraging @property and @container style for smoother or declarative control, while noting browser compatibility and hover‑pause tips.
This article explains how to set up Tailwind CSS in a Next.js project, addresses dynamic class name problems, class‑priority conflicts, and provides solutions using tailwind‑merge, clsx, and class‑variance‑authority, along with useful tools and VSCode extensions for smoother development.
JSON Hero is a lightweight, user‑friendly JSON viewer that offers column, tree, and raw JSON views, automatic content preview, and easy sharing; the article explains its features, provides a local installation guide with Git and npm commands, and shows how to use it directly in the browser.
The author recounts their recent journey into React, covering required fundamentals, challenges with TypeScript and input handling bugs, and how expert guidance clarified React's data‑driven design, ultimately improving their understanding and development approach.
This article explains why browsers limit concurrent HTTP requests, demonstrates the limitation with a test example, and provides a reusable PromiseLimiter class that queues and throttles asynchronous calls to keep the number of simultaneous requests under a defined threshold.
