This article explains how to adapt Vue.js web pages for diverse mobile devices by configuring the viewport meta tag, using relative and viewport units, applying flex layouts, handling fixed positioning issues, implementing route transitions, and leveraging useful plugins and component registration methods.
This article explains D3.js fundamentals—including its selection, join, and scale modules—then walks through a step‑by‑step implementation of a fully customized bar chart using SVG, demonstrating how to bind data, create axes, and add interactive tooltips.
This article walks through the complete implementation of a lightweight MVVM framework—covering Object.defineProperty data hijacking, proxying, template compilation, publish‑subscribe reactivity, two‑way binding, computed properties and lifecycle hooks—using plain JavaScript.
This article explains the background, technical architecture, real‑world case, and key takeaways of implementing gray‑scale monitoring across web, Weex, mini‑programs, and other cross‑platform front‑end solutions to improve issue detection and reduce mean time to recovery.
The article explains how the rapid growth of API endpoints and data fields in complex business scenarios can be mitigated by introducing a GraphQL middle‑layer built with Node.js, detailing schema design, resolvers, performance considerations, tooling, custom scalars, response formatting, caching, and security measures.
This article compiles and evaluates the ten most popular free open‑source admin dashboard UI frameworks, presenting their GitHub star counts, repository links, core features, and visual previews to help developers choose a suitable solution for backend management interfaces.
It presents a curated selection of over twenty technical articles covering CSS performance, React Server Components, visualization algorithms, frontend monitoring, serverless migration, and more, each with brief insights and links for deeper reading.
This article explores how the simple CSS rule margin:auto can be used to center fixed‑width blocks, align elements to the right, and combine with Flexbox for sophisticated layout patterns, while also addressing overflow challenges and offering practical code examples.
This talk outlines Hema's exploration of a unified cross‑platform solution for its middle‑back office, covering industry trends, challenges of diverse devices and environments, and a three‑layer approach that combines a design system driven by environment‑aware design tokens, a model‑centric component architecture, and an application framework that synchronizes state across devices.
This article introduces five free, downloadable JavaScript/CSS3 countdown effect templates for the 2021 New Year, each with a brief description, preview image, and direct download link for developers to integrate into their web projects.
This article explores how motion, inspired by everyday life and Disney animation principles, shapes interaction design through ten core animation principles—real‑time vs. non‑real‑time, easing, offset, linking, transformation, value changes, masking, cloning, obscuring, parallax, dimension, and push/pull‑scale—to create more natural and engaging user experiences.
This talk explains Alibaba’s P2C product that extends design‑to‑code automation to PRD‑to‑code, detailing its layered architecture, annotation workflow, logical‑point extraction, code generation, and roadmap toward AI‑driven zero‑annotation development for front‑end engineers and product designers.
This article explains how React 16's Fiber architecture replaces the recursive VDOM traversal with a cooperative, time‑sliced update model that splits work, uses linked‑list structures, assigns priorities, and allows tasks to be paused, resumed, or aborted for smoother rendering and better user experience.
This article explains how Vue 3’s reactivity system works—covering the creation of reactive proxies, the role of Ref, the mechanics of computed properties, and the behavior of watch and watchEffect APIs—while illustrating common pitfalls and optimization techniques with code examples and diagrams.
This article demonstrates how to build a WebSSH terminal from scratch using SpringBoot for the backend, WebSocket for real‑time communication, JSch for SSH connections, and xterm.js for the front‑end terminal UI, including dependency setup, server‑side logic, and client‑side integration.
Taro 3.1 introduces an open‑architecture plugin system that lets developers add or customize platform support without modifying the core, updates built‑in platforms, fixes critical bugs, and provides a clear migration path for both v2.x and v3.x users.
This article examines the concept, purpose, and visual forms of feed streams in a mobile community app, outlines key usability design principles such as signal‑to‑noise ratio, readability and proximity, and presents integrated, efficient, and enriched design solutions to improve content presentation and user experience.
This talk walks through DingTalk Spreadsheet's journey from zero to a feature‑rich, Excel‑compatible web app, covering its modular architecture, the RangeMan solution for scalable cell management, sophisticated collaboration algorithms like GOT and COT, and performance‑driven rendering techniques using Canvas, double buffering, and a custom text layout engine.
The article explains how the YuanShi platform was created to address front‑end talent shortage by standardising tools, redefining team structures, introducing component‑based cooperation, and outlining the evolution, benefits, challenges, and future directions of this approach within a large B‑end organization.
This article explains how to build a flexible front‑end mock system by decoupling configuration files, extending webpack devServer proxy hooks, creating a unified request wrapper with Axios, and generating minimal mock.json files for both development and production builds.
This article walks through Vue 3's initialization process, explaining what createApp(App).mount('#app') does, how the runtime‑dom and runtime‑core modules create and render VNodes, and how patch, shapeFlags, and patchFlags drive efficient DOM updates.
The 2020 front‑end landscape shifted from simple page rendering to full‑stack product development, highlighting seven major trends such as the explosive growth of TypeScript, the dominance of React, the emergence of WebAssembly, the rapid adoption of low‑code platforms, deeper serverless integration, DevOps maturation, and the expanding role of WebRTC, all of which reshaped how developers deliver business value.
This article explains how to improve the rendering speed of highly customized stock K-line (candlestick) charts by optimizing canvas drawing commands, using caching strategies, and applying layered rendering to reduce unnecessary state changes and redraws.
This guide explains the scenarios that cause duplicate HTTP requests in web applications, demonstrates two Axios cancellation techniques, and shows how to encapsulate the logic in a reusable module with request tracking, interceptor integration, npm linking, and open‑source contribution steps.
This article explains how AI technologies are transitioning from labs to the web, covering neural network fundamentals, the distinction between cloud and edge intelligence, implementation pipelines, offline model optimization, online inference backends like WebGL and WASM, and practical web front‑end AI use cases.
This article details how Fliggy's front‑end team tackled the performance challenges of the Double‑11 shopping festival by migrating to Rax 1.0 on Web, employing pre‑render, Serverless SSR, Snapshot caching, SPA techniques, and comprehensive monitoring, ultimately achieving a 25% reduction in first‑screen load time.
This article offers junior frontend engineers practical guidance on selecting the right company, integrating into new teams, accelerating technical and professional skill development, identifying growth opportunities, and avoiding common career pitfalls to achieve rapid career breakthroughs.
Explore a curated collection of cutting‑edge frontend knowledge—including a zero‑cost micro‑frontend framework, reasons to drop CSS @apply, canvas‑based electronic signatures with PDF output, large‑scale SSR strategies, Chrome 87 enhancements, ECMAScript 2021 features, XSS defenses, automated SVG icon delivery, ESLint best practices, JavaScript metaprogramming, node_modules pitfalls, Monorepo management, and Rax mini‑program runtime insights.
This article explains how single‑page applications use router mechanisms, compares hash and history routing modes, and demonstrates the required server‑side (Node) and Nginx configurations to make history mode work without page reloads, including code examples and best‑practice tips.
This article provides a detailed, step‑by‑step explanation of how a browser processes a simple HTTP request—from URL parsing, DNS lookup, and TCP connection through server handling, response reception, HTML/CSS parsing, layout, painting, reflow/repaint, and JavaScript execution—highlighting key concepts, optimizations, and common pitfalls.
This article explores the evolution of front‑end technology from early web effects to modern interactive media, detailing Alibaba's comprehensive interactive platform, the shift beyond mere efficiency, the impact of serverless architectures, and the expanding role of front‑end engineers in business‑driven product development.
This article explains what skeleton screens are, reviews existing implementation methods, and presents a custom DOM‑based approach with configurable rules, code snippets, and a Puppeteer‑driven CLI tool that automatically generates and injects skeleton screens for web pages.
This article introduces TypeScript 4.0, explains why it’s an ideal time for newcomers to start using it, and provides a concise yet comprehensive walkthrough of its core concepts, type system, common utilities, and practical code examples to improve development efficiency.
This article explores the fundamentals and benefits of functional programming in JavaScript, showcases real‑world examples using plain functions, currying, Ramda, and RxJS, and highlights how these techniques improve code readability, composability, and maintainability for front‑end developers.
This article introduces five distinctive jQuery-powered back‑to‑top animations—including a cartoon character, rocket launcher, starry rocket, floating rocket, and a music‑ding effect—explaining their visual style, providing brief descriptions, and offering download URLs for the source code.
This curated collection presents concise overviews of recent front‑end advancements, covering micro‑frontend architecture in Xiaomi CRM, G6 4.0 visual analytics, code‑quality best practices, 2020's hottest technologies, CDN fundamentals, CSS trends, component design, TypeScript popularity, VSCode inspection tools, watermark techniques, GPU.js acceleration, React DOM manipulation, and the top JS13K 2020 games.
Celebrating JavaScript’s 25th anniversary, this article traces its rapid 10‑day creation in 1995, its evolution into the world’s most popular language, the rise of TypeScript, the impact of V8, and emerging technologies like WebAssembly that extend its influence across the web.
The article describes how a large front‑end team tackled low development and release efficiency by standardizing UI components, adopting cross‑platform solutions such as React Native and Flutter, building dynamic configuration frameworks, and automating release processes, ultimately achieving faster, more reliable product delivery across multiple business units.
This article explains the various ways browsers interpret the numeric value zero in JavaScript timers, numeric comparisons, type coercion, and CSS properties such as font-size, width, height, line-height, and transform, providing code examples and cross‑browser observations.
This article explains how Hema redesigned its enterprise backend workflows by creating a full‑scene cross‑device design system, reusable components, and a layered application architecture that lets staff operate seamlessly across PCs, tablets, phones, and IoT devices in stores, warehouses and delivery trucks.
This article explores the evolution of cross‑platform technologies—from early PC and mobile web solutions to modern frameworks like Weex, React Native, and Flutter—highlighting their benefits, challenges, and the ongoing quest for performance, consistency, and development efficiency across diverse devices.
This article explains how to write high-quality, maintainable frontend code by exploring component abstraction, granularity, design principles, and classification—from atomic to page-level components—illustrated with React and Vue examples, code snippets, and practical guidelines for balancing reuse and complexity.
This article compiles a curated list of practical VS Code techniques—from refactoring code and customizing view layouts to fast debugging, symbol navigation, terminal management, Git operations, and essential shortcuts—offering developers concrete ways to accelerate their workflow and write cleaner code.
This article explains how designers can give UI motion effects texture and realism by mastering time, speed, space, motion tone, and method, while aligning animations with brand identity and using appropriate curves and elastic expressions for natural, engaging user experiences.
This article explores the design and implementation of JD's 11.11 data‑center visualization screen, detailing its storytelling approach, 3D integration, step‑by‑step creation process, and the use of tools like ECharts to turn massive traffic data into an engaging, real‑time dashboard.
This article walks through building a simple JavaScript calculator, adds a minimal plugin architecture, discusses its limitations, and then presents a more robust plugin system that separates core functionality from extensions while preserving safety and testability.
The article describes the challenges of maintaining test cases amid organizational changes and introduces a functional test case platform that centralizes case storage, supports version‑driven updates, enables reuse of business modules and base components, and outlines its backend MongoDB design, frontend mind‑map UI, and future roadmap.
This guide shows how to create a simple web page that converts a given text string into spoken audio using the HTML5 SpeechSynthesis API, with a complete code example, execution steps, and browser compatibility notes.
This article traces the evolution of cross‑platform frontend development—from early H5 and hybrid solutions through native containerization, same‑layer rendering, mini‑programs, and self‑draw frameworks like Flutter—while highlighting Alibaba’s current challenges, strategic directions, and the upcoming D2 cross‑platform technical forum.
This article presents a comprehensive catalog of more than 40 open‑source projects released by Didi, covering AI runtimes, speech and NLP engines, big‑data loaders, middleware, mobile frameworks, frontend UI libraries and various operational tools, each with a brief description and a GitHub link.
Alibaba’s Double 11 “Super Star Show Cat” interactive experience achieved ultra‑fast page loads, seamless animation, and zero failures by leveraging a custom EVA front‑end solution, optimized page rendering infrastructure, modular loading, data slimming, accessibility support, and a global stability strategy with device‑level experience grading.
This article explains the concept of Progressive Web Apps, compares them with native and traditional web apps, details the implementation of core PWA features such as App Manifest, Service Worker, caching strategies, push notifications, and Workbox best practices, and shares metrics, challenges, and solutions encountered during the Sharee mobile project.
This article examines the variety of cross‑platform demands, compares mainstream solutions such as H5 Hybrid, React‑Native/Weex, Flutter, and compilation‑time frameworks, and offers practical guidance for teams to balance performance, stability, and long‑term maintainability.
This curriculum outlines a three‑stage live online program covering front‑end technologies, core PHP and MySQL development, and integrated full‑stack projects with frameworks like ThinkPHP6 and Laravel, plus optional electives and practical deployment and interview preparation for enterprise‑level applications.
Discover eight Chrome extensions that streamline GitHub navigation, enable single‑file downloads, accelerate cloning, enhance search, add file icons, beautify contribution graphs, and improve Markdown navigation, dramatically reducing repetitive actions and boosting developer productivity.
Angular 11.0.0 introduces major updates such as TypeScript 4.0 support, dropping legacy IE versions, automatic font inlining, enhanced test harnesses, faster builds, experimental Webpack 5 support, and a migration from TSLint to ESLint, all detailed with upgrade commands and practical tips.
This article explains how the 2020 Double‑11 e‑commerce event page adopted server‑side rendering to dramatically improve first‑paint metrics, reduce page‑load time, boost user engagement, and overcome the limitations of the existing client‑side rendering architecture through a low‑risk, data‑driven SSR solution.
This article details the massive changes and challenges of Double 11 2023, describing how Alibaba's front‑end teams used D2C automation, Serverless FaaS, PHA, ESR, pre‑rendering, SSR, intelligent UI and robust stability processes to boost performance, conversion and user experience across multiple platforms.
This article demonstrates how to replace heavy swiper libraries with a slim, pure‑CSS carousel using scroll‑snap‑type, scroll‑snap‑align, and scroll‑behavior, and adds a small JavaScript polyfill for smooth scrolling and automatic slide rotation, complete with npm packaging and compatibility notes.
This article introduces JavaScript fundamentals, explains three ways to include scripts, demonstrates simple click events, shows how to use selectors, outlines event handling, and covers DOM manipulation techniques such as modifying content, styles, and classes, including retrieving computed styles.
This article shares Alibaba front‑end engineer A Da’s background and explains the emerging focus on frontend safety production, covering why a dedicated session is needed, how it differs from general security, practical asset‑loss prevention, workflow integration, and what attendees can expect from the D2 event.
A web testing engineer recounts how a user‑reported gray banner on a Chrome browser led to a step‑by‑step investigation that ultimately uncovered the AdGuard extension as the culprit, illustrating practical troubleshooting techniques for front‑end issues in production.
This tutorial demonstrates how to create a lightweight chatroom by combining WebSocket on the front end with Swoole's WebSocket server in PHP, covering project setup, required environment, client‑side HTML/JS, server‑side PHP code, and steps to run and test the application.
This weekly roundup curates essential front‑end insights, covering technical debt, the 7GUIs benchmark, SvelteKit updates, GraphQL debates, Adobe XD integration, adapter design pattern deep‑dive, enterprise data‑visualisation challenges, CodeSandbox tricks, quirky JavaScript quirks, open‑source tools, CSS Houdini breakthroughs, and a host of other cutting‑edge resources for developers.
This article explores the design and implementation of the Yueying front‑end monitoring SDK, covering its purpose, core design principles, module architecture, reference formats, semantic versioning, key interfaces, testing strategy, and user‑experience enhancements such as quick integration and dynamic sampling.
This article provides a detailed comparison of the three major frontend frameworks—React, Angular, and Vue—covering their design principles, strengths, weaknesses, performance benchmarks, popularity, learning curves, and suitability for different project requirements.
Tencent’s Lianlian IoT mini‑program unifies device classification, a six‑stage secure lifecycle, Wi‑Fi and Bluetooth provisioning, low‑code control panels, and open‑source SDKs into an end‑to‑end platform that accelerates rapid product launch and cross‑platform front‑end development for smart‑home and enterprise IoT solutions.
This article explores recent frontend advancements, including Next.js 10’s new features, practical CLS performance improvements, Bezier curve generation in Swift, TiDB’s HTAP capabilities, AI‑driven smart slicing, and a quick guide to using Framer Motion for effortless animations.
This article presents a curated collection of 24 practical ES6 code snippets that address common front‑end challenges such as DOM manipulation, event handling, network requests, timing utilities, and file system operations, providing ready‑to‑use solutions for developers.
This article explains how React can serve as a complete state‑management solution by using hooks, lifting state, component composition, the Context API, and optional libraries, while also covering performance tips, server‑cached versus UI state, and when to adopt external tools.
This article explores the AVIF image format—derived from AV1 video—comparing its lossy and lossless compression performance against JPEG, WebP, and PNG across various test images, discussing acceptable quality thresholds, encoding/decoding times, tooling, and practical recommendations for web developers.
This article explains why front‑end intelligentization is needed, how AI and machine‑learning techniques are applied to design‑to‑code workflows, and the technical, operational, and cultural upgrades required to boost developer productivity and deliver business value in modern web projects.
This article chronicles the author’s journey from a childhood fascination with computers to becoming a senior front‑end engineer at Alibaba, sharing technical insights on performance optimization, architecture, and team leadership while offering practical advice for developers navigating career growth.
This article explains what an SDK is, outlines key design principles such as minimalism, stability, and extensibility, and walks through the practical implementation of Alibaba’s Yueying front‑end monitoring SDK, covering architecture, module division, versioning, core interfaces, testing, and deployment options.
This article provides CTOs and project managers with a comprehensive comparison of React and Vue, covering factors such as code quality, type checking, modularity, learning curve, developer friendliness, testing, server‑side rendering, performance, scalability, application size, and practical use‑case recommendations.
The talk outlines why enterprise data visualization is essential for extracting value from massive, multi‑dimensional data, describes design and development challenges, presents AntV's comprehensive frontend visualization solutions, and predicts future trends such as intelligent, democratized, and decision‑integrated visual analytics.
In this talk, Lin Wai, senior experience design expert at Ant Group, explains how Ant Design 4.0 is built on the fundamental assumption that every person seeks happy work, explores the challenges of mismatched skill‑challenge balance in the digital age, and introduces the ETCG 2.0 methodology that makes design more natural, certain, and growth‑oriented.
This article analyzes the challenges of front‑end event tracking, compares existing manual, visual, and full‑tracking solutions, and presents a declarative component architecture with a buffered queue that decouples tracking logic from business code while handling click and exposure events efficiently in React.
This article introduces seven open‑source projects that demonstrate frontend‑backend separation using technologies such as Vue, Angular, React, SpringBoot, and SpringCloud, providing practical examples and resources for developers to deepen their full‑stack development skills.
This article explains how to design and implement a bespoke performance testing platform for web pages using Lighthouse, Puppeteer, and Node.js, covering architecture, data collection, hook functions, gatherer modules, scoring logic, and automated weekly reporting.
From the early days of static web pages to today's data‑driven, AI‑enhanced interfaces, this article explores how the big‑data boom and artificial‑intelligence advances since 2010 have transformed front‑end technologies, driving innovations in data visualization, web‑based software, and diverse user interactions.
This article examines the motivation, architecture, rendering principles, code adaptations, performance testing, and practical challenges of converting Flutter mobile code to Flutter for Web, presenting a case study from JD.com and offering recommendations for future cross‑platform development.
The 15th D2 Frontend Technology Forum, an Alibaba‑hosted online conference on Youku (Dec 19‑20 2020), offers early‑bird (30 CNY) and regular (98 CNY) tickets and features five tracks—including language frameworks, cross‑end tech, serverless Node.js, security, and diversified applications—showcasing ECMAScript, RxJS, Flutter, IoT, game‑level interaction and multimedia in a non‑profit, coffee‑price experience.
This article introduces MathML, explains how to embed mathematical notation in HTML5, and provides step‑by‑step code examples—including simple equations, character usage, multiplication constructs, and matrix representation—along with browser compatibility tips and visual results.
This guide explains how to install Axios, set up a reusable HTTP module in a Vue project, configure environment‑specific base URLs, define request timeouts and headers, and implement request and response interceptors along with simple get/post wrapper functions.
The article explains how to improve front‑end performance by using the browser hints preload and prefetch—preload for critical resources like fonts, prefetch for resources needed later—showing practical examples, webpack automation, best‑practice guidelines, and common pitfalls to avoid.
This article introduces the essential frontend technology stack—including React, Webpack, Ant Design, DVA, ES6, and Axios—explains the typical project directory layout, walks through source code organization, and provides practical steps and tips for building merchant‑side applications with a React‑DVA architecture.
To eliminate Xianyu’s Weex pages’ long white-screen delays, the team identified large bundles, slow first-screen data requests, and heavy UI as root causes and applied offline bundle caching, data prefetching, progressive and on-demand rendering, and bundle slimming, cutting first-screen load to under two seconds on low-end phones and achieving near-instant display on higher-end devices.
By incrementally routing module‑specific requests through Nginx to a new static front‑end while keeping backward‑compatible APIs, the Vivo Mall team transformed a monolithic 2015 platform into a fully separated architecture, achieving over tenfold front‑end release speed, doubled development efficiency, and a solid foundation for multi‑channel expansion.
This article curates the ten most popular free open‑source admin dashboard UI frameworks, providing GitHub star counts, repository links, brief feature descriptions, and preview images to help developers quickly choose a suitable backend control panel for their web projects.
In the era of big data and GDPR, front‑end developers must protect personal information beyond HTTPS by using a hybrid AES‑RSA encryption scheme, and this article explains the threats, compares symmetric, asymmetric and hash algorithms, and provides full client‑side and Node.js server implementations with code examples.
This article explains what a design system is, outlines its key advantages such as unified design, reduced design debt, and improved efficiency, describes its core components like visual language and component libraries, and showcases best‑practice examples from Google, Ant Design, and Shopify.
This article examines the evolution of interface design tools, compares Photoshop, Sketch, and Figma, and explains how Figma’s browser‑based, cloud‑native collaboration, component system, and community resources are reshaping UI design workflows for individuals and teams.
This article explains why modern front‑end applications suffer from performance problems such as oversized bundles and costly code execution, shows how to pinpoint the root causes using Chrome DevTools and profiling tools, and provides practical optimization techniques—including webpack configuration, tree‑shaking, immutable data handling, and memoization—to dramatically improve load and render speed.
This article combines a motivational start‑of‑school message with a comprehensive tutorial on building animated donut‑style charts using HTML5 canvas, covering data preparation, ring and ellipse drawing, legend creation, and smooth animation via requestAnimationFrame.
This article surveys the most influential web development technologies for 2020, covering emerging standards such as WebAssembly, progressive web apps, AI integration, blockchain, and leading frameworks like PHP, Symfony, Express.js, Django, and Angular, while highlighting market statistics, use cases, and future growth prospects.
This article explains the RFC that adds React Native support to Taro 3, covering the motivation, design summary, compilation‑bundle overhaul, runtime adaptations, API and component extensions, app integration options, known limitations, and migration steps for developers.
This article explains the background, challenges, and step‑by‑step process of privately deploying and extending CodeSandbox—including building a custom online IDE, configuring a private npm registry, modifying the packager service, adding screenshot and style‑injection features, and integrating with Bit for component sharing.
Angular 10.1.0‑next.5 has been released, bringing a set of bug fixes, new capabilities such as compiler‑CLI resource dependency tracking and language‑service enhancements, as well as breaking changes that tighten type safety in @angular/forms directives and AbstractControl.parent handling.
This article provides a comprehensive walkthrough of the Vue‑Router source code, explaining its initialization, matcher creation, routing modes, navigation methods, router‑view and router‑link components, and demonstrates how to implement dynamic route permission control using Vuex and global navigation guards.
