BestHub
Sign in
Tagged articles
769 articles
Page 3 of 8
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 25, 2023 · Frontend Development

Comprehensive Guide to Building a Vue3 + Vite + TypeScript Project with Permission Management, Component Encapsulation, and Build Optimization

This article presents a step‑by‑step tutorial for creating a Vue 3 project using Vite and TypeScript, covering project scaffolding, routing and permission control, reusable component and directive encapsulation, custom hooks, Axios configuration, build optimization techniques, and essential TypeScript concepts.

Build OptimizationComponent EncapsulationVite
0 likes · 19 min read
Comprehensive Guide to Building a Vue3 + Vite + TypeScript Project with Permission Management, Component Encapsulation, and Build Optimization
IT Services Circle
IT Services Circle
Dec 15, 2023 · Frontend Development

How Chrome Manifest V3 Affects Ad Blockers and YouTube

The upcoming retirement of Chrome Manifest V2 forces extensions to adopt Manifest V3, which requires Chrome Web Store review for updates, dramatically slowing ad‑blocker rule changes and giving YouTube an advantage, while other browsers remain unaffected.

Ad BlockerChromeManifest V3
0 likes · 3 min read
How Chrome Manifest V3 Affects Ad Blockers and YouTube
DaTaobao Tech
DaTaobao Tech
Dec 15, 2023 · Frontend Development

How Optimized Image Processing Boosted Double Eleven Web Performance

This article explains the image‑processing workflow used for the Double Eleven event, covering format selection, CDN scaling and quality parameters, WebP conversion, practical URL suffix rules, and additional front‑end tips that together dramatically improve page load speed and user experience.

CDNResponsive Imagesfrontend development
0 likes · 10 min read
How Optimized Image Processing Boosted Double Eleven Web Performance
Ximalaya Technology Team
Ximalaya Technology Team
Dec 10, 2023 · Frontend Development

Implementing a TodoList Component with ArkTS Declarative UI and State Management

By using ArkTS’s declarative UI features—@Entry, @Component, @Preview, struct‑based custom components, property chaining, Column layout, and a ForEach loop—this tutorial builds a TodoList where each ToDoItem toggles an isComplete state on click, automatically updating the view through state‑driven rendering.

Declarative UIState ManagementTodoList
0 likes · 6 min read
Implementing a TodoList Component with ArkTS Declarative UI and State Management
JD Cloud Developers
JD Cloud Developers
Dec 6, 2023 · Frontend Development

Why TypeScript Is Essential for Modern Frontend Development

This article explains why TypeScript has become a must‑have tool for front‑end engineers, covering its static type system, improved code readability and maintainability, setup steps, configuration options, special types, generics, tooling integrations and best‑practice utilities to help developers write safer, more robust JavaScript applications.

GenericsToolingTypeScript
0 likes · 30 min read
Why TypeScript Is Essential for Modern Frontend Development
MaGe Linux Operations
MaGe Linux Operations
Dec 6, 2023 · Frontend Development

Mastering Vue's Reactivity: From Object.defineProperty to Proxy

This article explains the fundamentals of Vue's reactivity system, comparing Vue2's Object.defineProperty approach with Vue3's Proxy-based implementation, and walks through building a custom dependency-collection model with code examples, key-level tracking, and branch-aware cleanup to achieve precise reactive updates.

Dependency CollectionProxyReactivity
0 likes · 9 min read
Mastering Vue's Reactivity: From Object.defineProperty to Proxy
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 2, 2023 · Frontend Development

Vue Quick Start Guide for Backend Developers

This article provides backend developers with a concise Vue quick‑start guide, covering core features such as component‑based architecture, two‑way data binding, and virtual DOM, and demonstrates practical setup via CDN or Vue CLI, along with detailed examples of data handling, computed properties, watchers, methods, and common directives.

JavaScriptTutorialVue
0 likes · 12 min read
Vue Quick Start Guide for Backend Developers
DaTaobao Tech
DaTaobao Tech
Nov 29, 2023 · Frontend Development

Error Message Governance System: A Frontend Solution for Better User Experience

The article describes a frontend error‑message governance system that dynamically maps cryptic error codes to clear, context‑aware messages, lets operators configure responses by code, URL or endpoint, and improves user experience and system stability while enabling future features such as efficiency metrics, guides, and surveys.

Error HandlingOperational ConfigurationUser experience
0 likes · 7 min read
Error Message Governance System: A Frontend Solution for Better User Experience
Ximalaya Technology Team
Ximalaya Technology Team
Nov 28, 2023 · Frontend Development

An Overview of ArkTS: Origin, Evolution, Declarative UI Paradigm, and State Management

ArkTS, Huawei’s evolution of JavaScript and TypeScript, provides a declarative UI framework with enhanced rendering, cross‑OS support, and streamlined state management through @State, @StorageLink, and AppStorage, enabling developers to build concise, high‑performance HarmonyOS applications using familiar JS/TS syntax.

Declarative UIHarmonyOSState Management
0 likes · 10 min read
An Overview of ArkTS: Origin, Evolution, Declarative UI Paradigm, and State Management
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 24, 2023 · Frontend Development

Understanding JavaScript Event Loop, Microtasks and Macrotasks

This article explains JavaScript’s single‑threaded nature, the event loop mechanism, and the distinction between microtasks and macrotasks, illustrating their execution order with detailed code examples and step‑by‑step analysis to help developers grasp asynchronous behavior in front‑end development.

JavaScriptevent loopfrontend development
0 likes · 7 min read
Understanding JavaScript Event Loop, Microtasks and Macrotasks
Bilibili Tech
Bilibili Tech
Nov 21, 2023 · Frontend Development

AV1 Video Encoding Standard and BILIAV1 Self-Developed Encoder

AV1, an open royalty‑free video codec finalized in 2018, delivers roughly 20 % lower bitrate than H.265 and is supported by major players and hardware, while Bilibili’s self‑developed BILIAV1 encoder, built from scratch, beats SVT‑AV1 by 15‑20 % bitrate at equal speed through advanced TRACE debugging, parallel processing and optimized algorithms, with future work targeting P2P and live‑streaming applications.

AV1BILIAV1Encoder Development
0 likes · 13 min read
AV1 Video Encoding Standard and BILIAV1 Self-Developed Encoder
Top Architect
Top Architect
Nov 20, 2023 · Backend Development

Real‑Time Monitoring System Using WebSocket with SpringBoot and Vue

This article demonstrates how to build a real‑time equipment‑monitoring solution by using WebSocket for server‑to‑client push, with a SpringBoot backend that handles WebSocket connections and a Vue.js front‑end that visualizes device status and updates instantly when an abnormal event is reported.

SpringBootVue.jsWebSocket
0 likes · 11 min read
Real‑Time Monitoring System Using WebSocket with SpringBoot and Vue
Alibaba Cloud Developer
Alibaba Cloud Developer
Nov 7, 2023 · Frontend Development

How to Turn Technical Debt into Growth: Refactoring Lessons from Alibaba Cloud

This article shares a developer’s three‑year journey on Alibaba Cloud’s platform, exploring the nature of technical debt, categorizing its causes, and illustrating how micro‑refactorings and configuration‑driven upgrades can steadily improve code quality, accelerate feature delivery, and align engineering with business goals.

ConfigurationSoftware ArchitectureTechnical Debt
0 likes · 10 min read
How to Turn Technical Debt into Growth: Refactoring Lessons from Alibaba Cloud
Sohu Tech Products
Sohu Tech Products
Nov 1, 2023 · Frontend Development

ESLint vs. Prettier: History, Conflict, and the Deprecation of Formatting Rules

The article traces ESLint’s evolution from a JSLint‑style checker to the dominant JavaScript linter, explains its long‑standing clash with the opinionated formatter Prettier over code‑style rules, and details the team’s decision in v8.53.0 to deprecate built‑in formatting rules in favor of external style plugins and market‑driven style guides.

Code FormattingESLintJavaScript
0 likes · 10 min read
ESLint vs. Prettier: History, Conflict, and the Deprecation of Formatting Rules
ByteFE
ByteFE
Nov 1, 2023 · Frontend Development

Browser Engine Architecture and Rendering Process: From WebKit to Blink

This article explains the core components and rendering pipeline of modern browser engines, compares them with 3D graphics engines, and discusses the evolution of both browser and graphics technologies, providing a comprehensive overview for front‑end and graphics developers.

Rendering PipelineWebCoreWebKit
0 likes · 19 min read
Browser Engine Architecture and Rendering Process: From WebKit to Blink
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 10, 2023 · Frontend Development

Deep Dive into LeaferJS: Architecture, Rendering Performance, Update Mechanism, and Event Picking

This article analyses the LeaferJS canvas rendering engine, covering its lightweight node creation, core architecture, rendering pipeline, partial‑render optimization, and event‑picking mechanism, while providing code examples and performance insights for front‑end developers.

Canvas RenderingJavaScriptLeaferJS
0 likes · 14 min read
Deep Dive into LeaferJS: Architecture, Rendering Performance, Update Mechanism, and Event Picking
KooFE Frontend Team
KooFE Frontend Team
Sep 24, 2023 · Frontend Development

Mastering React Design Patterns: Composite, Uncontrolled, and Render Props

Explore essential React design patterns—including component composition, uncontrolled composite components, and render props—through detailed explanations, practical code examples, and best practices that improve maintainability, scalability, and developer experience in modern frontend development.

Compound ComponentPortalReact
0 likes · 15 min read
Mastering React Design Patterns: Composite, Uncontrolled, and Render Props
php Courses
php Courses
Sep 18, 2023 · Frontend Development

9 Essential Vue.js Plugins for Frontend Development

This article introduces nine practical Vue.js plugins—including Vuetify, Vue Router, Vuex, Vue-i18n, Vue-lazyload, Vue-awesome-swiper, Vue-chartjs, Vue-meta, and Vue-awesome—detailing their features and providing code examples to help front‑end developers improve efficiency and code elegance.

PluginsState ManagementUI
0 likes · 10 min read
9 Essential Vue.js Plugins for Frontend Development
360 Quality & Efficiency
360 Quality & Efficiency
Sep 15, 2023 · Frontend Development

Optimizing Webpack Hot Module Replacement Speed: Plugins, Sourcemap, runtimeChunk, and Multi‑Page Strategies

This article explains webpack's hot module replacement mechanism and presents a series of practical optimizations—including disabling CompressionPlugin, selecting fast sourcemap types, configuring runtimeChunk as single, and using babel-plugin-dynamic-import-node—to reduce hot‑update build time from 12 seconds to around 1 second.

Hot Module ReplacementSourceMapfrontend development
0 likes · 9 min read
Optimizing Webpack Hot Module Replacement Speed: Plugins, Sourcemap, runtimeChunk, and Multi‑Page Strategies
ByteFE
ByteFE
Sep 13, 2023 · Frontend Development

VisActor Animation Implementation Principles

This article explains VisActor's animation system, detailing animation definition, trigger mechanisms, basic units like timeline and timeslice, effect configuration, global morphing via Bezier curves, and demonstrates one-to-one, one-to-many, and many-to-one shape transformations with code examples and demos.

Bezier CurvesVisActorfrontend development
0 likes · 16 min read
VisActor Animation Implementation Principles
php Courses
php Courses
Sep 10, 2023 · Frontend Development

Implementing Dynamic Add/Remove Form Items with Vue.js

This article guides developers through building a Vue.js component that supports dynamically adding, removing, and submitting multiple form entries, complete with step-by-step explanations and full code examples for handling form data on the client side.

Dynamic FormsJavaScriptVue.js
0 likes · 5 min read
Implementing Dynamic Add/Remove Form Items with Vue.js
Tencent Cloud Developer
Tencent Cloud Developer
Sep 4, 2023 · Frontend Development

Microkernel Architecture and Plugin System Design: Principles, Practices, and H5 Cloud Gaming Case Study

The article explains microkernel (plugin) architecture principles, compares pipeline, onion, and event‑based plugin patterns, illustrates implementations in VS Code, Gulp, and Webpack, and presents an H5 cloud‑gaming SDK case study that refactors plugin management with classified responsibilities, JavaScript Proxies, and open‑closed design for extensibility.

Plugin SystemVS Codeevent-driven programming
0 likes · 31 min read
Microkernel Architecture and Plugin System Design: Principles, Practices, and H5 Cloud Gaming Case Study
21CTO
21CTO
Sep 1, 2023 · Frontend Development

Run Python Directly in the Browser with PyScript: A Step‑by‑Step Guide

This article introduces PyScript, explains how it compiles Python to WebAssembly for client‑side execution, and provides a complete tutorial—including setup, a Hello World example, and code explanations—to help developers embed Python seamlessly into HTML web pages.

HTMLPyScriptPython in Browser
0 likes · 7 min read
Run Python Directly in the Browser with PyScript: A Step‑by‑Step Guide
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Aug 31, 2023 · Frontend Development

Tango: A Low-Code Framework for Frontend Development

Tango is an open-source, AST-driven low-code framework that reads existing frontend source code to provide a visual, bidirectional development experience, generating TypeScript with full type definitions, integrating seamlessly with current build pipelines, and supporting community-driven component contributions via its decoupled engine.

AST-drivenTypeScriptfrontend development
0 likes · 6 min read
Tango: A Low-Code Framework for Frontend Development
Test Development Learning Exchange
Test Development Learning Exchange
Aug 28, 2023 · Frontend Development

Python Playwright UI Automation Tutorial

This article provides a comprehensive guide to learning Python Playwright for UI automation, covering installation, basic concepts, script writing, page interactions, element handling, multi-page management, browser contexts, waiting strategies, testing, and advanced practices.

Browser AutomationPlaywrightPython
0 likes · 5 min read
Python Playwright UI Automation Tutorial
Ximalaya Technology Team
Ximalaya Technology Team
Aug 24, 2023 · Frontend Development

Using Redux Toolkit for State Management in React and React Native

This article demonstrates how to replace classic Redux boilerplate with Redux Toolkit in a React Todo List app by creating a slice, configuring the store, providing it via Provider, and using useSelector and useDispatch, highlighting the simplified setup and clearer state management for both React and React Native.

JavaScriptReactRedux Toolkit
0 likes · 10 min read
Using Redux Toolkit for State Management in React and React Native
MoonWebTeam
MoonWebTeam
Aug 23, 2023 · Frontend Development

Unlocking Flexibility: How Microkernel Architecture Powers Modern Front‑End Plugin Systems

This article explains the principles, advantages, and classifications of microkernel (plugin) architecture, demonstrates three common plugin patterns—pipeline, onion, and event‑driven—with real‑world examples such as VS Code, Gulp, and webpack, and shares practical implementation steps and best practices for applying microkernel design in front‑end projects.

Event-drivencode modularityfrontend development
0 likes · 32 min read
Unlocking Flexibility: How Microkernel Architecture Powers Modern Front‑End Plugin Systems
Kuaishou E-commerce Frontend Team
Kuaishou E-commerce Frontend Team
Aug 17, 2023 · Frontend Development

How DAGs Supercharge Frontend Performance and Workflow Automation

This article explains how directed acyclic graphs (DAGs) are applied in frontend development for resource loading optimization, component library construction, and task flow orchestration, and demonstrates a real-world implementation in Kuaishou's e‑commerce advertising engine with detailed architecture and code examples.

Component LibraryDAGVisual Programming
0 likes · 14 min read
How DAGs Supercharge Frontend Performance and Workflow Automation
We-Design
We-Design
Aug 16, 2023 · Frontend Development

Mastering Keyboard Shortcuts: Design Principles and Best Practices

This article explains why keyboard shortcuts boost efficiency, reduce fatigue, and improve precision, classifies accelerators and access keys, outlines discoverable, conflict‑free, and memorable design principles, and provides a step‑by‑step workflow for creating a robust shortcut system across platforms.

Human-Computer InteractionUI designfrontend development
0 likes · 7 min read
Mastering Keyboard Shortcuts: Design Principles and Best Practices
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 14, 2023 · Frontend Development

Three.js API Wrapper and 3D Visualization in a Vue3 Project

This article introduces the fundamentals of Three.js, demonstrates how to encapsulate its core APIs into a Viewer class, and walks through building a Vue3-based 3D visualization project with scene, camera, lighting, model loading, skybox, mouse interaction, and helper utilities.

3d-visualizationJavaScriptVue3
0 likes · 13 min read
Three.js API Wrapper and 3D Visualization in a Vue3 Project
Alibaba Terminal Technology
Alibaba Terminal Technology
Aug 11, 2023 · Frontend Development

Mastering Conditional Compilation for Efficient Cross‑Platform Mini‑Program Development

This article explains how conditional compilation can eliminate redundant code in cross‑platform mini‑program projects, describes the syntax and implementation details in MorJS, and shows practical examples for code‑level and file‑level compilation strategies that improve performance, maintainability, and product consistency.

Code OptimizationMini ProgramMorJS
0 likes · 15 min read
Mastering Conditional Compilation for Efficient Cross‑Platform Mini‑Program Development
21CTO
21CTO
Aug 3, 2023 · Fundamentals

What Is WebAssembly and Why It Matters for Modern Web Development

This article explains what WebAssembly is, why it is needed for high‑performance web applications, how it works internally, which languages can target it, typical use cases, and provides practical examples of loading and using WebAssembly modules in browsers and Node.js.

CompilationJavaScriptRust
0 likes · 11 min read
What Is WebAssembly and Why It Matters for Modern Web Development
IT Services Circle
IT Services Circle
Jul 20, 2023 · Frontend Development

Chrome v115 Update: Mica Design, Refresh 2023 UI, reCAPTCHA Automation, Third‑Party Login Block, and Privacy Sandbox (Topics API)

The Chrome v115 release introduces Windows 11 Mica material design, an optional Refresh 2023 UI, automated reCAPTCHA verification, a switch to block third‑party login prompts, and a privacy sandbox powered by Topics API, with download links and configuration steps for each new feature.

Browser UpdateChromeMica Design
0 likes · 5 min read
Chrome v115 Update: Mica Design, Refresh 2023 UI, reCAPTCHA Automation, Third‑Party Login Block, and Privacy Sandbox (Topics API)
Spring Full-Stack Practical Cases
Spring Full-Stack Practical Cases
Jul 17, 2023 · Frontend Development

Master 9 Essential JavaScript Techniques: Dynamic Loading, Templates, Reduce, and More

This article walks through nine practical JavaScript patterns—including dynamic script loading, a lightweight template engine, data transformation with reduce, default parameters, one‑time execution, currying, singleton implementation, a simple CommonJS loader, and recursive property access—providing clear code examples for each.

Dynamic LoadingJavaScriptTemplate Engine
0 likes · 11 min read
Master 9 Essential JavaScript Techniques: Dynamic Loading, Templates, Reduce, and More
IT Services Circle
IT Services Circle
Jul 14, 2023 · Frontend Development

How Bilibili and Zhihu Achieve Fast Video Playback Using HTTP Range Requests and SourceBuffer

This article explains how video platforms like Bilibili and Zhihu use HTTP Range requests to fetch specific byte segments of a video and the browser's SourceBuffer API to dynamically append those fragments, enabling instant seeking and smooth playback without downloading the entire file.

HTTP RangeMedia Source ExtensionsSourceBuffer
0 likes · 7 min read
How Bilibili and Zhihu Achieve Fast Video Playback Using HTTP Range Requests and SourceBuffer
21CTO
21CTO
Jul 2, 2023 · Artificial Intelligence

Why AI Pioneer Geoffrey Hinton Urges a Pause Before Machines Surpass Humans

At Collision 2023, AI pioneer Geoffrey Hinton warned governments to curb AI before it outsmarts humanity, while industry leaders announced NTT DATA’s global generative AI lab, the release of Svelte 4, GitHub Enterprise Server 3.9, new Linux kernel versions, and Uno Platform’s VS Code extension for mobile debugging.

AI ethicsSoftware Releaseartificial intelligence
0 likes · 12 min read
Why AI Pioneer Geoffrey Hinton Urges a Pause Before Machines Surpass Humans
JD.com Experience Design Center
JD.com Experience Design Center
Jun 28, 2023 · Frontend Development

How to Upgrade B2B Logistics Map Interaction Standards for Better UX

This article outlines the rationale, analysis, and detailed design proposals for upgrading B2B logistics map interaction standards, covering layout variations, element sizing, drill‑down mechanisms, and usability considerations to ensure consistent, efficient, and user‑friendly map experiences across diverse business scenarios.

User experiencedesign systemfrontend development
0 likes · 16 min read
How to Upgrade B2B Logistics Map Interaction Standards for Better UX
FunTester
FunTester
Jun 15, 2023 · Frontend Development

How to Write Reusable Code in Frontend Development

This article explains how to write reusable frontend code by identifying and separating reusable parts such as UI components, API calls, business workflows, shared data, and utility functions, illustrating each with React and Vue examples, code snippets, and best‑practice recommendations.

APIReactVue
0 likes · 7 min read
How to Write Reusable Code in Frontend Development
Tencent Cloud Developer
Tencent Cloud Developer
Jun 12, 2023 · Artificial Intelligence

How AI Can Supercharge Front‑End Development with Low‑Code Platforms

This article explains what AIGC is, explores the current challenges of front‑end productivity, and shows how AI—especially ChatGPT—can be integrated into low‑code platforms through prompt engineering, enabling automatic page generation, layout editing, and component creation to dramatically boost development efficiency.

AIAIGCChatGPT
0 likes · 15 min read
How AI Can Supercharge Front‑End Development with Low‑Code Platforms
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jun 2, 2023 · Frontend Development

How NetEase Cloud Music’s Front‑End Team Built an AI‑Powered Low‑Code Copilot

NetEase Cloud Music’s front‑end team integrated large language models into their internal low‑code platform, creating an AI Copilot that supports smart page creation, editing, component configuration, code snippet generation, and Q&A, while detailing the underlying architecture, prompt engineering, and mixed‑mode development workflow.

AI CopilotMixed DevelopmentPrompt engineering
0 likes · 11 min read
How NetEase Cloud Music’s Front‑End Team Built an AI‑Powered Low‑Code Copilot
KooFE Frontend Team
KooFE Frontend Team
Jun 1, 2023 · Frontend Development

How React’s API Evolution Shapes Modern UI Development

This article explores the evolution of React’s APIs—from early mixins to higher‑order components, render props, and Hooks—examining the mental models, trade‑offs, and best practices that guide developers in building maintainable, performant front‑end applications.

API EvolutionHigher-Order ComponentsReact
0 likes · 20 min read
How React’s API Evolution Shapes Modern UI Development
Ctrip Technology
Ctrip Technology
Jun 1, 2023 · Frontend Development

Cross‑Platform Shared Web Components: Architecture, Implementation, and Host Integration

This article describes a cross‑platform solution that enables a single set of Web component code to be shared across Native, React Native, and mini‑program environments by leveraging Web Components, environment‑aware builds, and bridge communication, thereby reducing development effort and accelerating release cycles.

Mini ProgramReactfrontend development
0 likes · 14 min read
Cross‑Platform Shared Web Components: Architecture, Implementation, and Host Integration
Architecture Digest
Architecture Digest
May 30, 2023 · Backend Development

Lightweight Redis Admin Tool – Overview, Architecture, Installation, and Future Plans

This document introduces a lightweight Redis graphical management tool, outlines its Spring Boot backend and Vue frontend architecture, provides step‑by‑step installation instructions including Docker deployment, details recent feature enhancements such as multi‑user support and permission control, and mentions future plans for clustering and sentinel modes.

Backend DevelopmentSpring BootVue
0 likes · 3 min read
Lightweight Redis Admin Tool – Overview, Architecture, Installation, and Future Plans
政采云技术
政采云技术
May 24, 2023 · Frontend Development

LocatorJS Source Code Analysis: Architecture, Chrome Extension Integration, and Runtime Mechanics

This article provides a detailed walkthrough of LocatorJS, covering how to clone the repository, set up the development environment, explore the Chrome extension code, and dissect the runtime implementation that leverages React fiber, SolidJS components, and Babel plugins to enable precise code‑to‑UI mapping.

Babel PluginChrome ExtensionLocatorJS
0 likes · 11 min read
LocatorJS Source Code Analysis: Architecture, Chrome Extension Integration, and Runtime Mechanics
Zhaori User Experience
Zhaori User Experience
May 19, 2023 · Frontend Development

How to Tackle Unexpected UI Risks with Five‑Question Method and Rapid Prototyping

This article walks through a real‑world banking UI case, showing how an interaction designer uses risk classification, the five‑question method, rapid sketching, iterative feedback, and structured reporting to uncover hidden requirements, resolve design conflicts, and ensure robust frontend delivery.

Interaction DesignProject ManagementUX
0 likes · 12 min read
How to Tackle Unexpected UI Risks with Five‑Question Method and Rapid Prototyping
Qunar Tech Salon
Qunar Tech Salon
May 17, 2023 · Frontend Development

QTest & QClient Technical Journey: Event Overview and Talk Summaries

The QTest and QClient technical journey event on May 23, 2023 features multiple expert talks on performance testing, AI‑enhanced frontend engineering, Serverless visualisation, user‑behavior replay, and a new React framework, along with registration details, promotional items, and recruitment information.

AIPerformance TestingQTest
0 likes · 5 min read
QTest & QClient Technical Journey: Event Overview and Talk Summaries
php Courses
php Courses
May 1, 2023 · Frontend Development

Pure CSS3 Image Carousel Using Flexbox and Keyframe Animation

This tutorial explains how to build a pure‑CSS3 image carousel with a clean, minimalist look by using Flexbox layout and @keyframes animation, providing complete HTML and CSS code that runs without any JavaScript, making it a handy reference for front‑end developers.

FlexboxImage Slidercss3
0 likes · 3 min read
Pure CSS3 Image Carousel Using Flexbox and Keyframe Animation
Zhaori User Experience
Zhaori User Experience
Apr 28, 2023 · Frontend Development

What McDonald’s Can Teach Us About Building Reusable UI Components

This article explores how McDonald’s standardized production model illustrates the concept of basic UI components, compares them with business‑level components, and shares a real‑world case study of designing advanced components to improve efficiency and consistency in frontend development.

ReusabilityUI componentsbusiness components
0 likes · 9 min read
What McDonald’s Can Teach Us About Building Reusable UI Components
JavaScript
JavaScript
Apr 27, 2023 · Frontend Development

Master Real-Time Frontend: Long Polling vs Server-Sent Events Explained

Explore how long polling and Server‑Sent Events enable real‑time data exchange in front‑end development, comparing their principles, advantages, drawbacks, and providing practical JavaScript examples to help you choose the optimal technique for your application.

JavaScriptServer-Sent Eventsfrontend development
0 likes · 5 min read
Master Real-Time Frontend: Long Polling vs Server-Sent Events Explained
Alipay Experience Technology
Alipay Experience Technology
Apr 25, 2023 · Frontend Development

How a 100‑Line React Chart Library Sparked a Decade of Open‑Source Leadership

This interview chronicles Wang Zhiwei’s journey from a university student experimenting with GitHub to the CTO of AntV, highlighting how his 100‑line Echarts‑for‑React component launched a thriving open‑source career, shaped Ant Group’s culture, and offers practical advice for developers eager to contribute to open source.

AntVData visualizationDeveloper Experience
0 likes · 10 min read
How a 100‑Line React Chart Library Sparked a Decade of Open‑Source Leadership
ByteFE
ByteFE
Apr 17, 2023 · Frontend Development

rrweb: A Deep Dive into Web Page Recording and Replay Mechanism

rrweb is an open-source library that records web page DOM changes as JSON arrays instead of video streams, enabling precise replay of user interactions without compression artifacts or storage overhead.

DOM recordingJavaScriptMutationObserver
0 likes · 20 min read
rrweb: A Deep Dive into Web Page Recording and Replay Mechanism
Bilibili Tech
Bilibili Tech
Apr 14, 2023 · Frontend Development

Understanding Chrome's Multi‑Process Architecture and Rendering Pipeline

Chrome separates browsing tasks into distinct browser, renderer, plugin, and GPU processes, parses HTML/CSS into DOM, layout, paint, and compositing trees, rasterizes tiles on a compositing thread, and uses the GPU process to display frames, enabling optimized, smooth animations such as danmaku while balancing memory usage and security.

Browser ArchitectureChromePerformance Optimization
0 likes · 14 min read
Understanding Chrome's Multi‑Process Architecture and Rendering Pipeline
Huawei Cloud Developer Alliance
Huawei Cloud Developer Alliance
Apr 13, 2023 · Frontend Development

Why TypeScript Is Essential for Modern Frontend Development – A Complete Guide

This article explains the rapid rise of TypeScript in front‑end engineering, outlines its four key benefits, provides a five‑minute crash course on basic types, functions, arrays, interfaces, generics and Vue integration, and offers a step‑by‑step guide for converting existing JavaScript projects to TypeScript while inviting developers to join the TinyVue open‑source community.

GenericsJavaScript MigrationTypeScript
0 likes · 20 min read
Why TypeScript Is Essential for Modern Frontend Development – A Complete Guide
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 13, 2023 · Frontend Development

What Is MorJS and How It Enables One-Code Multi-Platform Mini‑Program Development

MorJS is an open‑source, extensible framework that lets developers write a single mini‑program using a native DSL and compile it into deployable artifacts for multiple platforms—including WeChat, Alipay, Baidu, ByteDance, DingTalk, Kuaishou, QQ, Taobao, and H5—while offering plugins, form conversion, and H5 integration.

Mini ProgramMorJScross-platform compilation
0 likes · 13 min read
What Is MorJS and How It Enables One-Code Multi-Platform Mini‑Program Development
政采云技术
政采云技术
Apr 12, 2023 · Frontend Development

ZRender and ECharts: A Comprehensive Guide to 2D Graphics Rendering

This article provides an in-depth exploration of ZRender, a lightweight 2D graphics rendering engine, and its relationship with ECharts, covering installation, basic usage, drawing shapes, interactive effects, and practical applications.

2D GraphicsCanvas RenderingData visualization
0 likes · 10 min read
ZRender and ECharts: A Comprehensive Guide to 2D Graphics Rendering
JavaScript
JavaScript
Apr 11, 2023 · Frontend Development

10 Common JavaScript Pitfalls and How to Avoid Them

Discover the ten most frequent JavaScript mistakes—from implicit type coercion and var scoping issues to DOM inefficiencies, prototype modifications, global variables, missing semicolons, improper loops, NaN comparisons, eval usage, ignored error handling, and this binding pitfalls—and learn best practices to write safer, more maintainable code.

JavaScriptcoding-errorscommon pitfalls
0 likes · 10 min read
10 Common JavaScript Pitfalls and How to Avoid Them
Qborfy AI
Qborfy AI
Apr 6, 2023 · Frontend Development

How to Build a Vue‑Powered Chrome Extension with Vite and Rollup

This guide walks through creating a Chrome extension using Vue and Vite, covering project initialization, multi‑entry Rollup configuration for background scripts, UI development with tdesign‑vue‑next, debugging hash‑related loading issues, and final deployment steps.

Chrome ExtensionRollupVite
0 likes · 8 min read
How to Build a Vue‑Powered Chrome Extension with Vite and Rollup
Baidu Geek Talk
Baidu Geek Talk
Apr 6, 2023 · Frontend Development

How to Build a Fast Custom WebAssembly Frame Extraction with FFmpeg

This article explains a WebAssembly‑based video frame extraction technique that replaces the traditional canvas approach by compiling FFmpeg to Wasm, running it in a Web Worker, and using a key‑frame‑first strategy to deliver high‑quality cover images with lower latency and a dramatically smaller bundle size.

Custom CompilationVideo Frame ExtractionWeb Worker
0 likes · 20 min read
How to Build a Fast Custom WebAssembly Frame Extraction with FFmpeg
Selected Java Interview Questions
Selected Java Interview Questions
Apr 1, 2023 · Frontend Development

Creating a Chrome Extension to Copy Image Alt Text Using GPT‑Generated JavaScript

The article describes how the author leveraged GPT‑4 to generate JavaScript bookmarklet code, troubleshoot errors, and ultimately build a Chrome extension named “image‑alt‑copier” that extracts and copies alt text from Midjourney images, illustrating low‑bar entry into web development.

Chrome ExtensionGPT-4JavaScript
0 likes · 4 min read
Creating a Chrome Extension to Copy Image Alt Text Using GPT‑Generated JavaScript
ByteFE
ByteFE
Mar 29, 2023 · Frontend Development

An Introduction to WebAssembly: History, Advantages, and a Mandelbrot Demo

This article introduces WebAssembly, tracing its evolution from asm.js and NaCl to the modern binary format, outlines its performance, portability, and security benefits, and demonstrates its practical use by building a Mandelbrot set application with AssemblyScript and WebAssembly in the browser.

AssemblyScriptBrowserMandelbrot
0 likes · 20 min read
An Introduction to WebAssembly: History, Advantages, and a Mandelbrot Demo
Huolala Tech
Huolala Tech
Mar 28, 2023 · Frontend Development

How to Optimize React Context to Prevent Unnecessary Re‑renders

Learn how to effectively use React Context for state management, avoid props drilling, and eliminate redundant re‑renders by implementing a custom publish‑subscribe store, selector hooks, and performance optimizations similar to libraries like zustand.

Performance OptimizationPublish-SubscribeReact
0 likes · 11 min read
How to Optimize React Context to Prevent Unnecessary Re‑renders
21CTO
21CTO
Mar 20, 2023 · Frontend Development

What’s New in TypeScript 5.0? 50+ Features Boost Speed and Simplicity

TypeScript 5.0 arrives with over 50 new features—including decorators, enhanced ESM support, and expanded JSDoc—while optimizing memory, performance, and bundle size, making the language smaller, simpler, and faster for most developers.

ESMJSDocJavaScript
0 likes · 3 min read
What’s New in TypeScript 5.0? 50+ Features Boost Speed and Simplicity
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Mar 13, 2023 · Frontend Development

Understanding Plugin Systems: Concepts, Types, and Implementation in Front‑end Development

The article explains plugin systems by likening them to interchangeable vacuum‑cleaner heads, outlines their benefits, defines core‑and‑plugin architecture, describes four plugin styles with code examples, and demonstrates building a minimal front‑end calculator plugin framework that emphasizes a stable core and extensible modules.

Design PatternsJavaScriptPlugin System
0 likes · 19 min read
Understanding Plugin Systems: Concepts, Types, and Implementation in Front‑end Development
php Courses
php Courses
Mar 10, 2023 · Frontend Development

Differences Between Vue 2 and Vue 3: Reactivity, Runtime, Compiler, and New Features

The article explains how Vue 3 improves upon Vue 2 by replacing Object.defineProperty with Proxy for reactivity, introducing a refined runtime renderer, a compiler that transforms templates into render functions, and new features such as the Composition API, script setup, and built‑in components like Fragment and Teleport.

Composition APIReactivityVue
0 likes · 6 min read
Differences Between Vue 2 and Vue 3: Reactivity, Runtime, Compiler, and New Features
Laravel Tech Community
Laravel Tech Community
Mar 8, 2023 · Frontend Development

Google Chrome 111 Introduces Improved Download UI, View Transitions API, Automatic Permission Revocation, and New Document Picture-in-Picture API

Chrome 111, released a month after Chrome 110, brings a refined download bubble UI, a numeric download count, smoother page transition support via the View Transitions API, automatic revocation of unused site permissions, and a new Document Picture-in-Picture API for richer web experiences.

ChromePicture-in-PictureView Transitions
0 likes · 3 min read
Google Chrome 111 Introduces Improved Download UI, View Transitions API, Automatic Permission Revocation, and New Document Picture-in-Picture API
HomeTech
HomeTech
Mar 8, 2023 · Frontend Development

Top Core Web Vitals Recommendations for 2023: Optimizing LCP, CLS, FID, and INP

This article outlines Google's most impactful 2023 recommendations for improving Core Web Vitals—Largest Contentful Paint, Cumulative Layout Shift, First Input Delay, and Interaction to Next Paint—providing practical, high‑priority techniques such as ensuring LCP resources are discoverable, prioritized, and optimizing TTFB, CLS, and JavaScript performance.

CLSFIDINP
0 likes · 22 min read
Top Core Web Vitals Recommendations for 2023: Optimizing LCP, CLS, FID, and INP
ByteFE
ByteFE
Feb 13, 2023 · Frontend Development

Understanding ESLint: Principles, Configuration, AST, and Custom Rule Development

This article explains the fundamentals of ESLint, including its purpose, configuration files, AST-based analysis, the SourceCode abstraction, rule template creation, key functions, and the overall linting and fixing workflow, enabling developers to build custom linting plugins for consistent code style.

ASTCustom RulesESLint
0 likes · 14 min read
Understanding ESLint: Principles, Configuration, AST, and Custom Rule Development
Architecture & Thinking
Architecture & Thinking
Feb 9, 2023 · Frontend Development

Unlock Micro‑Frontend Power: How Module Federation Simplifies Shared Modules

This article introduces the concept and motivation behind Webpack's Module Federation, explains host and remote roles, outlines practical use cases such as micro‑frontend architecture and resource sharing, and provides a step‑by‑step code walkthrough—including configuration, shared dependencies, and runtime loading—to help developers quickly adopt this decentralized module‑sharing technique.

Micro FrontendsModule Federationfrontend development
0 likes · 8 min read
Unlock Micro‑Frontend Power: How Module Federation Simplifies Shared Modules
JD Retail Technology
JD Retail Technology
Feb 9, 2023 · Frontend Development

MicroApp V1.0.0‑rc Release: Core Architecture, High‑Performance Sandbox, New Configurations, and Real‑World Use Cases

The MicroApp V1.0.0‑rc release introduces a component‑based micro‑frontend solution with a custom WebComponent‑like architecture, a virtual routing system, a high‑performance sandbox that leverages caching and decoupling, extensive performance benchmarks, new configuration options, lifecycle listeners, and a practical JD marketing‑center case study.

JavaScriptfrontend developmentmicro-frontend
0 likes · 11 min read
MicroApp V1.0.0‑rc Release: Core Architecture, High‑Performance Sandbox, New Configurations, and Real‑World Use Cases
DaTaobao Tech
DaTaobao Tech
Feb 6, 2023 · Frontend Development

WebAssembly Overview and Rust Development Guide

This article introduces WebAssembly’s efficient, safe, open standards and LLVM‑based compilation pipeline, then guides Rust developers through installing tools, writing and binding simple functions, optimizing performance and bundle size, and explores tooling, runtimes, real‑world use cases, current limitations, and future extensions such as WASI, SIMD, and threads.

LLVMPerformance OptimizationRust
0 likes · 30 min read
WebAssembly Overview and Rust Development Guide
KooFE Frontend Team
KooFE Frontend Team
Jan 28, 2023 · Frontend Development

Redesigning Excalidraw’s Component API: From Render Props to Child Components

The article explains how Excalidraw’s new component API replaces render props with a child‑component approach, introduces customizable MainMenu, Footer, and WelcomeScreen components, provides code examples, and discusses the benefits and limitations of this redesign for developers building custom whiteboard applications.

ReactUI customizationcomponent API
0 likes · 10 min read
Redesigning Excalidraw’s Component API: From Render Props to Child Components
Java High-Performance Architecture
Java High-Performance Architecture
Jan 19, 2023 · Backend Development

Explore a Complete Graduation Project Selection System: Backend & Frontend Architecture

This article introduces a streamlined graduation project selection system supporting teachers, students, and administrators, detailing its backend and frontend architectures, core modules such as login, registration, topic selection, and management features, and explains how to obtain the full source code.

System ArchitectureUser Managementfrontend development
0 likes · 4 min read
Explore a Complete Graduation Project Selection System: Backend & Frontend Architecture
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jan 13, 2023 · Frontend Development

TypeScript Dictionary Factory Function with Type Hints

The article introduces a TypeScript dictionary factory that, using generics and `as const` assertions, converts a single source definition into multiple strongly‑typed representations (KV, VK, list, maps), eliminating duplication and keeping business dictionaries synchronized while providing full IntelliSense, albeit with some TypeScript‑only limitations.

Conditional TypesGenericsMapped Types
0 likes · 13 min read
TypeScript Dictionary Factory Function with Type Hints
Java Backend Technology
Java Backend Technology
Jan 11, 2023 · Frontend Development

Master uni-app: Build Cross‑Platform Apps with One Codebase

This guide introduces uni-app—a Vue‑based framework that lets developers write a single codebase and deploy to iOS, Android, H5, and various mini‑programs—covers its key advantages, environment setup with HBuilder X or vue‑cli, project creation, platform‑specific building, Flex layout, and background‑image handling.

FlexboxMobileVue
0 likes · 19 min read
Master uni-app: Build Cross‑Platform Apps with One Codebase
21CTO
21CTO
Dec 30, 2022 · Frontend Development

Can Rust Revolutionize Frontend Development with WebAssembly?

This article explores how Rust’s safety, performance, and WebAssembly integration make it a compelling option for modern frontend development, highlighting industry insights, real‑world use cases, and the language’s growing popularity among developers.

Memory SafetyRustWebAssembly
0 likes · 5 min read
Can Rust Revolutionize Frontend Development with WebAssembly?
Programmer DD
Programmer DD
Dec 30, 2022 · Frontend Development

How Firefox’s New Accessibility Engine Supercharges Performance

The article explains how Firefox redesigned its accessibility engine—moving from a complex, multi‑process architecture to an asynchronous, cache‑driven model—to dramatically speed up screen‑reader interactions, cut thousands of lines of code, and roll out the improvements across Windows and Linux browsers.

Browser ArchitectureFirefoxfrontend development
0 likes · 6 min read
How Firefox’s New Accessibility Engine Supercharges Performance
Zhaori User Experience
Zhaori User Experience
Dec 23, 2022 · Frontend Development

Mastering Filter Design: Boost User Efficiency in B2B Interfaces

This guide explores the principles, types, feedback mechanisms, and best practices of filter components in B2B product design, illustrating how precise and fuzzy search, dropdowns, matrix, tab, and combined filters can improve data discovery while addressing usability trade‑offs.

B2B interfaceUI/UXfilter design
0 likes · 12 min read
Mastering Filter Design: Boost User Efficiency in B2B Interfaces
vivo Internet Technology
vivo Internet Technology
Dec 21, 2022 · Frontend Development

Low‑Code Platform Practices at vivo: Front‑Back End Separation, Custom Rendering Engine, and Visual Configuration

Vivo’s Houyi low‑code platform separates front‑ and back‑end, uses a self‑built JSON‑schema rendering engine, offers drag‑and‑drop visual configuration, scales to trillion‑level content delivery with sharded MongoDB and Redis, and seamlessly coexists with traditional code through iframe and SDK extensions.

Content DeliveryRendering Enginebackend separation
0 likes · 17 min read
Low‑Code Platform Practices at vivo: Front‑Back End Separation, Custom Rendering Engine, and Visual Configuration
Alipay Experience Technology
Alipay Experience Technology
Dec 16, 2022 · Frontend Development

Unlocking Progressive State Management with Zustand – Is There a Silver Bullet?

This article walks through using the Zustand state‑management library in a complex React component, covering store initialization, actions, selectors, modular file structure, handling controlled vs uncontrolled modes, performance optimizations, and devtools integration, while sharing practical tips and code examples for scalable frontend development.

Controlled ComponentsReactState Management
0 likes · 30 min read
Unlocking Progressive State Management with Zustand – Is There a Silver Bullet?