DOCSEARCHbyAlgolia
Submit Docs

Fucang Notes (浮舱笔记)

website·Indexed 30 days ago

https://blog.fucang.top

A personal digital knowledge base by Jonas covering front-end development, including JavaScript prototypes, TypeScript compilation and basics, CSS theory, and browser internals. It also features workflow guides for Git, Node.js version management (fnm), npm, and configuration tips for VS Code, WebStorm, and VitePress.

Tokens
50.4K
Snippets
259
Records
354
Agent score
50%

What's inside Fucang Notes

  1. TCP Protocol Overview

    TCP (Transmission Control Protocol) is a connection-oriented, reliable, byte-stream-based transport layer communication protocol. A TCP connection is uniquely identified by a 'four-tuple' consisting of the source address, source port, destination address, and destination port. To ensure reliability and flow control, TCP maintains state information including the Socket (IP address and port), sequence numbers (to resolve out-of-order delivery), and window size (for flow control).

  2. Control Android devices via QtScrcpy

    QtScrcpy allows you to display and control Android devices via USB or TCP/IP. It does not require root permissions, supports connecting up to 16 devices simultaneously, allows custom key mapping, and can control all connected devices at once.

  3. Implement Client-Side Rendering (CSR)

    Client-Side Rendering (CSR) is a technique where the server returns a minimal, empty static HTML file. The browser then downloads and executes JavaScript and CSS to dynamically build the DOM tree and render the user interface.

    Advantages:

    • Supports partial page updates without full page reloads.
    • Enables lazy loading of data within the viewport.
    • Provides rich interactive experiences.
    • Reduces server load by shifting rendering to the client.
    • Facilitates a clean separation between frontend and backend.

    Disadvantages:

    • Poor SEO (Search Engine Optimization) as search engines may struggle to index dynamic content.
    • Slower First Contentful Paint (FCP) because the page cannot render until JavaScript files are loaded and executed.

  4. Use Wox for productivity and app launching

    Wox is a launcher that supports:

    • Program search with Chinese pinyin fuzzy matching
    • Browser bookmark search
    • Integration with Everything for global file search
    • Web search and plugin extensions
    • Custom themes

  5. Use Type Assertions to override TypeScript type inference

    Type assertions are used when you have more specific information about a value's type than TypeScript can infer. They act as a way to tell the compiler to trust your knowledge of the type. Type assertions have no runtime impact and do not perform data checks or casting; they only function during the compilation phase.

    There are two equivalent syntaxes for type assertions:

    1. Angle-bracket syntax: (<Type>variable)
    2. The as syntax: (variable as Type)

    Note: In .tsx files, only the as syntax is permitted because angle brackets conflict with JSX tags.

    let someValue: any = 'this is a string';

// Angle-bracket syntax
let strLength1: number = (<string>someValue).length;

// 'as' syntax
let strLength2: number = (someValue as string).length;

  6. Optimize Windows system with Dism++

    Dism++ is an enhanced tool based on the native Windows DISM functionality. It is portable (no installation required) and provides space cleaning, system management/optimization, and hot backup/restore capabilities.

  7. Understand the JavaScript Prototype Chain

    The prototype chain is a series of links where each object points to its prototype via __proto__. When accessing a property, JavaScript searches the object itself, then its prototype, then the prototype's prototype, and so on, until the property is found or the chain reaches null. The top of the chain is Object.prototype, and Object.prototype.__proto__ is null to terminate the search.
    // The end of the prototype chain
console.log(Object.prototype.__proto__ === null); // true

  8. Capture and annotate screens with Snipaste

    Snipaste is a tool for screen capturing and 'sticking' images to the screen. It features pixel-level control, annotation tools (shapes, arrows, mosaic, Gaussian blur), and the ability to convert clipboard text/HTML/colors into images.

  10. Use uTools for cross-platform productivity

    uTools is a cross-platform productivity tool supporting Windows, Mac, and Linux. It features a powerful plugin system, a multi-functional input box (supporting text, screenshots, images, files, and folders), automatic recognition/pasting, global shortcuts, and cloud data synchronization.
    Visit official site: https://u.tools/