DOCSEARCHbyAlgolia
Submit Docs

djhwsab Documentation and Interview Guide

website·Indexed 31 days ago

https://djhwsab.github.io/Docs/

A comprehensive collection of frontend interview questions, JavaScript guides, and software tool tutorials. Includes technical deep-dives into JS advanced concepts, a VitePress blog setup guide, and installation/configuration notes for tools like VS Code, iTerm2, Homebrew, Alfred, and Zsh.

Tokens
21.4K
Snippets
132
Records
159
Agent score
72%

What's inside djhwsab Docs

  1. Install npkill to manage node_modules

    npkill is a utility used to find and remove old or heavy node_modules folders to reclaim disk space. It requires Node.js and npm to be installed on your system.
    # Install globally via npm
npm i -g npkill

# Or run without installation using npx
npx npkill

  2. Deploy VitePress to GitHub Pages using GitHub Actions (Yarn)

    Automate the deployment of a VitePress site to GitHub Pages using a GitHub Actions workflow. This configuration uses Yarn for dependency management and builds the site using the docs:build script. The resulting build artifacts from docs/.vitepress/dist are uploaded and deployed to the github-pages environment.
    name: Deploy
on:
  workflow_dispatch: {}
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: yarn
      - run: yarn install --frozen-lockfile
      - name: Build
        run: yarn docs:build
      - uses: actions/configure-pages@v2
      - uses: actions/upload-pages-artifact@v1
        with:
          path: docs/.vitepress/dist
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v1

  3. Prevent variable conflicts using Immediately Invoked Function Expressions (IIFE)

    An IIFE is a function that is defined and executed immediately. It creates a private scope, preventing global variable pollution and allowing the capture of specific values during loops (e.g., capturing the current index in a loop for event listeners).
    // Example: Capturing loop index for button click events
var btnEls = document.querySelectorAll("button")
for (var i = 0; i < btnEls.length; i++) {
  var btnEl = btnEls[i];
  (function (m) {
    btnEl.onclick = function () {
      console.log(m + 1)
    }
  })(i)
}

  5. Deploy VitePress to GitHub Pages using GitHub Actions (npm)

    Use this GitHub Actions workflow to automatically build and deploy your VitePress site to GitHub Pages using npm. The workflow sets up Node.js 16, performs a clean installation via npm ci, runs the docs:build script, and uploads the output from docs/.vitepress/dist to GitHub Pages.
    name: Deploy
on:
  workflow_dispatch: {}
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: npm
      - run: npm ci
      - name: Build
        run: npm run docs:build
      - uses: actions/configure-pages@v2
      - uses: actions/upload-pages-artifact@v1
        with:
          path: docs/.vitepress/dist
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v1

  6. Apply for Algolia DocSearch

    To enable full-text search via Algolia, you must apply for the DocSearch service. The website being indexed must be publicly accessible. After applying, you will receive an email containing three critical pieces of information: the Application ID (appId), the API Key (apiKey), and the Index Name (indexName).
    Application URL: https://docsearch.algolia.com/apply/

  7. Install and use Listary for Windows file search

    Listary is a local file search tool for Windows that functions similarly to a search engine for your local filesystem. It is not compatible with macOS. Installation is straightforward; use the default settings and only modify the installation directory if necessary.
    Download from: https://www.listary.com/download

  8. Manually configure the hosts file on macOS and Windows

    Depending on your OS, locate the hosts file, append the required IP-domain mappings, and flush the DNS cache to apply changes.
    # macOS
# File location: /etc/hosts
# Flush cache:
sudo killall -HUP mDNSResponder

# Windows
# File location: C:/windows/system32/drivers/etc/hosts
# Flush DNS:
ipconfig /flushdns

  10. Implement Event Delegation for list items

    Event delegation is a design pattern where a single event listener is attached to a parent element (e.g., <ul>) instead of multiple listeners on child elements (e.g., <li>). The parent leverages event bubbling to detect which child was clicked using event.target.
    // Example: Highlight a clicked <li> and remove highlight from others
var ulEl = document.querySelector("ul")

ulEl.onclick = function (event) {
  // 1. Remove 'active' class from the currently active element
  var activeEl = ulEl.querySelector(".active")
  if (activeEl && event.target !== ulEl) {
    activeEl.classList.remove("active")
  }

  // 2. Add 'active' class to the clicked element (if it's not the ul itself)
  if (event.target !== ulEl) {
    event.target.classList.add("active")
  }
}

  11. Install and initialize a VitePress project

    To start a VitePress project, ensure you have Node.js version 16 or higher installed. Initialize the project by creating a directory, initializing npm, installing VitePress as a dev dependency, and creating an initial documentation file.
    # Create project directory
mkdir vitepress-starter && cd vitepress-starter

# Initialize npm
npm init -y

# Install VitePress
npm install -D vitepress

# Create first document
mkdir docs && echo '# Hello VitePress' > docs/index.md

  12. Run a local hosts server for GitHub acceleration

    A local hosts server provides region-tested IPs which often have higher success rates. This server can be used standalone or integrated with SwitchHosts. The server is started with a specified port using the --port flag.
    # macOS (Intel)
curl -L https://github.com/ineo6/hosts/releases/download/v1.0.1/hosts-server-pkg-mac-x64.tar.gz | tar xzvf -
xattr -d com.apple.quarantine ./hosts-server-pkg-mac-x64/hosts-server
./hosts-server-pkg-mac-x64/hosts-server --port=8888

# macOS (Apple Silicon)
curl -L https://github.com/ineo6/hosts/releases/download/v1.0.1/hosts-server-pkg-mac-arm64.tar.gz | tar xzvf -
./hosts-server-pkg-mac-arm64/hosts-server --port=8888

# Windows
# Download https://github.com/ineo6/hosts/releases/download/v1.0.1/hosts-server-pkg-win-x64.zip
.\hosts-server.exe --port=8888