This article details a technical approach to automatically generating stroke order animation data for Chinese characters from standard font files, covering SVG rendering, coordinate transformations, deep learning-based stroke decomposition, and CSS animation techniques.
This article explains the background, concepts, workflow, and hands‑on setup of Webpack’s Hot Module Replacement (HMR), detailing server‑client communication, runtime mechanics, and how to manually implement module hot‑updates without a framework, complete with code examples and configuration tips.
The article details DiDi’s development of a real‑time, large‑screen data‑visualization system built on a custom WebGL‑based map framework, describing how they tackled one‑time map loading, massive data compression, and high‑performance rendering of trajectories, bubbles, heatmaps, flight lines and animated scatter points, supported by interactive debugging tools.
This article discusses adaptive scaling methods for canvas-based interactive courseware development, comparing two approaches to maintain aspect ratios while ensuring content visibility across varying screen resolutions and window sizes.
TypeScript 4.3 introduces several enhancements such as distinct types for read/write properties, the override keyword with a no‑implicit‑override flag, richer template literal type inference, and expanded support for truly private class members, all illustrated with code examples.
This article demystifies Webpack Dev Server by detailing its core components—webpack-dev-middleware, hot module replacement, live reload, proxy, and history API fallback—while providing practical code examples and configuration tips to streamline local development, improve build performance, and simplify debugging in modern frontend projects.
Micro App is a JD iPaaS‑developed micro‑frontend framework that simplifies integration by using a custom element with HTML entry, element isolation, js sandbox, plugin system, pre‑loading, and resource address completion, offering lower entry cost and higher efficiency than existing solutions.
This article chronicles the evolution of a web‑based live‑streaming platform from its initial Web 1.0 prototype through successive versions, detailing AI speech detection, RTC integration, extensive refactoring, and the resulting framework that proves web technologies can effectively support live‑streaming scenarios.
This article provides a comprehensive guide to Python's built‑in Tkinter GUI library, covering installation, window creation, core widgets such as labels, buttons, text boxes, menus, canvases, and advanced features like event binding and layout management, enabling readers to build functional desktop applications.
Vue.nextTick schedules callbacks using a graceful‑degradation chain (Promise, MutationObserver, setImmediate, setTimeout) that leverages the JavaScript event‑loop’s micro‑task queue, ensuring DOM mutations are applied instantly but rendered after microtasks and before macrotasks, while the browser’s multi‑threaded architecture coordinates rendering, timers, and network work.
This article explains how Vite improves development experience over traditional bundlers by leveraging native ESM support for a fast dev server, efficient hot‑module replacement, pre‑bundling of Node modules, and seamless integration with Rollup plugins for production builds and SSR.
This article introduces SwiftUI, compares it with other declarative UI frameworks, explains its rendering pipeline, lifecycle, data‑binding mechanisms, language features, and discusses how Qunar has adopted SwiftUI and migrated parts of its native iOS codebase from Objective‑C to Swift.
Vite is a native ES Module‑driven frontend build tool that offers lightning‑fast cold starts, instant hot module replacement, and on‑demand compilation by eliminating bundle steps during development, while still using Rollup for production builds, providing a performance‑focused alternative to Webpack.
This article provides a comprehensive analysis of Webpack's core architecture, explaining its three-phase workflow (initialization, building, and generation), plugin system, and module handling mechanisms to help developers understand the underlying principles of this static module bundler.
Progressive Web Apps (PWA) are web applications that leverage Service Workers and modern web technologies to deliver native-like functionality, including offline capabilities, push notifications, and home screen installation, enhancing user experience across devices.
China’s low‑code market, valued at CNY 1.9 billion in 2020 and projected to hit a hundred‑billion by 2024, is booming as enterprises like iQIYI adopt visual development platforms that abstract reusable components, accelerate activity page creation, and address integration, modularity, and business‑driven platform design challenges.
Vite is a modern web development tool that leverages native ES modules, Koa server, and esbuild to provide instant cold starts, on‑demand compilation, and fast hot‑module replacement, eliminating traditional bundling steps while offering a flexible plugin system for handling dependencies, source files, and optimizations.
This tutorial demonstrates how to build a Markdown editor using ByteMD, including setting up plugins for enhanced functionality and customization.
This article explores the evolution, principles, and practical comparisons of static, adaptive, elastic, fluid, and responsive web layouts, introducing the A+R hybrid model and offering guidance on choosing and implementing the right layout strategy for modern multi‑device experiences.
This article explains what an Abstract Syntax Tree (AST) is, how it’s generated during lexical and syntax analysis, outlines its core structure, and demonstrates practical applications such as code transformation, linting, formatting, and custom Babel plugins with detailed code examples.
Alibaba’s open‑source Kraken engine, built over three years, offers a high‑performance, W3C‑standard‑based rendering solution that integrates seamlessly with existing front‑end ecosystems, delivers consistent cross‑device output, and introduces advanced features like infinite scrolling, synchronous rasterization, enhanced gestures, and a plugin architecture, all backed by extensive automated testing and real‑world deployments.
This article explains JavaScript’s scope types, execution context, activation objects, and the lifecycle of functions, illustrating how closures retain memory, how garbage collection works, and provides practical solutions for common closure pitfalls in React functional components.
Alibaba’s Light Store team leveraged internal Serverless platforms to redesign their front‑end development workflow, introducing a sidecar‑and‑bottle architecture, unified FaaS SDK, and a layered service model that together accelerate development, reduce coordination costs, and enhance system stability across multiple business domains.
This article explains why Tailwind CSS has become popular, how it bridges design tokens and UI code, enforces visual consistency, separates concerns with semantic class naming, and offers practical patterns—mixins, BEM, content‑agnostic styles, and inline‑style replacements—to build maintainable front‑end systems.
The River Beaver system, developed by Daily Fresh, is a self‑built activity construction platform that offers a rich set of business components and a visual page‑building interface, enabling marketers to quickly create and publish customized H5 activity pages while freeing developers from repetitive tasks, improving efficiency, and supporting scalable component libraries.
This article explains why many developers stagnate, introduces the concept of deliberate practice, and provides a step‑by‑step methodology—including clear goals, strong motivation, mentorship, structured learning plans, zone management, feedback loops, and reward systems—to accelerate a front‑end engineer's growth from beginner to expert within three years.
This article explains Flutter's rendering pipeline and provides practical techniques for optimizing the build, layout, and paint phases, including debugging tools, code refactoring, and widget structuring to achieve smoother, higher‑performance applications.
The article examines the evolution of CSS for large projects, compares CSS Modules, CSS‑in‑JS, and Tailwind CSS, highlights their benefits and drawbacks, and provides practical code examples and design‑token strategies for modern component‑based front‑end development.
This article explains Babel's role as a fundamental JavaScript compiler, detailing its parsing‑transform‑printing pipeline, AST structure, core‑js polyfills, preset‑env configuration, and runtime helpers, providing frontend developers with a comprehensive guide to mastering Babel's ecosystem and optimizing bundle size.
This weekly roundup covers the upcoming Cloud Connect China conference, new national standards for big data, cloud and blockchain, China’s first blockchain forensic institute, the Dual‑Gigabit network plan, Edge PWA visual parity, record cloud infrastructure spending, the involution neural operator, and a reinforcement‑learning approach to conversational search risk control.
This article walks through the design and implementation of NutUI 3.0's Drag component for mobile web, explaining the two main drag techniques, touch event handling, boundary checks, optional axis constraints, and snap‑to‑edge behavior with complete Vue code examples.
This article explains the limitations of the traditional img tag for responsive design, demonstrates how the picture element combined with srcset, sizes, and media attributes can handle both resolution and image switching, and provides practical code examples for modern web development.
This article explains what an Abstract Syntax Tree (AST) is, outlines its parse‑transform‑generate workflow, and demonstrates practical AST‑based code transformations using Babel, custom ESLint rules, and a JSX‑to‑object Babel plugin, complete with example code and visual illustrations.
This article explains the design and implementation of Taro 3.2’s style adaptation for React Native, covering the architectural changes, code transformation process, handling of platform‑specific style differences, preprocessing support, validation mechanisms, and future optimization directions.
This article details Meituan Waimai's front‑end team experience of using Flutter Web to create a unified code base for Android, iOS, PC and H5, covering business and technical background, challenges, overall and detailed design, performance optimizations, build‑and‑deploy pipelines, and measurable results.
This article reviews Chrome 89’s most notable updates—including Top‑level await, Web NFC, WebHID, and the Web Serial API—explaining their technical details, practical demos, and how they expand the web’s ability to interact with hardware and improve developer productivity.
This article details the practical upgrade from Webpack 4 to Webpack 5 in the Penguin Tutor H5 project, presenting build‑time comparisons, bundle‑size reductions, and in‑depth analysis of new features such as persistent caching, deterministic IDs, removed Node polyfills, enhanced tree‑shaking, and Module Federation, while also sharing common pitfalls and solutions.
This article explores methods to prevent user-injected JavaScript from manipulating DOM objects, including using Shadow DOM and Web Workers to create secure sandboxed environments.
The article introduces San CLI—a command‑line tool for the San front‑end framework—explaining its purpose, core commands for project scaffolding, development, building, and inspection, as well as how to extend it with command and service plugins for customizable, production‑ready workflows.
This case study describes how the Luffy platform was built from scratch to replace cumbersome Excel workflows with a minimalist, component‑driven design that visualizes data securely, improves team collaboration, and accelerates product iteration for operations and product teams.
This tutorial demonstrates how to easily create dynamic SVG animations by leveraging the GreenSock Animation Platform (GSAP), specifically focusing on TimelineMax and staggerFrom methods to manipulate DOM elements, apply easing functions, and sequence complex visual effects with minimal code.
This article details the technical implementation of Next.js SSR for international projects, covering custom routing, data fetching, Material UI integration, SEO optimization, and special considerations for overseas markets including Google Recaptcha and internationalization.
This article introduces FakeAPI, a FastAPI‑based mock data service that lets front‑end developers quickly generate realistic JSON payloads, explains its endpoints, payload formats, repeat feature, and shows how to deploy it locally using Docker.
This article explains how Alibaba’s CBU team tackled decision overload by building an intelligent UI that uses user‑behavior and product‑preference models, replaces algorithmic cold‑start, reduces reliance on traffic, and delivers over 10% PVctr growth across multiple holiday campaigns through systematic tagging, low‑code material development, and rigorous A/B experimentation.
This article explains how to enable and configure Hot Module Replacement for the San framework using san-hot-loader, covering both San CLI and manual Webpack setups, the underlying HMR workflow, module detection logic, and the core code that injects runtime updates for components and stores.
This article describes the motivation, product design, core features, and technical implementation details of a simplified Juejin mini‑program built with Taro 3, covering markdown rendering, virtual list handling of large content, and canvas‑based share image generation for a better user experience.
React Server Components propose a solution to React's data-fetching performance issues by separating components into server-side and client-side types, but face challenges like increased server costs and developer complexity.
This guide explains the new WeChat service account subscription message workflow, covering terminology, user subscription steps via JSSDK, handling callback XML, and sending notifications through the official API, while also addressing common integration challenges.
This article explains how Pipcook, a machine‑learning framework designed for front‑end developers, integrates TensorFlow.js, Boa, and Node.js to automate code generation, simplify model training, and enable intelligent front‑end applications while outlining its architecture, performance considerations, and future roadmap.
This comprehensive guide examines JavaScript type-checking mechanisms such as typeof, instanceof, constructor, Array.isArray, and Object.prototype.toString, detailing their underlying principles, cross-realm limitations, prototype chain behaviors, and optimal implementation strategies for reliable frontend development.
This article introduces five new ES2021 JavaScript features—including replaceAll, Promise.any, logical assignment operators, numeric separators, and WeakRefs—explaining their behavior, usage examples, and browser support so developers can quickly adopt them.
The article compares traditional React state‑management solutions—Redux’s single‑store with extra libraries and potential re‑renders, and MobX’s fine‑grained but class‑based approach—against the lightweight, hook‑driven Clean‑State library, which avoids providers, reduces bundle size, and offers precise module‑level updates for large and consumer applications.
San CLI UI combines a San‑based client, a Node.js/Express GraphQL server, and lowdb file storage, enabling custom routing, component enhancements, and a versatile plugin system—supporting widgets, configurations, tasks, and custom views—managed through ClientAddonApi and PluginManager with IPC communication.
This article provides a comprehensive walkthrough of Vue CLI's project initialization process, covering command‑line usage, entry‑file discovery, node version validation, intelligent command suggestion, preset handling, the Creator class workflow, prompt modules, plugin integration via Generator and GeneratorAPI, configuration extraction, and the final file generation steps.
A detailed case study shows how clarifying user scenarios, simplifying page modules, and enhancing visual hierarchy on a used‑car valuation result page increased high‑quality leads by over 50% and doubled daily revenue.
In this interview, Tencent front‑end lead Li Qinglong explains how low‑code platforms boost development efficiency, outlines when they’re advantageous, shares the IMWeb team’s evolution since 2015, and predicts a growing role for low‑code in both tech firms and traditional industries.
This article details how a real‑world property‑listing project leveraged Taro 2.x to build a single codebase that runs on React Native, various mini‑programs, and H5, describing the motivations, technical obstacles, framework comparisons, custom CLI patches, conditional compilation techniques, and deployment workflows.
This article explains how CSS logical properties, introduced in 2020, provide a writing‑mode‑independent way to define layout, reduce code, and improve compatibility across languages such as Arabic, Hebrew, and Japanese, with practical examples and best‑practice recommendations.
Vant 3.0 delivers a full Vue 3 migration, refactoring all components with the Composition API, adding emits options and Teleport support, shrinking bundle size, introducing Badge, Popover and Cascader components, a new Vant Use 1.0 logic library, and upgraded CLI tooling while maintaining Vue 2 compatibility.
This article presents a curated collection of twelve popular open‑source Vue.js admin dashboard projects, providing their documentation URLs, live demo links, and license types so developers can quickly evaluate and adopt the right UI framework for their backend interfaces.
This article introduces the qrn‑remax‑unir library, explains how the QuNar front‑end team adapted React Native code to run on H5 and various mini‑program platforms using Remax, discusses the design choices, implementation details, style handling strategies, animation support, and provides usage instructions and code examples.
This article provides an in‑depth technical walkthrough of San CLI, covering its core modules, the main and service workflows, the plugin system for commands and services, and detailed code examples such as TaskList and Service implementations, helping developers understand and extend the tool.
This article presents a comprehensive guide on using the WeChat Mini Program video component, covering component import, property configurations, event handling, API usage, layout strategies, permission logic, network interaction, fullscreen handling, playback continuity, URL expiration management, and eight common pitfalls to avoid.
This article introduces San CLI, explains why a command‑line interface boosts front‑end productivity, walks through project initialization, development server, production build, remote deployment, inspection, UI, and demonstrates how to extend the tool with custom command and service plugins.
This article explains how to use Vue 3.0’s Composition API, TypeScript support, and custom render capabilities to create a mini‑program framework, covering file structure, VNode implementation, nodeOps adaptation, template compilation, and dynamic template selection with full code examples.
This document identifies common JavaScript code pitfalls, such as inefficient array methods and complex conditionals, and provides best practices for improving code readability and maintainability through modern JavaScript techniques and tools.
In this reflective article, a former front‑end expert at Alibaba shares half a year of personal growth, detailing how he learned to challenge authority, improve mature technical systems, manage project risks, communicate effectively with product designers, and build professional credibility as a project manager.
This article examines the controversial Vue 3 Ref‑sugar proposal, traces the evolution of rich‑text editors, outlines frontend exception‑monitoring architectures, reviews a TypeScript‑based JavaScript interpreter, and shares practical experiences with Vue 3 mini‑program development, offering a comprehensive technical perspective for modern frontend engineers.
This article explains the differences between Node and Element in the DOM, clarifies the roles of NodeList and HTMLCollection, demonstrates how to inspect child nodes with code examples, and provides practical tips for handling these objects in frontend development.
This article explores how RxJS, Svelte, and the binary RSocket protocol can be integrated to build fully reactive front‑end applications, covering core concepts, practical code examples, and new features in RxJS 7 such as async‑iterable support and enhanced fromFetch.
The River Beaver system, developed by Miss Fresh, is a self‑built activity‑construction platform that lets operators visually assemble marketing pages using reusable components, dramatically reducing development effort, accelerating release cycles, and empowering non‑technical staff, while the underlying architecture—Vue‑based designer, component libraries, Node/Think.js services, and build pipelines—ensures scalable, maintainable H5 page generation.
The article examines the reasons for combining PHP and Java in web architecture, highlighting PHP’s rapid front‑end development and flexibility, Java’s performance and stability for back‑end services, and discusses the trade‑offs, challenges, and practical experiences of dual‑language systems.
Chrome 86 introduces stable File System Access APIs, blocks mixed‑content downloads, adds ParentNode.replaceChildren, enhances HTTP security warnings, and unveils experimental WebHID, Multi‑screen Placement, and :focus-visible features while deprecating WebComponents v0 and FTP support.
The guide details how the Jimu Sketch plugin was transformed from a simple internal tool into a platform‑wide solution that supports multi‑business switching, automated library conversion, UI/UX enhancements, performance caching, a native inspector panel, and deep JavaScript‑Objective‑C integration for scalable design‑system workflows.
This practical guide explains WebSocket fundamentals, demonstrates how to integrate and debug them in a project with webpack proxy and Nginx settings, implements heartbeat and reconnection logic for stability, and compares native WebSocket to Socket.io’s richer but heavier real‑time framework.
This article outlines a practical multi‑platform solution that transforms a React‑Native codebase into both H5 web pages and various mini‑programs by leveraging react‑native‑web for web compilation and Remax for mini‑program rendering, while employing webpack tricks for dynamic, per‑platform builds.
This article dissects the inner workings of webpack-dev-server, covering its command‑line entry point, the Server class initialization, the role of webpack-dev-middleware, websocket communication, hot module replacement logic, and how live‑reload and hot‑reload are orchestrated during development.
The talk explains Ant Design's core assumption that everyone seeks happy work, outlines its four design values, introduces the ETCG 2.0 methodology for consistent component design, and discusses how natural, deterministic interactions can make digital products feel more intuitive and enjoyable.
The article chronicles Internet Explorer’s 25‑year journey from its 1995 debut to Microsoft’s phased retirement plan, detailing compatibility challenges, the rise of Chromium‑based Edge, and the inevitable transition for users and developers.
This article explains why interactive animation tools are essential at every project stage, reviews the market landscape, highlights Protopie's unique advantages, and provides a step‑by‑step guide to quickly create high‑fidelity prototypes and apply them to real‑world design scenarios.
This page lists past Ctrip Tech Salon sessions covering backend architecture, API gateway design, serverless services, front‑end engineering, hot‑fix techniques, Electron usage, and data‑collection SDKs, providing links to detailed technical reviews of each practice.
This guide explores the full spectrum of H5 animation techniques—including GIFs, sprite‑sheet frames, CSS keyframe animations, Lottie, WebGL/Canvas performance trade‑offs, and a comparative overview of popular game engines—providing practical code snippets, compatibility notes, and implementation tips for modern web developers.
This guide introduces TypeScript, covering its definition, advantages, data types, enums, interfaces, classes, function definitions, parameter handling, overloads, and best practices, with code examples illustrating each concept for developers seeking to write safer, more maintainable JavaScript.
This guide walks through using Vue3’s Composition API, Teleport, Fragments, script‑setup, and style‑vars within Taro, covering installation, project setup, code examples for each feature, build commands, and compatibility notes for both H5 and mini‑program targets.
This article introduces static websites, explains their advantages over dynamic sites, and reviews ten popular open‑source static site generators—Jekyll, Hugo, Hexo, Gatsby, VuePress, Nuxt.js, Docusaurus, Eleventy, Publii, and Primo—highlighting their main features, language bases, and typical use cases.
This article dissects HarmonyOS 2.0's embedded GUI stack, explaining its three abstraction layers—JS framework, JS engine/runtime, and graphics rendering—while detailing the underlying open‑source components, custom C++ integrations, performance trade‑offs, and practical code examples for developers.
This case study details how JD.com’s ranking page for the 618 promotion leveraged data‑driven navigation, visual redesign, pixel‑perfect front‑end techniques, and component‑based development to boost click‑through rates, conversion, and overall GMV while outlining future optimization directions.
This article introduces seven open‑source alternatives to Visual Studio Code—including VSCodium, Code‑OSS, Atom, GNOME Builder, Geany, Brackets, and Che—detailing their key features, telemetry handling, platform support, and where to download each editor, helping developers choose a privacy‑friendly code editor.
This guide walks through building a Vue CLI plugin—named vue‑cli‑plugin‑next‑component—that enforces team‑wide naming conventions and directory structures for a component library, detailing the required file layout, service entry, interactive prompts, EJS‑based generator templates, testing workflow, and how it streamlines and standardizes Vue component creation.
The article explains how permission control in a front‑back separation architecture defines resources and permissions, outlines the distinct responsibilities of frontend and backend in enforcing access, and provides practical implementation examples with component tags and Java interceptor code.
This article provides a comprehensive, hands‑on tutorial for quickly creating a React component library using create‑react‑app, configuring TypeScript, ESLint, node‑sass, docz documentation, npm publishing, tree‑shaking, on‑demand loading, and deploying the generated docs to Netlify.
This article explains the challenges of translating design specifications into code, introduces Design Tokens as a solution, and provides step‑by‑step guidance—including variable generation with Theo, custom iOS/Android implementations, mixin creation, and deployment—to improve consistency and efficiency between designers and developers.
This article details JD’s 京喜 mini‑program performance overhaul, covering user‑centric metrics, dual‑thread architecture, code‑size reduction, asset optimization, plugin‑based rendering, data‑handling strategies, and memory management to dramatically improve startup, rendering, and overall user experience.
This article details the end‑to‑end process of designing, publishing, packaging, optimizing, and continuously delivering a reusable React component library at Ctrip, covering npm workflow, build tooling choices, CSS extraction, on‑demand loading, package splitting, collaborative documentation, CI/CD, and automated testing.
Matrix is an enterprise‑level design system that unifies UI components, templates, and design tools to boost productivity for designers, developers, and product teams, employing atomic design, an 8‑point grid, and responsive layout rules, while offering a Vue component library, Sketch assets, and Axure components.
This article explores Alibaba's Data Experience Technology team's comprehensive architecture for SQL editors, BI platforms, data visualization, low‑code solutions, heterogeneous rendering, and data security, highlighting design principles, performance optimizations, and future directions across the data lifecycle.
This article presents a custom canvas‑based mobile screenshot solution for single‑page applications that overcomes cross‑origin image blocking, low scaling clarity, inaccurate arc rendering, and deep DOM parsing issues by loading images anonymously, rendering at higher resolution, using precise arc patterns, and measuring text for proper wrapping.
Chrome 84 was officially released with a focus on developer‑oriented updates, introducing App Icon Shortcuts, expanded Web Animations API support, Wake Lock and Content Indexing APIs, experimental Idle Detection and WebAssembly SIMD features, as well as continued SameSite cookie policy refinements.
This article explains why traditional bundlers like Webpack become slower as projects grow, introduces the Bundleless approach that leverages native ESModule loading in browsers, details core techniques and Vite implementation, and shares a real‑world POS case study showing dramatic improvements in startup and HMR performance.
The article reviews Vue 3’s mid‑2020 status with three new SFC syntax‑sugar features, debates the future of front‑end/back‑end integration, evaluates popular data‑visualization frameworks, highlights security risks in Node.js’s legacy URL API, and showcases a DevOps‑based productivity tool and high‑performance mini‑program practices.
