BestHub
Sign in
Tagged articles

frontend development

790 articles · Page 5 of 8
Java Architect Essentials
Java Architect Essentials
Apr 11, 2022 · Frontend Development

Boost Your VS Code: 60+ Must‑Have Extensions for Frontend Developers

This article presents a curated collection of over sixty VS Code extensions, organized into categories such as appearance optimization, functional enhancements, coding efficiency, code formatting, and fun utilities, each with a brief description, usage tips, and screenshots to help frontend developers improve their development experience.

IDEProductivityTooling
0 likes · 20 min read
Boost Your VS Code: 60+ Must‑Have Extensions for Frontend Developers
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 7, 2022 · Frontend Development

Understanding JavaScript Memory Management and Common Memory Leaks

This article explains JavaScript's memory lifecycle, defines memory leaks, enumerates typical leak patterns such as accidental globals, timers, closures and DOM references, and describes the underlying garbage‑collection strategies (mark‑and‑sweep and reference counting) together with practical mitigation techniques.

Garbage CollectionJavaScriptMemory Management
0 likes · 18 min read
Understanding JavaScript Memory Management and Common Memory Leaks
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 31, 2022 · Frontend Development

What’s New in Chrome 100? Multi‑Screen API, Array Grouping, and Privacy Updates

Chrome 100 brings major frontend changes, including a Multi‑Screen Window Placement API for multi‑display apps, the ECMAScript Array Grouping proposal, reduced User‑Agent strings for better privacy, and the deprecation of the document.domain setter to strengthen same‑origin security.

Array groupingChrome 100Multi-screen API
0 likes · 11 min read
What’s New in Chrome 100? Multi‑Screen API, Array Grouping, and Privacy Updates
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 30, 2022 · Frontend Development

How Alibaba’s Feizhu Scaled WeChat Mini‑Programs: Front‑End Strategies & Lessons

This article details Alibaba's Feizhu journey of adopting WeChat mini‑programs, covering background, technology stack choices, integration platform design, performance and volume optimizations, and future front‑end challenges, offering practical insights for large‑scale mobile web development.

Domain BlockingRaxWeChat mini program
0 likes · 14 min read
How Alibaba’s Feizhu Scaled WeChat Mini‑Programs: Front‑End Strategies & Lessons
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 29, 2022 · Game Development

Recreating the Classic Duck Hunt Game with Vue 3 and PixiJS

This article walks through building a browser‑based Duck Hunt‑style shooting game using Vue 3 for the UI framework, PixiJS as the rendering engine, and supporting tools such as Vite, SCSS, mitt, and GSAP to handle asset loading, scene management, animations, hit detection, and responsive scaling.

GSAPGame DevelopmentPixiJS
0 likes · 14 min read
Recreating the Classic Duck Hunt Game with Vue 3 and PixiJS
Ziru Technology
Ziru Technology
Mar 24, 2022 · Frontend Development

Building a High‑Performance Sketch Plugin with Vue3, Skpm, and Webview

This article details the end‑to‑end development of a Sketch plugin—covering background motivations, toolchain setup with Skpm, Vue3, and webview, project architecture, build scripts, communication between webview and plugin, resource handling, drag‑and‑drop, data caching, and design‑validation features—providing practical solutions to common challenges.

Sketch PluginVue3frontend development
0 likes · 11 min read
Building a High‑Performance Sketch Plugin with Vue3, Skpm, and Webview
Sohu Tech Products
Sohu Tech Products
Mar 23, 2022 · Frontend Development

Understanding Double Assignment and Operator Precedence in jQuery Code

This article explains why jQuery’s source uses a double assignment pattern, how assignment operators are right‑associative expressions, the impact of operator precedence on property access versus assignment, and demonstrates practical uses such as building linked structures in JavaScript.

JavaScriptOperator Precedenceassignment expression
0 likes · 6 min read
Understanding Double Assignment and Operator Precedence in jQuery Code
58 Tech
58 Tech
Mar 10, 2022 · Frontend Development

Vite Principles, Implementation, and Migration Guide

This article provides a comprehensive tutorial on Vite, explaining its core principles, architecture, and practical implementation, while detailing a step‑by‑step migration from Webpack—including handling JSX, aliasing, module resolution, CSS, HMR, and performance improvements—complete with code snippets and real‑world challenges.

Build ToolsPerformanceVite
0 likes · 24 min read
Vite Principles, Implementation, and Migration Guide
NetEase LeiHuo UX Big Data Technology
NetEase LeiHuo UX Big Data Technology
Mar 7, 2022 · Frontend Development

Web Animation Techniques: CSS Frame, Tween, JavaScript, SVG, and Canvas

Web animation enhances user experience by providing visual feedback and dynamic content, and this article surveys common frontend animation methods—including CSS frame and tween animations, JavaScript style manipulation, SVG animations, and Canvas/WebGL techniques—detailing their implementations, use cases, and performance considerations.

CSSCanvasSVG
0 likes · 9 min read
Web Animation Techniques: CSS Frame, Tween, JavaScript, SVG, and Canvas
Programmer DD
Programmer DD
Mar 7, 2022 · Frontend Development

How pnpm Saves Disk Space and Boosts Install Speed for JavaScript Projects

This article introduces pnpm, a fast and efficient JavaScript package manager that reduces disk usage by sharing dependencies, explains its core principles, highlights key features such as monorepo support and strict node_modules layout, and provides multiple installation methods for various operating systems.

disk spacefrontend developmentpackage manager
0 likes · 4 min read
How pnpm Saves Disk Space and Boosts Install Speed for JavaScript Projects
21CTO
21CTO
Mar 6, 2022 · Frontend Development

What Interop 2022 Reveals About Browser Compatibility and New CSS Features

Leading browser vendors Apple, Google, Microsoft, and Mozilla, together with Bocoup and Igalia, launched Interop 2022 to benchmark and improve cross‑browser support for emerging web standards, revealing score gaps and highlighting fifteen priority areas such as cascade layers, color spaces, containment, dialog elements, form fixes, scrolling, subgrid, typography, and viewport units.

CSS featuresInterop 2022browser interoperability
0 likes · 10 min read
What Interop 2022 Reveals About Browser Compatibility and New CSS Features
58 Tech
58 Tech
Mar 3, 2022 · Frontend Development

Building a Chrome Extension for QR Code Generation and Decoding with jQuery

This tutorial explains how to create a Chrome browser extension that generates QR codes (optionally with protocol headers) and decodes them, covering the background motivation, directory layout, manifest and popup design, core JavaScript logic, installation steps, and a download link for the complete source.

Chrome ExtensionJavaScriptQR code
0 likes · 12 min read
Building a Chrome Extension for QR Code Generation and Decoding with jQuery
Taobao Frontend Technology
Taobao Frontend Technology
Mar 1, 2022 · Frontend Development

How Taobao Transformed Its Store Builder with TypeScript: Lessons & Best Practices

This article details Taobao's front‑end engineer Lin Weixuan's experience migrating the massive store‑decoration codebase to TypeScript, establishing development and engineering standards, optimizing compiler performance, and exploring advanced type programming and tooling to improve code quality and stability.

Utility Typescode qualitycompiler api
0 likes · 40 min read
How Taobao Transformed Its Store Builder with TypeScript: Lessons & Best Practices
IT Services Circle
IT Services Circle
Mar 1, 2022 · Frontend Development

Understanding Server-Side Rendering (SSR) in Vue: Principles and Implementation

This article explains the principles and implementation of server‑side rendering (SSR) in Vue, comparing CSR and SSR, detailing how Vue’s vue‑server‑renderer creates a bundle renderer, executes code via Node’s vm, traverses the virtual DOM to generate HTML strings, and relates SSR rendering to the generate phase of front‑end compilation.

SSRServer-side RenderingVue
0 likes · 7 min read
Understanding Server-Side Rendering (SSR) in Vue: Principles and Implementation
DaTaobao Tech
DaTaobao Tech
Feb 24, 2022 · Frontend Development

Why Web Components?

Web Components provide native, reusable HTML elements with Shadow DOM isolation, delivering lower CPU and memory usage than frameworks like React, and are increasingly adopted by companies such as Twitter, YouTube, and Adobe, offering performance, maintainability, and reduced vendor lock‑in for modern frontend development.

JavaScriptUI componentsfrontend development
0 likes · 11 min read
Why Web Components?
360 Tech Engineering
360 Tech Engineering
Feb 23, 2022 · Frontend Development

SSR Rendering Solution and Performance Optimization for the 360 Search Encyclopedia Mobile Project

This article details the motivation, technology selection, architecture design, and multi‑stage performance optimization of a server‑side rendering (SSR) solution built with Vue and Nuxt for the 360 Search Encyclopedia mobile project, covering challenges, experiments, deployment strategies, and final conclusions.

NuxtSSRServer-side Rendering
0 likes · 19 min read
SSR Rendering Solution and Performance Optimization for the 360 Search Encyclopedia Mobile Project
58UXD
58UXD
Feb 23, 2022 · Frontend Development

Why Design Guidelines Matter: Boost Collaboration and Visual Consistency

This article explains how establishing clear design specifications improves team collaboration, speeds up component assembly, ensures visual consistency across a product, and outlines a practical process for creating, reviewing, and iterating design guidelines within a mobile app ecosystem.

UI designdesign systemfrontend development
0 likes · 4 min read
Why Design Guidelines Matter: Boost Collaboration and Visual Consistency
Sensors Frontend
Sensors Frontend
Feb 22, 2022 · Frontend Development

Why Vite Beats Webpack: Deep Dive into Architecture and HMR

This article examines the limitations of bundle‑based tools like Webpack, introduces Vite’s ESM‑based approach, and provides a detailed analysis of Vite’s architecture, hot‑module‑replacement, module transformation, dependency graph, and plugin system, illustrating how it improves development speed and efficiency.

Build ToolsESMHot Module Replacement
0 likes · 13 min read
Why Vite Beats Webpack: Deep Dive into Architecture and HMR
21CTO
21CTO
Feb 18, 2022 · Frontend Development

Why Browser Versions Are Jumping to 100 and What It Means for Developers

The article reports that WeChat’s departments are testing a 10‑am to 6‑pm workweek, Mozilla is seeking new revenue after its browser market share fell, and both Chrome and Firefox are preparing to release version 100, prompting developers to update User‑Agent parsing.

MozillaUser-AgentWeChat
0 likes · 5 min read
Why Browser Versions Are Jumping to 100 and What It Means for Developers
IT Services Circle
IT Services Circle
Feb 17, 2022 · Frontend Development

Using Mermaid Diagrams in GitHub Markdown: A Quick Introduction

GitHub now integrates the Mermaid diagram plugin into Markdown, allowing developers to embed flowcharts, sequence diagrams, Gantt charts, and more directly in documentation using simple text syntax, which streamlines visualization, reduces maintenance overhead, and enhances collaborative understanding of project architectures.

GitHubMermaiddiagram
0 likes · 5 min read
Using Mermaid Diagrams in GitHub Markdown: A Quick Introduction
Alibaba Cloud Developer
Alibaba Cloud Developer
Feb 15, 2022 · Cloud Computing

How Serverless + Low‑Code Power a Blind Box Lottery in Minutes

This article demonstrates how combining Serverless computing with low‑code tools enables rapid development of a blind‑box lottery, covering architecture design, front‑end low‑code implementation, back‑end Django logic, security measures, deployment steps, and insights from both developer and vendor perspectives.

Blind Box LotteryCloud FunctionsDjango
0 likes · 17 min read
How Serverless + Low‑Code Power a Blind Box Lottery in Minutes
Sohu Tech Products
Sohu Tech Products
Feb 9, 2022 · Frontend Development

Creating a Winter Olympics 3D Scene with Three.js and React

This article demonstrates how to build an interactive 3D Winter Olympics themed webpage using Three.js and React, covering resource import, scene setup, lighting, model loading, custom materials, particle effects, camera controls, and animation techniques.

3D graphicsReActThree.js
0 likes · 18 min read
Creating a Winter Olympics 3D Scene with Three.js and React
转转QA
转转QA
Jan 19, 2022 · Frontend Development

Getting Started with UI Automation Testing Using Puppeteer and Mocha

This tutorial explains how to set up and use Puppeteer together with the Mocha test framework to create, run, and report UI automation test cases for web and H5 applications, covering installation, a demo script, selector handling, and visual test reporting.

JavaScriptNode.jsPuppeteer
0 likes · 6 min read
Getting Started with UI Automation Testing Using Puppeteer and Mocha
ByteFE
ByteFE
Jan 10, 2022 · Frontend Development

Frontend Resource Download via CDN and Object Storage

This article explains how front-end developers can directly download resources from CDN or object storage using HTML5's download attribute and JavaScript workarounds, addressing CORS limitations and providing code examples for implementation.

Blob APICDNCORS
0 likes · 7 min read
Frontend Resource Download via CDN and Object Storage
Taobao Frontend Technology
Taobao Frontend Technology
Jan 5, 2022 · Frontend Development

Embedding Flutter Widgets as Custom Elements in Kraken's Web Engine

This article explains how Kraken, a high‑performance Web rendering engine, integrates Flutter widgets as custom elements, detailing the component architecture, registration process, rendering pipeline, adapter mechanisms, and advanced use cases such as optimizing waterfall‑flow performance for seamless hybrid Web‑Flutter applications.

FlutterHybrid RenderingKraken
0 likes · 14 min read
Embedding Flutter Widgets as Custom Elements in Kraken's Web Engine
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Dec 30, 2021 · Frontend Development

Mastering Plugin Architecture: Build Extensible Babel and Webpack Plugins

This article explains the core‑plugin architecture, outlines the roles of Core, PluginApi and Plugin, and demonstrates how to create and integrate custom plugins for Babel and Webpack, covering AST transformation, visitor merging, Tapable hooks, and practical code examples to improve extensibility and maintainability.

BabelBuild ToolsPlugin System
0 likes · 13 min read
Mastering Plugin Architecture: Build Extensible Babel and Webpack Plugins
Java Interview Crash Guide
Java Interview Crash Guide
Dec 6, 2021 · Frontend Development

How I Modernized a Legacy Delphi Warehouse System with React and .NET Core

This article recounts the complete redesign of a 2500‑person factory's Delphi‑based supply‑chain system, detailing the shift to a front‑end/back‑end separated architecture using React, Ant Design, and .NET Core 3.1, while addressing data consistency, rounding issues, UI habits, printing, and deployment challenges.

.NET CoreReActfrontend development
0 likes · 11 min read
How I Modernized a Legacy Delphi Warehouse System with React and .NET Core
Programmer DD
Programmer DD
Dec 4, 2021 · Frontend Development

Boost Your UI with use-gesture: Simple React & Vanilla JS Gestures

This article introduces the use-gesture library, a lightweight React and vanilla JavaScript tool for enriching mouse and touch interactions, explains installation via Yarn or npm, demonstrates various gesture hooks with code examples, and showcases visual effects through animated demos.

JavaScriptReActfrontend development
0 likes · 4 min read
Boost Your UI with use-gesture: Simple React & Vanilla JS Gestures
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 2, 2021 · Frontend Development

Deep Dive into TypeScript Utility Types: 22 Examples and Advanced Techniques

This article provides a comprehensive guide to TypeScript’s built‑in and custom utility types, explaining their underlying principles, usage examples, and advanced programming techniques across 22 detailed examples, covering concepts such as keyof, conditional types, mapped types, and type inference for developers seeking to master TS type tooling.

Conditional TypesMapped TypesUtility Types
0 likes · 32 min read
Deep Dive into TypeScript Utility Types: 22 Examples and Advanced Techniques
ByteFE
ByteFE
Dec 1, 2021 · Frontend Development

Creating a Breakfast Noodle Dish with CSS: A Step-by-Step Guide

This article demonstrates how to create a breakfast noodle dish using CSS, covering techniques like :before/:after pseudo-elements, box-shadow, and gradients to build a visually appealing and realistic food illustration.

CSSFood IllustrationGradients
0 likes · 8 min read
Creating a Breakfast Noodle Dish with CSS: A Step-by-Step Guide
Taobao Frontend Technology
Taobao Frontend Technology
Nov 29, 2021 · Frontend Development

Vercel’s $150M Funding, Remix Open‑Source, and Key Front‑End Tools Explained

From Vercel’s $150 million Series D round cementing its role as a leading web‑dev platform, to Remix’s open‑source launch as a strong Next.js competitor, plus a practical guide to using the concurrently CLI for parallel Node processes and an introduction to TypeScript’s never type, this roundup covers the latest front‑end developments.

ConcurrentlyRemixVercel
0 likes · 4 min read
Vercel’s $150M Funding, Remix Open‑Source, and Key Front‑End Tools Explained
JD Retail Technology
JD Retail Technology
Nov 26, 2021 · Frontend Development

How We Boosted 11.11 Event Page Development 48% Faster with AI‑Powered Low‑Code

During JD's 11.11 promotion, the team adopted the AI‑powered low‑code tool Deco to generate personalized event pages, replacing manual coding and low‑code platform workflows, achieving a 48% efficiency gain while detailing the workflow, component integration, code generation, data handling, and observed limitations.

AI code generationProductivitycase study
0 likes · 8 min read
How We Boosted 11.11 Event Page Development 48% Faster with AI‑Powered Low‑Code
21CTO
21CTO
Nov 25, 2021 · Frontend Development

How Meituan’s Page‑Peach Platform Boosts Front‑End Efficiency with Cross‑Platform Rich Text Management

This article details Meituan’s Page‑Peach platform, a cross‑platform rich‑text management solution that empowers product and operations teams to create and publish simple, frequently changing pages without developer bottlenecks, while providing developers with fast code editing, preview, and deployment capabilities, ultimately reducing cost and improving efficiency.

MeituanOpen APIcross-platform
0 likes · 22 min read
How Meituan’s Page‑Peach Platform Boosts Front‑End Efficiency with Cross‑Platform Rich Text Management
Meituan Technology Team
Meituan Technology Team
Nov 25, 2021 · Frontend Development

Cross-Platform Rich Text Management Platform Page-Peggy: Design, Implementation, and Impact

Page‑Peggy, Meituan Medicine Technology’s cross‑platform rich‑text management platform, lets product and operation teams instantly create and publish FAQ‑style pages through a visual editor while offering developers a WebIDE for custom code, template markets, SDK integration and Open API, resulting in over 5,000 pages, 82 million views and adoption across dozens of departments.

OpenAPIWebIDEfrontend development
0 likes · 19 min read
Cross-Platform Rich Text Management Platform Page-Peggy: Design, Implementation, and Impact
Baidu Geek Talk
Baidu Geek Talk
Nov 22, 2021 · Frontend Development

How to Debug WebKit Source Code: A Comprehensive Guide

This guide walks developers through downloading, compiling, and debugging WebKit’s complex source code—covering repository setup, Xcode and command‑line builds, creating debug projects, understanding the multi‑process architecture, and practical tips such as using TestWebKitAPI for effective analysis.

Multi‑process ArchitectureWKWebViewWebKit
0 likes · 11 min read
How to Debug WebKit Source Code: A Comprehensive Guide
phodal
phodal
Nov 15, 2021 · Industry Insights

Exploring Codecity: Building a 3D Metaverse Code Analysis Tool with WebXR

The author documents the creation of Codecity, a WebXR‑powered 3D code‑analysis environment that visualizes software metrics as a virtual city, discusses digital twins, immersive collaboration, and the broader technical and industry implications of the metaverse.

MetaverseWebXRcode visualization
0 likes · 11 min read
Exploring Codecity: Building a 3D Metaverse Code Analysis Tool with WebXR
ByteFE
ByteFE
Nov 12, 2021 · Fundamentals

Hot Topics and Fundamentals in Web Development: Chrome Recorder, Webpack SplitChunks, React Fiber, Node.js, and More

This article highlights recent web development tools and concepts—including Chrome's Recorder panel, Webpack's SplitChunksPlugin, detailed analyses of React Fiber and startTransition, Node.js architecture and multi‑process techniques, as well as source‑code explorations of Fabric.js, Vue2 utilities, and Svelte implementation—providing practical insights for both frontend and backend engineers.

Node.jsReActSvelte
0 likes · 4 min read
Hot Topics and Fundamentals in Web Development: Chrome Recorder, Webpack SplitChunks, React Fiber, Node.js, and More
vivo Internet Technology
vivo Internet Technology
Nov 10, 2021 · Game Development

Modularization Practices in Vivo Game Center: Componentization, Configuration, and Experimentation

To meet rapid growth and diverse user needs, Vivo’s Game Center adopted a modular architecture that separates visual templates from data, enabling reusable UI components, configurable page assembly, and AB‑test driven experimentation, which together cut release cycles, streamline backend workflows, and boost scalability and developer productivity.

AB testingComponent-Based ArchitectureModularization
0 likes · 17 min read
Modularization Practices in Vivo Game Center: Componentization, Configuration, and Experimentation
ByteFE
ByteFE
Nov 8, 2021 · Frontend Development

Migration from Webpack to Vite: A Technical Guide

This article details the migration from Webpack to Vite, highlighting performance improvements and addressing common issues like SVG component support and third-party package bugs.

Migration GuideTechnical Analysisfrontend development
0 likes · 10 min read
Migration from Webpack to Vite: A Technical Guide
Tencent Music Tech Team
Tencent Music Tech Team
Nov 6, 2021 · Frontend Development

Web Routing in Single‑Page Applications: Hash, History, and Memory Modes

The article explains client‑side routing for single‑page applications, detailing three approaches—hash mode using location.hash and onhashchange, history mode leveraging the HTML5 History API’s pushState/replaceState with popstate handling, and memory mode storing routes in JavaScript or localStorage—plus their trade‑offs regarding URL readability, SEO, server configuration, and browser support.

History APISPAfrontend development
0 likes · 11 min read
Web Routing in Single‑Page Applications: Hash, History, and Memory Modes
ByteFE
ByteFE
Nov 2, 2021 · Frontend Development

Modern Web Development Challenges and Future Directions

This article explores the inefficiencies in modern web development, focusing on collaboration challenges between UI/UX and frontend teams, data interaction issues, and code management difficulties, proposing solutions like component-centric development and improved data binding tools.

Component ArchitectureUI/UX CollaborationWeb Development
0 likes · 32 min read
Modern Web Development Challenges and Future Directions
JavaScript
JavaScript
Nov 2, 2021 · Frontend Development

Why jQuery Still Matters in a React‑Dominated Web Landscape

This article examines jQuery’s historic rise, its deep integration in platforms like WordPress, the reasons it survived the shift to modern frameworks such as React, Angular and Vue, and why it may still be a useful tool despite declining popularity.

JavaScriptWeb HistoryWordPress
0 likes · 6 min read
Why jQuery Still Matters in a React‑Dominated Web Landscape
Taobao Frontend Technology
Taobao Frontend Technology
Oct 25, 2021 · Frontend Development

What’s New in Node.js, VS Code, React, and Emerging Open‑Source Tools?

This roundup highlights the latest Node.js v17 release with OpenSSL 3.0 support, the launch of VS Code’s browser version, a revamped React documentation site, and several noteworthy open‑source projects such as ts‑morpher, @swc/jest, and use‑context‑selector, plus an in‑depth look at Naive UI’s development process.

Node.jsReActVS Code
0 likes · 9 min read
What’s New in Node.js, VS Code, React, and Emerging Open‑Source Tools?
Alibaba Terminal Technology
Alibaba Terminal Technology
Oct 25, 2021 · Frontend Development

Chrome 95 Highlights: WebAssembly Exception Handling, Secure Payments, EyeDropper API

Chrome 95, released on October 19 2021, introduces fourteen new features—including native WebAssembly exception handling, Secure Payment Confirmation, the EyeDropper API, and a reduced User‑Agent string—each aimed at improving performance, security, and developer experience, with detailed opcode tables, usage examples, and privacy‑focused client hints.

Chrome 95EyeDropper APISecure Payment
0 likes · 12 min read
Chrome 95 Highlights: WebAssembly Exception Handling, Secure Payments, EyeDropper API
Taobao Frontend Technology
Taobao Frontend Technology
Oct 15, 2021 · Frontend Development

How to Load Vite Micro‑Frontends with ES Modules in icestark

This article explains how Vite‑built micro‑frontends can be loaded as native ES modules in icestark, covering the advantages of ES‑module tooling, dynamic import techniques, necessary Vite configuration changes, and the resulting fast cold‑start and second‑load performance for progressive upgrades.

ES ModulesMicro FrontendsVite
0 likes · 13 min read
How to Load Vite Micro‑Frontends with ES Modules in icestark
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 14, 2021 · Frontend Development

Building a Simple Hongxing Erke Clone with WeChat Mini Program Cloud Development

This article walks through creating a lightweight Hongxing Erke‑style e‑commerce mini‑program using WeChat's cloud development, covering tool setup, cloud database design, UI layout, tabBar customization, data loading, pagination, sorting, and detail‑page navigation with practical code examples and common pitfalls.

Cloud DatabaseJavaScriptWeChat mini program
0 likes · 15 min read
Building a Simple Hongxing Erke Clone with WeChat Mini Program Cloud Development
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Oct 13, 2021 · Frontend Development

A Historical Overview and Fundamentals of JavaScript Frameworks

This article reviews the evolution of JavaScript frameworks over the past three decades, defines what constitutes a framework, explains their core concepts of constraint and support, and analyzes how changing web requirements have driven the development of modern front‑end architectures.

JavaScriptWeb Historydeclarative programming
0 likes · 23 min read
A Historical Overview and Fundamentals of JavaScript Frameworks
Alibaba Cloud Developer
Alibaba Cloud Developer
Sep 30, 2021 · Frontend Development

Run Python ML Models in the Browser with Pyodide: A Complete Guide

This article explains how to use Pyodide—a WebAssembly‑based Python runtime—to run complex machine‑learning model pre‑ and post‑processing directly in the browser, covering memory layout, JavaScript‑Python interoperation, package loading, OpenCV usage, inference engines, persistent storage, and wheel packaging.

PyodidePython in BrowserWebAssembly
0 likes · 16 min read
Run Python ML Models in the Browser with Pyodide: A Complete Guide
Aotu Lab
Aotu Lab
Sep 24, 2021 · Frontend Development

How CSS3 Transforms Create Composite Layers for Faster Animations

This article explains how CSS3 transforms and related properties promote elements to composite layers, detailing the browser rendering pipeline, the role of the GPU, practical demos, performance observations, and techniques for inspecting and optimizing animation performance in modern front‑end development.

CSSPerformanceanimation
0 likes · 9 min read
How CSS3 Transforms Create Composite Layers for Faster Animations
ByteFE
ByteFE
Sep 16, 2021 · Frontend Development

Jamstack Architecture and Its Application in Douyin E‑Commerce 818 Performance Optimization

This article introduces the Jamstack architecture, compares it with traditional web stacks, and details how Douyin's e‑commerce 818 main‑hall performance optimization project applied Jamstack principles, CDN caching, API prefetching, and client‑side techniques to achieve faster, more scalable page delivery.

CDNJamstackfrontend development
0 likes · 7 min read
Jamstack Architecture and Its Application in Douyin E‑Commerce 818 Performance Optimization
Baidu Geek Talk
Baidu Geek Talk
Sep 15, 2021 · Frontend Development

Technical Overview of Baidu Reading/Wenku Cross‑Platform Layout Engine

Baidu Reading/Wenku’s cross‑platform layout engine delivers professional book‑level typesetting on Android and iOS by using a single native engine that parses diverse formats into an abstract DOM, generates a memory‑resident layout description, and supports relative, multi‑directional, and reusable layout techniques for high‑quality, adaptive document rendering.

Layout EngineTypographycross-platform
0 likes · 11 min read
Technical Overview of Baidu Reading/Wenku Cross‑Platform Layout Engine
ELab Team
ELab Team
Sep 10, 2021 · Frontend Development

Mastering the State Pattern: Light Switch to Finite State Machines in JS

This article explains why using if‑else for state handling violates the Open‑Closed Principle, introduces the State design pattern with a light‑switch example, demonstrates its implementation in JavaScript (including class‑based and functional FSM libraries), and compares it to the Strategy pattern.

Design PatternsFinite State MachineJavaScript
0 likes · 17 min read
Mastering the State Pattern: Light Switch to Finite State Machines in JS
Alibaba Terminal Technology
Alibaba Terminal Technology
Sep 6, 2021 · Frontend Development

Exploring OpenHarmony’s New JS UI Framework: Architecture, Code, and Development Insights

This article provides an in‑depth analysis of OpenHarmony’s open‑source JS UI framework, covering system architecture layers, ACE engine repositories, code structure, frontend implementations (command‑style, declarative, and card‑based), rendering pipeline, and practical build commands, while comparing HarmonyOS and OpenHarmony.

ACE frameworkJS UIMobile OS
0 likes · 17 min read
Exploring OpenHarmony’s New JS UI Framework: Architecture, Code, and Development Insights
Taobao Frontend Technology
Taobao Frontend Technology
Sep 6, 2021 · Frontend Development

Latest Electron 14 Release, React Native Updates, and Key JavaScript Insights

This roundup covers the Electron 14.0.0 release with new eight‑week cadence and expanded support, StackBlitz's quick Nuxt.js creation, notable open‑source libraries like react‑native‑elements and 7guis‑React‑TypeScript‑MobX, plus deep dives into NestJS practices, React Native's new architecture, Recoil state management, and a comparison of Object versus Map in JavaScript.

ElectronJavaScriptNestJS
0 likes · 6 min read
Latest Electron 14 Release, React Native Updates, and Key JavaScript Insights
Programmer DD
Programmer DD
Sep 3, 2021 · Frontend Development

Build a Himalaya Lite WeChat Mini‑Program: Beginner’s Front‑End Demo

This article introduces a beginner‑friendly WeChat mini‑program demo that replicates the Himalaya Lite audio app, explains its core features, setup steps, and notes on API limitations, providing a practical learning project for developers with basic HTML, CSS, and JavaScript skills.

Beginner TutorialDemo ProjectHimalaya Lite
0 likes · 3 min read
Build a Himalaya Lite WeChat Mini‑Program: Beginner’s Front‑End Demo
Sohu Tech Products
Sohu Tech Products
Sep 1, 2021 · Frontend Development

Comprehensive Architecture Guide for a Generic Backend Management System Using Vue and Vite

This article presents a detailed architecture solution for building a generic backend management system with Vue, covering project scaffolding choices, Vite configuration, ESLint/Prettier setup, CSS architecture (ITCSS, BEM, ACSS), JWT authentication, dynamic menu design, RBAC, route registration, component caching, and template generation using Plop.

JWTRBACVite
0 likes · 32 min read
Comprehensive Architecture Guide for a Generic Backend Management System Using Vue and Vite
ByteFE
ByteFE
Aug 31, 2021 · Frontend Development

Understanding Tree Shaking in Webpack: Theory, Implementation, and Best Practices

This article explains the concept of Tree Shaking as a dead‑code elimination technique based on ES Modules, details how to enable it in Webpack, describes the underlying implementation steps, and provides practical tips for writing tree‑shakable code while avoiding common pitfalls.

ESMTree-shakingdead code elimination
0 likes · 14 min read
Understanding Tree Shaking in Webpack: Theory, Implementation, and Best Practices
21CTO
21CTO
Aug 28, 2021 · Frontend Development

Explore a Browser‑Based Windows 10 Clone Built with React – Features & Setup

This article introduces a React‑powered project that recreates a simplified Windows 10 desktop experience in the browser, detailing its multi‑user support, persistent file system using LocalStorage and IndexedDB, core features, missing components, setup instructions, and the open‑source libraries it relies on.

IndexedDBReActbrowser OS
0 likes · 5 min read
Explore a Browser‑Based Windows 10 Clone Built with React – Features & Setup
Trip Tech Team
Trip Tech Team
Aug 19, 2021 · Frontend Development

How to Implement Offline Web Push Notifications in Chrome with Service Workers

This article examines how to implement offline Web Push notifications in Chrome using Service Workers, covering background, technical concepts such as BrowserId and the Notifications API, step-by-step code for permission handling, key generation, BrowserId retrieval, and server‑side message delivery.

BrowserIdChromeNotifications
0 likes · 16 min read
How to Implement Offline Web Push Notifications in Chrome with Service Workers
KooFE Frontend Team
KooFE Frontend Team
Aug 16, 2021 · Frontend Development

How React 18’s startTransition Improves UI Responsiveness

React 18 introduces the startTransition API, letting developers label non‑urgent updates as transitions so urgent interactions stay fast, outdated renders are discarded, and UI remains responsive even during heavy rendering or slow network operations.

Concurrent RenderingReActfrontend development
0 likes · 9 min read
How React 18’s startTransition Improves UI Responsiveness
Taobao Frontend Technology
Taobao Frontend Technology
Aug 16, 2021 · Frontend Development

Latest Frontend Releases: Next.js 11.1, Vue 3.2, and Cutting‑Edge Open‑Source Tools

This roundup highlights the Next.js 11.1 and Vue 3.2 releases with their new features and performance boosts, introduces several emerging open‑source projects such as quickjs‑rs, MDX, mdast, Puerts, wasm‑pack, instant.page and txiki.js, and summarizes practical articles on one‑click dark‑mode support and dramatically shrinking Next.js bundle size.

Dark ModeNext.jsRust
0 likes · 8 min read
Latest Frontend Releases: Next.js 11.1, Vue 3.2, and Cutting‑Edge Open‑Source Tools
58UXD
58UXD
Aug 9, 2021 · Frontend Development

How We Revamped the Linggan VR Website: 5‑Step Process, 3D Animation & Design Secrets

This article walks through the complete redesign of the Linggan VR website, detailing problem discovery, a five‑question analysis, three core design themes, storyboarding, collaborative development, responsive layout choices, technical trade‑offs for 3D animation, SEO considerations, and the final launch.

3D animationDesign ProcessVR
0 likes · 11 min read
How We Revamped the Linggan VR Website: 5‑Step Process, 3D Animation & Design Secrets
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Aug 8, 2021 · Frontend Development

Mastering Code Review: Essential Practices for Frontend Teams

This article outlines why code review matters, defines the roles of authors and reviewers, details a step‑by‑step CR workflow, sets clear review standards, and explains how disciplined reviews boost code quality and team efficiency in frontend development.

Git workflowcode reviewfrontend development
0 likes · 6 min read
Mastering Code Review: Essential Practices for Frontend Teams
DeWu Technology
DeWu Technology
Aug 6, 2021 · Frontend Development

Frontend Project Sentry Error Monitoring Practice

This guide walks through adding Sentry to a frontend project—explaining core concepts, Docker deployment, environment‑specific integration, webpack source‑map uploading, alert rule configuration, ownership assignment, webhook/GitLab extensions, and common pitfalls such as URL prefix handling and HTTPS DSN setup.

DevOpsMonitoring ToolsSentry
0 likes · 14 min read
Frontend Project Sentry Error Monitoring Practice
Alibaba Terminal Technology
Alibaba Terminal Technology
Aug 4, 2021 · Frontend Development

Understanding Next.js Pre‑Rendering: SSR, SSG, ISR & Hybrid Modes

This article explains Next.js's three pre‑rendering strategies—Server‑Side Rendering, Static Site Generation, and Incremental Static Regeneration—along with their hybrid combinations, illustrating when to use each approach, their benefits, trade‑offs, and providing practical code examples.

Hybrid RenderingISRNext.js
0 likes · 13 min read
Understanding Next.js Pre‑Rendering: SSR, SSG, ISR & Hybrid Modes
Baidu Geek Talk
Baidu Geek Talk
Jul 21, 2021 · Frontend Development

Evolution of Web Icon Implementation: From Images to Component-Based SVG Icons

The article traces the evolution of web icon implementation—from separate image files and CSS sprites to font icons, then SVG sprites and inline SVG—highlighting performance, maintenance, and accessibility trade‑offs, and describes Baidu’s centralized icon management platform that optimizes, version‑controls, and generates framework‑specific component packages.

CSS spritesComponent-based DevelopmentIcon Fonts
0 likes · 15 min read
Evolution of Web Icon Implementation: From Images to Component-Based SVG Icons
JavaScript
JavaScript
Jul 21, 2021 · Frontend Development

Simplify CSS Selectors with :is() and :where() for Cleaner Code

This article explains how the CSS :is() pseudo‑class can replace long selector lists, compares it with :where(), shows compatibility across browsers, and provides multiple code examples demonstrating concise, readable selector patterns for styling elements like headings and buttons.

CSSWHEREfrontend development
0 likes · 3 min read
Simplify CSS Selectors with :is() and :where() for Cleaner Code
58UXD
58UXD
Jul 9, 2021 · Frontend Development

How LOCO Design System Revolutionized 58.com’s UI Development

LOCO Design System, created by 58.com, evolved from a poorly named “Basic Interaction” into a comprehensive, code‑driven UI framework covering graphic, interaction, marketing, and motion guidelines, offering three component modes, multimedia suites, and cross‑platform support to enhance collaboration between designers, engineers, and product teams.

Component ArchitectureUI engineeringdesign system
0 likes · 16 min read
How LOCO Design System Revolutionized 58.com’s UI Development
vivo Internet Technology
vivo Internet Technology
Jun 30, 2021 · Frontend Development

Rich Text Editor Evolution and Extension Guide: From Selection to Customization

The guide traces the evolution of rich‑text editors from basic execCommand tools to modern, self‑rendered engines, explains how to select the appropriate editor stage for business needs, and details extension techniques—including toolbar, menu, internal module, plugin development—and theme customization options.

CKEditorProseMirrorQuill
0 likes · 21 min read
Rich Text Editor Evolution and Extension Guide: From Selection to Customization
We-Design
We-Design
Jun 30, 2021 · Frontend Development

Mastering PC Popup Design: Concepts, Types, and a 5‑Step Decision Framework

This article explores the concept and classification of pop‑up windows for PC interfaces, clarifies modal versus non‑modal distinctions, presents a five‑step decision‑making process, and offers practical design recommendations to improve user experience across various interaction scenarios.

UI/UXfrontend developmentmodal
0 likes · 12 min read
Mastering PC Popup Design: Concepts, Types, and a 5‑Step Decision Framework
Alibaba Terminal Technology
Alibaba Terminal Technology
Jun 30, 2021 · Frontend Development

What’s New in React 18? A Deep Dive into Concurrent Rendering and Suspense

This article explains how React 18 introduces progressive upgrades, a new Root API, automatic batching, the flushSync utility, an enhanced Suspense SSR architecture, and the startTransition API, providing code examples and practical guidance for developers transitioning from earlier React versions.

Automatic BatchingConcurrent RenderingReAct
0 likes · 13 min read
What’s New in React 18? A Deep Dive into Concurrent Rendering and Suspense
58 Tech
58 Tech
Jun 28, 2021 · Frontend Development

Umajs-react-ssr: An Isomorphic Server‑Side Rendering Solution for React on the Umajs Node Framework

Umajs-react-ssr is a lightweight isomorphic SSR solution built on the Umajs Node.js framework that enables React page components to be rendered on both server and client, offering flexible routing, server‑side data fetching, custom HTML templates, CSS‑module support, and easy configuration for improved performance and developer experience.

IsomorphicNode.jsReAct
0 likes · 25 min read
Umajs-react-ssr: An Isomorphic Server‑Side Rendering Solution for React on the Umajs Node Framework
Programmer DD
Programmer DD
Jun 28, 2021 · Frontend Development

Unlock Multi‑Platform UI with Jetpack Compose for Web

Jetpack Compose for Web, JetBrains' new UI debugging tool, lets developers write Kotlin‑based responsive web interfaces that can be shared across Web, desktop, and Android, offering composable DOM APIs, multi‑platform widgets, and practical code examples for building and styling UI components.

Compose for WebJetpack ComposeKotlin
0 likes · 6 min read
Unlock Multi‑Platform UI with Jetpack Compose for Web
Java Backend Technology
Java Backend Technology
Jun 27, 2021 · Frontend Development

How Jetpack Compose for Web Enables Cross‑Platform UI with Kotlin

Jetpack Compose for Web, JetBrains' new Kotlin‑based framework, lets developers write responsive web interfaces that share code with desktop and Android, offering composable DOM APIs, multi‑platform widgets, and practical code examples to accelerate UI development.

Compose for WebJetpack ComposeKotlin
0 likes · 6 min read
How Jetpack Compose for Web Enables Cross‑Platform UI with Kotlin
Ctrip Technology
Ctrip Technology
Jun 24, 2021 · Frontend Development

Choosing Nanachi for React to Mini‑Program Conversion: Comparison, Challenges, and Implementation

The article analyzes the background of mini‑program development, compares cross‑platform conversion frameworks, explains why Nanachi was selected for its small package size and native‑project mixing support, details its architecture, outlines conversion issues and solutions, and presents the overall static translation workflow and results.

Mini ProgramNanachiReAct
0 likes · 12 min read
Choosing Nanachi for React to Mini‑Program Conversion: Comparison, Challenges, and Implementation
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jun 23, 2021 · Frontend Development

Complete Guide to SVG: Elements, Animations, and Practical Applications

This guide explains why SVG outperforms raster images, details core elements like the svg container and path commands along with basic shapes, and compares three animation methods—SMIL, CSS, and JavaScript—offering practical techniques such as line drawing, morphing, stroke effects, and motion‑path animation for responsive, scalable web graphics.

Path MorphingSMILSVG
0 likes · 26 min read
Complete Guide to SVG: Elements, Animations, and Practical Applications
ByteFE
ByteFE
Jun 21, 2021 · Frontend Development

Introduction to Mapbox GL JS

Mapbox GL JS is an open-source JavaScript library using WebGL for rendering interactive 2D/3D maps, offering advantages over traditional 2D tile-based solutions like Leaflet through vector data support, customizable styles, and efficient data handling via WebGL.

GISMapbox GL JSWebGL
0 likes · 13 min read
Introduction to Mapbox GL JS