This article explains how to create a reusable Vue calendar component by designing its data structure, generating a 7×6 date matrix, implementing navigation props and events, and applying customizable styles, providing complete code examples for template, script, and scoped CSS.
This comprehensive guide explains what popups are, distinguishes modal and non‑modal varieties, outlines essential design principles for titles, content, buttons, and overlays, and provides a step‑by‑step workflow for selecting and implementing the right popup type to improve user experience.
This article explains how to design and implement a canvas‑based editor for customizable store promotional materials, covering requirement analysis, system architecture, canvas library selection, component initialization, event handling, drag‑and‑drop, form integration, and future enhancements.
This tutorial walks through the fundamentals of building ArkTS components for HarmonyOS, covering project setup, key decorators like @Entry and @Component, styling with @Styles and @Extend, handling events, managing properties and state, conditional rendering, functional components, and slot implementation.
This article explains how to prevent multiple simultaneous token requests in a web application by using a custom repeatOnce function that caches the token in localStorage and coordinates pending calls through an event emitter, ensuring only the first request fetches the token while others wait for its result.
Swizec Teller argues that in most React projects the useCallback and useMemo hooks are unnecessary, explains how they work, shows common pitfalls, and provides concrete alternatives for writing cleaner, more efficient components without over‑optimizing.
This extensive article presents a systematic approach to front‑end stability, covering observability systems, full‑chain monitoring, high‑availability design, performance management, risk governance, process mechanisms, and engineering practices to ensure reliable user experiences and business continuity.
This article describes how a legacy Vue2‑based cloud management system was profiled with Lighthouse and webpack‑bundle‑analyzer, then optimized through static asset compression, dead‑code removal, tree‑shaking, code‑splitting, async loading and server tweaks, achieving a three‑fold reduction in bundle size and a 13.6‑second improvement in first‑contentful‑paint time.
This article explains the same‑origin policy, its role in browser security, how CORS enables controlled cross‑origin requests, the distinction between simple and preflight requests, credential handling, and best practices for configuring related HTTP headers.
The article recounts a JD.com front‑end engineer’s evolution from a fresh graduate to a technical leader, highlighting practical advice on mentorship, coding habits, project ownership, innovative ad‑tech solutions, and the transformative role of AIGC in modern front‑end development.
The article describes Gundam, Kuaishou's front‑end engineering scaffold, its goals of unified standards and efficiency, the practical challenges faced during the New Year Eve project, and the future direction of engineering standardization and automation through a layered engineering funnel approach.
The article showcases a collection of JavaScript snippets—ranging from simple if‑statement drills and password handling tricks to messy loop structures and formatting quirks—illustrating typical beginner mistakes and how to spot and improve them.
This article walks you through the fundamentals of Chrome extension development, covering its advantages, required prerequisites, manifest file creation, core components such as popup pages, background scripts, content scripts, and context menus, complete with practical code examples and configuration details.
This article introduces a lightweight admin dashboard template built with Vue 3.4, Element‑plus, and Vite, detailing its project structure, technology stack, coding standards, configuration files, component integrations such as UnoCSS, mock.js, canvas, SVG and WangEditor, and provides step‑by‑step commands for development, linting, formatting, and production build.
Svelte 5 launches with fine‑grained universal reactivity, a powerful Signals system, a slimmer compiler output, and Rich Harris’s enthusiastic take on React Server Components, promising a faster, smaller, and more composable framework for modern web developers.
Chrome Canary’s experimental Gemini Nano feature enables local execution of a large language model in the browser, offering easy deployment, hardware acceleration, offline use, and a Prompt API with createTextSession and streaming calls, plus step‑by‑step instructions and a demo for in‑page translation.
This article introduces ten lesser‑known but highly useful VSCode extensions—ranging from workspace theming and comment coloring to TODO management, Git visualization, partial diffs, project switching, console logging, and Zen mode—to help front‑end developers dramatically improve productivity and workflow.
This article explains the fundamentals of the same‑origin policy, its impact on DOM, web data and network requests, and provides a detailed overview of CORS, simple requests, preflight requests, and the necessary response headers to securely enable cross‑origin communication in modern browsers.
Front‑end developers must embed unique page identifiers in URLs, capture incoming source parameters, and propagate them through outbound links so that traffic, source, interaction and conversion metrics can be automatically recorded by the SDK, enabling data‑driven product optimization and business insight.
The article details how the author leveraged Doubao MarsCode's AI‑powered online IDE to quickly set up a Vue3 project, import a git repository, switch Node versions, install dependencies, develop a paginated carousel component with full code snippets, and evaluate the platform's strengths and weaknesses.
Lexical is a highly extensible, framework‑agnostic JavaScript text‑editing library created by Facebook, offering a lightweight core, plugin architecture, custom nodes, themes, and state management for building rich‑text, collaborative, and native‑like editors across web applications.
This article explains why browsers enforce same‑origin policy, how cross‑origin requests affect front‑end and back‑end communication, and presents six common solutions—including JSONP, Spring @CrossOrigin, WebMvcConfigurer, CorsFilter, Nginx proxy, and other advanced techniques—complete with code examples.
The project consolidates three separate detail‑page implementations into a single, reusable framework that separates business, component, and framework layers, employs dependency‑injection and scoped lifecycles to support diverse scenarios while ensuring stability through comprehensive logging, monitoring, and staged gray‑release testing.
The article shows how to build a smooth, infinite 3D carousel using only CSS by sharing a common motion path, staggering items with negative animation delays, defining keyframes (including optional pauses), and optionally leveraging @property and @container style for smoother or declarative control, while noting browser compatibility and hover‑pause tips.
This article explains how to set up Tailwind CSS in a Next.js project, addresses dynamic class name problems, class‑priority conflicts, and provides solutions using tailwind‑merge, clsx, and class‑variance‑authority, along with useful tools and VSCode extensions for smoother development.
JSON Hero is a lightweight, user‑friendly JSON viewer that offers column, tree, and raw JSON views, automatic content preview, and easy sharing; the article explains its features, provides a local installation guide with Git and npm commands, and shows how to use it directly in the browser.
The author recounts their recent journey into React, covering required fundamentals, challenges with TypeScript and input handling bugs, and how expert guidance clarified React's data‑driven design, ultimately improving their understanding and development approach.
This article explains why browsers limit concurrent HTTP requests, demonstrates the limitation with a test example, and provides a reusable PromiseLimiter class that queues and throttles asynchronous calls to keep the number of simultaneous requests under a defined threshold.
This article explains how React refs work with native elements, class components, and function components, demonstrates using useRef, forwardRef, and useImperativeHandle, and discusses the benefits, drawbacks, and alternative patterns for exposing component instances and DOM nodes.
The team refactored a high‑traffic Vue2 detail page to Vue3 using Clean Architecture, separating entities, use‑cases, adapters, and framework layers, while employing AST‑based tooling, comprehensive unit/E2E/visual tests, and a gray‑release strategy, resulting in reduced duplication, better test coverage, and a reusable migration pipeline.
This article explains how to build a custom React @mention input component that highlights mentioned users, treats the whole @username as a single deletable unit, tracks cursor position for a floating selector, and returns both the plain text and the list of mentioned users to the parent component.
This newsletter curates recent frontend news and deep‑dive articles covering the State of JavaScript 2023, large‑model trends, OpenAI's acquisition of Multi, RPA debates, building a modern JS framework, CSS importance, React's diff algorithm, a UX design book, plus practical tips on Taro, MQTT and data‑center interfaces.
This tutorial demonstrates how to create an interactive Echarts map that supports drill‑down to county level and back navigation using Vue 3, vue‑echarts, and Vite, covering data acquisition, option configuration, event handling, and full component code.
This article explains the fundamentals of CSS variables, how to define and use them—including default values, nesting, media queries, and JavaScript updates—while showcasing practical scenarios such as theming, responsive design, code reuse, and compatibility across browsers.
This article details how to quickly create a web‑based 3D parking‑lot demo with scene modeling, dynamic lamp markers, interactive controls, editing, heat‑map overlay, and path‑planning using the esMap visualization SDK, including full code snippets and deployment steps.
This tutorial explains how to convert ANSI escape sequences used for colored logging into HTML so that log output can be securely viewed with proper colors directly in a web browser, including server setup, code examples, and library usage.
Huawei's HarmonyOS design guide outlines UI principles for 2‑in‑1 devices, covering interface highlights, window framework, size specifications, column structures, and responsive rules to help developers create efficient and immersive applications across tablet‑laptop hybrids.
This article examines why TypeScript has become essential for complex web applications, outlining its benefits such as improved maintainability and early error detection, the challenges developers face, and the language's future impact on the web development ecosystem.
This article outlines five clear scenarios—simple projects, sufficient HTML/CSS, modern ES6 features, desire for creative freedom, and HTMX alternatives—where using a JavaScript framework adds unnecessary complexity and can be safely avoided.
The 2023 NetEase Cloud Music annual‑report front‑end case study details how sub‑second first‑screen loads, SPA routing with TypeScript, GPU‑accelerated animations, optimized media handling, multi‑layer quality monitoring, and a unified development platform together boost performance, reliability, and engineering efficiency, driving higher DAU and share‑rate.
This article explores the beta release of Taro 4.0, examines its new HarmonyOS support, CompileMode for mini‑programs, and Vite‑based build chain, then details the configuration pitfalls, debugging steps, source‑code analysis, and practical recommendations for a stable development workflow.
This article describes how to build a reusable Vue component that automatically moves overflow menu items into a "More" dropdown, calculates the cutoff point based on container width, and updates the layout on resize, providing a smooth and responsive navigation experience.
The article details a complete redesign of Feishu’s cloud‑document‑to‑HTML‑email converter, introducing IoC/DI architecture, inline‑style utilities, and specialized renderers for headings, lists, tables, images, code blocks, and equations, resulting in high‑fidelity Outlook‑compatible emails while shrinking the core code to under three hundred lines.
This article explores how the depth of a webpage's DOM tree influences memory usage, style calculations, and rendering performance, presenting experiments that compare shallow and deeply nested structures and offering practical tips for monitoring and optimizing DOM depth.
This article explains practical methods for diagnosing and fixing production‑time JavaScript errors by using the Ajax‑Interceptor Chrome extension, understanding hidden‑source‑map vs source‑map differences, adding source‑map files in Chrome, and applying manual source‑map mapping or proxy tools like Charles.
Chrome 126 adds a new permission element that lets developers declaratively request camera, microphone, or combined permissions via a button‑like UI, addressing common permission‑prompt abuses such as premature prompts, hidden dialogs, and difficult revocation, while integrating with the Permissions API and providing state‑change events.
This article explores critical latency metrics—from nanosecond-level CPU operations to intercontinental network delays—illustrating how each contributes to web performance, and provides real‑world measurements for various connection types, data processing tasks, and user‑perceived response times to help developers optimize user experience.
This guide explains how to set up a launch.json file in VSCode, add breakpoints, and run the debugger to efficiently troubleshoot front‑end code, highlighting the use of Chrome launch, breakpoint panels, variable inspection, and step‑through execution.
This article details how Alipay’s Mantiantianxing platform was designed and built to unify page construction, fine‑grained operation, and data feedback, thereby solving low R&D and operation efficiency, reducing duplication, and enabling rapid, scalable innovation across multiple product front‑ends and back‑ends.
The article explains why repeated button clicks or searches cause duplicate API calls, discusses why debounce/throttle are not ideal, and presents three practical solutions—loading state locking, request cancellation with Axios CancelToken, and related code examples—to efficiently avoid redundant requests in Vue applications.
The article describes a unified front‑end observability platform that standardizes data‑point collection via a common SDK, automatically generates health and business dashboards, integrates real‑time monitoring and heatmaps, and has been adopted on 140 pages, delivering faster first‑screen loads, lower error and bounce rates, and higher conversion.
This article provides a curated list of twelve open‑source admin dashboard projects, including D2admin, vue‑element‑admin, JEECG‑BOOT, GIN‑VUE‑ADMIN, and others, with their GitHub links, documentation URLs, demo previews, and licensing information, offering developers free resources for building management interfaces.
This article walks through a series of practical performance‑boosting techniques for Vue‑based web applications, covering Webpack bundle analysis, Gzip compression, WebP image conversion, HTTP/2 configuration, Nginx tweaks, and OSS/CDN integration, with concrete code snippets and step‑by‑step guidance.
This article explains why interface analysis is essential, how to collect request data from web, mini‑programs, and Flutter using hooks and overrides, and how to process, store, and visualize metrics with Redis, InfluxDB, MySQL, and Elasticsearch while managing concurrency and flow control.
This article explains what VS Code user snippets are, how they can be customized for different languages and projects, and provides step‑by‑step instructions and tips for creating and using snippets to accelerate development and maintain consistent code style.
Canyon extends the IstanbulJS ecosystem with a Babel‑based instrumentation plugin, real‑time coverage aggregation, and cloud‑native reporting to enable large‑scale end‑to‑end UI automation coverage for modern JavaScript front‑end applications, including SPA, MPA, and React Native environments.
This guide details the workflow system’s underlying frameworks, functional modules, process design operations, form customization, deployment procedures, and task management features, providing a comprehensive overview for developers and administrators to effectively implement and maintain business processes.
This article introduces a web‑integrated proxy tool that requires no installation or configuration, enabling developers to share URLs or QR codes for remote HTTP debugging, mock rule sharing, and seamless integration into web pages or mobile apps, while comparing it with traditional proxy solutions.
This guide explains how to generate shareable poster images entirely on the front end for H5 pages and mini‑programs, compares client‑side, front‑end, and server‑side approaches, reviews libraries such as html2canvas, dom‑to‑image, wxml‑to‑canvas and Painter, and offers solutions for design fidelity, CORS, and performance issues.
This article explains how to design, develop, preview, debug, and publish NPM component extension packages for the Baidu AI‑Speed platform, covering supported tech stacks, extension mechanisms, core modules, development tools, code conversion examples, and common deployment questions.
This article explains why a community feature is vital for mobile apps, outlines steps to create a successful community—including user targeting, quality content, interactive UI, and management—and showcases 58’s comprehensive UI redesign with visual details and new modules.
This article explains how virtual scrolling can dramatically improve the performance of large online document editors by rendering only visible content, discusses various implementation strategies such as progressive pagination, canvas rendering, line‑ and block‑level virtualization, and details state management, view‑locking, fast‑scroll handling, and integration scenarios like anchor navigation, find‑replace, and comment systems, while providing code examples and performance test results.
This article explains how to build a WebSocket client that supports automatic reconnection after network loss and periodic heartbeat messages, provides a drop‑in API compatible with the native WebSocket interface, and includes complete TypeScript and JavaScript implementations with detailed code examples.
This guide explains how to install the Layui-Vue component library for Vue 3, configure it in a main.ts file, create a basic layout template, and highlights the latest release notes including new events, bug fixes, and style optimizations.
Angular 18, the first version released after merging with Google’s internal Wiz framework, introduces stable Material 3 APIs, @defer lazy loading, enhanced control‑flow directives, and full Hydration support, signaling a renewed push for the framework’s performance and developer experience.
This article explains when React's useEffect callbacks run—whether synchronously before rendering or asynchronously after rendering—by analyzing four demos, discussing the impact of event types, rendering workload, and React's internal scheduling rules.
The article explains why front‑back end separation is needed, outlines common collaboration patterns, presents a staged migration from MVC to SPA, and provides detailed API request/response standards, interface versioning, and practical steps for implementing clean separation in modern web projects.
Front‑end engineering combines automation, modularization, componentization, version control, static analysis, testing, and CI/CD to boost development efficiency, code quality, and team collaboration, guiding technology selection, type‑checking, style guidelines, and a five‑stage evolution from build tools to component‑based frameworks.
This article explains how to arrange tags of varying widths in a single line, detect when they exceed the container, and display the overflow count using only CSS features such as counters, view‑timeline animations, masks, and negative margins, without any JavaScript.
Facing the trade‑off between flexibility and speed in low‑code development, NetEase’s cloud music team built Tango—a source‑code‑based low‑code engine that leverages AST manipulation and the TangoBoot framework to standardize front‑end programming, halve view logic, and unify low‑code with traditional development.
This article explains how to preview a wide range of file types—including images, audio, video, markdown, plain text, Office documents, PDFs and external websites—in a React front‑end by using native HTML tags, embed/iframe techniques, and libraries such as marked and highlight.js, while also supporting page or time positioning.
By leveraging native code tools like esbuild, caching strategies, and a custom pre‑compilation workflow that fakes Webpack's DllPlugin output, this article shows how Mars framework teams dramatically cut compilation times—up to 40% faster—while handling module resolution, resource handling, and cross‑platform challenges.
This article outlines the recent updates to the free open‑source Layui UI library, detailing new options, bug fixes, and security patches across components such as laydate, treeTable, form, upload, and more, while highlighting its lightweight, browser‑centric design philosophy.
This curated newsletter presents the latest releases of Node.js, React, and React Native, highlights a blockchain career transition story, summarizes AIGC‑powered low‑code development, systematic data‑governance modeling, import‑statement optimization, techniques for showcasing technical depth, and design proposal guidance for the VUCA era.
This article explains Domain‑Driven Design's Domain Primitive concept from a front‑end perspective, compares it with VO/DTO/PO, outlines its principles, provides concrete TypeScript examples, and shows how applying DP can improve validation, encapsulation, and testability in real‑world projects.
This article examines the common React modal communication problem, compares the conventional controlled‑component callback approach with the useImperativeHandle solution, and introduces a novel pair of hooks (useShareState and useShareValue) that enable seamless state sharing between parent and child components.
Bilibili created a unified front‑end request library using a Koa‑style middleware “onion” architecture—ConfigCtrl, AssembleCtrl, and RequestCtrl—to standardize error handling, cut code redundancy, improve performance, and provide consistent, extensible API calls across SSR/CSR, Vue2/Vue3, and in‑app H5 environments.
This article presents a detailed TypeScript course syllabus covering fundamentals, advanced concepts, and practical applications, including installation, VSCode setup, data types, enums, generics, classes, interfaces, modules, and QR‑code access for learners.
This article explains what Vue 3 custom hooks (Composition API) are, why they are useful for logic reuse, shows how to create both business‑specific and highly reusable hooks with practical code examples, and lists popular open‑source hook libraries for developers.
This article explains how to solve the common problem of loading historical chat records in a WeChat mini‑program by using a two‑line CSS flex column‑reverse trick, handling edge cases such as limited data and scroll‑view issues, and provides a complete Koa WebSocket backend implementation with full code examples.
This article introduces the Douyin open‑source project—a TikTok‑style short‑video app built with Vue and Vite—provides its GitHub link, showcases screenshots, and offers step‑by‑step instructions for setting up and running the project locally.
This tutorial explains how to use the html2canvas library to render dynamic HTML content into canvas images, covering installation, markup definition, styling, script implementation, download handling, and important limitations for creating shareable posters in front‑end applications.
This article introduces the Douyin open‑source short‑video project built with Vue and Vite, provides a free book giveaway link, and gives step‑by‑step instructions for installing Node, cloning the repository, installing dependencies with pnpm, and running the application locally.
This article presents an in‑depth overview of the Luban full‑stack low‑code development platform, describing its goals, architecture, metadata design, drag‑and‑drop page creation, data visualization, API generation, multi‑tenant and multi‑environment support, version management, and real‑world case studies that demonstrate its efficiency and extensibility.
This article shares practical tips for writing clean frontend code, using AI assistants for code improvement, understanding business requirements, reading source code of popular libraries, and mastering front‑end infrastructure such as tooling, monitoring, CI/CD, and technology selection to ace technical interviews.
This article shows how to lock page scrolling when a modal is open by using the new CSS :has pseudo‑class—replacing JavaScript‑driven overflow toggles that fail with nested dialogs—and demonstrates a simple body:has(dialog[open]) selector that works across all modern browsers.
This article explains how to create an input element that sticks to the on‑screen keyboard by listening to visualViewport resize/scroll and focus events, calculating the keyboard’s top position, and dynamically adjusting the input’s CSS transform, with full TypeScript code examples.
This article explains why front‑back end separation is needed, describes the evolution from MVC to SPA, outlines the principles of responsibility and concern separation, and provides a detailed API specification—including request/response formats, pagination, and special field handling—to improve collaboration and reduce integration effort.
This article explains how to set up the environment, import the Baidu Map API, create map containers, generate static map URLs using PHP, and display the resulting map and markers on a web page, providing step‑by‑step code examples for developers.
This guide explains how to choose and implement map visualization layouts—primary map focus, side‑by‑side view, or dual‑panel designs—and details point, line, and area visual elements along with common chart types to improve logistics efficiency and user experience.
This step‑by‑step guide shows how to claim your free Kimi API credit, create an API key, test the service with Postman, and integrate it via Python SDK, frontend projects, or no‑code tools like Dify, enabling anyone to build AI applications without writing code.
The article examines how AI, global competition, remote work, and cross‑cultural demands reshape programmers' careers, highlights the rise of independent developers, and provides a concise reference of essential development tools spanning editors, build systems, testing frameworks, debugging utilities, version control, and database management.
This article shares practical VSCode configuration tips and shortcuts for frontend developers, covering word separators, quick file path navigation, custom logging snippets, code highlighting, explorer tweaks, terminal copy behavior, drag‑and‑drop settings, and language‑specific suggestions for Vue and React, helping improve coding efficiency and happiness.
The growth front‑end team’s transparent‑video visual enhancement scheme uses split‑RGB/alpha MP4s cached as blobs in IndexedDB and rendered via OpenGL, delivering high‑fidelity, low‑size animations with transparent backgrounds, cutting development time by 75 % and achieving 30‑60 fps performance.
This article explains the three common server‑to‑client push techniques—polling, WebSocket, and Server‑Sent Events (SSE)—detailing their principles, advantages, drawbacks, browser compatibility, appropriate use‑cases, and provides a complete Node.js/Express demo with front‑end code.
This tutorial explains how to build a glitch‑style clock animation in CSS by leveraging clip‑path, keyframe animations, random SCSS functions, and layered pseudo‑elements to achieve flickering, distortion, and color‑shift effects.
This article examines common TypeScript type‑reuse issues in a component library, compares type aliases and interfaces, demonstrates using utility types like Omit and Pick, introduces unified base props, shows tuple usage for hooks, and explains function overloads to improve code maintainability and type safety.
This article surveys the full range of file preview options—including commercial services, front‑end JavaScript libraries for PPTX, PDF, DOCX and XLSX, and server‑side conversion tools like OpenOffice, kkFileView and OnlyOffice—providing code examples, pros and cons, and practical recommendations for developers.
The article details NetEase Cloud Music’s end‑to‑end, online‑configurable data‑consumption service and schema‑driven visualization platform that transform raw client logs into ClickHouse records, automatically generate tables and dashboards, and provide observability, dramatically reducing manual effort while supporting over twenty performance metrics for frontend monitoring.
This article details the background, actions, and future outlook of performance and experience optimization for the Five-Star Store mini program, covering template handling, JS error reduction, rendering speed improvements, package size reduction, and systematic testing and iteration mechanisms across multiple device platforms.
