DOCSEARCHbyAlgolia
Submit Docs

Norah1to Technical Blog

website·Indexed 30 days ago

https://www.norah1to.com

A technical knowledge base focusing on frontend development, featuring deep dives into Vue 3 and Vue 2 source code, data structures (heaps, binary trees, stacks, queues, and hash tables), browser rendering processes, TCP networking, and CSS preprocessors like Sass. The site also includes a collection of technical interview Q&A and practical implementation guides for controlled forms and loading states.

Tokens
57.5K
Snippets
200
Records
332
Agent score
50%

What's inside Norah1to

  1. Overview of setup-cli features

    setup-cli is a project scaffolding tool designed for simplicity, flexibility, and high customization. Key features include a GUI for interactive project creation, the ability to manage local and remote template libraries via the setup-cli repo command, and an inject mechanism to add new capabilities to existing projects without overwriting existing code.

  2. Overview of Yue e-book reader

    Yue is a web-based reader designed for reading EPUB and PDF files. It supports local file imports and remote imports via webDAV. The reader is built using epub.js and pdf.js.

  3. Overview of Vue 3 Reactive Proxy Handlers

    Vue 3 uses ProxyHandler objects to intercept operations on reactive objects. The mutableHandlers (defined in baseHandlers.ts) are the primary handlers used for standard reactive objects and arrays. They intercept five key behaviors: assignment (set), access (get), property deletion (deleteProperty), existence checks (has), and listing properties (ownKeys).
    export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys,
};

  4. Overview of css-render

    css-render is a CSS generator (similar to a JS implementation of SCSS) that is decoupled from components. It is maintained by the author of naive-ui and is recommended for developing component libraries rather than applications. It includes a plugin system (e.g., a BEM plugin) and supports SSR.

  5. Overview of ES6 New Features

    ES6 (ECMAScript 2015) introduced significant language enhancements:

    • Variables: let and const for block-level scoping.
    • Data Structures: Set and Map.
    • Asynchronous Programming: Promise objects, async/await syntax, and asynchronous iterators.
    • Objects & Logic: Proxy and Reflect objects.
    • Syntax: Class syntax and Module syntax.
    • Extensions: New methods for Object, String, and Array.

  6. Understand Block Formatting Context (BFC) in CSS

    A Block Formatting Context (BFC) is a part of the visual CSS rendering of a web page. It is a region in which the layout of block boxes occurs and in which floats interact with other elements. Essentially, it creates an isolated internal environment where the layout inside the BFC does not affect the layout outside, and vice versa.

  7. Understand Browser Rendering Process

    The browser converts HTML into a visual page through the following sequence:

    1. DOM Tree Generation: HTML bytes are decoded $ ightarrow$ tokenized into tags $ ightarrow$ converted into DOM objects.
    2. CSSOM Tree Generation: CSS is parsed to create the CSS Object Model.
    3. Render Tree Construction: The DOM and CSSOM trees are merged into a Render Tree.
    4. Layout: The browser calculates the exact position and size of each node in the render tree.
    5. Painting: The calculated nodes are drawn onto the screen.

  8. TCP Protocol Overview

    TCP (Transmission Control Protocol) is a transport layer protocol characterized by three main properties:

    1. Connection-Oriented: Requires a three-way handshake to establish a connection between client and server before communication begins.
    2. Reliable:
      • Stateful: Tracks sent and received data to ensure packets arrive in order and without errors.
      • Controllable: Adjusts transmission speed or retransmits data upon detecting packet loss or poor network conditions.
    3. Byte-Stream Based: Converts IP packets into a continuous stream of bytes to maintain state.

  9. Understand Physical Storage Structures

    Storage structures are the computer language implementations of logical structures. Common implementation methods include:

    • Sequential Storage: Data is stored in contiguous memory locations (e.g., Arrays).
    • Linked Storage: Data is logically continuous but not necessarily contiguous in physical memory (e.g., Linked Lists).
    • Hash Storage (Scatter Storage): Data has no inherent sequential or logical relationship but is accessed via a hash table (e.g., JavaScript Map).

  10. Understand Webpack plugin architecture and Tapable

    Webpack's plugin system is built on Tapable, an event publish-subscribe library that allows developers to hook into various stages of the compilation process. Plugins register listeners on specific hooks provided by different Webpack objects:

    • compiler: General build lifecycle hooks (most common).
    • compilation: Hooks related to the current compilation state and asset generation (most common).
    • parser: Hooks used when processing source code.
    • resolver: Hooks used during module resolution.

  12. Understand the JavaScript Event Loop and Task Queue

    JavaScript executes code on a single main thread. To handle asynchronous operations without blocking, it uses an Event Loop.

    Execution Flow:

    1. Synchronous code is treated as a macro-task and pushed to the call stack.
    2. The engine executes the current macro-task.
    3. After a macro-task completes, the engine checks for and executes all available micro-tasks in the micro-task queue.
    4. The browser performs rendering updates if necessary.
    5. The engine checks for the next macro-task in the macro-task queue and repeats the process.

    Task Types:

    • Macro-tasks: setTimeout, setInterval, and event callbacks.
    • Micro-tasks: (Implicitly handled after each macro-task before rendering).