BestHub
Sign in
Tagged articles

frontend development

802 articles · Page 3 of 9
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 10, 2024 · Frontend Development

Understanding Web Components: Core Concepts, Custom Elements, Shadow DOM, Slots, and Templates

This article introduces Web Components—a W3C‑standardized technology supported by all major browsers—explaining its core concepts (Custom Elements, Shadow DOM, Templates, Slots), providing step‑by‑step code examples, discussing lifecycle callbacks, compatibility, polyfills, and how it compares with frameworks like React and Vue.

Shadow DOM__slots__custom elements
0 likes · 22 min read
Understanding Web Components: Core Concepts, Custom Elements, Shadow DOM, Slots, and Templates
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 10, 2024 · Frontend Development

Quickly Locate React Component Source Code with click-to-react-component

This article explains how to quickly locate and edit React component source code in large projects using the click-to-react-component tool, covering installation, usage, underlying mechanisms involving React fiber nodes, Babel source mapping, and VSCode integration, with practical code examples and UI details.

Component DebuggingReActVSCode integration
0 likes · 9 min read
Quickly Locate React Component Source Code with click-to-react-component
php Courses
php Courses
May 31, 2024 · Frontend Development

Integrating Vue.js with Vite in a Laravel Project: Step‑by‑Step Tutorial

This comprehensive tutorial walks you through installing prerequisites, creating a new Laravel project, optionally adding Laravel Breeze, configuring Vite, building a Vue component, updating the Blade view, compiling assets, and finally serving the application to see a live Vue component rendered within Laravel.

LaravelVite+Vue.js
0 likes · 6 min read
Integrating Vue.js with Vite in a Laravel Project: Step‑by‑Step Tutorial
Java High-Performance Architecture
Java High-Performance Architecture
May 31, 2024 · Frontend Development

How to Build a Real‑Time Data Visualization Dashboard with Echarts and Java

This guide walks you through creating a dynamic, real‑time data visualization dashboard—covering design mockups, requirement planning, architecture using Echarts for the front‑end and Java for the back‑end, JSON data handling, deployment without installation, configuration steps, code structure, and source acquisition.

Data VisualizationEChartsJSON
0 likes · 4 min read
How to Build a Real‑Time Data Visualization Dashboard with Echarts and Java
Alibaba Cloud Developer
Alibaba Cloud Developer
May 31, 2024 · Frontend Development

Unlocking Browser Extension Power: Real‑World Scenarios and Implementation Guides

This article explores browser extension use cases—from product capabilities and data‑collection tools to daily utilities—provides detailed implementation ideas for each scenario, and walks through concrete code examples such as traffic recording, behavior analysis, and proxy plugins, helping developers build practical, production‑ready Chrome extensions.

browser extensionschrome plugindata collection
0 likes · 20 min read
Unlocking Browser Extension Power: Real‑World Scenarios and Implementation Guides
21CTO
21CTO
May 29, 2024 · Frontend Development

Top 10 Must‑Have VS Code Extensions Every Developer Should Use

Discover the ten most popular VS Code extensions that boost productivity, improve code readability, streamline debugging, and enhance web development workflows, making them essential tools for any serious programmer.

VS Codecoding efficiencyextensions
0 likes · 5 min read
Top 10 Must‑Have VS Code Extensions Every Developer Should Use
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 27, 2024 · Frontend Development

Why Mastering CSS Selectors, Pseudo‑Classes, and Pseudo‑Elements Is Essential for Frontend Developers

This article highlights the critical role of mastering CSS fundamentals—especially selectors, pseudo‑classes, pseudo‑elements, attribute and combinator selectors—by examining common coding mistakes, offering alternative pure‑CSS solutions, and emphasizing understanding over memorization for robust frontend development.

CSSSelectorsbest practices
0 likes · 14 min read
Why Mastering CSS Selectors, Pseudo‑Classes, and Pseudo‑Elements Is Essential for Frontend Developers
Goodme Frontend Team
Goodme Frontend Team
May 24, 2024 · Frontend Development

Explore Cutting‑Edge Frontend & Backend Tools: React Compiler, Deno JSX, Image Loading Hacks

This curated roundup highlights recent technical resources—including React Compiler, Deno's JSX migration, Node v22.2.0, image loading optimizations, short‑URL generation, hooks ref handling, HTTP proxy solutions, and notification system design—to keep developers up‑to‑date with modern web development practices.

HTTP ProxyNode.jsURL shortener
0 likes · 5 min read
Explore Cutting‑Edge Frontend & Backend Tools: React Compiler, Deno JSX, Image Loading Hacks
Sohu Tech Products
Sohu Tech Products
May 21, 2024 · Frontend Development

Boost Mini Program Performance: Mastering setData Optimization Techniques

This article explains why Mini Programs are popular, describes their dual‑thread architecture, and provides concrete strategies—including reducing call frequency, limiting data volume, and applying data layering and rendering chunking—to optimize setData performance and improve user experience.

JavaScriptPerformance OptimizationWeChat
0 likes · 11 min read
Boost Mini Program Performance: Mastering setData Optimization Techniques
Open Source Tech Hub
Open Source Tech Hub
May 20, 2024 · Frontend Development

Understanding SSR vs CSR: Benefits, Drawbacks, and Practical Implementation with Puppeteer

SSR (Server Side Rendering) generates complete HTML on the server, improving SEO and first‑paint speed, while CSR (Client Side Rendering) renders in the browser, offering front‑end flexibility but hurting SEO; the article compares their pros and cons, shows pseudocode, and presents practical SSR implementations using Next.js and Puppeteer.

CSRNext.jsPuppeteer
0 likes · 7 min read
Understanding SSR vs CSR: Benefits, Drawbacks, and Practical Implementation with Puppeteer
MoonWebTeam
MoonWebTeam
May 14, 2024 · Frontend Development

Top 9 Front-End & AI Trends Shaping 2024: From Apple’s MM1 to Micro‑Frontends

This monthly roundup highlights nine cutting‑edge topics—from Apple’s multimodal MM1 model and the Signals standardization proposal to Stable Video Diffusion, digital humans, micro‑frontend frameworks, Monkey testing automation, Tango low‑code sandbox, and cross‑platform app frameworks—offering deep insights and practical takeaways for modern developers.

Artificial IntelligenceMicro Frontendsfrontend development
0 likes · 17 min read
Top 9 Front-End & AI Trends Shaping 2024: From Apple’s MM1 to Micro‑Frontends
Goodme Frontend Team
Goodme Frontend Team
May 6, 2024 · Frontend Development

npm vs Yarn vs pnpm: Which JavaScript Package Manager Wins in Speed and Space?

This article traces the evolution of JavaScript package managers—from early manual inclusion methods to npm, Yarn, and pnpm—detailing their architectures, performance characteristics, version‑locking mechanisms, and trade‑offs, helping developers choose the most suitable tool for modern frontend projects.

Node.jsYARNfrontend development
0 likes · 12 min read
npm vs Yarn vs pnpm: Which JavaScript Package Manager Wins in Speed and Space?
ByteFE
ByteFE
Apr 17, 2024 · Frontend Development

How ByteDance’s SAR Creator Powers the ‘Lucky Dragon’ New Year Interactive Experience

This article details the technical implementation of the "Lucky Dragon" Spring Festival interactive game in Douyin, covering the cross‑platform framework, SAR Creator engine, scene construction, animation control, coordinate synchronization, terrain management, and performance‑focused scene switching strategies.

Performance OptimizationSAR CreatorTypeScript
0 likes · 29 min read
How ByteDance’s SAR Creator Powers the ‘Lucky Dragon’ New Year Interactive Experience
MoonWebTeam
MoonWebTeam
Apr 16, 2024 · Frontend Development

Mastering Dependency Injection in Frontend: Boost Maintainability and Testability

This article explains the concept of Dependency Injection for frontend projects, compares it with Inversion of Control, showcases practical code examples, discusses popular DI libraries and frameworks, and details implementation techniques such as decorators, reflection, singleton handling, and circular dependency resolution to improve maintainability and testability.

Dependency InjectionDesign PatternsIOC
0 likes · 26 min read
Mastering Dependency Injection in Frontend: Boost Maintainability and Testability
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 2, 2024 · Frontend Development

Understanding Vite’s Development Server, Plugin System, and Pre‑Bundling Mechanism

This article explains how Vite speeds up frontend development by serving unbundled ES modules, using a plugin‑based transform pipeline, performing on‑the‑fly compilation, pre‑bundling dependencies with esbuild, and finally leveraging Rollup for production builds while maintaining consistent behavior across dev and prod environments.

Build ToolsESMHot Module Replacement
0 likes · 9 min read
Understanding Vite’s Development Server, Plugin System, and Pre‑Bundling Mechanism
21CTO
21CTO
Apr 1, 2024 · Artificial Intelligence

Why OpenAI & Microsoft Are Investing $100B in the World's Largest AI Data Center

This article reviews major tech news, including OpenAI and Microsoft's $100 billion AI super‑computer project, an insider‑trading case involving Sun Microsystems co‑founder Andy Bechtolsheim, Cognition AI’s $2 billion valuation, Deno’s JSR support, an offline open‑source AI chatbot, Vercel’s Next.js updates, and Flutter’s debut at a game‑dev conference.

AIfrontend developmentgame development
0 likes · 11 min read
Why OpenAI & Microsoft Are Investing $100B in the World's Largest AI Data Center
IT Services Circle
IT Services Circle
Mar 29, 2024 · Frontend Development

Understanding Vite’s Development Server Architecture and Pre‑bundling Mechanism

Vite accelerates development by serving unbundled ES modules directly to the browser, using a connect‑based dev server that compiles on‑demand, leverages esbuild for fast pre‑bundling of dependencies, generates hash‑based cache queries, and shares plugins with Rollup for consistent production builds.

Build ToolsHot Module ReplacementPre‑bundling
0 likes · 9 min read
Understanding Vite’s Development Server Architecture and Pre‑bundling Mechanism
php Courses
php Courses
Mar 20, 2024 · Frontend Development

Comprehensive TypeScript Course Outline: Basics to Advanced Topics

This short TypeScript course provides a structured syllabus covering fundamental concepts, development environment setup, data types, classes, generics, and module organization, enabling learners to progressively master both core and advanced features of the language.

CourseJavaScriptTypeScript
0 likes · 2 min read
Comprehensive TypeScript Course Outline: Basics to Advanced Topics
Didi Tech
Didi Tech
Mar 19, 2024 · Frontend Development

Design and Development of the Mpx‑cube‑ui Component Library for Mini‑Programs

Mpx‑cube‑ui is a cross‑platform mobile component library built on the Mpx mini‑program framework that unifies theming and reuse by organizing components into three layers—basic, basic‑business, and business—while offering hierarchical style variables, compile‑time or runtime theming, and plans to open‑source its core components for broader community adoption.

Component LibraryMpxTheme customization
0 likes · 9 min read
Design and Development of the Mpx‑cube‑ui Component Library for Mini‑Programs
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 18, 2024 · Frontend Development

Implementing One‑Click Theme Switching and Custom Color Themes for ECharts in Vue3 with TypeScript

This article demonstrates how to integrate ECharts into a Vue3 + TypeScript project, create a reusable useEcharts hook for rendering charts, implement one‑click theme switching, and generate custom chart themes from user‑selected colors using the tvision‑color library and Pinia store management.

Custom ColorsEChartsPinia
0 likes · 10 min read
Implementing One‑Click Theme Switching and Custom Color Themes for ECharts in Vue3 with TypeScript
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 1, 2024 · Frontend Development

AI in Frontend Development: Code Generation, Testing, Code Review, Low‑Code, and Business Applications

This article reviews the rapid rise of generative AI in 2023 and explores its impact on frontend development, covering AI‑driven code generation, testing, code review, low‑code platforms, business workflows, challenges, practical experiences, and future prospects for developers and teams.

AIcode reviewfrontend development
0 likes · 30 min read
AI in Frontend Development: Code Generation, Testing, Code Review, Low‑Code, and Business Applications
DaTaobao Tech
DaTaobao Tech
Feb 26, 2024 · Frontend Development

Implementing Tab Border Effects with SVG

To create a tab interface with connected borders, recessed rounded corners, and smooth scrolling transitions, the article explains abandoning CSS due to background‑cover problems and instead using SVG paths that map the four corner vertices, employ arc commands for inner curves, dynamically update coordinates during scroll, and discusses the resulting performance and scalability trade‑offs.

Border DesignCSSSVG
0 likes · 17 min read
Implementing Tab Border Effects with SVG
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 26, 2024 · Frontend Development

Comprehensive Guide to Installing, Configuring, and Using Whistle for Proxy, Mobile Debugging, and Request/Response Manipulation

This tutorial explains how to install and start Whistle, configure browser proxy plugins, set up HTTPS certificates, capture mobile traffic, and leverage advanced features such as Weinre console, response/request tampering, CORS handling, JavaScript injection, and domain mapping to improve development efficiency.

HTTPProxyRequest Modification
0 likes · 9 min read
Comprehensive Guide to Installing, Configuring, and Using Whistle for Proxy, Mobile Debugging, and Request/Response Manipulation
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 18, 2024 · Frontend Development

Automating Video Learning with Tauri: A Frontend Developer’s Guide to Building a Desktop Automation Tool

This article describes how a frontend developer built a lightweight Tauri desktop application in Rust to automatically watch and complete video‑learning courses, covering the problem background, technology selection, requirement analysis, Rust basics, Tauri project setup, frontend‑backend communication, screen‑color detection, mouse automation, permission configuration, CI/CD build, and final reflections.

Desktop AutomationRustTauri
0 likes · 17 min read
Automating Video Learning with Tauri: A Frontend Developer’s Guide to Building a Desktop Automation Tool
21CTO
21CTO
Feb 11, 2024 · Frontend Development

jQuery 4.0 Beta: Dropping IE Support and Major Changes You Need to Know

jQuery’s latest 4.0 beta removes support for IE 10 and older browsers, introduces ES module builds with Rollup, updates FormData handling, and changes event order, while the team signals a full IE drop in the upcoming 5.0, sparking debate over jQuery’s future relevance.

JavaScriptbrowser compatibilityfrontend development
0 likes · 5 min read
jQuery 4.0 Beta: Dropping IE Support and Major Changes You Need to Know
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 20, 2024 · Frontend Development

Less vs SCSS: Features, Differences, and Use Cases

An in‑depth comparison of Less and SCSS explores their syntax, features, compilation environments, community support, and ideal use cases, providing code examples and guidance to help developers choose the most suitable CSS preprocessor for projects ranging from small sites to large‑scale applications.

Stylingcss-preprocessorfrontend development
0 likes · 7 min read
Less vs SCSS: Features, Differences, and Use Cases
360 Quality & Efficiency
360 Quality & Efficiency
Jan 19, 2024 · Artificial Intelligence

Using Large Language Models to Rapidly Build Simple Frontend and Backend Test Tools

This article explains how to quickly create simple web‑based and backend test tools for internal use by leveraging a large language model to generate annotated HTML, CSS, JavaScript and minimal Flask code, outlining prompt design, tool requirements, and deployment tips to boost testing efficiency.

AI code generationBackend DevelopmentRapid Prototyping
0 likes · 8 min read
Using Large Language Models to Rapidly Build Simple Frontend and Backend Test Tools
Bilibili Tech
Bilibili Tech
Jan 12, 2024 · Frontend Development

Understanding WebCodecs: Design Goals, Core API, Demos, and Application Scenarios

WebCodecs, introduced in Chrome 94, provides direct, low‑latency access to hardware‑accelerated audio and video codecs, enabling fine‑grained encoding and decoding control, composable streaming pipelines, and high‑performance demos such as controllable decoding, watermarking, chroma‑key, and client‑side video processing, while still lacking container support and broad browser compatibility.

Audio Video APIsBrowser MediaVideo Processing
0 likes · 15 min read
Understanding WebCodecs: Design Goals, Core API, Demos, and Application Scenarios
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 11, 2024 · Frontend Development

Ant Design Theme Customization: From Less Variables to CSS‑in‑JS and Performance Strategies

This article examines the evolution of Ant Design's theming—from the less‑based Antd 4.x approach to the CSS‑in‑JS design‑token system in Antd 5.x—analyzes the performance trade‑offs of CSS‑in‑JS, and presents the official antd‑style solution for high‑performance, extensible, and compatible style overrides.

CSS-in-JSPerformanceTheme customization
0 likes · 18 min read
Ant Design Theme Customization: From Less Variables to CSS‑in‑JS and Performance Strategies
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 4, 2024 · Frontend Development

How to Build a Fully Editable Table with ElementPlus in Vue 3

This guide explains how to create a reusable EditTable component that extends ElementPlus's el-table, providing add, delete, edit, and save capabilities, custom editable columns, form validation, dynamic data loading, and a simple API for integrating editable tables into Vue applications.

ComponentEditable TableElementPlus
0 likes · 12 min read
How to Build a Fully Editable Table with ElementPlus in Vue 3
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 EncapsulationPermission Management
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.

CDNImage OptimizationResponsive Images
0 likes · 10 min read
How Optimized Image Processing Boosted Double Eleven Web Performance
IT Niuke
IT Niuke
Dec 14, 2023 · Frontend Development

How to Develop a Scan-to-Order WeChat Mini Program for Dine-in and Takeaway

This article outlines the end-to-end process for creating a WeChat scan-to-order mini-program—including account registration, backend selection, UI setup, table-code configuration, and official filing—while also discussing how the tool links online and offline channels to boost customer acquisition and retention.

Digital OrderingMobile AppScan-to-Order
0 likes · 6 min read
How to Develop a Scan-to-Order WeChat Mini Program for Dine-in and Takeaway
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.

ArkTSDeclarative UITodoList
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.

TypeScriptfrontend developmentgenerics
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.

Data ProcessingOperational Configurationerror handling
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.

ArkTSDeclarative UIHarmonyOS
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.

Configurationfrontend developmentrefactoring
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.

ESLintJavaScriptPrettier
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.

WebCoreWebKitblink
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 ComponentContextPortal
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.

UIVue.jscharts
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.

JavaScriptVue.jsdynamic forms
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.

PlaywrightPythonUI automation
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.

Microkernelcode modularityevent-driven
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.

Conditional CompilationMorJScode optimization
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.

CompilationJavaScriptPerformance
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 LoadingJavaScriptcurry
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 ethicsArtificial IntelligenceSoftware Release
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.

design systemfrontend developmentinteraction guidelines
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.

APIHooksReAct
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 Developmentfrontend development
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 ComponentsHooks
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.

NativeReActfrontend 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 DevelopmentRedisSpring Boot
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.

UXcommunicationfrontend development
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.

AIQTestServerless
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.

UI Componentsbusiness componentsdesign systems
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 VisualizationECharts
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