This tutorial will guide you through the steps to allow multiple devices to access your MySQL server over a network.

Prerequisites

• MySQL server installed on your host machine
• Access to the MySQL root user or an admin account
• Basic knowledge of networking

Configure MySQL to Listen on All IP Addresses

1. Open the MySQL configuration file (my.cnf or my.ini).
   • On Windows: Usually located at C:\ProgramData\MySQL\MySQL Server X.X\my.ini
   • On Linux: Usually at /etc/mysql/my.cnf or /etc/my.cnf or /etc/mysql/mysql.conf.d/mysqld.cnf
2. Find the line starting with bind-address.

   bind-address        = 127.0.0.1mysqlx-bind-address = 127.0.0.1

3. Change it to:

   bind-address        = 0.0.0.0mysqlx-bind-address = 0.0.0.0

   This allows MySQL to accept connections from any IP address.
4. Save the file and restart the MySQL service.
   • Windows:

     net stop mysqlnet start mysql

   • Linux:

     sudo systemctl restart mysql

Allow Remote Connections in the Firewall

1. Open port 3306 (default MySQL port) in your firewall settings.
   • Windows: Use Windows Defender Firewall to allow inbound connections on port 3306.
   • Linux:

     sudo ufw allow 3306/tcp

Create a MySQL User for Remote Access

⚠️ Important: At this point MySQL will accept connections from anywhere. If your server is exposed to the internet, secure it:

1. Log in to MySQL as root:

   mysql -u root -p

2. Create a new user or update an existing user to allow access from a specific IP or any IP (%):

   CREATE USER 'username'@'%' IDENTIFIED BY 'password';GRANT ALL PRIVILEGES ON *.* TO 'username'@'%' WITH GRANT OPTION;FLUSH PRIVILEGES;

   Replace username and password with your desired credentials.

Connect from Another Device

On the client device, use the following command to connect:

mysql -h <server-ip-address> -u username -p

Replace <server-ip-address> with the IP address of your MySQL server.

Optimizations

Increase Packet Size Limit

edit: /etc/mysql/mysql.conf.d/mysqld.cnf

[mysqld]max_allowed_packet = 128Mnet_read_timeout = 120net_write_timeout = 120

check using:

SHOW VARIABLES LIKE 'max_allowed_packet';SHOW VARIABLES LIKE 'net_read_timeout';SHOW VARIABLES LIKE 'net_write_timeout';

Increase Connection Limit

edit: /etc/mysql/mysql.conf.d/mysqld.cnf

[mysqld]max_connections = 500wait_timeout = 60interactive_timeout = 60

check using

SHOW VARIABLES LIKE 'max_connections';SHOW STATUS LIKE 'Threads_connected';SHOW STATUS LIKE 'Threads_running';

Security Tips

• Only allow trusted IPs if possible (replace % with a specific IP or subnet).
• Use strong passwords for all MySQL users.
• Consider enabling SSL for encrypted connections.

You have now enabled MySQL access for multiple devices on your network!

The new ESLint Flat Config format (eslint.config.js) offers a more flexible, modern, and JavaScript-native way to configure your linter. It allows you to:

• Use full JavaScript for dynamic configuration.
• Share and compose configs easily.
• Integrate with modern tools like Babel, TypeScript, and Prettier.
• Avoid legacy config pitfalls and limitations.

This article provides a complete, production-ready Flat Config setup for projects using JavaScript, TypeScript, React, and Prettier, with support for Babel and JSONC (JSON with comments) for Prettier configuration.

Requirements

yarn add -D eslint @eslint/js eslint-config-prettier eslint-plugin-prettier @babel/core @babel/eslint-parser @babel/preset-react @babel/plugin-syntax-import-assertions typescript typescript-eslint eslint-plugin-react eslint-plugin-react-hooks globals jsonc-parser

Write Prettier Config

Save below config to .prettierrc.json

{  // Prettier config  "semi": true,  "singleQuote": true,  "printWidth": 100,  "tabWidth": 2,  "trailingComma": "es5"}

Write ESLint Configuration

// ESLint Flat Config for JS, TS, React, and Prettier// ---------------------------------------------------// This configuration uses Flat Config (`eslint.config.js`)// and integrates://   - Base JS rules (@eslint/js)//   - Babel parser for modern JS & JSX//   - TypeScript parser for TS/TSX//   - React + React Hooks plugins//   - Prettier as an ESLint plugin//   - jsonc-parser for Prettier config (supports comments)// Requirements://   yarn add -D \// eslint @eslint/js eslint-config-prettier eslint-plugin-prettier \// @babel/core @babel/eslint-parser @babel/preset-react @babel/plugin-syntax-import-assertions \// typescript typescript-eslint \// eslint-plugin-react eslint-plugin-react-hooks \// globals jsonc-parser// ---------------------------------------------------import babelParser from '@babel/eslint-parser';import eslint from '@eslint/js';import prettierConfig from 'eslint-config-prettier';import prettier from 'eslint-plugin-prettier';import react from 'eslint-plugin-react';import reactHooks from 'eslint-plugin-react-hooks';import globals from 'globals';import { parse as parseJSONC } from 'jsonc-parser';import fs from 'node:fs';import path from 'node:path';import { fileURLToPath } from 'node:url';import tseslint from 'typescript-eslint';const __filename = fileURLToPath(import.meta.url);const __dirname = path.dirname(__filename);const prettierrc = parseJSONC(fs.readFileSync(path.resolve(__dirname, '.prettierrc.json'), 'utf-8'));export default tseslint.config(  // ---------------------------------------------------  // 🌍 Global config (applies to all files)  // ---------------------------------------------------  eslint.configs.recommended,  tseslint.configs.recommended,  {    ignores: [      '**/*.md', // Ignore Markdown files      '**/*.html', // Ignore raw HTML files      '**/*.py', // Ignore Python scripts      '**/*.txt', // Ignore plain text      '**/tmp/**', // Ignore temp files      '**/app/**', // Ignore custom app output      '**/dist/**', // Ignore build output      '**/node_modules/**', // Ignore dependencies      '**/coverage/**', // Ignore test coverage      '**/logs/**', // Ignore logs      '**/vendor/**', // Ignore vendor code      '**/min.*', // Ignore minified assets      '**/*.lock', // Ignore lockfiles      '**/public/**', // Ignore public assets      '**/.yarn/**' // Ignore Yarn cache    ],    // Global language options    languageOptions: {      globals: {        // Browser globals (window, document, etc.)        ...globals.browser,        // Node.js globals (process, __dirname, etc.)        ...globals.node,        // Jest testing globals        ...globals.jest,        // Google reCAPTCHA        grecaptcha: 'readonly',        // jQuery $        $: 'readonly',        // jQuery object        jQuery: 'readonly',        // Google Ads        adsbygoogle: 'writable',        // Hexo static site generator        hexo: 'readonly'      },      // Support latest ECMAScript syntax      ecmaVersion: 'latest',      // Enable ES modules      sourceType: 'module'    },    plugins: { prettier },    rules: {      // ✅ Run Prettier as an ESLint rule (using config with comments)      'prettier/prettier': ['error', prettierrc],      // ✅ Disable stylistic rules that conflict with Prettier      ...prettierConfig.rules,      // Example JS style relaxations      'arrow-body-style': 'off', // Allow any arrow fn body style      'prefer-arrow-callback': 'off', // Allow normal function callbacks      // ⚙️ Allow unused variables starting with "_"      'no-unused-vars': [        'error',        {          argsIgnorePattern: '^_',          varsIgnorePattern: '^_',          caughtErrorsIgnorePattern: '^_'        }      ]    }  },  // ---------------------------------------------------  // 📜 ESM (JS, MJS, JSX)  // ---------------------------------------------------  {    files: ['**/*.{js,mjs,jsx}'],    languageOptions: {      // Use Babel parser for modern JS/JSX      parser: babelParser,      parserOptions: {        // Allow parsing without .babelrc        requireConfigFile: false,        babelOptions: {          // Handle JSX in JS files          presets: ['@babel/preset-react'],          // Support `import ... with { type: "json" }`          plugins: ['@babel/plugin-syntax-import-assertions']        },        ecmaFeatures: {          // Enable JSX parsing          jsx: true        }      },      globals: {        ...globals.browser,        ...globals.node      }    },    rules: {      // Only use base no-unused-vars for JS, allow unused vars starting with _      '@typescript-eslint/no-unused-vars': 'off',      // Place custom no-unused-vars last to ensure it takes precedence      'no-unused-vars': [        'error',        {          argsIgnorePattern: '^_',          varsIgnorePattern: '^_',          caughtErrorsIgnorePattern: '^_'        }      ]    }  },  // ---------------------------------------------------  // 📦 CommonJS (CJS)  // ---------------------------------------------------  {    files: ['**/*.cjs'],    languageOptions: {      sourceType: 'commonjs',      parser: babelParser,      parserOptions: {        // Allow parsing without .babelrc        requireConfigFile: false,        babelOptions: {          // Handle JSX in JS files          presets: ['@babel/preset-env']        }      },      globals: {        ...globals.node      }    },    rules: {      // Allow require statements in CJS files      '@typescript-eslint/no-var-requires': 'off',      '@typescript-eslint/no-require-imports': 'off',      '@typescript-eslint/no-unused-vars': 'off',      'no-var-requires': 'off', // Allow require() in CJS      'no-unused-vars': [        'error',        {          argsIgnorePattern: '^_',          varsIgnorePattern: '^_',          caughtErrorsIgnorePattern: '^_'        }      ]    }  },  // ---------------------------------------------------  // 🟦 TypeScript (TS, TSX, MTS, CTS)  // ---------------------------------------------------  {    files: ['**/*.{ts,tsx,mts,cts}'],    languageOptions: {      // TypeScript-aware parser      parser: tseslint.parser,      parserOptions: {        // Point to project tsconfig        project: './tsconfig.json'      },      globals: {        ...globals.browser,        ...globals.node      }    },    rules: {      // Replace base "no-unused-vars" with TS version      'no-unused-vars': 'off',      '@typescript-eslint/explicit-function-return-type': 'off', // No need to force return types      '@typescript-eslint/no-explicit-any': 'off', // Allow `any`      '@typescript-eslint/no-this-alias': [        'error',        {          allowDestructuring: false,          allowedNames: ['self', 'hexo'] // Allow aliasing `this` to self/hexo        }      ],      // Place custom TS unused-vars rule last to ensure it takes precedence      '@typescript-eslint/no-unused-vars': [        'error',        {          argsIgnorePattern: '^_', // Allow ignored args starting with "_"          varsIgnorePattern: '^_', // Allow ignored vars starting with "_"          caughtErrorsIgnorePattern: '^_' // Allow ignored caught errors        }      ]    }  },  // ---------------------------------------------------  // ⚛️ React (JSX + TSX)  // ---------------------------------------------------  {    files: ['**/*.{jsx,tsx}'],    plugins: {      react, // React linting rules      'react-hooks': reactHooks, // Enforce hooks rules      prettier    },    rules: {      // ✅ React recommended rules      ...react.configs.recommended.rules,      ...react.configs['jsx-runtime'].rules,      // ✅ React Hooks best practices      ...reactHooks.configs.recommended.rules,      // ✅ Prettier formatting      'prettier/prettier': 'error',      // ⚙️ Adjustments for modern React      'react/react-in-jsx-scope': 'off', // Not needed in React 17+      'react/prop-types': 'off' // Disable PropTypes if using TS    },    settings: {      react: {        version: 'detect' // Auto-detect installed React version      }    }  });

Note:

• For ESM projects ("type": "module" in package.json), use eslint.config.js or eslint.config.mjs.
• For CommonJS projects (no "type": "module"), use eslint.config.cjs or eslint.config.js.
• Choose the config file extension that matches your project's module system for best compatibility.

Key Features of This Config

• Unified Linting: One config for JS, TS, React, and Prettier.
• Modern Syntax Support: Babel parser for latest JS/JSX, TypeScript parser for TS/TSX.
• React & Hooks: Best practices and rules for React and React Hooks.
• Prettier Integration: Prettier runs as an ESLint rule, using config with comments.
• Flexible Ignoring: Ignores common output, lock, and asset files.
• Globals: Pre-configured for browser, Node.js, Jest, and common web globals.
• Customizable: Easily extend or override for your project needs.
• ESM & CJS Project Support: This ESLint config works for both ECMAScript Module (ESM) and CommonJS (CJS) projects—just use the appropriate file extension (.mjs, .js, or .cjs) for your eslint.config file to match your project's module system.

How to Use

1. Install dependencies (see Requirements above).

2. Copy the config into your project as eslint.config.js.

3. Add a .prettierrc.json file (optionally with comments, thanks to JSONC support).

4. Run ESLint on your codebase:

   npx eslint . --ext js,jsx,ts,tsx

5. Integrate with your editor (e.g., VS Code) for real-time linting and formatting.

How to integrate with VSCode

Install plugins

• ESLint VSCode Plugin
• Prettier VSCode Plugin

Configure VSCode

Save below config to project settings .vscode/settings.json

{  "terminal.integrated.env.linux": {    // linux custom PATH environment variable    "PATH": "${env:PATH}:${workspaceFolder}/node_modules/.bin:${workspaceFolder}/bin"  },  "terminal.integrated.env.windows": {    // windows custom PATH environment variable    "PATH": "${env:LOCALAPPDATA}\\nvm;C:\\nvm4w\\nodejs;C:\\Program Files\\Git\\cmd;C:\\Program Files\\Git\\usr\\bin;${env:PATH};${workspaceFolder}\\node_modules\\.bin;${workspaceFolder}\\bin;${workspaceFolder}\\vendor\\bin"  },  "javascript.suggestionActions.enabled": false,  "eslint.useFlatConfig": true,  "eslint.probe": [    "astro",    "civet",    "javascript",    "javascriptreact",    "typescript",    "typescriptreact",    "html",    "mdx",    "vue",    "markdown",    "json",    "jsonc"  ],  "eslint.validate": [    "astro",    "civet",    "javascript",    "javascriptreact",    "typescript",    "typescriptreact",    "html",    "mdx",    "vue",    "markdown",    "json",    "jsonc"  ]}

Troubleshooting & Tips

• If you see parser errors, ensure all dependencies are installed and up to date.
• For TypeScript, make sure your tsconfig.json is present and correct.
• You can further customize rules for your team or project style.
• For monorepos, you can share this config across packages.

References & Further Reading

• ESLint Flat Config Guide
• Prettier Documentation
• TypeScript ESLint
• Babel ESLint Parser
• React ESLint Plugin

1. Set the NPM registry server for the npm scope:

   yarn config set npmScopes.npm.npmRegistryServer "https://registry.npmjs.org"

2. Always authenticate for the npm scope:

   yarn config set npmScopes.npm.npmAlwaysAuth true

3. Set the authentication token for the npm scope:

   yarn config set npmScopes.npm.npmAuthToken "YOUR_NPM_TOKEN"

The following command updates the specified packages (husky and lint-staged) across all workspaces in a Yarn monorepo setup.

yarn workspaces foreach --all exec yarn up husky lint-staged

To use it, both the Android device and the computer running Android Studio need to be connected to the same Wi-Fi network. Developers can enable wireless debugging on the Android device by going into the Developer Options menu, and then they can pair the device with Android Studio for wireless debugging sessions.

This feature is especially useful when testing apps on devices that are not easily accessible, such as when the device is mounted or located far from the computer.

To enable and pair wireless debugging in Android, follow these steps:

Step 1: Enable Developer Options

1. Open the Settings app on your Android device.
2. Scroll down and tap About phone.
3. Find and tap Build number 7 times to unlock Developer Options. You may need to enter your device's PIN or password.

Step 2: Enable Wireless Debugging

1. Once Developer Options are enabled, go back to the Settings menu.
2. Tap System > Developer options.
3. Find and enable Wireless debugging.

Step 3: Pair Device for Wireless Debugging

1. In the Developer options menu, scroll down and enable Wireless debugging.

2. Tap Pair device with pairing code.

3. On your computer, open a terminal or command prompt and run the following command to discover your device:

   adb devices

   This will show the list of connected devices.

4. In the Wireless Debugging section on your Android device, tap Pair device. You'll see a pairing code.

5. On your computer, use the following command to pair the device using the code:

   adb pair <device-ip>:<port> <pairing-code>

   Replace <device-ip>, <port>, and <pairing-code> with the details from the Android device. Like below screenshoot:

   

6. After pairing, you can run the following command to connect:

   adb connect <device-ip>:<port>

   Replace <device-ip> and <port> with the information provided in the pairing step.

Now, your Android device should be connected wirelessly for debugging! You can use adb commands just like you would with a wired connection.

First, you will be asked about the type of account from your email, select individuals. Second, whether you are a citizen or US population, please choose no when you not in AS.

Next, select the W-8 Tax Form by selecting W-8BEN to utilize the Tax Agreement. Thus, later you can use tax treaty with a cutting rate of 0% for income from adsense.

Afterwards, you can click on the W-8BEN Form Start button. In this form, the contents of your tax identity, such as individual names, DBA names (optional), and Citizenship countries/regions. You will also be asked to fill in the taxpayer identification number data.

In the tax identification number data, enter the Tax ID number in the Foreign Tin column and next click. You will also be asked to fill in the address of residence and correspondence address. After completing filling, please click next.

In the Tax Agreement section, the system will ask the question whether you claim to be a lower tax deduction/collection rate based on a tax agreement. Please select yes and click the check mark that you are a resident of the country/region that claims the agreement with the US.

You also have to include the country/region by choosing Indonesia. In special tariffs and conditions, check the service (such as adsense). Furthermore, you can choose to use Article 8 paragraph (1) on the question of articles and paragraphs.

Later, you will get a tax cut rate of 0%. Give a check mark on the reasons (your account name) meets the requirements of the agreement article. Next, also give a check mark on film royalties and TVs (such as movie partners and certain events on YouTube and play partners).

In the film Royalty and TV section, please use Article 13 paragraph (2) so that you are subject to a tax cut of 10%. Then, give a check mark on the reasons (your account name) meets the requirements of the agreement article.

Also give a check mark to the royalties and other copyright sections (such as Play and YouTube partner programs). Please choose to use Article 13 paragraph (2) and get a tax cut of 10%. Then give a check mark on the reasons (your account name) meets the requirements of the agreement article. Click Next.

In the document preview section, re-check the document and give a check mark. If so, click next. In the certification section, enter the full name. Choose yes in the question whether you are the person listed in the signature section, and click next.

You will be in the activities and services carried out in the US and Affidavit. You can answer the questions given according to the conditions. If so, click next. In the Tax Reporting Section, please choose electronic delivery (recommended).

Then, read the electronic shipping agreement. If so, give a check mark that you approve the shipping agreement without paper then click the Send button. After that, Google will check and the approval status can be seen on the main page of the Tax Info menu. Finished. Hope it is useful.

install using npm:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin globals @eslint/js @eslint/eslintrc

install using yarn:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin globals @eslint/js @eslint/eslintrc

ESLint v9 ESM configuration migrated

Save this rules to eslint.config.mjs

import globals from 'globals';import tsParser from '@typescript-eslint/parser';import path from 'node:path';import { fileURLToPath } from 'node:url';import js from '@eslint/js';import { FlatCompat } from '@eslint/eslintrc';const __filename = fileURLToPath(import.meta.url);const __dirname = path.dirname(__filename);const compat = new FlatCompat({  baseDirectory: __dirname,  recommendedConfig: js.configs.recommended,  allConfig: js.configs.all});export default [  {    // Ignore certain files and directories from linting    ignores: [      '**/*.md',          // Markdown files      '**/tmp/**/*',      // Temporary files      '**/*.html',        // HTML files      '**/*.py',          // Python files      '**/*.txt',         // Text files      '**/app/**/*',      // Application-specific files      '**/dist/**/*',     // Distribution/build files      '**/node_modules/**/*', // Node.js dependencies    ]  },  // Extend recommended ESLint rules, TypeScript plugin rules, and Prettier plugin rules  ...compat.extends(    'eslint:recommended',                     // Base ESLint recommended rules    'plugin:@typescript-eslint/eslint-recommended', // TypeScript-specific recommended rules    'plugin:@typescript-eslint/recommended',  // Additional TypeScript rules    'plugin:prettier/recommended'             // Integrate Prettier for code formatting  ),  {    linterOptions: {      reportUnusedDisableDirectives: true      // Report unused ESLint disable comments    },    languageOptions: {      globals: {        ...globals.browser,                    // Browser global variables        ...globals.amd,                        // AMD module globals        ...globals.node,                       // Node.js global variables        $: 'readonly',                         // jQuery object        jQuery: 'readonly',                    // jQuery object        adsbygoogle: 'writable',               // Google Ads        hexo: 'readonly'                       // Hexo static site generator object      },      parser: tsParser,                        // Use TypeScript parser      ecmaVersion: 2020,                       // Specify ECMAScript version 2020      sourceType: 'module'                     // Enable ES6 modules    },    rules: {      // Prettier formatting rules      'prettier/prettier': [        'error',        {          $schema: 'https://json.schemastore.org/prettierrc', // Prettier schema          printWidth: 120,          // Max line length          tabWidth: 2,              // Use 2 spaces for indentation          useTabs: false,           // Use spaces instead of tabs          bracketSameLine: true,    // Keep opening/closing tags on the same line for JSX          bracketSpacing: true,     // Add space inside object literal brackets          semi: true,               // Add semicolons at the end of statements          singleQuote: true,        // Use single quotes for strings          trailingComma: 'none',    // No trailing commas          endOfLine: 'lf',          // Use linefeed (\n) as the end-of-line character          quoteProps: 'as-needed',  // Only quote object properties when necessary          // Override settings for specific file types          overrides: [            {              excludeFiles: ['*.min.js', '*.min.cjs', '*.min.css', '*.min.html', '*.min.scss'], // Skip minified files              files: ['*.js', '*.css', '*.sass', '*.html', '*.md', '*.ts'],                    // Target specific file types              options: { semi: true }                                                         // Always use semicolons            },            {              files: ['*.ejs', '*.njk', '*.html'],     // Specific parser for templating and HTML files              options: { parser: 'html' }            }          ]        }      ],      // TypeScript-specific rules      '@typescript-eslint/explicit-function-return-type': 'off',  // Disable enforcing return type on functions      'no-unused-vars': 'off',                                    // Disable base rule (TypeScript has its own)      // Allow unused variables starting with _ (common convention for ignored variables)      '@typescript-eslint/no-unused-vars': [        'error',        {          argsIgnorePattern: '^_',            // Ignore unused arguments starting with _          varsIgnorePattern: '^_',            // Ignore unused variables starting with _          caughtErrorsIgnorePattern: '^_'     // Ignore unused caught errors starting with _        }      ],      '@typescript-eslint/no-explicit-any': 'off',                // Allow usage of 'any' type      '@typescript-eslint/no-this-alias': [        'error',        {          allowDestructuring: false,          // Disallow destructuring with aliasing          allowedNames: ['self', 'hexo']      // Allow specific aliases like 'self' and 'hexo'        }      ],      // JavaScript arrow function rules      'arrow-body-style': 'off',              // Disable forcing arrow function bodies      'prefer-arrow-callback': 'off'          // Disable enforcing arrow functions for callbacks    }  },  {    // Specific rules for JavaScript and CommonJS files    files: ['**/*.js', '**/*.cjs'],    rules: {      '@typescript-eslint/no-var-requires': 'off',  // Allow require() in CommonJS files      '@typescript-eslint/no-require-imports': 'off' // Allow require imports    }  }];

ESLint v9 CommonJS (CJS) configuraion migrated

Save this rules to eslint.config.cjs

const globals = require('globals');const tsParser = require('@typescript-eslint/parser');const js = require('@eslint/js');const { FlatCompat } = require('@eslint/eslintrc');const compat = new FlatCompat({  baseDirectory: __dirname,                   // The current directory for ESLint configs  recommendedConfig: js.configs.recommended,  // ESLint's recommended rules  allConfig: js.configs.all                   // All ESLint rules});module.exports = [  {    // Ignore certain files and directories from linting    ignores: [      '**/*.md',          // Markdown files      '**/tmp/**/*',      // Temporary files      '**/*.html',        // HTML files      '**/*.py',          // Python files      '**/*.txt',         // Text files      '**/app/**/*',      // Application-specific files      '**/dist/**/*',     // Distribution/build files      '**/node_modules/**/*', // Node.js dependencies    ]  },  // Extend recommended ESLint rules, TypeScript plugin rules, and Prettier plugin rules  ...compat.extends(    'eslint:recommended',                     // Base ESLint recommended rules    'plugin:@typescript-eslint/eslint-recommended', // TypeScript-specific recommended rules    'plugin:@typescript-eslint/recommended',  // Additional TypeScript rules    'plugin:prettier/recommended'             // Integrate Prettier for code formatting  ),  {    linterOptions: {      reportUnusedDisableDirectives: true      // Report unused ESLint disable comments    },    languageOptions: {      globals: {        ...globals.browser,                    // Browser global variables        ...globals.amd,                        // AMD module globals        ...globals.node,                       // Node.js global variables        $: 'readonly',                         // jQuery object        jQuery: 'readonly',                    // jQuery object        adsbygoogle: 'writable',               // Google Ads        hexo: 'readonly'                       // Hexo static site generator object      },      parser: tsParser,                        // Use TypeScript parser      ecmaVersion: 2020,                       // Specify ECMAScript version 2020      sourceType: 'module'                     // Enable ES6 modules    },    rules: {      // Prettier formatting rules      'prettier/prettier': [        'error',        {          $schema: 'https://json.schemastore.org/prettierrc', // Prettier schema          printWidth: 120,          // Max line length          tabWidth: 2,              // Use 2 spaces for indentation          useTabs: false,           // Use spaces instead of tabs          bracketSameLine: true,    // Keep opening/closing tags on the same line for JSX          bracketSpacing: true,     // Add space inside object literal brackets          semi: true,               // Add semicolons at the end of statements          singleQuote: true,        // Use single quotes for strings          trailingComma: 'none',    // No trailing commas          endOfLine: 'lf',          // Use linefeed (\n) as the end-of-line character          quoteProps: 'as-needed',  // Only quote object properties when necessary          // Override settings for specific file types          overrides: [            {              excludeFiles: ['*.min.js', '*.min.cjs', '*.min.css', '*.min.html', '*.min.scss'], // Skip minified files              files: ['*.js', '*.css', '*.sass', '*.html', '*.md', '*.ts'],                    // Target specific file types              options: { semi: true }                                                         // Always use semicolons            },            {              files: ['*.ejs', '*.njk', '*.html'],     // Specific parser for templating and HTML files              options: { parser: 'html' }            }          ]        }      ],      // TypeScript-specific rules      '@typescript-eslint/explicit-function-return-type': 'off',  // Disable enforcing return type on functions      'no-unused-vars': 'off',                                    // Disable base rule (TypeScript has its own)      // Allow unused variables starting with _ (common convention for ignored variables)      '@typescript-eslint/no-unused-vars': [        'error',        {          argsIgnorePattern: '^_',            // Ignore unused arguments starting with _          varsIgnorePattern: '^_',            // Ignore unused variables starting with _          caughtErrorsIgnorePattern: '^_'     // Ignore unused caught errors starting with _        }      ],      '@typescript-eslint/no-explicit-any': 'off',                // Allow usage of 'any' type      '@typescript-eslint/no-this-alias': [        'error',        {          allowDestructuring: false,          // Disallow destructuring with aliasing          allowedNames: ['self', 'hexo']      // Allow specific aliases like 'self' and 'hexo'        }      ],      // JavaScript arrow function rules      'arrow-body-style': 'off',              // Disable forcing arrow function bodies      'prefer-arrow-callback': 'off'          // Disable enforcing arrow functions for callbacks    }  },  {    // Specific rules for JavaScript and CommonJS files    files: ['**/*.js', '**/*.cjs'],    rules: {      '@typescript-eslint/no-var-requires': 'off',  // Allow require() in CommonJS files      '@typescript-eslint/no-require-imports': 'off' // Allow require imports    }  }];

Prettier rule config

You can separate prettier config into .prettierrc

{  "$schema": "https://json.schemastore.org/prettierrc",  "printWidth": 120,  "tabWidth": 2,  "useTabs": false,  "bracketSameLine": true,  "bracketSpacing": true,  "semi": true,  "singleQuote": true,  "trailingComma": "none",  "endOfLine": "lf",  "quoteProps": "as-needed"}

VSCode config

Create .vscode/settings.json

{  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true // let ESLint take formating and linting  },  // ESLint v9 need to using flat config  "eslint.useFlatConfig": true,  "eslint.experimental.useFlatConfig": true}

Optional typescript rules config

create tsconfig.json (if not created yet), for example tsconfig.json for node 16.

npm

npm install --save-dev @tsconfig/node16

yarn

yarn add --dev @tsconfig/node16

{  "$schema": "https://json.schemastore.org/tsconfig",  "display": "Node 16",  "extends": "@tsconfig/node16/tsconfig.json",  "compilerOptions": {    "preserveConstEnums": true,    "allowJs": true,    "outDir": "./dist"  },  "include": [    "src/**/*"  ],  "exclude": [    "**/node_modules/**",    "**/*.spec.ts",    "**/*.test.ts",    "**/__tests__/**"  ]}

Finish

now your vscode format and lint your codes automatically.

See Also:
Comprehensive ESLint Flat Config for JS, TS, React, and Prettier

To achieve this in PySide6, you can connect the main window's closeEvent to a method that closes all other opened windows. Here's an example:

1. Main Window: The primary window with the button that opens a new window.
2. Secondary Window: The window that opens when the button is clicked.

Here's a code example to demonstrate this:

from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton, QWidget, QVBoxLayoutimport sysclass SecondaryWindow(QWidget):    def __init__(self):        super().__init__()        self.setWindowTitle("Secondary Window")        self.setGeometry(100, 100, 300, 200)class MainWindow(QMainWindow):    def __init__(self):        super().__init__()        self.setWindowTitle("Main Window")        self.setGeometry(100, 100, 400, 300)        self.opened_windows = []        self.button = QPushButton("Open Secondary Window", self)        self.button.clicked.connect(self.open_secondary_window)        layout = QVBoxLayout()        layout.addWidget(self.button)        central_widget = QWidget()        central_widget.setLayout(layout)        self.setCentralWidget(central_widget)    def open_secondary_window(self):        new_window = SecondaryWindow()        new_window.show()        self.opened_windows.append(new_window)    def closeEvent(self, event):        # Close all opened windows when the main window is closed        for window in self.opened_windows:            window.close()        event.accept()if __name__ == "__main__":    app = QApplication(sys.argv)    main_window = MainWindow()    main_window.show()    sys.exit(app.exec())

Explanation:

1. SecondaryWindow Class: This represents the additional windows that will be opened when the button is clicked.
2. MainWindow Class:
   • The open_secondary_window method creates and shows a new SecondaryWindow and keeps track of it in the opened_windows list.
   • The closeEvent method is overridden to ensure that all opened windows are closed when the main window is closed.

Behavior:

• Clicking the button in the main window opens a secondary window.
• When the main window is closed, any secondary windows that were opened will also close automatically.

This setup ensures that secondary windows are properly managed and closed along with the main window.

Using QWidget Instead Of QMainWindow

You can change MainWindow(QMainWindow) to MainWindow(QWidget). This makes MainWindow a subclass of QWidget instead of QMainWindow. When doing this, you'll need to make a few adjustments, such as setting the layout directly on the main window widget since QWidget doesn't have the same central widget concept as QMainWindow.

Here the modified codes:

from PySide6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayoutfrom PySide6.QtGui import QCloseEventfrom typing import Listimport sysclass SecondaryWindow(QWidget):    def __init__(self):        super().__init__()        self.setWindowTitle("Secondary Window")        self.setGeometry(100, 100, 300, 200)class MainWindow(QWidget):    def __init__(self):        super().__init__()        self.setWindowTitle("Main Window")        self.setGeometry(100, 100, 400, 300)        self.opened_windows: List[SecondaryWindow] = []        self.button: QPushButton = QPushButton("Open Secondary Window", self)        self.button.clicked.connect(self.open_secondary_window)        layout: QVBoxLayout = QVBoxLayout(self)        layout.addWidget(self.button)        self.setLayout(layout)    def open_secondary_window(self) -> None:        new_window: SecondaryWindow = SecondaryWindow()        new_window.show()        self.opened_windows.append(new_window)    def closeEvent(self, event: QCloseEvent) -> None:        # Close all opened windows when the main window is closed        for window in self.opened_windows:            window.close()        event.accept()if __name__ == "__main__":    app: QApplication = QApplication(sys.argv)    main_window: MainWindow = MainWindow()    main_window.show()    sys.exit(app.exec())

Changes Made:

1. Base Class: Changed MainWindow(QMainWindow) to MainWindow(QWidget).
2. Layout Management: Since QWidget doesn't have a setCentralWidget method, you directly set the layout on the MainWindow widget using self.setLayout(layout).

Behavior:

• The functionality remains the same as before. You can still open secondary windows with the button click, and closing the main window will close all the opened secondary windows.

sample PySide6 application with autocomplete functionality using QLineEdit and QCompleter. This example creates a simple window with a text input field that provides autocomplete suggestions as the user types.

from PySide6.QtWidgets import QApplication, QMainWindow, QLineEdit, QCompleter, QVBoxLayout, QWidgetfrom PySide6.QtCore import QStringListModelclass AutocompleteApp(QMainWindow):    def __init__(self):        super().__init__()        # Set up the main window        self.setWindowTitle("Autocomplete Example")        self.setGeometry(100, 100, 400, 200)        # Create a central widget and a layout        central_widget = QWidget()        layout = QVBoxLayout()        # Create QLineEdit widget        self.line_edit = QLineEdit()        self.line_edit.setPlaceholderText("Type something...")        # Create sample data for autocomplete        data = ["apple", "banana", "grape", "orange", "peach", "pear", "plum"]        # Create QStringListModel and QCompleter        self.model = QStringListModel(data)        self.completer = QCompleter(self.model)        self.line_edit.setCompleter(self.completer)        # Add the QLineEdit to the layout        layout.addWidget(self.line_edit)        central_widget.setLayout(layout)        self.setCentralWidget(central_widget)if __name__ == "__main__":    app = QApplication([])    window = AutocompleteApp()    window.show()    app.exec()

Explanation:

1. AutocompleteApp Class: This class extends QMainWindow to create the main application window.
2. __init__ Method: Sets up the window title, size, and central widget.
3. QLineEdit: A text input field where users type text.
4. QStringListModel: Holds the list of strings that will be used for autocomplete suggestions.
5. QCompleter: Provides the autocomplete functionality using the QStringListModel.
6. Layout: Uses QVBoxLayout to arrange the QLineEdit within the main window.

To run this application, save the code to a file (e.g., autocomplete_app.py) and execute it with Python. Make sure you have PySide6 installed in your environment.

Helper

PySide6 set QLineEdit autocomplete helper

from PySide6.QtWidgets import QLineEdit, QCompleterfrom PySide6.QtCore import QStringListModelfrom typing import Listdef set_completer(line_edit: QLineEdit, data: List[str]) -> None:    """    Configures a QLineEdit widget with a QCompleter for autocomplete functionality.    Args:        line_edit (QLineEdit): The QLineEdit widget to which the completer will be applied.        data (List[str]): A list of strings to be used as autocomplete suggestions.    Returns:        None    """    # Create a QStringListModel with the provided data    model = QStringListModel(data)    # Create a QCompleter with the model    completer = QCompleter(model)    # Set the completer on the QLineEdit    line_edit.setCompleter(completer)

Mobile Legends - To The Star event - event jalan takdir stage 1-1

Stage 3

Mobile Legends - To The Star event - event jalan takdir stage 3-1

Mobile Legends - To The Star event - event jalan takdir stage 3-2

Mobile Legends - To The Star event - event jalan takdir stage 3-3

Mobile Legends - To The Star event - event jalan takdir stage 3-4

Mobile Legends - To The Star event - event jalan takdir stage 3-5

Mobile Legends - To The Star event - event jalan takdir stage 3-6

Mobile Legends - To The Star event - event jalan takdir stage 3-7

Stage 4

Mobile Legends - To The Star event - event jalan takdir stage 4-1

Mobile Legends - To The Star event - event jalan takdir stage 4-2

Mobile Legends - To The Star event - event jalan takdir stage 4-3

Mobile Legends - To The Star event - event jalan takdir stage 4-4

Mobile Legends - To The Star event - event jalan takdir stage 4-5

Mobile Legends - To The Star event - event jalan takdir stage 4-6

Mobile Legends - To The Star event - event jalan takdir stage 4-7

Stage 5

Mobile Legends - To The Star event - event jalan takdir stage 5-5

Mobile Legends - To The Star event - event jalan takdir stage 5-6

Mobile Legends - To The Star event - event jalan takdir stage 5-7

Stage 6

Stage 7

Stage 7-1

Stage 7-2

Stage 7-3

Stage 7-4

Stage 7-5

Stage 7-6

Stage 7-7

<?php/** * Generate a random IP address within a CIDR range. * * @param string $cidr The CIDR range (e.g., "192.168.1.0/24"). * @return string The random IP address. */function generateRandomIP(string $cidr): string {    list($ip, $subnet) = explode('/', $cidr);        // Convert IP to binary format    $ipBinary = ip2long($ip);        // Calculate the number of available IP addresses in the subnet    $subnetSize = pow(2, (32 - $subnet));        // Generate a random offset within the subnet    $offset = mt_rand(1, $subnetSize - 2); // Exclude network address and broadcast address        // Calculate the resulting IP    $randomIP = long2ip($ipBinary + $offset);        return $randomIP;}/** * Generate a random port number. * * @return int The random port number. */function generateRandomPort(): int {    return mt_rand(1024, 65535);}// Example CIDR range$cidr = "192.168.1.0/24";// Generate a random IP address within the CIDR range$randomIP = generateRandomIP($cidr);// Generate a random port number$randomPort = generateRandomPort();// Output the random IP:Port combinationecho "Random IP:Port: $randomIP:$randomPort\n";?>

<?php// Function to generate a random stringfunction generateRandomString($length = 10) {    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';    $randomString = '';    for ($i = 0; $i < $length; $i++) {        $randomString .= $characters[rand(0, strlen($characters) - 1)];    }    return $randomString;}// Define the size of the text file in megabytes$fileSizeMB = 10; // Change this to the desired size// Open a new text file for writing$fileName = 'big_text_file.txt';$file = fopen($fileName, 'w');// Calculate the number of iterations needed to reach the desired file size$iterations = $fileSizeMB * 1024 * 1024 / 10; // Assuming each character occupies approximately 10 bytes// Generate and write random strings to the filefor ($i = 0; $i < $iterations; $i++) {    $randomString = generateRandomString(100); // Change 100 to adjust string length if needed    fwrite($file, $randomString . PHP_EOL); // Add a newline character after each string}// Close the filefclose($file);echo "Text file generated successfully!";?>

Here is the list of Chrome Driver command line Arguments.

If you are using chrome Driver for Selenium WebDriver or Protractor or …. then these are a handy useful list of command line arguments that can be used.

You may use this to look at the usuage: https://code.google.com/p/chromium/codesearch#chromium/src/chromeos/chromeos_switches.cc

Run chromedriver –help to see command line arguments for your version.

--adaboost--aggressive--aggressive-cache-discard--aggressive-tab-discard--allow-autofill-sync-credential--allow-cross-origin-auth-prompt--allow-external-pages--allow-file-access--allow-file-access-from-files--allow-hidden-media-playback--allow-http-background-page--allow-http-screen-capture--allow-insecure-localhost--allow-legacy-extension-manifests--allow-loopback-in-peer-connection--allow-nacl-crxfs-api[2]--allow-nacl-file-handle-api[2]--allow-nacl-socket-api[2]--allow-no-sandbox-job--allow-outdated-plugins--allow-ra-in-dev-mode--allow-running-insecure-content--allow-sandbox-debugging--allow-unchecked-dangerous-downloads[3]--alsa-input-device[4]--alsa-output-device[4]--also-emit-success-logs--alternative-service-probability-threshold--always-authorize-plugins--always-on--always-use-complex-text--alwaystrue--app--app-id--app-mode-auth-code--app-mode-oauth-token--app-mode-oem-manifest--app-shell-allow-roaming--app-shell-host-window-size--app-shell-preferred-network--app-shell-refresh-token--app-shell-user--apple--apps-gallery-download-url--apps-gallery-update-url--apps-gallery-url--apps-keep-chrome-alive-in-tests[5]--artifacts-dir--ash-animate-from-boot-splash-screen--ash-browsertests[6]--ash-copy-host-background-at-boot--ash-debug-shortcuts--ash-disable-maximize-mode-window-backdrop--ash-disable-screen-orientation-lock[7]--ash-disable-stable-overview-order--ash-disable-touch-exploration-mode--ash-enable-fullscreen-app-list[7]--ash-enable-magnifier-key-scroller[7]--ash-enable-mirrored-screen--ash-enable-software-mirroring--ash-enable-stable-overview-order--ash-enable-system-sounds--ash-enable-touch-view-testing--ash-enable-unified-desktop[7]--ash-force-desktop[6]--ash-hide-notifications-for-factory--ash-host-window-bounds--ash-secondary-display-layout--ash-touch-hud--ash-use-first-display-as-internal--ash-webui-init--audio-buffer-size--audio-modem-dump-tokens-to-dir--audio-modem-enable-audible-broadcast--audio-modem-enable-inaudible-broadcast--aura-legacy-power-button--auth-ext-path--auth-server-whitelist--auth-spnego-account-type[8]--auto--auto-launch-at-startup--auto-select-desktop-capture-source--blink-platform-log-channels--blink-settings--bootstrap--browser-subprocess-path--browser-test--bwsi--bypass-app-banner-engagement-checks--canvas-msaa-sample-count--cc-layer-tree-test-no-timeout--cc-rebaseline-pixeltests--cellular-only--certificate-transparency-log--channel--check-for-update-interval--check-layout-test-sys-deps--child-process--child-wallpaper-large--child-wallpaper-small--ChromeOSMemoryPressureHandling--cipher-suite-blacklist--clear-data-reduction-proxy-data-savings--clear-token-service--cloud-devices-url--cloud-print-file--cloud-print-file-type--cloud-print-job-title--cloud-print-print-ticket--cloud-print-setup-proxy--cloud-print-url--cloud-print-xmpp-endpoint--compensate-for-unstable-pinch-zoom--compile-shader-always-succeeds--component-updater--connect-to-metro-viewer--connectivity-check-url--conservative--console--consumer-device-management-url--content-handlers--content-image-texture-target--content-shell-host-window-size--controller--copresence-server--copresence-tracing-token--crash-dumps-dir--crash-on-failure--crash-on-hang-threads--crash-test--create-browser-on-startup-for-tests--cros-region--cros-regions-mode--cryptauth-http-host--custom-launcher-page--d3d11--d3d9--daemon--daemon-pipe--data-path--data-reduction-proxy-config-url--data-reduction-proxy-experiment--data-reduction-proxy-http-proxies--data-reduction-proxy-lo-fi--data-reduction-proxy-secure-proxy-check-url--data-reduction-proxy-secure-proxy-disabled--data-reduction-proxy-warmup-url--data-reduction-ssl-proxy--dbus-stub--dbus-unstub-clients--debug-enable-frame-toggle--debug-packed-apps--debug-plugin-loading--debug-print[9]--default--default-tile-height--default-tile-width--default-wallpaper-is-oem--default-wallpaper-large--default-wallpaper-small--delete--demo--derelict-detection-timeout--derelict-idle-timeout--desktop--device-management-url--device-scale-factor[6]--diagnostics--diagnostics-format--diagnostics-recovery--disable--disable-3d-apis--disable-about-in-settings--disable-accelerated-2d-canvas--disable-accelerated-jpeg-decoding--disable-accelerated-mjpeg-decode--disable-accelerated-video-decode--disable-account-consistency--disable-add-to-shelf--disable-affiliation-based-matching--disable-app-info-dialog-mac[5]--disable-app-list-dismiss-on-blur--disable-app-window-cycling[5]--disable-appcontainer--disable-async-dns--disable-auto-hiding-toolbar-threshold[8]--disable-autofill-keyboard-accessory-view[8]--disable-background-networking--disable-backing-store-limit--disable-blink-features--disable-boot-animation--disable-breakpad--disable-bundled-ppapi-flash--disable-cache--disable-cached-picture-raster--disable-canvas-aa--disable-captive-portal-bypass-proxy--disable-cast-streaming-hw-encoding--disable-child-account-detection--disable-clear-browsing-data-counters--disable-client-side-phishing-detection--disable-cloud-import--disable-component-cloud-policy--disable-component-extensions-with-background-pages--disable-component-update--disable-composited-antialiasing--disable-confirmation--disable-contextual-search--disable-core-animation-plugins[10]--disable-credit-card-scan--disable-d3d11--disable-databases--disable-datasaver-prompt--disable-default-apps--disable-delay-agnostic-aec--disable-demo-mode--disable-device-disabling--disable-device-discovery-notifications--disable-dinosaur-easter-egg--disable-direct-npapi-requests--disable-direct-write[6]--disable-directwrite-for-ui[6]--disable-display-color-calibration[7]--disable-display-list-2d-canvas--disable-distance-field-text--disable-domain-blocking-for-3d-apis--disable-domain-reliability--disable-drive-search-in-app-launcher--disable-drop-sync-credential--disable-dwm-composition--disable-encrypted-media--disable-experimental-app-list--disable-extensions--disable-extensions-file-access-check--disable-extensions-http-throttling--disable-fast-web-scroll-view-insets--disable-features--disable-field-trial-config--disable-file-system--disable-fill-on-account-select--disable-flash-3d--disable-flash-stage3d--disable-full-form-autofill-ios--disable-gaia-services--disable-gesture-requirement-for-media-playback--disable-gl-drawing-for-tests--disable-gl-error-limit--disable-gl-extensions--disable-glsl-translator--disable-gpu--disable-gpu-compositing--disable-gpu-driver-bug-workarounds--disable-gpu-early-init--disable-gpu-memory-buffer-compositor-resources--disable-gpu-memory-buffer-video-frames--disable-gpu-process-crash-limit--disable-gpu-program-cache--disable-gpu-rasterization--disable-gpu-sandbox--disable-gpu-shader-disk-cache--disable-gpu-vsync--disable-gpu-watchdog--disable-hang-monitor--disable-hid-detection-on-oobe--disable-hide-inactive-stacked-tab-close-buttons--disable-histogram-customizer--disable-hosted-app-shim-creation[5]--disable-hosted-apps-in-windows[5]--disable-icon-ntp--disable-infobars--disable-input-view--disable-ios-password-generation--disable-ios-password-suggestions--disable-ipv4--disable-ipv6--disable-javascript-harmony-shipping--disable-keyboard-commands--disable-kill-after-bad-ipc--disable-lcd-text--disable-legacy-window[6]--disable-local-storage--disable-logging--disable-login-animations--disable-low-end-device-mode--disable-low-res-tiling--disable-lru-snapshot-cache--disable-mac-overlays[10]--disable-mac-views-native-app-windows[5]--disable-main-frame-before-activation--disable-manager-for-sync-signin--disable-md-downloads--disable-media-source--disable-media-thread-for-media-playback[8]--disable-merge-key-char-events[6]--disable-method-check--disable-minimize-on-second-launcher-item-click--disable-mojo-channel--disable-mtp-write-support--disable-multilingual-spellchecker[11]--disable-namespace-sandbox--disable-native-gpu-memory-buffers--disable-network-portal-notification--disable-new-app-list-mixer--disable-new-bookmark-apps--disable-new-channel-switcher-ui--disable-new-kiosk-ui--disable-new-korean-ime--disable-new-profile-management--disable-new-task-manager[12]--disable-new-zip-unpacker--disable-notifications--disable-ntp-favicons--disable-ntp-popular-sites--disable-offer-store-unmasked-wallet-cards--disable-offer-upload-credit-cards--disable-office-editing-component-extension--disable-offline-auto-reload--disable-offline-auto-reload-visible-only--disable-offline-pages--disable-out-of-process-pac--disable-overlay-scrollbar--disable-overscroll-edge-effect[8]--disable-page-visibility--disable-panel-fitting[7]--disable-password-generation--disable-password-manager-reauthentication--disable-password-separated-signin-flow--disable-pdf-material-ui--disable-pepper-3d--disable-permissions-api--disable-physical-keyboard-autocorrect--disable-pinch--disable-plugins-discovery--disable-pnacl-crash-throttling--disable-policy-key-verification--disable-popup-blocking--disable-preconnect--disable-prefer-compositing-to-lcd-text--disable-presentation-api--disable-print-preview--disable-prompt-on-repost--disable-pull-to-refresh-effect[8]--disable-push-api-background-mode--disable-quic--disable-quic-port-selection--disable-reading-from-canvas--disable-remote-core-animation[10]--disable-remote-fonts--disable-renderer-accessibility--disable-renderer-backgrounding--disable-rgba-4444-textures--disable-rollback-option--disable-rtc-smoothness-algorithm--disable-save-password-bubble[5]--disable-screen-orientation-lock[8]--disable-seccomp-filter-sandbox--disable-session-crashed-bubble--disable-settings-window--disable-setuid-sandbox--disable-shader-name-hashing--disable-shared-workers--disable-signin-scoped-device-id--disable-simplified-fullscreen-ui--disable-single-click-autofill--disable-site-engagement-service--disable-smooth-scrolling--disable-software-rasterizer--disable-spdy-proxy-dev-auth-origin--disable-speech-api--disable-surfaces--disable-svg1dom--disable-sync--disable-sync-app-list--disable-sync-backup--disable-sync-rollback--disable-sync-types--disable-tab-switcher--disable-threaded-animation--disable-threaded-compositing--disable-threaded-scrolling--disable-timezone-tracking-option--disable-touch-adjustment--disable-touch-drag-drop--disable-touch-feedback--disable-translate--disable-translate-new-ux[5]--disable-usb-keyboard-detect[6]--disable-v8-idle-tasks--disable-vaapi-accelerated-video-encode[7]--disable-views-rect-based-targeting--disable-virtual-keyboard-overscroll--disable-voice-input--disable-volume-adjust-sound--disable-wake-on-wifi--disable-web-notification-custom-layouts--disable-web-resources--disable-web-security--disable-webaudio--disable-webgl--disable-webrtc-encryption[13]--disable-webrtc-hw-decoding[13]--disable-webrtc-hw-encoding[13]--disable-webrtc-multiple-routes[13]--disable-win32k-renderer-lockdown[6]--disable-wkwebview--disable-x-token--disable-xss-auditor--disable-zero-browsers-open-for-tests--disable-zero-copy--disabled--disallow-autofill-sync-credential--disallow-autofill-sync-credential-for-reauth--disallow-unchecked-dangerous-downloads[3]--disk-cache-dir--disk-cache-size--display[14]--dmg-device[5]--dns-log-details--dns-prefetch-disable--dom-automation--domain-name--dont-delete-on-download--dump-browser-histograms--dump-line-box-trees--eafe-path--eafe-url--early-tracing[15]--easy-unlock-app-path--egl--elevate--embedded-extension-options--emphasize-titles-in-omnibox-dropdown--emulate-shader-precision--enable-2d-canvas-clip-aa--enable-accelerated-2d-canvas--enable-accelerated-vpx-decode[6]--enable-accessibility-tab-switcher[8]--enable-account-consistency--enable-adaptive-selection-handle-orientation[8]--enable-add-to-shelf--enable-affiliation-based-matching--enable-aggressive-domstorage-flushing--enable-alternative-services--enable-android-compositor-animation-timelines[8]--enable-android-spellchecker[11]--enable-app-info-dialog-mac[5]--enable-app-list--enable-app-window-controls--enable-app-window-cycling[5]--enable-appcontainer--enable-apps-file-associations--enable-apps-show-on-first-paint--enable-audio-hang-monitor--enable-autofill-keyboard-accessory-view[8]--enable-automatic-password-saving--enable-avfoundation[5]--enable-begin-frame-scheduling--enable-benchmarking--enable-ble-advertising-in-apps--enable-blink-features--enable-bookmark-undo--enable-browser-side-navigation--enable-centered-app-list--enable-child-account-detection--enable-clear-browsing-data-counters--enable-clear-sync-data-on-passphrase-encryption--enable-cloud-print-proxy--enable-cloud-print-xps[6]--enable-cma-media-pipeline--enable-compositor-animation-timelines--enable-compositor-property-trees--enable-consumer-management--enable-contextual-search--enable-crash-reporter--enable-crash-reporter-for-testing[16]--enable-credential-manager-api--enable-credit-card-scan--enable-crx-hash-check--enable-data-reduction-proxy-bypass-warning--enable-data-reduction-proxy-carrier-test--enable-data-reduction-proxy-config-client--enable-datasaver-prompt--enable-device-discovery-notifications--enable-devtools-experiments--enable-display-list-2d-canvas--enable-distance-field-text--enable-dom-distiller--enable-dom-distiller-button-animation[8]--enable-domain-reliability--enable-download-notification--enable-download-resumption--enable-drive-search-in-app-launcher--enable-drop-sync-credential--enable-embedded-extension-options--enable-embeddedsearch-api[8]--enable-exclusive-audio[6]--enable-experimental-app-list--enable-experimental-canvas-features--enable-experimental-extension-apis--enable-experimental-input-view-features--enable-experimental-web-platform-features--enable-extension-action-redesign--enable-extension-activity-log-testing--enable-extension-activity-logging--enable-extension-assets-sharing--enable-fast-unload--enable-fast-web-scroll-view-insets--enable-features--enable-fill-on-account-select--enable-fill-on-account-select-no-highlighting--enable-first-run-ui-transitions--enable-font-antialiasing--enable-full-form-autofill-ios--enable-gl-path-rendering--enable-gpu-benchmarking--enable-gpu-client-logging--enable-gpu-client-tracing--enable-gpu-command-logging--enable-gpu-debugging--enable-gpu-memory-buffer-compositor-resources--enable-gpu-memory-buffer-video-frames--enable-gpu-rasterization--enable-gpu-service-logging--enable-gpu-service-tracing--enable-grouped-history--enable-hardware-overlays--enable-harfbuzz-rendertext[5]--enable-heap-profiling--enable-hosted-app-quit-notification[5]--enable-hosted-apps-in-windows[5]--enable-hosted-mode[8]--enable-hotword-hardware--enable-hung-renderer-infobar[8]--enable-icon-ntp--enable-iframe-based-signin--enable-image-color-profiles--enable-inband-text-tracks--enable-input-view--enable-ios-handoff-to-other-devices--enable-ios-password-generation--enable-kiosk-mode--enable-lcd-text--enable-leak-detection--enable-link-disambiguation-popup--enable-local-file-accesses--enable-logging--enable-longpress-drag-selection[8]--enable-low-end-device-mode--enable-low-res-tiling--enable-lru-snapshot-cache--enable-mac-views-app-list[5]--enable-mac-views-dialogs[5]--enable-mac-views-native-app-windows[5]--enable-main-frame-before-activation--enable-manager-for-sync-signin--enable-md-downloads--enable-md-extensions--enable-md-policy-page--enable-media-thread-for-media-playback[8]--enable-memory-benchmarking--enable-merge-key-char-events[6]--enable-message-center-always-scroll-up-upon-notification-removal--enable-mojo-serial-service--enable-multilingual-spellchecker[11]--enable-multiprocess--enable-nacl--enable-nacl-debug--enable-nacl-nonsfi-mode--enable-native-gpu-memory-buffers--enable-natural-scroll-default--enable-navigation-tracing--enable-net-benchmarking--enable-network-information--enable-network-portal-notification--enable-new-app-list-mixer--enable-new-bookmark-apps--enable-ntp-favicons--enable-ntp-popular-sites--enable-ntp-search-engine-country-detection--enable-offer-store-unmasked-wallet-cards--enable-offer-upload-credit-cards--enable-offline-auto-reload--enable-offline-auto-reload-visible-only--enable-offline-pages--enable-overlay-scrollbar--enable-override-bookmarks-ui--enable-panels--enable-partial-raster--enable-password-change-support--enable-password-force-saving--enable-password-generation--enable-password-separated-signin-flow--enable-pdf-material-ui--enable-pepper-testing--enable-physical-keyboard-autocorrect--enable-physical-web[8]--enable-pinch--enable-pixel-output-in-tests--enable-plugin-placeholder-testing--enable-pnacl-subzero--enable-potentially-annoying-security-features--enable-power-overlay--enable-precache--enable-precise-memory-info--enable-prefer-compositing-to-lcd-text--enable-prefixed-encrypted-media--enable-print-preview-register-promos--enable-privet-v3--enable-profile-shortcut-manager[6]--enable-profiling--enable-property-tree-verification--enable-proximity-auth-bluetooth-low-energy-discovery--enable-proximity-auth-proximity-detection--enable-push-api-background-mode--enable-push-message-payload--enable-query-extraction[17]--enable-quic--enable-quic-port-selection--enable-reader-mode-toolbar-icon--enable-renderer-mojo-channel--enable-request-tablet-site--enable-rgba-4444-textures--enable-sandbox--enable-sandbox-logging--enable-save-password-bubble[5]--enable-screenshot-testing-with-mode--enable-scripts-require-action--enable-scroll-prediction--enable-seccomp-filter-sandbox--enable-session-crashed-bubble--enable-settings-window--enable-share-group-async-texture-upload--enable-simplified-fullscreen-ui--enable-single-click-autofill--enable-site-engagement-eviction-policy--enable-site-engagement-service--enable-skia-benchmarking--enable-slimming-paint-v2--enable-smooth-scrolling--enable-spatial-navigation--enable-spdy-proxy-auth--enable-spdy-proxy-dev-auth-origin--enable-speech-dispatcher[18]--enable-spelling-auto-correct[11]--enable-spelling-feedback-field-trial[11]--enable-stats-collection-bindings--enable-stats-table--enable-strict-mixed-content-checking--enable-strict-powerful-feature-restrictions--enable-subscribe-uniform-extension--enable-suggestions-with-substring-match--enable-supervised-user-managed-bookmarks-folder--enable-sync-app-list--enable-sync-articles--enable-tab-audio-muting--enable-tab-switcher--enable-tcp-fastopen--enable-threaded-compositing--enable-threaded-texture-mailboxes--enable-thumbnail-retargeting--enable-touch-drag-drop--enable-touchview[7]--enable-trace-app-source--enable-tracing--enable-tracing-output--enable-translate-new-ux[5]--enable-transparent-visuals[19]--enable-unified-media-pipeline[8]--enable-unsafe-es3-apis--enable-use-zoom-for-dsf--enable-user-controlled-alternate-protocol-ports--enable-usermedia-screen-capturing--enable-video-player-chromecast-support--enable-viewport--enable-virtual-keyboard--enable-virtual-keyboard-overscroll--enable-virtualized-time--enable-vtune-support--enable-web-app-frame--enable-web-bluetooth--enable-web-notification-custom-layouts--enable-webgl-draft-extensions--enable-webgl-image-chromium--enable-webrtc-dtls12[13]--enable-webrtc-hw-h264-encoding[13]--enable-webrtc-stun-origin[13]--enable-webusb-on-any-origin--enable-webvr--enable-wifi-credential-sync--enable-win32k-lockdown-mimetypes[6]--enable-wkwebview--enable-zero-copy--enabled--encode-binary--enforce--enforce-gl-minimums--enforce-webrtc-ip-permission-check[13]--enforce_strict--enhanced-bookmarks-experiment--enterprise-enable-forced-re-enrollment--enterprise-enrollment-initial-modulus--enterprise-enrollment-modulus-limit--error-console--explicitly-allowed-ports--expose-internals-for-testing--expose-ipc-echo--extended-response--extension-action-redesign--extension-content-verification--extension-process--extensions-install-verification--extensions-multi-account--extensions-not-webstore--extensions-on-chrome-urls--extensions-update-frequency--extra-plugin-dir--extra-search-query-params--fake-variations-channel--fast--fast-start--feedback-server--first-exec-after-boot--flag-switches-begin--flag-switches-end--floating-virtual-keyboard--font-cache-shared-handle[6]--force-app-mode--force-desktop[6]--force-dev-mode-highlighting--force-device-scale-factor--force-directshow[6]--force-display-list-2d-canvas--force-fieldtrial-params--force-fieldtrials--force-first-run--force-first-run-ui--force-gpu-mem-available-mb--force-gpu-rasterization--force-immersive[6]--force-in-process--force-load-easy-unlock-app-in-tests--force-local-ntp--force-login-manager-in-tests--force-mediafoundation[6]--force-overlay-fullscreen-video--force-qtkit[5]--force-renderer-accessibility--force-variation-ids--force-wave-audio[6]--full-memory-crash-report--gaia-url--gcm-registration-url--gesture-editing--gesture-typing--gl--gl-shader-interm-output--gles--golden-screenshots-dir--google-apis-url--google-base-url--google-profile-info--google-url--gpu-device-id--gpu-driver-bug-workarounds--gpu-driver-vendor--gpu-driver-version--gpu-launcher--gpu-no-context-lost--gpu-process--gpu-program-cache-size-kb--gpu-rasterization-msaa-sample-count--gpu-sandbox-allow-sysv-shm--gpu-sandbox-failures-fatal--gpu-sandbox-start-early--gpu-startup-dialog--gpu-vendor-id--guest-wallpaper-large--guest-wallpaper-small--h--has-chromeos-diamond-key--hdmi-sink-supported-codecs--help--hide--hide-icons[6]--homedir--homepage--host--host-pairing-oobe--host-resolver-retry-attempts--host-resolver-rules--host-rules--http-port--ignore-autocomplete-off-autofill--ignore-certificate-errors--ignore-gpu-blacklist--ignore-urlfetcher-cert-requests--ignore-user-profile-mapping-for-tests--in-process-gpu--incognito--install--install-chrome-app--install-supervised-user-whitelists--instant-process--interests-url--invalidation-use-gcm-channel--ipc-connection-timeout--ipc-dump-directory--ipc-fuzzer-testcase[20]--ipc-sync-compositing[8]--isolate-extensions--javascript-harmony--js-flags--keep-alive-for-test--kiosk--kiosk-printing--lang--last-launched-app--learning--load-and-launch-app--load-apps--load-component-extension--load-extension--load-plugin--local-heuristics-only-for-password-generation--local-ntp-reload[21]--log-gpu-control-list-decisions--log-level--log-net-log--log-plugin-messages--login-manager--login-profile--login-user--lso-url--main-frame-resizes-are-orientation-changes--make-default-browser--managed-user-id--managed-user-sync-token--map-origin--mark-non-secure-as--material[1]--material-design-ink-drop-animation-speed--material-hybrid[1]--max-gum-fps[13]--max-untiled-layer-height--max-untiled-layer-width--media-cache-size--media-router--memory-metrics--memory-pressure-off--memory-pressure-thresholds--memory-pressure-thresholds-mb[6]--message-center-changes-while-open--message-loop-histogrammer--metrics-client-id[5]--metrics-recording-only--migrate-data-dir-for-sxs[18]--mock--monitoring-destination-id--mute-audio--nacl-broker--nacl-dangerous-no-sandbox-nonsfi--nacl-debug-mask--nacl-gdb--nacl-gdb-script--nacl-loader--nacl-loader-nonsfi--net-log-capture-mode--netifs-to-ignore--network-country-iso[8]--neutral--new-profile-management--new-window--NewProfileManagement--no-announcement--no-default-browser-check--no-displaying-insecure-content--no-experiments--no-first-run--no-managed-user-acknowledgment-check--no-network-profile-warning[6]--no-pings--no-proxy-server--no-referrers--no-sandbox--no-service-autorun--no-startup-window--no-wifi--noerrdialogs--non-secure--none--num-pac-threads--num-raster-threads--oauth2-client-id--oauth2-client-secret--off--on--oobe-guest-session--oobe-skip-postlogin--oobe-timer-interval--oopif-always-create-new-frame-tree--open-ash[22]--opengraph--origin-to-force-quic-on--original-process-start-time--osmesa--override--override-metrics-upload-url--override-plugin-power-saver-for-testing--override-use-gl-with-osmesa-for-tests--overscroll-history-navigation--ozone-dump-file--ozone-initial-display-bounds--ozone-initial-display-physical-size-mm--ozone-platform--ozone-test-single-overlay-support--pack-extension--pack-extension-key--parent-profile--password-store[23]--permission-request-api-scope--permission-request-api-url--plugin--plugin-launcher--plugin-path--plugin-startup-dialog--power-stub--ppapi--ppapi-broker--ppapi-flash-args--ppapi-flash-path--ppapi-flash-version--ppapi-in-process--ppapi-plugin-launcher--ppapi-startup-dialog--precache-config-settings-url--precache-manifest-url-prefix--predictable-app-filenames--prefetch-search-results[8]--prerender--prerender-from-omnibox--previous-app--primary--privet-ipv6-only--process-per-site--process-per-tab--product-version--profile-directory--profiler-timing--profiling-at-start--profiling-file--profiling-flush--progress-bar-animation[8]--promo-server-url--prompt-for-external-extensions[24]--proxy-auto-detect--proxy-bypass-list--proxy-pac-url--proxy-server--quic-connection-options--quic-max-packet-length--quic-version--rdp_desktop_session--reader-mode-feedback--reader-mode-heuristics--rebaseline-pixel-tests[2]--reduce-security-for-testing--reduced-referrer-granularity--register-font-files--register-pepper-plugins--relaunch-shortcut[6]--relauncher[5]--remote-debugging-port--remote-debugging-socket-name[8]--remote-debugging-targets--renderer--renderer-cmd-prefix--renderer-process-limit--renderer-startup-dialog--renderer-wait-for-java-debugger[8]--require-audio-hardware-for-testing--requirements--reset-app-list-install-state--reset-variation-state--restore-last-session--restrict-iframe-permissions--root-layer-scrolls--run-layout-test--safebrowsing-disable-auto-update--safebrowsing-disable-download-protection--safebrowsing-disable-extension-blacklist--safebrowsing-manual-download-blacklist--SafeSites--sandbox-ipc--save-page-as-mhtml--scripts-require-action--scroll-end-effect--secondary--service--service-name--shill-stub--show-app-list--show-autofill-type-predictions--show-component-extension-options--show-composited-layer-borders--show-fps-counter--show-icons[6]--show-layer-animation-bounds--show-mac-overlay-borders[10]--show-paint-rects--show-property-changed-rects--show-replica-screenspace-rects--show-saved-copy--show-screenspace-rects--show-surface-damage-rects--silent-debugger-extension-api--silent-launch--simulate-critical-update--simulate-elevated-recovery--simulate-outdated--simulate-outdated-no-au--simulate-printing-errors--simulate-upgrade--single-process--site-per-process--skip-gpu-data-loading--slow--slow-connections-only--slow-down-raster-scale-factor--smart-virtual-keyboard--sms-test-messages--spdy-proxy-auth-fallback--spdy-proxy-auth-origin--spdy-proxy-auth-value--spdy-proxy-dev-auth-origin--speculative-resource-prefetching--spelling-service-feedback-interval-seconds[11]--spelling-service-feedback-url[11]--ssl-key-log-file--ssl-version-fallback-min--ssl-version-max--ssl-version-min--stable-release-mode--start--start-fullscreen--start-maximized--state-path--stop--strict-layer-property-change-checking--stub-cros-settings--supervised-user-safesites--supports-dual-gpus--swiftshader--swiftshader-path--sync-allow-insecure-xmpp-connection--sync-deferred-startup-timeout-seconds--sync-disable-deferred-startup--sync-enable-get-update-avoidance--sync-notification-host-port--sync-short-initial-retry-override--sync-url--system-developer-mode--system-log-upload-frequency--tab-capture-downscale-quality--tab-capture-upscale-quality--test-auto-update-ui--test-child-process--test-gl-lib--test-name--test-type--testing-fixed-http-port--testing-fixed-https-port--tls1--tls1.1--tls1.2--top-chrome-md[1]--top-controls-hide-threshold--top-controls-show-threshold--touch-calibration[25]--touch-devices[26]--touch-events--touch-noise-filtering[25]--touch-selection-strategy--trace-config-file--trace-export-events-to-etw[6]--trace-shutdown--trace-shutdown-file--trace-startup--trace-startup-duration--trace-startup-file--trace-to-console--trace-to-file--trace-to-file-name--trace-upload-url--translate-script-url--translate-security-origin--trusted-spdy-proxy--try-chrome-again--try-supported-channel-layouts[6]--ttl--type--ui-disable-partial-swap--ui-enable-compositor-animation-timelines--ui-enable-rgba-4444-textures--ui-enable-zero-copy--ui-prioritize-in-gpu-process--ui-show-fps-counter--ui-show-layer-animation-bounds--ui-show-layer-borders--ui-show-paint-rects--ui-show-property-changed-rects--ui-show-replica-screenspace-rects--ui-show-screenspace-rects--ui-show-surface-damage-rects--unicast-respond--uninstall--unlimited-storage--unsafely-treat-insecure-origin-as-secure--url-mappings--use-android-midi-api[8]--use-angle--use-cras[27]--use-fake-device-for-media-stream--use-fake-ui-for-media-stream--use-file-for-fake-audio-capture--use-file-for-fake-video-capture--use-gl--use-gpu-in-tests--use-gpu-memory-buffers-for-capture--use-mobile-user-agent--use-mock-keychain[5]--use-normal-priority-for-tile-task-worker-threads--use-simple-cache-backend--use-spdy--use-surfaces--use-temporary-user-data-dir--use-updater--user-agent--user-data-dir--utility--utility-allowed-dir--utility-cmd-prefix--utility-enable-mdns--utility-run-elevated--v--v8-cache-options--v8-natives-passed-by-fd--v8-pac-mojo-in-process--v8-pac-mojo-out-of-process--v8-snapshot-passed-by-fd--validate-crx--validate-input-event-stream--variations-server-url--version--video-image-texture-target--video-threads--video-underflow-threshold-ms--viewer-launch-via-appid[6]--vmodule--wait-for-debugger--wait-for-debugger-children--wait-for-mutex[6]--wake-on-wifi-packet--wallet-secure-service-url--wallet-service-url--wallet-service-use-sandbox--warp--waveout-buffers[6]--webrtc-stun-probe-trial[13]--webview-sandboxed-renderer--whitelisted-extension-id--win-jumplist-action--window-position--window-size--windows8-search[6]--winhttp-proxy-resolver--wm-window-animations-disabled--zygote--[1]--0--?

Install

yarn add -D vite-plugin-markdown @babel/preset-react @babel/preset-typescript @babel/env babel-plugin-module-resolver

Setup babel config

create .babelrc.js

const presets = ['@babel/env', '@babel/react', '@babel/preset-typescript'];const plugins = [  [    require.resolve('babel-plugin-module-resolver'),    {      root: [__dirname, './src'],      extensions: ['.jsx', '.js', '.ts', '.tsx', '.json']    }  ]];module.exports.config = { cacheDirectory: './tmp/babel', presets, plugins };/** * * @param {import('@babel/core').ConfigAPI} api * @returns {import('@babel/core').TransformOptions} */module.exports = function (api) {  api.cache(true);  return { presets, plugins };};

Vite configuration

Configure Vite to handle TypeScript and ESM: Ensure your vite.config.ts (or vite.config.js if you're using JavaScript) is set up to handle TypeScript and ESM.

import * as mdp from 'vite-plugin-markdown';const { plugin: mdPlugin, Mode } = mdp;const config = {  plugins: [mdPlugin({ mode: [Mode.HTML, Mode.MARKDOWN, Mode.TOC, Mode.REACT] })], // you can change react to Mode.VUE}export default defineConfig(config);

Here my full working vite.config.ts for reference

import react from '@vitejs/plugin-react';import dotenv from 'dotenv';import { createRequire } from 'node:module';import path from 'upath';import { UserConfig, defineConfig } from 'vite';import * as mdp from 'vite-plugin-markdown';const { plugin: mdPlugin, Mode } = mdp;dotenv.config({ override: true });const require = createRequire(import.meta.url);const config: UserConfig = {  plugins: [react(), mdPlugin({ mode: [Mode.HTML, Mode.MARKDOWN, Mode.TOC, Mode.REACT] })],  server: {    port: 4000  },  resolve: {    alias: {      '*': path.resolve('.'),      '@utils': path.resolve('./src/utils'),      '@components': path.resolve('./src/components'),      '@routes': path.resolve('./src/routes'),      '@assets': path.resolve('./src/assets'),      '@src': path.resolve('./src'),      '@root': path.resolve('./'),      '@post': path.resolve('./src/posts'),      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),      'react/jsx-runtime': require.resolve('react/jsx-runtime')    }  }};export default defineConfig(config);

Conclusion

all done. you can refer to this repository to view examples usage to render markdown

In the Android Activity lifecycle, onCreate() is triggered before onStart(). Here's a brief overview of the sequence of method calls when an Activity is created:

1. onCreate(): This method is called when the activity is first created. It is where you typically perform one-time initialization such as setting up the user interface, binding data to lists, or initializing variables.

2. onStart(): This method is called after onCreate() (if the activity is being started for the first time) or when the activity is being brought back to the foreground from a stopped state. It is where the activity becomes visible to the user, but it may not yet be in the foreground and interactive.

So, onCreate() is always triggered before onStart() in the Android Activity lifecycle.

Basic ifecycle of android activity

Here's the basic lifecycle of an Android Activity:

1. onCreate(): This method is called when the activity is first created. Here, you typically perform initialization of the activity, such as setting up the user interface with setContentView() and initializing variables.

2. onStart(): This method is called when the activity becomes visible to the user. It prepares the activity to enter the foreground and become interactive.

3. onResume(): This method is called when the activity is about to start interacting with the user. It signals that the activity is now in the foreground and ready to receive user input.

4. onPause(): This method is called when the activity is going into the background but is still partially visible to the user. It indicates that the activity is no longer in the foreground and may be paused or stopped.

5. onStop(): This method is called when the activity is no longer visible to the user. It typically happens when the activity is being covered by another activity or when the user navigates away from it.

6. onDestroy(): This method is called when the activity is being destroyed. It is the final callback that the activity receives before it is removed from memory. Here, you release any resources or unregister any listeners that were associated with the activity.

Additionally, there are two other methods that are important for handling configuration changes:

• onRestart(): This method is called when the activity is being restarted after being stopped. It is called after onStop() and before onStart().

• onSaveInstanceState() and onRestoreInstanceState(): These methods are called when the activity is being temporarily destroyed and recreated due to a configuration change (such as screen rotation). They allow you to save and restore the state of your activity's UI and data.

Understanding these lifecycle methods is crucial for properly managing the state and behavior of your Android activities.

Graph of android lifecycle

here's a graphical representation of the Android Activity lifecycle:

       +-------------------+       |                   |       |      onCreate()   |       |                   |       +---------+---------+                 |                 v       +-------------------+       |                   |       |      onStart()    |       |                   |       +---------+---------+                 |                 v       +-------------------+       |                   |       |      onResume()   |       |                   |       +---------+---------+                 |                 v+-------------------------+|                         || User interacts with the ||       Activity          ||                         |+------------+------------+             |             v       +-------------------+       |                   |       |      onPause()    |       |                   |       +---------+---------+                 |                 v       +-------------------+       |                   |       |      onStop()     |       |                   |       +---------+---------+                 |                 v       +-------------------+       |                   |       |      onDestroy()  |       |                   |       +-------------------+

is I can extends superclass activity which superclass extends AppCompatActivity?

Yes, you can certainly extend a superclass that extends AppCompatActivity in your Android application. In fact, it's a common practice to create a custom base activity that extends AppCompatActivity and then have your other activities in the application extend this custom base activity.

For example, you might create a custom base activity like this:

java

import androidx.appcompat.app.AppCompatActivity;public class MyBaseActivity extends AppCompatActivity {    // Common functionality or configurations can be implemented here}

And then your other activities can extend this base activity:

java

public class MyActivity extends MyBaseActivity {    // Your activity-specific code goes here}

This approach allows you to centralize common functionality or configurations in one place, making it easier to maintain and manage your activities.

requires:

[versions]webkit = "1.10.0"okhttp = "4.12.0"[libraries]webkit = { module = "androidx.webkit:webkit", version.ref = "webkit" }okhttp = { module = "com.squareup.okhttp3:okhttp-bom", version.ref = "okhttp" }okhttp-lib = { module = "com.squareup.okhttp3:okhttp" }

implementation libs.webkitimplementation platform(libs.okhttp)implementation libs.okhttp.lib

create WebkitCookieManager.kt

import android.content.Contextimport android.webkit.WebViewimport okhttp3.Cookieimport okhttp3.CookieJarimport okhttp3.HttpUrlimport java.net.CookieHandlerimport java.net.CookiePolicyimport java.net.HttpCookie/** * android webkit webview cookie manager. * [FULL USAGES](https://dimaslanjaka.github.io/2024/03/okhttp-cookie-handling-on-android.html) * * @author Dimas Lanjaka <a href="https://www.webmanajemen.com">https://www.webmanajemen.com</a> */open class WebkitCookieManager : CookieJar {    /**     * support for below android 10     */    private var webkitCookieManager: android.webkit.CookieManager? = null    /**     * support for jvm or android 10+     */    private var javaCookieManager: java.net.CookieManager? = null    /**     * support for webview intercept connection cookie handling     */    private var webview: WebView? = null    /**     * the android context for clearing cookies on non-webview instance     */    private var context: Context? = null    /**     * for non-persistent cookies     */    private val cookieStore = mutableMapOf<HttpUrl, List<Cookie>>()    /**     * construct android cookie manager without webview     */    constructor(manager: android.webkit.CookieManager, ctx: Context? = null) {        webkitCookieManager = manager        setupAndroidCookieManager()        this.context = ctx    }    /**     * construct android cookie manager with webview     */    constructor(manager: android.webkit.CookieManager, webView: WebView, ctx: Context? = null) {        webkitCookieManager = manager        setupAndroidCookieManager(webView)        this.webview = webView        this.context = ctx    }    /**     * construct non-persistent cookie manager     */    constructor(ctx: Context? = null) {        this.context = ctx    }    /**     * construct java cookie manager     */    constructor(manager: java.net.CookieManager, ctx: Context? = null) {        manager.setCookiePolicy(CookiePolicy.ACCEPT_ALL)        javaCookieManager = manager        CookieHandler.setDefault(javaCookieManager)        this.context = ctx    }    /**     * make android webkit cookie manager accept third-party cookies     */    private fun setupAndroidCookieManager(webView: WebView? = null) {        webkitCookieManager?.setAcceptCookie(true);        if (webView != null) webkitCookieManager?.setAcceptThirdPartyCookies(webView, true);    }    /**     * save cookies after request finished     */    override fun saveFromResponse(url: HttpUrl, cookies: List<Cookie>) {        cookies.forEach { cookie ->            webkitCookieManager?.setCookie(url.toString(), cookie.toString())            javaCookieManager?.cookieStore?.add(url.toUri(), HttpCookie.parse(cookie.toString())[0])        }        cookieStore.put(url, cookies);    }    /**     * load cookies before okhttp execute request {@link okhttp3.OkHttpClient#newCall(request)}     */    override fun loadForRequest(url: HttpUrl): List<Cookie> {        return if (webkitCookieManager != null) {            // get from android webkit cookie manager            when (val cookies = webkitCookieManager?.getCookie(url.toString())) {                null -> emptyList()                else -> cookies.split("; ").mapNotNull { Cookie.parse(url, it) }            }        } else if (javaCookieManager != null) {            // get from java cookie manager            when (val cookies = javaCookieManager?.cookieStore?.cookies) {                null -> emptyList()                else -> cookies.toString().split("; ").mapNotNull { Cookie.parse(url, it) }            }        } else {            // get from non-persisten cookie store            val cookies = cookieStore[url]            return cookies ?: ArrayList()        }    }    /**     * clear all stored cookies everywhere     */    fun clearCookies() {        // remove non-persistent stored cookies        cookieStore.clear()        // initialize android webkit cookie manager on null        if (webkitCookieManager == null) {            webkitCookieManager = android.webkit.CookieManager.getInstance()            setupAndroidCookieManager()        }        // indicator when webview not initialized        var standaloneWebview = false        // initalize fake webview instance        if (webview == null && context != null) {            // declare standalone webview            webview = WebView(context!!)            // treat as standalone webview            standaloneWebview = true        }        // remove all stored cookies from android webkit cookie manager        webkitCookieManager?.removeAllCookies(null)        webkitCookieManager?.flush()        webkitCookieManager?.removeSessionCookies(null);        // clear all caches from webview        webview?.clearCache(true)        webview?.clearHistory()        webview?.clearFormData();        webview?.clearSslPreferences();        if (standaloneWebview) {            // destroy standalone webview            webview?.destroy()            webview = null        }        // initialize java cookie manager        if (javaCookieManager == null) {            javaCookieManager = java.net.CookieManager(null, CookiePolicy.ACCEPT_ALL)            java.net.CookieHandler.setDefault(javaCookieManager)        }        // remove all stored cookies from java cookie manager        javaCookieManager?.cookieStore?.removeAll()    }}

my usage within view binding webview + custom webviewclient intercept using okhttp

val clientBuilder = OkHttpClient.Builder()clientBuilder.cookieJar(WebkitCookieManager(CookieManager.getInstance(), binding!!webview, applicationContext))

![declaration of okhttp][okhttp-cookie-handling-on-android/1AcJt.png]

![on intercept section create connection][okhttp-cookie-handling-on-android/EgV2P.png]

this work and tested, when i clear cookies the value of cookies on website changed, otherwise all same until expiration date of cookie.

the format markdown like

**2024-03-07 18:41:29**- 39d989ee chore: round double value**2024-03-07 18:38:32**- 0586bd98 chore: improve performance

above script also works with multiline commits, looks like below:

**2024-03-07 18:37:53**- 064c3b79 chore: update preparation activity UI  improve performance stability

1. Locate the studio.vmoptions file:

   • On Windows, it is usually located in the bin directory of the Android Studio installation directory. For example, C:\Program Files\Android\Android Studio\bin\studio64.exe.vmoptions.
   • On macOS, it is often found in the Contents/bin directory within the application bundle. For example, /Applications/Android Studio.app/Contents/bin/studio.vmoptions.
   • On Linux, it is also typically in the bin directory of the installation. For example, /opt/android-studio/bin/studio64.vmoptions.

2. Open the studio.vmoptions file in a text editor: Use a text editor like Notepad (on Windows), TextEdit (on macOS), or any code editor of your choice.

3. Modify the memory settings: Add or modify the following lines to set the maximum heap size (Xmx) and the initial heap size (Xms). Adjust the values according to your system's available memory.

-Xms256m-Xmx2048m

Example values are used above (-Xms256m for the initial heap size and -Xmx2048m for the maximum heap size). You can increase or decrease these values based on your system's configuration.

2. Save the changes and restart Android Studio: Save the modifications to the studio.vmoptions file and restart Android Studio for the changes to take effect.

Keep in mind that setting the maximum heap size too high might cause issues if your system doesn't have enough available memory. Adjust the values based on your system's specifications to achieve optimal performance.

Enable automatic memory heap resizing

To add garbage collection options and parallelism while limiting the maximum heap size to 1GB in Android Studio, you can modify the studio.vmoptions file. Here's an example configuration:

Android Studio

# custom Android Studio VM options# Set the maximum heap size to 1GB-Xmx1g# Set the initial heap size-Xms256m# Enable parallel garbage collection-XX:+UseParallelGC# Enable concurrent garbage collection (for parallel)-XX:+UseConcMarkSweepGC# Set the size of the young generation (you may adjust this based on your needs)-XX:NewSize=512m-XX:MaxNewSize=512m# Enable automatic heap resizing-XX:+UseAdaptiveSizePolicy

Intellij IDEA (Community or Ultimate)

# Use the server JVM, optimized for long-running applications with more aggressive optimizations.-server # Aim to keep GC pause times under 200ms. This affects how the JVM manages memory.-XX:MaxGCPauseMillis=200# Trigger garbage collection when 45% of the heap is occupied. Helps manage memory pressure.-XX:InitiatingHeapOccupancyPercent=45# Set the ratio of the Eden space (young generation) to the survivor space.# A ratio of 8 means the Eden space is 8 times larger than a survivor space.-XX:SurvivorRatio=8# Allow flushing of compiled code from the code cache to prevent it from running out of memory.-XX:+UseCodeCacheFlushing# Reserve 128MB for the code cache, which stores JIT-compiled code.-XX:ReservedCodeCacheSize=128m# Enable assertions during runtime for debugging purposes.-ea# Disable caching of canonicalized file path strings. # This is often useful when working with networked or temporary file systems.-Dsun.io.useCanonCaches=false# ===================# Custom Android Studio VM options# ===================# Set the maximum heap size for the JVM to 1GB. Controls the upper limit of memory usage.-Xmx1g# Set the initial heap size to 256MB. This is the starting memory allocation.-Xms256m# Enable parallel garbage collection to improve throughput by using multiple threads.-XX:+UseParallelGC# Enable the concurrent garbage collector, which works alongside the application# (used in conjunction with parallel GC for balanced performance).-XX:+UseConcMarkSweepGC# Set the initial size of the young generation (Eden + survivor spaces) to 512MB.-XX:NewSize=512m# Set the maximum size of the young generation to 512MB.-XX:MaxNewSize=512m# Enable adaptive resizing of heap spaces to improve performance dynamically based on application behavior.-XX:+UseAdaptiveSizePolicy

In this configuration:

• -XX:+UseParallelGC enables the parallel garbage collector.
• -XX:+UseConcMarkSweepGC enables concurrent garbage collection, which works in conjunction with parallel garbage collection.
• -XX:NewSize and -XX:MaxNewSize set the size of the young generation, which is part of the heap where new objects are created. Adjust these values based on your requirements.
• -XX:+UseAdaptiveSizePolicy enables automatic heap resizing based on the application's behavior.

Feel free to adjust these settings based on your system's specifications and the specific needs of your Android Studio projects. Keep in mind that tuning garbage collection settings can be a trial-and-error process, so monitor the performance and adjust as needed. Save the changes, restart Android Studio, and observe the impact on performance.

Screen density refers to the resources used in your Android app and affects how your app runs on different devices with different screen densities.

This is not configured at build time.

To clarify, when you set screen density in the 'build.gradle' file, you typically specify different versions of the drawable resource for different screen densities.

For example:

gradle

android {    // ...    splits {        density {            enable true            exclude "ldpi", "xxxhdpi"            compatibleScreens 'small', 'normal', 'large', 'xlarge'        }    }}

This configuration is more about generating APKs with different drawables for different screen densities and is not directly related to build times.

To improve your Android project build time, you may want to consider other strategies such as:

1. Caching: Utilize Gradle's built-in caching mechanisms to avoid redundant work in subsequent builds.

2. Parallel Builds: Configure Gradle to perform parallel builds, allowing it to build multiple modules concurrently.

3. Incremental Builds: Enable incremental builds to only rebuild the parts of the project that have changed.

4. Dependency Analysis: Use tools like the Gradle build scans or build dashboard to analyze dependencies and understand which dependencies are impacting build times.

5. Profile Your Build: Use tools like the Gradle profiler or Android Studio's built-in profiler to identify bottlenecks in your build process.

Remember that screen density configurations are important for the runtime behavior of your app on different devices, but they aren't the primary factor influencing build times.