DOCSEARCHbyAlgolia
Submit Docs

dddssw Technical Blog

website·Indexed 30 days ago

https://dddssw.github.io/blog

A collection of technical notes and guides covering frontend development, including JavaScript grammar (closures, prototypes, event bubbling), Web APIs (Canvas, History, Drag and Drop), browser internals (HTTP caching, CORS, XSS), and frameworks like React, Vue, and Vite. Also includes content on Rust programming, VS Code extension development, and build tools like Webpack and pnpm.

Tokens
49.8K
Snippets
235
Records
363
Agent score
75%

What's inside dddssw Blog

  1. Overview of core VS Code extension API modules

    The vscode module provides several key namespaces for extension development:

    • ExtensionContext: Provides the context for the extension (e.g., storage paths, subscription management).
    • languages: Used to register language services (CodeLens, completions, hover tips) and language features (navigation, document symbols, syntax highlighting).
    • commands: Used to register and handle VS Code commands.
    • Disposable: An interface for managing and releasing resources via the dispose method.
    • workspace: Provides access to the workspace, including reading and updating configuration settings.
    • window: Used for interacting with the VS Code window, such as showing information message boxes.
    import { 
    ExtensionContext, languages, commands, Disposable, workspace, window 
} from 'vscode';

  2. Understand JavaScript Event Bubbling

    Event bubbling is the process where an event triggers the handler on the element where it occurred, then triggers handlers on its parent, then its grandparent, and so on, moving up the ancestor chain. Most events bubble, although there are exceptions (e.g., the focus event does not bubble).

  3. Understand the Browser Critical Rendering Path steps

    The Critical Rendering Path (CRP) is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into actual pixels on the screen. The process follows these steps:

    1. Build the Document Object Model (DOM) from HTML.
    2. Build the CSS Object Model (CSSOM) from CSS.
    3. Execute JavaScript that modifies the DOM or CSSOM.
    4. Construct the Render Tree by combining the DOM and CSSOM.
    5. Perform layout operations to determine the position and size of elements.
    6. Paint pixels for elements into memory.
    7. Composite overlapping pixels.
    8. Physically draw the generated pixels to the screen.

  4. Understand JavaScript Lexical Environments and Closures

    In JavaScript, every running function, code block {}, and the global script has an internal hidden object called a Lexical Environment.

    A Lexical Environment consists of two parts:

    1. Environment Record: An object that stores all local variables as properties (including the value of this).
    2. Outer Lexical Environment Reference: A reference to the environment of the outer code.

    When the engine looks for a variable, it searches the current internal lexical environment, then the outer environment, and so on, until it reaches the global lexical environment.

    Closures: All functions (except those created via new Function) are closures. They possess a hidden [[Environment]] property that stores a reference to the lexical environment where the function was created. This allows the function to remember and access variables from its creation scope regardless of where it is called.

  5. React Native Architecture Overview

    React Native uses a bridge to communicate between the JavaScript thread and the Native thread. Styling is handled by a separate 'shadow' thread that calculates layout and sends the results to the native UI thread.

  6. Understand React state persistence and component identity

    React does not store state within the component itself; instead, it associates state with a component based on its position in the rendering tree. State is cleared when a component is destroyed. If the same component remains at the same position in the tree, its state is preserved. You can force a component to update or reset by changing its key prop.

  7. Understand the difference between Tree-Shaking and Dead Code Elimination

    Tree-shaking and Dead Code Elimination (DCE) both aim to remove unused code to reduce bundle size, but they operate differently. DCE typically removes dead code after the code has been bundled (like removing eggshells after the cake is baked). Tree-shaking removes unused exports during the bundling process by analyzing the module graph (removing eggshells before baking the cake). In Webpack, DCE is not handled by Webpack itself but by minifiers like UglifyJS or Terser (via terser-webpack-plugin).

  8. Handle optional values with Option and match

    Rust uses the Option<T> enum (containing Some(T) and None) to represent values that might be absent, replacing the concept of null. Because Option<T> is a different type than T, you must explicitly handle the None case to extract the inner value.

    Pattern Matching with match:

    • Use match to handle all possible variants of an enum.
    • The _ pattern acts as a wildcard for all other cases.
    match x {
    None => None,
    Some(i) => Some(i + 1),
}

  9. JavaScript Data Types Overview

    JavaScript has eight data types: null, undefined, number, string, boolean, object, symbol, and bigint.

    • symbol: Used to create unique identifiers to avoid global variable conflicts.
    • bigint: Used for integers larger than 2^53-1 to prevent precision loss.
    • Storage: Primitive types are stored in the stack, while reference types are stored in the heap (with a pointer in the stack).

  10. Understand how JavaScript engines execute code

    JavaScript can execute in any environment with a JS engine (e.g., Chrome uses the V8 engine). The basic execution process follows three steps: 1. The engine parses the script. 2. The engine compiles the script into machine language. 3. The machine code is executed. Engines continuously optimize this process by monitoring data flow during runtime to further refine the machine code.

  11. Retrieve information about the active text editor

    You can access the active editor's document properties to determine the file scheme (local vs remote) and the language identifier.
    // Check if the file is local
const isLocalFile = vscode.window.activeTextEditor.document.uri.scheme === 'file';

// Check the language ID (e.g., 'json')
const languageId = vscode.window.activeTextEditor.document.languageId === 'json';

  12. Use import.meta to get module information

    The import.meta object provides metadata about the current module. In a browser environment, import.meta.url returns the full URL of the current script.
    // Inside a module script
console.log(import.meta.url); // e.g., http://127.0.0.1:5500/a.js