4 eher unbekannte Properties

Wo wir sind, ist vorne, Folge 52. Die blutige Kante hat angerufen und möchte aus dem Smallland abgeholt werden. 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-Jongleur Konstantin Groß. Herzlich willkommen, liebe Frontend-FreundInnen.

Das hat man schon lange nicht mehr. Das war ein Wortspiel, was du mal erfunden hast. Aber ich habe mir gedacht, es ist vielleicht mal wieder Zeit dafür. Ich muss hier gerade an meinem Audio noch etwas ändern, was ich vorhin nicht gemerkt habe. Ich höre mich nämlich selbst zu laut und nicht zu leise, aber das können wir ändern. Perfekt. So, jetzt, das ist super. Gut. Ja. Ja. Ja. Da sind wir. Da sind wir.

Und ihr wundert euch vielleicht am Folgentitel schon, dass es nicht weitergeht mit unserer HTML-Serie. Nee, HTML ist abgeschafft. Genau. Ne, brauchen wir nicht. Aber wir machen eine kleine Verschnauf-Pause. Ja, wir haben gedacht, das ist eine Verschnauf-Pause. Und dann haben wir gedacht, das ist jetzt irgendwie weniger vorzubereiten. Und dann haben wir gemerkt, oh, doch nicht. Ja, nee, ich habe, ja, wenn man sich verkünstelt mit irgendwelchen Demos, aber na gut.

Ja, ihr werdet sehen oder hören oder, genau. Wer nicht sehen will, muss hören. Ja, wir haben den ganzen Leib erfahren, was wir mit der blutigen Kante meinen. Ja, aber eigentlich ein gutes Motto für Podcasts. Eigentlich, wer nicht sehen will, muss hören. Ja, genau. Das passt auch zu den Leuten, die sich standhaft weigern, unseren Stream anzugucken. Wer nicht sehen will, der muss halt hören. Genau. Da machen wir mal T-Shirts mit. Ja, das ist gut. Das ist echt gut.

Schreib mal gleich auf die Liste. Ja, nicht sehen. Wir haben heute kein Bier. Das haben wir nämlich noch gar nicht erzählt, auch noch im Stream nicht. Wir haben nämlich so eine kleine Abmachung so getroffen, was miteinander ausgemacht, dass wir bis zur Sommerpause, wenn man auch immer die sein möge, keinen Alkohol trinken. Ach echt, haben wir schon ein Datum ausgemacht? Das wusste ich gar nicht. Wir hatten gesagt, bis zur Sommerpause. Bis zur Sommerpause.

Also ich habe, ich cheate so ein bisschen, weil es ist Bier, aber es ist alkoholfreies Bier. Wir haben ja nicht gesagt kein Bier, wir haben nur gesagt kein Alkohol. Kein Alkohol, genau. Genau. Und deswegen können wir auch trotzdem anstoßen hier. Ja, also ich habe leider kein so gutes Geräusch heute. Ich trinke heute, wie es sich für gute Nerds gehört, Club Mate, spätabends. Das ist immer eine super Idee. Ja, das ist super, ja. Also wird heute eine lange Sendung.

Wir nehmen ja auch spät auf gerade. Dann hältst du wenigstens lange durch. Wir sind für unsere Verhältnisse spät dran, ich würde sogar fast sagen, über eine Stunde später als sonst. Ja, definitiv. Das lag vor allem an mir, ja. So, dann lasst du es mal. Ich stoße mal an durchs Portal. Sehr gut. Schmeckt total verrückt. Ganz ohne Hopfen. Bisschen Zucker. Bisschen Mate-Tee. Bisschen wie Aschenbecher. Und, ähm, kalter Kaffee. So. So beschreiben es ja die Leute, die es nicht mögen.

Ähm, ja, bei mir ist es, es schmeckt eigentlich wie immer, aber ist, ähm, bisschen süßer. Und, äh, wahrscheinlich macht es mich nicht ganz so müde gegen Ende der Sendung wie, wie sonst. Hoffe ich mal. Ja, es ist, ich habe aber vorhin auch schon noch einen Kaffee getrunken. Es ist einfach heute, es ist, äh, heute, heute wird's, heute wird's heiß. Heute wird's heiß. Ja, oder vielleicht lang, keine Ahnung, vielleicht spielen wir ja später noch.

Vielleicht zocken wir ja später noch eine Runde. Live im, im, äh, im Podcast. Das wäre super. Ich glaube, das wird noch langweiliger für die Zuhörenden wie, äh, das, äh, die Idee finde ich, die Idee finde ich gar nicht so schlecht. Muss ich sagen. Okay, gut, ähm, ja, wollen wir direkt, direkt starten. Starten wir. Gut. BWSIV präsentiert die Retrospektive. Die Retrospektive beginnen wir tatsächlich mit einer Sache, die sehr gut, sehr gut zu diesem Jingle passt.

Ja. Also, also auch, man fühlt sich so ein bisschen zurückversetzt in der Zeit. Wir haben, ähm, aus Spaß eigentlich vor kurzem mal überlegt, wie wär's denn, wenn WWSIV eine eigene Faxnummer hätte. fragt nicht, warum einfach wirklich nur ... Und wie das so ist, wenn wir so einen Blödsinn überlegen, dann dauert's nicht lange. Dann dauert's nicht lange. Und jetzt haben wir eine Faxnummer.

Ähm, und, äh, wir haben tatsächlich, also wir hatten das damals im Stream, äh, angekündigt zum ersten Mal. Und, äh, und, äh, da kamen auch direkt ein paar Fax rein, also tatsächlich auch so ein bisschen kreativer. Nicht nur Text, sondern tatsächlich auch ein Foto, ein Faxform. Ihr könnt euch das vielleicht vorstellen, so in Schwarz-Weiß-Raster. Dann war echt gut.

Ähm, und falls ihr uns einen Fax schicken wollt, ähm, also Fax ist quasi jetzt die neue, der neue Feedback-Kanal, äh, den ihr, den ihr verwenden könnt. Ihr müsst allerdings, ähm, damit rechnen, dass euer Fax dann aber auch mal irgendwie gezeigt wird oder gepostet wird, wenn ihr uns eins schickt. Genau, also im, im Stream oder, oder erwähnt, äh, zumindest hier. Das ist der, der Disclaimer, den wir hier noch raushauen müssen.

Dann wird es eventuell im Stream gezeigt oder vielleicht auch vertweetet oder vertu-tet auf Mastodon. Ähm, aber unsere Faxnummer, äh, lautet 0721 470 46 487. Ich wiederhole, 0721. 0721 470 46 487. Schickt uns ein Fax. Kosten natürlich zu eurem, äh, ganz normalen, äh, Telefon-Torif. Ach so. Weiß nicht, muss man das, muss man in das Klima. Und wir brauchen, wir müssen das als Jingle irgendwann machen. Das haben wir im Stream auch schon mal gesagt, irgendwie so 0721 470 46 487.

Oder irgendwie sowas, ne? Die faxigste Nummer Deutschlands. Frontend-Faxen, äh, Frotzelein. So genau, wir haben ja überlegt, ob wir uns umbenennen. Frontend-Faxen-Frotzelein, dann wäre es wenigstens ehrlich, weil Fakten gibt es ja eher selten bei uns. Aber Faxen gibt es öfter. Ja, die Faxen, äh, haben wir, äh, dicke, wir haben die Faxen faustdicke hinter den Ohren. Oder wie war das? Okay. Brauchen wir gar kein Bier, geht alles auch so.

Bevor es noch blöder wird, ähm, äh, fange ich mal an. Ähm. Was ist los? Was heißt denn das jetzt? Ach so? Nein. Ja, also, nee, also ich meine, mach ich mal weiter. Fangen wir mal an. Fangen wir mal an, bevor es noch blöder wird. Äh, und zwar hab ich, äh, diese Woche, nee, war es diese Woche oder war es letzte Woche?

Jedenfalls seit der letzten Podcast-Folge, ähm, mit einem neuen Tool gearbeitet, äh, und das hatte der Michael, unser Micha van Engelshoven in der Folge, oh geht, oh Gott, Folge 25, ähm, auch mal kurz angesprochen. Und das kam jetzt bei mir zum Einsatz, weil ich für ein, äh, jetzt überlege ich, hol ich soweit aus, äh, oder, ich wollte Dinge automatisieren, möglichst bevor ich, äh, sie in das Repository committe.

Ähm, und ich hätte das mit Git-Actions machen können, dann halt schon im Repository, aber ich wollte das halt, wie gesagt, möglichst schon abfrühstücken, während es noch bei mir lokal ist und dann überhaupt gar keinen Commit erst erstellen, wenn irgendwas nicht, nicht, nicht passt.

Und, äh, und dann hab ich kurz gegoogelt und bin direkt gestoßen auf Husky und das ist ein NPM-Package, das man installieren kann und dann kann man sich für, für jeden Git-Hook, ähm, so ein, so ein, äh, File anlegen einfach nur, also das konfiguriert sich alles da von, von selbst mit, mit Git zusammen und, ähm, dann kann man da drin beliebige Skripte ausführen, also irgendwie sagen, before commit oder before push, ähm, wird dann irgendwas ausgeführt, in dem Fall wollte ich eine Versionsnummer bumpen,

ähm, und, äh, und noch irgendwas anderes machen und, genau, das hab ich jetzt mal ausprobiert und das find ich ziemlich cool, also da kann man so ein bisschen noch mehr automatisieren, ohne dass man jetzt irgendwie, äh, da online dieses Bildzeugs konfigurieren muss und dann vielleicht noch zahlen muss, wenn man da diese freien Minuten überschreitet und, ähm, ja, fand ich ganz cool. Cool. Einfach mal angucken. Genau.

Ähm, ja, mein nächster Retro-Punkt, äh, ist Feedback, Podcast-Feedback haben wir bekommen, ähm, wahrscheinlich kriegen wir das häufiger als, als wir denken, wir, wir schauen immer nur auf bestimmten Plattformen nach, also falls ihr uns irgendwo mal Feedback geschrieben habt, äh, was nicht Apple Podcasts ist, dann haben wir es wahrscheinlich noch nicht gelesen, also dann, äh, sagt uns mal Bescheid, wo ihr das geschrieben habt, ähm,

Ich mein jetzt so die Feedback-Funktion von, äh, von Podcast-Programmen und bei Apple Podcasts kann man ja Feedback schreiben und, äh, wir sind immer noch ein Fünf-Sterne-Podcast da, also wir haben bisher immer noch Fünf-Sterne-Bewertungen bekommen, aber es waren auch ein paar, äh, ein paar nette Texte jetzt dabei, die ich jetzt zum ersten Mal gelesen hab und es, äh, es reicht ein bisschen weiter in die Vergangenheit tatsächlich zurück, ähm, das, ich trau mich die kaum vorzulesen, eigentlich, also schaut mal selbst nach bei Apple Podcasts, äh, wo wir sind, ist vorne, ähm, und schreibt uns natürlich auch Feedback.

Also, äh, wir würden uns sehr freuen. Wir haben uns auch sehr gefreut schon über das, was da kam. Also extrem gefreut, wie gesagt, es gibt so Sachen, die sagt man über sich selbst nicht, die sind einfach zu nett, die kann ich jetzt nicht hier vorlesen, im Stream hab ich mich das getraut, hier mach ich das lieber nicht, äh, nee, das, äh, genau, könnt ihr ja mal reingucken. Das ist nicht schlimm, aber es ist so sehr beweihräuchernd und das ist, da fühlt man sich dann irgendwie, ja, genau.

Es ist zu nett, dass man sowas über sich selbst sagen würde, aber es hat uns extrem gefreut, das können wir auf jeden Fall schon mal sagen und da war einiges dabei, ähm, und,

äh, wir würden uns sehr freuen, wenn auch ihr, falls ihr es noch nicht gemacht habt, uns auch Feedback schicken würdet, äh, gerne über Podcast-Apps und falls es nicht Apple Podcasts ist, dann gerne mal auch irgendwie uns über Twitter oder Mastodon mal anschreiben und sagen, hey, guck mal, ich hab hier Feedback gegeben, weil dann gucken wir da dann auch mal regelmäßig, weil es gibt so viele Plattformen, ähm, so, so viele kleinere, wo wir das gar nicht mitkriegen, weil wir nicht darüber notifiziert werden, wenn da Feedback geschrieben wird.

Also bei Apple Podcasts werden wir darüber auch nicht notifiziert, aber da gucke ich halt ab und zu mal rein. Und wie bin ich überhaupt da drauf gekommen, ähm, dass da Feedback ist, ähm, oder dass da neues Feedback ist, äh, über ein Feature, was ich, äh, entdeckt habe, was, was ich,

was wahrscheinlich irgendwie alle schon kannten, aber was ich jetzt erst vor kurzem entdeckt habe, nämlich, äh, kann man über ein Meta-Tag auf der Seite, äh, sich auf, äh, Apple Podcasts fähigen Geräten, nee, das ist eigentlich falsch, ich würde sagen, iOS-Geräte, wahrscheinlich auch iPadOS, da bin ich mir jetzt nicht sicher, ähm, auf solchen Geräten, wenn man Meta-Tag in die Seite einfügt, äh, wo die, ähm, App-ID, Schrägstrich Podcast-ID hinterlegt ist, also das Meta-Name Apple iTunes App heißt das,

äh, und, äh, Content App-ID und dann kommt eine Nummer, ähm, kann man sich so ein Podcast-Banner einblenden lassen auf der Seite, man kennt das auch von anderen Seiten für Apps, also gibt's, äh, es gibt auch so App-Banner, aber das gibt's auch für Podcasts, äh, und, äh, das hab ich bei uns eingebaut und bin darüber dann auf die Apple Podcasts-Seite unseres Podcasts gekommen und hab dann da gesehen, ah, das ist ja neues Feedback da, was ich noch gar nicht kannte, aber das ist vielleicht so ein kleiner Tipp für die, äh, Podcastenden unter euch, ähm, das könntet ihr euch mal anschauen, wenn das, wenn ihr das noch nicht auf eurer Seite habt, das ist eine

eine Zeile da einzubauen, man muss nur irgendwie seine ID mal rausfinden, die hängt man dann da hinten dran und dann, äh, kriegt jeder, der mit dem iPhone da vorbeisurft, direkt so einen schönen Banner angezeigt und kann dann direkt das, äh, den Podcast in der Podcasts-App öffnen Und, äh, das find ich mal wieder ein sehr cooles Feature, also das ist so einfach so, man droppt das da rein und das sieht aber halt gleich irgendwie cool aus und, äh, ja, schöne Sache Genau

Dann komm jetzt, kommt dein Punkt, dein nächster Genau, äh, und zwar hatten wir es vor einer Weile mal, wir beide drüber, erinnerst du dich vielleicht über, ähm, if-Statements Ähm, und da drin dann, also wenn ich jetzt irgendwie, ich überprüfe eine Variable, äh, auf ihren Inhalt halt, also, ähm, und mach aber nicht, äh, if-Variable

Äh, ist gleich, gleich, äh, true, sondern ich mach true gleich gleich gleich Variable oder eben, äh, String gleich gleich Variable und dass man das häufig im PHP-Kontext, ähm, äh, sieht, dass das so ein Coding-Style ist und dass sich darüber so ein bisschen die Geister scheiden, dass ich aber durchaus das Positive auch sehen kann, weil man halt das, was wichtig ist, wenn ich was überprüfen will, gleich am Anfang sieht und dann irgendwie in, in, in, wenn man so mehrere If-Else-Geschichten hat, ähm,

Dann halt gleich am Anfang sieht, ohne jetzt die ganze Zeile zu erfassen, was da überprüft wird und, ähm, möchte jetzt aber nicht sagen, mach das oder lass das, aber ich wusste nicht, dass es einen eigenen Namen hat und jetzt bin ich letztens, äh, durch einen Linter, ähm, in einem Projekt drauf gestoßen, der dann gesagt hat, äh, ja, Anne, laut Yoda-Condition

Ich dachte, Yoda-Condition und dann war mir gleich klar, ja, ja, natürlich ist das mit gemeint, ne, weil Satzstellung, Satzstellung umgedreht und deswegen, ähm, ja, man nennt diese Dinge Yoda-Conditions, also, äh, jetzt wissen wir das auch Also, was, was, was für ein, äh, kannst du mal ein Beispiel geben? Naja, eben, also, dass ich nicht, nicht sag, if, ähm, do this gleich true, sondern eben if true gleich do this.

Ja. Dann, äh, genau, das ist eine Yoda-Condition, also, wenn ich das, äh, den Wert an den Anfang stelle und dann die Variable. Ja, sehr gut. Ähm, was, weißt du noch, was für ein Linter das war? Das würde mich mal interessieren. Ähm, hm, das war entweder, warte mal, das kann ich dir sagen. Ich kannte das Wort nämlich noch nicht. Es war, äh, wo ist es denn? Hier. Entweder war es, äh, JSHINT oder es war JSCS. JSCS. Eins von beidem.

All right. Gut, nee, ist auch nicht so wichtig, war jetzt nur so, war jetzt so reine, reine Neugierde. Ja, cool, jetzt wissen wir das auch. Yoda-Conditions. Yoda-Conditions. Ich hab, ich hab gefragt, weil es klang so ein bisschen nach, nach was, was, äh, Sonar Cube sagen würde, für, äh, für die, die das kennen. Weil das ist oft sehr pingelig bei ganz vielen Sachen, ähm, und sagt dann irgendwie auch sowas wie, ja, das ist irgendwie clumsy. Clumsy.

Es gibt tatsächlich eine, eine, eine, eine Fehlerkategorie, die nennt sich clumsy, äh, bei, bei Sonar Cube. Das ist, äh, das ist ganz witzig. Ähm, die, die definieren zum Beispiel auch, ähm, Komplexität, Brain, Brain Overload heißt es dann, glaube ich, Komplexitätswert von Funktionen, wenn die zu tief sich verschachteln, dann sagen die, ey, äh, du hast aber doch irgendwie festgelegt, der Komplexitätswert von dieser Funktion, der darf nur maximal so und so viel sein.

Das wird irgendwie zusammengerechnet, der wird irgendwie zusammengerechnet. Okay. Ja, aber ist nicht schlecht. Wie tief, also. Es ist super, es ist tatsächlich super. Es ist pingelig, aber es hat halt meistens recht. Äh, okay, haben wir Yoda Conditions gelernt, äh, bist du damit, dann damit fertig? Genau, ja.

Gut. Ähm, ich hatte, äh, nachdem ich ein bisschen frustriert war, ein gutes Erlebnis mit Solarstrom jetzt. Wir hatten ja schon mal drüber gesprochen, ähm, dass ich mir ja mal so ein, äh, so ein 100 Watt Solarpanel, äh, gekauft hab und hab versucht, damit irgendwie Powerbanks zu laden und, äh, war damit so, jetzt im Winter so, äh, gut, wir hab ja schon mal gesagt, irgendwie, äh, Erdgeschoss, ähm, Häuser drumherum, wenig Sonnen, direkte Sonneneinstrahlung und dann auch noch hinter einer Fensterscheibe.

Äh, ist natürlich, ist natürlich sehr schlechte Bedingungen und, äh, ich hatte lange Zeit so den Eindruck, diese Powerbank, die ich da hinten dran hängen habe, das ist eine relativ große, irgendwie 28.000, äh, 26.800 Milliampere, ähm, ähm, die, da lädt sich gar nichts.

Ich hab dann auch mal irgendwie nach, nach ein, zwei Tagen die da weggenommen und hab gedacht, so, jetzt guck ich mal, wie viel drin ist und dann halt noch fünf Minuten, äh, hat mein iPhone gesagt, ah ja, äh, ich bin jetzt fertig mit Laden, es kommt jetzt nichts mehr. Gar nicht, da kommt ja gar nichts an. Und jetzt die letzten Tage war öfter mal ein bisschen Sonne und das war doch erstaunlich, jetzt war die plötzlich voll.

Ich weiß jetzt nicht, über wie viele Tage, über wie viele Tage das jetzt gedauert hat, aber jetzt war sie plötzlich voll und ich hab dann noch mal gemerkt, was für eine krasse Kapazität die hat, ähm, weil ich nämlich dann mein iPhone einmal komplett vollgeladen hab, also von, von, äh, von 25 Prozent oder so vollgeladen. Und dann hatte die immer noch vier von vier Strichen. Ja, cool. So, und dann hab ich gedacht, okay, da hat's jetzt doch ordentlich Solarpower rein, reingepumpt.

Und die war komplett leer und ist dann von der Sonne aufgeladen worden? Die war komplett leer und ist von der Sonne ganz aufgeladen worden. In welchem Zeitraum? Das weiß ich halt nicht genau. Ich hab, ich hab, war frustriert, hab aufgegeben, hab nicht mehr geguckt für eine Zeit. Aber die hingen einfach jetzt die ganze Zeit da. Hingen einfach jetzt die ganze Zeit da dran. Ich weiß jetzt tatsächlich nicht, das möchte ich jetzt aber mal genauer beobachten.

Dafür muss ich sie aber noch mal leer machen. Ähm, ich will jetzt aber erst mal, äh, meinen ganzen Solarstrom verladen, weil mich das total freut, dass ich den jetzt da habe. Ähm, genau. Von der Natur geschenkt. Von der Natur geschenkt und, und mit, also ich hab ja, wie gesagt, ich hab ja gar nichts Baulicht da jetzt irgendwie verändert oder irgendwie, die hängt jetzt wirklich einfach nur an, an der Innenseite von einem Fenster hängt dieses eine Panel.

Und es ist nicht mal komplett, äh, also der, der Sonne ausgesetzt, weil es ein bisschen zu hoch ist. Das heißt, es ist auch ein Stück hinter dem, hinter dem Kunststoffrahmen vom Fenster. Aber das wollte ich einfach nur mal erzählen, weil es irgendwie dann doch ein ganz gutes Erlebnis war. Dachte erst schon, das war, ist jetzt irgendwie so ein Reinfall.

Ähm, oder so nach dem Motto, das Ding funktioniert nur dann, wenn man es tatsächlich in die pralle Sonne ohne irgendwas dazwischen und im perfekten Winkel. Ja, aber wenn es tatsächlich jetzt schon in dieser dunkleren Jahreszeit so funktioniert, also dann, dann scheint es, muss das ja im Sommer erst recht richtig gut zu laden sein.

Das war, das war, das hat mich gefreut und dachte ich, da wir hier schon mal drüber gesprochen haben, greife ich das jetzt nochmal auf und sage, hey, ich hatte jetzt so ein kleines Erfolgserlebnis. Allerdings muss ich jetzt tatsächlich mal die Parameter genauer festzonen und dann gucken, wie lange dauert es denn jetzt wirklich. Und dann vielleicht nochmal so ein Messgerät zwischen reinhängen.

Ich habe mir mal so ein USB-Messgerät, ich glaube, das habe ich auch mal gezeigt, so ein USB-Strom-Durchfluss-Messgerät gekauft und dann mal gucken, wie viel denn da jetzt wirklich reinkommt. Cool. Jo, das zum Solarstrom. Gut, dann habe ich noch eine Kleinigkeit zum Aufgreifen. Wir haben vor einer Weile mal uns gefragt, wie lange es wohl noch dauert, bis IE11 bei Canary Use rausfliegt.

Und jetzt habe ich gerade vorhin beim Vorbereiten für die Sendung gesehen, dass jetzt bei IE11 auf Canary Use, wenn man irgendwo drauf geht, so ein Ausrufezeichen-Icon ist. Das habe ich vorhin auch gesehen, ja. Und da steht dann, wenn man drüber havert, dass die Support-Daten für Internet Explorer nicht mehr aktualisiert werden und eventuell nicht mehr korrekt sein können. Genau, das heißt, das ist jetzt schon deprecated und wird vermutlich irgendwann mal rausfliegen. Genau.

Was hatten wir vor kurzem, dass man ihn nicht mal mehr runterladen kann? Das war jetzt der aktuelle Schritt von Microsoft, ne? Genau, und dann hatten wir es drüber halt, ob der jetzt überhaupt noch relevant ist, weil der in Statistiken da halt immer noch auftaucht und aber eigentlich weg kann. Weil aber jedes Mal, wenn wir halt irgendwie was sagen, so, wenn wir ein Feature-Forscher sagen, wir sagen, elefant. Oh Gott, jetzt habe ich nicht erfunden. Ein wichtiger Elefant ist relevant.

Nein, nein, aber das kommt von Böhmermann. Okay. Ist das eigentlich noch relevant? Eventuell. Eventuell. Jawohl. Du merkst, wir brauchen überhaupt gar kein Bier. Das klappt auch so. Wir reden einfach immer so komisch. Das geht auch so. Ganz nüchtern. Ganz nüchtern betrachtet. Wenn wir keiner Jus irgendwas sagen, so ein Feature vorstellen, dann sagen wir halt immer so, ja, geht überall inzwischen, naja, außer IE, aber das ist eigentlich, kann man sich sparen.

Ich glaube, wir reden jetzt einfach, wir machen jetzt aus, wir reden nicht mehr über den IE. Spart's euch einfach. Also, wir sagen jetzt in dem Fall, auch wenn die Spalte knallrot ist, es geht in allen Browsern, wenn sie überall grün ist. Und ich würde auch sagen, ich würde noch ein Disclaimer hinten dranhängen, der alte Edge vor Chromium Edge zählt für mich auch nicht mehr. Der ist für mich auch, den gibt's nicht mehr in meinem Kopf. Hat sich aber auch automatisch aktualisiert eh, oder?

Also, da gibt's den jetzt theoretisch noch. Ich hab schon lang, ich hab ehrlich gesagt schon lang keine internationalen Browser-Statistiken mehr angeguckt, um sowas zu sehen. Wenn ihr's wisst, schreibt's in die Kommentare. Ja, schreibt's in die Kommentare und drückt die Glocke, ihr wisst ja, und so. Gut. Okay, dann bleibt zu Retro nur noch ein Punkt, nämlich, ich wollte noch mal Danke sagen.

Danke, ich hab ja vorhin schon Danke gesagt für das schöne Feedback und jetzt noch mal Danke für Spenden. In letzter Zeit sind auch noch mal ein paar Spenden reingekommen. Hat uns sehr gefreut und unterstützt uns in dem, was wir hier machen und organisiert uns Domain-Name, Hardware und so weiter. Was man so braucht zum Podcasten. Ja, finde ich, ist mal der sehr kurze, aber sehr intensiver Applaus. Okay, dann passend dazu kommt jetzt Werbung. Achso, dann muss ich aufs Knöpfen dran.

So, ich kann. Warte mal, warte mal, ich hab's. 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.siv.de slash Spende auf www.siv.de slash unterstützen findest du noch ca. 69 weitere Wege, uns zu supporten. Wir danken dir. Ja, einfach mal machen, was der nette Herr euch gesagt hat.

Gut, dann geht's jetzt weiter und wir kommen direkt zu, ah, okay, nee, das passt jetzt wieder so nicht. Wer ist denn da? Hier ist www.siv.de mit dem Tagesthema. Der war jetzt sehr nüchtern im Vergleich zu dem anderen da. Nüchtern? Dieser Herr, der da jetzt gerade gesprochen hat, der war so nüchtern wie wir.

Ja, weil, also ihr hättet jetzt vielleicht die Property der Woche erwartet, aber heute machen wir mal wieder Properties als Thema, aber dafür gibt es heute ganze vier Stück hintereinander weg. Etwas kleinere und etwas größere und deswegen kommt jetzt auch noch der andere Jingle. Die Property der Woche. Teil 1. Ah, sehr gut. Fängst du an? Ja, ich fang an.

Und zwar hab ich, ich arbeite zur Zeit so nebenher ein bisschen an OpenType.js, das hab ich glaube ich auch schon erwähnt, dass ich da jetzt so mit Maintainer bin. Und da stoße ich auch immer wieder im Code oder durch andere, die da mitmachen, deswegen auch nochmal Shoutout an die OpenSource Community, weil das auch wirklich die Mitarbeiter einem selber auch als EntwicklerIn hilft. Da stößt man immer wieder auf interessante Dinge, die man so noch nicht gesehen hat.

Und jetzt hat vor ein paar Tagen jemand, das war nicht mal jetzt in der Codebase, wo das aufgekommen ist, sondern das hat jemand ein Issue erstellt, so, ja, kann OpenType.js denn die Systemstandard-Fonts anzapfen? Mein erster Impuls war gleich irgendwie so, ja, gleich mal schließen und sagen, nee, das geht nicht im Browser, der Browser kann das nicht. Da dachte ich, bevor ich das mache, google ich aber doch nochmal. Und hab rausgefunden, es gibt tatsächlich eine Local Font Access API.

Und das fand ich ziemlich verrückt, dass es das gibt. Weil eigentlich ist der Zugriff auf die Systemfonts aus gutem Grund eingeschränkt, also dass man die auch nicht querien kann. Das wurde früher ganz gerne mal mit Flash gemacht, weil mit Flash konnte man sich auch irgendwie die Systemfonts anzapfen. Und das ist insofern gefährlich, dass man diese Liste installierter Fonts als Angriffsvektor nutzen kann.

Oder zum Fingerprinting. Also Fingerprinting deswegen, weil die Konstellation an Fonts, die in einem System installiert sind, wenn es jetzt nicht gerade komplett jungfräulich ist, doch sehr individuell ist. Also da kann man schon mit einer relativ großen Wahrscheinlichkeit dann hinterher rausschließen, ist das die gleiche Person, wenn man das nochmal hat, also Fingerprint.

Was man aber auch machen kann, und das habe ich in einem interessanten Artikel zu dieser API gelesen, auf dem Chrome Developers Blog, verlinke ich natürlich auch. Man kann zum Beispiel gucken, oder könnte das gucken, über CSS zum Beispiel, kann man ja auch mit dem Local Keyword Fonts anzapfen vom System. Und dann könnte man daraus schließen, wie groß ist ein Element und hat das wahrscheinlich die Font installiert.

Beziehungsweise, wenn ich es direkt anzapfen könnte, kann ich natürlich wirklich auslesen, ist diese Schrift auf dem System installiert. Und es gibt ja gewisse sogenannte Hausschriften, die nur firmenintern eigentlich genutzt werden. Also Google hat irgendwie seine eigene, Google Suns, IBM hat glaube ich eine eigene. Also ganz viele Firmen lassen sich wirklich von Frontdesignern eine eigene Hausschrift machen, die sie dann im Schriftverkehr benutzen oder für Werbung.

Ikea hatte bis vor einer Weile auch eine, ist inzwischen glaube ich auf Notruhe umgestiegen. Aber das ist nur am Rande, also man kann daraus vielleicht sogar schließen, wo arbeitet die Person, die das gerade aufruft.

Und kann dann halt gezielt targeten, so ich will bei Google irgendwie rein oder ich will bei Meta rein und ich gucke dann aufgrund der Hausfond, sodass ich einfach den Personenkreis einenge und meine Energie nicht darauf verschwende, irgendwie Spam-Mails oder Social Engineering irgendwie bei 10.000 Menschen anzuwenden, wo dann irgendwie nur eine davon bei der Firma arbeitet, die ich hacken will, sondern kann dann darüber die Leute wirklich ausfindig machen.

Aber es gibt tatsächlich, und zwar hinter einer Permission versteckt, eine API wie gesagt, mit der ich diese Fonts anzapfen kann. Warum sollte ich das wollen? Ich will zum Beispiel irgendwelche interaktiven Grafiken machen mit WebGL oder ich will auf dem Canvas was zeichnen. Ich kann zum Beispiel mit Web-Fonts, wie waren das, also lokal eingebundene Fonts, kann ich glaube ich nicht in dem Canvas verwenden.

Eben genau aus dem Grund, dass ich nicht dann irgendwie versuchen kann, dann anhand der Pixel rauszufinden, ob diese Fonts anzapfen sind. Ich habe noch einen Use Case für dich, wo ich gerade sofort dran denken musste und jetzt habe ich kurz gegoogelt und habe tatsächlich gefunden, dass es sogar dazu zu der Local Font Access API in Eintrag gibt. Und zwar habe ich hier auch schon mal erwähnt, ich benutze Boxy SVG als SVG-Editierprogramm oder so als Design-Tool für mich, um SVGs zu bauen.

Also irgendwie Logos und Kram, alles was Vektorgrafik ist. Und das gibt es sowohl als Electron-App zum Installieren als auch als Web-App im Browser. Und ich habe jetzt gerade mal geguckt und das möchte natürlich Fonts, da möchtest du natürlich die Fonts, die du auf deinem System hast, benutzen können. Und das funktioniert so lala, also selbst in der Electron-App funktioniert das mal, wer findet mal die Fonts, mal findet er sie nicht.

Das ist so ein bisschen flaky, aber es gibt tatsächlich hier in der Doku dazu einen Eintrag, der sagt, wie ich das einstellen kann, dass es funktioniert, auch wenn ich die Web-App verwende. Und da wird genau das gesagt, ich soll die Web-Local-Font-Axis-AP einschalten. Vielleicht packe ich das auch mal in die Shownotes, diesen Link, weil das finde ich tatsächlich interessant, weil das genau so ein Anwendungsfall ist.

Ich habe hier eine App, mit der möchte ich Grafiken erstellen, da möchte ich natürlich meine Fonts verwenden. Daran habe ich auch gedacht, dass man das in der Electron-App dann tatsächlich anzapfen kann. Wahrscheinlich muss man da nicht mal die Permission bestätigen. Das weiß ich nicht, vielleicht müsste ich da mal gucken, weil bei mir geht es nämlich nie, das mit den lokalen Fonts. Und das würde jetzt erklären, warum.

Vielleicht ist da irgendeine Einschränkung, die man irgendwie umgehen muss. Es steht aber eigentlich, wenn man die App-Store-App nimmt, steht hier, sollte das funktionieren, aber es funktioniert trotzdem oft nicht. Vielleicht, da bin ich mal gespannt, ob meine Demo bei dir funktioniert, die ich gleich noch zeige.

Genau, also das mit diesem Tracking zu verhindern, das geht sogar so weit, dass WebKit das eingebaut hat, dass man über local, über diese CSS-Funktion, nur die Fonts einbinden kann, die mit dem Betriebssystem kommen. Also alles, was ich zusätzlich installiere, wird da nicht angezeigt, sondern nur die, die tatsächlich mit dem System kommen und dadurch wird eben verhindert, dass man da irgendwie Schindel mit treiben kann.

Umso interessanter wird in dem Fall natürlich dann diese API, wenn sie dann unterstützt wird, weil aktuell funktioniert das nur in Chromium-Browsern und dort auch nur auf Desktop. Genau, und ich habe jetzt eine Demo gebaut, die hat in CodePen nicht funktioniert, weil da aufgrund von CSP-Sicherheitsgedöns, das, wo wir ja auch darüber schon mal gesprochen haben, vielleicht verlinke ich auch noch die Folge, wenn wir da, wir haben es jetzt schon öfter mal immer wieder genannt, dieses Keyword CSP.

Gucken wir mal hier, Policy, das war die Folge 48, die kommt dann auch noch in die Shownotes. Dementsprechend musst du jetzt eine Demo bauen, die ich bei uns jetzt auf dem Server gehostet habe, aber ihr dürft mir da vertrauen und ihr dürft einfach mal, trust me, bro, ja, draufklicken und das bestätigen. Das hat sich jetzt sogar gemerkt. Ich bin mal gespannt, was du siehst, wenn du draufgehst. Du hast den, ah, du hast die, okay, das ist die Demo, die bei uns auf der Seite, okay.

Also entweder geht in die Shownotes oder wo wir sind, vorne.show slash demo slash ... Die Schriftarten auf deinem Computer, bla, bla, bla, damit ich, ja, und jetzt lass ich mal zu. Und, ah ja, und jetzt krieg ich 1326 Fonds, hab ich installiert. Ah, 1403 sticht. Comic Sans is one of them. Ah, okay, sehr gut. Die wird ja auch in Comic Sans angezeigt, ne? Ja, die wird mir auch in Comic Sans angezeigt, äh, und so weiter. Ah ja, cool.

Ja, und dann lese ich hier aus, ich hab ja noch gar nicht drüber gesprochen, was die eigentlich, ne, was ich genau damit machen kann. Aber ich, einfach mal die Demo und dann, dann, dann, dann, äh, kannst du ja vorlesen, was da steht und dann erklär ich was. Genau. Did you know that it was designed by Vincent, äh, Connare? Keine Ahnung. It consists of 587 Glyphs. Ach, bei mir sind's 1106. Dann hab ich eine bessere Version, weil ich einen Microsoft-Computer hab.

Willst du dieses Thema jetzt starten? Wahrscheinlich hab ich tolle Ligaturen bei Comic Sans. Ja, wir haben uns im letzten Stream gezoffen. Wir haben uns im letzten Stream schon schlimm, schlimm gefetzt, deswegen. Das will ich gar nicht, wollte ich gar nicht triggern. Nee, nee. Ich glaube, diese Straße ... Aber es ist interessant, also es scheint wirklich, das Font-File, dass ich hab, ich könnte jetzt noch die Versionsnummer einblenden.

Ich habe keine Comic Sans selbst installiert, ich habe die, also ich glaube, das muss nur vorinstalliert sein, ich glaube nicht, dass ich die installiert hab bei mir. Also, offenbar hast du eine andere Version tatsächlich. Oder es wird anders gezählt bei mir, das kann auch sein. Dürfte eigentlich nicht, weil es wird nämlich mit OpenType.js gepasst. Anyway, anyway, the first font I found on your device is called Academy Engraved LetPlane 1.0.

Hier ist der Text, wo wir sind, ist vorne, in that font SNSVG. Und dann sehe ich da tatsächlich eine ... Gut, ich hätte jetzt nicht sagen können, dass es die Schrift ist, aber so vom Aussehen her könnte man annehmen, dass das so eine ... Es ist halt so eine schöne Serifenschrift, das ergibt schon irgendwie Sinn. But why? Stop at that. Here is it, äh ... Here it ... Ah, schön, dass du Schreibfehler gefunden hast. Okay, gleich nochmal ein bisschen QS gemacht.

Here it is fully editable text, enjoy. Okay, und da kann ich jetzt reinklicken und rumtippern und dann krieg ich tatsächlich Buchstaben in dieser Schriftart angezeigt. Okay, cool. This does not come from a font face. But it is actually loaded dynamically directly from the binary code of the font file on your device. Okay. Genau, also, ich kann mit dieser API ... Ah, das ist ein Content Editor, ne? Genau. Kann ich ...

Jetzt muss ich gerade hier selber nochmal aufmachen, weil ich es natürlich nicht auswendig weiß. Ist das die verkünstelte Demo? Genau, da hab ich, da hab ich vorhin noch drüber gebaut. Ähm, da kann ich window.queryLocalFonts ausführen. Dann krieg ich ein Promise zurück. Ähm, und in dem Promise krieg ich dann ein Array von FontData-Objekten zurück. Ähm, also ein spezielles, äh, ja, Objekt, ein globales Objekt, FontData oder ein Objekttyp, ähm, nur dafür.

Und, äh, da gibt's dann Properties wie Family, Fullname, Postscriptname und Style, die ich abfragen kann. Ähm, das heißt, damit hab ich dann dieses, äh, die erste Schriftart ist die und die. Ähm, aber wie hab ich das gemacht mit dem, äh, mit dem Grüfenzählen oder dass ich bei, äh, ComicSuns schreibe, wer der Designer ist, das kann ich dann wirklich aus den Binärdaten auslesen.

Also, ähm, wenn ich mir eine Library wie OpenType.js, das ist natürlich nicht die einzige, die OpenType-Schriften lesen kann und auswerten kann, ähm, aber da ich da mitarbeite, hab ich die genommen, äh, kann ich dann die reinladen. Also, das ist ein, äh, die kann ich mir als, dieses Font-Objekt kann ich mir dann auch als, als Blob, äh, zurückgeben lassen. Das lade ich in Array-Buffer und mit dem Array-Buffer fütter ich dann eben OpenType.js.

Und dann hab ich wirklich Zugriff auf diese Tabellen, die in den Font-Files drin sind. Also, ähm, zum Beispiel die Name-Tabelle und da stehen dann so Sachen drin, halt wie das Copyright, ähm, wer der Designer ist, äh, Nutzungsbedingungen und so weiter. Und das kann ich dann alles auslesen und kann theoretisch mir die, ähm, die Glyph-Daten halt rausziehen und, äh, die, die eigenen, einzigen, äh, die einzelnen Vektorpunkte und so weiter.

Und kann das eben dann in SVG rendern oder, was ich jetzt da gemacht hab, ich lass mir das Ganze wieder als Blob-URL, ähm, oder ich hätt's auch als BS64-encodete URL mir umwandeln lassen können. Und lade das dann wieder dynamisch als, als Font rein und kann damit arbeiten. Ja, genau. Ziemlich coole Demo, muss ich sagen, also, die solltet ihr euch auf jeden Fall mal anschauen und euch von Konstantin tracken lassen.

Getrackt wird nichts, das wird nicht an den Server übertragen, wer mit welchen Fonts da drauf zugegriffen hat, das ist alles im Browser. Ich hätt's, wie gesagt, gern auf CodePen gemacht, aber das, das ging nicht.

Ähm, auf jeden Fall kann ich jetzt noch mal nach der Experience, die ich jetzt hier gemacht hab, sagen, dass das, was ich vorhin gesagt hab, mit, ähm, dass der Browser, dass der Browser, dass man im Browser das als Feature einschalten kann, das scheint veraltet, was ich grad vorhin gesagt hab, sondern, man wird tatsächlich gefragt, also, wenn dieser Access, wenn ich nach diesem Access gefragt werde, äh, genau.

Ich muss es aber vorher nicht einschalten, ich hab auch in den, äh, Chrome-Flags nichts gefunden, was so heißt, wie angeblich, äh, in dieser Seite. Was ich auch interessant fand, also, man kann das auch, man kann diese, diese Anfrage, ähm, auch nicht von sich aus starten, sondern man muss erst eine User-Interaktion haben.

Ah, also, deswegen musste ich diesen Button erst einblenden und erst dann kann ich überhaupt diese Permission anfragen, also, ich kann schon nicht mal die Permission anfragen, bevor der User nicht irgendwie zumindest irgendwo geklickt hat. Da haben wir wieder diese, äh, API, welche ich jetzt schon wieder vergessen hab, wie sie heißt, äh, über die wir im Stream gesprochen haben.

Ja, diese Permission, ähm, ja, wo man, wo man sehen kann, welche Permission, äh, angefragt wurde und, und ob die noch in diesem zug, äh, zulässigen Zeitraum liegt, ne, das meinst du, ja? Genau, genau, das mein ich. Ja, liefern wir nach, irgendwann vielleicht auch nicht. Ähm, auf jeden Fall sehr, sehr coole Demo, ähm, gefällt mir sehr gut. Das freut mich. Vor allem wegen Comic Sans, ne? Nur deswegen. Ich find Comic Sans gar nicht so schlecht. Nee, ich auch nicht.

Ich, ich muss sagen, es gibt, es gibt so Leute, die führen so, äh, Kreuzzüge gegen bestimmte Typefaces, ganz wichtig, hab ich irgendwie vor kurzem gelernt, ähm, das, das, was wir als Font, äh, bezeichnen oft ist, meistens meint man damit Typeface. Also, Font ist nämlich nur die Datei, Typeface ist nämlich die Schriftart.

Ähm, es gibt Leute, die, die Kreuzzüge gegen bestimmte Typefaces fahren, ähm, ganz beliebt ist Comic Sans, Bashing, das hat bestimmt jeder schon mal gehört, dass Comic Sans so böse sein soll. Wobei man natürlich halt schon sagen muss, also für Geschäftskommunikation eignet sich's halt nicht.

Das hat ja aber, ja, aber, aber, aber, aber ich find, ich find, sie ist nicht allgemein zu verdammen, ähm, weil sie nämlich zum Beispiel eine Schriftart ist, und das hat, das hat Anwendungsfälle, hatten wir's glaube ich auch schon mal drüber, ähm, die ein normales Schreibschrift A hat, so wie man's schreiben würde, mit der Hand. Das, äh, macht sie geeigneter zum Beispiel für Sachen in Schulen.

Genau, okay, alles was mit Kindern zu tun hat, oder wenn ich tatsächlich einen Comic schreibe, warum sollte ich nicht Comic Sans nehmen, ne, also. Genau, deswegen diese Schriftart ist nicht zu verdammen generell, natürlich, wenn jetzt, wenn ich jetzt von einer Bank irgendwie einen Brief, eine E-Mail in Comic Sans krieg oder so, das find ich jetzt schon ein bisschen weird, aber ich glaub, das haben die mittlerweile auch alle verstanden.

Ich glaub, dieses Problem, das gibt es gar nicht mehr, das gab es mal, das gibt es aber eigentlich gar nicht mehr, behaupte ich jetzt, aber ich nehm auch natürlich gerne Beispiele entgegen, wenn ihr irgendwas habt, wo ihr irgendwas in der völlig falschen Schriftart irgendwie habt, zum Beispiel ein Wahlplakat von der Linken in der gebrochenen Schrift oder sowas.

Ja, das find ich sehr hot. Also irgendwas, wo die völlig falsche Schriftart verwendet wurde für irgendeinen Fall. Bitte, bitte, bitte, da freuen wir uns über Zuschriften. Ich möchte jetzt nicht über Kunden hier herziehen, aber ich schick dir nachher privat mal noch ein Logo, das jemand unbedingt haben möchte und sich nicht umstimmen lässt.

Okay, ich bin sehr gespannt. Ich hab da schon lange nichts mehr Schlimmes gesehen. Von daher glaube ich, dass dieser Rant oder dieser Kreuzzug, dass das irgendwie so ein bisschen, so ein Scheinkonflikt ist. Es gibt auch eine Person im Internet, die total die Schriftart Lobster überhaupt nicht leiden kann. Okay, echt. Also nicht nur, es gibt wohl nicht nur eine, es gibt so eine Person, die immer wieder in meinem Feed auftaucht und da hat er ja schon wieder hier Lobster, Lobster.

Und ich denk so, ja, natürlich, wenn du, wenn du, wenn du die suchst, die Schriftart, dann wirst du sie auch oft finden. Aber ich find die an sich gar nicht so schlecht. Die ist schon ein bisschen, die ist eigen, ja, aber ich kann verstehen, dass es Menschen gibt, die die gut finden. Es ist halt wirklich die Schreibschrift, so, und es erinnert so an so amerikanische Restaurants oder irgendwie sowas, ne? Also, ja, warum nicht? Mein Gott.

Ich find die nicht so schlecht. Also, ja, so, there I said it. Also, wer noch mehr über Webtypographie hören will, der hört sich unsere Folge 14 an. Webtypographie mit Gerrit van Aken. Genau. Das war's dann schon zu diesem Thema. Ich hab gedacht, bei so vielen Links und so vielen Notizen hab ich gedacht, dass das länger dauert. Ich sag doch, das geht ganz schnell. So, jetzt, jetzt geht's noch schneller. Genau, weil jetzt kommt ... Die Property der Woche. Teil 2. Sehr gut.

Wer hat das, wo, wer, was, wer hat das gesagt? Vorproduziert natürlich. Selbstverständlich. Wir haben hier Live-Effekte. So, ja, dann müssen wir das eigentlich noch mal machen. Ich hab vorhin noch gesagt, so zum Spaß, ja, das machen wir zweimal, den Jingle, und dann geht er uns auf die Erde. Ich hab eigentlich jetzt, ich hab schon Bock jetzt auf noch ein drittes Mal mindestens. Gut, die nächste Property ist Margin Trim. Und die ist auch relativ schnell abgehandelt.

Tut die, sie ist dafür so ein altes Problem, wenn ich Elemente in einer Box habe und zum Beispiel am Ende, also ein klassisches Beispiel wäre eine Liste. Ich hab eine Liste mit lauter List-Items und die kriegen zum Beispiel Margin unten, damit die immer einen gewissen Abstand voneinander haben.

Und jetzt ist ja so das klassische Problem, was man mittlerweile mit anderen Mitteln auch lösen kann, aber das klassische Problem ist, dass ich vielleicht trotzdem nicht möchte, dass der letzte Listenpunkt auch den Margin unten hat, weil dann ist das nicht mehr so schön stimmig. Unten möchte man vielleicht irgendwie mit, was anderen bestimmt, wie da der Abstand ist, dann möchte man dieses Margin nicht haben. Es gibt Fälle, wo das okay ist und es gibt Fälle, wo es stört.

Und dafür gibt es die Margin Trim Property, beziehungsweise wird es geben vielleicht. Wir sind hier hart an der blutigen Kante unterwegs. Immerhin gibt es dazu schon einen Can-I-Use-Eintrag. Jetzt muss ich, warte mal, ich hab den jetzt, warte mal, da, da, da, da, da, da, da, da, da, da, da, da, da, da. Muss ich nochmal draufdrücken, damit ich ihn auch öffnen kann. Sieht aber noch ziemlich rot aus. Der einzige Browser, der das derzeit unterstützt, ist Safari Technology Preview.

Habe ich aber. Und deswegen konnte ich es damit ausprobieren. Deswegen kann es nur, nur Menschen, ich habe auch eine Demo, eine Konto, eine Demo gebaut, nur Menschen, die Safari Technology Preview haben, also nur die mit einem Mac, können es derzeit ausprobieren. Das heißt auch, es ist nicht unbedingt sicher, dass es dann kommt. Aber interessanterweise ist es auf Can-I-Use, ist die Technology Preview noch grau. Die ist noch grau, ja. Super unknown, aber ist drin.

Da müsstest du ja fast ein Ticket eröffnen, ne? Ja, ja, es funktioniert. Ich habe aber eine merkwürdige Eigenheit gefunden, wo ich gerne hätte, dass die mir jemand erklärt hat. Das ist vielleicht auch ein Bug. Also, ich habe in meiner Demo, ich versuche sie mal zu beschreiben.

In meiner Demo, du kannst sie jetzt leider auch nicht sehen und auch nicht ausprobieren, beziehungsweise du wirst es nicht richtig sehen, ist es so, dass ich, ähm, ich habe immer eine Liste genommen, also ein UL mit drei Listen-Elementen drin, ähm, und die, äh, das UL hat einen roten Rahmen und die Listen-Elemente haben einen gepunkteten gelben Rahmen. Damit man sieht, wo was anfängt und aufhört.

Und standardmäßig haben die LI-Elemente darin Margin 1rem, also auf allen Seiten 1rem Margin Abstand. So, und wenn ich jetzt, äh, jetzt kann ich noch sagen, Margin Trim hat verschiedene Werte, ähm, zum Beispiel Margin Trim Block, dann, ähm, wird, werden die Block an den Block Grenzen, wer die, wer, äh, wer Logical, CSS Logical Properties kennt, der weiß, was damit gemeint ist.

Da gibt es jetzt kein Top, äh, äh, oder Bottom oder Left oder Right mehr, sondern es gibt Block und Inline, beziehungsweise Block Start, Inline Start, äh, Block End, Inline End. Und in unserem Left to Right Layout, äh, wo nichts irgendwie verschoben oder, oder verändert wurde, ist Block oben und unten und Inline ist links und rechts. Äh, äh, und Block Start ist oben und Block End ist unten. Nur, nur das nochmal zur Erklärung.

Das heißt, Margin Trim Block nimmt dann den Margin weg auf oben und unten. Von, also von dem ersten Element innerhalb der Liste wird der Margin oben weg, ab, weggeschnitten und von dem letzten Element unten der Margin. Also, wenn da, wenn da einer vergeben ist, ich ja bei Margin Trim Block angegeben hab, verschwindet dieser Margin. So weit, so gut, das funktioniert. Und Block Start funktioniert, dass es dann nur oben weg ist. Und Block End funktioniert, dass es dann nur unten weg ist.

Aber bei Margin Trim Inline, ich weiß nicht, ob ich in meiner Demo einen Fehler hab. Äh, ich glaube nicht, aber bitte gern mal reinschauen, Leute, mit Safari. Kannst du mir einen Screenshot schicken? Ich kann dir einen Screenshot schicken. Warte mal, das kann ich vielleicht sogar auch jetzt machen. Ähm, ich, ich schick dir aber jetzt nur mal den Screenshot von dem, von dem, einen Teil, der merkwürdig ist. Ja. Ähm, und zwar, warte, Moment. Mach ich mal, damit du mitreden kannst.

So, hier ist er. Ähm, da passiert was Interessantes. Also, ich hätte jetzt erwartet. Ja, genau. So, ich hätte jetzt erwartet. Warte mal, ich muss es nochmal nach. Also, was, was ich jetzt sehe hier ist. Also, ich hätte jetzt, also, ähm, Margin Trim Inline, ähm, macht ja dann links und rechts. Nee, es stimmt. Es stimmt. Ich bin ja so doof. Es stimmt. Jetzt habe ich es, ich glaube, jetzt habe ich es geblickt. Das nimmt aber nur das, interessanterweise nur das unterste Element.

Warum auch immer. Nee, das ist eigentlich nicht richtig, oder? Ist das richtig? Ist das nur das unterste Element? Ja, gut, weil es nicht automatisch erkennt, dass die untereinander angeordnet sind. Weil, wenn die jetzt tatsächlich Inline angeordnet wären, dann wäre es ja richtig. Ah. Also, wenn die jetzt irgendwie quasi floaten würden oder in einem Grid oder so. Vielleicht muss ich noch kurz erklären, was wir sehen.

Also, äh, bei dem Element, äh, wo ich der Liste Margin Trim Inline gegeben habe, dass nur das dritte Listen-Element hat links und rechts dann kein Margin mehr, die anderen haben es. Ja. Ähm, bei Inline Start ist nur links nicht und bei Inline End ist es nur rechts nicht, aber immer nur das dritte Element. Und ich habe mich gefragt, wieso eigentlich nur das dritte Element? Ähm, genau. Das, das, das, das, zu 100 Prozent erschließt sich es mir immer noch nicht.

Ähm, aber wenn sie, wenn sie, wenn sie nebeneinander wären, wenn sie nebeneinander wären, dann wäre das. Also, ich sage jetzt floaten, aber ich meine natürlich nicht unbedingt nur float, sondern. Dann wäre aber, dann müsste Start-up aber beim ersten Element sein und nicht beim dritten. Oder? Wenn sie nebeneinander wären. Also, dieses Verhalten, da, da bin ich mir noch nicht so ganz schlüssig, warum das so ist. Das kann mir ja mal jemand erklären.

Äh, dieser Podcast soll ja auch, äh, mich weiterbilden, nicht nur euch. So. Da gebe ich dir recht, ja. Also, dass es, dass es bei End das Letzte ist, okay, das macht Sinn. Aber tatsächlich, ja, ja, weiß ich nicht, vielleicht ist da die Speck noch nicht so ganz ausgereift. Vielleicht habe ich auch ein Fehler in meinem Code, ich will es nicht ausschließen, ich habe vorhin noch zwei, dreimal drüber geguckt und dachte so, das ergibt irgendwie keinen Sinn für mich.

Ich finde nichts, was jetzt falsch aussieht bei dir. Aber, ähm, ich habe jetzt den Code, äh, genau, du siehst jetzt, ach doch, du hast den Code, ja, ich habe ja über die Demo. Ähm, genau. Auf jeden Fall aber eine interessante Property, äh, das, das war es aber im Prinzip auch schon dazu. Also, viel mehr gibt es da nicht so zu sagen, finde ich, finde ich nett. Ähm, man kann das ganze Problem meistens auch, ähm, per Last Child lösen, ähm, heutzutage.

Das heißt, es gibt schon eine Lösung dafür, früher war das ein bisschen nerviger, da musste man dann rumtricksen. Ähm, aber mittlerweile kann man das eigentlich mit Last Child lösen. Ähm, ich frage mich jetzt, warum braucht man das jetzt noch zusätzlich? Gibt es jetzt noch irgendeinen Use Case?

Wenn du mit Start und End abgefrühstückt hast, dass das auch Left to Right funktioniert, während du mit, äh, First Child und Last Child ja dann immer selber noch wissen musst, in welchem Kontext du dich bewegst. Und Inline könnte ich damit, nee, doch, könnte ich auch machen, links und rechts, aber nur. Könntest du auch, aber du weißt halt eben nicht, ne, also das ist immer Margin Start und Margin End, Block End, Block Start, ja, das ist ja immer, ne, von der, von der Schreibrichtung abhängig.

Während halt First und Last wirklich sagt, das, die Reihenfolge im Dom. Ja, ja. Und dementsprechend macht es vielleicht schon Sinn, das zu machen, ja, das zu haben. Also bin gespannt, ob's kommt und wann, äh, jetzt habt ihr's gehört, dass es das vielleicht geben wird. Aber interessant auch wieder, ne, wir sagen ja oft so, Safari hängt da bei vielem hinten dran, aber so Design-Geschichten, da sind sie halt dann doch oft vorne mit dabei, ne?

Ja, und, äh, die sind momentan eh auf der Überholspur unterwegs, muss man sagen. Also, die waren lange, lange, lange hinten dran und, äh, man hatte so das Gefühl, äh, die, die holen das nie wieder auf. Aber ich hab den Eindruck, seit Jen Simmons, äh, da mit dabei ist, äh, bei, äh, bei Apple und, äh, dieses Team da leitet, oder zumindest glaube ich, dass sie das, ein Team da auf jeden Fall leitet.

Und die stellt auch immer wieder, äh, Umfragen, äh, ins, äh, in Mastodon oder, oder Twitter, wo sie fragt, hey, äh, wie würdet ihr denn diese Property erwarten oder so? Was ist denn bei euch dabei wichtig und, äh, find ich sehr interessant und seitdem hab ich's Gefühl, die shippen ständig neue Features, also die, die ballern da raus ohne Ende und holen da krass auf gerade.

Die haben wahrscheinlich gemerkt, ähm, jetzt, jetzt ist, äh, jetzt ist allerhöchste Eisenbahn, sie müssen jetzt, vor allem auch, wenn jetzt irgendwann, ähm, gesetzlich verabschiedet wird, dass, äh, auf iOS und iPadOS-Plattformen, ähm, nicht mehr nur Safari sein darf, sondern andere Browser-Engines auch sein dürfen. Ist das tatsächlich, soll das kommen?

Das ist, das steht so ein bisschen, äh, grade im Raum, ähm, und was ich gehört hab, ist auch, dass Google momentan schon dran arbeitet, äh, ein echt, also ein Browser mit ihrer eigenen Engine, ähm, auf, äh, iPhone und iPad zu bringen. Ja, sehr gut. Ähm, naja, es ist nur gerecht, ne, also Microsoft, äh, also Microsoft, äh, musste ja auch hier mit, mit Standardsuchmaschine und sowas, äh, haben die ja auch eher richtig Ärger bekommen, sondern wenn dann, wenn dann alle, also, äh, ja.

Und generelle Auswahl ist immer gut, also ... Ich hab's im Stream schon gesagt, ähm, mein, mein, mein Userherr, Das Developerherz findet das super, das Developerherz sagt, äh, äh, weniger, äh, weniger Möglichkeiten, die man testen muss, ist besser, aber, ähm, aber ich sehe da schon den größeren Zusammenhang und sage, ähm, doch, mehr Engines sind besser an der Stelle, die Wahl sollte man haben.

Ja, das ist immer gut. Das ist immer gut. Und, äh, ich glaub, wir sind uns auch einig, äh, so eine neue Browser-Engine, äh, so eine neue Browser-Engine, äh, so eine neue Browser-Engine, äh, so eine neue Browser-Engine, äh, aber inklusive, äh, in, in Rust bitte sehr, sehr schnell und natürlich inklusive Kompatibilität und aller Features, die in Blink drin sind. Ah, da hätt ich fast sogar vielleicht noch quasi jetzt eine, eine Retro. Ja.

Zu, zu, zu, zu, oder vielleicht als kleinen Einschub, äh, apropos schnell. Und zwar auch wieder bei OpenType.js, äh, und da auch meine nächste, ähm, Property ist gleich OpenType.js inspiriert. Ähm, und zwar gibt's da jetzt Bestrebungen, das Build-System umzustellen, um alles ein bisschen moderner zu machen mit Modulen und so. Und da wird jetzt nicht mehr, oder soll in Zukunft nicht mehr gesetzt werden auf Roll-Up und Babel, sondern auf, ähm, ES-Build.

Und das ist in, jetzt weiß ich gar nicht, ist das in Go oder in Rust geschrieben, eins von beidem. Und es ist halt so anscheinend ein bisschen so gerade der Trend hin, äh, diese ganzen Build-Systeme zu entkoppeln von diesem ganzen, wir machen alles mit JavaScript und alles, äh, sind irgendwie tausend MPM-Pakete mit, mit gegenseitigen Abhängigkeiten.

Was ja, wenn man ein Webpack oder sowas mal aktualisieren will, jedes Mal eine Pain in the Ass ist, ne? Da hatten wir's hier, glaub ich, auch schon ein paar Mal drüber. Ähm, und da geht's halt jetzt eher so dahin zu sagen, okay, wir haben das, der Build-Prozess ist ein eigenständiges Ding und das heißt, der kann auch in einer anderen Programmiersprache laufen und der, die Geschwindigkeit ist der Hammer.

Also, ich war ja schon von Veed begeistert im Vergleich, äh, zu, ähm, jetzt Webpack. Ähm, und auch Roll-Up ist relativ schnell, aber es sind halt trotzdem noch, ne? So, vier bis zehn Sekunden oder so, oder vielleicht noch länger, wenn das ein richtig umfangreiches Projekt ist, dauert's halt trotzdem. Und bei, ähm, ähm, ES-Build, da sind's bei OpenType.js waren's gleich 24 Millisekunden. Und dann ist das Ding gebundelt. Fertig.

Ja, äh, ich weiß jetzt nicht, OpenType.js hat jetzt auch nicht so viele Abhängigkeiten. Ich hab da auch noch ein Beispiel. Aber es ist einfach so ultraschnell und es ist einfach, ja, es fühlt sich, fühlt sich gut an. Ich hab da auch noch ein Beispiel, wenn wir, wenn wir uns da, da auch auf die Ausschweifung jetzt mal einlassen.

Ähm, und zwar hab ich vor kurzem, äh, hat sich ein, hat sich ein Kollege beschwert, ja, das, das CSS, das baut so langsam und das ist Sass in unserem Fall, also, äh, CSS-Dateien. Ähm, und ich würde sagen, es ist eigentlich gar nicht so extrem viel oder komplex, da passiert gar nicht so extrem viel. Aber bei ihm hat's halt irgendwie, keine Ahnung, 30 Sekunden gedauert, bis der Scheiß durchgebaut war.

Und das ist einfach, jedes Mal, wenn du irgendwo was im CSS erinnerst, 30 Sekunden warten müssen. Ja, nee, das geht gar nicht. So, und dann hab ich geguckt, hm, wie, wie, wie ist denn das, wie ist denn da jetzt grad so der Markt? Was, was kann ich denn da jetzt machen? Und, ähm, dann hab ich was Interessantes rausgefunden. Also, es gibt das NPM-Paket, das Node-SUS heißt. Ähm, das ist aber veraltet. Moment, jetzt muss ich grad noch mal, äh, gucken. Ähm, Node-SUS.

Äh, das ist aber veraltet und soll nicht mehr verwendet werden. Ähm, das ist ein Rapper um Lips-SUS drumherum und das wird aber nicht mehr weiterentwickelt, weil da, SUS ja hinten dran jetzt eigentlich in Dart geschrieben ist, glaube ich, von diese komische, genau, Dart-SUS, genau. Das ist die, äh, diese komische Google-Sprache. Ähm, also, Node-SUS, was eigentlich JavaScript, wo man eigentlich JavaScript vermutet, ähm, ist eigentlich nur ein Rapper um dieses Lips-SUS.

Und Lips-SUS war, glaube ich, Ruby, bin ich da ganz falsch? Ich weiß es nicht. Auf jeden Fall, das geht relativ schnell, aber das soll man nicht mehr verwenden. Das ist relativ flott. Das Paket, das einfach nur SUS heißt, bei NPM, ist ein JavaScript-Rewrite von Dart-SUS, von dem Eigentlichen. Das ist schweinelangsam, das ist unglaublich lahm. Er hat aber alle neuen Features.

Wenn man jetzt allerdings das echte Dart-SUS verwenden will, dann muss man irgendwie diese Dart-Laufzeit-Umgebung haben, irgendwie so ein, so ein virtueller Container, irgendwas. Ich hab's, ich hab ganz kurz mal, ähm, versucht zu installieren bei mir. Ähm, in unseren Bildprozess hab ich nicht integriert, aber die Zeit, das war, also, ich hab ja vorhin gesagt, 30 Sekunden, ähm, mit SUS, mit diesem JavaScript-Rewrite.

Ähm, Node-SUS hat irgendwie so, war es so fünf bis zehn Sekunden, je nachdem. Und bei Dart-SUS, bei dem echten Dart-SUS, das hab ich dann mal ausprobiert, da waren's auch nur noch Millisekunden. Und ich hab gedacht, wie kann denn das sein? Ja, weil halt alles direkt über das System läuft. Passbar, es wiegt von 30 Sekunden auf unter eine Sekunde. Boah! Krass. Nur ist es halt, ich frag mich, ob's irgendjemand mal schafft, dieses Dart-SUS irgendwie in ein NPM-Package zu packen, oder?

Ja, ja, wollte ich grad sagen. Das ist das Schöne bei AS-Bild. AS-Bild installierst du trotzdem ganz normal als NPM-Package. Und hast entsprechend auch, ne, kannst es updaten, wenn's Updates gibt. Aber es ist halt an sich eine Binary, die halt auf den verschiedenen Systemen, Plattformen begreifend trotzdem läuft. Und dadurch ist es halt einfach überall schnell. Und trotzdem hast du den Vorteil von der Versionsverwaltung, aber du hast nicht diese ganzen krassen Abhängigkeiten.

Gut, wahrscheinlich hast du Rust-Abhängigkeiten, aber da musst du dich dann halt nicht drum kümmern. Es scheint gute Gründe zu geben, warum's das nicht gibt, aber ich hab halt gedacht, so Binaries, das geht doch normal immer. Kann man da nicht einfach, also das sag ich jetzt so, äh, so hemmsärmelig, ohne genau zu wissen, was dahinter passiert. Aber kann man da nicht irgendwie so ein Binary rauslassen, das ins NPM-Package packen und dann werfen wir das da dagegen und gut ist?

Ähm, müsste doch dann auch flott sein. Aber, äh, das erklärt ihr mir bestimmt in den Kommentaren. Wie gesagt, ich möge den auch hier, um was zu lernen. Erzählt mir, warum, äh, warum gibt es kein schnelles, äh, SaaS-Paket bei NPM? Was man noch sagen muss zu, zu ES-Build, ähm, ist leider, dass Hot-Module-Reloading nicht funktioniert.

Das ist für viele sicherlich ein Breaking-Dings, ne, also, ähm, bei OpenType geht's jetzt, weil da haben wir nur so ein kleines, so ein paar Dev-Seiten, wo man so die Fonts reinladen kann. Und da muss man eh immer neu laden, das heißt, ähm, ich brauch kein Hot-Module-Reloading, weil wir jetzt kein, kein React oder View oder sowas benutzen. Und ich da nicht wirklich einen State hab, den ich, den ich übernehmen kann.

Ähm, und man kann es über Umwege so ein bisschen, man kann, äh, Watch aktivieren über einen Flag und dann kann man, äh, das Ganze, äh, kann man noch ein Event registrieren und darüber kann man dann zumindest die Seite neu laden lassen, sobald das neu ge, äh, gebildet wird. Ähm, und damit hat man so ein Page-Reloading, zumindest ein automatisches.

Aber das ist tatsächlich so ein Punkt, für andere Projekte würde ich es nicht einsetzen wollen aus dem Grund, weil ich möchte mich nicht in der App erst irgendwie durch tausend Zustände klicken müssen, jedes Mal, wenn ich was geändert hab, weil das ist ja gerade der Vorteil. Eigentlich von solchen Bildsystemen, dass ich wirklich ein Live-Preview hab und live da dran arbeiten kann, ne.

Ähm, so wie du es auch letztens, äh, gesagt hast, ähm, bei, bei diesem, ähm, Mastodon-Client, ähm, wo man diese geile Entwicklungsumgebung hat und halt wirklich direkt Strings ändern kann und zack, alles ist da, sofort. Ähm, und sowas möchte man ja eigentlich haben und es gibt da auch ein Ticket dazu, aber es hieß irgendwie, ja, das ist zu komplex und, äh, Hot-Module-Reloading richtig zu machen ist echt schwer und dann machen wir's lieber gar nicht.

Ähm, was ich ja auch irgendwie verstehen kann und es ist halt einfach sehr kompliziert, aber es ist halt ein bisschen schade, ja, dass das, dass das nicht funktioniert. Ähm, aber ansonsten ist das echt ganz cool, ja. Genau, der Mastodon-Client heißt übrigens Elk, falls denn jemand mal sich anschauen will.

Der sieht sehr aus wie Twitter. Ähm, und es lohnt sich auch, das GitHub-Projekt dazu mal anzuschauen, ähm, weil man da eben tatsächlich irgendwie so fancy im Browser editieren kann mit so, alles läuft sofort. Ähm, kann ich auf jeden Fall empfehlen, sich mal anzuschauen. Jo, ähm, dein zweites Thema. Dann so, ähm, mit dem, mit dem Einwurf, äh, Ende. Achso, stimmt, wir brauchen jetzt ja mal eine Schiene, ne? Ja, eigentlich bei was ganz anderem.

Genau, Einwurf, Ende. Genau, okay, also, dann komm ich nochmal zu einem, äh, Property. Warte, warte, warte, warte, Moment. Achso, äh, ja, ja, ja, ja, ja, ja, ja, nee, klar, ich kann das nicht einfach. Ich kann das nicht einfach, ja. Die Property der Woche. Teil 3. Und, äh, ja, das ist ein, ein Bestandteil von, also, es ist wirklich eine Property von einer globalen, ähm, und zwar die Intel, äh, globale, dieses Intel-Objekt.

Da haben wir es auch schon mal, also nicht Intel, also nicht Intel, nein, nein, Intel, wie Internationalization, Intel, da haben wir es in Folge 4 und in Folge 19 auch mal drüber, wer das nachhören möchte.

Und, ähm, was, was, wo ich jetzt, äh, draufgeschossen bin bei Intel, ist der Intel-Segmenter, also Segmentierung, Zerteilung, ähm, und bei OpenType.js war das eben auch, hab ich ja gesagt, ähm, und da war ein Ticket irgendwie, ja, ähm, dass man Probleme hat, den Text in, in, in, in Glyphs, äh, zu parsen. Also, die, ähm, die einzelnen, äh, die einzelnen Glyphen, ähm, sich aus dem Text zu suchen, wenn da drin diese kombinierten Multi-Character-Emojis enthalten sind.

Also, es gibt ja Emojis, die werden da mit so einem Zero-Width-Nonspacing-Joyner-Things, Z-W-N-J, Zero-Width-Non-Joyner, genau, so. Zero-Width-Non-Joyner, also ein, ein, ein Leerzeichen ohne, ohne Breite quasi, ähm, werden die erstellt. Und da kann ich dann halt so Sachen wie, ja, dieses, dieses Gesicht, aber mit Hautfarbe, äh, schwarz oder mittel, ähm, und in weiblich, so, ne, oder männlich, das kann man ja kombinieren.

Und das aufzuteilen, also generell Emojis und einfach ein String in Emojis aufteilen, äh, das ist gar nicht so einfach. Und ich hab da auch eine, eine Demo dazu gebaut, wo ich da verschiedene Möglichkeiten vorstelle und natürlich auch den Segmente an sich vorstelle. Und als erstes könnte man vielleicht denken, naja, String-Split.

Aber das Problem ist, da krieg ich dann, äh, lauter, ähm, UTF-8-enkodierte Zeichen zurück, ne, weil so ein, also die, ähm, die Emojis sind ja auch schon Multibyte-Strings. Und dementsprechend, ähm, jetzt krieg ich hier in der Konsole, krieg ich jetzt lauter so Fragezeichen-Kästchen, beziehungsweise beim Herz kriegt man tatsächlich ein Herz zurück. Und das Weiblich-Zeichen ist wirklich so ein ASCII-Weiblich-Zeichen, ähm, aber es sind halt, ähm, eigentlich Multibyte-Strings, okay.

Das heißt, mit String-Split komm ich nicht weit. Diese ganzen Familien-Dinger sind da krass. Genau, genau. Da gibt's richtig viele. Also, ne, Frau mit der und der Farbe und Frau mit der und der Farbe und Kind, äh, in männlich, äh, in weiblich und ein Kind in männlich, ne, das kann man so kombinieren. Gibt alle Kombinationen, ja. Genau. Und, ähm, was kann ich noch machen? Ich kann den Spread-Operator nutzen und, äh, also Ziel ist, ein Array zu haben am Schluss.

Ich hab hier ein String, da sind vier, äh, Emojis drin. Das vorletzte, der Regenbogen, das ist nur ein normales, das hab ich nur einfach, ähm, um das auch zu zeigen. Ähm, genau. Und die anderen sind alle so ein bisschen komplexer. Und, äh, mit diesem, ähm, also ich mach ein empty Array und da drinnen, äh, Spread-Operator und den String. Und dann hab ich schon mal so ein bisschen was. Also, dann krieg ich tatsächlich die einzelnen Bestandteile.

Also, ich seh, äh, ne Frau, ich seh ein Kästchen, ich seh den Zero-Width-Non-Joyner, dann kommt die nächste Frau, Kästchen und so weiter. Dann Kind-Weiblich, Kind-Männlich. Äh, dann hab ich hier das, das, das Herz noch irgendwie. Ähm, dann hab ich hier noch einen, ach, noch einen Mann, seh ich jetzt gerade. Und dann kommt der Regenbogen. Also, keine Ahnung, warum dieser Mann da überhaupt, äh, an der Stelle ist.

Weil der dürfte ja eigentlich, äh, naja. Also, irgendwie ist das sehr, sehr komplex, aber es bringt mich auch nicht weiter. Und dann gibt's jetzt eben, relativ neuerdings, ähm, den Segmenter. Und, äh, ne, da ist die, das ist jetzt alles, unsere JavaScript entwickelt sich ja immer so, äh, hin Richtung, ähm, Asynchron-Geschichten. Und, äh, ja, ich krieg dann irgendwie irgendwelche Objekte zurück, die ich dann erst noch parsen muss. Also, es ist dann, ich weiß gar nicht, ob's ein Iterator ist.

Nee, ich glaub, es ist wieder ein eigenes, ein eigener, äh, Objekttyp, ähm, was ich da zurückbekomme. Das heißt, ich hab nicht durch den Segmenter dann schon automatisch einfach ein Array, wo die drin sind. Sondern ich muss, äh, muss das dann wieder über Array from und dann mit Reduce kann ich mir das dann zusammenpassen. Das ist alles ein bisschen, ja, es wird alles ein bisschen komplexer dafür. Halt auch, ähm, äh, ja, ein bisschen, äh, ja. Flexibler wahrscheinlich, aber trotzdem.

Also, ich kann, ich hab, das, was ich dann sehe, ist dann, ich hab Objekte, also ein Array aus Objekten. Und da drin hab ich dann Segment, Index, also den Index im String, ähm, und nochmal den Input, äh, als, äh, als String. Was ich interessant finde, ist, äh, ein ganz kleiner Einwurf nur, ähm, dass die CodePen-Demo die Konsole in CodePen auf Fullscreen geöffnet hat, also volle Höhe.

Das hab ich so, nee, wusste ich gar nicht, dass man das so eins, dass man das irgendwie mit reinpacken kann, dass das geht. Ja, wenn man hinten eine Zwei hat, dann ist die Konsole Fullscreen, dann ist der Vorschaubereich weg. Ja, genau, das fand ich echt, äh, ja, cool. Genau, und wenn ich das mit Reduce mach, dann hab ich tatsächlich am Schluss mein, mein Array.

Jetzt ist natürlich, ähm, das ist unwahrscheinlich, dass sowas eingebaut wird, nur um jetzt Emojis irgendwie richtig splitten zu können, äh, sondern das ganze Ding hatte, das, und da deutet ja Intel auch schon, äh, drauf, also nicht Intel, sondern Intel, äh, deutet da schon auch drauf hin. Ähm, es geht eigentlich um Sprachen und, und, äh, Locale-Unterstützung.

Deswegen hab ich auch noch der Vollständigkeit halber dann unten noch ein Beispiel mit, äh, chinesischen Schriftzeichen, ähm, um auch zu, zu demonstrieren, was es da noch für, für Optionen gibt, die ich da übergeben kann. Also ich kann so ein, ich erstelle mir so ein Segmenter, äh, so eine Instanz, also New Intel Segmenter, und dann übergebe ich die, das Locale, das ich benutzen will.

Das kann ich übrigens mit einer anderen Property, aber das könnt ihr auch dann selber nachlesen im MDL-Artikel, kann ich mir ausgeben lassen, welche Locales unterstützt werden, beziehungsweise übergeben Array an Locales und kann dann gucken, ah, wird das unterstützt.

Und dann kann ich als nächstes noch ein Objekt übergeben und da kann ich dann zum Beispiel Granularity und dann kann ich da Word oder Sentence und ich glaub Grapheme gibt's noch für, also Grapheme wäre Buchstabe oder, oder Zeichen, ähm, und dann eben Word oder Sentence kann ich das aufteilen lassen.

Jetzt hab ich da auf Chinesisch was getippt und lass das einmal nach Word und einmal nach Sentence aufteilen und dann hab ich halt, äh, solche Zweiergruppierungen an Schriftzeichen, was, was einem Wort entspricht. Es ist nicht ganz, ähm, also, dass man merkt, da steht jetzt nicht irgendwie ein Wörterbuch dahinter und das weiß dann wirklich, was ist ein Wort im Chinesischen, weil es ja tatsächlich, da, ne, gehören ja manche Zeichen zusammen, sondern es gruppiert nach einer bestimmten Logik.

Ähm, nach welcher hab ich jetzt noch nicht ganz rausgefunden, also zum Beispiel, äh, bei Nihao Ma, äh, ne, das Ma ist so ein Fragepartikel, da gruppiert's dann Nihao, also die ersten beiden, im nächsten Satz gruppiert's, äh, aber dann War und Henhao, das sind, ja, also War heißt ich und Henhao heißt sehr gut, ja, also, ne, das macht eigentlich auch keinen Sinn, dann das zu, zu gruppieren.

Aber da steht, da steht irgendwas dahinter, aber es ist, es sind nicht wirklich die, die Worte im eigentlichen Sinne. Ähm, genau. Aber es wird irgendwie, du könntest mir jetzt alles erzählen. Ja, in dem Fall, äh, könntest du sogar verifizieren, dass es stimmt. Genau, und unten dann als Satz, ne, ich kann einfach jetzt ein String, ähm, da durchjagen und bekomme automatisch das nach Sätzen.

Ich muss jetzt nicht mehr eine RegEx irgendwie machen, wo dann drin ist, ah, welche Satzzeichen, Fragezeichen, ähm, dann vergesse ich vielleicht, dass, dass ich, äh, einen Doppelpunkt auch, dass ich dann doch mittrenne oder nicht.

Oder eben, also gerade chinesisch oder japanisch ist da auch ein, ähm, äh, ein gutes Beispiel, weil die haben eigene Zeichen für, für, äh, Satzzeichen, ne, man sieht das, dass die, also das ist nicht nur im, äh, nicht nur die Font, sondern das ist wirklich ein eigenes Zeichen. Und du siehst, dass da hinter dem Fragezeichen ein bisschen mehr Space ist hinter dem Ausrufezeichen und dass die auch so ein bisschen, die sehen fast wie Monospace so ein bisschen aus.

Aber die, das ist nicht, nicht, dass, äh, dass die Schriftart das nicht anders kann, ähm, sondern die Schriftart kann auch ein ganz normales Ausrufezeichen, sondern das sind wirklich andere Satzzeichen. Und auch, ähm, Anführungszeichen, sowas sind da in den Sprachen ein bisschen, ein bisschen anders. Und das erkennt es also auch.

Das heißt, das würde jemand, ne, dieses typische, ich gucke auf Stack Overflow, wie trenne ich, äh, einen Text nach Sätzen, sondern kriege ich eine Regex und, äh, ich würde fast meine Hand dafür ins Feuer legen, dass da dann halt unsere lateinischen Symbole für Satzzeichen drin sind, ne. Also das, was man halt in Nordamerika und Europa vielleicht, ähm, was man da so gebraucht.

Und die meisten würden halt wahrscheinlich nicht berücksichtigen, dass es in anderen Sprachen vielleicht andere Zeichen gibt, weil man es einfach gar nicht weiß. Hätte ich jetzt auch nicht gewusst, soll kein Vorwurf sein, ne. Aber dadurch, dass das halt jetzt einfach damit eingebaut ist, die Browserhersteller, die das implementieren, die machen sich da halt natürlich mehr Gedanken und, und berücksichtigen sowas.

Gerade wenn es um eine Schnittstelle geht, die für Sprachunterstützung ist, ähm, das heißt, da funktioniert das dann einfach out of the box. Würde mich aber echt mal interessieren, wie viele, ähm, potenzielle Webseitenbetreiber es so gibt, die Portale betreiben oder die Seiten betreiben, die in mehreren Sprachen so übergreifend, äh, angeboten werden.

Also, ähm, gibt's, gibt's mit Sicherheit einige, aber habe ich jetzt gar nicht so richtig auf dem Schirm, also keine Ahnung, sowas wie Facebook und Twitter wahrscheinlich, die haben wahrscheinlich auch irgendwie chinesische Varianten und kyrillisch und keine Ahnung was, da wird es dann interessant.

Aber so, wenn man jetzt so 0815 Webseiten baut, dann kommt man halt mit hier jetzt mit Deutsch und Englisch eigentlich schon ganz gut hin und dann reicht die RegEx auch, die du gerade angesprochen hast, ne. Also, in der Regel schon, ja, ja, tatsächlich. Also, gerade wenn es jetzt irgendwie um die Unterscheidung geht, asiatisch oder, äh, oder nicht, ne, ja, das schon.

Ähm, tatsächlich, wenn wir Plugins machen, äh, WordPress, dann bieten wir die schon auch auf Englisch und Deutsch an und da habe ich auch schon mal bei unserem Corona-Testergebnis-Ding, ähm, habe ich tatsächlich auch die International, Internationalization, äh, Geschichte eingesetzt an der Stelle. Sagst du jetzt nochmal Spezifität? Spezifität. Und jetzt auf Englisch? Specificity. Ah, sehr gut. Ja, auf Englisch geht besser.

Genau, und jedenfalls genau Datumsformat war das, glaube ich, ne, was, so Datumsformatierung und sowas, das habe ich dann mit Intel gemacht und, äh, ja, auch dieses List-Feature finde ich eigentlich ganz cool, dass man, dass das automatisch dann Kommata und, und in der entsprechenden Sprache einfügt und so. Also, das ist schon, schon ganz cool, die, klar, die Frage, wer braucht's, wie viele Leute brauchen's, aber danach muss man ja nicht unbedingt gehen.

Ne, äh, gerade, gerade bei Browser-Features oder Features, die in Browsern eingebaut werden, äh, da ist mehr immer besser und, äh, im Zweifelsfall, äh, ne, und im Zweifelsfall, äh, ne, es ist ja wichtig, dass es da ist. Ich meine, wenn ich's dann mal brauche, dann ist ja gut, also, dann möchte ich's nicht erst irgendwie selbst implementieren müssen, das ist ja immer gut. Gut. Das war's von mir. Das war's von dir, dann kommt jetzt. Und dementsprechend kommt jetzt die letzte.

Die Property der Woche. Teil 4. Die letzte, die. Er weiß, jetzt kommt das Letzte. So, ähm, die letzte, äh, Property der Woche sind eigentlich zwei, hab ich dann gemerkt, weil die eine geht nicht ohne die andere, aber ich will mich eigentlich hauptsächlich mit der einen beschäftigen. Und die ist auch, der Artikel, auf den ich mich jetzt berufe, der ist von Medium und der ist tatsächlich vom 18. August 2020.

Man könnte das also eigentlich schon eine Weile kennen oder wissen, aber es ist komplett an mir vorbeigegangen. Es liegt vielleicht aber auch daran, dass es echt noch nirgends, meines Wissens nach, noch nirgends implementiert ist. Trotzdem würde es viele Probleme lösen, die man so in der Vergangenheit hatte. So, jetzt hab ich viel um den heißen Breitraum rumgeredet, jetzt gibt's einen Löffel Brei.

Und zwar geht es um Leading Trim, das ist die Hauptproperie, um die es jetzt geht, äh, und Text Edge. Ich konnte jetzt auch keine Demo bauen, weil wie gesagt, ich weiß nicht, ob es überhaupt einen Browser gibt, der das schon eingebaut hat. Ähm, worum geht es? Es geht generell um das Problem, dass, äh, Text oft, also gerade so der klassische Standardfall für sowas ist Text, ähm, hat so seine eigene Leinheit mit eingebaut, so seine eigene Boxhöhe.

Wer schon mal einen Button gestylt hat mit CSS und den Text mittig darin ausrichten wollte, sodass er auch mittig aussieht, der hat wahrscheinlich irgendwelche komischen Paddings oben und unten vergeben. Nicht dieselbe Zahl, damit der Text mittig aussah. Das Problem, das kennt man vielleicht. Ähm, und vielleicht noch so ein bisschen, äh, zur, äh, zur Theorie, dass man so ein bisschen versteht, wo es herkommt und wo es hingeht.

Ähm, äh, die Leinheit, das kennt man den Begriff, ist bei uns normalerweise, äh, oder, nee, ist historischerweise die Box des Buchstabens, ähm, die kann auch größer sein als der Buchstabe selbst, als zum Großbuchstabe selbst, plus Leading, äh, in Klammern Durchschuss, das kennen vielleicht die Typografen. Der Durchschuss ist, äh, dann so der, der Bereich zwischen den Zeilen, wo gar nichts von, von, äh, Buchstaben, ähm, auftaucht.

Genau, das, das ist tatsächlich, äh, früher im Bleisatz, äh, extra hinzugefügt worden in einer bestimmten Höhe. Ähm, genau, so, und jetzt ist die Buchstabenbox tatsächlich aber noch oft geholfen. Die Buchstaben sind aber noch oft größer als der, als der Großbuchstabe, der standardmäßige, zum Beispiel wegen den Punkten über dem Ü. Aber manchmal ist es auch noch höher und ich weiß auch gar nicht immer, warum das so hoch ist.

Also, so, so, so, Schriftarten im Web, die haben oft so ihre eigene, so ihre eigene Höhe, ähm, und das ist, das ist von Schriftart zu Schriftart auch unterschiedlich. Das heißt, wenn du irgendwie das schön designt hast in einer Schriftart und tauschst sie dann aus, dann kann es komplett in die Binsen gehen, alles, was du da gemacht hast.

Ähm, und in CSS gibt es noch eine Eigenheit, die ich jetzt noch dann gelernt habe, weil ich habe gedacht, ich will es jetzt dann doch irgendwie verstehen, was da passiert und warum man es braucht. Ähm, ich habe vorhin von Leading gesprochen, also von dem Durchschuss, aber in CSS hat man sich irgendwann mal darauf geeinigt, dass es ein sogenanntes Half-Leading gibt.

Dass das nämlich aufgeteilt wird, der Standard-Durchschuss, der normalerweise unter der Zeile ist, ja, in einen, in einen Bereich oben drüber und einen Bereich unten drunter wird das aufgeteilt. Ähm, das macht die Textboxen dann irgendwie noch ein bisschen ungleichmäßiger.

So, man hat das gemacht, nee, das sollte sie gleichmäßiger machen, aber, ähm, naja, die haben, dadurch, dass die Textboxen selbst irgendwie so und die Positionierung des einzelnen Glyphen darin, äh, immer von Schriftart zu Schriftart ein bisschen unterschiedlich sind, äh, ist es ein komplettes Chaos.

Ähm, so, und, Moment, jetzt muss ich gerade mal in meine Notiz nochmal kurz gucken, ähm, genau, Leinheit heutzutage ist also, wenn man es jetzt versucht, sich in dem Bild vorzustellen und ist in dem Artikel, den wir auch verlinken, ähm, also, da, äh, empfehle ich euch, dass ihr den euch nochmal selbst durchlest, das ist jetzt quasi nur so die Management-Zusammenfassung von mir.

Da sind sehr, sehr, sehr, sehr gute Bilder drin, die das verdeutlichen, ähm, was da jetzt genau gemeint ist. Ich versuche es trotzdem jetzt, äh, auditiv mal, ähm, zu erklären, also, Leinheit heutzutage ist halt ein Half-Leading oben, ne, also, wenn man von oben nach unten geht, ähm, plus Font-Family-Abstand oben, ähm, das ist quasi die Leinheit, die die Font-Family selbst mitbringt,

Exthöhe selbst, plus Unterlänge, plus Half-Leading unten, also, es ist kompliziert, ähm, und wenn man da jetzt sowas, äh, innerhalb, wenn man sowas jetzt vertikal irgendwie zentrieren möchte, beispielsweise in einem Button, ähm, dann, dann kann man sich vorstellen, dass da ein komplettes Chaos entsteht. Jetzt gibt es die neue Leading-Trim-Eigenschaft, die was macht, nämlich oben und unten abschneiden, so lang, so lang, bis man wirklich zum eigentlichen Text kommt.

Und zwar, je nachdem, und da kommt jetzt die andere, ähm, die andere Eigenschaft noch mit ins Spiel, Text Edge, da wird nämlich, die bestimmt, an welcher Stelle abgeschnitten werden soll. Ähm, also in dem Beispiel hier zum Beispiel steht da, ähm, Cap-Alphabetic, bei Text Edge als Eigenschaft und bei Cap bedeutet Großbuchstabe.

Das bedeutet in dem Fall zum Beispiel, dass die Unterlänge, also der, der untere Teil von einem kleinen G abgeschnitten wird, dass der nicht zu der Höhe hinzugezählt wird. Genau, also nicht abgeschnitten, visuell abgeschnitten, sondern nur, was den Abstand angeht. Genau, genau, nur was den Abstand angeht, von wo die Linie, von der aus der Abstand berechnet wird, dazu.

Ähm, visuell bleibt das alles immer trotzdem sichtbar, also wenn du da jetzt irgendwie Overflow-Hitten oder sowas drauf hast, bleibt es trotzdem, bleibt es trotzdem sichtbar. Ähm, zumindest so die Idee. Ähm, genau, und es gibt dann auch noch, man kann auch zum Beispiel an der X-Height abschneiden lassen, das erspare ich euch jetzt allerdings, da könnt ihr euch gerne mal die Spec durchlesen.

Es gibt tatsächlich, ähm, Specs, das ist das CSS-Inline-Layout-Module-Level-3, da sind diese beiden Eigenschaften drin. Ähm, genau, das heißt, ich lege erstmal fest, wo wird, äh, abgeschnitten und dann sage ich, dass abgeschnitten wird. Ähm, in dem Fall Leading-Trim-Text-Box, äh, Leading-Trim-Both, man kann auch tatsächlich oben oder unten abschneiden. Ähm, genau.

Und dann, äh, wird die Box quasi, an der man sich ausrichtet, vom Text, äh, beschnitten und kleiner gemacht und man kann dann tatsächlich, wenn ich dann oben und unten fünf Pixel Abstand mache, dann sollte das auch vertikal zentriert aussehen. So, genau, das hab ich, das hab ich, das hab ich, äh, das hab ich auch, genau, die Specs hab ich auch, eigentlich bin ich schon durch damit, hast du noch Fragen?

Ähm, dieses, äh, dieses eine Beispiel, wo man richtig schön sieht, dass da mehrere Absätze, äh, Überschrift, eine Unterüberschrift und ein Textblock, ähm, und wo man dann genau sieht, so, da sollen dann 32 Pixel, 12 Pixel, 32, 32 sein, und dass das dann eben mit dem Font-Spacing dann nicht mehr passt. Das erinnert mich an eine Zeit, äh, wo ich sehr viele HTML-E-Mails gebaut habe. Oh ja.

Und wo ich dann von GrafikerInnen genau eben Screenshots bekommen habe, wo genau eingezeichnet war, ähm, ne, Textabstände da und da, und die haben halt eben dann ganz oft, die haben so Kästchen dann gezogen und da stand dann auch wirklich Pixelwerte drin und das war halt, das sollte alles nach CI-Vorgaben, ne, die haben da wirklich Wert drauf gelegt, ne, da war halt nicht so, naja, muss jetzt nicht pixelgenau sein, sondern das war schon da, also da wurde dann auch dann, wenn dann Abstand zu groß war dann und das wurde zur Abgabe gegeben, äh, zur Abnahme gegeben, dann hieß das dann ja, aber die Textabstände passen noch nicht und so.

Und dann musste man wirklich gucken, ähm, also da wurde schon drauf geachtet, dass entsprechend nur Schriftarten verwendet werden, die halt safe sind, ähm, und dann musste man das eben mit einrechnen, dann musste man gucken, okay, dann darf ich aber halt eben nicht zwölf Pixel nehmen, sondern dann muss ich halt ein bisschen was abziehen, damit es dann mit dem Font-Abstand passt und so, ähm, und schwierig wurde es dann, als es dann darum ging, das irgendwie, äh, in ein Design-System zu überführen, äh, wo dann wirklich Module sein sollen und dann war halt irgendwie, du konntest halt nicht sagen, okay, der vorgegebene Abstand ist 32 und da 12

und so, sondern du musstest dann halt die Abstände ändern, was dann halt irgendwie wieder blöd war und gerade bei Stellen, wo dann halt vielleicht, äh, ja, die Überlängen dann besonders hervorgestochen sind oder so, also, ja, das ist schon, ne, wenn man richtig schön Grafik, also wenn man einen hohen Anspruch hat und das richtig gut aussehen soll, dann kann das schon den entscheidenden Unterschied machen, weil sonst würde man sich vielleicht denken, naja, braucht man das jetzt wirklich?

Aber es ist schon so, ja, wenn ich's richtig haben will und schön haben will. Das wurde in diesem Medium-Artikel auch, äh, da gibt's einen extra, ähm, Absatz dazu, was jetzt da, wo die Motivation herkommt und das geht da halt vor allem, und das wird da sehr, sehr oft erwähnt, um Designer-Developer-Handoff.

Also genau das, was du gerade gesagt hast, der Designer denkt sich was aus und möchte das, äh, äh, dem Developer geben und, äh, dann, da, da gibt's dann Missverständnisse, was wie groß jetzt sein soll. Und das ist dann teilweise echt, äh, ich kann ja verstehen, dass man sich das, also, es gibt ja gute Gründe dafür, dass man genau so viel Pixel jetzt Abstand von da nach da macht. Also, ich weiß, äh, do websites need to exactly the same in every Browser?

Nein, natürlich nicht und es muss auch nicht alles mal auf dem Pixel perfekt sein, aber es gibt schon gute Gründe, warum da mal noch, also, die, die Designer, die denken sich da was dabei. Das ist nicht irgendwie nur ... Und gerade bei so, bei Badmas, also, das kann ich halt echt verstehen, weil ich bin da auch, ich reagier da allergisch drauf, wenn, wenn Sachen halt dann optisch irgendwie nicht so zentriert aussehen, das ist halt irgendwie so, ah, hätte man das nicht.

Und das würde diese Sache deutlich einfacher machen, was in dem Artikel auch noch aufgegriffen wird, wo ich jetzt nicht, nicht tiefer drauf eingehe, ist, ähm, dass man damit dann auch, äh, viel besser irgendwie so ein Spacing-System aufsetzen kann für ein Design-System. Ja. Ähm, wie gesagt, lese den Artikel durch, das lohnt sich echt und was ich jetzt gar nicht wusste, vielleicht noch als kleines Detail, am Rande, man kann sich bei Medium, äh, mittlerweile, äh, Artikel auch vorlesen lassen.

Ach. Also, man braucht dafür gar keinen Screenreader oder sowas und ich hab das jetzt heute mal gemacht und das war eine echt gute Stimme und ich hab jetzt auch keine Stelle, trotz dass es jetzt ein technischer Text war, ich hab jetzt keine Stelle gehabt, äh, doch, eine Stelle, äh, Lead wurde einmal Let ausgesprochen. Ach, Englisch, ähm, Mensch.

Aber ansonsten war das wirklich, äh, eigentlich so gut wie perfekt aus meiner Sicht, soweit ich jetzt diese Sprache verstehe und, und die Aussprache verstehe, war das wirklich extrem gut vorgelesen. Das ist auch cool gemacht, weil das so highlightet, also das highlightet den ganzen Absatz, wo es gerade ist und dann aber auch jedes einzelne Wort, wo es gerade ist.

Es ist so ähnlich wie die, äh, Lautvorlesen-Funktion in Edge, die ist auch ähnlich gut, vielleicht ist das tatsächlich sogar, äh, eine ähnliche technische Basis, weil da passiert genau das. Mich erinnert sich ein bisschen an TikTok-Videos, die einfach Reddit-Threads vorlesen. Ja. Da klingt's genauso.

Also wer, wer, äh, wer das, wer das bei sich, bei anderen Seiten auch immer haben will, so eine Experience, äh, in Edge gibt's die Lautvorlesen-Funktion, und da gibt's mittlerweile auch sehr, sehr, sehr gute Stimmen, die fast, äh, Hörbuch-Qualität-artig vorlesen. Und das macht auch genau das, das highlightet das aktuelle Wort. Ja, cool.

Und man kann da auch noch so folgen. Also ich find's eine sehr angenehme Art, Artikel zu konsumieren, weil ich's gleichzeitig noch mitlese, dann, äh, dann hab ich's quasi gleich auf zwei Kanälen, äh, irgendwie drin. Also das ist nur so am Rand. Genau, äh, erzählt uns, wofür ihr Leading-Trim verwenden wollt, äh, außer den Sachen, die wir jetzt schon angemerkt haben, würde ich mich, äh, sehr dafür interessieren.

Ich bin auch sehr gespannt, wann und ob das kommt, weil das wäre echt schon eine sehr coole Sache, weil ich achte auch immer sehr auf Typografie, ich mag das, wenn's irgendwie schön, ähm, schön pixelgenau designt ist, und, äh, ich würde mich sehr freuen, wenn das irgendwann kommt, aber wie gesagt, da, äh, gibt's noch nicht mal einen Can-I-Use-Eintrag dazu.

Da gibt's nur die Spec, ähm, die wir euch verlinken werden in den Shownotes, da könnt ihr auch mal reingucken, ähm, aber das ist, äh, ich weiß auch nicht genau, könnte man in der Spec eigentlich, da müsste doch irgendwie auch stehen, wann, wie weit und so.

Also, das ist jetzt der, der, äh, der Stand von dieser Spec ist 14. November 2022 von, von dieser Version, die ich, von der neuesten Version, die ich da gefunden hab, ähm, natürlich ist die Spec auch nicht, äh, irgendwie eine Gesetzgebung, sondern es müssen natürlich die Browser-Hersteller auch noch implementieren. Ich hab jetzt nicht nachgeguckt, ob das irgendwie in diesem Interop, äh, 2023 drin ist, das könnte ich aber noch gucken.

Ja, aber schön zu sehen, dass sich alles so ein bisschen, so, so, so, so kleine, feine Stellschrauben, um die wir uns jetzt endlich kümmern können, nachdem die großen Baustellen, äh, im, im CSS-Bereich oder generell im Webdesign, ähm, jetzt eigentlich so, äh, mal langsam durch sind. Und Sachen, wo wir echt lange drauf gewartet haben und die lange irgendwie komisch waren oder unzufriedenstellend und jetzt kann man sich wirklich um so, so Kleinigkeiten, vermeintliche Kleinigkeiten kümmern.

Ja, es wird, es wird immer besser und, ähm, ja, wie gesagt, wer weiß, ob das jemals kommt, ähm, weil das ist noch so in so einem Zustand, wo man es nicht, nicht so genau, äh, absehen kann, aber ich würde mich freuen. Ja. Genau, das dazu. Mensch, dann war's das. Dann sind wir fertig mit dem Thema. Gut. Dann kommt jetzt ... Das Geil-Teil. Geil-Teil. Ja, langsam hab ich's drauf. Ja. Hat ja auch nur drei Jahre gedauert.

Das Geil-Teil heute ist eine Seite, wo ich vorhin festgestellt hab, das muss es schon seit sechs oder sieben Jahren geben. Oder hab ich sogar gesagt acht? Ich muss nochmal auf so eine Demo rausklicken. Ich glaube acht, ja. Und zwar, Moment, ich guck nochmal, äh, ist das tatsächlich, oh, tatsächlich acht Jahre, tatsächlich acht Jahre alt. Okay, das ist komplett an mir vorbeigegangen. Und zwar heißt die Seite Particle-Love.com. Jetzt darfst du auch mal draufklicken. Ähm.

Darf ich auf High klicken oder ist dann der Street dann unsere Aufnahme kaputt? Das weiß ich nicht. Ich hab jetzt zur Sicherheit mal auf Low geklickt. Okay, ich mach auch mal Low. Aber ich glaube, du kannst die einzelnen Parameter später nochmal selbst hochsetzen. Es ist eine Seite, wo so verschiedene Partikel-Systeme, die total fancy aussehen, ja genau, gezeigt werden. Man kann da verschiedene auswählen.

Also das Erste, was ich jetzt ausgewählt habe, warte mal, ich muss gerade mal gucken, wie es heißt. The Spirit, das ist auch das Erste. Ähm, das sind, äh, ich versuch's jetzt mal zu beschreiben. Der Maus folgen so ganz viele weiße Blobs, ähm, in so einem wilden Muster. Die sind aber sehr wild animiert drumherum. Und es erinnert sehr stark, ich hab's vorhin schon mal gesagt, es erinnert sehr stark.

Und es kommt später noch was, was mich ähnlich stark daran erinnert, an, ähm, äh, fantastische Tierwesen von, äh, J.K. Rowling, diese Filme. Und zwar gibt es da diesen, ich habe vergessen, wie dieses Vieh heißt. Ähm, da gibt's so einen, einen Charakter, um den sich da viel dreht, der dann aber irgendwie so, äh, so eine, so eine besondere Form annehmen kann. Und so morft und so durch die Gegend fliegt und irgendwie durchdreht. Immer dann, wenn er gereizt wird.

Das ist irgendwie so ein Junge. Ähm, und das sieht sehr ähnlich danach aus. Also ich würde sagen, die haben sich da inspirieren lassen. Der Film hat sich da inspirieren lassen, weil das gab's ja vor acht Jahren schon. So, also es ist, es sind so Partikel, die rumanimieren. Das sieht sehr abgefahren aus. Folgt jetzt in diesem Fall der Maus, dieses Beispiel. Ähm, es ist tatsächlich doch recht performant.

Und dann kann man aber, das ist das Coole daran, also erstens gibt's den Code dazu auf GitHub. Und man kann sich das angucken. Aber man kann die Parameter auch ändern. Rechts oben, ähm, gibt es zu jeder Demo Parameter, die man in dieser einzelnen Demo ändern kann. Also zum Beispiel kann ich jetzt die Menge der Partikel ändern. Ich lass die jetzt mal bei 65.000, muss man sagen. Standard 65.000 Partikel, ja. Die Geschwindigkeit kann ich ändern. Ähm, den Radius kann ich ändern.

Und dann sieht das Ding jedes Mal irgendwie ein bisschen anders aus. Attraction, ich nehme an, dass das was mit der Gravitation zu tun hat, wie schnell das wohin fliegt. Follow-Mouse kann ich ein- und ausschalten. Äh, wenn ich's ausschalte, dann fliegt's ganz wild durch die Gegend. Das ist ja echt krass. Also es ist wie so eine Wolke an weißen Partikeln, die der Maus folgen. Das ist ganz abgefahren. Muss man sich angucken unbedingt. Ähm, ich geh mal noch auf eine andere Demo davon.

Also du kannst es auch nicht, so wie du das gerade klingst. Ja, ich finde das krass. Deswegen wie so still. Ähm, und das ist, glaube ich, irgendwie mit Canvas gebaut. Können wir gleich mal noch gucken. Ja, ja, das muss Canvas sein. Wahrscheinlich irgendwas. Ähm, dann gibt's hier die Demo, äh, was war die zweite? Icicle Bubbles. Da gibt's auch noch schlimme Spooky-Sound-Effekte dazu. Ähm, das ist dann das Ganze. Das sieht so ein bisschen mehr aus wie eine Flüssigkeit.

Äh, aber in, in dunkelgrau bis hell. Das ist ja hier mit der Hand. Ist ja krass. Und das, ja genau. So, gehen wir, gehen wir mal noch weiter. Gehen wir mal noch weiter. Äh, ich hab hier jetzt noch Hypermix. Ähm, das sieht aus wie so Zellen, die sich irgendwie reproduzieren. Das sind auch so, so, so Bälle, aber die sind blau und rot. Und man kann da wohl auch die Farben einstellen und alles. Und, und, es ist, ja, es ist alles sehr, sehr, sehr wild.

Ähm, und du hast, äh, Constraint, glaub ich, offen, gell? Nee, Constraint, Constraint ist so ein, äh, ist so wie so eine Art ... Ist eins danach noch. Ist wie so eine Art, äh, Spinnennetz in 3D, was sich bewegt. Ganz verrückt. Also, es ist alles auf jeden Fall Material für Horrorfilme oder Horrorspiele. Ja, genau, Touch with Leap Motion. Da fällt wie so Sand von oben nach unten. Und man kann mit der Maus eine 3D-Hand bewegen, die man da in den Weg tut.

Und dann fallen diese Sandkörner anders nach unten. Nämlich über die Hand. Oder manche bleiben halt auf der Hand oder fallen prallen von der Hand wieder ab. Es ist total abgefahren. Ähm, und, äh, ich weiß nicht genau, unter was für einer Lizenz das steht, ob man irgendwie sowas auch auf seiner eigenen Webseite dann irgendwie einbinden kann. Ähm, ich finde ja alleine schon die Startseite davon total faszinierend.

Ich wollte gerade sagen, der Auswahlbildschirm, also der sich verändert auch, je nachdem, was ich auswähle. Das fand ich schon geil. Also, ich hätte gar nicht mal erwartet, dass man da noch klicken kann und dann passiert noch was Geileres. Also, das ist ja echt Hammer. Das sieht so Science-Fiction-mäßig aus. Und das ist tatsächlich MIT-License. Du kannst das, äh, benutzen, wenn du's möchtest. Vielleicht noch sagen, von Aaron Kwan würde ich das jetzt mal aussprechen.

Ich weiß nicht, ob ich den Namen, wahrscheinlich hab ich ihn falsch gesagt. Ähm, auf jeden Fall weiß ich, dass ich da auch schon Demos gesehen hab bei CodePen. Ähm, die gibt es, also, es gibt auf jeden Fall auch CodePens davon. Ich weiß jetzt nicht, ob die irgendjemand da rauskopiert hat oder ob das die Person, die das selbst erstellt hat, bei CodePen reinhat. Da bin ich nämlich ursprünglich drauf gestoßen und hab dann gedacht, hey, da muss ich jetzt irgendwie nochmal nachgoogeln.

Dann hab ich diese Seite gefunden und die ist eigentlich fast noch cooler. Ähm, geil ist halt echt, dass man an diesen Parametern rumspielen kann und das komplett verändern kann, wie es aussieht. Also, es ist echt sehr abgefahren. Äh, geile Sache, die uralt ist offenbar, die komplett an mir vorbeigegangen ist. Äh, sehr hübsch. Und ich glaube, wenn man so ein bisschen über Partikelsysteme, ähm, auf Webseiten was lernen will, dann sollte man sich das mal angucken.

Ich glaub, da kann man einiges lernen. Cool. Und ich glaub, damit kann man, wenn man möchte und die Parameter richtig einstellt, seinen Rechner auch richtig schön in die Knie zu gehen oder mal den Lüfter anmachen oder so. Kann man mal gucken, ob die, was die Grafikkarte so drauf hat, wenn du halt mal auf so und so viele Millionen Partikel dann gehst und dann mal schauen, was geht. Jo, das war das Geilteil heute. Cool. Sehr schön. Dann kommt. Das Ende. Schafft.

Mensch, ich bin echt nicht so müde wie mit Bier, muss ich sagen. Und wir haben auch jetzt uns tatsächlich trotz vier Properties, äh, sind wir relativ flott jetzt durchgekommen hier durch den ganzen Schlammhersel. Ist ja fast eine kurze Sendung für unsere Verhältnisse, muss ich sagen, ja. Ja, wir hatten schon, es ist nicht die kürzeste, aber. Nee, nee, nee, wir hatten schon. Aber, ja, es ist schon eine der kürzesten. War so ein bisschen zu verschnaufen.

Außer wir verplabbern uns jetzt noch. Nee, das machen wir nicht, aber wir, ähm, sagen wir euch nochmal kurz unsere Faxnummer. 072147046487. Fax uns. Wo wir sind, ist vorne Frontend-Faxen-Frotzelein. Ihr könnt unseren Merch auch per Fax bestellen. Ach so, unser Merch, genau, wir könnten auf unser Merch, genau, genau, wwwsev.de slash Merch. Da könnt ihr, da könnt ihr T-Shirts und Tassen bestellen oder auch Hoodies und sowas.

Ähm, genau, da können wir noch auf ein paar Sachen hinweisen hier. Das ist ja eigentlich gut, schon lange nicht mehr. Da gibt's auch jetzt ja ein neues Motiv, das haben wir ja schon mal gesagt. Ähm, und ihr braucht natürlich, äh, wenn, wenn ihr uns, wenn wir uns irgendwann mal sehen, dann erwarten wir natürlich, dass ihr in einem WWSEV-Hoodie auftaucht. Das geht ja gar nicht anders. Also anders ist eigentlich ja gar nicht erlaubt, ne?

So, genau, schaut euch mal unser Merch an, wwwsev.de slash Merch. Okay. Und damit wären wir am Ende, glaube ich, jetzt, das war's jetzt, genau, verabschieden wir uns. Und, äh, ja, vielleicht machen wir nächstes Mal mit den, mit den HTML-Elementen weiter. Und dann danke fürs Zuhören. Und bis zum nächsten Mal. Bis dann. Bis dann.