BestHub
Sign in
Tagged articles
3129 articles
Page 7 of 32
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 28, 2024 · Frontend Development

Performance Optimization of a Vue2 + ElementUI Cloud Management Platform

This article describes how a legacy Vue2‑based cloud management system was profiled with Lighthouse and webpack‑bundle‑analyzer, then optimized through static asset compression, dead‑code removal, tree‑shaking, code‑splitting, async loading and server tweaks, achieving a three‑fold reduction in bundle size and a 13.6‑second improvement in first‑contentful‑paint time.

Code SplittingLighthousePerformance Optimization
0 likes · 11 min read
Performance Optimization of a Vue2 + ElementUI Cloud Management Platform
Top Architect
Top Architect
Jul 26, 2024 · Frontend Development

Understanding Same-Origin Policy and CORS: A Comprehensive Guide

This article explains the same‑origin policy, its role in browser security, how CORS enables controlled cross‑origin requests, the distinction between simple and preflight requests, credential handling, and best practices for configuring related HTTP headers.

CORSCross-OriginPreflight Request
0 likes · 16 min read
Understanding Same-Origin Policy and CORS: A Comprehensive Guide
JD Cloud Developers
JD Cloud Developers
Jul 26, 2024 · Frontend Development

From Junior to Front‑End Expert: My JD.com Journey and Key Lessons

The article recounts a JD.com front‑end engineer’s evolution from a fresh graduate to a technical leader, highlighting practical advice on mentorship, coding habits, project ownership, innovative ad‑tech solutions, and the transformative role of AIGC in modern front‑end development.

AIGCCareer DevelopmentProject Management
0 likes · 19 min read
From Junior to Front‑End Expert: My JD.com Journey and Key Lessons
FunTester
FunTester
Jul 22, 2024 · Frontend Development

How to Build a Chrome Extension from Scratch: A Complete Step‑by‑Step Guide

This article walks you through the fundamentals of Chrome extension development, covering its advantages, required prerequisites, manifest file creation, core components such as popup pages, background scripts, content scripts, and context menus, complete with practical code examples and configuration details.

Chrome ExtensionJavaScriptManifest V3
0 likes · 14 min read
How to Build a Chrome Extension from Scratch: A Complete Step‑by‑Step Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 21, 2024 · Frontend Development

A Lightweight Vue 3 + Element‑plus Admin Dashboard Template: Setup, Configuration, and Usage

This article introduces a lightweight admin dashboard template built with Vue 3.4, Element‑plus, and Vite, detailing its project structure, technology stack, coding standards, configuration files, component integrations such as UnoCSS, mock.js, canvas, SVG and WangEditor, and provides step‑by‑step commands for development, linting, formatting, and production build.

Element-plusMock.jsTypeScript
0 likes · 15 min read
A Lightweight Vue 3 + Element‑plus Admin Dashboard Template: Setup, Configuration, and Usage
21CTO
21CTO
Jul 19, 2024 · Frontend Development

What Makes Svelte 5’s New Signals a Game‑Changer for Front‑End Development?

Svelte 5 launches with fine‑grained universal reactivity, a powerful Signals system, a slimmer compiler output, and Rich Harris’s enthusiastic take on React Server Components, promising a faster, smaller, and more composable framework for modern web developers.

React Server ComponentsSvelteWeb Development
0 likes · 8 min read
What Makes Svelte 5’s New Signals a Game‑Changer for Front‑End Development?
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Jul 19, 2024 · Frontend Development

How Chrome Canary Lets You Run Gemini Nano LLM Directly in the Browser

Chrome Canary’s experimental Gemini Nano feature enables local execution of a large language model in the browser, offering easy deployment, hardware acceleration, offline use, and a Prompt API with createTextSession and streaming calls, plus step‑by‑step instructions and a demo for in‑page translation.

Chrome CanaryGemini NanoJavaScript
0 likes · 8 min read
How Chrome Canary Lets You Run Gemini Nano LLM Directly in the Browser
IT Services Circle
IT Services Circle
Jul 18, 2024 · Frontend Development

Top 10 Underrated VSCode Extensions to Boost Your Development Efficiency

This article introduces ten lesser‑known but highly useful VSCode extensions—ranging from workspace theming and comment coloring to TODO management, Git visualization, partial diffs, project switching, console logging, and Zen mode—to help front‑end developers dramatically improve productivity and workflow.

DevelopmentExtensionsVSCode
0 likes · 4 min read
Top 10 Underrated VSCode Extensions to Boost Your Development Efficiency
macrozheng
macrozheng
Jul 18, 2024 · Information Security

Mastering Same-Origin Policy and CORS: A Complete Guide for Secure Web Development

This article explains the fundamentals of the same‑origin policy, its impact on DOM, web data and network requests, and provides a detailed overview of CORS, simple requests, preflight requests, and the necessary response headers to securely enable cross‑origin communication in modern browsers.

BrowserCORSWeb Security
0 likes · 13 min read
Mastering Same-Origin Policy and CORS: A Complete Guide for Secure Web Development
DaTaobao Tech
DaTaobao Tech
Jul 17, 2024 · Frontend Development

Page Data Tracking and SPM for Front-End Development

Front‑end developers must embed unique page identifiers in URLs, capture incoming source parameters, and propagate them through outbound links so that traffic, source, interaction and conversion metrics can be automatically recorded by the SDK, enabling data‑driven product optimization and business insight.

AnalyticsData TrackingWeb
0 likes · 17 min read
Page Data Tracking and SPM for Front-End Development
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 17, 2024 · Frontend Development

Rapid Development of a Vue3 Carousel Component Using Doubao MarsCode Online IDE

The article details how the author leveraged Doubao MarsCode's AI‑powered online IDE to quickly set up a Vue3 project, import a git repository, switch Node versions, install dependencies, develop a paginated carousel component with full code snippets, and evaluate the platform's strengths and weaknesses.

CarouselJavaScriptMarsCode
0 likes · 21 min read
Rapid Development of a Vue3 Carousel Component Using Doubao MarsCode Online IDE
Lobster Programming
Lobster Programming
Jul 16, 2024 · Frontend Development

Mastering CORS: 6 Practical Solutions for Frontend‑Backend Integration

This article explains why browsers enforce same‑origin policy, how cross‑origin requests affect front‑end and back‑end communication, and presents six common solutions—including JSONP, Spring @CrossOrigin, WebMvcConfigurer, CorsFilter, Nginx proxy, and other advanced techniques—complete with code examples.

BackendCORSCross-Origin
0 likes · 8 min read
Mastering CORS: 6 Practical Solutions for Frontend‑Backend Integration
Bilibili Tech
Bilibili Tech
Jul 12, 2024 · Frontend Development

Design and Implementation of a Unified Multi‑Business Detail Page Framework

The project consolidates three separate detail‑page implementations into a single, reusable framework that separates business, component, and framework layers, employs dependency‑injection and scoped lifecycles to support diverse scenarios while ensuring stability through comprehensive logging, monitoring, and staged gray‑release testing.

Scope Managementarchitecturecode-reuse
0 likes · 11 min read
Design and Implementation of a Unified Multi‑Business Detail Page Framework
Sohu Tech Products
Sohu Tech Products
Jul 10, 2024 · Frontend Development

Implementing an Infinite 3D Carousel Animation with Pure CSS

The article shows how to build a smooth, infinite 3D carousel using only CSS by sharing a common motion path, staggering items with negative animation delays, defining keyframes (including optional pauses), and optionally leveraging @property and @container style for smoother or declarative control, while noting browser compatibility and hover‑pause tips.

3D carouselCSSCSS Variables
0 likes · 12 min read
Implementing an Infinite 3D Carousel Animation with Pure CSS
Bilibili Tech
Bilibili Tech
Jul 5, 2024 · Frontend Development

Applying Clean Architecture to Front-End Migration: Refactoring a Large-Scale Review Platform from Vue2 to Vue3

The team refactored a high‑traffic Vue2 detail page to Vue3 using Clean Architecture, separating entities, use‑cases, adapters, and framework layers, while employing AST‑based tooling, comprehensive unit/E2E/visual tests, and a gray‑release strategy, resulting in reduced duplication, better test coverage, and a reusable migration pipeline.

Clean ArchitectureVue3automation
0 likes · 23 min read
Applying Clean Architecture to Front-End Migration: Refactoring a Large-Scale Review Platform from Vue2 to Vue3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 5, 2024 · Frontend Development

Implementing an @User Mention Input Component with Highlight and Deletion Handling in React

This article explains how to build a custom React @mention input component that highlights mentioned users, treats the whole @username as a single deletable unit, tracks cursor position for a floating selector, and returns both the plain text and the list of mentioned users to the parent component.

MentionsReactTypeScript
0 likes · 12 min read
Implementing an @User Mention Input Component with Highlight and Deletion Handling in React
Goodme Frontend Team
Goodme Frontend Team
Jul 4, 2024 · Frontend Development

Curated Frontend Resources: JS Frameworks, React Diff, CSS Mastery & More

This newsletter curates recent frontend news and deep‑dive articles covering the State of JavaScript 2023, large‑model trends, OpenAI's acquisition of Multi, RPA debates, building a modern JS framework, CSS importance, React's diff algorithm, a UX design book, plus practical tips on Taro, MQTT and data‑center interfaces.

JavaScriptResourcesUX
0 likes · 6 min read
Curated Frontend Resources: JS Frameworks, React Diff, CSS Mastery & More
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 4, 2024 · Frontend Development

Implementing Map Drill‑Down with Echarts in Vue 3

This tutorial demonstrates how to create an interactive Echarts map that supports drill‑down to county level and back navigation using Vue 3, vue‑echarts, and Vite, covering data acquisition, option configuration, event handling, and full component code.

Data visualizationJavaScriptMap Drill-Down
0 likes · 10 min read
Implementing Map Drill‑Down with Echarts in Vue 3
Code Mala Tang
Code Mala Tang
Jul 3, 2024 · Frontend Development

Master CSS Variables: Boost Flexibility, Reusability, and Theming

This article explains the fundamentals of CSS variables, how to define and use them—including default values, nesting, media queries, and JavaScript updates—while showcasing practical scenarios such as theming, responsive design, code reuse, and compatibility across browsers.

CSSThemingVariables
0 likes · 12 min read
Master CSS Variables: Boost Flexibility, Reusability, and Theming
FunTester
FunTester
Jul 3, 2024 · Frontend Development

How TypeScript Is Transforming Modern JavaScript Development

This article examines why TypeScript has become essential for complex web applications, outlining its benefits such as improved maintainability and early error detection, the challenges developers face, and the language's future impact on the web development ecosystem.

JavaScriptTypeScriptWeb Development
0 likes · 7 min read
How TypeScript Is Transforming Modern JavaScript Development
21CTO
21CTO
Jul 2, 2024 · Frontend Development

When Should You Skip a JavaScript Framework? 5 Practical Reasons

This article outlines five clear scenarios—simple projects, sufficient HTML/CSS, modern ES6 features, desire for creative freedom, and HTMX alternatives—where using a JavaScript framework adds unnecessary complexity and can be safely avoided.

HTMXJavaScriptWeb Development
0 likes · 6 min read
When Should You Skip a JavaScript Framework? 5 Practical Reasons
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jul 1, 2024 · Frontend Development

Performance Optimization and Engineering Practices for NetEase Cloud Music 2023 Annual Report Front‑End Development

The 2023 NetEase Cloud Music annual‑report front‑end case study details how sub‑second first‑screen loads, SPA routing with TypeScript, GPU‑accelerated animations, optimized media handling, multi‑layer quality monitoring, and a unified development platform together boost performance, reliability, and engineering efficiency, driving higher DAU and share‑rate.

ReactSPAcode-splitting
0 likes · 27 min read
Performance Optimization and Engineering Practices for NetEase Cloud Music 2023 Annual Report Front‑End Development
Goodme Frontend Team
Goodme Frontend Team
Jul 1, 2024 · Frontend Development

Why Taro 4.0’s Vite Integration Fails and How to Fix It

This article explores the beta release of Taro 4.0, examines its new HarmonyOS support, CompileMode for mini‑programs, and Vite‑based build chain, then details the configuration pitfalls, debugging steps, source‑code analysis, and practical recommendations for a stable development workflow.

Rollupbuildfrontend
0 likes · 9 min read
Why Taro 4.0’s Vite Integration Fails and How to Fix It
DeWu Technology
DeWu Technology
Jun 24, 2024 · Frontend Development

Feishu Cloud Document to HTML Email: Architecture Redesign and Implementation

The article details a complete redesign of Feishu’s cloud‑document‑to‑HTML‑email converter, introducing IoC/DI architecture, inline‑style utilities, and specialized renderers for headings, lists, tables, images, code blocks, and equations, resulting in high‑fidelity Outlook‑compatible emails while shrinking the core code to under three hundred lines.

CSS-in-JSFeishuHTML email
0 likes · 31 min read
Feishu Cloud Document to HTML Email: Architecture Redesign and Implementation
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 22, 2024 · Frontend Development

Debugging Production Errors with Ajax Interceptor, Source Maps, and Manual Mapping

This article explains practical methods for diagnosing and fixing production‑time JavaScript errors by using the Ajax‑Interceptor Chrome extension, understanding hidden‑source‑map vs source‑map differences, adding source‑map files in Chrome, and applying manual source‑map mapping or proxy tools like Charles.

ChromeDebuggingJavaScript
0 likes · 6 min read
Debugging Production Errors with Ajax Interceptor, Source Maps, and Manual Mapping
Sohu Tech Products
Sohu Tech Products
Jun 20, 2024 · Frontend Development

Understanding the New <permission> Element in Chrome 126

Chrome 126 adds a new permission element that lets developers declaratively request camera, microphone, or combined permissions via a button‑like UI, addressing common permission‑prompt abuses such as premature prompts, hidden dialogs, and difficult revocation, while integrating with the Permissions API and providing state‑change events.

Chrome 126HTML elementUser experience
0 likes · 8 min read
Understanding the New <permission> Element in Chrome 126
Code Mala Tang
Code Mala Tang
Jun 20, 2024 · Frontend Development

Essential Latency Numbers Every Web Developer Must Know

This article explores critical latency metrics—from nanosecond-level CPU operations to intercontinental network delays—illustrating how each contributes to web performance, and provides real‑world measurements for various connection types, data processing tasks, and user‑perceived response times to help developers optimize user experience.

LatencyWeb Performancefrontend
0 likes · 6 min read
Essential Latency Numbers Every Web Developer Must Know
Alipay Experience Technology
Alipay Experience Technology
Jun 19, 2024 · Backend Development

How Alipay’s “Mantiantianxing” Platform Boosts Development and Operations Efficiency

This article details how Alipay’s Mantiantianxing platform was designed and built to unify page construction, fine‑grained operation, and data feedback, thereby solving low R&D and operation efficiency, reducing duplication, and enabling rapid, scalable innovation across multiple product front‑ends and back‑ends.

BackendOperationsarchitecture
0 likes · 22 min read
How Alipay’s “Mantiantianxing” Platform Boosts Development and Operations Efficiency
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 19, 2024 · Frontend Development

Preventing Duplicate API Requests in Front‑end Development with Debounce, Throttle, Loading Locks, and Axios CancelToken

The article explains why repeated button clicks or searches cause duplicate API calls, discusses why debounce/throttle are not ideal, and presents three practical solutions—loading state locking, request cancellation with Axios CancelToken, and related code examples—to efficiently avoid redundant requests in Vue applications.

APIDebounceThrottle
0 likes · 7 min read
Preventing Duplicate API Requests in Front‑end Development with Debounce, Throttle, Loading Locks, and Axios CancelToken
Bilibili Tech
Bilibili Tech
Jun 18, 2024 · Frontend Development

Design and Implementation of a Front-End Observability System for Business Monitoring

The article describes a unified front‑end observability platform that standardizes data‑point collection via a common SDK, automatically generates health and business dashboards, integrates real‑time monitoring and heatmaps, and has been adopted on 140 pages, delivering faster first‑screen loads, lower error and bounce rates, and higher conversion.

DashboardPerformance MonitoringSystem Design
0 likes · 22 min read
Design and Implementation of a Front-End Observability System for Business Monitoring
Architecture Digest
Architecture Digest
Jun 17, 2024 · Frontend Development

Curated List of Open‑Source Admin Dashboard Projects

This article provides a curated list of twelve open‑source admin dashboard projects, including D2admin, vue‑element‑admin, JEECG‑BOOT, GIN‑VUE‑ADMIN, and others, with their GitHub links, documentation URLs, demo previews, and licensing information, offering developers free resources for building management interfaces.

GitHubVueadmin dashboard
0 likes · 7 min read
Curated List of Open‑Source Admin Dashboard Projects
Selected Java Interview Questions
Selected Java Interview Questions
Jun 16, 2024 · Frontend Development

Using VS Code User Snippets to Boost Coding Efficiency

This article explains what VS Code user snippets are, how they can be customized for different languages and projects, and provides step‑by‑step instructions and tips for creating and using snippets to accelerate development and maintain consistent code style.

DevelopmentVSCodecode editor
0 likes · 6 min read
Using VS Code User Snippets to Boost Coding Efficiency
Ctrip Technology
Ctrip Technology
Jun 14, 2024 · Frontend Development

Canyon: A JavaScript End‑to‑End Test Coverage Solution for Frontend Projects

Canyon extends the IstanbulJS ecosystem with a Babel‑based instrumentation plugin, real‑time coverage aggregation, and cloud‑native reporting to enable large‑scale end‑to‑end UI automation coverage for modern JavaScript front‑end applications, including SPA, MPA, and React Native environments.

CanyonInstrumentationJavaScript
0 likes · 19 min read
Canyon: A JavaScript End‑to‑End Test Coverage Solution for Frontend Projects
Top Architect
Top Architect
Jun 10, 2024 · Operations

Comprehensive Guide to the Workflow System: Frameworks, Features, and Process Design

This guide details the workflow system’s underlying frameworks, functional modules, process design operations, form customization, deployment procedures, and task management features, providing a comprehensive overview for developers and administrators to effectively implement and maintain business processes.

BackendProcess Designfrontend
0 likes · 10 min read
Comprehensive Guide to the Workflow System: Frameworks, Features, and Process Design
vivo Internet Technology
vivo Internet Technology
Jun 5, 2024 · Frontend Development

Technical Guide to Generating Poster Images in H5 and Mini Programs

This guide explains how to generate shareable poster images entirely on the front end for H5 pages and mini‑programs, compares client‑side, front‑end, and server‑side approaches, reviews libraries such as html2canvas, dom‑to‑image, wxml‑to‑canvas and Painter, and offers solutions for design fidelity, CORS, and performance issues.

CanvasCross-OriginMini Program
0 likes · 17 min read
Technical Guide to Generating Poster Images in H5 and Mini Programs
58UXD
58UXD
May 30, 2024 · Frontend Development

How to Build an Engaging Community UI for Mobile Apps: 58’s Redesign Insights

This article explains why a community feature is vital for mobile apps, outlines steps to create a successful community—including user targeting, quality content, interactive UI, and management—and showcases 58’s comprehensive UI redesign with visual details and new modules.

communityfrontendmobile app
0 likes · 4 min read
How to Build an Engaging Community UI for Mobile Apps: 58’s Redesign Insights
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 30, 2024 · Frontend Development

Virtual Scrolling Techniques and Performance Optimization for Large Document Editors

This article explains how virtual scrolling can dramatically improve the performance of large online document editors by rendering only visible content, discusses various implementation strategies such as progressive pagination, canvas rendering, line‑ and block‑level virtualization, and details state management, view‑locking, fast‑scroll handling, and integration scenarios like anchor navigation, find‑replace, and comment systems, while providing code examples and performance test results.

Performance Optimizationfrontendintersection observer
0 likes · 57 min read
Virtual Scrolling Techniques and Performance Optimization for Large Document Editors
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 28, 2024 · Frontend Development

Implementing a WebSocket Client with Automatic Reconnection and Heartbeat in TypeScript/JavaScript

This article explains how to build a WebSocket client that supports automatic reconnection after network loss and periodic heartbeat messages, provides a drop‑in API compatible with the native WebSocket interface, and includes complete TypeScript and JavaScript implementations with detailed code examples.

HeartbeatTypeScriptWebSocket
0 likes · 19 min read
Implementing a WebSocket Client with Automatic Reconnection and Heartbeat in TypeScript/JavaScript
21CTO
21CTO
May 25, 2024 · Frontend Development

What’s New in Angular 18? Key Features, Defer, Control Flow, and Hydration

Angular 18, the first version released after merging with Google’s internal Wiz framework, introduces stable Material 3 APIs, @defer lazy loading, enhanced control‑flow directives, and full Hydration support, signaling a renewed push for the framework’s performance and developer experience.

AngularMaterial DesignTypeScript
0 likes · 5 min read
What’s New in Angular 18? Key Features, Defer, Control Flow, and Hydration
Top Architect
Top Architect
May 24, 2024 · Fundamentals

Guidelines for Front‑Back End Separation and API Specification

The article explains why front‑back end separation is needed, outlines common collaboration patterns, presents a staged migration from MVC to SPA, and provides detailed API request/response standards, interface versioning, and practical steps for implementing clean separation in modern web projects.

APIBackendarchitecture
0 likes · 12 min read
Guidelines for Front‑Back End Separation and API Specification
iKang Technology Team
iKang Technology Team
May 16, 2024 · Frontend Development

Front-End Engineering: Importance, Core Concepts, Tools, and Stages

Front‑end engineering combines automation, modularization, componentization, version control, static analysis, testing, and CI/CD to boost development efficiency, code quality, and team collaboration, guiding technology selection, type‑checking, style guidelines, and a five‑stage evolution from build tools to component‑based frameworks.

EngineeringToolingci/cd
0 likes · 14 min read
Front-End Engineering: Importance, Core Concepts, Tools, and Stages
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 14, 2024 · Frontend Development

How Tango’s AST‑Driven Low‑Code Engine Boosts Frontend Productivity

Facing the trade‑off between flexibility and speed in low‑code development, NetEase’s cloud music team built Tango—a source‑code‑based low‑code engine that leverages AST manipulation and the TangoBoot framework to standardize front‑end programming, halve view logic, and unify low‑code with traditional development.

ASTJavaScriptTangoBoot
0 likes · 12 min read
How Tango’s AST‑Driven Low‑Code Engine Boosts Frontend Productivity
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 14, 2024 · Frontend Development

Implementing Front‑End File Preview for Various Formats Using React

This article explains how to preview a wide range of file types—including images, audio, video, markdown, plain text, Office documents, PDFs and external websites—in a React front‑end by using native HTML tags, embed/iframe techniques, and libraries such as marked and highlight.js, while also supporting page or time positioning.

HTMLReactfile preview
0 likes · 14 min read
Implementing Front‑End File Preview for Various Formats Using React
Goodme Frontend Team
Goodme Frontend Team
May 13, 2024 · Frontend Development

How to Speed Up Frontend Build Times with Native Pre‑Compilation and Caching

By leveraging native code tools like esbuild, caching strategies, and a custom pre‑compilation workflow that fakes Webpack's DllPlugin output, this article shows how Mars framework teams dramatically cut compilation times—up to 40% faster—while handling module resolution, resource handling, and cross‑platform challenges.

Build Optimizationesbuildfrontend
0 likes · 14 min read
How to Speed Up Frontend Build Times with Native Pre‑Compilation and Caching
Open Source Tech Hub
Open Source Tech Hub
May 11, 2024 · Frontend Development

What’s New in Layui? Latest Features and Bug Fixes Overview

This article outlines the recent updates to the free open‑source Layui UI library, detailing new options, bug fixes, and security patches across components such as laydate, treeTable, form, upload, and more, while highlighting its lightweight, browser‑centric design philosophy.

JavaScriptLayuiRelease Notes
0 likes · 4 min read
What’s New in Layui? Latest Features and Bug Fixes Overview
Goodme Frontend Team
Goodme Frontend Team
May 8, 2024 · Frontend Development

2024 Frontend & Tech Highlights: Node.js 22, React 19, Blockchain, AIGC Low‑Code

This curated newsletter presents the latest releases of Node.js, React, and React Native, highlights a blockchain career transition story, summarizes AIGC‑powered low‑code development, systematic data‑governance modeling, import‑statement optimization, techniques for showcasing technical depth, and design proposal guidance for the VUCA era.

AIBlockchainData Governance
0 likes · 6 min read
2024 Frontend & Tech Highlights: Node.js 22, React 19, Blockchain, AIGC Low‑Code
MoonWebTeam
MoonWebTeam
May 8, 2024 · Frontend Development

Unlocking Domain Primitives: A Front‑End Guide to Cleaner Code

This article explains Domain‑Driven Design's Domain Primitive concept from a front‑end perspective, compares it with VO/DTO/PO, outlines its principles, provides concrete TypeScript examples, and shows how applying DP can improve validation, encapsulation, and testability in real‑world projects.

Domain PrimitiveDomain-Driven DesignTypeScript
0 likes · 20 min read
Unlocking Domain Primitives: A Front‑End Guide to Cleaner Code
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 8, 2024 · Frontend Development

Sharing State Between Parent and Child Components in React: useImperativeHandle vs useShareState Hook

This article examines the common React modal communication problem, compares the conventional controlled‑component callback approach with the useImperativeHandle solution, and introduces a novel pair of hooks (useShareState and useShareValue) that enable seamless state sharing between parent and child components.

Custom HooksReactfrontend
0 likes · 19 min read
Sharing State Between Parent and Child Components in React: useImperativeHandle vs useShareState Hook
Bilibili Tech
Bilibili Tech
May 7, 2024 · Frontend Development

Design and Implementation of a Unified Front-End Request Library Based on Middleware Pattern

Bilibili created a unified front‑end request library using a Koa‑style middleware “onion” architecture—ConfigCtrl, AssembleCtrl, and RequestCtrl—to standardize error handling, cut code redundancy, improve performance, and provide consistent, extensible API calls across SSR/CSR, Vue2/Vue3, and in‑app H5 environments.

HTTPRequest libraryTypeScript
0 likes · 16 min read
Design and Implementation of a Unified Front-End Request Library Based on Middleware Pattern
php Courses
php Courses
May 7, 2024 · Frontend Development

Comprehensive TypeScript Course Outline

This article presents a detailed TypeScript course syllabus covering fundamentals, advanced concepts, and practical applications, including installation, VSCode setup, data types, enums, generics, classes, interfaces, modules, and QR‑code access for learners.

CourseTypeScriptfrontend
0 likes · 2 min read
Comprehensive TypeScript Course Outline
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 30, 2024 · Frontend Development

Implementing Chat History Loading in a WeChat Mini‑Program Using Flex Column‑Reverse and a Koa WebSocket Server

This article explains how to solve the common problem of loading historical chat records in a WeChat mini‑program by using a two‑line CSS flex column‑reverse trick, handling edge cases such as limited data and scroll‑view issues, and provides a complete Koa WebSocket backend implementation with full code examples.

ChatFlexboxKoa
0 likes · 9 min read
Implementing Chat History Loading in a WeChat Mini‑Program Using Flex Column‑Reverse and a Koa WebSocket Server
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 27, 2024 · Frontend Development

Generating Dynamic Posters with html2canvas in Web Pages

This tutorial explains how to use the html2canvas library to render dynamic HTML content into canvas images, covering installation, markup definition, styling, script implementation, download handling, and important limitations for creating shareable posters in front‑end applications.

CanvasJavaScriptfrontend
0 likes · 7 min read
Generating Dynamic Posters with html2canvas in Web Pages
Architecture Digest
Architecture Digest
Apr 25, 2024 · Frontend Development

Douyin Open-Source Short Video Project – Overview and Setup Guide

This article introduces the Douyin open‑source short‑video project built with Vue and Vite, provides a free book giveaway link, and gives step‑by‑step instructions for installing Node, cloning the repository, installing dependencies with pnpm, and running the application locally.

ViteVuefrontend
0 likes · 3 min read
Douyin Open-Source Short Video Project – Overview and Setup Guide
58 Tech
58 Tech
Apr 25, 2024 · Backend Development

Luban Full-Stack Low-Code Development Platform: Design, Implementation, and Case Studies

This article presents an in‑depth overview of the Luban full‑stack low‑code development platform, describing its goals, architecture, metadata design, drag‑and‑drop page creation, data visualization, API generation, multi‑tenant and multi‑environment support, version management, and real‑world case studies that demonstrate its efficiency and extensibility.

BackendCase Studyarchitecture
0 likes · 21 min read
Luban Full-Stack Low-Code Development Platform: Design, Implementation, and Case Studies
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 25, 2024 · Frontend Development

Writing Elegant Frontend Code and Preparing for Technical Interviews

This article shares practical tips for writing clean frontend code, using AI assistants for code improvement, understanding business requirements, reading source code of popular libraries, and mastering front‑end infrastructure such as tooling, monitoring, CI/CD, and technology selection to ace technical interviews.

AI assistanceInterview PreparationTooling
0 likes · 15 min read
Writing Elegant Frontend Code and Preparing for Technical Interviews
Sohu Tech Products
Sohu Tech Products
Apr 24, 2024 · Frontend Development

CSS :has Pseudo-class for Modal Scroll Locking

This article shows how to lock page scrolling when a modal is open by using the new CSS :has pseudo‑class—replacing JavaScript‑driven overflow toggles that fail with nested dialogs—and demonstrates a simple body:has(dialog[open]) selector that works across all modern browsers.

:has() selectorCSSJavaScript
0 likes · 4 min read
CSS :has Pseudo-class for Modal Scroll Locking
Top Architect
Top Architect
Apr 23, 2024 · Fundamentals

Guidelines for Front‑Back End Separation and API Specification (Version 1.0.0)

This article explains why front‑back end separation is needed, describes the evolution from MVC to SPA, outlines the principles of responsibility and concern separation, and provides a detailed API specification—including request/response formats, pagination, and special field handling—to improve collaboration and reduce integration effort.

Backendarchitecturefrontend
0 likes · 14 min read
Guidelines for Front‑Back End Separation and API Specification (Version 1.0.0)
php Courses
php Courses
Apr 23, 2024 · Backend Development

Generating and Displaying Static Maps with PHP and Baidu Map API

This article explains how to set up the environment, import the Baidu Map API, create map containers, generate static map URLs using PHP, and display the resulting map and markers on a web page, providing step‑by‑step code examples for developers.

PHPWeb Developmentfrontend
0 likes · 5 min read
Generating and Displaying Static Maps with PHP and Baidu Map API
CSS Magic
CSS Magic
Apr 18, 2024 · Artificial Intelligence

Get Started with Kimi API Instantly—No Coding Experience Required

This step‑by‑step guide shows how to claim your free Kimi API credit, create an API key, test the service with Postman, and integrate it via Python SDK, frontend projects, or no‑code tools like Dify, enabling anyone to build AI applications without writing code.

AIChat CompletionKimi API
0 likes · 10 min read
Get Started with Kimi API Instantly—No Coding Experience Required
php Courses
php Courses
Apr 17, 2024 · Fundamentals

Navigating Programming Career Challenges and Essential Development Tools: A Comprehensive Guide

The article examines how AI, global competition, remote work, and cross‑cultural demands reshape programmers' careers, highlights the rise of independent developers, and provides a concise reference of essential development tools spanning editors, build systems, testing frameworks, debugging utilities, version control, and database management.

databasesdevelopment-toolsfrontend
0 likes · 14 min read
Navigating Programming Career Challenges and Essential Development Tools: A Comprehensive Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 16, 2024 · Frontend Development

VSCode Tips and Configurations for Frontend Development

This article shares practical VSCode configuration tips and shortcuts for frontend developers, covering word separators, quick file path navigation, custom logging snippets, code highlighting, explorer tweaks, terminal copy behavior, drag‑and‑drop settings, and language‑specific suggestions for Vue and React, helping improve coding efficiency and happiness.

ConfigurationTipsVSCode
0 likes · 11 min read
VSCode Tips and Configurations for Frontend Development
Baidu Geek Talk
Baidu Geek Talk
Apr 15, 2024 · Frontend Development

Transparent Video Visual Enhancement Scheme for Front-End Development

The growth front‑end team’s transparent‑video visual enhancement scheme uses split‑RGB/alpha MP4s cached as blobs in IndexedDB and rendered via OpenGL, delivering high‑fidelity, low‑size animations with transparent backgrounds, cutting development time by 75 % and achieving 30‑60 fps performance.

OpenGLWebViewanimation
0 likes · 8 min read
Transparent Video Visual Enhancement Scheme for Front-End Development
Selected Java Interview Questions
Selected Java Interview Questions
Apr 14, 2024 · Backend Development

Server‑to‑Client Data Push: SSE, WebSocket, and Polling – Concepts, Comparison, and Demo

This article explains the three common server‑to‑client push techniques—polling, WebSocket, and Server‑Sent Events (SSE)—detailing their principles, advantages, drawbacks, browser compatibility, appropriate use‑cases, and provides a complete Node.js/Express demo with front‑end code.

ExpressNode.jsPolling
0 likes · 13 min read
Server‑to‑Client Data Push: SSE, WebSocket, and Polling – Concepts, Comparison, and Demo
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 12, 2024 · Frontend Development

Improving TypeScript Type Reuse and Component Props in a UI Library

This article examines common TypeScript type‑reuse issues in a component library, compares type aliases and interfaces, demonstrates using utility types like Omit and Pick, introduces unified base props, shows tuple usage for hooks, and explains function overloads to improve code maintainability and type safety.

InterfaceTypeScriptUtility Types
0 likes · 10 min read
Improving TypeScript Type Reuse and Component Props in a UI Library
Architect's Guide
Architect's Guide
Apr 11, 2024 · Frontend Development

Comprehensive Survey of File Preview Solutions: Frontend and Backend Approaches

This article surveys the full range of file preview options—including commercial services, front‑end JavaScript libraries for PPTX, PDF, DOCX and XLSX, and server‑side conversion tools like OpenOffice, kkFileView and OnlyOffice—providing code examples, pros and cons, and practical recommendations for developers.

Document ConversionJavaScriptfile preview
0 likes · 17 min read
Comprehensive Survey of File Preview Solutions: Frontend and Backend Approaches
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Apr 11, 2024 · Backend Development

Design and Implementation of an Online Configurable Data Consumption Service for NetEase Cloud Music Frontend Performance Monitoring (Corona)

The article details NetEase Cloud Music’s end‑to‑end, online‑configurable data‑consumption service and schema‑driven visualization platform that transform raw client logs into ClickHouse records, automatically generate tables and dashboards, and provide observability, dramatically reducing manual effort while supporting over twenty performance metrics for frontend monitoring.

Performance Monitoringclickhousedata pipeline
0 likes · 17 min read
Design and Implementation of an Online Configurable Data Consumption Service for NetEase Cloud Music Frontend Performance Monitoring (Corona)
JD Tech
JD Tech
Apr 11, 2024 · Mobile Development

Performance Optimization of the Five-Star Store Mini Program: A Comprehensive Case Study

This article details the background, actions, and future outlook of performance and experience optimization for the Five-Star Store mini program, covering template handling, JS error reduction, rendering speed improvements, package size reduction, and systematic testing and iteration mechanisms across multiple device platforms.

Mobile DevelopmentPerformance OptimizationUser experience
0 likes · 16 min read
Performance Optimization of the Five-Star Store Mini Program: A Comprehensive Case Study
MoonWebTeam
MoonWebTeam
Apr 11, 2024 · Frontend Development

What’s Hot in Front‑End & AI: Vue 2024 Insights, Sora, Oxlint & More

This monthly digest reviews the Vue 2024 conference highlights, explores the breakthrough AIGC model Sora, examines emerging AI programmers and large‑context assistants like Kimi, and evaluates new front‑end tools such as Oxlint and TypeScript’s using keyword, offering practical takeaways for developers.

AIOxlintSora
0 likes · 17 min read
What’s Hot in Front‑End & AI: Vue 2024 Insights, Sora, Oxlint & More
DeWu Technology
DeWu Technology
Apr 10, 2024 · Frontend Development

Frontend Performance Optimization for Transaction Backend

The article details a micro‑frontend transaction backend case study where code‑splitting, CDN delivery, caching, lazy‑loading, and idle‑time loading reduced first‑screen JavaScript size, cut FCP below one second and LCP below two seconds, and improved first‑screen open rate by 15% while halving TTI.

Webfrontendmicrofrontend
0 likes · 9 min read
Frontend Performance Optimization for Transaction Backend
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 7, 2024 · Frontend Development

My Frontend Engineering Practices and System

This article shares the author's practical experience with frontend engineering, covering topics such as project review, coding standards, monorepo tooling, custom CLI/SDK development, testing strategies, code review, bundling choices, monitoring, performance optimization, and knowledge consolidation for team empowerment.

Engineeringfrontendperformance
0 likes · 18 min read
My Frontend Engineering Practices and System
IT Services Circle
IT Services Circle
Apr 5, 2024 · Backend Development

Understanding Common HTTP Request Error Codes and Debugging Solutions

This article explains the classification of HTTP request error codes, details typical 4xx client and 5xx server errors, provides common causes, and offers practical debugging steps and solutions to efficiently identify and resolve front‑end and back‑end issues.

BackendDebuggingError Codes
0 likes · 17 min read
Understanding Common HTTP Request Error Codes and Debugging Solutions
DaTaobao Tech
DaTaobao Tech
Apr 3, 2024 · Frontend Development

Clean Front-End Architecture for Agile Development

By separating UI components from business logic using a clean, layered architecture inspired by DDD, Hexagonal and Clean Architecture, the article shows how React, zustand hooks, and strict data‑dependency rules reduce coupling, lower development cost, and make agile front‑end code easier to maintain and extend.

architectureclean codedomain-driven-design
0 likes · 32 min read
Clean Front-End Architecture for Agile Development