WEBVTT

00:00:00.017 --> 00:00:04.357
Okay, also Anker-Positioning definitiv für alle, die sonst zu viel CSS schon

00:00:04.357 --> 00:00:06.137
können und sagen, ich muss noch ein bisschen mehr lernen.

00:00:07.237 --> 00:00:12.397
Da kann man sich reinfressen. Was wäre denn, wenn man CSS in React reinkriegen

00:00:12.397 --> 00:00:13.717
wollte? Wie würde man das tun?

00:00:14.237 --> 00:00:17.677
Netter Versuch, Herr Netzer, aber lassen Sie mal den Delling jetzt das mal richtig machen.

00:00:18.277 --> 00:00:23.317
Das wäre auch dann zur Navigation API erstmal alles, oder? Ich denke.

00:00:24.777 --> 00:00:27.777
Das Problem ist halt, es ist dringend notwendig gewesen. Und jetzt,

00:00:27.857 --> 00:00:30.417
wo es da ist, denkt man sich halt eben, es ist wie eine neue U-Bahn-Linie.

00:00:30.737 --> 00:00:33.757
Mensch, warum gab es hier nicht schon immer? Okay, ich fahre jetzt damit.

00:00:36.837 --> 00:00:41.737
Hey, kurze Werbeansage von uns. Seit 2011 sind wir regelmäßig auf der Beyond

00:00:41.737 --> 00:00:44.597
Tellerrand, einer Konferenz für Kreative und Entwickler.

00:00:44.797 --> 00:00:47.057
Und sie inspiriert uns bis zum heutigen Tag.

00:00:47.657 --> 00:00:54.117
Das nächste Mal findet die Konferenz am 27. und 28. April 2026 in Düsseldorf statt.

00:00:54.957 --> 00:01:01.497
Tickets kosten 349 Euro, was für zwei Tage Konferenz mit dem Line-Up ein Schnapper ist.

00:01:01.677 --> 00:01:04.497
Und wir würden uns freuen, dich dort zu treffen.

00:01:05.097 --> 00:01:10.077
Auf der Webseite beyondtellerand.com ohne Bindestrich gibt es alle Infos.

00:01:10.777 --> 00:01:16.417
Und noch ein Tipp. Gönnt euch ein Zimmer im Holiday Inn oder im New Tab neben der Venue.

00:01:16.577 --> 00:01:21.277
Denn abends kann man dort oft noch mit den Speakern und der Community an der Bar abhängen.

00:01:21.817 --> 00:01:26.697
Wir alle freuen uns, wenn du dabei bist. Und wer darüber hinaus noch Bock hat,

00:01:27.177 --> 00:01:32.417
dem gebe ich persönlich gerne eine Führung durch Düsseldorf inklusive Königsallee,

00:01:32.917 --> 00:01:36.117
Altstadt, Medienhafen und japanischem Viertel.

00:01:41.926 --> 00:01:48.326
Revision 705. Wir sind heute zu zweit. Wir hätten aus dem Team den Peter.

00:01:48.446 --> 00:01:49.886
Hallo Peter. Moin, moin, moin.

00:01:50.386 --> 00:01:55.026
Ich bin der Shep und der Peter und ich, wir haben uns hier wieder zusammen gerauft,

00:01:55.186 --> 00:01:57.286
getelefoniert, gewideot.

00:01:58.606 --> 00:02:03.906
Weil wir nach 20 Wochen mal wieder so ein bisschen Browser-News,

00:02:04.306 --> 00:02:10.426
neue Features, neue Releases zusammen oder zusammen durchgegangen sind und so

00:02:10.426 --> 00:02:14.326
die Highlights rausgefischt haben, die wir gut fanden und über die wir sprechen wollen.

00:02:14.586 --> 00:02:18.406
Und davon gibt es nicht wenig, obwohl wir uns ja nur die Browser angeschaut

00:02:18.406 --> 00:02:19.206
haben, die keiner benutzt.

00:02:19.606 --> 00:02:22.186
Also Chrome mit seiner Derivate haben wir ja ignoriert.

00:02:23.086 --> 00:02:26.966
Ja, das stimmt. Aber man muss auch sagen, Chrome fällt ja irgendwie jetzt immer

00:02:26.966 --> 00:02:29.046
unter den Tisch, während das ja früher andersrum war.

00:02:29.286 --> 00:02:33.926
Und ich glaube, das liegt einfach daran, dass irgendwie viele Devrails da weggegangen sind.

00:02:34.066 --> 00:02:38.006
Und auch diese, also früher gab es ja auch immer für jedes Release ein cooles

00:02:38.006 --> 00:02:40.126
Video, wo die so die neuesten Features gezeigt haben.

00:02:40.606 --> 00:02:44.666
Ich finde, das kommt so nicht mehr so gut rüber, während die anderen eben in

00:02:44.666 --> 00:02:49.946
dem Bereich so ihr Game aufs nächste Level gehoben haben. Ja,

00:02:50.166 --> 00:02:50.986
ich glaube auf jeden Fall.

00:02:51.706 --> 00:02:56.886
Also definitiv macht der Herr Archibald da bei Mozilla bei allem anderen Blödsinn, den er verzapft.

00:02:56.966 --> 00:02:59.826
Aber er kriegt es auf jeden Fall kommuniziert, wenn da ein neues CSS-Feature

00:02:59.826 --> 00:03:02.066
ist, was es ist und wie es funktioniert.

00:03:02.746 --> 00:03:05.566
Ja, genau. Also das macht er echt super.

00:03:05.566 --> 00:03:10.386
Und natürlich hier Jen Simmons und Team machen das auch mega gut für Safari,

00:03:10.546 --> 00:03:15.006
also genau, und Chrome läuft halt so mit, das ist halt irgendwie so,

00:03:15.146 --> 00:03:17.266
wie so eine Katze auf dem Bauernhof, ist halt auch da.

00:03:18.246 --> 00:03:22.006
Aber eigentlich ist so weitestgehend wartungsfrei, weil macht eh was sie wollen,

00:03:22.486 --> 00:03:25.926
sind eh die schnellsten alle zwei Gemeins, also eigentlich ja so genau,

00:03:26.046 --> 00:03:29.366
so wie das Kind, was keine Probleme macht, um das kümmert sich keiner,

00:03:30.306 --> 00:03:35.106
äh, genau, so ist es bei Chrome, also der macht auch Probleme, aber, oh ja.

00:03:36.732 --> 00:03:43.532
Genau. Also, was haben wir denn? Wir würden starten mit einem größeren Feature.

00:03:43.852 --> 00:03:47.952
Also, nicht, dass wir da jetzt die halbe Sendung darüber sprechen wollen,

00:03:48.032 --> 00:03:52.072
aber technisch ist es ein sehr aufwendiges Feature, was an dem lange gearbeitet

00:03:52.072 --> 00:03:58.572
wurde, nämlich Firefox unterstützt jetzt als finaler Browser-Engine Anchor-Positioning.

00:03:58.972 --> 00:04:02.312
Ja, ist ja so ein Ding. Das gucke ich mir an. Ich sehe dann so die Demos,

00:04:02.412 --> 00:04:03.692
wo wild Sachen über den Bildschirm fliegen.

00:04:04.052 --> 00:04:08.132
Denk mir, das ist mega komplex. Die Spezifikation lese ich mir durch, wenn ich dazu komme.

00:04:08.492 --> 00:04:10.572
Aber ich muss sie mir gar nicht durchlesen, weil ich habe ja einen Podcast.

00:04:11.632 --> 00:04:14.492
Ja, das machen wir den eigentlich. Ich lerne ja auch immer von dir.

00:04:14.692 --> 00:04:17.632
So wie mit hier, was war das letzte Mal, mit den Disposables und so.

00:04:18.052 --> 00:04:20.992
Ja, und von unseren Gästen. Das ist ja der Grund, warum wir das hier seit 700

00:04:20.992 --> 00:04:23.212
Revisionen durchstehen. Genau.

00:04:24.352 --> 00:04:30.452
Ja, Anchor Positioning ist, Ich glaube, entstanden ist das eben aus diesem Bestreben

00:04:30.452 --> 00:04:33.832
von Open UI, also dieser Community Group,

00:04:34.352 --> 00:04:41.232
die zum einen bestehende Formular- oder Interface-Elemente stylebarer machen

00:04:41.232 --> 00:04:48.232
möchte und zum anderen wollen die auch mehr User-Interface-Primitive in die Browser bringen,

00:04:48.352 --> 00:04:51.872
mit denen man sich dann beliebige User-Interface-Pattern bauen kann.

00:04:52.792 --> 00:04:58.212
Und wenn man sowas hat wie ein Select mit einem Dropdown, das sich öffnet oder

00:04:58.212 --> 00:05:02.212
ein Date-Picker, irgendwie solche Dinge, dann.

00:05:03.838 --> 00:05:09.418
Oder auch bei Popovers, wie wir sie eigentlich verstehen, also so als eine Art Tooltip,

00:05:09.638 --> 00:05:14.118
da haben wir ja immer den Bedarf daran, dass dieser erweiterte Kontext dazu

00:05:14.118 --> 00:05:20.818
sich quasi an dem Elternelement positioniert in irgendeiner Art und Weise.

00:05:20.818 --> 00:05:26.898
Ja, also der Default von Positionierung ist ja irgendwie ausgehend von der linken

00:05:26.898 --> 00:05:30.818
oberen Ecke von irgendeinem Kontextelement, dass man irgendwie explizit setzt

00:05:30.818 --> 00:05:34.518
über irgendwelche CSS-Magie mit Nebenwirkungen, die man vielleicht gar nicht beabsichtigt.

00:05:34.718 --> 00:05:37.778
Und was man ja eigentlich wirklich irgendwie sagen möchte, ist ja so auf einer

00:05:37.778 --> 00:05:42.698
quasi semantischen Ebene, du gehörst zu dem. Genau, also schnapp sozusagen magnetisch

00:05:42.698 --> 00:05:44.158
an das andere Element dran.

00:05:44.718 --> 00:05:48.418
Also wir konnten das ja bisher schon lösen, indem wir so einen Wrapper um beide

00:05:48.418 --> 00:05:51.138
drum hatten, der irgendwie Position Relative hat und dann kann man per absolute

00:05:51.138 --> 00:05:56.218
Positionierung dann schon viel machen, aber manche Dinge eben auch nicht.

00:05:56.218 --> 00:06:00.918
Zum Beispiel, wenn ein Element irgendwie nah an der unteren Viewport-Kante ist,

00:06:01.058 --> 00:06:03.858
dann musste man da irgendwie sehr viel JavaScript draufwerfen,

00:06:04.058 --> 00:06:09.758
um dann dieses Andocken von unten nach oben sozusagen zu verlegen,

00:06:09.918 --> 00:06:11.838
damit dann wieder der gesamte Bereich sichtbar ist.

00:06:12.118 --> 00:06:15.638
Also solche Sachen. und man braucht eben einen Wrapper,

00:06:15.858 --> 00:06:20.458
man hat nicht diese Möglichkeit, eine Beziehung zu definieren in CSS,

00:06:20.658 --> 00:06:24.958
eine Layout-Beziehung und das geht eben mit Anchor-Positioning,

00:06:25.138 --> 00:06:28.118
also es ist das eine, was Anchor-Positioning kann und das andere ist eben,

00:06:28.238 --> 00:06:30.218
Anchor-Positioning kümmert sich auch darum.

00:06:30.818 --> 00:06:36.458
Wenn das sozusagen angedockte Element am Viewport-Rand droht,

00:06:36.638 --> 00:06:42.098
abgeschnitten zu werden, dass es das dann nach definierbaren Regeln eben an

00:06:42.098 --> 00:06:44.638
andere Stellen andockt an das Element.

00:06:46.618 --> 00:06:51.058
Genau. Und Anchor Positioning ist im Grunde...

00:06:52.144 --> 00:06:57.844
Und letztlich funktioniert das wie absolutes Positionieren, nur mit dem Unterschied,

00:06:58.084 --> 00:07:04.164
dass du dann zusätzlich ein Element mit einem Anchor-Name ausstattest,

00:07:04.224 --> 00:07:07.184
das ist das Eltern-Element, und dann diesem Kind-Element sagst,

00:07:07.304 --> 00:07:10.344
mit der Anchor-Funktion, es soll sich daran andocken.

00:07:12.164 --> 00:07:18.324
Und genau, das ist erstmal alles, was du brauchst und dann hast du Möglichkeiten

00:07:18.324 --> 00:07:23.664
zu definieren wo das andocken soll, also man möchte das ja vielleicht nicht

00:07:23.664 --> 00:07:26.484
da angedockt haben, wo es defaultmäßig landen würde,

00:07:27.644 --> 00:07:31.564
und das kann man auf zwei Arten und Weisen tun, die einfachste ist,

00:07:31.724 --> 00:07:38.384
es gibt sowas wie so ein also ähnlich wie bei Border Image gibt es so um das

00:07:38.384 --> 00:07:42.324
Elternelement herum gibt es acht Quadranten.

00:07:43.044 --> 00:07:47.564
Und schon wird dann sozusagen gesliced an den Kanten des Elternelements und

00:07:47.564 --> 00:07:51.944
daraus entstehen dann eben um das Elternelement rum acht Bereiche,

00:07:52.304 --> 00:07:55.664
einer drüber, einer drunter, einer links, einer rechts und dann noch in den Ecken.

00:07:57.084 --> 00:08:03.604
Und du kannst halt dem angedockten Element dann sagen, bitte platziere dich

00:08:03.604 --> 00:08:09.684
eben so nah an das Elternelement, aber in diesem Sektor. Ja.

00:08:10.484 --> 00:08:14.404
Oder, also das ist halt die eine Möglichkeit. Die andere Möglichkeit ist,

00:08:14.664 --> 00:08:21.064
dass du diese Dinge nicht nutzt, sondern dass du eben dann top und so weiter,

00:08:21.224 --> 00:08:26.964
top, right, bottom, left nimmst und da aber Bezug nimmst auf die Position des Eltern-Elements.

00:08:27.304 --> 00:08:33.824
Also du quasi sagst, platziere dich an die linke Kante von dem Entschleure-Element

00:08:33.824 --> 00:08:37.044
plus vielleicht irgendwie 10 Pixel oder was weiß ich.

00:08:39.464 --> 00:08:40.644
Genau, das ist das eine.

00:08:42.737 --> 00:08:46.737
Und dann hast du auch eben, wie gesagt, Einflussmöglichkeiten auf die Mechanik,

00:08:46.877 --> 00:08:52.117
wie der Browser entscheidet, wenn ein Element eben nah am Viewport ist und droht

00:08:52.117 --> 00:08:55.797
abgeschnitten zu werden, wo er es dann stattdessen hin positioniert.

00:08:55.897 --> 00:08:59.697
Also du kannst dem dann so quasi so Fallback-Positionen geben und sagen so,

00:08:59.797 --> 00:09:03.777
wenn die ursprüngliche oder die gewünschte, wenn das irgendwie nicht hinhaut,

00:09:05.177 --> 00:09:07.577
dann probiere als nächstes diese Position.

00:09:08.137 --> 00:09:10.897
Und so kannst du das dann eben machen.

00:09:11.897 --> 00:09:16.897
Und ich glaube, das kannst du sogar auch noch in zwei verschiedenen Komplexitätsstufen tun.

00:09:18.317 --> 00:09:20.277
Es ist ein dickes Brett, das da gebohrt wird.

00:09:21.957 --> 00:09:26.957
Es gibt einen Artikel von Tarek Afif, glaube ich, heißt der,

00:09:28.797 --> 00:09:35.077
wo er noch auf so einem, also es gibt ja so, zum Beispiel, wenn du was sticky

00:09:35.077 --> 00:09:38.997
positionierst und du hast ein älteres Element, was ein Overflow hat,

00:09:39.157 --> 00:09:43.177
einen gesetzten Overflow, dann fuck dir das stickier, also dann geht das nicht mehr.

00:09:45.477 --> 00:09:49.277
Und so ein bisschen sowas gibt es auch bei dem Anchor Positioning,

00:09:49.497 --> 00:09:55.197
also es ist einfach, es ist nicht zu vermeiden, weil die Layout Engine muss

00:09:55.197 --> 00:10:00.437
in einer bestimmten Reihenfolge arbeiten, um das eben umsetzen zu können und das Learning und,

00:10:01.606 --> 00:10:05.506
aus seinem Artikel ist, das Elternelement muss immer gelayoutet sein.

00:10:05.946 --> 00:10:10.106
Also wenn das fertig gelayoutet ist, dann kannst du ein Element daran andocken.

00:10:10.586 --> 00:10:12.866
Ja, wie sonst soll es gehen? Wenn du das Layout nicht weißt,

00:10:12.906 --> 00:10:15.746
kannst du es ja nicht andocken. Du musst ja wissen, wo ist die linke Kante,

00:10:15.846 --> 00:10:16.826
damit du dich ja dran flanschen kannst.

00:10:17.386 --> 00:10:24.406
Genau. Und da gibt es eben so verschiedenste Konstellationen,

00:10:24.486 --> 00:10:26.906
die er in seinem Blogpost auflistet,

00:10:27.126 --> 00:10:33.846
die eben dazu führen, dass das Eltern-Element eben in dem Moment, wo du das Anchoring,

00:10:34.746 --> 00:10:37.906
oder wo das Kind-Element, das geänkert werden soll, gerendert wird,

00:10:38.186 --> 00:10:41.666
wo das Eltern-Element eben einfach noch nicht fertig gelayoutet ist und man

00:10:41.666 --> 00:10:44.886
sich dann eben wundert, warum das mit dem Anchoring nicht funktioniert.

00:10:46.306 --> 00:10:52.106
Zum Beispiel, dass im HTML das Eltern-Element nach dem Kind-Element kommt.

00:10:53.186 --> 00:10:59.786
Ja. Schlecht. Oder das Kind-Element ist im Eltern-Element und es hat keinen,

00:10:59.906 --> 00:11:01.126
es ist nicht aus dem Fluss genommen.

00:11:02.646 --> 00:11:04.126
Irgendwie solche Dinge. Ja.

00:11:05.786 --> 00:11:09.406
Ja, ja, stimmt. Temani-Affif, so heißt er.

00:11:10.466 --> 00:11:16.426
Ah ja. Genau, der ist sowieso super, also wenn man sich für so CSS-Sachen interessiert,

00:11:16.626 --> 00:11:18.526
dann ist der Temani einfach mega gut.

00:11:18.926 --> 00:11:22.366
Genau, ich suche das Blogpost mal schnell raus. Ja, auch wenn man irgendwie

00:11:22.366 --> 00:11:27.526
die komplizierten Sachen gar nicht lesen kann oder möchte, weil Zeit kein CSS-Freak oder sowas.

00:11:27.906 --> 00:11:30.546
Aber das sind immer sehr schöne Demos, die er auch zusammen bastelt.

00:11:32.178 --> 00:11:41.718
Kann man mal folgen. Genau. Und was auch cool ist, ist ein Talk von Ramus van Damme, von Google,

00:11:42.918 --> 00:11:47.758
den er bei der, wir haben das ja ein bisschen beworben, diese State of the Browser-Konferenz.

00:11:48.798 --> 00:11:53.938
Die war am 28. Februar und da war ich natürlich remote zugeschaltet,

00:11:54.118 --> 00:11:55.458
weil voll gute Konferenz.

00:11:56.578 --> 00:12:00.458
Und der hat einen Vortrag eben nur über Anchor Positioning gemacht und der war

00:12:00.458 --> 00:12:04.458
auch super. Also ich würde empfehlen, also der ist leider noch nicht released,

00:12:04.778 --> 00:12:11.058
wir verlinken aber die London Web Standards, also den YouTube-Kanal.

00:12:12.258 --> 00:12:16.518
Das erste Video von der Konferenz ist schon online, aber eben nicht das von

00:12:16.518 --> 00:12:20.958
Pramus und da kann man da mal ein Auge draufhalten.

00:12:21.258 --> 00:12:25.378
Und wenn ich es mitbekomme, dass es released ist, dann werde ich es vielleicht

00:12:25.378 --> 00:12:28.558
auch einfach dann nochmal nachträglich in die Shownotes einpflegen.

00:12:31.107 --> 00:12:37.267
Genau. Okay, also Anchor Positioning definitiv für alle, die sonst zu viel CSS

00:12:37.267 --> 00:12:39.327
schon können und sagen, ich muss noch ein bisschen mehr lernen.

00:12:40.407 --> 00:12:44.527
Da kann man sich reinfressen. Ja, wobei es gibt halt eben, ich finde halt cool

00:12:44.527 --> 00:12:47.787
diese Aufteilung in quasi.

00:12:49.967 --> 00:12:54.187
Wie soll man sagen, so ein Out-of-the-Box-Mode, der schon cool ist und dann

00:12:54.187 --> 00:12:59.347
eben diesen Expert-Mode, in dem man sich dann sozusagen freiwillig begeben kann,

00:12:59.447 --> 00:13:00.647
wenn einem das nicht reicht.

00:13:01.107 --> 00:13:04.167
Und ich glaube, der Grund, das Anchor Positioning, also daran wird ja schon

00:13:04.167 --> 00:13:07.367
ganz lange rumgebaut, aber die Tatsache, dass du beide Wege hast,

00:13:07.607 --> 00:13:10.147
die verdanken wir, glaube ich, dem Apple-Team.

00:13:10.647 --> 00:13:13.387
Die haben das irgendwann mal eingebracht.

00:13:14.307 --> 00:13:17.847
Das hat dann auch dazu geführt, dass das eben einfach alles deutlich länger

00:13:17.847 --> 00:13:21.667
gebraucht hat, aber dafür ist es halt auch jetzt richtig geil und richtig rund.

00:13:22.807 --> 00:13:26.367
Ich glaube, es gibt noch hier und da ein paar Browser-Bugs bei so Edge-Cases,

00:13:26.547 --> 00:13:29.627
weil das ist, glaube ich, auch einfach für die Browser-Ersteller nicht so ganz

00:13:29.627 --> 00:13:32.687
so einfach als Layout-System zu implementieren.

00:13:32.867 --> 00:13:36.727
So ein bisschen wie bei diesem Has, dass man da ja auch immer irgendwelche Fixes

00:13:36.727 --> 00:13:38.127
sieht in den Release-Notes.

00:13:38.327 --> 00:13:43.107
Sowas wie, wenn irgendwelche Element-States in dem Has benutzt werden.

00:13:43.207 --> 00:13:47.967
Sowas wie Video Doppelpunkt Playing. Das gibt's ja jetzt. Das gibt's ja.

00:13:49.247 --> 00:13:53.987
Und das Has dann das noch nicht berücksichtigt hat und dann irgendwer gesagt

00:13:53.987 --> 00:13:56.907
hat, so, ja, ich wollte erst damit benutzen, ging nicht und dann nachher,

00:13:57.007 --> 00:13:59.907
Kacke, haben wir vergessen, müssen wir ja auch noch implementieren. Ja.

00:14:01.977 --> 00:14:07.457
Ja, es ist halt schwierig. Es hat CSS mittlerweile so eine große Oberfläche

00:14:07.457 --> 00:14:09.057
und so viele Sachen, die beachtet werden müssen.

00:14:09.657 --> 00:14:12.997
Ja, und die Browser generell sind ja einfach Höllenmaschinen.

00:14:13.837 --> 00:14:16.277
Ja, aber ich meine, zumindest kannst du ja sagen, irgendwann ist ja so eine

00:14:16.277 --> 00:14:19.857
Programmiersprache wie ECMAScript so in ihren Basics so weit,

00:14:19.877 --> 00:14:21.737
dass du damit alles machen kannst, was du machen willst.

00:14:21.897 --> 00:14:27.157
Und in CSS kann dir ja im Prinzip für jeder neue UI-Trend, der um die Ecke kommt,

00:14:28.117 --> 00:14:29.337
kannst du ja einen Taste dafür machen.

00:14:29.717 --> 00:14:34.057
Alle benutzen den. Also sollten wir es einfach machen, das zu tun.

00:14:34.137 --> 00:14:34.977
Also brauchen wir dafür ein Feature.

00:14:36.017 --> 00:14:41.277
Ich warte ja noch auf den Liquid Glass Filter. Das wäre jetzt ein Beispiel, das man bringen könnte.

00:14:43.057 --> 00:14:46.677
Also die Idee für so einen optischen Effekt ist nicht absurd.

00:14:46.977 --> 00:14:49.937
Ich bin sicher, man kann das auch so implementieren, dass es nicht aussieht

00:14:49.937 --> 00:14:51.737
wie Kacke, so wie Apple das da gemacht hat.

00:14:51.877 --> 00:14:55.257
Und ich möchte noch mal kurz noch hier attestieren, dass es nun,

00:14:55.497 --> 00:14:56.797
also ich brauche es nicht wirklich.

00:14:56.977 --> 00:15:00.537
Also ich möchte es nicht unbedingt haben. Es ist nur so viel Minukarte 1 dazu.

00:15:00.637 --> 00:15:03.697
Ja, aber du kannst ja auch über zum Beispiel sowas wie Border-Image-Share nehmen.

00:15:04.137 --> 00:15:05.737
Wann hast du zuletzt Border-Image benutzt?

00:15:08.857 --> 00:15:12.577
Ist lange her, aber ich glaube, wenn benutze ich Border-Image eher,

00:15:12.797 --> 00:15:15.797
um irgendwelche anderen dreckigen Sachen zu machen.

00:15:15.837 --> 00:15:18.417
Das war so klar. Warum frage ich das überhaupt? Das war so klar.

00:15:18.637 --> 00:15:21.917
Wann hast du Border-Image zuletzt bestimmungsgemäß genutzt, ist die Frage.

00:15:22.057 --> 00:15:23.197
Weiß ich nicht. Ich glaube gar nicht.

00:15:23.697 --> 00:15:27.437
Für halt so Raster-Grafik-Sprites um eine Box drum herum.

00:15:28.137 --> 00:15:33.357
Arrangieren. Das war mal ein UI-Pattern.

00:15:34.177 --> 00:15:37.577
Das hast du halt jetzt nicht mehr so viel. So wegen Gründen auch immer.

00:15:38.977 --> 00:15:41.657
Aber es war halt eben mal prävalent und deswegen macht es Sinn,

00:15:41.737 --> 00:15:43.277
das in ein CSS-Feature zu gießen.

00:15:43.837 --> 00:15:46.337
Und im Fall von Border-Image ist es ja zumindest mal so, dass das noch nicht

00:15:46.337 --> 00:15:49.477
irgendwelche Wechselwirkungen mit was anderem haben wird, wahrscheinlich.

00:15:49.737 --> 00:15:54.457
Aber bei sowas wie halt eben, es ist sticky oder nicht, das ist halt schon eine

00:15:54.457 --> 00:15:58.217
fundamentale Änderung, was dann halt eben Folgen hat. Und trotzdem kommen die

00:15:58.217 --> 00:15:59.597
CSS-Features mehr und mehr.

00:16:01.301 --> 00:16:05.001
Genau, wobei ich sagen würde, also da ist auch so ein bisschen mehr Ruhe eingekehrt.

00:16:05.261 --> 00:16:09.961
Also ich dachte mir jetzt ja so eine Phase, das war ja so ein bisschen wie in

00:16:09.961 --> 00:16:17.981
der Phase davor mit JavaScript, wo halt ständig neue Sprachfeatures kamen und neue Frameworks.

00:16:18.381 --> 00:16:24.801
Also ich weiß nicht, wenn ich hier durch unsere Liste durchgucke,

00:16:24.801 --> 00:16:28.821
sind da schon so einige CSS-Features drin. Und wir haben sehr viele einfach

00:16:28.821 --> 00:16:30.641
nur zur Kenntnis genommen bei unserem Durchgehen.

00:16:30.881 --> 00:16:33.661
Also das ist schon... Genau, aber ich sage trotzdem, also ich finde,

00:16:34.061 --> 00:16:38.521
also trotzdem, ich habe ja auch dieses On- oder mit dem Nils zusammen mache

00:16:38.521 --> 00:16:42.101
ich ja dieses Online-Meetup-CSS-Café, also da haben wir gemacht.

00:16:42.481 --> 00:16:46.101
Und das haben wir 2020 gestartet, genau während der Pandemie.

00:16:46.541 --> 00:16:50.201
Und da haben wir jetzt seit bestimmt einem Jahr kein Ding mehr gemacht.

00:16:50.361 --> 00:16:52.601
Also zum einen haben wir alle viel zu tun und schaffen es nicht.

00:16:52.741 --> 00:16:57.201
Zum anderen ist es aber auch so, dass es mir ein bisschen schwer fällt,

00:16:58.161 --> 00:17:01.621
so neue Themen zu finden, die wir nicht alle schon beackert haben.

00:17:02.121 --> 00:17:05.001
Also bei CSS brauchen die Dinge auch manchmal lange.

00:17:05.221 --> 00:17:08.561
Also dann hast du halt über View Transitions schon vor drei Jahren gesprochen

00:17:08.561 --> 00:17:14.241
und die sind, die haben sich ein bisschen weiterentwickelt, aber es gibt nichts

00:17:14.241 --> 00:17:16.321
grundlegend Neues zu erzählen in dem Bereich.

00:17:16.521 --> 00:17:20.721
Und ich finde, so ist es bei CSS. Das ist immer noch viel, aber das Tempo ist

00:17:20.721 --> 00:17:21.781
so ein bisschen runtergegangen.

00:17:23.341 --> 00:17:23.781
Okay.

00:17:25.961 --> 00:17:30.041
Quasi eine CSS-Fatig. Ja, also deckt sich nicht mit meinem Bild,

00:17:30.241 --> 00:17:31.121
muss ich tatsächlich sagen.

00:17:31.301 --> 00:17:34.341
Aber das liegt wahrscheinlich auch daran, dass ich so viel mit JavaScript rumhänge,

00:17:34.461 --> 00:17:37.461
für die halt CSS-Features von vor drei Jahren neu sind.

00:17:38.521 --> 00:17:42.061
Also auf der Konferenz, wo ich Anfang der Woche war und weswegen ich mich so

00:17:42.061 --> 00:17:46.301
anhöre, wie ich mich anhöre, da gab es halt so eine Night-Session,

00:17:46.421 --> 00:17:49.061
wo jemand eine Stunde lang was über View-Transitions erzählt hat.

00:17:50.401 --> 00:17:53.421
Und diejenigen, die dann tatsächlich die Night-Session nicht wahrgenommen haben

00:17:53.421 --> 00:17:57.941
und sich schon früh an den Bierzapfern begeben haben. Das waren halt nicht viele.

00:18:00.208 --> 00:18:05.508
Das heißt, da herrscht also durchaus Bedarf. Und generell...

00:18:05.508 --> 00:18:07.248
Ich nehme das schon, ohne Frage.

00:18:07.808 --> 00:18:11.628
Man unterschätzt ja immer dieses klassische Ding, ach, mein Vortrag hat doch

00:18:11.628 --> 00:18:13.608
jeder schon gesehen oder das kennt doch jeder.

00:18:13.828 --> 00:18:17.408
Und dann merkt man ja jedes Mal wieder, es ist halt nicht so.

00:18:17.948 --> 00:18:21.868
Genau, das und zum anderen ist es ja immer so, indem diese Technologie ja immer

00:18:21.868 --> 00:18:25.688
breiter gestreut wird, kannst du ja mit den einzelnen Versatzstücken viel mehr anstellen.

00:18:26.108 --> 00:18:28.908
Du findest jetzt vielleicht nicht irgendwie den neuen Standard für das neue

00:18:28.908 --> 00:18:32.888
CSS-Café, aber da hinten läuft der oder die rum und die haben diese völlig absurde

00:18:32.888 --> 00:18:36.988
Konstruktion gebaut oder dieses abwegige Problem gelöst, indem sie halt zwei

00:18:36.988 --> 00:18:39.448
Dinge, die nicht zusammengehören, zusammengesetzt haben.

00:18:39.828 --> 00:18:43.168
Im Prinzip könnte das ja auch ein Thema sein für sowas wie das CSS-Café.

00:18:43.568 --> 00:18:47.448
Das haben wir aber auch schon, auch das hatten wir, also zum Beispiel hier der.

00:18:49.308 --> 00:18:54.648
Roman Kumarow, der macht ja solche Sachen, der macht ja im Grunde,

00:18:54.748 --> 00:18:56.268
nutzt der bestehende CSS,

00:18:56.768 --> 00:19:01.288
also auch da Bleeding-Edge CSS, um den Beweis anzutreten, dass man auch ein

00:19:01.288 --> 00:19:05.348
neues CSS-Feature einbauen könnte, wo alle sagen, das ist so schwierig.

00:19:05.588 --> 00:19:10.068
Weil er sagt, ja, aber ihr müsst ja im Grunde nur diese Verfahren,

00:19:10.148 --> 00:19:12.928
die ihr schon da und dort drüben nutzt, müsst ihr nur kombinieren.

00:19:13.048 --> 00:19:18.088
Sowas wie ich glaube, was jetzt ja auch kommt, ist ja dieser sich selbst skalierende Text. Ja.

00:19:18.728 --> 00:19:25.448
Und das hat er ja quasi über Scroll-Driven Animations dann gelöst,

00:19:25.448 --> 00:19:30.048
indem er eben eine Schrift hat in einer bestimmten Größe in einem Overflow-Container.

00:19:30.188 --> 00:19:34.108
Und wenn die zu groß ist, dann entsteht eben, dann hast du eine Scrollbar. Ja.

00:19:34.788 --> 00:19:41.348
Dadurch wird halt eine Animation, dann ist halt der quasi der Scroll-Progress

00:19:41.348 --> 00:19:46.668
nicht mehr 100 Prozent, sondern nur noch, keine Ahnung, 97, weil ein Teil halt irgendwie raushagt.

00:19:47.168 --> 00:19:50.488
Und in dieser Animation macht er die Schriftgröße kleiner. Ja.

00:19:51.624 --> 00:19:58.784
Mit dem zunehmenden Scroll-Progress. Und dadurch wird dann wiederum im Umkehrschluss

00:19:58.784 --> 00:19:59.684
die Schrift wieder kleiner.

00:19:59.964 --> 00:20:04.684
Und so justiziert der Browser sozusagen in einer Loop die Schriftgröße so,

00:20:04.764 --> 00:20:07.564
dass der Text in diesen Container passt.

00:20:07.764 --> 00:20:10.984
Ja, und ich halte sowas halt eben für extrem wertvoll. Nicht nur,

00:20:11.084 --> 00:20:13.144
weil irgendwie musst du erst mal drauf kommen.

00:20:13.984 --> 00:20:16.944
Und diesen Kram, den er da schreibt, zu lesen, ist auch immer so ein bisschen,

00:20:17.064 --> 00:20:20.844
okay, mentalen Stahlhelm aufsetzen und jetzt mal konzentrieren und nicht irgendwie

00:20:20.844 --> 00:20:23.104
nebenher noch drei andere Sachen machen. Das stimmt, ja.

00:20:23.444 --> 00:20:25.744
Aber ich meine, der Effekt, den du ja auch hast, wenn du jetzt irgendwie ein

00:20:25.744 --> 00:20:27.904
UI bauen willst, das irgendwie so ein bisschen Wow-Effekt hat.

00:20:29.184 --> 00:20:32.244
Will ja vielleicht gar keiner, kann man ja alles generieren lassen, bla, Keks.

00:20:32.424 --> 00:20:35.464
Aber wenn du wirklich den Wow-Effekt haben kannst, musst du ja tatsächlich etwas

00:20:35.464 --> 00:20:37.404
am Start haben, was die anderen halt eben nicht haben.

00:20:37.964 --> 00:20:43.484
Also Liquid Glass hat jetzt nicht gut funktioniert, aber der Effekt war halt

00:20:43.484 --> 00:20:45.944
eben, oh wow, wie haben die das gemacht, wie können wir das irgendwie nachbauen, bla, bla, bla.

00:20:46.304 --> 00:20:49.284
Und du erinnerst dich da an Bet 2.0, als wir dann irgendwie nicht mehr irgendwelche

00:20:49.284 --> 00:20:53.004
seltsamen Alpha-Hacks machen mussten für runde Ecken, sondern als jeder runde

00:20:53.004 --> 00:20:55.624
Ecken machen konnte, war das ja instantan uninteressant.

00:20:56.184 --> 00:20:58.424
Ja, und nicht zu vergessen, Wet-Floor-Effekt, ne?

00:20:59.264 --> 00:21:04.084
Lauter so Sachen, ne? Und jetzt halt eben, jetzt ist der richtige Zeitpunkt,

00:21:04.204 --> 00:21:08.164
um halt diesen autoskalierenden Text zu haben, weil sobald das in der Spezifikation ist,

00:21:08.944 --> 00:21:11.304
interessiert das halt keinen mehr, weil das ja jeder wirklich Kreti,

00:21:11.464 --> 00:21:14.744
Pleti und Klot alle auch haben können. Mhm. Also.

00:21:16.595 --> 00:21:19.775
Da geht was. Und gerade halt auch so dieses was kommt und wie kriegen wir es

00:21:19.775 --> 00:21:22.315
jetzt schon hin, das ist eine super Sache. Also ich will nur sagen,

00:21:22.435 --> 00:21:23.475
macht mehr vom CSS-Caffee.

00:21:25.115 --> 00:21:28.495
Das sagt sich so leicht, ich weiß. Ja, genau. Ich muss jetzt erstmal,

00:21:28.575 --> 00:21:31.535
wir haben ja unser lokales Meetup hier wieder gestartet, da muss ich auch mal

00:21:31.535 --> 00:21:35.035
wieder, also wenn du mal irgendwann Lust hast, in Düsseldorf vorbeizuschauen. Welches?

00:21:35.395 --> 00:21:37.995
Wir haben quasi zwei lokale Meetups fusioniert.

00:21:38.395 --> 00:21:43.755
Das WebRocker NRW, was ich gemacht habe und das WebEngineering Düsseldorf,

00:21:43.875 --> 00:21:45.535
was der Andi gemacht hat.

00:21:46.435 --> 00:21:52.135
Und der Andi ist ja Teil des Engineering Kiosk Podcasts, wo wir beide auch schon zu Gast waren.

00:21:52.595 --> 00:22:01.575
Und der Wolfi, also der zweite da in dem Team, der macht schon lange so Meetups in Innsbruck.

00:22:02.706 --> 00:22:06.846
Unter dem Engineering-Kiosk, quasi unter der Flache. Franchise.

00:22:07.466 --> 00:22:11.046
Franchise, genau. Und der Andi hatte Bock, das auch in Düsseldorf zu machen.

00:22:11.366 --> 00:22:16.466
Und dann hat er mich gefragt und dachte ich, ja, warum nicht?

00:22:17.286 --> 00:22:21.466
Mache ich mit? Genau, und letztes Mal, wir sind zu dritt und wir haben aber

00:22:21.466 --> 00:22:24.566
gesagt, wir machen eine Kadenz von alle zwei Monate, damit es uns nicht überfordert.

00:22:24.666 --> 00:22:30.346
Und jeder kümmert sich dann eben um ein Meetup, sozusagen als Programmveranstalter.

00:22:30.526 --> 00:22:33.126
Und dann habe ich quasi ein Meetup alle sechs Monate. in der Backe.

00:22:33.686 --> 00:22:36.306
Hm, verstehe. Ja gut, das ist wahrscheinlich zu managen.

00:22:37.086 --> 00:22:40.586
Genau, aber wo wir gerade über so Tricks reinsprechen, ich weiß nicht,

00:22:40.626 --> 00:22:43.946
ich habe ja mein jährliches Blogpost geschrieben, hast du das gesehen?

00:22:44.786 --> 00:22:47.406
Oh, du musst öfter Sachen schreiben, dann besteht die Chance,

00:22:47.626 --> 00:22:49.986
dass ich das... Einmal im Jahr mache ich das ja nur. Ja.

00:22:51.586 --> 00:22:56.306
Ein CSS-Karussell? Ich habe gelesen, CSS-Karussell ist voll doof und riecht nach Lulu.

00:22:57.646 --> 00:23:00.306
Genau, wobei ich glaube, es ist ein bisschen besser geworden seitdem.

00:23:00.886 --> 00:23:03.066
Das ist jetzt auch schon mindestens ein Jahr her.

00:23:03.666 --> 00:23:07.706
Also ich meine, es war ja wirklich ein Griff ins Klo, nicht bis zum Schultergelenk,

00:23:07.786 --> 00:23:10.106
sondern bis in den Faulturm der Kläranlage, oder?

00:23:10.646 --> 00:23:15.466
Es war doch ein Accessibility-Desaster. Genau, es war ja so ein Google-Io-Driven-Development, würde ich sagen.

00:23:16.286 --> 00:23:22.146
Und das Problem ist, dass Accessibility, also quasi die darunter,

00:23:22.946 --> 00:23:29.366
verbauten ARIA, Roles und Attribute und States einfach kacke waren,

00:23:29.646 --> 00:23:32.126
nicht adäquat für dieses Pattern.

00:23:32.426 --> 00:23:36.626
Und jemand, der eben auf assistive Technologien angewiesen ist.

00:23:37.906 --> 00:23:39.186
Einfach eine Scheißerfahrung hatte.

00:23:39.906 --> 00:23:44.486
Ich finde, das Pattern, wie es jetzt ist, ist okay, aber ich bin jetzt auch

00:23:44.486 --> 00:23:47.246
nicht der maximale Accessibility-Guru.

00:23:48.311 --> 00:23:50.251
Genau, ich habe in den Blogpost auch geschrieben, das ist jetzt nichts,

00:23:50.331 --> 00:23:56.131
was man shippen sollte, aber da habe ich auch ein paar Bleeding-Edge-Sachen

00:23:56.131 --> 00:23:57.591
quasi zusammen kombiniert.

00:23:58.011 --> 00:24:02.871
Ja, ich sehe es gerade. Und die Idee vom Team-Switcher, also du bist ja ganz

00:24:02.871 --> 00:24:08.011
tief ins Geschichtsbuch gegangen und hast dann ja den CSS Zen-Garden quasi reaktiviert.

00:24:08.591 --> 00:24:12.911
Genau, aber das lag daran, also genau, Ursprung war eine Veranstaltung,

00:24:13.111 --> 00:24:19.251
die an zwei Tagen mit Abstand zwischen den Tagen einmal in, also in Amsterdam

00:24:19.251 --> 00:24:24.351
stattfindet, einmal im April und dann nochmal im Juni und genau,

00:24:24.411 --> 00:24:27.211
hier ist The Web We Want und da,

00:24:27.971 --> 00:24:31.031
genau, das ist dann so vielleicht so ein bisschen philosophisch,

00:24:31.351 --> 00:24:34.451
ein philosophisches Nachdenken, was wollen wir eigentlich für ein Web haben,

00:24:34.831 --> 00:24:37.791
also ist das Web, wie es heute ist, finden wir das noch gut oder fanden wir

00:24:37.791 --> 00:24:40.451
das, eigentlich nicht irgendwie witziger und netter vor 15 Jahren.

00:24:41.311 --> 00:24:46.511
Und was müssen wir dafür tun? Und die haben... Was müssen wir dafür tun?

00:24:46.811 --> 00:24:49.951
Und nachdenken, statt einfach die ganzen Patterns zu reproduzieren,

00:24:50.031 --> 00:24:52.951
die die ganzen Vollhonks einfach machen. Man kann ja ganz einfach sagen,

00:24:53.331 --> 00:24:54.491
Halt's Maul, was du da laberst.

00:24:54.611 --> 00:25:00.911
Ich mach jetzt das, was funktioniert und nicht irgendwie Next.js installieren oder so ein Blödsinn.

00:25:01.391 --> 00:25:03.411
Merkt man, dass ich vor kurzem Next.js installiert habe?

00:25:04.231 --> 00:25:10.051
Ja, irgendwer meinte, du hättest wieder React-Probleme getweetet oder getweetet

00:25:10.051 --> 00:25:11.671
oder sowas. Irgendwas sowas war.

00:25:11.951 --> 00:25:15.611
Ich habe nur irgendwie einen Artikel weiter verbreitet, der einfach nur sagte,

00:25:16.211 --> 00:25:18.511
React is insane und keiner redet drüber.

00:25:20.331 --> 00:25:23.231
Und dann... Hast du gesagt, stimmt.

00:25:24.051 --> 00:25:27.851
Ja, ich habe den einfach nur weiter verbreitet, wie das immer so mein Stil ist.

00:25:28.251 --> 00:25:30.911
Überschrift, Link mit Handzeige-Emoji davor.

00:25:32.971 --> 00:25:37.611
Aber sofort hatte ich die Menschenzeit voll mit so, Ja, der Typ hat ja gar keine Ahnung.

00:25:40.263 --> 00:25:42.383
Alles, was halt der Typ gemacht hat, ist halt Dinge zu sagen,

00:25:42.483 --> 00:25:46.463
die offensichtlich zutreffend sind und zu sagen, dass es beknackt.

00:25:47.743 --> 00:25:52.883
Das Disagreement kommt halt eben daher, dass halt vieles im React-Kontext als

00:25:52.883 --> 00:25:56.363
normal wahrgenommen wird, was man auch als beknackt verstehen könnte,

00:25:56.423 --> 00:25:57.723
wenn man in einer anderen Welt wohnen würde.

00:25:58.443 --> 00:26:04.443
Ja, du meinst also sowas wie, wir finden es alle normal, mit irgendwie Erdöl

00:26:04.443 --> 00:26:08.603
zu fördern, durch Pipelines zu transportieren und so weiter und das in Autos

00:26:08.603 --> 00:26:10.443
zu kippen und alle anderen würden sagen,

00:26:11.103 --> 00:26:13.403
also sagen wir mal, ein Außerirdischer würde sagen, das ist aber komisch,

00:26:13.443 --> 00:26:15.023
was ihr macht. Na gut, das ist ein Außerirdischer.

00:26:15.143 --> 00:26:17.623
Der zählt nicht, weil der ist nicht existent. Soweit wir das jetzt sagen können.

00:26:18.023 --> 00:26:22.643
Aber wir haben ja in unserer, bevor wir hier losgelegt haben und die Browserkisten

00:26:22.643 --> 00:26:24.723
sortiert haben, haben wir mal darüber geredet, wie das so ist.

00:26:25.043 --> 00:26:29.163
Straßen mit Autos vollparken versus schiebst in irgendwelche Tiefgaragen unter irgendwelchen Parks.

00:26:30.463 --> 00:26:33.363
Das ist ja wirklich was, wo man irgendwie sagen kann, es ist völlig normal,

00:26:33.463 --> 00:26:36.723
dass du deine Blechkiste einfach auf öffentlichen Raum stellst und dass du das

00:26:36.723 --> 00:26:39.403
halt eben mit der Blechkiste machst, aber mit deinem Kühlschrank nicht zum Beispiel.

00:26:40.043 --> 00:26:43.923
Aber ich denke, ich kriegst ja auch direkt eine Strafe, Aber es ist unmittelbar

00:26:43.923 --> 00:26:46.643
vorstellbar, dass man einfach sagt, ja, es in Tiefgaragen stellt,

00:26:46.743 --> 00:26:47.603
platzt du doch lieber dahin.

00:26:48.683 --> 00:26:52.043
Und so ist es halt eben mit React, man lebt halt da in einem Universum,

00:26:52.183 --> 00:26:55.263
wo das halt irgendwie völlig normal ist, Use-Effekt für eine vernünftige API zu halten.

00:26:55.883 --> 00:27:00.543
Und wenn dann halt eben in der Dokumentation drinsteht, irgendwie ein Buch,

00:27:00.543 --> 00:27:04.283
langes Essay, wann und warum man das nicht verwenden sollte und nur für drei

00:27:04.283 --> 00:27:06.183
ausgesuchte Use-Cases ist das irgendwie akzeptabel.

00:27:07.023 --> 00:27:08.783
Wenn man da halt in der Suppe drin schwimmt, denkt man sich,

00:27:08.843 --> 00:27:11.043
ja, läuft halt eben so. Genauso wie ich mir halt eben denke,

00:27:11.143 --> 00:27:12.263
ja, ich parke halt eben da drüben.

00:27:13.183 --> 00:27:15.363
Aber es ist halt eine andere Welt feststellbar. Und der Punkt,

00:27:15.403 --> 00:27:17.563
den man da eben machen muss, ist, man muss halt eben da mal gucken,

00:27:18.323 --> 00:27:19.983
ist diese andere Welt denn komplett aufwendbar?

00:27:21.417 --> 00:27:24.017
Solarpunk, wie in deinem Beispiel, oder tatsächlich irgendwie was,

00:27:24.057 --> 00:27:26.857
was unmittelbar implementierbar wäre, wo man sich unmittelbar reinversetzen kann.

00:27:27.497 --> 00:27:29.417
Das ist der Punkt mit dem React gewesen. Ich habe nichts gemacht.

00:27:29.497 --> 00:27:31.877
Ich habe einmal Next.js für eine Demo installiert vor irgendwie drei Tagen und

00:27:31.877 --> 00:27:33.337
hatte kein Problem damit. Okay.

00:27:33.917 --> 00:27:39.257
Ja, sonst, wenn du den Artikel hast, könntest du den hier noch in die Links reinpacken.

00:27:39.297 --> 00:27:42.897
Da muss ich ja Social Media aufmachen und mir überall anhören, wie doof alles ist.

00:27:43.397 --> 00:27:46.317
Ja, musst aber auch nicht. Genau. Man findet es auf deinem Account.

00:27:46.517 --> 00:27:51.437
Wir nehmen auf am, warte, hier, was ist heute? 19. März. Das heißt irgendwie so kurz davor, ne?

00:27:52.417 --> 00:27:57.297
Ja, ich poste im Moment so viel, ist schwierig. Ich tu das mal hier in die Links rein.

00:27:57.657 --> 00:28:02.337
Die Person hat auch ein Follow-up geschrieben, weil mir sagen sie alle,

00:28:02.777 --> 00:28:04.957
du hast keine Ahnung und diese Person hat keine Ahnung.

00:28:06.077 --> 00:28:08.897
Aber die Person hat es ja sogar hingekriegt, dass irgendwie so ein populärer

00:28:08.897 --> 00:28:13.677
Dev-YouTuber den Artikel im Prinzip gelesen hat und nach und nach immer mehr

00:28:13.677 --> 00:28:16.877
in einen Rant abgedriftet ist, von wegen, das stimmt ja alles nicht,

00:28:16.937 --> 00:28:19.877
das ist alles Blödsinn, blablabla. Leist der Theo? Ja.

00:28:21.537 --> 00:28:24.757
Ich persönlich konsumiere den nicht, aber das ist tatsächlich...

00:28:24.757 --> 00:28:26.477
Ja, also ab und zu gucke ich mir den schon an.

00:28:27.886 --> 00:28:33.406
Aber das ist natürlich schon so ein Next.js, React und was dazu gehört, Fanboy.

00:28:33.846 --> 00:28:38.766
Ja, der Punkt ist halt nicht, dass das schlecht ist oder irgendwie,

00:28:38.886 --> 00:28:41.826
dass in dem Artikel Dinge drinstehen würden, die nicht zutreffend sind,

00:28:42.086 --> 00:28:44.086
sondern nur, man kann es halt eben so oder so bewerten.

00:28:45.226 --> 00:28:48.946
Das ist das Ding. So, wir haben es jetzt, wir haben wir zwei,

00:28:49.146 --> 00:28:51.466
Shep. Wir haben es geschafft, über React zu reden.

00:28:52.086 --> 00:28:58.486
Ja, also wir machen jetzt auch so ein bisschen hier dem Kiki und Stefan Konkurrenz so ein bisschen.

00:28:58.706 --> 00:29:01.966
Ich versuche mit denen seit Monaten einen Termin auszumachen für eine neue Revision.

00:29:02.046 --> 00:29:03.106
Das wird niemals passieren.

00:29:03.906 --> 00:29:06.966
Es wird niemals eine neue TypeScript und React-Folge geben, einfach weil es

00:29:06.966 --> 00:29:10.586
völlig unmöglich ist, aus den beiden Personen irgendwie, also die zeitgleich,

00:29:11.386 --> 00:29:14.366
also du weißt doch, wie in Slack nach einer gewissen Zeit die Nachrichten gelöscht werden.

00:29:15.126 --> 00:29:18.786
Ich kriege es halt nicht, eine Frequenz hinzukriegen, wo die sagen,

00:29:18.886 --> 00:29:21.346
dann könnte ich, dass das passiert, bevor die Nachricht weg ist, weißt du?

00:29:21.466 --> 00:29:25.686
Ja, irgendwie etabliert sich das gerade, dass wir dieses ARIA-Glücksrad machen.

00:29:26.706 --> 00:29:31.806
Zumindest so lange, wie wir noch neue ARIA-Sachen bekommen aus unserem Zufallsgenerator.

00:29:32.346 --> 00:29:36.206
Irgendwann hört das ja auch auf. Und da ist ja unser Trick, immer schon den

00:29:36.206 --> 00:29:43.026
nächsten Termin abzumachen am Ende der Aufnahme der Folge. Dann wird das auch was.

00:29:44.126 --> 00:29:45.446
Weil wir sind zu fünft.

00:29:47.546 --> 00:29:53.126
Ja, aber ihr seid auch fünf Menschen, die mehr Kontrolle über ihren Terminkalender haben als wir drei.

00:29:54.666 --> 00:29:58.566
Also da wird nichts mehr, das kannst du vergessen, das kommt nicht mehr.

00:29:58.606 --> 00:30:00.846
Wir müssen jetzt also auch die React-Last schultern.

00:30:01.366 --> 00:30:07.046
Okay, aber wir sprachen ja gerade über CSS. Was wäre denn, wenn man CSS in React reinkriegen wollte?

00:30:07.166 --> 00:30:10.066
Wie würde man das tun? Netter Versuch, Herr Netzer, aber lassen Sie mal den

00:30:10.066 --> 00:30:11.706
Delling jetzt das mal richtig machen.

00:30:12.146 --> 00:30:15.926
Was man in React ja auch immer gerne benutzt hat, ist CSS und JavaScript.

00:30:17.126 --> 00:30:23.286
Hä? Aha. Ja, so. Wir haben beide Delling-Gene in uns. Ein bisschen, ne?

00:30:23.726 --> 00:30:25.866
Wir sind halt auch alt genug für den Scheiß. Pass auf.

00:30:26.761 --> 00:30:30.581
CSS-Module-Scripts geht jetzt auch in Firefox.

00:30:31.121 --> 00:30:36.061
Kann man also aus seinem ECMAScript-Modul CSS importieren, Import,

00:30:36.241 --> 00:30:42.801
Styles CSS, Width, Type, CSS, kriegt ein CSS-Style-Sheet daraus, bam, bam, bam, fertig.

00:30:43.041 --> 00:30:45.641
Super Kiste für komponentenbasiertes Arbeiten.

00:30:46.241 --> 00:30:50.021
Das war ja das Ding, wo Chrome früher Assert hatte, glaube ich.

00:30:50.241 --> 00:30:54.261
Und das dann quasi im Standard-Width wurde und Chrome beides unterstützt.

00:30:54.581 --> 00:30:58.301
Unterstützt T. Ich habe letztens getestet, sie haben das Azure tatsächlich aus

00:30:58.301 --> 00:31:00.241
Chrome rauskratzen können. Ja, super.

00:31:01.101 --> 00:31:07.341
Da wäre meine Frage nur gewesen, also bedeutet der Support von Chrome für diese

00:31:07.341 --> 00:31:11.821
Dinge, dass der automatisch alle, also mit allen Mime-Types,

00:31:11.901 --> 00:31:13.941
die man so üblicherweise kennt, auch umgehen kann?

00:31:14.041 --> 00:31:17.861
Oder ist das wieder eine andere Geschichte? Nein, das ist alles Special Cased.

00:31:18.541 --> 00:31:24.101
Ja. Okay. Also just gerade läuft hier auf Mastodon eine Diskussion.

00:31:24.861 --> 00:31:29.381
Lea Veru so von wegen, das ist ja alles Blödsinn, das ist alles gespecial-cased

00:31:29.381 --> 00:31:33.041
würde, weil pass auf, das Ding heißt ja Import-Attribute, dass du sagst,

00:31:33.101 --> 00:31:36.621
Import hast du nicht gesehen, from so und so, with, type und dann irgendwas.

00:31:37.041 --> 00:31:42.221
Und diese Types sind keine Minetypes, sondern das sind so Kisten wie halt JSON und CSS.

00:31:42.421 --> 00:31:48.201
Das sind so die, die aktuell supported sind. Also anstatt Text-slash-JSON oder

00:31:48.201 --> 00:31:52.041
Text- oder Application-slash-JSON und Text-slash-CSS.

00:31:52.421 --> 00:31:55.681
Naja, was ist ein Minetypes? Was ist ein Minetype?

00:31:57.062 --> 00:32:00.822
Das ist einfach eine Konvention, oder? Es ist im Prinzip ein Identifikator.

00:32:01.142 --> 00:32:03.762
Du kannst dieses Teil interpretieren als dieses oder jenes.

00:32:04.282 --> 00:32:07.822
Also JSON solltest du vielleicht parsen, CSS in CSS-Parser werfen und so weiter.

00:32:08.162 --> 00:32:11.222
Aber was du ja normalerweise als Entwickler, als Entwicklerin willst,

00:32:11.382 --> 00:32:14.202
ist, du importierst das Ding als CSS und erwartest dann eben auch,

00:32:14.322 --> 00:32:17.422
ein JavaScript-Objekt zu bekommen, das vielleicht kein String ist,

00:32:17.682 --> 00:32:18.422
sondern ein Style-Sheet.

00:32:19.062 --> 00:32:21.962
Du willst es als JSON importieren, du willst es vielleicht dann nicht auch manuell

00:32:21.962 --> 00:32:25.302
durch JSON-Pars schieben, sondern es sollte schon geparsst sein. Ja.

00:32:25.982 --> 00:32:30.122
So. Allein schon aus Performance-Gründen, weil Module, also ECMAScript-Module

00:32:30.122 --> 00:32:31.742
werden ja vom Browser dedupliziert und gecached.

00:32:31.982 --> 00:32:34.522
Und was gecached wird, sind nicht die Bytes, die importiert worden,

00:32:34.722 --> 00:32:37.382
sondern tatsächlich die evaluierten Ergebnisse.

00:32:37.622 --> 00:32:40.622
Sprich, wenn du jetzt eine JSON-File an sieben Stellen importierst,

00:32:40.682 --> 00:32:44.682
wird die einmal runtergeladen, einmal gepasst, aber du kannst die an sieben Stellen verwenden.

00:32:45.202 --> 00:32:48.342
Hm? Ja, und mit CSS genauso. Und das willst du ja eigentlich haben.

00:32:48.442 --> 00:32:51.462
Und sie argumentierte jetzt hier gerade auf Mastodon. Auch das werde ich wahrscheinlich

00:32:51.462 --> 00:32:52.402
hier in die Links schmeißen müssen.

00:32:53.802 --> 00:32:57.842
Ist ja ein bisschen Blödsinn, wenn man nicht zuerst die Low-Level-Varianten

00:32:57.842 --> 00:32:59.862
baut. Und die sind auch spezifiziert.

00:33:00.182 --> 00:33:01.922
Import with type text.

00:33:02.502 --> 00:33:05.142
Das heißt, du kriegst dann, wenn du das mit CSS zum Beispiel machen würdest,

00:33:05.402 --> 00:33:08.482
würdest du ein String CSS kriegen und nicht ein Style Sheet.

00:33:08.662 --> 00:33:10.702
Machst du einen JSON, kriegst du einen String, blablabla.

00:33:11.062 --> 00:33:14.922
Und eben falsch spezifiziert ist Import as bytes.

00:33:15.302 --> 00:33:16.942
Dass du halt ein Byte Array kriegst.

00:33:17.362 --> 00:33:19.562
Je nachdem, was du vorhast, kann das auch sehr nützlich sein.

00:33:20.562 --> 00:33:24.882
So. und sagt halt eben, warum dieses ganze Special Cases und nicht einfach die basalen Dinger.

00:33:25.022 --> 00:33:28.702
Und man kann es ja selbst halt zu, keine Ahnung, CSS machen.

00:33:30.042 --> 00:33:33.582
Aber da ist halt eben dieses Deduplizieren ganz, ganz zentral.

00:33:33.902 --> 00:33:36.942
Weil stell dir halt wirklich vor, du hast irgendwie, keine Ahnung,

00:33:37.282 --> 00:33:38.562
du baust einen Frontend mit Web Components.

00:33:38.962 --> 00:33:42.382
Und du machst halt eben dann deine Adopted Style Sheets und deinen Shadow Roots,

00:33:42.442 --> 00:33:43.862
da willst du über das CSS reinladen.

00:33:44.002 --> 00:33:48.702
Und eine häufige Frage, die mir gestellt wird, ist ja, ich habe einen so einen

00:33:48.702 --> 00:33:51.462
Style Sheet für meine ganze Webseite, ich nutze trotzdem Web-Components mit

00:33:51.462 --> 00:33:55.402
Shadow DOM, aber eigentlich will ich den styleisolierenden Aspekt von Shadow DOM gar nicht haben.

00:33:55.762 --> 00:34:00.182
Ich will die gleichen Klassen im Innenaufbau verwenden wie im Außenaufbau. Wie mache ich das?

00:34:01.393 --> 00:34:04.353
Was du halt jetzt machen kannst, wenn du dieses CSS einfach so importieren kannst

00:34:04.353 --> 00:34:08.933
und die Kosten für das Importieren und das Parsen eines Style Sheets fallen

00:34:08.933 --> 00:34:11.473
exakt einmal an für deine ganze Applikation.

00:34:11.913 --> 00:34:17.273
Und weil die Adopted Style Sheets sich ja auch Instanzen von CSS-Stylesheet-Objekten

00:34:17.273 --> 00:34:21.513
teilen, fällt ja auch der Memory-Verbrauch nur einmal an, spricht eigentlich nichts dagegen,

00:34:22.033 --> 00:34:25.513
in jede winzige Furzkomponente und sei es halt wirklich nur ein Button,

00:34:25.733 --> 00:34:28.393
alle Styles reinzutun, weil es halt eben...

00:34:29.949 --> 00:34:34.229
Es hat exakt null Grenzkosten, nachdem du zum ersten Mal diese Style-Sheets importierst.

00:34:34.529 --> 00:34:38.289
Genau, in deinem Beispiel hätte das dann der Browser quasi schon für die Rumpf-Seite

00:34:38.289 --> 00:34:41.189
getan und dann liegt das schon fertig da rum.

00:34:41.689 --> 00:34:44.649
Das ist jetzt die Frage, warum ich das auf die Agenda bringen wollte mit dir,

00:34:44.829 --> 00:34:45.569
Herrn Performance-Past.

00:34:46.369 --> 00:34:49.789
Ich würde ja normalerweise, wenn ich jetzt eine normale Webseite baue und ich

00:34:49.789 --> 00:34:52.649
würde halt so Islands of Reactivity machen, ich mache halt das meiste,

00:34:52.709 --> 00:34:55.909
was ich machen kann mit HTML, CSS und so ein bisschen jQuery-Style-JavaScript

00:34:55.909 --> 00:34:59.709
und die komplizierten Dinge packe ich in Web-Components mit komplexem Inneren erleben.

00:35:00.409 --> 00:35:05.149
Dann will ich ja irgendwie 50% Verteilung haben zwischen meine Realität findet

00:35:05.149 --> 00:35:07.349
in klassischen Webseiten statt mit HTML und CSS.

00:35:07.809 --> 00:35:10.209
Und auf der anderen Seite habe ich halt eben meine Web-Components.

00:35:11.069 --> 00:35:14.269
Und das Problem ist, normalerweise würde ich ja annehmen, der Browser ist darauf

00:35:14.269 --> 00:35:19.489
optimiert, CSS zu laden, indem ich das per Link-Element in die Webseite einbaue,

00:35:19.769 --> 00:35:21.169
meinen Style-Sheet da reinwerfe.

00:35:22.769 --> 00:35:29.149
Aber das ist ja außerhalb von meiner JavaScript-Welt. Das lädt ja nicht wie ECMAScript-Module.

00:35:29.209 --> 00:35:31.849
Die Ressourcen werden sich nicht in dem gleichen Sinne geteilt.

00:35:32.229 --> 00:35:34.449
Das heißt, was du jetzt gerade gesagt hast, würde tatsächlich nicht stattfinden.

00:35:34.809 --> 00:35:38.609
Ich hätte die Rumpfseite und ich hätte halt eben die JavaScript-Welt.

00:35:39.089 --> 00:35:41.589
Innerhalb der JavaScript-Welt werden sich die Ressourcen geteilt,

00:35:41.769 --> 00:35:46.689
aber die Rumpfseite existiert halt anders, solange ich die halt eben mit Link-Elementen

00:35:46.689 --> 00:35:49.369
befülle. Aber was wäre denn?

00:35:49.649 --> 00:35:59.789
Es gibt ja Link-REL-Prelod zum Beispiel und dann gibt es ja Link-REL-Module-Prelod in dem Fall. Ja.

00:36:01.049 --> 00:36:06.809
Weißt du, ob man das vielleicht auch für andersartige Module als JavaScript-Module benutzen könnte?

00:36:06.809 --> 00:36:10.169
Dann müsste man wahrscheinlich auch also eigentlich theoretisch misst,

00:36:10.229 --> 00:36:13.509
bräuchte man dann ja auch so ein Width-Attribut im HTML oder sowas also so wie

00:36:13.509 --> 00:36:19.629
S bei dem klassischen Preload auch immer S, Style Sheet S, Font,

00:36:21.089 --> 00:36:26.189
das wäre vielleicht wäre dann so ein Ausweg daraus also aber jetzt nur so aus meiner.

00:36:29.233 --> 00:36:32.493
Ja, also ich kann jetzt erstmal so aus der MDN-Seite das nicht erkennen,

00:36:32.693 --> 00:36:37.853
wie das funktioniert und wie das interagiert mit den CSS-Module-Scripts oder

00:36:37.853 --> 00:36:40.313
halt eben auch, du kannst ja auch JSON importieren, hast du nicht gesehen.

00:36:41.253 --> 00:36:45.333
Und der Spezifikationstext ist recht dicht, weil das ist jetzt so das Ding,

00:36:45.413 --> 00:36:46.393
auf dem ich halt so rumsitze.

00:36:47.484 --> 00:36:49.584
Wenn ich jetzt wirklich sage, ich baue eine normale Webseite,

00:36:50.264 --> 00:36:54.324
eine Link, Style Sheet, ganz normal, CSS-Pattern mit irgendwie BAM oder so,

00:36:54.784 --> 00:36:55.644
no-brainer, passt schon.

00:36:55.964 --> 00:36:58.144
Oder ich baue eine Single-Page-Application mit Web-Components,

00:36:58.364 --> 00:37:01.624
mache ich eben alles in JavaScript mit den CSS-Modules-Scripts, auch easy.

00:37:02.044 --> 00:37:05.264
Aber was ist, wenn ich halt eben diese Mischform hast? Was ich halt für das

00:37:05.264 --> 00:37:09.904
eigentlich Optimale halte, weil es gibt halt viel, was mega interaktiv ist und

00:37:09.904 --> 00:37:10.744
viel, was es halt nicht ist.

00:37:11.064 --> 00:37:14.244
Genau, das ist ja dieses Interactive-Island-Konzept. Also das,

00:37:14.284 --> 00:37:18.704
was ich ja auch bevorzuge, dass du, das meiste kann im Grunde statisch sein,

00:37:18.744 --> 00:37:24.904
dann gibt es eben so Inseln in diesem statischen Content, die dynamisch sind. So sieht es aus.

00:37:26.024 --> 00:37:29.404
Und dafür fehlt mir halt jetzt noch die performance-technisch optimalste Lösung.

00:37:30.544 --> 00:37:33.024
Und deswegen bringe ich das mal so auf die Idee und dieses Model-Preload.

00:37:33.984 --> 00:37:39.244
Ich kann es mir nochmal angucken mit diesem Link-REL-Preload-Module.

00:37:40.464 --> 00:37:44.124
Ob da was geplant ist dafür.

00:37:44.504 --> 00:37:49.704
Das wäre eigentlich die richtige Sache, wo das dann stattfinden müsste.

00:37:49.704 --> 00:37:54.884
Genau, also einerseits gucken, ob das funktioniert, ob ein Module-Preload mit

00:37:54.884 --> 00:37:59.884
einem Verweis auf eine CSS-Datei funktioniert in einem Browser,

00:38:00.044 --> 00:38:02.284
der halt diese CSS-Module-Scripts kann.

00:38:03.204 --> 00:38:06.324
Und wenn nicht, was es da sonst so an Mitigation-Strategien gibt,

00:38:06.524 --> 00:38:11.044
wie groß dann der Impact wäre. Also wie schlimm ist es denn jetzt wirklich,

00:38:11.164 --> 00:38:16.504
wenn ich hingehe und ich lade das Style Sheet für meine Webseite halt eben via JavaScript?

00:38:16.744 --> 00:38:19.064
Ich meine, Document hat auch ein Adopted Style Sheets Array.

00:38:19.404 --> 00:38:23.184
Also du meinst, du würdest dann sagen, okay, wenn ich schon diese Interactive

00:38:23.184 --> 00:38:29.624
Islands habe, dann wähle ich direkt den Weg quasi nur über Module Imports,

00:38:29.724 --> 00:38:31.204
also auch auf meiner Rumpfseite.

00:38:32.208 --> 00:38:35.968
Und dann, genau, dann macht der Browser dieses Deduplizieren,

00:38:36.668 --> 00:38:40.648
genau, aber es könnte, aber, genau, also ich glaube, die Konsequenz ist tatsächlich,

00:38:41.608 --> 00:38:47.188
dass, ich glaube, dass das Style Sheet einfach dann später da ist auf deiner

00:38:47.188 --> 00:38:48.708
Home-Seite trotzdem. streamen.

00:38:49.008 --> 00:38:52.688
Genau, es ist davon auszugehen, dass es später ist, aber wie viel später?

00:38:53.208 --> 00:38:57.068
Ja, ne? Weil du könntest ja theoretisch in den Head als allererstes direkt nach

00:38:57.068 --> 00:39:00.488
dem Car-Set oder was auch immer, kannst du ja einen Script-Tag machen,

00:39:00.668 --> 00:39:03.088
also ein synchroles Script-Tag, was ich ja vor kurzem erst gelernt habe.

00:39:03.408 --> 00:39:06.628
Man kann ja aus einem synchronen Script, was kein Modul ist,

00:39:06.828 --> 00:39:11.448
trotzdem das Import-Keyword in seiner Funktionssyntax nutzen.

00:39:12.168 --> 00:39:15.348
Das heißt, du könntest, bevor der HTML-Parser mit dem Head fertig ist,

00:39:15.788 --> 00:39:18.828
schon anfangen, dieses CSS-Modul zu laden.

00:39:19.348 --> 00:39:22.348
Da kriegst du ein Promise raus, machst du Then, kriegst den Style Sheet,

00:39:22.768 --> 00:39:25.628
Document Adopted Style Sheets, Push und dann ist das da drin.

00:39:26.888 --> 00:39:35.708
Also du kannst aus einem Nicht-Modul kannst du Imports ausführen oder was?

00:39:35.848 --> 00:39:39.188
Genau, du würdest sozusagen den Prozess des CSS-Ladens starten,

00:39:39.348 --> 00:39:43.648
während der HTML-Parser noch damit beschäftigt ist, dein Dokument zu verarbeiten.

00:39:43.648 --> 00:39:45.628
Ja, man wusste nicht, dass das geht.

00:39:45.748 --> 00:39:49.168
Ich dachte, Imports kannst du aus Modulen heraus machen.

00:39:49.448 --> 00:39:52.728
Das dachte ich auch, bis ich einfach mal so durch die HTML-Spezifikationen gescrollt

00:39:52.728 --> 00:39:55.388
habe, weil ich an der Aldi-Kasse stand und die Schlange war lang.

00:39:55.468 --> 00:39:56.508
Klar, was soll man da machen?

00:39:57.368 --> 00:39:59.888
Alle halten mich für irre, ich finde das super. Und dann finde ich halt ein

00:39:59.888 --> 00:40:06.808
Beispiel, wo die so was machen wie A-On-Click, also so ein Inline-Event-Händler-Gedings.

00:40:07.028 --> 00:40:11.428
Und dann steht da drin, Import hast du nicht gesehen, so ein Modul. Und ich so, wait, what?

00:40:12.508 --> 00:40:16.288
Und dachte erst, das ist irgendwie spezielles Handling irgendwie im On-Click-Händler,

00:40:16.548 --> 00:40:19.128
dass das irgendwie als Modul ausgeführt wird, wenn der Mond richtig steht.

00:40:19.308 --> 00:40:23.088
Aber die Wahrheit ist, ich kann aus einem synchron blockierenden Browser-Script

00:40:23.088 --> 00:40:24.668
Module laden über diesen Umweg.

00:40:25.529 --> 00:40:29.769
Und, ja, okay. Ist das dann dieses, ist das im Grunde so ein Dynamic Import?

00:40:30.209 --> 00:40:32.509
Es ist der Dynamic Import, genau. Du kannst aus einem Nicht-Modul,

00:40:32.649 --> 00:40:35.709
da kannst du keinen statischen Modul-Import machen, aber einen dynamischen Modul-Import.

00:40:36.989 --> 00:40:39.969
Und ich dachte halt eben, damit kommst du ja, das Problem ist ja wirklich,

00:40:40.289 --> 00:40:45.689
wenn du mit JavaScript deine CSS lädst, reißt du dich halt in der Startaufstellung

00:40:45.689 --> 00:40:47.549
beim Formel-1-Rennen erstmal ganz hinten an.

00:40:48.009 --> 00:40:52.529
Ja, genau. Das ist wie, wenn der Motor abgewürgt würde erstmal kurz.

00:40:52.789 --> 00:40:53.829
Du fängst einfach ganz hinten an.

00:40:55.089 --> 00:40:59.309
Also beim Start hast du erstmal verloren, weil Link-Element ist halt am schnellsten,

00:40:59.369 --> 00:41:04.409
der HTML-Parser checkt es sofort und du hast ja auch diese hier Prescanner und

00:41:04.409 --> 00:41:06.749
Gedönse, die machen ja im Prinzip ein Racklacks auf dein Dokument und sagen,

00:41:06.929 --> 00:41:08.509
das sieht aus wie ein Style-Sheet, ich fang schon mal an.

00:41:10.117 --> 00:41:12.757
Und darum geht es halt. Und da wäre vielleicht wirklich so ein Modul-Preload,

00:41:13.237 --> 00:41:15.697
genau das Ding, was man halt wirklich macht, um den Abstand,

00:41:16.397 --> 00:41:18.757
wie groß der auch immer ist, das müsste man halt mal quantifizieren,

00:41:19.097 --> 00:41:21.157
so weit zu reduzieren, dass man am Ende kein Problem mehr hat.

00:41:21.937 --> 00:41:24.357
Der Code, den man schreibt, sieht dann halt eben komplett Banane aus,

00:41:24.417 --> 00:41:27.397
weil man halt irgendwie sagt, ich habe halt hier so ein Islands of Reactivity-Ding

00:41:27.397 --> 00:41:29.517
und meine Hälfte, die Hälfte von meinem Content ist statisch,

00:41:29.697 --> 00:41:32.297
aber jedes CSS kommt ausschließlich über JavaScript da rein.

00:41:32.457 --> 00:41:35.557
Aber man kann es sich ja auf die Weise dann begründen, weil ansonsten zahlt

00:41:35.557 --> 00:41:40.517
man halt eine CSS. dann quasi nach hinten raus, überholst du dir dann wieder die anderen sozusagen.

00:41:41.037 --> 00:41:43.857
Genau, weil das Ding ist halt, diese beiden Style-Sheet-Welten sind halt komplett

00:41:43.857 --> 00:41:44.837
inkompatibel zueinander.

00:41:45.097 --> 00:41:48.917
Ein normaler Style-Sheet, der mit normalen Link-Elementen geladen wird,

00:41:49.237 --> 00:41:51.857
den kannst du nicht in den Top-Lit-Style-Sheets stecken. Ja.

00:41:52.497 --> 00:41:57.457
Weil das halt eben Old-School-CSS ist, da drin kannst du auch so in CSS-Add-Imports

00:41:57.457 --> 00:42:01.857
haben, die ja bei CSS-Modul-Script nicht erlaubt sind, weil die halt einfach

00:42:01.857 --> 00:42:02.997
fundamental anders funktionieren.

00:42:03.557 --> 00:42:06.497
Das heißt, das sind zwei Parallelwelten, so ähnlich wie hat Module und Scripts eigentlich sind.

00:42:07.937 --> 00:42:10.797
Abzüglich halt eben dynamischer Import aus dem Script heraus.

00:42:11.917 --> 00:42:15.197
Und das wäre halt mal ganz spannend, weil das würde halt dazu führen, dass wir hier,

00:42:16.357 --> 00:42:20.197
möglicherweise mit unserem präferierten Ansatz, Hälfte startet, Hälfte nicht,

00:42:20.657 --> 00:42:24.337
dann am Ende nicht nur deshalb gewinnen, weil wir halt per Default schneller

00:42:24.337 --> 00:42:27.577
sind als die Sina-Page-Applications, die halt eben das Rad komplett neu erfinden

00:42:27.577 --> 00:42:31.137
müssen, aber möglicherweise können wir uns 50% des Rades neu erfinden,

00:42:31.317 --> 00:42:33.357
auch wenn irgendwie 10% der Kosten runterkochen.

00:42:33.517 --> 00:42:37.377
Und dann sind wir so flott wie eine hypothetische JQuery-Spaghetti-Anwendung,

00:42:37.437 --> 00:42:40.717
die aus irgendwelchen magischen Gründen wartbar ist und alles toll macht,

00:42:41.017 --> 00:42:43.837
aber halt wirklich maximalen Geschwindigkeitsvorteil bietet.

00:42:44.057 --> 00:42:46.777
Und weißt du, warum das alles komplett für den Arsch ist, was wir jetzt gerade besprochen haben?

00:42:47.457 --> 00:42:49.457
Ich weiß es. Du weißt es, ne?

00:42:50.417 --> 00:42:53.737
Safari kann das nämlich nicht. Ja. Ah, es ist das Problem.

00:42:56.110 --> 00:43:00.030
Genau, also es ist jetzt neu in Firefox, kann das ja schon, haben wir eben darüber

00:43:00.030 --> 00:43:04.350
gesprochen, und Safari supportet das noch nicht.

00:43:05.790 --> 00:43:09.090
Die sind ja immer sehr schweigsam, was ihre Pläne für die Zukunft angeht.

00:43:09.650 --> 00:43:13.070
Genau, ich will nur sagen, ich bereite mich mal trotzdem auf eine Zukunft vor, wo das geht.

00:43:13.750 --> 00:43:17.050
Das heißt, für meine Islands of Reactivity mache ich dann sowas wie,

00:43:17.370 --> 00:43:21.750
ich habe da Importstatements drin stehen, die laden meinen CSS und dann nutze

00:43:21.750 --> 00:43:24.810
ich halt irgendwelche Bundler-Features, damit das als String importiert wird.

00:43:25.490 --> 00:43:29.450
Ich wandle es manuell in den Style Sheet um, stecke ich in die ganzen Adopted Rules.

00:43:30.894 --> 00:43:34.394
Dann zahle ich nicht extra mit Requests, sondern nur mein JavaScript wird halt

00:43:34.394 --> 00:43:37.854
größer, weil das CSS quasi in den Byte-Payloads zweimal drin steht.

00:43:38.674 --> 00:43:42.934
Was jetzt nicht toll ist, aber auch keine Katastrophe ist, wenn das CSS einigermaßen kompakt ist.

00:43:43.334 --> 00:43:47.474
Und wenn dann eines Tages Safari das kann, schmeiße ich halt den Bundler-Aspekt

00:43:47.474 --> 00:43:51.074
davon raus und bin dann schneller geworden, indem ich quasi nichts tue.

00:43:51.574 --> 00:43:55.414
Das ist so meine Vorbereitung auf die neue Welt. Das ist ein super Stichwort um eins.

00:43:55.874 --> 00:43:59.554
Wir haben noch so ein paar Rapid-Fire-Themen ganz hinten. Also Safari unterstützt

00:43:59.554 --> 00:44:05.294
jetzt auch Z-Standard-Kompression und vielleicht kann der das ja dann in deinem Stream,

00:44:05.634 --> 00:44:12.274
du nutzt ja mindestens HTTP 2, vielleicht sogar 3 und vielleicht lässt sich

00:44:12.274 --> 00:44:18.654
da mit Z-Standard-Kompression sozusagen die Duplizierung vermindern.

00:44:18.654 --> 00:44:21.774
Ja, aber das Problem ist ja, Safari unterstützt Z-Standard.

00:44:22.554 --> 00:44:26.574
Was machen die anderen Browser? Also Chrome unterstützt das auf jeden Fall auch. Ah, okay.

00:44:28.534 --> 00:44:31.454
Chrome kann ja auch noch, ich weiß nicht, bei den anderen Browsern weiß ich

00:44:31.454 --> 00:44:33.614
nicht genau, die können ja auch diese Dictionary-Kompression.

00:44:35.754 --> 00:44:39.874
Wo du quasi ein bestimmtes Dokument referenzieren kannst als Dictionary und

00:44:39.874 --> 00:44:43.634
dann quasi alles wegkomprimiert wird, was eh schon in Dictionary drinsteht.

00:44:44.334 --> 00:44:47.174
Genau, bei Firefox weiß ich nicht, wie das mit Z-Standard aussieht.

00:44:47.174 --> 00:44:52.894
Aber es war jetzt nur so eine Sidenote, also Safari 26.3, der jetzt im Februar

00:44:52.894 --> 00:44:58.794
released wurde, der hat auch diesen Z-Standard-Kompressionsalgorithmus in Meta erfunden hat.

00:44:59.694 --> 00:45:03.694
Und der sehr, sehr, sehr, sehr schnell komprimiert und auch ziemlich effizient.

00:45:06.145 --> 00:45:08.225
Ja, ist erstaunlich, was man so kompressionstechnisch hinkriegt,

00:45:08.285 --> 00:45:09.585
wenn man mal die 80er hinter sich lässt.

00:45:10.765 --> 00:45:14.085
Haben wir ja auch gerade nicht in der Themenliste drin, aber hier so Compression-Streams.

00:45:14.445 --> 00:45:15.725
Firefox kann da jetzt Brotli drin.

00:45:17.005 --> 00:45:19.485
Kann sonst kein Browser, deswegen ist das von franklicher Nützlichkeit.

00:45:20.505 --> 00:45:22.625
Aber weißt du, was das halt eben auch echt bräuchte, diese API?

00:45:22.765 --> 00:45:24.005
Die bräuchte halt eben auch Dictionaries.

00:45:25.245 --> 00:45:26.405
Ja, ach, den kommen bestimmt.

00:45:27.885 --> 00:45:31.325
Es ist gar nicht mal so einfach, das zu sagen, weil die API ist ja dergestalt,

00:45:31.385 --> 00:45:33.885
dass es mehr oder minder so funktioniert.

00:45:34.005 --> 00:45:37.325
Du sagst halt, ich hätte gerne Compression oder Decompression-Stream für Algorithmus

00:45:37.325 --> 00:45:38.705
identifiziert durch String.

00:45:39.505 --> 00:45:44.065
Und du würdest ja wahrscheinlich pro Algorithmus unterschiedliche Optionen mitgeben

00:45:44.065 --> 00:45:47.685
können, weil nicht notwendigerweise kann ja jeder Algorithmus Dictionaries.

00:45:47.885 --> 00:45:50.525
Also einfach zu sagen, es existiert eine Option namens Dictionary,

00:45:50.705 --> 00:45:53.425
wird wohl nicht hinhauen, sondern du müsstest halt eben ein Back of Options

00:45:53.425 --> 00:45:54.625
pro Algorithmus definieren.

00:45:55.945 --> 00:46:00.465
Und das ist alles ziemlich knifflig, weil wird das alles unterstützt?

00:46:00.545 --> 00:46:03.425
In den Browsern ist das da immer so eingebaut, dass die wirklich alles unterstützen.

00:46:04.365 --> 00:46:08.905
Das ist alles sehr, sehr, äh, habe ich, äh. Aber was mit so einem Dictionary

00:46:08.905 --> 00:46:13.185
alles ging, meine Güte, ich komprimiere mit dem D-Zeug ständig JSON-Objekte.

00:46:13.665 --> 00:46:19.645
Das heißt, von 90% aller Strings weiß ich, dass die da drin vorkommen im Payload.

00:46:20.105 --> 00:46:22.245
Dafür ein Dictionary anzugeben, wäre halt einfach mal der Hammer.

00:46:23.205 --> 00:46:26.665
Ja, aber das kannst du ja in deinem Webserver, du baust ja quasi,

00:46:26.805 --> 00:46:29.085
das Dictionary kannst du ja selber erzeugen.

00:46:29.605 --> 00:46:33.405
Du könntest ja ein JSON, quasi einen Muster-JSON haben, das du das Dictionary

00:46:33.405 --> 00:46:37.045
ablegst und dann kannst du es ja per zum Beispiel per HTTP-Header kannst du

00:46:37.045 --> 00:46:41.245
dann den kompatiblen Browser sagen, so hey, hier wäre ein Dictionary, wenn du möchtest.

00:46:41.965 --> 00:46:44.965
Ja, ja, aber nicht in den Compression-Streams, weil die haben ja nichts mit

00:46:44.965 --> 00:46:47.305
HTTP-Headern zu tun. Ist ja bloß eine JavaScript-Adeale. Ja,

00:46:47.325 --> 00:46:48.245
nee, genau, da gibt es nicht.

00:46:48.605 --> 00:46:51.725
Und das ist halt das Ding. Ich will halt so gerne JSON-Objekt rein,

00:46:52.005 --> 00:46:55.705
gib mir Byte-Array, Base64-URL draus, in die URL reinschreiben,

00:46:55.825 --> 00:46:56.845
parzack, brauche ich kein Backend.

00:46:56.985 --> 00:46:59.085
Hast du instantan share-barer Links. Ja.

00:47:01.345 --> 00:47:02.385
Allein haben wir halt noch.

00:47:04.554 --> 00:47:07.154
Jetzt haben wir so viele tolle neue Sachen, aber es fehlt immer noch so viel.

00:47:07.614 --> 00:47:12.034
Tja, ist ja immer so. Haben wir denn noch weitere tolle neue Sachen, Shep? Ja, haben wir.

00:47:12.414 --> 00:47:15.574
Oh, das ist super, Shep. Kannst du mir mehr davon erzählen? Hup, hup.

00:47:17.154 --> 00:47:20.494
Genau, wir sind da letztens schon mal drüber gestolpert, weil ich glaube,

00:47:20.574 --> 00:47:26.794
der Safari unterstützte das in einem Nightly-Bild oder sowas in der Art.

00:47:27.634 --> 00:47:31.894
Genau. Also alle Browsers unterstützen mittlerweile jetzt, und Firefox ist der

00:47:31.894 --> 00:47:34.174
letzte, der dazugekommen ist, die Navigation-API.

00:47:36.294 --> 00:47:41.194
Die im Grunde die History-API ablöst und die so Patterns ermöglicht,

00:47:41.374 --> 00:47:46.814
dass man eben auf ein Navigation-Event horcht und das Event dann abfangen und

00:47:46.814 --> 00:47:49.334
canceln kann, so ein bisschen wie das beim Service-Worker der Fall ist.

00:47:49.334 --> 00:47:54.054
Also das ist im Prinzip eine primitive, die man nehmen kann,

00:47:54.294 --> 00:47:57.894
zusammen mit dem URL-Pattern-Matching, der URL-Pattern-Matching-API,

00:47:58.174 --> 00:48:05.254
um einen kleinen-zeitigen Router zu bauen, wie wir sie eben aus SPAs kennen.

00:48:05.734 --> 00:48:10.354
Ist im Prinzip das, was die History-API eigentlich hätte werden sollen. Ja.

00:48:11.634 --> 00:48:14.794
History API 2.0, da ist ja alles dran irgendwie so ein bisschen seltsam und

00:48:14.794 --> 00:48:18.134
passt nicht so richtig gut und will man ohne Abstraktionslayer nicht anfassen

00:48:18.134 --> 00:48:22.134
und im Prinzip sind das hier die Lessons learned in eine JavaScript API gegossen.

00:48:22.994 --> 00:48:29.874
Ja, genau. Und ein Grund, warum das vielleicht jetzt in Firefox gelandet ist,

00:48:30.174 --> 00:48:33.294
könnte sein, dass es Teil der Interop 2026.

00:48:35.354 --> 00:48:39.894
Des Agreements zwischen den Browsern ist, dass das eben eine Technologie ist,

00:48:39.974 --> 00:48:44.074
die sie im Laufe dieses Jahres eben alle shippen möchten.

00:48:45.875 --> 00:48:48.275
Aber wahrscheinlich ist da schon Vorarbeit geleistet worden,

00:48:48.395 --> 00:48:52.695
weil das Jahr ist ja noch jung und das hätten die auch noch auf die längere Bank schieben können.

00:48:53.155 --> 00:48:56.675
Ja, ich meine, es sind ja noch nicht alle Features in allen Browsern drin.

00:48:56.835 --> 00:49:00.175
Also ich meine, so grundsätzlich ist das meiste da drin, aber da hängen ja auch

00:49:00.175 --> 00:49:03.715
noch so Interaktionen mit View Transitions dran.

00:49:03.875 --> 00:49:07.415
Da hat jetzt nicht jeder Browser jeder API, aber zu 99 Prozent ist es drin.

00:49:08.355 --> 00:49:11.035
Also bei View Transitions kommt ja auch ständig immer noch was,

00:49:11.115 --> 00:49:14.235
also auch in Firefox hatten wir gesehen, aber das sind dann eben,

00:49:14.435 --> 00:49:19.775
das ist halt so Feintuning und ich glaube Multipage oder Cross-Document View

00:49:19.775 --> 00:49:21.995
Transitions, die fehlen noch in,

00:49:22.775 --> 00:49:24.915
also ich glaube, die kann der Chrome bisher nur, oder?

00:49:26.595 --> 00:49:30.415
Ich meine, da auch letztens was gelesen zu haben, warte mal,

00:49:31.015 --> 00:49:34.655
hold my beer, scroll, scroll, scroll, im Firefox ist es nicht drin,

00:49:34.735 --> 00:49:36.955
aber da ist ein Sternchen, was sagt der Bug Report. Warte mal.

00:49:39.115 --> 00:49:43.275
Implement CSS View Transitions 2. Es ist noch open. Scroll, scroll.

00:49:44.555 --> 00:49:47.975
Okay, da tut sich nicht wirklich viel.

00:49:49.335 --> 00:49:54.435
Genau, ich glaube, das ist, lass mal schauen, also View Transitions.

00:49:55.255 --> 00:49:59.275
Wir sind auch in Interop 2026 drin. Ah ja.

00:50:00.235 --> 00:50:03.415
Genau, da sind auch die Cross-Document View Transitions mit,

00:50:03.595 --> 00:50:08.195
also Teil des Ganzen. Ja, dann wird es das gewesen sein, was ich gelesen habe.

00:50:09.835 --> 00:50:12.775
Okay, aber dann kommt es ja zumindest noch dieses Jahr. Das heißt,

00:50:12.875 --> 00:50:14.775
wenn wir alle keinen Mist bauen, kriegen wir noch was davon mit.

00:50:17.509 --> 00:50:23.169
Genau. Das wäre auch dann zur Navigation API erstmal alles, oder? Ich denke.

00:50:24.729 --> 00:50:27.649
Das Problem ist halt, es ist dringend notwendig gewesen und jetzt,

00:50:27.729 --> 00:50:30.309
wo es da ist, denkt man sich halt eben, es ist wie eine neue U-Bahn-Linie.

00:50:30.629 --> 00:50:33.629
Mensch, warum gab es die nicht schon immer? Okay, ich fahre jetzt damit.

00:50:34.469 --> 00:50:37.749
Und schon ist es halt irgendwie normal und du guckst die ganze Zeit nur auf

00:50:37.749 --> 00:50:39.989
dein Telefon und so sollte es sein.

00:50:40.049 --> 00:50:42.589
Das wird irgendwie in die Frameworks eingebaut werden. Keiner kriegt mit,

00:50:42.629 --> 00:50:44.129
dass es existiert und alles ist gut.

00:50:45.469 --> 00:50:49.849
Genau, und die Frameworks können sich in Zukunft vielleicht sparen,

00:50:50.109 --> 00:50:56.389
Link-Elemente für diese Dinge bereitzustellen.

00:50:57.909 --> 00:51:00.789
Da hängt mittlerweile ja dann immer an den Dingen so viel mehr noch dran.

00:51:00.909 --> 00:51:03.189
Ja, wahrscheinlich wird es die immer noch geben, aber nicht,

00:51:03.269 --> 00:51:09.329
weil sie noch notwendig sind, sondern einfach damit quasi man den alten Code weiter benutzen kann.

00:51:09.729 --> 00:51:12.549
Man darf ja bei Frameworks nicht vergessen, dass es ja immer ein Zusammenkommen

00:51:12.549 --> 00:51:14.609
aus Code, den man benutzt und schreibt.

00:51:15.889 --> 00:51:17.529
Und Konventionen, so werden Sachen gemacht.

00:51:18.643 --> 00:51:23.603
Und nur weil jetzt halt der Code weniger Volumen hat, weniger nötig ist,

00:51:23.863 --> 00:51:27.003
ist trotzdem immer noch da die Konvention, die man sich dazu ausgedacht hat.

00:51:27.163 --> 00:51:30.843
Also werden die da weitestgehend von unbeeinflusst bleiben, ist meine Hypothese.

00:51:31.323 --> 00:51:35.923
Ja, genau. Aber zumindest von jetzt an fällt der Grund weg, warum es das gibt.

00:51:36.143 --> 00:51:38.663
Ja, und wenn man halt so seltsame Gestalten sind wie wir zwei,

00:51:38.923 --> 00:51:41.363
die sich eh alles selber bauen, haben wir es leichter.

00:51:42.563 --> 00:51:44.203
History API ist echt der Endgegner.

00:51:46.303 --> 00:51:50.903
Das stimmt. So, dann haben wir Safari,

00:51:52.603 --> 00:51:57.103
aber eben Technology Preview, heißt aber, also es kommt bald,

00:51:57.483 --> 00:52:01.603
hat Customizable Select per Default aktiviert.

00:52:02.243 --> 00:52:07.643
Also es wird schon hinter Flag, aber bald kommt es dann auch tatsächlich aktiviert.

00:52:08.603 --> 00:52:11.843
Und genau, bisher wird das, glaube ich, nur in Chrome unterstützt,

00:52:11.923 --> 00:52:13.783
aber Apple ist da auch generell bei,

00:52:14.903 --> 00:52:19.423
also nicht nur bei customizable select, sondern die haben da auch die Führung,

00:52:19.563 --> 00:52:21.863
was diese Spezifikation angeht,

00:52:22.063 --> 00:52:28.403
die alle Formularelemente betrifft, übernommen und pushen da richtig hart und

00:52:28.403 --> 00:52:31.703
genau der erste Schritt sind eben dann die customizable selects.

00:52:32.542 --> 00:52:39.102
Und folgen werden eben dann nach und nach alle anderen Input-Typen.

00:52:40.042 --> 00:52:45.242
Und genau, das Customizable Select kann man ja mit Appearance-Base-Select,

00:52:46.002 --> 00:52:49.042
da kann man dann sozusagen Opt-Innen rein tappen.

00:52:49.742 --> 00:52:54.482
Und das wird es wahrscheinlich dann für die verschiedenen Inputs in der Form

00:52:54.482 --> 00:52:59.862
dann geben, nach und nach, also, keine Ahnung, Base-Date-Picker oder Date-Time oder wie auch immer.

00:52:59.862 --> 00:53:06.662
Und Base, was gibt's noch, was irgendwie ätzend ist, Base Checkbox meinetwegen. Oh ja.

00:53:07.462 --> 00:53:12.902
Genau, und dann das Ziel ist eben am Ende nur noch ein Appearance-Doppelpunkt

00:53:12.902 --> 00:53:21.202
Base, also quasi so ein Shorthand zu haben, der dann, egal welche Art Input-Elemente es ist.

00:53:22.082 --> 00:53:31.922
Alle auf dieses Base oder dieses andere Modell umstellt Und die Base-Appearance ist ja so,

00:53:32.422 --> 00:53:41.462
dass du quasi sowas wie so ein relativ funktionales und okay aussehendes,

00:53:41.522 --> 00:53:48.422
aber total neutrales Input-Element bekommst und du einfach sehr viel mehr Handles bekommst,

00:53:48.822 --> 00:53:52.502
wo du quasi mit deinem CSS dann reingreifen kannst und du hast halt einfach

00:53:52.502 --> 00:53:54.962
absolute Gestaltungsfreiheit. Ja.

00:53:55.762 --> 00:53:58.542
Ich habe mich damit jetzt noch nicht im Detail befasst, aber vielleicht kannst du mir das sagen.

00:53:59.302 --> 00:54:03.002
Wie wirkt sich denn jetzt so ein Customized Select auf meinem Mobiltelefon aus?

00:54:03.242 --> 00:54:06.122
Da bin ich es jetzt ja gewohnt, ich drücke da rein und dann kriege ich halt

00:54:06.122 --> 00:54:11.342
so das Betriebssystem eingebaute Multi-Select-Ding vorgesetzt, das ich da habe.

00:54:12.962 --> 00:54:17.082
Was ja irgendwie Sinn macht, weil ich ja ganz andere Zeit-Constraints habe.

00:54:17.302 --> 00:54:19.342
Oder ein Date-Picker ist ja genau das Gleiche.

00:54:19.722 --> 00:54:23.362
Also so ein Input-Type Date-Time auf meinem Mobile Firefox zum Beispiel ist

00:54:23.362 --> 00:54:26.862
ja tatsächlich nicht ein Wichert, sondern das ist ein zweistufiger Prozess,

00:54:26.942 --> 00:54:31.402
wo ich erst den Tag auswähle und hinterher eine Zeiteingabemaske bekomme.

00:54:32.669 --> 00:54:36.929
Wie malte man sich das denn aus? Und ich meine, ist jetzt ein unglücklicher

00:54:36.929 --> 00:54:40.589
Zeitpunkt der Aufnahme, weil der Herr Zuckerberg jetzt ja gerade das Metaverse

00:54:40.589 --> 00:54:42.549
in den Orkus gesteckt hat.

00:54:43.029 --> 00:54:45.169
Du meinst, wie das auf so einer Brille läuft?

00:54:45.669 --> 00:54:49.649
Ja, das ist ja das Ding. Keiner hat ja hervorgesehen, dass das iPhone um die

00:54:49.649 --> 00:54:53.189
Ecke kommt und trotzdem war ein Formular mit dem iPhone ausfüllen kein Problem,

00:54:53.549 --> 00:54:59.929
weil die Webplattform halt so agnostisch war und so allgemein Input Requirements formuliert hat.

00:54:59.929 --> 00:55:04.109
Und die Spezifikationen sagen ja immer nur, ein Input-Type-Date ist ein Eingabefeld

00:55:04.109 --> 00:55:05.569
für Datums und Zeitangaben.

00:55:05.729 --> 00:55:10.569
Und jeder Browser kann dann zum Glück und oder leider hingehen und das Element

00:55:10.569 --> 00:55:13.049
so gestalten, wie das für richtig hält.

00:55:13.889 --> 00:55:18.349
Genau. Ja, da ist alles für und wieder. Ich versuche es gerade.

00:55:18.449 --> 00:55:21.689
Ich glaube, dass du, naja, hier haben wir das.

00:55:23.089 --> 00:55:27.129
Ich glaube, dass das auch auf Mobilgeräten funktioniert. Was heißt funktioniert?

00:55:28.449 --> 00:55:32.549
Also auf Mobilgeräten bekommst du nicht, genau, ist auch so,

00:55:32.649 --> 00:55:35.909
bekommst du nicht mehr das Betriebssystem-Interface.

00:55:36.929 --> 00:55:39.969
Okay, sondern dann muss ich halt eben mit meinem

00:55:39.969 --> 00:55:44.249
winzigen Bildschirm-Supermarkt-Android-Telefon das ertragen, was Mr.

00:55:44.429 --> 00:55:50.789
Riesen-iPhone in seiner Web-Klitsche von Cloud Code sich hat zusammenfrickeln lassen.

00:55:50.869 --> 00:55:54.029
Genau, aber der kann ja mit Anchor-Positioning auch viele Dinge machen.

00:55:54.409 --> 00:55:56.149
Das glaube ich erst dann, wenn ich sehe. Ja.

00:55:59.009 --> 00:56:03.449
Also ich glaube, du musst es so machen, weil wenn der CEO mit seinem iPhone

00:56:03.449 --> 00:56:07.429
sich die Seite anguckt, die du gebaut hast, und dann sieht das eben nicht so

00:56:07.429 --> 00:56:10.469
aus wie in den Figma-Entwürfen, dann findet der es halt kacke.

00:56:11.169 --> 00:56:14.429
Und das heißt, du fängst dann doch wieder an, dir ein komplett eigenes Select

00:56:14.429 --> 00:56:17.069
zu bauen, damit der Chef irgendwie glücklich ist.

00:56:17.369 --> 00:56:22.329
Absolut. Darum musst du in dem Fall, weil du ja auch aktiv sozusagen da rein

00:56:22.329 --> 00:56:27.069
tappst, das ist ja dann so, hier be dragons, so ja, ich weiß Bescheid,

00:56:27.149 --> 00:56:30.769
danke, ich mach das, ich weiß, was ich tue. Ähm,

00:56:32.201 --> 00:56:36.041
Dann muss das eben dann auch auf Mobilgeräten funktionieren. Ja.

00:56:36.581 --> 00:56:42.361
Und wir sind ja auch, glaube ich, ganz gut im Saft, was so responsives Interface-Design angeht.

00:56:44.001 --> 00:56:47.361
Nach, keine Ahnung, responsive Web-Design war es 2009.

00:56:48.741 --> 00:56:52.821
Wir sind gut im Saft. Hast du mal auf deinem Mobiltelefon den Adblocker ausgemacht?

00:56:54.061 --> 00:56:57.641
Ich habe ja Chrome, da darf ich ja gar nichts installieren, derartiges.

00:56:57.981 --> 00:57:01.441
Okay, geh mal auf irgendeine Nachrichten-Webseite. Nee, die finde ich alle schlimm, ist ja klar.

00:57:03.561 --> 00:57:08.621
Wir sind gut im Saft, hast du gerade gesagt, was im weitesten Sinne das Webdesign für Mobile angeht.

00:57:08.761 --> 00:57:13.801
Und ich mache irgendwie auf dem Kollegen hier random News-Webseite aus. Okay, Mobiler Firefox.

00:57:14.301 --> 00:57:18.221
Aber du hast vergessen, die News-Webseite ist ja nicht für dich gebaut. Ich weiß.

00:57:18.481 --> 00:57:25.361
Die News-Webseite wird für Werbung gebaut und du darfst dir die dann auch noch angucken.

00:57:25.861 --> 00:57:27.901
Ah, genau. Ja, die Werbung, nicht die Seite.

00:57:28.701 --> 00:57:31.641
Ja, klar. Also wenn du hier wirklich irgendwie den Guardian oder so ein Gedöns

00:57:31.641 --> 00:57:34.961
aufmachst und du hast einen Adblocker aus, oben irgendwie, hier unterstützt

00:57:34.961 --> 00:57:37.561
uns, unten unterstützt uns und dann hast du den da. Die geht ja fast noch.

00:57:37.881 --> 00:57:43.021
Also gibt es da so deutsche Publikationen an der Fokus und NTV oder Automotorsport, Alter, Falter.

00:57:43.181 --> 00:57:45.401
Aber ich meine, okay, da sind halt dann die Autoplay-Videos dann.

00:57:45.461 --> 00:57:47.381
Ich meine, selbst bei denen, wo du was Besseres erwarten würdest,

00:57:47.701 --> 00:57:50.481
ist es so, du gehst auf die Seite und du siehst keinen Content von Autopop-Ups.

00:57:51.341 --> 00:57:54.881
Das stimmt. Weil oben unterstützt uns unten irgendwie hier Cookies und Gedöns.

00:57:56.606 --> 00:58:02.106
Deswegen habe ich auch ein Abo für eine solche Publikation, die ich sehr gerne lese.

00:58:02.526 --> 00:58:06.166
Und dann habe ich auch das Pure-Abo, dann ist da wirklich nichts drin.

00:58:06.686 --> 00:58:10.166
Alles, was du sagst, ist korrekt und richtig und gut und schön.

00:58:10.326 --> 00:58:14.406
Nur die Aussage, wir sind mit unserem mobilen Webdesign gut im Saft,

00:58:14.826 --> 00:58:16.326
da gebe ich maximales Kontra.

00:58:17.066 --> 00:58:19.926
Also unsere Hörenden sind ja wohl super im Saft.

00:58:20.526 --> 00:58:24.226
Wenn sie das denn dürfen. Aber möglicherweise arbeiten die auch in irgendeinem

00:58:24.226 --> 00:58:26.006
Kontext, wo halt von oben herabdiktiert wird.

00:58:26.186 --> 00:58:29.046
Wir brauchen diesen Cookie-Banner, wir brauchen diese Werbung,

00:58:29.186 --> 00:58:32.146
hast du nicht gesehen, Autoplay-Video ist voll super, mach das X kleiner,

00:58:32.346 --> 00:58:34.906
mach unser Logo größer, aber das X kleiner, lauter so Kisten.

00:58:35.266 --> 00:58:39.106
Ja, aber ich glaube, dann hilft das mit dem Select irgendwie auch nichts mehr.

00:58:39.346 --> 00:58:42.706
Ja, das ist sicher, aber ich meine, okay, klar, die Mülltonne brennt.

00:58:42.806 --> 00:58:46.666
Aber muss man jetzt wirklich zusätzliches Material ins Feuer geben, ist die Frage.

00:58:47.166 --> 00:58:49.846
Oder kann man einfach sagen und so, okay, wärme ich mir halt die Hände.

00:58:50.166 --> 00:58:52.466
Feuersödern, meinst du? Das Feuersöder?

00:58:54.246 --> 00:58:57.446
Der will doch eher Atomkraft haben, oder? Ja, genau. Also okay.

00:58:57.526 --> 00:58:59.266
Ich wirf gern ein paar Brennstäbe rein. Ich wollte gerade sagen,

00:58:59.346 --> 00:59:00.926
mein Plutonium würde ich jetzt vielleicht auch nicht reinwerfen.

00:59:00.986 --> 00:59:01.946
Das macht es auch nicht besser.

00:59:02.166 --> 00:59:05.466
Halt auf eine andere Weise schlimmer. Ich glaube, die Metapher biegt sich ein

00:59:05.466 --> 00:59:06.286
bisschen. Wollen wir...

00:59:07.157 --> 00:59:12.637
Genau, der nächste Punkt ist einer für dich, weil wir in der Vorbesprechung

00:59:12.637 --> 00:59:16.817
irgendwie, wir haben was gefunden, wo du gesagt hast, ja, ist okay,

00:59:17.457 --> 00:59:21.937
müssen wir aber nicht bringen und dann stellte sich heraus, dass ich hinsichtlich

00:59:21.937 --> 00:59:28.837
des Konstrukts der JavaScript-Iterators etwas unterbelichtet bin und deswegen

00:59:28.837 --> 00:59:31.857
nehmen wir diesen Blog jetzt hier rein und du erzählst uns mal was über Iterators.

00:59:31.857 --> 00:59:33.337
Also erstes bist du nicht unterbelichtet.

00:59:33.937 --> 00:59:36.557
Ja, hier und da halt schon ein bisschen. Nein, nein, nein, nein,

00:59:36.717 --> 00:59:40.457
nicht was JavaScript angeht, sondern über diesen ganzen Themenkomplex hat wirklich

00:59:40.457 --> 00:59:43.457
gar keiner irgendeine Ahnung davon und alle gucken mich halt eben an,

00:59:43.517 --> 00:59:46.117
wie ein Wal, der zum ersten Mal ein U-Boot zieht, wenn sie mich mit den Dingern rumschonkieren sehen.

00:59:46.497 --> 00:59:49.397
Genau, also ich weiß, also Iterators, der Name sagt es, das ist halt so,

00:59:49.417 --> 00:59:50.717
worüber man drüber loopen kann.

00:59:51.637 --> 00:59:56.157
Äh, genau. Gibt's ja irgendwie, es gibt das Iterator-Protokoll, das weiß ich noch.

00:59:56.277 --> 00:59:59.437
Da gibt's ja bestimmte quasi, du kannst jedes Ding in Iterator umwandeln,

00:59:59.517 --> 01:00:03.417
das weiß ich, indem das bestimmte Properties hat, und irgendwelche Dinge zurückgibt,

01:00:03.457 --> 01:00:04.337
wenn es fertig ist und so.

01:00:06.917 --> 01:00:10.817
Genau, und ich hatte gedacht, dass du über jede Art Iterator mit forEach drüber

01:00:10.817 --> 01:00:12.937
gehen kannst. Hast du gesagt, das ist überhaupt nicht der Fall?

01:00:14.337 --> 01:00:19.997
Genau, ich glaube, das ist es. Und Iterators, was gibt es für Iterators? Ich weiß es nicht.

01:00:20.317 --> 01:00:24.917
Okay, pass auf, fangen wir mal an. Also erstmal, das Ding, worum es hier geht, heißt Iterator Zip.

01:00:26.357 --> 01:00:29.177
Und wenn ich mal ein MDM zitieren darf, bla bla bla, ist eine statische Methode

01:00:29.177 --> 01:00:33.817
auf der Iterator, auf dem Iterator Objekt. Das aggregiert Elemente aus verschiedenen

01:00:33.817 --> 01:00:36.297
iterierbaren Objekten und so weiter.

01:00:37.677 --> 01:00:43.917
So, jetzt ist die Frage. Dieser Satz, der spricht davon, dass ein Iterator-Objekt

01:00:43.917 --> 01:00:49.777
zurückgegeben wird, das wird produziert, aus verschiedenen Iterable-Objekten.

01:00:50.617 --> 01:00:53.957
Ja. Iterator versus Iterable. Was ist was?

01:00:57.070 --> 01:01:03.070
Ne, da fängt es schon an. Also, es ist ja ein Iterator einfach quasi ein quasi

01:01:03.070 --> 01:01:08.070
von dir erschaffenes Ding, das diese Interfaces eben bereitstellt,

01:01:08.250 --> 01:01:11.390
die ein Iterator haben muss, während die anderen, die Iterables,

01:01:11.690 --> 01:01:13.690
vielleicht Build-Ins sind im Browser,

01:01:14.630 --> 01:01:18.130
vielleicht sowas wie, keine Ahnung, ob das stimmt, aber Noteless und Arrays

01:01:18.130 --> 01:01:25.930
oder sowas, und die eben auch integriert haben das Iterator-Protokoll oder was soll man. Fast perfekt.

01:01:26.130 --> 01:01:28.870
Also unter praktischen Gesichtspunkten ist es genau so.

01:01:29.170 --> 01:01:32.350
Aber ein Iterable ist ein Objekt, irgendeine Datenstruktur, was auch immer.

01:01:32.630 --> 01:01:37.290
Und das hat einen speziellen Magic Key, ein Symbol, namens Symbol.Iterator.

01:01:37.590 --> 01:01:41.210
Und wenn man das aufruft, dann bekommt man einen Iterator zurück.

01:01:41.670 --> 01:01:44.750
Ein Hitterable hat eine Methode, um Iterator zu produzieren.

01:01:45.130 --> 01:01:49.190
Die Idee dahinter ist, die Datenstruktur hat halt eben ein Standardprotokoll implementiert.

01:01:49.530 --> 01:01:53.490
Diese Datenstruktur enthält irgendwelche Werte und gibt halt ein Objekt zurück,

01:01:53.610 --> 01:01:55.170
das ein Standard-Interface implementiert.

01:01:55.330 --> 01:01:58.990
Und das ist etwas, das dann zum Beispiel konsumiert werden kann von so Mechanismen

01:01:58.990 --> 01:02:00.290
wie eine For-Off-Schleife und Ähnlichem.

01:02:01.153 --> 01:02:05.313
Das ist so die Idee. Genau, aber wichtig ist, dass es eine For-Off-Schleife ist.

01:02:06.453 --> 01:02:09.193
For-in oder so, das ist wieder was anderes. Ja, genau.

01:02:09.793 --> 01:02:14.213
Eine For-Off-Schleife nimmt auch kein Iterator notwendigerweise, sondern ein Iterable.

01:02:14.373 --> 01:02:17.533
Also eine For-Off-Schleife erwartet, dass du ein Array reinschmeißt mit diesem

01:02:17.533 --> 01:02:22.513
Magic Key, wo dann was aufgerufen wird und auf dem Ding operiert es dann de facto.

01:02:23.493 --> 01:02:26.113
Aber beides sind halt im Prinzip bloß Interfaces. Das heißt,

01:02:26.433 --> 01:02:28.773
wenn du richtig fancy sein willst, kannst du dir auch ein Objekt bauen,

01:02:28.933 --> 01:02:30.813
das ein Iterable-Iterator ist.

01:02:31.153 --> 01:02:35.133
Das heißt, es implementiert beide APIs gleichzeitig, hat also diese Funktionalität,

01:02:35.153 --> 01:02:36.953
um in eine Voraufschleife reingesteckt zu werden.

01:02:37.113 --> 01:02:40.553
Und wenn die Voraufschleife sagt, gib mir den Iterator, dann hat das Ding einfach

01:02:40.553 --> 01:02:44.393
die Implementierung return this, weil es halt eben das andere Interface auch implementiert.

01:02:45.173 --> 01:02:49.513
Es ist also nicht so sehr, dass das eine Art Basistyp ist, irgendwie so ein

01:02:49.513 --> 01:02:53.433
gemeinsamer Vorfahre von allen Dingen, die irgendwie listenlike sind,

01:02:53.753 --> 01:02:56.353
sondern es ist wirklich einfach nur eine Funktionalität, die viele verschiedene

01:02:56.353 --> 01:02:57.453
Objekte implementiert haben können.

01:02:57.633 --> 01:03:01.233
Aber es fühlt sich so ein bisschen an, als würde es so zu einer Art Basistyp degenerieren.

01:03:01.753 --> 01:03:03.313
Ja, also eine Art Prototype.

01:03:03.913 --> 01:03:06.753
Genau, so fühlt es sich an, ist es streng genommen nicht.

01:03:07.233 --> 01:03:09.453
Aber das ist, was du hier rauskriegst. Und deswegen ist halt eben,

01:03:09.653 --> 01:03:13.893
warum erzähle ich das alles? Naja, Iterator Zip nimmt halt verschiedene Iterables.

01:03:14.393 --> 01:03:16.453
Also Dinger, die du auch in Vor-Affschleife reinstecken könntest.

01:03:16.893 --> 01:03:22.113
Zum Beispiel Arrays, Strings, Maps, Sets, Dom, Lists.

01:03:22.633 --> 01:03:25.933
Dererlei. Ja, Strings kannst du einsetzen, weil er dann quasi Buchstabe für

01:03:25.933 --> 01:03:28.853
Buchstabe durch iteriert. Buchstaben gibt es nicht. Wir haben hier Unicode am

01:03:28.853 --> 01:03:29.373
Start. Oder Characters.

01:03:30.053 --> 01:03:34.453
Characters gibt es nicht. Wir haben hier Unicode am Start. Dann halt das. Entities?

01:03:36.213 --> 01:03:40.033
Ich weiß tatsächlich gar nicht, wie die Kategorie heißt, die du da rausbekommst.

01:03:40.433 --> 01:03:41.713
Weil es sind ja nicht Grapheme.

01:03:42.333 --> 01:03:45.653
Also Grapheme ist ja, was du als Zeichen wahrnimmst. Wenn du zum Beispiel hingehst

01:03:45.653 --> 01:03:48.673
und du machst irgendwie ein Slack-Daumen-Hoch-Emoji mit Hautfarbe,

01:03:49.153 --> 01:03:52.333
sind das ja zwei Emoji aufeinander folgend, die zusammen gerendert werden von

01:03:52.333 --> 01:03:53.393
Betriebssystemen, die das können.

01:03:53.953 --> 01:03:56.993
So wie eine Ligatur im Grunde. Genau.

01:03:58.416 --> 01:04:02.636
Es ist keine Legatur, aber es funktioniert von der Idee her wie eine.

01:04:03.016 --> 01:04:05.256
Und das ist ja, was man als Graphencluster wahrnehmen würde.

01:04:05.436 --> 01:04:09.856
Also das ist, was ein Graphencluster ist, was Max Mütze als Zeichen bezeichnen würde.

01:04:10.376 --> 01:04:14.036
Und das kriegst du tatsächlich von dem Iterationsmechanismus von Strings nicht,

01:04:14.296 --> 01:04:18.376
sondern der würde dir dieses spezifische Konstrukt zerteilen in Daumenhoch-

01:04:18.376 --> 01:04:19.576
und Hautfarbenmodifikator.

01:04:19.776 --> 01:04:22.376
Das heißt, für dieses eine Emoji würdest du zwei Dinge kriegen,

01:04:22.656 --> 01:04:25.516
was aber schon mal besser ist, als wenn es die Codepunkte geben würde,

01:04:25.576 --> 01:04:28.756
weil dann würdest du ja vier bekommen. Die Surrogate-Pair, die zwei Code-Punkte

01:04:28.756 --> 01:04:31.796
für Daumen hoch und die zwei Code-Punkte für den Hautfarben-Modifikator.

01:04:32.056 --> 01:04:34.136
Ist alles schrecklich kompliziert. Strings sind ein schlechtes Beispiel.

01:04:34.596 --> 01:04:38.636
Sagen wir, du schmeißt da rein ein Array und eine Notelist zum Beispiel. Ja.

01:04:39.216 --> 01:04:42.496
So. Die beiden Dinger haben ja erstmal per se nicht viel gemeinsam,

01:04:42.656 --> 01:04:45.516
außer dass sie konzeptionell Listen sind. Mhm.

01:04:46.736 --> 01:04:49.576
Und dass sie halt eben diesen Iterationsmechanismus implementieren.

01:04:51.269 --> 01:04:57.089
Und was halt eben die iterator zip rausgibt, ist halt eben der aggregierte Inhalt

01:04:57.089 --> 01:05:01.949
der beiden Elemente mit einem Objekt, das ein Iterator implementiert.

01:05:02.209 --> 01:05:06.669
Das heißt, das, was da rauskommt, kannst du noch nicht mal hernehmen und so

01:05:06.669 --> 01:05:11.929
unmittelbar in so eine V-Off-Schleife reinschmeißen, sondern du könntest halt

01:05:11.929 --> 01:05:16.649
eben diesen Iterator nehmen und sagen, okay, ich baue jetzt aus dir ein neues Array zum Beispiel.

01:05:17.529 --> 01:05:23.209
Okay, also würdest du dann Array from und die sind dann von diesem Iterator.

01:05:25.449 --> 01:05:29.909
Ja, genau. So im Prinzip würde man das machen. Um nochmal kurz auf diese SIP-Funktion

01:05:29.909 --> 01:05:34.849
zu kommen, die würde dann wahrscheinlich sowas machen wie 1. Array-Eintrag, 1.

01:05:34.949 --> 01:05:38.469
Notlist-Eintrag, 2. Array-Eintrag, 2. Notlist-Eintrag, sowas?

01:05:41.189 --> 01:05:44.849
Scroll? Nein, das nicht. Das ist tatsächlich nur ein Aneinanderhängen,

01:05:44.889 --> 01:05:46.369
wenn ich das jetzt gerade richtig sehe. Genau.

01:05:47.109 --> 01:05:52.189
Und du würdest halt einen Iterator rausbekommen mit halt, der enthält dann die

01:05:52.189 --> 01:05:55.569
Arrays mit den Inhalten aus den Itterables, die da reinkommen.

01:05:56.009 --> 01:06:00.289
Also, du schmeißt also rein diese beiden Elemente und sie werden halt sozusagen

01:06:00.289 --> 01:06:04.489
dann in Reihe gesetzt mit Arrays drin und dann kannst du das Ding iterieren,

01:06:04.609 --> 01:06:07.109
in Array verwandeln, flatten, was auch immer. Das ist so das Ding.

01:06:07.449 --> 01:06:11.989
Aber was halt eben dazu wichtig ist, dass du dich halt eben in diesem Spannungsfeld

01:06:11.989 --> 01:06:15.429
der verschiedenen Objekte mit diesen verschiedenen Interfaces da zurecht findest,

01:06:15.469 --> 01:06:19.709
weil du würdest vielleicht erwarten, so eine SIP-Operation, dass die auf dem Array existiert.

01:06:21.480 --> 01:06:25.080
Tut es aber nicht, weil dann würde es ja nur mit Arrays gehen und vielleicht

01:06:25.080 --> 01:06:28.480
willst du ja auch deine Sets oder deine Notelists oder was auch immer zippen wollen.

01:06:29.360 --> 01:06:32.180
Oder irgendwie auch deine komplett selbstgebackene Datenstruktur. Warum nicht auch die?

01:06:33.440 --> 01:06:36.360
Und das Schöne mit Iterator-Zip ist halt eben, weil es auf diese Low-Level-Ebene

01:06:36.360 --> 01:06:40.300
geht, ist es halt kompatibel zu allem, was halt grob als listenartig verstanden

01:06:40.300 --> 01:06:42.080
werden kann, um den Preis, dass

01:06:42.080 --> 01:06:45.460
du halt eben, wenn du drei Arrays reinsteckst, du halt nicht ein Array

01:06:45.880 --> 01:06:48.220
rausbekommst, sondern diese etwas allgemeinere Konstruktion,

01:06:48.300 --> 01:06:52.380
weil man halt eben nicht davon ausgehen kann, dass alle drei Inputs Arrays sind. Ja, okay.

01:06:53.160 --> 01:06:57.520
Was würde man dann verlieren? .length, gibt es das dann noch auf dem Iterator?

01:06:57.800 --> 01:06:59.300
Nee, ein Iterator kann ja lazy sein.

01:06:59.900 --> 01:07:01.640
Ah ja, okay. Ein Iterator ist ja nur ein Objekt mit einem Interface.

01:07:01.640 --> 01:07:03.480
Das wäre das so mit dem Ding, was man verlieren würde.

01:07:04.664 --> 01:07:07.744
Ja, klar. Also es ist halt kein Array mehr. Kein Map, kein Filter, kein was auch immer.

01:07:08.944 --> 01:07:16.844
Und die Problematik ist natürlich auch da drin, weil Iterables lazy sein können

01:07:16.844 --> 01:07:20.264
und Iteratoren auch lazy sein können. Ist ja nicht gesagt, dass die endlich sind.

01:07:21.844 --> 01:07:25.124
Es ist ja bloß Implementierung einer Programmierschnittstelle und du könntest

01:07:25.124 --> 01:07:28.084
ja theoretisch sagen, jedes Mal, wenn ich hier aufgerufen werde und den nächsten

01:07:28.084 --> 01:07:32.284
Wert produzieren soll, mache ich I++ und nicht mehr. Das geht ja auch.

01:07:32.964 --> 01:07:38.724
Und deswegen kannst du auch nicht dort Entries machen wahrscheinlich und äh, könntest du schon.

01:07:38.924 --> 01:07:42.764
Dann würdest du halt eben bei Entries wieder einen Iterator rausbekommen,

01:07:43.024 --> 01:07:45.084
der ja seinerseits wieder lazy ist. Das ist das Ding.

01:07:45.544 --> 01:07:48.124
Ah ja, okay. Wenn du hingehst und du machst auf einem Array oder auf einer Map

01:07:48.124 --> 01:07:51.224
oder was auch immer Entries, kriegst du ja nicht ein Array raus.

01:07:51.304 --> 01:07:53.244
Du kriegst ja immer so ein Iterable raus.

01:07:53.364 --> 01:07:56.804
Ne, einen Iterator kriegst du da raus. Iterable, Iterator? Hab's grad nicht im Kopf.

01:07:58.324 --> 01:08:02.344
Das fällt halt meistens nicht auf, weil du willst ja dann damit meistens irgendwas anstellen.

01:08:02.424 --> 01:08:07.144
Du machst dann halt irgendwie sowas vor Value in myMap.keys zum Beispiel,

01:08:07.624 --> 01:08:08.924
weil du über die Keys überlupen willst.

01:08:09.084 --> 01:08:11.764
Und weil du es halt direkt in diese Konstruktion reinsteckst,

01:08:11.984 --> 01:08:15.544
fällt dir gar nicht auf, dass durch diesen Schritt deine Map nicht in ein Array

01:08:15.544 --> 01:08:18.984
degeneriert, sondern in ein noch basaleres Objekt gleichsam. Ja, okay.

01:08:19.384 --> 01:08:22.684
Was alles total gut ist, weil es in 90% der Fälle halt eben überhaupt nicht

01:08:22.684 --> 01:08:23.884
auffällt, was da vor sich geht.

01:08:24.144 --> 01:08:26.964
Aber in dem Fall halt eben schon, und es wohnt halt eben auf dieser Iterator-Klasse

01:08:26.964 --> 01:08:30.244
aus einem Grund und ist halt keine Array-Methode und deswegen gibt es halt auch

01:08:30.244 --> 01:08:33.444
kein ForEach da drauf, weil ForEach müsste eben auch implementiert werden auf

01:08:33.444 --> 01:08:36.424
dem Prototyp jedes Typs, der da involviert ist.

01:08:38.414 --> 01:08:42.874
Kannst halt nicht davon ausgehen. Ja, okay. Ja, das ist doch super. Habe ich verstanden.

01:08:44.234 --> 01:08:51.674
Genau, das haben wir also neu in Firefox iterator.zip und iterator.zip keyed als Methoden.

01:08:52.294 --> 01:08:56.814
Ja, was war denn nochmal iterator.zip keyed? Den habe ich gar nicht in meinem,

01:08:58.394 --> 01:09:01.234
Gewächnis drin. Aber halt eben da ist er.

01:09:02.154 --> 01:09:06.254
Scroll, das spuckt er aus. Iterator-Objekt, Keys.

01:09:06.874 --> 01:09:10.714
Ah ja, gut. Wenn du über so objektartige Strukturen sippen willst.

01:09:10.954 --> 01:09:16.374
Du hast halt eben Objekte, wo du halt eben angibst. Warte mal, warte mal.

01:09:17.979 --> 01:09:21.479
Äh, doch, genau. Für gekiete Elemente ist das, wenn ich es jetzt nicht sehe.

01:09:22.019 --> 01:09:24.979
Ich meine, das spielt jetzt eh keine so große Rolle, weil außer Firefox kann

01:09:24.979 --> 01:09:26.699
es im Moment keiner. Man kann es natürlich polyfüllen.

01:09:27.539 --> 01:09:32.479
Aber vielleicht kann man die Analogie sagen, das eine ist halt wie Set und das andere wie Map?

01:09:33.339 --> 01:09:36.779
Vielleicht? Ich will jetzt nichts Verkehrtes sagen. Ja, okay.

01:09:37.099 --> 01:09:40.559
Na gut, wir können das ja offen lassen. Also, wer da irgendwie interessiert

01:09:40.559 --> 01:09:43.359
dran ist, wir verlinken das auf jeden Fall.

01:09:43.539 --> 01:09:45.219
Ja, wir verlinken das und, äh,

01:09:46.519 --> 01:09:49.239
ich meine, meistens weiß man ja auf welcher Datenstruktur man arbeitet.

01:09:49.339 --> 01:09:53.359
Man ist selten in der Situation drin, dass man wirklich jetzt unbedingt ein

01:09:53.359 --> 01:09:56.119
Komposit herstellen muss aus einem Array in der Notelist und einem String.

01:09:57.479 --> 01:10:01.579
Wie oft kommt das schon vor? Es sind halt so diese ganzen Iterator-Helpers,

01:10:01.679 --> 01:10:04.119
das sollte man vielleicht noch erwähnen, das ist ein ganzes Proposal,

01:10:04.299 --> 01:10:08.959
wo lauter so Hilfsfunktionen wie halt CONCAT und tatsächlich auch Map und Filter und Konsorten,

01:10:09.799 --> 01:10:12.619
für Iterators bereitgestellt werden.

01:10:13.859 --> 01:10:18.379
Das heißt, du hast dann kein ForEach auf allen Iteratoren aber zumindest so

01:10:18.379 --> 01:10:19.479
Sachen wie Mapfilter Reduce.

01:10:19.919 --> 01:10:22.939
Das Ding bei all diesen Kisten ist halt eben, die müssten notwendigerweise lazy

01:10:22.939 --> 01:10:25.879
sein, weil sie davon ausgehen müssen, dass ihre Inputs auch lazy sind.

01:10:27.079 --> 01:10:30.799
Und das ist halt immer so ein bisschen so der Hirnriss. A, degenerieren halt

01:10:30.799 --> 01:10:32.579
eben deine Typen und du machst Mapfilter.

01:10:33.119 --> 01:10:35.379
Aber wenn du halt eben Mapfilter auf einem Array machst, kriegst du wieder ein

01:10:35.379 --> 01:10:39.939
Array raus. Wenn du sagst Array.Entries, Mapfilter, kriegst du halt was komplett

01:10:39.939 --> 01:10:42.079
anderes raus, was auch noch lazy ist.

01:10:42.179 --> 01:10:43.099
Also nicht nur ein anderes Interface

01:10:43.099 --> 01:10:45.019
implementiert, sondern auch ein ganz anderes Falten in den Tag legt.

01:10:46.599 --> 01:10:51.719
Aber eigentlich ganz schön, wenn das alles geht. Asychrone Iteratoren gibt es natürlich auch.

01:10:52.039 --> 01:10:55.019
Die geben dir halt nicht den nächsten Wert, sondern einen Promise auf den nächsten Wert raus.

01:10:55.999 --> 01:10:58.719
Und auch die kriegen ihre Helpers, aber das ist ein separates Proposal,

01:10:58.779 --> 01:10:59.439
das braucht ein bisschen länger.

01:11:01.541 --> 01:11:08.821
Also for a weight of. Ja, wobei nicht vergessen, die Vorschleife will ja Iterable

01:11:08.821 --> 01:11:12.401
Objekte haben mit dem Magic Key, wo man den Asynchron-Iterator draufkriegt.

01:11:12.541 --> 01:11:14.861
Das ist also nochmal was subtil anderes.

01:11:15.161 --> 01:11:17.921
Aber das hängt halt zusammen. Es gibt halt in JavaScript immer die grüne und

01:11:17.921 --> 01:11:19.941
die blaue Variante. Die grüne Variante ist synchron.

01:11:20.621 --> 01:11:24.141
Iterables, die Iteratoren ausspucken. Und dann gibt es noch asynchrone Iterables,

01:11:24.321 --> 01:11:27.401
die asynchrone Iteratoren ausspucken, die das gleiche sind wie die Synchronen,

01:11:27.481 --> 01:11:28.941
aber halt eben mit promise of the weight.

01:11:29.970 --> 01:11:34.290
Okay. Und wo wir gerade bei denen sind? Hier, Safari meldet in den Technology

01:11:34.290 --> 01:11:40.850
Previews, A, Streams, also Readable Streams, werden jetzt auch asynchron iterierbar,

01:11:40.930 --> 01:11:42.530
das heißt, die implementieren auch dieses Interface.

01:11:42.770 --> 01:11:47.610
Hat bisher immer gefehlt, musste man manuell dran patchen, also so Prototyp hacken.

01:11:48.330 --> 01:11:52.570
Bisschen blöd, aber nicht schlimm, ist halt so ein zwölfzeiliger Polyfill gewesen.

01:11:53.150 --> 01:11:57.830
Und Safari Technology Preview vermeldet auch, dass man mit Readable Stream From

01:11:57.830 --> 01:12:02.770
aus einem Iterable oder Asynchron-Iterable sich dann komfortabel einen Readable Stream bauen kann.

01:12:03.450 --> 01:12:06.970
Auch so ein Ding hat bisher in Safari gefehlt.

01:12:07.710 --> 01:12:10.590
Auch wieder 10 Zeilen Polyfill, den man da drauf patchen musste.

01:12:11.050 --> 01:12:14.630
Kann man sich dann auch sparen, wenn das alles raus ist. Und die Readable Streams

01:12:14.630 --> 01:12:17.390
werden transferable, was natürlich auch eine feine Sache ist.

01:12:18.070 --> 01:12:22.110
Das heißt, man kann die an Worker übermitteln, zum Beispiel? Jo, Chef.

01:12:22.790 --> 01:12:25.390
Ärgert dich das nicht manchmal, also ich meine, gerade du, so als Low-Level

01:12:25.390 --> 01:12:27.370
Web-Tech-Hacker mit deinen Islands of Reactivity.

01:12:28.230 --> 01:12:30.970
Wünschst du dir auch manchmal, es wäre einfacher, Dinge in einem Web-Worker

01:12:30.970 --> 01:12:33.030
zu haben, die irgendwie mit Dingen

01:12:33.030 --> 01:12:35.570
interagieren, die fundamental nicht im Web-Worker existieren können?

01:12:36.570 --> 01:12:40.670
Mhm. Stell dir einen Notation-Observer im Web-Worker vor.

01:12:41.630 --> 01:12:44.870
Das ist quasi die Krücke dafür, auf dem du das machst. Genau, genau.

01:12:45.110 --> 01:12:47.510
Das Ding ist ja, also generell ist das Problem mit Web-Workern ja immer,

01:12:47.570 --> 01:12:49.950
du musst dann immer so Nachrichten da reinpassen.

01:12:50.350 --> 01:12:55.570
Ja. Und du bist dann quasi immer dazu gezwungen, auf Basis von PostMessage dein

01:12:55.570 --> 01:12:57.510
eigenes Datenprotokoll zu erfinden.

01:12:57.950 --> 01:13:04.350
Genau, und da kannst du quasi diesen readable Stream noch reinstecken und der... Huisa, huisa.

01:13:04.950 --> 01:13:08.430
Das ist ja auch gar kein Problem, es sei denn, du willst in deinen Worker verschiedene

01:13:08.430 --> 01:13:10.050
Nachrichtentypen reinschieben.

01:13:10.350 --> 01:13:15.590
Hier für Task A, da für Task B, da für Task C. Da kann ich ja Broadcast Channel auch empfehlen für.

01:13:16.050 --> 01:13:21.250
Um Nachrichten in einen Worker reinzuschieben, Naja, du kannst ja einen Broadcast-Channel

01:13:21.250 --> 01:13:26.090
für jeden Typ Daten oder sowas aufmachen. Ja.

01:13:26.470 --> 01:13:29.310
Und die Worker können dann ja sich subscriben

01:13:29.310 --> 01:13:32.230
an die entsprechenden Broadcast-Channels, die sie interessieren.

01:13:33.274 --> 01:13:36.974
Das wird natürlich funktionieren. Dachte, dass du hättest jetzt irgendwie für

01:13:36.974 --> 01:13:38.714
drei verschiedene Typen, drei verschiedene Worker am Start.

01:13:38.814 --> 01:13:42.354
Das wäre natürlich ein bisschen overkill. Manchmal auch. Manchmal auch.

01:13:43.214 --> 01:13:46.114
Na, pass auf. Es ist ja eigentlich so, ich meine, JavaScript ist ja am Ende

01:13:46.114 --> 01:13:49.414
des Tages, das will wieder die React-Fraktion nicht hören, aber es ist ja im

01:13:49.414 --> 01:13:50.494
Herzen objektorientiert, oder?

01:13:50.954 --> 01:13:53.574
Die Daten wohnen in Objekten, die haben Methoden und so weiter und so weiter.

01:13:54.054 --> 01:13:56.794
Das heißt, der klassische Abstraktionsmechanismus wäre ja der,

01:13:57.254 --> 01:13:59.814
du hast irgendwie eine Quelle von Daten, zum Beispiel Mutation Observer,

01:13:59.814 --> 01:14:03.514
und willst irgendwie das irgendwie sinnvoll kapseln.

01:14:03.674 --> 01:14:07.354
Die Konstruktion von Mutation Observer an sich ist ja schon ein bisschen oll,

01:14:07.454 --> 01:14:08.534
so mit einer Callback-Funktion.

01:14:08.674 --> 01:14:11.534
Das wäre schon praktischer, wenn das irgendwie ein Event-Target wäre,

01:14:11.754 --> 01:14:14.634
was es nicht ist, oder irgendwie ein Readable-Stream wäre.

01:14:15.754 --> 01:14:17.754
Und was du halt eben jetzt machen kannst, was ich halt super finde,

01:14:17.854 --> 01:14:22.694
ist halt, du nimmst ein Konstrukt, das halt irgendwie so Callback-mäßig unterwegs

01:14:22.694 --> 01:14:27.214
ist und das du normalerweise wirklich naiv einfach in einen Worker reinpipen würdest.

01:14:27.394 --> 01:14:30.174
Also, wenn Mutation of Server Callback feiert, machst du Post Message,

01:14:30.514 --> 01:14:32.714
aber dann wird es halt immer sehr kleinteilig, sehr Spaghetti-ig.

01:14:33.354 --> 01:14:35.654
Stattdessen nimmst du den Mutation of Server, packst du einen Stream drumherum

01:14:35.654 --> 01:14:39.934
und filterst die Daten raus, die dich interessieren und beamst dann den Stream

01:14:39.934 --> 01:14:41.834
als Transferable in den Worker.

01:14:42.354 --> 01:14:45.734
Das heißt, wenn dann eine Mutation im Main Thread passiert, kriegst du im Worker,

01:14:46.254 --> 01:14:49.634
nicht das Mutation Event, weil du natürlich so Sachen wie DOM-Referenzen vorher

01:14:49.634 --> 01:14:51.774
rausfiltern musst, die gehen da halt nicht rein.

01:14:52.554 --> 01:14:55.994
Aber so Informationen wie das Ding mit der ID hast du sich nicht gesehen,

01:14:56.234 --> 01:14:59.354
hat jetzt drei Children statt vier, ist vielleicht genau die Information,

01:14:59.494 --> 01:15:01.234
die du brauchst, um irgendwelche Operationen zu triggern.

01:15:02.766 --> 01:15:07.226
Wobei ich gerade überlege, ob das für Mutation Observer gehen würde,

01:15:07.366 --> 01:15:14.906
weil du ja dann immer quasi, du hast ja immer dann Entry.Target, glaube ich.

01:15:15.026 --> 01:15:19.086
Und das ist ja ein Verweis auf das DOM-Element. Ja.

01:15:19.926 --> 01:15:23.086
Ob dafür ist ja noch das drin funktionieren? I don't know. Nee,

01:15:23.266 --> 01:15:24.646
das müsstest du halt rausfiltern.

01:15:25.086 --> 01:15:27.246
Ja, okay. Diese Information kannst du halt nicht übertragen.

01:15:27.346 --> 01:15:30.006
Du kannst halt nicht dem Worker eine Referenz auf DOM-Objekte geben.

01:15:30.806 --> 01:15:34.806
Aber halt alles andere. Ja. Und wenn du halt irgendwie so Operationen hast,

01:15:34.926 --> 01:15:39.466
wie Träger-Rechnungsschritt, sobald das passiert ist, oder mach Request,

01:15:39.566 --> 01:15:44.086
wenn das Ding sichtbar geworden ist, so Späßchen, das geht halt eben ganz wunderbar.

01:15:44.286 --> 01:15:46.846
Und es ist halt so ein schöner No-Brainer, weil es halt ein Transfer ist,

01:15:46.946 --> 01:15:51.026
im Sinne von, du baust diesen Stream auf, nur um ihn in den Worker zu stecken,

01:15:51.046 --> 01:15:54.306
dann ist er auch tatsächlich transferred, im Sinne von, der existiert dann bei dir nicht mehr.

01:15:55.286 --> 01:15:59.546
Das heißt, es ist sozusagen ein einmaliges Worker-Setup. Du machst den Worker

01:15:59.546 --> 01:16:02.906
auf, schiebst den Stream da rein mit dem Web-Server oder was auch immer da dran,

01:16:02.986 --> 01:16:06.466
attach das und dann ist halt eben fertig. Null manuelles Management mehr.

01:16:07.646 --> 01:16:12.706
Ja, sehr cool. Also wirklich so, der Worker operiert dann quasi autark und du

01:16:12.706 --> 01:16:15.026
musst nicht mehr Post-Message-Krempel dahin machen. Mhm.

01:16:17.246 --> 01:16:21.586
Sehr nice. Ja, ist super. Habe ich noch nie irgendwas benutzen sehen,

01:16:21.646 --> 01:16:25.906
aber es ist halt immer so ein Gehirnexplosionsding, wenn ich das zeige.

01:16:26.446 --> 01:16:30.566
Ja, wahrscheinlich, wenn das einer benutzt, dann wahrscheinlich irgendwie hier

01:16:30.566 --> 01:16:34.286
Surma, wobei ich nicht weiß, ob der noch viel mit Web macht gerade oder ob der

01:16:34.286 --> 01:16:36.566
noch in Rust abgetaucht ist.

01:16:36.726 --> 01:16:41.566
Also der ist ja nicht mehr so richtig, taucht, ich sehe den nicht mehr,

01:16:41.726 --> 01:16:45.166
seit der bei hier Shopify arbeitet. Mhm.

01:16:46.319 --> 01:16:51.439
Ja, der ist ein bisschen untergegangen, das stimmt. Genau, wir haben noch zwei Sachen in der Liste.

01:16:52.119 --> 01:16:54.919
Machen wir eben schnell, komm. Genau, also Firefox hat jetzt,

01:16:55.159 --> 01:17:00.139
oder sagen wir mal, Firefox 149 Beta hat Popover-Hints, unterstützt die jetzt.

01:17:00.479 --> 01:17:05.399
Das sind ja die Popovers, die nicht durch User-Interaktionen getriggert werden.

01:17:07.819 --> 01:17:11.819
Sondern wo man, also du machst halt Popover und dann gleich Hint.

01:17:12.339 --> 01:17:16.679
Und dann gibt es auf verschiedenen Devices unterschiedliche Heuristiken,

01:17:16.879 --> 01:17:23.279
zum Beispiel auf Desktop-Devices gucken die sich an, wo du mit deinem Pointer gerade rum,

01:17:24.299 --> 01:17:29.339
fuchtelst und dann geht ein Popover auf, je nachdem, wenn dein Pointer über einem,

01:17:30.599 --> 01:17:34.199
gepopoverten Element ist und auf Mobile funktioniert das so ein bisschen wie

01:17:34.199 --> 01:17:37.099
bei den Speculation Rules, dass die halt Heuristiken haben,

01:17:37.419 --> 01:17:40.479
wo die sagen, wenn du irgendwo hingeschreut bist und eine gewisse Zeit auf den

01:17:40.479 --> 01:17:44.559
Ausschnitt des Bildschirms guckst und da ist ein Popover des Typs Hint,

01:17:44.559 --> 01:17:48.479
drin verbaut, dann würde das dann irgendwann sagen, ah, ich glaube,

01:17:49.079 --> 01:17:54.419
die Userin, der User interessiert sich für mich, ich ploppe jetzt auf.

01:17:55.399 --> 01:17:58.299
Das ist das eine. Kann der Safari noch nicht.

01:17:59.479 --> 01:18:02.819
Genau, ich weiß auch nicht, ob das Interop ist oder nicht. Ich glaube ja.

01:18:04.419 --> 01:18:09.179
Genau, und das andere ist, dass der Firefox das Close-Watcher-Interface implementiert.

01:18:09.359 --> 01:18:17.899
Das hat der Chrome schon bestimmt seit zwei Jahren oder so und dieses Interface hat den Zweck, also,

01:18:18.719 --> 01:18:23.279
es gibt ja bestimmte Interaktionspatterns auf Geräten, jetzt nicht unbedingt

01:18:23.279 --> 01:18:28.019
auf Desktop-Devices, aber auf Mobile-Devices, mit denen du Fenster schließt.

01:18:28.819 --> 01:18:31.519
Also auf Desktop kennt man das natürlich, also da erwarten wir eigentlich immer,

01:18:31.579 --> 01:18:33.939
wenn wir Escape drücken, dass ihr ein Fenster schließt, das Gefühl ist.

01:18:34.759 --> 01:18:39.319
Das wäre vielleicht auf Desktop das Pattern. Auf Mobile ist es eine Swipe-Geste,

01:18:39.499 --> 01:18:44.459
die in nativen Apps auf einer gewissen Plattform dann Dinge, Fenster schließen.

01:18:45.359 --> 01:18:48.999
Das können die Browser nicht. Da ist ja so ein Swipe-Geste bislang eigentlich

01:18:48.999 --> 01:18:51.499
immer so ein History-Back oder irgendwie sowas.

01:18:52.179 --> 01:18:57.599
Und du kannst eben mit diesem Close-Watcher sagen, ich will jetzt solche Gesten,

01:18:57.719 --> 01:19:04.519
ich möchte darüber Bescheid bekommen und dann kann ich damit auch zum Beispiel Dialoge schließen.

01:19:04.819 --> 01:19:10.939
Ja, also im Prinzip die device-spezifische und mir nicht notwendigerweise bekannte

01:19:10.939 --> 01:19:13.739
Nutzerinteraktion für mach das weg, wird ausgelöst,

01:19:14.359 --> 01:19:16.219
da kann ich einen Callback draufsetzen und dann darauf reagieren,

01:19:16.299 --> 01:19:19.899
damit dann mein Dialog, meine Sidebar, was auch immer, verschwindet.

01:19:20.491 --> 01:19:24.151
Genau. Alternative wäre halt eben zu recherchieren, was gibt es an Browsern

01:19:24.151 --> 01:19:27.931
und Devices und was haben die da so an Mechanismen, um das zu auszudrücken.

01:19:28.611 --> 01:19:30.931
Genau, aber das skaliert natürlich auch nicht. Also dann hast du vielleicht

01:19:30.931 --> 01:19:34.631
irgendwie Samsung Internet, der macht irgendwie was anderes als Chrome und das,

01:19:34.771 --> 01:19:39.031
also. Ja, der PlayStation-Browser ist irgendwie ganz seltsam. Oder so, genau.

01:19:39.251 --> 01:19:41.831
Und dann verändern sich die Browser auch. Also deswegen ist natürlich so ein

01:19:41.831 --> 01:19:47.631
generisches, so mir egal, wie die Geste ist, aber sag einfach Bescheid, wenn die kommt.

01:19:48.151 --> 01:19:51.451
Wenn dieses Intent des Users kommt, dann ist das natürlich cool.

01:19:52.451 --> 01:19:57.571
Und ergänzend dazu vielleicht die Tatsache, dass du in den Dialog-Elementen

01:19:57.571 --> 01:20:01.191
mittlerweile ein Close-By-Attribut verbauen kannst.

01:20:01.791 --> 01:20:04.851
Und wenn du das auf All setzt, dann hast du dann Light Dismiss.

01:20:04.851 --> 01:20:06.211
Den gibt es schon bei Popover.

01:20:08.031 --> 01:20:11.751
Und der Light Dismiss, der integriert all diese Dinge schon.

01:20:12.011 --> 01:20:18.211
Also du im Grunde, wenn du System in Browsers, der Close-By auf Dialog unterstützt,

01:20:18.671 --> 01:20:21.031
dann brauchst du es dafür schon mal nicht.

01:20:21.131 --> 01:20:25.411
Dann machst du einfach Close-By gleich All und dann schließt sich das bei Drücken von Escape.

01:20:25.791 --> 01:20:30.091
Dann schließt sich das bei Klick außerhalb des Dialogs und dann schließt sich

01:20:30.091 --> 01:20:33.051
es auf mobilen Geräten, wenn man die entsprechende Swipe-Geste macht.

01:20:33.411 --> 01:20:36.331
Und wenn du das richtige mobile Gerät hast.

01:20:37.551 --> 01:20:41.631
Ja, dann? Dann funktioniert das. Wenn du das falsche hast, das mit dem Absell drauf.

01:20:42.811 --> 01:20:45.631
Ach so, der unterstützt das noch nicht. Dieses Close-By-Attribut meinst du?

01:20:45.631 --> 01:20:47.651
Natürlich nicht. Gehen wir denn da sonst hin?

01:20:48.732 --> 01:20:53.932
Ja, gut. Okay, aber warte mal, hier Interop, da ist das auch drin.

01:20:54.932 --> 01:20:59.692
Also Ende des Jahres ist das dann auch in Safarien. Okay, also müssen wir weiterhin

01:20:59.692 --> 01:21:03.852
alles tun, um nicht von einem Zug überfahren zu werden, auf das wir in den Genuss

01:21:03.852 --> 01:21:05.912
dieses Features auch auf dem EIOS.

01:21:05.912 --> 01:21:08.872
Genau, sobald wir das haben, können wir uns vom Zug überfahren lassen.

01:21:09.272 --> 01:21:10.812
Dann ist es ja alles egal.

01:21:11.472 --> 01:21:14.132
Genau. Hey, wir müssen einfach gucken, ob wir Ende des Jahres noch Züge fahren,

01:21:14.212 --> 01:21:16.492
so mit Energie und Gedöns ist ja nun alles nicht sicher.

01:21:17.392 --> 01:21:18.752
Elektrozüge? Genau.

01:21:19.952 --> 01:21:22.752
Ja, aber dann wird ja, wenn wir nicht mal Auto fahren können,

01:21:22.772 --> 01:21:26.692
der ganze Strom für die Flugtaxis gebraucht. Dann kannst du dir ja den ICE auch in den Hut stecken.

01:21:27.272 --> 01:21:30.312
Okay, ja, das hatte ich natürlich jetzt übersehen. Tja.

01:21:31.212 --> 01:21:33.432
Vielleicht noch sieben letzte Stichworte.

01:21:34.732 --> 01:21:40.232
Firefox kann, unterstützt jetzt auch die Length-Units CH,

01:21:40.532 --> 01:21:47.012
EX, IC und CAP in der Route-Variante, also Route-Schriftgröße,

01:21:47.012 --> 01:21:50.052
so wie wir das von REM kennen oder REM,

01:21:50.412 --> 01:21:55.112
gibt es eben RCAP, RCH, REX und RIC. RCAP, ja.

01:21:55.992 --> 01:22:00.412
Da müsste man nur einen Buchstaben austauschen, damit das kontrovers wird. RCAP, RCAP.

01:22:01.353 --> 01:22:05.993
Okay, man müsste zwei Buchstaben rausnehmen. Ich weiß jetzt wieder, ja. Es endet auf einem P.

01:22:07.133 --> 01:22:10.033
Und du sprichst in Initialien unserer ehemaligen Außenministerin.

01:22:10.153 --> 01:22:13.073
Werft den Purchen zu Boden, weißt du doch, man kann das so oder so aussprechen.

01:22:13.353 --> 01:22:16.093
Außerdem finde ich es gut, wenn ich meine Schriftgröße jetzt als Rex angeben

01:22:16.093 --> 01:22:18.553
kann. Das entspricht zu meinem Selbstbild.

01:22:18.913 --> 01:22:21.593
Das ist top. Genau. Oder Rick and Rex.

01:22:22.573 --> 01:22:24.133
Das klingt wie ein Snack.

01:22:25.213 --> 01:22:30.613
Genau, dann hat Firefox 148 so einen Quirk behoben, den die halt hatten,

01:22:30.733 --> 01:22:33.613
weil Browser sich da früher irgendwie, weil es da keine Standards für gab,

01:22:34.113 --> 01:22:38.253
nämlich, wenn du einen iframe hattest und oder ein frame,

01:22:39.493 --> 01:22:46.793
also iframe und du setzt das, die Source auf about blank, dann hast du zwei

01:22:46.793 --> 01:22:48.873
Load-Events im Firefox gehabt, nämlich einmal.

01:22:50.273 --> 01:22:55.973
Bei dem leeren Screen vor about blank und dann nachdem about blank geladen war,

01:22:56.053 --> 01:22:58.673
in Anführungszeichen, was im Grunde ja auch quasi nichts ist,

01:22:58.773 --> 01:23:02.913
aber Firefox hat dann quasi doppelt gefeuert, das ist jetzt weg.

01:23:03.113 --> 01:23:07.513
Das hatten die auch gebissen, gerade erst vor vielleicht so drei Wochen, vier Wochen.

01:23:07.593 --> 01:23:10.413
Ich wollte es gerade sagen, das ist ja nicht einfach nur so die Updaten about

01:23:10.413 --> 01:23:12.933
Blank, sondern das ist ja tatsächlich ein Problem gewesen.

01:23:13.593 --> 01:23:16.313
Genau, weil ich da was reingeladen habe und eigentlich davon ausgegangen bin,

01:23:16.413 --> 01:23:19.313
dass wenn ich das Load-Event bekomme, dass das dann geladen ist,

01:23:19.513 --> 01:23:24.693
dass das dann passiert ist und das war eben nicht der Fall und das lag daran.

01:23:26.213 --> 01:23:30.313
Genau, dann ist die Sanitizer-API natürlich jetzt auch in Firefox,

01:23:30.653 --> 01:23:33.713
da verweisen wir auf die Folge mit dem Frederic Braun,

01:23:34.093 --> 01:23:39.533
die wir nicht allzu lange Zeit aufgenommen haben, wo wir da sehr ausschweifend

01:23:39.533 --> 01:23:42.513
drüber gesprochen haben. Sehr coole API.

01:23:44.393 --> 01:23:47.673
Genau, dann hat Safari begonnen den

01:23:47.673 --> 01:23:54.233
Doppelpunkt-Heading, die Pseudoklasse Doppelpunkt-Heading zu supporten,

01:23:55.053 --> 01:24:00.413
nicht hinter einem Fleck, in Firefox gibt es das auch hinter einem Fleck und damit kann man alle.

01:24:01.641 --> 01:24:06.901
Headings, Heading-Tags gleichzeitig ansprechen. Ja, und auch nur die,

01:24:07.141 --> 01:24:11.601
also deine Web-Component, die auch eine Heading sein möchte, ist außen vor.

01:24:11.801 --> 01:24:16.141
Könnte man mal eine Ergänzung anfordern in Element & Tunnels.

01:24:16.721 --> 01:24:19.621
Genau, das haben wir uns in der Vorgeschreibung gefragt, ob wenn man Roll-Heading

01:24:19.621 --> 01:24:23.001
da drauf legt, ob das dann irgendwie da auch reinfällt. Nee,

01:24:23.021 --> 01:24:24.221
pass auf, das ist ja nochmal was anderes.

01:24:25.121 --> 01:24:28.441
Also die Dinger, die jetzt angesprochen werden, sind ja intrinsische Headings.

01:24:28.761 --> 01:24:31.361
Ich will Web-Components haben, die sagen können, ich bin auch eine Heading.

01:24:31.641 --> 01:24:35.061
Und du willst das über ein ARIA-Attribut regeln, was ja dann jedes dahergelaufen ist.

01:24:35.421 --> 01:24:40.181
Also deine Web-Component extents dann dieses Heading-Element sozusagen.

01:24:40.281 --> 01:24:44.661
Nee, nee, es gibt ja Element-Internals, womit du quasi Features aus internen

01:24:44.661 --> 01:24:47.401
Algorithmen, aus den Standards auf deine Elemente anwenden kannst.

01:24:47.501 --> 01:24:53.341
Damit kannst du ja zum Beispiel deiner Web-Component eine Default-Role geben für ARIA zum Beispiel.

01:24:54.441 --> 01:25:00.161
Und das geht zum Beispiel, wobei ich letztens gelernt habe, eine Frage,

01:25:00.201 --> 01:25:03.061
die mich auf Mastodon erreicht hat, von, heißt er nicht auch Peter?

01:25:03.721 --> 01:25:06.121
Ein Peter auf Masse, dann fragt er mich jedenfalls danach. Gibt es eigentlich

01:25:06.121 --> 01:25:12.041
eine Möglichkeit, dieses interne gesetzte ARIA-Value zu exposen nach außen?

01:25:12.581 --> 01:25:15.941
Weil, stellt sich raus, dass Accessibility-Test-Tools das nicht können.

01:25:17.841 --> 01:25:22.221
Die wissen halt, ein Main-Element hat eine Role-Main und die wissen halt eben,

01:25:22.301 --> 01:25:26.481
sie müssen sich HTML-Attribute namens Role angucken, um anzuschauen,

01:25:26.561 --> 01:25:28.381
ob dann irgendwie das Diff eine spezielle Role hat.

01:25:28.561 --> 01:25:31.661
Aber wenn ich einfach so, keine Ahnung, My Heading gebaut habe,

01:25:32.121 --> 01:25:35.141
haben die keine Möglichkeit. Weder das eine noch das andere zu. Richtig, genau.

01:25:35.461 --> 01:25:38.841
Das hat nichts Intrinsisches an sich, sondern ist halt dieser dritte Weg da.

01:25:40.235 --> 01:25:43.495
Und das können die halt nicht feststellen. Ich weiß nicht, warum ich das jetzt erzähle.

01:25:43.615 --> 01:25:46.835
Was ist dann, wenn man irgendwie dort, also wenn man das quasi programmatisch

01:25:46.835 --> 01:25:48.555
abfragen würde, würde das gehen?

01:25:49.355 --> 01:25:53.255
Was programmatisch abfragen würde? Also wenn ich jetzt zum Beispiel Custom Element

01:25:53.255 --> 01:25:58.375
selektieren würde und dann .roll mir ausgeben lassen würde? Nee,

01:25:58.435 --> 01:25:59.275
das ist ja der zweite Fall.

01:25:59.755 --> 01:26:03.335
Der zweite Fall ist ja, wenn das Roll-Attribut gesetzt ist. Aber das ist ja

01:26:03.335 --> 01:26:05.915
der Fall, du hast einfach nur den HTML-Tag. Du hast nur das Main.

01:26:06.255 --> 01:26:09.535
Dann hat das ja was Intrinsisches. Und wenn du dann Roll abfragst,

01:26:09.535 --> 01:26:10.475
steht da ja auch nichts drin.

01:26:11.015 --> 01:26:14.375
Genau, wenn ich das auf dem H1 mache, würde ich da auch nichts bekommen wahrscheinlich.

01:26:14.755 --> 01:26:16.515
So sieht's aus. Ja, ja, ja.

01:26:17.495 --> 01:26:22.715
So, jedenfalls, dieser Heading Pseudoselektor selektiert nur H1, 2, 3, 4, 5, 6.

01:26:23.355 --> 01:26:26.775
Dinge mit einem Rollheading oder Dinge, die qua Web Component ein Heading sein

01:26:26.775 --> 01:26:30.095
wollen, sind damit nicht miterfasst.

01:26:30.635 --> 01:26:35.015
Ja, genau. Für die einen kann das ja richtig so sein, für die anderen ist es

01:26:35.015 --> 01:26:36.535
vielleicht so, dass man denkt so, ja, weiß nicht.

01:26:36.815 --> 01:26:40.035
Wir brauchen einfach nur nutzerdefinierte Pseudoklassen. Dass ich mir einfach

01:26:40.035 --> 01:26:42.635
selber in CSS sagen kann, ich meine, ich kann if machen, ich kann Funktionen

01:26:42.635 --> 01:26:44.975
machen, ich kann allen möglichen Blödsinn machen, warum kann ich mir nicht auch

01:26:44.975 --> 01:26:48.235
meine eigenen Pseudoklassen machen, mit Koks und sonstigen Ergänzungen?

01:26:49.575 --> 01:26:54.555
Keine Ahnung, weil Houdini das dafür gedacht war, irgendwie im Sandeverlauf

01:26:54.555 --> 01:27:00.195
ist. Wir müssen echt nochmal da wegholen und wieder zu Google schicken. Ja, genau.

01:27:01.875 --> 01:27:06.655
Wir haben aber noch eine Pseudoklasse, die wir benutzen können in allen Browsern

01:27:06.655 --> 01:27:08.275
außer dem Safari, glaube ich.

01:27:09.535 --> 01:27:14.355
Das ist die Open-Pseudo-Klasse. Also alles, was irgendwie openbar ist,

01:27:14.895 --> 01:27:20.575
sei es ein Dialog, vielleicht ein Popover, aber auch Inputs,

01:27:20.635 --> 01:27:22.995
die irgendwelche Picker haben, die geöffnet werden können.

01:27:23.855 --> 01:27:29.035
All das würde dann erfasst werden von dieser Open-Pseudo-Klasse.

01:27:29.655 --> 01:27:32.115
Ja, hoffentlich auch die Custom-Selects, sonst wird es interessant.

01:27:33.672 --> 01:27:39.172
Ja, gute Frage. Ich gehe mal davon aus, die Welt ist kompliziert. Nicht wahr?

01:27:40.192 --> 01:27:44.372
Das finale Ding, wo ich, irgendwie war das so,

01:27:44.472 --> 01:27:49.752
ich hatte Release Notes gesehen oder einen Post von der Jen Simmons zu einer

01:27:49.752 --> 01:27:53.152
Safari-Version und da waren viele Sachen drin und das war das,

01:27:53.212 --> 01:27:56.632
was mich am meisten gefreut hat, nämlich das Safari,

01:27:57.752 --> 01:28:03.172
Score Anchoring jetzt unterstützt, was die anderen Browser seit Trilliarden Jahren schon können.

01:28:05.092 --> 01:28:09.652
Und das ist halt quasi, dass dein Viewport an der Stelle stehen bleibt,

01:28:09.772 --> 01:28:12.472
wo er quasi runtergescrollt gerade ist,

01:28:12.712 --> 01:28:17.452
auch wenn vielleicht oben drüber größere oder kleinere Elemente eingefügt werden

01:28:17.452 --> 01:28:20.452
und sich sozusagen das Dokument verkürzt oder verlängert.

01:28:20.952 --> 01:28:25.512
Um Gottes Willen, das können die anderen Browser ja wirklich seit der Kreidezeit. Ja, eben.

01:28:26.292 --> 01:28:32.552
Genau, und Safari war halt der einzige Firefox 66, Chrome 56.

01:28:33.132 --> 01:28:37.832
Genau. Und man konnte das im Safari eben nur fixen, also zumindest wenn man

01:28:37.832 --> 01:28:40.052
jetzt selber, wenn man Einfluss drauf hatte,

01:28:41.032 --> 01:28:44.652
konntest du dann eben einfach die Scrollpositionen weg sichern,

01:28:45.392 --> 01:28:51.772
das dann quasi einbauen und die dann quasi adjustiert wieder anwenden.

01:28:53.252 --> 01:28:55.492
Das war ein bisschen doof. Und

01:28:55.492 --> 01:28:58.632
das kann Safari jetzt oder kann das jetzt irgendeine Technology Preview?

01:28:59.492 --> 01:29:06.612
Ich glaube, ja, das ist jetzt hier in meinen Notizen verloren gegangen, aber egal.

01:29:06.892 --> 01:29:09.592
Also bald kann der Safari das. Ich sag mal, der kann das. Ich glaube, er kann das.

01:29:10.172 --> 01:29:14.192
Genau. Und ansonsten haben wir ja auch in der V-Sprechung darüber gesprochen.

01:29:15.432 --> 01:29:18.772
Safari ist ja mittlerweile mit den Death Rail Leuten relativ gut dabei.

01:29:19.312 --> 01:29:21.952
Das heißt, da gibt es dann ja Menschen, denen man sagen kann,

01:29:22.252 --> 01:29:24.512
falls da nur eine Technology Preview drin ist,

01:29:25.492 --> 01:29:30.632
dass sie vielleicht mal im Rahmen ihrer Möglichkeiten einen saftigen Tritt in

01:29:30.632 --> 01:29:33.972
den Hintern vom Dev-Team vielleicht gezielt platzieren können in Richtung von

01:29:33.972 --> 01:29:35.912
Scroll-Anchoring. Weil das ist wirklich ein bisschen...

01:29:37.354 --> 01:29:40.914
Schwach, dass das nicht geht. Na, ich weiß nicht, das ist irgendwie einfach

01:29:40.914 --> 01:29:41.834
unter den Tisch gefallen.

01:29:42.054 --> 01:29:45.894
Aber tatsächlich, also die Fragen auch aktiv nach Wünschen.

01:29:46.294 --> 01:29:49.654
Das ist halt meistens so, wie wenn man selber gefragt wird, was willst du zum

01:29:49.654 --> 01:29:51.314
Geburtstag, dann weiß man irgendwie gar nichts.

01:29:52.094 --> 01:29:56.854
Das heißt also, wenn euch solche Dinge auffallen, der Jack Archibald von Firefox

01:29:56.854 --> 01:30:03.714
oder das Firefox Dev, der Dev-Account, was aber er ist aktuell, fragt das auch ab und zu.

01:30:03.934 --> 01:30:06.854
Also wenn ihr irgendwelche solche Sachen habt, dann schreibt die am besten irgendwann

01:30:06.854 --> 01:30:08.714
irgendwo auf, damit wenn dann

01:30:08.714 --> 01:30:13.074
diese Frage kommt, ihr auch sozusagen direkt was dazu schreiben könnt.

01:30:13.554 --> 01:30:16.854
Ja, oder ich würde die auch einfach anschreiben. Die haben doch bestimmt die

01:30:16.854 --> 01:30:21.454
Technologie der Notiz schon für sich erfunden und können das dann in den großen

01:30:21.454 --> 01:30:25.014
Eimer mit Wünschen reinfüllen. Ja, genau.

01:30:26.394 --> 01:30:33.774
Ja, und dann wären wir jetzt durch mit den Spannungsneuerungen der letzten 20 Wochen.

01:30:34.034 --> 01:30:37.514
Ein paar mehr gab es, viele Bugfixes und so, aber so die anderen Sachen,

01:30:37.634 --> 01:30:42.934
die waren so ein bisschen so, also WebGPU wird jetzt auch unterstützt auf Safari,

01:30:43.014 --> 01:30:45.414
auch cool, aber sehr special interest. Ja.

01:30:46.514 --> 01:30:50.274
Ich meine, das sind die Dinge, zu denen wir was sagen konnten und Perspektiven beitragen konnten.

01:30:51.326 --> 01:30:54.746
Richtig, genau. Also WebGPU könnte ich auch noch was zu sagen,

01:30:54.926 --> 01:30:56.746
aber benutze ich einfach nicht.

01:30:57.206 --> 01:31:01.526
Also liegt davon daran, dass ich ja aus dem 3D-Bereich komme und da immer so

01:31:01.526 --> 01:31:06.286
mein Herz da immer noch so ein bisschen dranhängt und ich das dann immer spannend finde.

01:31:06.426 --> 01:31:08.586
Aber brauchen tue ich es halt einfach genau gar nicht.

01:31:09.106 --> 01:31:14.126
Also okay, was macht es denn? Also mache ich damit wirklich GPU-Sachen oder

01:31:14.126 --> 01:31:17.966
mache ich damit irgendwie generelle Berechnungen, KI-Blödsinn?

01:31:18.126 --> 01:31:23.166
Was kann ich damit machen? Also du kannst damit generelle KI-Brechnungen machen auf der GPU.

01:31:24.246 --> 01:31:28.846
Der Vorgänger von WebGPU ist ja WebGL, das war ja QL-Standard.

01:31:28.986 --> 01:31:32.586
Es gab auch mal so WebCL, das war ja mal, aber ich glaube, das hat es irgendwie

01:31:32.586 --> 01:31:39.086
nie dann über die Zählinie geschafft. Das war ja Web Compute Language oder Compute

01:31:39.086 --> 01:31:42.906
Library, während WebGL Web Graphics Library ist.

01:31:43.466 --> 01:31:51.026
Und das ist wiederum basiert auf OpenGL ES 2.0, das ein Subset von OpenGL ist.

01:31:51.226 --> 01:31:55.666
Und OpenGL ist halt von Silicon Graphics erfunden worden und 30 Jahre alt.

01:31:56.746 --> 01:32:00.206
Genau, das ist ja so der kleinste gemeinsame Nenner gewesen.

01:32:00.846 --> 01:32:03.406
Genau, und wie es halt so bei kleinsten gemeinsamen Nennern ist,

01:32:03.826 --> 01:32:09.826
also alle Devices können das, es läuft, aber es ist einfach ultraantik.

01:32:09.986 --> 01:32:12.326
Und bestimmte Dinge kannst du halt nicht machen. Also es hat Nachteile.

01:32:12.526 --> 01:32:14.286
Es ist Single-Threaded.

01:32:14.986 --> 01:32:19.206
Du kannst also, und das haben wir, das ist auch bei so grafischen Stellen wie

01:32:19.206 --> 01:32:22.186
DirectX und Metal und Vulkan.

01:32:22.926 --> 01:32:29.186
Vulkan ist ja der Nachfolger von OpenGL. die sind entwickelt worden unter anderem

01:32:29.186 --> 01:32:33.006
weil OpenGL nur Single-Threaded arbeitet,

01:32:33.286 --> 01:32:38.986
wir Multicore-CPUs haben und die GPUs einfach nicht schnell genug von diesem einen CPU-Kern,

01:32:39.146 --> 01:32:45.526
den OpenGL ja nur unterstützt und WebGL auch gefüttert wurde und genau das geht

01:32:45.526 --> 01:32:50.406
jetzt halt Multithreaded, das heißt also unsere ganzen 8 bis 16 Cores können

01:32:50.406 --> 01:32:54.046
die GPU zuwerfen mit Kram und die eidelt halt nicht rum.

01:32:55.953 --> 01:33:02.973
Das andere ist, dass du, also so Sachen wie Partikelsimulationen oder irgendwelche solche Berechnungen,

01:33:03.793 --> 01:33:09.393
Physikberechnungen oder so, die konntest du auch mit OpenGL und WebGL nicht

01:33:09.393 --> 01:33:12.993
in der GPU fahren, sondern musstest die auf der CPU machen, auf dem Mainstrad,

01:33:13.133 --> 01:33:15.393
der eh schon beschäftigt war, die GPU zu jonglieren.

01:33:15.593 --> 01:33:20.493
Und ich sehe gerade jetzt, das hat ja hier ganz einfach in der API so ein Compute-Pipeline-Konzept,

01:33:21.013 --> 01:33:24.193
dass man dann sagen kann, explizit eine Schnittstelle für nicht Grafikkram.

01:33:24.913 --> 01:33:27.713
Genau, und jetzt kannst du das alles quasi auf die Grafikkarte schieben.

01:33:28.053 --> 01:33:34.893
Die Grafikkarte berichtet dann die Grafik oder die Triangles und das Shading und so weiter.

01:33:35.233 --> 01:33:37.513
Und eben Physik und vielleicht Partikel.

01:33:38.113 --> 01:33:42.193
Und die CPU muss halt den Kram gar nicht mehr machen.

01:33:43.113 --> 01:33:47.253
Und kann eben multithreaded die Grafikkarte unter Dampf setzen.

01:33:47.553 --> 01:33:50.053
Ey, und die Shader-Language sieht ja auch nicht aus, als wäre sie aus den 80ern.

01:33:50.053 --> 01:33:54.213
Ah ja, genau. Und die Shader-Language ist eben auch eine neue und die ist jetzt auch eben debuggable.

01:33:54.853 --> 01:33:57.273
Ich wollte es gerade, das sieht halt wirklich aus wie irgendwas,

01:33:57.433 --> 01:34:01.753
wo ja, okay, das ist zuwutbar und das ist nicht irgendwie so,

01:34:01.973 --> 01:34:05.973
okay, ich muss jetzt irgendwie mir den Bärenpelz anziehen, um da ins richtige

01:34:05.973 --> 01:34:07.893
Mindset zu kommen. Sehr schön.

01:34:08.393 --> 01:34:12.333
Ja, und ich glaube, dass das halt, ich sag mal, unsere Bewegungspunkte ist wahrscheinlich

01:34:12.333 --> 01:34:15.433
als Nutzer, also ich weiß nicht, wie oft du irgendwelche,

01:34:16.093 --> 01:34:20.273
AAA-Title im Browser spielst oder irgendwie tolle 3D-Spiele,

01:34:20.453 --> 01:34:23.753
wahrscheinlich eher selten, aber wir würden wahrscheinlich Nutznießer werden

01:34:23.753 --> 01:34:28.753
der Tatsache, dass du eben natürlich auch KI-Berechnungen über Web-GPU auf der

01:34:28.753 --> 01:34:30.273
GPU laufen lassen kannst.

01:34:30.633 --> 01:34:35.533
So, wenn du irgendwelche KI-Frameworks benutzt oder auch, ja,

01:34:35.573 --> 01:34:38.813
gab's ja auch schon so Frameworks für irgendwie so Gesichtserkennung und solche

01:34:38.813 --> 01:34:40.533
Dinge, das kannst du dann auch.

01:34:41.373 --> 01:34:45.693
Vor allen Dingen gibt's dafür ja in den Browsern ja auch tatsächlich extra APIs,

01:34:45.833 --> 01:34:48.113
aber wenn du wirklich dein unabhängiges, eigenes Ding bauen willst,

01:34:48.193 --> 01:34:51.573
ist das sicherlich eine Idee zu.

01:34:53.217 --> 01:34:56.937
Naja, und ich meine, wie gesagt, der ganze Unterbau ist auf jedem Device vorhanden.

01:34:57.017 --> 01:35:01.617
Und wenn das Web da jetzt keine Schnittstelle für hätte, wäre halt einfach schwach. Ja, genau.

01:35:01.717 --> 01:35:04.517
Und der finale Vorteil von WebGPU

01:35:04.517 --> 01:35:12.337
gegenüber WebGL ist eben, dass es für Erweiterbarkeit entwickelt wurde.

01:35:12.437 --> 01:35:15.877
Das heißt, du kannst, also Grafikkarten können ja neue Sachen,

01:35:16.137 --> 01:35:19.577
die können dann irgendwie, keine Ahnung, auf einmal können die Raytracen oder

01:35:19.577 --> 01:35:23.797
die haben bestimmte Texturarten, die die dann auf einmal verstehen und das kannst du dann,

01:35:24.197 --> 01:35:30.797
also WebGPU ist so gestaltet, dass das Feature-Set eben nicht das ist, was jetzt bekannt ist,

01:35:31.217 --> 01:35:35.637
sondern du kannst es quasi nach und nach, kannst du zulernen sozusagen.

01:35:36.677 --> 01:35:40.617
Ja, ich meine, der wird sicherlich auch da irgendwann mal eine Version 3.0 geben müssen.

01:35:41.557 --> 01:35:45.657
Aber weißt du, was wir in dieser Sendung gesehen haben, sind so dann jetzt mit

01:35:45.657 --> 01:35:48.837
WebGPU auch zwei Instanzen von etwas, was ja heutzutage eher selten ist.

01:35:49.277 --> 01:35:52.537
Nämlich, da kommt eine Version 2.0 von was raus und man stellt fest,

01:35:52.657 --> 01:35:54.537
ah, okay, das ist tatsächlich besser.

01:35:56.677 --> 01:36:03.457
Ja. Also hier die Navigation API, nie wieder History API anfassen, super.

01:36:04.677 --> 01:36:07.737
So, und selbst beim Durchscrollen durch die WebGPU API und meinem sehr,

01:36:07.797 --> 01:36:11.697
sehr marginalen Verständnis von WebGL vorher, erkenne ich halt sofort,

01:36:11.917 --> 01:36:15.437
dass das einfach einen ganz anderen Geist atmet. Ja.

01:36:16.357 --> 01:36:18.917
Genau. Einfach auch so absolut. Ich meine, ich mache damit nichts,

01:36:19.057 --> 01:36:21.477
aber wenn ich es jetzt wollte, würde ich wahrscheinlich hier viel schneller

01:36:21.477 --> 01:36:23.537
einen Einstieg reinfinden, als

01:36:23.537 --> 01:36:27.317
in dieses, wirklich, wie du ja schon so sagtest, antike Zeug von damals.

01:36:28.097 --> 01:36:33.357
Ja, genau. Und du hast ja auch teilweise, musst du ja bei WebGL Fremdkörper

01:36:33.357 --> 01:36:36.617
mit Fremdkörpern hantieren, die eigentlich überhaupt gar nicht zu Hause sind

01:36:36.617 --> 01:36:38.597
im Web. Also die ganz merkwürdig sind.

01:36:39.337 --> 01:36:42.517
Ja, okay. So native Syntax für jetzt die Shader-Language sehe ich jetzt hier

01:36:42.517 --> 01:36:43.517
drin auch nicht so richtig.

01:36:44.857 --> 01:36:47.877
Das ist immer noch ein String, den ich da irgendwie reinstecken muss, aber auch das ist...

01:36:49.760 --> 01:36:53.180
Besser. Kann ich auch als Text importieren mit einem Modulescript.

01:36:53.740 --> 01:36:55.560
Import Type Text. Kein Problem.

01:36:56.300 --> 01:36:59.740
Ja. Ist so. Vielleicht auch bald als Shader Language. Ja, warum nicht?

01:36:59.840 --> 01:37:01.920
Warum soll das nicht direkt verarbeitet werden können? Auf geht's.

01:37:03.500 --> 01:37:06.560
Okay, so. Nachdem wir es jetzt geschafft haben, noch ein bisschen länger zu

01:37:06.560 --> 01:37:10.740
quatschen, weil ich doch gesagt habe, komm, Shep, erzähl mir was über Grafikkarten. Ja.

01:37:11.480 --> 01:37:15.620
Genau, also wenn ihr uns genau, ihr könnt uns supporten bei Patreon,

01:37:15.740 --> 01:37:20.600
aber ihr könnt uns auch GeForce RTX 5090 schicken, das ist auch okay?

01:37:20.800 --> 01:37:22.760
Oder das Geld da reinstecken und uns schicken?

01:37:23.760 --> 01:37:29.060
Gib mir SSDs. Oder SSDs oder RAM-Riegel. RAM-Riegel habe ich genug.

01:37:30.080 --> 01:37:34.080
Das Wir brauchen das Working Draft Rechenzentrum. Wir müssen auch eins bauen jetzt.

01:37:34.280 --> 01:37:38.900
Einfach so. Ich würde es nicht Rechenzentrum sagen, sonst sind wir wenn es losgeht,

01:37:38.900 --> 01:37:42.260
auch bei denen, die angezündet werden. Wir haben kein Rechenzentrum. Okay.

01:37:43.020 --> 01:37:47.580
Wir sind immer noch hier individuelle Untergrund-Podcaster. Wir haben von Anfang

01:37:47.580 --> 01:37:48.580
an die Wahrheit berichtet.

01:37:49.200 --> 01:37:53.000
So. Und wir sind definitiv kein Rechenzentrum. Bitte zündet die anderen an, nicht uns.

01:37:53.520 --> 01:37:56.700
Ja, okay. Dann machen wir das so. Aber schickt mir gerne SSD,

01:37:56.840 --> 01:37:57.560
wenn ihr eine übrig habt.

01:37:58.100 --> 01:38:02.760
Genau, schickt den Peter SSDs und schickt uns auf einem unserer Kanäle,

01:38:02.860 --> 01:38:09.780
die ihr alle auf der Webseite findet, gerne Feedback, wenn ihr Feedback habt, wenn ihr Fragen habt,

01:38:10.780 --> 01:38:13.700
und schickt auch gerne generell Fragen.

01:38:15.580 --> 01:38:20.480
Das haben wir jetzt mal gemacht, also vor dem ein, zwei, drei Folgen. Genau.

01:38:21.520 --> 01:38:24.360
Das könnten wir auch mal wieder machen. Genau.

01:38:24.560 --> 01:38:28.220
Schreibt sie uns irgendwo hin. Kommt in den Community-Slack.

01:38:28.360 --> 01:38:29.560
Schaut uns auf Social Media an.

01:38:31.060 --> 01:38:36.200
Genau. Und geht zu Bion Tellerrand. Ich habe immer noch keine Anfrage für jemanden,

01:38:36.340 --> 01:38:39.520
der zu Bion Tellerrand kommt, den ich durch Düsseldorf führen kann.

01:38:40.540 --> 01:38:43.300
Das heißt, ich sitze einfach nur auf meinem Hintern oder was.

01:38:44.040 --> 01:38:47.000
Ja, und das ist ja nicht gut. Shad macht gute Führungen durch Düsseldorf.

01:38:47.440 --> 01:38:49.140
Genau. Kann ich aus Erfahrung bestätigen.

01:38:51.101 --> 01:38:55.141
Alles klar. Dann danke fürs Zuhören. Danke, Peter. Hat Spaß gemacht.

01:38:55.341 --> 01:38:58.321
Ich habe neun Millionen Sachen gelernt. Ich wollte es gerade sagen.

01:38:58.981 --> 01:39:00.561
Ja, sehr gut. Gut, dass wir das hier machen.

01:39:01.641 --> 01:39:08.781
Und dann geht es nächste Woche weiter und da wird es gehen um VZERO von Vercel,

01:39:09.321 --> 01:39:12.121
mit einem der Menschen dahinter.

01:39:13.141 --> 01:39:15.921
Also man kann viel über diesen Podcast sagen, aber nicht, dass wir eintönig

01:39:15.921 --> 01:39:18.621
werden, dass die Themen ausverlangen geht. Ja, das stimmt.

01:39:20.081 --> 01:39:23.981
Also, Dann bis nächste Woche. Bis dahin. Tschüssi. Tschüss.