DOCSEARCHbyAlgolia
Submit Docs

Touko's Portfolio and Technical Blog

website·Indexed 29 days ago

https://toukoxu.github.io/

A collection of web-based utility tools, technical guides, and personal projects by frontend engineer Touko. Features include image processing tools (Base64 conversion, WebP conversion, batch compression), developer utilities (timestamp converter, PX to REM converter, text diff tool), and a financial calculator. The site also hosts deep-dive technical documentation on JavaScript core concepts such as ES6 Proxy, Reflect, async/await, Generators, Closures, and the Prototype Chain.

Tokens
28.6K
Snippets
131
Records
170
Agent score
73%

What's inside Touko's Portfolio

  1. Overview of the Reflect built-in object

    Reflect is an ES6 built-in object that provides a unified, functional API for object operations. It replaces fragmented legacy syntaxes (like the delete keyword or in operator) with consistent function calls. Key benefits include:

    • Unified API: All operations are functions, making them compatible with functional programming patterns.
    • Consistent Error Handling: Most methods return a boolean (true for success, false for failure) instead of throwing errors.
    • Correct this Binding: Supports a receiver parameter to ensure the correct this context is maintained, especially in proxy or inheritance scenarios.
    • Proxy Integration: Its methods map one-to-one with Proxy traps, making it the standard tool for implementing default behavior within a Proxy.

  2. Implement basic object interception using Proxy

    The Proxy object in ES6 allows you to create a wrapper around a target object to intercept and redefine fundamental operations (like reading or writing properties). It is initialized using new Proxy(target, handler).

    • target: The object to be proxied (can be an object, array, function, or another proxy).
    • handler: An object containing 'traps' (interception methods) that define the custom behavior for specific operations.
    • proxy: The resulting proxy object that must be used instead of the target to trigger the interception logic.
    // Target object
const user = { name: 'Alice', age: 28 };

// Handler configuration
const userHandler = {
  // Intercepts property reading (e.g., proxy.name)
  get(target, propKey) {
    console.log(`Reading property: ${propKey}`);
    // Use Reflect.get to maintain default behavior
    return Reflect.get(target, propKey);
  },
  // Intercepts property writing (e.g., proxy.age = 29)
  set(target, propKey, value) {
    console.log(`Modifying property ${propKey}: from ${target[propKey]} to ${value}`);
    // Use Reflect.set to maintain default behavior
    return Reflect.set(target, propKey, value);
  },
};

// Create the proxy
const proxyUser = new Proxy(user, userHandler);

console.log(proxyUser.name); // Triggers get
proxyUser.age = 29;          // Triggers set

  3. Understand the underlying mechanism of async/await

    The async/await syntax is not a standalone feature but a combination of three core components:

    1. Generators: Provide the ability to pause and resume function execution using yield.
    2. Promises: Act as the standard interface for managing asynchronous results.
    3. Automatic Executor (Spawn): A scheduler that automatically drives the generator to completion by handling the resolution of promises and calling .next() or .throw() on the generator instance.

  4. Understand the JavaScript Prototype Chain mechanism

    The prototype chain is the core mechanism for inheritance in JavaScript. Every object has a hidden internal property called [[Prototype]] (accessible via Object.getPrototypeOf()) that points to another object (its prototype). This creates a chain of objects. When accessing a property, JavaScript searches the object itself; if not found, it traverses up the prototype chain until the property is found or the end of the chain (null) is reached.
    // Parent object
const animal = { eats: true };
// Child object
const rabbit = { jumps: true };

// Set rabbit's prototype to animal
Object.setPrototypeOf(rabbit, animal);

console.log(rabbit.eats); // true (found via prototype chain)

  5. Understand the essence of JavaScript Closures

    A closure is the combination of a function and the lexical environment in which it was declared. In practical terms, a closure allows a function to 'remember' and access variables from its original scope (its 'home'), even when that function is executed outside of that scope (in a 'foreign' environment). This effectively extends the lifetime of variables that would otherwise be garbage collected after the outer function finishes execution.
    function createMemory() {
  // This variable belongs to the outer function scope
  const secret = 'I am the content remembered from home';
  
  // Inner function: acts as the key to retrieve the 'home' variable
  return function getSecret() {
    console.log(secret); // Accesses the outer scope variable
  };
}

// The outer function executes and returns the inner function
const myMemory = createMemory();

// Even though createMemory has finished executing, the closure preserves 'secret'
myMemory(); // Output: "I am the content remembered from home"

  6. Understand the JavaScript Scope Chain mechanism

    The scope chain is the core mechanism JavaScript uses to find variables. When the engine needs to access a variable, it follows a specific lookup path: Current Scope → Parent Scope → Global Scope. This path is determined statically at the time the function is defined, not when it is called. This static nature is the underlying reason why closures can 'remember' variables from their outer scopes.

  7. Reference common Event object properties

    The Event object contains metadata about the event trigger. Key properties include:

    • type: The event name (e.g., 'click').
    • target: The element that actually triggered the event.
    • currentTarget: The element to which the event listener was attached.
    • bubbles: Boolean indicating if the event bubbles.
    • cancelable: Boolean indicating if preventDefault() can be used.
    • eventPhase: Current phase (0: NONE, 1: CAPTURING, 2: AT_TARGET, 3: BUBBLING).
    • timeStamp: Timestamp of the event.
    • isTrusted: true if triggered by a user, false if created by a script.
    • defaultPrevented: Whether the default behavior was already stopped.

  8. Understand the JavaScript Event Flow phases

    When an event is triggered, it does not immediately target the element. Instead, it moves through three distinct phases:

    1. Capture Phase: The event starts from the window and moves down the DOM tree to the target element's parent.
    2. Target Phase: The event reaches the actual element that triggered the event.
    3. Bubble Phase: The event 'bubbles' back up from the target element through its ancestors back to the window.

  9. Understand PX and REM units for responsive web design

    PX (pixels) are absolute units that maintain a fixed size across different devices. REM (root em) are relative units based on the font size of the root element (<html>). Using REM is preferred for creating responsive layouts and improving accessibility, as REM units respect the user's browser font size settings.

    Conversion Formula: REM = PX / Base Font Size

    Default Base: Most browsers use a default base font size of 16px.

  10. Understand Proxy's role in Vue 3 reactivity

    Vue 3's reactivity system is built on Proxy. It achieves the "data change triggers view update" behavior by intercepting the get trap to collect dependencies and the set trap to trigger updates when data is modified.

  11. Use the Batch Image Compression Tool

    The Batch Image Compression Tool allows users to compress multiple images simultaneously. It supports the following file formats: JPG, JPEG, PNG, and WEBP. Users can upload images via a file picker or by dragging and dropping files into the interface. The tool provides options to add a custom prefix to the compressed filenames and a 'Download All' feature to retrieve all processed images at once.

  12. Understand PX and REM units for responsive web design

    PX (pixels) are absolute units that maintain a fixed size across different devices. REM (root em) are relative units based on the font size of the root element (html). Using REM is preferred for creating responsive layouts and improving accessibility, as REM units respect the user's browser font size settings.

    Conversion Formula: REM = PX / Base Font Size

    Default Base: Most browsers use a default base font size of 16px.