This article explains how to create a reusable Vue component called PageTable that encapsulates Element UI table and pagination with built-in loading handling, data fetching via a parent-provided fetchData method, and slot-based column customization.
This article introduces ten widely used frontend authentication techniques—including HTTP Basic Auth, Session‑Cookie, Token, JWT, SSO, OAuth 2.0, QR‑code login, one‑click login, and more—explaining their scenarios, advantages, and security considerations.
The article describes how Baidu's commercial front‑end team introduced a data‑direct capability and BFF layer to streamline front‑end/back‑end cooperation, reduce environment‑maintenance overhead, enable parallel development, and improve overall delivery efficiency across multiple project phases.
This tutorial walks you through creating a production‑ready front‑end project from an empty directory using Webpack 5, React 18 and TypeScript, covering project structure, dependencies, Babel and TypeScript setup, resource handling, development environment, performance optimizations, and full configuration files.
This article introduces WebRTC fundamentals, explains how to enumerate audio/video devices, describes MediaStream and MediaStreamTrack concepts, demonstrates using getUserMedia for media capture with constraints, shows screen sharing via getDisplayMedia, and provides code examples for recording and downloading video streams using MediaRecorder.
This article explains core principles for designing composable React APIs, demonstrates how to decompose UI into stable, reusable parts, and walks through a complete implementation of a flexible Tabs component with context, render‑props, and testing strategies.
This comprehensive, step‑by‑step guide walks developers through Webpack’s core concepts, project setup, configuration files, development server with hot module replacement, essential loaders for CSS, images, Less, and Babel, plus optimization techniques such as JavaScript minification, CSS extraction, and output cleaning.
This article explains the common line‑height inconsistencies between UI design and front‑end implementation, introduces the open‑source Fin Line‑Height Fix plugin for Figma and Sketch, and provides step‑by‑step usage instructions plus code examples for iOS, Android, and React Native.
This article explains the inner workings of React DevTools, how it hooks into ReactDOM to access FiberNode structures and component data, and demonstrates a custom useDebugValueAnywhere implementation that bypasses the original hook's limitations for advanced debugging.
This article demonstrates how to create a real-time device inspection monitoring system using WebSocket, with a Vue front-end that visualizes device status and a SpringBoot back-end that pushes updates, covering project setup, code examples, configuration, and testing steps.
Baidu’s commercial front‑end team integrated an interface platform with a data‑direct capability—leveraging BFF layers, Redis‑based offline data injection, stub services, data grading, and fragment‑based batch editing—to enable true parallel front‑back end development, eliminate separate test environments, and cut average project delivery time by more than half across thousands of projects.
This tutorial explains how to create a functional analog clock using only HTML, CSS, and a small amount of JavaScript by leveraging CSS keyframe animations, animation‑delay (including negative values), and basic layout techniques such as border‑radius, box‑shadow, and absolute positioning.
This article explains how ByteDance measures website performance, introduces key front‑end performance metrics such as FP, FCP, LCP, TTI, TBT, FID, and MPFID, describes the APIs and code needed to collect them, and discusses how to evaluate and improve overall site performance using these indicators.
Alibaba's Big‑Taobao team describes how shifting data‑assembly logic to front‑end Function‑as‑a‑Service transformed engineers into business partners, cut integration costs, boosted development speed, and required careful cost‑benefit analysis, incremental migration, traffic safety measures, and a low‑code orchestration platform to ensure stable, scalable adoption.
This technical article introduces CoralSea, a cross‑platform dynamic UI framework developed by 58.com and Anjuke, detailing its background, DSL‑based design, low‑code editor, D2X‑Tool, mobile engine, performance comparisons with native, RN, Flutter, and Tangram, as well as real‑world application cases and future roadmap.
This article explains why front‑end state management is essential, walks through the flux‑based san‑store architecture, demonstrates core usage and code patterns, and details how san‑devtools implements time‑travel debugging by logging state snapshots, computing diffs, and replaying them to restore previous UI states.
This article explains the challenges of debugging low‑code platforms for non‑frontend developers, describes Alibaba’s layered architecture and low‑code debugging protocol, and details the core debugging features—error logs, component inspection, data source panels, schema view, and extensible plugins—designed to reduce support costs and improve developer productivity across dozens of internal platforms.
This collection highlights recent front‑end engineering insights, covering bundle‑less approaches with tools like Snowpack and Vite, dramatic build‑time reductions for large Vue/TypeScript applications, low‑code platform implementation for multi‑tenant CRM, and design strategies that enhance information‑reading experiences.
This article explains what H5 (HTML5) and WeChat Mini Programs are, compares their development tools, runtime environments, system permissions, performance, usage scenarios, sharing methods, payment capabilities, and testing considerations, highlighting the strengths and limitations of each technology.
This article explores the purpose, styles, mobile considerations, placement, types, and design recommendations for breadcrumb navigation, highlighting its usability benefits, SEO impact, and when it should be applied in complex web interfaces.
TypeScript 4.8 enters its release‑candidate phase with a scheduled stable launch in late August, introducing a new server preference for import exclusions and stricter object‑comparison checks that flag previously silent bugs, while Google reports minimal impact on its codebase.
This article provides a thorough tutorial on regular expressions, covering their history, fundamental concepts like quantifiers and character classes, debugging tools, advanced techniques such as lazy versus greedy matching and assertions, JavaScript RegExp methods, compatibility considerations, and practical code examples for common validation patterns.
A curated roundup of technical deep‑dives covering Byte's frontend monitoring SDK architecture, the evolving landscape of Cloud IDEs, practical Webpack performance tricks, React Fiber internals, open‑platform front‑end design, visual log‑tracing solutions, engineering culture, the Bud framework, and clear explanations of TCP/UDP and iterators versus generators.
This article curates cutting‑edge frontend topics—including Vite micro‑frontend challenges, ByteDance's monitoring SDK design, React vs Vue diff algorithms, design simplification for tool products, motion design patterns, and the rise of graph databases—offering concise insights for modern web developers.
This article explains how ByteDance measures website performance, describing key front‑end metrics such as FP, FCP, LCP, TTI, TBT, FID, and MPFID, the APIs used to collect them, and how to evaluate overall site health and guide targeted optimizations.
This article explains how to create a Node‑based CLI utility that automatically scans Vue and JavaScript files in a large front‑end codebase, extracts i18n calls via AST parsing, validates translation keys, and outputs consolidated results to improve internationalization efficiency and accuracy.
The article explains how a frontend monitoring SDK can support diverse environments such as web, mini‑programs, and Electron by decoupling logic into interchangeable roles, providing a rich plugin lifecycle, enabling business‑driven extensions, on‑demand loading, and rigorous quality controls while minimizing impact on the host application.
JSON Hero is a lightweight web‑based tool that offers multiple views, automatic content preview, search, and sharing capabilities for JSON data, with easy installation via Git and npm, making it a handy utility for developers who frequently work with JSON.
This collection highlights recent technical articles covering JavaScript engine memory management, building a Web3 decentralized app, Vue 3 compilation improvements, DNS query mechanisms, creating a custom JavaScript runtime, software engineering insights, singleton design pattern, low‑code remote component loading, advanced TypeScript types, and React security best practices.
This roundup highlights the latest front‑end innovations, including the promising Bun JavaScript runtime, an in‑depth analysis of Vue 3’s reactivity system, a comprehensive guide to JavaScript objects, and practical UX design strategies for complex B‑to‑B applications.
This article demonstrates how to create dynamic liquid‑flow animations for static images using SVG filters (feTurbulence, feDisplacementMap), CSS mask‑image, Canvas drawing, and TweenMax, providing step‑by‑step code for generating hotspots, animating them, and integrating image upload and canvas clearing in a web page.
This article examines low‑code development platforms and presents three remote component loading strategies—global‑object, AMD (require.js), and ESModule—detailing their packaging, CDN deployment, loading logic, advantages, drawbacks, and a final recommendation for ESModule‑based loading in modern front‑end development.
By replacing memory‑heavy base64 data URLs with temporary object URLs and moving intensive file‑reading tasks into a Web Worker, the customer‑service instant‑messaging platform can instantly preview rich media, avoid UI blockage, cut upload latency, and dramatically improve agent efficiency and user experience.
This guide explains how to configure VSCode and webpack to build React and React‑DOM packages with sourcemaps, set up external module loading, and adjust source‑map paths so that debugging in VSCode can directly step through and locate the original React source files.
This article presents a step‑by‑step tutorial on creating a drag‑and‑drop captcha, covering the project repository, visual examples, underlying logic, PHP and JavaScript APIs, installation via Composer, and a link to the original detailed guide.
This article presents a curated collection of npm libraries frequently used in Vue3 and Vite3 source code, offering developers ready‑to‑use tools for terminal styling, CLI interaction, argument parsing, file handling, debugging, environment management, bundling, testing, and more.
The Vivo Internet Front‑End team explains how to implement multi‑tab functionality and efficient caching in a qiankun‑based micro‑frontend architecture, comparing CSS hide/show and component‑level keep‑alive approaches, then presenting two strategies—simultaneous mounting versus app‑level vnode caching—choosing the latter for reduced memory usage and detailing its Vue‑specific implementation, communication handling, and future Vue 3 migration.
A frontend engineer tackles slow npm installs, massive disk usage, a buggy package causing infinite loops, and the need for security scanning by deploying a domestic mirror, using npm overrides, and adopting cnpmcore for enterprise‑grade package management.
This article introduces the concept of rich text in the frontend, explains two primary input methods (iframe with designMode and contenteditable elements), details the Selection API for handling text ranges, demonstrates toolbar commands using execCommand, and provides complete demo code for building a simple rich‑text editor.
This article explains how the ICBU low‑code platform’s rendering engine achieves high test coverage by linking each issue to a dedicated unit test and demo, using custom npm scripts, pre‑build cleanup, and a traceable changelog to improve code stability.
This article curates a series of front‑end insights, covering Babel fundamentals and plugin development, Flutter widget lifecycle and state management, pure‑CSS transition recreations, user‑experience considerations, practical front‑end best‑practice tips, and a discussion on Vue’s potential move away from virtual DOM, while also inviting readers to join the Cloud Academy front‑end team.
This case study details how Haokan Video’s PC site was transformed with a responsive 24‑column grid, streamlined navigation, visual‑noise reduction, and feed‑style content loading, resulting in higher content exposure, improved click‑through rates, and stable user retention after a month‑long AB test.
This tip shows how defining .img_container with width:100% and aspect-ratio:16/9 in CSS prevents layout disruptions after image loading and can also be leveraged in media queries for responsive design.
This article outlines the design, implementation, and open‑platform strategies of Ctrip’s Legao system, covering component openness, custom build processes, dynamic loading, development tooling, static libraries, and dynamic form capabilities to enable reusable, low‑code, SSR‑ready frontend components.
This article explains how JavaScript’s type coercion rules allow the construction of any code using only six characters—[]()!+—by demonstrating conversions for booleans, numbers, letters, special symbols, and finally assembling arbitrary executable code via the Function constructor, with examples and a link to the online converter.
This tutorial demonstrates how to create a functional analog clock using only HTML, CSS keyframe animations, and a small JavaScript snippet that sets negative animation‑delay values so the clock starts synchronized with the current time.
This article presents a curated list of twenty practical JavaScript hacks—including array initialization, sorting, logical operators, spread/rest, optional chaining, and more—demonstrating how modern ES6+ features can reduce code size, boost performance, and simplify common programming tasks.
This article presents thirteen practical JavaScript techniques—from consolidating if statements and simplifying ternary logic to using spread operators and template strings—that help developers write cleaner, more efficient code while reducing redundancy and improving readability.
This roundup spotlights cutting‑edge front‑end developments, including Vue’s upcoming no‑virtual‑DOM mode inspired by Solid.js, a practical guide to hardware‑accelerated HEVC decoding in Chromium, user‑experience advice from industry leaders, latency‑reduction techniques for TikTok live streams, and insights on measuring R&D efficiency.
JSON Hero is a lightweight, web‑based JSON viewer that offers multiple visualizations, content previews, search, and easy sharing links, with straightforward installation via Git and npm, making JSON inspection and editing more intuitive for developers.
This article describes how to add Hot Module Replacement to esbuild by disabling scope hosting, converting modules to CommonJS, building a custom ModuleLoader and resolver, handling module URLs, and comparing two bundling approaches while also covering React Refresh integration.
This newsletter curates recent technical insights covering the high‑performance Bun JavaScript runtime, ESM Loader Hooks for module processing without bundlers, deep dives into Canvas and CSS graphics, practical guides on unit testing, serverless deployment, and advanced JavaScript features like Proxy and Reflect, offering developers a comprehensive overview of modern frontend engineering trends.
A real‑world story shows how an overlooked undefined value in a JSON payload caused a front‑end bug that nearly cost a developer his year‑end bonus, and explains the quirks of JSON.stringify together with practical fixes and a custom implementation.
This article reviews the rapid evolution of front‑end development over the past six months, highlighting the rise of native‑code JavaScript tools, Tauri as an Electron alternative, the booming Islands architecture, full‑stack data flows, emerging Storybook competitors, advanced CSS features, headless UI components, React updates, and new documentation tools.
This article compiles 29 essential Vue interview questions covering Vue 3 design goals, performance optimizations, component structure, Vuex architecture, routing techniques, Composition vs Options API, and common pitfalls, providing a comprehensive study guide for frontend developers preparing for technical interviews.
This article explains how the Picasso platform provides a standardized, high‑efficiency A/B testing pipeline for front‑end developers, covering traffic allocation algorithms, flow reuse, orthogonal and mutually exclusive experiments, multi‑scenario rules, custom metrics, reporting, and future enhancements.
This article explains how Vue 3's provide/inject mechanism works, demonstrates proper usage with strings, refs, and Symbols, analyzes why injected data may be unavailable across applications, and offers practical solutions such as using Symbol.for and application‑level provides.
This article explains CSS's invisible flow mechanism, compares block and inline elements to water flow, and details how width, height, and box‑sizing affect layout, providing practical insights for creating fluid and robust front‑end designs.
This personal narrative follows a developer’s journey from a childhood fascination with computers to mastering frontend engineering, emphasizing the role of theory, professional depth, goal‑setting techniques, and altruistic teamwork in achieving lasting workplace happiness.
This article explains the design principles, implementation details, and advanced features of NutUI’s Collapse panel component, covering basic interaction, height‑based animation, flexible title bar with icons, configuration upgrades, slot usage, CSS variable styling, and Vue 3 provide/inject communication, supplemented with code examples.
This guide explains how to enable Windows cmd/PowerShell support, directory upload/download commands, and drag‑and‑drop file or folder uploading in a web page using trzsz/trzsz‑go, including the required server setup and a JavaScript code example.
This article introduces Plasmo, a Next.js‑like framework for creating browser extensions using React and TypeScript, covering its key features, system requirements, project scaffolding, development workflow, content‑script integration, environment variables, internationalization, remote code handling, and publishing automation.
This article introduces a Vue 3.0 functional popup layer library that can be invoked via functions (recommended) or templates, provides a documentation link, and details recent additions such as photo album, drawer, notify layers, new properties, callbacks, and visual examples.
Moyu Page Builder is a low‑code visual editor for Xianyu that lets operations staff configure page content and dynamic data via extended JSON Schema mapped to Ant Design components, streamlining front‑end development, reducing collaboration overhead, improving first‑screen performance, and enabling time‑based, audience‑targeted scheduling.
The June 25 ByteDance‑ByteDance Dev Better technical salon, co‑hosted with Huatai Securities, presented a series of front‑end engineering talks covering serverless web development, modern.js engineering, DevOps adoption, and practical Q&A, offering valuable insights and best‑practice recommendations for web developers.
The HTML inert attribute is a Boolean property that makes browsers ignore user input, focus, and selection within an element and its children, helping developers create more controlled and accessible user interfaces while being widely supported with a polyfill for older browsers.
This roundup presents a curated list of recent frontend development articles covering Babel 7.18 upgrade issues, TypeScript migration strategies, monitoring system design, JavaScript security techniques, ES2022 features, React Native Skia integration, GraphQL BFF practices, and thoughts on software complexity.
DeWu’s new 400‑number customer service hotline augments its IM chat with a call‑handling console, using the Helly SDK, module‑federated components, finance‑data iframes, and IVR verification that cuts average call time by 12.5 seconds, while a state store improves performance, delivering 6.2 % of traffic as verified calls and paving the way for an upgraded telephony SDK, expanded self‑service IVR, more data panels, and configurable routing rules.
This roundup covers the Vue 2.7 beta release, speculative futures for a Chromium‑only web, the architecture of a front‑end monitoring SDK, low‑code rendering standards, JavaScript sandbox evolution, GitHub Copilot’s general availability, WebAssembly trends, functional programming basics, Vue’s double‑ended diff algorithm, JSON.stringify pitfalls, and the latest focus areas of the React team.
VideoX is a versatile front‑end video player built for Taobao’s massive e‑commerce platform, offering multi‑terminal playback, customizable controls, and analytics through a layered architecture that separates core decoding, framework integration, and experience assurance, while supporting modern web technologies and native fallbacks across diverse business scenarios.
This article highlights recent JavaScript enhancements, including class member additions, private property checks with the in operator, top-level await, the error.cause property, the new .at() method for strings, arrays and array‑like objects, regex match indices, and the safer Object.hasOwn() utility for own‑property verification.
The article explains how ByteDance’s Starry low‑code platform uses a Code‑In/Code‑Out model to enable flexible component development, break R&D bottlenecks, generate full React projects, and integrate with micro‑frontend architectures like Garfish to support SSR for large‑scale web applications.
This curated list presents eleven essential frontend development articles covering VS Code debugging, React component library maintenance, web application evolution, monorepo task orchestration, Ant Design table export, testing strategies, low‑code rendering, browser observers, React Server Components, modern ES features, and effective test planning.
This comprehensive guide explains how to set up continuous integration and continuous deployment (CI/CD) for a front‑end Vite‑React‑TypeScript project using GitHub Actions, covering basic concepts, workflow configuration, code linting, testing, release management, deployment to an Nginx server, status badges, email notifications, rollback mechanisms, and end‑to‑end testing.
A real‑world story shows how a developer’s incorrect use of JSON.stringify caused a missing form field, broke a page, and nearly cost a year‑end bonus, followed by a detailed explanation of JSON.stringify’s quirks and a robust fix to prevent the issue.
This roundup covers techniques to slash JavaScript bloat, AI‑driven code generation, the latest ECMAScript 2022 features, a Node‑based Git tutorial, a hands‑on Vue 3 reactivity implementation, cloud‑native database practices, design system fundamentals, grid layout insights, and why front‑end development keeps accelerating.
This article explains the concept of low-code rendering, the standard protocols that describe component maps, utils, and component trees, and compares code generation versus runtime rendering approaches while outlining current frameworks, pain points, and future architectural plans for Alibaba's low-code engine.
This article explores the practical challenges of using MVC and related architectural patterns, compares implementations from Microsoft, Apple, and industry experts, discusses controller bloat and view‑model relationships, and proposes solutions such as view‑to‑model factories, multi‑controller designs, and MVVM adoption to improve testability and maintainability.
This article provides an in‑depth tutorial on implementing server‑side rendering (SSR) for React applications, covering basic concepts, Koa server setup, ReactDOMServer APIs, routing with react‑router, Redux state hydration, CSS handling, performance optimizations, and modern SSR frameworks such as Next.js and Umi.
Umi 4 is now available on npm and brings a host of new capabilities—including dual Vite/Webpack builds, faster default compilation with MFSU V3, Umi Max for enterprise back‑office, React Router 6, Vue support, automatic HTTPS, build progress UI, terminal logging, plugin APIs, dead‑code detection, and a lightweight UI—while outlining future roadmap items such as MFSU V4, Father 4, dumi 2, and bundless ESMi solutions.
This article reviews the latest TC39 proposals—including findLast, Symbol as WeakMap keys, JSON.parse source text access, String.dedent, Import Reflection, RegExp modifiers and atomic operators, and Faster Promise Adoption—detailing their stage progress, implementation requirements, and practical code examples for modern JavaScript development.
This article explains Redux’s core concepts, demonstrates how to implement a basic createStore function in JavaScript, and shows how to integrate it with React using a custom Provider and connect higher‑order component for state sharing across components.
This article traces jQuery’s meteoric rise during the Web 2.0 era, examines why major sites like GOV.UK, GitHub and Bootstrap have removed it, and explains how HTML5 standardization and modern MVVM frameworks have turned the once‑essential library into a legacy technical debt.
This article curates key frontend topics—including Web3.0 debates, Serverless lightweight development, CDN design principles, content‑visibility versus lazyload, advanced TypeScript techniques, and user‑experience fundamentals—offering a concise overview for developers seeking to stay ahead of emerging trends.
This article details the design, challenges, and solutions behind Prism, a self‑built front‑end monitoring platform that collects multi‑device SDK data, processes it through Kafka, Flink and ClickHouse, visualizes metrics, integrates with A/B testing, and outlines future enhancements for broader enterprise adoption.
This article surveys the most useful and mature Vue open‑source projects—including CMS platforms, static site generators, e‑commerce storefronts, visual editors, UI component libraries, and development tools—highlighting their key features, community support, documentation quality, and contribution guidelines to help developers choose suitable tools.
This article walks through creating a simple Node server, building a basic HTML/JS front‑end, and applying performance techniques such as pagination with setTimeout, requestAnimationFrame, document fragments, and lazy‑loading to render massive data sets smoothly.
This article explores Ant Group's front‑end R&D system, the challenges of large‑scale financial applications, and how a serverless, low‑code platform with BFF, function‑level deployment, and documentation‑as‑code practices can boost efficiency, safety, and scalability.
This guide walks through installing the mavon-editor package, globally registering it in a Vue project, creating a component with markdown binding, configuring props, customizing toolbars, handling image uploads, and using keyboard shortcuts to provide a full-featured online markdown editor.
This article explains how a self‑built performance testing platform leverages data‑statistical models, such as scoring and interval models based on normal distribution and percentile analysis, to quantify web‑page metrics, guide automated and semi‑automated optimizations, and integrate with CI/CD workflows for frontend development.
This talk explains Ant Group’s serverless‑based front‑end platform, detailing the current front‑end architecture, challenges of large‑scale financial services, and three core efficiency ideas—document‑as‑code, function‑level deployment, and integrated plugin capabilities—to streamline development and ensure safe production.
This article explains why accessibility is essential for UI component libraries, describes the main types of disabilities, and provides concrete Semi Design guidelines—including color contrast, keyboard navigation, semantic markup, media handling, and layout recommendations—to create inclusive front‑end experiences.
This article traces jQuery’s emergence as the de‑facto library that simplified DOM manipulation and cross‑browser compatibility during the Web 2.0 era, examines its widespread adoption and subsequent performance gains from removal, and explains why modern standards, HTML5 and MVVM frameworks have reduced its relevance today.
This article traces jQuery’s rise as the go‑to library during Web 2.0, examines recent moves by major sites to drop it, explains its original technical advantages, and analyzes how HTML5, MVVM frameworks and modern frontend stacks have reduced its relevance while it still powers a large share of the web.
This article presents a step-by-step guide to building a full-screen dashboard for LED displays, detailing requirement analysis, deployment options, overall architecture, key front‑end HTML/CSS layout, Echarts visualizations, back‑end Java REST API, JSON data handling, and configuration instructions.
This article explains the concept of gray (canary) releases for front‑end projects, compares several practical deployment schemes—including simple Nginx weighting, Nginx + Lua + Redis, server‑side rendering, client‑side annotation, and a full Nginx + backend + Redis + SDK solution—provides code samples, Docker‑compose instructions, and operational tips for rollout and rollback.
Facing fragmented devices, high memory usage, and unreliable signaling, the Zuoyebang live‑streaming frontend was redesigned with container‑based isolation, a modular SDK, and state‑synchronization mechanisms, resulting in timely memory reclamation, reduced CPU load, and dramatically lower black‑screen incidents.
This article details Ctrip's comprehensive mini‑program size governance framework, covering size allocation, detection, application approval, reminders, statistics, and main‑package file management to ensure packages stay within WeChat's limits and improve launch performance.
After seven years in frontend, the author reflects on why they chose the field, how to balance technical and business roles, the importance of proactive mindset, handling workload, communication, and overcoming career ceilings, offering practical advice for sustainable growth in frontend development.
This article explains the concept of gray release, compares several practical rollout schemes—including simple Nginx weighting, Nginx + Lua + Redis, server‑side rendering split, client‑side conditional compilation, and a full Nginx + backend + Redis + SDK solution—provides implementation details, code examples, and operational tips for safely deploying new features to subsets of users.
