DOCSEARCHbyAlgolia
Submit Docs

ivanzgh Technical Blog

website·Indexed 30 days ago

https://ivanzgh.github.io/blog/

A technical knowledge base covering front-end development, including TypeScript (generics, decorators, interfaces), Vue 3, Vuex, and vue-router. It features guides on mini-program development (uni-app, Taro, WeChat Mini Programs), software design patterns (Singleton, Strategy, Observer, Factory, Proxy, Adapter), and development tools such as Webpack, pnpm, Git, and iTerm2.

Tokens
168.4K
Snippets
912
Records
1.1K
Agent score
75%

What's inside ivanzgh Blog

  1. Overview of Web Media APIs

    Several specialized APIs are available for advanced media handling:

    • Media Source Extensions (MSE): Allows JS to dynamically construct media streams and feed them to <video>/<audio> tags. Used by libraries like flv.js to transcode FLV to HTML5 supported formats.
    • Web Audio API: Used for processing and synthesizing audio, including effects, visualization, and professional audio tools.
    • Media Stream API: Used to capture audio/video from cameras, microphones, or screen recording. It acts as the bridge between physical streams and WebRTC.
    • WebRTC: A set of APIs for real-time peer-to-peer audio, video, and data communication without requiring a central server for the media stream itself.

  2. Overview of the Strategy Design Pattern

    The Strategy Pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. This separates the use of an algorithm from its implementation. A strategy-based program consists of two main parts:

    1. Strategy Classes: Encapsulate specific algorithms and handle the actual calculation process.
    2. Context Class: Receives user requests and delegates them to a specific strategy class.

  3. Understand basic computer organization and hardware components

    Computer Organization consists of the following fundamental hardware components:

    • Arithmetic Logic Unit (ALU/运算器): Performs calculations.
    • Control Unit (控制器): Manages the execution of instructions.
    • Memory (存储器): Stores data and instructions.
    • Input Devices (输入设备): Provides data to the system.
    • Output Devices (输出设备): Presents processed data to the user.

  4. Understand Node.js Buffer characteristics

    A Buffer is an object similar to an Array used to represent a fixed-length sequence of bytes. It is essentially a dedicated piece of memory used for processing binary data. Key characteristics include:

    • Fixed size: Once created, the size cannot be adjusted.
    • High performance: It allows direct operation on computer memory.
    • Element size: Each element in a Buffer is exactly 1 byte.

  5. Understand the role of VTS in port management

    VTS (Vessel Traffic Service) is a monitoring system used to manage ships in bays and port entrances. It integrates AIS base stations, radar, CCTV, wireless telephony, and shipborne terminals to monitor route deviation, direction, speed, and vessel interactions to provide safety information for entering and exiting ports.

  6. Implement subpackages in WeChat Mini Programs

    Subpackages allow you to split a Mini Program's code into multiple smaller packages that are loaded on demand. This prevents the initial download from being too large.

    Size Constraints:

    • Total size of all subpackages combined must not exceed 20MB.
    • Each individual subpackage or the main package must not exceed 2MB.

    Loading Behavior:

    • The main package is downloaded and started by default upon app launch.
    • Subpackages are downloaded only when the user navigates to a page within that specific subpackage.

  7. Understand React's Virtual DOM and rendering optimization

    React uses a Virtual DOM—a lightweight memory copy of the actual DOM—to optimize updates. When state changes, React compares the new Virtual DOM with the previous version (Diffing) to calculate the minimum set of operations required to update the actual DOM, avoiding full page repaints. To further improve performance, React employs batching (grouping multiple state updates) and priority scheduling (ensuring high-priority tasks, like user input, are executed before lower-priority tasks, like network request renders).

  8. Enable React StrictMode for development

    Wrapping the application in <React.StrictMode> in the development environment causes React to call render functions twice. This helps identify impure functions, detect useEffect errors early, and warn about deprecated APIs.
    import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

  9. Initialize a basic OpenLayers map

    To create a basic map in OpenLayers, you need a map container (div), a layer with a data source, and a view to define the center and zoom level. The core architecture consists of the Map container, Layers, Sources, and the View.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css" />
    <style>
      .map { height: 400px; width: 100%; }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

  10. Understand Doubly Linked Lists

    A Doubly Linked List is a variation of a linked list where each node contains an additional pointer to the previous node (predecessor). This allows for efficient bidirectional traversal of the list, whereas a singly linked list only allows forward traversal.

  11. Understand MongoDB Core Concepts

    MongoDB is a distributed document-oriented database. Its structure can be mapped to JSON concepts:

    • Database: A data warehouse (similar to a JSON file).
    • Collection: A group of documents (similar to an array of objects under a top-level key in JSON).
    • Document: The smallest unit of data (similar to a JS object).
    • Field: A property within a document.

  12. Compare Monorepo and Multirepo strategies

    Monorepo (single repository) and Multirepo (multiple repositories) are two different code organization strategies.

    Monorepo

    • Characteristics: Unified code standards, build, and release processes; shared dependencies and code (e.g., via packages/shared); centralized control.
    • Trade-offs: Larger repository size can lead to longer build/release times; requires strict adherence to commit and code standards due to shared access.
    • Best for: Large organizations, highly interdependent projects, or teams requiring frequent cross-project code reuse (e.g., Babel, Vue3).

    Multirepo

    • Characteristics: Independent repositories per project; isolated lifecycles and version control; flexible toolchain choices per project.
    • Trade-offs: Higher maintenance cost due to multiple repositories; fragmented dependency management.
    • Best for: Small to medium projects with weak inter-dependencies or teams requiring high autonomy and rapid independent iteration.