DOCSEARCHbyAlgolia
Submit Docs

MusiBlog Technical Notes

website·Indexed 30 days ago

https://musiblog.com/note

A comprehensive collection of technical notes and tutorials covering front-end and back-end development. Topics include JavaScript (Fetch API, Intersection Observer, closures), CSS (OKLCH, layout techniques), Flutter (StatelessWidget, StatefulWidget, layout constraints), Python (classes, high-order functions), Vue 2.x, React, Java Spring, Node.js, Docker, and Git.

Tokens
693.9K
Snippets
3.8K
Records
5K
Agent score
45%

What's inside MusiBlog

  1. Overview of Server-Sent Events (SSE)

    Server-Sent Events (SSE) is a mechanism that allows a server to push real-time updates to a client over a single, long-lived HTTP connection. Unlike standard HTTP requests where the client must poll the server, SSE establishes a streaming connection where the server can continuously send data packets to the client. It is a unidirectional communication channel (Server -> Client) based on the standard HTTP protocol using the text/event-stream content type.

  2. Overview of CSS Anchor Positioning

    CSS Anchor Positioning allows absolutely positioned elements to be placed relative to any 'anchor element' on the page, bypassing the traditional DOM nesting requirements. It is particularly useful for tooltips, dropdowns, and context menus. For browsers that do not yet support this standard, a polyfill provided by the OddBird team is available.
    <script type="module">
  if (!('anchorName' in document.documentElement.style)) {
    import('https://unpkg.com/@oddbird/css-anchor-positioning')
  }
</script>

  3. Overview of Model Context Protocol (MCP)

    The Model Context Protocol (MCP) is a standardized protocol designed to unify the integration between various Large Language Models (LLMs) and external tools. It provides a consistent input schema layer, allowing developers to define tools once and have them work across different LLMs by abstracting the specific function-calling implementations of different AI providers (e.g., OpenAI vs. Anthropic). MCP extends beyond simple function calls by integrating tools, resources, and prompts into a single framework.

  4. Overview of Webpack 5 Module Federation

    Module Federation (MF) is a Webpack 5 feature that enables remote module dynamic loading and execution. It allows a large application to be split into smaller, cohesive applications that can be developed, deployed, and managed independently, facilitating a micro-frontend architecture. The core logic involves one application exporting modules and another importing them using the ModuleFederationPlugin.

  5. Overview of the browser request and rendering lifecycle

    The process of loading a web page after entering a URL follows a specific sequence: URL Parsing → Strong Cache Check → DNS Resolution → TCP Handshake → TLS Handshake (for HTTPS) → HTTP Request → Negotiation Cache Check → Server Response → Browser Rendering (DOM → CSSOM → Render Tree → Layout → Paint).
    输入 URL
  → 强缓存检查
  → DNS 解析
  → TCP 握手 → TLS 握手（HTTPS）
  → 发送 HTTP 请求 → 协商缓存检查
  → 服务端返回响应
  → 浏览器渲染（DOM → CSSOM → 渲染树 → 布局 → 绘制）

  6. Overview of Chrome's Multi-Process Architecture

    Chrome utilizes a multi-process architecture to ensure stability and isolation, preventing a single crashed tab or plugin from crashing the entire browser. The architecture consists of:

    • Browser Process (1): Manages the UI (address bar, bookmarks) and coordinates other processes.
    • Network Process (1): Handles the initiation and reception of all network requests.
    • GPU Process (1): Responsible for page layer compositing and hardware-accelerated rendering.
    • Renderer Processes (Multiple): Typically one independent process per tab.
    • Plugin Processes (Multiple): Each plugin runs independently to prevent page crashes.

  8. Overview of LangGraph streaming modes

    LangGraph provides several modes to stream output from a graph run depending on the level of detail required:

    • values: Returns the full state after each node execution.
    • updates: Returns the node name and the specific updates it made to the state.
    • debug: Returns comprehensive debugging events, including task planning and results.
    • messages: Streams LLM messages token-by-token along with call metadata.
    • custom: Allows sending custom data from within a node using StreamWriter.

  9. Overview of OKLAB and OKLCH color spaces

    OKLAB and OKLCH are color spaces created by Björn Ottosson in 2020 to resolve hue shift errors found in CIELAB and LCH. Unlike sRGB, these spaces provide more accurate color representation and a wider gamut (including P3). OKLAB is a perceptual color model, while OKLCH extends OKLAB by adding chroma and hue, making it more intuitive for designers to adjust color warmth, coolness, and saturation.

  10. Overview of LangChain Expression Language (LCEL)

    LCEL is a declarative way to compose chains in LangChain (introduced in v0.3). It allows developers to combine, sequence, and parallelize 'Runnables' like building blocks. It is ideal for simple linear pipelines (e.g., prompt + LLM + parser), while complex flows with loops or branching are better handled by LangGraph. Key advantages include optimized parallel execution, native async support, standardized APIs, and automatic tracing via LangSmith.

  11. Overview of Vector Databases

    Vector databases (also known as vector stores) are designed to store and process vector data. They utilize indexing techniques and vector retrieval algorithms to provide fast responses for high-dimensional big data. In addition to managing vectors, they often support the management of traditional structured data, allowing for hybrid filtering and retrieval across both vector and structured fields.

  12. Overview of pathlib for filesystem paths

    pathlib is an object-oriented module introduced in Python 3.4+ for handling filesystem paths. It provides a unified interface across different operating systems (Windows, Linux, macOS), automatically handling path separators. Path objects are compatible with standard library functions like open() and the os module.
    from pathlib import Path