DOCSEARCHbyAlgolia
Submit Docs

Leyla's Blog and Tools

website·Indexed 30 days ago

https://leyla.top

A personal technical blog and toolset by Leyla, featuring guides on JS/TS, CSS layer context, axios adapters, and Rsbuild integration with Sentry. Includes utility tools such as a notary fee calculator and a grid trade calculator, as well as a demo for flicker-free iframe updates using double buffering.

Tokens
7.2K
Snippets
36
Records
50
Agent score
50%

What's inside Leyla's Blog

  1. Overview of Axios

    Axios is a promise-based HTTP library that works in both browser and Node.js environments, providing a cross-platform interface for making network requests.

  2. Install and configure a custom Git push alias (gps)

    To implement the automated push script as a global command gps, follow these setup steps:

    1. Save the script as git-push-current-branch.sh in your home directory (~).
    2. Grant execution permissions to the script: sudo chmod 777 ~/git-push-current-branch.sh.
    3. Add an alias to your shell configuration file (e.g., ~/.zshrc or ~/.bashrc): alias gps='~/git-push-current-branch.sh'
    4. Reload the configuration: source ~/.zshrc (or restart the terminal).

    Usage:

    • Run gps to push the current branch and set the upstream.
    • Run gps -f to perform a force push.
    # Add to ~/.zshrc
alias gps='~/git-push-current-branch.sh'

  3. Install Sentry dependencies for Rsbuild

    To integrate Sentry with an Rsbuild project, you need the browser SDK for error capturing and the Webpack plugin for SourceMap uploads.
    npm install @sentry/browser
npm install -D @sentry/webpack-plugin

  4. Install Homebrew on macOS

    Homebrew is a package manager for macOS that allows developers to easily install, update, and uninstall software and command-line tools.
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

  5. Calculate and add additional grid levels

    After setting the initial level, add more grid levels (indexed 0-1) to complete the strategy. There are two ways to handle the investment amount for these additional levels:

    1. Fixed Amount: Each level uses the same total buy amount as the initial level.
    2. Dynamic Scaling: The buy amount increases or decreases based on the grid level index using the formula: Other Level Buy Amount = Initial Total Amount × (2 - Grid Level Index).
    Example with Initial Amount of 1000 Yuan:
- Level 0.9: 1000 × (2 - 0.9) = 1100 Yuan
- Level 0.8: 1000 × (2 - 0.8) = 1200 Yuan
- Level 0.7: 1000 × (2 - 0.7) = 1300 Yuan

  7. Handle truncation and non-numeric characters in parseInt

    parseInt performs greedy matching and truncates the string as soon as it encounters a character that is not a valid digit for the specified radix. Leading and trailing whitespace is ignored.

    Examples of truncation:

    • In base 10, parseInt('123.45') returns 123 because the decimal point is not a valid digit in base 10.
    • In base 10, parseInt('123abc') returns 123 because 'a' is not a valid digit.
    • In base 2, parseInt('123', 2) returns 1 because '2' is not a valid binary digit, causing the parser to stop after the first character.
    parseInt('123.45'); // 123
parseInt('123abc'); // 123
parseInt('123', 2); // 1
parseInt(' 100 ');   // 100 (whitespace ignored)

  8. Initialize ESLint in a project

    ESLint is used for code quality checks and identifying potential errors. To set up ESLint in a project root, use the official initialization command which guides the user through a series of questions to generate a base configuration and install necessary dependencies (e.g., eslint, eslint-plugin-react). This process generates an eslint.config.js (or .eslintrc.js in older versions).
    npm init @eslint/config@latest

  9. Implement no-flicker iframe updates using double buffering

    To prevent the white screen flicker (flash) that occurs when refreshing an iframe, use a double buffering technique. This involves pre-loading the new content in a hidden iframe; once the content has fully loaded, the visible iframe is swapped with the hidden one (or the hidden one is revealed), ensuring a seamless transition for the user.

  10. Import Sentry initialization at application entry

    Sentry must be initialized before any other application code to ensure all errors are captured. This can be done via a direct import in the main entry file or by configuring the entry object in rsbuild.config.ts.
    // Option 1: In src/index.tsx
import './sentry' // Must be the first import
import React from 'react'
// ... rest of the app

// Option 2: In rsbuild.config.ts
export default defineConfig({
  source: {
    entry: {
      index: {
        import: [
          './src/sentry.js', // Must be first
          './src/index.tsx'
        ],
      },
    },
  },
})

  11. Install and configure Oh My Zsh with Powerlevel10k

    Install Oh My Zsh to manage your Zsh configuration, then clone and set the Powerlevel10k theme for an enhanced terminal UI.
    # Install Oh My Zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# Install Powerlevel10k theme
git clone git@github.com:romkatv/powerlevel10k.git ~/.oh-my-zsh/themes/powerlevel10k

    In ~/.zshrc, set the theme:

    ZSH_THEME="powerlevel10k/powerlevel10k"