Tag

frontend

0 views collected around this technical thread.

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

JavaScriptfrontendmicro-frontend
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.

BackendCost Managementarchitecture
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 codingBackendCode Generation
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.

Low-CodeOpen SourceReact
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.

NetworkOptimizationWeb
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
Architecture and Beyond
Architecture and Beyond
May 24, 2025 · Frontend Development

Evaluating Image Placeholder Generators, Feishu Integration Issues, and a Custom Solution

The article reviews various online image placeholder services, highlights challenges such as missing Chinese support and Feishu attachment errors caused by CORS and Content-Length headers, and presents a self‑hosted placeholder tool that resolves these frontend development obstacles.

APIFeishuWeb Development
0 likes · 6 min read
Evaluating Image Placeholder Generators, Feishu Integration Issues, and a Custom Solution
Java Tech Enthusiast
Java Tech Enthusiast
May 22, 2025 · Information Security

Chrome’s Automatic Password Change Feature and Implementation Guidelines for Websites

Google Chrome now offers an automatic password‑change function that detects leaked credentials, generates strong passwords, and updates them with minimal user effort, while websites must adopt specific autocomplete attributes and change‑password URLs to integrate seamlessly with this security enhancement.

Auto-Password ChangeChromeInformation Security
0 likes · 5 min read
Chrome’s Automatic Password Change Feature and Implementation Guidelines for Websites
Top Architect
Top Architect
May 21, 2025 · Frontend Development

Understanding Same‑Origin Policy and CORS in Web Development

This article explains the browser's same‑origin policy, its role in preventing XSS, CSRF and other attacks, details the protocol, host and port rules, illustrates with examples, and then describes CORS, simple and preflight requests, credential handling, and provides a complete request flow diagram.

CORSHTTPPreflight
0 likes · 17 min read
Understanding Same‑Origin Policy and CORS in Web Development