This article explains various web watermark methods—including simple visible logos, full‑page overlays, dynamic canvas‑generated marks, SVG‑based text watermarks, and robust invisible (blind) watermarks—while covering implementation details, security considerations, and protection mechanisms such as Shadow DOM and MutationObserver.
This article explains the concept of Signals as a fast, fine‑grained reactive state primitive, compares its usage and performance with hooks, SolidJS, and Vue, and provides hands‑on implementations and integration tips for modern frontend frameworks.
The ByteDance Dev Better series hosted a frontend performance and new technology salon featuring four expert talks on performance analysis tools, performance system construction, frontend monitoring best practices, and a Rust‑based JavaScript compiler, each followed by detailed Q&A sessions.
This article examines Builder.io's performance optimization case, reviews the evolution of lazy‑loading techniques in front‑end development, and explains how Qwik implements ultra‑fine-grained lazy loading and prefetching to eliminate costly hydration and improve page interactivity.
This article explains how to create a lightweight, embeddable JavaScript runtime using Duktape, compile it to WebAssembly, expose custom APIs, and integrate it into a web-based login greeter, highlighting implementation steps, code examples, and potential use cases.
This article explains why and how to separate frontend and backend responsibilities, outlines the evolution from MVC to SPA architectures, and provides detailed API request and response conventions—including JSON formats, pagination, and special field handling—to improve collaboration and reduce integration effort.
This article analyzes the design secrets of the China Merchants Bank mobile app, covering its homepage structure, banner strategies, icon styles, card layouts, color choices, navigation tricks, and startup page symbolism to illustrate how thoughtful UI enhances user experience in mobile banking.
This article explains what software frameworks are, why they are essential for developers, outlines the main types—including frontend, backend, mobile, and data‑science frameworks—and offers practical advice on how beginners can start learning them effectively.
This article analyzes the challenges of traditional front‑end development for large real‑estate operation activities and presents a comprehensive efficiency‑boosting solution that includes workflow optimization, a unified event‑tracking system, a multi‑end adaptation plugin, and a low‑code "Jimu" platform for rapid page creation.
This article explains what front‑end frameworks are, compares the top five options for 2023—including ReactJS, Angular, TezJS, jQuery, and VueJS—detailing their features, advantages, and ideal use cases to help developers select the most suitable technology for their projects.
This article presents a comprehensive design and implementation plan for an online platform that enables both developers and non‑developers to preview, debug, and interact with basic, business, and low‑code UI components through code editors, schema‑based property panels, toolbars, and isolated preview containers.
The author explains how the viral “Sheep Sheep” puzzle’s random mechanics make it nearly impossible to clear, then details the creation of a clone called “Fish Fish” with customizable difficulty, open‑source code, and the core implementation techniques used.
This article presents a curated collection of twelve noteworthy open‑source WeChat mini‑program projects—including e‑commerce, UI component libraries, music, library, and development frameworks—detailing their main features, GitHub stars, and links to help developers explore and learn from real‑world examples.
Discover the latest JavaScript enhancements—including class member addition, private property checks with the in operator, top‑level await, error.cause for root causes, the .at() method for strings, arrays, and array‑like objects, and the safer Object.hasOwn method—each designed to streamline modern development.
This curated collection introduces key front-end topics—including architecture layering, JavaScript monkey‑patch detection, component sharing via Webpack Module Federation, automated testing basics, Vue 2 this behavior, UX effectiveness measurement, and product versus UX design differences—offering practical insights for modern developers.
The article explains how the HTML contenteditable attribute enables in‑place editing, why legacy execCommand‑based editors are inconsistent, and how modern frameworks such as Slate.js—built on React and Immutable.js—provide a structured, location‑based data model with Transform and Node APIs for reliable, portable rich‑text editing.
The article explains why front‑back end separation is needed, describes the evolution from MVC to SPA, outlines responsibility separation, development workflow, and presents a detailed API specification including request/response formats, pagination, and special data handling rules.
This article examines performance bottlenecks in a Taro3-based hotel list page, presents measurement data, and details multiple optimization techniques—including preload API, setData reduction, node count trimming, animation refactoring, data flattening, virtual list enhancements, custom wrapper usage, native components, and React.memo—to significantly improve rendering speed and user experience.
This article explains how to monitor and analyze front‑end performance using the deprecated performance.timing API and the modern PerformanceObserver, detailing key web‑vital metrics such as TTFB, FCP, LCP, FID, and CLS, with code examples and practical interpretation guidelines.
This article presents a comprehensive set of front‑back end collaboration standards, covering why a coordination protocol is needed, detailed workflow steps, interface design rules, common pitfalls with concrete code examples, and the measurable benefits of adopting a unified development contract.
This article explains the core concepts of low‑code platforms, emphasizing visual editing as a mandatory feature, comparing declarative and imperative approaches, detailing front‑end JSON‑to‑React rendering, reviewing five back‑end storage strategies, discussing business‑logic implementation, workflow engines, and predicting the future evolution of low‑code solutions.
This article describes how Baidu's commercial frontend team improved front‑end and back‑end collaboration efficiency by introducing a BFF layer, data‑direct capabilities, staged data tiering, and fragment‑based batch editing, ultimately reducing delivery time by over 50% while maintaining quality.
Discover the nine essential UI design elements shaping modern financial apps—from brand colors and gradient backgrounds to typography, icon styles, whitespace, rounded cards, illustrative graphics, micro‑interactions, data visualisation, and component‑based systems—each helping convey corporate identity, enhance trust, and improve user experience.
This article reviews the evolution, technical choices, architecture, and future roadmap of Alipay’s Cube rendering engine, which enables dynamic native pages and lightweight mini‑programs through a JavaScript‑and‑CSS‑based front‑end solution.
This article explains Android’s display pipeline—CPU, GPU, and Display—and dives deep into how the Choreographer registers callbacks, schedules traversals, processes Vsync signals, and coordinates rendering to achieve fluid UI updates.
This article presents a comprehensive set of front‑end and back‑end collaboration standards, covering why specifications are needed, the recommended workflow, detailed API conventions, common pitfalls with concrete solutions, and the measurable benefits of adopting a unified development protocol.
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.
