fncheng Frontend Development Blog

Git hooks are a custom mechanism that allows developers to run scripts when specific internal Git operations or external CLI commands are executed. They are divided into two categories:

• Client-side hooks: Run in the local repository. Used to control local workflows (e.g., pre-commit, pre-push) to perform code checks or tests before committing or pushing.
• Server-side hooks: Run on the Git server. Used for team collaboration and central repository management (e.g., pre-receive, post-receive) to trigger checks or deployments when code is pushed.

Common hooks include:

• pre-commit: For formatting, linting, and syntax checks.
• post-commit: For notifications or logging after a successful commit.
• pre-push: To ensure code quality and run tests before pushing to a remote.
• post-receive: To update code, recompile, or deploy applications on the server.

nmap is a network exploration tool with three primary functions:

1. Scanning host ports to sniff provided network services.
2. Probing a group of hosts to determine if they are online.
3. Inferring the host's operating system, the route taken to reach the host, and the software versions of open ports.

Flux is a frontend architectural pattern designed to manage data flow in applications (originally for React) using a strict unidirectional data flow. It divides the application into four distinct layers:

• View: The UI layer that displays data and triggers actions.
• Action: Messages sent by the View (e.g., a mouseClick) that describe a state change. Actions typically package update information into an Action Payload object.
• Dispatcher: A central hub that receives Actions and notifies all registered Stores.
• Store: The data layer that holds the application state and implements the logic for state changes. When the state changes, the Store emits a change event to notify the View.

React handles rendering in two distinct phases:

1. Initial Render: React recursively renders the entire component tree from the top down (usually starting from App.tsx).
2. Update Render: Unlike the initial render, updates are localized. A re-render is triggered from the component where state (via useState or setState) or props change.

The Update Process:

• React re-executes the render method (or function body for functional components) to generate a new Virtual DOM tree.
• Diffing Algorithm: React compares the new Virtual DOM tree with the previous one. It only compares nodes at the same level (not globally) to find the minimum set of DOM updates required.
• Local Rendering: React updates only the necessary parts of the real DOM based on the diff results, skipping unnecessary updates to optimize performance.

Vue implements a Model-View-ViewModel (MVVM) architecture to handle data binding:

• Model: The application data and business logic.
• View: The UI components and display effects.
• ViewModel: The core framework that links the Model and View. It ensures that when data changes, the view updates, and when the view changes, the data updates.

Key components of the ViewModel include:

• Observer: Monitors all data properties for changes.
• Compiler: Scans DOM elements for directives, replaces them with data, and binds update functions.

The Flux architecture ensures predictable state management by enforcing a one-way data loop:

1. User Interaction: The user interacts with the View.
2. Action Trigger: The View dispatches an Action.
3. Dispatching: The Dispatcher receives the Action and notifies the Store(s).
4. State Update: The Store updates its state based on the Action type (often using a Reducer logic) and emits a change event.
5. View Update: The View listens for the change event and re-renders the UI to reflect the new state.

When a client sends an HTTP request to a server, the message follows a specific format consisting of four parts:

1. Request Line: Contains the method, URI, and HTTP version.
2. Request Header: Contains metadata about the request.
3. Empty Line: A blank line separating the headers from the body.
4. Request Body (Data): The actual payload being sent to the server.