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.
This article explains Taro 3's shift from a compile‑time heavy architecture to an interpretive runtime, detailing its JSX compilation drawbacks, the new runtime design that supports multiple frameworks, the implementation of a custom React reconciler, Web Components via Stencil, and how these changes improve cross‑platform development performance and flexibility.
Chrome 92, released on July 20, 2021, introduces 14 updates including the handy Array.prototype.at() method, the secure crypto.randomUUID() API, support for Display‑P3 color space in 2D canvas, and a manufacturer‑data filter for Web Bluetooth, while also upgrading the V8 engine to version 9.2.
This article explains the CSS content property, how it works with ::before and ::after pseudo‑elements to insert generated content, the concept of replaceable elements, size calculation rules, and practical use cases such as inserting characters, creating shapes, image generation, attribute values, icon fonts and counters.
This article explains how Xianyu tackled the complexity of order‑detail page status handling by designing a three‑layer mock solution that decouples mock logic, provides business‑semantic state switching, and enables fast local and device debugging, dramatically reducing integration and testing costs.
This comprehensive guide walks you through TypeScript’s type programming landscape—starting with generics, exploring type guards, index and mapped types, conditional and infer keywords, then diving into powerful utility types, recursive transformations, template literal types, and key remapping—providing practical code examples to elevate your type‑safe development skills.
This article introduces a curated list of essential Vue.js learning resources—including official documentation, the Awesome Vue repository, Vueschool, Nuxt.js guides, and Vue Mastery—providing developers with comprehensive tools and tutorials to master Vue.js and build modern web applications.
This article explains why a dedicated frontend build platform is needed, describes its core capabilities such as automated build, pluggable pipelines, audit‑based release, and external plugin exposure, and details the Docker‑in‑Docker architecture, process‑pool design, and sample Node.js code for a scalable CI/CD solution.
This article introduces a lightweight TypeScript tween library, explains its core classes HTweenLite and HTween, details the implementation of various easing functions, and demonstrates how to use the library to perform data-driven animations without relying on any specific UI framework.
This tutorial walks through creating a Chrome extension from scratch, setting up a Node.js WebSocket server with Express and Socket.IO, and wiring the extension’s background, content‑script, and popup scripts together so they can exchange messages and automate browser actions.
This article surveys the most interesting ECMAScript proposals—ranging from new data structures like Record & Tuple to syntax enhancements such as the pipeline operator—explaining their purpose, current stage, and practical examples, while also covering the TC39 process and related background for front‑end developers.
The article explains how Airbnb’s visx library, built on React and D3 primitives, addresses the need for a lightweight, highly expressive, and performant front‑end visualization solution by offering modular packages, TypeScript safety, and seamless integration with existing React codebases.
This article walks through the challenges and solutions of creating an integrated, searchable, multilingual documentation website for the Oasis Engine graphics engine, covering the selection of static site generators, the use of Gatsby with TypeDoc and GraphQL, custom plugins for embedding demos, and implementing global search with Algolia DocSearch.
This article details how JD's front‑end team tackled the 2021 618 shopping festival by using Taro3 for cross‑platform H5 and mini‑program development, implementing disaster‑recovery services, intelligent UI personalization, pull‑to‑refresh, and efficient collaboration practices to launch sixteen high‑performance event halls quickly and reliably.
This article explains what the Virtual DOM is, why it improves performance, how React implements it through ReactElements and Fiber, and details the diff algorithm and reconciliation process that enable efficient UI updates in modern frontend development.
This presentation details ByteDance's transition from a legacy front‑end development paradigm plagued by scaffolding and Webpack bottlenecks to a modern, serverless‑enabled architecture built around the MWA engineering standard and the Jupiter meta‑framework, highlighting the underlying problems, industry trends, and the resulting unified development experience.
This article details the challenges encountered when developing WeChat H5 pages—such as authorization‑loop redirects, cross‑origin poster creation with html2canvas, iPhone 100vh scrolling bugs, and precise performance timing using window.performance—and presents practical code‑based solutions and compatibility tips for both iOS and Android devices.
Waft is a high‑performance, dynamic, atomized service framework built on WebAssembly that enables cross‑platform AIoT application development, offering fast startup, multi‑language support, cloud‑edge collaboration, and flexible UI composition for diverse smart device scenarios.
This article examines a common React progress‑bar component, explains why the naïve timer‑based implementation causes heavy reflows and repaints, and presents a GPU‑accelerated CSS animation solution that dramatically improves frame rates and reduces layout work.
This comprehensive tutorial walks you through setting up a minimal Webpack project, adding Babel, configuring dev‑server with hot reload, optimizing source maps, splitting environments, handling CSS/LESS, extracting and minifying assets, managing static resources, and applying advanced performance tricks such as caching, code splitting, and multi‑threaded loaders.
The article presents a comprehensive overview of JD's Lego low‑code visual building platform, detailing its business motivations, architectural design, core front‑end technologies, template creation workflow, debugging tools, unified build and release process, and future development directions.
React 18 introduces a progressive upgrade path with concurrent rendering, automatic batching, a new Root API, startTransition, and an improved Suspense SSR architecture, allowing developers to adopt new features with minimal code changes while enhancing performance and enabling selective hydration and streaming HTML.
This article reviews ByteDance's transition from a fragmented, legacy front‑end toolchain to a unified modern web development platform, describing the shortcomings of traditional scaffolding, the rise of meta‑frameworks, and the design and capabilities of the internal MWA and Jupiter frameworks that power the open‑source Modern.js project.
This article explains the principle of single sign‑on and compares three implementation techniques—parent‑domain cookies, a dedicated authentication centre, and cross‑domain LocalStorage—detailing their mechanisms, advantages, limitations, and providing sample code for the LocalStorage approach.
This article walks through the complete process of creating a high‑impact visual dashboard for large‑screen displays using FineReport, covering tool selection, data preparation, report creation, design, visual polishing, and adding dynamic effects.
This article demonstrates three Vue decorators that use async/await to transparently manage component initialization status, add debounce and loading indicators to button clicks, and control the visibility of the component before the mounted hook finishes, with full TypeScript examples.
