Aufgemerkt und aufgepasst mit Observer APIs

Wo wir sind ist vorne.

Wir haben dich gut unterhalten? Unterstütze uns mit einer Spende ♥

Kennt ihr auch dieses drängelnde Bedürfnis eure Websites so richtig zu überwachen und jede noch so kleine Änderung im Verhalten mitzubekommen? Such nicht länger!
Wir erklären wie ihr DOM-Änderungen mit Mutation-Observern, die Abmessungen von Containern mit Resize-Observern und die Sichtbarkeit von Elementen mit Intersection-Observern überwachen könnt.
Da bleibt kein Web-Stasi-Auge trocken!
Dazu zeigen wir noch, warum das Input-Event das überlegene aller Form-Events ist und beantworten die Frage, welche Devtools-Features in welchem Browser zu finden sind.
Observer APIs! Damit werden Sie geholfen!

Begrüßung – [00:00:55]

Retro

Moritz: Airtags wieder finden – [00:04:24]
Constantin: Tim Apple und Kai Pflaume – [00:09:44]

Per KI generiertes Foto in Anlehnung an das Wiesn-Foto, das Tim Cook vor einigen Tagen zusammen mit Kai Pflaume gepostet hat. In diesem Foto prosten sich allerdings eine Person mit einem Apfel statt Kopf und eine Person mit einer Pflaume statt Kopf zu.

Moritz: VoiceOver WTF? – [00:11:32 ]
Constantin: number input mit step list (Demo) – [00:14:37]
Moritz: BTCONF-Umfrage – [00:18:19]
Moritz: Codepen-Bug gefunden (oder auch nicht) – [00:21:28]

Property der Woche: HTMLElement input event – [00:24:53]

MDN
caniuse

Tagesthema: JavaScript Observer APIs – [00:29:31]

MutationObserver – [00:34:29]
- Getting To Know The MutationObserver API – Smashing Magazine
- CodePen attr() polyfill
ResizeObserver – [00:46:26]
IntersectionObserver – [00:59:25]
Moritz’ Observer Demo
Obese server

KI-seneriertes Bild einer übergewichtigen Kellnerin, die Teller mit Essen darauf in der Hand trägt und lacht

GeilTeil: Can I DevTools / Chariots Auweia – [01:20:19]

Das Ende – [01:28:32]