public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

DHBW: Demo-Files + Render-System (Follow-up zu HdM-Style) #1

New Issue
Open
opened 2026-05-07 13:12:39 +02:00 by libretech · 0 comments
libretech commented 2026-05-07 13:12:39 +02:00
Owner
Copy Link
Copy Source

DHBW Demos & Render-System

Follow-up zu den HdM-style demo-files. HdM hat 101 standalone-HTML-files mit
gerenderten PNGs in slides/223015c/assets/demos/. DHBW soll das auch bekommen.

Status

  • 20 HdM-demos kopiert nach slides/dhbw/assets/demos/ (HTML/CSS-Beispiele,
    bereits in 01_web_eng.md referenziert).
  • DHBW-spezifische demos fehlen.
  • Render-Script fehlt komplett (HdM-PNGs scheinen manuell entstanden zu sein).

TODO

1. Render-Script + Make-Target

scripts/render-demos.sh:

  • Iteriert über slides/<course>/assets/demos/*.html (skip *-frame.html)
  • Headless chromium screenshot → .png neben HTML
  • Inkrementell: nur regenerieren wenn HTML neuer als PNG
  • Window-size konfigurierbar pro file (z. B. via comment im HTML)

Make-target:

demos-%:
	@./scripts/render-demos.sh slides/$*/assets/demos/

2. DHBW-spezifische demos erstellen

Priorisiert:

Onboarding (CLI-Screenshots):

  • npm init interaktiv
  • nvm/fnm version-switching
  • git status mit changes
  • npm install log
  • Bun vs Node startup-zeit-vergleich

Express / API-flow:

  • request-response sequenz-diagramm
  • middleware-chain visualisiert
  • CORS preflight (OPTIONS request)
  • HTTP status-code matrix

Frameworks side-by-side:

  • Counter in Vanilla / React / Vue / Svelte (gleiche output, unterschiedlicher code)
  • Astro Islands visualization
  • Webpack vs Vite build-time chart

Testing:

  • Test pyramid mit zahlen
  • vitest-output mit pass/fail
  • coverage-report screenshot
  • Cypress test recording (PNG-stills)

TypeScript:

  • IDE-screenshot mit type-error
  • compiled vs source diff (types stripped)
  • tsconfig.json annotated

Docker / Compose:

  • compose-up-output
  • container ↔ network ↔ volume diagram
  • Dockerfile-layers visualization (cache-hits)

3. HdM render-script extrahieren

Falls HdM intern doch ein Render-Script hat (nicht im repo): committen, dann
kann DHBW es mitbenutzen. Falls nicht: neues bauen und auch HdM damit ablösen.

Zugehörige Files

  • slides/dhbw/assets/demos/ — neue assets hier
  • slides/223015c/assets/demos/ — HdM-referenz
  • scripts/render-demos.sh — neu zu erstellen
  • Makefile — neue targets demos-<course>
# DHBW Demos & Render-System Follow-up zu den HdM-style demo-files. HdM hat 101 standalone-HTML-files mit gerenderten PNGs in `slides/223015c/assets/demos/`. DHBW soll das auch bekommen. ## Status - 20 HdM-demos kopiert nach `slides/dhbw/assets/demos/` (HTML/CSS-Beispiele, bereits in `01_web_eng.md` referenziert). - DHBW-spezifische demos fehlen. - Render-Script fehlt komplett (HdM-PNGs scheinen manuell entstanden zu sein). ## TODO ### 1. Render-Script + Make-Target `scripts/render-demos.sh`: - Iteriert über `slides/<course>/assets/demos/*.html` (skip `*-frame.html`) - Headless chromium screenshot → `.png` neben HTML - Inkrementell: nur regenerieren wenn HTML neuer als PNG - Window-size konfigurierbar pro file (z. B. via comment im HTML) Make-target: ```makefile demos-%: @./scripts/render-demos.sh slides/$*/assets/demos/ ``` ### 2. DHBW-spezifische demos erstellen Priorisiert: **Onboarding (CLI-Screenshots):** - `npm init` interaktiv - `nvm/fnm` version-switching - `git status` mit changes - `npm install` log - Bun vs Node startup-zeit-vergleich **Express / API-flow:** - request-response sequenz-diagramm - middleware-chain visualisiert - CORS preflight (OPTIONS request) - HTTP status-code matrix **Frameworks side-by-side:** - Counter in Vanilla / React / Vue / Svelte (gleiche output, unterschiedlicher code) - Astro Islands visualization - Webpack vs Vite build-time chart **Testing:** - Test pyramid mit zahlen - vitest-output mit pass/fail - coverage-report screenshot - Cypress test recording (PNG-stills) **TypeScript:** - IDE-screenshot mit type-error - compiled vs source diff (types stripped) - tsconfig.json annotated **Docker / Compose:** - compose-up-output - container ↔ network ↔ volume diagram - Dockerfile-layers visualization (cache-hits) ### 3. HdM render-script extrahieren Falls HdM intern doch ein Render-Script hat (nicht im repo): committen, dann kann DHBW es mitbenutzen. Falls nicht: neues bauen und auch HdM damit ablösen. ## Zugehörige Files - `slides/dhbw/assets/demos/` — neue assets hier - `slides/223015c/assets/demos/` — HdM-referenz - `scripts/render-demos.sh` — neu zu erstellen - `Makefile` — neue targets `demos-<course>`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
libretech (Michael Czechowski) libretech-bot
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: public/uni#1