Container Queries erlauben responsive Design basierend auf Container-Größe statt Viewport.
• Media Queries = Viewport, Container Queries = Container
• Goldene Regel: "You cannot change what you measure"
• 20 Jahre unmöglich wegen Endlosschleifen → Containment API löst das
+2 mehr...
2026-02-20 Animation 💪 Sicher
✓
Smooth Scrolling mit LERP (Linear Interpolation) als Kernkonzept.
• LERP ist das Kernkonzept — nicht Easing
• lerp: 0.1 = 10% pro Frame → smooth
• duration/easing werden von lerp ÜBERSCHRIEBEN
+2 mehr...
2026-02-20 Testing 💪 Sicher
✓
User-zentriertes Testing: Teste wie ein User, nicht wie Code funktioniert.
• Query Priority: getByRole > getByLabelText > getByText > getByTestId
• getBy = muss existieren, findBy = wartet async, queryBy = kann fehlen
• userEvent für echte User-Interaktionen
+1 mehr...
2026-02-20 Animation 💪 Sicher
✓
Scroll-basierte Animationen mit GSAP ScrollTrigger Plugin.
• trigger/start/end = wann Animation startet
• scrub = Animation an Scrollbar binden
• pin = Element fixieren während Scroll
+2 mehr...
2026-02-20 React 💪 Sicher
✓
RSC sind keine Optimierung — sie sind eine architektonische Grenze.
• RSC ≠ SSR — SSR macht HTML, RSC macht serialisierten React-Baum
• Wire Format: M = Module References, J = Element Trees
• Keine Hooks weil Server Components stateless/effectless BY DESIGN
+2 mehr...
Grid ist ein 2D Layout System mit Lines und Tracks.
• fr = Fraction of FREE space (nach fixen Größen)
• Lines sind nummeriert ab 1, Items zwischen Lines
• justify = horizontal, align = vertikal
+1 mehr...
2026-02-20 TypeScript 🔧 Übend
✓
Built-in Types wie Partial, Pick, Omit, Record für bessere Type-Safety.
• Partial<T> macht alle Properties optional
• Pick/Omit für Type-Slicing
• Record<K,T> für Dictionaries
+2 mehr...
Native CSS Animationen basierend auf Scroll-Position — ohne JavaScript.
• animation-timeline: scroll() bindet an Scrollbar
• view() für Element-basierte Timelines
• Kein JS = bessere Performance
+1 mehr...
2026-02-20 Animation 🔧 Übend
✓
Kleine Animationen die Feedback geben und UX verbessern.
• Timing: 100-200ms für Micro, 200-400ms für Standard
• Easing: ease-out für Enter, ease-in für Exit
• Immer Feedback bei User Actions
+1 mehr...
2026-02-20 Accessibility 📚 Lernend
⚠
WCAG Guidelines und ARIA für barrierefreie Websites.
• Semantic HTML first, ARIA second
• Color contrast minimum 4.5:1
• Focus states sind Pflicht
+1 mehr...