#+TITLE: Web Development Reference
#+DESCRIPTION: Quick reference for web development concepts
#+KEYWORDS: javascript vue css html

* Frontend Technologies
** JavaScript
*** ES6+ Features
**** Arrow Functions
Arrow functions provide a concise way to write function expressions:
#+BEGIN_SRC javascript
const add = (a, b) => a + b;
const users = data.map(user => user.name);
#+END_SRC

**** Destructuring
Extract values from arrays and objects:
#+BEGIN_SRC javascript
const {name, age} = person;
const [first, second] = array;
#+END_SRC

*** Async Programming
**** Promises
Handle asynchronous operations cleanly.

**** Async/Await
Modern syntax for working with promises:
#+BEGIN_SRC javascript
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}
#+END_SRC

** Vue.js
*** Composition API
The modern way to write Vue components.

**** Setup Function
#+BEGIN_SRC javascript
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 };
  }
}
#+END_SRC

*** 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
#+BEGIN_SRC css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}
#+END_SRC

* Backend Technologies
** Node.js
*** Express Framework
Minimal web framework for Node.js.

**** Basic Server
#+BEGIN_SRC javascript
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');
});
#+END_SRC

** Databases
*** SQL
**** Common Queries
***** SELECT
#+BEGIN_SRC sql
SELECT name, email FROM users WHERE age > 18;
#+END_SRC

***** JOIN
#+BEGIN_SRC sql
SELECT u.name, p.title 
FROM users u 
JOIN posts p ON u.id = p.user_id;
#+END_SRC

*** 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
#+BEGIN_SRC bash
git add .
git commit -m "Add new feature"
git push origin main
#+END_SRC

**** Branching
#+BEGIN_SRC bash
git checkout -b feature/new-component
git merge feature/new-component
#+END_SRC

** Build Tools
*** Vite
Modern build tool with fast HMR (Hot Module Replacement).