DOCSEARCHbyAlgolia
Submit Docs

MarkGuan's Technical Blog

website·Indexed 29 days ago

https://xqgj.cc/

A personal technical blog by MarkGuan focusing on frontend development, featuring tutorials and experience summaries on uni-app, Vue 3, TypeScript 5, Node.js, Linux (CentOS 7), and various web technologies including WebSockets, Webpack, and MySQL optimization.

Tokens
149K
Snippets
781
Records
925
Agent score
47%

What's inside MarkGuan's Blog

  1. Overview of Portainer

    Portainer is a lightweight management UI used to manage Docker environments, including standalone Docker hosts and Docker Swarm clusters. It allows users to manage Docker resources such as containers, images, volumes, and networks through a single container deployment compatible with Linux and Windows.

  2. Overview of Intranet Penetration for Local Development

    Intranet penetration allows developers to expose a local website or service to the public internet without purchasing a dedicated server. This is achieved by creating a tunnel (e.g., via tools like natapp or nps) that maps a public URL to a local port, enabling external clients or mobile devices to access the local development environment. Common use cases include debugging WeChat local development and demonstrating websites to clients.

  4. Overview of FFmpeg for video transcoding

    FFmpeg is a leading multimedia framework used for decoding, encoding, transcoding, muxing, demuxing, streaming, filtering, and playing a wide variety of media formats. It is widely used in the industry for video processing tasks due to its extensive format support and portability.

  5. Overview of FFmpeg and its components

    FFmpeg is a leading multimedia framework capable of decoding, encoding, transcoding, muxing, demuxing, streaming, filtering, and playing most formats. It consists of several libraries (libavcodec, libavutil, libavformat, libavfilter, libavdevice, libswscale, and libswresample) and provides three primary command-line tools for end-users: ffmpeg (transcoding), ffplay (playback), and ffprobe (analysis).

  6. Overview of JSON Web Token (JWT) structure and security

    JWT (JSON Web Token) is an open standard (RFC 7519) for securely transmitting information as a JSON object. A JWT consists of three parts separated by dots (header.payload.signature):

    1. Header: Contains the token type and signing algorithm (e.g., {"alg": "HS256", "typ": "JWT"}).
    2. Payload: Contains claims (user information and metadata). Examples include registered, public, and private claims.
    3. Signature: Created by signing the encoded header and payload using a secret or a public/private key pair.

    Security Warning: Because the Header and Payload are only base64 encoded and can be easily decoded by anyone, never store sensitive private information within the Payload.

  7. Introduction to Regular Expressions in JavaScript

    Regular expressions (RegExp) in JavaScript are objects used to describe character patterns. They are primarily used for form input validation and text character processing. JavaScript's implementation of regular expressions is based on the Perl language, utilizing the RegExp class. Both the String and RegExp objects provide methods for pattern matching and manipulation.

  8. Overview of WebSocket Protocol

    WebSocket is an HTML5 feature that provides a full-duplex communication protocol over a single TCP connection. It simplifies data exchange between clients and servers by allowing the server to push data to the client actively after a single initial handshake, maintaining a persistent connection for bidirectional communication.

  9. Manage plugins and modules with uni_modules

    uni_modules is the official modularization specification for uni-app (supported in HBuilderX 3.1.0+). It allows the encapsulation of JS SDKs, components, pages, uniCloud functions, and public modules into a reusable package. Developers are encouraged to use the official DCloud Plugin Market (ext.dcloud.net.cn) rather than generic npm packages to ensure cross-platform compatibility.

  10. Understand Event Propagation in DOM Level 2

    DOM Level 2 introduces event propagation, meaning an event triggered on a target element can also be triggered by its ancestor elements. Propagation occurs in three phases:

    1. Capturing Phase: The event travels from the Document object down the DOM tree to the target node. Ancestors with capturing handlers execute first.
    2. Target Phase (Self): The event reaches the target element, and handlers registered directly on it execute.
    3. Bubbling Phase: The event travels back up the DOM tree from the target to the Document object. Ancestors with bubbling handlers execute during this phase.

    Note: Not all events bubble; typically, original/basic events bubble while high-level semantic events may not.

  11. Manage and inspect the current URL with the Location object

    The window.location object contains information about the current document's URL.

    Key Properties:

    • protocol: The page communication protocol (e.g., http:).
    • host: Domain name including the port.
    • hostname: Domain name only.
    • port: Port number.
    • href: The full URL address.
    • hash: The anchor part of the URL.
    • search: The query string (including the ? character).

    Key Methods:

    • reload(): Reloads the current page.
    • replace(url): Loads a new URL and replaces the current entry in the browser history.
    // 1. Reload current page
window.location.reload();

// 2. Navigate to a new URL
window.location = 'test.html';
window.location.href = 'test.html';

// 3. Replace current history entry and navigate
window.location.replace('test.html');

  12. Implement 2FA (Two-Factor Authentication) in Node.js

    Two-Factor Authentication (2FA) adds a layer of security by requiring a time-synced, 6-digit one-time password (OTP) generated from a secret key. In Node.js, this is typically implemented using the speakeasy library for the TOTP logic and qrcode for providing the setup URI to the user's authenticator app.