From c242e0f9477e06aec7f5ae1c42a89cb02feff3d9 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Thu, 7 May 2026 17:09:04 +0200 Subject: [PATCH] =?UTF-8?q?dhbw=20inhalt:=20vorlesungsplan=20tabelle=20?= =?UTF-8?q?=E2=86=92=20cards-grid=20(4=C3=973,=20milestones=20hervorgehobe?= =?UTF-8?q?n),=20=C3=BCber-mich=20logos-collage,=20internet-101=20erweiter?= =?UTF-8?q?t=20(timeline=20+=20arpanet-bg=20+=20WWW-1989=20+=20mosaic-bg?= =?UTF-8?q?=20+=20unterseekabel=20+=20heute=20+=20five-eyes),=20a11y/WCAG-?= =?UTF-8?q?block=20(~12=20slides=20nach=20native=20html,=20vor=20css),=20d?= =?UTF-8?q?irekt-install=20slide=20gesplittet=20(szenario=20/=20symptome),?= =?UTF-8?q?=20code-block-color=20=E2=86=92=20#f48fb1=20(alle=208=20files),?= =?UTF-8?q?=20section.invert=20h2=20#f48fb1=20f=C3=BCr=20barrierefreiheit,?= =?UTF-8?q?=20ressourcen-slide=20auf=2001-05=20nach=20cover,=20alle=20emoj?= =?UTF-8?q?is=20raus=20(=E2=9C=93=E2=9C=97=E2=9A=A0=EF=B8=8F=F0=9F=8D=9E?= =?UTF-8?q?=F0=9F=A5=AC=F0=9F=8F=86=20+=20=E2=86=94),=20ESM=20statt=20CJS?= =?UTF-8?q?=20in=2003/04,=20librete.ch=20domain,=20kleinere=20fixes=20(chr?= =?UTF-8?q?omium=20statt=20chrome,=20CLI=20aufgel=C3=B6st,=20JetBrains=20e?= =?UTF-8?q?du,=20hoppscotch,=20SOLID-abk.,=20node=2024=20LTS,=20brew/winge?= =?UTF-8?q?t/scoop/choco-links,=20vim/neovim/emacs=20editoren,=20herzlich?= =?UTF-8?q?=20willkommen)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- slides/dhbw/01_web_eng.md | 393 ++++++++++++++++++++++++++---- slides/dhbw/02_css_extended.md | 14 +- slides/dhbw/03_nodejs_basics.md | 14 +- slides/dhbw/04_nodejs_advanced.md | 14 +- slides/dhbw/05_testing.md | 17 +- slides/dhbw/06_typescript.md | 6 +- slides/dhbw/07_docker.md | 8 +- slides/dhbw/08_best_practices.md | 14 +- 8 files changed, 414 insertions(+), 66 deletions(-) diff --git a/slides/dhbw/01_web_eng.md b/slides/dhbw/01_web_eng.md index 00c2a49..eb6fc26 100644 --- a/slides/dhbw/01_web_eng.md +++ b/slides/dhbw/01_web_eng.md @@ -34,7 +34,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -44,7 +44,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -67,6 +67,16 @@ a { --- +# Ressourcen zum Selbstlernen + +- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/) +- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/) +- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/) +- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/) +- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/) + +--- + # Herzlich Willkommen! @@ -94,19 +104,61 @@ a { # Vorlesungsplan -| Sitzung | Datum | Thema | -|---------|-------|-------| -| 1 | 08.05. | Intro, Projektgruppen, Internet 101 | -| 2 | 15.05. | HTML und CSS (Frameworks) | -| 3 | 22.05. | JS (Frameworks) und npm | -| 4 | 29.05. | nodeJS: Scripting, Running and Building | -| 5 | 05.06. | Express API, CRUD und "Middlewares" | -| 6 | 12.06. | **Projektwerkstattbericht** | -| 7 | 19.06. | Testing (unit, integration, end-to-end) | -| 8 | 26.06. | TypeScript | -| 9 | 03.07. | Docker, Proxies and DBs | -| 10 | 10.07. | Wrap-up & Projektsupport | -| 11 | 17.07. | **Präsentation** | + + +
+
108.05.
Intro · Projektgruppen · Internet 101
+
215.05.
HTML und CSS (Frameworks)
+
322.05.
JS (Frameworks) und npm
+
429.05.
nodeJS: Scripting, Running, Building
+
505.06.
Express API, CRUD, Middlewares
+
612.06.
Projektwerkstattbericht
+
719.06.
Testing (Unit · Integration · E2E)
+
826.06.
TypeScript
+
903.07.
Docker · Proxies · DBs
+
1010.07.
Wrap-up & Projektsupport
+
1117.07.
Präsentation
+
--- @@ -160,25 +212,74 @@ Eigenes Projekt: **Web-App** ODER **Backend** (API/CLI — Command-Line Interfac - **Code-Upload:** bis 27.07. - **Präsentation:** 17.07. (Gruppen, ~10 Min.) -Details: https://git.dailysh.it/DHBW/pruefungsleistung +Details: https://librete.ch/DHBW/pruefungsleistung --- -# Internet 101 – Zeitleiste +# Internet-Timeline -| Jahr | Ereignis | -|------|----------| -| 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 etc.) | -| 1995 | ECMAScript (JS) | -| 2006/08 | V8 JS Runtime Engine | -| Heute | 1,3 Mio. km Unterseekabel | +| Jahr | Meilenstein | +|------|-------------| +| **1966** | ARPANET-Projekt startet (DARPA) | +| **1969** | Erste Verbindung zwischen UCLA und Stanford | +| **1974** | TCP/IP-Protokoll entwickelt | +| **1989** | Tim Berners-Lee erfindet das WWW (CERN) | +| **1993** | Mosaic — erster grafischer Browser | +| **1994** | W3C gegründet (HTML, CSS, SVG, WCAG) | +| **1995** | ECMAScript / JavaScript wird Standard | +| **2008** | V8 JavaScript Engine (Chrome / Node.js) | + +--- + + + + +![bg fit](./assets/arpanet.jpg) + +--- + +# Das WWW (1989) + +**Tim Berners-Lee** am **CERN** (Genf) + +**Problem:** Wissenschaftler:innen können Forschungsdokumente nicht verlinken — Inkompatible Systeme, kein gemeinsames Format. + +**Lösung — drei Bausteine:** + +- **HTML** — Auszeichnungssprache für Dokumente +- **HTTP** — Protokoll zur Übertragung +- **URL** — eindeutige Adressen + +**1991:** erste Webseite geht online · 1993 vom CERN gemeinfrei freigegeben. + +→ WWW ≠ Internet. Das WWW ist eine **Anwendung auf** dem Internet. + +--- + + + + +![bg fit](./assets/mosaic.jpg) + +--- + + + + +![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg) + +--- + +# Heute: Physische Infrastruktur + +- **5,5 Milliarden** Menschen online +- **> 400 Unterseekabel**, ca. **1,3 Mio. km** Glasfaser +- Daten reisen mit **Lichtgeschwindigkeit** +- Latenz Frankfurt — New York: ~80 ms + +→ Keine "Cloud" ohne Kabel. Das Internet ist **physische** Infrastruktur — und damit angreifbar. + +**Geopolitik:** Five-Eyes-Allianz (USA, UK, CA, AU, NZ) zapft Unterseekabel ab (Programm "Tempora", aufgedeckt 2013 durch Snowden). DE ist Teil der Fourteen Eyes. --- @@ -310,7 +411,7 @@ scoop install nodejs-lts # Direkt-Install: Wenn es eng wird -**Typisches Szenario** in Studium und Beruf — drei parallele Projekte mit unterschiedlichen Anforderungen: +**Typisches Szenario** — drei parallele Projekte mit unterschiedlichen Anforderungen: | Projekt | Stack | Node-Version | |---------|-------|--------------| @@ -318,9 +419,12 @@ scoop install nodejs-lts | Studienarbeit | Next.js 15 | 22.x (LTS Jod) | | Aktuelles Lab-Projekt | neueste Features | 24.x (Iron, current LTS) | -System-Install kennt nur **eine** Node-Version global. +System-Install kennt nur **eine** Node-Version global → Konflikt. + +--- + +# Symptome im Alltag -**Symptome im Alltag:** - `npm install` bricht mit `engines`-Warning ab - native Module (z. B. `node-sass`) bauen nicht - CI-Pipeline ist grün, lokal rot — oder umgekehrt @@ -760,6 +864,213 @@ Was früher mit JavaScript gelöst wurde, kann HTML heute selbst. JS dafür einz +# Barrierefreiheit +## Accessibility (a11y) + +--- + +# Wie nutzen Menschen das Web? + +| Eingabe | Nutzungsweise | +|---------|---------------| +| **Maus** | Klicken, Scrollen | +| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten | +| **Screenreader** | NVDA, VoiceOver, TalkBack, Orca | +| **Sprachsteuerung** | "Klicke auf Anmelden" | +| **Augensteuerung** | Eye-Tracking | +| **Switch-Geräte** | Ein-/Aus-Schalter (motorische Einschränkungen) | + +→ Nicht alle Menschen nutzen Maus oder Touchscreens gleichermaßen. + +--- + +# Web-Zugänglichkeit — Statistik + +WHO: ca. **15 % der Weltbevölkerung** mit Behinderung — über **1 Milliarde** potenzielle Nutzer:innen. + +| Typ | Permanent | Temporär | Situativ | +|-----|-----------|----------|----------| +| Visuell | Blindheit | Augen-OP | Grelle Sonne | +| Motorisch | Amputation | Gebrochener Arm | Kind auf dem Arm | +| Auditiv | Taubheit | Ohrenentzündung | Laute Umgebung | +| Kognitiv | Legasthenie | Müdigkeit | Ablenkung | + +**Curb-Cut-Effekt:** Bordsteinabsenkung für Rollstühle hilft auch Kinderwagen, Rollkoffern, Fahrrädern. + +--- + +# Warum Barrierefreiheit? + +**Rechtlich (DE / EU):** +- **EAA** — European Accessibility Act, in Kraft seit 28.06.2025 +- **BFSG** — DE-Umsetzung des EAA, betrifft auch Privatwirtschaft +- **BITV 2.0** — Barrierefreie Informationstechnik-Verordnung (öff. Stellen) +- Bußgelder bis **100.000 €** + +**Ethisch:** Teilhabe und digitale Inklusion. + +**Praktisch:** +- Bessere UX für **alle** (mobile, ältere Menschen, situative Einschränkungen) +- SEO-Bonus durch semantisches HTML, Alt-Texte +- Größerer Markt — ca. 15 % der Bevölkerung + +--- + +# WCAG: Der Standard + +**W**eb **C**ontent **A**ccessibility **G**uidelines · Herausgeber: W3C / WAI + +**Aktuell:** WCAG 2.2 (verbindlich seit Okt. 2023). WCAG 3 in Working-Draft. + +**4 Prinzipien (POUR):** + +| Prinzip | Bedeutung | +|---------|-----------| +| **P**erceivable | Wahrnehmbar — Inhalte müssen erkennbar sein | +| **O**perable | Bedienbar — Funktionen müssen nutzbar sein | +| **U**nderstandable | Verständlich — Inhalte müssen klar sein | +| **R**obust | Robust — funktioniert mit verschiedenen Technologien | + +**Konformitätslevel:** A · **AA** (gesetzlicher Standard) · AAA + +→ [w3.org/WAI/WCAG22/quickref](https://www.w3.org/WAI/WCAG22/quickref/) + +--- + +# Perceivable: Wahrnehmbar + +![bg right:35% fit](./assets/demos/contrast-levels.png) + +**Texte:** +- **Kontrast:** mindestens 4,5:1 für normalen Text +- **Untertitel** für Videos +- Inhalte bei **200 % Zoom** noch nutzbar + +**Textalternativen für Nicht-Text:** + +```html +Ein Mann mit Einkaufstüten steht + allein vor einer Reihe Panzer — + Tiananmen, Peking, 5. Juni 1989 +``` + +→ Leeres `alt=""` für rein dekorative Bilder. + +--- + +# Operable: Bedienbar + +![bg right:35%](./assets/demos/a11y-focus.png) + +**Tastaturzugänglich:** +```css +/* Fokus-Ring nur bei Tastatur-Navigation */ +button:focus-visible { + outline: 3px solid #d63384; + outline-offset: 3px; + border-radius: 4px; +} + +/* Anti-Pattern */ +button:focus { outline: none; } +``` + +**Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen. + +**Kein Flackern:** maximal 3×/Sekunde (epileptische Anfälle vermeiden). + +--- + +# Understandable: Verständlich + +![bg right:35%](./assets/demos/a11y-error.png) + +**Sprache angeben:** +```html + +``` + +**Konsistente Navigation** — gleiche Elemente an gleicher Stelle. + +**Fehler erklären:** +```html + + +``` + +--- + +# Robust: Technisch solide + +![bg right:35%](./assets/demos/a11y-semantic.png) + +**Semantisches HTML:** +```html + +
Klick mich
+ + + +``` + +**ARIA — nur wenn nötig:** +```html +
+ + +
+``` + +→ Erste ARIA-Regel: **wenn möglich, natives HTML nutzen**. + +--- + +# Barrierefreiheit testen — Werkzeuge + +**Automatisierte Tools** (finden ca. 30 % der Verstöße): + +| Tool | Typ | Findet | +|------|-----|--------| +| [WAVE](https://wave.webaim.org/) | Browser-Extension | Kontrast, Struktur, Tab-Reihenfolge | +| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + A11y-Audit | +| [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension | Detailanalyse, Regel-Engine | +| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration | + +**Screenreader (OS-nativ oder Open Source):** + +| OS | Screenreader | +|----|--------------| +| macOS / iOS | VoiceOver (`Cmd + F5`) — builtin | +| Windows | [NVDA](https://www.nvaccess.org/) (OSS) · Narrator (builtin) | +| Linux | [Orca](https://orca.gnome.org/) — GNOME builtin | +| Android | TalkBack — builtin | + +--- + +# Barrieren vermeiden — Praxis-Checkliste + +![bg right:35% fit](./assets/demos/keyboard-a11y.png) + +**Tastatur-Test:** +- Alle Funktionen mit Tab + Enter erreichbar +- Fokus immer sichtbar +- Logische Tab-Reihenfolge, "Skip to main" als erstes + +**Screenreader-Test:** +- VoiceOver auf Mac (`Cmd + F5`) oder NVDA auf Windows +- Formular ausfüllen, Navigation prüfen + +**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen — nicht nur "Augen schließen" als Simulation. + +--- + + + + + # CSS – Cascading Style Sheets --- @@ -783,7 +1094,7 @@ p { # CSS einbinden -**Option 1: Externe Datei** ✓ +**Option 1: Externe Datei** (empfohlen) ```html ``` @@ -793,7 +1104,7 @@ p { ``` -**Option 3: Inline** ✗ +**Option 3: Inline** (vermeiden) ```html

...

``` @@ -884,7 +1195,7 @@ Element-Selektoren sind die einfachsten. Komma = "oder". **Raute** vor dem Namen = ID. -⚠️ IDs sollten **einmalig** pro Seite sein. In der Praxis: Klassen meist besser. +**Hinweis:** IDs sollten **einmalig** pro Seite sein. In der Praxis: Klassen meist besser. --- @@ -1271,8 +1582,8 @@ Interaktive version: [nextlevelshit.github.io/web-engineering-mandala](https://n ``` -✓ hohe Kompatibilität, simpel -✗ State-Management, Re-Rendering wird schnell komplex +**Pro:** hohe Kompatibilität, simpel +**Contra:** State-Management und Re-Rendering werden schnell komplex --- @@ -1361,9 +1672,9 @@ const greeting = "Hallo DHBW"; | | Frontend | SSR | SSG | File Routing | |---|---|---|---|---| -| **Next.js** | React | ✓ | ✓ | `/app/page.js` | -| **Nuxt** | Vue | ✓ | ✓ | `/pages/*.vue` | -| **Gatsby** | React | – | ✓ | GraphQL Data | +| **Next.js** | React | ja | ja | `/app/page.js` | +| **Nuxt** | Vue | ja | ja | `/pages/*.vue` | +| **Gatsby** | React | nein | ja | GraphQL Data | --- diff --git a/slides/dhbw/02_css_extended.md b/slides/dhbw/02_css_extended.md index d24f48c..b4a834c 100644 --- a/slides/dhbw/02_css_extended.md +++ b/slides/dhbw/02_css_extended.md @@ -33,7 +33,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -43,7 +43,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -64,6 +64,16 @@ a { --- +# Ressourcen zum Selbstlernen + +- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/) +- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/) +- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/) +- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/) +- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/) + +--- + # Inhalt Aufbauend auf den Grundlagen aus Sitzung 1. diff --git a/slides/dhbw/03_nodejs_basics.md b/slides/dhbw/03_nodejs_basics.md index a357536..083cd1c 100644 --- a/slides/dhbw/03_nodejs_basics.md +++ b/slides/dhbw/03_nodejs_basics.md @@ -33,7 +33,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -43,7 +43,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -64,6 +64,16 @@ a { --- +# Ressourcen zum Selbstlernen + +- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/) +- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/) +- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/) +- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/) +- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/) + +--- + # Inhalt 1. Node.js: was und warum diff --git a/slides/dhbw/04_nodejs_advanced.md b/slides/dhbw/04_nodejs_advanced.md index 2a54e34..6d2f238 100644 --- a/slides/dhbw/04_nodejs_advanced.md +++ b/slides/dhbw/04_nodejs_advanced.md @@ -33,7 +33,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -43,7 +43,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -64,6 +64,16 @@ a { --- +# Ressourcen zum Selbstlernen + +- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/) +- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/) +- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/) +- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/) +- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/) + +--- + # Inhalt 1. Node.js — Fun Facts & alternative Runtimes diff --git a/slides/dhbw/05_testing.md b/slides/dhbw/05_testing.md index 7b051aa..7be108a 100644 --- a/slides/dhbw/05_testing.md +++ b/slides/dhbw/05_testing.md @@ -34,7 +34,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -44,7 +44,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -65,6 +65,16 @@ a { --- +# Ressourcen zum Selbstlernen + +- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/) +- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/) +- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/) +- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/) +- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/) + +--- + @@ -120,7 +130,6 @@ Jede Design-Phase hat Testpendant. Testfälle früh ableiten. # Test Automation Trophy (Kent C. Dodds) ``` - 🏆 ┌─────────┐ │ E2E │ ← klein ├─────────┤ @@ -276,7 +285,7 @@ test("complete user journey", async () => { - **Echter Browser** – Chromium / Firefox / WebKit - **Echtes DOM** – Klicks, Tippen, Scrollen - **Echtes Rendering** – CSS, async Operationen -- **Cross-Origin** – Client ↔ Server-Kommunikation +- **Cross-Origin** – Client- und Server-Kommunikation Tools: **Cypress**, **Playwright** diff --git a/slides/dhbw/06_typescript.md b/slides/dhbw/06_typescript.md index b22e8ad..303cab9 100644 --- a/slides/dhbw/06_typescript.md +++ b/slides/dhbw/06_typescript.md @@ -34,7 +34,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -44,7 +44,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -166,7 +166,7 @@ let id: number | string; id = 101; // ok id = "101"; // ok -id = true; // ✗ TypeError +id = true; // TypeError (nicht erlaubt) ``` --- diff --git a/slides/dhbw/07_docker.md b/slides/dhbw/07_docker.md index 4af5d5d..168d0b1 100644 --- a/slides/dhbw/07_docker.md +++ b/slides/dhbw/07_docker.md @@ -34,7 +34,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -44,7 +44,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -297,8 +297,8 @@ api: # Networks: Segmentierung -- **`net`** – öffentlich erreichbar (Proxy ↔ App) -- **`data`** – nur intern (App ↔ DB) +- **`net`** – öffentlich erreichbar (Proxy — App) +- **`data`** – nur intern (App — DB) - DB ist **nicht** vom Internet erreichbar - Service-DNS: `api`, `db`, `proxy` (Container-Name = Hostname) diff --git a/slides/dhbw/08_best_practices.md b/slides/dhbw/08_best_practices.md index bde7d56..64934c4 100644 --- a/slides/dhbw/08_best_practices.md +++ b/slides/dhbw/08_best_practices.md @@ -34,7 +34,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -44,7 +44,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -283,11 +283,9 @@ Don't refactor what isn't working yet. # Feedback – Sandwich-Methode -``` -🍞 Lob / Positives -🥬 Kritik + konkreter Verbesserungsvorschlag -🍞 Lob / Abschluss -``` +1. **Eröffnung** — Lob / positive Beobachtungen +2. **Kern** — Kritik + konkreter Verbesserungsvorschlag +3. **Abschluss** — Lob / wertschätzender Ausklang **Pitfalls:** - Am Thema vorbeireden @@ -312,7 +310,7 @@ Don't refactor what isn't working yet. **Zusatzpunkte (max. 10):** TypeScript, Docker, Dev/Prod-Parity, `.env`, npm-Publish, Domain, HTTPS, Responsive Design. -→ https://git.dailysh.it/DHBW/pruefungsleistung +→ https://librete.ch/DHBW/pruefungsleistung ---