DOCSEARCHbyAlgolia
Submit Docs

zjffun Technical Blog

website·Indexed 32 days ago

https://blog.zjffun.com/

A collection of technical notes and tutorials focusing on front-end development, including JavaScript (prototypes, Promises, Fetch, and array methods), CSS architecture, Sass, and Chrome debugging. It also covers GIS coordinate offset issues (BD-09), Puppeteer, and general computer tips for Mac and Homebrew.

Tokens
147.2K
Snippets
871
Records
1.3K
Agent score
50%

What's inside zjffun Blog

  1. Overview of Browser Main Components

    A modern web browser consists of several key components that work together to display web pages:

    1. User Interface: The address bar, back/forward buttons, bookmark menu, etc. (everything except the main window where the page is displayed).
    2. Browser Engine: The interface used to query and manipulate the rendering engine.
    3. Rendering Engine: Responsible for displaying requested content. For HTML, it parses HTML and CSS and renders the result.
    4. Networking: Handles network calls (e.g., HTTP requests) via platform-independent interfaces.
    5. UI Backend: Used to draw basic components like combo boxes and dialogs using the operating system's user interface.
    6. JS Interpreter: Interprets and executes JavaScript code.
    7. Data Storage: The persistence layer for saving data such as Cookies to the hard drive.

  3. Overview of Point-in-Polygon algorithms

    There are several common methods to determine if a point is inside a polygon:

    1. Ray-Casting Algorithm: Emit a ray from the point; if it intersects the polygon edges an odd number of times, the point is inside.
    2. Area Summation Method: Calculate the sum of the areas of triangles formed by the point and each edge of the polygon. If the sum equals the polygon's total area, the point is inside. (Note: For concave polygons, clockwise areas are added and counter-clockwise areas are subtracted).
    3. Angle Summation Method: Calculate the sum of angles between the point and each pair of adjacent vertices. If the sum is 360 degrees, the point is inside. (Note: For concave polygons, clockwise/counter-clockwise directions must be handled).
    4. Masking Method: Render the polygon to a bitmap with a specific color. If the pixel at the point's coordinates is that color, the point is inside.

  4. Overview of Angular framework characteristics

    Angular is a comprehensive framework that provides built-in solutions for routing, state management, dependency injection, and TypeScript integration. It utilizes Zone.js and RxJS to handle asynchronous operations. While highly integrated and efficient when used with the Angular CLI, its source code is complex and its components are tightly coupled to the framework, making them difficult to use independently.

  5. Overview of DOM Event Level specifications

    The evolution of DOM event specifications is categorized as follows:

    • DOM Level 0: Non-standard, experimental phase; events are bound directly to DOM properties.
    • DOM Level 1: Defined DOM Core and DOM HTML, but did not define event-related specifications.
    • DOM Level 2: Standardized mouse-related events, including capture, bubbling, and target control mechanisms.
    • DOM Level 3: Primarily standardized keyboard-related events.

  6. Overview of Apache JMeter

    Apache JMeter is an Apache project providing a load testing tool used for performance testing and analysis of various servers, with a primary focus on web applications.

  7. Use Babel to transform ES6+ syntax for backward compatibility

    Babel is a toolchain used to convert ECMAScript 2015+ (ES6+) code into a backward-compatible version of JavaScript that can run in older browsers or other environments. It primarily provides syntax translation, source code transformation, and the ability to extend environments with polyfills for unsupported features.

  8. Understand Projected Coordinate Systems (PCS)

    A Projected Coordinate System (PCS) is a planar coordinate system where map units are typically measured in meters. It is essentially a flat representation of the Earth's curved surface.

    A Projected Coordinate System is created by combining a Geographic Coordinate System (defined by a datum) with a specific projection method.

    Common Datums (GCS):

    • WGS84
    • Beijing 54
    • Xi'an 80

    Common Projection Methods:

    • Gauss-Krüger
    • Lambert
    • Mercator

  9. Understand Mobile Browser Viewport Concepts

    Mobile browsers utilize two distinct types of viewports to handle page rendering and display:

    1. Layout Viewport: The region where the browser renders the webpage. This prevents elements designed with percentages from becoming too narrow on small mobile screens by providing a larger virtual area for the initial layout.
    2. Visual Viewport: The actual visible area of the page currently on the user's screen.

    These are influenced by the zoom level of the browser.

  11. Understand Cryptographic Hash Functions (CHF)

    A cryptographic hash function (CHF) is a mathematical algorithm designed to map input data of any arbitrary size (referred to as the "message") to a bit array of a fixed size. The resulting output is commonly known as the "hash value", "hash", or "message digest".

  12. Prevent style leakage in component-based architecture

    Based on the jareware/css-architecture approach, use these strategies to isolate component styles:

    • Prevent Outward Leakage: Use a namespace in the class name (e.g., app-Component-class) to ensure styles don't affect elements outside the component.
    • Prevent Inward Leakage: Avoid element selectors. Use classes instead, or use the child combinator > to restrict scope.
    • Prevent External Interference: Use all: initial, Shadow DOM, or <iframe> to stop external styles from entering the component. Alternatively, use high-specificity resets.
    • Respect Boundaries: Do not modify the internal styles of a component from the outside. Use inherited styles on the parent element if the component is designed to inherit them.