DOCSEARCHbyAlgolia
Submit Docs

Refrain Technical Blog

website·Indexed 31 days ago

https://blog.refrain.site

A collection of technical notes and tutorials covering frontend development (React, Vue 2/3, TypeScript, Vite), JavaScript internals (Event Loop, Promises, ES6), Java programming, and data structures and algorithms. It also includes guides on machine learning implementations using NumPy (k-means, KNN, Decision Trees), Git commands, and system configuration for Ubuntu and Windows.

Tokens
95.4K
Snippets
369
Records
494
Agent score
51%

What's inside Refrain Blog

  1. Overview of Machine Learning Basic Concepts

    Machine learning is categorized into two primary tasks:

    1. Classification: Assigning instance data to appropriate categories (e.g., binary classification for detecting website hacks, multi-class classification for handwritten digit recognition).
    2. Regression: Predicting numerical values (e.g., stock price fluctuations, house price predictions).

    Learning paradigms include:

    • Supervised Learning: Algorithms where training samples have both features and target variables. Key considerations include the bias-variance tradeoff, complexity of functions relative to training data volume, dimensionality of the input space, and output values in noise.
    • Unsupervised Learning: Data processing methods that analyze samples without target variables or category information. Types include Clustering (grouping similar objects) and Density Estimation.

  2. Overview of the Intersection Observer API

    The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or the top-level document's viewport. It is more performant than Element.getBoundingClientRect() because it does not run on the main thread for every scroll event. Common use cases include:

    • Lazy loading images or content during page scroll.
    • Implementing infinite scrolling.
    • Reporting ad visibility for revenue calculation.
    • Triggering animations based on element visibility.

  3. Understand fundamental data structure terminology

    Key terms for understanding data structures include:

    • Data: All symbols that can be input into a computer and processed by a program (e.g., integers, characters, images).
    • Data Element: The basic unit of data, often treated as a single entity in a program (e.g., a record or node).
    • Data Item: The smallest indivisible unit of a data element (e.g., 'Age' within a person record).
    • Data Object: A collection of data elements of the same nature/type.
    • Data Structure: A collection of data elements with one or more specific relationships between them.

  4. Use the Node.js process object for system information

    The process object provides information about and control over the current Node.js process:

    • process.env: Access environment variables/configuration.
    • process.pid: Current process ID.
    • process.ppid: Parent process ID.
    • process.cwd(): Returns the current working directory.
    • process.platform: Returns the operating system platform.
    • process.uptime(): Returns the time the process has been running.
    • process.argv: Array containing command-line arguments.
    • process.title: Set or get the process name.
    • process.stdin, process.stdout, process.stderr: Standard I/O streams.
    • process.on('uncaughtException', cb): Catch unhandled exceptions.
    • process.on('exit', cb): Listen for process exit.

  5. Define Classes and Objects in Java

    A class is a template describing the behavior and state of an object. An object is an instance of a class. Java supports three types of variables within a class:

    • Local Variables: Defined inside methods, constructors, or blocks; destroyed after the method ends.
    • Member Variables: Defined in the class but outside methods; instantiated when the object is created.
    • Class Variables: Defined in the class but outside methods, and must be declared as static.

  6. Understand the k-Nearest Neighbors (kNN) algorithm

    The kNN algorithm is a supervised learning method used for classification. Its core principle is to represent the classification of a target data point based on the classifications of its k nearest neighbors. The target point is assigned to the class that is most frequent among its k nearest neighbors (majority voting).

    Key Characteristics:

    • Advantages: Simple to understand and implement; relies on distance to measure similarity; relatively insensitive to outliers.
    • Disadvantages: Performance is sensitive to the choice of k (typically k ≤ 20); high computational cost as it must calculate distances to all samples in the training set; susceptible to inaccuracies if the training set is imbalanced (one class dominates the neighborhood).

  7. Define and implement Abstract Data Types (ADT)

    An Abstract Data Type (ADT) is a mathematical model for a data structure defined by its behavior (operations and constraints) rather than its implementation. It is a theoretical entity used to simplify algorithm descriptions.

    Example: Stack ADT

    • push: Adds an element to the top.
    • pop: Removes and returns the most recently added element (LIFO - Last In, First Out).
    • peek: Views the top element without removing it.

    In practice, ADTs are often implemented as modules where the interface declares the procedures and comments describe the constraints.

  8. Understand the Browser's multi-process and multi-threaded architecture for JS execution

    Browsers (like Chrome) use a multi-process architecture to ensure stability (e.g., one tab crashing doesn't affect others). The Renderer Process is the most critical for frontend developers and contains several specialized threads that enable asynchronous behavior in the single-threaded JS engine:

    • JS Engine Thread: Executes JavaScript code (e.g., V8). It is single-threaded to prevent DOM operation conflicts.
    • GUI Thread: Handles page rendering (HTML, CSS, images). It is mutually exclusive with the JS Engine Thread; when JS is executing, the GUI thread pauses.
    • Event Trigger Thread: Listens for and handles events like clicks, scrolls, and timers.
    • Timer Trigger Thread: Specifically handles callbacks for setTimeout and setInterval.
    • Async HTTP Request Thread: Handles network requests via XMLHttpRequest or fetch.
    • Web Worker Thread: Executes background tasks to avoid blocking the main thread.

  9. Understand core Java language features

    Java is a high-level, object-oriented language with several defining characteristics:

    • Memory Management: Uses references instead of pointers and provides automatic garbage collection.
    • Object-Oriented: Supports classes, interfaces, and single inheritance for classes (multiple inheritance is supported for interfaces via the implements keyword).
    • Platform Independence: Compiles to architecture-neutral bytecode (.class files) that runs on any system with a Java Virtual Machine (JVM).
    • Multithreading: Threads are special objects created via the Thread class or by implementing the Runnable interface. Synchronization is handled using the synchronized keyword.
    • Strong Typing: Features a strong type mechanism and exception handling to ensure robustness.

  10. Understand Vue 2 MVVM Architecture

    Vue 2 utilizes the MVVM (Model-View-ViewModel) pattern to achieve data-driven UI updates:

    • Model: The data source (JavaScript objects, arrays, or state management like Vuex) and business logic.
    • View: The DOM structure (HTML/CSS) that renders the data into a UI.
    • ViewModel: The Vue instance that acts as the bridge between the Model and View, ensuring consistency via two-way data binding. When the Model changes, the View updates automatically; when the user interacts with the View, the ViewModel updates the Model.

  11. Understand and solve Callback Hell with Promises

    Callback hell occurs in JavaScript when multiple asynchronous operations depend on the results of previous ones, leading to deeply nested callback functions that degrade code readability and maintainability. Promises solve this by decoupling the state change (success/failure) from the callback logic, allowing asynchronous operations to be encapsulated and their results handled more flexibly.

  12. Implement common Sorting Algorithms in JavaScript

    Provides implementations for five fundamental sorting algorithms: Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort.
    // Bubble Sort
function bubbleSort(arr) {
  const len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

// Selection Sort
function selectionSort(arr) {
  let len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    let minIndex = i;
    for (let j = i + 1; j < len; j++) {
      if (arr[j] < arr[minIndex]) minIndex = j;
    }
    [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
  }
  return arr;
}

// Insertion Sort
const insertSort = (arr) => {
  for (let i = 1; i < arr.length; i++) {
    let pre = i - 1, current = arr[i];
    while (pre >= 0 && current < arr[pre]) {
      arr[pre + 1] = arr[pre];
      pre--;
    }
    arr[pre + 1] = current;
  }
  return arr;
};

// Merge Sort
const mergeSort = (arr) => {
  if (arr.length < 2) return arr;
  const middle = Math.ceil(arr.length / 2);
  const left = arr.slice(0, middle), right = arr.slice(middle);
  return merge(mergeSort(left), mergeSort(right));
};
const merge = (left, right) => {
  const result = [];
  while (left.length && right.length) {
    result.push(left[0] <= right[0] ? left.shift() : right.shift());
  }
  return [...result, ...left, ...right];
};

// Quick Sort
const quickSort = (arr) => {
  if (arr.length <= 1) return arr;
  const left = [], right = [];
  const mid = arr[0];
  for (let i = 1; i < arr.length; i++) {
    arr[i] <= mid ? left.push(arr[i]) : right.push(arr[i]);
  }
  return [...quickSort(left), mid, ...quickSort(right)];
};