Hongyangwu Technical Documentation
website·Indexed 30 days ago
https://www.hongyangwu.topA comprehensive collection of technical notes and interview guides covering frontend development (JavaScript ES6, Vue, CSS, Webpack), WeChat Mini Programs, browser mechanics, network protocols, and computer science fundamentals including Java, data structures (stacks, queues), and dynamic programming algorithms.
What's inside Hongyangwu Knowledge Base
- GetX is a high-performance, lightweight framework for Flutter that provides three core capabilities: state management, smart dependency injection, and convenient route management. It is designed to decouple the UI, logic, dependencies, and routing to improve maintainability and development speed. GetX is cross-platform, supporting Android, iOS, Web, Mac, Linux, and Windows. It is modular, meaning only the features actually used in the code are compiled into the final application.
Overview of GetWidget UI library for Flutter
GetWidget is an open-source Flutter UI library that provides a collection of responsive and customizable UI components. It is designed to simplify the development process and increase efficiency while providing a modern user interface for Flutter applications.Overview of easy_refresh for Flutter
EasyRefresh is a framework for implementing pull-to-refresh and pull-to-load functionality in Flutter applications. It supports almost all Flutter scrollable components and provides several built-in Header and Footer styles, while allowing for full customization of animations and styles. Key features include:
- Support for all scrollable components with precise physics matching.
- Integrated cool Header and Footer styles with custom animation support.
- Support for both pull-to-refresh and pull-to-load (triggerable via controllers).
- Customizable indicator positions and support for initial page load refreshing.
- Safe area support to prevent UI occlusion.
- Customizable scroll parameters for different feedback and inertia behaviors.
Overview of Webpack 5 Module Federation
Module Federation (MF) is a feature introduced in Webpack 5 that enables remote module dynamic loading and execution. It allows a large monolithic application to be split into smaller, cohesive applications that can be developed and deployed independently, potentially using different technology stacks. This architecture is a primary driver for implementing micro-frontends to reduce system and team collaboration complexity.Overview of Flutter Sliver components for complex scrolling
Slivers are the basic building blocks for constructing scrollable views in Flutter. They represent a portion of a scrollable area that can be dynamically loaded and unloaded, enabling high-performance lists, grids, and waterfall layouts. By using aCustomScrollView, developers can combine different scrolling behaviors (such as sticky app bars, fixed content blocks, tab bars, and horizontal scrolling) into a single cohesive component.Overview of react-query benefits
react-query is a library designed for React Hooks that simplifies the process of asynchronously fetching, synchronizing, updating, and caching data. It can serve as an alternative to global state management for server-state data.Overview of the Node.js fs module
Thefsmodule is used for operating on files and directories in Node.js. By default, it provides callback-based methods. To use Promise-based versions of these methods, userequire('fs').promises.Understand Streams API fundamentals and backpressure
The Streams API processes data in chunks, where each chunk can be of any data type and varying size. A critical concept in streams is 'backpressure': when the data input rate exceeds the output rate, data accumulates. Once a specific threshold is reached, the browser applies backpressure by notifying the input source to stop sending data until the queue size drops below a predefined threshold.Understand core characteristics of the HTTP protocol
The Hypertext Transfer Protocol (HTTP) is defined by four primary characteristics:
- Simple and Fast: Resources (such as images or pages) are located via fixed URLs, making resource retrieval straightforward.
- Flexible: The protocol header specifies data types, allowing HTTP to transport various types of content.
- Connectionless: The connection is closed after a single request-response cycle is completed.
- Stateless: The server does not retain information about the client between requests; it cannot distinguish if two requests come from the same user or identity without additional mechanisms.
Understand the relationship between processes and threads in browsers
A process is the smallest unit of resource allocation (essentially a running program), while a thread is the smallest unit of execution within a process.
Key characteristics:
- Isolation: Processes are completely isolated; if one crashes, others are unaffected. Communication between processes requires Inter-Process Communication (IPC).
- Concurrency: A single process can contain multiple concurrent threads performing different tasks.
- Shared Memory: Threads within the same process can communicate directly and share data.
- Risk: An unhandled error in a single thread can cause the entire parent process to crash.
Benefits of using Redux Toolkit
Redux Toolkit simplifies Redux development by providing several built-in utilities:
- Simplified configuration process.
- Integrated Immer library, allowing developers to write 'mutating' logic that is automatically converted into immutable updates.
- Integrated redux-thunk for managing asynchronous operations.
- Built-in support for redux-devtools.
Understand the mechanism of XSS attacks
Cross-Site Scripting (XSS) occurs when an attacker injects malicious scripts into a target website, which are then executed in the victim's browser. This allows the attacker to steal sensitive information such as Cookies and SessionIDs, compromising data security.<!-- Original HTML --> <input type="text" value="User info before update" /> <!-- Attacker inputs: "/><script>alert('XSS');</script> --> <!-- Resulting rendered HTML --> <input type="text" value="" /> <script>alert('XSS');</script> ">