OrgTree/test-notes/reference/web-development.org

Web Development Reference

• Frontend Technologies
  • JavaScript
    • ES6+ Features
      • Arrow Functions
      • Destructuring
    • Async Programming
      • Promises
      • Async/Await
  • Vue.js
    • Composition API
      • Setup Function
    • Reactivity
      • Ref vs Reactive
  • CSS
    • Flexbox
      • Container Properties
      • Item Properties
    • Grid
      • Grid Container
• Backend Technologies
  • Node.js
    • Express Framework
      • Basic Server
  • Databases
    • SQL
      • Common Queries
        • SELECT
        • JOIN
    • NoSQL
      • MongoDB
• Tools and Workflow
  • Development Environment
    • VS Code Extensions
  • Version Control
    • Git Commands
      • Basic Workflow
      • Branching
  • Build Tools
    • Vite

Frontend Technologies

JavaScript

ES6+ Features

Arrow Functions

Arrow functions provide a concise way to write function expressions:

const add = (a, b) => a + b;
const users = data.map(user => user.name);

Destructuring

Extract values from arrays and objects:

const {name, age} = person;
const [first, second] = array;

Async Programming

Promises

Handle asynchronous operations cleanly.

Async/Await

Modern syntax for working with promises:

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

Vue.js

Composition API

The modern way to write Vue components.

Setup Function

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubled = computed(() => count.value * 2);
    
    function increment() {
      count.value++;
    }
    
    return { count, doubled, increment };
  }
}

Reactivity

Ref vs Reactive

• `ref()` for primitive values
• `reactive()` for objects

CSS

Flexbox

Container Properties

• display: flex
• flex-direction
• justify-content
• align-items

Item Properties

• flex-grow
• flex-shrink
• flex-basis

Grid

Modern layout system for complex designs.

Grid Container

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

Backend Technologies

Node.js

Express Framework

Minimal web framework for Node.js.

Basic Server

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Databases

SQL

Common Queries

SELECT

SELECT name, email FROM users WHERE age > 18;

JOIN

SELECT u.name, p.title 
FROM users u 
JOIN posts p ON u.id = p.user_id;

NoSQL

MongoDB

Document-based database with flexible schema.

Tools and Workflow

Development Environment

VS Code Extensions

• Vetur for Vue development
• Prettier for code formatting
• ESLint for code quality

Version Control

Git Commands

Basic Workflow

git add .
git commit -m "Add new feature"
git push origin main

Branching

git checkout -b feature/new-component
git merge feature/new-component

Build Tools

Vite

Modern build tool with fast HMR (Hot Module Replacement).