Douyin’s Semi Design, an open‑source React UI design system for enterprise apps, faced criticism after undisclosed Ant Design text was found in its documentation, prompting a public apology, license updates, and detailed attribution of the borrowed components.
This article explains how the Deco platform uses AI and layout algorithms to automatically convert design drafts into reusable, semantic front‑end code, achieving around a 48% productivity gain during large‑scale e‑commerce events by streamlining UI reconstruction, component reuse, and data binding.
This article details the Deco intelligent code project, which leverages AI and layout algorithms to transform design drafts into semantic, reusable frontend code, achieving around 48% efficiency gains during large‑scale e‑commerce events and outlining the full pipeline from design processing to DSL generation and future AI platform integration.
This article examines the limitations of traditional Sankey diagrams for visualizing entity state transitions and proposes a card‑based data flow visualization that offers customizable start/end states, improved readability for disparate data scales, and enhanced user experience through interactive layouts and clear styling.
This article explains what form validation is, why custom validation rules are needed in Vue projects using Element UI, and provides step‑by‑step code examples for binding rules and models, defining custom validators, and handling rich‑text content validation.
The article explains why traditional load‑time metrics are insufficient for user experience, introduces three user‑centric performance metrics—Largest Contentful Paint, Total Blocking Time, and Cumulative Layout Shift—describes how they are measured, why they matter, and provides practical optimization techniques for each.
This article explains the need for JavaScript modularization, compares major module standards such as CommonJS, AMD, CMD, UMD and ES Modules, and traces their historical evolution, highlighting benefits, drawbacks, and practical usage examples for modern front‑end development.
The article examines how visual page‑building platforms evolve from simple component libraries into full‑stack, low‑code solutions by separating UI and logic, introducing a DAG‑based DSL, and implementing a lightweight runtime that lets non‑developers configure and execute front‑end workflows, dramatically boosting development efficiency.
This article explains the benefits of a monorepo for multi‑service web applications and demonstrates how to set up GitLab CI/CD pipelines and Docker containers to build, test, and deploy backend and frontend services efficiently.
Using an array index as the key in Vue list rendering can cause unnecessary DOM re‑creation, performance degradation, and data misalignment, especially when items are inserted, removed, or reordered, so developers should prefer stable, unique identifiers such as IDs, symbols, or UUIDs for keys.
This article provides an in‑depth overview of the package.json file used in frontend projects, covering required fields, description metadata, dependency sections, script commands, file and directory settings, publishing options, and common third‑party configurations with practical code examples.
This article shares Baidu’s ad‑hosting team experience in designing, collecting, alerting, investigating, and remediating front‑end exceptions—covering generic and business‑specific error tracking, data protocols, monitoring strategies, alert tuning, and practical governance to improve user experience and ad performance.
Semi Design, ByteDance’s modern React UI library, was open‑sourced under MIT, later faced criticism for copying Ant Design documentation, prompting an apology and subsequent license updates that added proper attributions for referenced code and design inspirations, highlighting its distinct architecture and extensive component suite.
This article explains the concept of JavaScript sandboxing, outlines common use cases, walks through several implementation strategies—from simple eval wrappers to with‑Proxy‑iframe combos—and discusses sandbox escape techniques and how to mitigate them, providing practical code examples throughout.
This article provides a comprehensive guide to Rollup plugins, explaining why plugins are needed, detailing hook types and their execution timing, showing how to create simple plugins with example code, and exploring internal mechanisms such as PluginDriver, hook loading, and caching.
This article provides a collection of practical JavaScript snippets covering cookie handling, color conversion, clipboard operations, date validation, string manipulation, array utilities, URL query extraction, time formatting, and dark‑mode detection, all useful for front‑end developers.
This article introduces the fundamentals of directed acyclic graphs (DAGs), explains adjacency representations, details the Dagre layout algorithm’s concepts, computation steps, and constraints, and presents the Perfect‑Process front‑end library that implements these techniques for interactive pipeline diagram rendering and editing.
This guide, based on rebuilding Shopee’s Warehouse Management System front‑end, details how to enhance UX through responsive page layouts, strategic content placement, robust empty‑state and image handling, and purposeful transitions and animations, while emphasizing speed, accessibility, and thoughtful design.
This article explores subtle yet impactful web form design decisions—including whether to add colons to labels, the optimal label‑field alignment, marking required versus optional fields, using sensible default values, and setting input widths—backed by usability research and practical recommendations for creating efficient, user‑friendly forms.
This article demonstrates how a data‑driven mindset can be used to identify, quantify, and solve performance bottlenecks in a hotel‑listing H5 page by defining clear metrics, collecting telemetry via Kafka/Hive, analyzing with SQL and Spark, automating Lighthouse audits with Puppeteer, and iterating on optimizations.
This article explains how to replace a heavy 78 KB GIF loading animation with the lightweight Fancy-Components wave‑filter web component, covering its installation, configuration, and usage in plain HTML, React, Vue 2, Vue 3, Vue‑CLI, Vite, and custom attribute options such as color, duration, amplitude, delay, mode, and interval.
This article explains why Webpack 4 generates an unnecessary base.js file when extracting common CSS with mini‑css‑extract‑plugin, analyses the underlying bootstrap dependency issue, and presents a custom plugin that adjusts the compilation graph to move the empty JS module, suppress the extra chunk, and correctly emit the shared base.css file.
This course introduces AJAX (Asynchronous JavaScript and XML), explaining how it enables browsers to fetch data without page refresh by sending asynchronous requests, and clarifies that AJAX is a technique combining existing web standards rather than a new programming language.
This article explains why React introduced Hooks, compares the official Hooks with popular third‑party libraries ahooks and react‑use, lists their most useful Hooks, shows how to install them, and provides a custom Hook example for displaying error modals, helping developers write cleaner, more reusable functional components.
This article provides a comprehensive overview of Redux, covering its design philosophy, core components, API implementation, React bindings, and practical code examples to help developers understand and apply state management effectively in modern front‑end applications.
This article explains the evolution of JavaScript module standards—from early CommonJS and AMD/UMD approaches to the native ES modules (ESM)—and shows how bundlers, browsers, and tooling work together to manage dependencies, improve code organization, and enable modern web development.
The jQuery team announced that the cross‑platform jQuery Mobile project, launched in 2010, is being fully discontinued, urging developers to transition to jQuery UI for continued support and compatibility across browsers and devices.
This article explores eight practical techniques for implementing theme switching in web applications—including class toggling, stylesheet swapping, CSS variables, alternate rel links, Less modifyVars, Ant Design/Vant custom themes, Element‑UI dynamic theming, and JSS—detailing code snippets, advantages, and limitations of each approach.
The article profiles veteran front‑end engineer Moonshadow, tracing his early JavaScript learning, leadership of ByteDance’s front‑end middle‑platform team, his views on empowering business, continuous learning, community involvement, and strategies for technical influence and talent development.
This article demonstrates how to design and develop a CLI tool that lets users add, update, list, and download customizable project templates, leveraging Inquirer for interactive prompts, download‑git‑repo for fetching repositories, and the GitHub API for branch selection, with full TypeScript code examples.
This article introduces RxJS, explains its reactive programming paradigm, core concepts such as Observables, Observers, Subjects, Operators and Schedulers, and demonstrates practical implementations like a draggable ball and toast notifications, providing code examples and best‑practice guidance for front‑end developers.
This article details a real‑world project that used Taro, Vue 3, and NutUI 3 to build a cross‑platform e‑commerce solution supporting web, H5, and various mini‑programs, covering background analysis, technology comparison, implementation details, performance testing, theme customization, routing challenges, and optimization lessons learned.
This article explains the data collection and reporting component of a complete frontend monitoring platform, detailing performance metrics such as FP, FCP, LCP, CLS, and providing practical JavaScript code examples for measuring, observing, and reporting these metrics, along with error and behavior monitoring techniques.
In an interview, Tencent senior frontend engineers Wu Wenbin and Yang Chen explain the pain points of traditional development‑testing workflows, how their internal TDE platform built on the open‑source Whistle engine streamlines remote collaboration, improves security, and accelerates testing for both internal teams and external partners.
The article outlines the Douyin front‑end team's engineering philosophy, covering the need for modularization of HTML, CSS, and JavaScript, component systems, dependency handling, build tools, loaders, and performance‑focused tooling to improve development efficiency and browser runtime speed.
This article explains the evolution from MVC to SPA, highlights the pain points of tightly coupled front‑end and back‑end development, and provides concrete responsibility separation, development processes, and a detailed API specification to enable efficient, loosely‑coupled collaboration in modern web projects.
During the holiday the author introduces Chuncai, an open‑source desktop companion plugin that greets developers, displays messages, and can be customized, then provides the full JavaScript implementation, configuration details, Tuling API integration, and step‑by‑step instructions for embedding it into a web page.
The article reflects on LayUI’s announced shutdown, highlights its simple yet practical design aimed at backend developers, compares it with modern UI frameworks, discusses its visual strengths, the paid LayAdmin suite, technical limitations, and speculates on the reasons behind its closure.
This article presents a comprehensive, categorized collection of essential technical books covering frontend development, backend engineering, mobile app creation, server architecture, testing practices, multimedia processing, computer vision, data mining, recommendation systems, and 3D/AR technologies, offering readers valuable resources for deepening their expertise across the software development spectrum.
By applying data‑driven operations to a rapidly growing front‑end data‑platform team, we defined key metrics, built automated reporting tools, and leveraged monitoring and analytics to uncover bottlenecks in code review, ultimately improving development efficiency, visibility, and decision‑making across projects.
This article explains the browser rendering pipeline, the concepts of reflow and repaint, how they are triggered, their performance impact, and provides practical techniques such as minimizing layout thrashing, using GPU‑accelerated properties, and leveraging requestAnimationFrame to optimize front‑end performance.
This article compiles the top ten free open‑source admin dashboard UI frameworks, detailing their GitHub star counts, repository links, core technologies, and screenshots, helping developers quickly choose a suitable backend control panel for their web projects.
The article explains html2canvas’s workflow—cloning, parsing, and rendering based on stacking contexts—and diagnoses why transparent overlays appear opaque in screenshots, revealing that the npm package lacks opacity handling; it then proposes adding an OpacityEffect class that records and applies element opacity via canvas globalAlpha to fix the issue.
The article examines LayUI’s impending shutdown, its simple yet practical design for backend developers, distinctive visual appeal, the paid LayAdmin extension, technical limitations such as its custom module system and mobile support, and speculates on why the project is being discontinued.
This article shares practical notes on solving image distortion issues in iOS development, covering image source platforms, CSS properties like object-fit, responsive grid layouts, loading animations, and Vue code examples for fetching and displaying images with proper fallback handling.
This article explains the component‑based architecture of modern frontend frameworks, compares their three update granularities—node‑level, component‑level, and application‑level—and illustrates the differences with Svelte, React, and Vue, while also including a brief job‑seeking note from the author.
Chrome 94, released on September 21, 2021, introduces 13 new features—including the groundbreaking WebGPU API, WebCodecs, prioritized scheduler.postTask, Idle Detection API, JS Self‑Profiling API, Canvas color management, and early hints—each detailed with usage examples, performance insights, and their impact on modern web development.
The article explains why cross‑browser testing is essential for modern web applications, outlines the major challenges such as automation complexity, infrastructure maintenance, and browser version proliferation, and proposes practical solutions including tool selection, cloud‑based platforms, and prioritized testing strategies.
This article explores how to speed up Webpack builds with esbuild-loader, implements dynamic treemap visualizations for NetEase Cloud Music’s social voting feature, introduces XState’s finite‑state‑machine approach to state management, explains the inner workings of TypeScript, and provides a deep dive into the V8 JavaScript engine.
The React team has open‑sourced the Scheduling Profiler, a new tool that extends the classic Profiler by visualizing component scheduling, priority handling, transitions, and Suspense behavior, helping developers diagnose rendering delays and optimize performance in React 18 applications.
The article examines core design decisions in modern frontend frameworks—immutable tree‑diff versus mutable reactive models, update granularity, virtual‑DOM usage, DSL choices, and the performance trade‑offs illustrated by React, Vue, SolidJS and Svelte, while also exploring component portability via WebComponents.
This article demonstrates how to create a pure‑CSS animation of the Sun, Earth and Moon orbital motion using simple HTML divs, Flexbox/Grid layout, gradient colors, and CSS keyframe animations, with full source code and styling details provided.
This article explains how to use D3's treemap layouts—including binary, dice, slice, slice‑dice, squarify, and resquarify—to create a dynamic, stable grid animation for a voting H5 activity, covering algorithm stability, data offset handling, and visual transition techniques.
This article examines practical front‑end interaction techniques—such as animated hero images, dynamic timelines, price‑segment filters, random coupon pop‑ups, and retention red‑envelopes—that enhance user memory, lower cognitive load, increase dwell time, and drive higher conversion rates during major e‑commerce events.
This article explains how modern UI designers extend their role beyond mobile apps to include PC, VR/AR, automotive systems, and interactive art, illustrating the design process through real project cases that show background research, high‑fidelity mockups, and user‑experience strategies.
This tutorial demonstrates how to use the powerful pyecharts library to generate eye‑catching 2D maps, a province‑level map of Guizhou, and a rotating globe, all rendered as interactive HTML pages that can be viewed in a browser.
The article introduces Tencent Cloud’s Real‑User‑Monitoring platform, explains key performance timing points and metric calculations, links RUM data to Google Web Vitals, and demonstrates a data‑driven optimization case that cut first‑screen load from 4.8 s to 3.2 s, halved resource load time, and dramatically improved CLS.
This article explains how to create a reusable React hook that uses two canvas layers to let users select a region on an image, shows a gray‑out overlay with a border during selection, and returns the cropped area as a base64 PNG, including full implementation details and future enhancements.
This article explains how to create animated visualizations of 50 sorting algorithms using JavaScript and the HTML5 canvas by converting array elements into polar coordinates, randomizing their positions, and redrawing the canvas step‑by‑step during the sorting process, complete with full source code examples.
This article details 哈啰's front‑end performance monitoring architecture, covering the background of rapid growth, a three‑step optimization workflow, data collection, cleaning, aggregation, visualization, and practical techniques like pre‑rendering and offline packages to dramatically improve page load metrics.
This article explores Babel’s role in early ECMAScript feature adoption, explains its plugin ecosystem, compares compile‑time versus polyfill approaches, and offers practical tips to improve build performance and avoid unnecessary code duplication.
This article compares the three most popular frontend technologies—Angular, React, and Vue—examining their nature as libraries or frameworks, lifecycle, core development, flexibility, performance, and provides guidance on choosing the right one for different project sizes and requirements.
This article explains the challenges of managing UI state in modern web applications, demonstrates how incremental code examples lead to complex and coupled logic, and introduces XState finite state machines and statecharts as a structured solution with practical JavaScript examples and ecosystem overview.
This tutorial walks through the fundamentals of Webpack’s splitChunks and manifest features, explaining modules, chunks, and bundles, detailing configuration options like chunks, cacheGroups, minChunks, priority, maxInitialRequests, and maxAsyncRequests, and shows practical code examples and visual results to help developers master efficient asset bundling.
This article explains what memory leaks are in JavaScript, how to detect them using Chrome's memory tools, enumerates common causes in Vue SPAs, and provides practical solutions and code examples—including event unbinding and keep‑alive refactoring—to effectively eliminate leaks and improve performance.
This article explains the fundamentals of Vue.js mixins, demonstrates how to define and apply them in components, highlights their characteristics, and compares them with Vuex state management and regular components, illustrating behavior through visual examples.
This article explains the theory and practice of handling SKU (Stock Keeping Unit) in e‑commerce platforms, covering product creation, cart selection, Cartesian‑product based SKU generation, adjacency‑matrix and set‑theory approaches, and provides complete JavaScript implementations for front‑end developers.
The 2021 ByteDance Modern Web Development survey of 612 developers reveals dominant use of ES6+, TypeScript, Vue and React, widespread adoption of CSS preprocessors, varied backend preferences, and preferred tooling such as Webpack, VSCode, and Prettier, highlighting current trends and gaps in the Chinese front‑end ecosystem.
This roundup covers the SWR 1.0 release with major size reductions and new features, a reported Microsoft Edge ad problem, several fresh open‑source projects such as play.js and eslint‑nibble, and deep‑dive articles on TypeScript’s infer keyword and the advanced pnpm package manager.
This article explains how ESM package distribution services convert npm packages to ESModule format, why such distribution is needed for modern browsers, the technical challenges involved, proposed solutions, and how these services can be combined with next‑generation unbundled development tools like Vite and Snowpack to dramatically speed up dependency installation and development server startup.
A comprehensive survey of 612 front‑end developers reveals the dominant use of ES6+, TypeScript, React, Vue, CSS preprocessors, state‑management libraries, build tools, and server‑side rendering approaches in China's modern web development landscape, highlighting trends, preferences, and emerging technologies.
This article explores the 2021 UI animation trends—Virtual Reality, Light‑weight style, and Brutalism—detailing how 3D effects, neumorphism, glass blur, bold typography, and real‑material visuals can enrich user experience, reduce cognitive load, and add playful depth to digital products.
This article explains the concept of UI tearing in React, how synchronous rendering avoids it, why concurrent rendering can introduce visual inconsistencies, and illustrates the phenomenon with diagrams and code examples for developers.
This article explains how a Formily‑based drag‑and‑drop form designer works, covering its three‑pane UI layout, the JSON Schema output that drives form rendering, key TypeScript interfaces, and the conversion methods that let non‑developers configure forms visually.
This article chronicles the development of a new web live streaming solution, detailing the shift from Flash to HTML5 video, the integration of AI voice detection using hark, audio encoding with lamejs, WebRTC-based real‑time communication, and a systematic modular refactor that transformed the project into a reusable frontend framework.
This article explains the key differences between Legacy Suspense and Concurrent Suspense in React 18, covering how sibling components are handled, ref timing outside Suspense boundaries, and the impact on rendering and effects, helping developers adapt their code for the new model.
This article explores why CSS often becomes messy, introduces aesthetic considerations, outlines three core writing principles—less is more, self‑explanatory, reusable—and provides concrete techniques such as naming conventions, formatting, commenting, modularization, and tooling to keep styles clean, readable, and maintainable across teams.
This article introduces the Web Audio API, covering AudioContext, audio nodes, routing graphs, various source types, processing nodes like AnalyserNode and BiquadFilterNode, as well as spatialization with PannerNode and convolution reverb, providing code examples and practical demos for frontend developers.
This article explores the concept, benefits, and implementation of skeleton screens as progressive loading placeholders, compares manual and automated generation methods—including puppeteer for web and React Native libraries—then presents a custom DSL-driven, low‑code solution that converts Sketch designs into reusable skeleton code, improving UX and developer efficiency.
In this extensive interview, Dan Abramov discusses the purpose and advantages of React Server Components, compares React with Vue, explains type‑checking choices, addresses emerging frameworks, rendering strategies, React's role as a library versus a system, and shares advice on learning, maintaining, and staying passionate about React development.
This article compiles twelve popular open‑source admin dashboard projects for Vue, presenting their source‑code repositories, documentation links, live demo URLs, and licensing details to help developers quickly evaluate and adopt suitable backend management interfaces.
This article introduces Rust as a high‑performance, safe systems language, explains its immutable defaults, rich type system, ownership‑based memory management, and borrowing rules, then shows how Rust compiles to WebAssembly, integrates with the Yew frontend framework, and works alongside JavaScript in modern web tooling.
Although JavaScript runs on a single thread, it can handle asynchronous operations through mechanisms like setTimeout, and React 18’s startTransition lets developers separate urgent UI updates from deferred work, improving responsiveness by scheduling non‑urgent tasks after urgent ones complete.
This article analyzes how landing‑page load speed impacts user experience and conversion, presents data‑driven measurements and key‑path breakdowns, and details practical frontend optimization methods—including container initialization, parallel billing, resource pre‑loading, and server‑ and client‑side pre‑rendering—to significantly improve performance across commercial ad flows.
The automatic front‑end disaster‑recovery solution packages an npm tool and visual backend that generates on‑demand API fallback data, uses a whitelist and static parameters to target backups, syncs results to developers, and after deployment raised coverage from ~30% to ~70%, automating 80% of backups.
This article details the development of a JD enterprise after‑sales SaaS portal using Vue 3, NutUI 3.0, Vite, TypeScript and Taro, covering project background, cross‑domain login handling, customizable themes, component migrations, state management with Vuex 4, routing, and decorator‑based loading solutions.
Analyzing 2020 developer survey data, this article reveals emerging 2021 web development trends—from the rise of PNPM and Playwright to the dominance of Vue, React, and Angular, the growing popularity of esbuild, Snowpack, Vite, and the continued relevance of Express and Nest for backend development.
This article explains how to link start and end dates using Layui's date picker, setting the end date's selectable range from the chosen start date up to 90 days later, with detailed JavaScript code to compute and assign dynamic min and max values.
This article explains the concepts of debounce and throttle in JavaScript, illustrates their principles and typical use cases such as button submissions, search suggestions, window resize, and drag‑and‑drop, and provides practical implementations with code examples and options for immediate execution, timestamps, and timers.
This article details the systematic performance optimization of Penguin Tutor's H5 core pages, covering metric collection, analysis methods, environment setup, and concrete practices such as network tuning, code splitting, lazy loading, resource hints, and server‑side improvements that reduced total bundle size by 50% and cut onload time from over 6 seconds to around 1.2 seconds.
React 18 extends StrictMode with Strict Effects, causing newly mounted components to run their effects twice in development to surface hidden bugs, while offering guidance on when to enable or disable this behavior for reliable UI state management.
The article discusses how to approach performance for entire front‑end applications—especially ReactJS—by considering real‑world data flow, state management, caching strategies, and the limitations of benchmark‑driven choices, while offering practical references and future topics.
This article presents a collection of practical Chrome DevTools debugging techniques—including various breakpoint types, logpoints, performance profiling, event tracing, setTimeout tricks, SSR inspection, and a binary-search style approach—to help frontend developers locate and resolve bugs more efficiently.
This guide explains how to use the JavaScript Fetch API to retrieve and send JSON data, covering basic GET requests, parsing responses, configuring request options, handling POST submissions with appropriate headers, and using polyfills for unsupported browsers.
This article explains memoization, demonstrates why it matters in React, and provides side‑by‑side examples of React.memo and useMemo, showing how each technique can prevent unnecessary re‑renders and improve performance in functional components.
This roundup covers Yarn 3.0’s breaking changes and new features, VS Code’s built‑in DevTools debugging, a React recreation of Windows 11, a type‑safe Clipanion CLI library, a Node.js CLI best‑practice guide, Sandpack, Infima, Benny benchmark tool, plus articles on Next.js pre‑rendering, micro‑frontend routing hijack, and React Native’s architecture upgrade.
This article explains why front‑end and back‑end should be separated, describes the evolution from MVC to SPA, outlines responsibilities, development workflow, and provides a detailed version‑1.0.0 API contract including request/response formats, pagination, special data types, and mock‑server usage.
The article defines strong versus weak service dependencies, outlines governance through discovery, fault injection, and refactoring, recommends front‑end and back‑end fault‑tolerance measures such as timeouts and circuit breakers, describes isolation and artificial degradation switches, verifies classifications, and notes current middleware gaps and hiring information.
This article introduces a React‑based recreation of Windows 11’s user interface, detailing its features, technology stack, and how developers can experience the new OS look without reinstalling, along with links to the source code and live demo.
Discover a collection of powerful Chrome DevTools shortcuts and functions—including copy, Store As Global, $ selectors, getEventListeners, monitor, Preserve Log, inspect, and animation tools—that streamline debugging, DOM manipulation, and performance analysis for web developers.
