HTML von a bis z-z VI: Inline Text Semantics (Teil 2)

Wo Wir Sind ist vorne, Folge 65. Heute geht's weiter auf unserer Reise durch die Welt der HTML-Elemente. Herzlich Willkommen bei Wo Wir Sind ist vorne. Frontend-Fakten-Frotzeleien. Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung. Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleurin Sarah Groß. Hallo zusammen. Hallo. Hi, Sarah. Na, sind wir heute gut drauf? Nee.

Ich frag deswegen, weil wir beim letzten Stream beide irgendwie so einen Durchhänger hatten. Ach, viel anders ist es jetzt heute nicht. Okay. Aber wir haben ja festgestellt, die Durchhängersituationen leiten immer irgendwie in interessante Deep-Talk-Gespräche. Das war jetzt irgendwie dann auch wieder so. Stimmt. Da war bestimmt ein Zusammenhang. Ja. Also könnte sein. Da haben wir doch was Positives rausgezogen. Ja. Genau.

Ja, dann lass uns doch Flüssigkeiten woanders rausziehen. Wow. Okay, lass uns bezogen. Was für eine Überleitung. Ja, ich bin wieder langweilig. Hast du ein Getränk? Ich hab ein Getränk. Ich hab heute Club Marte Eistee. Wichtig ist mir noch zu sagen, dass da draufsteht auf der Flasche Kraftstoff. Kraftstoff. Ich weiß nicht genau warum. Also das ist wirklich eines, oder wie soll ich sagen? Es sieht aus, als hätte der Praktikant das Logo gemacht. Das sieht irgendwie schon immer so aus.

Vielleicht hat der Praktikant das Logo gemacht oder die Praktikantin. Oder die Praktikantin. Ich möchte ja echt gar nicht genderdiskriminieren an der Stelle. Das ist, egal wer es gemacht hat, es ist besonders. Und es ist schon seit ewigen Jahren so bei dem Eistee. Ich weiß nicht, es ist halt so, als ob jemand irgendwie mal rausgefunden hat, dass er Vektor ... Es sieht aus, als hätte es jemand in Word gemacht, mit so Word-Clipart-Zeug, ja.

Ja, aber es ist eigentlich schlechter als Clipart. Die Cliparts waren meistens, das ist halt so selbst geklöppelt. Ich versuch's mal zu beschreiben. Es soll ein Eisblock, glaube ich, sein, der so von Hand gezeichnet ist, so Vektormäßig. Aber der hat natürlich einen Verlauf von links nach rechts über diverse Blautöne. Und darüber befindet sich eine breitgezogene Ellipse in etwas dunklerem Blau. Auf der steht ICE, also Eis.

Und rechts daneben ein riesengroßes, im Vergleich dazu ein riesengroßes rotes T, in dem wiederum ganz unten, weiß, ganz klein, die Buchstaben E A, also für T. Und unten drunter steht noch Rot-Kraftstoff. Also Rot auf Blau ist auch immer eine sehr beliebte Kombination.

Also man hat wirklich nichts ausgelassen. Also ich kann euch nur empfehlen, falls ihr euch jetzt fragt, was hat er da komisches gerade beschrieben, kauft euch mal oder schaut euch nur mal im Supermarkt an eine Flasche Club Marte Eistee. Ich hab den schon gesucht, bei mir im Edeka gibt's den aber nicht. Also wirklich, ich bin seit zwei Jahren oder so überzeugter Getränke-Lieferanten-Service-Inanspruchnehmer. Ich kaufe Getränke quasi außer Einzelflaschen oder sowas, was ich gerade haben will,

kaufe ich nicht mehr im Supermarkt oder im Getränkemarkt. Ich lasse liefern. Aber der Moritz lässt liefern. Ich lasse liefern. Und das ist sogar, wenn ich jetzt das vergleiche mit dem Einzelpreis für Club Marte-Flaschen, bei mir hier im Supermarkt, da kann man keinen Kasten kaufen, da gibt's nur Einzelflaschen, deutlich billiger. Selbst beim Liefern lassen. Ich glaube, die Kiste normale Club Marte kostet mich bei meinem Lieferanten 15,50 Euro oder 15,30 Euro oder sowas. Exklusiv-Gefangen.

Musst du mir nachher mal sagen, was das ist, damit wir hier keine Werbung machen. Weil bei unserem Speziverbrauch hier wird sich das, glaube ich, auch bald lohnen, es liefern zu lassen. Doch, doch, das ist ganz toll, wenn man es geliefert bekommt. Ich kann das nur empfehlen. Und ich war auch dann erstaunt, dass es eigentlich nicht teurer ist, als wenn ich es im Getränkemarkt kaufe. Genau, das sind 0,5er-Club Marte-Flaschen, 20 Stück. Kannst du dir ausrechnen.

Dann kostet mich die Flasche unter einen Euro, zwischen 15 und 16 Euro, die Kiste für 20. Und wenn ich eine 0,33er-Flasche Club Marte, also noch kleiner, bei mir im Supermarkt hier einzeln kaufe, kostet die, glaube ich, 1,30 Euro mittlerweile. Ja, ist sogar billiger. Also kann ich nur empfehlen, guck mal, und da kann ich ganz unverdient mal Werbung machen. Ich kann mal Werbung machen für die Seite, wo ich bestelle, das ist nicht der Lieferant. Das heißt nämlich wir-liefern-getränke.de.

Und das ist quasi so eine Portalseite, wo Getränkelieferanten ihr Angebot einstellen können, aber die halt selbst keinen Online-Shop haben. Die haben quasi dann darüber einen Shop. Und das heißt, du hast dann, so wie ich gerade gesagt habe, sucht euren lokalen Getränkelieferanten, hast du dann da. Genau, das ist es. Du gibst dann da deine Adresse ein und dann siehst du, wer liefert denn von diesem Portal alles zu dir. Und das sind bei mir so drei oder vier, habe ich zur Auswahl.

Und aber nur einer davon hat vernünftiges Marte-Angebot, also auch verschiedene Sorten. Genau, auch die Club Marte Zero mittlerweile, die es eigentlich ja gar nicht gibt. Grüße an Manuel Matusewitsch. Genau, also das ist total cool. Und die haben auch alle unterschiedliche Preise. Also letzten Endes ist das ein ganz normaler Getränkelieferant.

Der kommt dann da mit seinem LKW oder mit seinem kleinen Lastfahrzeug angefahren und mit einer Sackkarre und bringt dann die Kisten und holt das Leergut auch mit. Und das zu einem verdammt guten Preis, wie ich finde. Und wieso soll man das selbst schleppen? Auch hier, obwohl ich nicht so zentral wohne in Karlsruhe, habe ich vier Anbieter zur Auswahl, wo ich gucken kann, was hier mit Preisen besser ist.

Einfach mal gucken, Preise checken und dann unterstützt ihr auch eure lokalen Getränkelieferanten. Sehr schön. Aber noch was für die Shownotes. Noch was für die Shownotes, genau. Ich habe auch was Nichtalkoholisches. Ich mache jetzt auch schon wieder Erwerbung für die Edeka. Es gibt so ein amerikanisches Regal, wo es so Riesesachen manchmal gibt. Also immer wechselnd auch Sachen, die es nicht immer im Sortiment gibt.

Und die haben auch immer wieder so Getränke, die es bei uns in Deutschland nicht gibt. Und unter anderem habe ich jetzt hier eine Fanta Pineapple & Grapefruit. Blaue Fanta-Dose mit Ananas und Grapefruit. Da bin ich mal gespannt. Guck ich mal, was gibt es denn da so und dann nehme ich mir ab und zu was mit. Also, das klingt gut. Ich habe meine Flasche leider schon offen gehabt. Ich musste vorhin schon ein bisschen Zucker zu mir nehmen. Also dann anstoßen ist eh schwierig.

Natürlich, kein Problem. Guck mal, meine Dose klingt wie eine Flasche. Klingt fantastisch, oder? Wir haben durch das Portal mal wieder angestoßen. Wir sitzen ja nicht im gleichen Raum, aber zum Anstoßen haben wir so ein kleines Portal geschaltet und das funktioniert dann immer ganz gut. Schmeckt tatsächlich echt ganz gut. Und ich hätte jetzt nicht gedacht, bei einem amerikanischen Getränk, dass da tatsächlich Fruchtsaft drin ist. Also 5% Fruchtsaft aus Konzentrat. Immerhin.

Weil normalerweise kaufst du sowas und dann steht da irgendwie Passionfruit und dann enthält kein Fruchtsaft. Passionsfrucht? Frisches Obst? Nee, aber mir schmeckt das tatsächlich ziemlich gut. Gut, aber bevor wir jetzt zum Getränke-Podcast montieren, würde ich sagen, starten wir mit der Retro, oder? Warum nicht? Okay, na gut. Ja, wenn es sein muss, dann starten wir mit Inhalt. Naja, dazu muss ich sagen, wir waren ja mal bei der GPN und haben da einen Vortrag gehalten.

Das ist schon wieder abgeschweift, ne? Und das wurde hinterher unter anderem auf YouTube veröffentlicht, aber auch auf dem CCC-Portal. Aber bei YouTube kann man halt Kommentare drunter schreiben. Und das Ding ging, glaube ich, eine Stunde oder so. Und irgendjemand hat in die Kommentare geschrieben, Inhalt beginnt bei 20 Minuten. Irgendjemand hatte sich beschwert, ich bin bei Minute 19 ausgestiegen, nur gelabert. Und ab Minute 20 ging es halt los mit Inhalt.

Aber ich finde, das gehört doch auch irgendwie einfach dazu. Also, ich meine, das sind halt wir. Also, wer irgendwie nur harte Fakten reingetrümmert kriegen will, der ist halt falsch. Der kann Chat-GPT fragen, das labert einen dann auch voll. Ja, Chat-GPT, da geht es in meinem zweiten Retro-Punkt auch sogar drum. Aber jetzt komme ich erst mal zu meinem ersten. Und zwar merkt man, dass ich wieder am Arbeiten bin seit Mai.

Und jetzt auch tatsächlich öfter wieder Beiträge habe, auch im Stream und so, die mit Technik zu tun haben. Und ich habe diese Woche zum ersten Mal Container-Querys verwendet. Wir haben ja über Container-Querys hier auch schon gesprochen. Und jetzt habe ich sie zum ersten Mal selber eingesetzt. Und zwar ging es, du weißt es schon, ich habe es im Stream schon angesprochen, um so eine Buchungsbox auf einer Seite für den Kunden. Und es ist noch nicht ganz klar, wo die überall hinkommt.

Ob die später als Element auf alle Seiten oben irgendwie kommt oder ein Header. Oder nur auf die Startseite als Element, als Widget, das man setzen kann. Das ist jedenfalls WordPress-Kontext, das ist ein Shortcode. Das heißt, ich weiß nicht, wo dieses Ding am Ende vielleicht auftaucht. Und dann dachte ich, Mensch, das ist doch jetzt der perfekte Einsatzzweck für Container-Querys. Ich möchte, dass dieses Ding unabhängig, wo es ist, einfach in der darstellbaren Breite immer gut angezeigt wird.

Sprich, dass die Felder bei zu wenig Platz untereinander sind, statt nebeneinander, wenn der Platz nicht ausreicht. Und dann habe ich zum ersten Mal Container-Querys eingesetzt. Und das ist eigentlich echt simpel und echt cool. Aber ich bin gleich am Anfang über was gestolpert, was mir nicht bewusst war. Und zwar kann ich den Container, also das Element, dem ich das Container-Attribut in CSS gebe, das kann ich selbst nicht stylen im Container-Query selbst.

Also ich kann da jetzt nicht sagen, das Container-Element kriegt einen roten Background kleiner als 300 Pixel oder so. Und was ich dann gemacht habe, ist ein kleiner Ausweg mit einem Hass-Selector.

Das heißt, ich habe, ich sage, jedes Element, das als direktes Kind-Element diese Buchungsbox hat, also Doppel-Punkt-Hass-Klammer auf, spitze Pfeil rechts und dann die ID oder die Klasse von diesem Buchungscontainer, das bekommt den entsprechenden Containernamen über CSS, den ich dann später in dem Container-Query benutzen kann. Und damit bin ich eigentlich ganz zufrieden. Und inzwischen ist ja Hass-Unterstützung mindestens genauso wie Container-Query-Unterstützung.

Von daher habe ich da jetzt eigentlich wenig Bedenken gehabt, das so anzuwenden. Aber ich habe zusätzlich trotzdem noch die Regeln in einem Media-Query dupliziert. Und wir hatten es jetzt im Stream auch schon drüber und haben da so ein bisschen mal Feedback eingeholt, wie würden es die anderen machen, bin ich einfach zu übervorsichtig. Wir sind noch so die Generation, keine Evergreen-Browser. Wir müssen immer noch gucken, dass wir irgendwie Omas altes Nokia 3210 noch unterstützen.

Den Webbrowser. Und ich weiß nicht, ich kann das selbst schwer einschätzen, ist das jetzt noch notwendig, weil halt irgendwelche alten Opera Minis oder was das nicht unterstützen. Und in dem Fall wäre es halt einfach wirklich blöd oder irgendwelche alten iPhones vielleicht auch. Muss ja nichts ganz Absurdes sein, aber einfach irgendwie ein iPhone, das halt schon, sagen wir mal, drei Jahre alt ist und vielleicht nicht mehr die aktuellste Software, den aktuellsten Safari erhält oder so.

Und dann funktioniert es da nicht. Und das sieht dann einfach, wenn es nicht angepasst ist, kacke aus, weil es einfach abgeschnitten wird und man es nicht richtig benutzen kann. Ich muss kurz korrigieren. Also Apple-Geräte, die kriegen normalerweise so sechs bis sieben Jahre lang Feature-Versions-Updates. Es gibt bestimmt Leute, die immer noch ein altes iPhone haben. Ist nicht jeder so, dass er immer das gleiche Gerät braucht.

Also ein altes iPhone wäre die Kategorie sechs, sieben, acht Jahre und älter. Gut, okay, das ist schon. Und jetzt habe ich es natürlich nicht gleich parat, aber wie ist denn der Stand? Can I use von Hasselector? Da sind wir Safari 15, also März 22. Das heißt, die letzten iPhones der letzten sechs Jahre, sagst du, müssten das haben. Dann ist die Frage, forciert Apple Updates? Oder kann das sein, dass Leute einfach den aktuellen Safari halt nicht aktualisiert haben?

Der Safari ist Bestandteil des Betriebssystems. Das heißt, ich kann nicht sagen, ich updatet den Safari nicht, wenn ich mein Betriebssystem updatet. Der ist da fest mit einverdüngelt. Das ist keine App in dem eigentlichen Sinne, der gehört fest mit dazu. Es gibt aber allerdings mit Sicherheit Menschen, die das Update nicht machen. Apple forciert es nicht im Sinne von Abstichtag X musst du das Update machen.

Ich weiß nicht, wie das bei Android ist. Aber sie nerven dich schon damit, dass du das machst nach einer Weile. Also die werden dich nicht am Tag, wo das Update rauskommt, bekommst du die Meldung. Aber nach einer Weile später sagen sie dann so, wir haben jetzt eine neue Version. Es wäre gut, wenn du mal updaten würdest. Und das wird dann schon penetrant irgendwann. Und sie selbst, also ich glaube, keiner hat die Statistik dazu außer Apple selbst.

Und sie selbst sagen immer wieder, dass sie sehr schnell Update-Zeiten haben. Ob das stimmt, das muss man ihnen jetzt einfach glauben oder halt nicht. Aber was sagen sie davon, eine andere Aussage zu machen? Keine Ahnung. Wenn man sich mit der Konkurrenz vergleicht und sagt, guck mal, wie zerfleddert die Android-Welt ist. Das wollte ich nämlich auch gerade sagen, zu Android selbst, weil du gesagt hast, ich weiß nicht, wie es da aussieht.

Es gibt ja nicht das eine Android, das ist ja das Ding. Es gibt so viele Flavor von den unterschiedlichen Herstellern. Und die haben ja auch sehr unterschiedliche Politik. Also bei mir war es zum Beispiel so, dass mein Handy sich letztens über Nacht neu gestartet hatte. Und ich sehe das dann daran, weil sich erst alles langsam aufbaut, wenn ich das erste Mal entsperre. Und dann stand oben auch hier System Update Installed. Das ist mir vorher nicht passiert mit MUI.

Und jetzt bin ich auf diesem HyperOS von Huawei. Beziehungsweise Poco X3. Da ist mir das jetzt passiert. Also das hängt eben, wie gesagt, damit zusammen, was du da für ein Android drauf hast. Aber gut, wenn Chrome tatsächlich auch unabhängig davon aktualisiert, ist es eigentlich im Hintergrund automatisch. Wenn man das jetzt nicht irgendwie ausgestellt hat. Das heißt, wenn Safari da auch gut ist, dann bin ich ja guter Dinge, dass ich theoretisch das Media Query gar nicht bräuchte.

Aber für den Fall der Fälle habe ich es jetzt mal gemacht. Es war nicht viel an CSS, was ich da duplizieren musste. Aber generell fände ich es irgendwie cool, wenn man das irgendwie vermeiden könnte, da alles duplizieren zu müssen. Sondern halt sagen könnte, und das kann man ja mit einem Bildsystem auch machen. Aber trotzdem ist es halt im CSS zweimal drin. Aber für Backwards-Compatibility geht es halt auch nicht anders, als dass du es noch mal reinkopieren musst.

Jedenfalls ist es eine coole Sache. Egal, wo das Ding jetzt ist, es wird richtig dargestellt. Wenn ich es mir leisten könnte, das haben wir, glaube ich, auch im Stream schon besprochen. Wenn ich ein bisschen Zeit hätte und es mir leisten kann zeitlich, würde ich immer versuchen, echte Zahlen zu erfassen von der jeweiligen Webseite. Weil eine Can-I-Use-Statistik ist schön und gut für irgendwie weltweite Zahlen. Ich weiß nicht mal genau, wo die Zahlen herkommen bei Can-I-Use.

Kann man bestimmt irgendwo nachlesen. Und trotzdem ist es aber auch so, dass das überhaupt keine Aussage darüber trifft, was jetzt wirklich die Realität ist auf der Seite, für die du was baust. Weil es kann sein, dass das irgendwie Kunden sind mit ganz speziellen Systemen. Es geht um Reisen, es geht um Reisen in ein bestimmtes Land. Das heißt, klar, weißt du nicht, wie sind die Leute drauf?

Kann es alle möglichen Überraschungen geben, je nachdem, wo du dich befindest oder was für ein Content du anbietest? Ich glaube, es kann ganz interessante Sachen geben, die man da drin noch findet in den Statistiken. Früher war es halt so, man hat einfach überall Google Analytics reingeworfen. Unabhängig davon, ob der Kunde das jetzt unbedingt wollte oder nicht. Man hat es ihm halt gleich mit reingeklopft und gesagt, guck mal, da kannst du in die Statistiken schauen.

Jetzt mit DSGVO und so wollten viele das rausgeschmissen haben. Aber auch nicht irgendwie Geld in die Hand nehmen, dass wir da irgendwas anderes integrieren, Matomo oder so was. Dementsprechend fehlen uns da oft die Zahlen, die wir früher noch eher gehabt hätten, weil wir es einfach standardmäßig mit reingeklopft haben. Sorry, jetzt schweife ich noch weiter aus.

Aber so als Agentur eine Matomo-Instanz zu betreiben, die dann überall für alle Kunden verwendet wird und dann jeweils eine eigene Seite angelegt wird und die dann Berechtigung kriegen, nur um die Statistiken ihrer Seite anzuschauen, wäre ja schon ein gangbarer Weg. Wäre ein gangbarer Weg, ist aber trotzdem wieder eine Drittanbieter-Anbindung und man müsste das halt entsprechen in den Cookie-Notices und so weiter, was da halt alles mitkommt.

Nee, du kannst Matomo so konfigurieren, dass es keine Cookies verwendet zum Beispiel. Die gehen natürlich bestimmte Daten verloren, aber so was wie Browserdaten, das, was dich jetzt interessiert, oder wie groß ist das Display. Das haben wir tatsächlich sogar, ja. Wir haben ja theoretisch, wenn wir selber hosten, auch Zugriff auf die ganzen Server-Statistiken. Also da kommen wir schon an Daten ran. Also ohne Cookie, genau, das würde auch so gehen.

Du kannst natürlich auch Log-Analyse machen, aber das geht auch ohne Cookie und du kannst Matomo tatsächlich, die haben das schon verstanden, wie man das macht, kannst du so konfigurieren, dass es keine Cookies verwendet. Wir haben auch eine eigene Matomo-Instanz. Also wir haben das auch und wir können das auch anbieten, nur wenn wir das anbieten und wenn wir das bei uns hosten, dann möchten wir natürlich was dafür haben.

Na klar. Im Vergleich zu Google Analytics und da sind viele KundInnen einfach nicht dran interessiert. Also ich habe mein eigenes Matomo am Laufen für meine, schon lange, da hieß es noch pwik. Ja, genau, bei uns auch. Ich glaube, die SAP-Domain bei uns ist auch noch pwik.irgendwas. Und das habe ich halt in allen meinen Sachen drin, aber ich habe das sehr, sehr datensparsam eingestellt.

Also es verwendet keine Cookies, es respektiert den Do-Not-Track-Header und ich glaube, es beschneidet sogar irgendwie die IP-Adressen. Also mich interessiert auch das alles gar nicht. Mich interessieren schon die Wege, die jemand nimmt über eine Seite und das geht halt nur, also ich kann keine wiederkehrenden BesucherInnen identifizieren, weil kein Cookie gesetzt ist. Beziehungsweise das müsste man dann mit Local Storage oder so, müsste das doch eigentlich gehen, oder?

Ja, aber auch das IP, es geht ja gar nicht mehr nur um Cookies. Auch solche Storage-Geschichten, dachte ich auch, das kann man schön umgehen, aber es ist trotzdem eine Daten, die du speicherst. Also wiederkehrende BesucherInnen kann ich nicht identifizieren, das ist etwas, was auf jeden Fall verloren geht.

Das ist aber so ziemlich das Einzige, was mir verloren geht von den Sachen, die mich potenziell interessieren würden, weil ich kann trotzdem die Browser-Statistiken sehen und kann sehen, ah ja, okay, da kommt niemand mehr mit dem Internet Explorer. Gut, hätte mich sowieso nicht interessiert. Das ist das Wichtigste. Oder wie neu sind denn die Browser? Ich gucke aber, ehrlich gesagt, selten rein. Ich sehe dann grob ungefähr da drauf, oder zumindest wie viele Page-Impressions und so was.

Das ist ja schon interessant. Aber wie gesagt, viele KundInnen interessiert das überhaupt gar nicht. Wer guckt sich was an? Also, wenn ich ein neues Blog-Artikel schreibe ... Schon sehr abgeschwurft. Na gut, dann schwurfen wir wieder mal zurück. Genau, was ich noch sagen wollte, schreibt doch mal in die Kommentare, wie ihr das handhaben würdet. Nutzt ihr Container-Querys schon? Und wenn ja, habt ihr zusätzlich noch Media-Querys, oder seid ihr mit der Bildschirmbreite noch ...

Also, gar nicht mal von dem Container abhängig, sondern generell einfach, wenn weniger als die Breite, dann verhält sich das anders. Macht ihr das, oder sagt ihr, pff, dann sieht's da halt doof aus. Und ich nutze nur State-of-the-Art-neuestes CSS. Und was mich noch interessieren würde, gibt es vielleicht noch irgendeinen cleveren Trick, den Container selbst zu stylen? Genau, vielleicht war ich da zu doof, aber ich hab auch tatsächlich an anderen Stellen gefunden, sorry, das geht ja nicht.

Das haltet ihr von dem Hass-Workaround, weil, genau, da hatten wir's auch noch drüber, ich könnte auch einfach ein zusätzliches Container-Element außenrum basteln, das nur den Zweck hat, als Container zu dienen. Aber das fand ich in dem Fall halt irgendwie doof, weil einfach unsemantisch und überflüssig. Wir wollen ja eigentlich weg von Dingen, die nur zum Styling dienen. Wir wollen ja eigentlich hin zu semantischem HTML und das nur drin haben, was wir auch tatsächlich benötigen. Genau.

Gut, so, dann. Nächster Retro-Punkt. Ich hangel mich heute in meinen Retro-Punkten ein bisschen an Dingen entlang, die ich gebloggt habe, unter anderem. Also gebloggt, nicht gebloggt. Gebloggt, gebloggt. Ist eigentlich der oder das Blog? Das Log, oder? Ja, aber Blog. Von Logbuch, also eigentlich das Blog, aber ich sag auch der Blog. Aber eigentlich ist es auch egal.

Ja, also, ich habe zum Beispiel eine Sache getan, nämlich ich wollte mal wieder so einen Server oder so was Low-Leveliges einfach zu bedienendes installieren, womit ich irgendwie einen Server bei mir aufsetzen kann auf dem Mac. Jetzt kann man natürlich das so machen, dass man für jedes Projekt irgendwie einen eigenen Node-Server irgendwie hochzieht. Das machen ja viele mittlerweile so.

Ich habe aber ganz viele so alte Projekte, wo noch irgendwie PHP drin rumgammelt und wo es irgendwie angenehm ist, wenn man einfach sagt, ich habe einfach einen Server und dessen Home-Folder ist irgendwie ein Projekt-Ordner und in dem sind halt tausend Sachen drin und alles, was mit PHP funktioniert, funktioniert dann halt, wenn ich den starte und ich dann in den Browser auf einen bestimmten Pfad gehe und dann funktioniert das einfach alles mit dem PHP.

Und ich muss da jetzt nicht irgendwie jedes Mal was Eigenes irgendwie zusammenbasteln. So, und dann habe ich mich erinnert, oder es gibt so verschiedene Varianten, man kann es irgendwie selbst basteln. Der Mac hatte auch mal ein Apache und ein PHP selbst mit dabei, aber hat jetzt nur noch den Apache und das PHP, glaube ich, nicht mehr, was so fest mit eingebaut war. Unter Linux zum Beispiel oder Ubuntu war das nie ein Problem, es war einfach alles quasi fast schon da.

Und auf Windows nutzt man ja XAMPP, oder das war zumindest das, was ich früher immer ... Oder inzwischen Laragon, da hatte ich es auch mal drüber, dass ich das inzwischen nutze. Aber XAMPP ist somit das verbreiteste, denke ich mal.

XAMPP ist, vielleicht für alle, die es nicht wissen, ist so ein kleines Programm, das starte ich und dann habe ich da drin so ein paar Konfigurationssachen, aber da kann ich einfach sagen, starte mir mal den Apache, starte mir mal PHP, starte mir mal MySQL oder MariaDB und dann läuft das einfach. Und wenn ich es nicht mehr brauche, dann schieße ich das wieder ab.

Und dann kann ich halt vielleicht noch konfigurieren, wo greift denn das drauf zu oder wo ist denn der Ordner, wo das Zeug rumliegt, was ich dann irgendwie unter Localhost Pfad oder so dann angezeigt bekommen möchte. So, und dann, ich hatte so was Ähnliches hier auch laufen, aber das hat nicht so richtig funktioniert, das war langsam. Ich weiß gar nicht mehr, wie hieß denn das? Ah, LAMP hieß das, glaube ich. Nee, warte, nee, MAMP, ich bin falsch. MAMP natürlich für einen Mac, ne?

Genau, MAMP hieß das. Das hatte ich eine Weile am Laufen, aber das war irgendwie, ich weiß nicht genau, was das für eine komische Magie im Hintergrund gemacht hat, aber ich hatte den Eindruck, das kopiert jedes Mal die ganzen Files von irgendwo weg und woanders hin und dann sind mal diese Files übrig geblieben und dann hatte ich irgendwie dreimal meinen Projekteordner irgendwo gefunden und dachte, was ist denn das?

Also, vielleicht habe ich auch irgendwas falsch gemacht, aber das hat für mich nicht so richtig gut funktioniert. Und dann habe ich nochmal geguckt, weil ich dachte schon, XAMPP gab es doch auch mal für einen Mac. Aber ich habe mich dann auch wieder erinnert, dass ich das schon mal gefunden hatte, aber davon abgeschreckt war, dass es sah so aus, als ob es uralt ist, weil da stand irgendwie, ich weiß gar nicht mehr, was war denn das Problem? Ich muss es gerade selbst nochmal gucken.

Ach so, ich wollte gerade nicht runterladen, egal. Da stand irgendeine komische Versionsnummer und Release 2017 oder irgendwie sowas. Und da dachte ich so, nee, so was Altes will ich jetzt nicht haben. Habe jetzt aber rausgefunden, ich lag da falsch. Das ist schon durchaus aktuell und auch aktuelle PHP-Version usw. Und habe das jetzt nochmal installiert. Das hat schon ein bisschen, ja, das Startprogramm, das heißt dann OSX irgendwas.

Das ist ganz merkwürdig, das habe ich jetzt auch umbenannt, weil es mir auf den Keks geht. Egal, aber das funktioniert tatsächlich genauso, wie ich das unter Windows in Erinnerung hatte. Und das heißt, ich habe so ein kleines Fenster, das aufgeht und ich kann dann sagen, starte mit dem Server, starte PHP usw. Funktioniert auch soweit so gut.

Aber was ich auch damals schon auf meinem Ubuntu immer haben wollte, war, ich will nicht meine Dateien irgendwo hinlegen, wo normalerweise der Server seine Dateien liegen hat, also irgendwo in irgendeinem Systemdings da, z.B. in den Docs oder sowas, sondern ich will eigentlich meine Dateien irgendwo in meinem Home-Folder liegen haben, weil meine Projekte einfach in meinem Home-Folder liegen, da wird alles gebackupt usw. Das heißt, man muss dem Ding das noch ein bisschen beibringen.

Und ich will jetzt gar nicht in die tiefen Details gehen, da gibt es einfach, beim Apache gibt es sowas, das nennt sich User-Folder, glaube ich. User-Home-Directory, User-Dir, genau, User-Dir. Und dann kann man das auf ein anderes Verzeichnis setzen.

Ich gehe jetzt nicht in die Details, wie man das einrichtet, aber das habe ich dann damit gemacht, das habe ich mir so aus verschiedenen Tutorials zusammengesucht, weil ich keins gefunden habe, dass genau das alles beschrieben hat, was ich wollte und darüber habe ich einen kleinen Blogartikel geschrieben, der kommt in die Show Notes, der heißt Setting up XAMPP on macOS Sonoma with local user folder. So viel gelabert, wenig Inhalt, wie es von uns gewohnt sei.

Ihr kriegt bei uns immer, was wir euch nicht versprochen haben oder so. Keine Ahnung. Gut, ich habe vorhin schon gesagt, bei mir geht es um Chat-GPT und eigentlich darum, dass wir Chat-GPT loswerden wollten beziehungsweise mal was anderes ausprobieren wollten. Bei Chat-GPT, am Anfang war es super und dann zwischendrin wurde irgendwie so viel zensiert, weil oh, Copyright und AI übernimmt die Welt, dass dann die Antworten total katastrophal waren.

Also Sachen, wo du ganz sicher weißt, das habe ich schon mal so in die Richtung eingegeben und da kam Code, den ich einfach benutzen konnte, der funktioniert hat, kam dann plötzlich A4-seitenweise gefühlt einfach nur Text, der dir das beschrieben hat, was du machen könntest. Das war zwischendurch wirklich kaum noch benutzbar. Dann kamen auch einfach wirklich falsche Sachen bei raus und so weiter. Da hat sich irgendwie viel getan und gewandelt und die Nützlichkeit war da sehr schwankend.

Und auch jetzt ist es immer noch so, dass manchmal es sich so festfrisst irgendwie und dann partout nicht das macht, was du sagst, was es bitte machen soll. Das hat uns irgendwie genervt und dann dazu noch die ganzen Ausfälle, weil immer mal wieder plötzlich JetGPT hängt und dann auch immer gleich mal irgendwie für eine Viertelstunde, halbe Stunde und das ist halt in der täglichen Arbeit echt blöd. Und dann haben wir uns überlegt, gut, was gibt es sonst noch so?

Und mein Bruder hat dann Cloud AI mal ausprobiert und hat gemeint, oh, das sieht eigentlich ganz gut aus, lass uns doch mal JetGPT, die Premium-Geschichte, die Subscription kündigen, weil geht ja monatlich, und stattdessen mal Cloud AI ausprobieren. Und dann haben wir das am Anfang erst mal gemacht mit der Nicht-Premium-Version und man muss sagen, das UI wirkt aufgeräumter, auch wenn es noch ein bisschen buggy ist.

Also ich hab manchmal Probleme, Antwortteile einfach rauszukopieren, vor allem Code-Antworten. Im ganzen Block ist kein Problem, da ist so ein Copy-Button und der wandert auch mit beim Scrollen. Das ist so eine ganz kleine Feinheit im Unterschied zu JetGPT, aber es ist nervig, immer wieder hochscrollen zu müssen zu dem Code-Block. Und das war gleich schon mal so was so, ah cool, ich kann da runterscrollen zu der Erklärung und dann komm ich trotzdem so ... Was hat jetzt mein Ultraschall gemacht?

Okay, ich dachte grad, die Aufnahme wär weg. Aber ist sie zum Glück noch da. Nö, bei mir läuft auf jeden Fall noch was. Ja, bei mir jetzt auch, das war nur irgendwie, hat sich's komisch hingescrollt, egal. Ähm, genau, also war's eine Kleinigkeit, aber wo man gleich schon mal dachte, ah cool, da haben sie gleich mitgedacht. Also insgesamt aufgeräumter. Und ich hab's dann, wir haben dann Premium mal abonniert für einen Monat jetzt zum Testen.

Weil wir dachten, ähm, beziehungsweise festgestellt haben, okay, das Anfragenlimit ist relativ gering für so einen Arbeitstag. Also ich hatte das irgendwie nach einem Problem, das ich so hin und her geschrieben hab, war quasi schon sicher, deine Anfragen sind bis heute Nachmittag um drei irgendwie aufgebraucht. Also haben wir das jetzt mal, das Premium freigeschaltet und damit gearbeitet. Und ich hab dann auch JGPT und Clode.ai gegeneinander antreten lassen.

Also wirklich genau das Gleiche gegeneinander machen lassen. Und da muss man sagen, JGPT versucht manchmal schon, so ein bisschen out of the box zu denken. Also es ging in dem Fall um WordPress und PHP. Und ich hab da geschrieben, was ich brauch. Und JGPT hat zum Beispiel dann gleich schon den JavaScript-Teil fürs Frontend auch schon mitgeliefert, obwohl ich danach gar nicht explizit gefragt hatte. Mir ging's erst mal nur ums Backend.

Und das ist zwar irgendwie cool, dass das da weiter mitdenkt, aber auf der anderen Seite hatte ich explizit nur nach dem Backend gefragt. Und die JGPT-Antwort war dadurch einfach total aufgebläht. Also da war viel mehr drin, als ich eigentlich brauchte. Und es war schwierig, dann rauszusuchen, so was ist jetzt für mich grade das Wichtige und was nicht. Und dann hab ich festgestellt, Clode.ai macht vieles am Anfang richtiger oder, sagen wir mal, zielgerichteter, brauchbarer.

Aber es verrennt sich dann teilweise in den gleichen Details wie JGPT auch. Also so dieses, du sagst dann, mach das, und es macht dann trotzdem das Gegenteil und berücksichtigt bestimmte Dinge nicht, die du vorher eigentlich schon gesagt hast, und so passiert da genauso. Also ich kann jetzt gar nicht sagen, es ist deutlich besser oder JGPT ist deutlich besser. Es hält sich, glaub ich, so ungefähr die Waage.

Was jetzt aber für mich total der Dealbreaker war, dass ich heute dann beim Arbeiten so gegen Nachmittag, Spätnachmittag, plötzlich die Meldung wieder erhalten hab, deine Anfragen sind aufgebraucht. Und dann hab ich gesagt, das kann doch nicht sein. Also es war vorher schon an einer anderen Stelle so, dass das Frontend noch nicht mitbekommen hatte, dass wir Premium-Subscription gemacht haben. Und ich hab dann bekommen, so ja, die maximale Länge der Konversation ist erreicht.

Dann hab ich aber neu geladen und konnte dann trotzdem die Konversation fortsetzen. Und dann kam die Zeit auf, wo das nicht gerafft hat, dass wir jetzt halt Premium haben. Und dann dacht ich, ist das jetzt wieder so? Aber neu geladen, neu geladen. Und dann haben wir mal recherchiert. Und es ist tatsächlich so, dass Premium fünfmal so viele Anfragen zulässt, wie die Nicht-Premium-Version. Was kostet's? Ich glaub, das sind 20 Euro im Monat. Und es ist halt ...

Gut, wir haben zu zweit dran gearbeitet, aber mein Bruder hat jetzt nicht so viel gemacht heute. Und wenn das für mich nicht für einen Arbeitstag reicht ... Ich hab's zwar schon sehr intensiv heute genutzt, aber dann ist es irgendwo lächerlich. Und dieses Limit haben wir bei Chat-GPT noch nie gesprengt. Weiß nicht, ob's da eins gibt überhaupt bei Premium oder nicht. Aber jedenfalls fand ich das also wirklich ein No-Go.

Und da müssen die auf jeden Fall nachlegen, weil sonst ist das für uns einfach nicht nutzbar. Genau. Und das war's eigentlich schon dazu. Ich hab noch eine Frage. Ob du weißt, was sich denn dahinter verbirgt? Also, haben die ein eigenes Model? Ist ein eigenes Model, ja. Es gibt auch verschiedene zur Auswahl. Ist das auf irgendeinem Open-Source, was man kennt? Das kann ich dir gar nicht sagen. So genau hab ich mich damit noch gar nicht beschäftigt.

Ich hab einfach nur gedacht, wir probieren das mal aus. Es trainiert ja jetzt nicht mal so eben jeder sein Large-Language-Model, dass das dann auch vernünftig funktioniert. Das wollen wir mal irgendwie rausfinden. Wir benutzen das jetzt auch als Zeit dieser Woche. Es gibt CLOUD 3.5, CLOUD 3.0 Opus, CLOUD 3.0 HLQ, Fastest Model for Daily Tasks, Accelerated Writing and Complex Tasks, Most Intelligent Model. Ah, warte mal. Ich geh grad so mal zu Wikipedia.

Es ist a Family of Large-Language-Models developed by Anthropic. Also wohl doch selber trainieren. Oder Anthropic ... na ja. Generative Pretrained Transformers. Okay, mhm. Das ist einer der wenigen Player, würd ich sagen. Es gibt, glaub ich, nicht so viele, die so was ... die wirklich selbst was komplett selbst basteln. Okay. Interessant. Also, das kannte ich noch gar nicht. Also, lohnt sich auf jeden Fall mal. Jetzt will ich's auch gar nicht ausprobieren.

Ich hab's grad versucht, aber dann musste ich ... Das wollte dann sofort meine Handynummer haben, und dann hab ich mir gedacht, weiß ich nicht, Digga. Also, ich würde sagen, es lohnt sich schon, das mal auszuprobieren. Auch wirklich grad im direkten Vergleich zu gucken, oh, okay, das war jetzt tatsächlich besser als JGPD, oder da haben sie die gleichen Probleme, oder vielleicht ist es sogar schlechter in manchen Belangen.

Und wenn man die Kohle hat, kann man natürlich auch sagen, da ist ein weiterer Anbieter, der so ein bisschen diese Monopolstellung von JGPD, was ja in aller Munde war, so ein bisschen aufbricht. Und das ist ja auch immer gut, belebt das Geschäft, wenn's da ein bisschen Konkurrenz gibt. Genau. Wir foreshadowen schon das Geil-Teil, by the way. Ja, ja, ja, stimmt, stimmt. Gut. Genau. Wenn ihr AI blöd findet, dann ... na ja, dann ist das so. Genau. Pech. Dann tut's mir ein bisschen leid.

Ähm, okay. Aus der Reihe Blogartikel, die ich geschrieben hab, seit der letzten Podcast-Folge, kam noch was. Wir haben vorhin schon drüber geredet, ob man das jetzt noch macht oder ob wir jetzt darüber reden oder nicht. Und zwar war es so, dass ich irgendwie noch mal das Bedürfnis hatte, Menschen RSS-Feeds näherzubringen. Und ich glaube, es ist leider natürlich, wenn ich was in meinem Blog schreibe, ist es mehr so Preaching to the Choir.

Also, das heißt, ich schreib da so was, wo dann Leute sagen, jawoll, super, die aber eh schon überzeugt waren von der ganzen Sache. Und zwar RSS-Feeds. Ähm, genau. Ich wollte einfach noch mal erklären, wie funktionieren RSS-Feeds so grob für Menschen, die damit noch nicht in Berührung gekommen sind, weil's mich einfach unglaublich ankotzt, dass alle nur von Algorithmen irgendwie ihren Kram sortiert bekommen im Netz. Und das muss nicht sein.

Und es gibt schon so lange eine Technologie dafür, um News zu empfangen, wo kein Algorithmus mir reinpfuscht oder sagt in der Reihenfolge, oder ich jubel dir übrigens noch diese Werbung jetzt mal unter, weil ich das jetzt grad super finde. Oder vor allem Pushen von extremistischem Content, das ist das, was mich eigentlich am meisten nervt an den Algorithmen. Es wird ja extremistischer Content gepusht ohne Ende. Also, ich hab's ja auch schon öfter mal drüber.

Über TikTok und über Instagram-Reels und auch die YouTube-Startseite. Ich kann es wirklich reproduzierbar, wir können es gerne im Stream mal machen oder so, ich kann es reproduzierbar zeigen. Ich geh in ein neues Browser-Profil, starte eins von diesen Dingern, und es dauert irgendwie drei Empfehlungen, und dann kommt der erste extremistische Scheiß, der mir sagen will, dass Ausländer umbringen doch irgendwie eine super Idee ist oder dass die AfD die beste Partei ist.

Übrigens, falls ihr so was, solches Gedankengut in euch habt, dann brauch ich euch hier nicht als Zuhörende. Tschüss, tschüss, das war's. Diese Folge ist jetzt hier für euch vorbei, für alle anderen dürfen weiterhören. Ähm, genau, also Content, um den Bogen noch mal zu kriegen, Content, der nicht von irgendwas gefiltert wird, der, wo ich selbst bestimme, was für Newsquellen ich anzapfe, ähm, und niemand, und einfach die Reihenfolge einfach, die Chronologie ist der Artikel.

So, und das, das leistet RSS, oder das leisten Feeds schon seit über 20 Jahren, und irgendwie ist es, irgendwie ist es, sind die, sind die aus der Mode gekommen, das macht irgendwie keiner mehr, Leute sagen, es gibt ja auch, gibt ja auch Leute, die sagen, ich konsumiere so viel News, ohne Algorithmus kann ich dem nicht Herr werden.

Kann ich nachvollziehen, aber dann würde ich einen Algorithmus, also, ich kann das nachvollziehen, dass man einen gern hätte, aber dann möchte ich einen, wo ich nachvollziehen kann, was er tut. Also, dass er vielleicht irgendwie ein Popularitätsranking macht, so und so viele Leute lesen das, ähm, aus den Newsquellen, die du ausgewählt hast, aber ich krieg da nix reingespült, was ich nie haben wollte oder so, naja.

Das machen ja die Algorithmen eigentlich auch, nur wenn du halt ein neues Profil anlegst, dann hat der Algorithmus noch nix, worauf er sich verlassen kann, und dann spielt er dir halt mal alles aus allen Ecken aus und guckt, worauf du am meisten reagierst. Das Problem mit journalistischen Inhalten ist halt, dass du ja vielleicht auch drauf reagierst und in die Kommentare schreibst, wie scheiße du das findest.

Das Problem ist nur, dass der Algorithmus das nicht auswertet, sondern der Algorithmus sieht nur, oh, Interaction, das findet er wohl gut, da zeig ich mehr davon. Fantastisch. Na ja, also der Artikel. Eine kleine Erklärung, was RSS ist, was es heißt, wie es funktioniert, wie man, was für Tools man dafür verwenden kann, ähm, wie man Feeds finden kann auf Webseiten, äh, wie man subscriben kann, was für Vorteile es hat. Und, ähm, warte mal, hab ich das eigentlich in dem Artikel mit drin?

Ah ja, genau. Und noch eine kleine Empfehlung, was, was ich auch noch gar nicht so lange kenne. Ähm, wenn's Seiten gibt, die kein RSS-Feed anbieten, dann kann man sich eventuell von rss.app einbauen lassen von der Seite. Selbst wenn's keine ... Also, die versuchen dann quasi mit irgendwelcher Magie einen RSS-Feed, äh, dir zu generieren aus den Inhalten, ähm, ohne dass es einen gibt. Das kann ich hier vielleicht noch mal an der Stelle empfehlen.

Genau, das war der zweite Artikel, den ich da, den ich da geschrieben hab. So. Du brauchst mir das auch noch nicht schonen, oder? Und, äh, wobei, ich hab das nur einmal kurz getestet. Das ist jetzt keine super Empfehlung, sondern das ist nur so ein, äh, manche Seiten, die man, die man haben will, äh, haben, haben kein Feed. Äh, ich hab sogar Feeds gefunden von Zeit.de, obwohl die offiziell, glaub ich, nirgends mehr verlinkt sind.

Mhm. Ähm, sie funktionieren aber, und sie sind nach Ressorts aufgelistet, und das ist sehr, sehr gut. Ja. Bei einem, bei einem großen, bei einer großen, äh, Zeitung kann man, möchte man vielleicht nicht alles in einem großen Feed drin haben. Ja. Sondern man möchte sagen, na ja, ich hätt gern ein Politik-Ressort, und ich hätt gern, Sport interessiert mich zum Beispiel nicht, und da kommt ja dann schon relativ viel rein, genau. Ja, cool.

Ja, also, äh, dieser Artikel, den könnt ihr, ist auch ganz kurzweilig, ganz schnell, ähm, falls ihr nicht wisst, was RSS ist oder mal es ausprobieren wollt, ähm, dann lest euch den mal durch, äh, installiert den Feed-Reader, euer Wahl, und, äh, los geht's. Ja, unser Podcast ist ja übrigens auch über ein Feed, äh, verbunden. Ähm, mit, mit allen möglichen, äh, Seiten, äh, Podcast-Seiten, wo ... Also, es ist ja dieselbe Technologie, die da für verwendet wird. Also, das ist es einfach.

Das ist es einfach, so. Ähm, und speaking of Sachen, die ich gemacht hab, ich hab heute noch was gemacht, spontan. Ähm, und zwar hab ich mir überlegt, äh, was für andere Möglichkeiten, was für andere Präsentationsformen für meinen Accessibility-Cheat-Sheet, das immer noch relativ beliebt ist, ich seh's an den Aufrufzahlen jetzt seit über sechs Jahren, ähm, gäb es denn noch? Und dann dacht ich mir, äh, als Poster wär das vielleicht auch nicht schlecht.

Man könnte das auch sich als Poster irgendwo hinhängen. Und, äh, da ich, in Ermangelung eines eigenen Shops von Spreadshirt, mach ich so was jetzt immer in den, äh, in den Wo-Wir-Sind-Es-Vorne-Shop einfach mit rein. Weil der Spread, bei Spreadshirt kann man auch, äh, Poster bestellen. Und das hab ich jetzt einfach mal ein bisschen aufbereitet für ... Ihr seht irgendwie, die Qualität ist echt mies von den Vorschau-Bildern. Ich kann euch versprechen, äh, ich hab's in hoher Qualität eingeliefert.

Ähm, wenn's schlecht gedruckt wird, dann zurückschicken und mir Bescheid sagen. Äh, auf jeden Fall gibt es mein Accessibility-Cheat-Sheet so für, äh, zum an die Wand hängen, jetzt als Poster zum Bestellen. Äh, Link kommt auch in die Shownotes.

Äh, ja, dacht ich mir, wär doch irgendwie noch eine nette Sache, ähm, bis ich dann irgendwann, das erzähl ich dir im Nachgang noch, irgendwann, es gibt, es gibt noch, es gibt noch was, was ich mir vorstellen würde an Design, was in so eine Richtung geht, was man sich aufhängen könnte. Ähm, aber ich bin noch nicht dazu gekommen seit acht Jahren. Von daher ... Aber ich will mal bei dir abfragen, ob du es cool findest. Okay. Bin ich gespannt. Ähm, müssen wir mal, müssen wir mal.

Aber das kann ich jetzt noch nicht so sagen, sonst macht's jemand anderes vor mir und das will ich nicht. So, retrofertig von meiner Seite aus. Ja, die wird vielleicht, vielleicht länger als das Thema, gucken wir mal. Ach was, nein. Das ist die Property der Woche. But first. Genau, aber jetzt kommt erst mal noch die Property der Woche. Ups, nein, ich will nicht alle laufenden Recordings stoppen. Danke. Ähm ... Falsche, er hat einmal die falsche Taste gedrückt.

Ähm, genau, es gibt mal wieder eine Property der Woche. Und zwar ist das diesmal Element.scrollIntoViewIfNeeded. Da bin ich heute über die Konsole rausgekommen. Also das Scroll-Interview, das kannte ich schon, aber wer es noch nicht kennt, damit kann ich, wie der Name sagt, sehr sprechender Methodenname, super, ein Element in die, in den Viewport-Bereich, in den aktuellen, reinscrollen lassen.

Und ich kann dann sogar über ein Optionsobjekt mit Behavior Doppelpunkt Smooth sagen, dass das Scrollen so animiert laufen soll und nicht einfach nur hinspringen soll. Das ist eigentlich echt ganz cool, das hab ich da intensiv genutzt. Ich hatte diese Buchungsbox, und je nachdem, da kommen erst mal die Ergebnisse, und dann wählt man die aus, und dann kommt ein Formular.

Und dann hab ich halt, das wird dann immer so kleiner, und damit das dann aber auch ausgerichtet ist, weil da kann natürlich viel oder wenig drin sein, das weiß ich nie, scroll ich danach, warte ich mit AnimationEnd, beziehungsweise TransitionEnd in dem Fall, mit dem EventListener, bis das fertig ist, und dann lass ich da hinscrollen. Und dann hab ich in der Konsole was ausprobiert, und das kannte ich noch nicht.

Und ich hatte auch tatsächlich schon den Fall, dass es manchmal so wegen ein paar Pixeln da rumgesprungen ist, obwohl eigentlich das Element sichtbar war, aber halt irgendwie wegen dem ScrollMargin oder warum auch immer dann trotzdem meinte, es muss da noch mal hinscrollen. Und dann hab ich das gesehen, dachte, ja, ist ja cool, aber wie ist denn da die ... Weil da kommt gleich auf der NDN-Seite oben, rote Box, non-standard, und hier wird nicht für alle funktionieren und so.

Und dann hab ich mal geguckt, can I use? Und außer Firefox, je, da brauchen wir jetzt gar nicht von reden, können das aber eigentlich alle und auch schon sehr lange, also Safari seit 2011, Edge seit ... Äh, Edge natürlich erst seit es Edge auf Chromium-Basis gibt, aber Chrome mindestens auch seit 2011, Support Unknown für Chrome unter 15, aber also wirklich sehr lange. Hier Android-Browser 2.3 ab seit 2010.

Und ich kannte das noch nicht, weil's wahrscheinlich kein Standard ist und man es dementsprechend nicht so häufig irgendwo findet in Antworten. Aber fand ich ganz cool und hab mir dann nur gedacht, na ja, gut, Firefox komplett ignorieren ist auch blöd. Man könnte natürlich sagen, okay, wenn die Funktion ScrollIntoViewIfNeeded existiert, dann nimm die, ansonsten nimm das normale ScrollIntoView. Ähm, aber vielleicht gibt's noch andere Möglichkeiten.

Dann bin ich gekommen auf element.checkVisibility. Aber auch das ist kein geeigneter Workaround, weil checkVisibility überprüft nur, ob das Element theoretisch sichtbar ist. Aber nicht, ob's im Viewport ist. Aber nicht, ob's im Viewport ist, genau. Also ist es nicht, ähm, äh, hat es einen Container, der irgendwo auf Display nah ist oder so, also ist es ... Genau, ist das Element theoretisch ein sichtbares Element, unabhängig des Viewports? Deswegen geht das auch nicht.

Was man stattdessen benutzen kann, ist getBoundingClientRect, weil die Unterstützung ist ja schon recht gut mittlerweile. Und zumindest auch im Firefox. Und dann halt überprüfen, ob es innerhalb des Rahmens von WindowInnerHeight und WindowInnerWidth liegt. Aber, ähm, also ein bisschen schade, dass Firefox da nicht mitzieht, obwohl's das jetzt schon seit, was hab ich gesagt, 2010 war, glaub ich, das Älteste, also jetzt 14 Jahre schon gibt und das nicht adaptiert hat.

Aber gut, das ist eben kein Standard und so ist das mit nicht-standardisierten Sachen. Ähm, die werden dann halt entweder adaptiert oder nicht. Und in dem Fall ist es leider im Firefox nicht. Aber wie gesagt, mit dem Workaround, dass man ja das normale ScrollInterview benutzen kann, ähm, und das jetzt nicht dramatisch ist, wenn das halt dann trotzdem scrollt, sondern nur halt eigentlich so eine kosmetische Sache. Ähm, ja, find ich das eigentlich eine ganz coole Sache.

ScrollInterview an sich ist auch schon cool, find ich. Das ist so ein nettes Feature. Als ich das entdeckt hab, hab ich mich gewundert, dass es so was Cooles überhaupt gibt. Weil normalerweise dachte ich immer so, so was muss man doch immer selbst von Hand klöppeln, wenn man's haben will. Weil's so ein bisschen Magie mitbringt. Ich erinnere mich an Zeiten, und das muss also vor 2010 gewesen sein, wo man das noch gemacht hat. Man hat geguckt, wo ist das?

Und da gab's halt auch noch kein Get Bounding Client. Ich würde tippen, dass ich's vor vier Jahren oder so entdeckt hab und dann mal eingebaut hab und dann auch total mich drüber gefreut hab, dass es die Animation dafür gibt. Dass es nicht einfach hinspringt, sondern dass es wirklich scrollt. Weil das kann echt nützlich sein. Und das hat man halt echt früher, ne? Du musstest gucken, wo liegt dieses Element genau? Das war dann wirklich gar nicht so einfach.

Ich weiß noch, als man diese Bounding Racks da noch nicht so einfach bekommen hat vom Browser, da musste man halt wirklich gucken, okay, ich summiere quasi die Position aller darüber liegenden Elemente und die Scrollposition davon summiere ich auf und guck dann, wo ist das jetzt und wohin muss ich scrollen. Und dann muss ich natürlich noch gucken, wenn ich noch einen Header hab, der irgendwie fix drüber liegt, dann muss ich das mit einberechnen und so weiter und so fort.

Inzwischen ist das mit, wenn ich dann noch Scroll Margin eingebe, Scroll Margin Top über CSS, weil es war in dem Fall auch so, oben ist so ein Sticky Header. Und wenn's da hinspringen soll, soll der natürlich nicht drüber liegen. Und das hat man dann so im Job eingebaut von, keine Ahnung, wie viel RAM, wie hoch das Ding ist und mit dem Hinscrollen. Es hat einfach zack, eine Zeile Code, eine Zeile CSS und es hat einfach genauso funktioniert, wie man's haben will.

Ja. Vielleicht an der Stelle noch, weil's mir jetzt grad noch in den Kopf kam, was, was ich finde, ein bisschen thematisch dazu passt, CSS Scroll Behavior Smooth. Mhm. Das funktioniert ja dann, wenn man Ankerlinks auf der Seite hat und ein Ankerlink angesprungen wird, und dann wird der Smooth angescrollt genauso mit demselben Effekt wie bei Scroll Interview. Dass man das per JavaScript abfangen müsste, ja. Genau, und das ist meiner Meinung nach auch ...

Ich find ja, die Defaults bei solchen Sachen in Browsern, die sind ja oft nicht gut. Ja, aber die liegen halt daran, dass man bestehendes Verhalten nicht ändern wollte. Aber die sind gut, die Scroll Defaults. Ich mein jetzt auch so, wie's dahin scrollt und wie lang's braucht. Äh, das find ich genau richtig. Das fühlt sich für mich richtig an. Sowohl bei Scroll Interview als auch bei Scroll Behavior Smooth. Smooth. Smooth Criminal. Genau. All right. Jetzt hab ich grad Scroll Beaver eingegeben.

Scroll Beaver? Scroll Beaver. Was? Statt Scroll Behavior wollt ich bei Can I Use eingeben. Okay. Gut, das kann man auch mal machen. Gut, ja, dann war das die Property der Woche. Und wir kommen tatsächlich jetzt ... Hier ist WWSIV mit dem Tagesthema. Ich wollte bewusst auf jeglichen Übergang verzichten, aber es passt halt auch so nicht, wenn man sagt, dann kommen wir jetzt, hier ist WWSIV. Aber gut. Ich glaube, entweder überarbeiten wir die Jingles irgendwann mal, dass es besser passt.

Nee, ich glaube, das gehört einfach dazu. Oder wir leben einfach damit, dass wir Versager sind. Genau, würd ich auch sagen. Ich glaube, das ist auch in Ordnung. Heute geht's weiter mit Teil zwei der Inline-Elemente. Uns ist aufgefallen, es ist echt noch eine Menge vor uns. Es kommen noch ein paar Folgen zu den Inline-Elementen. Aber jetzt bringen wir erst mal diesen Abschnitt zu Ende. Vielleicht sterben wir auch vorher an Altersschwäche. Oder es geht dem Podcast einfach nicht mehr.

Aber wir fräsen uns weiter durch. Und wir beginnen heute, ich hab's noch mal umsortiert, dass es so ein bisschen nach dem Alphabet geht. Wir beginnen heute mit Q. Ach so, weil so weit hinten sind wir schon. Ich dachte grade, okay, du hast es nach Alphabet sortiert, wir beginnen mit Q. Ja, wir beginnen mit Q. Aber heute beginnen wir mit Q, weil beim letzten Mal haben wir mit M aufgehört. Also, mit Mark, glaub ich, haben wir aufgehört. Zumindest war das das Letzte.

Und na ja, danach kommt halt N. Ja, da ist nicht mehr so viel. Es gibt kein Element mit N, also kommt halt Q. Ach, scheiße. Aber Inline, das ist nur bei Inline-Elementen. Genau, es gibt kein Inline-Element. Ja, korrekt. Äh, ja, genau. Das Q-Element ist für Inline-Zitate gedacht. Und darüber hab ich tatsächlich jetzt noch mehr rausgefunden, als ich gedacht hätte. Weil es ist, von denen, die ich heute vorstelle, ist es eins der Interessanteren, muss ich sagen. Es hat mich ein bisschen überrascht.

Also, letzten Endes geht es darum, ein Zitat, das innerhalb eines Textblocks drin ist. Also, wenn ihr ein eigenes Zitat habt, das für sich stehen soll, dann nehmt ihr Blockquote. Das hatten wir, glaub ich, schon. Q ist für ein Zitat innerhalb eines Textes. Also, das Beispiel auf der MDN ist hier. When Dave asks Hal to open the port bay door, Hal answers, I'm sorry, Dave, I'm afraid I can't do that. Im Kontext. Was ich nicht darüber wusste, ist, dass es automatisch Anführungszeichen macht.

Das war mir nicht klar. Das überrascht mich auch gerade, und ich find's total cool. Und was ich natürlich dann als Erstes ausprobieren musste, und deswegen hab ich auch eine Mini-Codepen-Demo gebastelt, ich wollte wissen, ja, Mensch, okay, der macht jetzt hier irgendwie Anführungszeichen, aber woher weiß der denn, welche Sprache es ist? Und die Anführungszeichen werden tatsächlich nach der Sprache, die eingestellt ist, verändert.

Ich habe auch ausprobiert, das Leng-Attribut auf dem Q-Element selbst zu ändern. Das hat keine Auswirkungen gehabt. Ah, okay. Was ja eigentlich blöd ist, ne? Also, es könnte ja ein Zitat ... Ich hab vielleicht französischen Text, den ich zitiere, und will da die Anführungsstriche mit diesen Doppelpfeilen haben. Also, genau, das hab ich ausprobiert. Schade. Im Codepen ist standardmäßig en als Sprache eingestellt.

Und ich hab dann das mal verändert auf dem HTML-Element, also hab Leng.de gesetzt, und dann wurden tatsächlich deutsche Anführungszeichen gesetzt. Ich hätte jetzt echt erwartet, vielleicht geht's mit einem Rapper, das hab ich nicht ausprobiert, obwohl es irgendwie drumherum ist. Aber eigentlich will ich es im Element selbst haben. Es könnte ja sein, dass das Zitat selbst in einer anderen Sprache ist, als der Text drumherum.

Also, wenn ich schon anfange mit automatischen Anführungszeichen, dann könnte ... Ah, mit Rapper funktioniert's. Mit Rapper funktioniert's? Okay, das heißt, man bräuchte noch ein Extralelement. Normalerweise hast du wahrscheinlich ein Paragraph außenrum. Und du willst ja eigentlich ... Die Frage ist halt, wenn ein französisches Zitat in einem deutschen Text eingebettet ist, würde ich aber trotzdem deutsche Anführungsstriche erwarten.

Wenn ich aber einen Paragraph hab, der quasi aus einem französischen Buch ist, und da wird direkte Rede zum Beispiel verwendet. Das ist für Konstruierte so gar nicht geht. Ja. Also, das find ich eigentlich schon sinnvoll. Ich hätte trotzdem wahrscheinlich erwartet, dass ich mit dem lang Attribute auf dem Q-Element direkt was verändern kann. So, also weitere interessante Sachen zum Q-Element ist, das Q hat ein eigenes Attribut, das ich jetzt mal als Site aussprechen würde, also C-I-T-E.

Und darin sollen Quellenangaben hinterlegt werden. Allerdings muss ich sagen, ich hab jetzt mit dem Screenreader auch ausprobiert, weil ich gedacht hab, na ja, was bringt denn das jetzt, diese Quellenangabe? Was tut der Browser damit? Oder was kann ich denn damit jetzt noch machen? Oder ist das wirklich nur für die Suchmaschine beispielsweise oder für irgendeinen Parser? Es ist offenbar nur für Parser, weil Screenreader interessieren sich dafür null. Die lesen keine Quellenangabe vor.

Voice-Over auf dem Mac interessiert sich dafür nicht. Und ja, ansonsten hab ich jetzt auch nichts gesehen, auch nicht, dass es im Title oder sonst irgendwo angezeigt wird. Ich glaube, das können wir schon mal wegnehmen, das ist so ein Thema, das sich so durchzieht durch alle Inline-Elemente, dass die zwar schön semantisch sind, aber in der Regel für Screenreader keinerlei Bedeutung haben. Ja, teilweise. Wir kommen noch zu anderen.

Also ich kann jetzt auf jeden Fall sagen, das Q-Element hat zum Beispiel, und daran sieht man dann auch schon, dass selbst wenn ein Screenreader wollte, dann müsste er sich schon ein bisschen verrenken. Es hat keine implizite ARIA-Role. Es ist einfach generic, als wäre es halt irgendwas. Also von daher ist es auch gar nicht angedacht, dass es dafür irgendwie eine semantische, also es sieht für mich so aus, dass es dafür eine semantische Aussage haben soll. Ähm, ja, keine Ahnung.

Ähm, ja, das dazu. Das Q-Element. Mu. Und damit zum nächsten kuriosen Element, das wir beide noch nicht so wirklich kannten, beziehungsweise das sind drei Elemente, die wir da gleich zusammenfassen, weil die zusammengehören. Und zwar sind das Ruby, RT und RP. Und bei Ruby hab ich gleich an die Programmiersprache gedacht. Aber es geht um was ganz anderes, und zwar um was, was mir dann doch tatsächlich näher ist, als dass Ruby die Programmiersprache mir wäre.

Es geht um die Auszeichnung von ostasiatischen Zeichen, also Ideografen, sprich japanisch, chinesisch, alles was eben nicht arabische, nicht lateinische oder sonstige Schriftzeichen benutzt, sondern eben asiatische. Ähm, und da der einzige Zweck dazu ist wohl, dass man die Aussprache, also es gibt ja so eine Romanisierung der Zeichen, ja, also zum Beispiel Qin für Herz auf Chinesisch wird auf, in der romanisierten Umschreibung XIN geschrieben.

Da gibt's einen Standard, wie man das eben ausspricht. Ähm, wenn wir schon eben ja abschweifen, Qingdao, das chinesische Bier, das man vielleicht so kennt, das wird auf der Flasche Qingtao geschrieben. Und das liegt eben daran, dass diese Standardisierung nicht immer so war, wie sie ist. Also früher hat man, keine Ahnung, vor 200, 300 Jahren, haben Leute noch anders das Chinesische umschrieben, als das heute ist. Heute ist man da näher dran.

Es gibt das internationale phonetische Alphabet und so weiter. Und es gibt eben diese standardisierte Romanisierung. Aber das nur völlig am Rande, einfach weil ich das Wissen hab und gerne damit rumschwerfe. Ja, das war spannend, danke. Genau, also ja, damit kann man eben die Aussprache oder zum Beispiel auch die Übersetzung des Zeichens direkt über das Zeichen setzen. Und das ist natürlich schon ganz cool. Es ist ein sehr eigener Anwendungsfall, sehr, wie soll ich sagen, begrenzt.

Man denkt so, krass, dafür gibt's was Eigenes. Aber man merkt da auch wieder so ein bisschen so den Ursprung von HTML eben aus dem wissenschaftlichen Bereich. Ja, und vernetzte Dokumente und Zitate und Verlinkungen untereinander. Und da passt das ja natürlich eigentlich ganz gut rein, dass ich eben, wenn ich wissenschaftlich was darstellen will über die Sprache, muss ich das in irgendeiner Form machen können.

Und in dem Fall brauche ich dann eben nicht mal eigenes CSS, sondern der Browser kann das, wenn er's unterstützt, eben einfach so darstellen. Also es wird dann einfach der Text, also ich hab, ich soll's nicht mal beschreiben, wie's überhaupt aussieht. Ich hab grad die Demo mal aufgemacht, um's mir anzugucken. Ich hab, es gibt das Ruby Tag, das ist außenrum erst mal. Und dann schreibe ich da direkt rein die chinesischen Schriftzeichen in dem Fall, die ich haben will.

Und dann, das lass ich jetzt mal noch weg, das RP. Und dann schreibe ich RT. Und da steht zum Beispiel Ashita. Also das muss dann wohl japanisch sein. Das benutzt ja teilweise die gleichen Schriftzeichen wie das chinesische, aber teilweise auch die ... Es gibt ja irgendwie Hiragana und Katakana, aber mit Japanisch kenn ich mich nicht aus. Ähm, und ... Dann, äh, genau. Steht da eben Ashita, und das steht dann über diesen beiden chinesischen Schriftzeichen, oben drüber.

Und da es Browser gibt, die das nicht unterstützen, gibt es sogar noch ne Möglichkeit, ähm, ein Fallback darzustellen. Also indem man zum Beispiel sagt, ich möchte das einfach in Klammern dahinterstehen haben, hinter den Schriftzeichen. Und dann kann ich die öffnende Klammer in einem RP-Tagpaar, schon gefasst, davor schreiben, vor die Übersetzung oder vor die Aussprache. Und die geschlossene Klammer eben wieder auch im RP-Text außenrum.

Sprich, Browser, die es nicht unterstützen, die ignorieren einfach sowohl das Ruby-Tag als auch das RP-Tag, als auch das RT-Tag, weil sie damit nichts anfangen können. Und schreiben das einfach alles als Text hintereinander. Genau so will man es eigentlich auch haben. Und Browser, die es können, die setzen eben, die ignorieren das RP-Tag. Also da ist wahrscheinlich im Browser-Style-Sheet dann ein Display-None-Implizit draufgesetzt.

Das eben dann diese Klammern oder was auch immer ich als Fallback habe, dann ausblendet. Und es stellt dann nur das RT-Tag dar und das platziert's eben oben drüber. Magic. Ich guck jetzt grad mal, ob ich schnell im Web einmal nackt was dazu finde. Weil wir haben vorhin schon drüber gesprochen, wie viel das wohl verwendet wird. Ja, das wär interessant, wenn du da so schnell was findest. Ja, ich glaube, ich ... Ja, so schnell geht's, glaub ich, nicht. Nee, ja, kein Stress.

Ich hab auch noch ein bisschen was dazu zu sagen. Also Browser-Unterstützung ist eigentlich auch relativ gut. Chrome seit Version 5, Firefox seit 38. Also Safari seit 5. Das wird eigentlich überall unterstützt. Also dieses RP-Tag, ja, keine Ahnung, braucht man eigentlich wahrscheinlich gar nicht groß. Außer vielleicht für Screenreader. Weil da sind wir nämlich schon wieder bei dem Punkt. Es gibt keine implizite ARIA-Rolle. Weder für das Ruby noch für das RT noch für das RP.

Das heißt, das ist einfach für Screenreader ein ganz normaler Text. Und der Screenreader würde dann eben diese Fallback-Geschichte auch auslesen. In dem Fall, ja, ob er dann sagt, Runde-Klammer geöffnet, Runde-Klammer geschlossen, weiß ich jetzt nicht. Müsste man ausprobieren. Hängt vielleicht auch vom Screenreader ab. Ähm, genau. Ich hab tatsächlich was gefunden. Ja, sehr nischig. Äh, und zwar ... Ach, wieso Mobile Pages, das versteh ich jetzt grad nicht. Bin ich hier ...

Naja, also ich hab hier eine Statistik, die ist aus dem Web-Almanack von 2021. Und da ist eine Tabelle mit der, wie viel ... Ja, es geht tatsächlich darum, auf wie vielen Seiten bestimmte Tags vorkommen. Und wenn ich das jetzt richtig interpretiere hier an der Stelle, dann sind das 0,02 Prozent. Okay. Ja, krass. Ich geh mal da in die Daten rein, weil offenbar gibt's da tatsächlich ... Ah ja, tatsächlich, da gibt's eine Liste. Oh, das packen wir mal in die Show Notes. Das ist geil.

Das ist so eine Google-Doc-Liste mit allen HTML-Tags. Warte mal, das pack ich dir da noch mal rein. Das ist, glaub ich, generell für unsere Liste hier interessant. Aber für das Ruby-Tag find ich's jetzt besonders interessant. Deswegen würd ich's mal da dazu packen. Da auch im Trello schieben. Wenn ich in der Lage bin, es an die richtige Stelle zu schieben. Dann noch eins hoch, genau. Ja, ja, schon. So, wenn man jetzt da mal guckt, da hab ich hier die Pages.

Und da scroll ich jetzt mal ganz nach unten. Also, warte mal, vielleicht muss ich mal nachsuchen. Ruby. Wieso geht das jetzt grad nicht? Sorry, jetzt hier debugge ich noch selbst. Äh, ich ... Ich find das Ruby jetzt aber auch nicht. Was ich find, ist das rp und das rt. Und die sind bei ... Ach doch, hier, Ruby. 0,0 Prozent, 0,0 Prozent, 0,0 Prozent. Ah, perfekt. Also quasi ... Was ist das, was pct? Pages, total. Also wirklich, äh, sehr wenig.

Also auf wahrscheinlich so zehn Millionen Seiten, würd ich jetzt mal tippen. Ach ja, warte mal. Das HTML-Element 7,4 Millionen. Äh, ja. Aber ich weiß auch nicht, was ... Da hinten steht so eine Prozentzahl. Das ist witzig. Das muss doch eigentlich fast ein Fehler sein. rt und math haben nämlich exakt die gleiche Anzahl. Aber diese 6.286.373, die tauchen überall wieder auf. Das ist komisch. Aber hinten steht so eine Prozentzahl.

Da müsste man sich mal genauer mit beschäftigen, wie dieses Ding genau funktioniert. Aber die Verbreitung scheint sehr wenig zu sein. Das probier ich im Nachgang auf jeden Fall noch mal. Aber ich find's abgefahren, was das Ding tut. Weil das ist ja schon nicht trivial. Text übereinandersetzen einfach mal so, find ich jetzt. Ja, wer weiß, wofür man das noch missbrauchen kann. Bei Can I Use sieht man, dass der Support fast überall als partially markiert ist.

Und das liegt wohl daran, dass bestimmte Sachen wie, ähm, ob der Text jetzt von oben nach unten läuft oder von links nach rechts, das wohl nicht überall berücksichtigt wird. Also so ein paar Unterschiede gibt's da noch. Und zu dem Foreback-Element RP, da kann man mal auf die MDN-Seite schauen. Da sieht man ganz schön unten als letztes Beispiel, wie das quasi dargestellt werden würde in einem Browser, der es nicht unterstützt.

Da sieht man einfach das Zeichen und hintendran in Klammer die Aussprache. Und das nächste Zeichen in Klammer die Aussprache. Da hab ich auch wieder was gelernt. Ich weiß nicht, ob ich's jemals einsetzen werde, aber es gibt's, es ist standardisiert, es ist gut unterstützt. Ich bin froh, dass es bei dir gelandet ist, weil du dich ja tatsächlich mit solchen Sachen auseinandersetzt. Weil du erstens angefangen hast, zu Chinesisch zu lernen, wenn ich mich recht erinnere.

Und auch wegen OpenType.js, wo du's ja auch mit Schriften zu tun hast. Wo ja eigentlich ist ja schon ... Wo auch solche Didi-Direction-Gedöns zum Einsatz kommen. Von daher hat's ganz gut gepasst. Als ich die MDN-Seite dann geöffnet hab und gesehen hab, oh, chinesische Schriftzeichen. Hat gar nichts mit der Programmiersprache zu tun. Was ist eigentlich der Python-Element? Und das PHP-Element. Als ich angefangen hab, da gab's ja noch VB-Script. Das gibt's immer noch.

Echt? Kann man das noch nicht ... VB-Script kann man noch nicht mehr benutzen, oder? Weiß ich nicht, du musst nur ein altes Betriebssystem aufsetzen. Und noch ein altes Netscape oder ein IE4 oder was. Irgendwo gibt's doch bestimmt noch so einen verfilzten Rechner mit lauter Wollmäusen im Lüfter, der ... Wuuuuh! Wo man den Power-Knopf drücken muss, damit er so richtig in Gang kommt. Nee, den Turbo-Knopf. Eine Sache noch, bevor ich zum Ende komme.

Es gibt, hab ich dann noch entdeckt, bei der MDN, einen CSS-Text-Transform-Value, wo die Unterstützung aber ziemlich schlecht ist. Und zwar Text-Transform full-size-kana. Und kana sind eben, also es gibt irgendwie Katakana, Hiragana, das weiß ich nur so grob im Japanischen. Das eine sind eben die rein japanischen Schriftzeichen, das andere sind die, die aus dem Chinesischen entlehnt sind. Ich weiß jetzt nicht, welche was sind. Aber ich glaub, kana sind diese japanischen.

Und die gibt's wohl in der Groß- und Kleinschreibung, und damit kann man forcieren. Also normalerweise Text-Transform ja capitalize, uppercase, lowercase und so weiter. Und dann gibt's eben noch full-width und full-size-kana. Full-width weiß ich jetzt auch nicht, was das genau machen soll. Das hab ich mir jetzt nicht angeschaut, weil es mir jetzt nur um das ging, was eben damit eine Rolle spielt. Und da kann man dann sagen full-size-kana.

Das kann interessanterweise, wenn ich's richtig im Kopf hab, nur der Firefox. Guck noch mal unten hier bei der Unterstützungstabelle. Full-size-kana, ja, das kann der Firefox, das kann der Safari. Firefox, Android, Safari, iOS, ja. Also die beiden können das. Wer's braucht, bitte. Genau, und damit ... wäre das jetzt schon zu Ende. Du hast noch einen Bonus. Ich hab grad noch ein Bonus-Element eingetragen. So ein Opa erzählt vom Krieg, obwohl er selbst nicht dabei war.

Und zwar, weil ich bin grade drauf gestoßen in der Tabelle von dem Webalmanack, wo beim Ruby-Element 0,02 Prozent stand und RT, da war das TT-Element dabei. Und dann war ich neugierig, was ist das eigentlich? Weil das hab ich auch noch nie gehört. Und im MDN-Artikel steht gleich richtig fett obendrauf deprecated. Und das heißt das Teletype-Text-Element. Ist dafür da, einen Inline-Text darzustellen, der dem User-Agent seinen Default- Monospace-Font verwendet.

Und es wurde verwendet oder wurde erfunden, um Text darzustellen, als wär's im Fixed-Width-Display und wie Teletype-Text-Only-Screen-Line-Printer. Also, das klingt nach sehr alt. Also, irgendwie so, um Standardmonospace-Font darzustellen, aus irgendwelchen Gründen. Verrückt. Ja, ich will jetzt auch gar nicht weiter tiefer einsteigen, fand ich nur interessant, hab ich gesagt TT, das hab ich noch nie gehört. Nee, nur Teletext. Also, einfach nicht verwenden, aber ja.

Aber unterstützt halt Chrome 1 und Firefox 1. Krass. Ja, letzten Endes ist es ja wahrscheinlich nur Styling. Das hat ja keinen semantischen Wert, ziemlich sicher nicht mehr, selbst wenn's das mal hatte. Und dann ist es nur irgendein Styling, was du natürlich mit CSS machen kannst und auch solltest. Was eine schöne Überleitung. Zu dem S-Element, was jetzt als nächstes kommt. The Strike-Through-Element.

Und jetzt könnte man annehmen, ja, das ist jetzt irgendwie wieder wie bei HTML5, es gibt ja keine Elemente mehr, die für Styling sind, sondern es ist ja alles nur noch Semantik in Anführungsstrichen. Man soll ja Styling mit CSS machen. Deswegen ist das S-Element nicht einfach nur durchgestrichener Text, auch wenn der Browser das standardmäßig so darstellt, sondern es ist jetzt umgewidmet worden zu Inhalt, der nicht länger gültig ist auf einer Seite. Allerdings nicht für Korrekturen.

Für Korrekturen gibt es Dell und Inst. Ich weiß gar nicht, das kommt, glaube ich, noch in unserer HTML-Reihe. Das sind Extralelemente, die sind dafür zu sagen, hier ist was gelöscht worden und hier wurde was eingefügt. Also tatsächlich um eine Korrektur, irgendwas wurde ausgetauscht. Aber ich möchte jetzt nicht es einfach tauschen, sondern ich möchte es sichtbar zeigen, dass was ausgetauscht wurde. Egal, darum geht's nicht.

Es geht um Inhalt, der nicht mehr gültig ist, aber auf der Seite trotzdem bleiben soll aus irgendwelchen Gründen. Das kann ja sein, dass irgendeine Info in einem Artikel nicht mehr stimmt oder irgendwas, was weiß ich, das Event findet statt an Ort X, aber das stimmt nicht mehr, aber man möchte die Info noch da behalten. Dann könnte man... Dann würde man ja normalerweise aber Dell und Inst wahrscheinlich benutzen, um zu zeigen, was sich... Ja, genau.

Es ist eigentlich nur dafür, wenn was weggenommen wird, wenn was dazu kommt. Aber dann hat man den Fall schon mal. Dann bist du ein schlechter Content Provider, wenn du Sachen einfach durchstreichst, ohne dem User irgendwie zu sagen, was denn jetzt stattdessen dann Gültigkeit hat.

So, und weil wir vorhin die Screenreader schon angesprochen haben, interessanterweise, da gibt's in dem MDN-Artikel dazu extra einen Absatz, der sagt, ja, wenn man jetzt den Screenreadernutzenden helfen will, weil das nämlich nicht announced wird, dann könnte man Folgendes tun. Das haben wir an anderer Stelle auch schon mal gehabt, das Beispiel. Man könnte in Before und After versteckt Text reinpacken.

Und hier Start des durchgestrichenen Textes, Ende des durchgestrichenen Textes in Before und After jeweils. Allerdings so, dass es halt versteckt dargestellt wird, ohne es mit Display hinan auszublenden, sodass ein Screenreader es trotzdem vorliest. Also hier haben sie irgendwie Clip Path, Inset 100 Prozent, Clip Rect, ein Pixel und so weiter. Ein großes Array an Eigenschaften.

Aber es steht dann auch gleich hinten dran, das sind sich nicht alle so einig, ob das jetzt eine gute Idee ist oder nicht, weil es Leute gibt, die so was extra nicht wissen wollen. Allerdings bei Text, der nicht mehr gültig ist, fände ich das schon relativ wichtig, dass man das mitkriegt. Weil wenn der mir jetzt einfach nur vorgelesen wird, dann gehe ich ja davon aus, ja, das ist die Info hier.

Ich muss bei etwas, was gelöscht wurde, was keine Gültigkeit mehr hat, muss ich eigentlich schon eine Möglichkeit bereitstellen, dass man das mitkriegt. Weil das ist eine extrem wichtige semantische Information, aus meiner Sicht ist irgendwas gültig oder ist nicht mehr gültig.

Und generell zu diesem Thema hat Adrian Roselli, der ein total geiles Blog hat, wo es ganz viele tolle Accessibility-Artikel gibt, die gehen immer total in die Tiefe, die sind wahnsinnig toll geschrieben, das muss ich echt mal hier an der Stelle empfehlen, wirklich toll. Und der updatet die auch immer wieder, die Artikel. Also der ist jetzt hier von 2017 ursprünglich, aber im Januar diesen Jahres zum letzten Mal geupdatet worden.

Also schon seit sieben Jahren wird der Artikel geupdatet, der sich eben genau mit diesem Thema beschäftigt, wie sollte man das tun und auf welche Elemente betrifft das und wie macht man das denn am besten, dass man den Screenreadern Informationen gibt zu semantischen Elementen, die aber in Screenreadern nicht announced werden. Aber was aber vielleicht wichtig ist, also zum Beispiel das Mark-Element wird hier noch angesprochen, Dell und Ins auch.

Wobei die teilweise, glaube ich, mittlerweile unterstützt sind usw. Aber der Artikel ist wirklich super schön kurzweilig geschrieben mit vielen Beispielen. Gute Sache, wenn man sich dafür interessiert, auf jeden Fall den Artikel noch mal angucken. Und wie gesagt, der ist auch super auf dem aktuellen Stand. Gut, so, dann haben wir das. Dann gehen wir jetzt, warte mal. Ach nee, jetzt bist du noch mal dran. Hab grad schon gedacht, ich wär wieder. Weil ich hab später noch einen längeren Bock.

Okay, okay. Ne, meins geht, glaube ich, relativ schnell. Und zwar das Samp-Element. Und wir hatten es darüber nämlich tatsächlich auch schon mal in dem ersten Teil der Inline-Text-Semantics, weil wir es da erwähnt haben, beim KBD-Element. Und zwar ist das Samp-Element ein Beispiel-Output von zum Beispiel einer Konsole. Also ähnlich wie das TT. Es wird auch standardmäßig mit dem Default-Font-Face für Monospace-Fonts ausgegeben.

Und ja, es ist eben, also wenn ich jetzt ein Manual hab und ich will da zeigen, was da irgendwie der Bildschirm ausgibt, also Keyboard not found, press F1 to continue, steht da jetzt in der Demo auf MDN, dann kann ich das damit kennzeichnen. Und ich kann da drin dann eben wieder, also das F1 könnte ich jetzt zum Beispiel markieren mit diesem KBD-Element wieder, was dann für User-Input beziehungsweise zum Markieren von Input gedacht ist. Und da gibt's ein interessantes Beispiel unten noch.

Da ist halt wirklich so ein Command-Line-Shell-Prompt quasi, wie soll man sagen, emuliert mit HTML-Elementen. Das heißt, ich hab einen Prompt, das ist jetzt in dem Fall, also ich hab außenrum das Samp-Element, und dann hab ich einen Span mit klares Prompt, das ist dann halt rot eingefärbt, das steht an der Benutzername mit Doppelpunkt-Tilde-Dollar, wie man das so kennt.

Dann ist da drin ein KBD, das gibt dann eben die User-Eingabe da in der ersten Zeile quasi in dem Shell, was der User eingetippt hat. Und dann unten drunter wieder als normaler Text eben der Output von dem Shell-Script.

Also auch sehr speziell wieder, auch wieder sehr dieses, wo kommt HTML her, wissenschaftliche Dokumentation, Beispiele, Manuals, wer erinnert sich vielleicht noch an die Hilfe-Seiten bei Windows, die mit F1 dann geöffnet wurden, auch Infogrammen dann, was ja auch HTML war, wo vielleicht tatsächlich solche Dinge am ehesten noch zum Einsatz gekommen sind.

Ja, Unterstützung, sehr gut, auch wieder Chrome 1, Firefox 1, Safari 4, das sind so Dinge, die sind einfach, das kommt auch wirklich noch aus Urzeiten. Und wahrscheinlich haben wir das auch lange hinter uns gelassen, dass das für uns so eine großartige Nützlichkeit hat. Aber ja, wer viel Dokus schreibt und da irgendwelche Sample-Outputs hat, der wird glücklich sein, dass es dafür ein semantisches Element gibt.

Da könnte man auch in der Liste mal gucken, das können wir jetzt generell vielleicht ab und zu mal machen, wie viele Leute das denn nutzen. Sam und KBD, mal anschauen. Ich könnte ja in der Zeit weitermachen. Wenn du fertig bist mit dem Sam, bist du fertig? Ja, dann gucke ich schon mal. Dann könnte ich mal weitermachen mit dem Small-Element. Und das wird überschrieben mit The-Side-Comment-Element.

Ja, das ist wieder so ein Element, das es schon relativ lange gibt und das früher halt eigentlich für Styling eingesetzt wurde, für kleinen Text eben oder für kleineren Text. Und mittlerweile wurde es jetzt umgewidmet zu Text, der jetzt nicht so wichtig ist wie der eigentliche Text. Der Browser macht standardmäßig immer noch das, was er früher auch gemacht hat, nämlich den Text kleiner darstellen als den eigentlichen Text, also als die eigentliche Schriftgröße, die der Text normalerweise hätte.

Und zwar innerhalb von diesen merkwürdigen CSS-Schriftgrößen-Angaben, die es ja gibt, Normal, Small, X-Small. Also wenn der Text jetzt normalerweise Small wäre, dann würde er dann X-Small dargestellt werden. Als Beispiel wird hier jetzt genannt, wofür man das verwenden könnte, wären Copyright-Informationen oder Legal-Text, wobei ich mir dann so denke, Legal-Text kleiner darstellen als was anderes. Ja, das ist eine gängige Praxis.

Ob ich das gut finde? Nee, finde ich eher nicht so gut, weil das ja meistens die interessanten Sachen sind auf der Webseite. Je kleiner es ist, desto eher sollte man es vielleicht lesen. Ja, je kleiner und ausgegrauter der Text ist, umso wichtiger ist er wahrscheinlich. Wobei, das ist was, was man gerne versucht zu verstecken oder was gerne versucht wird zu verstecken. Durch Drücken dieses Buttons, erklären Sie sich damit einverstanden, dass uns Ihre Erstgeborenes gehört?

Na ja, dann ist das wenigstens irgendwo unter. Genau, so. Hat auch keine besondere ARIA-Rolle, Small. Also, ja, ich weiß nicht so genau, ob ich das jetzt ... Ich glaube, ich würde dafür versuchen, was anderes zu finden. Ich weiß auch nicht, ob man dafür jetzt das Small-Element nehmen sollte, weil letzten Endes würde ich das hauptsächlich für den Style verwenden und dafür ist es eigentlich nicht mehr gedacht. Na ja, wie auch immer. So, das nächste Element.

Wir sind immer noch bei S und da kommen auch noch ein paar. Ist das Span-Element das allseits Geliebte? Warum das so? Es ist ja eins meiner Lieblingselemente, weil man es nämlich, wenn man nicht ... Und es steht sogar, interessanterweise, ich habe das so gedacht, das habe ich aufgeschrieben, was mir zum Span-Element einfällt und dann lese ich die MDM und denke so, ah ja, da steht es auch nochmal genauso drin.

Wenn dir gar nichts anderes einfällt und du einen Rapper brauchst für irgendwas, der aber überhaupt gar keine semantische Informationen hat, sondern einfach nur ein dies Ding möchte ich jetzt rappen, zum Beispiel um irgendeinen Style anzuwenden. Als Beispiel ist mir eingefallen, auf unserer Podcast-Startseite, unser WWSYV, wo wir sind, das ist vorne Schriftzug, wo wir ja was Lustiges mit den Buchstaben machen, wenn man mit der Maus drüber fährt.

Ich weiß gar nicht, ob das alle wissen, was das passiert. Eines unserer Easter Eggs. Eines unserer fünf Easter Eggs oder so. Wer sie alle findet, hat sie alle gefunden. Glückwunsch. Es gibt ein paar Easter Eggs bei uns zu finden, das ist eines davon. Man muss dazu vielleicht sagen, ich weiß nicht, ob wir das schon mal erwähnt haben, das gab es schon, bevor es überhaupt die erste Zeile Code für unsere Seite selbst gab.

Das habe ich an dem Abend, wo wir uns den Namen auch drauf festgelegt haben, habe ich das glaube ich daheim noch gebastelt. Ja. Es war auch in einer ganz anderen Schriftart und alles Mögliche, das haben wir noch mehrfach umgebaut. Aber es hat es reingeschafft. Das ist auch der Grund, warum das ii klein geschrieben ist. Weil sich das jemand schon mal gefragt hat.

Ja, es ist Visual Candy und dafür muss man halt eben, und ja, wir haben auch dafür gesorgt, dass es am Ende noch, weil das ist wichtig, wenn man jetzt einzelne Buchstaben rappt, wenn man auf so eine Idee kommt, dann muss man schon dafür sorgen, dass das auf dem Screenreader noch halbwegs vernünftig lesbar ist. Wir haben dem Ding dann noch ein ARIA-Label gegeben, damit es eben wieder funktioniert.

Weil ansonsten kriegst du einzelne Buchstaben vorgelesen, wenn du die rappst in einem Span oder es ist egal, in welchem Tag du die rappst. Das sollte man sich gut überlegen. Ich habe noch einen anderen Real-Life-Anwendungsfall. Oh. Auch wieder von dieser Buchungsgeschichte. Und zwar gibt es das Buchungsformular in zwei Varianten. Einmal direkt eine Reservierung und einmal ist es nur eine Anfrage. Und dementsprechend sind manche Texte in dem Formular dann anders.

Aber ich wollte jetzt nicht das komplette Formular duplizieren, weil es macht ansonsten wirklich genau das Gleiche, nur mal mit mehr und mal mit weniger Daten. Und deswegen sollte auch der Button einen anderen Text haben. Und dann gibt es da drin einfach zwei Spans, und die haben jeweils eine Klasse. Und je nachdem, was das übergeordnete Formularelement für ein Data-Attribut hat, wird es mit CSS eben das eine oder das andere ausgeblendet. Oder eingeblendet.

Ja, für diesen Fall, da gibt es ja 25 Millionen Lösungen, wie man das machen kann, dass man den Text von einem Button ändert, abhängig vom State. Und ich bin immer hin- und hergerissen. Da würde ich mir einen Standard für wünschen. Dafür würde ich mir einen Standard wünschen, weil ich mache es manchmal so. Es gibt zwei Elemente, wie du gerade beschrieben hast. Manchmal mache ich es mit Data-Attributen, dass der Text getauscht wird. Und damit Content-Attribute.

Das ist aber auch blöd, weil wenn man mit ARIA-Live arbeitet, das heißt, man möchte, dass der Screenreader live mitkriegt, dass sich was ändert auf der Seite. Dann geht es aber nicht, wenn man es auf dem Element selbst vergibt, sondern es muss der Wrapper sein. Aber wenn ich jetzt den Button nehme und dem ARIA-Live gebe, und da zwei Elemente drin habe, dann würde das funktionieren. Dann wäre das nämlich der Wrapper. Das ist ein Pain in the butt. Wie oft habe ich solche Konstrukte schon gebaut?

Und jedes Mal überlege ich, wie mache ich es jetzt? Das wäre, glaube ich, auch anders. Dafür hätte ich gerne einen Standard. Das wäre ein Webstandard, den ich gerne hätte. Und zwar changing content von ... Ja, sich ändernde Texte von einem Element und halt im Zweifelsfall vom Button, aber gerne auch andere. Wie mache ich das? Zwischen verschiedenen States hin- und herschalten, dass ich da mir keine Gedanken mehr drum machen muss. Das wäre schön. Das war nur der kleine Ausschweif.

Beim Ausschweifen sind noch kurz der Nachtrag zu Samp. Also Samp überraschenderweise 0,0 Prozent. Und sogar das KBD-Element hat immerhin 0,1 Prozent. Ja. Na gut. Danke fürs Nachschauen. Vielleicht noch einen kurzen Nachtrag zum Span-Element.

Was noch ein Anwendungsfall ist, der mir noch eingefallen ist dazu, ist zum Beispiel, wenn ich bestimmte Wörter in einer anderen Sprache auszeichnen möchte, also das Lang-Attribut irgendwo dran klatschen möchte, dann brauche ich ja natürlich irgendeinen Element, mit dem ich das mache. Und in dem Fall möchte ich ja wahrscheinlich keine andere Semantik haben, sondern einfach nur sagen, das ist jetzt in einer anderen Sprache. Dafür eignet sich das auch.

Also immer dann, wenn ich einen Rapper brauche, einen Inline-Rapper, der keinerlei semantische Informationen, keine weiteren semantischen Informationen enthält, dann ist das Span-Element deine Freundin. Spannend, würde ich sagen. Nicht schlecht, nicht schlecht. Okay, bevor ich mir jetzt den Mund komplett fusselig rede, nee, das mache ich jetzt noch kurz. Die Fusseln kommen gleich raus. Ich habe noch zwei, aber die gehören zusammen. Nämlich das Sub und das Sub-Element.

Das Sub-Woofer-Element. Yo, Sub. Und das Sub, ach so, Moment. Ach so, und das Sub ist das Stand-Up-Paddling-Element. Das kennt man. Genau. Und das Sub-Woofer- und das Stand-Up-Paddling-Element. Also hier, bitteschön. Nein, natürlich, das ist Quatsch. Es geht um Sub-Script und Super-Script. Und das sind Elemente, die früher auch nur für Styling eigentlich waren. Nämlich um Text tiefgestellt oder hochgestellt darzustellen.

Und letzten Endes sind sie eigentlich heute auch für nichts wirklich anderes da. Beispiele wären zum Beispiel Texttiefstellen, also das Sub-Element. Zum Beispiel chemische Formeln, wo zum Beispiel die Zahlen tiefgestellt sind. Hier die Beispiele in der MDN C8H10N4O2. Angeblich ist das die Strukturformel für Koffein. Habe ich gerade gelernt. Da habe ich auch gedacht, das muss doch was Nerdiges sein. Und ja, natürlich ist es was Nerdiges.

Sollte aber nur aus typografischen Gründen verwendet werden. Und es hat tatsächlich dann eigentlich keine richtige Semantik. Das ist dann so, da steht viel Text, aber letzten Endes wird nur erklärt, dass man es nur aus typografischen Gründen verwenden soll. Ich wüsste auch gar nicht, wie man es verwenden haben will. Ich sage ja C8H10N4O2. Ich sage ja nicht tiefergestellt 8H, tiefergestellt 10. Also statt hoch 3, tief 3. Ja, tief 8. C, tief 8, H, tief 10. Genau, und du sprichst es schon an.

Hochzahlen, das Sub-Element, also das Stand-up-Paddling-Element, das ist tatsächlich für Hochzahlen oder sowas gedacht. Also gibt es ja in verschiedenen Varianten. Oder, was auch noch ein beliebtes Beispiel ist, sind englische Daten, also The Fifth oder sowas. Da wird ja oft nicht einfach das TH hintendran geschrieben, sondern so ein bisschen kleiner hochgestellt. Also Ordinalzahlen, heißt das, glaube ich, auf schlau. Genau, ganz korrekt, Ordinalzahlen. Also das 3rd mit 3rd und sowas dann.

Ich eigentlich wollte aber jetzt unsere Zuhörerschaft damit nicht überfordern. Jetzt habe ich auch noch alle beleidigt, Entschuldigung. Nein, ich habe das auch gelesen. Aber ja, danke für den Hinweis. Ähm, genau. Eigentlich habe ich damit jetzt schon alles gesagt. Vielleicht noch ein ... Ja, da wäre jetzt noch interessant, weil wir gerade gescherzt haben hier bei tief 5, tief 10. Wie ist es denn mit, also wird das jetzt irgendwie E gleich mc² oder so? Oder heißt das dann wirklich E gleich mc²?

Äh, oh. Ausgesprochen. Also das wäre jetzt interessant. Aber ich weiß nicht, ob da so was da steht. Das ist eine sehr gute Frage. Da würde ich tippen, bei solchen Sachen kommt es wahrscheinlich auf den Screenreader an. Aber das kann ich dir tatsächlich jetzt auswendig sagen. Da die Anwendungsfälle ja divers sind, kann man da eigentlich gar nichts einheitlich sagen. Ja, das will man ja auch nicht. Also pass auf, ich bin jetzt niemand, der den Screenreader im Daily-Business benutzt.

Ich nutze ihn nur zum Testen, in Anführungsstrichen. Aber das relativ häufig. Meiner Erfahrung nach ist es so, dass Screenreader Wörterbücher haben und versuchen anhand von bestimmten ... Ja, da stehen dann quasi bestimmte Formulierungen drin, wenn eine bestimmte Zeichenfolge kommt, was das wahrscheinlich ist. Ich hatte jetzt zum Beispiel vorhin den Fall, mit meiner Demo, das habe ich mir im Screenreader vorlesen lassen, die Demo von Q. Und da ist ein Steve Jobs Zitat drin.

Und interessanterweise, in dem Augenblick, als ich die Stimme umgestellt habe auf Deutsch, oder das mir halt auf Deutsch habe vorlesen lassen, da steht am Ende bla, bla, bla, bla, the people that actually do, Punkt. Und was der deutsche Screenreader vorgelesen hat, war hier, actually Donnerstag. Ah, das ist witzig. Mein Navi sagt zum Beispiel, wenn ein Straßenschild kommt mit Karlsruhe-Haxfeld, und das ist ja oft abgekürzt als K.A. Haxfeld, oder Stuperich-Dudensee.

Ich meinte, das können wir ja mal für Haxfeld machen. Mein Navi ist aber auf Englisch. Dann kommt der immer, Kiloampere Haxfeld. Ja, genau. Das ist zumindest so, wie ich's kenne. Screenreader haben Wörterbücher und die versuchen dann, zu erraten. Ich nehme jetzt mal an, sowas E ist gleich mc², könnte ich mir vorstellen. Dass er dann mc² dann tatsächlich sagt auf Englisch. Oder generell, wenn eine 2 oben steht.

Bei den Ordinalzahlen dann septem auf Französisch und seventh auf Englisch, dass er dann schlau genug ist. Aber wahrscheinlich erkennt er nicht, dass das hochgestellt ist, würde ich jetzt mal tippen. Deswegen ist er drauf angewiesen. Wenn jetzt einfach nur irgendwo eine 2 hinten dran steht, zweifle ich jetzt, dass es das erkennen würde.

Aber bitte, falls ihr da andere Erfahrungen gemacht habt mit Screenreadern und es besser wisst als ich, dann bitte gern mal Bescheid sagen, weil das ist superspannend. Das würde mich auch interessieren. Da gibt's ganz oft in Demos oder in Tests, die ich gemacht hab, vor allem interessant ist es dann, wenn Menschen mir beim Accessibility-Screenreadertest zuschauen und zuhören. Und ich deren Tools teste, mir fällt so was meistens schon gar nicht mehr auf.

Weil ich sag, ja, das kommt vor, dass so komische Sachen vorgelesen werden. Aber meistens kann ich halt, weil ich jetzt schon öfter ein Screenreader gehört hab, ich hör das schon gar nicht mehr. Ich denk dann so, haja, da hat er jetzt wieder was Falsches erkannt. Aber Menschen, die zum ersten Mal ein Screenreader hören, denen fällt es sofort immer auf. Und die sagen immer, was hat er denn da gesagt? Ja, was, wieso denn? Also, mir fällt's oft gar nicht mehr auf.

Ich so denk, haja, okay, gut, es versucht jetzt halt irgendwie da zu raten. Und dann hat's jetzt halt mal falsch geraten. Aber da hat tatsächlich dann schon mal jemand gesagt, weil da ging's irgendwie um Markennamen, irgendwas, was mit der Marke zu tun hatte, was der Person so wichtig war, dass sie gesagt hat, nee, da müssen wir jetzt ARIA-Label einbauen dafür. Weil das können wir auf keinen Fall zulassen, dass der Screenreader das an der Stelle falsch ausspricht.

Und hat gesagt, nee, geht nicht, das muss richtig ausgesprochen werden. Da gibt's jetzt ein ARIA-Label, wo das dann so reingeschrieben wird, wie ich will, dass das ausgesprochen wird. Das hab ich tatsächlich auf unserer Seite, also von meiner Firma gemacht. Das ist so ein eigenes gestricktes System, was wir da haben. Und da wird automatisch das Wort, also 4-8-Design, unser Firmenname, auf der deutschen Seite tatsächlich wird sichergestellt, dass das 4-8-Design ausgesprochen wird.

Während wir auf Englisch halt 48-Design sagen. Und das wird da unterschieden, je nachdem, welche Sprache gewählt ist. Ich seh's gerade. Ist da ein anderes Label drin, 48-Design, dann auch mit dem englischen Lang Tag, damit das auch wirklich auf Englisch dann ausgesprochen wird, wenn's denn funktioniert. Und halt wirklich auch 48-Design und nicht Fear Act Design. Damit eben unser Firmenname als Brand, als Marke, da richtig ausgesprochen wird. Ja, nice. Not bad.

Also, aber damit bin ich fertig mit Zopp und Zopp. Gut. Und gebe zurück ins Funkhaus. Jetzt wird's nämlich auch Zeit. Wir kommen nämlich zum Time Element. Und da gibt's jetzt ein bisschen mehr dazu zu sagen. Weil da auch wieder was dabei war, was ich so noch nicht kannte.

Also, ich kannte das Time Element, und ich hab das auch schon mal irgendwo bei irgendeinem, ich glaub, auch bei unserer Webseite, weil wir haben da ja auch News, und da wird das dann auch irgendwie mit Markup, wann das veröffentlicht wurde und so, dargestellt. Und es ist eigentlich nicht nur Time. Also, eigentlich könnte das korrekterweise DateTime heißen. Aber es gibt ein DateTime-Attribut auf Time.

Gut, und auch ein Datum ist ja im Endeffekt nichts anderes als ein Zeitpunkt in diesem komischen Konstrukt, das wir Menschen Zeit nennen.

Und dementsprechend kann ich in dem DateTime-Attribut auch Daten, also ein komplettes Datum, Jahreszahl, Monat, Tag, oder auch nur eine Uhrzeit, oder so einen kompletten String mit hinten dran, dieses Z für Zulu, Timecode, oder sogar irgendwelche mit Bindestrich getrennt, vierstellige oder mit jeweils zweistellig, mit Doppelpunkt getrennt, die Uhrzeit noch mal, als, na, sag schnell, also GMT-Abweichung zum Beispiel. Ja, bitte diese UTC-Abweichung angeben.

So, und damit lässt sich halt ein maschinenlesbarer Zeitstempel in irgendeiner Form hinterlegen. Ich glaub, ich hab schon gefunden, was da verrückt ist. Genau, auf ndn gibt's nämlich eine ganze Auflistung hier, Valid DateTime Values, also eine einfache Jahreszahl geht. Das geht auch eine Jahreszahl und einen Monat, aber kein Datum. Also in diesem 4-2-2 mit Bindestrich getrennt Konstrukt, diese ISO-Zeit. Da geht sogar ein jahresloser Datumstring, also 11 minus 18 ist zum Beispiel erlaubt.

Das ist natürlich für Amerikaner wieder verwirrend, weil die jetzt 1811 schreiben würden. Aber ... Aber endlich, endlich hat man jemand ... Nee, die Amis machen ja, nee, die schreiben ja 1118. Genau, wir schreiben 18.11. Also in dem Fall ist es sogar für die Amis richtig. Und ich find ja, diese ISO-Darstellung ist für mich sowieso die einzig wahre Datumsangabe, also dieses ... Du meinst jetzt hier 2011 minus, bla, minus. Genau. 24 minus 07 minus 17 für heute, ja?

Und genau, mit Minus, das ist aus meiner Sicht die Wahrheit. Genau, dann ist es nämlich, weil dann, wenn ich's mit Slash mach, kann's auch wieder sein, hab ich jetzt Datum oder Monat zuerst, ne? Oder Anascore liest sich nicht so gut, find ich. Also ich finde, das ist die einzig wahre ... Ja, da weiß jeder, was gemeint ist. Und dann gibt's hier interessanterweise auch Valid Weekstring, also 2011 minus W47. Also, die Kalenderwoche kann ich sogar markieren.

Ich kann hinten noch hinter eine Uhrzeit mit Punkt und drei Stellen kann ich die Hundertstelsekunden noch mit angeben. Nee, was sind's? Tausendstelsekunden sind's dann, oder? Ja, jedenfalls Bruchteile von Sekunden mit angeben. Zettelhundertstel, tausendstel, ja. Dann, ja, also dieses ISO-Ding eben mit einem T dazwischen und Z hinten oder nicht, oder mit Leerzeichen getrennt, Datum und Uhrzeit, das geht alles. Dann hab ich schon gesagt, diese Global Date-and-Time-String

mit Zeitzone, so. Und jetzt gibt's noch was. Jetzt kommt das, was ich auch noch nie gesehen hab. Das ist jetzt hier als Beispiel angegeben, PT4H18M3S. Oh, pass auf, darf ich raten? Mhm. Ach, warte mal, Moment, Duration. Dann bin ich raus, weil PT, ich hab grad an Pacific Time gedacht. Nee. Aber das ergibt ja keinen Sinn. Zeitzone brauch ich ja für Duration nicht. Aber es sind vier Stunden? Es gibt einen eigenen Abschnitt dafür in einem HTML-Standard.

Es sind vier Stunden, 18 Minuten, drei Sekunden. Genau. Aber was heißt das PT? Ich verlinke auch den HTML-Standard dazu. Was ist ein valider Duration-String? Also, es beginnt immer mit dem Capital Letter P. Und dann eins oder mehr von den folgenden, nämlich entweder direkt ASCII-Zahlen, gefolgt von einem Capital Letter D. Das ist dann einfach die Anzahl an Tagen. Ah, ich, ich, okay, das ist das Format. Also zwölf Tage wären dann P, zwölf D. Oder der Capital Letter T, wahrscheinlich für Time.

Und dann gefolgt von einem oder mehreren der folgenden Subkomponenten in genau dieser Reihenfolge. Aber ich kann auch was weglassen davon. Und zwar Capital Letter, also wieder ASCII-Digits, gefolgt vom Capital Letter H. Ist dann die Anzahl an Stunden. Oder ASCII-Digits gefolgt vom Letter M für Minuten. Oder ASCII-Digits, die die Nummer an Sekunden angeben. Optional, gefolgt von einem Punkt zur Abtrennung der Fractions of a Second, der Sekundenbruchteile. Und zwar eins, zwei oder drei Digits.

Und dann gefolgt von dem Capital Letter S für Sekunden. Das ist ja geil. Ja. Das ist ja geil. Und das ist ein, für Angaben von Zeitdauer, ein standardisierter, äh, Dings. Aber dann geht's noch weiter. Das hab ich jetzt gerade erst gesehen. Es gibt noch, äh, one or more duration of time components. Da ist nämlich noch so eine Note dazwischen. Deswegen hab ich das gar nicht dazugeordnet. Aber da gibt's noch mehr. Also irgendwie White Spaces. Dann noch mal ASCII-Digits.

Scaled by the duration time component scale. Boah, keine Ahnung. Ähm, ja. Also man kann's auch noch mehr verkomplizieren. Jetzt, also ich hatte gerade tatsächlich den Fall, dass es ein Eingabefeld gibt, wo ein Zeitraum angegeben werden sollte. Also genau das, ne? Also Duration. Nicht Startdatum, Enddatum, sondern tatsächlich drei Stunden, vier Stunden, drei Stunden, 30 Minuten. Da könnte ich einfach mal vorschlagen, dass man dieses Format eintragen muss.

Ja, und wenn du das Parsing dann nämlich implementieren willst, dann geht's nämlich in dem nächsten Abschnitt runter. The rules to parse a duration string are as follows. Und dann wird genau aufgeschlüsselt. Das ist der Input. Und dann wird quasi hier so als Pointer schrittweise vorgegangen. Wenn man dann auf das trifft, dann das, dann das, dann das, dann das. Das kannst du jetzt kopieren.

Dann kannst du jetzt in den Cloud-AI und den Chat-GPT reinklopfen und sagen, schreib mir die Implementierung in JavaScript zum Beispiel. Und dann mal gucken, wer es besser macht. Oh Mann. Mach ich vielleicht bis zum nächsten Mal. Aber das muss ich mir echt mal, das find ich echt spannend. Also das, ich hab mit allem gerechnet, was davor war. Ich hätte jetzt nicht auf dem Schirm gehabt, dass man tatsächlich Wochen, Wochennummern angeben kann. Also, ja, Kalenderwoche.

Okay, find ich jetzt aber auch nicht überraschend. Vielleicht bis zur tausendstel Sekunde gehen kann. Hätte ich jetzt auch nicht gedacht, aber find ich jetzt auch nicht überraschend. Aber das hab ich noch nie gesehen. Also wirklich, hier steht PT4H18M3S. Und man denkt erst mal so, was? Ja, und das ist da halt wirklich auch natürlich, logischerweise. Man macht sich halt nur nie Gedanken drüber, wenn es einen Standard dafür gibt, der das genau definiert.

Und der auch definiert, wie man das Ganze auswertet. Wenn man maschinell irgendwelche Zeitdauern auswerten will, klar, dann kann man das so machen. Wobei ich mich halt frage, warum nicht einfach die Anzahl der Millisekunden als Timestamp, die vergangen sind? Es ist natürlich besser lesbar, also es ist auch für den Menschen besser lesbar. Weil ohne das zu wissen, hast du gleich richtig gelesen, HMS, war klar, was das bedeutet.

Vielleicht ist das das Argument dafür, dass man's nicht einfach per Timestamp macht. Oder bei einem Timestamp weißt du nie, ist das in Tausendstelsekunden oder sind's die reinen Sekunden. Das ist ja auch bei JavaScript immer die Geschichte. Ja, aber es gibt einen Standard dafür. Und wer weiß, vielleicht braucht's mal jemand. Aber ich muss da jetzt ganz kurz noch mal reingehen. Weil ich jetzt eine Frage hab.

Weil ich hab ja gesagt, ich hab jetzt tatsächlich diesen Fall gehabt, dass ich Code gereviewt hab, wo so was gebraucht wurde. Nämlich eine Timeduration, die eingegeben wird. Wie würdest du das lösen? Ich möchte das noch in einem bestimmten Format haben. Also, wie würdest du ... Also, wir müssen jetzt auch nicht tief reingehen. Aber ich hätte halt das Date-Time ... Nee, warte mal, das Input-Type Date funktioniert an der Stelle nicht. Selbst wenn ich sage ...

Oder Input-Type Time funktioniert nicht, weil das hat immer Bezug auf den Tag. Also, Time ist tatsächlich 24 Stunden. Ich kann da nicht mehr als 24 Stunden eintragen, weil sich das auf ein Datum tatsächlich bezieht. Ich will ja aber eigentlich nur eine Duration haben. Weil ansonsten wäre das Time genau das Richtige. Weil ich hab da dann so eine Auswahl und kann sagen, so viele Stunden und so viele Minuten. Aber du willst vielleicht auch 48 Stunden zulassen. Weil du in Tagen nicht unbedingt ...

Ja, gut, da bleibt im Endeffekt nur, normale Inputs zu nehmen. Und es dann am Ende so zu verursachen, wie du's ... Oder sagen wir mal, ein Input-Type Number zumindest, den du dann wiederum irgendwie begrenzen kannst auf mindestens null und Maximum. Keine Ahnung, falls du ein Maximum hast. Ja, also, da gibt's keine Standardlösung. Und ja, Time-Picker, Date-Picker, das ist auch jetzt grad wieder bei diesen Buchungsdingen genau so ein Thema.

Ich hab das jetzt mit den Standard-Date-Time-Pickern gebaut. Also, Time brauch ich sowieso nicht, es geht nur ums Datum. Aber wir wissen von dem anderen Projekt, über das ich's ja schon öfter hatte, dieses Corona-Testergebnis-Ding, dass da dann das Kundenfeedback kommt. Oh, ich muss ja, um mein Geburtsdatum anzugeben, muss ich ja irgendwie 23.000 Mal auf Zurück klicken, bis ich im Jahr 1900 was weiß ich was lande. Weil die Leute nicht wissen, dass man auf die Jahreszeit klicken kann.

Weil das einfach bei Android scheiße gelöst ist, muss man so sagen. Und vielleicht bei anderen Betriebssystemen auch nicht optimal ist. Und das ist ja auch ein Start und Ende. Ich will ja sagen, von dann bis dann will ich das buchen. Das heißt, im Bestfall muss ich solche Sachen implementieren wie, na ja, wenn ich ein Startdatum gewählt hab, dann kann das Enddatum logischerweise nicht hinter dem Startdatum liegen.

Und eigentlich will ich das gar nicht in zwei Feldern ausfüllen müssen, sondern ich will da draufklicken, und dann soll sich was öffnen, und dann krieg ich gleich zwei Monate quasi nebeneinander dargestellt, und ich kann das Startdatum wählen, ich klicke auf den Zeitmonat, und dann kann ich das markieren und krieg vielleicht sogar in dem Kalender dann blau hinterlegt den Zeitraum, wo ich mich befinde. Und das geht halt alles mit den Standardelementen nicht.

Das heißt, was ich machen werde, ist, im Hintergrund liegen zwar diese Felder, und jetzt sagen wir mal, es kommt ein Client drauf, der kein JavaScript kann. Gut, der kann das ganze Ding per Ajax sowieso nicht abschicken, aber der hätte dann zumindest die Felder da. Oder ein Screenreader kann's eben auch wirklich die entsprechenden semantischen Felder ausgeben.

Aber was passiert ist, wenn ich da draufklicke, öffnet sich nicht der Standard, sondern, das werde ich jetzt morgen noch implementieren, es geht ein Popover auf, allerdings kein wirkliches Popover, weil Popover-Unterstützung auch noch nicht so doll ist, aber halt irgendwie ein Overlay, ein Diff oder wie auch immer. Was würdest du da machen? Das ist ein guter Punkt. Was würde man in dem Fall für so ein Overlay nehmen? Was für ein Overlay?

Visuell sieht's aus wie ein Textfeld dann, aber eigentlich öffnet's ein Overlay mit so einem Kalender-Budget. Ist das etwas, was die Seite blockieren soll? Es ist kein Dialog. Du könntest ein Dialog-Element nehmen. Nee, ja gut, im Endeffekt ist es ein Dialog, ohne ein Model zu sein, ja. Könnte man schon so sagen. Dialog muss nicht Model sein. Und ja, Popover wäre wahrscheinlich das Richtige. Popover wäre genau das Richtige, was ich eigentlich dafür bräuchte.

Popover, Dialog, Dialog kannst du auch nehmen, musst nicht die Seite blockieren, das kannst du selbst bestimmen. Aber hätte den Vorteil, dass es eben für Screenreader entsprechend mit dem Fokus das gleich richtig macht, ne? Ja, Fokustrap und genau. Wahrscheinlich werde ich dann ein Dialog-Element nehmen, weil Dialog-Unterstützung ist ja jetzt relativ gut. Ja, die ist ziemlich gut, und du kriegst da alles andere ...

Das ist halt besser als ein Diff, und ich muss noch gucken, dass der Fokus dann am Ende stimmt. Ja, genau, also da werde ich dann leider halt wieder auch, obwohl's tolle, schöne Standard-Elemente gibt, werde ich was anderes nutzen, weil einfach nicht gewährleistet ist, dass die Leute verstehen, wie das funktioniert. Und da gibt's halt einfach fertige Libraries für solche Datenauswahl, die einfach erprobt sind, die gut aussehen und gut funktionieren und für den User einfach eindeutig sind.

Also, ob man jetzt bei Booking.com oder sonstigen Buchungsdingern, du hast da nie einen Standard-Browser-Picker, sondern immer eigentlich irgendwelche Lösungen mit ... Ich kann wirklich ein Datum, also einen Zeitraum auswählen, und das ist halt das, was ich bei Reiseanfragen brauche und will. Ja, ja. Gut. Das war genug Zeit. Ich glaub, die Zeit ist jetzt rum. Ich glaub auch. Ich glaub auch.

So, jetzt kommt noch eine Überraschung, also etwas, was mich überrascht hat und mich erst mal ein bisschen überfahren hat, nämlich das U-Element. Das U-Element ist nämlich auch so was, was irgendwie umgewidmet wurde. War nämlich ja mal Underline. Und Achtung, es heißt jetzt ... Ich lese das jetzt einfach mal vor, weil ich will euch daran teilhaben lassen, an meinem Schmerz.

So, es heißt jetzt, und ich lese auch gleich den ersten Absatz noch aus der MDN dazu vor, the unarticulated annotation element. Und dann, the U-HTML element represents a span of inline text, which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.

So, ich hab den Satz erst mal gar nicht verstanden, was die mir da sagen wollen, und dann hab ich mir das Beispiel angeguckt und hab gesagt, ah ja, okay, gut. Jetzt kann ich mir ungefähr vorstellen, was ihr meint mit non-textual annotation, weil das ist das eigentlich, worauf es am Ende hinausläuft. Das Beispiel, und sie haben, glaub ich, auch wirklich nur das eine Beispiel hier genannt, wofür das verwendet werden soll, ist zum Beispiel spelling errors.

Also, ich möchte sagen, da ist irgendwie was, und es soll aber nicht irgendwie mit Text ergänzt werden. Genau, also es ist jetzt keine Abbreviation oder so was zum Beispiel, ne? Genau, es gibt keine Info dazu, keine textliche Info dazu, um was es sich handelt, sondern nur eine visuelle.

Und in dem Fall haben wir vorne Underline, muss aber nicht sein, könnte auch irgendwas anderes sein, und in dem Fall haben sie diese, es gibt ja mittlerweile in CSS diese schönen anderen Underlines, irgendwie, ich weiß gar nicht, wie die heißt, wavy oder so was. Oder squiggly, oder so was, ja. Squiggly, squiggly, squiggly warm Underline, man kann ja auch die Underline-Farbe ... Wavy, ja, Text Decoration Wavy Underline.

Genau, man kann ja mittlerweile viele verschiedene, also Text Decoration Underline gibt's mittlerweile viele coole Sachen, die man damit machen kann, es ist nicht mehr einfach nur ein Strich, man kann auch sagen, wie dick soll die sein, das ist ja unabhängig von der Schriftgröße, man kann auch einen Abstand definieren, ist aber jetzt alles gar nicht mehr Thema.

Also das ist das einzige Beispiel, also es ist sehr abstrakt mit, ich möchte den Text irgendwie hervorheben, dass da ist irgendwas, aber es hat nichts mit, ich würde das nicht mit weiterem Text verknüpfen, oder keine Erklärung dazu schreiben. Guck mal, interessant, hier unten steht nämlich, weil ich gerade Abbreviation als Gegenbeispiel genannt habe, aber hier steht, to provide textual annotations, as opposed to the non-textual annotations created with you, use the Ruby element.

Das heißt, das ist auch für textuelle Annotationen gedacht, abseits von, es sind jetzt chinesische Schriftzeichen, sondern ich könnte theoretisch da vielleicht auch andere Dinge reinpacken. Vielleicht sogar, vielleicht könnte ich da eine Liste reinpacken, je nachdem, ob man das mit Position fixt oder wie auch immer, eine Liste an Vorschlägen zum Beispiel für die Textkorrektur könnte ich da vielleicht reinpacken. Weiß ich nicht, ob das funktioniert.

Was da auf jeden Fall auch noch steht, ist, dass es in den meisten Fällen, wenn man denkt, dass man das U-Element verwenden könnte, dass man es nicht verwenden sollte, sondern dass man sich erst mal überlegen sollte, ob es andere Elemente gibt, die vielleicht besser passen, so wie em, b, mark, strong, side oder i. Und i ist ja auch so ein komisches, umgewidmetes Element. Auch das Ruby-Element kommt hier wieder vor. To provide textual annotations as proper ...

Ja, genau, da steht auch, das mit Ruby-Element soll man verwenden. Ja, also, wie gesagt, der Spelling Error ist das Einzige, was Ihnen hier einfällt. Ja, gut. Ich wäre jetzt, glaube ich, gar nicht auf die Idee gekommen, das U-Element einzusetzen. Ich weiß gar nicht genau, was passiert, wenn ich einen Text mache mit Markdown, gibt's das überhaupt? Ich bin mir nicht sicher. Egal. Wahrscheinlich findet man gar keinen sinnvollen Anwendungsfall mehr,

außer genau diesen. Aber dafür kann man es ja verwenden. Das kommt ja vielleicht tatsächlich ab und zu mal folgen, so eine Rechtschreib-Korrektur. Es ist aber auf jeden Fall kein Unterstreichungselement mehr. Man soll es auf jeden Fall auch nicht einfach so mit normaler Unterstreichung verwenden. Das ist natürlich wieder ein Styling-Ding. Oder man soll, Sie weisen noch drauf hin, man soll nichts unterstreichen, was kein Link ist. Außer man nimmt so eine Squiggly Line oder so was.

Das kann ich ganz gut unterscheiden. Aber normalerweise sind ... Link ist einfach ... Oder der Style für Links ist einfach eine Unterstreichung. Und es wäre schräg oder misleading, wenn man die Unterstreichung für was anderes verwendet. Das ist tatsächlich eine Information. Da denkt man so, das liegt ja auf der Hand. Aber es gibt durchaus Leute, die auf Webseiten das machen. Und ich klicke dann da drauf wie ein Depp. Und es passiert nichts. Es ist mir durchaus schon passiert.

Also bitte lasst das. Nur Dinge unterstreichen, die Links sind. So. Dann komm ich jetzt, glaub ich, schon zu meinem Letzten. Und dann kommt noch eines von dir. Ja. Wir hätten hier noch das Var-Element, V-A-R. Es hat nichts mit ... Ist das nicht der virtuelle Irgendwas-Referee? Da ist der, glaub ich, auch so irgendwie bei der EM. Schon wieder vergessen. Der dir dann sagt, dass du mit einem kleinen Zeh im Upsides warst. Übrigens auch eine verrückte Erfindung, wie ich finde.

Wie hieß es, das Ball-EKG oder so? Ja, ja, ja. Ja, verrückte Zeiten, in denen wir leben. Das Variable-Element ist eigentlich in erster Linie da, um Variablen eines mathematischen Ausdrucks oder Variablen, wenn ich bei mir ... Ich schreib einen Text über Programmieren. Variablen zu markten und da zu sagen, das ist jetzt eine Variable. Üblicherweise stellt der Browser das dann kursiv dar.

Aber das ist natürlich, wie schon immer gesagt, man sollte es nicht für den Style machen, sondern eben für die semantische Auszeichnung an der Stelle. Es ist auch was, wo ich sage, ja, ich kann mir vorstellen, es kommt bestimmt auch aus dieser wissenschaftlichen Ecke, wie du vorhin schon angesprochen hast.

Wenn du jetzt viel mathematische Sachen machst oder tatsächlich über Programmieren schreibst, das ist jetzt nicht so ungewöhnlich für mich, dann kommt man da vielleicht schon mal drauf, dass man das verwenden könnte. Ich habe das bewusst noch nie im Einsatz gesehen irgendwo. Es kann zum Beispiel in SEMP vorkommen oder auch in Code wäre so ein logischer Ort, wo sowas dann drin vorkommen könnte. Ja, es hat auch keine ARIA-Role oder so.

Ja, also Variablen im VAR-Element, das ist tatsächlich genau das, was man annehmen würde, was es sein könnte. Also natürlich der Videoassistent. Genau, das war es, oder? Heute habe ich es irgendwie in den Übergang. Jetzt kommt noch ... Ups, ich habe es schon abgehakt. Dabei kommt es erst noch. Genau, the Line Break Opportunity Element. Damit kann ich dem Browser sagen, an der Stelle könntest du, wenn der Platz zu eng wird, doch einfach das Wort mittendrin umbrechen.

Das heißt, es ist quasi ein Zero-Width-Space. Also es steht sogar hier auch auf UTF-8-codierten Seiten, verhält sich das genauso wie ein Zero-Width-Space. Und das hat nämlich noch eine Implikation. Nämlich, weil wir es vorhin auch über BD-Reihenfolgen hatten. Normalerweise, wenn das jetzt zwei komplett getrennt sind, kann man in den BD-Reihen folgen. Da kann man in den BD-Reihen folgen.

Normalerweise, wenn das jetzt zwei komplett getrennte Wörter wären, also z.B. ich mache einen Span außenrum, aber kein Leerzeichen dazwischen, dann würde sich auch die Reihenfolge ändern, wenn der BD-Text jetzt von rechts nach links läuft z.B.

Und da ist hier das Beispiel, wenn ich hier 1, 2, 3 komme, und dann ein WBR-Tag oder eben so ein Zero-Width-Space habe, 4, 5, 6, und der wird nicht in zwei Zeilen gebrochen, dann würde normalerweise man erwarten, dass da eben 4, 5, 6, 1, 2, 3 steht, weil eben die Flussrichtung eine andere ist. Aber es bleibt trotzdem 1, 2, 3, 4, 5, 6. Und ja, das ist vielleicht gut zu wissen, wenn man irgendwie mit arabischen Schriften oder mit sonst allem, was nicht von links nach rechts läuft, zu tun hat.

Was es allerdings nicht macht, ist automatisch ein Trennungsstrich. Dafür benutzt man das UndSci, die HTML-Entity UndSci, die halt sagt, na ja, wenn du nebeneinander passt, dann machst du nix, dann bist du eben auch so ein Zero-Width-Space. Aber falls nicht, dann kannst du an der Stelle so ein Trenn-Bindestrich einfügen. Ja. Ich musste grad total lachen, als ich die MDN-Demo gesehen hab und gesehen hab, was für ein Wort sie da verwenden, um das Beispiel zu zeigen.

Es ist ein deutsches Wort in der englischen MDN, und zwar Fernstraßenbau-Privatfinanzierungsgesetz. Wobei ich mich da dann schon frage, was für einen Sinn das macht, das ohne Bindestrich zu trennen. Weil sie haben da beide Beispiele drin. Also einmal mit WBR, Fernstraßen-WBR, Bau-WBR, und dann steht das noch mal mit der UndSci-Entity. Und es gibt dieses Gesetz tatsächlich, falls ihr euch das fragt. Nein! Abgekürzt als F-S-T-R-Priv-Fin-G. Na ja, dann nimmt man doch einfach das.

Dann weiß doch jeder, was gemeint ist. Ja, aber es würde tatsächlich keinen Sinn machen, das nicht zu trennen. Oder man überlässt es einfach dem Browser und sagt hier mit CSS. Überbau und Finanzierung von Bundesstraßen durch Private. Also eine Sache, die vielleicht noch ganz interessant ist, der Yahoo-Style-Guide empfiehlt. Der Yahoo-Style-Guide, was ist das? Keine Ahnung, ich habe nicht draufgeklickt.

Aber dass man URLs vor jeglicher Punktuierung, sprich ein Slash oder ein Punkt, mit WBR versieht. Damit man, wenn das umbricht, nicht denkt, dass die URL da zu Ende wäre. Also dass dann der Slash automatisch in die nächste Seite mit umbricht. Oder ein Punkt eben, damit der nicht am Ende steht und du denkst, da ist jetzt der Text zu Ende. Also der Yahoo-Style-Guide-Link, der zeigt aufs Webarchive auf eine Seite aus dem Jahre 2012.

Und die Frage ist, wie oft hast du URLs einfach als URL im Text und nicht als Ahref mit einem Text? Gar nicht so selten. Dann musst du in deiner Umgebung dafür sorgen, dass das automatisiert URLs in Text mit WBR versieht an den entsprechenden Stellen. Oh ja. Wenn du es richtig machen willst. Dann kannst du ... Eigentlich sind wir jetzt damit auch am Ende vom Thema. Ich bastle nebenher noch ein bisschen was, weil mich das keine Ruhe gelassen hat mit dem Ruby-Ding. Das zeige ich dir dann gleich.

Und speichere es auch als Code-Pen. Aber dann kannst du schon mal weitermachen, weil du hast ja jetzt als Nächstes noch einen Punkt. Und ich drücke mal aufs Knöpfchen. Das Geil-Teil. Geil-Teil. So, ja. Geilo-Teilo. Ich habe immer ein bisschen Angst, wenn ich über AI rede, dass dann gleich der Mob mit den Fackeln kommt und sagt, das ist doch alles Mist. Und früher war alles besser. Es gibt auch gute Argumente dagegen. Und auch dieses ganze ...

Leute benutzen einfach den Text aus dem Internet, um ihre Algorithmen zu trainieren. Es hat alles seine Probleme. Aber ich will auch trotzdem damit rumspielen können. Und das mache ich auch. Ich habe jetzt gerade die Tage rumgespielt, weil ich mir gedacht habe, ich bin so faul, dass die Texte nicht automatisch einsortiert werden. Ich möchte z.B. automatische Dateinamengenerierung auf Basis des Inhalts eines PDF-Dokuments haben.

Und zwar interessanterweise genau nach dem Schema, worüber wir vorhin gesprochen haben, das Zeitschema. Dieser ISO-Standard. Vier Ziffern Jahreszahl minus zweimal Monat minus zweimal Tag. Und dann underscore eine kleine Mini-Zusammenfassung dessen, was in dem Fall ist. Und da habe ich mir gedacht, na ja, wie kann ich das machen? Ein Large-Language-Model könnte das doch vielleicht für mich lösen.

Und da die Inhalte der Dokumente, die ich da verschlagworten, verfeilnahmen möchte, jetzt eher privat sind, möchte ich das nicht an ChatGPT schicken. Möchte ich einfach nicht. Und dann habe ich nach Lösungen geguckt, wie kann ich denn jetzt sowas lokal bei mir laufen lassen, was jetzt auch auf dem M2 MacBook Air läuft. Weil üblicherweise so Machine-Learning-Sachen, die laufen ja oft nur richtig gut, wenn man eine dicke Grafik hat und viel Strom, ein kleines Kraftwerk und sowas hat.

Und ich habe jetzt nach einer Lösung gesucht, die ich vielleicht über eine API ansprechen kann. Mein Ziel war, einen macOS-Shortcut zu haben. Am Ende ist das große Ziel tatsächlich, dass ich eine Datei scanne, sie in einen bestimmten Ordner reinläuft. Der Watcher dann darüber sieht, ah, da ist eine neue Datei und das dann vollkommen automatisch in den richtigen Ordner sortiert und den richtigen Feilnamen vergibt. Oder halt, dass sich da was ausdenkt auf Basis des Inhalts.

Soweit bin ich noch nicht. Aber ich habe auf jeden Fall den Teil schon gebaut, der den Feilnamen generiert auf Basis des Inhalts. Und dafür habe ich halt eben jetzt ein Large-Language-Model gebraucht, dem ich eben sagen kann, hey, ich brauche einen Feilnamen nach folgendem Schema. Und bitte, falls eine Rechnung ist, schreib bitte Rechnung irgendwie noch vorne dran. Und bitte schreib noch das Datum vorne ran, falls du ein Datum findest.

Und mein Geburtsdatum ist nicht das Datum, falls du das finden solltest in irgendwelchen Dokumenten, das würde auch nicht im Feilnamen vorkommen, weil das wäre auch Quatsch für mich, wenn ich das als wichtige Information daraus sammeln würde. Und dann mach mal. Und habe dann halt nach etwas gesucht, wo ich das hinwerfen kann, inklusive des Texts oder des Inhalts von dem PDF. Und bin auf Olama gestoßen. Das gibt es schon eine ganze Weile.

Und Olama ist so eine Art Rapper, für aktuelle Large-Language-Models, die man frei verwenden kann. Für die Command-Line erst mal. Bietet aber auch eine API an. Und das mache ich folgendermaßen. Ich installiere das. Das geht aber nicht nur auf Mac, das geht auch auf anderen Betriebssystemen. Das gibt es auch für Linux und für Windows. Also wer sich davon erhofft, dass er dann klickgebunden im Browser ein schönes Web-Interface hat, das ist das nicht.

Es ist erst mal für die Command-Line und als API. Und dann kann ich z.B. sowas machen, wie ich starte da ein Model drin. Ich muss halt wissen, wie die Models heißen, die angeboten werden. Da gibt es eine Liste auf der Webseite. Also z.B. Gemma 2, das ist von Google. Lama 3, das ist glaube ich von Meta, also Facebook. Es gibt aber auch noch viele weitere, die für verschiedene Anwendungsfälle optimiert sind. Wie Mistral und keine Ahnung, wie sie alle heißen.

Da steht immer dann dabei, wofür sie optimiert sind, wie groß sie sind, wann sie zum letzten Mal geupdatet wurden. Was ich dann eigentlich nur machen muss, wenn ich das Olama installiert habe, ich stelle Olama run, dann den Model-Namen. Sofern es noch nicht installiert ist, lädt das mir runter. Das kann eine Weile dauern. Die sind ja immer ein paar Gigabyte groß. Und dann habe ich tatsächlich so einen Text-Prompt. Und dann kann ich da mal was reintippen.

Was soll ich da reintippen? Wir probieren es mal aus. Ich habe jetzt dieses Lama 3-Model am Laufen. Du könntest die, die wir vorhin hatten, auch auf Deutsch machen. Du kopierst einfach die Anleitung rein. Was, die Anleitung? Du sagst, implementiere mir in JavaScript das und das. Äh, warte mal. Was war es noch mal? Bei Time. Das habe ich in HTML-Standard verlinkt. Und unten, wenn du runterscrollst, dann the rules to pass a duration string.

Was mich da dran überzeugt hat, ich habe ja vorhin gesagt, ich habe eher fachbrüstige Maschinen, also ganz ohne Lüfter und so, MacBook Air. Und trotzdem, je nach Model, muss man dazu sagen, dieses Lama 3-Model, es antwortet extrem schnell. Also ich tippe jetzt mal ein, tell me a joke. Man kann es auch auf Deutsch machen, es spricht auch Deutsch. Moment, jetzt warte ich kurz. Da braucht er jetzt interessanterweise relativ lange. Gut, das ist ja auch sehr viel Text.

Und jetzt kommt schon die Antwort zurück. Jetzt hat er mir hier ... Das ist jetzt schon fertig. Why couldn't the bicycle stand up by itself? Because it was too tired. Too tired. Ist gar nicht so schlecht. Jetzt schreibe ich mir noch another one. Und jetzt ist er schon da. Schon fertig getippt. Also das ist wirklich fast so schnell wie Chat GPT.

Wenn man jetzt natürlich viel Inhalt reinpackt, so was wie ich packe jetzt den kompletten Inhalt von irgendeinem großen PDF da rein und dass er mir mal den Fallennamen daraus generiert, dann geht es natürlich nicht so schnell. Dann hatte ich jetzt bei einem größeren PDF mit drei, vier Seiten, wo es bis 20 Sekunden dauert, bis dann der Fallenname zurückkommt. Aber es scheint relativ effizient zu rendern auch bei mir hier, weil man sieht auch, die CPU langweilt sich dabei die ganze Zeit.

Es wird alles auf der GPU gemacht. Und das ist das, was ich vorher mit anderen Experimenten hatte, dass dann mir quasi der Rechner eingefroren ist, weil es versucht hat, alles auf der CPU zu machen. Das OLAMA scheint ganz gut optimiert zu sein, zumindest auf dem Mac, dass die Sachen auf der GPU laufen. Das ist irgendwie nett.

Und wie gesagt, es gibt auch eine API, wo du dann auf localhost.xy kannst du Requests hinschicken und kriegst dann die Antwort zurück, wahlweise als Stream, wahlweise als kompletter Text. Wie du willst, gibt es viele verschiedene Optionen. Ziemlich einfach zu bedienen. Das war genau das, was ich in meinem Fall für den macOS Shortcut gebraucht habe. Ich schicke da einfach den Inhalt hin und dann kriege ich das zurück. Das wartet dann auch brav, bis die API antwortet.

Und dann wird die Datei umbenannt. Ich war echt erstaunt, wie wenig Aufwand der Rechner da offenbar betreiben muss, dass so was bei mir jetzt lokal läuft. Krass. Ich weiß, die Models sind unterschiedlich anspruchsvoll. Das Google-Model verursacht deutlich mehr Last. Ich habe keine Ahnung, ob die Antworten dann besser sind. Habe ich jetzt nicht ausprobiert. Mir ging es ja um einen relativ simplen Anwendungsfall. Ich wollte mir von dem Ding jetzt nichts programmieren lassen.

Ich sage nur, hier habe ich einen Text. Mach mir bitte einen String draus in dem Format und versuche folgende Sachen zu extrahieren. Datum und so was. Und dann habe ich in folgender Programmiersprache folgendes Problem. Sowas habe ich damit noch nicht gemacht. Finde ich ziemlich cool. Läuft schnell, läuft gut. Wenn man mal damit rumspielen und ausprobieren will, dann ist das echt gut. Man darf keine Angst vor der Command Line haben. Das ist eine der Voraussetzungen.

Vor 10 Jahren hätte ich das Ding nicht so freudig angefasst wie jetzt. Jetzt finde ich es super, dass es auf der Command Line funktioniert, weil man damit ganz viele verrückte Sachen machen kann. Oder dass es eine API hat. Kann man mal mit rumspielen. Ich will eigentlich keine Kommentare haben von wegen, AI ist doch alles scheiße, die brauche ich nicht.

Aber falls jemand schon mal damit rumgespielt hat und noch etwas anderes Verrücktes gebaut hat oder sagt, da musst du aufpassen, das Modell ist gut für das. Was ist das, was wir vorhin nicht gemacht haben? Werbung haben wir nicht gemacht. Vielleicht holen wir das jetzt gleich nach. Dann machen wir es als Zwischendings, bevor ich noch mal einen Nachtrag habe. Mit meinem Geil-Teil bin ich fertig. Schreibt mal, ob ihr sowas auch schon verwendet habt.

Was ihr da für Erfahrungen gemacht habt, würde mich interessieren. Wir gucken uns das bestimmt auch im Stream noch mal an. Dann kommt jetzt Werbung. Dann mache ich jetzt ganz kapitalismusgeil erst den Marker für den Einschub und starte dann die Werbung. Sehr gut. Bitte schön. Hey, hey du, schön, dass du da bist. Na, öfter hier? Dir gefällt, was du hörst? Und du magst es am liebsten werbefrei und unabhängig?

Dann freuen wir uns sehr über ein paar Euro in unserem digitalen Strumpfband unter www.bwsi.de. Auf www.bwsi.de findest du noch ca. 69 weitere Wege, uns zu supporten. Wir danken dir. Wir danken dir. Und jetzt habe ich noch einen Einschub. Ich habe was gebastelt nebenher so ein bisschen. Man hat es kaum gehört. Man hat es kaum gehört. Ich habe einen Link zu einem Pen gepostet. Da kannst du vielleicht mal draufklicken. Installiere ich mir da jetzt ein Virus? Ja, klar. Okay, gut.

Dann klicke ich drauf. Dann klicke ich drauf. Das dauert lange zu laden. Warum eigentlich? Vielleicht, weil das Olama noch läuft bei mir. Und zwar habe ich mich das jetzt vorher nicht losgelassen. So irgendwie, dieses hier ist was falsch geschrieben. Und das Ruby-Element nutzen, um da irgendwie dann Korrekturvorschläge drin anzuzeigen. Und das musste ich jetzt einfach mal schnell in einem Code-Pen umsetzen. Also ich habe da den Satz, das ist flasch geschrieben.

Und als Vorschläge sollen da falsch und flasche erscheinen. Sodass ich dann draufklicken kann und das wird korrigiert. Und dafür habe ich jetzt das Ruby-Element genutzt. Weil ja da standen für textuelle Annotations. Und da würde ich Korrekturvorschläge zu dem Wort tatsächlich dazuzählen, kann man das benutzen.

Und zwar, und deswegen kommt es ja heute auch in der Episode drin vor, wenn ich das richtig verstanden habe, und ich habe nichts Gegenteiliges in der MDN gefunden, Ruby, RT und dieses Ersatzelement, das sind doch alles Inline-Elemente. Dann sollte es doch kein Problem sein, die in ein Block-Element zu setzen. Korrekt? Ja. Wenn ich, das funktioniert, wenn ich einfach nur links in das HTML-Feld im Code-Pen-Editor den Satz reinschreibe, funktioniert das problemlos.

Aber sobald ich ein P drumrum rappe, geht komplett der ganze Style verloren von dem Ruby. Dann ist es nämlich, dann ist es eine UN-Liste für die Vorschläge, die ich da reingesetzt habe. Es ist plötzlich alles umgesetzt, es ignoriert komplett die CSS-Regeln. Dann habe ich geguckt über Inspect, warum ist das so?

Und es ist, weil es dann im Browser, im DOM, wenn ich mir das anschaue, über das Inspect-Tool, das Ruby-Element, beziehungsweise doch, das ist innerhalb von dem P. Ich dachte nämlich, das setzt irgendwie außerhalb. Ah, nee, weil ich ein ul-Element drin habe. Das ist das Problem. Das habe ich gerade auch gedacht, du hast ja noch ein Block-Element reingepackt. Ich habe das ul, das ist ja der Block. Macht aber nix, macht ja keinen Unterschied, weil es im DOM ja trotzdem anders angeordnet wird.

Okay, das heißt, das Problem ist, ich darf da drin keine Liste verwenden, weil das dann tatsächlich eine, weil das dann eben ein Block-Element ist. Das heißt, ich könnte es aber so basteln, dass diese Liste halt keine Liste ist, halt semantisch dann schon wieder blöd. Und könnte es einfach so irgendwie wie eine Liste quasi darstellen untereinander.

Das würde gehen, ja, macht Sinn. Aber dann könnte ich tatsächlich dieses Ruby-Dings benutzen, um zu sagen, wenn ich da draufklicke, das müsste ich halt wahrscheinlich dann leider per JavaScript machen, weil, oder warte mal, wie kann ich dem, na doch, ich kann doch dem, ich könnte dem Ruby ein Tab-Index geben, dann ist es fokussierbar, ne? Ja. Tab-Index gleich null kann ich machen, ne? Dann ist es fokussierbar, aber hat keine besondere Reihenfolge. Richtig, so war das doch, oder?

Und dann könnte ich sagen, das Ruby-UL ist standardmäßig. Ja, aber etwas fokussieren, mit dem ich nichts tun kann, ist halt Käse. Ja, kann ich ja aber. Ich kann ja was tun. Ich kann ja eben dann auswählen, also ich sag jetzt mal, Display, das seht ihr jetzt natürlich nicht, Display none, und könnte jetzt sagen, aber wenn ich das Ruby-Element fokussiert hab, dann Display block. Das ist schon hacky. Speicherst du das gerade alles auf?

Nee, ich probier's grad erst mal auf, bevor ich sag, ja, tatsächlich, es geht. Aber ich möchte natürlich nicht block, soll ja inline sein, logischerweise, inline. Inline-Element. Ja, das geht tatsächlich. Speicher mal. Ich speicher's gleich noch hier. So, jetzt speicher ich. Ich krieg das dann auch in die Shownotes kopiert. So, jetzt kannst du nochmal laden. Jetzt kannst du nämlich auf das flaschgeschriebene Wort draufklicken. Und dann geht das auf. Okay, ja.

Was dann passiert, das wird ja sowieso per JavaScript passieren. Und dass du das dann anklicken kannst. Allerdings ist das halt auch wieder, das ist ja auch wieder überhaupt nicht accessible. Wahrscheinlich, ne? In dem Fall wäre wahrscheinlich ein Popover oder zumindest ein Dialog, der dann automatisch wieder den Fokus erhält und so, wäre natürlich die bessere Lösung.

Oder ich müsste es per JavaScript machen, dass es eben nicht der Fokus ist, sondern dass es bei Fokus, weil ich weiß nicht, Popover fände ich tatsächlich genau das Richtige an der Stelle. Also so vom Gefühl her. Aber ich fand's einfach mal interessant, weil ja angeblich die semantisch richtige Lösung eben wäre, das Ruby Element zu nutzen, weil es eine textuelle Anmerkung, Annotation zu diesem Wort ist. Interessant, ja. Das könnte man jetzt natürlich versuchen.

Also erstmal müsste man das ul wieder loswerden. Wie der Browser das ... Einfach nur, damit das Ruby Element weiter verbreitet wird. Ja, genau. Fand ich einfach mal interessant. Wie gesagt, poste ich rein. Man müsste das noch ein bisschen umbauen, damit es tatsächlich funktioniert, ohne das Block-Element im Line-Element. Aber hat mich jetzt gereizt, einfach mal damit zu basteln. Jetzt schmiert mir grad irgendwie der Chrome ab. Das ist doch keine gute Idee. Ah, jetzt.

Genau. Ja, so viel als Einschub noch dazu. Und dann kommt jetzt ... ... das Ende. Yeah! Das hat geklappt. Allerdings. So, heute haben wir wieder abgelehnt. Ich dachte noch, es wird eine ganz kurze Folge. Da, finde ich, hätten wir uns die eine oder andere Spende verdient. Ich wollte es nur noch mal sagen. Katsching! Katsching. Ende-Dschingel hast du extra reingeschrieben. Ja, Ende-Dschingel habe ich reingeschrieben, weil wir noch den Einschub hatten, aber es schon in dem End-Dings drin war.

Aber wir haben ihn ja nicht vergessen. Und da ist alles gut. Bestellt das Poster. Das ist auf jeden Fall das Allerwichtigste, was ich vorhin angeteasert habe in unserem Merch-Shop. Wir freuen uns über Bewertungen. Das wollte ich noch mal sagen. Ich hab gesehen, bei Spotify haben wir auch mittlerweile ein paar Bewertungen. Bewertet uns gern bei Spotify. Bewertet uns gern bei Apple oder bei allen möglichen anderen. Ja. Wir haben dich lange nicht mehr genutzt. Deswegen drückt auf die Glocke.

Genau, drückt auf die Glocke. Drückt einfach auf irgendeine Glocke. Egal, wo ihr eine findet, drückt einfach mal drauf. Guckt, was passiert. Bewertet uns gerne bei allen möglichen Podcast-Portalen. Schaut mal bei uns im Stream vorbei. Unter twitch.tv. Da streamen wir in mehr oder weniger regelmäßigen Abständen. Einmal die Woche, manchmal zweimal die Woche. Das ist noch ein bisschen laberiger als hier. Da darf man aber auch mitchatten und mitreden. Da haben wir Technik-Themen.

Wir gucken uns manchmal Videos gemeinsam an, die wir dann aufblasen auf extreme Längen. Wir coden gemeinsam. Wir schauen uns alle möglichen technischen Sachen zusammen an. Das lohnt sich meiner Meinung nach. Zumindest für ein paar Leute, die immer dabei sind, lohnt es sich auf jeden Fall. Haben wir alles abgedeckt? Nix mehr, haben wir alles abgedeckt. Seid ihr alle gedeckt jetzt? Alle sind gedeckt. Dann sagen wir bis bald. Wir sehen uns beim nächsten Mal. Auf Wiedersehen.