Jaqi Technical Documentation

website·Indexed 30 days ago

https://www.jaqi.top

A comprehensive technical knowledge base covering frontend development (HTML5, CSS3), system administration (Linux, Nginx), programming (Python), and AI concepts including Large Language Models (LLM), prompt engineering, and the Model Context Protocol (MCP). It also includes software engineering specifications for code linting (ESLint, Stylelint), commit messages, branch management, and Monorepo organization.

Tokens
167.7K
Snippets
936
Records
1.2K
Agent score
48%

What's inside Jaqi Knowledge Base

  1. Overview of JavaScript Data Types

    JavaScript data types are divided into two main categories:

    Primitive Types: Undefined, Null, Boolean, Number, String, and Symbol (ES6). Reference Types: Object, Array, Date, and Function.

  2. Overview of Proxy Pattern types

    The Proxy Pattern provides a surrogate or placeholder for another object to control access to it. Common types include:

    • Virtual Proxy: Used for lazy loading or preloading expensive resources (e.g., images).
    • Caching Proxy: Merges multiple requests or caches results to improve performance.
    • Protection Proxy: Controls access based on different permission levels.
    • Firewall Proxy: Controls access to network resources.
    • Remote Proxy: Represents an object located in a different address space.
    • Smart Reference Proxy: Performs additional actions when an object is accessed.
    • Copy-on-Write Proxy: Creates a copy of a resource only when it is modified.
  3. Compare Procedure Oriented (PO) and Object Oriented (OO) Programming

    Procedure Oriented (PO) programming breaks a problem down into a sequence of functions and data (parameters). It is generally higher performance but harder to maintain and extend. Object Oriented (OO) programming abstracts problems into objects with properties and methods. It is easier to maintain, reuse, and extend due to encapsulation, inheritance, and polymorphism, though it may have lower performance due to instantiation overhead.
  4. Retrieve screen dimensions using the Screen object

    The screen object provides information about the user's display screen.
    screen.width;        // Total screen width
    screen.height;       // Total screen height
    screen.availWidth;   // Width excluding OS taskbars
    screen.availHeight;  // Height excluding OS taskbars
    screen.bufferDepth;  // Bit depth of the screen
  5. Use the Python `re` module for regular expressions

    The re module provides support for regular expressions in Python. It primarily works with two types of objects: RegexObject (the compiled pattern) and MatchObject (the result of a successful match). Patterns can be defined using raw strings (e.g., r'\d') or by using re.compile().
    import re
    
    # Using raw string
    reg = r'\d'
    
    # Using compile
    pattern = re.compile('\d')
    
    # Dynamic pattern construction
    value = 'jaqi_l'
    result = re.search(r'\w+\.' + value + '\.\w+', 'www.jaqi_l.com')
  6. Understand Vue's Virtual DOM and Rendering Performance

    Vue uses a Virtual DOM, which is an abstraction of the real DOM containing its structure and attributes. It uses a Diff algorithm to compare the virtual DOM with the real DOM and performs partial rendering. This optimizes performance by reducing browser repaints and reflows.

    • Reflow: Occurs when elements are added or removed from the DOM tree, requiring the browser to re-render the entire tree. This is more performance-intensive than repainting.
    • Repaint: Occurs when styles change without adding or removing elements, requiring the browser to render only the specific element.
  7. Understand the basic elements of an LLM prompt

    A prompt is the method of questioning used to evoke specific capabilities in a Large Language Model to solve practical problems. A well-structured prompt typically contains four elements:

    • Instruction: A clear statement of the task or goal the model needs to achieve.
    • Context: Necessary background information or examples to help the model understand the task.
    • Input Data: The specific data or question provided by the user for processing.
    • Output Indicator: Guidance on the desired result or format of the response.
  8. Understand single-spa micro-frontend architecture

    single-spa is a single-instance micro-frontend framework that acts as a lifecycle orchestrator for micro-applications. It manages the mounting and unmounting of applications based on the current route.

    Key architectural principles:

    • Routing: Uses pushState and onpopstate to monitor and manipulate the URL for switching between micro-apps.
    • Integration: Typically utilizes HTML Entry for loading micro-apps.
    • Isolation: Implements code isolation using snapshot sandboxes and proxy sandboxes.
  9. Vuex Core Concepts Overview

    Vuex provides a centralized store for all components in an application. Its core architecture consists of:

    • State: The single source of truth (state tree) that holds the application data.
    • Getters: Derived state, similar to computed properties, which are cached and only re-evaluated when their dependencies change.
    • Mutations: The only way to change the state. Mutations must be synchronous.
    • Actions: Used for asynchronous operations. They trigger mutations via commit and return a Promise.
    • Modules: Used to split the store into smaller modules for complex applications, where each module can have its own state, mutations, actions, and getters.
  10. Choose a CSS implementation strategy based on granularity

    The project defines four CSS introduction schemes categorized by granularity. As granularity increases, flexibility decreases but maintainability increases.