This article explains how to enable and use the React Profiler plugin in React DevTools to record, visualize, and analyze component rendering performance through commits, flamegraphs, sorting charts, component charts, and interactions, and provides troubleshooting tips for common issues.
The UI2CODE framework from Alibaba's Xianyu team uses machine‑vision and deep‑learning techniques to automatically interpret design screenshots and generate ready‑to‑use Android, iOS, and web code, dramatically cutting UI development effort.
This article explains the technical challenges Google Photos faced—such as handling millions of images, preserving aspect ratios, enabling instant navigation, and maintaining 60fps scrolling—and details the algorithms, data chunking, justified layout, and performance optimizations that make the web UI fast and fluid.
This article explains how to improve web application performance by leveraging persistent caching with proper cache‑control headers, versioning bundles using hash‑based filenames, extracting dependencies and runtime into separate chunks, inlining runtime scripts, applying lazy loading with dynamic imports, splitting code by routes or pages, and stabilizing module IDs with hashed IDs, all using webpack configurations for both version 3 and 4.
This article explains the ESLint rules no‑return‑assign and no‑constant‑condition, shows why they trigger, provides clear examples of problematic code, and offers practical refactoring techniques to resolve the warnings while keeping JavaScript code clean and intention‑clear.
This article revisits and updates a previous guide, replacing webpack3 with webpack4 and adding modern automation concepts, then systematically walks through network transmission, page rendering, and JavaScript blocking optimizations—covering caching, resource compression, sprite generation, GPU acceleration, and server‑side techniques like gzip, CDN, load balancing, and Node.js scaling.
This article presents a thorough guide to improving web performance by optimizing browser loading, leveraging CDNs and reverse proxies, applying server‑side caching and clustering techniques, and refining database queries and indexing to achieve faster, more reliable user experiences.
This article explains the fundamentals and deep internals of React’s setState method, covering basic usage, asynchronous behavior, state‑update pitfalls, functional updates, and the underlying mechanisms such as enqueueSetState, enqueueUpdate, batchingStrategy, and transaction processing, illustrated with code snippets and diagrams.
This article explains how push messages trigger a push event in a service worker, how to access event data, use event.waitUntil to keep the worker alive, and how to configure and display rich notifications with icons, images, actions, vibration, and best‑practice tips across browsers.
This comprehensive guide walks front‑end developers through installing Vim, mastering core editing commands, configuring a personalized .vimrc, and integrating essential plugins for file navigation, code completion, syntax highlighting, Git integration, markdown preview, and more, boosting productivity in modern web development.
Whistle is a Node.js‑based cross‑platform web debugging proxy that lets developers view and modify HTTP(S) and WebSocket traffic, offering features like host binding, request replacement, response status manipulation, script/style injection, and powerful mock data generation for front‑end development.
Taro UI is a multi‑end UI component library built by the Aotu Lab, offering easy installation, rich components, and seamless adaptation across WeChat mini‑programs, H5, and ReactNative, with detailed quick‑start instructions and code examples for developers.
This guide walks you through detecting push support, registering a service worker, requesting notification permission, creating a PushSubscription with proper options, and sending the subscription data to a backend for later use, all using modern JavaScript APIs.
This article walks through Vue.js's internal workflow, covering global overview, initialization and mounting, compilation stages, reactivity mechanisms, virtual DOM creation, and view updating, providing a comprehensive picture for developers seeking deeper insight into the framework.
This comprehensive guide walks experienced front‑end developers through the browser's multi‑process model, internal threading, rendering pipeline, JavaScript single‑threaded execution, event loop mechanics, Web Workers, and performance‑related concepts like macrotasks, microtasks, and hardware‑accelerated compositing.
This article introduces Web Push Notifications, explains how they work with Service Workers, compares the Push and Notification APIs, provides code examples for displaying notifications, and lists resources for trying out push features in modern browsers.
This guide introduces Emmet, the powerful IDE plugin that transforms short CSS‑style abbreviations into full HTML or CSS code, explains how to enable it in IntelliJ IDEA, and provides concrete syntax examples such as descendant, sibling, parent, multiplication, and ID/attribute shortcuts to dramatically speed up front‑end development.
The article outlines Meituan Finance’s front‑end availability challenges in its million‑order payment service and presents a disciplined, end‑to‑end approach—standardized release processes, simple fallback designs, automated testing, robust monitoring, and regular fault‑drill simulations—to ensure stable user experiences across diverse client environments.
This article explains the fundamentals of Service Workers, demonstrates common pitfalls with raw SW code, provides a complete SW implementation, introduces Workbox 3 to simplify caching, compares several caching strategies, and shares practical recommendations for optimal PWA performance.
This article explores the history of ZIP, the challenges of exporting large Excel files from PHP front‑ends, and how using zip.js with HTML5 File API and web workers enables a half‑asynchronous, client‑side compression workflow, outlining its benefits, limitations, and practical considerations for frontend developers.
This article explains the MVC, MVP, and MVVM architectural patterns, detailing their structures, interaction flows, advantages, disadvantages, and suitable scenarios, helping developers choose the right pattern for their projects.
This article walks through the evolution of front‑end architecture—from tightly coupled JSP/Servlet setups, through semi‑separated Ajax‑driven pages, to fully separated front‑end/back‑end designs with Node.js—highlighting their advantages, drawbacks, and practical lessons for developers.
This article explains when React's setState behaves synchronously or asynchronously, how batch updates are merged into a single render, and the proper way to retrieve the updated state using the callback parameter, illustrated with clear diagrams and code examples.
Reflecting on jQuery’s rise, dominance, and eventual decline, this article traces the library’s history, its impact on front‑end development, compares it with contemporary frameworks, and offers advice on understanding underlying JavaScript fundamentals before relying on any library.
This article explains how to resolve the ESLint "no‑empty" and "no‑empty‑function" warnings by refactoring empty blocks, adding explanatory comments, using noop helpers, and validating callbacks, providing concrete code examples and step‑by‑step reasoning.
The article explains how JD.com’s Tongtian Tower platform enables non‑technical operators to create activity pages through a React‑based visual editor, detailing its background, design goals, component architecture, template definition, data handling, quality assurance measures, and future development directions.
This article provides a comprehensive overview of web performance optimization for frontend developers, covering metrics and goal setting, code and DOM optimizations, static asset compression, delivery techniques like async loading and resource hints, build strategies such as tree‑shaking and SSR, and monitoring tools.
This article explains the background, requirements, architectural design, technology selection, component structure, template definition, data handling, quality assurance measures, and future roadmap of JD's internal visual activity page builder platform, Tongtian Tower, highlighting its React‑based frontend implementation and open‑extension strategy.
The article explains how to render custom components in WeChat mini‑programs by compiling React render methods into template classes, using dynamic templates, wx:for directives, and helper functions like miniCreateClass to bridge the gap between React and the mini‑program environment.
The article describes the layered front‑end architecture of 58 MicroChat, covering its network, SDK, UI, integration, storage, security, polyfill, and quality‑monitoring modules, as well as the message center design, cross‑platform compatibility strategies, and ongoing quality‑monitoring practices.
This article outlines common geographic, device, browser, and Salesforce org configuration problems that cause slow page loads in Lightning Experience and provides practical mitigation steps such as network latency testing, browser benchmarking, disabling unnecessary plugins, and optimizing Visualforce and Lightning page designs.
This article examines the challenges of using WeChat Mini Programs, proposes a React‑style component architecture by mapping Mini Program concepts such as Component, Page, and App to React's state, lifecycle, and JSX, and provides concrete code examples for definition, lifecycle handling, styling, templating, and configuration.
This article walks through the fundamentals of SVG, explains its advantages over raster formats, demonstrates how to create shapes and apply SMIL animations with code examples, and shows practical techniques such as masking, referencing, and animating transforms to build rich, lightweight web graphics.
This guide walks through using the qrcodejs library to create QR codes, styling them with logos and borders, converting the DOM to a canvas via html2canvas, handling cross‑origin and clarity issues, and finally exporting the result as a shareable image.
A former communications engineering graduate shares a detailed chronicle of ten front‑end interview experiences across startups, small firms, mid‑size companies, and a pre‑IPO e‑commerce firm in Shanghai, highlighting interview questions, personal reflections, and actionable lessons for aspiring developers.
This article explains the concept of UI metaphor design, categorizes common visual, auditory, and haptic metaphors, and outlines four design approaches—conceptual, feature‑based, structural, and behavioral—providing concrete examples and illustrations to inspire effective interface design.
This article examines WebAssembly’s core features—loading speed, execution performance, memory model, garbage collection, API access, multithreading, and portability—comparing them to JavaScript, and discusses suitable use cases such as high‑CPU tasks, gaming, and image processing, while noting current limitations and future prospects.
Meituan Finance reduced user churn by replacing Node‑based diff generation with a Go‑powered incremental‑update service that uses lightweight goroutines, a three‑layer CDN/API/compute architecture, and pre‑warmed patches, achieving 99.97 % success, 64.9 % incremental updates and roughly 164 KB daily bandwidth savings per user.
SpriteJS, an open‑source cross‑terminal Canvas library from 360 Qiwuchuan, simplifies animation creation by wrapping Canvas APIs in a DOM‑like model, offering event handling, Web Animation support, caching strategies, and integration with multiple graphics and physics engines for data visualization and lightweight games.
From legacy JSP‑based MVC to semi‑separated Ajax‑driven pages and finally fully separated front‑end architectures using Node.js, this article examines each stage’s structure, advantages, and drawbacks, arguing that small‑to‑mid‑size companies must weigh resource constraints, performance, and maintenance before fully embracing front‑end separation.
The article explores how front‑end typography standards—covering base font size, font‑scale formulas, and line‑height rules—can be derived from visual ergonomics, mathematical ratios, and practical engineering constraints, ultimately recommending 16 px as the optimal base size and a line‑height of font‑size + 8.
The article warns developers about the dangers of blindly following flashy technologies—such as over‑abstracted patterns, NoSQL hype, endless scalability promises, micro‑services mania, and agile buzzwords—by highlighting real‑world pitfalls and urging thoughtful, purpose‑driven engineering decisions.
This guide walks through creating seven customized poster images—each featuring a user’s name and tags—by using HTML5 canvas, loading background graphics, measuring and centering text, handling cross‑origin images, and exporting the result as a data URL.
This guide walks through installing Node.js, configuring npm with a Chinese mirror, and using create‑react‑app to quickly create and run a React project on macOS, including all necessary command‑line steps and code snippets.
Yu Guo argues that strong front‑end engineers naturally evolve into full‑stack developers by leveraging their UI‑centric product sense, continuous learning ability, and core technical skills—expanding from HTML/CSS/JS to Node.js back‑end, React‑Native mobile, algorithmic fundamentals, and scalable databases like MongoDB—while emphasizing modular collaboration and practical project‑driven learning.
This article provides a detailed overview of ReactJS, covering its origins, virtual DOM mechanism, component‑based architecture, common misconceptions, setup steps, JSX syntax, component properties, state management, lifecycle methods, and practical code examples for building interactive web interfaces.
This article introduces SpriteJS, a cross‑platform canvas library from 360 Qiwang Team, showing how to create structured UI, draw shapes, apply transitions, use the Web Animation API, work with textures, paths, groups, events, D3 integration, physics engines and particle systems, all with practical JavaScript code examples.
This article explains why React Fiber was introduced, describes its core concepts such as the fiber tree, work‑in‑progress tree, double buffering, priority scheduling, and lifecycle changes, and summarizes the new capabilities it brings to improve UI performance and responsiveness.
Yu Guo’s talk surveys future‑oriented full‑stack trends—rising languages like Python, mobile‑first Swift, shifting frameworks from jQuery to React/Vue, evolving build tools, and practical learning strategies such as deliberate practice, skill‑model mapping, and algorithmic optimizations—emphasizing continual adaptability for developers.
The article walks through the evolution of front‑end development from traditional JSP/Servlet MVC through semi‑separated Ajax‑driven pages to fully separated front‑back architectures, highlighting each stage’s structure, advantages, drawbacks, and the practical considerations that make full separation risky for small‑to‑medium projects.
This article details how the Qidian reading page was optimized by advancing the scroll trigger, continuously preloading upcoming chapters, and applying a throttled scroll handler, resulting in sub‑second load times, minimal loading indicators, and a smoother user experience.
This guide walks you through the essential components of a WeChat mini‑program, covering global app.json configuration, the App() entry point with its lifecycle callbacks, and the Page() definition with its data and lifecycle methods, illustrated with practical examples.
The article examines front‑end architecture by highlighting its primary focus on user experience, performance, reliability, tooling choices, and engineering difficulties such as monitoring and caching, arguing that front‑end architects must balance these factors just like their back‑end counterparts.
The author recounts detailed frontend interview processes at Meituan, Tencent, Toutiao, and NIO, highlighting typical JavaScript and CSS fundamentals, hand‑written coding tasks, and soft‑skill questions that illustrate what big tech companies prioritize in frontend hiring.
The article introduces JD’s HAI Dynamic Layout system, a mobile development framework that combines native performance with server‑driven UI updates, detailing its components, efficiency gains, rendering advantages, dynamic updating capabilities, and a comparison with React Native.
The article examines why front‑end developers often hit a career ceiling due to low entry barriers and limited backend knowledge, and outlines practical solutions and five distinct career routes—including senior front‑end, full‑stack, management, product, and entrepreneurship—to help break through that ceiling.
This article explains why API security is crucial in front‑end/back‑end separated systems and provides practical measures—including HTTPS, request signing, SSL pinning, and full request/response AES encryption—along with a Spring Boot starter and JavaScript Axios interceptor to protect data in transit.
This article introduces a lightweight easing algorithm that moves an element by half the remaining distance each frame, provides a requestAnimationFrame polyfill, a reusable Math.easeout function, and shows real‑world usage in Qidian's scroll‑to‑top and other UI effects.
The article examines the evolution of web development models, explains why naive front‑end/back‑end separation often leads to problems, and offers practical guidelines—including team roles, RESTful API design, collaboration patterns, and deployment strategies—to implement a successful separation architecture.
This article explains why traditional H5 pages perform poorly compared to native apps, introduces Progressive Web Apps (PWA) as a solution, details how service workers enable offline caching, presents real‑world performance comparisons, and reviews common cache strategies such as cache‑first, network‑first, stale‑while‑revalidate, cache‑only, and network‑only.
This article walks through the design and implementation of a 3D book‑cover effect for Qidian's homepage using CSS3 perspective and transforms, explains the underlying HTML structure, provides full SASS code, and details cross‑browser compatibility solutions for Firefox, IE9, and Safari.
This article explains how React 16 rewrote its server‑side rendering layer to support four rendering modes—including string and streaming approaches—by introducing the ReactPartialRenderer and ReactMarkupReadableStream classes, and details the process of converting virtual DOM trees into HTML strings.
This weekly newsletter curates nine insightful articles covering Google’s Guess.js toolkit, I/O 2018 web highlights, front‑end AR techniques, Chrome’s autoplay restrictions, a deep dive into Redux, WebAssembly versus JavaScript performance, comprehensive CSS line‑break methods, ten common software architecture patterns, and guidance on front‑end engineer career advancement.
This article explores the latest CSS and JavaScript features for handling page scrolling, covering scrollbar visibility tricks, custom scrollbar styling, smooth scroll APIs, sticky positioning, event throttling, viewport detection, overscroll control, and touch‑device nuances, while weighing cross‑browser support and performance trade‑offs.
This article describes the challenges of traditional case and bug workflows in fast‑moving development, proposes automated solutions such as self‑checking test standards, checklist‑to‑case conversion, and reject‑rule enforcement, and details the architecture and user‑experience improvements of the Todolist platform integrated with Jira.
This article shares practical guidance for front‑end team leaders on identifying team characteristics, uncovering planning clues, focusing on value, and executing long‑term roadmaps, while also addressing upward management, brainstorming, and effective PR for technical teams.
The Suning Front‑End Technology Forum in May 2018 gathered over 500 engineers to share insights on Node.js performance tuning, React 16's new features, WebRTC for online education, WebAssembly‑based optimization, and dashboard data‑visualization techniques, offering a comprehensive snapshot of modern front‑end advancements.
The article explains the mathematical foundations and front‑end implementation of five common mobile gestures—drag, pinch, rotate, single‑finger pinch, and single‑finger rotate—using native touch events, vector calculations, and matrix transformations, and provides a lightweight library that emits incremental gesture events for easy integration.
This article explains how to perform essential front‑end image processing with the HTML5 canvas—handling cross‑origin loading, ensuring images are fully loaded, then scaling, cropping, and rotating them while preserving aspect ratio and exporting the results as base64 strings, laying groundwork for later composition techniques.
This article recounts the four‑month redesign of JD.com’s homepage, detailing the migration from jQuery + SeaJS to the Nerv framework, the introduction of the Athena engineering platform, performance and experience optimizations such as code splitting, lazy loading, IE8 compatibility, and the monitoring and automation practices that ensure stability and scalability.
This article explains how to use the HTML5 video tag on mobile web pages, covering common attributes, inline versus fullscreen playback on iOS and Android, dynamic source updates in Vue, live‑streaming protocols with video.js, and practical fixes for background‑audio and layering problems.
The article explains how importing third‑party images, scripts, and especially CSS can be abused to steal data, manipulate page content, hide elements, perform keylogging, trigger unwanted requests, and ultimately compromise user security, urging developers to trust only verified resources.
This article explains how to reduce the time users wait for the first screen by optimizing DNS resolution, TCP and TLS handshakes, HTTP protocols, resource loading, and rendering processes, while also covering related network and security considerations.
This article presents a comprehensive 2018 frontend performance checklist that guides teams from establishing a performance culture and selecting metrics to optimizing build processes, static assets, HTTP/2, security, and monitoring, while offering quick‑win actions for immediate impact.
This guide explains step‑by‑step how to transform a JDreact mobile project into a web‑compatible H5 application by adjusting config.js, switching to JSONP API calls, importing external CSS, handling require lifting, fixing ref and input focus issues, managing borders, passing data between pages, and using AsyncStorage for state persistence.
This article explains how to transform JDreact mobile code into standard H5 pages, covering configuration changes, backend API adaptation, external CSS integration, platform‑specific ref handling, input focus problems, number‑field behavior, radio‑group styling, data passing techniques, AsyncStorage usage, and boolean value conversion.
This article summarizes practical web list design patterns for B2B products, covering basic, grid, master‑detail, comprehensive, and operation‑visible/hidden lists, and offers design recommendations to improve usability, performance, and visual appeal in complex business interfaces.
This article reviews the major additions and deprecations introduced in React 16, including component array returns, portals, error boundaries, fragments, strict mode, the new context API, createRef/forwardRef, fiber architecture, and async rendering utilities, illustrated with code examples.
The article traces the evolution of full‑stack engineering from early 2000s tasks like Photoshop design and PHP 4 scripting to today’s extensive skill set covering operations, cloud platforms, backend services, databases, frontend frameworks, design tools, logging systems, and mobile development, and asks whether mastering this breadth is worthwhile.
Vant 1.0, the open‑source mobile Vue component library maintained by Youzan, delivers ultra‑light components averaging 8.8KB, embraces a lightweight, fast‑iteration, and ecosystem‑centric philosophy, and showcases impressive community contributions and tooling support for modern front‑end development.
This article describes how front‑end engineers solved dynamic real‑time operational data updates and multi‑scenario personalization for a mini‑program by leveraging a configuration system, web‑view integration, and lightweight JSON data structures, enabling rapid feature rollout with minimal backend effort.
The article analyzes market data and surveys to show that developing a mobile app typically takes 3‑5 months, outlining four key development phases—research, feature definition, technical implementation, and testing—while offering practical insights for founders and developers.
This article provides a comprehensive step‑by‑step guide for developing the JD oil‑card recharge feature with JDReact, covering project background, environment configuration, branch management, building for Android and iOS, troubleshooting image loading, routing, component customization, network requests, debugging, and release procedures.
Meituan‑Dianping’s financial platform unified its frontend by adopting Vue for mobile, React for desktop, TypeScript, the Vix UI library, Portm mock‑data generation, Freekite visual testing, an Enhanced Hybrid SDK, SSR pre‑rendering, and robust monitoring and security, delivering up to 80 % UI development savings and markedly higher developer productivity.
This article explores the performance challenges of large Single Page Applications and presents six practical optimization techniques—including fast startup, route-based code splitting, shared bundle extraction, component preloading, ESM tree‑shaking, and PWA caching—to maintain a smooth user experience while keeping bundle sizes low.
This article outlines the comprehensive architecture of massive websites, covering frontend optimization, application and service layers, storage solutions, backend processing, monitoring, security, and data‑center design to handle billions of users and petabytes of data.
This article explains how to use the HTML preload attribute, distinguishes it from prefetch, shows how to detect browser support, outlines resource‑loading priority rules, and provides practical tips to avoid misuse and improve first‑paint performance.
This article explains what CORS is, why browsers enforce same‑origin policies, details the essential HTTP headers involved, and offers practical solutions—including server‑side configuration, temporary browser work‑arounds, and proxy setups—to resolve cross‑origin request errors.
This article compiles a comprehensive set of commonly used regular expressions for validating numbers, characters, and special data formats such as emails, URLs, phone numbers, and monetary values, providing developers with a handy reference to streamline input validation tasks.
The article introduces ArthurCI, a front‑end continuous‑integration platform developed by 58, detailing its design, performance optimizations such as yarn caching and parallel webpack compression, ease‑of‑use integration steps, stability features, and future data‑driven enhancements, while comparing it with tools like TravisCI.
This article explains how Rax combines React Native‑style syntax with Weex capabilities to let front‑end developers write once and run on both web and native platforms, detailing the underlying native implementation, virtual‑DOM design, layout and component differences, and practical tips for using Rax in real projects.
Loder is a lightweight, declarative web loader that optimizes resource‑task dependencies, enables ultra‑fast app startup, and provides performance tracking, helping developers overcome the limitations of traditional linear loading especially on constrained mobile devices.
This article reflects on a frontend developer’s three‑year journey, outlining core technical skills, deep‑dive modularization concepts for code and platforms, practical best‑practice guidelines, and insights into wireless/mobile web development for sustainable growth.
This article explains how well‑crafted interaction design specifications—from early‑stage framework planning to atomic‑design methodology—dramatically improve team efficiency, product quality, and user experience, while offering practical steps for creation, iteration, and organization.
This article presents a comprehensive, up‑to‑date guide for invoking native apps from H5 pages on platforms such as WeChat, QQ, Weibo and Safari, covering universal links, scheme URLs, fallback strategies, platform‑specific quirks, testing tips, and a ready‑to‑use JavaScript implementation.
Explore the extensive capabilities of the browser Console object—including log, group, table, dir, assert, count, trace, timing, profiling, and custom styling—to enhance debugging and streamline development, with practical examples and visual guides for Chrome.
This article explains why simple HTML/CSS solutions are often preferable to JavaScript, and demonstrates seven practical techniques—including navigation highlighting, hover‑based menus, custom form controls, equal‑height columns, dynamic item layouts, form submission, and automatic Enter‑key handling—each with clean code examples.
This article explains the rules, scoring system, and level design of the classic "Popstar" match‑3 game, then details a full MVC implementation in JavaScript—including tile representation, wave‑average distribution, shuffle, wall solidification, view updates, control bindings, and a discussion of the knapsack‑style max‑score problem—while providing complete code snippets and a GitHub repository link.
This article explores the evolving role of front‑end engineers, outlining how their work is diversifying across domains, industries and tech stacks, converging with device, full‑stack and AI technologies, while core fundamentals remain unchanged, and offers guidance on navigating the future.
The 2017 JavaScript State of the Nation survey of 23,000 developers uncovers the rise of React, shifting roles of Angular and Vue, salary‑driven technology choices, the surge of GraphQL and TypeScript, and how JavaScript is expanding far beyond the browser into back‑end and IoT.
