This guide walks through creating a dynamic, theme‑switchable big‑screen dashboard using Echarts on the front end and a lightweight Java backend, covering requirements, architecture, configuration, code structure, and how to obtain the source code.
The article explains modern pre‑rendering techniques—historical prefetched and prerendered links, Chrome’s new predictive full‑page rendering, and the Speculation Rules API that lets developers declaratively or dynamically specify prefetch and prerender JSON rules, while noting same‑origin limits, debugging tools, and performance benefits for Core Web Vitals.
This article details JD's low‑code mini‑program platform, describing its MCube architecture, visual drag‑and‑drop canvas, data binding and interaction mechanisms, and how Ui2Code and ChatGPT are used to streamline development while balancing vertical specificity and horizontal generality.
This article demonstrates several techniques—including server‑side data simulation, batch rendering with timers, requestAnimationFrame, pagination components, infinite scroll, and virtual lists—to efficiently display and interact with 100,000 records in a Vue.js front‑end without causing UI freezes or performance degradation.
This article examines WebAssembly’s evolution from a browser‑based binary format to a potential universal runtime, discusses its performance advantages, current limitations, and the impact of initiatives like WASI and Cloud‑Native integration, while questioning whether it will truly become the future of computing.
This article explores the purpose and proper usage of React's useCallback hook, examines common pitfalls, and demonstrates how to build and enhance a reusable countdown custom hook, including handling callbacks, effect dependencies, and ref-based solutions for stable function references.
This article explains how asynchronous programming and event‑driven mechanisms work in both frontend JavaScript environments and backend systems such as Go and Linux epoll, covering concepts like the event loop, macro‑ and micro‑tasks, goroutines, channels, and kernel interrupt handling.
This article recounts three years of frontend engineering work at Meituan, detailing the evolution of frontend technology, the adoption of engineering standards, tool and platform development for backend projects, and the specific engineering practices applied to SDK development, while also sharing lessons learned and future directions.
This article explains front‑end layout concepts, distinguishing adaptive and responsive designs, lists common mobile screen dimensions, and details practical techniques such as percentage layouts, media queries, rem/vw/vh units, flexbox, as well as classic Holy Grail and double‑wing layouts.
This article explains the fundamental differences between Vue 3's reactive and ref APIs, highlighting reactive's limitation to objects, the situations where it loses reactivity, and why using ref—along with techniques like Object.assign and toRefs—provides more reliable and flexible state management.
This article introduces LogicFlow, an open‑source JavaScript framework for building interactive flowcharts, ER diagrams, and BPMN processes, and provides a concise two‑step quick‑start guide—including CDN and npm installation and a complete example code—to help developers integrate flexible diagramming into their applications.
This roundup explores cutting‑edge front‑end topics—from using Server‑Sent Events instead of WebSocket and the innovative Rome toolchain, to Git rebase strategies, the status of wangEditor, precise page‑dwell measurement, and the merits of micro‑frontends—while also debunking AI‑related programmer anxiety.
This article explains how to automatically extract a picture’s dominant theme colors in the browser using JavaScript, covering the problem background, analysis of common methods, advantages of client‑side processing, and step‑by‑step implementation of median‑cut and octree algorithms with code examples.
This article explains the three-stage design of a QR code login system—including pending scan, scanned‑pending‑confirmation, and confirmed phases—detailing how unique QR IDs, token exchange, and user confirmation ensure secure authentication across PC and mobile devices.
The article introduces Layui, a native HTML/CSS/JavaScript UI component library that simplifies complex web interfaces for non‑frontend developers, and provides a detailed update log highlighting new toolbar features, table optimizations, treeTable fixes, laydate enhancements, and other component improvements.
This tutorial provides a complete Playwright Python script that automates a typical H5 e‑commerce user journey—including registration, login, address entry, product selection, cart addition, checkout, order review, and screenshot capture—while explaining how to adapt URLs and selectors for your own site.
This article explains the fundamentals of breakpoint debugging for web applications, covering the Douyin mini‑program developer tool, Chrome DevTools Protocol basics, browser‑side breakpoint communication, VS Code’s debugging architecture, launch configuration, source‑map handling, and how these concepts can be applied to IDE mini‑program debugging.
This article introduces front‑end graph visualization using AntV G6 and Graphin, explains graph models and JSON data structures, covers traversal, shortest‑path and clustering algorithms, compares G6 and Graphin, and provides detailed TypeScript and React code for custom extensions, event handling, and full‑screen support.
This article explains how Guming's frontend team unified development across multiple backend subsystems by abandoning qiankun, defining strict routing and deployment conventions, automating enforcement through a custom build tool, and providing SDKs, sandboxing, and local development support to boost efficiency and user experience.
This article explains how to embed the ChatGPT API into a low‑code development plugin to automatically translate Chinese variable names into English, preset Prompt templates, and generate fully typed Vue code for CRUD pages, complete with code examples and configuration steps.
This weekly front‑end roundup from the Goodme team highlights five curated articles covering serverless cold‑start optimization, React component unit testing, CSS white‑space and word‑wrap mastery, debugging Ant Design source code, and a clear comparison of OSS, NAS, and EBS storage solutions.
The article details the end‑to‑end technical implementation of Bilibili’s “Da Li Chu Qi Ji” mini‑game, describing a GSAP‑driven 4‑second countdown, a PixiJS‑based core gameplay with custom resource loading and event handling, and the evaluation and integration of PAG, SVGA, and MP4 animation formats for reward effects.
This article explains cross‑domain communication in web development, outlines common methods such as JSONP, CORS, iframe + postMessage and proxy, and provides a PHP example of JSONP implementation with client‑side script to demonstrate data transfer across different domains.
This article details a systematic investigation and optimization of a web‑based workflow engine, addressing slow initial rendering, input lag in Element UI components, and excessive memory consumption that caused browser crashes, and presents concrete solutions such as data pruning, Object.freeze, lazy loading, and event cleanup.
This article presents a comprehensive approach to automatically generate front‑end code from visual design drafts by introducing a customizable code‑generator workflow, detailing UIDL‑based intermediate representation, plugin‑based architecture, template‑driven development, platform optimizations, and real‑world deployment results, while also outlining future AI‑assisted enhancements.
This article explains how to apply Clean Architecture principles to a frontend React/TypeScript project, covering the three‑layer structure, dependency rules, domain modeling, use‑case design, adapter implementation, code organization, trade‑offs, and practical tips for building a cookie‑store example.
This article walks through a real‑world front‑end performance overhaul, showing how Lighthouse metrics were used to identify bottlenecks, detailing code‑splitting, lazy‑loading, asset compression, SEO fixes, and monitoring setup that together boosted the site’s speed by nearly three times.
This article explains the importance of Docker for frontend development, covering its role as a consistent runtime environment, the benefits of standardized CI/CD pipelines, multi‑stage builds, caching strategies, and practical deployment patterns for static assets, Node.js services, and micro‑frontend architectures.
This tutorial explains the fundamentals of the browser History API—including length, back, forward, go, pushState, replaceState, and scrollRestoration—demonstrates their behavior with visual examples, and then shows step‑by‑step how React Router leverages these APIs to match routes, render components, and handle navigation events such as popstate.
This article explains why Vite builds projects faster than Webpack by detailing their underlying mechanisms, step‑by‑step configuration of Webpack for Vue, the creation of a custom bundler, and how Vite achieves on‑demand loading and hot module replacement.
This article examines typical Vue2 code‑smell patterns—such as chaotic project structures, confusing naming conventions, oversized components, complex expressions, repetitive markup, tangled conditional logic, hard‑coded values, overused mixins, missing component names, and lack of comments—and provides concrete refactoring strategies to improve maintainability and readability.
The article reviews six common time‑related bugs—conversion, DST, precision, comparison, storage, and permission errors—explains their causes such as mismatched zones, outdated DST data, unit mismatches, overflow, and expired windows, and recommends development, testing, and operational safeguards like UTC normalization, unit definitions, proper data types, and monitoring.
The article explores the motivations behind mini programs, micro‑frontends, and module loading, comparing their technical advantages, business implications, and ecosystem challenges while questioning whether these solutions truly address core problems or merely serve as market‑driven silver bullets.
This tutorial walks through building a face‑registration and face‑login system using Baidu Cloud AI, covering requirement analysis, front‑end video capture, base64 image handling, back‑end Java Spring endpoints, and integration of the Baidu AipFace SDK to achieve secure biometric authentication.
This article examines the business background and challenges of multi‑platform front‑end development, evaluates mainstream cross‑platform technologies, selects Taro as the optimal solution, and details its integration with existing React Native and Web stacks, component and API adaptation, CSS handling, performance testing, cost analysis, and future outlook.
This article traces the history of frontend modularization from early global‑function scripts through IIFE, CommonJS, ES6 modules, AMD and CMD, explaining why modularization is needed, how each approach works, their drawbacks, and the key features of each specification.
This article explains why fields registered with rc-form may persist and continue to run validation when using functional custom components, analyzes the internal mechanisms of getFieldMeta, clearField, and saveRef, and shows that adding forwardRef support resolves the disappearance and validation issues.
Page Logic Orchestration with LogicFlow solves low‑code expansion challenges by replacing rigid zero‑code property panels with a visual workflow editor that lets operators compose, debug, and execute flexible page logic using custom nodes, parallel execution, and repeatable flows, reducing development cost and complexity.
This article explains the complete browser caching workflow for Google Chrome, covering strong and conditional caching mechanisms, the differences between disk and memory caches, relevant HTTP response headers, how to clear or bypass caches, and practical Nginx configuration tips for front‑end developers.
This article explains how to apply CSS ellipsis to truncate overflowing text, then use JavaScript—particularly the createRange API and temporary DOM measurements—to detect when truncation occurs and display a popper tooltip only on hover, comparing several practical implementation methods.
This article explains the CSS3 steps() timing function, contrasting it with linear animation, detailing its syntax, parameters, start/end behavior, and provides multiple practical demos—including frame-by-frame animations, typewriter effects, and countdown timers—while analyzing how steps divide animation segments and affect timing.
Vivo’s front‑end team outlines practical accessibility adaptations for H5 Android projects, emphasizing ARIA roles and states, proper tabindex ordering, language attributes, alt text or aria‑label for images, button roles, numeric speech conversion, focus management in dialogs and pickers, and a comprehensive checklist to ensure inclusive mobile experiences.
This article explains the browser's critical rendering path, detailing how HTML is parsed into a DOM, how CSS is turned into a CSSOM, how the render tree is built, and how JavaScript and CSS can block or delay rendering, providing practical examples and performance testing results.
The article examines why a Lazada front‑end team is questioning the switch from the long‑standing Alibaba Fusion component library to Ant Design, analyzing design quality, iteration speed, performance, stability, ecosystem impact, CSS‑in‑JS trends, and the overall cost of migration.
This article presents a complete tutorial for implementing a near‑instant (second‑level) rollback mechanism for single‑page front‑end applications, covering the underlying idea, project setup with Vite and React, history recording, a lightweight Node server, and a petite‑Vue visual interface for selecting and applying previous builds.
The article details Meituan’s Rome front‑end framework, covering its business and technical background, the engineering ecosystem and evolution path, large‑scale upgrades, IDE‑based development assistance, efficiency and quality improvements, metric collection, real‑world adoption across 1,400+ projects, and future trends such as deeper dev‑chain integration and AI‑assisted coding.
This article explains why the old component library became a bottleneck, outlines the creation of a new Figma‑based design system using composable components, variants, and instance swaps, and demonstrates how modular sub‑components, clear APIs, and open layouts improve flexibility, maintainability, and product delivery speed.
Dora is an open‑source micro‑frontend framework for Taro mini‑programs that lets developers split multi‑page business logic into independent sub‑applications managed via a simple config.json, communicate through a context bridge and event system, and synchronize versions with Git tags, streamlining multi‑team collaboration and reducing overall complexity.
This tutorial walks through creating a lightweight, canvas‑driven rich‑text editor that mimics Word’s layout and editing features, covering data structures, page rendering, text measurement, line calculation, cursor handling, keyboard input, deletion, line breaks, and selection using plain JavaScript and HTML5 canvas.
This article describes how to abstract and improve DOM exposure tracking by first using a scroll listener with getBoundingClientRect and then refactoring to a more robust IntersectionObserver implementation, including code examples, configuration details, and compatibility considerations.
This article provides a comprehensive overview of browser localStorage and sessionStorage, covering their differences, compatibility, API usage, storage limits, performance tips, and practical applications such as habit tracking, first‑open prompts, and reducing redundant API calls.
The July 18, 2023 JD & Baidu Frontend Technology Salon in Beijing gathered industry experts to share practical insights on large language model applications, cross‑platform rendering, lightweight dynamic frameworks, KMM mobile development, AI‑native product design, and smart frontend efficiency solutions.
This article introduces DripTable, a JD‑open‑source, React‑based enterprise table framework that uses JSON Schema for low‑code configuration, outlines its features, advantages, usage scenarios, and provides step‑by‑step installation and code examples for both the visual configuration side and the runtime side.
This article explains how a front‑end team at a tea chain tackles complex IoT challenges—designing machine gateways, managing material lifecycles, and building edge solutions—to ensure consistent drink quality, food safety, and rapid service across hundreds of stores.
This article explains the concepts, differences, browser compatibility, APIs, storage limits, performance considerations, and practical applications of localStorage and sessionStorage in web development, providing code examples and best‑practice guidelines for using browser storage effectively.
This article explains why high‑quality front‑end code matters, defines its key attributes such as readability, maintainability, robustness and performance, and provides concrete guidelines on naming, comments, code organization, security, tooling, and e‑commerce front‑end standards to help developers write clean, efficient, and scalable code.
This article surveys recent front‑end advancements, covering stunning CSS 3D image effects, design‑system construction, the high‑performance leaferjs canvas engine, Chrome 115’s new capabilities, TypeScript’s typechat project, npm ecosystem insights, DDD practices in information services, and an overview of a leading front‑end team.
Bootstrap v5.3.1 has been released, introducing enhanced dark‑mode color contrast, updated component styles, new Sass variables, keyboard navigation improvements, and documentation upgrades such as homepage search and better responsive examples, along with various bug fixes.
This article shares practical experiences, challenges, and best‑practice advice for front‑end engineers building reusable infrastructure platforms, emphasizing long‑term planning, cross‑team collaboration, incremental delivery, data‑driven validation, and the importance of balancing low‑level architecture with user‑facing product features.
The article examines JD’s low‑code development platform for WeChat mini‑programs, detailing its visual DSL, architecture, layered iOC design, feature set—including drag‑and‑drop canvas, UI components, data binding, and ChatGPT integration—while discussing trade‑offs between generic versus vertical solutions and the platform’s configuration principles.
This article explains how to implement a scrolling barrage effect with avatar fade‑in, size transition, and periodic data replacement, while optimizing network requests, using Vue slots, CSS animation timelines, requestAnimationFrame, and low‑end device fallbacks to achieve smooth performance.
This article curates key front-end topics—including simple architecture patterns, Tencent's performance optimization tactics, CSS fundamentals from "CSS World," advanced TypeScript tricks, and the notable features of Chrome 115—while also introducing the Cloud Classroom front-end team’s mission and structure.
React 18 introduces concurrent rendering, transitions, Suspense, and Server Components, which together reduce long tasks, lower total blocking time, and improve user interaction by allowing non‑urgent updates to run in the background, ultimately delivering smoother, more responsive web applications.
The article explains how to build a frontend performance monitoring system that uses PerformanceObserver and the js‑self‑profiling API to capture Core Web Vitals, detect long‑task jank, correlate network requests and user actions, and preview future ComputePressure metrics for comprehensive user‑experience diagnostics.
This article explains clean architecture concepts—domain, use case, and application layers—and demonstrates how to apply them in a frontend React/TypeScript project, covering design principles, layer responsibilities, dependency rules, advantages, costs, and concrete code examples for a cookie‑shop example.
The article explains that the core of the programmer's 35‑year crisis is the rapid pace of technological change outstripping learning speed, illustrated with backend sharding, frontend toolchain shifts, and AI advances, and offers practical advice to broaden skills beyond narrow tech stacks.
This article curates a series of frontend engineering insights, covering request‑optimization strategies, an introduction to micro‑frontends with qiankun, building a custom animated chart as an alternative to ECharts, quick Pixi.js basics, the new JavaScript Import Maps feature, and a brief overview of the Cloud Academy frontend team.
The article recounts a team's two‑year deep dive into DingTalk mini‑program development, exposing numerous iOS keyboard bugs, missing APIs, version‑upgrade quirks, performance issues, and inadequate official support, while also sharing workarounds, CI/CD automation tips, and suggestions for platform improvement.
DripTable is an open‑source, React‑based enterprise table solution that uses JSON Schema for low‑code configuration, offering fast, configurable, and extensible dynamic list rendering with visual generators and easy integration for backend and frontend developers.
The Sogou Baike mobile front‑end upgrade consolidated three fragmented projects into a single repository, introduced React‑SSR with routing and Redux, streamlined CI/CD, trimmed SSR payloads, lazy‑loaded assets and cut first‑screen requests, resulting in a 24% faster load, 35% bandwidth reduction, 11% CTR rise and a modern, cross‑stack foundation.
This article discusses the evolution from MVC‑based backend‑centric development to modern frontend‑backend separation, explains the benefits of clear responsibility division, outlines the SPA era with Ajax, and provides a detailed V1.0.0 API specification including request/response formats, pagination, and special field conventions.
This guide explains how the vue‑swift‑i18n VS Code extension automates detection, JSON generation, key replacement, tooltip display, JSON flattening, and code completion for Chinese strings in Vue projects, providing step‑by‑step instructions, configuration options, and practical examples to streamline internationalization.
This article explains how adopting RxJS concepts—such as observable streams, pipeline operators, and pure functional transformations—can help Vue developers avoid common reactivity pitfalls, write more declarative code, and improve maintainability through practical examples and concrete guidelines.
This article analyses how modern frontend view frameworks such as Solid, Svelte, Qwik, React, Vue and Angular are converging on a solidified programming paradigm while competing through fine‑grained rendering, reactive data, developer tooling, compilation strategies and the push to reduce JavaScript for better first‑page performance.
The article details NetEase Cloud Music’s Corona monitoring pipeline, explaining how SDKs report logs via an HTTP service, how a transmission layer normalizes and stores them, how a Flume‑like collector forwards logs to HBase and Kafka, and how Flink tasks shard and filter streams for various monitoring services while handling traffic spikes and offering an independent Node.js channel for other business units.
This roundup covers Chrome’s new Document Picture‑in‑Picture API, WhatsApp’s shift away from Electron, a deep‑dive into IndexedDB versus other web storage options, a real‑world performance analysis case, Vue’s dynamic image handling with require, and the latest ES7‑ES12 language features.
This article walks through a real‑world front‑end performance overhaul, explaining how Lighthouse metrics revealed major bottlenecks, detailing practical optimizations such as code splitting, lazy loading, image format changes, and CSP setup, and showing how monitoring tools keep the site fast over time.
This article introduces Web Components, explains the three core technologies—custom elements, Shadow DOM, and templates with slots—provides detailed code examples for each, discusses lifecycle callbacks, demonstrates encapsulation benefits, and offers practical guidance on using them across modern front‑end frameworks.
This article presents a Taro plugin that leverages cssModules syntax to shrink compiled style files by shortening class names and de‑duplicating property values, achieving a 50‑70% reduction in CSS size while preserving the original development experience for React‑based mini‑programs.
This article explains how to prevent duplicate form submissions in web applications by disabling the submit button on the Vue3 front end and using a server‑generated token in ThinkPHP6 to verify request uniqueness, providing full code examples for both sides.
This article explains how to measure, analyze, and optimize the startup performance of an Electron‑based cash‑register application, covering main‑process timing, renderer white‑screen reduction, code‑splitting, tree‑shaking, require caching, V8 snapshots, and user‑perceived improvements such as skeleton screens.
This article explains the four primary browser rendering approaches—DOM (HTML+CSS), SVG, Canvas, and WebGL/WebGPU—detailing their principles, advantages, limitations, and practical examples to help developers understand the underlying mechanics of web‑based visualizations.
This article surveys recent frontend developments, explaining why ChatGPT uses EventSource instead of WebSocket, promoting IndexedDB as the new storage favorite, celebrating Chakra UI’s growth, detailing async‑validator’s role in form validation across major UI libraries, and summarizing the new features introduced in ECMAScript 2023.
This article walks through the design and implementation of the order module in the Mall project, covering both backend administration and frontend shopping flow, database schema, API design, and available video tutorials for a comprehensive e‑commerce solution.
This article introduces OpenTiny, an enterprise‑grade, cross‑framework component library for Vue2, Vue3, and Angular, explains its five key advantages—including seamless Vue2‑to‑Vue3 migration and renderless architecture—and provides step‑by‑step commands to quickly scaffold an admin system and customize themes via its CLI and theme‑config tools.
This tutorial explains how to build a real-time data visualization feature by setting up a PHP WebSocket server with Ratchet and displaying live data on the client side using Highcharts, covering environment setup, server and client code, and deployment considerations.
This article explores the core front‑end technologies behind JD’s Race Ranking H5 page, covering animation implementations, style configuration, skin switching, poster generation, debugging tools, API protection, and deployment workflows, offering practical insights and code examples for developers building sophisticated mobile web applications.
This article explains why tracking npm package usage in large‑scale frontend projects is challenging, compares three implementation approaches, and details a preferred webpack‑plugin solution that provides a seamless, real‑time dashboard without requiring developers to modify their packages.
This article curates recent front‑end engineering insights, including a ChatGPT‑driven pair‑programming approach using the driver‑observer model, a rapid 200‑line Vue‑like framework built with AI assistance, practical JavaScript code‑cleanliness techniques, strategies for optimistic UI design, and a lightweight method for measuring user‑experience metrics.
This article compares Vue and React across programming syntax, view templating, component architecture, routing, state management, lifecycle hooks, and side‑effect handling, highlighting the trade‑offs in syntax complexity, flexibility, and developer ergonomics to help you choose the right framework for your needs.
This article recounts how Ivan Kutskir spent seven years creating Photopea, a fully client‑side, web‑based Photoshop clone built entirely with JavaScript, detailing his background, development challenges, technical architecture, user growth, monetization strategies, and lessons for aspiring developers.
This article explains what AIGC (AI‑Generated Content) is, compares it with PGC and UGC, explores AI applications in low‑code platforms, and shows how front‑end engineers can use large language models and prompt engineering to dramatically boost development efficiency.
This article examines typical frontend development pitfalls—including numeric type quirks, precision loss, function length, object ordering, asynchronous timer inaccuracies, race conditions, CSS positioning, stacking contexts, performance bottlenecks, and compatibility concerns—providing explanations, code examples, and practical mitigation strategies for developers.
The article examines how low‑code platforms and domain‑specific languages can transform repetitive CRUD development in front‑end engineering by introducing visual abstraction, atomic components, and declarative DSLs, while also discussing their limitations, practical implementation patterns, and the importance of conventions over configuration.
The article outlines common pain points of Ant Design—style resetting, difficult bug fixes, and heavy legacy constraints—and explains how headless UI libraries like radix‑ui and shadcn/ui provide a more flexible, lightweight, and customizable alternative for modern React front‑end development.
The article examines how low‑code platforms and domain‑specific languages (DSL) can transform repetitive CRUD development in front‑end engineering into a more abstract, maintainable workflow, highlighting their benefits, limitations, and practical Vue‑based implementations.
This tutorial explains how to develop a Chrome extension that assists developers in locating web page elements and generating XPath expressions by outlining the plugin's structure, providing complete configuration files, JavaScript code, HTML/CSS UI, and step‑by‑step instructions for loading and testing the extension.
This article explains how Tencent Video created a unified search system that runs on Android, iOS, H5, mini‑programs and PC by consolidating backend interfaces, using the Hippy‑Vue stack, conditional compilation, and a three‑layer template to dramatically reduce development and maintenance costs.
The article describes how to build an H5 page Experience Checkpoint service that automatically runs headless‑browser scripts to detect critical (P0) and potential (P1) UX issues—such as large media, privacy leaks, or slow APIs—by integrating data providers, page inspectors, and reporters into an existing inspection system, exposing a task‑creation API, and delivering detailed HTML reports via Feishu.
Over the past ten years, front‑end development has transformed from basic HTML, CSS, and JavaScript into a sophisticated ecosystem featuring libraries like jQuery, frameworks such as Angular, React, and Vue, modern tooling, security practices, progressive web apps, and emerging AI integrations, reshaping how developers build web experiences.
