DOCSEARCHbyAlgolia
Submit Docs

zhaobc.site Learning Notes

website·Indexed 31 days ago

https://www.zhaobc.site/

A collection of personal technical learning notes covering backend and frontend development. Content includes Java (DBUnit, Mockito), Python (100 Days from Beginner to Master, official tutorial), Spring, JavaScript (including Bosn's course notes), TypeScript (Handbook, Narrowing, Types), and Vue (Vue2, Pinia).

Tokens
68.1K
Snippets
394
Records
465
Agent score
56%

What's inside zhaobc.site

  1. Overview of Vue Reactivity Transform

    Reactivity Transform is an experimental compile-time transformation that allows developers to write reactive code without manually accessing .value. It uses macro functions (prefixed with $) as markers for the Vue compiler to treat variables as reactive. This feature is disabled by default and requires explicit opt-in.

  2. Overview of Pinia state management

    Pinia is a store library for Vue that allows state to be shared across components and pages. It is compatible with both Vue 2 and Vue 3, supports Server-Side Rendering (SSR), TypeScript, Hot Module Replacement (HMR), and plugins. It can be used with either the Composition API or the Options API.

  3. Overview of Gitlab Contributors Plugin for vuepress-theme-hope

    The Gitlab Contributors plugin is designed for vuepress-theme-hope projects hosted on Gitlab. It allows developers to display contributor avatars for an entire project or for specific pages.

    Key capabilities include:

    • Fetching and displaying all project contributors based on the Gitlab Project ID.
    • Fetching and displaying contributors for the current page by matching Git emails with Gitlab users.
    • Support for multi-language localization.
    • Handling of private repositories via PRIVATE_ACCESS_TOKEN.

  4. Overview of Oh My Posh for shell customization

    Oh My Posh is an open-source, cross-platform prompt theme engine that allows users to customize their command-line interface (CLI) prompts. While macOS users often use oh-my-zsh, Oh My Posh is highly recommended for Windows users, specifically when paired with Windows Terminal and PowerShell.

  5. Understand and implement Vue 3 Composables

    A 'Composable' is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic. Unlike stateless utility functions, composables manage state that changes over time. They allow developers to build complex logic by combining smaller, independent units of functionality. Composables can also be nested, where one composable calls another.

  6. Understand JavaScript expression types

    JavaScript expressions are categorized into several types:

    • Primitive Expressions: Constants, literals, keywords, and variables. These can be combined into composite expressions (e.g., 10 * 20).
    • Initialization Expressions: Shorthand for creating arrays and objects. For example, [1, 2] is equivalent to new Array(1, 2), and {x: 1, y: 2} is equivalent to creating a new Object and assigning properties.
    • Function Expressions: Assigning a function to a variable or using an Immediately Invoked Function Expression (IIFE).
    • Property Access Expressions: Accessing object properties via dot notation (o.x) or bracket notation (o['x']).
    • Call Expressions: Invoking a function (e.g., func()).
    • Object Creation Expressions: Using the new keyword (e.g., new Func(1, 2)).

  8. Get Docker system and object information

    Use docker info to display system-wide information about the Docker installation. Use docker inspect to retrieve low-level detailed information on specific Docker objects (such as containers or images) by providing their name or ID.
    docker info
docker inspect [OPTIONS] NAME|ID [NAME|ID...]

  9. Understand JavaScript data types

    JavaScript categorizes data into two main groups: primitive types and object types.

    Primitive types include:

    • number
    • string
    • boolean
    • null
    • undefined

    Object types (composite types) include:

    • Function
    • Array
    • Date and other built-in objects.

  10. Understand declarative UI description in Vue.js 3

    Vue.js 3 allows developers to describe UI declaratively. This can be achieved using HTML-like templates or JavaScript objects. In templates, DOM elements, attributes, dynamic bindings (:, v-bind), and events (@, v-on) are described using a syntax consistent with HTML. Alternatively, a JavaScript object can represent the UI structure using tag, props, and children keys.
    // JavaScript object representation of UI
const title = {
  tag: 'h1',
  props: {
    onClick: handler,
  },
  children: [
    { tag: 'span' },
  ],
}

// Equivalent Vue template:
// <h1 @click="handler"><span></span></h1>

  11. Enable Vue SFC Playground in VuePress via mdEnhance

    The Playground v2 plugin allows you to embed interactive Vue Single File Component (SFC) examples in your VuePress Markdown files. It supports two modes: 'external' (via iframe) and 'internal' (via @vue/repl). Note: This functionality is now built into the vuepress-theme-hope theme.

  12. Compare Pinia with Vuex 3.x/4.x

    Pinia simplifies state management compared to Vuex by removing several layers of ceremony. Key differences include:

    • No Mutations: State can be mutated directly in actions or components.
    • Flat Architecture: No nested modules or namespaced modules; stores are flat and inherently namespaced by their ID.
    • Dynamic by Default: No need to dynamically add stores.
    • Better Type Support: Built-in TypeScript support and type inference without magic strings.