Revision 304: Native Browser-APIs
Hans und Schepp telefonierten sich diesmal zusammen und sprachen über die weite Verbreitung und Vorteile moderner Browser-APIs.
Schaunotizen
- [00:00:15] Native Browser-APIs
- Schepp hat sich in letzter Zeit verstärkt damit befasst, wie man auf einer klassischen Webseite den ganzen JavaScript-Balast loswerden kann. Ziel des Ganzen ist zum einen, Download- und Parsezeiten zu vermeiden, aber auch eine schnelle Ausführungsgeschwindigkeit zu erhalten, bedingt durch den dahintersteckenden, nativen C-Code. Und da sieht es eigentlich recht gut aus mit APIs und deren Support durch Browser. Folgende Themenbereiche lassen sich heute ohne viel zusätzliches JavaScript gut bedienen:
- DOM-Traversal: Dank querySelector(), querySelectorAll(), closest(), previousSibling(), nextSibling() alles kein Hexenwerk mehr. Hilfreich sind dabei die Tricks, um Element-Collections in iterierbare Arrays umzuwandeln.
- DOM-Manipulation: Auch viel leichter geworden, dank before(), after() oder replaceWith(). Mehrere Styles lassen sich prima „en bloc“ per
Object.assign(elem.style, { color: '#fff', fontSize: '1rem' })mit bestehenden Eigenschaften zusammenmergen. - Event Delegation: Dank nunmehr einheitlicher addEventListener()-Methode, durchgehendem Capture-Phase-Support und Element.matches() recht einfach selbst umzusetzen.
- Umgang mit Arrays: Schon ES5 war ein Meilenstein und es wird nur besser: forEach(), filter(), map(), reduce(), sort(), find(), findIndex(), includes(), every(), entries() und values(). Und dann gibt es da ja noch die Spread- und Rest-Operatoren.
- Umgang mit Objekten: Hier hat ES6 mit assign() und keys() den Grundstein gelegt. Nun wurde u.a. entries() und values() nachgelegt.
- Für Karusell-Slider bieten sich die CSS Snap Points an.
- Für das Schriften-Laden die CSS Font Loading API.
- Für das Lazyloading von Bildern kann man heutzutage gut die Intersection Observer API verwenden.
- Und für weiches Scrollen auf der Seite steht neuerdings die CSS-Eigenschaft scroll-behavior mit dem Wert
smoothzur Verfügung.
[00:57:09] Keine Schaunotizen
- How the minmax() Function Works
- Die CSS Grid Spec führt eine
minmax()-Funktion ein, welche recht praktisch ist. - Lea Verou – CSS Variables: var(–subtitle);
- Wie alle Talks von Lea sehr sehenswert, diesmal mit dem Thema CSS Custom Properties (im Volksmund „CSS Variablen“) zum Thema.
- Essential apps for switching from Mac to Windows
- Tolle Ressource für Entwickler, die an einem Wechsel zu Windows interessiert sind, ergänzend zu dem vor zwei Revisionen schon einmal verlinkten „Turning Windows into an environment ready for modern development„.
- Inside Chrome: The Secret Project to Crush IE and Remake the Web
- Weil Chrome bald 10 Jahre alt wird dachten wir, verlinken wir dieses historische Fundstück.