DOCSEARCHbyAlgolia
Submit Docs

Muzhidong's Technical Documentation

website·Indexed 29 days ago

https://muzhidong.github.io

A comprehensive collection of technical notes and guides covering front-end development (HTML, CSS, JavaScript, TypeScript, ES6+), computer networking (OSI, TCP/IP, HTTP, security), operating systems (Linux), Git version control, and SEO techniques.

Tokens
140K
Snippets
527
Records
821
Agent score
75%

What's inside Muzhidong Knowledge Base

  1. Overview of Design Pattern Categories

    Design patterns are categorized into three main types based on their purpose:

    1. Creational Patterns: Define ways to create objects (e.g., Factory Method, Singleton, Builder).
    2. Structural Patterns: Define ways to compose objects into larger structures (e.g., Adapter, Bridge, Proxy).
    3. Behavioral Patterns: Define ways to manage communication and behavior between objects (e.g., Observer, Strategy, State).

  2. Overview of CSS Houdini advantages

    CSS Houdini is a set of APIs that provide direct access to the CSS Object Model (CSSOM). It allows developers to write code that the browser parses as CSS to create new CSS features. Key advantages include:

    • Faster Parsing: Unlike HTMLElement.style, Houdini code is integrated into the first render cycle rather than waiting for it to complete.
    • Intuitive Manipulation: CSS is manipulated as objects rather than strings.
    • CSS Modularity: Using Worklets, configurable components can be imported with a single line of JavaScript, removing the need for preprocessors, postprocessors, or JS frameworks.

  3. Understand Block-level vs Inline elements

    Elements are classified by their outer box type:

    • Block-level elements: Only one element can be displayed per horizontal line. They have a line-breaking characteristic and can be used with the clear property to clear floats. Note that block-level elements include more than just display: block (e.g., display: table).
    • Inline elements: Elements whose outer box is inline. This category is broader than just display: inline and includes display: inline-table.

    Ghost White Space Nodes: In HTML5, inline elements render as if there is a 0-width inline box (a 'white space node') before every line box, which inherits the element's font and line-height properties.

  4. Implement dynamic imports and access module metadata (ES2020)

    The import(module) function allows for on-demand loading of modules from anywhere in the code, returning a Promise that resolves to the module object. import.meta provides metadata about the current module, such as its URL.
    // Access module metadata
console.log(import.meta.url);

// Dynamic import on click
btnImport.addEventListener('click', async function() {
  const m = await import('./test.js');
  m.func();
});

  5. Manage network devices using SNMP

    The Simple Network Management Protocol (SNMP) is used to monitor, test, configure, and control network resources. It operates over UDP.

    Architecture Components:

    • Management Station: Runs the SNMP client program (Port 162).
    • Managed Device (Agent): Runs the SNMP server/agent program (Port 161).
    • SMI (Structure of Management Information): Defines the naming of managed objects (via Object Naming Tree), data types, and encoding rules using TLV (Type-Length-Value).
    • MIB (Management Information Base): A database storing the collection of managed objects, including their names, types, and values.

    Operations:

    • Read/Write: Used to detect or change the status of managed objects via polling.
    • Traps: Allows agents to send unsolicited notifications to the management station when specific events or thresholds are reached.

  6. Implement Data Link Layer basic functions

    The data link layer addresses three fundamental problems to ensure reliable communication between direct hosts in a LAN:

    1. Framing (Encapsulation): Adding a start control character SOH (0x01) and an end control character EOT (0x04) to delimit frames. The maximum length of the data portion is the Maximum Transmission Unit (MTU).
    2. Transparent Transmission: Using byte stuffing to handle cases where SOH or EOT appear within the actual data. An escape character ESC (0x1B) is inserted before any data byte that matches a control character.
    3. Error Detection: Using Cyclic Redundancy Check (CRC) to detect bit errors. The Frame Check Sequence (FCS) is calculated as the remainder $R$ from the formula $M \times 2^n = Q \times P + R$, where $M$ is the data, $n$ is the redundancy bit count, and $P$ is a pre-agreed $(n+1)$-bit divisor. The transmitted frame is $M \times 2^n + R$.

  7. Understand Pure Functions in JavaScript

    A pure function is a function that is independent and closed. It has two primary characteristics:

    1. Deterministic: The same input always produces the same output. The return value depends solely on the function arguments, regardless of when or where the function is called.
    2. No Side Effects: Calling the function does not produce any observable effect on the external state (e.g., modifying global variables, performing I/O, or changing external data structures).

  8. Understand IndexedDB fundamentals

    IndexedDB is an object-oriented database that stores collections of named object stores. Key characteristics include:

    • Key-Value Storage: Every object has a unique key (automatically generated or explicitly defined via a keyPath).
    • Indexing: Supports secondary keys (indexes) to allow multiple objects to match a single key value.
    • Atomicity & Transactions: All operations occur within a transaction. Transactions are automatically committed when the browser returns to the event loop and all pending operations are complete.
    • Constraints: Accessible only within the same origin; database names must be unique within that origin; no limit on the number of databases.

  10. Manage and manipulate the current URL with the location object

    The location object provides information about the current URL and allows for page redirection. Key properties include protocol, hostname, port, pathname, search (query string), hash, and href.
    // Modify URL components (creates a history record)
location.hash = "#home";
location.pathname = "/home/index";

// Page redirection methods
window.location = url; // Simple assignment
window.location.href = url; // Explicit href
window.location.assign(url); // Standard redirect
window.location.replace(url); // Redirect without adding to history (cannot go back)

  12. Identify common HTTP request and response headers

    Headers provide essential metadata for the communication between client and server.

    Common Request Headers:

    • Host: The hostname of the server being visited.
    • User-Agent: Information about the user agent (browser/client).
    • Accept: Formats the browser is willing to accept.
    • Accept-Charset: Character sets the browser accepts.
    • Accept-Encoding: Encoding schemes the browser accepts.
    • Accept-Language: Languages the browser accepts.
    • Referer: The address of the page that linked to the requested resource.
    • Connection: Whether to keep the TCP connection open (close to disconnect).
    • Keep-Alive: Connection timeout and max requests (requires Connection: keep-alive).
    • Date: Current date and time.

    Common Response Headers:

    • Content-Type: MIME type and character set of the content.
    • Content-Length: Size of the response body.
    • Content-Encoding: Encoding used for the content.
    • Content-Language: Language of the content.
    • Transfer-Encoding: Transfer type (e.g., chunked for chunked transfer encoding).
    • Server: Type of server software.
    • Location: Redirection target URL.
    • Refresh: Instructs the browser to refresh after a delay or redirect to a URL.
    • Content-Disposition: Used for attachments and specifying filenames for downloads.
    • Via: Request chain used by proxies, useful for debugging.