Geeker-Admin is an open‑source admin panel built with Vue 3.3, TypeScript, Vite 5, Pinia and Element‑Plus, offering a rich ProTable component, dynamic routing, theme switching, i18n, extensive custom directives, and full linting and commit tooling for rapid frontend development.
In this article the author, creator of the Vue3 mobile component library Varlet UI, shares the latest architectural changes, monorepo setup, design system, development tooling, testing, build outputs, documentation deployment, playground, and VSCode extensions, reflecting on lessons learned over the past two years.
This roundup highlights the latest frontend tools and deep‑dive articles, covering StyleX, Astro 4.0, Vitest 1.0, VS Code 1.85, lock mechanisms for single‑threaded concurrency, bizarre JavaScript behaviors, target="_blank" security flaws, plugin system designs, designer‑developer workflows, and canvas collision detection techniques.
Ant Design Mini now supports 16 core components on both Alipay and WeChat mini programs, detailing platform differences, a TSX‑based neutral template engine, AI‑assisted legacy conversion, and functional‑mini component logic to enable seamless cross‑platform development.
By analyzing latency sources and introducing a pre‑loading ‘prepare’ step with new player APIs, the cloud‑editing team reduced audio start‑up delays by roughly 200 ms on average—cutting half‑second waits to under three‑hundred milliseconds and markedly improving streamer workflow.
This article explains why Vite is faster than bundlers like Webpack, introduces the concept of dependency pre‑bundling, walks through its implementation using esbuild plugins, and shows how to build a simplified custom Vite server that scans, resolves, and pre‑bundles third‑party modules.
This article provides a comprehensive overview of Web Components, covering their development timeline, core concepts such as Custom Elements, Shadow DOM, templates and slots, practical code examples, lifecycle callbacks, debugging tools, and real‑world usage scenarios for modern frontend development.
The article traces the evolution from monolithic applications to microservices and serverless architectures, outlines their benefits and pitfalls, proposes a balanced four‑component model, and shows how modern meta‑frameworks and BaaS solutions can dramatically reduce technical complexity.
This article dissects the end‑to‑end technical workflow of sending a customer‑service IM message, covering reliability, real‑time delivery, ordering, idempotency, performance bottlenecks, async handling, requestAnimationFrame, protobuf migration, and user‑experience optimizations, while sharing concrete metrics and real‑world solutions.
This guide explains what Elastic Real User Monitoring (RUM) is, outlines its key benefits, and provides step‑by‑step instructions with code snippets for integrating the Elastic RUM JavaScript agent into a Hugo static site, including configuration parameters and how to view the collected data in Kibana.
2023 saw rapid evolution in the front‑end ecosystem, highlighted by major events, a controversial Gemini AI demo, SkyWalking‑based performance and error monitoring, innovative text‑overflow handling, CSS techniques that boost long‑list rendering by up to seven times, and an automatic, non‑intrusive skeleton‑screen generation solution.
This article introduces JavaScript’s origins, core characteristics, and versatile roles—from front‑end scripting in browsers to server‑side execution with Node.js—while explaining its event‑driven model, variable declarations, DOM interaction, and asynchronous programming features for beginners.
This article explains how to create custom Ant Design select components that display additional information via integrated tables, covering form implementation, basic and advanced versions with infinite scrolling, handling Ant Design bugs, and documenting the components using Dumi, complete with code examples.
The article presents a practical permission‑management strategy for a large‑scale front‑end monorepo that merges Git‑hook validation with GitLab’s protected branches and role‑based access, defines a clear directory hierarchy, outlines workflow controls, and explores extensions such as fine‑grained ACLs and file‑access logging to prevent unauthorized file changes.
This article demonstrates how to implement cross‑tab communication in browsers by converting screen and client coordinates and using the BroadcastChannel API to synchronize draggable elements across multiple windows, complete with full HTML/JavaScript code examples.
Jinkela Pipeline is an experimental front‑end DevOps glue tool integrated into the Dejavu platform that unifies and automates release workflows—handling environment variables, mono‑repo structures, parallel GitLab jobs, and plugin extensions—to reduce manual steps, inconsistencies, and anxiety for developers while enabling low‑code pipeline composition and future ChatOps integration.
The article traces the historical evolution of front‑end frameworks—from static pages and jQuery to modern component‑based libraries like React, Vue, and Svelte—explaining why added complexity and compile‑time features such as Svelte’s runes improve maintainability, reactivity, and cross‑platform capabilities while weighing each framework’s design philosophy and trade‑offs for developers.
This comprehensive guide explains navigation design fundamentals, system classifications, and component choices, helping designers build clear, user‑friendly interfaces that guide users efficiently through digital products while avoiding common pitfalls.
This article explains how to create, compile, and integrate a Rust‑based WebAssembly component for accelerating 3D model vertex merging in the browser, covering tool installation, code examples, data transfer techniques, performance tuning with hashing, and compatibility adjustments for both webpack and Vite.
This article critiques Element‑Plus’s API inconsistencies, debates Vue 3’s ref versus reactive usage, clarifies the v‑for versus v‑if priority question, introduces Volta as a superior Node version manager, examines ESLint versus Prettier decisions, and recounts Didi’s costly Kubernetes outage.
The article presents a comprehensive strategy for handling API outages by storing data locally with IndexedDB, synchronizing updates through a CDN, and implementing Axios interceptors and Node‑based scheduled jobs to ensure seamless user experience without white‑screen failures.
This article presents a comprehensive set of performance optimization techniques for Taro mini‑program development, covering initial render improvements, update efficiency, long‑list handling with VirtualList and VirtualWaterfall, setData data reduction, scroll‑penetration prevention, preloading strategies, and an upcoming CompileMode feature.
This article explains why browsers cancel pending requests during navigation, the risks of lost data, and demonstrates reliable solutions using JavaScript—first by awaiting fetch, then leveraging the fetch keepalive option—to guarantee logs reach the server without delaying page loads.
This article explains how to create a pure‑frontend “quantum entanglement” effect by synchronizing multiple browser windows using three.js, detailing the index.html setup, the main.js logic for scene and window management, and the WindowManager class that tracks window shapes via localStorage.
This article introduces a WeChat mini‑program for habit tracking that combines PHP‑MySQL backend services with a UniApp‑based front‑end, detailing its habit‑check‑in, focus‑training features, custom calendar UI styling, and chart integration for statistical visualization.
By implementing offline caching of libraries, template pre‑rendering, native player embedding, split‑screen loading, API slimming, WebP image delivery, and UI tweaks such as title‑bar customization, hide‑nav flags, pull‑to‑refresh, early background color and placeholder optimization, the H5 special‑topic pages in the mobile app WebView achieve up to 60 % faster first‑screen loads, dramatically lower network usage, and a smoother, more immersive user experience.
This article introduces core frontend design patterns—including Singleton, Proxy, Strategy, and Observer—explains their underlying principles such as Single Responsibility and Open/Closed, and provides practical code examples and visual illustrations to help developers apply them effectively.
This article explains the origins of React Server Components, how Next.js v14 integrates RSC and App Router, the three release channels (Latest, Canary, Experimental), and provides step‑by‑step guidance for using RSC both inside and outside of Next.js with code examples and webpack configuration.
A Chrome proxy plugin was built to intercept micro‑frontend requests and map online URLs to local development servers, eliminating the need to launch both parent and child apps, restoring hot‑module replacement speed, offering one‑click rule configuration, and achieving full coverage and faster development for DeWu’s team.
This article explains how DataWind’s frontend team replaced the outdated Dva‑based data flow with a new Redux‑plus‑hook solution called HookStore, detailing the pain points of complex initialization, legacy async syntax, tight module coupling, and showing migration steps, code examples, and benefits such as multi‑instance support and OpenAPI decoupling.
NetEase Cloud Music’s mid‑platform frontend team tackled fragmented product lines and low throughput by standardizing metadata, revamping cross‑team workflows, introducing bi‑weekly reviews, adopting a hybrid micro‑frontend architecture, and building reusable low‑code components and backend code‑generation tools, which doubled demand throughput while highlighting template benefits and remaining asset gaps.
This article explains the background, on‑device effects, implementation architecture, code samples, and optimization considerations of the OPPO universal card integration within Alipay, detailing both hosted and non‑hosted approaches, SDK usage, and multi‑entry UI strategies.
This article explains how to protect confidential business documents by implementing page‑level watermarks using canvas and pseudo‑elements, and how to add robust watermarks to images via OSS parameters or client‑side canvas processing, while preventing removal through MutationObserver.
This tutorial explains how to build a real‑time fire‑equipment monitoring application where a Vue.js front‑end receives abnormal event notifications via WebSocket from a SpringBoot back‑end that broadcasts device status changes instantly.
This article introduces a curated set of modern frontend resources—including the View Transition API, Astro framework, GPT‑4 usage guide, Rspack bundler, CSS inspiration libraries, and the Reqable HTTP debugging tool—while highlighting the Cloud Academy frontend team's mission and invitation.
The article details how the BI platform’s bulky, tightly‑coupled filter was refactored into a standalone, generic ‘bi‑filters’ library managed with Lerna and Vue‑CLI, enabling on‑demand imports, independent packaging, and a three‑layer design that improves extensibility, universality, robustness, reduces code size, and simplifies maintenance.
This article explains the limitations of traditional web storage, introduces IndexedDB and the localForage library as a simplified, asynchronous, and high‑capacity solution for client‑side data persistence, and provides practical code examples and Vue Pinia integration.
The article explains how a configurable yellow banner system can be used on web interfaces to promptly inform users about service disruptions, guide their actions, increase transparency, improve experience, and outline implementation considerations such as configurability, persistence, and independent deployment.
This article explains how the Titian component library uses Design Tokens to abstract visual attributes like color, typography, spacing, and shadow, allowing seamless theme customization, global and component-level styling, dark mode support, and multi‑framework integration for consistent front‑end development.
This article curates recent frontend breakthroughs—including Electron memory tuning, printer integration, efficient file streaming, Chrome 117's SHA‑1 deprecation, native JavaScript array grouping, and continuous user‑experience improvement—offering practical insights for modern web developers.
The guide explains how Alibaba Cloud Codeup integrates the CodeBlitz WebIDE, detailing its default WebIDE access, core features such as code browsing, search, syntax services, GitGraph and CodeRunnerForWeb, and provides step‑by‑step instructions for installing the IDE package, adding language packs, plugins, filesystem and third‑party Git service integrations, plus a lightweight editor component.
The article explains how modern browsers let developers actively control resource loading order with Priority Hints and the fetchpriority attribute—using preload links, fetch requests, image tags, and script tags—to boost performance on limited bandwidth, while warning against overuse.
This article investigates whether WebAssembly truly outperforms JavaScript by compiling Rust to wasm and comparing execution times of Fibonacci and convex‑hull algorithms, revealing that data copying and serialization overhead can make wasm slower in realistic front‑end scenarios.
This article uses a fictional story to illustrate a front‑end white‑screen problem on an old Android phone, analyzes the root causes such as unsupported Chrome versions, missing globalThis and Vue loading failures, and provides a step‑by‑step Vite legacy downgrade solution with code examples and configuration tips.
This article explains the core principles of virtual scrolling and provides complete React implementations for three types of virtual lists—fixed‑height, variable‑height, and dynamic‑height—using react-window, including detailed code snippets, performance considerations, and optimization suggestions.
This article surveys recent frontend developments, including detailed SVG rendering techniques, best‑practice code standards with ESLint, Prettier and Husky, emerging trends such as Next.js‑embedded SQL, Vite’s roadmap and Node.js 21’s Stream API upgrades, plus practical UX guidance for legacy browsers and a glimpse of a leading frontend team.
This guide introduces Layui‑Vue, a Vue 3 desktop component library, showing how to install it via npm, configure it in main.ts, and build a basic layout using Layui components, along with a brief changelog and documentation links.
The article details the motivation, design, architecture, key features, deployment workflow, and future roadmap of Ctrip's PGClowcode low‑code platform, which enables rapid visual development of backend pages through a front‑end React UI and a Spring WebFlux backend, addressing common challenges in large‑scale internal tool development.
This article explains the background, definition, calculation methods, measurement techniques, and practical optimization strategies for Cumulative Layout Shift (CLS), a key web‑performance metric, and provides JavaScript code examples for tracking and reporting CLS values.
The article reports that jQuery version 4.0.0 is 99% complete according to its GitHub milestone, with only one remaining issue related to ESLint upgrades, and highlights the library’s impact on modern JavaScript development.
This article examines various user behavior recording methods—including WebRTC video capture, canvas-based screenshot recording, and DOM snapshot recording with rrweb—detailing their technical implementations, advantages, limitations, and suitable application scenarios for product analysis, debugging, and automated testing.
This article explains front‑end engineering, tracing its evolution from simple page building to modern modular architectures, and details how tools like npm, CommonJS, AMD, CMD, ESModules and webpack address challenges such as scope pollution, code standards, resource optimization, testing, CI/CD, and team collaboration.
This article explains why software architecture matters, defines the essence of Clean Architecture, compares it with Hexagonal and DDD layered models, and walks through a practical, step‑by‑step process—from business analysis and domain modeling to layer implementation and code examples—showing how to reduce complexity and maintenance cost.
This article examines whether Pinia or Vuex is required for Vue 3 projects by comparing their features, discussing scenarios such as shared state, devtools, hot‑module replacement, TypeScript support, SSR, and offering simple native alternatives with code examples.
This article explores how Wuqi integrates AI into its low‑code platform to automate UI generation, logic customization, and data analysis, discusses the DSL‑based architecture, multi‑AI task coordination, and evaluates scenarios where AI enhances efficiency versus when traditional low‑code remains preferable.
This article explains how to build three kinds of virtual scrolling lists—fixed‑height, variable‑height, and dynamic‑height—using React‑Window, covering core principles, detailed implementation code, performance considerations, and practical tips for handling irregular item sizes.
This article describes a comprehensive solution for notifying B2B web users about outdated frontend versions, covering the problem background, version number generation, trigger conditions, micro‑frontend adaptation, detailed plugin and React component code, integration steps for main and sub‑applications, debugging guidance, and measured user impact.
This article explores how to capture and process screenshots of web pages directly in the browser, discussing canvas drawImage basics, pixel extraction, the trade‑offs of using html2canvas versus dom‑to‑image, performance and bundle size considerations, and alternative plugin‑based approaches.
This article walks through a real‑world micro‑refactor of a React page, detailing the analysis of component dependencies, the step‑by‑step extraction of a tangled UI block into a reusable component, and the testing strategy that ensures the new code works without breaking existing functionality.
This guide introduces VTable, an open‑source high‑performance table component built on VRender, covering installation via npm or CDN, basic usage, table types, cell rendering options, interaction features, theming, and performance characteristics for modern web applications.
The article presents a front‑end API management approach that organizes CRUD functions into unified export statements, object‑oriented modules, and a central mapping table, demonstrating how these patterns improve code readability, maintainability, and development efficiency for large backend‑driven projects.
This article explains why front‑end data‑collection (exposure) points are crucial, outlines three main techniques—estimating visibility from paginated data, listening to scroll events with bounding‑box calculations, and using the IntersectionObserver API—detailing their implementation, advantages, drawbacks, and best‑practice usage across H5, mini‑programs, and Taro.
This article introduces several popular open-source CSS frameworks on GitHub, such as Bootstrap, Foundation, Bulma, Tailwind, UIkit, Milligram, Pure.css, and Tachyons, describing their features, usage, and repository statistics to help developers choose the right tool for efficient web design.
This article explains what the Back‑Forward Cache (bfcache) is, how it works across browsers, the page lifecycle events involved, common pitfalls that prevent caching, and practical testing methods to ensure optimal front‑end performance.
This article explains how to combine Monorepo and micro‑frontend architectures using pnpm and Micro‑App, covering the concepts, technical selections, step‑by‑step setup of base and child applications, shared modules, configuration, code standards, mock services, Docker/Nginx deployment, and best practices for frontend development.
This article explains why web performance matters, introduces key user‑centric metrics such as First Contentful Paint, Largest Contentful Paint and Cumulative Layout Shift, describes how to measure them with tools like Chrome DevTools, Lighthouse and ftwo, and provides practical optimization techniques including gzip, HTTP/2, CDN, image handling, code splitting and Vue router lazy‑loading.
NetEase Cloud Music’s Lingqu visual‑building platform lets a single front‑end developer drag‑and‑drop DSL cards to design, deploy and manage the high‑traffic Discovery and Music homepage flows, delivering near‑native performance, dynamic iteration, data‑decoupled sourcing, fine‑grained targeting and comprehensive quality‑assurance without traditional release cycles.
This article presents a detailed front‑end code review guide covering quality, functionality, performance, security, testability, readability, reusability, compatibility, polyfill configuration, and practical testing examples such as Cypress end‑to‑end tests, all organized with clear checklists and code snippets.
An in‑depth look at Webpack’s evolution from its 2012 debut to the modern version 5, covering each major release, core concepts like loaders, plugins, tree shaking, module federation, and code‑splitting, plus a practical code example and analysis of its bundled output.
This article explains Vue's diff algorithm in detail, covering prerequisite concepts about VNode, left‑ and right‑side comparisons, handling arrays of different lengths, and the complete implementation with code examples to help developers grasp how Vue efficiently updates the DOM.
This article walks developers through creating a cross‑framework UI button demo using OpenTiny, covering project initialization, framework‑specific adapters for Vue, React, and Solid, and explaining the renderless architecture that enables seamless component reuse across multiple front‑end stacks.
The article explains that HTTP request parameters can be sent as URL‑encoded query strings for GET requests or as various POST body formats—such as application/json, application/x-www-form-urlencoded, multipart/form-data, or text/xml—each requiring the correct Content‑Type header so the backend can parse the data correctly, with JavaScript utilities like FormData, URLSearchParams, or qs helping developers serialize the payload.
The article explains how StackBlitz's WebContainers, a browser‑based container environment, now fully integrates the WebAssembly System Interface (WASI), allowing near‑native speed, secure sandboxed execution of multiple languages such as Rust, Python, C/C++, and introducing new CLI tools and future language support.
Rspress 1.0, an open‑source static site generator from ByteDance’s Web Infra team, leverages the Rust‑based Rspack bundler and MDX support to deliver fast build times, customizable themes, internationalization, multi‑version docs, plugin extensibility, and built‑in features such as search, preview, and view‑transition animations.
This article explains how to create a two‑column waterfall (masonry) layout in a Uni‑App using Flexbox, covering the visual design, CSS styling, data handling, dynamic loading, height calculation, and tab‑switch integration with complete code examples.
This article explains how Baidu Search’s design system was restructured using scenario‑driven thinking, detailing the challenges of asset redundancy and inconsistency, the three‑phase overhaul (unify, engineer, tool), and the resulting improvements in asset clarity, maintainability, and consumption efficiency.
This article explains how to build a customizable Tabs component with a sticky header, click‑to‑scroll navigation, and collapsible content sections using React, CSS position:sticky, IntersectionObserver, and JavaScript, providing complete code examples and compatibility notes for modern web and mobile applications.
This article presents a detailed curriculum covering an opening ceremony, Python fundamentals and advanced topics, Django development (including ORM and authentication), frontend basics with HTML, CSS, JavaScript, jQuery, a Layui UI framework module, and a hands‑on K8s Dashboard web project, followed by recommended reading links.
This article analyzes the limitations of native navigation bars on mobile pages, proposes a reusable H5 navigation‑bar component (@pango/navigation-bar) with performance, cost, and user‑experience benefits, details its architecture, configuration, code usage, exception handling, and adaptation for foldable screens, and outlines the open‑source plan.
This article examines the design and implementation of Tango, an open‑source low‑code engine that leverages ESTree AST standards to enable bidirectional code‑to‑visual‑schema conversion, offering a progressive, source‑code‑driven visual development experience integrated with modern front‑end tooling.
This article presents a detailed front‑end code review guide covering code quality, functionality, performance, security, readability, reusability, compatibility, polyfills, and testing, complete with practical examples, checklist mnemonics, and code snippets for modern JavaScript frameworks.
This article explains the business reasons for introducing TypeScript in a B‑end frontend product, analyzes common runtime type errors, compares TypeScript with plain JavaScript, evaluates costs, risks and benefits, and outlines a practical implementation roadmap.
This article provides a comprehensive guide to VSCode for frontend developers, covering essential keyboard shortcuts, automatic formatting and lint fixing settings, custom snippet creation, recommended extensions, configuration synchronization, and the use of .editorconfig and .vscode directories to boost coding efficiency.
This article explains the concepts of external and internal code beauty, introduces essential frontend tooling such as ESLint, Prettier, Stylelint, husky, lint‑staged, EditorConfig, and CSSComb, and shares practical habits on documentation, naming, and commenting to help developers produce elegant, maintainable code.
This article explains Docker fundamentals, compares containers with virtual machines, details Docker’s core components and common commands, and provides complete step‑by‑step instructions for packaging, building, running, automating, and pushing both a Vite‑based React frontend and an Express‑based Node.js backend using Nginx and shell scripts.
This article provides a systematic overview of drag‑and‑drop low‑code platforms, covering their advantages and drawbacks, core architecture (protocols, material area, canvas, property panel, top bar), implementation details with code examples, and best practices for extensibility, sandboxing, and code generation.
This article examines the core front‑end technologies employed in JD’s Competition Ranking H5 page, covering animation implementations, style configuration, skin switching, poster generation, debugging tools, request handling, and deployment scripts, providing practical insights and code examples for front‑end developers.
The article argues that B‑end applications need clear standards rather than technical hurdles, proposes a low‑code platform with front‑back separation into view, template, and engine layers using JSON Schema and a rule engine, and evaluates its benefits, trade‑offs, and implementation considerations.
Baidu’s mini‑program compiler was completely rebuilt with a self‑designed architecture, multi‑threading, full‑process caching and sourcemap optimizations, delivering 2‑7× faster builds, lower memory usage and smaller output while keeping compatibility with the old system.
This article demonstrates how to implement a data merging feature by creating MySQL tables, building a PHP API that retrieves and combines records from two tables, and developing a Vue.js front‑end that fetches and displays the merged data, complete with full code examples.
This article details the design and implementation of a customizable electronic menu system that evolved from static images to an H5‑based, SVG‑driven, React-powered solution, covering business requirements, technology selection, data binding, rendering, store isolation, and offline stability.
This article outlines the three pillars—professional skills, thoughtfulness, and experience techniques—that determine a frontend developer's level, provides concrete coding conventions, naming guidelines, refactoring advice, and product‑analysis strategies, and emphasizes continuous learning and technical‑debt management to accelerate career growth.
This guide introduces a curated list of ready-to-use website generators—including Mall, WordPress, Docsify, Dumi, Img Cook, Ant Design Landing, Tencent Rabbit Nest, Baidu Analytics, One Nav, Discuz, and popular admin templates—showcasing their key features, deployment methods, and how they enable rapid site creation without deep coding.
This article surveys recent front‑end developments, critiquing React’s perceived stagnation and proposing alternatives, explains cross‑platform compilation techniques, outlines H5 mobile adaptation principles, highlights new Chrome 117 DevTools features, and introduces Huawei Cloud’s TinyEngine low‑code engine for rapid application delivery.
This article identifies nineteen common performance pitfalls in JavaScript and Node.js applications—ranging from improper variable scope and inefficient DOM manipulation to blocking I/O, unoptimized loops, and excessive dependencies—providing illustrative code examples and actionable solutions to improve speed and responsiveness.
The article explains the “front door first” principle for UI component testing, showing how a disabled Buy button can be missed by unit tests, demonstrates proper interaction‑based tests with code examples, discusses interface design and mock usage, and concludes with a promotion for a Python continuous‑deployment course.
Next.js 13.5, the latest version of Vercel’s React‑based full‑stack framework, introduces significant performance improvements, new middleware capabilities, enhanced image handling, and expanded documentation, while supporting edge runtime, IPv6, and experimental features, positioning it as a leading tool for modern web development.
This article explains the pitfalls of overusing the useEffect hook in React, demonstrates how to replace redundant effects with direct state calculations, memoization, and event‑handler logic, and provides practical code examples for improving performance and simplifying component design.
This article explores the challenges and solutions for implementing a web‑page screenshot feature, comparing canvas drawImage, html2canvas, dom‑to‑image, and Chrome extension approaches, while discussing performance, bundle size, and practical code examples for extracting and processing pixel data.
This article introduces essential Lodash functions for handling data in front‑end projects, covering array utilities, object helpers, and practical functions such as deep cloning, debouncing, and flow composition, complete with code examples and real‑world usage tips.
