Initial implementation

test-notes/reference/quick-reference.org

@@ -0,0 +1,133 @@
+#+TITLE: Quick Reference Guide
+#+DESCRIPTION: Cheat sheet for common commands and shortcuts
+
+* Command Line
+** Git Commands
+*** Basic Operations
+**** Status and Changes
+- =git status= - Show working tree status
+- =git diff= - Show changes between commits
+- =git log --oneline= - Compact commit history
+
+**** Staging and Committing  
+- =git add .= - Stage all changes
+- =git commit -m "message"= - Commit with message
+- =git push origin main= - Push to remote
+
+*** Branching
+- =git branch= - List branches
+- =git checkout -b feature= - Create and switch to branch
+- =git merge feature= - Merge branch into current
+
+** NPM Commands
+*** Package Management
+- =npm install= - Install dependencies
+- =npm install -D package= - Install dev dependency
+- =npm uninstall package= - Remove package
+
+*** Scripts
+- =npm run dev= - Start development server
+- =npm run build= - Build for production
+- =npm test= - Run tests
+
+* Keyboard Shortcuts
+** VS Code
+*** Navigation
+- =Ctrl+P= - Quick file open
+- =Ctrl+Shift+P= - Command palette  
+- =Ctrl+G= - Go to line
+
+*** Editing
+- =Ctrl+D= - Select next occurrence
+- =Ctrl+/= - Toggle comment
+- =Alt+Shift+Down= - Duplicate line
+
+** Browser DevTools
+*** Elements Tab
+- =H= - Hide element
+- =Delete= - Delete element
+- =F2= - Edit as HTML
+
+*** Console
+- =Ctrl+L= - Clear console
+- =$0= - Reference selected element
+- =console.table(data)= - Display data as table
+
+* Regular Expressions
+** Common Patterns
+*** Text Matching
+- =\d+= - One or more digits
+- =\w+= - One or more word characters
+- =\s+= - One or more whitespace
+
+*** Anchors
+- =^= - Start of line
+- =$= - End of line  
+- =\b= - Word boundary
+
+** Examples
+*** Email Validation
+=^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$=
+
+*** Phone Number
+=^\d{3}-\d{3}-\d{4}$=
+
+* CSS Selectors
+** Basic Selectors
+- =.class= - Class selector
+- =#id= - ID selector
+- =element= - Element selector
+
+** Combinators
+- =parent > child= - Direct child
+- =ancestor descendant= - Any descendant
+- =element + next= - Adjacent sibling
+
+** Pseudo-classes
+- =:hover= - Mouse hover state
+- =:first-child= - First child element
+- =:nth-child(n)= - Nth child element
+
+* HTTP Status Codes
+** 2xx Success
+- =200= - OK
+- =201= - Created
+- =204= - No Content
+
+** 4xx Client Error  
+- =400= - Bad Request
+- =401= - Unauthorized
+- =404= - Not Found
+
+** 5xx Server Error
+- =500= - Internal Server Error
+- =502= - Bad Gateway
+- =503= - Service Unavailable
+
+* Org Mode Syntax
+** Headings
+- =*= - Level 1 heading
+- =**= - Level 2 heading
+- =***= - Level 3 heading
+
+** Lists
+*** Unordered
+- Dash, plus, or asterisk
+
+*** Ordered
+1. Numbers with dot or parenthesis
+
+*** Checkboxes
+- =[ ]= - Empty checkbox
+- =[X]= - Checked checkbox
+
+** Markup
+- =*bold*= - Bold text
+- =/italic/= - Italic text  
+- ==code== - Inline code
+- =~verbatim~= - Verbatim text
+
+** Links
+- =[[URL][Description]]= - External link
+- =[[file:path]]= - File link
+- =[[*Heading]]= - Internal link to heading

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).