DOCSEARCHbyAlgolia
Submit Docs

Virzn Frontend Development and Interview Guide

website·Indexed 29 days ago

https://virzn.github.io

A comprehensive collection of frontend development notes and interview preparation materials. It covers core JavaScript (OOP, execution contexts), HTML5, and CSS (Box Model, Flexbox). It includes detailed guides on React (Hooks like useState, useMemo, useCallback, and project optimization), Vue 2 and Vue 3 (reactivity, Vue Router, Vue CLI), and Node.js backend development with Express, MySQL, and MongoDB.

Tokens
103.8K
Snippets
457
Records
651
Agent score
75%

What's inside Virzn Frontend Notes

  1. Overview of Less CSS Pre-processor

    Less (Leaner Style Sheets) is a dynamic style language that extends CSS with variables, mixins, and functions to make styles more maintainable and extensible. It can run on the client side or on the server via Node.js. Recommended compilation tools include Koala and the Easy LESS extension for VS Code.

  2. Overview of Vuex State Management

    Vuex is a plugin for Vue.js designed to implement centralized state (data) management. It allows multiple components to share and manage state from a single source of truth, serving as a communication mechanism between any components in an application. It is recommended when multiple components depend on the same state or when behaviors from different components need to change the same state.

  3. Understand the relationship between JavaScript and ECMAScript

    ECMAScript (specifically the ECMA-262 standard) is the international standard that defines the syntax, types, statements, keywords, reserved words, operators, and global object specifications for the language. JavaScript is a concrete implementation of this standard. In a web browser environment, JavaScript consists of three primary components: the ECMAScript core language, the Document Object Model (DOM), and the Browser Object Model (BOM).

  4. Manage complex state with useReducer

    Use useReducer when state update logic becomes complex or when multiple states need to be updated simultaneously. It decouples state modification logic from the component, making the code more predictable and clear by separating the 'behavior' (triggered by the component) from the 'state update' (handled by the reducer).

  5. Understand the benefits of Server-Side Rendering (SSR)

    Server-Side Rendering (SSR) improves performance and user experience through several mechanisms:

    1. First Paint Performance: Browsers render complete HTML immediately without waiting for all JavaScript to download and execute.
    2. Reduced White Screen Time: Decreases Time to First Byte (TTFB) as content is pre-rendered on the server.
    3. SEO Optimization: Search engine crawlers can easily process full HTML pages, increasing visibility.
    4. Reduced Client Load: Shifts rendering burden from the client device to the server, benefiting low-end hardware.
    5. Network Efficiency: Better utilization of CDN caching for static page content.
    6. Code Splitting: Often combined with lazy loading to ensure only necessary code for the current page is executed.

  6. Understand Prototypes and Prototype Chains

    In JavaScript, every object has an associated prototype object containing properties and methods. This is accessed via the prototype property or Object.getPrototypeOf().

    When a property is accessed on an object, JS first checks the object itself. If not found, it looks at the object's implicit prototype (__proto__), which points to the constructor's prototype. This search continues up the chain until it reaches the end, which is null.

  7. Distinguish between Components and Plugins in software architecture

    Understanding the difference between components and plugins is essential for deciding how to structure software functionality and extensibility.

    • Components: Used to divide a software interface or functional module into independent, reusable parts. They are typically developed internally, loaded statically during compilation/bundling, and maintain a hierarchical dependency tree.
    • Plugins: Used to extend existing software with new or enhanced features. They are typically provided by third-party developers, loaded dynamically at runtime (allowing users to add/remove them), and are generally independent of other plugins.

  8. Understand the JavaScript Single-Threaded Event Loop

    JavaScript is single-threaded to ensure consistency when modifying the DOM; multi-threaded DOM manipulation would lead to unstable page states. To handle concurrency, JS uses an Event Loop:

    • Synchronous Tasks: Executed immediately on the main thread in order. They block subsequent code until finished.
    • Asynchronous Tasks: Placed in a task queue and moved to the main thread only after all synchronous tasks are complete. These are split into:
      • Macro-tasks: Includes script execution, setTimeout, setInterval, event listeners, UI rendering, and network callbacks.
      • Micro-tasks: (Implicitly mentioned as a separate queue that is processed after synchronous tasks but before the next macro-task).

  9. Implement reactivity using Proxy (Vue 3)

    Vue 3 uses the ES6 Proxy object to create a virtual representation of a target object. Proxy intercepts fundamental operations (get, set, deleteProperty) without modifying the original data, providing a more robust reactivity system than Object.defineProperty.
    const target = {
  name: "wpc",
  age: 23,
};
const handler = {
  get(target, prop) {
    console.log(`getting ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`setting ${prop} to ${value}`);
    target[prop] = value;
  },
};
const proxy = new Proxy(target, handler);
console.log(proxy.name);
proxy.age = 24;

  10. Manage application state with Vuex

    Vuex is a centralized state management tool for Vue.js applications. It ensures that state changes occur in a predictable manner through a specific flow: State (data source) $\rightarrow$ View (mapping state to UI) $\rightarrow$ Actions (handling user input/async logic) $\rightarrow$ Mutations (synchronous state updates).

  11. Understand HTML basic concepts and DOM

    HTML (HyperText Markup Language) is a markup language used to describe the structure and content of a webpage. It uses tags (e.g., <tagname>) to define elements. These nested elements form a tree-like structure known as the Document Object Model (DOM).

  12. Implement a modular MongoDB connection structure

    To maintain a clean architecture, separate the database configuration, connection logic, and model definitions into different files. This allows the main application to trigger database operations only after a successful connection.
    // config.js
module.exports = { DBHOST: '127.0.0.1', DBPORT: 27017, DBNAME: 'bilibili' };

// db.js
const mongoose = require('mongoose');
const { DBHOST, DBPORT, DBNAME } = require('./config');

module.exports = function (success, error) {
  mongoose.connect(`mongodb://${DBHOST}:${DBPORT}/${DBNAME}`);
  mongoose.set('strictQuery', true);
  mongoose.connection.once('open', () => success());
  mongoose.connection.on('error', () => error && error());
};

// MovieModel.js
const mongoose = require('mongoose');
const MovieSchema = new mongoose.Schema({ name: String, director: String });
module.exports = mongoose.model('movie', MovieSchema);

// index.js
const db = require('./db');
const MovieModel = require('./MovieModel');

db(() => {
  MovieModel.create({ title: 'Oppenheimer', director: 'Nolan' }, (err, data) => {
    console.log(data);
  });
});