June 24, 2017

Revision 304: Native Browser-APIs

1 hour 3 minutes

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 smooth zur 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.

...more

View all episodes