https://github.com/nextlevelshit/web-engineering-mandala
https://github.com/nextlevelshit/web-engineering-mandala
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nextlevelshit/web-engineering-mandala
- Owner: nextlevelshit
- Created: 2025-06-15T16:10:31.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-15T16:13:27.000Z (about 1 year ago)
- Last Synced: 2025-06-15T17:24:32.818Z (about 1 year ago)
- Language: HTML
- Size: 35.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Web Engineering - Mandala
### Internet Geschichte
- 1966: ARPANET
- 1969: RFCs → 1986 IETF → 1992 Internet Society
- 1974: TCP/IP und HTTP(S)
- 1987: Domain Names und DNS
- 1993: "Erster" Browser - Mosaic
- 1994: W3C (HTML, XML, CSS, SVG, WCAG)
- 1995: ECMAScript (JS)
- 2006/08: V8 JS Runtime Engine
### Entwicklungsumgebung
**Benötigt:**
- git
- nodeJS und npm
- cURL oder wget
- IDE (VS Code, JetBrains WebStorm)
- Optional: Docker
**Git Basics:**
```bash
git init
git add [Dateiname]
git commit -m "Commit-Nachricht"
git push [remote] [branch]
git pull [remote] [branch]
git clone [repository-URL]
```
---
## Sitzung 2: HTML & CSS (16.05.)
### HTML Anatomie
```html
My cat is very grumpy
```
- Opening Tag + Content + Closing Tag = Element
- Attributes in Opening Tag
### HTML Meta Data / Open Graph
```html
```
### HTML Input Autocomplete
```html
Kreditkartennummer
Nachname:
```
### HTML Microdata
```html
Spinal Tap
Reunion Show
```
### CSS Anatomie
```css
/* ID selector */
#description {
color: orangered; /* Property: Value */
}
```
### CSS Specificity
Reihenfolge der Spezifität (höchste zuerst):
1. Inline Styles
2. IDs
3. Classes, Attributes, Pseudo-classes
4. Elements
### CSS Frameworks
- **TailwindCSS**: Utility-First CSS Framework
- **Flowbite**: Tailwind CSS Component Library
---
## Sitzung 5: JavaScript & nodeJS (06.06.)
### ECMAScript
- Standardisiert seit 1997 als ECMA-262
- Neueste Edition: ECMAScript 2023 (ES14)
- ES6/ES2015 als wichtiger Meilenstein
### Client vs Server-Side JavaScript
**Client-Side:**
- DOM Manipulation
- Browser APIs (window, document, navigator)
**Server-Side (nodeJS):**
- Non-blocking I/O
- File System Access
- Database Processing
- Web Server Funktionalität
### Frontend Frameworks
**React:**
```jsx
function MyButton() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
Clicked {count} times
);
}
```
**Vue.js:**
```vue
Clicked {{ count }} times
export default {
data() {
return { count: 0 };
},
methods: {
handleClick() {
this.count++;
}
}
};
```
**Svelte:**
```svelte
let count = 0;
function handleClick() {
count += 1;
}
Clicked {count} {count === 1 ? 'time' : 'times'}
```
### Rendering Frameworks
- **Next.js**: React-basiert, SSR/SSG
- **Nuxt**: Vue-basiert, SSR/SSG
- **Gatsby**: Static Site Generator mit GraphQL
### Build Tools
- **Webpack**: Module Bundler mit großem Ecosystem
- **Vite**: Schnelle Entwicklungsumgebung mit Rollup
- **Parcel**: Zero-Configuration Bundler
### npm Scripts
```json
{
"scripts": {
"start": "npm run dev",
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
```
---
## Sitzung 6: nodeJS Server (13.06.)
### nodeJS Basics
```javascript
// Process handling
process.on("SIGINT", () => {
console.log("Received SIGINT. Closing server...");
server.close(() => {
console.log("Server closed.");
process.exit(0);
});
});
```
### Express.js Server
```javascript
import express from "express";
const app = express();
app.use(express.json());
// Basic route
app.get("/api", async (req, res) => {
res.json({ timestamp: Date.now() });
});
// Start server
const server = app.listen(3000, () => {
console.log('Server running on port 3000');
});
```
### CRUD Operations
```javascript
// GET
app.get("/api/users/:id", (req, res) => {
const user = users.find(u => u.id === req.params.id);
res.json(user);
});
// POST
app.post("/api/users", (req, res) => {
const newUser = { id: Date.now(), ...req.body };
users.push(newUser);
res.status(201).json(newUser);
});
// PUT
app.put("/api/users/:id", (req, res) => {
const index = users.findIndex(u => u.id === req.params.id);
users[index] = { ...users[index], ...req.body };
res.json(users[index]);
});
// DELETE
app.delete("/api/users/:id", (req, res) => {
users = users.filter(u => u.id !== req.params.id);
res.status(204).send();
});
```
### WebSockets
```javascript
import { WebSocketServer } from "ws";
const wss = new WebSocketServer({ port: 8080 });
wss.on("connection", (ws) => {
console.log("Client connected");
ws.on("message", (data) => {
console.log("Received:", data.toString());
ws.send(`Echo: ${data}`);
});
});
```