HTML‑in‑Canvas is a WICG proposal that lets browsers render real DOM output directly onto a canvas, preserving layout, styling and accessibility while enabling GPU‑accelerated rendering, offering a declarative alternative to manual canvas drawing and opening new possibilities for UI, data‑visualization, game and WebGL interfaces.
Chrome’s new WebMCP API lets AI agents bypass visual UI simulation and interact directly with web pages via a single navigator.modelContext call, eliminating fragile screen‑scraping tricks and enabling front‑end developers to expose structured tools to AI using simple declarative or imperative JavaScript APIs.
This article introduces vue-office, a Vue 3 component library that enables pure front‑end preview of Word, Excel, PDF and PPT files without any server‑side conversion, and walks through its advantages, installation, and detailed usage examples including data sources, file upload and document switching.
A developer turned the browser’s URL bar into a 40×4 pixel playground, using Unicode Braille characters and less than 400 lines of JavaScript to create a fully playable Snake game that updates the address bar in real time.
The article explains how WebAssembly, now in its 3.0 release, adds a fourth language to front‑end development by offering multi‑language support, near‑native performance, and new features such as 64‑bit memory, garbage collection, and tighter JavaScript integration for compute‑intensive web applications.
This article details the technical practice and core thinking behind Ant Financial’s front‑end team Multi‑Agent platform “Tiangong Wànxiàng”, covering its evolution from AutoGPT to Manus, the LangGraph foundation, ReAct agents, context engineering, architecture design, and real‑world front‑end code generation capabilities.
This article examines five practical token‑renewal approaches—brute‑force redirect, front‑end refresh request, server‑side refresh, Redis‑tracked expiration, and a dual‑token mechanism—highlighting their workflows, advantages, and drawbacks to help developers choose the most user‑friendly solution.
This step‑by‑step tutorial walks front‑end developers through the entire process of integrating WeChat QR‑code login, covering prerequisite checklist, platform setup, core JavaScript SDK usage, callback handling, common pitfalls, security hardening, performance tweaks, debugging tricks, and a learning roadmap.
While TypeScript guarantees compile-time type safety, it cannot validate runtime data such as API responses or form inputs, so developers add extra checks; Zod solves this by offering a TypeScript-first schema library that performs runtime validation, infers types, reduces duplication, and integrates seamlessly with modern frameworks.
The 2024 front‑end review highlights Python eclipsing JavaScript on GitHub, TypeScript’s steady rise, ECMAScript 2024 utilities, major framework releases (React 19, Vue 3.5, Svelte 5, Angular 19), a surge of Rust‑based tooling, new JavaScript runtimes, Chrome’s anchor CSS, AI‑driven development tools, cross‑platform advances, WebAssembly’s component model, and forecasts 2025’s AI‑enhanced productivity, deeper TypeScript adoption, Rust tooling dominance, and unified multi‑device strategies.
The article proposes an AI‑driven front‑end efficiency framework for B2B operation platforms that introduces a JSON‑based protocol layer, SDK, and reusable component library, allowing AI‑generated UI schemas to replace manual coding, dramatically cut development effort, and enable zero‑code, perpetual reuse of UI, logic, and data.
This article explains JavaScript objects, various ways to create them, the role of prototypes and the hidden __proto__ property, and how the prototype chain enables inheritance, illustrated with clear code examples and diagrams for front‑end developers.
This article explains the mechanism of HTTP API streaming for large language models and shows step‑by‑step how front‑end developers can use the Fetch API, readable streams, and incremental UI updates to deliver real‑time, progressive results while handling errors and connection interruptions.
By unifying the live‑room player with a same‑layer rendering component, exposing real‑time data through a communication layer, and using a pool‑based multi‑instance architecture that adapts to tablets and foldable screens, developers can embed native‑like immersive live rooms directly into H5 pages, simplifying integration and enabling future AI‑driven features.
Chrome 129’s new scheduler.yield() lets developers pause long‑running JavaScript loops without the 4 ms minimum delay or queue‑end placement of setTimeout(), cutting execution time from ~17 s to ~5.6 s while keeping the page responsive and preserving task priority.
The article details progressive front‑end watermark schemes—from a basic canvas overlay to mutation‑observer‑protected, hide‑ and cover‑resistant, and low‑opacity dark watermarks—and explains how adaptive tone handling, contrast tuning, region cropping, and a hybrid OCR pipeline (internal service with tesseract.js fallback) ensure robust, invisible data protection and accurate screenshot analysis.
This article recounts the author’s progression from a fresh graduate to a front‑end technology specialist at JD, detailing three growth phases—exploration, steady advancement, and breakthrough contributions—while sharing practical advice, project experiences, and insights on AIGC, code quality, and team leadership.
By adding the @umijs/plugin-rspack to UmiJS projects and switching build scripts to rspack-dev and rspack-build, the team replaced Webpack with the Rust-based Rspack compiler, achieving over a two-fold reduction in compilation time—from 150 seconds to around 20 seconds—while preserving compatibility with existing plugins and Module Federation setups.
This tutorial shows how front‑end developers can use the Dora SSR game engine’s TSX support to create a simple Angry‑Birds‑like game in fewer than 100 lines of code, covering scene setup, physics, UI components, touch controls, scoring logic, and cross‑platform deployment.
The 2023 NetEase Cloud Music Annual Listening Report showcases a front‑end animation pipeline where the motion designer codes directly in React, using CSSTransition for page fades, CSS keyframes for text and particle effects, SVG masks for data visualisation, 3D perspective tricks, and extensive device testing to balance visual richness with performance.
This article introduces the concept of streams, explains the Web Streams API and its ReadableStream component, details constructors, methods, queuing strategies, back‑pressure handling, BYOB and byte streams, and provides practical code examples and usage scenarios for modern web development.
In this interview, veteran front‑end engineer Winter shares his journey, explains the true scope of front‑end work, discusses the engineering challenges of large‑scale products, outlines the programmer career ladder, and offers candid thoughts on team trust, work culture, and personal planning.
React 16 feels smoother than React 15 because its new Fiber architecture breaks state updates into small, priority‑aware units that the Scheduler runs asynchronously, allowing high‑priority user input to render first while lower‑priority work is paused and resumed, eliminating the lag seen in full‑tree re‑renders of React 15.
Leveraging AI tools such as ChatGPT provides instant feedback, personalized learning paths, flexible timing, and up‑to‑date resources, enabling beginners to quickly grasp HTML, CSS, and JavaScript, practice through project‑based exercises, improve collaboration skills, and continuously refresh their front‑end development expertise.
The project implements a cross‑platform driver authentication video capture module by using WebRTC to access rear‑facing cameras, RecordRTC to record a five‑second clip with custom constraints, and uploading the resulting Blob to Alibaba Cloud OSS for OCR, ensuring consistent functionality across native apps, mini‑programs, and external H5 pages.
This article introduces TensorFlow.js, explains its origin and core features, and provides step‑by‑step instructions for using it in browsers, Node.js, and WeChat mini‑programs, including package installation, sample code, and practical tips for front‑end developers.
From jQuery’s imperative DOM hacks to React’s virtual‑DOM abstraction and now to compile‑time, no‑virtual‑DOM frameworks like Svelte and Solid, the front‑end has shifted toward declarative UI, fine‑grained reactivity, and performance‑focused optimizations, while virtual‑DOM remains widely used but increasingly challenged.
The article shows how to create a smooth FAQ expand‑collapse effect in Vue by storing each item’s visibility in a show flag, wrapping the answer in a transition component, and using JavaScript hooks to set explicit heights and overflow while rotating the arrow icon for visual feedback.
This article introduces htmx, a lightweight library that adds Ajax, CSS transitions, WebSockets, and server‑sent events to plain HTML through simple hx‑ attributes, enabling features like lazy loading, form validation, and view transitions without writing JavaScript, and works with any back‑end.
This article explains how to create gradient iconfonts by using CSS background‑clip:text (with transparent text) and optionally mix‑blend-mode:darken, demonstrates a reusable React component that applies gradient backgrounds via style props, and shows graceful degradation with @supports queries for browsers lacking background‑clip support.
Quarkc, the HelloBike‑developed framework‑agnostic web component toolkit, builds native Web Components without hidden magic, letting developers write once and run anywhere across Vue, React, Svelte, Angular and plain HTML, while offering a tiny bundle size, high performance and simple npm‑based setup.
CSS cascade layers, introduced via the @layer rule, let developers organize style origins into named, ordered groups—such as resets, libraries, and custom overrides—so they can control precedence without increasing specificity, improve readability, and avoid conflicts, with full support in modern browsers.
This article presents a step‑by‑step guide to building a real‑time data‑visualization dashboard using Echarts on the front end and Java on the back end, covering design mockups, requirement analysis, system architecture, development environment setup, code structure, and deployment instructions.
Over nine years at Taobao, a front‑end engineer recounts his journey from junior developer to team lead, detailing rapid feature delivery, data‑driven performance gains, cross‑platform innovations, and leadership lessons that shaped the platform’s e‑commerce experience and his own growth.
This article analyzes the popularity, download trends, developer preferences, and strengths and weaknesses of Angular, React, and Vue using StackOverflow surveys, NPM download statistics, and State‑of‑JavaScript reports, concluding that React leads in 2021 with Vue and Angular following behind.
In 2022 Taobao’s front‑end team was reorganized into business‑line groups plus a central “big front‑end” unit, establishing a three‑layer map—Engineering, R&D, Application—and delivering platforms such as O2, JSTracker, PHA, Weex 2.0, ICE, Midway, low‑code builders, and consumer and back‑office apps, thereby unifying tooling, strengthening the technical ecosystem, and ensuring continuous engineering excellence.
The article traces JavaScript promises from their 1988 origins and early libraries through the Promise/A+ spec and ES6 implementation, explains core rules, demonstrates practical rewrites using chaining, async/await, error handling, cancellation patterns, and parallel execution with Promise.all, offering guidance for robust asynchronous code.
This article explores the unique challenges of front‑end operations, outlines typical build failures caused by dependency, environment, and permission mismatches, and proposes Docker‑based DevOps solutions to streamline development, testing, and production workflows for full‑stack teams.
The article explains how to enforce a custom length limit in JavaScript input fields that counts English letters and numbers as half a unit, Chinese characters as one unit, and each emoji as one unit, using Unicode code‑point detection, regex extraction, and automatic truncation to prevent overflow.
The guide outlines a three‑stage roadmap for front‑end engineers—mastering deep JavaScript and ecosystem knowledge, leading independent projects and teams, then discovering a personal mission such as entrepreneurship or career change—while stressing continuous learning, mentorship, public sharing, and feedback within evolving technologies like Web3.
Moyu, Xianyu’s dedicated front‑end R&D framework launched in 2022, unifies template and configuration management, introduces a hybrid XTPL/JS/CSS/Schema development model, and adds a lightweight data gateway that streamlines releases, boosts first‑screen performance, and supports scalable scenarios such as product recommendations, with plans for mini‑programs and broader platform integration.
This article compares the front‑end screenshot libraries dom‑to‑image and html2canvas, explains their APIs and underlying SVG‑or‑canvas rendering pipelines, walks through typical usage code, highlights common pitfalls such as cross‑origin images and scrolling, and offers practical configuration and debugging tips for developers.
ESModules load by fetching and parsing files to build a static dependency graph, then instantiate bindings before evaluating each module depth‑first, which ensures deterministic execution, enables concurrent loading and TreeShaking, and explains why circular imports can cause temporal‑dead‑zone ReferenceErrors when exported variables are accessed before initialization.
Through a playful narrative featuring SpongeBob and a rival boss, this article explains the high‑frequency front‑end interview topic of the Observer pattern, illustrates its core concepts, shows one‑to‑many relationships, and provides a complete JavaScript implementation with clear code examples.
The article explains Web Components and their three core technologies—Template, Shadow DOM for CSS isolation, and Custom Elements—demonstrates building a dynamic HTML5 video component with lifecycle callbacks, and discusses use cases such as component libraries, cross‑platform development, micro‑frontends, and the feature‑rich Quark library.
This guide shows how to generate smooth, high‑quality curves from a polyline in pure JavaScript by computing quadratic and cubic Bézier points, deriving control points via angle‑bisector geometry, assembling the segments, and rendering and animating the result on an HTML5 canvas without external libraries.
This article explains why front‑end technical design documents are essential, illustrates common pitfalls through a developer story, outlines the differences between front‑end and back‑end design, and provides a step‑by‑step template—including chapters, diagrams, and tool recommendations—to help teams produce clear, maintainable specifications.
This article traces the evolution of routing—from early server‑side page serving through Ajax‑enabled SPAs and modern front‑end frameworks—to the emerging “big front‑end” that unifies navigation across Web, Android, iOS and Flutter, outlining core goals of URL‑page mapping and a centralized routing management system.
The Front‑End Material Center consolidates UI elements and business‑logic attributes into reusable “materials,” providing a unified lifecycle of creation, production (via code or visual builder), and publishing, so front‑end engineers, back‑end developers, and business users can collaboratively build applications with low‑code or no‑code approaches.
The article explains how integrating Source Maps—generated by modern bundlers and automatically uploaded via a Webpack plugin—into iQIYI Hawkeye’s front‑end exception monitoring restores original file names and line numbers for minified production JavaScript errors, enabling rapid debugging despite bundle‑size and versioning challenges.
This comprehensive guide walks you through installing the WeChat Developer Tool, creating a Mini Program project, understanding its file structure, using WXML/WXSS for layout and styling, handling data binding, templates, imports, custom scripts, configuration files, sitemap settings, and event binding, all illustrated with step‑by‑step screenshots and code examples.
This article provides a practical, experience‑based guide to Chrome DevTools for front‑end engineers, illustrating common features and real‑world scenarios to help developers efficiently debug, profile, and optimize web applications, overcoming the limitations of generic feature‑only tutorials.
Fish‑Redux 2.0 introduces the unified FlowAdapter, which combines static and dynamic adapters into a callback‑driven architecture that enables runtime component re‑ordering, server‑controlled A/B testing, and modular data handling, dramatically improving page flexibility, reducing code redundancy, and accelerating complex Xianyu business scenarios.
This article explains the concepts of SSR and CSR, introduces Serverless cloud functions, details the installation and configuration steps for deploying a Serverless‑based SSR application using Tencent Cloud, and shares practical tips, component choices, and billing considerations.
React Fiber rewrites React’s core algorithm by breaking the diff phase into small, interruptible fiber units, scheduling them during browser idle time with requestIdleCallback, using double‑buffered trees and effect lists to pause, resume, and efficiently commit DOM updates, thereby improving UI responsiveness in large applications.
By examining Flutter’s Dart‑based runtime, cross‑platform GUI framework, and productivity features such as hot‑reload, the article maps these technical strengths to core front‑end challenges—remote communication, state and UI management, and lifecycle handling—offering developers a structured perspective for strategic adoption and future innovation.
The article explores how Qixiu’s PC web client evolved gift‑animation formats—from Flash and APNG to a custom IXD and dual‑MP4 with alpha channel—optimizing file size, loading speed, and rendering performance via Canvas and WebGL, ultimately choosing the MP4 solution for quality, efficiency, and designer friendliness.
The article explains how React’s virtual‑DOM diff can become a performance bottleneck, reviews classic optimizations such as debouncing, PureComponent, and idle callbacks, then details how the Fiber architecture makes diffing interruptible and prioritized and how the same reconciler can be leveraged to build custom cross‑platform renderers.
This article details how Alibaba’s Taobao front‑end team leveraged Node.js Serverless on Alibaba Cloud to handle up to 50,000 QPS during the 2020 Double 11 event, improving development efficiency, scaling capabilities, and operational reliability through the Midway Serverless framework and related tooling.
This curated collection highlights recent essential reads for front‑end developers, covering the deprecation of LibSass, using service workers to turn single‑page apps into polyfills, career growth insights, comprehensive HTTP knowledge, overcoming technical and business bottlenecks, performance optimization tips, Node.js sandbox security, Facebook’s Recoil state‑management library, and the opportunities and challenges of enterprise‑level data visualization.
This comprehensive guide walks front‑end developers through installing Vim, mastering core editing commands, configuring a powerful .vimrc, and integrating essential plugins for file navigation, code completion, syntax checking, version control, and modern web technologies like HTML5, CSS3, JavaScript, React and Prettier.
The article recounts five years of Youku’s OTT front‑end evolution, detailing the challenges of remote‑control navigation, the design of a component‑tree and focus‑engine architecture, and the progressive shift from raw source development through templating to a visual‑building platform that boosted efficiency, quality, and user engagement.
This article examines Alibaba Entertainment's three‑stage evolution of OTT front‑end technology—from early WebView implementations through a custom Blitz engine to the current Weex (RAX) solution—detailing implementation steps, performance‑boosting techniques, and measurable results that cut page load times by over 50%.
This guide traces ESLint’s evolution from early lint tools, shows how to install and configure it, run auto‑fixes, integrate with editors, enforce quality via Husky, lint‑staged and commit‑lint, and combine these practices into a defensive moat that keeps repositories clean and consistent.
WeChat Mini Programs now support sharing to Moments via a new single‑page mode that shows a fixed navigation bar and bottom bar, imposes restrictions such as no login or navigation, requires setting navigationBarFit, and can be handled by detecting scene 1154 and using conditional logic, dedicated components, or an ExtendPage helper to adapt page behavior.
To accurately benchmark and reduce end-to-end latency on large live-streaming platforms, this article details practical measurement frameworks for both HTTP-FLV—using custom SEI timestamps and cloud-synced clocks—and WebRTC—leveraging RTCPeerConnection stats to dissect uplink, server, jitter, decoding, and render delays.
This article walks through implementing an avatar upload feature in a front‑end/back‑end separated project using Vue with ElementUI, SpringBoot, and MySQL, covering configuration, image handling, database storage, and front‑end display, and analyzes the RuoYi source code with illustrative screenshots.
This article explains the concept and benefits of CSS sprites, analyzes their drawbacks for web performance and security, and provides a step‑by‑step Python‑based method—including code snippets—to extract and sum numbers hidden behind sprite images used as an anti‑scraping measure.
The article recaps Alibaba Cloud’s five‑day Vision AI training camp, detailing the core technologies, two hands‑on projects (a smart photo album and an ID‑card OCR system), student showcase code snippets, personal reflections, and the announcement of the next session.
This article explores how Serverless computing reshapes front‑end development by tracing the evolution of front‑end architectures, introducing Serverless concepts and services, presenting practical frameworks, CLI tools, and code examples, and offering best‑practice guidance on testing, performance optimization, and deployment patterns for modern web and mini‑program applications.
The article presents a pure front‑end Complex Event Processing framework that captures user actions, uses an NFA‑based engine to evaluate dynamic strategies, synchronizes data across pages via local storage, and delivers millisecond‑level real‑time user reach on Mini‑program, Web, and Weex platforms.
Leading Tencent front‑end experts analyze 2020 trends, from TypeScript adoption and mature frameworks to mini‑program explosion, cross‑platform runtimes, DevOps tooling, Serverless cloud services, and 5G‑driven performance shifts, outlining how these forces will reshape front‑end engineering.
The article describes a pipeline that automatically extracts a JSON‑like DSL representation of Alibaba’s 99‑promotion UI from rendered pages, cleanses CSS, converts transforms, renders the DSL to images, and combines it with dynamic ViewModel data to generate tens of thousands of high‑quality samples per module, raising recognition accuracy above 98%.
The article presents a scalable ESLint‑based framework for large front‑end teams that combines a layered, unified rule configuration, CI/CD and pre‑commit lint checks, a one‑click onboarding CLI, and automated metrics collection with dashboards, enabling consistent code standards across diverse projects while reducing maintenance overhead.
The article summarizes the 58 Group technical salon where Xiaomi AI experts and 58 front‑end architects discussed deep‑learning applications in graphics animation, model training and optimization techniques, and practical TensorFlow.js workflows for bringing AI capabilities to web front‑ends.
This article explains why web accessibility matters for all users, demonstrates how semantic HTML, proper use of labels, alt attributes, keyboard navigation, and WCAG 2.0 guidelines improve accessibility, and provides practical code examples and recommendations for creating inclusive front‑end web pages.
The article explains how to replace manual client‑specific logo and login‑background swaps with a custom Webpack merge‑less loader that injects client assets during build, offering low intrusiveness, strong extensibility, richer styling options, and a smoother developer experience compared to simple copy scripts.
This article traces the explosive rise of Ajax, the browser wars that drove compatibility hacks, the myriad challenges front‑end engineers face today, and how modularization, bundling, automation, and Docker have transformed web development into a highly engineered, scalable practice.
The article explains the Virtual DOM as a lightweight JavaScript object with tag, props, and children, shows how JSX compiles to VD using a custom pragma, provides helper functions to create real DOM from VD, and outlines how batching updates reduces reflows, previewing a future diff algorithm.
ui‑automation, developed by Alibaba’s Xianyu team, automatically converts Sketch files or PNG images into clean, maintainable UI code for platforms such as Flutter or Weex by extracting visual information, building a hierarchical DSL, and applying template generation, delivering senior‑engineer‑level quality while overcoming the maintainability limits of earlier scanning‑based approaches.
Chen Yang explains that WeChat Mini Games are H5 games running inside Mini Programs, detailing HTML5 evolution, development stacks, WebAssembly, engine options like Laya and Cocos, front‑end tooling, the native rendering and adapter layer, and their marketing value in a rapidly expanding multi‑billion‑yuan market.
The author, a senior front‑end engineer, shares insights from ArchSummit 2017 Beijing, covering Google's presentation on Mobile Web and Progressive Web Apps in China, Baidu's discussion on front‑end techniques that propel product development, and the evolving landscape of web versus native applications.
Meituan’s Scan‑to‑Pay H5 app uses ThunderJS and a dedicated Build Service to deliver character‑level incremental JavaScript updates, switching to Myers’ algorithm, isolating computation in a Mixer service, caching results, and adding timeout recovery, which cut data transfer up to 99%, reduced 90th‑percentile latency from 5.8 s to 90 ms, and raised success rates above 99%.
KO is a Webpack‑based scaffolding tool that offers out‑of‑the‑box multi‑page support, optional Vue single‑file components, resource chunking for first‑screen optimization, and SFTP deployment, with detailed installation steps, project structure, component creation, and build commands for rapid front‑end development.
This guide explains why a concise, highlight‑focused resume is essential for front‑end engineers, outlines the five key sections to include, offers practical tips for tailoring each version to specific job postings, and shares best practices for formatting, presentation, and effective delivery channels.
LsLoader is a middleware that caches individual JavaScript modules in browser localStorage and combines updates via an online combo service, enabling build‑tool‑agnostic, fine‑grained loading that cuts page load times by up to 30 % and saves hundreds of gigabytes of bandwidth in production.
This article shares a practical self‑study roadmap for front‑end development, outlining four progressive steps with recommended books, timelines, key concepts, and useful online resources to help beginners become competent front‑end engineers.
Lego is a component-based front-end page assembly platform at Meituan, enabling rapid low-code page building via drag‑drop components, with an Assembly Factory UI, developer SDKs, event‑based component communication, and a rendering engine that outputs HTML/FreeMarker, reducing development time and standardizing UI across projects.
The article explains how WeChat Mini Programs have transformed Chinese social and business ecosystems, outlines why developers should care, compares product logic with apps and H5, and reviews several cloud‑based development solutions—including Tencent Cloud, LeanCloud, and third‑party tools—providing practical guidance for rapid demo creation.
This article outlines a comprehensive set of front‑end optimization strategies—including resource merging, lazy loading, DNS prefetch, CSS/JS best practices, DOM rendering improvements, and image compression—to enhance performance on mobile networks such as 2G/3G/4G.
This article outlines a comprehensive approach for front‑end developers to achieve career growth by balancing ability and knowledge, offering practical steps to build a personal knowledge system, improve programming, architecture, and engineering skills, and adopt systematic training with classic textbooks.
The discussion explores various perspectives on front‑back end separation, covering definitions, benefits, architectural patterns, technology choices like Node.js, Vue, Angular, and practical considerations such as API design, performance, and deployment strategies.
A front‑end engineer shares practical insights on resume screening, interview tactics, and the core skills—especially JavaScript and CSS—that distinguish strong candidates, while highlighting the importance of personality, experience, vision, and fundamentals in hiring.
The article traces HTML5’s evolution from its 1999 HTML4 roots through the 2007 WHATWG revival and 2014 W3C recommendation, highlighting how Apple, Google, and early hybrid frameworks spurred mobile adoption despite initial hardware API limits, ultimately enabling richer “Super App + WebApp” experiences as browsers and devices improved.
The article outlines front‑end web security tactics—blocking all user‑supplied external links, sanitizing rich‑text to prevent XSS and iframe abuse, nullifying window.opener to stop phishing redirects—while recommending CSP, whitelist CSS, sandboxed iframes, and click‑through confirmations as mitigations.
