DOCSEARCHbyAlgolia
Submit Docs

Alan Wang's Technical Blog and Knowledge System

website·Indexed 32 days ago

https://www.alanwang.site/

A collection of technical articles and summaries covering front-end development, including a Webpack tutorial, React components, source analysis of Axios and Mitt, algorithms (sorting and hashing), and a comprehensive front-end knowledge system including network protocols and memory management.

Tokens
73.3K
Snippets
390
Records
550
Agent score
54%

What's inside Alan Wang

  2. Introduction to Expo for Web Developers

    Expo is a framework for building mobile applications that can be compared to Next.js but for React Native. It is particularly useful for Web developers as it significantly lowers the learning curve and reduces the time spent on environment setup compared to standard React Native development.

  4. Overview of Expo for React Native Development

    Expo is a framework for React Native that simplifies mobile app development, particularly for Web developers. It allows for a single codebase to run across Web, iOS, and Android. Key features include file-based routing (similar to Next.js), a comprehensive set of official SDKs, and the ability to create API services (Beta).

  5. Overview of the Docusaurus AI Summarization Bot

    The docs-ai-bot is a GitHub bot built with the Probot framework that automates the process of summarizing blog posts using the Google Gemini AI model. To avoid the need for a live server on a static site, the bot generates summaries during the build/commit phase and inserts them directly into the front matter of the markdown documents. This allows the summaries to be retrieved as static content.
    Project Link: https://github.com/3Alan/docs-ai-bot

  8. Implement a RAG system for PDF documents

    To allow an LLM to answer questions about long PDF documents that exceed the API token limit, use the following Retrieval-Augmented Generation (RAG) workflow:

    1. Extract text from the PDF.
    2. Split the text into smaller fragments (e.g., using periods . or 。 as separators to maintain sentence-level semantic meaning).
    3. Generate vector embeddings for each fragment using the OpenAI Embedding API.
    4. Store the vectors and original text fragments in a database (e.g., Postgres via Supabase).
    5. Convert the user's query into a vector using the same embedding model.
    6. Use the Cosine Similarity algorithm to find the most similar text fragments in the database.
    7. Provide these fragments as context to the LLM to generate an answer.

  9. Understand the Publish-Subscribe pattern vs Observer pattern

    The mitt library implements the Publish-Subscribe pattern. Unlike the Observer pattern where the Subject and Observer know about each other, the Publish-Subscribe pattern introduces an Event Bus (the mitt instance) as a middleman. The publisher and subscriber are decoupled and do not have direct knowledge of each other; they only interact with the Event Bus.

  10. Understand the JavaScript Event Loop and Task Queue

    JavaScript is single-threaded to avoid DOM synchronization issues. It uses an Event Loop to manage execution:

    1. Synchronous tasks are executed immediately in the execution stack.
    2. Asynchronous tasks are placed in a task queue.
    3. When the stack is empty, the Event Loop moves tasks from the queue to the stack.

    Tasks are divided into:

    • Macro-tasks: script, setTimeout, setInterval.
    • Micro-tasks: Promise.then(), process.nextTick.

    Priority: process.nextTick > Promise.then(). Micro-tasks are always executed before the next macro-task once the current execution stack is clear.

  11. Understand the Publish-Subscribe pattern in mitt

    The mitt library implements the Publish-Subscribe pattern. Unlike the Observer pattern where the Subject and Observer know each other, the Pub-Sub pattern introduces an Event Bus (the mitt instance) as a middleman. The publisher (emitter) and subscriber (listener) are decoupled; they do not have direct references to each other and only communicate through the Event Bus.

  12. Implement File-System Based Routing in Next.js

    In Next.js, any React component exported from a file in the pages directory automatically becomes a route based on its filename.

    • pages/about.js maps to /about
    • pages/dashboard/settings/username.js maps to /dashboard/settings/username