BestHub
Sign in
Tag

frontend

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 17, 2025 · Frontend Development

Why Vue Component Design Becomes a Nightmare and How to Fix It

After three years of building Vue apps, the author reveals how naive component extraction leads to sprawling directories, tangled props and events, and mounting technical debt, then offers concrete strategies—clear responsibilities, minimal APIs, slots, and abstraction skills—to design maintainable, reusable components.

Component DesignTechnical DebtVue
0 likes · 9 min read
Why Vue Component Design Becomes a Nightmare and How to Fix It
IT Services Circle
IT Services Circle
Jun 16, 2025 · Frontend Development

How React MCP Server Lets AI Optimize Your Components in Real Time

React MCP Server, an experimental addition to the React repository, bridges large language models with the React compilation toolchain via the MCP protocol, offering AI‑driven compile optimization and documentation lookup, enabling automated performance tuning of components through a closed‑loop of compilation, measurement, and improvement.

AICompilerMCP
0 likes · 7 min read
How React MCP Server Lets AI Optimize Your Components in Real Time
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 15, 2025 · Frontend Development

Master Cross‑Tab Communication: BroadcastChannel vs localStorage in JavaScript

Learn how to synchronize data across multiple browser tabs using the native BroadcastChannel API and the fallback localStorage + storage event, with step‑by‑step code examples, usage scenarios, feature comparisons, compatibility notes, and a reusable TabMessenger class for seamless inter‑tab messaging.

BroadcastChannelJavaScriptWeb API
0 likes · 9 min read
Master Cross‑Tab Communication: BroadcastChannel vs localStorage in JavaScript
Raymond Ops
Raymond Ops
Jun 13, 2025 · Operations

Master HAProxy: Step-by-Step Deployment and Configuration Guide

This article provides a comprehensive, hands‑on guide to installing HAProxy, configuring global, defaults, listen, frontend, and backend sections, setting up ACL‑based load balancing, preparing backend web servers, testing the setup, and accessing the HAProxy statistics page.

ACLConfigurationHAProxy
0 likes · 16 min read
Master HAProxy: Step-by-Step Deployment and Configuration Guide
Didi Tech
Didi Tech
Jun 12, 2025 · Frontend Development

Dimina: Open‑Source Cross‑Platform Mini‑Program Framework for Front‑End Dev

Dimina, Didi’s newly open‑sourced mini‑program framework, combines Vue 3 with a custom compiler to translate mini‑program syntax into native apps, offering a modular, high‑performance, cross‑platform solution that lets developers write a single codebase for Android, iOS, Harmony, and Web, complete with extensive component and API libraries.

Cross‑PlatformDiminaMini Program
0 likes · 7 min read
Dimina: Open‑Source Cross‑Platform Mini‑Program Framework for Front‑End Dev
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 12, 2025 · Frontend Development

Mastering Module Federation with Vite & Vue: A Step‑by‑Step Guide

Learn how to implement Webpack’s Module Federation using Vite and Vue, covering core concepts, advantages over traditional micro‑frontend solutions, detailed setup steps, code examples, and common pitfalls such as dependency conflicts and version mismatches.

JavaScriptVuefrontend
0 likes · 8 min read
Mastering Module Federation with Vite & Vue: A Step‑by‑Step Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 11, 2025 · Frontend Development

How to Build a Custom Vue3 Auto‑Scrolling Table Directive with Element‑Plus

This article explains how to create a custom Vue 3 directive for automatic scrolling of Element‑Plus tables, covering the underlying logic, handling mouse events, conditional scrolling, and integration steps with code examples, enabling developers to implement smooth list carousels without third‑party plugins.

Auto-ScrollDirectiveElement-Plus
0 likes · 8 min read
How to Build a Custom Vue3 Auto‑Scrolling Table Directive with Element‑Plus
DeWu Technology
DeWu Technology
Jun 9, 2025 · Frontend Development

How Frontend Automated Testing Can Supercharge R&D Efficiency and Quality

This article examines the current low self‑testing rates in the frontend team, explains why automated quality‑assurance techniques like code coverage and E2E testing are essential, outlines a comprehensive technical and operational plan—including tooling, rollout, metrics, and future road‑maps—to boost R&D self‑testing ratios and overall delivery quality.

Code CoverageDevOpsR&D efficiency
0 likes · 23 min read
How Frontend Automated Testing Can Supercharge R&D Efficiency and Quality
DevOps
DevOps
Jun 8, 2025 · Frontend Development

Boost UI Consistency: Master Storybook Visual Testing with Percy

This article explains why visual consistency is crucial for UI components, introduces Storybook visual testing, outlines its advantages, and provides a step‑by‑step Percy integration tutorial—including setup, commands, CI/CD integration, best practices, and measurable benefits for frontend teams.

CI/CDPercyStorybook
0 likes · 6 min read
Boost UI Consistency: Master Storybook Visual Testing with Percy
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 8, 2025 · Frontend Development

Why Did My JavaScript Timestamp Show the Wrong Date? A Dayjs Debugging Guide

A developer discovers a bug where a time component displays incorrect dates because the backend switched timestamp values from numbers to strings, and learns how to correctly parse timestamps in JavaScript using Dayjs and defensive Number conversion.

JavaScriptdate parsingdayjs
0 likes · 5 min read
Why Did My JavaScript Timestamp Show the Wrong Date? A Dayjs Debugging Guide
Architecture and Beyond
Architecture and Beyond
Jun 7, 2025 · Fundamentals

What Is Technical Debt? Types, Costs, and Management Strategies

Technical debt, a metaphor likening shortcuts in software development to financial debt, accumulates interest over time, increasing maintenance complexity and costs; this article explains its definition, classifications, front‑end and back‑end impacts, cost dimensions, and systematic approaches to identify, prioritize, and repay it.

Cost ManagementTechnical Debtarchitecture
0 likes · 32 min read
What Is Technical Debt? Types, Costs, and Management Strategies
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 7, 2025 · Frontend Development

How to Build a Gradient‑Border Input with CSS – Full Step‑by‑Step Guide

This article walks you through creating a stylish input field with a gradient border using CSS background‑clip, covering the underlying principle, hover and focus effects, smooth transitions, and providing complete, ready‑to‑use code snippets.

CSSfocus effectfrontend
0 likes · 8 min read
How to Build a Gradient‑Border Input with CSS – Full Step‑by‑Step Guide
Tencent Cloud Developer
Tencent Cloud Developer
Jun 4, 2025 · Frontend Development

The Evolution of Front‑End Development: From the Bronze Age to the AI Era

This article chronicles two decades of front‑end development, detailing early browser compatibility struggles, the transformative impact of HTML5, CSS3, modern JavaScript, Node.js, and frameworks, and finally explores how AI, WebAssembly, WebGL/WebGPU and low‑code tools are reshaping the front‑end landscape.

AIHistoryWeb Development
0 likes · 21 min read
The Evolution of Front‑End Development: From the Bronze Age to the AI Era
JD Tech Talk
JD Tech Talk
Jun 3, 2025 · Frontend Development

Taro on Harmony C-API: Open-Source Cross-Platform Framework for Native Harmony Apps

The article introduces Taro's open-source C-API version for HarmonyOS, detailing its architecture, rich component and CSS support, high-performance rendering, hybrid native integration, and step‑by‑step installation guide, positioning it as a leading frontend solution for cross‑platform development.

C-APICross‑PlatformHarmonyOS
0 likes · 9 min read
Taro on Harmony C-API: Open-Source Cross-Platform Framework for Native Harmony Apps
DevOps
DevOps
Jun 3, 2025 · Artificial Intelligence

How I Tamed Cursor AI to Write Perfect Code Every Time

This article shares a step‑by‑step guide on planning, documenting, templating, configuring, and rule‑setting for the Cursor AI coding assistant, showing how thorough preparation transforms it from a source of buggy code into a reliable development partner.

AI codingCode GenerationCursor
0 likes · 9 min read
How I Tamed Cursor AI to Write Perfect Code Every Time
macrozheng
macrozheng
May 30, 2025 · Frontend Development

Unlock Rapid UI Building with Alibaba’s LowCodeEngine: Features, Setup, and Demo

This article introduces Alibaba’s open‑source LowCodeEngine, outlines its browser compatibility, core features, protocol standards, provides installation and initialization code, explains CDN integration options, and showcases the editor’s UI panels and real‑world use cases.

ReactTypeScriptengine
0 likes · 8 min read
Unlock Rapid UI Building with Alibaba’s LowCodeEngine: Features, Setup, and Demo
Sohu Tech Products
Sohu Tech Products
May 28, 2025 · Frontend Development

A One‑Line Guard for Safe localStorage JSON Parsing in Frontend Development

This article explains why naïvely parsing JSON from localStorage often crashes applications, and provides a concise safeJSON wrapper, versioned key strategy, and TypeScript guards to prevent runtime errors and ensure robust frontend data handling.

Error HandlingJSONJavaScript
0 likes · 4 min read
A One‑Line Guard for Safe localStorage JSON Parsing in Frontend Development
JD Retail Technology
JD Retail Technology
May 27, 2025 · Frontend Development

Taro on Harmony C‑API: Cross‑Platform Frontend Framework for HarmonyOS

The article introduces Taro on Harmony's C‑API version, detailing its evolution, open‑source release, three‑layer architecture, rich component and CSS support, high‑performance rendering, installation steps, and future roadmap, positioning it as a leading framework for developing native‑like HarmonyOS applications.

C-APICross‑PlatformHarmonyOS
0 likes · 9 min read
Taro on Harmony C‑API: Cross‑Platform Frontend Framework for HarmonyOS
JD Tech Talk
JD Tech Talk
May 26, 2025 · Frontend Development

Comprehensive Overview of Frontend Technology Stacks, Network Frameworks, and Performance Optimization

This article provides a comprehensive overview of front‑end technology stacks—including native app development, web frameworks, mini‑programs, and cross‑platform solutions—alongside common network libraries, the full HTTP request lifecycle, and practical performance optimization techniques for speed, weak‑network resilience, and security across native, web, and mini‑program environments.

Webfrontendnetwork
0 likes · 18 min read
Comprehensive Overview of Frontend Technology Stacks, Network Frameworks, and Performance Optimization
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 24, 2025 · Frontend Development

Bookmarklet Tutorial: Turning Any Webpage into an Editable Tool with JavaScript Bookmarks

This article explains what Bookmarklets are, how to create them in Chrome by converting a normal bookmark into a JavaScript snippet, and showcases practical use‑cases such as making pages editable, highlighting links, applying CSS filters, scrolling, and element hover highlighting, all with concise code examples.

BookmarkletBrowser ToolsJavaScript
0 likes · 4 min read
Bookmarklet Tutorial: Turning Any Webpage into an Editable Tool with JavaScript Bookmarks