BestHub
Sign in
Tagged articles
769 articles
Page 2 of 8
Bilibili Tech
Bilibili Tech
Feb 7, 2025 · Frontend Development

Building a WebRTC Video Call System: Signaling, Direct Connection, and Selective Forwarding

The article explains how to build a WebRTC video‑call system using standard APIs, detailing signaling via SDP exchange, direct peer connections, the transition to a selective‑forwarding server that forwards streams efficiently, and employing a data channel for RPC‑based room and stream management across web, Android, iOS, and Windows clients.

SDPSelective ForwardingSignaling
0 likes · 16 min read
Building a WebRTC Video Call System: Signaling, Direct Connection, and Selective Forwarding
php Courses
php Courses
Feb 5, 2025 · Frontend Development

Practical Vue.js Course Overview and Project Outline

An intensive, hands‑on Vue.js course guides learners through four real‑world projects—including a calculator, habit‑tracking app, historical data query, and mobile number lookup—teaching core Vue concepts, component architecture, state management, and API integration to build functional front‑end applications.

Vue.jsWeb Developmentfrontend development
0 likes · 4 min read
Practical Vue.js Course Overview and Project Outline
php Courses
php Courses
Jan 23, 2025 · Frontend Development

Vue.js and Element UI Course Overview

This course provides a comprehensive introduction to the Vue.js framework and the Element UI component library, covering core concepts, component development, state management, routing, and detailed usage of Element UI widgets to build modern, responsive web applications for front‑end developers.

CourseElement UIUI components
0 likes · 3 min read
Vue.js and Element UI Course Overview
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Dec 31, 2024 · Fundamentals

Unlocking Code Quality: A 17k‑Word Deep Dive into Code Maintainability

This comprehensive guide explains what code maintainability means, why it matters for long‑term project health, and how to measure and improve it using concrete metrics such as naming conventions, comment density, code volume, logical line count, cyclomatic complexity, similarity, redundancy, and module dependencies, with practical examples and tool recommendations for JavaScript front‑end development.

ESLintJavaScriptcode metrics
0 likes · 50 min read
Unlocking Code Quality: A 17k‑Word Deep Dive into Code Maintainability
JD Tech
JD Tech
Dec 20, 2024 · Frontend Development

Designing a Universal Event System for Multi-Language Environments in Taro for Harmony

This article explores how Taro leverages C++ and the Harmony C‑API to build a high‑performance, cross‑language event system that unifies event handling across C++, ArkTS, and JavaScript, detailing architecture, event center implementation, node event processing, and future enhancements.

Cross-languageEvent SystemHarmonyOS
0 likes · 11 min read
Designing a Universal Event System for Multi-Language Environments in Taro for Harmony
Alibaba Cloud Developer
Alibaba Cloud Developer
Dec 17, 2024 · Frontend Development

Choosing the Best LangChain Text Splitter for Frontend LLM Apps

This article compares five LangChain text splitters—CharacterTextSplitter, RecursiveCharacterTextSplitter, TokenTextSplitter, MarkdownTextSplitter, and LatexTextSplitter—by examining their principles, pros and cons, and ideal use cases, helping developers select the most suitable splitter for their frontend large‑model applications.

JavaScriptLLMLangChain
0 likes · 10 min read
Choosing the Best LangChain Text Splitter for Frontend LLM Apps
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Dec 15, 2024 · Frontend Development

How Chrome Recorder Supercharges Development Efficiency

The article explains how Chrome's Recorder feature lets developers capture, replay, edit, and export user interaction flows, turning repetitive manual testing into a one‑click process that speeds up debugging, performance monitoring, and automated test creation.

Chrome DevToolsPerformance MonitoringRecorder
0 likes · 6 min read
How Chrome Recorder Supercharges Development Efficiency
Java Architect Essentials
Java Architect Essentials
Dec 11, 2024 · Frontend Development

Why OpenSumi Becomes the Go‑to Framework for Customizable Cloud and Desktop IDEs

OpenSumi is a dual‑target (Web and Electron) IDE framework from Alibaba that offers high performance, deep view‑customization, vertical‑domain experience, pure front‑end deployment, and full VS Code plugin compatibility, positioning it as a strong alternative to Theia and other open‑source IDE solutions.

Cloud IDEIDE frameworkOpenSumi
0 likes · 11 min read
Why OpenSumi Becomes the Go‑to Framework for Customizable Cloud and Desktop IDEs
Architect
Architect
Dec 5, 2024 · Frontend Development

How Mako Redefines Web Bundling: Architecture, Performance, and Plugins

Mako is a Rust‑based web bundler that offers zero‑config, production‑grade speed, hot‑module replacement, code‑splitting and module concatenation, and its architecture—spanning entry, compiler, load, parse, transform, dependency analysis, module creation, and plugin orchestration—is detailed with benchmarks and code examples.

Build ToolMakoPlugin System
0 likes · 20 min read
How Mako Redefines Web Bundling: Architecture, Performance, and Plugins
JD Tech
JD Tech
Dec 5, 2024 · Frontend Development

Running W3C Standard CSS on HarmonyOS with Taro: Bridging CSS and ArkUI

This article explains how Taro converts standard W3C CSS into HarmonyOS ArkUI styles, addressing unit and layout differences, using a Rust‑based LightningCSS plugin and the Yoga layout engine, and detailing the full style initialization, matching, application, and update workflow for cross‑platform React development.

ArkUICSSHarmonyOS
0 likes · 13 min read
Running W3C Standard CSS on HarmonyOS with Taro: Bridging CSS and ArkUI
Bilibili Tech
Bilibili Tech
Dec 3, 2024 · Frontend Development

Design and Implementation of a WASM Demuxer for WebCodecs Video Frame Extraction

The project extracts FFmpeg’s demuxing logic into a lightweight WebAssembly module that feeds container‑agnostic video packets to WebCodecs, enabling fast, low‑cost frame extraction across many formats and cutting cover‑generation latency by ~40% while reducing container‑related failures by ~72%.

Video DemuxingWebAssemblyWebCodecs
0 likes · 11 min read
Design and Implementation of a WASM Demuxer for WebCodecs Video Frame Extraction
JD Retail Technology
JD Retail Technology
Dec 3, 2024 · Frontend Development

Designing a Cross‑Language Event System for Taro on HarmonyOS

This article explains how Taro leverages C++ and the HarmonyOS C‑API to build a high‑performance, multi‑language event system that bridges ArkTS, JavaScript and native components, detailing architecture considerations, implementation details, and future directions for improving cross‑language event handling.

C++Cross-languageEvent System
0 likes · 10 min read
Designing a Cross‑Language Event System for Taro on HarmonyOS
Sohu Tech Products
Sohu Tech Products
Nov 20, 2024 · Frontend Development

JavaScript Pipeline Operator: Concepts, Drawbacks of Traditional Approaches, and Practical Usage

The JavaScript pipeline operator replaces cumbersome temporary variables, nested calls, and limited method chaining by letting developers chain regular, async, or generator functions directly, improving readability and maintainability, while Babel’s proposal‑hack plugin can be installed and configured now to start using it.

JavaScriptbabelcode readability
0 likes · 3 min read
JavaScript Pipeline Operator: Concepts, Drawbacks of Traditional Approaches, and Practical Usage
21CTO
21CTO
Nov 19, 2024 · Frontend Development

Is Chrome the New Internet Explorer? A Deep Dive into Browser Dominance

The article examines Chrome’s rise to over 60% market share, compares its trajectory to Internet Explorer’s past dominance, presents expert opinions on its potential decline, and explores whether alternative browsers like Edge, Firefox, or Safari could disrupt its supremacy.

Chrome vs IEMicrosoft Edgebrowser competition
0 likes · 12 min read
Is Chrome the New Internet Explorer? A Deep Dive into Browser Dominance
php Courses
php Courses
Nov 8, 2024 · Frontend Development

Vue.js and Element UI Course Overview

This course provides a comprehensive introduction to the Vue.js framework and the Element UI component library, covering fundamental concepts, component-based development, state management, routing, and detailed usage of Element UI widgets to build modern, responsive web applications.

Element UIUI componentsVue.js
0 likes · 3 min read
Vue.js and Element UI Course Overview
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Nov 6, 2024 · Frontend Development

Applying SOLID Principles to Frontend Development: Practical React and Angular Examples

This article explains the five SOLID design principles, shows how they are often violated in React and Angular code, and provides concrete refactorings—including custom hooks, separate services, validator classes, and interface segregation—to make frontend applications more maintainable, testable, and extensible.

AngularJavaScriptReact
0 likes · 18 min read
Applying SOLID Principles to Frontend Development: Practical React and Angular Examples
Huolala Tech
Huolala Tech
Nov 6, 2024 · Frontend Development

How We Cut WeChat Mini‑Program Startup Time by 45% with Smart Async Splitting

This article details how the Huolala team tackled growing performance problems in their WeChat mini‑program—such as long startup, page‑switch lag, and increasing bundle size—by measuring key metrics, setting aggressive targets, and applying a series of optimizations including performance data reporting, code‑splitting, async component loading, and skeleton screens, ultimately achieving significant reductions in launch and transition times while keeping the main bundle size under control.

Async SplittingCode SplittingWeChat Mini Program
0 likes · 24 min read
How We Cut WeChat Mini‑Program Startup Time by 45% with Smart Async Splitting
php Courses
php Courses
Nov 1, 2024 · Frontend Development

Vue.js and Element UI Course Overview

This Vue.js and Element UI course teaches fundamental concepts, component development, state management, routing, and extensive Element UI component usage, enabling learners to build responsive, interactive modern web applications and establish a solid foundation for a frontend development career.

Component LibraryElement UIResponsive Design
0 likes · 3 min read
Vue.js and Element UI Course Overview
Bilibili Tech
Bilibili Tech
Oct 29, 2024 · Frontend Development

WebCodecs Solution Analysis

The article evaluates WebCodecs‑based video editing for browsers, comparing it to cloud and ffmpeg.wasm approaches, and concludes that its low cost and high extensibility outweigh limited ecosystem and compatibility, while outlining the required modules, OPFS storage, frame decoding, and spatial‑temporal manipulation techniques.

Web APIWebCodecsfrontend development
0 likes · 14 min read
WebCodecs Solution Analysis
Code Mala Tang
Code Mala Tang
Oct 20, 2024 · Frontend Development

Boost Your Coding Efficiency with 5 Essential VS Code Extensions

Discover five VS Code extensions—Error Lens, JavaScript ES6 Snippets, Prettier, Thunder Client, and Auto‑Rename Tag—that dramatically reduce debugging time, streamline coding, and help beginners write cleaner, more productive code.

ExtensionsVS Codecoding tools
0 likes · 7 min read
Boost Your Coding Efficiency with 5 Essential VS Code Extensions
58 Tech
58 Tech
Oct 12, 2024 · Frontend Development

Introducing Astro: Features, Performance Benefits, and Practical Project Implementation

This article introduces the Astro static‑site framework, explains its island architecture and performance advantages, compares Core Web Vitals with other frameworks, and provides detailed code examples and best‑practice guidelines for integrating Astro with React and Vue in real‑world projects.

AstroIsland ArchitectureJavaScript
0 likes · 15 min read
Introducing Astro: Features, Performance Benefits, and Practical Project Implementation
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 9, 2024 · Frontend Development

Vue.js and Element‑plus Code Style and Naming Conventions

This article presents comprehensive Vue.js and Element‑plus coding standards, covering enum naming, directory and file naming conventions, component file structure, attribute and directive usage, boolean, function, class, constant, and enum naming rules, emphasizing consistency to improve readability and maintainability.

Component ArchitectureJavaScriptVue.js
0 likes · 15 min read
Vue.js and Element‑plus Code Style and Naming Conventions
21CTO
21CTO
Oct 7, 2024 · Frontend Development

How Evan You’s VoidZero Aims to Unify the JavaScript Toolchain

Evan You, the creator of Vue.js, announced his new company VoidZero, which plans to build a unified, high‑performance JavaScript toolchain that addresses Vite’s limitations, introduces shared ASTs, common parsers, and faster bundlers like Rolldown, while already securing significant seed funding and industry adoption.

BundlerJavaScriptToolchain
0 likes · 9 min read
How Evan You’s VoidZero Aims to Unify the JavaScript Toolchain
Architect's Guide
Architect's Guide
Sep 28, 2024 · Frontend Development

One‑Click VSCode Snippet Configuration and Customization Guide

This tutorial shows how to collect, configure, and customize reusable VSCode code snippets for JavaScript, TypeScript, Vue, Java and other languages, enabling developers to replace repetitive boiler‑plate with a single click and tailor placeholder behavior to their workflow.

AutomationJavaScriptVSCode
0 likes · 8 min read
One‑Click VSCode Snippet Configuration and Customization Guide
JD Tech Talk
JD Tech Talk
Sep 27, 2024 · Frontend Development

How to Build a Simple QR Code Generator Chrome Extension

This article explains why writing a custom Chrome extension is beneficial and provides step‑by‑step instructions, including directory structure, manifest, background script, popup UI, testing, and publishing, to create a QR code generator that works directly from the browser.

Browser PluginChrome ExtensionJavaScript
0 likes · 9 min read
How to Build a Simple QR Code Generator Chrome Extension
Sohu Tech Products
Sohu Tech Products
Sep 25, 2024 · Frontend Development

Poster Generation: Techniques, Libraries, and Common Issues

The article reviews poster generation methods—server‑side rendering with headless browsers or watermarking, client‑side CPU/GPU approaches, and frontend Canvas‑based techniques—detailing libraries such as Fabric.js, html2canvas, and dom‑to‑image, comparing speed, quality, compatibility, addressing cross‑origin and rendering bugs, and advising when to choose each solution.

Canvas APIFabric.jsImage Rendering
0 likes · 13 min read
Poster Generation: Techniques, Libraries, and Common Issues
大转转FE
大转转FE
Sep 20, 2024 · Frontend Development

Poster Generation: Frontend, Backend, and Mobile Implementation Overview

This article explains various techniques for generating custom posters—including canvas, Fabric.js, html2canvas, and dom‑to‑image—covers client‑side, server‑side, and mobile approaches, compares their performance and compatibility, and provides solutions to common issues such as cross‑origin restrictions, white‑screen bugs, and image‑ratio problems.

CanvasFabric.jsfrontend development
0 likes · 18 min read
Poster Generation: Frontend, Backend, and Mobile Implementation Overview
php Courses
php Courses
Sep 18, 2024 · Frontend Development

Vue.js and Element UI Frontend Development Course Overview

This course provides a comprehensive introduction to the Vue.js framework and the Element UI component library, covering fundamental concepts, component-based development, state management, routing, and detailed usage of Element UI widgets such as layouts, forms, and interactive controls, preparing learners for modern frontend development careers.

CourseElement UIUI components
0 likes · 3 min read
Vue.js and Element UI Frontend Development Course Overview
IT Services Circle
IT Services Circle
Sep 13, 2024 · Frontend Development

Visual Studio Code August 2023 Update (v1.93): New Features and Improvements

The August 2023 release of Visual Studio Code (v1.93) introduces a unified Profiles editor, enhanced Linux window controls, Django unit‑test support, richer IntelliSense on vscode.dev, a Notebook diff viewer, keyboard column resizing, a dedicated Source Control Graph view, and several GitHub Copilot enhancements.

IDEVS Codedeveloper tools
0 likes · 3 min read
Visual Studio Code August 2023 Update (v1.93): New Features and Improvements
Alibaba Cloud Native
Alibaba Cloud Native
Sep 12, 2024 · Backend Development

How to Build a High‑Quality Enterprise Codebase for AI‑Powered Code Completion

This guide explains how to prepare a clean, well‑documented enterprise code repository, outlines upload restrictions, annotation standards, naming conventions, and step‑by‑step usage of the Tongyi Lingma IDE plugin for both backend and frontend development scenarios, plus troubleshooting tips.

AI coding assistantBackend Developmentbest practices
0 likes · 10 min read
How to Build a High‑Quality Enterprise Codebase for AI‑Powered Code Completion
Ant R&D Efficiency
Ant R&D Efficiency
Sep 6, 2024 · Frontend Development

How CodeBlitz 2.0 Redefines Browser‑Based IDEs with AI, Multi‑Instance & WebContainer

CodeBlitz 2.0, an OpenSumi‑based pure‑browser IDE framework, eliminates the need for containers by offering AI‑native code completion, multi‑instance editors, a DiffViewerRenderer component, and early WebContainer support, positioning it as a next‑generation Web IDE for code reading, review, prototyping, online testing, and more.

AI-nativeBrowser IDECodeBlitz
0 likes · 18 min read
How CodeBlitz 2.0 Redefines Browser‑Based IDEs with AI, Multi‑Instance & WebContainer
Ant R&D Efficiency
Ant R&D Efficiency
Sep 5, 2024 · Frontend Development

OpenSumi 3.3.0 Release: Multi‑line Completion, Intelligent Rewrite, and New Features

OpenSumi 3.3.0 release adds multi-line inline completion, an intelligent rewrite widget, cross‑file undo/redo for inline diff, multi‑line comment support, UI and accessibility enhancements, numerous bug fixes, and performance tweaks, empowering developers to build highly customizable Web and Electron IDEs more efficiently.

IDE frameworkOpenSumiSoftware Release
0 likes · 8 min read
OpenSumi 3.3.0 Release: Multi‑line Completion, Intelligent Rewrite, and New Features
37 Interactive Technology Team
37 Interactive Technology Team
Sep 2, 2024 · Frontend Development

Understanding PostCSS: AST Structure, Objects, and Event Listeners

The article explains how PostCSS parses CSS into an abstract syntax tree composed of Declaration, Rule, Root, AtRule and Comment nodes, describes the rule‑ and hook‑based event listeners and depth‑first traversal used in PostCSS 8 versus the walk methods of PostCSS 7, and shows how this knowledge lets developers create custom plugins for tasks such as unit conversion, vendor prefixing, or dark‑mode generation.

CSS ASTCSS ProcessingPlugin Development
0 likes · 9 min read
Understanding PostCSS: AST Structure, Objects, and Event Listeners
Bilibili Tech
Bilibili Tech
Aug 30, 2024 · Frontend Development

Implementing a Cross-Page Playback Queue with Document Picture-in-Picture

The article explains how Bilibili leveraged Chrome’s Document Picture‑in‑Picture API to create a cross‑page playback queue displayed in a small always‑on‑top window, detailing style synchronization, independent lifecycle handling via a helper class, and real‑time updates using BroadcastChannel‑plus‑iframe messaging while relying solely on native web features.

Cross-Page PlaybackDocument Picture-in-PictureJavaScript
0 likes · 31 min read
Implementing a Cross-Page Playback Queue with Document Picture-in-Picture
21CTO
21CTO
Aug 22, 2024 · Frontend Development

Is React Turning Into a Full‑Stack Framework? What You Need to Know

The article explores how React has evolved with server components, server actions, and TypeScript to bridge front‑end and back‑end development, discusses the shift from CSR to SSR, and examines the impact of tRPC and generated type interfaces on modern web engineering.

ReactServer ComponentsTypeScript
0 likes · 7 min read
Is React Turning Into a Full‑Stack Framework? What You Need to Know
ByteDance Web Infra
ByteDance Web Infra
Aug 20, 2024 · Frontend Development

Lessons Learned Switching to Rspack: Migration Experience, Configuration Tips, and Performance Results

The article shares a developer’s experience migrating two large Webpack projects to Rspack, covering why Rspack was chosen, detailed lessons on TypeScript handling, CSS extraction, service‑worker support, plugin compatibility, CLI differences, performance benchmarks, and future expectations for the Rust‑based bundler.

RspackService WorkerTypeScript
0 likes · 15 min read
Lessons Learned Switching to Rspack: Migration Experience, Configuration Tips, and Performance Results
Sohu Tech Products
Sohu Tech Products
Aug 14, 2024 · Frontend Development

Mastering Theme Switching in React with Context API: A Complete Guide

This article explains how to use React's Context API to implement elegant multi‑theme switching, avoid props drilling, manage multiple contexts, and apply memoization techniques to prevent unnecessary re‑renders, improving performance and maintainability.

Context APIPerformance OptimizationReact
0 likes · 11 min read
Mastering Theme Switching in React with Context API: A Complete Guide
Code Mala Tang
Code Mala Tang
Aug 8, 2024 · Frontend Development

Choosing the Right Node.js Version Manager: nvm vs Volta vs asdf

This guide compares three popular Node.js version managers—nvm, Volta, and asdf—detailing their installation steps, usage commands, underlying mechanisms, cautions, and recommendations to help developers choose the best tool for single‑project, multi‑project, cross‑platform, or multi‑language environments.

NVMVoltaasdf
0 likes · 10 min read
Choosing the Right Node.js Version Manager: nvm vs Volta vs asdf
IT Services Circle
IT Services Circle
Jul 23, 2024 · Frontend Development

Vue2 vs Vue3: Differences, New Features, and Migration Guide

This article provides a comprehensive comparison between Vue 2 and Vue 3, detailing their architectural differences, new features such as the Composition API, TypeScript support, fragments, teleport, suspense, virtual‑DOM optimizations, and guidance on state management, build tools, and migration strategies.

Composition APIJavaScriptVue
0 likes · 20 min read
Vue2 vs Vue3: Differences, New Features, and Migration Guide
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Jul 23, 2024 · Frontend Development

A Comprehensive Guide to Tailwind CSS: Core Concepts, Setup, and Advanced Features

This article provides an in‑depth overview of Tailwind CSS, covering its utility‑first philosophy, atomic CSS approach, configuration options, responsive and dark‑mode design, installation steps with PostCSS, JIT compilation, performance best practices, and a preview of the upcoming v4 engine.

ConfigurationDark ModeJIT Compilation
0 likes · 29 min read
A Comprehensive Guide to Tailwind CSS: Core Concepts, Setup, and Advanced Features
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 23, 2024 · Frontend Development

Creating Custom ESLint Plugins to Enforce Team Coding Standards

This article explains how to develop custom ESLint plugins—covering background concepts, Yeoman generator setup, rule implementation for typeof and instanceof checks, unit testing, local linking, and providing recommended configurations—to ensure consistent code style and best‑practice enforcement across a development team.

ESLintJavaScriptcustom plugin
0 likes · 12 min read
Creating Custom ESLint Plugins to Enforce Team Coding Standards
Sohu Tech Products
Sohu Tech Products
Jul 10, 2024 · Frontend Development

Advanced CSS Techniques: Fluid Design, Mathematical Functions, and Modern Features

The article showcases advanced CSS capabilities—including fluid layouts with clamp, min, max and grid functions, new step functions like round, rem, and mod, versatile media queries, accent‑color and color‑scheme theming, custom counters, and variable‑driven animations—empowering developers to build responsive, modern, and performant web designs.

CSSCSS AnimationsCSS Functions
0 likes · 14 min read
Advanced CSS Techniques: Fluid Design, Mathematical Functions, and Modern Features
21CTO
21CTO
Jul 2, 2024 · Frontend Development

What ECMAScript 2024 and WasmGC Mean for Modern Web Development

The article covers Amazon’s $2 trillion market cap milestone, China’s push to standardize brain‑computer interfaces, the approval of ECMAScript 2024 with new JavaScript features, and Google Sheets’ shift from a JavaScript engine to a WasmGC‑based calculation engine, highlighting their broader tech implications.

ECMAScriptJavaScriptWasmGC
0 likes · 6 min read
What ECMAScript 2024 and WasmGC Mean for Modern Web Development
JD Cloud Developers
JD Cloud Developers
Jul 1, 2024 · Frontend Development

Why Developers Must Master Browsers: History, Architecture & Market Share

This article explains why developers—both frontend and backend—should understand browsers, covering user experience, compatibility, performance, security, and debugging, then traces the browser’s evolution from the early 1990s to modern multi‑process architectures, outlines core components, rendering engines, and current market share.

Browserbrowser historyfrontend development
0 likes · 12 min read
Why Developers Must Master Browsers: History, Architecture & Market Share
Efficient Ops
Efficient Ops
Jun 24, 2024 · Frontend Development

How ICBC Built an Enterprise‑Level Frontend Component Library to Accelerate Banking Innovation

This article details how Industrial and Commercial Bank of China (ICBC) created a cross‑channel, enterprise‑grade frontend component library and management platform to standardize UI design, boost development efficiency, and enhance user experience across mobile, PC, and smart‑terminal banking applications.

Banking TechnologyComponent LibraryUI/UX
0 likes · 8 min read
How ICBC Built an Enterprise‑Level Frontend Component Library to Accelerate Banking Innovation
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 24, 2024 · Frontend Development

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

This article explains how to efficiently locate and edit React component source files in large projects by using the click-to-react-component tool, covering installation, demo setup, interaction shortcuts, and the underlying mechanism that maps DOM elements to source code via React fiber nodes and VSCode links.

Code navigationReactVSCode
0 likes · 9 min read
Using click-to-react-component to Quickly Locate React Component Source Code
Code Mala Tang
Code Mala Tang
Jun 21, 2024 · Artificial Intelligence

How AI Turns UI Screenshots into Ready‑to‑Edit Front‑End Code

This article explains the Screenshot‑to‑Code project, detailing how AI‑driven image recognition converts UI screenshots into editable HTML, CSS, and JavaScript, describes the front‑end (React + Vite + Radix‑UI) and back‑end (Python + Poetry) architecture, showcases prompt engineering, and provides step‑by‑step setup instructions.

AI code generationPrompt engineeringPython Backend
0 likes · 14 min read
How AI Turns UI Screenshots into Ready‑to‑Edit Front‑End Code
Baidu Geek Talk
Baidu Geek Talk
Jun 19, 2024 · Frontend Development

YYF2C: Baidu YY's Figma & AI-Powered Design-to-Code Solution

YYF2C, Baidu and YY Interactive’s all‑in‑one Figma‑plus‑AI platform, transforms design files into high‑fidelity, semantically named code across web, React Native and admin components, offering plugins, light‑logic tags, DSL converters and SaaS management that together boost development efficiency by roughly fifteen percent.

AI code generationComponent LibraryDSL
0 likes · 11 min read
YYF2C: Baidu YY's Figma & AI-Powered Design-to-Code Solution
macrozheng
macrozheng
Jun 18, 2024 · Frontend Development

Discover Layui: A Lightweight Frontend UI Library for Rapid Web Development

Layui is a free, lightweight Web UI component library that follows native HTML/CSS/JS development, offering modular specifications, easy onboarding, and a rich set of components, with simple installation via download, npm, or CDN, making rapid, elegant frontend development straightforward.

Component LibraryJavaScriptLayui
0 likes · 7 min read
Discover Layui: A Lightweight Frontend UI Library for Rapid Web Development
DeWu Technology
DeWu Technology
Jun 14, 2024 · Frontend Development

WeChat Mini Program Development Guide: Architecture, Packaging, Tools, and CI/CD

The guide explains how to build WeChat Mini Programs using a hybrid WebView‑JavaScript sandbox architecture, stay within 20 MB (2 MB per package) limits, organize code with main and sub‑packages, choose uni‑app or Taro, optimize assets, configure app.json, employ dev tools, automate builds and uploads with miniprogram‑ci, and monitor performance via WeAnalysis.

WeChat Mini Programci/cdcross‑platform frameworks
0 likes · 16 min read
WeChat Mini Program Development Guide: Architecture, Packaging, Tools, and CI/CD
macrozheng
macrozheng
Jun 13, 2024 · Frontend Development

Master Cherry Markdown: Powerful Open-Source Editor with Features, Installation & Demos

Cherry Markdown, Tencent’s open-source JavaScript Markdown editor, offers lightweight, extensible editing with features like image scaling, chart generation, multi-cursor support, and multiple preview modes, and the article provides a detailed overview, performance highlights, installation steps, code examples, and demo screenshots.

JavaScripteditorfrontend development
0 likes · 6 min read
Master Cherry Markdown: Powerful Open-Source Editor with Features, Installation & Demos
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.

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

DashboardData visualizationECharts
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.

Performance TestingWeb Developmentbrowser extensions
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.

ExtensionsToolingVS Code
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.

CSSSelectorsWeb Design
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.jsNotification System
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.

JavaScriptMini ProgramPerformance Optimization
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.

Micro FrontendsVideo Generationartificial intelligence
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.

Design PatternsIoCSoftware Architecture
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.

ESMHot Module ReplacementRollup
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.

AIGame Developmentfrontend 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.

Hot Module ReplacementPre‑bundlingVite
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 ColorsEChartsTheme Switching
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.

AutomationDesktop AutomationRust
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.

CSS PreprocessorSCSSStyling
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.

Ant DesignCSS-in-JSTheme 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