Tagged articles

frontend

3211 articles · Page 21 of 33
Python Crawling & Data Mining
Python Crawling & Data Mining
Apr 4, 2021 · Frontend Development

Mastering pyecharts Bar Charts: From Basics to Advanced Customizations

This article walks through installing pyecharts, explains its version differences, and demonstrates a series of bar‑chart techniques—including basic charts, axis labeling, multiple series, styling, horizontal orientation, mark lines/points, label rotation, and interactive zoom—complete with code snippets and visual examples.

PyechartsPythonbar chart
0 likes · 10 min read
Mastering pyecharts Bar Charts: From Basics to Advanced Customizations
Tianxing Digital Tech User Experience
Tianxing Digital Tech User Experience
Apr 2, 2021 · Frontend Development

Mastering B2B Form Design: Tips to Boost Usability and Efficiency

This article shares a UI designer’s comprehensive guide to B‑side form design, covering basic, step‑by‑step, and advanced forms, essential components such as titles, labels, placeholders, inputs, validation, button placement, layout strategies, field width scaling, and research‑backed label positioning to improve usability and efficiency.

B2BUI-UXUsability
0 likes · 11 min read
Mastering B2B Form Design: Tips to Boost Usability and Efficiency
Sohu Tech Products
Sohu Tech Products
Mar 31, 2021 · Frontend Development

Front‑End Performance Optimization: Loading‑Time and Runtime Techniques

This article explains why front‑end performance optimization is crucial for user retention and conversion, outlines loading‑time and runtime optimization categories, and provides practical techniques such as DNS prefetching, HTTP/2 adoption, resource compression, lazy loading, virtual lists, event delegation, and code‑level best practices with concrete code examples.

JavaScriptOptimizationWeb
0 likes · 24 min read
Front‑End Performance Optimization: Loading‑Time and Runtime Techniques
ByteFE
ByteFE
Mar 31, 2021 · Frontend Development

Advanced CSS Performance Optimization Techniques for Faster Web Rendering

This article explains a collection of modern CSS strategies—including content‑visibility, will‑change, contain, font‑display, scroll‑behavior, GPU‑accelerated animations, stylesheet splitting, @import avoidance, and CSS custom properties—to dramatically improve page rendering speed and user experience.

CSSRenderingWeb Development
0 likes · 26 min read
Advanced CSS Performance Optimization Techniques for Faster Web Rendering
Aotu Lab
Aotu Lab
Mar 31, 2021 · Frontend Development

Future Web Development Roadmaps: Vite 2.0, AI Visuals, and Digital Currency

This article presents a curated roadmap for web developers, examines Vite 2.0’s build innovations, explores AI-driven visual effects, discusses product‑centric design principles, and outlines the emerging role of digital currency in modern software ecosystems.

RoadmapVitedigital currency
0 likes · 8 min read
Future Web Development Roadmaps: Vite 2.0, AI Visuals, and Digital Currency
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 31, 2021 · Frontend Development

How Visual Logic Orchestration Transforms Low‑Code Platforms for Frontend Efficiency

This article explores the evolution from ProCode to LowCode and NoCode in front‑end development, detailing iceluna's challenges, the design of visual logic orchestration, node abstraction, automatic layout, schema‑code conversion, debugging features, and future prospects for low‑code adoption.

No-codeVisual Programmingautomation
0 likes · 11 min read
How Visual Logic Orchestration Transforms Low‑Code Platforms for Frontend Efficiency
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Mar 29, 2021 · Frontend Development

From Static Pages to Server‑Side Rendering: How Web Technology Evolved Over 30 Years

This article traces the three‑decade evolution of web technology—from Tim Berners‑Lee’s first static page and the birth of HTML, through the rise of JavaScript, CSS, dynamic server‑side solutions, AJAX, SPA, and modern SSR/Node.js approaches—highlighting why each breakthrough emerged and how it shaped today’s web development landscape.

Web Developmentbackendfrontend
0 likes · 19 min read
From Static Pages to Server‑Side Rendering: How Web Technology Evolved Over 30 Years
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 29, 2021 · Frontend Development

How to Build 360° Panorama Views with CSS3, Three.js, and Pannellum

This article explains four practical approaches to creating 360° panoramic experiences for web pages—using pure CSS3 3D transforms, the Three.js WebGL engine, the lightweight Pannellum viewer, and the professional krpano tool—detailing their concepts, code implementations, advantages, and trade‑offs for hotel and real‑estate applications.

360 panoramaThree.jsWebGL
0 likes · 13 min read
How to Build 360° Panorama Views with CSS3, Three.js, and Pannellum
Architecture Digest
Architecture Digest
Mar 28, 2021 · Frontend Development

Frontend Architecture Evolution: Lessons from Baidu Search Result Page

The article examines the evolution of front‑end architecture using Baidu's mobile search result page as a case study, outlining challenges such as massive codebases, coupling, and outdated tech stacks, and presenting a three‑layer solution involving foundation, modularization, and componentization with SSR optimization.

BaiduComponentizationModularization
0 likes · 13 min read
Frontend Architecture Evolution: Lessons from Baidu Search Result Page
Architect
Architect
Mar 25, 2021 · Frontend Development

Front‑end Architecture Design: Lessons from Baidu Search Result Page

This article examines the evolution and challenges of large‑scale front‑end architecture, using Baidu's search result page as a case study to illustrate problems such as massive codebases, unclear responsibilities, and outdated tech stacks, and describes a three‑layer modular, component‑based solution with SSR and DI to improve maintainability and performance.

BaiduComponentizationModularization
0 likes · 13 min read
Front‑end Architecture Design: Lessons from Baidu Search Result Page
Meituan Technology Team
Meituan Technology Team
Mar 25, 2021 · Frontend Development

Automated Generation of Front-End Code from Design Drafts: Architecture and Algorithms

The article presents a three‑stage pipeline that automatically transforms Sketch design drafts into a DSL view tree, infers layout and style properties, and generates Meituan‑compatible static front‑end code, while offering visual tools for layer cleanup, component recognition, and property adjustment to ensure high‑fidelity mobile UI reproduction.

DSLautomationcode generation
0 likes · 19 min read
Automated Generation of Front-End Code from Design Drafts: Architecture and Algorithms
Programmer DD
Programmer DD
Mar 24, 2021 · Frontend Development

What Really Happens When You Type a URL? From DNS to Rendering Explained

This article walks through the complete lifecycle of a browser request—URL parsing, DNS lookup, TCP handshake, OSI‑layer transmission, caching strategies, HTML rendering, and performance optimizations—mirroring real interview questions faced by front‑end engineers.

BrowserNetworkPerformance
0 likes · 15 min read
What Really Happens When You Type a URL? From DNS to Rendering Explained
ELab Team
ELab Team
Mar 17, 2021 · Frontend Development

Mastering Time in JavaScript: From Unix Timestamps to Modern Date Libraries

This article explains the history of global time standards, how computers represent time with Unix timestamps and the 2038 problem, details ISO 8601 and RFC 2822 formats, and provides practical JavaScript Date usage examples along with comparisons of popular date‑handling libraries such as Moment.js, Dayjs, and Miment.

DayjsJavaScriptdate
0 likes · 22 min read
Mastering Time in JavaScript: From Unix Timestamps to Modern Date Libraries
Aotu Lab
Aotu Lab
Mar 16, 2021 · Frontend Development

How We Delivered a High‑Risk Digital RMB Front‑End Project Fast and Safely

This article details the front‑end team's approach to rapidly delivering a government‑backed digital RMB activity, covering project characteristics, pre‑delivery preparations, data flow aggregation, UI decoupling, risk‑control tactics, module loading, deployment layering, and lessons learned for maintaining high availability.

Risk Managementdigital RMBfrontend
0 likes · 18 min read
How We Delivered a High‑Risk Digital RMB Front‑End Project Fast and Safely
AntTech
AntTech
Mar 16, 2021 · Frontend Development

Inside Ant Group's Frontend Engineering: Faster Builds, Cloud Functions, Android Cloud Devices, and IDE Innovations

The article shares how Ant Group's frontend engineering team improves build speed with cloud functions and multi‑process webpack, adopts Apple M1 hardware, tackles Android cloud‑device debugging, and launches a lightweight IDE, illustrating the challenges, innovations, and future directions of modern frontend development.

Android debuggingBuild OptimizationCloud Computing
0 likes · 6 min read
Inside Ant Group's Frontend Engineering: Faster Builds, Cloud Functions, Android Cloud Devices, and IDE Innovations
JavaScript
JavaScript
Mar 15, 2021 · Frontend Development

What Will Shape Web Development in 2021? Insights from the 2020 Survey

Analyzing 2020 developer survey data, this article reveals emerging trends in package managers, testing tools, frameworks, backend runtimes, and build systems that are set to define the JavaScript ecosystem and web development practices in 2021.

Build ToolsJavaScript trendsbackend
0 likes · 5 min read
What Will Shape Web Development in 2021? Insights from the 2020 Survey
Baidu Geek Talk
Baidu Geek Talk
Mar 15, 2021 · Frontend Development

Progressive Front-End Rendering: Route Separation, Pre‑Static Generation, and WebView Pre‑Creation for H5 Performance Optimization

The article describes a progressive front‑end rendering strategy that replaces synchronous template rendering with route separation, build‑time pre‑static HTML generation, and WebView pre‑creation, using skeleton components to cut first‑paint time, lower TTFB and JavaScript delays, and improve H5 performance, scalability and maintenance.

H5OptimizationPerformance
0 likes · 12 min read
Progressive Front-End Rendering: Route Separation, Pre‑Static Generation, and WebView Pre‑Creation for H5 Performance Optimization
21CTO
21CTO
Mar 12, 2021 · Frontend Development

70+ Open‑Source Clone Projects to Master Frontend Development

This article compiles a curated list of more than seventy open‑source clone projects—ranging from 2048 and Airbnb to Netflix and TikTok—providing live demos, source‑code links, and technology‑stack details to help developers learn modern frontend techniques.

CloneLearningReAct
0 likes · 10 min read
70+ Open‑Source Clone Projects to Master Frontend Development
Baidu App Technology
Baidu App Technology
Mar 12, 2021 · Frontend Development

Boost Your Frontend Projects: 9 Essential Practices for San CLI Maintenance

This guide shares nine practical techniques—including issue templates, code linting, unit testing, commit‑message enforcement, continuous integration, GitHub badges, npm‑package monitoring, changelog automation, and contribution guidelines—to help front‑end teams efficiently maintain and scale open‑source projects like San CLI.

CIGitHubLinting
0 likes · 26 min read
Boost Your Frontend Projects: 9 Essential Practices for San CLI Maintenance
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Mar 11, 2021 · Frontend Development

Integrating a React Micro‑Frontend into a Vue‑Based DSP Platform Using qiankun

The Cloud Music DSP team unified its Vue contract platform and React bidding platform by embedding the React app as a qiankun micro‑frontend, replacing iframe and MPA approaches, configuring HTML entry, lifecycle hooks, routing and CSS isolation, and addressing routing, style, and CORS challenges for seamless integration.

IntegrationVuefrontend
0 likes · 17 min read
Integrating a React Micro‑Frontend into a Vue‑Based DSP Platform Using qiankun
Sohu Tech Products
Sohu Tech Products
Mar 10, 2021 · Frontend Development

Applying jscodeshift Codemods for Large‑Scale Frontend Refactoring

This article explains how to use codemod tools, especially jscodeshift, to automatically refactor a growing frontend codebase by replacing a monolithic constants package with per‑constant imports, covering the underlying AST concepts, step‑by‑step script creation, and practical CLI usage.

ASTRefactoringcodemod
0 likes · 11 min read
Applying jscodeshift Codemods for Large‑Scale Frontend Refactoring
The Dominant Programmer
The Dominant Programmer
Mar 7, 2021 · Frontend Development

How to Integrate AMap API in Vue for Positioning and Custom Info Windows

This guide walks through registering an AMap application, installing vue‑amap, configuring the API loader, building a reusable Vue component with search, geolocation, custom markers and styled info windows, and embedding the component into a page to achieve full map display and positioning functionality.

AmapCustom Info WindowMap Integration
0 likes · 11 min read
How to Integrate AMap API in Vue for Positioning and Custom Info Windows
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 3, 2021 · Frontend Development

How We Solved Complex Frontend Data Flow with MobX and DDD

Facing tangled data flow, excessive template code, and scaling challenges in a large single‑page app, we analyzed business traits, identified pain points, and redesigned the architecture using layered stores, an API anti‑corruption layer, and domain‑driven design with MobX, achieving simpler, reusable, and maintainable front‑end code.

DDDMobXdata flow
0 likes · 12 min read
How We Solved Complex Frontend Data Flow with MobX and DDD
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 1, 2021 · Frontend Development

Can One Toolchain Simplify Multi‑Platform Business Component Development?

This article examines the evolution of front‑end component reuse, identifies the fragmented toolchains and duplicated packages that hinder efficient business component development across PC, mobile and mini‑programs, and presents a unified fusion package built with vdev that streamlines building, debugging, and publishing while reducing developer overhead.

ComponentDevelopmentToolchain
0 likes · 20 min read
Can One Toolchain Simplify Multi‑Platform Business Component Development?
New Oriental Technology
New Oriental Technology
Mar 1, 2021 · Frontend Development

Manhattan Routing Algorithm Implementation for Diagram Connections

This article explains the Manhattan routing algorithm used for automatic orthogonal connection routing in diagram tools, discusses its origins, references useful libraries like draw2d, and provides a full TypeScript implementation with code examples and practical application scenarios.

AlgorithmJavaScriptManhattan routing
0 likes · 8 min read
Manhattan Routing Algorithm Implementation for Diagram Connections
Liangxu Linux
Liangxu Linux
Feb 28, 2021 · Frontend Development

What Really Happens When You Type a URL? From DNS to Rendering

This article walks through the complete journey of a URL entered in a browser, covering URL parsing, DNS lookup, TCP handshake, OSI‑layer packet transmission, caching strategies, HTML parsing, rendering pipeline, and practical performance‑optimisation tips.

BrowserNetworkPerformance
0 likes · 14 min read
What Really Happens When You Type a URL? From DNS to Rendering
Liangxu Linux
Liangxu Linux
Feb 27, 2021 · Frontend Development

Open Any GitHub Repo in VS Code Instantly – No Clone Needed

Learn how to use GitHub1s to open any GitHub repository directly in a browser‑based VS Code environment within seconds, explore its features, understand the underlying VS Code extension architecture, and bypass API rate limits with OAuth authentication.

GitHub APIfrontendgithub1s
0 likes · 8 min read
Open Any GitHub Repo in VS Code Instantly – No Clone Needed
ELab Team
ELab Team
Feb 26, 2021 · Frontend Development

Mastering React Hooks: Best Practices and Streamlined Patterns

This article reviews React Hooks, compares them with class components, demonstrates change‑driven coding with practical examples, introduces marble diagrams for visualizing state flows, and explores advanced patterns like custom hooks, immutable data handling, and global state management for more maintainable frontend development.

HooksReActState Management
0 likes · 18 min read
Mastering React Hooks: Best Practices and Streamlined Patterns
58UXD
58UXD
Feb 26, 2021 · Frontend Development

How to Build a Consistent UI for Multi‑Business‑Line Messaging Center Micro‑Chat

This article outlines the background, composition issues, and a three‑principle design system—consistency, interaction reasonableness, and flexibility—used to create a unified UI for 58’s multi‑business‑line messaging center micro‑chat, detailing component specifications, navigation rules, typography, colors, and layout guidelines.

consistencydesign systemfrontend
0 likes · 6 min read
How to Build a Consistent UI for Multi‑Business‑Line Messaging Center Micro‑Chat
Alibaba Cloud Developer
Alibaba Cloud Developer
Feb 25, 2021 · Frontend Development

Streamlining Multi‑Platform Frontend Component Development with Fusion and Rax

This article explores the challenges of building business UI components across PC, mobile, and mini‑app platforms, details a unified fusion development approach using React, Rax, and Alibaba’s Fusion toolchain, and shares practical solutions for tooling, build pipelines, and automated component publishing.

Component DevelopmentRaxReAct
0 likes · 23 min read
Streamlining Multi‑Platform Frontend Component Development with Fusion and Rax
Didi Tech
Didi Tech
Feb 25, 2021 · Frontend Development

Why LogicFlow Is the Ideal Front-End Framework for Flowchart Visualization

LogicFlow, born from DiDi's intelligent middle‑platform, provides a flexible, SVG‑based flowchart editor with rich APIs, MVVM architecture, and extensibility that lets front‑end developers quickly build and customize workflow visualizations while outperforming competing libraries in rendering speed.

ExtensionFlowchartLogicFlow
0 likes · 17 min read
Why LogicFlow Is the Ideal Front-End Framework for Flowchart Visualization
Ctrip Technology
Ctrip Technology
Feb 25, 2021 · Frontend Development

Design and Implementation of Mars: A Lightweight Frontend Mock Platform at Ctrip

This article presents the background, research, design choices, core features, extensions, challenges, and outcomes of Mars, a proxy‑based lightweight frontend mock platform developed by Ctrip's IBU ticket team to improve development efficiency and testing flexibility across devices and environments.

CtripDevelopment ToolsMocking
0 likes · 10 min read
Design and Implementation of Mars: A Lightweight Frontend Mock Platform at Ctrip
Beike Product & Technology
Beike Product & Technology
Feb 23, 2021 · Frontend Development

Using Dumi for Component Library Development and Documentation

This article introduces Dumi, a tool that combines component library project scaffolding with static documentation site generation, explains its three project modes, code structure, MDX-based documentation editing, on‑demand loading, build configurations, workflow commands, and publishing steps for frontend developers.

MDXbuildcomponent library
0 likes · 10 min read
Using Dumi for Component Library Development and Documentation
政采云技术
政采云技术
Feb 23, 2021 · Frontend Development

Capturing and Handling Frontend Exceptions

This article explains common frontend exceptions such as UI glitches, script errors, and network failures, classifies JavaScript error types, demonstrates handling techniques using try‑catch, finally, window.onerror, event listeners, Promise rejection handling, and framework‑specific solutions like React error boundaries, Vue errorHandler, and Axios interceptors.

ReActaxioserror-handling
0 likes · 18 min read
Capturing and Handling Frontend Exceptions
Taobao Frontend Technology
Taobao Frontend Technology
Feb 22, 2021 · Artificial Intelligence

How Pipcook Bridges Front‑End Development and Machine Learning with AI

This article introduces Pipcook, a machine‑learning framework designed for front‑end developers, explains its architecture and integration with TensorFlow.js, Boa, and Node.js, and discusses how it lowers the barrier to building intelligent front‑end applications through pipelines, plugins, and cloud‑native deployment.

AIMachine LearningNode.js
0 likes · 24 min read
How Pipcook Bridges Front‑End Development and Machine Learning with AI
Laravel Tech Community
Laravel Tech Community
Feb 21, 2021 · Frontend Development

Refactoring Examples for Dependent Requests and Complex If‑Else Logic in JavaScript

This article presents practical refactoring techniques for JavaScript code, illustrating how to replace callback‑hell request chains with Promise.all and async/await, transform tangled if‑else blocks into pure, modular functions, and adopt clean‑code principles to improve readability, testability, and maintainability.

JavaScriptPromiseRefactoring
0 likes · 10 min read
Refactoring Examples for Dependent Requests and Complex If‑Else Logic in JavaScript
Java Architect Essentials
Java Architect Essentials
Feb 18, 2021 · Information Security

How Behavior‑Based Captchas Boost Security and User Experience

This article introduces a behavior‑based captcha solution that replaces traditional text captchas with slide‑puzzle and click‑word challenges, explains its terminology, interaction flow, project directory layout, and provides online demo links for both web and mobile implementations.

Spring Bootbackendbehavior captcha
0 likes · 5 min read
How Behavior‑Based Captchas Boost Security and User Experience
Sohu Tech Products
Sohu Tech Products
Feb 17, 2021 · Frontend Development

Image Optimization Techniques for Frontend Development

This article explains why excessive or large images hurt page load speed in e‑commerce sites and provides a comprehensive guide to selecting proper image formats, applying lossless and lossy compression, using tools, configuring webpack, employing CSS sprites, icon fonts, base64, CDN, lazy loading, preloading, responsive and progressive image strategies to improve web performance.

Responsive ImagesWeb Performancefrontend
0 likes · 22 min read
Image Optimization Techniques for Frontend Development
NetEase Smart Enterprise Tech+
NetEase Smart Enterprise Tech+
Feb 14, 2021 · Frontend Development

Building a Frontend Logging Library for SaaS B2B to Accelerate Issue Resolution

To improve SaaS B2B product efficiency and revenue retention, the article examines the unique challenges of frontend development in enterprise services, proposes a client‑side logging library—woodpecker‑log—detailing its design, storage with IndexedDB, performance considerations, API, and integration for rapid customer issue diagnosis.

B2BLoggingPerformance
0 likes · 14 min read
Building a Frontend Logging Library for SaaS B2B to Accelerate Issue Resolution
21CTO
21CTO
Feb 9, 2021 · Frontend Development

Building an Efficient Frontend Component System: iQIYI Knowledge’s Approach

This article details how iQIYI Knowledge's web frontend team designed and implemented a comprehensive componentization strategy that improves code reuse, development efficiency, and maintainability across numerous independent projects while ensuring product consistency.

ComponentizationVuecomponent library
0 likes · 15 min read
Building an Efficient Frontend Component System: iQIYI Knowledge’s Approach
Aotu Lab
Aotu Lab
Feb 8, 2021 · Frontend Development

Boosting Taro Mini‑Program Performance: Proven Best Practices and Real‑World Optimizations

This article details how the Taro team optimized the 京喜拼拼 mini‑program by identifying performance bottlenecks, applying best‑practice coding patterns, refining virtual list handling, reducing setData overhead, and integrating native components, ultimately achieving smoother scrolling and higher experience scores across devices.

Mini ProgramOptimizationTaRO
0 likes · 18 min read
Boosting Taro Mini‑Program Performance: Proven Best Practices and Real‑World Optimizations
Ctrip Technology
Ctrip Technology
Feb 4, 2021 · Frontend Development

Front‑end Middle‑Platform Development for Ctrip and Trip: Componentization, Dark Mode, Internationalization, and Automated Testing

The article describes how Ctrip and Trip unified their disparate front‑end stacks by building a shared component library, splitting styles, adapting dark mode, implementing i18n/l10n, integrating automated testing in GitLab pipelines, and streamlining release and monitoring to improve development efficiency and reduce duplication.

Dark Modefrontendi18n
0 likes · 19 min read
Front‑end Middle‑Platform Development for Ctrip and Trip: Componentization, Dark Mode, Internationalization, and Automated Testing
JavaScript
JavaScript
Feb 4, 2021 · Frontend Development

13 Essential JavaScript Code Optimizations to Write Cleaner, Faster Code

This article presents thirteen practical JavaScript optimization techniques—including concise conditional checks, streamlined if‑else statements, combined variable declarations, destructuring assignments, logical‑AND shortcuts, arrow functions, ternary calls, object‑based switches, default parameters, spread operators, template literals, and object shorthand—to help developers write cleaner, more efficient code.

JavaScriptcode optimizationfrontend
0 likes · 5 min read
13 Essential JavaScript Code Optimizations to Write Cleaner, Faster Code
Sohu Tech Products
Sohu Tech Products
Feb 3, 2021 · Frontend Development

Using clipboard.js for Lightweight Clipboard Operations in Frontend Development

This guide explains why clipboard.js is a lightweight, dependency‑free solution for copying and cutting text, shows how to install it via npm or CDN, demonstrates configuration and various usage patterns—including data attributes, event handling, advanced options, and a Vue 3 integration—while also covering browser support.

Vue3clipboardclipboard.js
0 likes · 8 min read
Using clipboard.js for Lightweight Clipboard Operations in Frontend Development
Alibaba Terminal Technology
Alibaba Terminal Technology
Feb 3, 2021 · Frontend Development

How Front-End AI Inference Engines Achieve Real-Time Smart Recognition

This article explains on‑device machine learning concepts, compares front‑end inference engines such as TensorFlow.js, ONNX.js and WebDNN across CPU, WASM and WebGL, and presents practical optimization techniques like vectorization, memory layout, graph fusion and mixed‑precision to boost performance for real‑time applications.

Machine Learningfrontendinference engine
0 likes · 11 min read
How Front-End AI Inference Engines Achieve Real-Time Smart Recognition
Top Architect
Top Architect
Feb 3, 2021 · Frontend Development

Comprehensive Overview of Browser Rendering Process and HTTP Request Flow

This article provides a detailed, front‑end‑focused walkthrough of the complete browser request‑response lifecycle—from URL parsing and DNS lookup through TCP connection, HTTP handling, HTML/CSS parsing, JavaScript execution, to final page rendering—highlighting key concepts, common pitfalls, and optimization tips.

BrowserNetworkRendering
0 likes · 15 min read
Comprehensive Overview of Browser Rendering Process and HTTP Request Flow
Aotu Lab
Aotu Lab
Feb 2, 2021 · Frontend Development

How EOS-JS Revolutionizes Frontend Code Quality with AST‑Based Scanning

This article examines the challenges of enforcing JavaScript coding standards in large‑scale frontend projects and presents EOS-JS, an AST‑driven static analysis tool that offers modular scanning, automatic fixes, multi‑scenario rule sets, seamless CI integration, and visualized data reporting to improve code quality and maintainability.

ASTEOS-JSJavaScript
0 likes · 12 min read
How EOS-JS Revolutionizes Frontend Code Quality with AST‑Based Scanning
Xianyu Technology
Xianyu Technology
Feb 2, 2021 · Frontend Development

Xianyu's Server-Side Rendering Architecture and Implementation

Xianyu’s server‑side rendering solution uses a serverless Node.js app on Alibaba Cloud to aggregate backend data and render HTML, routing through Nginx and caching via CDN, which cuts first‑meaningful‑paint time, maintains high stability with low O&M, and seamlessly falls back to client‑side rendering when needed.

Node.jsPerformanceSSR
0 likes · 10 min read
Xianyu's Server-Side Rendering Architecture and Implementation
JD Cloud Developers
JD Cloud Developers
Feb 1, 2021 · Frontend Development

How EOS-JS Revolutionizes JavaScript Code Quality with AST‑Based Scanning

This article explains how EOS‑JS, a plugin‑based static analysis tool, uses AST pattern matching to enforce JavaScript coding standards across large front‑end teams, offering automatic fixes, multi‑scenario rule sets, seamless integration, and visualized data statistics to improve code quality and maintenance efficiency.

ASTEOS-JSJavaScript
0 likes · 11 min read
How EOS-JS Revolutionizes JavaScript Code Quality with AST‑Based Scanning
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Feb 1, 2021 · Frontend Development

Turn Web Interactions into Video: Recording, Incremental Snapshots, and rrweb Playback

This article explains how to capture user interactions on insurance web pages by taking DOM snapshots, creating incremental snapshots with MutationObserver, leveraging the rrweb library for recording and replay, and converting the recorded data into high‑frame‑rate video using Puppeteer and FFmpeg to ensure reliable evidence.

DOM snapshotMutationObserverfrontend
0 likes · 13 min read
Turn Web Interactions into Video: Recording, Incremental Snapshots, and rrweb Playback
Amap Tech
Amap Tech
Feb 1, 2021 · Frontend Development

Realistic Lighting Rendering for 3D Building Elements in AMap JSAPI 2.0

The article explains how AMap JSAPI 2.0 achieves realistic 3‑D building lighting by applying the Blinn‑Phong model with ambient, diffuse and specular components, employing directional, point and spot lights together with a classic three‑point lighting setup—including a high‑altitude point light over the Oriental Pearl Tower—to produce depth‑rich, non‑flat visualizations.

3D renderingBlinn-PhongWebGL
0 likes · 11 min read
Realistic Lighting Rendering for 3D Building Elements in AMap JSAPI 2.0
Sensors Frontend
Sensors Frontend
Feb 1, 2021 · Frontend Development

2021 Software Development Trends & Essential Frontend Guides

This article compiles the most influential 2021 software development trends—from cloud, edge, containers, AI, blockchain, and more—alongside curated deep-dive resources covering frontend innovations such as smart code generation, TypeScript declarations, authentication mechanisms, node_modules challenges, React best practices, security protocols, and operational resilience.

2021 Trendsfrontendsecurity
0 likes · 10 min read
2021 Software Development Trends & Essential Frontend Guides
iQIYI Technical Product Team
iQIYI Technical Product Team
Jan 29, 2021 · Frontend Development

Efficient Front-End Componentization Practices at iQIYI Knowledge Web Team

The iQIYI Knowledge Web front‑end team built a developer‑oriented component library that splits UI and business logic into reusable basic and business Vue components, enforces clear input/output contracts, uses on‑demand loading and Storybook documentation, achieving high code reuse, maintainability, and consistent UI across independent projects while tackling bundle size and CI/CD challenges.

ComponentizationSoftware ArchitectureUI components
0 likes · 14 min read
Efficient Front-End Componentization Practices at iQIYI Knowledge Web Team
Baidu App Technology
Baidu App Technology
Jan 28, 2021 · Frontend Development

Inside san-loader: How San Files Are Split, Compiled, and Integrated in Webpack

This article provides a deep technical walkthrough of san-loader, explaining how the Baidu‑developed San framework’s .san files are parsed, split into template, script and style sections, processed by san-loader‑plugin, and finally compiled into browser‑ready code with support for options like compileTemplate, esModule, and CSS Modules.

CSS Modulesfrontendloader
0 likes · 18 min read
Inside san-loader: How San Files Are Split, Compiled, and Integrated in Webpack
Product Technology Team
Product Technology Team
Jan 28, 2021 · Frontend Development

Zhenkunxing’s Frontend Overhaul 2020‑2021: Visual Editors, UI Libraries & Low‑Code

From 2020 to 2021, Zhenkunxing built a visual‑editing service, a unified UI component library, standardized development, compilation and deployment pipelines, a front‑end portal, an online‑form system, an OKR tool, and a micro‑frontend BOSS platform, while planning a low‑code platform to boost efficiency and scalability.

DevOpsVisual Editorarchitecture
0 likes · 14 min read
Zhenkunxing’s Frontend Overhaul 2020‑2021: Visual Editors, UI Libraries & Low‑Code
JD Retail Technology
JD Retail Technology
Jan 27, 2021 · Frontend Development

EOS-JS: A Plugin‑Based JavaScript Static Analysis Engine for Frontend Code Standardization

The article introduces EOS‑JS, a plugin‑driven JavaScript static analysis platform that leverages AST pattern matching to detect, suggest fixes, and automatically repair code‑style violations across large‑scale frontend projects, detailing its architecture, core modules, dynamic configuration, automation, and data‑visualization capabilities.

ASTEOS-JSStatic Analysis
0 likes · 12 min read
EOS-JS: A Plugin‑Based JavaScript Static Analysis Engine for Frontend Code Standardization
JavaScript
JavaScript
Jan 27, 2021 · Backend Development

Which API Response Format Is Best: Include Empty B or Omit It?

The discussion compares two API response designs—always returning an empty array for field B versus omitting B when it has no data—and evaluates which approach provides clearer contracts and easier handling for front‑end developers.

API designbackendfrontend
0 likes · 1 min read
Which API Response Format Is Best: Include Empty B or Omit It?
政采云技术
政采云技术
Jan 26, 2021 · Frontend Development

Writing High-Quality Maintainable Code: Elegant Naming

This article explains why clear, meaningful naming is essential for maintainable front‑end code, showcases common bad naming patterns, and provides practical naming rules, conventions, tooling tips, and examples for JavaScript, CSS, and project structures.

JavaScriptNamingbest-practices
0 likes · 11 min read
Writing High-Quality Maintainable Code: Elegant Naming
JD Retail Technology
JD Retail Technology
Jan 25, 2021 · Industry Insights

Why Taro Secured a Spot in China’s Top‑5 Open‑Source Projects in 2020

The 2020 China Open‑Source Annual Report highlights Taro’s rapid rise to the fourth‑ranked open‑source project, showcasing its cross‑platform capabilities, active community, industry collaborations, and extensive real‑world deployments that illustrate why it stands out among China’s top five projects.

ChinaTaROcross-platform
0 likes · 7 min read
Why Taro Secured a Spot in China’s Top‑5 Open‑Source Projects in 2020
Baidu Geek Talk
Baidu Geek Talk
Jan 22, 2021 · Frontend Development

Why Baidu Chose San: A Deep Dive into Its Performance, Compatibility, and Ecosystem

This article examines Baidu's home‑grown MVVM framework San, tracing its origins, core features, size and performance benchmarks, ecosystem tools such as CLI and DevTools, and real‑world deployments across Baidu App, feed pages, and mini‑programs, highlighting why it became the unified front‑end solution.

BaiduMVVMPerformance
0 likes · 17 min read
Why Baidu Chose San: A Deep Dive into Its Performance, Compatibility, and Ecosystem
Taobao Frontend Technology
Taobao Frontend Technology
Jan 22, 2021 · Frontend Development

What 2020’s State of JavaScript Reveals About Syntax, Frameworks, and Tools

2020’s State of JavaScript survey, covering 137 countries and nearly 24,000 developers, highlights which language features, browser APIs, frameworks, and tooling have gained traction or lagged behind, offering insights into current front‑end trends such as the rise of TypeScript, Svelte, esbuild, and the modest adoption of WebAssembly.

JavaScriptSvelteWeb APIs
0 likes · 13 min read
What 2020’s State of JavaScript Reveals About Syntax, Frameworks, and Tools
Alibaba Terminal Technology
Alibaba Terminal Technology
Jan 21, 2021 · Frontend Development

Why Business‑Line Frontend Is the Sweet Spot for Your Career

This article shares a frontend engineer’s perspective on thriving in business‑line projects, emphasizing mindset, all‑round skill development, cross‑disciplinary collaboration, problem‑solving, and continuous growth to turn perceived pressures into career advantages.

business linecareer-developmentfrontend
0 likes · 14 min read
Why Business‑Line Frontend Is the Sweet Spot for Your Career
Laravel Tech Community
Laravel Tech Community
Jan 20, 2021 · Frontend Development

Bootstrap 4.6.0 Released with Major Updates and Migration to Hugo

Bootstrap 4.6.0 has been released, introducing customClass support for tooltips and popovers, a new .navbar-nav-scroll class for mobile navigation, accessibility improvements, updated documentation built on Hugo, darker dropdown items, better form‑validation tooltip alignment, and fixed file‑input overflow issues.

BootstrapHugodocumentation
0 likes · 3 min read
Bootstrap 4.6.0 Released with Major Updates and Migration to Hugo
Yuewen Frontend Team
Yuewen Frontend Team
Jan 19, 2021 · Frontend Development

How to Build a Pure CSS Star Rating with input type="range"

This article walks through creating a fully CSS‑based star rating component using the HTML input type="range", exploring its shadow‑DOM structure, applying CSS masks, handling cross‑browser quirks, and providing complete code snippets for a flexible, lightweight solution.

CSScross‑browserfrontend
0 likes · 10 min read
How to Build a Pure CSS Star Rating with input type="range"
Alibaba Terminal Technology
Alibaba Terminal Technology
Jan 18, 2021 · Frontend Development

How iMove Turns Front‑End Logic into Visual Flowcharts and Ready‑to‑Run Code

iMove is an open‑source low‑code tool for front‑end developers that visualizes business logic as flowcharts, compiles them into executable JavaScript (or other languages), supports online and local builds, automatic npm dependency resolution, and instant node testing, dramatically reducing UI‑logic coupling and maintenance cost.

Visual ProgrammingWorkflowfrontend
0 likes · 25 min read
How iMove Turns Front‑End Logic into Visual Flowcharts and Ready‑to‑Run Code
ByteFE
ByteFE
Jan 18, 2021 · Frontend Development

State of JS 2020: Trends and Satisfaction of JavaScript Libraries and Frameworks

The article analyzes the State of JS 2020 data, showing how emerging JavaScript libraries, front‑end and back‑end frameworks, testing tools, bundlers and other utilities rank in usage and developer satisfaction, and highlights the rapid rise of TypeScript, Jest, React, Vue.js and newer tools such as esbuild and Snowpack.

FrameworksJavaScriptLibraries
0 likes · 7 min read
State of JS 2020: Trends and Satisfaction of JavaScript Libraries and Frameworks
58UXD
58UXD
Jan 18, 2021 · Frontend Development

How We Revamped a 20k‑User Enterprise Communication Tool’s PC UI

This case study details the complete redesign of Meishi’s PC client—an internal communication platform for over 20,000 employees—covering background challenges, visual and interaction upgrades, information‑noise reduction, motion integration, and the creation of a unified design system to boost efficiency and brand perception.

UI redesigndesign systementerprise communication
0 likes · 8 min read
How We Revamped a 20k‑User Enterprise Communication Tool’s PC UI
Programmer DD
Programmer DD
Jan 17, 2021 · Frontend Development

Inside Pornhub’s Front‑End: How Adult Sites Drive Web Innovation

An exclusive interview with a Pornhub front‑end engineer reveals how the adult‑industry pushes browser video limits, adopts new Web APIs like IntersectionObserver and Picture‑in‑Picture, and tackles performance, testing, and cross‑platform challenges to stay at the cutting edge of web development.

Web APIsWeb Performancefrontend
0 likes · 11 min read
Inside Pornhub’s Front‑End: How Adult Sites Drive Web Innovation
Alibaba Terminal Technology
Alibaba Terminal Technology
Jan 14, 2021 · Frontend Development

How Alibaba’s MediaAI Studio Brings AI‑Powered Live Stream Interactions to Life

This article explains how Alibaba's MediaAI Studio enables real‑time gesture‑based festive effects, AI‑driven face accessories, and interactive live‑stream experiences on Taobao, detailing the workflow from design to deployment, the underlying media‑intelligence architecture, and future development plans.

AI interactionARMedia AI
0 likes · 15 min read
How Alibaba’s MediaAI Studio Brings AI‑Powered Live Stream Interactions to Life
Full-Stack Internet Architecture
Full-Stack Internet Architecture
Jan 13, 2021 · Information Security

Three Single Sign-On Mechanisms and Their Implementation Methods

The article introduces three single sign‑on mechanisms—stateless HTTP, session‑based, and login state—and compares three practical implementations: using a parent‑domain cookie, deploying an authentication centre, and sharing tokens via LocalStorage with iframe and postMessage, providing code examples and diagrams.

SSObackendfrontend
0 likes · 9 min read
Three Single Sign-On Mechanisms and Their Implementation Methods
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jan 13, 2021 · Frontend Development

Full-Stack Front-End Insights: Fred Wu’s Journey and Future Trends

In this interview, Fred Wu, Tencent’s front‑end lead, shares his experiences with full‑stack development, offers advice for aspiring front‑end engineers, discusses his team’s recent full‑stack initiatives, and predicts upcoming trends such as Flutter, low‑code, and 5G‑driven audio‑video advancements.

Full-StackTechnology TrendsWeb Development
0 likes · 6 min read
Full-Stack Front-End Insights: Fred Wu’s Journey and Future Trends
Qunar Tech Salon
Qunar Tech Salon
Jan 13, 2021 · Frontend Development

Qunar 2020 Technical Achievements and Article Collection

In 2020 Qunar's front‑end team explored multi‑platform adaptation, low‑code marketing, UI automation, security enhancements, and framework upgrades, publishing a series of technical articles that detail their solutions, performance gains, and practical insights for developers across the organization.

Qunarfrontendlow-code
0 likes · 6 min read
Qunar 2020 Technical Achievements and Article Collection
ByteFE
ByteFE
Jan 12, 2021 · Frontend Development

Recording Canvas Animations to Video Using the Media Streams API

This article demonstrates how to capture a Canvas animation as a video using the Media Streams API and MediaRecorder, providing step‑by‑step code examples, integration with ffmpeg‑wasm for audio, and discusses use cases such as online teaching and resource‑efficient playback.

CanvasMedia Streams APIMediaRecorder
0 likes · 6 min read
Recording Canvas Animations to Video Using the Media Streams API
New Oriental Technology
New Oriental Technology
Jan 11, 2021 · Frontend Development

Understanding npm Dependency Management and Building a Publishable npm Package with Webpack

This article explains how npm flattens dependencies, compares npm, cnpm and yarn, outlines the evolution of package managers, details essential package.json fields, demonstrates using nrm, and provides a step‑by‑step guide to configure Webpack, create, build, and publish a custom npm package.

Package ManagementYARNdependency
0 likes · 11 min read
Understanding npm Dependency Management and Building a Publishable npm Package with Webpack
iQIYI Technical Product Team
iQIYI Technical Product Team
Jan 8, 2021 · Frontend Development

Front‑End Performance Optimization for iQIYI Video Production Smart Cloud Platform

After replacing its three‑year‑old Arm.js stack with a Vue.js + Node.js architecture, iQIYI’s smart‑cloud video platform tackled loading, rendering, and API bottlenecks by using CDN‑served library DLLs, refined Webpack splitChunks, lazy‑loaded components with skeleton screens, and rewrote the BFF in NestJS, cutting bundle size by two‑thirds, reducing first‑page load to 790 ms and halving core API latency.

Node.jsOptimizationPerformance
0 likes · 16 min read
Front‑End Performance Optimization for iQIYI Video Production Smart Cloud Platform
Aotu Lab
Aotu Lab
Jan 8, 2021 · Frontend Development

Front‑End Tech Highlights: Video Players, Performance Tips, AI Recommendations

From the rise and fall of Flash to modern front‑end video playback techniques, performance optimization strategies, AI recommendation fundamentals, CLI design best practices, and a glimpse into game development and algorithm analysis, this article surveys diverse cutting‑edge technologies shaping today’s software landscape.

AIAlgorithmCLI
0 likes · 10 min read
Front‑End Tech Highlights: Video Players, Performance Tips, AI Recommendations
Aotu Lab
Aotu Lab
Jan 8, 2021 · Frontend Development

From Taro IDE to Tide: Building a Multi‑Platform Frontend Development Ecosystem

This article chronicles the evolution of Taro IDE—from a cross‑platform mini‑program framework to an integrated development environment built on Electron and Theia—detailing its architecture, debugging tools, user‑feedback lessons, and the transition toward the Tide IDE framework for scalable frontend engineering.

ElectronIDETaRO
0 likes · 12 min read
From Taro IDE to Tide: Building a Multi‑Platform Frontend Development Ecosystem
Alibaba Terminal Technology
Alibaba Terminal Technology
Jan 7, 2021 · Frontend Development

How Frontend Chaos Engineering Boosts Reliability: Lessons from Alibaba

This article explores the challenges of frontend availability, introduces chaos engineering concepts, and details Alibaba's practical approach to frontend fault injection—including static resource hijacking, a safe isolated environment, monitoring integration, and a real‑world drill that demonstrates how to measure and improve detection and response capabilities.

Chaos EngineeringMonitoringReliability
0 likes · 18 min read
How Frontend Chaos Engineering Boosts Reliability: Lessons from Alibaba
Taobao Frontend Technology
Taobao Frontend Technology
Jan 7, 2021 · Frontend Development

Unveiling the Secrets of CSS: From Its Origins to Modern Mastery

This comprehensive guide explores CSS history, its evolution through standards, core concepts like cascade, specificity, inheritance, formatting contexts, box model, modern layout techniques, best practices, tooling, and future trends, offering developers a deep understanding of styling the web.

CSSLayoutStyling
0 likes · 52 min read
Unveiling the Secrets of CSS: From Its Origins to Modern Mastery
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jan 7, 2021 · Frontend Development

How Lottie Turns JSON Into Smooth Web Animations: A Deep Dive

This article explains how Lottie uses JSON exported from Adobe After Effects via the Bodymovin plugin to render vector animations on the web, detailing the export workflow, JSON structure, renderer initialization, layer processing, and the requestAnimationFrame‑driven playback loop with code examples.

BodymovinJSON animationLottie
0 likes · 20 min read
How Lottie Turns JSON Into Smooth Web Animations: A Deep Dive