idoit Technical Documentation

website·Indexed 30 days ago

https://www.idoit.icu

A collection of technical guides and standards covering Java version management with jenv on macOS, Python environment management using Conda on Apple Silicon, Redis 7.0.15 installation and configuration on Ubuntu 24.04 LTS, and frontend development specifications for JavaScript, TypeScript, and Vue.

Tokens
9.6K
Snippets
58
Records
62
Agent score
43%

What's inside idoit

  1. Format Git commit messages

    Use the following format for commit messages: <type>(<scope>): <subject> followed by an optional body and footer.

    Types:

    • feat: New feature
    • fix: Bug fix
    • docs: Documentation changes
    • style: Formatting (no logic change)
    • refactor: Code refactoring
    • perf: Performance improvement
    • test: Adding/updating tests
    • chore: Build/tooling changes
    • ci: CI configuration changes
    feat(user): 添加用户登录功能
    
    - 实现用户名密码登录
    - 添加登录表单验证
    - 集成第三方登录接口
    
    Closes #123
  2. Manually trigger MathJax rendering for dynamic content

    When adding LaTeX formulas to the DOM dynamically via JavaScript, you must manually trigger the MathJax typesetter to render the new content. Use MathJax.typesetPromise() to process specific elements or the entire document.
    // Render formulas within a specific element
    function renderMath(element) {
      if (window.MathJax) {
        MathJax.typesetPromise([element]).catch((err) => {
          console.error('MathJax rendering failed:', err);
        });
      }
    }
    
    // Render all formulas in the document
    function renderAllMath() {
      if (window.MathJax) {
        MathJax.typesetPromise().catch((err) => {
          console.error('MathJax rendering failed:', err);
        });
      }
    }
  3. Optimize Virtual List scrolling performance

    To prevent excessive DOM updates and improve scrolling smoothness, use a throttle function (e.g., from lodash-es) on the scroll handler to limit updates to approximately 60fps (16ms). Additionally, use CSS transform instead of top for positioning.
    import { throttle } from 'lodash-es';
    
    methods: {
      handleScroll: throttle(function() {
        const scrollTop = this.$refs.container.scrollTop;
        this.updateVisibleData(scrollTop);
      }, 16)
    }
  4. Add a new JDK to jenv on macOS

    To manage a JDK with jenv, you must add its home directory. On macOS, it is recommended to use the /usr/libexec/java_home utility to resolve the path automatically. After adding a version, run jenv rehash to update the shims.
    # Add Java 21
    jenv add "$(/usr/libexec/java_home -v 21)"
    
    # Add Java 8
    jenv add "$(/usr/libexec/java_home -v 1.8)"
    
    # Add a JDK from a non-standard directory
    jenv add "/path/to/your/jdk/Contents/Home"
    
    # Refresh shims
    jenv rehash
  5. Optimize frontend performance using debounce and throttle

    Use debounce and throttle to manage high-frequency events and improve application responsiveness.

    Guidelines for delay times:

    • Debounce: Typically 300-500ms for search inputs.
    • Throttle: Typically 100-200ms for scroll events.

    Best Practices:

    • Memory Management: Always clear timers, remove event listeners, and cancel pending network requests when a component is destroyed to avoid memory leaks.
    • User Experience: Provide loading state indicators during debounce delays and ensure visual feedback remains fluid during throttling.
  6. Apply frontend naming conventions

    Follow these naming standards for files and variables to maintain project consistency:

    File Naming:

    • Component files: PascalCase (e.g., UserProfile.vue)
    • Utility functions: camelCase (e.g., formatDate.ts)
    • Style files: kebab-case (e.g., global-style.css)
    • Constant files: UPPER_SNAKE_CASE (e.g., API_CONSTANTS.ts)
    • Page files: kebab-case (e.g., user-list.vue)

    Variable Naming:

    • General variables: camelCase
    • Constants: UPPER_SNAKE_CASE
    • Booleans: Prefix with is, has, or can
    • Functions: camelCase starting with a verb
    • Components/Classes: PascalCase
    const userName = 'John'          // ✅ Correct
    const MAX_RETRY = 3              // ✅ Correct
    const isLogin = true             // ✅ Correct
    const getUserList = () => {}     // ✅ Correct
    const UserComponent = {}         // ✅ Correct
  7. Integrate Redis into a Spring Boot application

    Add the Spring Data Redis starter dependency and configure the connection details in your YAML profile. It is recommended to pass the password via an environment variable rather than hardcoding it in the configuration file.
    <!-- Maven Dependency -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>

    Spring Boot 3 Configuration (application-prod.yml)

    spring: data: redis: host: 127.0.0.1 port: 6379 username: default password: ${REDIS_PASSWORD} database: 0 timeout: 3s

    Spring Boot 2 Configuration (application-prod.yml)

    spring: redis: host: 127.0.0.1 port: 6379 password: ${REDIS_PASSWORD} database: 0 timeout: 3s

    Running the app with the password environment variable

    export REDIS_PASSWORD='your_password' java -jar app.jar --spring.profiles.active=prod

  8. Switch Java versions using jenv

    jenv provides three levels of version control with the following priority (highest to lowest): Shell > Local (Project) > Global > System Default.
    # 1. Global: Sets the default Java version for all terminals/projects
    jenv global 21
    
    # 2. Local: Sets the Java version for the current directory and its subdirectories
    # This creates a .java-version file in the folder
    cd /path/to/project
    jenv local 1.8
    
    # 3. Shell: Sets the Java version for the current terminal session only
    jenv shell 1.8
  9. Develop Vue components using Composition API

    Use the Composition API with <script setup> and TypeScript for Vue components. Define props and emits using type-based definitions.
    <script setup lang="ts">
    import { ref, computed } from 'vue'
    
    const props = defineProps<{ title: string, count?: number }>()
    const emit = defineEmits<{ (e: 'update', value: string): void, (e: 'close'): void }>()
    
    const message = ref('Hello')
    const doubleCount = computed(() => (props.count ?? 0) * 2)
    
    const handleClick = () => {
      emit('update', message.value)
    }
    </script>
    
    <template>
      <div class="my-component">
        <h1>{{ title }}</h1>
        <p>{{ doubleCount }}</p>
        <button @click="handleClick">Update</button>
      </div>
    </template>
    
    <style lang="scss" scoped>
    .my-component { padding: 16px; }
    </style>
  10. Install and manage dependencies in Conda environments

    Guidelines for installing packages using Conda and pip, and managing them to avoid path errors.
    # 1. Prefer Conda for installation
    conda install requests
    conda install requests=2.32
    
    # 2. Use pip only if the package is unavailable in Conda
    # Use 'python -m pip' to ensure the package goes to the active environment
    python -m pip install fastapi uvicorn
    
    # List installed packages in current environment
    conda list
    # List packages in a specific environment without activating it
    conda list -n <env_name>
    
    # Update packages
    conda update <package_name>
    python -m pip install --upgrade <package_name>
    
    # Uninstall packages
    conda remove <package_name>
    python -m pip uninstall <package_name>
  11. Manage Python environments with Conda on macOS

    Use Conda to create and manage isolated Python environments on macOS. The core workflow involves creating an environment with a specific Python version, activating it, and using python -m pip to ensure packages are installed into the active environment rather than the global system Python.
    # Create a new environment
    conda create -n project_name python=3.12 pip
    
    # Activate the environment
    conda activate project_name
    
    # Install dependencies
    python -m pip install -r requirements.txt
    
    # Export environment configuration
    conda env export --from-history > environment.yml
    
    # Deactivate environment
    conda deactivate
  12. Manage and switch Java versions using jenv on macOS

    jenv allows developers to manage multiple JDK installations and switch between them globally, per-project, or per-shell session without manually modifying the JAVA_HOME environment variable. This prevents JDK path pollution across different projects.
    # Check current active version and its source
    jenv version
    
    # Set Java 21 as the global default version
    jenv global 21
    
    # Fix a specific project to use Java 8 (creates a .java-version file in the current directory)
    jenv local 1.8
    
    # Temporarily switch the current terminal session to Java 8
    jenv shell 1.8
    
    # Unset the temporary shell version and return to global/local setting
    jenv shell --unset