weizwz's Technical Notes

UptimeFlare is a serverless monitoring service deployed on Cloudflare Workers. It uses a D1 database for state storage and Next.js for the status page frontend.

Key Data Flows:

1. Monitoring: Cron Trigger $\rightarrow$ Worker Check $\rightarrow$ Update D1 $\rightarrow$ Record Status/Failure.
2. Rendering: User Visit $\rightarrow$ Pages Request $\rightarrow$ Read D1 $\rightarrow$ SSR Rendering $\rightarrow$ Return HTML.
3. Real-time Updates: Worker Periodic Check $\rightarrow$ Status Change $\rightarrow$ Update Database $\rightarrow$ Frontend Polling/Refresh.

V8 is Google's open-source high-performance engine used to compile and execute JavaScript and WebAssembly. It is the core of Chrome, Node.js, Electron, Deno, and Bun. Key features include:

• Just-In-Time (JIT) Compilation: Compiles frequently executed 'hot' code into native machine code for speed.
• TurboFan: A modern optimizing compiler that performs deep code analysis.
• Garbage Collection: Automatically manages memory by reclaiming unused objects.
• Hidden Classes: An optimization technique used to improve property access speed.

To resolve Cross-Origin Resource Sharing (CORS) errors in a decoupled frontend (e.g., Vue) and backend architecture, use Nginx to serve both the frontend and the backend API under the same domain and port. This eliminates the port difference that triggers browser CORS restrictions.

In this setup:

1. The frontend is hosted (e.g., via Tomcat on port 8080) and proxied by Nginx at /.
2. The backend API (e.g., on port 8058) is proxied by Nginx at /api/.
3. Nginx handles the CORS headers and strips the /api/ prefix before forwarding the request to the backend service.

A scalable request architecture should be split into three layers:

1. Global Wrapper (request/request.ts): Encapsulates all requests, handling universal logic and base Axios configuration.
2. Instance Configuration (request/index.ts): Creates specific Axios instances. Use this to define baseURL and common parameters for a specific group of APIs.
3. API Definitions (api/*.ts): Defines specific endpoints and their unique parameters (e.g., login.ts). This layer allows overriding global instance settings for individual requests.

Antigravity uses a two-layer system to manage agent capabilities:

1. Skills (Global Library): The actual code, scripts, and guidelines. These are stored in a system-level directory (e.g., ~/.gemini/antigravity/skills) and represent the core capabilities.
2. Workflows (Project Level): Lightweight configuration files stored in the project root under .agent/workflows. These act as 'remotes' that define how to invoke the global Skills within a specific project.

To build a modern, high-performance navigation platform with real-time search and data persistence, the following technical stack is recommended:

• Framework: Next.js 14+ (App Router) with Turbopack
• Language: TypeScript 5+
• Styling: Tailwind CSS 3+ for responsive design
• UI Components: Ant Design 5+ and @ant-design/icons
• State Management: Redux Toolkit + RTK Query
• Animations: React Bits + Framer Motion
• Package Manager: pnpm 8+

Kiro's Spec mode follows a three-stage workflow to move from an idea to execution:

1. Requirements: Defining what the project needs to achieve.
2. Design: Planning the technical architecture and UI/UX.
3. Task list: Breaking the project down into actionable implementation steps.

Developers can execute the project based on the Task list and provide feedback or request modifications at any point during the process.

Kiro provides two distinct operational modes for AI interaction:

1. Vibe Mode: Similar to Cursor; you provide instructions and the AI modifies code in real-time. You can stop the process and request fixes if issues arise.
2. Spec Mode: A structured development workflow that starts with requirement analysis, generates requirement documents, designs the product, creates a task plan, and then executes the implementation. This is particularly useful for full-stack development.

Vue's two-way data binding is implemented using a combination of 'Data Hijacking' (via Object.defineProperty) and the 'Publisher-Subscriber' pattern. The architecture consists of four primary components:

1. Observer: Hijacks and monitors all properties. When data changes, it triggers a notification via the Dep class.
2. Dep (Dependency): Acts as the publisher. It collects Watcher instances and broadcasts update notifications to them.
3. Watcher: The subscriber. It receives notifications from Dep and executes a callback function (update) to refresh the UI.
4. Compile: Parses directives, initializes the view, and subscribes to data changes. It uses DocumentFragment during DOM parsing to minimize re-renders and improve performance.