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.
Corona is NetEase Cloud Music’s unified, cross‑platform front‑end monitoring system that ingests logs from Web, React Native, Node.js, Android, iOS, Flutter and Windows CEF, enriches them, routes them through real‑time anomaly and performance pipelines, stores them in HBase, and offers customizable alerts, de‑obfuscation, AI‑assisted analysis, and extensible reporting to ensure rapid fault detection and remediation across the organization.
This article shares practical frontend insights, from cultivating a problem‑solving mindset and three expert coding tips to using the new CSS Popover API and effective Node.js debugging, plus experiences with ChatGPT pair programming, the launch of WebContainer 1.0, and essential login‑form UX best practices.
This article introduces Tencent’s two open‑source front‑end frameworks—wujie, a micro‑frontend solution built on Web Components and iframes, and Omi, a cross‑framework, cross‑platform library—detailing their core concepts, key features, and where to find their source code.
Rspack 0.2 introduces numerous enhancements such as realContentHash, DataURI and ESM/System format support, extensive loader and plugin hook compatibility with Webpack, a refactored SplitChunksPlugin, updated framework integrations, benchmark comparisons, and several breaking changes to align filename generation with Webpack standards.
This article explains how to improve CSS animation performance by understanding the browser rendering pipeline, using GPU‑accelerated transforms, avoiding costly properties and complex selectors, leveraging will‑change and requestAnimationFrame, and preferring CSS over JavaScript for smoother, lower‑latency visual effects.
This article explains how to build a feature‑rich, responsive curve chart from scratch using HTML5 canvas, covering layer separation, adaptive sizing, custom gradient fills, Bezier curve calculations, point‑on‑path detection, label handling, animation masking, and a complete configuration object with code examples.
This article traces a decade of front‑end rendering evolution, explaining traditional server‑side rendering, the rise of client‑side frameworks, modern hybrid approaches such as SSR, SSG, ISG, progressive and selective hydration, streaming SSR, islands architecture and React Server Components, while highlighting their trade‑offs and use‑cases.
This article explains how to create various CSS background gradients—including radial, linear, conic, and their repeating forms—by detailing syntax, parameters such as shape, size, position, color stops, and provides practical code examples to help developers translate design specifications into accurate CSS.
The article presents a comprehensive overview of JD Tech’s “Magic Flute” activity platform, analyzing traditional high‑code and configuration‑driven development models, proposing a unified low‑code SaaS/PAAS solution, detailing its functional architecture, component management, workflow orchestration, and operational workflows to improve productivity across business teams.
This roundup highlights cutting‑edge topics ranging from why AI models are named after alpacas and how to converse with PDFs, to practical front‑end performance gains, an in‑depth webpack resolve walkthrough, ten powerful reduce techniques, and five obscure JavaScript native APIs, plus a brief intro to a leading front‑end team.
This guide explains how to craft effective ChatGPT prompts to produce markdown‑based mind maps, and details three methods—online Markmap tool, VSCode Markmap extension, and XMind import—for visualizing and editing the resulting diagrams.
This article details a step‑by‑step case study of creating a web‑based 3D shopping scene, covering framework selection, rendering layer architecture, collision handling, asset pipelines, performance optimizations, and future iteration plans for lazy loading and real‑time lighting.
This article explains the common approaches for uploading a single file from a web front‑end to cloud storage, compares backend‑mediated and direct browser uploads, provides SDK and temporary‑URL examples with code, and discusses encryption, request formats, and best‑practice recommendations.
This release note details the latest Layui updates, introducing new global form attributes, numerous bug fixes for checkboxes, tables, and tree tables, as well as performance optimizations across components like layer, laydate, upload, and code, with code snippets illustrating the changes.
The DeWu customer service ticket frontend was re‑architected by aggregating APIs, splitting fast and slow interfaces, adopting Module Federation, implementing a single‑instance design and schema‑driven dynamic rendering, which cut render times from seconds to sub‑second, reduced memory usage, eliminated TypeScript bugs and boosted 客服 satisfaction to 80 %.
This article analyses the conceptual design, possible implementation, and performance advantages of a new React Hook that can be called inside control flow, discusses its future extensions such as usePromise, lazy subscription, and integration with concurrent mode, and provides practical code examples.
This article explains the AVIF image format, its superior compression and quality compared to JPEG and WebP, provides a detailed comparison of image formats, offers conversion tools and command‑line examples, and shows how to integrate AVIF on the client, server, and via JavaScript polyfills for modern web development.
This article presents a step‑by‑step technical guide for creating a real‑time, dynamic data‑visualization dashboard using Echarts on the front end and a Java‑based backend, covering design screenshots, requirement analysis, architecture, configuration, code structure, deployment commands, and source‑code acquisition.
This article explains the fundamentals of HTTP caching, covering the structure of HTTP messages, the two main cache strategies—strong caching and validation caching—the relevant response headers such as Expires, Cache-Control, Last-Modified, and ETag, and provides practical guidelines for effective cache implementation in web development.
The article explains the Resumable rendering concept introduced by Miško Hevery, contrasts it with traditional SSR hydration, details its implementation in the Qwik framework, compares it to React Server Components, and discusses why React has not adopted this approach despite its performance benefits.
Following Deno’s abandonment of TypeScript, the popular frontend framework Svelte has announced it will also discontinue TypeScript support, opting for JSDoc documentation, and the Svelte repository has opened a pull request to convert existing TypeScript code to JSDoc, signaling a shift in the ecosystem.
This article describes a complete workflow for converting Photoshop PSD design drafts into HTML, covering the motivation, overall system design, a detailed comparison of PSD parsing engines, layer reconstruction steps with code examples, web service integration, file storage, and future development plans.
This article details JD's end‑to‑end H5 observability solution, covering the challenges of hybrid app development, the design of a three‑stage UEM platform, deep active and passive monitoring, automated quality gates, and real‑world case studies that demonstrate cost savings and performance improvements.
The article introduces core 3D rendering concepts, tracing the evolution from desktop OpenGL to mobile OpenGL ES and its JavaScript counterpart WebGL, explains GLSL shader programming, reviews common model formats like OBJ and FBX, highlights front‑end engines such as Three.js, compares rasterization with ray tracing, and mentions modeling tools and emerging AI‑driven techniques.
The team built a Node‑based front‑end inspection platform that boosted page‑stability testing speed from 0.4 to 4 pages per second, achieved high usage, execution and alarm accuracy, solved process‑exit issues by switching to fork, integrated six inspection components, cut regression testing of 100 pages from 60 to 10 minutes, and lowered CPU use to 20 % per pod, with plans to broaden coverage.
The DeWu Frontend Technology Salon in Hangzhou featured five expert talks covering SaaS frontend architecture evolution, one‑stop workbench upgrades, large‑scale CSS maintenance, container‑based e‑commerce workbench solutions, and stable ToG business strategies, followed by lively networking and group photos.
The article explains Svelte’s plan to replace TypeScript with JSDoc, confirms the move with Rich Harris’s tweet, outlines benefits for compiler debugging and type safety, and compares the decision to Deno’s earlier internal migration to JavaScript to cut build time and bundle size.
This article describes the design and implementation of a DIY product card system that decouples UI and logic, enabling product teams to configure and render customizable, cross‑platform card templates via a low‑code platform, reducing development effort and improving click‑through rates.
Angular v16 introduces a suite of groundbreaking features—including a developer preview of Signals, enhanced server‑side rendering hydration, an esbuild‑based CLI, standalone component migration, updated package formats, and deprecations—while requiring Node.js 16/18 and TypeScript 4.9 or newer.
This article explains how Alipay’s homepage team collaborates with the edge‑intelligence team to use real‑time client‑side behavior data and algorithm platforms, transforming refresh strategies across time, space, and event dimensions, improving recommendation efficiency, reducing duplication, and delivering measurable performance gains.
This article explains why duplicate products appear in a waterfall‑flow layout of a mini‑program, analyzes the root cause of concurrent asynchronous renders, and presents two solutions—using a flag and a promise‑based queue—to ensure only one dataRender runs at a time.
This article traces the history of editor technology from early terminal editors to modern web‑based and block‑style editors, examines key architectural components such as contentEditable, model‑view‑controller design, collaborative algorithms, and highlights future directions like multimodal GPT interaction.
This article explains the motivation for writing unit tests for shared React hook modules, demonstrates how an AI assistant in the Cursor IDE can generate Jest test cases from a repository, and details the step‑by‑step process of configuring the environment, fixing failing tests, and reflecting on AI's current limitations.
This guide walks you through creating a dynamic, real‑time data visualization big‑screen dashboard using Echarts on the front end and a Java‑based backend, covering requirements, architecture, configuration, code structure, and deployment steps.
This guide explains multiple practical methods—including CSS tricks, saving the page, using the print view, and disabling JavaScript—to overcome copy‑and‑paste restrictions on web pages, complete with code examples and step‑by‑step instructions.
The article explains why ChatGPT’s “Something went wrong” error appears frequently, compares using an OpenAI API key versus installing the KeepChatGPT Chrome extension, and provides a step‑by‑step guide to install Tampermonkey and the extension to permanently stop the error.
This article explains the challenges of native scrollbar styling in complex Vue components like vxe-table and vue-gantt-elastic, evaluates existing solutions, and introduces the use-scrollbars Vue hook that enables fully customizable, animated, and performant scrollbars with TypeScript typings, providing step‑by‑step implementation examples.
This article surveys recent front‑end developments, including building VS Code extensions with Webview, leveraging WebAssembly for multi‑language runtimes, insights from the new React documentation, proper use of React refs, and how AI tools like GPT can assist in setting up Jest and generating test cases.
This article explains how to use Server‑Sent Events (SSE) and the EventSource API to stream ChatGPT responses in real time, covering both browser‑side JavaScript examples and Node.js backend proxy code, along with configuration tips for Nginx and compatibility notes.
This article demonstrates how to style console.log output using %c placeholders, outlines the supported CSS properties, and walks through creating a lightweight, Vue‑devtool‑inspired log‑button library with Vite, TypeScript, ESLint, Husky, and ChatGPT‑generated UI color palettes, culminating in publishing the package to npm.
This article explains the concept and importance of motion transition design, introduces the Skyline rendering engine for WeChat mini‑programs, and provides detailed implementation guidelines—including custom routing, shared‑element animations, gesture handling, and performance optimizations—illustrated with complete code examples.
This article provides a step‑by‑step tutorial on analyzing a Spring Boot microservice project, configuring parent and child Maven pom files, packaging modules with Maven plugins, and deploying both backend JARs and frontend assets to Windows or Linux servers.
This article presents nine practical JavaScript techniques—including dynamic script loading, a lightweight template engine, array grouping with reduce, default parameters, single‑execution wrappers, currying, the singleton pattern, a simple CommonJS implementation, and recursive property access—each illustrated with clear code examples for front‑end developers.
This article explains how to evaluate the puzzling JavaScript expression console.log(([][[]] + [])[+!![]]+([]+{})[+!![]+ + !![]]), detailing the required knowledge of type coercion, unary operators, and implicit conversions to reveal why the output is “nb”.
This guide explains how to create a Chrome extension that intercepts image downloads from design tools, compresses PNG files using WebAssembly‑compiled pngquant and advpng, uploads the optimized assets to a CDN, and manages them with IndexedDB for efficient front‑end workflows.
BBC found that each extra second of load time cuts users by 10%, so they adopted server‑side rendering to boost first‑screen performance on low‑end devices, accepting higher server load and longer white‑screen time, choosing the stable Rax solution over ICE 3.0, and emphasizing selective use, streaming HTML, and careful migration guidelines.
This article curates essential front‑end resources covering character encoding fundamentals, mobile screen adaptation strategies, practical ES6 tricks, Pinia state‑management advantages over Vuex, classic Git operations for code merging, and crucial browser memory knowledge for stable web applications.
This article explains how to build a full‑featured Gantt chart in Vue 3, covering the UI layout with left‑hand tree panels and right‑hand timeline, synchronization of scrolling and state, draggable and resizable task bars, date‑generation utilities for various time scales, and performance considerations for large data sets.
This guide outlines practical steps for engineers to create effective technical sharing articles, covering audience identification, purpose definition, outline creation, background framing, solution overview, detailed explanations with principles and examples, result demonstration, insights, and proper acknowledgments.
This article explains how Ant Group's YunFengDie low‑code platform implements an Excel‑style formula system—including syntax design, variable handling, compiler, validator, and executor—to enable non‑technical users to create dynamic business rules within forms.
This article walks through a comprehensive front‑end performance optimization process—starting from diagnosing issues with Lighthouse, identifying bottlenecks such as large bundle size and uncompressed assets, applying code splitting, lazy loading, image optimization, CSP, SEO tweaks, and finally setting up continuous monitoring with a custom platform—to achieve a 279% improvement in Lighthouse performance scores and near‑three‑fold speed gains.
This article provides a comprehensive introduction to WebGL, covering its relationship with OpenGL ES, differences from Canvas and SVG, performance comparisons, step‑by‑step code examples for drawing points, squares and shaders, and explains the complete rendering pipeline for front‑end developers.
This article shares the team’s practical experience and solutions for embedding H5 pages in mini‑program WebViews, covering platform differences, communication mechanisms, onShow handling, common pitfalls, login‑state synchronization, payment integration, and the use of WebSocket to achieve real‑time cross‑page updates.
This article explains what front‑end UI frameworks are, why they are useful, and presents a detailed list of the ten most popular domestic UI frameworks in 2023—including Element Plus, Ant Design, Naive UI, View UI Plus, Vant, LayUI, Bootstrap, and WeUI—while advising developers on how to choose the right one for their projects.
This article chronicles ten years of frontend development, covering the rise of HTML5, CSS3, JavaScript frameworks, build tools, PWA performance, web components, security challenges, essential developer skills, and the emerging fusion of AI with modern web technologies.
This article curates recent front‑end topics—including HTTP Range resumable downloads, H5 app invocation, automation testing adoption, new JavaScript/TypeScript features, Chrome 112 updates, the history of Signals, and industry viewpoints—providing concise insights for developers seeking to stay current.
This article explains what microinteractions are, why they are crucial for user experience, outlines common types such as click, long‑press, pull‑to‑refresh, and scroll effects, and showcases real‑world examples like NetEase Cloud Music that demonstrate how tiny UI animations can boost engagement and usability.
This article explains what source maps are, details their JSON structure, demonstrates how to generate them with Vite and Webpack, discusses choosing appropriate devtool options for development and production, and shows how to make them work in browsers, Sentry, and manual mapping.
This guide explains how a web front‑end can communicate with IC cards and RFID tags by launching a local WebSocket service, using a desktop plug‑in to handle hardware read/write operations, and integrating the data with the server for vehicle and driver management.
This article presents a detailed guide on implementing DevOps principles in frontend development, covering background challenges, pipeline architecture, workflow design, tool integration, and step‑by‑step practices to improve delivery efficiency, code quality, and team collaboration.
This article explains how to extend a low‑code engine from page‑only design to an application‑level workspace that supports multiple resources, views, and multi‑layer plugin scopes, providing a VS‑Code‑like experience for complex low‑code projects.
This article provides a comprehensive overview of WebAssembly, covering its core concepts such as modules, types, variables, functions, instructions, traps, tables, and linear memory, explains the binary module structure and sections, details the human‑readable text format with S‑expressions and lexical rules, and walks through a step‑by‑step example of writing, compiling, and invoking a simple WebAssembly module.
The article proposes enhancing front‑end project delivery quality by replacing manual standards with automated tooling—static code linting, performance, error, and disaster‑recovery tests—and integrating these checks into DevOps checkpoints that enforce pass, alarm, or block actions, enabling metric‑driven, objective evaluation across teams and outsourced projects.
This article explains the multi‑compiler kernel ecosystem behind Taro, detailing how Webpack, Vite and Metro kernels are integrated, the plugin system that unifies build processes across Web, App, mini‑program and Harmony platforms, and the performance gains and challenges of this approach.
This article presents an open‑source Hospital Information System built with Spring Cloud microservices and a Vue front‑end, detailing its functional modules, architecture diagram, backend and frontend technology stacks, development tools, deployment environment, and sample UI screenshots.
This article explains how to map design tokens—style, component, template, and file tokens—to appropriate carriers in Figma and Sketch, covering token categories, multi‑mode and multi‑business handling, component token strategies, property naming conventions, handoff methods, and version management.
The article examines ChatGPT’s underlying software architecture, detailing its cloud deployment on AWS and Azure, database choices like PostgreSQL and Redis, front‑end technologies such as TypeScript and React, core AI frameworks including PyTorch and Triton, as well as its container orchestration, monitoring, and programming language ecosystem.
This article explains the essential front‑end performance metrics—FCP, Speed Index, LCP, TBT, and CLS—detailing their definitions, target values, and practical optimization techniques to improve page load speed and visual stability.
This article walks through the step‑by‑step implementation of alignment functions—left, center, right, top, middle, and bottom—in a graphics editor by computing AABB boxes, deriving a mixed bounding box, and applying concise JavaScript loops to adjust element positions.
This article introduces a curated list of popular low‑code tools and open‑source projects, explaining how visual, drag‑and‑drop editors built with modern front‑end stacks enable fast H5 page creation, poster generation, and full‑stack application development with minimal hand‑written code.
The article analyzes post‑pandemic salary changes in China for various tech positions—including backend (Java, PHP, Python), frontend, network security, mobile, testing, operations, data analysis, algorithm engineering, and architecture—showing modest growth in most areas with notable declines for Python and Android developers.
Learn how to use React refs—including useRef, forwardRef, and useImperativeHandle—to access DOM elements, create custom imperative APIs, and build interactive forms with focus and shake effects, while understanding best practices for when to employ refs versus state or props.
The article explains how front‑end/back‑end separation restructures development by letting front‑end teams handle UI and interaction while back‑end teams expose data via RESTful APIs, improving modularity, parallel work, deployment flexibility, and overall system scalability.
The article explains how to optimize pull‑down loading for instant‑messaging conversation lists using virtual scrolling, detailing a three‑step loading flow, evaluating timeout, onload, and reverse‑rendering strategies, and recommending column‑reverse rendering to achieve smooth, accurate scroll rollback and better user experience.
This step‑by‑step guide shows backend developers how to create a small management system with Vue 3, TypeScript, Vite, and SpringBoot, covering the technology stack, development‑tool installation, project scaffolding, core components, routing, Pinia state, Axios API wrappers, TypeScript interfaces, environment configuration, and deployment.
This whitepaper introduces AntV’s AVA framework for insight presentation, explains the concept of visualizing data insights, outlines design principles and standards for insight display, describes various presentation forms, and provides frontend technical solutions—including enhanced chart marks and independent insight cards—to efficiently deliver actionable visual analysis.
Understanding JavaScript memory management, this guide explains the fundamentals of memory allocation, usage, and garbage collection, outlines common leak scenarios such as global variables, timers, event listeners, and data structures, and provides practical techniques and tools for detecting, diagnosing, and fixing memory leaks in web applications.
This article explains why unit testing is essential for reusable components, introduces Jest fundamentals, demonstrates how to write and run tests with code examples, and shows how to enhance UI component testing using @testing-library/react, @testing-library/user-event, and @testing-library/jest-dom, providing a complete workflow for reliable front‑end development.
This article reviews eight popular JavaScript notification libraries, comparing their features, popularity, and installation methods, to help developers choose the most suitable solution for enhancing user experience with timely in‑app messages.
This article explains how the this keyword is bound in JavaScript, covering default, implicit, explicit, new, and arrow‑function bindings, and demonstrates the concepts with practical debounce examples and code snippets to show how the calling context determines the value of this.
