DOCSEARCHbyAlgolia
Submit Docs

Gengxiaofei's Technical Blog

website·Indexed 30 days ago

https://gengxiaofei.com

A collection of technical guides and notes covering frontend development (Vue 3, Vite 5, TypeScript, UnoCSS), network protocols (HTTP/1.1, CORS, Nginx), and development tools (Proxyman, Volta, RayCast, Git). Includes practical tutorials on implementing Server-Sent Events for ChatGPT-like text streams, browser compatibility, and Linux command-line operations.

Tokens
103.6K
Snippets
438
Records
717
Agent score
47%

What's inside Gengxiaofei

  1. Overview of how physical exercise improves brain function

    Physical exercise is one of the most effective ways to develop brain function, offering more significant benefits than traditional cognitive training (like puzzles or memory exercises). According to brain science research, exercise specifically enhances five key mental capabilities: stress resistance, concentration, resistance to depression, memory, and creativity.

  2. Overview of HTTPS security mechanisms

    HTTPS encrypts HTTP request and response data using SSL or TLS. It relies on several cryptographic concepts:

    • Symmetric Encryption: Uses the same key for encryption and decryption. Fast but requires a secure way to share the key.
    • Asymmetric (Public Key) Encryption: Uses a public key for encryption and a private key for decryption. Solves the key distribution problem.
    • Hash Algorithms: One-way functions that produce a unique digest of data. They cannot be decrypted back to plaintext.
    • Digital Signatures: A hash of a message encrypted with a private key. It proves the identity of the sender and ensures the message has not been tampered with.
    • Digital Certificates: Issued by a Certificate Authority (CA) to verify the ownership of a public key. It prevents man-in-the-middle attacks by providing a trusted identity for the server.

  3. Overview of Server-Sent Events (SSE)

    Server-Sent Events (SSE) is a real-time communication technology that allows a server to push text-based messages to a browser over a single HTTP connection. Unlike WebSockets, SSE is a unidirectional (simplex) channel where data flows only from the server to the client. It is lightweight, uses standard HTTP, and provides built-in automatic reconnection support.

  4. Overview of Proxyman

    Proxyman is a modern network proxy and interception tool that allows developers to monitor, debug, and simulate HTTP/HTTPS network requests. It provides a graphical user interface to view and manipulate API requests and responses.

  5. Overview of HTTP Status Code Classifications

    HTTP status codes are 3-digit integers defined by RFC 2616 and its extensions. The first digit of the status code indicates the general category of the response:

    • 1xx (Informational): Request received, continuing process.
    • 2xx (Success): Request successfully received, understood, and accepted.
    • 3xx (Redirection): Further action needed to complete the request.
    • 4xx (Client Error): Request contains bad syntax or cannot be fulfilled.
    • 5xx (Server Error): Server failed to fulfill an apparently valid request.

  6. Expose local services to the public internet with SirTunnel

    SirTunnel is a lightweight open-source tool (approximately 50 lines of code) that creates a tunnel to make a local intranet computer accessible via the public internet, similar to ngrok.
    # Source: https://github.com/anderspitman/SirTunnel

  7. Perform local file transfers with LocalSend

    LocalSend is an open-source, cross-platform file transfer application. It does not require an internet connection, as it relies on a shared Wi-Fi network to share files between devices.

  8. Understand Regular Expression building blocks

    Regular expressions are composed of several fundamental types of elements:

    • Literals: Match specific characters (e.g., c, \n for newline, \. for a literal dot).
    • Character Sets: Match one character from a set of possibilities (e.g., [a-z], [123]).
    • Quantifiers: Specify the number of consecutive occurrences (e.g., {m,n}).
    • Anchors: Match a position rather than a character (e.g., ^ for start of string, (?=code) for a position followed by 'code').
    • Alternation (Branches): Match one of several sub-expressions (e.g., code1|code2).
    • Grouping: Treat multiple tokens as a single unit using parentheses (e.g., (code)+).
    • Back-references: Refer to a previously captured group (e.g., \2, \3).

  9. Understand HTTP/2 key features and improvements

    HTTP/2 is an extension of HTTP/1.x that changes how data is exchanged between client and server while keeping core semantics (methods, status codes, URLs) unchanged. Key features include:

    • Binary Framing Layer: Replaces text-based parsing with a binary format for better robustness and easier parsing.
    • Multiplexing: Allows multiple requests and responses to share a single TCP connection simultaneously using request IDs, solving the Head-of-Line (HOL) blocking issue found in HTTP/1.x.
    • Header Compression (HPACK): Uses an encoder and shared header field tables between client and server to reduce redundant header data.
    • Server Push: Allows the server to proactively push resources (e.g., CSS or JS files) to the browser's cache before the client explicitly requests them.

  10. Understand HTTP/2 Header Compression (HPACK) Principles

    HTTP/2 reduces overhead by compressing headers using a combination of dictionaries and Huffman coding. The compression mechanism requires both the browser and server to maintain:

    1. Static Table: A predefined list of common header names and frequent name-value pairs (e.g., :method: GET). This is available from the first request.
    2. Dynamic Table: A connection-specific table where new header pairs can be added during the session. Both client and server can update this table to refer to long strings (like cookies) using a single index in subsequent requests.
    3. Huffman Coding: A static Huffman code table used to compress literal strings (names or values) that are not found in the dictionaries.

    Additionally, in HTTP/2, all header names must be lowercase, and the HTTP/1 status line (Method, Path, Status) is converted into pseudo-headers (starting with a colon) to benefit from this compression.

  11. Understand HTTP/2 Multiplexing and Binary Framing

    Unlike HTTP/1.1, which transmits data as plain text and requires sequential delivery (leading to head-of-line blocking), HTTP/2 introduces a binary framing layer. It breaks HTTP messages into independent frames, each tagged with a Stream ID. This allows multiple requests and responses to be sent in parallel over a single TCP connection in any order. The receiving end uses the Stream IDs to reassemble the frames into the original messages, eliminating the need for multiple TCP connections to bypass HTTP/1.x limitations.

  12. Leverage TypeScript type inference

    TypeScript can automatically infer the type of a variable based on its assigned value, default function parameters, or return statements. This removes the need for explicit type annotations in many cases, especially for constants and initialized variables.
    // Explicit annotation
let str1: string = 'hello';

// Type inference (equivalent to above)
let str2 = 'hello'; // inferred as string
let num = 1;        // inferred as number
let bool = true;    // inferred as boolean