BestHub
Sign in
Tagged articles

frontend

3211 articles · Page 18 of 33
Alibaba Terminal Technology
Alibaba Terminal Technology
Jan 5, 2022 · Frontend Development

Embedding Flutter Widgets as Custom Elements in Kraken for High‑Performance Web Rendering

This article explains how to integrate Flutter widgets into the Kraken web rendering engine as custom elements, detailing the architecture, rendering pipelines, code examples, and advanced scenarios such as waterfall‑flow optimization to achieve dynamic, high‑performance, and easily extensible front‑end applications.

FlutterKrakenPerformance
0 likes · 15 min read
Embedding Flutter Widgets as Custom Elements in Kraken for High‑Performance Web Rendering
Top Architect
Top Architect
Jan 4, 2022 · Frontend Development

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

This article explains why and how to separate front‑end and back‑end responsibilities, introduces the SPA‑based architecture, outlines development processes, and provides a detailed API specification (including request/response formats, pagination, and special field rules) to improve collaboration and reduce integration effort.

APISPAarchitecture
0 likes · 13 min read
Guidelines for Front‑End/Back‑End Separation and API Specification (Version 1.0.0)
Tencent Cloud Developer
Tencent Cloud Developer
Dec 30, 2021 · Frontend Development

How to Write Robust Front-End Code: Practices and Techniques

Writing robust front‑end code involves systematic exception handling, thorough input validation, disciplined code‑style practices such as default cases and optional chaining, careful selection of mature third‑party libraries, and proactive robustness testing like monkey testing to ensure the UI remains functional under unexpected conditions.

Input ValidationJavaScriptRobustness
0 likes · 8 min read
How to Write Robust Front-End Code: Practices and Techniques
Shopee Tech Team
Shopee Tech Team
Dec 30, 2021 · Game Development

Inside Shopee Candy: Building a Scalable Match‑3 H5 Game Architecture

This article walks through the origin, architecture, and tooling of Shopee Candy, a multi‑region match‑3 H5 game, detailing the Algorithm SDK, animation system, map editor, score runner, replayer, and future plans for configurability, performance, anti‑cheat, and AI‑driven level design.

AlgorithmGame DevelopmentH5
0 likes · 16 min read
Inside Shopee Candy: Building a Scalable Match‑3 H5 Game Architecture
Alibaba Terminal Technology
Alibaba Terminal Technology
Dec 29, 2021 · Frontend Development

How Cube Mini‑Program Engine Boosts Performance with Lightweight Rendering and QuickJS

This article explains the Cube mini‑program rendering stack, its modular architecture, thread model, advanced Flow Layout and Inline Text support, CSS stylesheet capabilities, QuickJS integration, multi‑mode packaging and performance benchmarks, showing how it achieves fast startup, low memory usage and near‑native experience on low‑end devices.

CubePerformanceQuickJS
0 likes · 14 min read
How Cube Mini‑Program Engine Boosts Performance with Lightweight Rendering and QuickJS
Java Captain
Java Captain
Dec 26, 2021 · Frontend Development

Top Open-Source Vue Admin Templates and Their Resources

This article lists twelve popular open‑source Vue admin dashboard projects, providing each project's GitHub or Gitee repository link, documentation URL, live demo preview, and a screenshot, offering developers a quick reference for selecting a suitable admin UI framework.

UIVueadmin dashboard
0 likes · 7 min read
Top Open-Source Vue Admin Templates and Their Resources
DeWu Technology
DeWu Technology
Dec 24, 2021 · Frontend Development

Front-end Performance Monitoring Practices at DeWu Platform

DeWu Platform’s front‑end performance monitoring combines SDK‑collected metrics such as FCP, TTS, TSP, resource sizes and device info with Alibaba Cloud Log Service storage, a Python/Django backend that deduplicates, aggregates and visualizes data in MySQL‑backed dashboards, employing intermittent sampling, fingerprinting, and future plans for frame‑rate and user‑centric metrics.

OptimizationSDKfrontend
0 likes · 9 min read
Front-end Performance Monitoring Practices at DeWu Platform
Beike Product & Technology
Beike Product & Technology
Dec 23, 2021 · Frontend Development

How React Fiber’s Time‑Slicing Makes UI Updates Seamlessly Smooth

An in‑depth walkthrough of React’s Fiber architecture reveals how time‑slicing and a linked‑list Fiber tree replace the stack‑based reconciler of React 15, delivering smoother UI updates, priority‑based task scheduling, and interruptible rendering, complete with code examples, performance comparisons, and the underlying event‑loop mechanics.

FiberPerformanceReAct
0 likes · 12 min read
How React Fiber’s Time‑Slicing Makes UI Updates Seamlessly Smooth
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Dec 22, 2021 · Frontend Development

How to Sync Two Front‑End Apps in Real Time with WebSocket and Socket.io

Learn how to achieve real‑time data synchronization between separate front‑end applications by leveraging WebSocket and Socket.io, covering the protocol basics, connection setup, event handling, server implementation, alternative communication methods, and practical code examples for both client and server sides.

Real‑time communicationSocket.IOfrontend
0 likes · 16 min read
How to Sync Two Front‑End Apps in Real Time with WebSocket and Socket.io
php Courses
php Courses
Dec 22, 2021 · Frontend Development

Christmas-Themed Mini Games with Source Code (jQuery, HTML5, Canvas)

This article introduces five fun Christmas-themed mini games—including a jQuery lottery page, a cliff‑crossing Santa game, a canvas gift‑catching game, an HTML5 red‑packet game, and a mobile jQuery red‑packet game—each with a brief description and downloadable source code links.

CanvasGame DevelopmentHTML5
0 likes · 3 min read
Christmas-Themed Mini Games with Source Code (jQuery, HTML5, Canvas)
JD Retail Technology
JD Retail Technology
Dec 21, 2021 · Frontend Development

Introducing DripForm: An Open‑Source React Dynamic Form Solution

DripForm is an open‑source React form component from JD Retail iPaaS that offers configurable rendering, validation, and visual editing, enabling developers to efficiently build complex, dynamic forms with unified front‑end/back‑end validation, extensibility, and low‑code visual generation.

Dynamic FormsForm ValidationJSON Schema
0 likes · 11 min read
Introducing DripForm: An Open‑Source React Dynamic Form Solution
FunTester
FunTester
Dec 21, 2021 · Frontend Development

Responsive Web Design and Mobile Web Testing Strategies

The article explains the importance of responsive web design for mobile users, outlines various mobile web testing approaches—including Chrome DevTools, simulators, real devices, and cloud‑based automation—and highlights how these strategies ensure consistent, high‑quality user experiences across diverse devices and network conditions.

Web Performanceautomationfrontend
0 likes · 6 min read
Responsive Web Design and Mobile Web Testing Strategies
Alipay Experience Technology
Alipay Experience Technology
Dec 20, 2021 · Frontend Development

Unlocking Bundleless Frontend: Ant Group’s Cloud Phoenix Uses ES Modules for Low‑Code Asset Loading

Ant Group’s Cloud Phoenix platform demonstrates a Bundleless asset loading strategy that combines ES Modules, NPM imports, and fine‑grained tree‑shaking to deliver low‑code, on‑demand component delivery, addressing performance bottlenecks and redundancy in enterprise middle‑office applications while paving the way for future ES Module‑centric development.

BundlelessES Modulesasset loading
0 likes · 15 min read
Unlocking Bundleless Frontend: Ant Group’s Cloud Phoenix Uses ES Modules for Low‑Code Asset Loading
JD.com Experience Design Center
JD.com Experience Design Center
Dec 20, 2021 · Frontend Development

Boosting JD’s 11.11 Home Appliance Sales with Immersive Design and Front‑End Optimization

This case study details JD.com's 11.11 home‑appliance campaign, covering project background, brand goals, consumer‑centric design thinking, visual creativity with interactive scenes, front‑end performance optimizations, AB‑testing results, and insights on turning design into measurable commercial value.

AB testinge‑commercefrontend
0 likes · 12 min read
Boosting JD’s 11.11 Home Appliance Sales with Immersive Design and Front‑End Optimization
Java Architect Essentials
Java Architect Essentials
Dec 19, 2021 · Frontend Development

think-swagger-ui-vuele: A Custom Swagger UI Implementation for Think-Vuele

This article introduces think-swagger-ui-vuele, a custom Swagger UI built on think‑vuele that simplifies API documentation by parsing Swagger JSON, offers fast loading for large APIs, supports mock data, customizable request headers, and provides both npm and Maven integration with usage instructions and code examples.

API documentationSwaggerUI
0 likes · 6 min read
think-swagger-ui-vuele: A Custom Swagger UI Implementation for Think-Vuele
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Dec 16, 2021 · Frontend Development

How to Build Dynamic Atmosphere Bubbles with React‑Transition‑Group vs Swiper

This article explains how to implement real‑time atmosphere bubbles in live‑streaming pages, compares Swiper and react‑transition‑group for animation, provides detailed code examples for Swiper, Transition, CSSTransition, SwitchTransition, and shows a complete React solution using a queue‑based component.

animationfrontendreact-transition-group
0 likes · 23 min read
How to Build Dynamic Atmosphere Bubbles with React‑Transition‑Group vs Swiper
政采云技术
政采云技术
Dec 16, 2021 · Big Data

What Is Event Tracking (埋点) and Its Implementation in a Data Analysis System

This article explains the concept of event tracking (埋点), its importance for capturing user behavior, outlines the four‑module architecture of a tracking system, compares code‑based, visual and full tracking methods, describes data models, storage, management, and presents a practical case study with analysis techniques.

AnalyticsBig DataData Collection
0 likes · 15 min read
What Is Event Tracking (埋点) and Its Implementation in a Data Analysis System
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Dec 15, 2021 · Frontend Development

Mastering Flexbox Align-Content: When and How It Works

This article explores the flexbox align-content property, explaining its effect on multi‑line flex containers, the required layout direction, and how to achieve expected results with practical code examples and visual demos for both row and column orientations.

CSSWeb Layoutalign-content
0 likes · 9 min read
Mastering Flexbox Align-Content: When and How It Works
Hacker Afternoon Tea
Hacker Afternoon Tea
Dec 15, 2021 · Frontend Development

Sentry Frontend Contribution Guide for the ReactJS Ecosystem

This guide explains how to contribute to Sentry's frontend codebase, covering repository layout, file naming, index usage, React component patterns, PropTypes, event‑handler conventions, Emotion styling, lint rules, TypeScript defaultProps, state management, testing with React Testing Library, Storybook setup, and migration from grid‑emotion to modern Emotion APIs.

EmotionLintingReAct
0 likes · 25 min read
Sentry Frontend Contribution Guide for the ReactJS Ecosystem
JD Retail Technology
JD Retail Technology
Dec 14, 2021 · Frontend Development

How Drip-Table Low-Code Framework Revolutionizes Web List Development

This article introduces Drip-Table, a low-code front‑end framework from JD Retail that visualizes web list creation, outlines its architecture, core capabilities, JSON Schema definition, real‑world case study, and future roadmap, highlighting how it cuts development effort by up to 75% while supporting complex list requirements.

JSON SchemaWeb Developmentfrontend
0 likes · 6 min read
How Drip-Table Low-Code Framework Revolutionizes Web List Development
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 14, 2021 · Game Development

Extracting Game Board Information from a Point Map Using Jimp

Using Jimp, the author scans a designer‑supplied point‑map image—where each 1 px marker’s color encodes a board square type—to automatically extract (x, y) coordinates, merge adjacent pixels via region‑growing for visibility, output a JSON layout, and drive front‑end placement of Monopoly‑style tiles.

Jimpfrontendimage processing
0 likes · 14 min read
Extracting Game Board Information from a Point Map Using Jimp
Architecture Digest
Architecture Digest
Dec 13, 2021 · Backend Development

Designing a Dynamic Permission Management System for Frontend‑Backend Separated Applications

This article explains a dynamic permission management solution for modern frontend‑backend separated applications, detailing user‑role‑page‑function relationships, database schema design, menu rendering, fine‑grained function controls, and backend API authorization to handle flexible, real‑time access rights.

MenuPermissionaccess control
0 likes · 8 min read
Designing a Dynamic Permission Management System for Frontend‑Backend Separated Applications
KooFE Frontend Team
KooFE Frontend Team
Dec 12, 2021 · Frontend Development

Mastering a Modern CSS Reset: 11 Essential Rules Explained

This tutorial walks through a custom CSS reset, explaining each of the eleven concise rules—including box‑sizing, margin removal, height handling, line‑height, font smoothing, media defaults, form inheritance, overflow handling, and root isolation—while providing clear code examples and visual illustrations to improve both developer experience and user accessibility.

Box-sizingCSSCSS Reset
0 likes · 18 min read
Mastering a Modern CSS Reset: 11 Essential Rules Explained
php Courses
php Courses
Dec 11, 2021 · Frontend Development

Implementing Vue 3 Reactivity with Proxy, Reactive, and Ref Functions

This article walks through building a Vue 3‑style reactivity system from scratch, covering effect functions, dependency collection with Set/Map/WeakMap, automatic tracking via Proxy, and the implementation of reactive and ref utilities, all illustrated with complete JavaScript code examples.

JavaScriptReactivityVue3
0 likes · 8 min read
Implementing Vue 3 Reactivity with Proxy, Reactive, and Ref Functions
21CTO
21CTO
Dec 10, 2021 · Frontend Development

Four Simple Ways to Center a DIV Using Modern CSS Techniques

Learn four practical CSS approaches—Grid, Flexbox, margin:auto, and absolute positioning with transform—to reliably center a DIV element both horizontally and vertically, complete with code examples and visual results for quick implementation.

CSSHTMLLayout
0 likes · 4 min read
Four Simple Ways to Center a DIV Using Modern CSS Techniques
Xianyu Technology
Xianyu Technology
Dec 10, 2021 · Frontend Development

IdleFish Double 11 2023: Frontend Engineering Challenges and Solutions

During IdleFish’s 2023 Double 11 promotion, engineers tackled massive traffic spikes by running feature‑flag, launch‑side, and mitmproxy‑based disaster‑recovery rehearsals, boosted performance with increased first‑screen modules, CSS‑only animations, pre‑fetching and offline caching, introduced a PHA container for seamless tab switching, and optimized deep‑link handling for external channels, while planning further SSR and stability automation.

Double 11EngineeringStability
0 likes · 11 min read
IdleFish Double 11 2023: Frontend Engineering Challenges and Solutions
政采云技术
政采云技术
Dec 7, 2021 · Frontend Development

A Comprehensive Guide to Frontend Unit Testing with Jest and Mocha

This article introduces the importance of frontend unit testing, presents survey data on current practices, compares popular frameworks like Jest and Mocha, provides step‑by‑step setup instructions, demonstrates code examples for JavaScript, TypeScript and async functions, and explains how to generate coverage reports and use common assertions.

CoverageJavaScriptJest
0 likes · 16 min read
A Comprehensive Guide to Frontend Unit Testing with Jest and Mocha
php Courses
php Courses
Dec 7, 2021 · Frontend Development

Responsive Website from Scratch – CSS Grid Layout

This tutorial series teaches how to build a complete responsive corporate website from the ground up using CSS Grid, covering navigation, carousel, about us, case studies, service flow, team, data, news, and footer sections with smooth transitions and animations.

CSSCSS GridHTML
0 likes · 2 min read
Responsive Website from Scratch – CSS Grid Layout
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Dec 6, 2021 · Frontend Development

How EasyDoc Simplifies Project Documentation and User Guides

EasyDoc is a configurable, low‑effort project documentation system that reduces onboarding difficulty, bridges information gaps between team members, and shifts documentation responsibilities from developers to dedicated tools, offering guided tutorials, editable nodes, operation manuals, and user guides for complex web applications.

ConfigurationEasyDocfrontend
0 likes · 17 min read
How EasyDoc Simplifies Project Documentation and User Guides
Alibaba Cloud Developer
Alibaba Cloud Developer
Dec 3, 2021 · Frontend Development

How Youku’s Front‑End Powers Large‑Scale Marketing Campaigns

This article explores how Youku’s front‑end team evolved its technology stack—from traditional web pages to Node.js server‑side rendering, low‑code marketing tools, and advanced rendering techniques—to support large‑scale marketing activities across web, mobile, OTT, and mini‑programs.

Node.jsRenderingfrontend
0 likes · 4 min read
How Youku’s Front‑End Powers Large‑Scale Marketing Campaigns
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 3, 2021 · Frontend Development

Image Resource Optimization Strategies for E-commerce Frontend

This article presents practical techniques for optimizing image resources in e‑commerce front‑end projects, covering lazy loading of ordinary images, progressive and skeleton loading for high‑fidelity assets, and server‑side splitting of long graphics using Node.js, with detailed code examples and performance considerations.

Performancefrontendimage optimization
0 likes · 15 min read
Image Resource Optimization Strategies for E-commerce Frontend
Beike Product & Technology
Beike Product & Technology
Dec 3, 2021 · Frontend Development

Practical Guide to Relationship Graph Visualization: Tool Selection, Implementation with D3 and G6, and Optimization

This article introduces relationship graph visualization, compares common front‑end chart libraries such as ECharts, D3, and G6, explains why D3 and G6 were chosen for a real‑world case, and discusses performance‑related optimizations and layout improvements for large‑scale graph data.

EChartsG6Graph Visualization
0 likes · 12 min read
Practical Guide to Relationship Graph Visualization: Tool Selection, Implementation with D3 and G6, and Optimization
Laiye Technology Team
Laiye Technology Team
Dec 3, 2021 · Frontend Development

Understanding Native ES Modules and Why Vite Is So Fast

This article explains the concept of Native‑ESM, traces the evolution of JavaScript module systems from IIFE to ES Modules, and shows how Vite leverages native ES modules, ESBuild, and caching to achieve dramatically faster cold starts and hot updates compared to traditional bundlers like Webpack.

Build ToolES ModuleJavaScript
0 likes · 14 min read
Understanding Native ES Modules and Why Vite Is So Fast
Python Programming Learning Circle
Python Programming Learning Circle
Dec 2, 2021 · Frontend Development

CuteCharts: A Lightweight Python Visualization Library – Installation and Basic Examples

This article introduces the lightweight Python visualization library cutecharts, explains its installation, and provides step‑by‑step code examples for creating line, bar, pie, radar, scatter charts and combined page charts, demonstrating how to customize options such as labels, legends, colors, and inner radius.

CuteChartsPythoncharts
0 likes · 9 min read
CuteCharts: A Lightweight Python Visualization Library – Installation and Basic Examples
Programmer DD
Programmer DD
Dec 2, 2021 · Frontend Development

Boost Your GitHub Workflow with These Must‑Have Browser Extensions

This article introduces three essential GitHub browser extensions—a translation tool, a file‑tree navigator, and an online code viewer—that simplify navigation, overcome language barriers, and enable instant access to repository files, greatly improving developer productivity.

GitHubProductivitybrowser extensions
0 likes · 4 min read
Boost Your GitHub Workflow with These Must‑Have Browser Extensions
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 1, 2021 · Frontend Development

Implementing Frontend‑Backend Integration with Vite Plugin: A Step‑by‑Step Guide

This article explains the concept of frontend‑backend integration, demonstrates how Vite can transform TypeScript functions into API requests without explicit AJAX calls, and provides a complete plugin implementation that intercepts, forwards, and handles these requests using Express and middleware.

ExpressIntegrationPlugin
0 likes · 17 min read
Implementing Frontend‑Backend Integration with Vite Plugin: A Step‑by‑Step Guide
Tongcheng Travel Technology Center
Tongcheng Travel Technology Center
Nov 26, 2021 · Frontend Development

Current State and Development Path of Front-End Development

This article analyses the current front‑end development landscape, the talent shortage, reasons behind it, and proposes a systematic learning roadmap—including understanding the technology stack, assessing personal stage, and continuous skill growth—to help both newcomers and experienced developers advance their careers.

Learning RoadmapTechnology Trendscareer-development
0 likes · 7 min read
Current State and Development Path of Front-End Development
Aotu Lab
Aotu Lab
Nov 25, 2021 · Fundamentals

Deep Dive into Async Programming, Prefresh, Web Animations, and Theia JSON‑RPC

This article explores the core principles of asynchronous programming, explains how Prefresh enables fast refresh for Preact, showcases a comprehensive web animation tutorial, introduces the Doodle Ipsum illustration placeholder service, and details Theia's JSON‑RPC communication protocol for Cloud IDE extensions.

Async ProgrammingJSON-RPCWeb animation
0 likes · 9 min read
Deep Dive into Async Programming, Prefresh, Web Animations, and Theia JSON‑RPC
Selected Java Interview Questions
Selected Java Interview Questions
Nov 25, 2021 · Frontend Development

Refactoring Examples for Common Business Scenarios: From Callback Hell to Promise.all and Pure Functions

This article demonstrates how to refactor tangled asynchronous request chains and complex if‑else logic in JavaScript by replacing callback hell with Promise.all and async/await, extracting pure helper functions, and applying best‑practice principles to improve readability, testability, and maintainability.

Async/AwaitJavaScriptPromise
0 likes · 11 min read
Refactoring Examples for Common Business Scenarios: From Callback Hell to Promise.all and Pure Functions
ByteFE
ByteFE
Nov 22, 2021 · Frontend Development

Technical Decision and Practices of Using Web Components in EE NEXT SDK

This document details the EE NEXT SDK team's technical decisions to adopt Web Components for front‑end component development, explains the benefits and drawbacks of Custom Elements and Shadow DOM, outlines challenges such as cross‑stack compatibility, bundle size, style isolation, and provides practical implementation guidance and best‑practice recommendations.

JavaScriptSDKShadow DOM
0 likes · 15 min read
Technical Decision and Practices of Using Web Components in EE NEXT SDK
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Nov 22, 2021 · Frontend Development

Mastering Canvas Data Visualization: From Basics to Interactive Charts

This tutorial explains what data visualization is, why it matters, common front‑end visualization libraries, and provides step‑by‑step guidance on drawing lines and curves with Canvas—including segment generation, Bézier and B‑spline curves, animation techniques, and interaction (picking) methods—so developers can build interactive charts efficiently.

Bezier CurveInteractive Chartsdata visualization
0 likes · 21 min read
Mastering Canvas Data Visualization: From Basics to Interactive Charts
Full-Stack Trendsetter
Full-Stack Trendsetter
Nov 18, 2021 · Frontend Development

Four Methods to Define Global Functions in Vue.js

The article outlines four practical ways to create global functions in Vue—mounting on Vue.prototype, using Vue.use with a plugin, applying a global mixin, and leveraging the $root event bus—while noting each method's advantages and limitations.

$rootMixinPlugin
0 likes · 3 min read
Four Methods to Define Global Functions in Vue.js
Sohu Tech Products
Sohu Tech Products
Nov 17, 2021 · Frontend Development

The Enduring Role of jQuery in Modern Web Development

Despite the rise of newer frameworks like React and Next.js, jQuery remains a dominant JavaScript library with a 78% market share, deeply embedded in platforms such as WordPress, and continues to evolve through updates to its core and UI components while facing performance debates.

JavaScriptLegacy LibrariesWordPress
0 likes · 7 min read
The Enduring Role of jQuery in Modern Web Development
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Nov 15, 2021 · Frontend Development

How IMFLOW Was Re‑Engineered: From Monolithic Tool to Modular Build‑Kit Architecture

This article explains the complete redesign of IMFLOW, a Webpack‑based engineering tool, detailing the motivations, goals, refactoring patterns, modular architecture, plugin system, and performance improvements that transformed it from a heavyweight monolith into a lightweight, extensible core‑plus‑build‑kit solution for frontend development.

Build ToolRefactoringfrontend
0 likes · 37 min read
How IMFLOW Was Re‑Engineered: From Monolithic Tool to Modular Build‑Kit Architecture
Youku Technology
Youku Technology
Nov 15, 2021 · Frontend Development

From G6 to X6: Enhancing YOHO Platform’s General‑Purpose Graph Editing

The YOHO platform is being refactored from AntV G6 to AntV X6 to gain richer, developer‑friendly graph‑editing capabilities, easier canvas manipulation, seamless HTML/React/Vue integration, and reduced custom‑shape effort, enabling a generic, low‑code orchestration solution with visual configuration, reusable components, and flexible trigger mechanisms.

G6Visual ProgrammingX6
0 likes · 9 min read
From G6 to X6: Enhancing YOHO Platform’s General‑Purpose Graph Editing
Python Programming Learning Circle
Python Programming Learning Circle
Nov 15, 2021 · Backend Development

Python Web Project: Visualizing Hot Search Rankings and Domestic COVID‑19 Cases with Flask, Web Scraping, and ECharts

This report describes a Python‑based web application built with Flask that scrapes hot‑search data from Weibo, Baidu and Zhihu, processes it using jieba and other libraries, and visualizes the results together with domestic COVID‑19 statistics using ECharts on a responsive front‑end page.

data-visualizationfrontendjieba
0 likes · 7 min read
Python Web Project: Visualizing Hot Search Rankings and Domestic COVID‑19 Cases with Flask, Web Scraping, and ECharts
Baidu App Technology
Baidu App Technology
Nov 15, 2021 · Frontend Development

State Management in San: san-store Implementation and Time‑Travel Debugging

The article explains front‑end state management using San’s san‑store, detailing its Flux‑style architecture, action registration, component connection, immutable updates with san‑update, and a time‑travel debugging system that logs state changes, restores snapshots, computes efficient diffs, and discusses its benefits and limitations.

DebuggingFluxSAN
0 likes · 12 min read
State Management in San: san-store Implementation and Time‑Travel Debugging
Full-Stack Trendsetter
Full-Stack Trendsetter
Nov 15, 2021 · Frontend Development

Which Template Engine Powers Vue’s Mustache‑Style Syntax?

Vue adopts the Mustache template syntax, an elegant data‑to‑view solution, and the article reviews historical rendering methods, explains why Mustache is called “beard”, describes its token‑based compilation process, and compares it with other front‑end template engines.

Vuedata-bindingfrontend
0 likes · 2 min read
Which Template Engine Powers Vue’s Mustache‑Style Syntax?
Programmer DD
Programmer DD
Nov 15, 2021 · Game Development

How to Build a Fully Playable 13KB JavaScript Game: Tips from the JS13k Contest

This article explores the surprising 13KB JavaScript game "Space Huggers," explains the JS13k competition rules, and shares practical techniques—pixel graphics, minimalist sound, lightweight engines, and code trimming—that developers can use to create ultra‑small yet functional browser games.

JS13kJavaScriptfrontend
0 likes · 6 min read
How to Build a Fully Playable 13KB JavaScript Game: Tips from the JS13k Contest
Baidu MEUX
Baidu MEUX
Nov 11, 2021 · Frontend Development

The Next Evolution of Web Design: From Fixed Screens to Container Queries

This article traces the history of web design from early fixed‑size screens and table‑based layouts, through the rise of responsive design with media queries, to emerging concepts like user‑preference media queries and container queries that promise a more component‑driven, personalized future.

CSScontainer-queriesfrontend
0 likes · 11 min read
The Next Evolution of Web Design: From Fixed Screens to Container Queries
58 Tech
58 Tech
Nov 11, 2021 · Frontend Development

Cross‑Platform Mini Program Log Collection SDK: Design, Implementation, and Practice

This article introduces a lightweight, cross‑platform SDK for mini‑programs that unifies log collection—including exception, normal, and performance data—by intercepting App, Page and platform‑specific APIs, handling multi‑environment differences, and providing flexible usage via npm or single‑file integration.

Mini ProgramPerformance MonitoringSDK
0 likes · 15 min read
Cross‑Platform Mini Program Log Collection SDK: Design, Implementation, and Practice
ByteFE
ByteFE
Nov 10, 2021 · Frontend Development

Creating a CSS‑Only Animated Orange Cat with Vite and SCSS

This tutorial demonstrates how to build a playful orange‑cat mood‑changing animation using Vite and SCSS, relying solely on HTML and CSS (including variables, pseudo‑elements, transitions, and keyframe animations) without any JavaScript, and explains each step from project setup to final interactive effect.

CSSHTMLanimation
0 likes · 9 min read
Creating a CSS‑Only Animated Orange Cat with Vite and SCSS
IT Architects Alliance
IT Architects Alliance
Nov 8, 2021 · Frontend Development

Mastering Browser Caching: HTTP, Cookies, LocalStorage, and IndexedDB Explained

This article provides a comprehensive guide to client‑side caching, covering HTTP strong and conditional caching, cache‑control directives, and local storage options such as cookies, localStorage, sessionStorage, and IndexedDB, while offering practical strategies for cache refresh, browser cache principles, and offline application design.

IndexedDBWeb Performancebrowser caching
0 likes · 14 min read
Mastering Browser Caching: HTTP, Cookies, LocalStorage, and IndexedDB Explained
Programmer DD
Programmer DD
Nov 8, 2021 · Frontend Development

Mastering Cross-Origin: From JSONP to CORS and Beyond

This article explains the browser's same‑origin policy, why cross‑origin requests are blocked, and walks through practical solutions—including JSONP, CORS with simple and preflight requests, PostMessage, WebSocket, Nginx reverse proxy, Node middleware proxy, and document.domain—so developers can choose the right technique for their needs.

CORSCross-OriginJSONP
0 likes · 16 min read
Mastering Cross-Origin: From JSONP to CORS and Beyond
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Nov 7, 2021 · Frontend Development

Mastering Client-Side Caching: HTTP, Cookies, LocalStorage & IndexedDB Explained

This article explains the fundamentals and strategies of client‑side caching, covering HTTP cache mechanisms (strong and negotiated caching), cache‑control directives, cookie storage, localStorage, sessionStorage, and IndexedDB, and provides practical guidelines for optimizing web performance and reducing network load.

IndexedDBfrontendhttp
0 likes · 15 min read
Mastering Client-Side Caching: HTTP, Cookies, LocalStorage & IndexedDB Explained
Aotu Lab
Aotu Lab
Nov 5, 2021 · Frontend Development

How Deco Boosts Frontend Efficiency by 48% with AI‑Powered Design‑to‑Code

This article explains how the Deco platform uses AI and layout algorithms to automatically convert design drafts into reusable, semantic front‑end code, achieving around a 48% productivity gain during large‑scale e‑commerce events by streamlining UI reconstruction, component reuse, and data binding.

AIDSLdesign-to-code
0 likes · 16 min read
How Deco Boosts Frontend Efficiency by 48% with AI‑Powered Design‑to‑Code
JD Tech
JD Tech
Nov 5, 2021 · Frontend Development

Deco Intelligent Code Project: Design‑to‑Code Solution for Frontend Development

This article details the Deco intelligent code project, which leverages AI and layout algorithms to transform design drafts into semantic, reusable frontend code, achieving around 48% efficiency gains during large‑scale e‑commerce events and outlining the full pipeline from design processing to DSL generation and future AI platform integration.

AIDSLdesign-to-code
0 likes · 14 min read
Deco Intelligent Code Project: Design‑to‑Code Solution for Frontend Development
JD.com Experience Design Center
JD.com Experience Design Center
Nov 5, 2021 · Frontend Development

Reimagining Data Flow Visualization: A Card‑Based Alternative to Sankey Diagrams

This article examines the limitations of traditional Sankey diagrams for visualizing entity state transitions and proposes a card‑based data flow visualization that offers customizable start/end states, improved readability for disparate data scales, and enhanced user experience through interactive layouts and clear styling.

Sankey diagramUI designdata visualization
0 likes · 11 min read
Reimagining Data Flow Visualization: A Card‑Based Alternative to Sankey Diagrams
360 Quality & Efficiency
360 Quality & Efficiency
Nov 5, 2021 · Frontend Development

Custom Form Validation with Element UI in Vue

This article explains what form validation is, why custom validation rules are needed in Vue projects using Element UI, and provides step‑by‑step code examples for binding rules and models, defining custom validators, and handling rich‑text content validation.

Custom RulesElement UIForm Validation
0 likes · 4 min read
Custom Form Validation with Element UI in Vue
ByteDance Web Infra
ByteDance Web Infra
Nov 4, 2021 · Frontend Development

Understanding Modern User‑Centric Web Performance Metrics: LCP, TBT, and CLS

The article explains why traditional load‑time metrics are insufficient for user experience, introduces three user‑centric performance metrics—Largest Contentful Paint, Total Blocking Time, and Cumulative Layout Shift—describes how they are measured, why they matter, and provides practical optimization techniques for each.

CLSLCPTBT
0 likes · 23 min read
Understanding Modern User‑Centric Web Performance Metrics: LCP, TBT, and CLS
Youku Technology
Youku Technology
Nov 4, 2021 · Frontend Development

Can Visual Page Builders Turn Front‑End Development into a Low‑Code Powerhouse?

The article examines how visual page‑building platforms evolve from simple component libraries into full‑stack, low‑code solutions by separating UI and logic, introducing a DAG‑based DSL, and implementing a lightweight runtime that lets non‑developers configure and execute front‑end workflows, dramatically boosting development efficiency.

Component ArchitectureDSLfrontend
0 likes · 15 min read
Can Visual Page Builders Turn Front‑End Development into a Low‑Code Powerhouse?
政采云技术
政采云技术
Nov 2, 2021 · Frontend Development

Why Using Index as Key in Vue Is Discouraged

Using an array index as the key in Vue list rendering can cause unnecessary DOM re‑creation, performance degradation, and data misalignment, especially when items are inserted, removed, or reordered, so developers should prefer stable, unique identifiers such as IDs, symbols, or UUIDs for keys.

Diff AlgorithmKEYfrontend
0 likes · 17 min read
Why Using Index as Key in Vue Is Discouraged
Baidu Geek Talk
Baidu Geek Talk
Nov 1, 2021 · Frontend Development

How Baidu’s Ad Hosting Team Built a Scalable Front‑End Exception Monitoring System

This article shares Baidu’s ad‑hosting team experience in designing, collecting, alerting, investigating, and remediating front‑end exceptions—covering generic and business‑specific error tracking, data protocols, monitoring strategies, alert tuning, and practical governance to improve user experience and ad performance.

BaiduException MonitoringWeb Performance
0 likes · 25 min read
How Baidu’s Ad Hosting Team Built a Scalable Front‑End Exception Monitoring System
21CTO
21CTO
Oct 28, 2021 · Frontend Development

What’s Behind Semi Design’s Open‑Source Release and Its Ant Design Controversy?

Semi Design, ByteDance’s modern React UI library, was open‑sourced under MIT, later faced criticism for copying Ant Design documentation, prompting an apology and subsequent license updates that added proper attributions for referenced code and design inspirations, highlighting its distinct architecture and extensive component suite.

ReActSemi DesignUI library
0 likes · 4 min read
What’s Behind Semi Design’s Open‑Source Release and Its Ant Design Controversy?
ELab Team
ELab Team
Oct 28, 2021 · Information Security

How to Build a Secure JavaScript Sandbox: Techniques, Code, and Pitfalls

This article explains the concept of JavaScript sandboxing, outlines common use cases, walks through several implementation strategies—from simple eval wrappers to with‑Proxy‑iframe combos—and discusses sandbox escape techniques and how to mitigate them, providing practical code examples throughout.

JavaScriptfrontendiframe
0 likes · 14 min read
How to Build a Secure JavaScript Sandbox: Techniques, Code, and Pitfalls
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Oct 27, 2021 · Frontend Development

Master Rollup Plugins: From Basics to Advanced Hook Techniques

This article provides a comprehensive guide to Rollup plugins, explaining why plugins are needed, detailing hook types and their execution timing, showing how to create simple plugins with example code, and exploring internal mechanisms such as PluginDriver, hook loading, and caching.

JavaScript bundlerbuild hooksfrontend
0 likes · 23 min read
Master Rollup Plugins: From Basics to Advanced Hook Techniques
Laravel Tech Community
Laravel Tech Community
Oct 24, 2021 · Frontend Development

Useful JavaScript Code Snippets for Common Front‑End Tasks

This article provides a collection of practical JavaScript snippets covering cookie handling, color conversion, clipboard operations, date validation, string manipulation, array utilities, URL query extraction, time formatting, and dark‑mode detection, all useful for front‑end developers.

JavaScriptWeb Developmentbrowser API
0 likes · 8 min read
Useful JavaScript Code Snippets for Common Front‑End Tasks
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Oct 22, 2021 · Fundamentals

Understanding DAG Basics and the Dagre Layout Algorithm with Perfect-Process

This article introduces the fundamentals of directed acyclic graphs (DAGs), explains adjacency representations, details the Dagre layout algorithm’s concepts, computation steps, and constraints, and presents the Perfect‑Process front‑end library that implements these techniques for interactive pipeline diagram rendering and editing.

AlgorithmDAGfrontend
0 likes · 13 min read
Understanding DAG Basics and the Dagre Layout Algorithm with Perfect-Process
Shopee Tech Team
Shopee Tech Team
Oct 22, 2021 · Frontend Development

Web UI/UX Design Improvement Guide – Page Presentation (Part 1)

This guide, based on rebuilding Shopee’s Warehouse Management System front‑end, details how to enhance UX through responsive page layouts, strategic content placement, robust empty‑state and image handling, and purposeful transitions and animations, while emphasizing speed, accessibility, and thoughtful design.

accessibilityanimationfrontend
0 likes · 19 min read
Web UI/UX Design Improvement Guide – Page Presentation (Part 1)
Baidu MEUX
Baidu MEUX
Oct 21, 2021 · Frontend Development

Mastering Web Form Design: Colon Usage, Label Alignment, Required Fields & Input Widths

This article explores subtle yet impactful web form design decisions—including whether to add colons to labels, the optimal label‑field alignment, marking required versus optional fields, using sensible default values, and setting input widths—backed by usability research and practical recommendations for creating efficient, user‑friendly forms.

UXfrontendinput width
0 likes · 17 min read
Mastering Web Form Design: Colon Usage, Label Alignment, Required Fields & Input Widths
Ctrip Technology
Ctrip Technology
Oct 21, 2021 · Frontend Development

Applying Data‑Driven Thinking to Page Performance Optimization

This article demonstrates how a data‑driven mindset can be used to identify, quantify, and solve performance bottlenecks in a hotel‑listing H5 page by defining clear metrics, collecting telemetry via Kafka/Hive, analyzing with SQL and Spark, automating Lighthouse audits with Puppeteer, and iterating on optimizations.

data-drivenfrontendperformance‑optimization
0 likes · 25 min read
Applying Data‑Driven Thinking to Page Performance Optimization
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 19, 2021 · Frontend Development

Implementing the Fancy-Components Wave Filter Web Component Across Frontend Frameworks

This article explains how to replace a heavy 78 KB GIF loading animation with the lightweight Fancy-Components wave‑filter web component, covering its installation, configuration, and usage in plain HTML, React, Vue 2, Vue 3, Vue‑CLI, Vite, and custom attribute options such as color, duration, amplitude, delay, mode, and interval.

CSSJavaScriptReAct
0 likes · 27 min read
Implementing the Fancy-Components Wave Filter Web Component Across Frontend Frameworks
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Oct 18, 2021 · Frontend Development

Eliminating Redundant base.js Chunk in Webpack 4 with a Custom Mini‑CSS‑Extract Plugin

This article explains why Webpack 4 generates an unnecessary base.js file when extracting common CSS with mini‑css‑extract‑plugin, analyses the underlying bootstrap dependency issue, and presents a custom plugin that adjusts the compilation graph to move the empty JS module, suppress the extra chunk, and correctly emit the shared base.css file.

Build OptimizationPluginfrontend
0 likes · 24 min read
Eliminating Redundant base.js Chunk in Webpack 4 with a Custom Mini‑CSS‑Extract Plugin
php Courses
php Courses
Oct 18, 2021 · Frontend Development

AJAX Technology – Asynchronous Data Retrieval (Course Overview)

This course introduces AJAX (Asynchronous JavaScript and XML), explaining how it enables browsers to fetch data without page refresh by sending asynchronous requests, and clarifies that AJAX is a technique combining existing web standards rather than a new programming language.

AJAXAsynchronousCourse
0 likes · 1 min read
AJAX Technology – Asynchronous Data Retrieval (Course Overview)
KooFE Frontend Team
KooFE Frontend Team
Oct 17, 2021 · Frontend Development

Why React Hooks Were Created and How to Choose Between ahooks and react-use

This article explains why React introduced Hooks, compares the official Hooks with popular third‑party libraries ahooks and react‑use, lists their most useful Hooks, shows how to install them, and provides a custom Hook example for displaying error modals, helping developers write cleaner, more reusable functional components.

HooksJavaScriptReAct
0 likes · 16 min read
Why React Hooks Were Created and How to Choose Between ahooks and react-use
ELab Team
ELab Team
Oct 15, 2021 · Frontend Development

Mastering Redux: Core Principles, Architecture, and Real-World Implementation

This article provides a comprehensive overview of Redux, covering its design philosophy, core components, API implementation, React bindings, and practical code examples to help developers understand and apply state management effectively in modern front‑end applications.

JavaScriptMiddlewareReAct
0 likes · 18 min read
Mastering Redux: Core Principles, Architecture, and Real-World Implementation