DOCSEARCHbyAlgolia
Submit Docs

Lee Zhian's Technical Blog

website·Indexed 31 days ago

https://leezhian.com

A collection of technical articles and guides focusing on frontend development. Topics include JavaScript design patterns (Singleton, Proxy, Observer, etc.), React hooks (useMemo, useCallback) and internals, Vue3 and Svelte guides, Threejs implementation, and data structures and algorithms such as Fisher-Yates Shuffle and Selection Sort. Also covers tooling like Zustand, Parcel, Rollup, and SWC.

Tokens
152.4K
Snippets
638
Records
875
Agent score
47%

What's inside Lee Zhian Blog

  1. Overview of Webpack 5 Module Federation

    Webpack 5 Module Federation allows multiple independent builds to form a single application. These builds can be developed and deployed separately without direct dependencies on one another. It is a primary mechanism for implementing micro-frontend architectures, enabling a 'central application' to dynamically distribute runtime sub-modules. This solves common sharing problems such as the need to manually copy code between projects or the requirement to rebuild and redeploy dependent projects whenever a shared npm package is updated.

  2. Introduction to Dynamic Programming (DP)

    Dynamic Programming is an algorithmic technique that breaks a complex problem down into smaller sub-problems, solves them first, and uses those results to build up to the global optimal solution. Unlike Greedy Algorithms, which seek a local optimum at each step, DP aims for the global optimum.

    Common use cases include:

    • Implementation of git diff
    • Calculating Edit Distance (Levenshtein distance)
    • Solving the Knapsack problem

  3. Overview of the Chain of Responsibility Pattern

    The Chain of Responsibility pattern allows multiple objects to have a chance to handle a request, decoupling the sender from the receiver. Objects are linked in a chain, and the request is passed along the chain until one object handles it.

    Advantages:

    • The sender only needs to know the first node in the chain, weakening the coupling between the sender and the group of receivers.
    • The starting node can be manually specified; requests do not have to start from the first node.

    Disadvantages:

    • There is no guarantee that a request will be handled (mitigated by adding a default 'fallback' node at the end of the chain).
    • Nodes that do not perform any action can cause performance overhead if the chain is too long.

  4. Overview of the Decorator Design Pattern

    The Decorator pattern allows for the dynamic addition of responsibilities to an object without affecting other objects derived from the same class. It follows the design principle of 'prefer composition over inheritance.' Unlike inheritance (white-box reuse), which can break encapsulation, the Decorator pattern wraps an object within another, creating a chain of wrappers where requests are passed sequentially.

    Pros:

    • Enables dynamic addition of behavior to objects at runtime.

    Cons:

    • Can result in long decoration chains, which may impact performance.

  5. Overview of the Proxy Design Pattern

    The Proxy pattern provides a surrogate or placeholder for another object to control access to it. The client interacts with the proxy instead of the real object; the proxy processes the request and then delegates it to the real object if necessary.

    Key types of proxies include:

    • Protection Proxy: Controls access based on permissions.
    • Virtual Proxy: Delays the creation of resource-intensive objects until they are actually needed.

    Common use cases include image preloading, merging HTTP requests, lazy loading, caching, firewalls, and remote proxies. A critical requirement is that the proxy and the real object must implement the same interface so the proxy can be used interchangeably with the real object.

  6. Overview of the Chain of Responsibility Pattern

    The Chain of Responsibility pattern allows multiple objects to have a chance to handle a request, decoupling the sender of the request from its receivers. Objects are linked in a chain, and the request is passed along the chain until an object handles it.

    Advantages:

    • The sender only needs to know the first node in the chain, reducing strong coupling.
    • The starting node can be manually specified.

    Disadvantages:

    • No guarantee that a request will be handled (mitigated by adding a default 'fallback' node at the end).
    • Nodes that do not perform any action can introduce performance overhead.

  7. Overview of Web Workers and their constraints

    Web Workers allow JavaScript to create multi-threaded environments, enabling CPU-intensive tasks to run in background threads without blocking the main UI thread.

    Key Constraints:

    • Same-Origin Policy: The Worker script must be served from the same origin as the main thread.
    • No DOM Access: Workers cannot access the DOM, document, window, or parent. They do have access to navigator and location.
    • Communication: Data exchange between the main thread and workers must happen via postMessage() and onmessage listeners.
    • File System: Workers cannot be loaded via the file:// protocol.

  8. Introduction to Dynamic Programming (DP)

    Dynamic Programming is a method for solving complex problems by breaking them down into smaller sub-problems and solving those first. Unlike Greedy Algorithms, which seek a local optimum, Dynamic Programming aims for a global optimum. Common use cases include implementing git diff and calculating Edit Distance.

  9. Understand the Browser Event Loop and Task Queues

    The browser event loop manages the execution of code using a function call stack and task queues. Tasks are divided into macro-tasks and micro-tasks. The execution order is: 1. Execute one macro-task. 2. Execute all available micro-tasks (including any new micro-tasks created during this process). 3. Repeat the cycle with the next macro-task.

    Macro-tasks (Tasks):

    • Overall script execution
    • setTimeout
    • setInterval
    • setImmediate
    • I/O operations
    • UI rendering

    Micro-tasks (Jobs):

    • Promise.then
    • async/await (equivalent to Promise.then)
    • MutationObserver
    • process.nextTick (specific to Node.js environments)

  10. Understand Space Complexity

    Space Complexity is a measure of the amount of temporary storage space an algorithm occupies during its execution relative to the input size.

  11. Understand Virtual List (Virtual Scrolling) concepts

    Virtual listing is a performance optimization technique for rendering large datasets. Instead of rendering the entire list, which can cause page lag or blank screens, it renders only the items currently visible within the container's viewport based on the container height and item height.

    Key concepts include:

    • Scroll Container: The element that allows scrolling (e.g., a div with overflow-y: scroll or the browser window).
    • Scrollable Area: The total internal area of the container (e.g., total items × item height).
    • Visible Area: The portion of the container currently visible to the user.

    To implement virtual scrolling, the following values must be calculated during scroll events:

    • startIndex: The index of the first item to be rendered.
    • endIndex: The index of the last item to be rendered.
    • visibleData: The subset of data from startIndex to endIndex.
    • startOffset: The offset (padding/margin) from the top to the startIndex item.
    • endOffset: The offset from the endIndex item to the bottom of the total scrollable area.

  12. Implement core object-oriented design principles

    Follow these two fundamental principles of object-oriented design to create flexible and maintainable systems:

    1. Program to an interface, not an implementation: Depend on abstractions rather than concrete classes to decouple components.
    2. Favor object composition over class inheritance: Build complex functionality by combining objects rather than relying on deep class hierarchies.