The 2020 China Open‑Source Annual Report highlights Taro’s rapid rise to the fourth‑ranked open‑source project, showcasing its cross‑platform capabilities, active community, industry collaborations, and extensive real‑world deployments that illustrate why it stands out among China’s top five projects.
This article examines Baidu's home‑grown MVVM framework San, tracing its origins, core features, size and performance benchmarks, ecosystem tools such as CLI and DevTools, and real‑world deployments across Baidu App, feed pages, and mini‑programs, highlighting why it became the unified front‑end solution.
2020’s State of JavaScript survey, covering 137 countries and nearly 24,000 developers, highlights which language features, browser APIs, frameworks, and tooling have gained traction or lagged behind, offering insights into current front‑end trends such as the rise of TypeScript, Svelte, esbuild, and the modest adoption of WebAssembly.
This article shares a frontend engineer’s perspective on thriving in business‑line projects, emphasizing mindset, all‑round skill development, cross‑disciplinary collaboration, problem‑solving, and continuous growth to turn perceived pressures into career advantages.
Bootstrap 4.6.0 has been released, introducing customClass support for tooltips and popovers, a new .navbar-nav-scroll class for mobile navigation, accessibility improvements, updated documentation built on Hugo, darker dropdown items, better form‑validation tooltip alignment, and fixed file‑input overflow issues.
This article walks through creating a fully CSS‑based star rating component using the HTML input type="range", exploring its shadow‑DOM structure, applying CSS masks, handling cross‑browser quirks, and providing complete code snippets for a flexible, lightweight solution.
iMove is an open‑source low‑code tool for front‑end developers that visualizes business logic as flowcharts, compiles them into executable JavaScript (or other languages), supports online and local builds, automatic npm dependency resolution, and instant node testing, dramatically reducing UI‑logic coupling and maintenance cost.
The article analyzes the State of JS 2020 data, showing how emerging JavaScript libraries, front‑end and back‑end frameworks, testing tools, bundlers and other utilities rank in usage and developer satisfaction, and highlights the rapid rise of TypeScript, Jest, React, Vue.js and newer tools such as esbuild and Snowpack.
This case study details the complete redesign of Meishi’s PC client—an internal communication platform for over 20,000 employees—covering background challenges, visual and interaction upgrades, information‑noise reduction, motion integration, and the creation of a unified design system to boost efficiency and brand perception.
An exclusive interview with a Pornhub front‑end engineer reveals how the adult‑industry pushes browser video limits, adopts new Web APIs like IntersectionObserver and Picture‑in‑Picture, and tackles performance, testing, and cross‑platform challenges to stay at the cutting edge of web development.
In this interview, Tencent Classroom’s front‑end lead Jay shares how his team built a systematic front‑end engineering efficiency framework, covering the evolution from basic build tools to full‑stack CI/CD, AI‑driven automation, and practical advice for new developers.
This article explains how Alibaba's MediaAI Studio enables real‑time gesture‑based festive effects, AI‑driven face accessories, and interactive live‑stream experiences on Taobao, detailing the workflow from design to deployment, the underlying media‑intelligence architecture, and future development plans.
The article introduces three single sign‑on mechanisms—stateless HTTP, session‑based, and login state—and compares three practical implementations: using a parent‑domain cookie, deploying an authentication centre, and sharing tokens via LocalStorage with iframe and postMessage, providing code examples and diagrams.
In this interview, Fred Wu, Tencent’s front‑end lead, shares his experiences with full‑stack development, offers advice for aspiring front‑end engineers, discusses his team’s recent full‑stack initiatives, and predicts upcoming trends such as Flutter, low‑code, and 5G‑driven audio‑video advancements.
In 2020 Qunar's front‑end team explored multi‑platform adaptation, low‑code marketing, UI automation, security enhancements, and framework upgrades, publishing a series of technical articles that detail their solutions, performance gains, and practical insights for developers across the organization.
This article demonstrates how to capture a Canvas animation as a video using the Media Streams API and MediaRecorder, providing step‑by‑step code examples, integration with ffmpeg‑wasm for audio, and discusses use cases such as online teaching and resource‑efficient playback.
In a 2020 interview, Javen from IMWeb discusses how the pandemic accelerated web audio/video, the rise of WebRTC, practical challenges for large‑scale online education, and future trends toward faster, cheaper, and smarter browser‑based real‑time media.
This article explains how npm flattens dependencies, compares npm, cnpm and yarn, outlines the evolution of package managers, details essential package.json fields, demonstrates using nrm, and provides a step‑by‑step guide to configure Webpack, create, build, and publish a custom npm package.
This talk explores a cost‑effective cross‑platform strategy that shares only business logic—using Dart, TypeScript‑to‑Dart transpilation, and a Hooks‑like abstraction—to achieve high performance on mobile and web while reducing coordination overhead.
After replacing its three‑year‑old Arm.js stack with a Vue.js + Node.js architecture, iQIYI’s smart‑cloud video platform tackled loading, rendering, and API bottlenecks by using CDN‑served library DLLs, refined Webpack splitChunks, lazy‑loaded components with skeleton screens, and rewrote the BFF in NestJS, cutting bundle size by two‑thirds, reducing first‑page load to 790 ms and halving core API latency.
From the rise and fall of Flash to modern front‑end video playback techniques, performance optimization strategies, AI recommendation fundamentals, CLI design best practices, and a glimpse into game development and algorithm analysis, this article surveys diverse cutting‑edge technologies shaping today’s software landscape.
This article chronicles the evolution of Taro IDE—from a cross‑platform mini‑program framework to an integrated development environment built on Electron and Theia—detailing its architecture, debugging tools, user‑feedback lessons, and the transition toward the Tide IDE framework for scalable frontend engineering.
This article explores the challenges of frontend availability, introduces chaos engineering concepts, and details Alibaba's practical approach to frontend fault injection—including static resource hijacking, a safe isolated environment, monitoring integration, and a real‑world drill that demonstrates how to measure and improve detection and response capabilities.
This comprehensive guide explores CSS history, its evolution through standards, core concepts like cascade, specificity, inheritance, formatting contexts, box model, modern layout techniques, best practices, tooling, and future trends, offering developers a deep understanding of styling the web.
This article explains how Lottie uses JSON exported from Adobe After Effects via the Bodymovin plugin to render vector animations on the web, detailing the export workflow, JSON structure, renderer initialization, layer processing, and the requestAnimationFrame‑driven playback loop with code examples.
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.
