DOCSEARCHbyAlgolia
Submit Docs

Wonder Dai's Personal Blog

website·Indexed 30 days ago

https://daiwanxing.github.io/blog/

A personal blog by Wonder Dai focusing on practical frontend technology. Content includes guides and articles on JavaScript (event loop, memory management, web-workers), TypeScript (tsconfig.json, utility types, triple-slash directives), CSS3 (gradients, aspect-ratio, pseudo-selectors), Vue 3 (ref vs shallowRef, Transition), algorithms (binary search, bubble sort), and general development tools like ESLint and Git.

Tokens
17.1K
Snippets
104
Records
129
Agent score
74%

What's inside Wonder Dai's Blog

  1. Overview of CSS3 Gradients

    CSS3 gradients are categorized into three types: linear, radial, and conic. A critical limitation is that gradients cannot be animated using the transition property for color value transitions because gradients are rendered as images, and CSS cannot transition between images.

  2. Overview of UnoCSS Atomic CSS Engine

    UnoCSS is an atomic CSS engine that allows developers to build their own atomic CSS frameworks. Unlike traditional frameworks, it provides a low-level engine that can be extended with presets (both built-in and community-provided). It focuses on small, single-purpose classes named after their visual effects.

  3. Understand TypeScript's structural type system using set theory

    TypeScript's type system is based on set theory where types are treated as sets of values.

    • Union Types (|): Act as a set union (Supertype). A union type contains all properties of the combined types.
    • Intersection Types (&): Act as a set intersection. It results in a type containing only the common properties. If types have no common properties, the result is never.
    type SN = string | number; // Supertype: Union of string and number

type Intersection = string & number; // Results in 'never' because they share no common properties

  4. Use Intl.DateTimeFormat for locale-aware date and time formatting

    The Intl.DateTimeFormat object provides a built-in way to format dates and times according to specific language and regional conventions without needing external libraries like moment.js or dayjs. It should be instantiated using the new keyword to avoid unexpected behavior with the this context.
    // Basic instantiation
const formatter = new Intl.DateTimeFormat('zh');
console.log(formatter.format(new Date()));

  5. Understand the Bubble Sort algorithm concept

    Bubble Sort is a basic sorting algorithm that repeatedly compares adjacent elements in a list.

    • Ascending Order: Swap elements if the left element is greater than the right element.
    • Descending Order: Swap elements if the left element is smaller than the right element.

    Each pass through the unsorted list 'bubbles' the largest (or smallest) remaining element to its correct position at the end (or beginning) of the array. For an array of length $N$, the algorithm requires $N - 1$ passes to fully sort the data.

  6. Understand Time Slicing for UI Performance

    Time slicing is a technique used to improve page frame rates by breaking a single long-running task (which would otherwise block the main thread) into multiple smaller tasks. In browsers, the GUI rendering thread and the script thread are mutually exclusive; if a script runs for a long time (e.g., 1000ms), the browser cannot perform style calculations, layout, or DOM painting, leading to visible lag and blocked user interactions like scrolling.

  7. Understand the Selection Sort algorithm concept

    Selection Sort works by repeatedly finding the minimum (or maximum) element from the unsorted part of a sequence and placing it at the beginning (or end) of the sorted sequence. This process continues until all elements are sorted. Because elements are swapped across distances, Selection Sort is not a stable sorting algorithm; the relative order of elements with equal keys may change after sorting.

  8. Understand the Binary Search algorithm concept

    Binary Search (also known as half-search or logarithmic search) is an efficient algorithm for finding a specific element within a sorted array.

    How it works:

    1. Start by comparing the target value to the middle element of the array.
    2. If the target matches the middle element, the search is complete.
    3. If the target is smaller than the middle element, repeat the search on the left half of the array.
    4. If the target is larger than the middle element, repeat the search on the right half of the array.
    5. This process continues, halving the search area each time, until the element is found or the search range becomes empty (meaning the element is not present).

  9. Understand the concept of Time Slicing for UI performance

    Time slicing is a technique used to improve page rendering frame rates. In the browser, the GUI rendering thread and the script thread are mutually exclusive. If a script task (like rendering a large number of DOM elements) takes too long (e.g., 1000ms), it creates a 'Long Task' that blocks the rendering thread, preventing style calculations, layout, and DOM updates, which results in visible UI lag and frozen interactions (like scrolling). Time slicing solves this by breaking a single heavy task into multiple smaller tasks, allowing the browser to interleave other high-priority tasks and rendering updates between them.

  10. Use the declare keyword for ambient type definitions

    The declare keyword in TypeScript is used to provide ambient declarations for variables, functions, classes, or modules that exist in the environment (e.g., provided by a third-party library or a global script) but are not defined within the current TypeScript project. These declarations tell the compiler about the type of the entity without providing an actual implementation. Importantly, declare statements are erased during compilation and do not generate JavaScript code.
    declare var foo: string; // Tells TS that 'foo' exists globally as a string

  11. Understand the JavaScript Call Stack

    The call-stack (or invocation stack) manages the execution of functions in JavaScript. It follows a Last-In, First-Out (LIFO) structure. When a function is called, a new 'frame' is pushed onto the stack. When the function finishes executing, its frame is popped off. Functions are pushed onto the stack only when they are executed, not when the code is parsed.
    function foo() {
   baz();
}

function baz() {
   bar();
}

function bar() {
   // execution happens here
}

foo(); // foo is pushed, then baz, then bar. bar pops first, then baz, then foo.

  12. Understand Metaprogramming with Built-in Symbols

    ES6 introduced built-in Symbols (also known as well-known Symbols) that allow developers to control or override the default behavior of JavaScript syntax. This capability is referred to as metaprogramming. While rarely used in standard business logic, it is essential for developing frameworks and libraries. Common built-in Symbols include Symbol.iterator, Symbol.toPrimitive, Symbol.replace, Symbol.isConcatSpreadable, and Symbol.toStringTag.