DOCSEARCHbyAlgolia
Submit Docs

SevenTangWei Knowledge Base

website·Indexed 29 days ago

https://seventangwei.cn

A technical knowledge base covering frontend development, including JavaScript (Proxy, Promises, Generators), TypeScript (Utility Types, Control Flow Analysis), React (Fiber architecture, Hooks), Node.js (Event Loop, pnpm, http module), and general computer science topics such as data structures, algorithms, and CI/CD tools like Webpack and Rollup.

Tokens
104.6K
Snippets
621
Records
753
Agent score
49%

What's inside SevenTangWei Knowledge Base

  1. Understand Subtypes in TypeScript

    In TypeScript, if a value of type A can be assigned to a value of type B, then A is considered a subtype of B, denoted as A extends B. This concept is primarily used in generic constraints (restricting a type parameter T to be a subtype of a specific type) and conditional types (A extends B ? C : D).
    declare let a: 'name';
declare let b: string;

b = a; // OK: 'name' is a subtype of string
a = b; // Error: string is not a subtype of 'name'

  2. Understand React Fiber Architecture

    Introduced in React v16, Fiber is a reimplementation of React's core algorithm designed to enable incremental rendering. It solves the problem of 'frame dropping' caused by long-running synchronous JavaScript tasks blocking the browser's GUI rendering thread (which typically refreshes every 16.6ms).

    Fiber breaks long synchronous tasks into small units of work (slices). This allows React to pause work, yield to the browser to update the UI, and then resume.

    Key concepts include:

    • Prioritization: Fiber tasks have priorities (6 levels). High-priority tasks can interrupt and discard lower-priority tasks.
    • Two-Phase Rendering:
      1. Render/Reconciliation phase: Pure and side-effect free. React can pause, discard, or restart this phase.
      2. Commit phase: Involves actual DOM mutations. This phase is synchronous and cannot be interrupted.
    • Caveat: Because the Render phase can be restarted, certain lifecycle methods like componentWillMount (now deprecated) might be called multiple times if a higher-priority task interrupts the process.

  3. Compare HTTP 1.0, 1.1, and 2.0

    Evolution of the HTTP protocol:

    HTTP 1.1 vs 1.0:

    • Default long connections (Connection: Keep-Alive) and support for Pipelining.
    • Introduction of the Host header for virtual hosting.
    • New cache control headers: ETag, If-None-Match, Cache-Control.
    • Added 24 new error status codes (e.g., 409 Conflict).

    HTTP 2.0 vs 1.1:

    • Binary Format: Replaced text-based transmission with binary.
    • Multiplexing: Multiple streams (requests/responses) can coexist on a single TCP connection using frames.
    • Header Compression: Uses shared dictionaries between client and server to reduce overhead.
    • Server Push: Server can proactively push resources to the client.

  4. Understand the Event Loop and Task Queues

    The event loop manages the execution of code by alternating between macro-tasks and micro-tasks. The general rule is: execute one macro-task, then execute all available tasks in the micro-task queue, then move to the next macro-task.

    • Macro-tasks: Include the initial script execution, setTimeout, setInterval, I/O operations (e.g., AJAX, file reading), UI events (e.g., clicks), and setImmediate (Node.js specific).
    • Micro-tasks: Include Promise.then() callbacks.

  5. Understand core video and audio concepts

    Key technical terms for media processing:

    • Frame Rate (FPS): The number of images refreshed per second. 24FPS or higher is generally perceived as smooth by humans.
    • Resolution: The pixel dimensions of each frame (e.g., 1080P is 1920x1080). Each pixel typically consists of RGB channels (3 * 8 bits).
    • Bitrate: The number of bits transmitted per unit of time. Uncompressed video requires extremely high bitrates, necessitating encoding.
    • Video Encoding: Compression techniques to remove redundant data.
      • Software Encoding: Uses CPU (e.g., JS or WASM).
      • Hardware Encoding: Uses GPU (e.g., <video> tag or Web Codecs) for better performance.
      • Common codecs: H264 (AVC1), H265 (HEVC), VP8, VP9, AV1.
    • Audio Encoding: Common formats include AAC, MP3, WAV, and AC-3.
    • Container Format (Encapsulation): A file format that packages encoded video, audio, and metadata (title, duration, resolution). Common containers: MP4, MKV, WebM, MOV, FLV, TS, AVI.
    • Encoding/Decoding Pipeline: Capture $\rightarrow$ Encode (Audio/Video) $\rightarrow$ Encapsulate $\rightarrow$ Transport $\rightarrow$ Decapsulate $\rightarrow$ Decode $\rightarrow$ Sync $\rightarrow$ Playback.

  6. Understand Chrome Extension architecture (Manifest V3)

    Chrome Extensions using Manifest V3 are composed of several key components:

    • Manifest V3: The description file (similar to package.json) used to declare permissions and extension capabilities.
    • Content-Scripts: Scripts injected into web pages. They run in an isolated context from the page's own scripts but can access specific extension APIs.
    • Extension Service Worker: The background orchestrator that responds to user events, manages data communication between components, and handles storage. It communicates with Content-Scripts via JSON-serialized messages.
    • Offscreen Document: Since Service Workers cannot access DOM APIs or media streams (via navigator), they can instantiate an Offscreen Document to handle DOM-related tasks, screen recording, or specific network calls.

  7. How Content Delivery Networks (CDN) Accelerate Content Delivery

    A CDN is a distributed network of proxy servers that caches content closer to the end-user to reduce latency and bandwidth load on the origin server.

    Mechanism: When a user accesses a CDN-enabled site, the local DNS server uses a CNAME record to redirect the request to the CDN service. The CDN then applies strategies (based on content type, geography, and network load) to provide the IP address of the node closest to the user, ensuring the fastest possible response time.

  8. Understand JavaScript Closures and Lexical Scope

    JavaScript uses lexical (static) scoping, meaning the scope of a function is determined by where the function is declared, not where it is called. A closure is created when a function's scope is preserved because variables inside that scope are still referenced by an external entity after the function has finished executing.

  9. Understand and prevent Phantom Dependencies with pnpm

    Phantom dependencies occur in npm and yarn due to their flat node_modules design, which allows source code to import sub-dependencies that are not explicitly listed in the project's package.json. This creates fragility because if a parent module stops depending on that sub-module, the project code will break. pnpm solves this by using a non-flat structure where only explicitly declared dependencies are accessible in the root of node_modules. These root entries are symbolic links (symlinks) pointing to the actual package location within the .pnpm directory, preventing the accidental use of undeclared sub-dependencies.

  10. Automate i18next internationalization with kz-i18n-command

    The kz-i18n-command is an interactive command-line tool designed to automate the i18next internationalization process. It allows developers to convert or import Chinese text from code into translation files using a one-click conversion process via an interactive CLI.
    # Available via npm
npm install kz-i18n-command

  11. Next.js Framework Overview

    Next.js is a React SSR framework featuring:

    • Opinionated directory structure for fast development.
    • Built-in support for CSS Modules and css-in-js.
    • File-system based routing with support for dynamic routes.
    • Two pre-rendering strategies: Static Generation (build-time) and Server-Side Rendering (per-request).

  12. Understand CI/CD Concepts

    CI/CD stands for Continuous Integration and Continuous Deployment (or Continuous Delivery). For software engineers, the most direct application is typically Continuous Deployment, which automates the process of integrating code changes and deploying them to production environments.