Initial implementation

test-notes/reference/web-development.org

@@ -0,0 +1,154 @@
+#+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).