This article explains how a single mask image and the CSS mask-image property can be used to prevent subtitles from overlapping on‑screen characters in Bilibili videos, providing a lightweight demo with HTML/CSS code, visual results, and practical cautions about browser support.
This article explains how Qwik, a full‑stack SSR framework, uses pre‑compilation, resumable rendering, and fine‑grained event handling to avoid the heavy runtime and hydration overhead of traditional Virtual DOM frameworks, offering superior first‑paint performance and lower JavaScript payloads.
In Chinese internet firms, front‑end development has grown into large specialized teams, and DeWu’s API‑documentation‑driven development model—presented by former Alibaba leader Zhu Junbiao and explained by Chen Ziyu—demonstrates how an API‑driven workflow on the Mooncake platform resolves collaboration bottlenecks and boosts development efficiency.
This article reviews the evolution of cross‑platform technologies—from web containers to native‑container frameworks and self‑rendering engines—examining their changing trade‑offs, the push for standardization, and practical strategies to keep business code stable across ever‑fragmented devices.
This article explains the purpose and ES6‑module basis of tree‑shaking, compares the implementation details of Rollup and Webpack, provides configuration and code examples, and shows real‑world bundle size and build‑time results to help developers choose the right bundler for optimal output.
This article examines the advantages and drawbacks of using iframes for embedding one system into another, outlines suitable scenarios, and provides a step‑by‑step implementation—including URL synchronization, navigation handling, and loading management—using React and plain JavaScript to achieve a smooth, micro‑frontend‑free integration.
This article explains how React simulates requestIdleCallback by combining requestAnimationFrame, postMessage, and MessageChannel to execute work during browser idle periods, detailing the evolution from the early rAF‑postMessage approach in v16 to the message‑loop implementation in v18 and providing simplified source code examples.
This article explains why Ant Design 5 is preferred over MUI, then walks through configuring Vite and tsconfig, creating login and home pages, designing a recursive routing system, implementing lazy loading, menu generation, route listening hooks, tab management with KeepAlive, theme customization, and dynamic routing with React Router 6.4.3 for a full‑featured admin dashboard.
This article provides a comprehensive overview of JavaScript Promises, covering their definition, states, basic usage, error handling, chaining, common APIs, best practices, advanced scenarios such as preloading and cancellation, as well as manual implementation techniques, to help front‑end developers deepen their asynchronous programming skills.
The article presents a comprehensive case study of Ctrip's 2022 PC homepage redesign, detailing the motivations, requirement analysis, island‑style architecture, cross‑team component development, server‑side rendering, public component challenges, and the dynamic data‑configuration platform that together enable fast, maintainable, and scalable web delivery.
JSON Hero is a lightweight, feature‑rich JSON utility that offers multiple viewing modes, easy installation via Git and npm, drag‑and‑drop file handling, searchable tree structures, and shareable links, making JSON inspection and editing more intuitive for developers.
This guide surveys essential frontend topics—including deep dives into lodash usage, iterator and generator concepts, Web3D visualizations, hybrid remote debugging, long‑task performance optimization, Chrome DevTools measurement, and creative image‑loading effects—offering practical insights for modern web developers.
This article demonstrates how to create a reusable Axios wrapper for Vue3 projects, covering basic class‑based encapsulation, flexible global and instance interceptors, custom request configuration types, request cancellation management, and practical testing examples, all written in TypeScript.
This article explains the mechanics behind React re‑rendering, how state and props changes trigger renders, common pitfalls that cause multiple renders in class and function components, and practical strategies—including batching, state merging, useReducer, and refs—to minimize unnecessary updates.
The article shares a developer's practical experience of transitioning from backend to frontend by learning Vue and React, exploring component libraries, tackling layout and styling challenges, and integrating the frontend build into a backend Maven project for a complete gateway console.
The 2022 Vivo developer conference showcased a series of technical breakthroughs—including a custom wepy‑chameleon compiler for frontend upgrades, low‑code platforms for backend and game development, a real‑time computing platform built on Flink, advanced graph scheduling, cloud‑native container strategies, monitoring enhancements, database automation, and large‑scale messaging middleware—highlighting Vivo's comprehensive push toward efficiency and innovation across its internet services.
This article explores how to structure B‑end interfaces using three spatial axes—X for horizontal expansion, Y for vertical information handling, and Z for stacking order—offering concrete layout patterns, adaptation strategies, and layering guidelines to create logical, scalable enterprise UIs.
The article analyzes how the rapid evolution of front‑end technologies, Gartner's maturity curve, ThoughtWorks' radar, and the D2 conference’s topic‑selection process shape the 2023 language and framework landscape, highlighting emerging tools like Turbopack, Rust, and mature options such as Kotlin and Swift.
This article explains what build tools are, compares Vite and Webpack in terms of performance and architecture, and details Vite's features such as dependency pre‑bundling, CSS handling, static asset imports, TypeScript support, environment variables, and production build configuration, providing practical code examples for frontend developers.
This tutorial walks through the fundamental steps of using Three.js—including scene creation, camera configuration, renderer setup, model loading, orbit controls, animation, and responsive resizing—by illustrating each concept with clear code examples and a storytelling analogy.
This article explains why infinite scrolling is essential for large‑screen dashboards, analyses three implementation strategies, and provides a complete Vue 3 component—including BEM‑styled markup, GSAP‑driven animation, slot‑based content insertion, and optional hover‑pause behavior—to achieve a smooth, endless scrolling list.
This article explains how Element Plus applies CSS architecture concepts such as OOCSS and BEM, demonstrates generating BEM class names with JavaScript hooks and SCSS mixins, and compares the approach with classic ITCSS layering to improve maintainability and scalability of front‑end styles.
This tutorial walks through building a front‑end publishing platform that initiates Jenkins builds, uses dynamic routing, and leverages Socket.io to stream real‑time build logs to the browser, covering both front‑end Vue components and back‑end Node integration.
This collection highlights essential frontend topics—including Vite's performance debate, low‑code concepts, functional programming fundamentals, JMeter performance testing, strategies for managing module dependencies and theme switching, as well as practical guidance on preventing XSS and CSRF attacks—offering developers a concise roadmap to modern web development.
This article explains the fundamentals of computer fonts, compares bitmap, vector, and stroke fonts, discusses why SVG icons are preferred over font icons on the web, and provides a step‑by‑step guide to implementing a reusable SVG icon component using Vite, Ant Design Vue, and related tooling.
This article explains how to upgrade Taro 2.x projects to Taro 3.x by converting source code into an AST using Babel, programmatically editing imports, configs, routers, and styles, and then generating the updated code, complete with practical code examples and migration tips.
This article shares a front‑end engineer’s personal roadmap, outlining three development stages—mastering core skills, achieving independent delivery, and finding a personal mission—while offering practical advice on technical depth, cross‑stack knowledge, leadership, and long‑term career growth.
This guide outlines the essential concepts of big data, the roles of a front‑end data team, practical workflow steps, platform architecture, industry benchmarks, and actionable strategies for small teams to improve efficiency, visualization capabilities, and digital operations.
This article curates the latest frontend engineering practices, covering WebCodecs video export, a Node.js troubleshooting guide, JavaScript error handling tips, Apple‑style scroll effects, Turbopack performance benchmarks, monorepo strategies, large‑scale system design, and productivity measurement at Google, all aimed at boosting developer expertise.
This tutorial walks through the front‑end portion of a publishing platform series, demonstrating how to build a Vue 3 and Element‑plus UI with TailwindCSS, implement server‑side pagination via Koa, integrate Axios with proxy and interceptors, and add complete CRUD operations—including create, edit, and delete dialogs—while showcasing the essential code snippets.
This article explains how a single image and the CSS mask‑image property can prevent subtitles from covering on‑screen characters, provides a complete demo with code, shows the visual result, and discusses the experimental nature and limitations of the technique.
This article explains what Lighthouse is, how to run it via Chrome extensions, DevTools, CLI or Node.js, details its internal architecture, driver and pass configuration, gatherer and trace processing, and shows how audits generate performance reports with scoring based on HTTP Archive data.
This comprehensive guide examines the key factors for selecting between React and Vue—including team suitability, compatibility, usage patterns, ecosystem, cross‑platform support, performance benchmarks, mental models, community size, and licensing—to help developers make an informed technology‑stack decision.
This guide shows how to integrate the pure‑JavaScript js‑audio‑recorder plugin into a Vue project, record, pause, play, and export PCM/WAV audio, then package the Blob into FormData and send it to a SpringBoot backend endpoint for storage, including key configuration details and common pitfalls.
The article examines the open‑source Perspective library—originating from J.P. Morgan’s FinOS—and its multi‑language architecture that combines C++/WASM, Rust, JavaScript, and Python to deliver high‑performance, framework‑free data visualizations for real‑time financial analytics, highlighting its use of Apache Arrow, Web Components, and Jupyter integration.
This guide explains how to locate and fix production JavaScript errors by generating source maps, injecting them via Charles proxy, and using VSCode exception breakpoints to debug the original source code as if it were running locally.
This article presents a step‑by‑step tutorial for creating a dynamic, real‑time data visualization dashboard using Echarts on the front end and a Java‑based backend, covering design mockups, requirement analysis, architecture, environment setup, code structure, deployment commands, and source code acquisition.
This article presents the overall design, technology selection, architecture, and core implementation details—including adaptive layout, component development workflow, drag‑and‑drop handling, and state push mechanisms—of a low‑code, reusable big‑screen data visualization platform built with React and modern front‑end visualization libraries.
This article explains the design and implementation of a reusable feeds component that supports multiple layout modes, renders different data types, and uses virtual scrolling to keep DOM size low and maintain smooth performance during infinite scrolling.
This article explains how Baidu AI Cloud's low‑code platform AI‑SuDa builds a flexible component system, covering the transition from UI libraries to declarative low‑code components, detailed React examples, visual editor configuration, component registration, data binding, and event‑action mechanisms for efficient application development.
The article explains why front‑end and back‑end should be separated, outlines the challenges of integration, describes the responsibilities and development process for a clean API contract, and provides detailed request/response specifications with code examples for building a maintainable SPA architecture.
The Vivo front‑end team built a custom compiler that automatically transforms WePY mini‑program files—including templates, scripts, components, and pages—into UniApp Vue code, cutting the estimated 25‑person‑day migration to seconds, delivering a bug‑free launch and paving the way for open‑sourcing the tool.
This article introduces WebAssembly, explains its advantages and compatibility, walks through setting up Rust and wasm‑pack to build a simple demo, compares its performance against JavaScript using a Fibonacci benchmark, and provides guidance on when to adopt WebAssembly in frontend projects.
This article explores the fundamentals of data saving for web‑based tools, covering what data is saved, where it is stored (backend vs. frontend), various trigger mechanisms, design principles for reliable saving, and feedback patterns to ensure users never lose their work.
This article explains how ByteDance’s frontend monitoring SDK is continuously optimized for bundle size and runtime performance through micro‑ and macro‑level code refactoring, benchmark testing with Benny and Puppeteer, and real‑world analysis using Perfsee Lab, ultimately achieving minimal impact on page load metrics.
This article provides an in‑depth tutorial on Pinia, covering its origins, differences from Vuex, installation, store definition, state, getters, actions, plugin creation, persistence strategies, and practical code examples for integrating Pinia into Vue applications.
This guide walks through establishing a unified development environment, creating a pnpm‑based monorepo, configuring TypeScript and Vite, registering package names, and linking sub‑packages so you can develop and preview a Vue 3 component library efficiently.
This article explains how to recreate Vue 3's computed API using the composition API, covering getter/setter handling, effect integration, caching with a dirty flag, dependency tracking, and trigger mechanisms, and provides step‑by‑step code examples to build a functional ComputedRef implementation.
This tutorial walks through the practical steps of extending a Slate.js rich‑text editor with toolbar actions, multi‑level list handling, and a robust image‑upload solution, providing code snippets, implementation details, and design considerations for each feature.
The Avue.js framework, a lightweight wrapper of Element UI that emphasizes data‑driven views, introduces version 2.10.2 with new input components, several optimizations, and bug fixes while maintaining ES5 browser compatibility and offering high reusability for table and form scenarios.
This article explains why class name and global element style conflicts occur in micro‑frontend architectures, and presents two main strategies—style naming with priority rules and host‑environment isolation using Shadow DOM or Garfish runtime plugins—to achieve reliable CSS isolation across parent and child applications.
This tutorial demonstrates how to create a two‑page 3D web experience using Three.js, Blender‑compressed models, DRACOLoader for efficient loading, Tween.js for smooth animations, custom cursor handling, lighting effects, and responsive rendering, complete with code snippets and deployment instructions.
This article explains the internal implementation of component‑level navigation guards in Vue Router 4, covering guard categories, the full navigation lifecycle, the execution mechanism, and detailed source‑code analysis with examples of extractComponentsGuards, beforeRouteUpdate, beforeRouteEnter, and beforeRouteLeave.
The 2022 JD Front‑End Technology Salon gathered experts from leading companies to share practical insights on virtual digital humans, Node.js monitoring, lightweight cross‑platform rendering, low‑code platforms, micro‑frontend solutions, and other cutting‑edge front‑end technologies driving business growth.
The paper presents a low‑code, schema‑driven big‑screen visualization platform built with React, ECharts, D3 and related libraries, detailing its four‑module architecture, adaptive layout techniques, reusable component workflow, drag‑and‑drop enhancements, and WebSocket‑based state management, and outlines future extensions such as a component marketplace and 3D rendering.
Ant Design 5.0 Alpha introduces a refreshed visual design, a CSS‑in‑JS based theming system, new components like Tour and FloatButton, API unifications, and a roadmap that includes migration tools and a richer theme editor for developers.
This article explains how ByteDance's frontend monitoring SDK was systematically reduced in bundle size and runtime overhead through micro‑optimizations such as avoiding long class names, using functional patterns, minimizing polyfills, splitting files, leveraging Puppeteer‑based benchmarks, and applying requestIdleCallback scheduling to improve user experience on both web and mobile platforms.
The article explains why React is well‑suited for cross‑platform dynamic development, detailing its data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, Taro reconciler adaptations, and independent event system, and shows how React can serve as both a DSL and a full runtime for mobile and web.
The article explains how React’s data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, independent event system, and adaptations such as React Native and Taro enable efficient cross‑platform dynamic applications, and provides code examples and practical guidance for developers.
This article explains how a tiny change—replacing three var declarations with const inside qiankun's sandbox—delivers over tenfold performance gains in micro‑frontend scenarios, backed by code examples and real‑world benchmark results.
This article explains how NetEase Qiyu built a high‑cohesion multilingual component using React context and hooks, transformed tree‑structured language data for component libraries, and created a VSCode plugin to automate i18n key replacement, enabling efficient multi‑language support for their customer‑service console.
This article thoroughly explains the core mechanisms of Vue Router 4 navigation guards, covering global, per‑route, and component guards, their classification, execution flow, and the underlying source‑code implementations such as useCallbacks, guardToPromiseFn, and runGuardQueue.
This article provides a comprehensive guide on unit testing custom React Hooks using Jest, renderHook, act, and the React Testing Library, covering examples such as useCounter, useEventListener, useHover, and useMouse with detailed code snippets and best‑practice recommendations.
This article provides a comprehensive guide to Recoil, Facebook's React state‑management library, covering its graph‑based architecture, atoms and selectors, family APIs for bulk state, async data handling with Suspense and Loadable, snapshot usage for SSR and time‑travel, external synchronization, and practical tips for reducing mental load.
This article explains how the veImageX platform leverages a self‑developed HEIF codec and AI‑driven optimization to shrink image sizes by over 30%, reduce bandwidth costs, maintain visual quality, and provide flexible integration options for both native apps and web pages.
This article explains how a low‑code map data platform transforms complex WebGIS tasks into simple, visual operations, detailing component linkage, data filtering, two‑way binding, and the saveEffect mechanism that lets non‑frontend engineers build functional stations without writing code.
The article analyses the current state of front‑end performance, explains why hybrid solutions fall short of native experiences, and introduces Lath – a pure front‑end container that turns any web page into a seamless SPA with advanced window management, smooth interactions, and progressive enhancement.
The Axios 1.1.0 release introduced a corrupted build that caused the axios.get function to be undefined, leading to widespread request failures in both browser and Node.js environments, prompting developers to roll back or upgrade to patched versions.
This article walks through ten common Vue 3 migration scenarios—parent‑child data flow, two‑way binding, router navigation, context access, slots, component caching, logic reuse, lifecycle hooks, global APIs, and TypeScript integration—providing clear explanations and complete code examples for each case.
This article explains the singleton design pattern, shows standard and lazy implementations in JavaScript with code examples, discusses reducing global variable pollution, and demonstrates practical usage in popular front‑end libraries such as Vuex, Ant Design message, and Axios request cancellation.
This article demonstrates how the CodeFun tool can automatically transform UI design drafts into functional front‑end code across multiple frameworks, streamlining repetitive marketing page development by eliminating manual slicing, styling, and basic logic implementation.
In March, the UK government’s GOV.UK site eliminated jQuery from all front‑end applications, detailing the reasons, the removal process, and the resulting performance gains for users, especially on low‑spec devices, through extensive lab testing and real‑user monitoring.
This newsletter curates a selection of technical articles covering custom WebAssembly JavaScript runtimes, the evolution of JavaScript frameworks competing with native SDKs, fast component preview and debugging, an introduction to Web 3D graphics, the new CSS transform individual property, essential JavaScript utility methods, and an overview of CesiumJS for 3D earth visualization.
This article examines existing ES‑check tools, compares community and mpx implementations, and presents a comprehensive enhanced version that supports multi‑file detection, HTML parsing, source‑map resolution, and both CLI and library usage, detailing its underlying principles, code examples, and practical advantages for frontend development.
The CSS ‘ic’ unit, introduced in CSS 4, measures length based on the width of a CJK ideograph, allowing developers to specify dimensions such as ‘max-width: 2ic’ to span exactly two CJK characters, with a default value equivalent to 1 em.
This article documents a hands‑on experiment migrating a Vue 2 project to Vue 2.7 with Vite, covering setup steps, essential plugins, compatibility issues, performance benchmarks against webpack, and practical lessons for both new and legacy frontend applications.
This article guides beginners through the fundamentals of computer graphics, explaining OpenGL, WebGL, GLSL, and the rendering pipeline, then demonstrates practical Three.js code for setting up scenes, cameras, lights, materials, and textures to create interactive 3D web experiences.
This article explains various web watermark methods—including simple visible logos, full‑page overlays, dynamic canvas‑generated marks, SVG‑based text watermarks, and robust invisible (blind) watermarks—while covering implementation details, security considerations, and protection mechanisms such as Shadow DOM and MutationObserver.
This article explains the concept of Signals as a fast, fine‑grained reactive state primitive, compares its usage and performance with hooks, SolidJS, and Vue, and provides hands‑on implementations and integration tips for modern frontend frameworks.
The ByteDance Dev Better series hosted a frontend performance and new technology salon featuring four expert talks on performance analysis tools, performance system construction, frontend monitoring best practices, and a Rust‑based JavaScript compiler, each followed by detailed Q&A sessions.
This article examines Builder.io's performance optimization case, reviews the evolution of lazy‑loading techniques in front‑end development, and explains how Qwik implements ultra‑fine-grained lazy loading and prefetching to eliminate costly hydration and improve page interactivity.
This article explains how to create a lightweight, embeddable JavaScript runtime using Duktape, compile it to WebAssembly, expose custom APIs, and integrate it into a web-based login greeter, highlighting implementation steps, code examples, and potential use cases.
This article explains why and how to separate frontend and backend responsibilities, outlines the evolution from MVC to SPA architectures, and provides detailed API request and response conventions—including JSON formats, pagination, and special field handling—to improve collaboration and reduce integration effort.
This article analyzes the design secrets of the China Merchants Bank mobile app, covering its homepage structure, banner strategies, icon styles, card layouts, color choices, navigation tricks, and startup page symbolism to illustrate how thoughtful UI enhances user experience in mobile banking.
This article explains what software frameworks are, why they are essential for developers, outlines the main types—including frontend, backend, mobile, and data‑science frameworks—and offers practical advice on how beginners can start learning them effectively.
This article analyzes the challenges of traditional front‑end development for large real‑estate operation activities and presents a comprehensive efficiency‑boosting solution that includes workflow optimization, a unified event‑tracking system, a multi‑end adaptation plugin, and a low‑code "Jimu" platform for rapid page creation.
This article explains what front‑end frameworks are, compares the top five options for 2023—including ReactJS, Angular, TezJS, jQuery, and VueJS—detailing their features, advantages, and ideal use cases to help developers select the most suitable technology for their projects.
This article presents a comprehensive design and implementation plan for an online platform that enables both developers and non‑developers to preview, debug, and interact with basic, business, and low‑code UI components through code editors, schema‑based property panels, toolbars, and isolated preview containers.
The author explains how the viral “Sheep Sheep” puzzle’s random mechanics make it nearly impossible to clear, then details the creation of a clone called “Fish Fish” with customizable difficulty, open‑source code, and the core implementation techniques used.
This article presents a curated collection of twelve noteworthy open‑source WeChat mini‑program projects—including e‑commerce, UI component libraries, music, library, and development frameworks—detailing their main features, GitHub stars, and links to help developers explore and learn from real‑world examples.
Discover the latest JavaScript enhancements—including class member addition, private property checks with the in operator, top‑level await, error.cause for root causes, the .at() method for strings, arrays, and array‑like objects, and the safer Object.hasOwn method—each designed to streamline modern development.
This curated collection introduces key front-end topics—including architecture layering, JavaScript monkey‑patch detection, component sharing via Webpack Module Federation, automated testing basics, Vue 2 this behavior, UX effectiveness measurement, and product versus UX design differences—offering practical insights for modern developers.
The article explains how the HTML contenteditable attribute enables in‑place editing, why legacy execCommand‑based editors are inconsistent, and how modern frameworks such as Slate.js—built on React and Immutable.js—provide a structured, location‑based data model with Transform and Node APIs for reliable, portable rich‑text editing.
The article explains why front‑back end separation is needed, describes the evolution from MVC to SPA, outlines responsibility separation, development workflow, and presents a detailed API specification including request/response formats, pagination, and special data handling rules.
This article examines performance bottlenecks in a Taro3-based hotel list page, presents measurement data, and details multiple optimization techniques—including preload API, setData reduction, node count trimming, animation refactoring, data flattening, virtual list enhancements, custom wrapper usage, native components, and React.memo—to significantly improve rendering speed and user experience.
This article explains how to monitor and analyze front‑end performance using the deprecated performance.timing API and the modern PerformanceObserver, detailing key web‑vital metrics such as TTFB, FCP, LCP, FID, and CLS, with code examples and practical interpretation guidelines.
This article presents a comprehensive set of front‑back end collaboration standards, covering why a coordination protocol is needed, detailed workflow steps, interface design rules, common pitfalls with concrete code examples, and the measurable benefits of adopting a unified development contract.
This article explains the core concepts of low‑code platforms, emphasizing visual editing as a mandatory feature, comparing declarative and imperative approaches, detailing front‑end JSON‑to‑React rendering, reviewing five back‑end storage strategies, discussing business‑logic implementation, workflow engines, and predicting the future evolution of low‑code solutions.
This article describes how Baidu's commercial frontend team improved front‑end and back‑end collaboration efficiency by introducing a BFF layer, data‑direct capabilities, staged data tiering, and fragment‑based batch editing, ultimately reducing delivery time by over 50% while maintaining quality.
Discover the nine essential UI design elements shaping modern financial apps—from brand colors and gradient backgrounds to typography, icon styles, whitespace, rounded cards, illustrative graphics, micro‑interactions, data visualisation, and component‑based systems—each helping convey corporate identity, enhance trust, and improve user experience.
