DOCSEARCHbyAlgolia
Submit Docs

茂茂物语 (Notes.fe-mm)

website·Indexed 33 days ago

https://notes.fe-mm.com/

A personal knowledge base and developer's notebook covering front-end development, including JavaScript (ES6, inheritance, data types), CSS (Sass, Tailwind CSS), HTML, and TypeScript. It features a comprehensive collection of 'pitfall' records (踩坑记录) for browsers, editors, and libraries, alongside workflow guides for Git, npm, zsh, and VS Code, as well as system configuration tips for macOS, Windows, and Android.

Tokens
122.5K
Snippets
640
Records
841
Agent score
63%

What's inside 茂茂物语

  1. Overview of HTML5 New Features

    HTML5 introduced several capabilities to make web development more flexible and powerful:

    • Semantic Tags: New structural elements like <header>, <footer>, <article>, and <section>.
    • Multimedia: Native support via <audio> and <video> elements.
    • Graphics: The <canvas> element for JavaScript-driven 2D/3D graphics and animations.
    • Enhanced Forms: New <input> types such as date, email, and url.
    • Client-Side Storage: Web Storage (localStorage, sessionStorage) and IndexedDB for offline capabilities and performance.
    • Device APIs: Geolocation API for accessing user location.
    • Performance: Web Workers for running scripts in background threads to prevent UI blocking.

  2. Overview of React Fiber Architecture

    Introduced in React 16, the Fiber architecture replaces the recursive 'stack Reconciler' with a 'Fiber Reconciler'. Its primary goal is to transform non-interruptible recursive updates into asynchronous, interruptible updates. This solves issues found in React 15 such as UI lag caused by deep recursion, the inability to interrupt rendering, and the lack of priority-based updates.

    Key capabilities of the Fiber Reconciler include:

    • Slicing interruptible tasks into smaller chunks.
    • Adjusting task priority, resetting, and reusing tasks.
    • Interleaving processing between parent and child elements to support layout.
    • Allowing render() to return multiple elements.
    • Improved support for Error Boundaries.

  3. Overview of JavaScript Data Types

    JavaScript data types are divided into two categories: Primitive Types and Reference Types.

    Primitive Types (ES2020):

    • undefined: Uninitialized value
    • null: Null pointer
    • boolean: Logical true/false
    • string: Textual data
    • number: Numeric values
    • symbol: Unique values (introduced in ES6)
    • bigint: Arbitrarily large integers (introduced in ES2020)

    Reference Types:

    • Object, Array, Function, Date, RegExp, Set, WeakSet, Map, WeakMap.

  4. Understand React 16+ Fiber Architecture

    To solve main-thread blocking, React 16 introduced the Fiber Reconciler, moving from a recursive process to an interruptible loop. The architecture is split into three layers:

    1. Scheduler: Manages task priorities and decides when work should be performed. It acts as a robust polyfill for requestIdleCallback to ensure consistent trigger frequencies across browsers.
    2. Reconciler: Identifies changes in the component tree. It processes work in units (Fibers) and checks shouldYield() during each loop to determine if it should yield control back to the browser.
    3. Renderer: Synchronously applies the final changes to the DOM based on flags (e.g., Placement, Update, Deletion) set by the Reconciler.

    Crucially, the Scheduler and Reconciler work in memory. The Renderer only updates the actual DOM once the Reconciler has completed its work for the frame, preventing partial or inconsistent UI updates.

  5. Understand the purpose and parameters of beginWork

    The beginWork function is a core part of the React reconciliation process. Its primary responsibility is to create or reuse child Fiber nodes based on the provided Fiber node. It operates on two primary Fiber versions: current (the node currently on screen) and workInProgress (the node currently being constructed).
    function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
  // ...
}

  6. Perform type assertions in TypeScript

    Type assertions are used when you have more specific information about a value's type than TypeScript can infer. They act as a way to tell the compiler to trust your knowledge of the type. Type assertions are a compile-time feature and have no runtime impact; they do not perform data checks or casting. There are two equivalent syntaxes for type assertions: the 'angle-bracket' syntax and the 'as' syntax.
    let someValue: any = 'this is a string';

// Angle-bracket syntax
let strLength1: number = (<string>someValue).length;

// 'as' syntax
let strLength2: number = (someValue as string).length;

  7. Understand the commitBeforeMutationEffects phase in React

    The commitBeforeMutationEffects phase occurs within commitRootImpl() during the commit stage, specifically before any DOM mutations are performed. It uses a depth-first traversal (similar to the render phase) to find Fibers marked with the BeforeMutationMask (which includes Snapshot effects). The process consists of a 'begin' phase (descending the tree) and a 'complete' phase (ascending the tree) to execute effects in the correct order.

  8. Understand the JavaScript prototype chain

    The prototype chain is a series of links where each object points to its prototype via __proto__. When accessing a property, JavaScript searches the object itself, then its prototype, then the prototype's prototype, and so on, until the property is found or the chain reaches null. Object.prototype is the root of the chain for almost all objects, and Object.prototype.__proto__ is null to terminate the search.

  9. Use Legado for customizable e-book reading on Android

    Legado is an open-source Android reading application that allows users to define custom book sources using simple rules to scrape web data. Key features include support for local TXT and EPUB files, highly customizable reading interfaces (fonts, colors, spacing), multiple page-turning modes, and content purification to remove ads. It supports both list and grid views for bookshelves and allows users to subscribe to specific content.
    GitHub: https://github.com/gedoor/legado

  10. Understand Webpack core concepts

    Webpack is a static module bundler for modern JavaScript applications. Its architecture is based on several key concepts:

    • entry: The entry point file where the compilation starts.
    • output: Configuration defining how and where the bundled files are output.
    • module: In Webpack, everything is treated as a module; typically, one file corresponds to one module.
    • chunk: A code block composed of multiple modules.
    • loader: Tools used to transform the source code of modules (e.g., transpiling non-JS files to JS).
    • plugin: Extensions that hook into the Webpack build lifecycle to inject custom logic into the resource processing.
    • compiler: The central object that controls the overall Webpack bundling process.
    • compilation: The context object for a single build, containing all information regarding the current compilation.
    • dependence: Records the dependency relationships between modules.

  11. Understand HTTP protocol characteristics

    HTTP (HyperText Transfer Protocol) is an application-layer protocol used for transmitting hypermedia documents. Its key characteristics include:

    • Client-Server Model: Clients send requests, and servers return responses.
    • Flexible and Extensible: Basic message formats are defined, but components can be customized by developers.
    • Connectionless: Connections are typically closed after a request is completed (though HTTP/1.1 introduced persistent connections by default).
    • Stateless: Each request is independent; the protocol does not remember previous transactions.
    • Reliable Transport: Based on the TCP/IP protocol suite.
    • Transmission Format: Originally plain text; transitioned to binary in HTTP/2.0.