154 lines
2.8 KiB
Org Mode
154 lines
2.8 KiB
Org Mode
#+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). |