This article examines the development of npm, describing its early nested dependency model in v1/v2, the flat‑dependency approach introduced in v3, and the package‑lock enhancements of v5, while highlighting the advantages and new challenges each version brought to Node.js package management.
This article explains how NutUI’s theme customization enables developers to switch skins, edit component‑level styles, and generate theme variables through an online configurator, providing step‑by‑step usage instructions, code examples for Vite, Webpack and Taro, and a detailed overview of the underlying implementation.
This article explains how the AntV S2 canvas‑based rendering engine was used to create a feature‑rich, high‑performance React data‑grid capable of handling tens of thousands of rows, covering cell editing, brush selection, virtual scrolling, frozen rows/columns, custom headers, filtering, sorting, searching, and copy‑to‑clipboard functionality.
This article curates recent front‑end developments, covering emerging frameworks like Pinia, evolving Node.js web standards, low‑code engine open‑source releases, architectural insights, Puppeteer PDF performance tricks, and sandbox security, while also inviting developers to join the Cloud Academy front‑end team.
This comprehensive guide walks you through the origins, core concepts, meta‑characters, quantifiers, matching modes, assertions, grouping techniques, and practical JavaScript APIs for using regular expressions in validation, extraction, replacement, and splitting tasks.
The article presents actionable methods to speed web development, including adopting a front‑back end separation architecture, leveraging scaffolding tools for data, documentation and mock interfaces, applying disciplined front‑end coding practices, and using computer‑vision‑based techniques to accelerate automated testing.
This article provides a comprehensive overview of Vue 3—including its release details, performance gains, core architectural changes such as Proxy‑based reactivity, TypeScript support, the new Composition API (setup, ref, reactive, computed, watch, watchEffect), updated lifecycle hooks, new built‑in components like Fragment, Teleport and Suspense, project scaffolding with Vue‑CLI or Vite, and migration considerations from Vue 2.
This article explains what an Abstract Syntax Tree (AST) is, how the ESTree specification standardizes JavaScript syntax, and how Babel parses, traverses, and transforms code using AST nodes, providing practical examples, core packages, plugin creation, and real‑world application scenarios for developers.
This article analyses the evolution of front‑end package managers—from npm's early nested modules to Yarn's lockfile and Plug'n'Play, pnpm's hard‑link strategy, cnpm/tnpm adaptations, and Deno's URL‑based imports—highlighting their dependency resolution mechanisms, trade‑offs, and remaining challenges.
This article shares a front‑end engineer’s personal growth story, outlining four career stages—from initial workplace adaptation to leading low‑code platform development—while offering practical advice on teamwork, communication, continuous learning, and how to transition into senior technical and leadership roles.
This article traces the evolution of frontend development from server‑side rendering with PHP/JSP through AJAX and jQuery to modern MVVM frameworks, comparing React, Vue, and Angular in terms of syntax, data‑update mechanisms, performance optimizations, and code‑reuse strategies.
This curated list highlights twelve insightful articles covering Formily's design, React Hooks quirks, ESModule production strategies, Observable-based anti‑corruption layers, REST API POST debates, TypeScript pitfalls, WebAssembly future, spline vs. Bézier curves, Cocos engine rendering, handling complexity with DDD, and React's automatic import changes.
This article systematically explores frontend componentization, covering its motivations, definitions, design principles, component types, implementation strategies, code examples, and the challenges faced during adoption, aiming to help developers achieve higher cohesion, lower coupling, and improved maintainability in web projects.
This case study details how the Smart Travel app’s route‑list page was completely re‑designed—introducing a unified list, new tab interactions, visual noise reduction, and card redesign—to boost comparison efficiency, improve user guidance, and achieve higher conversion rates comparable to train and flight listings.
The article details WebKit’s rendering pipeline in WKWebView, describing how the network process streams HTML bytes to the rendering process, which decodes them via TextResourceDecoder, tokenizes the characters with HTMLTokenizer’s state machine, and constructs an efficient DOM tree using HTMLTreeBuilder and queued insertion tasks.
This article explains the fundamentals of cross‑origin restrictions, cookies, and same‑origin policy for frontend developers, demonstrates common CORS errors with sample code, and presents practical solutions—including iframe/postMessage, JSONP, WebSocket, and CORS configurations on servers such as Node.js and Nginx—to enable secure and reliable cross‑domain communication.
This article presents a detailed glossary of common JavaScript English keywords, objects, methods, and properties with their Chinese translations, organized into two comprehensive tables to help developers quickly understand and reference essential JavaScript terminology.
This article provides a comprehensive list of common CSS English terms along with their Chinese translations, helping developers and learners understand styling properties such as font-size, background-color, float, and many others for effective front‑end development.
This article introduces a jQuery‑style functional programming approach for mini‑program development, compares it with traditional Class components and React Hooks, demonstrates a simple input‑popup component with code examples, and explains how the method simplifies component communication and maintenance.
This collection highlights recent technical articles and resources covering Vue 3.0, ESLint fundamentals, defensive CSS techniques, low‑code system design, React project setup, Nest.js with TypeORM, and an introduction to the LRU caching algorithm, offering practical insights for frontend developers.
This article explores the concept of property panels, illustrates their use across various domains such as hardware controls and design tools, and provides a detailed guide on building, rendering, and validating them with JSON Schema and extensible front‑end architectures.
This curated list highlights essential frontend reads covering Chrome's rendering pipeline, cross‑platform fundamentals, Vue/React hooks, Vite's architecture, Lottie camera tricks, Engine.IO mechanics, Remix vs Next.js, a hand‑written Babel tokenizer, React performance nuances, and state‑machine approaches to simplify complex UI logic.
This article explains why B2B front‑end applications suffer from frequent API changes, introduces the anti‑corruption layer concept adapted from HAL and DDD, and demonstrates how to implement a robust, RxJS‑based layer that isolates UI code from evolving back‑end contracts while offering caching, fallback, and testing benefits.
The article analyzes NetEase Cloud Music's front‑end team's challenges with repetitive, mode‑driven development and explains how they designed a source‑code‑based low‑code system—Tango—that unifies LowCode and ProCode, integrates with existing GitLab and deployment tools, and dramatically speeds up business‑focused delivery.
This article introduces the pinyin‑pro JavaScript library, explains its rich features such as tone handling, initials, finals, polyphone support, surname mode, non‑Chinese character filtering, custom pinyin definitions, and matching, and provides step‑by‑step installation and usage examples for both browser and Node environments.
This article presents a comprehensive walkthrough of a Werewolf tabletop game mini‑program, detailing project features, role descriptions, UI design, and providing full front‑end code for the home page, role selection, and gameplay screens, along with visual screenshots and download links.
This article explains the fundamentals of the CSS Flexible Box Module (Flexbox), describing main and cross axes, and provides detailed guidance on the six container properties—flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content—along with code examples and visual illustrations.
Xianyu standardized its interactive tasks and lottery features by abstracting capabilities into a reusable SDK, providing self‑diagnosis tools, and unifying configuration workflows, which cut front‑end development time by about half, enable operators to troubleshoot without developers, and lower launch and testing costs across large‑scale marketing events.
This article explains how 58's Process Open Platform uses a low‑code approach with a visual form designer and a JSON‑schema‑driven renderer to dramatically improve the efficiency of creating, maintaining, and deploying business forms and approval workflows.
Design review often relies on manual screenshot comparison, but this guide introduces a range of Chrome extensions, desktop clients, and npm packages—such as Perfect Pixel, CSS Peeper, Design‑Compare, PixelEye, pixelmatch, and looks‑same—that streamline pixel‑perfect page comparison, improve implementation fidelity, and enable automated visual regression in CI pipelines.
This article introduces the fundamentals of 2D drawing on the web using SVG, Canvas, and WebGL, compares their strengths, demonstrates code examples for shapes and paths, explains event handling and picking methods, and provides practical performance optimization strategies for rendering and interaction.
The article explains how to overcome the limitation of browser ES Modules by creating inline‑import functionality with Blob URLs and dynamic import maps, providing both dynamic and static import capabilities for modular JavaScript in playground‑style environments.
Research by Elise Blanchard reveals that blue hyperlinks became the web standard in 1993 after early 1990s conferences and the Mosaic browser adopted blue to replace black, a shift rooted in late‑1980s industry meetings that promoted blue as the interactive text color for UI components.
This article walks through practical ways to implement true dark mode on web pages—including manual toggles, system‑preference detection, CSS variables, stylesheet swapping, filter tricks, and common pitfalls—while providing complete code examples and explanations.
A developer recounts a frustrating exchange with an Alibaba Cloud support engineer over missing images, explains why HTTPS CDN links failed, and shares a step‑by‑step workaround using HTTP links and OSS to restore image accessibility for GitHub‑hosted sites.
This article explains why front‑end and back‑end separation is needed, describes the evolution from MVC to SPA, outlines responsibilities, development workflow, and provides a detailed version‑1.0.0 API contract with request/response formats, special field rules, and future front‑end trends.
This article explains the motivations for separating frontend and backend, outlines the evolution from MVC to SPA architectures, details responsibilities, development workflows, and provides a comprehensive API specification including request/response formats, special data handling, and future frontend trends.
This curated collection highlights the 2021 State of JS findings, cross‑platform technology insights, JIT compilation explanations, Vue diff algorithm visualizations, Node.js learning resources, and practical tutorials on CSS perspective, React + Three.js 3D effects, Mermaid diagrams in Markdown, and Jest testing, offering a comprehensive overview for modern front‑end developers.
This article introduces Plyr, a lightweight and highly customizable HTML5 video/audio player library, outlines its rich feature set—including subtitles, speed control, picture‑in‑picture, and API methods—provides CDN and npm installation instructions, and demonstrates how to embed and style the player for web projects.
This article demonstrates how to modernize and simplify JavaScript code by applying ES6 techniques such as object destructuring, Set‑based array deduplication, includes() for condition checks, optional chaining for safe property access, and array flattening methods, improving readability and maintainability.
This comprehensive tutorial explains how selections and cursors work in web pages, covering the underlying Selection and Range APIs, handling editable and non‑editable elements, manipulating text in inputs, textareas, and rich content, and providing practical code snippets for every scenario.
In this talk, a Yuque front‑end engineer walks through the past six months of Yuque Board’s new features, unexpected use cases, emerging problems, fresh ideas, and novel methods, illustrating how abstraction, scientific falsification, and innovative thinking drive product evolution.
Foxpage is a lightweight frontend low‑code framework that provides visual page building, componentization, multi‑scenario and multi‑technology‑stack support, and a platform for collaboration, aiming to reduce repetitive development work and improve efficiency across various Trip.com projects.
This article describes how Ctrip Financial’s front‑end team measured, analyzed, and optimized key web‑performance metrics such as First Contentful Paint, DNS/TCP durations, and Cumulative Layout Shift for their server‑side rendered applications, providing concrete monitoring code, data‑processing methods, and practical optimization techniques to improve user experience and achieve a 70%+ instant‑load rate.
This article explains the concept of virtual DOM, its advantages over direct DOM manipulation, details the diff algorithm including same‑layer comparison, pointer techniques, and longest increasing subsequence optimizations in Vue2 and Vue3, and discusses key usage and performance considerations.
This guide shares a front‑end developer's practical experience and step‑by‑step tips for moving from Windows to macOS, covering package managers, terminals, file navigation, hidden files, split‑screen, drawing tools, screenshot shortcuts, keyboard shortcuts, and useful resources to ease the transition.
This guide introduces Omni, an open‑source Chrome extension that transforms keyboard shortcuts into a powerful productivity suite, detailing its 50+ features, installation methods, command usage, and how developers can customize it via its GitHub source code.
This article provides a thorough analysis of Snabbdom’s virtual DOM implementation, explaining core concepts such as vnode structure, the diff algorithm, and the patch process, and includes detailed code walkthroughs and diagrams to help developers understand and apply these mechanisms in front‑end projects.
The article introduces Event Collector, a markup‑based web event tracking framework that replaces imperative tracking with data attributes or React components, explains its technical implementation, management tools, monorepo organization, release workflow, and React coding conventions to improve development efficiency and data analysis.
This guide explains how to add the Chinese fonts FangSong and FangSong_GB2312 to Baidu UEditor by editing the language and configuration files, providing the necessary font mappings and code snippets for front‑end developers.
To raise front‑end quality, the team implements gray‑release monitoring that triggers log analysis at a 5 % rollout, automatically generates reports within ten minutes, and uses dynamic thresholds and noise‑reduction tactics to detect errors early, enabling rapid rollback or expansion and markedly improving stability and release efficiency.
This article explains why a WeChat mini‑program’s share card lost its QR code due to incorrect assumptions about Object.keys ordering, dives into the ECMAScript specification and V8’s internal property storage, and shows how to modify wxml2canvas to correctly sort elements and avoid the bug.
This tutorial walks you through creating a three‑dimensional Bing Dwen Dwen mascot using Three.js and React, covering resource import, scene setup, lighting, loading management, model integration, and one‑click deployment on Alibaba Cloud's cloud development platform.
This curated list presents recent insights and tutorials on the future of front‑end development, including Vercel's vision, PostCSS fundamentals, V8 engine internals, Vite's core mechanisms, a new ESBuild‑powered runtime, Deno versus Node, and the modern Temporal date‑time API.
This article walks through the fundamentals of front‑end unit testing, covering why tests matter, popular frameworks like Jest, core APIs, mocking techniques, and how to use React Testing Library to render components, query elements, and simulate user events for reliable, maintainable code.
This article explains the DBSCAN density‑based clustering algorithm, its core concepts, parameters, and step‑by‑step implementation, then shows how dynamically derived eps values enable the algorithm to group design‑draft modules for automatic front‑end code generation, improving development efficiency.
This article explains the fundamentals of Vue server‑side rendering, why hydration is needed, the scenarios where it should be used, the typical reasons hydration can fail, and practical steps to diagnose and resolve those failures for more stable frontend applications.
This article explains the concept of visual narrative, why it matters for multi‑dimensional data insight, and details AntV's design and implementation approach—including declarative chart definitions, timeline playback, React‑like components, and animation phases—to create interactive data stories.
This article introduces functional programming as a programming paradigm, explains its core concepts such as pure functions, higher‑order functions, closures, currying, and functors, and demonstrates how these ideas are applied in modern JavaScript frameworks and libraries with clear code examples.
This tutorial demonstrates how to create a festive CSS3 animation of a spoon scooping dumplings, providing complete HTML and CSS code, visual examples, and download links for learners to copy, preview, and use the effect in their own projects.
This article consolidates front‑end performance knowledge by explaining the RAIL model, detailing user‑centric metrics such as FP, FCP, LCP, FID, TTI, TBT and CLS, describing how to capture them with tools like Lighthouse and web‑vitals, and offering concrete optimization techniques ranging from caching and HTTP/2 to code‑splitting, tree‑shaking, skeleton screens and server‑side rendering.
This tutorial demonstrates how to recreate Baidu’s Yuanxiao Festival “Tangyuan” animation by using a sprite image and JavaScript’s setInterval to repeatedly shift background positions, providing complete HTML, CSS, and JavaScript code for both forward and reverse animation effects.
Discover a curated collection of must‑read articles covering Esbuild tools, ES6 compatibility, Node.js require hooks, WebAssembly trends, React 18 batching, async error handling, Vite performance, Event Loop deep‑dive, micro‑frontends, V8 internals, and more for modern frontend engineers.
This article provides a comprehensive guide to Vue 3, covering its performance improvements, tree‑shaking support, Composition API, new global APIs, lifecycle changes, reactive system enhancements, and practical code examples to help developers migrate from Vue 2 to Vue 3 efficiently.
This article introduces eight noteworthy Vue.js UI components—Sweet Modal, Vue Scrollama, Vue‑parallax, Vue‑typer, Vue‑slider, Vue.js Popover, Vue‑bar, and Vue Infinite Slide Bar—detailing their features, use cases, and GitHub links for developers looking to enhance their web applications.
This talk explores how mid‑office designers can dramatically improve productivity by evolving from reusable component libraries to design‑system principles and finally to an intelligent low‑code platform that automates UI generation, reduces hand‑off friction, and reshapes the future role of designers.
The 2021 front‑end landscape saw steady growth in TypeScript, continued innovation in React, the rise of Svelte, expanding desktop frameworks, Rust’s increasing role in tooling, a surge in low‑code platforms, D2C intelligence experiments, DevOps focus on efficiency, and evolving micro‑frontend solutions, all pointing to a dynamic 2022.
This talk explains how Ant Group’s frontend engineers built edge‑AI services that run directly in browsers, boosting real‑time performance, preserving privacy, and cutting cloud costs, while showcasing two real‑world cases—pet identification and screen‑break insurance—and detailing the WebGL‑based engine optimizations that lifted device coverage from 30% to 93%.
This article explains how React (pre‑16.8) batches multiple setState calls using batchedUpdates, demonstrates the internal mechanism with source‑level debugging, shows code examples including setTimeout edge cases, and summarizes the key steps that enable the framework’s performance optimization.
This guide shows how to integrate the speak‑tts library into a Vue component to trigger speech synthesis on button click, covering Chrome’s autoplay restrictions, npm installation, object initialization, button markup, click handler, and a complete working example.
This curated list highlights recent technical articles for front‑end engineers, covering Chromium's rendering pipeline, cross‑cloud mini‑program development, clean JavaScript practices, CSS font metrics, React diff optimization, Commander.js, Google Web Vitals, clean architecture, Remix, state‑management comparisons, and CDN disaster recovery solutions.
HTTP Cache‑Control defines how browsers, proxies, and origin servers coordinate caching through directives like public, private, max‑age, no‑store, and revalidation, enabling developers to control freshness, reduce server load, save bandwidth, and improve user experience while avoiding stale‑content issues.
This article provides a comprehensive, data‑driven overview of front‑end technology trends from 2021 to 2022, covering programming language popularity, framework adoption, build tools, low‑code platforms, AI‑assisted development, cross‑platform solutions, serverless architecture, DevOps, 5G impacts, WebAssembly, and future directions for developers.
This article demonstrates how to build a type-level addition calculator in TypeScript by defining numeric string types, aligning decimal points, using tuple manipulation, and creating a mapping table to perform digit‑wise addition with carry handling, showcasing advanced type‑system techniques.
This article details the Layui‑Vue 0.3.x release updates—including new components, bug fixes, and version upgrades—along with instructions for theme customization using LESS variables and examples of exception and result components for building error and success pages in frontend development.
Modern CSS logical properties let developers write direction‑agnostic styles, replacing left/right and top/bottom values with start/end and block/inline equivalents, thereby simplifying RTL support, reducing duplicated code, and improving maintainability across browsers in modern web projects.
This article introduces six popular open‑source projects—including a Chinese web developer roadmap, a Rust‑based drawing app, a JSON‑driven low‑code backend framework, a Tencent live‑stream low‑code solution, a Python Faker library, and the Datart data‑visualization platform—providing brief descriptions and repository links for each.
This article curates a wide range of high‑quality video tutorials, books, and online resources covering Python fundamentals, web crawling, data analysis, machine learning, Go language development, and front‑end technologies, offering practical recommendations and rating scores to help learners choose suitable study material.
This article explains various on-demand import techniques for modern JavaScript projects, covering the native async import() syntax, the Babel plugin-import for selective library loading, Tree Shaking to eliminate dead code, and conditional compilation using tools like uglify-js-plugin and js-conditional-compile-loader.
This newsletter curates a collection of technical articles covering WebAssembly's future, Deno's 2021 progress, JavaScript garbage collection fundamentals, front‑end debugging best practices, modern CSS color systems, FormData usage, and advanced JavaScript features like iterators and generators.
This article explains the concept of frontend lightweight R&D, contrasts it with conventional React‑Node development, and details Ant Group's practical solutions—including engineering tooling, a JS‑enhanced language, visual programming, and a plugin system—that streamline integration, improve code readability, and boost development efficiency for complex, iterative projects.
This roundup highlights ten essential front‑end articles covering performance metrics, refactoring principles, React Hooks, Markdown, modularization, H5 optimization, mini‑programs, async/await debates, Nohost open‑source insights, and Remix pre‑loading techniques, offering valuable knowledge for developers.
This article explains Flutter's layered architecture, compares two web‑support strategies (HTML + CSS + Canvas vs. CSS Paint API), and details the dart2js and dartdevc compilers, their workflows, code examples, and when to use each for development or production.
This article explores Shopify's remote‑rendering UI framework, demystifies abstract syntax trees for JavaScript tooling, provides a step‑by‑step guide to frontend internationalization, dives into the mathematics of Bézier curves, and shares a two‑year product case study on scaling to tens of millions in revenue.
This talk explains the background of Alipay client compatibility issues, describes a four‑step solution that runs detection scripts on the client, presents data‑driven findings about feature support, and outlines future directions for a business‑specific “Can I Use” platform.
Recent rumors claimed that foreign hacker groups were exploiting SonarQube and Vue.js to attack government and enterprise systems, but investigation shows the SonarQube flaw is a pure backend API authentication issue unrelated to Vue, and Vue itself has no known security vulnerabilities when standard front‑end safety practices are followed.
This article details Ant Group’s Bakery one‑stop product demo platform, explaining the challenges of traditional H5 development, the platform’s architecture, mock data management, container simulation, and how it boosts visual testing, embedding assets, and product evolution visualization.
Mometa, the top‑ranked GitHub trend this week, is a low‑code, meta‑programming tool that offers visual code editing, customizable material libraries, React support, and seamless integration with existing projects, enabling developers to quickly prototype, edit, and transition between visual and code modes.
The article explains the concept of white‑screen time, its impact on user experience, and presents multiple detection methods—including Navigation Timing API, MutationObserver, element‑point analysis, and headless‑browser simulation—along with implementation code and a monitoring‑alert architecture for front‑end performance optimization.
This article explains how Remix, a full‑stack web framework, uses Link component state and the PrefetchPageLinks component to preload data, modules, and CSS, reducing loading spinners and improving user experience through parallel server‑side loading and nested route optimization.
This article explains the design and step‑by‑step implementation of an advanced search interface that lets users configure multiple conditions, choose operators based on field types, and define logical relationships, ultimately generating a FilterConfig that can be sent to Elasticsearch for precise data retrieval.
This article walks through the creation of a Spring Festival themed mini‑game using Vue.js, covering game rules, global settings, menu generation, sound handling, bullet‑chat implementation, enemy (NianShou) behavior, firecracker control, bullet mechanics, a timed quiz system, and end‑game handling, all illustrated with code snippets.
Meituan’s Phoenix solution equips web and native clients with an automatic CDN failover SDK, dynamic domain selection, and fine‑grained monitoring, dramatically improving resource loading success rates, reducing SRE workload, and ensuring high availability across millions of daily users.
This article walks through the technical implementation of high‑performance multidimensional tables—covering data preparation, layout calculation, rendering optimizations, interaction handling, and irregular cell merging—demonstrating how AntV engineers built a flexible Canvas‑based solution for complex data analysis.
This article explains the architecture of Flutter, compares the two web‑support schemes (HTML + CSS + Canvas and CSS Paint API), and provides an in‑depth walkthrough of the two compilers dart2js and dartdevc, including code snippets and build artifacts.
The Xianyu front‑end component library was designed as a Lerna‑based multi‑package system that unifies UI specifications, provides reusable atomic to industry‑specific components, employs CSS modules and strict linting, and uses Storybook for documentation, ultimately boosting development efficiency, quality, and cross‑team consistency across the product’s many business lines.
Writing reusable front‑end code means identifying and extracting repeatable UI components, centralized API request/response handling, common business‑flow logic, shared state management, and utility functions into separate, modular files or libraries, which reduces duplication, eases maintenance, and improves scalability across similar scenarios.
The article reviews Chrome's 2021 updates—including version releases, the removal of Flash, major WebAssembly enhancements, the QUIC protocol, and the upcoming WebGPU—while also highlighting broader front‑end ecosystem news such as Vercel, Figma, and Rust, illustrating how these advances shape modern web development.
This article explains how the internally developed AUX visual development tool extracts original CSS source metadata from the browser using native APIs, stylesheet inspection, and the Chrome DevTools Protocol, and how it processes that data to provide accurate, editable CSS code within a low‑invasion, code‑centric workflow.
This article explores practical performance optimization techniques for the OpenSumi IDE, covering React re‑render reduction, component memoization, menu caching, TreeView prop pruning, icon handling, and panel resize event management, demonstrating how targeted code changes can dramatically improve UI responsiveness.
