DOCSEARCHbyAlgolia
Submit Docs

WebNotebook Documentation

website·Indexed 30 days ago

https://jrothschild33.github.io/WebNotebook/

A comprehensive collection of web development notes covering frontend and backend technologies. Includes guides on HTML, CSS, JavaScript, TypeScript, Vue 2, Vue 3, React, Node.js, MongoDB, Axios, Webpack, Git, and Ajax.

Tokens
114K
Snippets
630
Records
696
Agent score
72%

What's inside WebNotebook

  1. Send HTTP requests using the general axios(config) method

    The axios(config) method is the most fundamental way to send any type of request. You provide a configuration object specifying the method, URL, and optional data.
    // GET Request
axios({
  method: 'GET',
  url: 'http://localhost:3000/posts/2',
}).then((response) => {
  console.log(response);
});

// POST Request
axios({
  method: 'POST',
  url: 'http://localhost:3000/posts',
  data: {
    title: 'New Post Title',
    author: 'Zhang San',
  },
}).then((response) => {
  console.log(response);
});

// PUT Request (Update)
axios({
  method: 'PUT',
  url: 'http://localhost:3000/posts/3',
  data: {
    title: 'Updated Title',
    author: 'Li Si',
  },
}).then((response) => {
  console.log(response);
});

// DELETE Request
axios({
  method: 'delete',
  url: 'http://localhost:3000/posts/3',
}).then((response) => {
  console.log(response);
});

  2. Send HTTP requests using the general axios(config) method

    The most fundamental way to send any type of request in Axios is by passing a configuration object to the axios() function. This object typically includes the method, url, and optional data for the request body.
    // GET Request
axios({
  method: 'GET',
  url: 'http://localhost:3000/posts/2',
}).then((response) => {
  console.log(response)
})

// POST Request
axios({
  method: 'POST',
  url: 'http://localhost:3000/posts',
  data: {
    title: 'Hello World',
    author: 'John Doe',
  },
}).then((response) => {
  console.log(response)
})

// PUT Request (Update)
axios({
  method: 'PUT',
  url: 'http://localhost:3000/posts/3',
  data: {
    title: 'Updated Title',
    author: 'Jane Doe',
  },
}).then((response) => {
  console.log(response)
})

// DELETE Request
axios({
  method: 'delete',
  url: 'http://localhost:3000/posts/3',
}).then((response) => {
  console.log(response)
})

  3. Use Type Assertions to specify more specific types

    Type assertions (as) tell the TypeScript compiler that you have more specific information about a value's type than the compiler can infer. Assertions are removed during compilation and do not perform runtime checks.

    If you need to convert between types that do not overlap (e.g., string to number), you must first cast the value to any or unknown.

    // Standard assertion
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

// Angle-bracket syntax (not for .tsx files)
const myCanvas2 = <HTMLCanvasElement>document.getElementById('main_canvas');

// Forced conversion via unknown/any
const x = ('hello' as unknown) as number;

  4. Understand Primitive vs Complex Data Types

    JavaScript distinguishes between simple (primitive) and complex (reference) types:

    • Simple Types: undefined, string, symbol, null, number, boolean. These are stored in the Stack as values.
    • Complex Types: Object, Array, Date. These are stored in the Heap. The variable in the stack holds a hexadecimal address (reference) pointing to the data in the heap. Consequently, passing a complex type to a function allows the function to modify the original object.
    function updateName(x) {
  x.name = 'Changed'; // Modifies the original object via reference
}

let p = { name: 'Original' };
updateName(p);
console.log(p.name); // 'Changed'

  5. Understand the HTTP Response structure

    An HTTP response consists of four main parts:

    1. Status Line: Contains the protocol version, status code, and a descriptive phrase (e.g., HTTP/1.1 200 OK).
    2. Response Headers: Metadata about the server and the response, formatted as key-value pairs.
    3. Empty Line: A blank line separating headers from the body.
    4. Response Body: The actual resource content returned by the server.

  6. Update transition and animation classes for Vue 3

    The naming convention for transition classes has changed in Vue 3 to be more explicit about the state.
    /* Vue 3 Syntax */
.v-enter-from, 
.v-leave-to {
  opacity: 0;
}
.v-leave-from, 
.v-enter-to {
  opacity: 1;
}

  7. Understand the Vue 2 MVVM Architecture

    Vue 2 follows the MVVM (Model-View-ViewModel) pattern:

    • Model: The data stored in the data object.
    • View: The template code and all properties on the Vue instance (vm) and Vue prototype, which can be used directly in templates.
    • ViewModel: The Vue instance itself, which acts as a bridge, ensuring all properties in data are accessible on the vm object.

  8. Understand Vue 2 Data Proxying via Object.defineProperty

    Vue 2 uses Object.defineProperty to implement data proxying. This allows the Vue instance (vm) to act as a proxy for the data object.

    Mechanism:

    1. Vue iterates through all properties in the data object.
    2. It uses Object.defineProperty to add these properties to the vm instance.
    3. It defines a getter and setter for each property on vm that internally reads or writes the corresponding value in the data object.

  9. Understand Vue 3 Reactivity using Proxy and Reflect

    Vue 3 implements reactivity using the JavaScript Proxy and Reflect APIs. Unlike Vue 2's Object.defineProperty, which requires defining each property individually, Proxy allows Vue to intercept operations on an entire object, including reading, writing, adding new properties, and deleting properties.
    const person = { name: 'Zhang San', age: 18 };

const p = new Proxy(person, {
  // Intercept property access
  get(target, propName) {
    console.log(`Reading property: ${propName}`);
    return Reflect.get(target, propName);
  },
  // Intercept property modification or addition
  set(target, propName, value) {
    console.log(`Modifying property: ${propName}. Updating UI...`);
    return Reflect.set(target, propName, value);
  },
  // Intercept property deletion
  deleteProperty(target, propName) {
    console.log(`Deleting property: ${propName}. Updating UI...`);
    return Reflect.deleteProperty(target, propName);
  },
});

  10. Git core concepts and architecture

    Git is a Distributed Version Control System (DVCS) that records snapshots of files rather than differences (deltas). This allows for faster version switching. It operates across three main areas: the Working Directory (where you edit), the Staging Area (where you prepare commits), and the Git Repository (where history is stored).

  12. Understand the Vue 2 MVVM Model

    Vue 2 follows the MVVM architectural pattern:

    • Model (M): The data defined in the data object.
    • View (V): The template code. All properties on the Vue instance (vm) and the Vue prototype are directly accessible in the template.
    • ViewModel (VM): The Vue instance itself. It acts as the bridge, ensuring all properties in data are available on the vm object.