In 2024, a survey of popular websites shows that uncompressed JavaScript bundle sizes vary widely—from as small as 0.2 MB for Wikipedia to over 12 MB for sites like YouTube and Booking.com—highlighting the importance of performance awareness in modern frontend development.
This roundup curates the latest frontend resources—including web performance snippets, Deno’s new JSR registry, Vercel’s AI SDK, VSCode source navigation tricks, architecture design lessons, a Canvas rendering engine guide, React nested component pitfalls, Bilibili analytics platform case study, and product design simplification tips—providing practical knowledge for developers and product teams.
WebAssembly, originating from Mozilla’s asm.js experiment and standardized in 2017, offers a compact binary format that outperforms JavaScript and asm.js, enabling near‑native speed for compute‑intensive web and server workloads, with real‑world adoption in graphics, video, AI, and cloud micro‑services.
The visual event tracking solution replaces costly manual code instrumentation with a Data‑Trackid and relative Xpath system, a VSCode plugin for automatic ID generation, and an SDK that captures clicks and exposures, dynamically loads third‑party analytics, and provides validation, monitoring, and future decoupling for scalable, real‑time product analytics.
This guide introduces a curated collection of VS Code extensions—including themes, basic utilities, Vue and React tools, mini‑program support, code formatters, database helpers, and productivity plugins—helping developers streamline their frontend workflow and improve coding efficiency.
This article shares a decade‑long journey of designing and scaling the QQ front‑end unified access layer, covering business background, overall architecture, solution comparisons, core challenges, observability, and performance optimizations while reflecting on practical lessons for large‑scale front‑end systems.
This tutorial explains how to access a webcam with JavaScript, display the live video in a web page, capture a frame onto a canvas, overlay custom text as a watermark, and export the result as a data URL for further processing.
This article analyzes why barcode scanners lose characters under Chinese input methods, proposes two mitigation strategies—including a keydown‑event listener and a readonly password‑input workaround—and provides a complete Vue/Element‑UI component implementation to reliably capture scanner data without triggering IME or browser autofill.
This article explains the concept and importance of cross‑platform architecture, outlines the three layers of hardware, OS, and application, compares hybrid, framework‑native, self‑rendering, and DSL‑based approaches, and provides practical implementation examples and selection criteria for developers.
This article provides a concise five‑minute overview of JavaScript, covering its origins, dynamic typing, prototype‑based OOP, browser compatibility, essential syntax such as variables, conditionals, loops, functions, and practical use cases like dynamic content, interactivity, game development, and SPA creation, plus learning resources.
Layui v2.9.7 introduces new attributes and options across its select, table, layer, laydate, dropdown, and flow components, fixes several bugs such as column‑dragging and auto‑height issues, and includes miscellaneous improvements like Unicode source conversion, making the lightweight UI library even more practical for fast web development.
The Cloud Music overseas team built the Qianyu Platform, an automated i18n system that replaces manual copy handling with Babel‑based key generation, auto‑uploads, CDN publishing, and per‑language builds, dramatically boosting development efficiency, reducing maintenance, and delivering faster, lightweight multilingual experiences.
This guide walks you through five actionable tips for integrating Bit with Vue and Vite, covering component setup, environment variable management, custom Vite configuration, Vue DevTools usage, and cloud deployment, all illustrated with clear code examples and screenshots.
This article explains the challenges of uploading large files over 100 MB, compares them with regular uploads, details the core principles and common problems, and presents complete front‑end chunking and back‑end merging implementations with resumable and instant upload techniques, plus mature solution recommendations.
2024 brings rapid AI advances and evolving front‑end technologies, urging developers to adopt TypeScript, master micro‑frontend architectures, embrace server‑side rendering with Next.js, reconsider low‑code and Flutter, and explore full‑stack frameworks, while providing curated resources and insights for staying competitive.
This article walks through the author's journey of rebuilding an online resume with Vue 3 and TailwindCSS, explaining core Tailwind concepts, practical code examples, theme switching, and build‑time optimizations to achieve a maintainable, responsive, and lightweight frontend solution.
The veteran front‑end engineer chronicles a decade of building QQ’s large‑scale products, detailing how the new Frontend Unified Access Layer replaced fragmented SDKs with a high‑performance, scalable, secure gateway built on an internal http2rpc framework, while tackling legacy protocol coexistence, observability, alert fatigue, and targeted performance optimizations.
This article benchmarks Vue3's Proxy-based reactivity against the traditional Object.defineProperty approach across initialization, read, write, multiple object creation, and nested‑object scenarios, revealing where each technique excels and why Vue3 ultimately prefers Proxy despite nuanced performance trade‑offs.
This article compares Electron and the newer Tauri framework, highlighting Electron's large binary size and Tauri's Rust‑backed, lightweight approach that lets web developers build native desktop applications with familiar JavaScript, HTML, and CSS.
The jQuery 4.0.0 beta release introduces performance boosts, drops legacy IE support, removes dozens of deprecated APIs, updates event ordering, adds native FormData handling, eliminates automatic JSONP upgrades, and migrates the source to ES modules, with an upgrade guide and migration plugin available.
This article provides a step‑by‑step tutorial on building a virtual waterfall (masonry) list component in Vue 3 using TypeScript, covering component structure, props, state management, rendering logic, handling variable item heights via temporary DOM measurement, performance optimizations, and practical usage examples.
This tutorial demonstrates how to create a visually striking card component with light‑following and 3D parallax effects using React, Tailwind CSS, and custom hooks, covering setup of three boxes, mouse event handling, CSS transforms, and reusable hook encapsulation.
JD’s Huamei platform leverages AI to automatically convert design mockups into usable front‑end code, streamlining UI reconstruction and business‑logic implementation, reducing repetitive work, and boosting development efficiency for financial app teams, while outlining its workflow, capabilities, limitations, and advanced features.
This article documents a step‑by‑step exploration of four native HTML/CSS/JS approaches to create an animated circular dashboard gauge on an H5 page, discusses the challenges encountered, and presents a final SVG‑based solution with code examples.
The article explains why both frontend and backend data validation are essential for web applications, outlines specific validation checks for each side, and discusses the combined benefits of improving security, data integrity, user experience, and system reliability.
This article details how JD's massive‑scale shopping mini program achieved a two‑fold performance boost through systematic front‑end optimizations—including code‑package reduction, independent sub‑packages, async loading, pre‑download, selective code injection, first‑screen rendering tricks, and release‑frequency management—providing practical guidance for developers targeting large‑user bases.
Discover the best CSS frameworks for 2024—including Bootstrap, Tailwind, Foundation, Bulma, and UIkit—detailing their key features, integration methods, and code examples, to help developers choose the right toolkit for rapid, responsive, and maintainable front‑end design.
The article explains how a custom Webpack resolve plugin enables static compilation for a multi‑scene SaaS car‑service platform by separating brand‑specific logic into suffix‑named files, allowing compile‑time branching, smaller scenario‑specific bundles, cleaner code, easier testing, and faster cold‑starts.
This article explains React Hooks introduced in version 16.8, detailing the purpose and usage of common hooks such as useState, useEffect, useContext, useReducer, useRef, useCallback, and useMemo, and provides practical code examples for each.
shadcn/ui is a rapidly popular, copy‑and‑paste component collection that provides accessible, highly customizable Tailwind‑styled UI elements with a two‑layer architecture, theme editor, dark‑mode support, and CLI, offering simplicity and fine‑grained control while requiring manual integration and careful bundle‑size management.
This article shares the 2023 performance‑optimization experience of JD's Tongtian Tower front‑end project, explaining how reducing page load time, improving interaction response, and applying systematic analysis tools and best‑practice techniques can boost first‑screen speed by nearly 60 % while maintaining stable, iterative development.
This article demonstrates how to implement small file uploads, large file chunked uploads, breakpoint resume, and instant upload using Spring Boot 3.1.2 on the backend and native JavaScript with spark‑md5 on the frontend, covering configuration, code examples, and practical considerations.
This article demonstrates how to dramatically reduce image size and loading time in a WeChat mini‑program by converting to WebP, adjusting resolution via OSS parameters, using CSS sprites, and implementing lazy‑load placeholders, with before‑and‑after performance data and reusable component code.
Bilibili’s web upload page now uses the browser‑native WebCodecs API to decode video frames client‑side, replacing slower Canvas and Wasm‑FFmpeg pipelines, achieving 2.5–5× faster cover‑frame extraction with lower memory use, while supporting MP4/WebM and improving user experience.
Learn step‑by‑step how to create a signature board for DingTalk mini‑programs using Taro and React, covering canvas creation, drawing logic, size adjustments, image export, undo functionality, landscape mode handling, and common pitfalls, so you can add reliable boss‑signed reports to your app.
This article explains how to use the Lottie library to replace hand‑written CSS/JS or GIF animations with vector‑based, cross‑platform switch animations, covering installation, configuration options, direction control, playback speed, JSON modification, and a helper function for updating values.
This article explains how to create a continuous "one‑shot" 3D scrolling effect with CSS3 by leveraging perspective, 3D transforms, and animation, providing detailed code examples and practical tips for front‑end developers.
This article explains what frontend event tracking (埋点) is, why it is essential for product analytics, when and how to implement it, the different tracking models and reporting methods, as well as practical tips, iteration processes, and common pitfalls for developers and product teams.
React’s upcoming v19 release introduces four experimental hooks—use, useOptimistic, useFormState, and useFormStatus—focused on simplifying data fetching and form handling, allowing developers to read promises or context directly, perform optimistic UI updates, and manage form state and submission status within React components.
This article showcases five recent UI/UX case studies—including NAVER's interactive banner, Agoda's coupon animation, Airbnb's direct review button, Zomato's membership effects, and TooGoodToGo's dynamic pricing—highlighting how motion design and thoughtful interaction can capture attention, reinforce brand messaging, and improve user experience.
This article curates essential front‑end topics—including SSE real‑time push, component design, React state‑management comparison, performance‑panel analysis, file parsing methods, and the 2024 web‑front‑end trends—while also introducing the Cloud Classroom front‑end team’s mission and structure.
This article guides front‑end developers through creating a discreet VSCode extension that fetches and displays content such as news or comments, detailing required knowledge, installation steps, key APIs like status bar, commands, quick pick, hover providers, and includes essential code snippets.
This article explains what layout design is, why it matters, and walks you through the four fundamental principles—contrast, alignment, grouping, and repetition—illustrated with real UI examples to help designers create clear, engaging, and visually balanced interfaces.
This article explains JD.com and Huawei's partnership to launch a HarmonyOS native JD app, details how the Taro front‑end framework adapts to HarmonyOS ArkTS and ArkUI, and provides a three‑part guide for developers to create their first HarmonyOS native application.
This article explains why both front‑end and back‑end data validation are essential in modern web applications, outlines the specific checks each layer should perform—from required fields and format rules to security safeguards like XSS/CSRF protection—and highlights the combined benefits for user experience, server load, and overall system integrity.
This article explains how to convert HTML pages into multi‑page PDF files using html2canvas and jsPDF, covering basic setup, handling pagination, scaling, image insertion, and practical code examples to ensure readable, correctly paginated PDFs in front‑end projects.
Layui Vue is a Vue 3‑based desktop UI component library that continues the classic design of the original Layui, offering ready‑to‑use components, a brief history of its evolution, and a detailed update log highlighting new features and bug fixes as of January 2024.
This article introduces a Vue 3 GridList component that supports responsive grid layouts, server‑side pagination via a request function, and virtual scrolling to render only visible items, providing performance improvements for large data sets while offering clear usage examples and full source code.
This article surveys recent frontend and AI developments, explaining R&D efficiency, showcasing a Rust-powered frontend scaffolding tool, outlining six basic AI agent types for enterprise use, defining AIGC, and presenting practical CSS color‑adaptation and Antd style‑override techniques.
Gaode solved the WebGL‑context limit in AMap by rendering all visual layers on a single canvas with a shared context, disabling autoClear, preserving depth ordering, and using per‑layer EffectComposers merged via a final composer, enabling multiple scenes and post‑processing without exceeding browser limits.
This curated newsletter shares the latest frontend news and article recommendations, covering JavaScript rising stars, ESLint upgrades, upcoming jQuery 4.0, V8's Maglev compiler, canvas collision detection, CSS animation control, design‑to‑code workflows, distributed theory basics, version‑update popups, and anti‑mistake design principles.
The article explains how a simple CSS mask‑image technique can replicate Bilibili's subtitle behavior that avoids covering on‑screen characters, providing a minimal HTML/CSS demo, visual results, and a caution about the experimental nature of the property.
This guide introduces ProFlow, a React‑friendly UI library for creating modern graph visualizations and editors, covering installation, basic FlowView usage, data handling, interactivity callbacks, advanced FlowEditor features, custom nodes, and real‑world case examples.
This article introduces Vue 3 Hooks, explains their relationship to the Composition API, compares them with mixins and class‑based patterns, provides best‑practice guidelines, and offers multiple TypeScript code examples for creating, using, and managing custom hooks to improve code reuse and maintainability.
This article introduces CSS Relative Color syntax, explains its core transformation functions, demonstrates practical examples such as generating green text from red, creating unified button hover/active colors, and adapting text color to any background using the new color‑contrast() function.
Learn what Pusher is, compare it with raw WebSocket, and follow a detailed walkthrough that shows how to set up a Pusher account, configure a channel, and implement both client‑side JavaScript and server‑side PHP code to publish and receive real‑time events.
This tutorial walks through creating a 3D map in a Vue project using ECharts, covering JSON map import, 2D to 3D conversion, region labeling, default and interactive highlighting, background gradients, realistic materials, 3D bar charts, and lighting effects with complete code examples.
This guide introduces front‑end unit testing with Jest, explaining TDD and BDD concepts, installation, writing simple and ES6/TypeScript tests, configuring coverage, using common matchers, and employing mock functions, timers, and module mocking to ensure reliable, maintainable code.
This article reviews the most common conditional rendering approaches in React—including if‑else, ternary operators, logical AND, nullish coalescing, switch statements, strategy patterns, ErrorBoundary, higher‑order components, and render props—explaining their usage, advantages, code examples, and best‑practice cautions.
The article describes an AST‑driven command‑line tool that automatically upgrades a Taro 1.x mini‑program to 3.x by updating dependencies, converting imports, restructuring files, consolidating styles, replacing deprecated APIs, and adjusting build settings, offering faster, more reliable migration than the labor‑intensive manual approach.
This article introduces Lottie for web, explains how to install the lottie-web package, demonstrates basic usage with JavaScript code, details the animation instance and Lottie API methods, covers event handling, and provides a reusable Vue component wrapper for seamless integration.
Guming’s Front‑End Data Center integrates monitoring, performance, logging, and analytics for web, mini‑programs, Flutter clients, and Node.js services, offering real‑time alerts, high availability, sampling, multi‑channel data pipelines, custom charting, and detailed CPU/GC profiling to streamline issue diagnosis and business insights.
This article explores the essential components of modern frontend architecture, covering concepts such as modularity, componentization, code organization, state management, network layer design, performance optimization, security measures, automated testing, and continuous deployment, with practical code examples in React, Vue, Redux, Axios, and GitHub Actions.
This article walks through setting up and debugging a CORS‑handling proxy in a React 18 project with create‑react‑app, using http‑proxy‑middleware to forward /api requests, configure logging, and verify the real request paths.
Vue 3.4 introduces a rewritten template compiler that doubles parsing speed, a refactored reactivity system with more precise effect triggering, stable defineModel macro, v‑bind shorthand, improved hydration error messages, and several deprecated features removed, while recommending dependency updates for a smooth upgrade.
This article explores high‑frequency frontend design patterns, demonstrates how mastering CSS Grid simplifies layouts, introduces Node.js Addons for native capabilities, reviews Meta’s StyleX CSS‑in‑JS library, recaps major 2023 frontend developments, and highlights the Cloud Academy frontend team.
Unit testing prevents recurring bugs in large front‑end projects by forcing modular, testable code, and with Jest—especially for Vue—developers can quickly write, run, and enforce comprehensive tests covering props, methods, slots, Vuex, and coverage thresholds, while AI tools can scaffold boilerplate test files.
This tutorial demonstrates how to build a visually appealing login interface using HTML and CSS, featuring a dynamic water‑ripple effect, animated elements, and custom form styling to provide users with a refreshing login experience.
The article details Meituan’s store‑front development team’s progression through standardization, online‑ization, automation and digitalization, describing the challenges of multi‑platform coordination, the implementation of a unified DevOps workflow, and the resulting continuous‑delivery infrastructure that now supports thousands of front‑end projects across iOS, Android, H5 and dynamic bundles.
The Nuxt.js 3.9 update, released on December 25, introduces Vite 5 and Rollup 4 support, Vue 3.4 compatibility, experimental interactive server components, a new loading indicator API, a callOnce utility, refined error types, performance tweaks, and an easy upgrade command for developers.
Facing heavy load times on the Feitian Service Platform’s customizable homepage, the team applied a three‑stage front‑end performance overhaul—shrinking resources, prioritizing critical paths with progressive loading, and leveraging caching via SWR and Service Workers—resulting in sub‑second page renders and a smoother user experience.
This article examines the vital role of tables in B‑end CRM applications, identifies common visual and interaction problems, and presents a set of readability‑ and operability‑focused design guidelines—including typography, component sizing, hover feedback, header handling, row and column treatments—to enhance user efficiency and experience.
This article explains how to handle sudden login redirects caused by expired JWT access tokens in a web platform by using Axios response interceptors to automatically refresh tokens, queue failed requests, and retry them without disrupting the user experience.
Taobao’s Night Taobao (BFace) redesign transforms the homepage into a 24‑hour entertainment hub, offering night‑time live streams, short videos and games, using modular front‑end components, cross‑container state sharing, and extensible data pipelines that enabled rapid iteration, tripled user engagement and powered the Double 11 gala.
This article examines advanced JavaScript Promise techniques by presenting practical implementations for cancelling a pending promise and for notifying progress during asynchronous operations, complete with code examples, explanations of underlying concepts, and discussion of their relevance in interviews and real‑world development.
This article curates key frontend topics—including micro‑frontend challenges, precise setTimeout usage, object emptiness checks, project refactoring strategies, React Fiber architecture, and Facebook's StyleX styling system—providing concise explanations and practical guidance for modern web development.
This article thoroughly analyzes how the Taro front‑end framework is adapted to Huawei's HarmonyOS ArkTS by employing a runtime‑centric adaptation approach that maps Taro's virtual DOM to ArkTS UI components, reducing compile‑time conversion errors and improving developer experience.
This article introduces Huawei's upcoming HarmonyOS Next, explains the ArkUI framework with its declarative ArkTS and Web‑like development models, compares the two paradigms, and details how the Taro framework can bridge Web development practices to ArkTS for cross‑platform app creation.
This article explains how to implement image lazy loading in PHP by extracting image URLs, generating placeholder tags with data-src attributes, monitoring scroll events via JavaScript, and applying CSS transitions, providing a step‑by‑step guide with complete code examples to improve page load performance.
This article examines the history, design motivations, and trade‑offs of modern frontend frameworks—covering Svelte’s new runes feature, the rise of component‑based architectures, template abstraction, cross‑platform compilation, and the differing philosophies of React, Vue, and Svelte—to explain why added complexity ultimately improves developer productivity and code maintainability.
The article explains how frontend interface encryption, JavaScript compression, obfuscation, and WebAssembly‑based encryption—combined with signature verification and anti‑debugging tricks such as DevTools detection and infinite debugger loops—can raise the cost of reverse‑engineering client‑side logic, though determined attackers may still eventually break the protection.
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.
