DOCSEARCHbyAlgolia
Submit Docs

Jade's Technical Blog

website·Indexed 30 days ago

https://blog-jade-five-78.vercel.app/

A collection of technical notes and guides covering frontend development, including JavaScript (ES6, event loop, closures), React (source code, useState, rerendering), TypeScript (generics, tsconfig), CSS (BFC, layouts, animations), Webpack optimization, and server-side topics like Node.js and micro-frontend architecture.

Tokens
23.7K
Snippets
104
Records
160
Agent score
75%

What's inside Jade Blog

  1. Overview of JavaScript cross-origin communication strategies

    Browsers restrict cross-origin requests to protect authentication data. Depending on the requirements and security constraints, different strategies can be used to bypass these restrictions:

    Recommended Solutions:

    • CORS (Cross-Origin Resource Sharing)
    • iframe combined with postMessage
    • WebSocket (higher overhead)

    Alternative Solutions:

    • JSONP: Note that the server completely ignores cookie information.
    • URL parameters or standard HTML form submissions.
    • Server-side proxying.

    Legacy/Niche Methods:

    • Using window.name for data transfer.

  2. Overview of JavaScript Module Systems

    JavaScript modules allow developers to split large programs into smaller, interdependent files to improve readability and maintainability. Each module encapsulates its logic and decides which parts to expose to other modules. Different module systems evolved based on the target environment (browser vs. server) and the need for synchronous or asynchronous loading.

  3. Compare Node.js backend frameworks for functional development

    When choosing a Node.js framework, developers can choose between 'all-in-one' (comprehensive) frameworks or 'progressive' patterns.

    • Midway: A comprehensive framework developed by Alibaba. It fully supports TypeScript, object-oriented programming, and functional programming. It allows the use of Koa, Egg, or Express as the underlying HTTP service.
    • Egg: A progressive framework based on Koa. It provides basic HTTP services and a plugin mechanism but does not support TypeScript natively without additional configuration.
    • Nest: A progressive framework similar to Egg but with native TypeScript support.

  4. React Fiber Architecture and Time Slicing

    To solve performance bottlenecks caused by recursive VDOM calculations (which cannot be interrupted), React introduced the Fiber architecture. Fiber implements 'Time Slicing', breaking long-running tasks into smaller units that can be paused and resumed without blocking the main browser thread. This allows React to prioritize high-priority tasks (like user input) over low-priority rendering tasks.

  5. Understand the transition from MVC to MVVM

    MVC (Model-View-Controller) separates data (Model), the user interface (View), and the logic that connects them (Controller). However, MVC is often replaced by MVVM (Model-View-ViewModel) because MVC typically relies on one-way communication and requires extensive manual DOM manipulation, which can degrade page rendering performance.

  6. Understand the JavaScript compilation process

    JavaScript is a compiled language, despite often being called 'dynamic' or 'interpreted'. The compilation process consists of three main stages: Tokenizing/Lexing (breaking code into tokens), Parsing (creating a syntax tree), and Code Generation.

  7. Perform type assertions using angle brackets or the as keyword

    Type assertions allow you to tell the TypeScript compiler that you know more about the type of a value than it can infer. This can be achieved using the angle-bracket syntax or the as keyword.
    // Using angle brackets
let strLength: number = (<string>someValue).length;

// Using the 'as' keyword
let strLength: number = (someValue as string).length;

  8. Understand DOM Event Propagation (Bubbling and Capturing)

    Event propagation is the process where an event travels through the DOM tree to find a handler. There are two primary directions of propagation:

    1. Event Bubbling: The event starts at the target element (the innermost child) and propagates upwards to its ancestors (parent elements). This is the standard implementation in modern browsers.
    2. Event Capturing: The event starts from the root/parent element and propagates downwards to the target element. This was the original implementation in older IE browsers.

    Event Delegation: Because events propagate, you can attach a single event listener to a parent element to handle events triggered by its children, rather than attaching listeners to every individual child.

    <!-- Example of Event Bubbling -->
<section onClick={() => console.log('section click')}>
  <div onClick={() => console.log('div click')}>
    <span onClick={() => console.log('span click')}>Click Here</span>
  </div>
</section>

// If 'Click Here' is clicked, the output order is:
// 1. span click
// 2. div click
// 3. section click

  9. Understand Computer Network Architecture (Edge vs. Core)

    The Internet is divided into two main parts based on its operational mode:

    • Edge Part: Directly used by users for communication and resource sharing. End systems include smartphones, tablets, computers, large servers, and cameras. Communication patterns at the edge are typically Client-Server (C/S) or Peer-to-Peer (P2P).
    • Core Part: Consists of a large number of networks and routers that connect them to provide services to the edge. Routers are the key components for implementing packet switching, tasked with forwarding received packets.

  10. Understand JSX compilation to React.createElement

    JSX is a JavaScript syntax extension that allows writing HTML-like markup within JavaScript. It is not valid JavaScript and must be compiled. JSX is essentially syntactic sugar for React.createElement() calls.
    // JSX: <div id="xxx">child1 child2</div>
// Compiles to:
React.createElement(tag, {id: "xxx"}, [child1, child2, ...]);

  11. Understand React's basic Virtual DOM rendering flow

    React uses a Virtual DOM (VDOM) mechanism to avoid frequent and complex direct DOM manipulations. When state changes, React rebuilds the entire VDOM tree, compares it with the previous version, and updates only the changed parts of the real browser DOM. This process is split into two main layers: the Reconciler (which identifies changes) and the Renderer (which applies changes to the UI).

  12. Understand the JavaScript Event Loop mechanism

    JavaScript is a single-threaded language, meaning it executes one task at a time. To prevent slow operations (like network requests) from blocking the main thread and freezing the UI, JavaScript uses an Event Loop. This mechanism allows asynchronous tasks to be offloaded and executed without blocking the main execution process.