DOCSEARCHbyAlgolia
Submit Docs

Mochi Blog Technical Notes

website·Indexed 30 days ago

https://lemonnuu.github.io/mochi-blog/

A collection of technical guides and notes covering frontend development. Topics include JavaScript internals (Promise implementation, Event Loop, Ajax, Fetch), TypeScript basics and advanced types, Vue 3 migration guides and source code analysis, and build tools such as esbuild, Rollup, and Parcel.

Tokens
54.7K
Snippets
267
Records
385
Agent score
75%

What's inside Mochi Blog

  2. Inspect Response object properties

    The Response object contains metadata about the HTTP response:

    • ok: Boolean; true if status is in the range 200-299.
    • status: The numeric HTTP status code (e.g., 200).
    • statusText: The status message corresponding to the code (e.g., 'OK').
    • url: The final URL of the response.
    • redirected: Boolean; true if the response is the result of a redirect.
    • headers: The Headers object associated with the response.
    • bodyUsed: Boolean; true if the body has already been read.

  3. Vue 3 Source Code Organization via Monorepo

    Vue 3 transitioned from a single src directory structure (used in Vue 2) to a monorepo architecture. In Vue 3, the source code is split into multiple packages within the packages/ directory. This approach provides several benefits:

    1. Granular Responsibility: Each package has its own API, type definitions, and tests, making the codebase easier to maintain and understand.
    2. Clearer Dependencies: Module dependencies are more explicit.
    3. Independent Usage: Certain packages, such as @vue/reactivity, can be used independently of the full Vue.js framework, allowing developers to leverage Vue 3's reactivity system without importing the entire library, thereby reducing bundle size.
    vue-next-3.2.37/
├── packages/
│   ├── compiler-core/      # Compiler core
│   ├── compiler-dom/       # Browser-specific compilation
│   ├── compiler-sfc/       # Single File Component (.vue) compilation
│   ├── compiler-ssr/       # Server-side rendering compilation
│   ├── reactivity/         # Reactivity core module
│   ├── runtime-core/       # Runtime core (platform-agnostic)
│   ├── runtime-dom/        # Browser-based runtime
│   ├── server-renderer/    # Server rendering
│   ├── shared/             # Shared utilities
│   └── vue/                # Test instances and bundled dist

  4. Interpret HTTP response headers

    Response headers provide metadata about the server's response and the payload:

    • Content-Type: The MIME type of the returned data (e.g., application/json).
    • Content-Length: The size of the response body in bytes.
    • Content-Encoding: The compression algorithm used for the response body (e.g., gzip).
    • Set-Cookie: Used by the server to send cookies to the client for storage.

  5. Understand Vue.js core concepts and MVVM architecture

    Vue is a progressive framework for building user interfaces based on the MVVM (Model-View-ViewModel) pattern. Its core focus is the view layer, utilizing two primary ideas:

    1. Data-Driven: The view automatically updates when the underlying data changes.
    2. Component-Based: Encourages high cohesion and low coupling, improving reusability, maintainability, and testability.

    In the MVVM pattern, the ViewModel (VM) acts as a bridge between the Model (data) and the View (UI). When the Model changes, the VM detects it and notifies the View to update.

  6. Understand JavaScript Statements and Expressions

    A statement is a complete instruction containing keywords, operators, variables, constants, and expressions.

    Statements are categorized as:

    1. Declarative: e.g., import _ from 'lodash'
    2. Assignment: e.g., const variable = 123
    3. Executive: e.g., if (true) { ... }

    Expressions are subsets of statements that evaluate to a value and can be assigned to variables. Examples include literal expressions (1), variable expressions (a), arithmetic expressions (a * b), function expressions (setTimeout(...)), and assignment expressions (a = b * 2).

  7. Use Rollup for bundling open-source libraries

    Rollup is a module bundler preferred for developing libraries over Webpack. While Webpack is suitable for business applications, it injects significant boilerplate code for its own module loading logic. Rollup produces cleaner, more lightweight bundles by avoiding this overhead, making it ideal for small-scale libraries where minimizing the final bundle size is critical.

  8. Understand the Same-Origin Policy (SOP)

    The Same-Origin Policy is a security measure implemented by browsers to restrict how a document or script from one origin interacts with resources from another origin. Two URLs are considered 'same-origin' only if they share the exact same protocol, domain, and port. If any of these differ, the browser will throw a security error.

    Key notes:

    • SOP exists only in the browser; it does not apply to Node.js environments.
    • Certain tags can bypass SOP for loading resources, specifically <img>, <link rel="stylesheet">, and <script src="...">.

  9. Understand the Same-Origin Policy (SOP)

    The Same-Origin Policy is a security measure implemented by browsers to restrict how a document or script from one origin can interact with resources from another origin. Two URLs are considered 'same-origin' only if they share the exact same protocol, domain, and port. If any of these differ, the browser will throw a security error for certain requests.

    Key caveats:

    • SOP is enforced by the browser; it does not exist in Node.js environments.
    • Certain tags can load cross-origin resources regardless of SOP, such as <img>, <link rel="stylesheet">, and <script src="...">.

  10. Perform Type Assertions using as syntax

    When you know more about a variable's type than TypeScript does (e.g., when dealing with any or union types), use type assertions. While angle-bracket syntax <type> exists, the as syntax is preferred and is the only version allowed in JSX.
    let someValue: any = 'this is a string'

// Recommended: 'as' syntax
let strLength: number = (someValue as string).length

// Alternative: angle-bracket syntax (not for JSX)
let strLength2: number = (<string>someValue).length

  12. Vue 3 Migration from Flow to TypeScript

    Vue 3 was completely rewritten in TypeScript, replacing the Flow type checker used in Vue 2. The shift to TypeScript was driven by:

    1. Better Type Inference: TypeScript provides superior support for complex type scenarios compared to Flow, which occasionally failed to infer types correctly (forcing the use of any).
    2. Reduced Maintenance: Writing the source in TypeScript eliminates the need to manually maintain separate .d.ts declaration files.
    3. Stronger Ecosystem: TypeScript offers a more robust and frequently updated ecosystem for large-scale framework development.