An in‑depth comparison of Less and SCSS explores their syntax, features, compilation environments, community support, and ideal use cases, providing code examples and guidance to help developers choose the most suitable CSS preprocessor for projects ranging from small sites to large‑scale applications.
This article explains how to quickly create simple web‑based and backend test tools for internal use by leveraging a large language model to generate annotated HTML, CSS, JavaScript and minimal Flask code, outlining prompt design, tool requirements, and deployment tips to boost testing efficiency.
WebCodecs, introduced in Chrome 94, provides direct, low‑latency access to hardware‑accelerated audio and video codecs, enabling fine‑grained encoding and decoding control, composable streaming pipelines, and high‑performance demos such as controllable decoding, watermarking, chroma‑key, and client‑side video processing, while still lacking container support and broad browser compatibility.
This article examines the evolution of Ant Design's theming—from the less‑based Antd 4.x approach to the CSS‑in‑JS design‑token system in Antd 5.x—analyzes the performance trade‑offs of CSS‑in‑JS, and presents the official antd‑style solution for high‑performance, extensible, and compatible style overrides.
This guide explains how to create a reusable EditTable component that extends ElementPlus's el-table, providing add, delete, edit, and save capabilities, custom editable columns, form validation, dynamic data loading, and a simple API for integrating editable tables into Vue applications.
This article presents a step‑by‑step tutorial for creating a Vue 3 project using Vite and TypeScript, covering project scaffolding, routing and permission control, reusable component and directive encapsulation, custom hooks, Axios configuration, build optimization techniques, and essential TypeScript concepts.
This article compares npm, pnpm, and yarn—detailing their features, installation commands, speed, disk usage, concurrency, and stability—to help developers choose the most suitable JavaScript package manager for their projects.
The upcoming retirement of Chrome Manifest V2 forces extensions to adopt Manifest V3, which requires Chrome Web Store review for updates, dramatically slowing ad‑blocker rule changes and giving YouTube an advantage, while other browsers remain unaffected.
This article explains the image‑processing workflow used for the Double Eleven event, covering format selection, CDN scaling and quality parameters, WebP conversion, practical URL suffix rules, and additional front‑end tips that together dramatically improve page load speed and user experience.
By using ArkTS’s declarative UI features—@Entry, @Component, @Preview, struct‑based custom components, property chaining, Column layout, and a ForEach loop—this tutorial builds a TodoList where each ToDoItem toggles an isComplete state on click, automatically updating the view through state‑driven rendering.
This article explains why TypeScript has become a must‑have tool for front‑end engineers, covering its static type system, improved code readability and maintainability, setup steps, configuration options, special types, generics, tooling integrations and best‑practice utilities to help developers write safer, more robust JavaScript applications.
This article explains the fundamentals of Vue's reactivity system, comparing Vue2's Object.defineProperty approach with Vue3's Proxy-based implementation, and walks through building a custom dependency-collection model with code examples, key-level tracking, and branch-aware cleanup to achieve precise reactive updates.
This article explains what a design system is, how design patterns and shared design language work together, the role of pattern libraries, effective design principles, and a practical case study, offering frontend developers a comprehensive guide to building cohesive, user‑focused interfaces.
This article provides backend developers with a concise Vue quick‑start guide, covering core features such as component‑based architecture, two‑way data binding, and virtual DOM, and demonstrates practical setup via CDN or Vue CLI, along with detailed examples of data handling, computed properties, watchers, methods, and common directives.
The article describes a frontend error‑message governance system that dynamically maps cryptic error codes to clear, context‑aware messages, lets operators configure responses by code, URL or endpoint, and improves user experience and system stability while enabling future features such as efficiency metrics, guides, and surveys.
ArkTS, Huawei’s evolution of JavaScript and TypeScript, provides a declarative UI framework with enhanced rendering, cross‑OS support, and streamlined state management through @State, @StorageLink, and AppStorage, enabling developers to build concise, high‑performance HarmonyOS applications using familiar JS/TS syntax.
This article explains JavaScript’s single‑threaded nature, the event loop mechanism, and the distinction between microtasks and macrotasks, illustrating their execution order with detailed code examples and step‑by‑step analysis to help developers grasp asynchronous behavior in front‑end development.
AV1, an open royalty‑free video codec finalized in 2018, delivers roughly 20 % lower bitrate than H.265 and is supported by major players and hardware, while Bilibili’s self‑developed BILIAV1 encoder, built from scratch, beats SVT‑AV1 by 15‑20 % bitrate at equal speed through advanced TRACE debugging, parallel processing and optimized algorithms, with future work targeting P2P and live‑streaming applications.
This article demonstrates how to build a real‑time equipment‑monitoring solution by using WebSocket for server‑to‑client push, with a SpringBoot backend that handles WebSocket connections and a Vue.js front‑end that visualizes device status and updates instantly when an abnormal event is reported.
This article explains how to choose between mapbox‑gl and its open‑source fork maplibre‑gl, obtain free Tianditu tile services, install the library, render 2.5D and vector tiles, customize styles, and overlay business data such as polygons, icons and labels for large‑screen web maps.
This article shares a developer’s three‑year journey on Alibaba Cloud’s platform, exploring the nature of technical debt, categorizing its causes, and illustrating how micro‑refactorings and configuration‑driven upgrades can steadily improve code quality, accelerate feature delivery, and align engineering with business goals.
The article traces ESLint’s evolution from a JSLint‑style checker to the dominant JavaScript linter, explains its long‑standing clash with the opinionated formatter Prettier over code‑style rules, and details the team’s decision in v8.53.0 to deprecate built‑in formatting rules in favor of external style plugins and market‑driven style guides.
This article explains the core components and rendering pipeline of modern browser engines, compares them with 3D graphics engines, and discusses the evolution of both browser and graphics technologies, providing a comprehensive overview for front‑end and graphics developers.
This article explains the fundamentals of client‑side rendering (CSR), server‑side rendering (SSR), and isomorphic rendering, demonstrates a minimal Vue 3 isomorphic example with code snippets, discusses dehydration/hydration, and shares practical tips and pitfalls for building production‑grade SSR applications.
This article analyses the LeaferJS canvas rendering engine, covering its lightweight node creation, core architecture, rendering pipeline, partial‑render optimization, and event‑picking mechanism, while providing code examples and performance insights for front‑end developers.
Explore essential React design patterns—including component composition, uncontrolled composite components, and render props—through detailed explanations, practical code examples, and best practices that improve maintainability, scalability, and developer experience in modern frontend development.
This article introduces nine practical Vue.js plugins—including Vuetify, Vue Router, Vuex, Vue-i18n, Vue-lazyload, Vue-awesome-swiper, Vue-chartjs, Vue-meta, and Vue-awesome—detailing their features and providing code examples to help front‑end developers improve efficiency and code elegance.
This article demonstrates how to split large files into 5 MB chunks, compute MD5 hashes, and accelerate processing with Web Workers by dynamically allocating threads based on the browser's hardware concurrency, achieving up to ten‑fold speed improvements.
This article explains webpack's hot module replacement mechanism and presents a series of practical optimizations—including disabling CompressionPlugin, selecting fast sourcemap types, configuring runtimeChunk as single, and using babel-plugin-dynamic-import-node—to reduce hot‑update build time from 12 seconds to around 1 second.
This article explains VisActor's animation system, detailing animation definition, trigger mechanisms, basic units like timeline and timeslice, effect configuration, global morphing via Bezier curves, and demonstrates one-to-one, one-to-many, and many-to-one shape transformations with code examples and demos.
This article guides developers through building a Vue.js component that supports dynamically adding, removing, and submitting multiple form entries, complete with step-by-step explanations and full code examples for handling form data on the client side.
The article explains microkernel (plugin) architecture principles, compares pipeline, onion, and event‑based plugin patterns, illustrates implementations in VS Code, Gulp, and Webpack, and presents an H5 cloud‑gaming SDK case study that refactors plugin management with classified responsibilities, JavaScript Proxies, and open‑closed design for extensibility.
This article introduces PyScript, explains how it compiles Python to WebAssembly for client‑side execution, and provides a complete tutorial—including setup, a Hello World example, and code explanations—to help developers embed Python seamlessly into HTML web pages.
Tango is an open-source, AST-driven low-code framework that reads existing frontend source code to provide a visual, bidirectional development experience, generating TypeScript with full type definitions, integrating seamlessly with current build pipelines, and supporting community-driven component contributions via its decoupled engine.
This article provides a comprehensive guide to learning Python Playwright for UI automation, covering installation, basic concepts, script writing, page interactions, element handling, multi-page management, browser contexts, waiting strategies, testing, and advanced practices.
This article demonstrates how to replace classic Redux boilerplate with Redux Toolkit in a React Todo List app by creating a slice, configuring the store, providing it via Provider, and using useSelector and useDispatch, highlighting the simplified setup and clearer state management for both React and React Native.
This article explains the principles, advantages, and classifications of microkernel (plugin) architecture, demonstrates three common plugin patterns—pipeline, onion, and event‑driven—with real‑world examples such as VS Code, Gulp, and webpack, and shares practical implementation steps and best practices for applying microkernel design in front‑end projects.
This article explains how directed acyclic graphs (DAGs) are applied in frontend development for resource loading optimization, component library construction, and task flow orchestration, and demonstrates a real-world implementation in Kuaishou's e‑commerce advertising engine with detailed architecture and code examples.
This article explains why keyboard shortcuts boost efficiency, reduce fatigue, and improve precision, classifies accelerators and access keys, outlines discoverable, conflict‑free, and memorable design principles, and provides a step‑by‑step workflow for creating a robust shortcut system across platforms.
This article introduces the fundamentals of Three.js, demonstrates how to encapsulate its core APIs into a Viewer class, and walks through building a Vue3-based 3D visualization project with scene, camera, lighting, model loading, skybox, mouse interaction, and helper utilities.
This article explains how conditional compilation can eliminate redundant code in cross‑platform mini‑program projects, describes the syntax and implementation details in MorJS, and shows practical examples for code‑level and file‑level compilation strategies that improve performance, maintainability, and product consistency.
This article describes how to engineer Java Velocity templates for local development within a Vue project by creating a Node‑based rendering engine and a custom Webpack loader, enabling hot‑reloading, mock data injection, and seamless integration of Velocity‑generated HTML into the Vue build pipeline.
This article explains what WebAssembly is, why it is needed for high‑performance web applications, how it works internally, which languages can target it, typical use cases, and provides practical examples of loading and using WebAssembly modules in browsers and Node.js.
This article describes a web‑based custom report export platform that lets users edit PPT templates with text, images, and charts, synchronizes changes via DVA state management, and generates fully populated PPTX reports in minutes using PptxGenJS and GraphQL data integration.
This article introduces Layui‑Vue, a Vue 3 desktop component library, showing how to install it via npm, configure it in main.ts, create a basic layout page with Layui components, and outlines recent bug fixes and enhancements.
The Chrome v115 release introduces Windows 11 Mica material design, an optional Refresh 2023 UI, automated reCAPTCHA verification, a switch to block third‑party login prompts, and a privacy sandbox powered by Topics API, with download links and configuration steps for each new feature.
This article walks through nine practical JavaScript patterns—including dynamic script loading, a lightweight template engine, data transformation with reduce, default parameters, one‑time execution, currying, singleton implementation, a simple CommonJS loader, and recursive property access—providing clear code examples for each.
This article explains how video platforms like Bilibili and Zhihu use HTTP Range requests to fetch specific byte segments of a video and the browser's SourceBuffer API to dynamically append those fragments, enabling instant seeking and smooth playback without downloading the entire file.
Tencent’s latest QQ desktop release unifies Windows, macOS, and Linux under a new NT architecture built on Electron, promising smoother performance and easier maintenance while sparking debate over memory consumption and the choice against Qt.
At Collision 2023, AI pioneer Geoffrey Hinton warned governments to curb AI before it outsmarts humanity, while industry leaders announced NTT DATA’s global generative AI lab, the release of Svelte 4, GitHub Enterprise Server 3.9, new Linux kernel versions, and Uno Platform’s VS Code extension for mobile debugging.
This article outlines the rationale, analysis, and detailed design proposals for upgrading B2B logistics map interaction standards, covering layout variations, element sizing, drill‑down mechanisms, and usability considerations to ensure consistent, efficient, and user‑friendly map experiences across diverse business scenarios.
This article explains what GPT is, how it is trained, its strengths and limitations, the various risks it poses, and provides practical guidance on safely adopting large language models like ChatGPT within development teams, including code‑level analysis examples.
This guide explains how to implement audio recording and playback in WeChat Mini Programs using the wx.getRecorderManager and wx.createInnerAudioContext APIs, and demonstrates storing the recorded files on a PHP server via wx.uploadFile and standard PHP file handling.
This article explains how to use a custom Babel plugin to automatically inject standardized logging statements into JavaScript code, addressing common debugging challenges such as sparse logs, inconsistent log formats, and missing error handling in async/await constructs.
This article explains how to write reusable frontend code by identifying and separating reusable parts such as UI components, API calls, business workflows, shared data, and utility functions, illustrating each with React and Vue examples, code snippets, and best‑practice recommendations.
This newsletter curates five high‑quality articles covering gateway system design, Google I/O front‑end highlights, the Raft consensus algorithm, Svelte internals, and advanced image‑loading techniques, inviting readers to share and discuss valuable industry insights.
This article explains what AIGC is, explores the current challenges of front‑end productivity, and shows how AI—especially ChatGPT—can be integrated into low‑code platforms through prompt engineering, enabling automatic page generation, layout editing, and component creation to dramatically boost development efficiency.
This article explains Redux middleware concepts, including its role in intercepting actions, implementation via applyMiddleware and compose, usage patterns, and how to create custom middleware, with code examples illustrating core principles in JavaScript applications.
The LuBan low‑code visual page‑building system enables rapid creation and maintenance of government procurement, exhibition hall, and merchant storefront websites by reusing components and empowering product and operations staff, significantly improving delivery efficiency.
NetEase Cloud Music’s front‑end team integrated large language models into their internal low‑code platform, creating an AI Copilot that supports smart page creation, editing, component configuration, code snippet generation, and Q&A, while detailing the underlying architecture, prompt engineering, and mixed‑mode development workflow.
This article explores the evolution of React’s APIs—from early mixins to higher‑order components, render props, and Hooks—examining the mental models, trade‑offs, and best practices that guide developers in building maintainable, performant front‑end applications.
This article describes a cross‑platform solution that enables a single set of Web component code to be shared across Native, React Native, and mini‑program environments by leveraging Web Components, environment‑aware builds, and bridge communication, thereby reducing development effort and accelerating release cycles.
This document introduces a lightweight Redis graphical management tool, outlines its Spring Boot backend and Vue frontend architecture, provides step‑by‑step installation instructions including Docker deployment, details recent feature enhancements such as multi‑user support and permission control, and mentions future plans for clustering and sentinel modes.
This article provides a detailed walkthrough of LocatorJS, covering how to clone the repository, set up the development environment, explore the Chrome extension code, and dissect the runtime implementation that leverages React fiber, SolidJS components, and Babel plugins to enable precise code‑to‑UI mapping.
This article walks through a real‑world banking UI case, showing how an interaction designer uses risk classification, the five‑question method, rapid sketching, iterative feedback, and structured reporting to uncover hidden requirements, resolve design conflicts, and ensure robust frontend delivery.
The QTest and QClient technical journey event on May 23, 2023 features multiple expert talks on performance testing, AI‑enhanced frontend engineering, Serverless visualisation, user‑behavior replay, and a new React framework, along with registration details, promotional items, and recruitment information.
This tutorial explains how to build a pure‑CSS3 image carousel with a clean, minimalist look by using Flexbox layout and @keyframes animation, providing complete HTML and CSS code that runs without any JavaScript, making it a handy reference for front‑end developers.
This article explores how McDonald’s standardized production model illustrates the concept of basic UI components, compares them with business‑level components, and shares a real‑world case study of designing advanced components to improve efficiency and consistency in frontend development.
Explore how long polling and Server‑Sent Events enable real‑time data exchange in front‑end development, comparing their principles, advantages, drawbacks, and providing practical JavaScript examples to help you choose the optimal technique for your application.
This interview chronicles Wang Zhiwei’s journey from a university student experimenting with GitHub to the CTO of AntV, highlighting how his 100‑line Echarts‑for‑React component launched a thriving open‑source career, shaped Ant Group’s culture, and offers practical advice for developers eager to contribute to open source.
rrweb is an open-source library that records web page DOM changes as JSON arrays instead of video streams, enabling precise replay of user interactions without compression artifacts or storage overhead.
Chrome separates browsing tasks into distinct browser, renderer, plugin, and GPU processes, parses HTML/CSS into DOM, layout, paint, and compositing trees, rasterizes tiles on a compositing thread, and uses the GPU process to display frames, enabling optimized, smooth animations such as danmaku while balancing memory usage and security.
This article explains the rapid rise of TypeScript in front‑end engineering, outlines its four key benefits, provides a five‑minute crash course on basic types, functions, arrays, interfaces, generics and Vue integration, and offers a step‑by‑step guide for converting existing JavaScript projects to TypeScript while inviting developers to join the TinyVue open‑source community.
MorJS is an open‑source, extensible framework that lets developers write a single mini‑program using a native DSL and compile it into deployable artifacts for multiple platforms—including WeChat, Alipay, Baidu, ByteDance, DingTalk, Kuaishou, QQ, Taobao, and H5—while offering plugins, form conversion, and H5 integration.
This article provides an in-depth exploration of ZRender, a lightweight 2D graphics rendering engine, and its relationship with ECharts, covering installation, basic usage, drawing shapes, interactive effects, and practical applications.
Discover the ten most frequent JavaScript mistakes—from implicit type coercion and var scoping issues to DOM inefficiencies, prototype modifications, global variables, missing semicolons, improper loops, NaN comparisons, eval usage, ignored error handling, and this binding pitfalls—and learn best practices to write safer, more maintainable code.
This guide walks through creating a Chrome extension using Vue and Vite, covering project initialization, multi‑entry Rollup configuration for background scripts, UI development with tdesign‑vue‑next, debugging hash‑related loading issues, and final deployment steps.
This article explains a WebAssembly‑based video frame extraction technique that replaces the traditional canvas approach by compiling FFmpeg to Wasm, running it in a Web Worker, and using a key‑frame‑first strategy to deliver high‑quality cover images with lower latency and a dramatically smaller bundle size.
The article describes how the author leveraged GPT‑4 to generate JavaScript bookmarklet code, troubleshoot errors, and ultimately build a Chrome extension named “image‑alt‑copier” that extracts and copies alt text from Midjourney images, illustrating low‑bar entry into web development.
This article introduces WebAssembly by tracing its evolution from asm.js and NaCl/PNaCl to the modern binary format, explains its performance, portability, and security benefits, and demonstrates a practical Mandelbrot rendering application built with AssemblyScript and JavaScript.
This article introduces WebAssembly, tracing its evolution from asm.js and NaCl to the modern binary format, outlines its performance, portability, and security benefits, and demonstrates its practical use by building a Mandelbrot set application with AssemblyScript and WebAssembly in the browser.
Learn how to effectively use React Context for state management, avoid props drilling, and eliminate redundant re‑renders by implementing a custom publish‑subscribe store, selector hooks, and performance optimizations similar to libraries like zustand.
TypeScript 5.0 arrives with over 50 new features—including decorators, enhanced ESM support, and expanded JSDoc—while optimizing memory, performance, and bundle size, making the language smaller, simpler, and faster for most developers.
The article explains plugin systems by likening them to interchangeable vacuum‑cleaner heads, outlines their benefits, defines core‑and‑plugin architecture, describes four plugin styles with code examples, and demonstrates building a minimal front‑end calculator plugin framework that emphasizes a stable core and extensible modules.
The article explains how Vue 3 improves upon Vue 2 by replacing Object.defineProperty with Proxy for reactivity, introducing a refined runtime renderer, a compiler that transforms templates into render functions, and new features such as the Composition API, script setup, and built‑in components like Fragment and Teleport.
Chrome 111, released a month after Chrome 110, brings a refined download bubble UI, a numeric download count, smoother page transition support via the View Transitions API, automatic revocation of unused site permissions, and a new Document Picture-in-Picture API for richer web experiences.
This article outlines Google's most impactful 2023 recommendations for improving Core Web Vitals—Largest Contentful Paint, Cumulative Layout Shift, First Input Delay, and Interaction to Next Paint—providing practical, high‑priority techniques such as ensuring LCP resources are discoverable, prioritized, and optimizing TTFB, CLS, and JavaScript performance.
This article examines how WebAssembly can accelerate canvas and WebGL animation engines by redesigning data structures, separating JS and WASM animation objects, optimizing the update cycle, handling mixed animations, and presenting benchmark results for thousands of animated nodes.
This article explains the fundamentals of ESLint, including its purpose, configuration files, AST-based analysis, the SourceCode abstraction, rule template creation, key functions, and the overall linting and fixing workflow, enabling developers to build custom linting plugins for consistent code style.
This article introduces the concept and motivation behind Webpack's Module Federation, explains host and remote roles, outlines practical use cases such as micro‑frontend architecture and resource sharing, and provides a step‑by‑step code walkthrough—including configuration, shared dependencies, and runtime loading—to help developers quickly adopt this decentralized module‑sharing technique.
The MicroApp V1.0.0‑rc release introduces a component‑based micro‑frontend solution with a custom WebComponent‑like architecture, a virtual routing system, a high‑performance sandbox that leverages caching and decoupling, extensive performance benchmarks, new configuration options, lifecycle listeners, and a practical JD marketing‑center case study.
This article introduces WebAssembly’s efficient, safe, open standards and LLVM‑based compilation pipeline, then guides Rust developers through installing tools, writing and binding simple functions, optimizing performance and bundle size, and explores tooling, runtimes, real‑world use cases, current limitations, and future extensions such as WASI, SIMD, and threads.
This article explains what Progressive Web Apps (PWAs) are, outlines their key characteristics such as cross‑device adaptability, fast loading, offline capability, security and installability, and discusses real‑world examples, Chinese market challenges, and the potential of PWA games.
The article explains how Excalidraw’s new component API replaces render props with a child‑component approach, introduces customizable MainMenu, Footer, and WelcomeScreen components, provides code examples, and discusses the benefits and limitations of this redesign for developers building custom whiteboard applications.
This article introduces a streamlined graduation project selection system supporting teachers, students, and administrators, detailing its backend and frontend architectures, core modules such as login, registration, topic selection, and management features, and explains how to obtain the full source code.
The article introduces a TypeScript dictionary factory that, using generics and `as const` assertions, converts a single source definition into multiple strongly‑typed representations (KV, VK, list, maps), eliminating duplication and keeping business dictionaries synchronized while providing full IntelliSense, albeit with some TypeScript‑only limitations.
This guide introduces uni-app—a Vue‑based framework that lets developers write a single codebase and deploy to iOS, Android, H5, and various mini‑programs—covers its key advantages, environment setup with HBuilder X or vue‑cli, project creation, platform‑specific building, Flex layout, and background‑image handling.
Facing memory leaks and high CPU load in a Canvas‑based avatar editor, the team switched to WebGL, leveraging GPU parallelism, off‑screen framebuffers, and blending techniques to dramatically reduce memory consumption and CPU usage while adding features like image layering and color blending.
This technical guide explores practical methods for measuring network performance in web applications, covering key metrics like ping, jitter, and throughput, while demonstrating how to implement real-time speed testing using browser APIs and JavaScript within a React environment.
This article explores how Rust’s safety, performance, and WebAssembly integration make it a compelling option for modern frontend development, highlighting industry insights, real‑world use cases, and the language’s growing popularity among developers.
