This article explains how React refs work with native elements, class components, and function components, demonstrates using useRef, forwardRef, and useImperativeHandle, and discusses the benefits, drawbacks, and alternative patterns for exposing component instances and DOM nodes.
The team refactored a high‑traffic Vue2 detail page to Vue3 using Clean Architecture, separating entities, use‑cases, adapters, and framework layers, while employing AST‑based tooling, comprehensive unit/E2E/visual tests, and a gray‑release strategy, resulting in reduced duplication, better test coverage, and a reusable migration pipeline.
This article explains how to build a custom React @mention input component that highlights mentioned users, treats the whole @username as a single deletable unit, tracks cursor position for a floating selector, and returns both the plain text and the list of mentioned users to the parent component.
This newsletter curates recent frontend news and deep‑dive articles covering the State of JavaScript 2023, large‑model trends, OpenAI's acquisition of Multi, RPA debates, building a modern JS framework, CSS importance, React's diff algorithm, a UX design book, plus practical tips on Taro, MQTT and data‑center interfaces.
This tutorial demonstrates how to create an interactive Echarts map that supports drill‑down to county level and back navigation using Vue 3, vue‑echarts, and Vite, covering data acquisition, option configuration, event handling, and full component code.
This article explains the fundamentals of CSS variables, how to define and use them—including default values, nesting, media queries, and JavaScript updates—while showcasing practical scenarios such as theming, responsive design, code reuse, and compatibility across browsers.
This article details how to quickly create a web‑based 3D parking‑lot demo with scene modeling, dynamic lamp markers, interactive controls, editing, heat‑map overlay, and path‑planning using the esMap visualization SDK, including full code snippets and deployment steps.
This tutorial explains how to convert ANSI escape sequences used for colored logging into HTML so that log output can be securely viewed with proper colors directly in a web browser, including server setup, code examples, and library usage.
Huawei's HarmonyOS design guide outlines UI principles for 2‑in‑1 devices, covering interface highlights, window framework, size specifications, column structures, and responsive rules to help developers create efficient and immersive applications across tablet‑laptop hybrids.
This article examines why TypeScript has become essential for complex web applications, outlining its benefits such as improved maintainability and early error detection, the challenges developers face, and the language's future impact on the web development ecosystem.
This article outlines five clear scenarios—simple projects, sufficient HTML/CSS, modern ES6 features, desire for creative freedom, and HTMX alternatives—where using a JavaScript framework adds unnecessary complexity and can be safely avoided.
The 2023 NetEase Cloud Music annual‑report front‑end case study details how sub‑second first‑screen loads, SPA routing with TypeScript, GPU‑accelerated animations, optimized media handling, multi‑layer quality monitoring, and a unified development platform together boost performance, reliability, and engineering efficiency, driving higher DAU and share‑rate.
This article explores the beta release of Taro 4.0, examines its new HarmonyOS support, CompileMode for mini‑programs, and Vite‑based build chain, then details the configuration pitfalls, debugging steps, source‑code analysis, and practical recommendations for a stable development workflow.
This article describes how to build a reusable Vue component that automatically moves overflow menu items into a "More" dropdown, calculates the cutoff point based on container width, and updates the layout on resize, providing a smooth and responsive navigation experience.
The article details a complete redesign of Feishu’s cloud‑document‑to‑HTML‑email converter, introducing IoC/DI architecture, inline‑style utilities, and specialized renderers for headings, lists, tables, images, code blocks, and equations, resulting in high‑fidelity Outlook‑compatible emails while shrinking the core code to under three hundred lines.
This article explores how the depth of a webpage's DOM tree influences memory usage, style calculations, and rendering performance, presenting experiments that compare shallow and deeply nested structures and offering practical tips for monitoring and optimizing DOM depth.
This article explains practical methods for diagnosing and fixing production‑time JavaScript errors by using the Ajax‑Interceptor Chrome extension, understanding hidden‑source‑map vs source‑map differences, adding source‑map files in Chrome, and applying manual source‑map mapping or proxy tools like Charles.
Chrome 126 adds a new permission element that lets developers declaratively request camera, microphone, or combined permissions via a button‑like UI, addressing common permission‑prompt abuses such as premature prompts, hidden dialogs, and difficult revocation, while integrating with the Permissions API and providing state‑change events.
This article explores critical latency metrics—from nanosecond-level CPU operations to intercontinental network delays—illustrating how each contributes to web performance, and provides real‑world measurements for various connection types, data processing tasks, and user‑perceived response times to help developers optimize user experience.
This guide explains how to set up a launch.json file in VSCode, add breakpoints, and run the debugger to efficiently troubleshoot front‑end code, highlighting the use of Chrome launch, breakpoint panels, variable inspection, and step‑through execution.
This article details how Alipay’s Mantiantianxing platform was designed and built to unify page construction, fine‑grained operation, and data feedback, thereby solving low R&D and operation efficiency, reducing duplication, and enabling rapid, scalable innovation across multiple product front‑ends and back‑ends.
The article explains why repeated button clicks or searches cause duplicate API calls, discusses why debounce/throttle are not ideal, and presents three practical solutions—loading state locking, request cancellation with Axios CancelToken, and related code examples—to efficiently avoid redundant requests in Vue applications.
The article describes a unified front‑end observability platform that standardizes data‑point collection via a common SDK, automatically generates health and business dashboards, integrates real‑time monitoring and heatmaps, and has been adopted on 140 pages, delivering faster first‑screen loads, lower error and bounce rates, and higher conversion.
This article provides a curated list of twelve open‑source admin dashboard projects, including D2admin, vue‑element‑admin, JEECG‑BOOT, GIN‑VUE‑ADMIN, and others, with their GitHub links, documentation URLs, demo previews, and licensing information, offering developers free resources for building management interfaces.
This article walks through a series of practical performance‑boosting techniques for Vue‑based web applications, covering Webpack bundle analysis, Gzip compression, WebP image conversion, HTTP/2 configuration, Nginx tweaks, and OSS/CDN integration, with concrete code snippets and step‑by‑step guidance.
This article explains why interface analysis is essential, how to collect request data from web, mini‑programs, and Flutter using hooks and overrides, and how to process, store, and visualize metrics with Redis, InfluxDB, MySQL, and Elasticsearch while managing concurrency and flow control.
This article explains what VS Code user snippets are, how they can be customized for different languages and projects, and provides step‑by‑step instructions and tips for creating and using snippets to accelerate development and maintain consistent code style.
Canyon extends the IstanbulJS ecosystem with a Babel‑based instrumentation plugin, real‑time coverage aggregation, and cloud‑native reporting to enable large‑scale end‑to‑end UI automation coverage for modern JavaScript front‑end applications, including SPA, MPA, and React Native environments.
This guide details the workflow system’s underlying frameworks, functional modules, process design operations, form customization, deployment procedures, and task management features, providing a comprehensive overview for developers and administrators to effectively implement and maintain business processes.
This article introduces a web‑integrated proxy tool that requires no installation or configuration, enabling developers to share URLs or QR codes for remote HTTP debugging, mock rule sharing, and seamless integration into web pages or mobile apps, while comparing it with traditional proxy solutions.
This guide explains how to generate shareable poster images entirely on the front end for H5 pages and mini‑programs, compares client‑side, front‑end, and server‑side approaches, reviews libraries such as html2canvas, dom‑to‑image, wxml‑to‑canvas and Painter, and offers solutions for design fidelity, CORS, and performance issues.
This article explains how to design, develop, preview, debug, and publish NPM component extension packages for the Baidu AI‑Speed platform, covering supported tech stacks, extension mechanisms, core modules, development tools, code conversion examples, and common deployment questions.
This article explains why a community feature is vital for mobile apps, outlines steps to create a successful community—including user targeting, quality content, interactive UI, and management—and showcases 58’s comprehensive UI redesign with visual details and new modules.
This article explains how virtual scrolling can dramatically improve the performance of large online document editors by rendering only visible content, discusses various implementation strategies such as progressive pagination, canvas rendering, line‑ and block‑level virtualization, and details state management, view‑locking, fast‑scroll handling, and integration scenarios like anchor navigation, find‑replace, and comment systems, while providing code examples and performance test results.
This article explains how to build a WebSocket client that supports automatic reconnection after network loss and periodic heartbeat messages, provides a drop‑in API compatible with the native WebSocket interface, and includes complete TypeScript and JavaScript implementations with detailed code examples.
This guide explains how to install the Layui-Vue component library for Vue 3, configure it in a main.ts file, create a basic layout template, and highlights the latest release notes including new events, bug fixes, and style optimizations.
Angular 18, the first version released after merging with Google’s internal Wiz framework, introduces stable Material 3 APIs, @defer lazy loading, enhanced control‑flow directives, and full Hydration support, signaling a renewed push for the framework’s performance and developer experience.
This article explains when React's useEffect callbacks run—whether synchronously before rendering or asynchronously after rendering—by analyzing four demos, discussing the impact of event types, rendering workload, and React's internal scheduling rules.
The article explains why front‑back end separation is needed, outlines common collaboration patterns, presents a staged migration from MVC to SPA, and provides detailed API request/response standards, interface versioning, and practical steps for implementing clean separation in modern web projects.
Front‑end engineering combines automation, modularization, componentization, version control, static analysis, testing, and CI/CD to boost development efficiency, code quality, and team collaboration, guiding technology selection, type‑checking, style guidelines, and a five‑stage evolution from build tools to component‑based frameworks.
This article explains how to arrange tags of varying widths in a single line, detect when they exceed the container, and display the overflow count using only CSS features such as counters, view‑timeline animations, masks, and negative margins, without any JavaScript.
Facing the trade‑off between flexibility and speed in low‑code development, NetEase’s cloud music team built Tango—a source‑code‑based low‑code engine that leverages AST manipulation and the TangoBoot framework to standardize front‑end programming, halve view logic, and unify low‑code with traditional development.
This article explains how to preview a wide range of file types—including images, audio, video, markdown, plain text, Office documents, PDFs and external websites—in a React front‑end by using native HTML tags, embed/iframe techniques, and libraries such as marked and highlight.js, while also supporting page or time positioning.
By leveraging native code tools like esbuild, caching strategies, and a custom pre‑compilation workflow that fakes Webpack's DllPlugin output, this article shows how Mars framework teams dramatically cut compilation times—up to 40% faster—while handling module resolution, resource handling, and cross‑platform challenges.
This article outlines the recent updates to the free open‑source Layui UI library, detailing new options, bug fixes, and security patches across components such as laydate, treeTable, form, upload, and more, while highlighting its lightweight, browser‑centric design philosophy.
This curated newsletter presents the latest releases of Node.js, React, and React Native, highlights a blockchain career transition story, summarizes AIGC‑powered low‑code development, systematic data‑governance modeling, import‑statement optimization, techniques for showcasing technical depth, and design proposal guidance for the VUCA era.
This article explains Domain‑Driven Design's Domain Primitive concept from a front‑end perspective, compares it with VO/DTO/PO, outlines its principles, provides concrete TypeScript examples, and shows how applying DP can improve validation, encapsulation, and testability in real‑world projects.
This article examines the common React modal communication problem, compares the conventional controlled‑component callback approach with the useImperativeHandle solution, and introduces a novel pair of hooks (useShareState and useShareValue) that enable seamless state sharing between parent and child components.
Bilibili created a unified front‑end request library using a Koa‑style middleware “onion” architecture—ConfigCtrl, AssembleCtrl, and RequestCtrl—to standardize error handling, cut code redundancy, improve performance, and provide consistent, extensible API calls across SSR/CSR, Vue2/Vue3, and in‑app H5 environments.
This article presents a detailed TypeScript course syllabus covering fundamentals, advanced concepts, and practical applications, including installation, VSCode setup, data types, enums, generics, classes, interfaces, modules, and QR‑code access for learners.
This article explains what Vue 3 custom hooks (Composition API) are, why they are useful for logic reuse, shows how to create both business‑specific and highly reusable hooks with practical code examples, and lists popular open‑source hook libraries for developers.
This article explains how to solve the common problem of loading historical chat records in a WeChat mini‑program by using a two‑line CSS flex column‑reverse trick, handling edge cases such as limited data and scroll‑view issues, and provides a complete Koa WebSocket backend implementation with full code examples.
This article introduces the Douyin open‑source project—a TikTok‑style short‑video app built with Vue and Vite—provides its GitHub link, showcases screenshots, and offers step‑by‑step instructions for setting up and running the project locally.
This tutorial explains how to use the html2canvas library to render dynamic HTML content into canvas images, covering installation, markup definition, styling, script implementation, download handling, and important limitations for creating shareable posters in front‑end applications.
This article introduces the Douyin open‑source short‑video project built with Vue and Vite, provides a free book giveaway link, and gives step‑by‑step instructions for installing Node, cloning the repository, installing dependencies with pnpm, and running the application locally.
This article presents an in‑depth overview of the Luban full‑stack low‑code development platform, describing its goals, architecture, metadata design, drag‑and‑drop page creation, data visualization, API generation, multi‑tenant and multi‑environment support, version management, and real‑world case studies that demonstrate its efficiency and extensibility.
This article shares practical tips for writing clean frontend code, using AI assistants for code improvement, understanding business requirements, reading source code of popular libraries, and mastering front‑end infrastructure such as tooling, monitoring, CI/CD, and technology selection to ace technical interviews.
This article shows how to lock page scrolling when a modal is open by using the new CSS :has pseudo‑class—replacing JavaScript‑driven overflow toggles that fail with nested dialogs—and demonstrates a simple body:has(dialog[open]) selector that works across all modern browsers.
This article explains how to create an input element that sticks to the on‑screen keyboard by listening to visualViewport resize/scroll and focus events, calculating the keyboard’s top position, and dynamically adjusting the input’s CSS transform, with full TypeScript code examples.
This article explains why front‑back end separation is needed, describes the evolution from MVC to SPA, outlines the principles of responsibility and concern separation, and provides a detailed API specification—including request/response formats, pagination, and special field handling—to improve collaboration and reduce integration effort.
This article explains how to set up the environment, import the Baidu Map API, create map containers, generate static map URLs using PHP, and display the resulting map and markers on a web page, providing step‑by‑step code examples for developers.
This guide explains how to choose and implement map visualization layouts—primary map focus, side‑by‑side view, or dual‑panel designs—and details point, line, and area visual elements along with common chart types to improve logistics efficiency and user experience.
This step‑by‑step guide shows how to claim your free Kimi API credit, create an API key, test the service with Postman, and integrate it via Python SDK, frontend projects, or no‑code tools like Dify, enabling anyone to build AI applications without writing code.
The article examines how AI, global competition, remote work, and cross‑cultural demands reshape programmers' careers, highlights the rise of independent developers, and provides a concise reference of essential development tools spanning editors, build systems, testing frameworks, debugging utilities, version control, and database management.
This article shares practical VSCode configuration tips and shortcuts for frontend developers, covering word separators, quick file path navigation, custom logging snippets, code highlighting, explorer tweaks, terminal copy behavior, drag‑and‑drop settings, and language‑specific suggestions for Vue and React, helping improve coding efficiency and happiness.
The growth front‑end team’s transparent‑video visual enhancement scheme uses split‑RGB/alpha MP4s cached as blobs in IndexedDB and rendered via OpenGL, delivering high‑fidelity, low‑size animations with transparent backgrounds, cutting development time by 75 % and achieving 30‑60 fps performance.
This article explains the three common server‑to‑client push techniques—polling, WebSocket, and Server‑Sent Events (SSE)—detailing their principles, advantages, drawbacks, browser compatibility, appropriate use‑cases, and provides a complete Node.js/Express demo with front‑end code.
This tutorial explains how to build a glitch‑style clock animation in CSS by leveraging clip‑path, keyframe animations, random SCSS functions, and layered pseudo‑elements to achieve flickering, distortion, and color‑shift effects.
This article examines common TypeScript type‑reuse issues in a component library, compares type aliases and interfaces, demonstrates using utility types like Omit and Pick, introduces unified base props, shows tuple usage for hooks, and explains function overloads to improve code maintainability and type safety.
This article surveys the full range of file preview options—including commercial services, front‑end JavaScript libraries for PPTX, PDF, DOCX and XLSX, and server‑side conversion tools like OpenOffice, kkFileView and OnlyOffice—providing code examples, pros and cons, and practical recommendations for developers.
The article details NetEase Cloud Music’s end‑to‑end, online‑configurable data‑consumption service and schema‑driven visualization platform that transform raw client logs into ClickHouse records, automatically generate tables and dashboards, and provide observability, dramatically reducing manual effort while supporting over twenty performance metrics for frontend monitoring.
This article details the background, actions, and future outlook of performance and experience optimization for the Five-Star Store mini program, covering template handling, JS error reduction, rendering speed improvements, package size reduction, and systematic testing and iteration mechanisms across multiple device platforms.
This monthly digest reviews the Vue 2024 conference highlights, explores the breakthrough AIGC model Sora, examines emerging AI programmers and large‑context assistants like Kimi, and evaluates new front‑end tools such as Oxlint and TypeScript’s using keyword, offering practical takeaways for developers.
The article details a micro‑frontend transaction backend case study where code‑splitting, CDN delivery, caching, lazy‑loading, and idle‑time loading reduced first‑screen JavaScript size, cut FCP below one second and LCP below two seconds, and improved first‑screen open rate by 15% while halving TTI.
This roundup presents recent frontend news and curated articles covering PNG‑based XSS attacks, V8 engine optimizations, React component nesting pitfalls, engineering habits, brand‑centric design, and useful resources for developers seeking practical insights.
This tutorial walks you through creating a full‑featured image annotation tool using HTML5 Canvas, covering image rendering, mouse‑wheel zoom, viewport panning, rectangle drawing, selection, drag‑move, size adjustment, and rotation with detailed JavaScript code examples.
This article shares the author's practical experience with frontend engineering, covering topics such as project review, coding standards, monorepo tooling, custom CLI/SDK development, testing strategies, code review, bundling choices, monitoring, performance optimization, and knowledge consolidation for team empowerment.
This article explains the classification of HTTP request error codes, details typical 4xx client and 5xx server errors, provides common causes, and offers practical debugging steps and solutions to efficiently identify and resolve front‑end and back‑end issues.
By separating UI components from business logic using a clean, layered architecture inspired by DDD, Hexagonal and Clean Architecture, the article shows how React, zustand hooks, and strict data‑dependency rules reduce coupling, lower development cost, and make agile front‑end code easier to maintain and extend.
This article explains Vue.js template syntax, covering how interpolation with double curly braces inserts data, the role of directives like v-bind, v-model, and v-on, shorthand notations, event modifiers, and the use of dynamic arguments introduced in Vue 2.6.0, all illustrated with concrete code examples.
This article walks through reproducing the stunning Xiaomi SU7 showcase webpage by using three.js, custom GLSL shaders, and several helper libraries to implement dynamic environment map switching, reflective ground, tunnel traversal, bloom, and camera shake effects, providing complete source code and explanations.
This article explains the fundamentals of VChart tooltips, demonstrates how to enable enterable tooltips with Amazon‑style safety triangles, shows flexible content and style patterns, and provides methods for custom DOM manipulation and fully custom tooltip handlers to meet diverse frontend data‑visualisation needs.
In a series of in‑depth interviews, four senior designers from 58UXD share why they built a design‑system handbook, its value for consistency and innovation, challenges of integrating AIGC, strategies for usability, visual standards, engineering practices, and future plans for continuous iteration.
This article details the front‑end interactive development of Douyin’s 2024 Chinese New Year “Lucky God Dragon” activity, covering the cross‑platform framework, SAR Creator engine, bundle/prefab resources, scene construction, animation control, coordinate synchronization, terrain management, performance optimization, and device‑aware caching strategies.
This article walks through the architecture and detailed design of Guming’s frontend data‑center SDK, covering its initialization, payload structure, core modules such as Configurator, Reporter, Queue, and various plugins, and explains how logging, tracking, rate‑limiting, and remote configuration are implemented for reliable data collection.
This article surveys current front‑end innovations, covering Chrome extension development, using Husky for Git‑hook scripts, the clever architecture of Vite, new JavaScript operators (?., ??, ??=), the upcoming HTTP/3 protocol, 2024 front‑end technology trends, and an invitation to join a leading front‑end team.
This article presents practical frontend solutions, including automatic route generation in Vite projects using unplugin-vue-router, a detailed source analysis of the await‑to‑js error‑handling wrapper, methods for extracting URL parameters, techniques to terminate or replace forEach loops, and patterns for avoiding duplicate component requests.
The article recounts a founder‑driven startup’s journey, detailing the selection of uni‑app, egg.js, MySQL, and antd‑vue for rapid cross‑platform development, the challenges of constant scope changes, and practical advice on recruitment, code standards, workflow, and avoiding common pitfalls.
This article introduces Vue as a progressive JavaScript framework, explains its core features such as reactive data binding, component‑based development, and virtual DOM, and walks through installation methods, a simple counter example, and a brief comparison with React and Angular.
This article explains what latency is, how it occurs in web interactions, the main factors that contribute to it, common tools for measuring it, and a set of practical optimization techniques such as HTTP/2, CDN usage, caching, and efficient coding practices.
This article explains why Vite outperforms Webpack by using a different development mode, leveraging native ES Modules, employing the high‑performance esbuild written in Go, and optimizing hot‑module replacement, making it especially advantageous for large frontend projects.
This article explains what a technology stack is, why choosing the right combination of front‑end, back‑end, database, cloud and deployment tools is crucial for performance, user experience and brand perception, and reviews the most popular web development stacks for 2024.
QCon Shanghai 2023 highlighted LLM‑driven frontend debugging, the emerging WebNN API for accelerated browser inference, AI‑native UI patterns with evaluation‑driven development, LLM‑enhanced developer bots using RAG and fine‑tuning, and a HarmonyOS round‑table exploring ArkUI’s declarative framework and opportunities for frontend engineers.
This article explains why user authentication is essential for mobile mini‑programs, outlines security measures using AccessToken and RefreshToken, and provides step‑by‑step techniques—including automatic login, token refresh, request queuing, and user‑state handling—to achieve a frictionless user experience.
This article explains how the open‑source Tango low‑code engine uses a CodeSandbox‑based sandbox architecture—including dependency initialization, transpilation, and cross‑origin communication—to enable real‑time source‑code execution and visual drag‑and‑drop building within a secure iframe environment.
This article explores the challenges of legacy code through practical examples, offering step‑by‑step refactoring strategies, testing, documentation, environment management, and innovative tooling like ServBay to help developers modernize both backend and frontend systems while fostering professional growth.
HTMX offers a lightweight, HTML‑attribute‑driven approach that adds AJAX, WebSocket and server‑sent event interactivity without JavaScript, making it ideal for simple pages, while React provides a full‑featured, component‑based JavaScript library with a steep learning curve, extensive ecosystem, and superior scalability for complex, state‑driven applications.
The article discusses common Vue component communication patterns such as props‑emit, event buses, and ref usage, then introduces a colleague's provide‑inject plus ref approach that simplifies cross‑component interactions while highlighting its trade‑offs regarding Vue's one‑way data flow.
This article examines the performance differences between the atomic CSS engines unocss and Tailwind CSS, presenting benchmark tests on a MacBook M1 using Vite and PostCSS setups, analyzing build times, the impact of CSS AST parsing, and discussing practical implications for frontend development.
This article explains the challenges of migrating legacy Vue applications to a unified React stack, focusing on external link redirection, route parameter handling, and unified routing conventions, and provides a concrete implementation using Nginx, path-to-regexp, and a custom Redirector class.
