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.
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.
