DOCSEARCHbyAlgolia
Submit Docs

Mulinzi Knowledge Base

website·Indexed 31 days ago

https://www.mulinzi.cn

A technical knowledge base covering frontend development, including Vue 3, Vite, VitePress, TypeScript, JavaScript (ES6+), CSS, and general tools like VS Code, Git, and GitHub Workflows. It includes practical guides on HTML attributes vs DOM properties, Intersection Observer, and specific implementation tips for web fonts and error monitoring.

Tokens
26.6K
Snippets
142
Records
173
Agent score
49%

What's inside Mulinzi

  1. Overview of MutationObserver

    The MutationObserver API is used to monitor changes to the DOM. Unlike standard DOM events which trigger immediately for every single change (potentially causing browser lag), MutationObserver is asynchronous. It waits until all current DOM operations are complete and all script tasks have finished before triggering a single callback containing an array of all changes that occurred.

  2. Access module metadata using import.meta

    import.meta is a meta-property available within ECMAScript Modules (ESM) that provides metadata about the current module. The available properties vary depending on the runtime environment.
    // Example of import.meta content in Node.js
{
  dirname: 'E:\\code\\**\\node_modules\\.vite-temp',
  filename: 'E:\\code\\**\\node_modules\\.vite-temp\\vite.config.ts.timestamp-1748489784747-2ed1685b2947d.mjs',
  resolve: [Function: resolve],
  url: 'file:///E:/code/**/node_modules/.vite-temp/vite.config.ts.timestamp-1748489784747-2ed1685b2947d.mjs'
}

// Example of import.meta content in a Browser
{
  url: "http://localhost:5173/src/components/HelloWorld.vue?t=1748489867702",
  resolve: [Function: resolve],
}

  3. Understand the difference between HTML attributes and DOM properties

    HTML attributes are defined in the HTML source code (e.g., <input id="name" value="qwerty" />). When a browser parses this, it creates a DOM object (e.g., HTMLInputElement). While standard HTML attributes are mapped to DOM properties, they are not identical:

    • DOM Properties: Regular JavaScript object properties. You can add custom properties to a DOM object (e.g., el.foo = 'bar'), but these do not appear in the HTML source.
    • HTML Attributes: Defined in the markup. Non-standard attributes (e.g., <input foo="bar" />) exist in the HTML but are not automatically mapped to DOM properties; accessing them via el.foo will return undefined.

  4. Create VNodes using the h() function

    The h() function (short for hyperscript) is used to create virtual nodes (VNodes) in Vue. It allows for flexible definition of HTML attributes and DOM properties. Both attributes and properties can be written within the props object, and Vue automatically assigns them to the correct location. If no props are needed, the argument can be omitted.
    // Basic usage: h(tag, props, children)
h('div', { id: 'foo' }, 'Hello World')

  5. Sync VS Code settings using Shan.code-settings-sync

    The Shan.code-settings-sync extension allows for synchronizing settings across different editors (e.g., VS Code and Cursor). It is recommended to ignore the History, globalStorage, and profiles folders in the Advanced Options to avoid syncing unnecessary data.
    Shift + Alt + U: Upload configuration
Shift + Alt + D: Download configuration

  6. Schedule low-priority tasks using requestIdleCallback

    The window.requestIdleCallback() method allows developers to execute background and low-priority tasks when the browser is idle. This ensures that non-urgent work does not interfere with critical events such as animations or input responsiveness. The callback function receives an IdleDeadline object, which provides information about the remaining idle time and whether the callback was executed after a timeout.
    window.requestIdleCallback(callback, options);

  7. Understand short-circuiting behavior of the Nullish Coalescing Operator

    The ?? operator employs short-circuit evaluation. If the left-hand expression evaluates to a value that is not null or undefined, the right-hand expression is not evaluated at all.
    function A() { console.log('A called'); return undefined; }
function B() { console.log('B called'); return false; }
function C() { console.log('C called'); return "foo"; }

console.log( A() ?? C() ); 
// Logs: "A called", "C called", "foo"
// A() returned undefined, so C() is executed.

console.log( B() ?? C() ); 
// Logs: "B called", "false"
// B() returned false (not null/undefined), so C() is NOT executed.

  8. Apply for a Hong Kong Identity Card/Return Permit (回港证)

    The Return Permit is required for returning to Hong Kong. It can be obtained on the same day at the counter next to the birth certificate office without an appointment.

    Requirements:

    • Completed application form ID(C)73A (for children under 16).
    • One recent photo: Frontal view, no hat, light background, size between 50x40mm and 55x45mm.
    • A certifying signatory (副署人) must be present with their ID and signature. Use form ID641 and provide a copy of the signatory's ID.
    • Fee: 170 HKD.

  9. Apply media queries in @import, HTML, and JavaScript

    Media queries can be used outside of standard CSS blocks to conditionally load styles or change behavior in JS.

    • @import: Load a stylesheet only if the media query matches.
    • HTML <link>: Use the media attribute to conditionally apply stylesheets.
    • HTML <picture>: Use the media attribute on <source> to serve different images.
    • JavaScript matchMedia(): Use this API to detect media query matches in code. Warning: If the query contains a colon (like max-width: 480px), it must be wrapped in parentheses, or it will be invalid.
    /* CSS @import */
@import 'landscape.css' screen and (orientation: landscape);
    <!-- HTML Link and Style -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">
<style media='print'></style>

<!-- HTML Picture -->
<picture>
  <source srcset="rect.png" media="(min-width: 480px)">
  <img src="square.png">
</picture>
    // JavaScript matchMedia
if (matchMedia('(max-width: 480px)').matches) {
  // execute logic
}

  10. Safely call functions using optional chaining

    You can use ?.() to call a function only if it exists. This replaces the need for an explicit if check before invoking a potentially undefined callback or method. Note: If the property exists but is not a function, a TypeError (e.g., 'x.y is not a function') will still be thrown.
    // Instead of: if (onError) { onError(err.message); }
onError?.(err.message);

  11. Break out of nested loops using labeled statements in JavaScript

    In JavaScript, a standard break statement only exits the innermost loop. To break out of multiple nested loops (e.g., a double loop) simultaneously, use a labeled statement. By assigning a label (e.g., outerLoop:) to the outer loop, you can call break outerLoop from within the inner loop to terminate both iterations immediately.
    // Example: Breaking both loops using a label
outerLoop: for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    if (i === 2 && j === 2) {
      break outerLoop; // Terminates both the inner and outer loop
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}

  12. Apply !important to Tailwind CSS utility classes

    Tailwind CSS provides two ways to apply !important to styles:

    1. Per-class basis: Append a ! to the end of a utility class name to make that specific property important.
    2. Global basis: Use the important flag in the @import statement to ensure all generated utility classes have the !important suffix.
    <!-- Per-class important -->
<div class="bg-teal-500 bg-red-500!">
  <!-- ... -->
</div>
    /* Global important for all utility classes */
@import 'tailwindcss' important;