DOCSEARCHbyAlgolia
Submit Docs

Alan Ngai's Technical Blog

website·Indexed 31 days ago

https://alanngaijx.xyz/alan-blog/article/

A collection of technical articles and guides covering a wide range of development topics, including Vue.js, Flutter, Node.js, MongoDB, npm, and general frontend technologies like SVG, Vite, and Chrome extension development. It also includes notes on algorithms, Linux basics, and GitHub automation.

Tokens
78.7K
Snippets
391
Records
567
Agent score
53%

What's inside Alan Ngai Blog

  1. Overview of Vuex State Management

    Vuex is a state management plugin for Vue that uses a centralized store to manage the state of all components in an application. It solves the problem of complex prop drilling and state synchronization between sibling or distant components, replacing fragile callback/event patterns with a single source of truth.

  2. Overview of Chrome Extension core components

    Chrome extensions are composed of several key functional units:

    • Popup: The UI that appears when the user clicks the extension icon.
    • Background (Service Worker): Scripts that run in the background to listen for browser events. In MV3, these are implemented as Service Workers and can be configured as modules.
    • Content Scripts: Scripts that run in the context of a web page, allowing modification of the DOM and interaction with the page content. They run in an isolated environment and cannot modify page objects directly.
    • Options Page: A dedicated page for user settings and configuration.
    • Devtools Page: A custom page integrated into the Chrome Developer Tools for debugging and testing.
    • Service Worker: An optional component for performing heavy background tasks like network requests without impacting browser performance.

  3. Overview of Provider for state management

    Provider is a third-party wrapper around InheritedWidget that simplifies resource allocation, disposal, and supports lazy loading. It follows the Observer pattern (similar to MVVM in Vue):

    • Model: The data warehouse, typically using ChangeNotifier.
    • ViewModel: ChangeNotifierProvider which manages the state.
    • View: The UI components that consume the data.

  4. Overview of MongoDB Aggregation Framework

    Aggregation in MongoDB processes data records and returns computed results by combining values from multiple documents. The primary method for this is the Aggregation Pipeline, where documents enter a multi-stage pipeline and are transformed into a final result.
    db.orders.aggregate([
    { $match: { status: "A" } },
    { $group: { _id: "$cust_id", total: { $sum: "$amount" } } }
])

  5. Overview of Dart language and ecosystem

    Dart is a strongly typed language similar to TypeScript, used for developing clients for web, server, and mobile applications. It can run directly on a native system's virtual machine or be compiled into JavaScript for browser execution. The ecosystem consists of the Dart language, the Flutter framework, and the pub package manager.

  6. Understand Symmetric Cryptography

    Symmetric cryptography uses the same key or algorithm for both encryption and decryption. It is characterized by fast processing speeds and simple implementation. However, it is insecure for client-server communication if the key must be transmitted between parties, as the key can be intercepted. Common algorithms include AES, DES, and 3DES.

  7. Access environment variables using process.env in Node.js

    In Node.js, process is a global variable. The process.env property returns an object containing the user environment, allowing developers to access environment variables. This is commonly used to switch configurations between different environments (e.g., production vs. development). Because these values are returned as strings, you must use strict string comparison when evaluating them in JavaScript.
    if (process.env.NODE_ENV === 'production') {
  module.exports = require('./prod.js');
} else {
  module.exports = require('./dev.js');
}

  8. Understand shallow vs deep cloning in JavaScript

    In JavaScript, primitive data types do not exhibit shallow or deep cloning behavior as they are copied by value. However, reference types (objects, arrays) do:

    • Shallow Clone: Copies only the reference (address). Changes to nested reference types in the clone will affect the original object.
    • Deep Clone: Completely copies the data in the heap. The original and the clone are entirely independent; changes to one do not affect the other.

  9. Understand the relationship between Constructor, Instance, and Prototype

    In JavaScript, three entities form the basis of the prototype system:

    • Constructor Function: A function used with the new keyword to create objects.
    • Instance Object: The object created by calling a constructor with new.
    • Prototype Object: The object pointed to by the constructor's prototype property.

    Key Relationships:

    1. Constructor $ o$ Prototype: The constructor has a prototype property pointing to the prototype object.
    2. Prototype $ o$ Constructor: The prototype object has a constructor property pointing back to the constructor function.
    3. Instance $ o$ Prototype: The instance's __proto__ (implicit prototype) points to the constructor's prototype (explicit prototype).

  10. Reference common HTTP response headers

    HTTP response headers provide metadata about the server's response and the resource being returned. Key headers include:

    • Cache-Control: Specifies caching policies (e.g., no-cache).
    • Content-Type: Defines the MIME type of the returned content (e.g., text/html; charset=utf-8).
    • ETag: Provides a unique identifier for a specific version of a resource to help with web caching.
    • Last-Modified: Indicates the date and time the resource was last changed.
    • Set-Cookie: Used by the server to send a cookie to the client for session management or tracking.
    • Location: Used for redirection to a different URL.
    • Content-Length: The size of the response body in bytes.
    • Content-Encoding: The compression algorithm used for the response body (e.g., gzip).
    • Server: The software name of the web server.
    • WWW-Authenticate: Defines the authentication scheme the client must use to access the resource.
    Cache-Control: no-cache
Content-Type: text/html; charset=utf-8
ETag: “737060cd8c284d8af7ad3082f209582d”
Last-Modified: Tue, 15 Nov 2010 12:45:26 GMT
Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
Location: http://www.zcmhi.com/archives/94.html
Content-Length: 348
Content-Encoding: gzip
Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)
WWW-Authenticate: Basic

  11. TCP Protocol Overview

    Transmission Control Protocol (TCP) is a connection-oriented, reliable transport protocol. It requires a point-to-point connection to be established before data can be exchanged.

    Key Characteristics:

    • Advantages: Stable data transmission with low packet loss due to failure retransmission and congestion control mechanisms.
    • Disadvantages: Slower speed and lower efficiency compared to UDP; consumes more CPU resources; susceptible to DoS/DDoS attacks such as SYN Flood.
    • Common Use Cases: Scenarios requiring high stability and reliability, such as HTTP requests, FTP file transfers, and email transmission.

  12. Understand IP addresses and Domain Names

    An IP address is a string of characters following a network service protocol. A Domain Name acts as an alias for an IP address. When a domain is bound to a server, it maps to an IP address. Note that one domain typically maps to one IP, but one IP can be associated with multiple domains.