DOCSEARCHbyAlgolia
Submit Docs

Alex Shwing's Technical Blog

website·Indexed 31 days ago

https://alexshwing.github.io/alexshwing-blog/

A collection of technical notes and guides covering frontend development tools and frameworks, including detailed tutorials on Regular Expressions, Three.js, D3.js, Element UI, Vue 2, Vuex, and Vue Router, as well as engineering topics like pnpm and common frontend scenarios such as race conditions and cross-domain issues.

Tokens
90K
Snippets
447
Records
566
Agent score
74%

What's inside Alex Shwing Blog

  1. Overview of Frontend Development Evolution

    Frontend development has evolved through three primary eras:

    1. Read-Only Era (1989 - 2004): Characterized by static content, one-way publishing, and page refreshes. Core technologies included HTML, CSS, JavaScript, and CGI, with layout often handled by tables.
    2. Experience Era (2005 - 2010): Introduced dynamic interaction and User Generated Content (UGC). Key technologies included Ajax, Web APIs, jQuery, YUI, and the emergence of Single Page Applications (SPA).
    3. Agile Era (2010 - 2021): Focused on modularity and componentization. Key technologies include Node.js, Webpack, Fetch API, transpiling, bundling, and frameworks like React.js and Vue.js.

  2. Understand HTTP/2 Key Features

    HTTP/2 improves performance and stability over HTTP/1.1 by introducing a binary framing layer.
    • Frames: The smallest unit of communication. Each frame has a header and identifies its associated data stream.
    • Multiplexing: Allows interleaved sending of multiple requests/responses over a single connection; the receiver reorganizes them.
    • Persistent Connections: Only one connection is needed per origin.
    • Flow Control: Prevents the sender from overwhelming the receiver with too much data.

  3. Understand JavaScript Event Capturing and Bubbling

    The event flow defines the order in which events are triggered when an element and its ancestors both have event listeners.

    1. Event Capturing: The event starts from the outermost element (window/document) and moves inward toward the target element. Order: document -> html -> body -> ... -> target.
    2. Event Bubbling: The event starts from the target element and propagates upward to the outermost element. Order: target -> ... -> body -> html -> document.

  4. Inspect file and resource status

    Use fs.stat or fs.statSync to retrieve metadata about a file or directory. Key properties returned include size (file size), birthtime (creation time), mtime (last modification time), isFile (boolean), and isDirectory (boolean).
    const fs = require('fs');

fs.stat("./test.txt", (err, data) => {
  if (err) throw err;
  console.log(data.size);
  console.log(data.isFile());
});

const res = fs.statSync("./test.txt");

  5. Understand CodeSandbox Sandpack execution environments

    CodeSandbox utilizes two distinct runtime environments for executing code, both of which are embedded as iframes within the editor's preview module. These modules communicate with the code editor and console via a predefined communication protocol.

    • Browser Sandpack: Used for pure frontend projects where both compilation and execution can be performed entirely within the browser. This environment consumes minimal server-side resources.
    • Cloud Sandpack: Used for projects that require a server-side runtime environment. This environment consumes dedicated server resources.

  6. Analyze page performance and rendering threads

    The Performance panel helps identify bottlenecks via:

    • Overview Metrics: FPS (Frames Per Second), CPU usage, and Network request timing.
    • Thread Analysis:
      • Main Thread: Handles JavaScript execution, HTML/CSS parsing, and painting.
      • Frames Thread: Manages frame timing.
      • Raster Thread: Handles the drawing of layers or tiles.

  7. Use npx to execute Node packages without global installation

    npx is a CLI tool that allows developers to execute binaries from npm packages without needing to install them globally. This prevents global namespace pollution and simplifies dependency management by allowing different projects to use different versions of the same package without conflicts.

    Key capabilities include:

    • Executing packages installed locally in the project's node_modules.
    • Downloading and running the latest version of a package from the npm registry if it is not found locally.
    • Executing any npm package, not just those defined in package.json scripts.
    • Executing GitHub gists or other public JavaScript files.

  8. Understand the role of package-lock.json in npm

    The package-lock.json file locks dependency versions and records detailed information about the dependency tree to ensure consistent installs. Key fields include:

    • version: The current version of the package.
    • resolved: The download URL of the package.
    • integrity: A hash used to verify the integrity of the package.
    • dev: Indicates if the package is a development dependency.
    • bin: Specifies the path and name of executable files within the package.
    • engines: Specifies the required Node.js version range.

    package-lock.json facilitates caching by generating a unique key based on the package name, version, and integrity. This key is used to locate cached records in the npm cache folder. If a cache record exists, npm retrieves the tarball hash and extracts the binary files directly into node_modules.

  11. Understand pnpm's content-addressable store

    pnpm uses a content-addressable store to manage dependencies globally across projects. Instead of duplicating packages for every project, pnpm stores a single copy of a file on disk, identified by a hash of its content. This reduces disk space usage and increases installation speed.

    Default store locations:

    • macOS: {home dir}/.pnpm-store/v3
    • Windows: .pnpm-store folder at the root of the current drive.