Revision 544: Ungeplant gastliches Glücksrad (IV)

Diese Revision war eigentlich mit Thema geplant, aber ein spontaner familiärer Notfall hat unser Programm kurzfristig geändert. Mit dem einen verbliebenen der drei geplanten Gäste, nämlich Florian Geierstanger (Web / Twitter), sind Hans und Schepp daher auf eine weitere Runde Glücksrad umgeschwenkt.

Glücksrad

[00:03:40] <spacer>

Direkt als erstes schickt uns das Glücksrad auf eine Zeitreise weit in die Vergangenheit, zu dem uns bislang unbekannten <spacer>-Element. Dieses Netscape-spezifische Element schien zu formalisieren, was Entwickler*innen damals mit dem sogenannten Spacer-GIF bewerkstelligt haben. Wie so oft, wenn etwas in die Browser eingebacken wird, gab es eine Extra-Fähigkeit obendrauf: So konnte man mit Hilfe des type-Attributs Abstände auch nur in einer Achse erzeugen, was bei Bildern so nicht ging. 2010 schrieb der damalige Mozilla-Entwickler Henri Sivonen anlässlich der Entfernung des dazugehörigen Codes aus Gecko auch etwas über das Element. Schepp denkt an den HTML Tags Memory Test und überlegt, ob es dort wohl akzeptiert wird (wird es nicht).

[00:12:35] <audio>

Als nächstes geht es wieder leicht zurück in die Zukunft, und um das im Rahmen von HTML5 eingeführte <audio>-Element. Hans erinnert sich, dass man es analog zu den <video>– und <picture>-Elementen mit alternativen Dateiformaten füttern kann und der Browser pickt sich das heraus, was er abspielen kann.

Florian findet an dem Element doof, dass sich der Audioplayer beim Navigieren zu einer anderen Seite schließt. Schepp fällt zu dem Thema ein, dass es die Media Session API gibt, die u.a. dieses Problem ausräumen soll. Und Hans wiederum erinnert sich daran, wie er diese API im nie zum Einsatz gekommenen Working Draft Audio Player verwendet hat. Die Macher des Podcasts Wo wir sind ist vorne haben das Problem (für Navigationen innerhalb der Seite) mit turbolinks gelöst.

Desweiteren kommen wir auf Audio-Transkription und mögliche Wege zur Darreichung selbiger zu sprechen.Zwar gibt es den WebVTT-Standard und die dazugehörigen, speziell formatierten .vtt-Dateien für Untertitel und Transkripte, aber leider kann sie das <audio>-Element nicht darstellen. Das macht in sofern Sinn, als dass die Abkürzung „WebVTT“ für „Web Video Text Tracks Format“ steht. Bleibt in so einem Fall also nur, auf ein <video>-Element umzuschwenken. Verrückterweise kann aber auch ein <audio>-Element Video abspielen!

Wir sprechen darüber, dass wir hier im Podcast keine Transskripte haben, was daran liegt, dass die uns bekannten maschinellen Tools große Probleme mit unseren Inhalten haben. Eine manuelle Transkription haben wir bislang nur einmal machen lassen. Die war zwar exzellent, doch stören wir uns an den Arbeitsbedingungen in der Branche (über die wir erst im Anschluss daran erfuhren). Florian bringt eine neue AI-basierte Lösung namens „Whisper“ ins Spiel, die sehr gut funktionieren soll und die wir uns als Hausaufgabe mitnehmen.

Hans fragt, welchen möglichst einfach gehaltenen Audioplayer wir empfehlen können, worauf uns eigentlich nur MediaElement.js einfällt.

Schepp weist auf ein Learning hin, das er vor einiger Zeit hatte, nämlich dass die HTMLMediaElement.play()-Methode im Standard und entsprechend auch in den Browsern 2016 nachträglich auf Promises umgestellt wurde.

Abschließend preisen wir die Tatsache, das man die Abspielgeschwindigkeit von Medien via JavaScript mit dem playbackRate-Attribut beeinflussen kann. Florian empfiehlt dafür ein Browser-Plugin namens „Video Speed Controller“, das dafür auf Seiten die etwas abspielen ein Interface einblendet.

[00:33:07] XMLHttpRequest.status

Gibt bei AJAX-Requests den HTTP-Antwortcode zurück. Ist der Request noch nicht durchgegangen, steht der Wert auf 0 (Null).

Das spannendste an der XMLHttpRequest-API ist seine Entstehungsgeschichte: Das damalige Outlook Web Access Team (was Gmail, nur eben 10 Jahre früher war) benötigte die API, um Inhalte dynamisch nachladen zu können. Weil damals XML allerorten gehyped wurde, und alles mit „XML“ im Namen große Chancen hatte, in den Internet Explorer eingebaut zu werden, kam man auf die Idee, die API mit „XML“ zu prefixen und so in den IE einzuschmuggeln.

Außerdem erinnern wir uns an das Konzept von JSONP, das aber eigentlich überhaupt gar nichts mit der XMLHttpRequest-API zu tun hat, und mit dem man Cross-Origin-Datentransfers vor CORS realisiert hat.

[00:46:13] Das itemtype-Attribut

Dieses HTML-Attribut stammt aus dem schema.org-Vokabular, welches Markup um strukturierte Daten anreichert. Je nachdem, was für eine Art Inhalt man damit auszeichnet, stellt Google diesen in seinen Suchergebnissen angepasst dar. Wie das aussieht, kann man sich in Googles Such-Galerie anschauen.

Schepp empfiehlt, heutzutage statt auf HTML-Attribute besser auf JSON-LD zu setzen, weil man mittlerweile ja eher in Baukästen denn in Seiten denkt und dann ein zentraler Ansatz förderlicher ist.

[00:54:43] Die @font-face-At-Rule

Wir alle kennen diese At-Rule, um den Browser mit Schriften bekannt zu machen, und um diese dort einzustellen. Aber wusstet Ihr auch, dass das, was Ihr dort hinein schreibt, keine Properties, sondern Descriptoren sind? Hierzu fällt uns Tab Atkins-Bittners CSS-Begriffe-Lexikon ein (in welchem Descriptoren allerdings nicht erwähnt werden).

Schepp weist auf die recht neuen Descriptoren ascent-override, descent-override, size-adjust und line-gap-override hin, die dem Finetuning der vertikalen Positionierung innerhalb einer Text-Zeile und des „Durchschusses“ von Schriften dienen, aber vor allem Layout-Shifts beim Austauschen von Schriften per font-display: swap verhindern sollen. Leider ein stark unterdokumentiertes Feature, von dem Schepp nur im Rahmen eines Talks von Jake Archibald gelernt hat. Florian kennt ein gutes Tool, um das einzustellen, nämlich den Fallback-Font-Generator.

In Sachen Performance empfiehlt Schepp, @font-face direkt in das HTML zu packen, um dem Browser frühzeitig die entsprechenden Infos bereitzustellen und ihn die Schriften nicht erst in einem extern liegenden Stylesheet entdecken zu lassen. Von Zach Leatherman gibt es darüberhinaus auch einen spannenden Talk zum Thema „Schriften schnell laden“. Nach seinem Talk haben wir noch ein paar Extrainfos im Rahmen eines Interviews aus ihm herausgequetscht.

Florian bringt das Thema „lokale Schriften“ ins Spiel. Neben der altbekannten local()-Funktion gibt es neuerdings auch die Local Font Access API, mit der man auch schon in gewissen Browsern herumspielen kann. Schepp meint sich daran zu erinnern, dass Figma diese API schon nutzt – aber das stellt sich wohl als Irrtum heraus.