DOCSEARCHbyAlgolia
Submit Docs

jason12306 Technical Articles

website·Indexed 30 days ago

https://jason12306.github.io

A collection of technical guides and notes covering Web3 (Solidity, Ethereum, TronWeb, web3-js), Linux administration (MySQL 5.7, MongoDB, Nginx SSL/WSS, PM2), frontend development (React CSS, Chrome Extensions, Flutter), and computer science fundamentals including knowledge graphs, microservices, and concurrency (processes, threads, and locking mechanisms).

Tokens
42.6K
Snippets
192
Records
330
Agent score
73%

What's inside jason12306 Blog

  1. Understand Hydration in SSR/SSG Frameworks

    Hydration is the process where client-side JavaScript 'activates' static HTML sent by a server (SSR) or a static generator (SSG). While the server provides HTML for fast initial load and SEO, the page is initially non-interactive. Hydration attaches event listeners and state management to the existing DOM, transforming the static page into a fully interactive Single Page Application (SPA).

  2. Compare Pessimistic Locking and Optimistic Locking

    Locking strategies are used to manage concurrent access to data.

    Pessimistic Locking assumes conflicts are likely. It locks the data immediately upon reading, preventing other transactions from accessing or modifying it until the current transaction is complete. This ensures strong consistency but reduces concurrency and can lead to deadlocks.

    Optimistic Locking assumes conflicts are rare. It does not lock data during reads. Instead, it checks if the data was modified by another transaction at the time of commit (usually via a version number or timestamp). If a conflict is detected, the update fails, and the application must handle the retry logic. This maximizes read performance and avoids deadlocks but requires a mechanism to handle update failures.

  3. Understand the JavaScript Event Loop and Task Queueing

    The JavaScript Event Loop is a mechanism used to manage the execution of asynchronous operations. It distinguishes between two types of tasks: macrotasks and microtasks. The event loop ensures that the main thread remains responsive by scheduling these tasks for execution after the current synchronous code has finished.

  4. Understand how private npm repositories function

    A private npm repository acts as a proxy between the developer and the public registry. When a user runs npm install, the private server checks if the requested module is a local private module or a previously cached public module. If found, it returns the module directly. If the module is a public one that hasn't been cached yet, the server requests it from an upstream source (such as the official npm registry or the Taobao mirror), caches it locally, and then returns it to the user.

  5. Understand the problems solved by JavaScript Promises

    Promises are used in JavaScript to address two primary asynchronous programming challenges:

    1. Callback Hell: When the output of one asynchronous function is required as the input for the next, leading to deeply nested callbacks. Promises solve this via chainable .then() calls.
    2. Concurrent Asynchronous Requests: Managing multiple simultaneous requests and their collective error handling is simplified using Promise.all.

  6. Understand the Vue component rendering pipeline

    The Vue rendering process follows a specific pipeline to transform templates into actual DOM elements. The flow is as follows:

    1. Compilation: The <template> is compiled into a render function. This can happen during a build step (ahead-of-time) or via a runtime compiler (just-in-time). The render function's purpose is to return a Virtual DOM (vnode) tree.
    2. Mounting: The runtime renderer executes the render function to create the Virtual DOM tree and then creates actual DOM nodes based on that tree. This step is executed as a reactive effect, meaning it tracks all reactive dependencies used during the process.
    3. Updating: When a reactive dependency changes, the effect re-runs, creating a new Virtual DOM tree. The renderer compares the new tree with the old one (the diffing/patch process) and applies only the necessary changes to the real DOM.

  10. Understand the difference between CSS Grid and Flexbox

    CSS Grid is a two-dimensional layout system that divides a container into rows and columns to create cells, allowing items to be positioned in a grid. In contrast, Flexbox is a one-dimensional axis-based layout system, meaning it can only manage the position of items along a single axis (either row or column). Grid is generally more powerful for complex layouts that require both row and column control.

  11. Understand the different types of frontend automated testing

    Frontend automated testing involves running test code to verify that target code meets specific expectations. There are four primary types of tests used to ensure software quality:

    1. Unit Testing: Tests the smallest pieces of code in isolation, such as utility libraries or shared sub-components. These should be the most numerous and have the highest coverage. High testability in unit tests usually indicates low coupling and better code quality.
    2. Integration Testing: Tests how multiple modules (which have already passed unit tests) work together. It is applied to highly coupled functions, wrapped components, or combinations of components to ensure the combined interface behaves as expected.
    3. UI Testing: Tests the frontend in a real browser environment but decoupled from the actual backend. It relies on Mock servers and data to simulate backend responses. This is closely aligned with the development flow in decoupled frontend/backend architectures.
    4. End-to-End (E2E) Testing: Validates the entire application including all dependencies in an environment that mimics the real user experience. It uses real data and real backend services to test complete user flows, such as logging into a site or completing a purchase.

  12. Core components of a Knowledge Graph system

    Building a comprehensive knowledge graph system requires five primary functional stages:

    1. Knowledge Modeling: Defining and organizing abstract knowledge, attributes, and relationships into a multi-level hierarchy to be converted into a physical database.
    2. Knowledge Acquisition: Transforming data from various sources and structures (structured, semi-structured via parsing, knowledge indexing, and knowledge reasoning) into graph data while ensuring validity and completeness.
    3. Knowledge Fusion: Merging duplicate or overlapping information from multiple sources using fusion computation engines or manual operations.
    4. Knowledge Storage: Implementing a flexible, diverse, and scalable storage solution tailored to the specific business scenario.
    5. Knowledge Application: Providing analysis and utility capabilities such as graph retrieval, knowledge computation, and visualization. This typically includes SDKs for graph basic applications, structural analysis, semantic applications, Natural Language Processing (NLP), data acquisition, and statistics.