This article explains the three phases of a React component's lifecycle—mounting, updating, and unmounting—detailing each lifecycle method, its purpose, and best‑practice usage for resource management and performance optimization in frontend development.
This article analyzes the challenges of reproducing external‑network bugs, outlines common failure causes, and presents a complete design for a JavaScript SDK that records environment data, AJAX calls, errors, and user actions, stores them in IndexedDB, and visualizes the timeline for efficient troubleshooting.
This article explains how Ctrip's marketing team leverages WeChat mini‑program features—poster drawing with canvas, search‑direct navigation, and universal QR‑code routing—to create low‑cost, high‑conversion viral marketing campaigns, complete with code examples and implementation details.
This article compiles a curated list of the ten most popular free open‑source admin dashboard UI frameworks, detailing their GitHub star counts, repository links, core technologies, and visual screenshots to help developers quickly choose a suitable backend control panel solution.
Chameleon is Didi's cross‑platform framework that lets developers write a single codebase in CML, CMSS, and JavaScript to run on H5, various mini‑programs, and native‑like environments, dramatically reducing duplication, maintenance effort, and improving consistency across platforms.
This comprehensive guide walks you through essential webpack configuration topics—including entry, output, plugins, module resolution, caching, development experience enhancements, and advanced performance tricks like splitChunks and Terser—showing how to dramatically speed up builds and improve bundle efficiency for modern frontend applications.
This article reviews the evolution of web real‑time push techniques—polling, long‑polling, iframe streaming—and explains why WebSocket offers superior bidirectional communication, lower latency, and reduced bandwidth, while providing practical code examples for each method.
This article reviews the evolution of front‑end technologies—from Ajax and Node.js to React—explains the serverless concept, and argues that serverless will trigger the next major shift in front‑end engineering by reshaping deployment, scaling, and the role of web developers.
This article explains why data flow management is crucial in React, reviews React's built‑in state handling, and compares three popular third‑party solutions—Redux, MobX, and RxJS—highlighting their concepts, strengths, weaknesses, and suitable scenarios for use.
This article describes the design and implementation of a component template platform that separates front‑end components from Qunar's special activity system, introduces a layered architecture, presents code‑level file structures, and explains how dynamic configuration and on‑demand loading solve reuse, theming, and maintenance challenges.
An in‑depth look at how the NetEase Music 2018 Listening Report’s rich, emotion‑driven animations were crafted, from designer‑written CSS code and thousands of lines of motion design to practical decisions on formats like GIF, SVG, Lottie, and the custom BX‑AE2CSS tool that exports After Effects animations directly to CSS.
This article explains common mock server approaches, their limitations, and introduces a browser‑based HTTP request interception technique that enables seamless front‑end proxying, preserves authentication cookies, and works across browsers without modifying backend code.
The Taro UI 2.0 update introduces eleven new components, expands support to multiple mini‑program platforms, adds a customizable theme system with a visual theme generator, and provides an Issue Helper tool to streamline bug reporting, while outlining future plans for ByteDance mini‑program adaptation and i18n.
This article introduces the 58 Mini‑Program Cloud project, presenting the wto‑cli migration tool, the wbmp cross‑platform compilation framework, the wbui UI component library, and the mp‑scf‑sdk cloud development SDK, detailing their architecture, core features, migration process, and practical code examples for multi‑platform mini‑program development.
This article explores how to design and extend button components effectively by emphasizing early communication with designers, strategic naming conventions based on location, color, or function, and practical CSS architecture—including themes, sizes, shapes, states, and code examples—to achieve scalable and maintainable UI solutions.
This article explains the default stacking order of HTML elements, how z-index interacts with positioned, floating, and flex items, how to create custom stacking orders, and the rules for generating stacking contexts, providing practical examples and best‑practice recommendations for front‑end developers.
This article explains the concept of lazy loading in front‑end development, covering placement of placeholder elements, scroll event listening, viewport detection methods, detailed JavaScript implementations, and advanced optimizations such as throttling, vertical‑only checks, and extending lazy loading to other resource types.
This article details the comprehensive front‑end performance improvements applied to the JD PLUS membership project, covering the migration to the Gaea4.0 webpack‑based scaffold, PWA offline caching, Babel 7 polyfill on‑demand loading, request and image optimizations, skeleton screens, and build‑time caching techniques to accelerate first‑screen rendering on mobile H5.
This article explores the advantages and challenges of dark mode UI, offering practical guidelines on text color, spacing, typography, icon design, button states, dividers, color usage, visual hierarchy, and whitespace to create refined and readable dark‑theme applications.
This article introduces React Hooks, explains how they enable state and other React features without classes, provides official resources, outlines migration advice, details supported packages, tooling integrations, testing APIs, installation methods, and summarizes the changelog and post‑alpha updates for the stable 16.8 release.
This article explains the concepts, implementations, and practical use cases of debounce and throttle in JavaScript, showing how they limit function call frequency to improve front‑end UI performance for events such as scrolling, resizing, and input handling.
The article examines the perceived conflict between JavaScript and CSS/UX developers, explains how community segregation and social media amplify the divide, and proposes practical steps for fostering collaboration and reducing the "JS vs CSS" war in front‑end development.
Chameleon is Didi's open-source cross‑platform MVVM framework that lets developers write a single CML codebase and compile it to WeChat mini‑programs, Alipay, Android quick‑apps, Web, Weex and other MVVM‑based targets, improving maintainability, code reuse and performance while isolating platform‑specific differences at build time.
This article explains the BEM (Block‑Element‑Modifier) naming convention, why it is needed for style isolation, readability and maintainability, outlines its syntax and common patterns, and provides practical guidelines for page, shared, and local component naming in modern front‑end projects.
In this Fast Q&A episode, the author outlines a two‑layer view of blockchain technology, recommends learning resources for front‑end engineers entering DApp development, and offers practical career advice for junior front‑end developers facing interview challenges and job‑search decisions.
This article details a two‑month exploration of the Weex framework, covering its architecture, project scaffolding, build commands, demo implementation, environment configuration, caching strategies, native bridging, and a concise comparison with React Native and Flutter to demonstrate its suitability for cross‑platform front‑end development.
SpriteJS is a Canvas‑oriented rendering library that mimics the DOM API to simplify high‑performance visualizations, offering features such as CSS styling, Flex layout, animation, cross‑platform support, and seamless integration with modern frameworks like React and Vue.
This article explains the browser's critical rendering path, detailing how HTML, CSS, and JavaScript are transformed into pixels through DOM construction, CSSOM creation, render tree generation, layout, and painting, and discusses how JavaScript can block and delay these stages.
This article examines common issues with registration and login prompt designs—misuse of dialog boxes, unclear messaging, and inconsistent styling—then proposes a unified, scenario‑driven style guide that distinguishes front‑end and back‑end prompts, improves consistency, accuracy, and user flow efficiency.
This article compiles frequent CSS problems—from button styling and overflow handling to flex‑wrap, grid layouts, long‑word breaking, transparent gradients, pseudo‑elements, and input accessibility—offering concise code solutions and practical tips to improve cross‑browser compatibility and user experience.
This guide walks you through creating a modern, high‑impact résumé website using GitHub Pages, basic Git commands, HTML5, and Markdown, covering setup, customization, deployment, and optional tools for a polished online presence.
In this interview, senior Meituan delivery frontend leader Hong Lei shares his journey from early computer competitions and a failed location‑based startup to roles at Yahoo and Meituan, offering practical advice on career choices, skill development, team rotation, and the importance of aligning technology with business needs.
This article explains the system‑level nature of the clipboard, analyzes how clipboard.js implements copy via a hidden textarea and execCommand, discusses its limitations, and introduces the modern Async Clipboard API with its Promise‑based read/write methods, usage notes, and browser support.
Discover the ten most popular free open‑source admin dashboard UI frameworks—complete with GitHub star counts, repository links, brief feature overviews, and screenshots—to help you quickly choose a robust backend management panel for your web applications.
In this interview, senior engineer Pan Weizeng shares how his electronic engineering background led him to the internet, his experiences at Fanfo and Meituan, the importance of long‑term patience, team culture, front‑end fundamentals, and personal habits that shaped a ten‑year tech career.
This article explains why scroll‑penetration occurs when a modal mask covers the page, why simple overflow:hidden or event‑bubbling tricks fail, and provides a complete solution using passive event listeners, selective default‑preventing, multi‑layer handling, and a ready‑to‑use React component.
The article explores the fundamental problems of UI engineering—consistency, responsiveness, latency, navigation, caching, accessibility, internationalisation, transport, resilience, abstraction, and prioritisation—encouraging developers to solve them by building small, library‑free prototypes to deepen their understanding of trade‑offs.
The article describes how to quickly build a lightweight WeChat Mini Program for note‑taking using Cloud Development, covering registration, cloud setup, and core code for creating, querying, and editing notes with text and images, while eliminating the need for separate servers, domains, and certificates.
This article explains how CSS determines the rendered size of images by defining intrinsic size, specified size, default object size, and concrete object size, outlining the calculation process, and demonstrating the effects of width, height, background-size, contain, and cover through multiple code examples.
This article introduces Chrome DevTools console shortcuts—including $0‑$4 for element references, $ and $$ for query selectors, $_ for the last expression result, and $i for importing npm libraries—explaining their usage to streamline front‑end debugging and testing.
Webnovel’s overseas project recently added Indonesian, Malay, and Filipino support, prompting a deep dive into internationalization challenges such as pluralization, rich‑text handling, date and currency formatting, and translation workflows, and the article details practical solutions using ICU MessageFormat, ECMAScript Intl APIs, and custom React libraries.
The article provides a comprehensive analysis of React Hooks, covering their injection model, persistent call ordering, debugging and testing strategies, API design considerations such as useReducer, Context Provider, useEffect, missing APIs, type handling, compilation optimizations, safety concerns, and the overall motivation behind moving from class components to hooks.
During the holiday season, developers and product managers were startled by an unexpected "Christmas" Easter egg in Ant Design, sparking debates over responsibility, corporate impact, and the risks of undisclosed code changes in widely used open‑source UI libraries.
HTM is a pure‑JavaScript library that implements a JSX‑like syntax without a compiler, offering sub‑kilobyte bundle sizes, seamless integration with React/Preact, ergonomic syntax enhancements, and a new Babel plugin that dramatically improves performance and flexibility for frontend developers.
This article explains why and how to use the prop-types package in React for runtime prop validation, covering installation, basic usage, required fields, shape checking, and advanced validators such as arrayOf and objectOf, helping teams catch type errors early.
Bootstrap 3.4.0 has been released after a long delay, bringing new classes, Algolia search, multiple XSS fixes, documentation improvements, upgrade instructions, and a new Open Collective funding project, while also previewing upcoming work on v4.2 and v5.
This report details the background, objectives, environment, test plan, distributed JMeter setup, server monitoring, results, and analysis of a load‑testing effort aimed at identifying performance bottlenecks and validating reliability of a front‑end Node.js quality‑inspection service under increasing concurrent traffic.
This guide compiles the seven key CSS scroll modules—generation, smooth scrolling, snap positioning, boundary behavior, hiding, inertia, and appearance—providing property syntax, browser support notes, and practical examples to help developers implement precise scrolling effects.
The Binary AST proposal introduces a three‑layer binary encoding for JavaScript abstract syntax trees, aiming to reduce parsing time by up to 90 % and improve web application startup performance, with early prototypes showing promising results and growing community interest.
This article shares a translated version of a 2018 web developer learning roadmap originally compiled by Kamran Ahmed, covering front‑end technologies, back‑end technologies, and DevOps, and provides links to the original GitHub resources for further reference.
After gathering reader suggestions and combining personal experience, a curated list of highly recommended front-end development books is presented for developers seeking valuable reading resources.
An investigation into Apple Watch’s built‑in browser reveals that its WebKit incorrectly reports device‑pixel‑ratio, causing inefficient responsive image selection, and shows how a simple meta tag can correct the behavior for better layout and bandwidth usage.
In this interview, senior engineer Pan Weizeng shares how his shift from electronic engineering to web development, his experiences at Phoenix Net, Fanfo and Meituan, and his philosophy of long‑term patience shaped a ten‑year tech career, offering practical advice for aspiring developers.
This article explains why lazy loading is needed for React front‑end projects, demonstrates several code‑first implementations—including a custom LazyComponent, prop‑forwarding tricks, and a higher‑order lazy() function—showing how to improve first‑screen rendering while handling state updates correctly.
This technical article details how the IMWeb team transformed the high‑traffic Penguin Tutoring course detail page—built with React—by applying static resource caching, CGI pre‑loading, server‑side rendering, Redis and PWA offline caching, ultimately cutting first‑screen render time from seconds to sub‑second levels and delivering a native‑like user experience.
This article explains how to use the %c placeholder and CSS strings with console.log to create colorful, formatted debug messages that stand out in large JavaScript log outputs, boosting development efficiency.
The article reviews jQuery’s groundbreaking contributions to DOM manipulation, explains why its dominance faded with the rise of MVVM frameworks, and discusses broader tech trends toward higher reusability, cross‑platform support, and separation of business logic from UI code.
This article outlines the React 16 roadmap, detailing the planned release schedule for Suspense code‑splitting, Hooks, Concurrent Mode, data‑fetching Suspense, and related experimental projects, while explaining their current status across React DOM, server rendering, and React Native.
This article details the development of the 360 AI speaker’s H5 mobile application, covering project environment setup, native‑WebView interaction, custom Chinese font handling, dynamic form input components, and Docker deployment, providing practical front‑end engineering insights and code examples for similar projects.
The 2018 State of JavaScript survey, answered by over 20,000 developers worldwide, reveals current preferences in languages, frameworks, tools, testing libraries, and emerging trends such as GraphQL and React Hooks, offering valuable insights for front‑end engineers.
Front‑end developers often suffer from constantly changing back‑end APIs, outdated documentation, and testing that only starts near release, but by treating API specifications as contracts, using tools like Raml‑Mocker to generate mock servers and automate testing, teams can reduce rework, raise interface design quality, and streamline delivery.
This article explores a wide range of CSS shadow techniques—including single‑side box‑shadow, background animations, 3D pseudo‑element shadows, multi‑layer text shadows, long shadows, colorful gradients, filter‑based shadows, and neon effects—providing code samples and practical tips for modern front‑end development.
The article explains how Meituan’s build‑time pre‑rendering, using a TypeScript decorator and PhantomJS to generate static HTML for selected routes, eliminates the first‑frame white screen, employs request hijacking for CDN assets, and achieves a 75% reduction in first‑contentful‑paint time, dramatically boosting mobile user experience.
This article presents five practical methods for eliminating unwanted whitespace between inline HTML elements, including writing markup on a single line, using font-size:0, applying negative margins, setting negative letter-spacing, and inserting HTML comments, each illustrated with example code and visual screenshots.
This article explains why the traditional method of adding a bottom‑bar class fails on iPhone X‑style devices, and demonstrates a modern solution using viewport‑fit and safe‑area insets to keep content clear of the notch and bottom bar in both portrait and landscape orientations.
This case study explains how Netflix optimized its logout and registration pages by removing unnecessary React and third‑party JavaScript, employing prefetching techniques, and reducing bundle size, resulting in up to a 50% faster time‑to‑interactive and smoother user experience.
This article explains how JavaScript’s single‑threaded nature can cause UI jank, introduces Web Workers as a standard HTML5 solution for off‑loading heavy computations, details their API, limitations, practical use cases, and presents superWorker—a lightweight wrapper that simplifies worker creation and management.
This article walks through building an identical ToDo application with React and Vue, comparing their project structures, data mutation mechanisms, component communication, event handling, and code examples, helping developers understand the practical differences between the two popular frontend frameworks.
This article explains React as a JavaScript library for building user interfaces, covering its component model, state‑driven rendering, DOM diffing, pure functions, the importance of treating it as a library rather than a framework, and practical state management with MobX.
The article explains why traditional image‑based log reporting can interfere with critical front‑end tasks, introduces the Beacon API as an asynchronous, low‑priority solution, and provides practical code examples and usage guidelines to ensure reliable data delivery without impacting user experience.
This article explains how to achieve responsive design by calculating viewport heights for various desktop and mobile resolutions, using CSS viewport units (vh, vw) and rem together with media queries and JavaScript to dynamically switch scaling modes for consistent UI across devices.
This article explains how to use the new Picture-in-Picture Web API to enable floating video playback on web pages, covering setup of video and button elements, request handling, error management, event listeners, window‑size tracking, feature detection, and best‑practice UI considerations.
This guide outlines a comprehensive, stage‑by‑stage roadmap for beginners to master Python fundamentals, web front‑end basics, network programming, and Python web frameworks, providing resource recommendations and difficulty ratings to help learners choose a focused path and avoid getting stuck.
This article recounts the author’s step‑by‑step journey of designing a QCon 2018 technical presentation on blockchain DApp development, detailing how iterative slide revisions, storytelling techniques, and multiple trial runs transformed a sprawling draft into a concise, engaging, and audience‑focused talk.
Learn how to create reusable, encapsulated UI components using Web Components by building a simple counter element with Custom Elements, Templates, Shadow DOM, properties, events, and attributes, and see how to integrate it into any framework, handle data binding, and dispatch custom events.
This article explores how industrial design history—from the functional steam‑engine era to modern minimalist and pop‑culture influences—has continuously informed the evolution of graphical user interfaces, iconography, and the aesthetic choices that define contemporary frontend design.
This article outlines a comprehensive, multi‑layer web architecture covering front‑end optimization, application‑level frameworks, service‑oriented components, storage solutions, backend analytics, monitoring, security measures, and data‑center design for building highly scalable and reliable websites.
This article walks you through creating a polished, web‑based résumé using GitHub Pages, covering the service basics, storage and bandwidth limits, essential Git commands, repository setup, deployment steps, and additional modern résumé techniques such as Markdown and online generators.
The article explains how to use a custom URL schema together with a WebSocket channel to let a web page detect whether a mobile app is installed, attempt to launch it, and fall back to downloading the app when the launch fails, including practical blur‑event tricks.
This article introduces the most frequently used encryption techniques in frontend development—including Base64 encoding, hash functions, salting, slow hash algorithms, key‑hashing, XOR, symmetric and asymmetric encryption, digital signatures, and practical CryptoJS usage—explaining their principles, appropriate scenarios, and providing ready‑to‑use code examples.
A comprehensive guide explores modern CSS selectors—including combinators, attribute selectors, UI pseudo‑classes, structural selectors, content selectors, and experimental selectors—showcasing practical examples, codepen demos, and browser compatibility tips for front‑end developers.
On October 23, React 16.6.0 was released, introducing React.memo for function components, React.lazy with Suspense for code‑splitting, a simpler static contextType API, new error‑boundary methods, and deprecations in StrictMode, along with installation instructions and a detailed changelog.
This article presents a curated collection of Alibaba Group’s open‑source projects, spanning frontend design systems, Java libraries, database engines, distributed file and messaging systems, as well as tutorials, highlighting each project's purpose, key features, and GitHub repository links for developers seeking robust, production‑grade solutions.
This article explains how JavaScript reference equality for objects and functions affects React's shallow prop and state comparison, shows common pitfalls that cause needless re‑renders, and provides practical techniques—such as defining functions outside components and caching event listeners—to dramatically improve rendering performance.
This article explains how Lighthouse can measure JavaScript execution time, reveal unused code through coverage, and offers practical steps—such as sending only needed scripts, minifying, and removing dead code—to reduce JavaScript overhead and improve user experience on web pages.
This guide offers a step‑by‑step roadmap for aspiring front‑end developers, covering essential JavaScript fundamentals, DOM mastery, UI design, client‑server communication, and framework selection, while emphasizing practice, side projects, and continuous learning.
IMWebConf 2018 gathered nearly 500 on‑site attendees and over a thousand online viewers for a deep dive into front‑end standards, WebXR, QUIC, WePY, mpvue, fast‑app, cross‑platform frameworks like Weex and Taro, Node.js performance, and cutting‑edge data visualization techniques.
This article uses a sword metaphor to explain why front‑end engineers should focus on the underlying features of frameworks—such as declarative, data‑driven rendering and component architecture—rather than getting trapped by syntax differences, helping beginners and experienced developers choose and transition between stacks more effectively.
This article explains the concept, history, and essential components of grid systems for app design, outlines why they improve team collaboration and design rationality, and provides step‑by‑step guidance on building and applying grids while highlighting common pitfalls to avoid.
This article chronicles the author’s journey from fragmented knowledge‑base tools to adopting MDWiki—a pure front‑end, Markdown‑driven wiki that can be deployed on any web server, integrated with GitHub Pages, and extended with comments, analytics, and custom build pipelines.
This newsletter curates the month’s top front‑end articles on React rendering, performance optimization, Electron internals, event loop mechanics, Unicode quirks, plus the latest front‑end news, version releases, and upcoming technical conferences, providing developers with concise insights and resources.
This article presents a Wi‑Fi‑free workflow for mobile web real‑device testing that combines a server‑side Whistle proxy with the @nutui/carefree Webpack plugin to automate incremental builds, uploads, and QR‑code access, eliminating hotspot restrictions and improving team efficiency.
This article walks through creating a mobile‑friendly WeChat web app using Vue and the VUX UI library to integrate Azure DevOps notifications, covering project initialization, dependency installation, component registration (both local and global), and deployment screenshots.
This article explains why sufficient color contrast between text and background is essential for web readability, outlines WCAG AA/AAA contrast ratios, introduces practical tools and JavaScript/Sass functions for calculating and adjusting contrast, and provides tips for handling semi‑transparent colors and real‑world scenarios.
The article examines WebAssembly as an emerging web development paradigm that offers a compiled, language‑agnostic alternative to JavaScript, discusses its integration with .NET via Mono and Blazor, compares tooling like NuGet to npm/WebPack, and highlights both the benefits and the continued need for JavaScript in modern web applications.
The article explains how evolving runtime interaction requirements have shifted front‑end development from simple jQuery scripts to modern declarative frameworks like Vue, React and Angular, detailing the differences between imperative and declarative approaches, rendering mechanisms, and the role of virtual DOM.
Create React App 2.0, launched on October 1, updates core tools like Babel, Webpack, and Jest, adds Sass, CSS Modules, SVG components, optional Service Workers, and provides a clear migration path for both new and existing projects, while supporting modern browsers and optional polyfills.
This article explains ES6 JavaScript generators, covering their syntax, how they differ from regular iterators, the role of the yield keyword, available generator methods, and practical examples such as custom generators, random number streams, throttling, Fibonacci sequences, and integrating generators with HTML to simplify iterative tasks.
This article explains JavaScript date and time concepts—including GMT, UTC, ISO 8601, RFC2822, timestamps, parsing, formatting, timezone offsets, localization, and practical internationalization strategies—providing developers with the knowledge to correctly manage time across different regions and platforms.
This article explains how to reduce HTTP requests and page load time for H5 web pages by leveraging Chrome DevTools and its WebSocket‑based protocol to capture network metrics, render trees, and screenshots on both PC and Android, providing step‑by‑step debugging and performance‑testing guidance.
