DOCSEARCHbyAlgolia
Submit Docs

Weisite Blog and Notes

website·Indexed 30 days ago

https://blog.weisite.xyz

A personal technical blog and knowledge base featuring tutorials and notes on Docusaurus, Vue.js, Vite, Pinia, Express, Firebase, and JavaScript. Includes a changelog for site configurations such as sidebars.js and docusaurus.config.js, as well as guides on deploying static sites and implementing ESLint Airbnb styles.

Tokens
64.8K
Snippets
399
Records
472
Agent score
49%

What's inside Weisite

  1. Overview of Express web framework for Node.js

    Express is a popular Node.js web framework that provides a minimal and flexible set of tools for building web applications. Its core capabilities include:

    • Routing: Defining different handlers for various HTTP methods and URL paths.
    • Template Rendering: Integrating rendering engines to inject data into templates for responses.
    • Application Configuration: Setting common web application parameters, such as the connection port and template locations.
    • Middleware: Adding custom processing layers into the request-response cycle to handle tasks like cookies, sessions, authentication, URL parameters, POST data, and security headers.

  2. Introduction to Pinia State Management

    Pinia is the officially recommended state management tool for Vue. It allows developers to create a centralized Store to hold application state, solving the complexity of passing data through multiple component layers using props and emits.

  3. Overview of the Node.js runtime environment

    Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to create server-side tools and applications. It enables JavaScript to run outside of a web browser (e.g., directly on a computer or server) by removing browser-specific APIs and adding support for traditional OS APIs, such as HTTP and file system libraries.

  4. Handle incorrect routes in Vue Router

    When a user enters an incorrect route in a Vue application, there are two primary strategies for handling the request: 1. Display a dedicated 404 error page to inform the user that the requested route does not exist. 2. Automatically redirect the user to a valid, correct page.

  5. Create and register a custom Vue component

    Create a component file in the src/components directory. When naming components, use PascalCase (starting with an uppercase letter) and avoid single-word names to comply with ESLint standards. To use the component in a view (e.g., About.vue), import the component file and register it within the components option of the Vue instance.
    <!-- src/components/CardExample.vue -->
<template>
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">{{ title }}</h5>
      <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
      <p class="card-text">Some quick example text...</p>
      <a href="#" class="card-link">Card link</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'this is card title'
    }
  }
}
</script>
    <!-- src/views/About.vue -->
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <CardExample></CardExample>
  </div>
</template>

<script>
import CardExample from '@/components/CardExample.vue'
export default {
  components: {
    CardExample
  }
}
</script>

  6. Create a basic JavaScript Proxy

    The Proxy constructor creates a proxy object that allows you to intercept and customize fundamental operations (like property lookup and assignment) on a target object.

    Syntax: const p = new Proxy(target, handler)

    • target: The object to be wrapped. Must be an object (including Arrays, Functions, or other Proxies). Passing a non-object will throw a TypeError.
    • handler: An object defining the traps (like get and set) that intercept operations on the proxy.
    const target = { a: 1 };
const handler = {};
const proxy = new Proxy(target, handler);

  7. Understand the Git HEAD pointer

    The HEAD is a pointer that indicates the current checkout location in the Git repository. By default, HEAD moves forward with the current branch (e.g., main) as new commits are added. You can move the HEAD to a specific historical state by checking out a specific commit hash (SHA-1), which reverts the working directory files to that version.
    # Find the SHA-1 hash of a commit
git log

# Move HEAD to that specific commit
git checkout <commit-hash>

  8. Initialize a Vite + Vue 3 + Vue Router project structure

    A standard project initialization for a Vue 3 application using Vite, Vue Router, and Pinia. The structure separates views (page-level components) from reusable components and centralizes routing and state management.
    .
├── index.html
├── package.json
├── vite.config.js
├── src
│   ├── main.js          # Entry point
│   ├── App.vue          # Root component
│   ├── router
│   │   └── index.js     # Route definitions
│   ├── stores
│   │   └── counter.js    # Pinia state stores
│   ├── views
│   │   ├── HomeView.vue # Page components
│   │   └── AboutView.vue
│   └── components
│       └── HelloWorld.vue # Reusable components
└── public
    └── favicon.ico

  9. Understand Vim operation modes and switching

    Vim operates in three primary modes:

    • normal: The default mode used for navigation and executing commands.
    • insert: Used for typing and inserting text.
    • visual: Used for selecting blocks of text for copying, pasting, or modification.

    To return to normal mode from any other mode, press esc or ctrl+[. Note: On Windows systems using phonetic input methods (like Zhuyin), ctrl+[ may not work; switch to a pure English input method first.

  10. Understand ES6 class syntax as syntactic sugar for prototypes

    The class syntax introduced in ES6 provides a cleaner way to define constructors and prototype chains compared to traditional function-based inheritance. However, it is important to note that JavaScript classes are still based on prototypes under the hood; they are syntactic sugar over the existing prototype-based inheritance model.

  11. Understand the concept of Separation of Concerns (SoC) in UI development

    Separation of Concerns is a design principle where a program is split into distinct sections, each addressing a separate concern. In frontend development, this means separating data processing logic from the UI rendering logic.

    Instead of manipulating the DOM directly to change content, developers focus on updating the underlying data state. Once the data is updated, the UI is re-rendered to reflect the current state. This makes the code more maintainable, allows data to be reused across different components, and simplifies complex operations like AJAX updates.

  12. Alternative Git visualization with VS Code Git Graph

    For developers using Visual Studio Code, the 'Git Graph' extension is a recommended alternative to standalone GUI software like Sourcetree for visualizing Git history and repository structure.