Weipeng Qiao's Development Documentation

website·Indexed 29 days ago

https://qwp-dd.netlify.app/

A collection of technical notes and interview guides covering front-end development, including HTML, CSS (Flexbox, Box Model, Animations, Transforms), JavaScript (XMLHttpRequest), Node.js, npm, and MongoDB. It also features interview preparation for Vue, Webpack, SQL, and non-technical HR questions.

Tokens
141.5K
Snippets
469
Records
1.1K
Agent score
74%

What's inside Weipeng Qiao's Dev Docs

  1. Introduction to Bootstrap for responsive web development

    Bootstrap is a popular front-end framework based on HTML, CSS, and JavaScript developed by Twitter. It provides a standardized coding specification and a set of intuitive components to increase development efficiency and simplify the creation of responsive websites.
  2. Overview of Markdown in VuePress

    VuePress generates pages primarily from Markdown files. It uses markdown-it to parse content, allowing for syntax extensions via plugins. Page-specific configurations are handled through Frontmatter at the top of each Markdown file.
  3. Overview of CSS3 New Features

    CSS3 introduced a wide array of styling and layout capabilities:

    • Visuals: RGBA and HSLA color modes, text-shadow, border-radius (rounded corners), and box-shadow.
    • Backgrounds & Gradients: background-size, background-origin, background-clip, multiple background images, and linear/radial gradients.
    • Animations & Transitions: transition for smooth property changes and @keyframes with animate for custom animations.
    • Layout: Flexbox (display: flex), Media Queries for responsive design (@media), and multi-column layouts.
    • Transforms: 2D and 3D transformations using transform: translate(), rotate(), skew(), and scale().
    • Other: box-sizing for box model control, border-image, font icons (iconfont/icomoon), server-side fonts, and wordwrap deformation.
  4. Overview of ES6 (ECMAScript 2015) Features

    ES6 introduced significant optimizations and new syntax to JavaScript, including:

    • Block-scoped variables: let and const (preventing variable hoisting issues).
    • Arrow Functions: Simplified function syntax and lexical this binding.
    • Promises: Standardized asynchronous programming.
    • Modules: import and export for modular development.
    • Destructuring: Extracting values from arrays and objects into variables.
    • Classes: Syntactic sugar for prototype-based inheritance.
    • Other features: Template strings, default function parameters, object property shorthand, spread operator (...), for...of loops, and new methods for Array, String, and Object.
  5. Overview of HTML5 New Features

    HTML5 introduced several new capabilities for web development, including:

    • Drag and Drop: Standardized API using ondrop to allow elements to be draggable.
    • Custom Data Attributes: Use of data-* attributes (e.g., data-id) to store private information.
    • Semantic Elements: Improved page structure with tags like <header>, <nav>, <footer>, <aside>, <article>, and <section>.
    • Multimedia: Native <audio> and <video> tags. Note: Chrome supports muted autoplay for video, but generally restricts audio autoplay.
    • Canvas API: Used for 2D drawing via getContext('2d'). Methods like stroke() are used to draw lines. Unlike <img> which describes an image object, Canvas uses an API to render pixels.
    • Geolocation API: Used to retrieve the device's current latitude and longitude.
    • Web Storage: localStorage for persistent data without expiration, and sessionStorage for temporary data that is cleared when the tab/window closes.
    • Form Controls: New input types such as calendar, date, time, email, url, search, tel, file, and number.
    • Advanced Technologies: Web Workers for background threading and WebSockets for real-time bidirectional communication.
  6. Overview of Markdown in VuePress

    VuePress generates pages primarily from Markdown files, allowing developers to easily create documentation or blog sites. It uses markdown-it to parse content, which enables the use of plugins for syntax extensions. Page-specific configurations are handled via Frontmatter.
  7. Overview of PM2 Process Manager

    PM2 is a production process manager for Node.js applications. It simplifies application management by providing features such as performance monitoring, automatic restarts, and load balancing. It solves the problem of processes terminating when a terminal window is closed and eliminates the need for manual restarts after server reboots.
  8. Overview of JavaScript Components

    JavaScript consists of three primary components:

    1. ECMAScript: The core language specification defining the syntax and fundamental logic.
    2. BOM (Browser Object Model): Provides APIs to interact with the browser (e.g., window, location, history).
    3. DOM (Document Object Model): Provides APIs to interact with and manipulate HTML and XML documents.
  9. Overview of VuePress Markdown Page Generation

    VuePress generates static pages primarily from Markdown files. Developers create and write Markdown files, which VuePress then converts into different pages based on the file system structure. Page-specific configurations are handled via Frontmatter at the top of each Markdown file.
  10. Generate pages in VuePress using Markdown

    VuePress generates pages primarily from Markdown files. To create a documentation or blog site, you should create and write Markdown files; VuePress will then convert them into different pages based on the file structure.