WEBVTT

00:00:00.017 --> 00:00:05.637
Alternative Texte für generierten Content. Also Content in CSS Before, After kennt man ja,

00:00:06.257 --> 00:00:08.977
aber dass man dann dazu auch einen Alternativtext angeben kann,

00:00:09.017 --> 00:00:12.597
indem man einfach nach seiner URL oder seinem Text oder seinem Symbol oder hast

00:00:12.597 --> 00:00:16.317
du nicht gesehen, ein Slash macht und Alternativtext angibt, das war mir nicht klar.

00:00:16.417 --> 00:00:19.337
Und das habe ich jetzt eben erst geschnallt und der Safari supportet das jetzt

00:00:19.337 --> 00:00:20.257
auch und das ist voll gut.

00:00:20.937 --> 00:00:25.697
Und dieser Alternativtext ist dann für Screenreader? Oder Voice-Overs? Ja, genau.

00:00:26.160 --> 00:00:32.560
Music.

00:00:30.997 --> 00:00:34.877
Diese Revision von Working Draft wird euch präsentiert von euch, von unserer Community.

00:00:35.657 --> 00:00:38.877
Podcasting ist keine Einbahnstraße und ohne euer Feedback wäre das hier alles

00:00:38.877 --> 00:00:42.417
gar nichts. Und deshalb haben wir für euch einen Slack-Channel eingerichtet.

00:00:42.617 --> 00:00:47.517
Unter draft.community könnt ihr beitragen und mit uns Podcast-Hosts sowie der

00:00:47.517 --> 00:00:49.437
erlesenen restlichen Hörerschaft abhängen.

00:00:49.537 --> 00:00:52.457
Wir diskutieren über den Podcast, tauschen Links aus und immer dann,

00:00:52.537 --> 00:00:55.497
wenn wir etwas Besonderes vorhaben, erfahrt ihr es dort zuallererst.

00:00:55.697 --> 00:00:59.057
Also klickt doch mal rein unter draft.community.

00:01:04.397 --> 00:01:05.597
Revision 612,

00:01:07.737 --> 00:01:12.737
Wie versprochen sind wir wieder am Start zu dritt. Da hätten wir einmal die Vanessa.

00:01:13.577 --> 00:01:20.437
Servus. Den Peter. Moin Moin. Und mich den Shep. Und willkommen zu Teil 2.

00:01:21.197 --> 00:01:26.997
Ja, unserer hoffentlich zweiteiligen Serie zu den Safari-Neuerungen.

00:01:28.357 --> 00:01:34.157
Wir geben uns noch Mühe. wir geben uns Mühe. Aber wir haben ja den Cut in der

00:01:34.157 --> 00:01:36.757
letzten Revision ungefähr bei der Hälfte gemacht.

00:01:38.343 --> 00:01:42.423
Der Themen, die wir uns rausgepickt hatten. Das heißt also, die Chancen stehen

00:01:42.423 --> 00:01:46.883
gut, dass wir es tatsächlich mit zwei Teilen hinkriegen.

00:01:48.123 --> 00:01:53.443
Und wir haben noch einen kleinen Rückgriff am Anfang zu der Switch-Geschichte,

00:01:53.523 --> 00:01:59.083
nämlich der Peter hatte, glaube ich, noch irgendwie ein Kuriosum hinsichtlich

00:01:59.083 --> 00:02:01.823
einer Switch-Implementation zu erzählen.

00:02:01.923 --> 00:02:06.383
Naja, genau, ich habe halt beim Ausfüllen eines Formulares etwas gesehen,

00:02:07.403 --> 00:02:10.903
was eine Implementierung von entweder Radio-Button oder Switch ist.

00:02:11.083 --> 00:02:13.603
Und ich erzähle jetzt mal, wie das funktioniert hat. Und ihr sagt mir,

00:02:13.643 --> 00:02:17.223
ob das jetzt Radio-Buttons, Checkboxes oder ein Switch waren. Okay?

00:02:18.563 --> 00:02:22.943
Also, ich habe angegeben meine Adresse und ich habe angegeben meine Anrede.

00:02:23.403 --> 00:02:25.463
Bin ich Herr Peter Kröner oder bin ich Frau Peter Kröner?

00:02:26.083 --> 00:02:28.523
Ich hatte die Wahl zwischen beiden und das war wie folgt gestylt.

00:02:28.843 --> 00:02:32.663
Das ganze Formular hatte so seine ganzen Inputs und Selects und was da alles

00:02:32.663 --> 00:02:36.863
so drin vorkommt, einfach einheitlich gestaltet. Mit halt einfach so einer Border

00:02:36.863 --> 00:02:40.223
drumherum und dann ist es halt einfach so ein Kasten, kein Border-Radius, kein nix.

00:02:40.643 --> 00:02:45.483
Und halt eben Styles auf der Border für Hover, für Fokus hast du nicht gesehen.

00:02:46.243 --> 00:02:51.403
Okay, aber das heißt, du hast keine diese runden Kringel gehabt oder keine eckigen Boxen, sondern was?

00:02:51.583 --> 00:02:53.723
Nein, ich habe erstmal nur ganz allgemein von den Inputs gesprochen,

00:02:53.883 --> 00:02:55.443
wenn ich irgendwie da Adresse angegeben habe.

00:02:55.683 --> 00:03:00.663
Ah ja. Aber das weiß ich, das Straßenfeld sah jetzt nicht anders aus als das Postleitzahlenfeld.

00:03:00.983 --> 00:03:03.503
Genau, das sah alles gleich aus. Und das Ding ist halt eben,

00:03:03.563 --> 00:03:06.203
diese Auswahlfelder, für bin ich Herr Peter Grüner, bin ich Frau Peter Grüner,

00:03:06.223 --> 00:03:11.083
die sahen halt genauso aus wie ein Texteingabefeld und waren halt nebeneinander angeordnet.

00:03:11.163 --> 00:03:14.263
Also da war halt eben Anrede und dann konnte ich den einen anklicken oder den

00:03:14.263 --> 00:03:16.823
anderen anklicken und dann haben die, wenn ich sie ausgewählt habe,

00:03:16.883 --> 00:03:19.523
den Fokus-Style bekommen und noch ein grünes Häkchen innen drin.

00:03:20.825 --> 00:03:23.805
Okay. Waren das jetzt Radio-Buttons oder Checkboxen?

00:03:26.365 --> 00:03:30.185
Naja, unten drunter müsste es ja dann Radio gewesen sein, theoretisch.

00:03:30.325 --> 00:03:31.925
Das habe ich mir tatsächlich nicht angeschaut.

00:03:32.125 --> 00:03:37.305
Du hast ein JavaScript, dass wenn eins aktiviert ist, das andere deaktiviert wird.

00:03:38.005 --> 00:03:40.785
Also man kann jetzt technisch das schon mit Checkboxen machen.

00:03:42.205 --> 00:03:46.745
Technisch kann ich das mit irgendwie JavaScript von 1993 und einem Schinken-Sandwich machen.

00:03:46.885 --> 00:03:52.445
Das ist gar kein Problem. Aber die Frage ist, was für eine Art von Bedienfeld ist das?

00:03:52.665 --> 00:03:56.645
Also ich kenne das eigentlich als, ich glaube, das nennt sich Stepper.

00:03:57.845 --> 00:04:02.845
Also sowas hast du auch, wenn du so Hotelbuchungen hast, wenn du die Anzahl

00:04:02.845 --> 00:04:05.005
Menschen angeben musst manchmal.

00:04:05.985 --> 00:04:08.065
Na, das ist ein umformatiertes Input-Type-Number.

00:04:09.165 --> 00:04:12.505
Nee, nee. Also dann hast du auch so, du hast quasi so ein zusammenhängendes

00:04:12.505 --> 00:04:17.385
Feld, das aus so quasi mehreren Buttons besteht. Habe ich auch mal gebaut aus

00:04:17.385 --> 00:04:20.865
Radio Buttons, wo ich eine Gruppengröße von 2 bis 10 angeben konnte.

00:04:21.025 --> 00:04:24.165
Genau. Und dann kannst du quasi, also im Prinzip so ein bisschen,

00:04:24.325 --> 00:04:27.505
also du kannst immer nur, ich weiß nicht, so wie bei alten Radios,

00:04:27.625 --> 00:04:30.645
da kannst du ja immer nur so einen Knopf drücken und der andere Knopf,

00:04:30.705 --> 00:04:32.865
der vorher gedrückte Knopf kommt dann raus.

00:04:33.125 --> 00:04:35.925
Also das war dann natürlich analog, mechanisch irgendwie.

00:04:36.285 --> 00:04:39.205
Naja, aber das ist ja der Name, wo Radio Button herkommt. Der kommt ja genau daher.

00:04:40.245 --> 00:04:43.605
Der kommt genau daher. Und da schließt sich der Kreis, natürlich.

00:04:43.965 --> 00:04:47.345
Ich wusste, das war nur ein Test. Die Preisfrage ist halt tatsächlich,

00:04:47.625 --> 00:04:51.025
also wenn man jetzt postuliert, dass überhaupt ein Unterschied besteht zwischen

00:04:51.025 --> 00:04:52.945
einer Switch-Komponente und einer Checkbox-Komponente.

00:04:53.125 --> 00:04:56.885
Das ist sozusagen... Das ist ja ganz klar ein...

00:04:58.225 --> 00:05:01.725
Also das ist kein Switch, das ist kein Toggle. Und auch keine Checkbox,

00:05:01.825 --> 00:05:05.165
würde ich sagen. Das ist ein Radio-Button. Aber ich habe halt zwei Optionen.

00:05:05.185 --> 00:05:06.185
Ab dem ist es am nächsten.

00:05:06.505 --> 00:05:08.745
Aber habe ich nicht zwei Optionen zur Auswahl in Determinant,

00:05:08.745 --> 00:05:11.665
wenn ich es nicht ausgewählt habe? Oder angehakt oder nicht angehakt?

00:05:12.345 --> 00:05:16.785
Ja, aber so ein Toggle ist ja an oder aus. Das heißt, jetzt müsstest du für

00:05:16.785 --> 00:05:20.965
dich jetzt mal kurz entscheiden, welche diese Optionen für dich an oder aus bedeutet.

00:05:21.425 --> 00:05:25.245
Ja, das kommt halt darauf an, ob in der Datenbanktabelle die entsprechende Spalte

00:05:25.245 --> 00:05:27.045
ist ein Typ oder ist eine Frau heißt.

00:05:28.245 --> 00:05:31.865
Ja, da habe ich einige Anekdoten zu erzählen, lass uns da gar nicht reingehen.

00:05:33.816 --> 00:05:36.156
Ja, aber ich fand halt eben nur interessant, mir war das halt einfach,

00:05:36.216 --> 00:05:38.896
ich wollte wirklich dieses Formular ausfüllen, um da meine Adresse einzugeben,

00:05:38.916 --> 00:05:41.156
damit ich halt einen Geschäftsprozess vollführen kann.

00:05:41.676 --> 00:05:44.276
Und dann ist mir halt eben aufgefallen, ah, okay, das ist ja auch so ein komisches

00:05:44.276 --> 00:05:45.616
Auswahlfeld, zum einen.

00:05:46.036 --> 00:05:49.036
Und zum anderen ist mir das aufgefallen beim zweiten Ausfüllen dieses Formulars,

00:05:49.076 --> 00:05:51.816
weil ich den Prozess irgendwann später nochmal abgebrochen habe und nochmal

00:05:51.816 --> 00:05:52.636
von vorne begonnen habe.

00:05:53.316 --> 00:05:55.676
Und hab gemerkt, dass ich da überhaupt gar kein Problem mit hatte,

00:05:55.736 --> 00:05:56.636
dieses Formular zu kapieren.

00:05:57.356 --> 00:06:00.316
Also ich hab das einfach ausgefüllt und dann halt eben die Anrede angeklickt

00:06:00.316 --> 00:06:02.576
und dann einfach so weiter, weiter, weiter. Und das hat mich überhaupt nicht

00:06:02.576 --> 00:06:05.716
gestört, obwohl das so eine seltsame Implementierung, die eigentlich,

00:06:05.856 --> 00:06:10.936
wenn man darüber spricht, ziemlich bizarr ist, weil jede andere Variante wäre sinnvoller gewesen.

00:06:11.256 --> 00:06:14.016
Aber ich hatte kein Problem damit, das zu verstehen. Und jetzt frage ich mich

00:06:14.016 --> 00:06:18.076
halt, ob unsere Diskussion von zuvor da nicht irgendwie das Ganze sehr aufgeblasen

00:06:18.076 --> 00:06:22.176
hat, weil am Ende scheint es ja ein verständliches Formular zu werden,

00:06:22.236 --> 00:06:25.516
ob man nur das eine oder das andere verwendet und dann ist das doch alles irgendwie...

00:06:25.516 --> 00:06:30.176
Aber ging unsere Diskussion um das Verständlichsein dieses Inputs?

00:06:30.276 --> 00:06:33.516
Also wir haben einmal darüber gesprochen, dass es manchmal so Toggles gibt,

00:06:33.616 --> 00:06:37.096
wo unklar ist, ob sie an oder aus sind. Das kann schon mal passieren.

00:06:38.056 --> 00:06:41.076
Das hast du natürlich bei einer Checkbox mit einem Haken drin eher weniger.

00:06:41.076 --> 00:06:45.296
Ja, die Frage ist halt, gibt es Unterschiede zwischen all diesen Dingen oder

00:06:45.296 --> 00:06:49.576
ist das überhaupt einfach alles irgendwie eins und da überhaupt groß was drüber

00:06:49.576 --> 00:06:52.036
zu verlieren, ist eigentlich egal und ob das jetzt technisch implementiert ist

00:06:52.036 --> 00:06:52.956
mit einem Attribut oder nicht,

00:06:53.056 --> 00:06:56.256
ist ja auch nur was jetzt für die Frage, ob das der reinen Lehre entspricht oder nicht.

00:06:57.396 --> 00:07:00.856
Keine Ahnung, du, ich habe nur dieses Formular ausgefüllt und dachte mir, das ist ja interessant.

00:07:02.803 --> 00:07:08.283
Ja, also ich kann nur sagen, dass ich bei wenigen Optionen eigentlich sowas

00:07:08.283 --> 00:07:09.983
immer besser finde als ein Select,

00:07:10.163 --> 00:07:14.703
einfach weil Select immer zwei Klicks sind und ich finde die,

00:07:14.823 --> 00:07:18.023
also das muss sich dann lohnen in Form von,

00:07:18.183 --> 00:07:23.443
hier hat man einfach sehr viele Optionen, die, wenn man die in so Radius auffächern

00:07:23.443 --> 00:07:26.863
würde, einfach, einfach killermäßig wäre. wäre.

00:07:27.523 --> 00:07:31.403
Aber wenn man so zwei oder drei Optionen hat, finde ich eigentlich immer gut,

00:07:31.563 --> 00:07:34.803
die sofort sozusagen freizulegen in Form von einem Radio.

00:07:36.183 --> 00:07:37.803
Ein Radio-Group. Ja.

00:07:39.703 --> 00:07:42.843
Was machst du eigentlich bei der Auswahl der Länder dieser Welt?

00:07:43.543 --> 00:07:48.543
Das ist ja immer so, dass das Select, das mich immer killt, weil ich nicht weiß,

00:07:48.583 --> 00:07:52.483
steht jetzt das sozusagen dein eigenes, wo sie dich dann irgendwie verortet

00:07:52.483 --> 00:07:56.303
haben, qua Spracheinstellung oder qua aber die wissen, welchen Markt sie bedienen.

00:07:56.343 --> 00:07:59.703
Stehst du ganz oben, stehst du ganz unten, musst du ein D eintippen oder musst

00:07:59.703 --> 00:08:01.083
du ein G eintippen, um es zu finden.

00:08:01.803 --> 00:08:06.163
Oder ist es Deutsch mit D, aber irgendwie trotzdem an der Stelle, wo G wäre?

00:08:06.643 --> 00:08:09.883
Ja, zum Beispiel. Oder sowas. Und das sind ja noch die Luxusprobleme.

00:08:09.943 --> 00:08:13.723
Ich meine, stell dir vor, du bist irgendwie in West-Sahara oder so,

00:08:14.343 --> 00:08:16.923
hast ja noch ein ganz anderes Problem, nämlich tauche ich in der Liste überhaupt auf.

00:08:18.263 --> 00:08:21.623
Da könnte man eh noch ganz viele Sachen erzählen. Wir können ja mal so eine

00:08:21.623 --> 00:08:23.963
Episode über Internationalisierung machen.

00:08:24.343 --> 00:08:30.363
Da habe ich auch einiges zusammengetragen an wilden Dingen auf der Welt.

00:08:30.563 --> 00:08:35.103
Das klingt sehr spannend, ja. Ich weiß gar nicht genau, worauf du gerade hinaus

00:08:35.103 --> 00:08:37.463
willst. Das würde mich jetzt schon interessieren.

00:08:38.596 --> 00:08:41.976
Ja, einfach so, genau, dass man halt so viele Annahmen trifft.

00:08:41.996 --> 00:08:45.416
Also das mit der West-Sahara ist jetzt zum Beispiel natürlich aus unserer Perspektive,

00:08:45.416 --> 00:08:50.056
wir würden gar nicht bemerken, dass die West-Sahara da vielleicht nicht auftaucht in der Liste. Ja.

00:08:50.716 --> 00:08:52.896
Genau, und weil wir solche Probleme auch nicht haben. Lass uns daraus machen.

00:08:53.616 --> 00:08:57.716
Ich glaube, mir fällt auch noch viel ein zu Date-Formats und so weiter. Oh ja.

00:08:57.896 --> 00:09:03.296
Ich kann euch auch gerne mal die, also das ist im Prinzip so eine Liste an Dingen,

00:09:03.436 --> 00:09:08.256
die ich mal zusammengetragen habe für die Hochschule Düsseldorf.

00:09:08.596 --> 00:09:12.836
Weil da hab ich auch einen Vortragstag, wo ich eben über so,

00:09:12.976 --> 00:09:19.336
ja, Internationalisierung von digitalen Produkten was erzähle.

00:09:19.696 --> 00:09:23.236
Ist das so ein Falsehoods Programmers Believe in Dings?

00:09:23.516 --> 00:09:28.216
Eigentlich ja, genau. Ja, da gibt's ja, da gibt's ein ganzes Repo auch dazu.

00:09:28.476 --> 00:09:30.396
Das hab ich grad gefunden, das tun wir mal in die Shownotes,

00:09:30.476 --> 00:09:31.476
wenn man da wirklich mal alles haben

00:09:31.476 --> 00:09:36.596
will, was man falsch versteht von Cryptocurrency bis Videogames, okay?

00:09:37.096 --> 00:09:41.616
Ja, machen wir. Genau, aber da gibt es natürlich noch mehr, also auch so kulturelle

00:09:41.616 --> 00:09:44.976
Geschichten, die jetzt nicht unbedingt was mit Programmieren zu tun haben,

00:09:45.156 --> 00:09:50.576
sondern so in dem Land ist es jetzt schlecht, wenn du die Farbe verwendest.

00:09:50.676 --> 00:09:53.296
Also überleg dir das vielleicht nochmal anders.

00:09:55.056 --> 00:09:57.476
Genau. Ne, dann lass uns das machen und dann schicke ich euch die Liste,

00:09:57.516 --> 00:10:02.876
weil das dann ganz gut, dann wisst ihr schon mal so ein bisschen und könnt auch

00:10:02.876 --> 00:10:05.016
nochmal selber noch mehr dazu packen.

00:10:05.676 --> 00:10:08.456
Ja, entweder über Internationalisierung oder generell über Dinge,

00:10:08.596 --> 00:10:11.776
von denen wir wissen, dass andere glauben zu wissen, was gar nicht stimmt.

00:10:13.201 --> 00:10:16.921
Vielleicht machen wir da einfach zwei. Das ist doch super. Das sind doch zwei

00:10:16.921 --> 00:10:18.441
coole Themen. Ja, machen wir.

00:10:20.641 --> 00:10:27.721
Alright, dann würde ich sagen, springen wir doch jetzt mal in die Themenliste wieder rein.

00:10:28.961 --> 00:10:33.501
Und da hatten wir uns, oder hattest du dir rausgesucht, was du gut fandest?

00:10:34.321 --> 00:10:37.641
Alternative Texte für generierten Content. Ja.

00:10:38.681 --> 00:10:42.661
Also Content in CSS, Before, After, kennt man ja. Mir war nur bekannt,

00:10:42.781 --> 00:10:45.101
dass man da halt irgendwie reinschreiben kann, entweder nichts,

00:10:45.141 --> 00:10:49.121
wenn man eine Box haben möchte oder Text oder ein Bild, wenn man Text oder ein Bild haben möchte.

00:10:49.561 --> 00:10:52.281
Aber dass man dann dazu auch einen Alternativtext angeben kann,

00:10:52.321 --> 00:10:55.881
indem man einfach nach seiner URL oder seinem Text oder seinem Symbol oder hast

00:10:55.881 --> 00:11:00.641
du nicht gesehen, einen Slash macht und Alternativtext angibt, das war mir nicht klar.

00:11:00.701 --> 00:11:03.681
Und das habe ich jetzt eben erst geschnallt und der Safari supportet das jetzt

00:11:03.681 --> 00:11:04.601
auch und das ist voll gut.

00:11:05.161 --> 00:11:09.341
Und dieser Alternativtext ist dann für Screenreader oder Voice-Overs?

00:11:10.281 --> 00:11:14.821
Ja, genau. So Geschichten. Weil gegebenenfalls bringst du damit ja ein Bild

00:11:14.821 --> 00:11:16.681
an. Jetzt würdest du vielleicht sagen, du machst das mit CSS.

00:11:16.941 --> 00:11:21.361
Also, keine Ahnung, sollte das ja im Idealfall rein dekorativer Natur sein und

00:11:21.361 --> 00:11:22.361
nicht wirklich wichtig sein.

00:11:22.501 --> 00:11:24.961
Wir alle wissen, wie es wirklich läuft. Nämlich dann wird das Ding,

00:11:24.981 --> 00:11:28.061
das halt eben signalisiert, dieser Link führt dich zu einem PDF,

00:11:28.261 --> 00:11:29.701
da als Icon drangeklatscht.

00:11:29.761 --> 00:11:31.801
Und das halt eben auch denen, die nichts sehen, zu kommunizieren,

00:11:31.881 --> 00:11:34.141
ist ja durchaus sinnvoll. Ja, ja.

00:11:35.221 --> 00:11:38.481
Was passiert denn, wenn ich den Alternativtext dann nicht schreibe?

00:11:38.561 --> 00:11:42.761
Versucht ein Voice-Over das vorzulesen oder wird das komplett ignoriert? Oder depends?

00:11:44.261 --> 00:11:46.621
Ich glaube, wenn ich das richtig verstehe, also wenn es Text ist,

00:11:46.661 --> 00:11:51.501
wird der, glaube ich, auch mit eingebaut und ausgegeben.

00:11:51.961 --> 00:11:55.101
Genau, also es ist so ein leichtes It Depends. Also ich meine,

00:11:55.121 --> 00:11:58.801
es gibt eventuell einen Screenreader, der das dann nicht tut,

00:11:58.981 --> 00:12:02.361
aber alle anderen tun es. Aber gegebenenfalls sind es wirklich alle.

00:12:02.501 --> 00:12:07.781
Also genau, wenn du dann so ein ganz weirdes Symbol einfügst, dann ...

00:12:09.161 --> 00:12:12.541
Ja, ich kenne jetzt die Beispiele. Ja, entweder ein weirdes Symbol,

00:12:12.641 --> 00:12:15.901
vielleicht irgend so ein I-Zeichen für Info.

00:12:16.681 --> 00:12:20.221
Oder ich glaube, an vielen Stellen ist es teilweise oft mal nur ein Space Base

00:12:20.221 --> 00:12:25.601
oder irgendwie ein bestimmtes Umlaut-Dings oder Sonderzeichen.

00:12:26.201 --> 00:12:29.021
Aber was ich selber mal gemacht habe, war für ...

00:12:29.821 --> 00:12:34.881
Ich habe da so ein Quiz-Dings erstellt, Quizformular. Und manche Fragen waren required.

00:12:35.201 --> 00:12:38.821
Und an allen required Sachen habe ich dann so einen Asterix,

00:12:38.861 --> 00:12:42.541
also so einen Stern, rangeklatscht mit Content-After.

00:12:43.181 --> 00:12:46.921
Und dann frage ich mich gerade, würde das eigentlich tatsächlich vorgelesen

00:12:46.921 --> 00:12:51.481
werden wie Asterix? Ich glaube, spricht man anders aus übrigens, sorry. Ähm.

00:12:52.793 --> 00:12:56.353
Also ich weiß nicht, wie er das vorlesen würde, aber genau, da wäre es natürlich

00:12:56.353 --> 00:13:01.913
total sinnvoll, auch so ein, ja, erforderlich. Bequired, ja.

00:13:02.833 --> 00:13:05.933
Jetzt haben wir ja gerade, du hast ja gerade gesagt, Internationalization.

00:13:06.933 --> 00:13:11.933
Wenn ich da jetzt einen Alternativtext angebe. Das ist natürlich dann schwierig.

00:13:12.293 --> 00:13:15.713
Kann ich das jetzt generell nur in einer Sprache machen? Ja, also ja.

00:13:16.053 --> 00:13:21.293
Oder gibt es Internationalisierungstools für CSS? Na klar, CSS-Variablen.

00:13:22.213 --> 00:13:25.933
Und einmal das und du kannst... Ist das jetzt so offizielle Lösung oder hat

00:13:25.933 --> 00:13:28.293
sich der Peter das gerade so ausgedacht? Das geht doch so.

00:13:28.533 --> 00:13:31.233
Das habe ich mir gerade eben ausgedacht. Das klingt großartig.

00:13:31.253 --> 00:13:33.993
Also das ist das Best Practice, das weiß doch ja jeder.

00:13:34.253 --> 00:13:39.453
Genau, also würde ich auch sagen und genau, aktivieren kannst du dir dann über,

00:13:39.573 --> 00:13:45.333
darüber, dass du quasi das, so einen Attributselektor auf dem Root,

00:13:45.453 --> 00:13:48.873
also lang gleich de, dann sind die Variablen halt diese.

00:13:49.733 --> 00:13:55.093
Lang gleich en, dann dann sind es andere. Oder es gibt ja auch diese Leng-Pseudoklasse,

00:13:55.153 --> 00:13:57.673
glaube ich, in CSS, die man auch nehmen könnte.

00:13:58.933 --> 00:14:01.873
Aber ganz ehrlich, das würde ich gerne getestet haben, ehe ich das einsetze,

00:14:01.933 --> 00:14:04.153
weil das hört sich jetzt nach was an, wo ich so,

00:14:05.013 --> 00:14:07.993
manchen Browsern unterstellen würde, dass die dann das nicht hinkriegen,

00:14:08.013 --> 00:14:12.013
wenn ich die Seite lade, ich wechsle irgendwie die Sprache und dann muss ein

00:14:12.013 --> 00:14:15.733
anderer Selektor greifen, also mir auch ein anderer Alternativtext vorgelesen

00:14:15.733 --> 00:14:17.093
werden. Das würde ich erst mal gerne checken.

00:14:19.053 --> 00:14:22.653
Genau, aber vielleicht haben wir in unserer Hörerschaft oft ja Menschen, die das wissen.

00:14:24.393 --> 00:14:27.493
Oder für uns ausprobieren wollen. Oder für uns ausprobieren wollen.

00:14:27.773 --> 00:14:29.893
Komm, das kann man gleich als Open-Source-Ding machen.

00:14:30.593 --> 00:14:36.153
Ja, genau. Oder es ist auch natürlich hier die ganze Fame von dem Blogartikel,

00:14:36.173 --> 00:14:39.213
den ihr jetzt dazu schreibt, ist eurer und wir verlinken darauf.

00:14:39.613 --> 00:14:41.033
Bitteschön, das haben wir gerne gemacht.

00:14:41.833 --> 00:14:45.933
Also ich meine, im Ernstfall könnt ihr jetzt irgendwer von uns F12 drücken und

00:14:45.933 --> 00:14:47.433
das eben schnell in die Konsole hämmern.

00:14:49.057 --> 00:14:52.057
Ja, wir müssen uns hier konzentrieren. Also ich weiß nicht, wie du das machst,

00:14:52.117 --> 00:14:55.357
aber ich muss mich ja irgendwie ein bisschen konzentrieren, womit wir eigentlich dann weitermachen.

00:14:55.457 --> 00:14:58.977
Ich finde das aber grundsätzlich ein gutes Ding und zwar quasi ein schönerer

00:14:58.977 --> 00:15:00.377
Reminder, dass es das gibt.

00:15:01.097 --> 00:15:04.977
Ja, und ich glaube, in Chrome gibt es das schon, also der hat es am längsten

00:15:04.977 --> 00:15:07.157
implementiert, da gibt es schon ziemlich lange.

00:15:07.477 --> 00:15:11.597
Ich weiß gar nicht, wie es mit der Kompatibilität generell, also mit Firefox aussieht.

00:15:12.757 --> 00:15:15.777
Ja, der kann das nicht. Der kann das nicht, okay.

00:15:16.977 --> 00:15:20.617
Die spannende Frage ist, was macht er dann? Weil dann würde ich ja erwarten,

00:15:20.677 --> 00:15:24.697
dass wir dann gar keine Content-Property kriegen, weil ja dann die Syntax ungültig

00:15:24.697 --> 00:15:27.877
ist, dass das also keinen vernünftigen Fallback hat.

00:15:28.697 --> 00:15:33.757
Da könnte man ja mal gucken, was die Chrome-Leute damals vorgeschlagen haben,

00:15:33.857 --> 00:15:37.877
wie man verfahren soll, als die die Ersten waren mit dem Feature.

00:15:40.057 --> 00:15:43.437
Kann man da nicht ein Add-Supports-Query drumherum stricken?

00:15:44.597 --> 00:15:50.277
Ja, oder du machst halt Content quasi erst mal ohne dieses alte Attribut und

00:15:50.277 --> 00:15:53.737
darunter noch einmal die Content-Property mit.

00:15:54.997 --> 00:15:57.437
Ja, das könnte ich machen, aber dann habe ich ja gar keinen Ansatz,

00:15:57.517 --> 00:15:58.657
um Supports zu benutzen.

00:15:58.737 --> 00:16:04.057
Das ist ja nicht gut für meinen... Ach so, du kannst auch Supports nehmen.

00:16:04.257 --> 00:16:06.297
Ist halt wahrscheinlich aufwendiger.

00:16:06.897 --> 00:16:10.477
Also ich meine, wenn du Ad-Supports nimmst, dann musst du diese Abfrage machen.

00:16:10.477 --> 00:16:16.137
Also du musst ja ohnehin dann einmal den Content ohne Alternativtext hinschreiben.

00:16:16.317 --> 00:16:22.297
Dann machst du eine Add-Supports-Abfrage, ob Browser das mit Alternativtext unterstützt.

00:16:22.337 --> 00:16:27.817
Und dann musst du dann nochmal diesen Alternativtext da reinpacken.

00:16:28.177 --> 00:16:31.817
Ja, oder das wird sowieso alles in Custom Properties gesteckt.

00:16:31.877 --> 00:16:35.897
Und dann kannst du ja sozusagen eine Custom Property komponieren mit oder ohne

00:16:35.897 --> 00:16:39.557
Alternativtext, je nachdem, was dann der Supports-Query sagt. Ja.

00:16:40.357 --> 00:16:45.157
Es fehlt CSS echt einen Loop über Custom Properties, die auf irgendwie einem Element gelten.

00:16:46.137 --> 00:16:48.117
Das könnte man sonst alles wunderbar industrialisieren.

00:16:49.508 --> 00:16:50.008
Das stimmt.

00:16:52.088 --> 00:17:01.048
Ich packe mal in unser Dokument noch einen Link zu einem Blogpost von Adrian Roselli,

00:17:01.168 --> 00:17:07.868
der vor längerer Zeit schon mal, also zu Chrome-Zeiten, was dazu geschrieben

00:17:07.868 --> 00:17:09.028
hat über dieses Attribut.

00:17:11.908 --> 00:17:16.028
Ich packe es bei uns mal hier in den Chat rein.

00:17:20.248 --> 00:17:23.088
Genau, aber wir finden das auf jeden Fall gut. Auf jeden Fall.

00:17:23.248 --> 00:17:24.888
Muss sein. Ist total sinnvoll.

00:17:25.208 --> 00:17:30.028
Habe ich dann auch tatsächlich, nachdem ich das vorgestern auf der Liste der

00:17:30.028 --> 00:17:34.188
Features hier gesehen habe, auch direkt heute mal zum Einsatz gebracht. Tatsächlich.

00:17:35.288 --> 00:17:37.828
Habe heute Morgen in so einem Formular-Workshop gesessen und irgendwie so,

00:17:37.888 --> 00:17:39.648
ja, genau dieses Sternchen-Szenario.

00:17:40.288 --> 00:17:43.008
Mach halt mit Content noch ein Sternchen hin, damit das irgendwie funktioniert.

00:17:43.408 --> 00:17:45.668
Und dann haben wir da halt einen Alternativ-Text eingebaut.

00:17:45.748 --> 00:17:50.308
Und weil die Firma intern eh nur Edge benutzt, ist das auch alles gar kein Problem. Mhm.

00:17:51.848 --> 00:17:52.708
Voll gut.

00:17:55.228 --> 00:18:03.448
Dann haben wir als nächstes Transitions für diskret animierbare Eigenschaften.

00:18:03.448 --> 00:18:08.888
Also es gibt ja bestimmte CSS-Eigenschaften, die lassen sich nicht animieren.

00:18:09.148 --> 00:18:11.068
Was könnte das sein? Display.

00:18:11.948 --> 00:18:16.308
Display, genau. Da braucht man immer den Opacity-Trick oder sowas.

00:18:17.008 --> 00:18:24.788
Genau. Und vor allem ist es aber so, dass die springen halt sofort zu Beginn

00:18:24.788 --> 00:18:31.348
der Transition oder einer Animation um von dem Startwert auf den,

00:18:31.468 --> 00:18:33.848
der dann eben der nächste sein soll.

00:18:34.628 --> 00:18:41.128
Das heißt, man kann dann nicht irgendwie steuern, dass es auf halber Strecke erst passieren soll.

00:18:41.668 --> 00:18:45.048
Moment, meinst du jetzt die, die schon gehen? Oder was genau meinst du?

00:18:45.108 --> 00:18:46.648
Oder meinst du, die, die nicht gehen?

00:18:46.988 --> 00:18:51.328
Also wenn ich jetzt versuche, Display zu transitionen, dann ist einfach 0, 100.

00:18:52.288 --> 00:18:55.648
Ja, und zwar am Anfang des Ganzen. Also was du theoretisch machen könntest,

00:18:56.068 --> 00:19:00.948
so mit Opacity-Trick, meinst du ja vielleicht so was wie Opacity von 100 nach

00:19:00.948 --> 00:19:04.928
0 senken lassen und am Ende lassen wir es mit Display dann tatsächlich verschwinden.

00:19:06.348 --> 00:19:09.948
Ah, ja, ja, ja, aber das geht nicht. Ja, ja, ja. Stimmt.

00:19:10.608 --> 00:19:15.108
Genau, und da kannst du jetzt aber eben sagen, ach übrigens eine kleine Randnotiz,

00:19:15.108 --> 00:19:20.268
ich glaube bei Visibility ist das genau andersrum,

00:19:20.428 --> 00:19:25.708
das heißt also da passiert das ganz zum Schluss.

00:19:27.248 --> 00:19:33.428
Ähm genau und das kann man aber jetzt eben steuern, indem man eine Transition,

00:19:33.428 --> 00:19:37.388
also es gibt eine neue Unterproperty von Transition, die heißt Transition Behavior

00:19:37.388 --> 00:19:39.588
und da kann man Allow Discrete setzen.

00:19:41.118 --> 00:19:47.058
Und dann kann man eben auch solche Properties animieren in Form von,

00:19:47.158 --> 00:19:54.578
hey, dann passiert das eben erst in der Mitte der Transition und nicht direkt am Anfang.

00:19:55.258 --> 00:19:59.078
Und wir reden da jetzt drüber, weil das jetzt neu im Safari ist,

00:19:59.218 --> 00:20:03.098
aber in den anderen Browsern war das vorher schon, oder ist das jetzt so überall

00:20:03.098 --> 00:20:05.098
der neue krasse Feature?

00:20:05.418 --> 00:20:09.158
Nee, das ist schon eher ein neuerer krasser Scheiß. Ich meine,

00:20:09.178 --> 00:20:12.498
in Chrome wäre es auch schon ein Momentchen eingebaut.

00:20:12.658 --> 00:20:14.538
Genau. Ich sehe gerade 117.

00:20:14.938 --> 00:20:18.958
September 2023 steht da beim Hover bei Browser Compatibility.

00:20:19.858 --> 00:20:26.198
Ja. Okay. Ja, cool. Was bauen wir denn jetzt damit? Ein Firefox-Patch,

00:20:26.258 --> 00:20:27.418
damit es da auch funktioniert.

00:20:29.658 --> 00:20:33.318
Okay. Ist auf jeden Fall ein Baustein mehr.

00:20:33.618 --> 00:20:39.658
Wie ist denn das? dass die bei Display kann man auch, ist es das Gleiche,

00:20:39.658 --> 00:20:41.878
wo man jetzt auch Display zu None animieren kann?

00:20:42.098 --> 00:20:46.798
Also das ist, glaube ich, das ist das gleiche Teil, oder? Das kam doch irgendwann auch auf.

00:20:46.958 --> 00:20:50.298
Ich meine mich auch zu erinnern, dass da was war. Aber zum Beispiel irgendwie

00:20:50.298 --> 00:20:53.858
Display von, keine Ahnung, Flex zu Grid geht halt dann immer noch nicht.

00:20:55.138 --> 00:20:59.738
Und da wird es dann schon helfen. Bei der MDN-Webseite, bei dem CSS,

00:20:59.918 --> 00:21:05.358
was hier steht, da gibt es jetzt eine Transition All 25 Millisekunden Allow

00:21:05.358 --> 00:21:09.838
Discrete und als Fadeout hat man eine Opacity von Zero und ein Display von None.

00:21:11.258 --> 00:21:18.238
Ja. Achso, und statt All zu schreiben, könnte man explizit Opacity und Display schreiben. Genau.

00:21:22.818 --> 00:21:27.998
Nehmen wir auf jeden Fall. Nehmen wir. Super. Ja, vor allem entspricht das ja

00:21:27.998 --> 00:21:31.118
ja, das entspricht das ja eigentlich so meinen Erwartungen von Transitions,

00:21:31.158 --> 00:21:32.018
dass es genau so funktioniert.

00:21:32.178 --> 00:21:35.358
Also die Dinger, die das halt nicht, die halt keinen Zustandsübergang machen,

00:21:36.378 --> 00:21:39.298
die machen halt die nächstbeste Annäherung und halten sie sich zumindest an

00:21:39.298 --> 00:21:43.198
die Zeitkomponente, wenn auch nicht an die, keine Ahnung, Crossfade-Komponente.

00:21:44.098 --> 00:21:45.678
Und das kriegen wir halt jetzt und das ist gut.

00:21:47.298 --> 00:21:51.538
Genau. Und wenn man diesen Crossfade haben will, da für diese Zwecke gibt's

00:21:51.538 --> 00:21:54.638
ja dann die View-Transition-API.

00:21:55.858 --> 00:21:58.558
Gibt es, ja. Ist die mittlerweile also auch auch im Firefox dann drin?

00:22:00.038 --> 00:22:04.918
Naja, sie soll die Lösung dafür sein. Ah, also die gibt's auch nicht.

00:22:05.918 --> 00:22:10.778
Genau, aber die sind, also ich, soweit ich weiß, arbeiten alle Browser dran, also alle finden's gut.

00:22:12.238 --> 00:22:15.118
Ne, das ist auch mein Kenntnisstand, aber es ist, ich meine,

00:22:15.158 --> 00:22:18.198
das klappt ja auch wenigstens gut, anders als jetzt zum Beispiel das Problem

00:22:18.198 --> 00:22:21.238
mit Content und Alternativtext, weil wenn's nicht funktioniert,

00:22:21.318 --> 00:22:23.298
dann hast du halt eben keine Transition, das ist ja auch okay.

00:22:24.298 --> 00:22:28.178
So Progressive Enhancement mäßig, das haut halt schon hin. Ja, ja.

00:22:31.018 --> 00:22:33.338
Haben die da eigentlich bei den View-Transitions da, also die Browser,

00:22:33.378 --> 00:22:36.698
die das schon jetzt eine gewisse Zeit haben, mittlerweile irgendwelche Fortschritte

00:22:36.698 --> 00:22:40.918
erzielt bezüglich dieser Dinge mit so Multipage-Applications?

00:22:41.538 --> 00:22:42.578
Oder geht das immer noch nicht?

00:22:44.318 --> 00:22:48.898
Also es ist momentan immer noch hinter Flag im Canary. Ich glaube,

00:22:48.978 --> 00:22:54.958
da sind schon so, also da ergeben sich immer neue Roadblocks, glaube ich.

00:22:56.038 --> 00:22:57.958
Deswegen wird da noch immer dran gewerkelt.

00:23:00.258 --> 00:23:05.618
Genau, aber wer es austesten will, man kann es in den Experimental Web Platform

00:23:05.618 --> 00:23:10.658
Features im Canary aktivieren und dann musst du im einfachsten Fall einfach

00:23:10.658 --> 00:23:13.998
nur so Meta-Angaben in die Seite packen,

00:23:14.038 --> 00:23:22.138
dass die eben transizieren möge von einer Unterseite zur nächsten.

00:23:24.318 --> 00:23:27.918
Und dann muss man irgendwie seinen inneren Schlipsträger im Griff halten,

00:23:28.038 --> 00:23:32.758
auf das man es nicht übertreibe und das dann irgendwann alles nur noch aussieht

00:23:32.758 --> 00:23:34.898
wie ein Gaming-YouTube-Video. Das wollen wir ja nun nicht.

00:23:36.018 --> 00:23:38.458
Aber so ist das ja immer. Das ist ja wie mit Hollywood-Filmen.

00:23:38.738 --> 00:23:43.918
Als die Computer gut genug waren, da mussten ja auch erst mal so Dinosaurier

00:23:43.918 --> 00:23:48.898
und Kometen klatschen auf die Erde und was weiß ich, musste alles mal gemacht werden.

00:23:49.578 --> 00:23:53.038
Und dann haben sie aufgehört? Also irgendwie habe ich das verpasst.

00:23:54.618 --> 00:23:58.778
Ja, also ich finde, es ist weniger geworden, die Katastrophenfilme, oder?

00:23:59.738 --> 00:24:03.758
Roland Emmerich hat auch so ein bisschen zu einer gewissen Altersmilde gefunden.

00:24:05.578 --> 00:24:08.318
Also Chef, wie sage ich das jetzt, ohne unhöflich zu werden,

00:24:08.438 --> 00:24:11.598
aber könnte da möglicherweise so ein bisschen Self-Selection-Bias am Start sein?

00:24:13.058 --> 00:24:16.498
Vielleicht. Dass du dir jetzt nicht das gesamte Oeuvre von Marvel von vorne

00:24:16.498 --> 00:24:19.978
bis hinten reinziehst, weil ich glaube, Die Dinger kommen schon zu 100% aus dem Computer.

00:24:21.746 --> 00:24:26.106
Ja, aber okay, genau. Aber die sind natürlich, aber die haben jetzt auch,

00:24:26.166 --> 00:24:27.586
die kacken auch gerade übelst ab.

00:24:28.646 --> 00:24:32.206
Tun sie? Wo? Wer? Wieso? Die Marvel-Filme.

00:24:32.726 --> 00:24:36.466
Wie? Wo? Die schlagen doch nicht mehr so gut ein. Es gibt neue Marvel-Filme?

00:24:36.626 --> 00:24:39.646
Oh nein, sie machen nur noch eine halbe Milliarde pro Durchlauf.

00:24:39.746 --> 00:24:42.266
Das ist ja, das ist ja katastrophal, wenn das der DAX wüsste.

00:24:42.726 --> 00:24:46.366
Ich glaube, dass die Leute dann, dass die schon ein Stück weit jetzt auch so

00:24:46.366 --> 00:24:49.326
langsam ist es dann gut mit.

00:24:50.226 --> 00:24:57.506
Ach Moment, der war doch dieser Captain Marvel Film. Ja, der war ja der war super.

00:24:58.446 --> 00:25:03.366
Ja, aber der war so Box-Office-mäßig war der Griff ins Klo. Dann Ant-Man war auch Mist.

00:25:04.066 --> 00:25:07.026
Ja, aber Ant-Man 1 ist auch schon nicht so gut angekommen.

00:25:07.906 --> 00:25:12.006
Und genau, hier der Thor-Film war glaube ich der letzte, der noch so gut lief bei denen.

00:25:15.626 --> 00:25:18.606
Tja, aber wenn man sich da die entsprechenden, also weil ich Ich verfolge diese

00:25:18.606 --> 00:25:23.646
Filme jetzt selber auch nicht so ganz speziell, aber so diese Computer-Effekt-Breakdown,

00:25:24.146 --> 00:25:25.426
die man da so öfter mal sieht.

00:25:25.606 --> 00:25:28.546
Also da merkt man halt eben auch, wie viel von dem Zeug aus dem Computer kommt

00:25:28.546 --> 00:25:30.806
und wie viel da teilweise auch echt gespart wird.

00:25:31.766 --> 00:25:34.386
Also einfach die schiere Menge der Effekte macht es halt echt notwendig,

00:25:34.386 --> 00:25:38.546
dass man da manchmal echt so... Feuer tut immer noch sehr weh anzuschauen.

00:25:39.906 --> 00:25:43.606
Ja, aber auch... Wasser ist gut geworden. Ja, Wasser ist sehr gut geworden.

00:25:43.726 --> 00:25:46.666
Nee, aber halt einfach auch so den Alltagskrempel, wie irgendwie so Face Replacement.

00:25:46.966 --> 00:25:49.146
Und dann hast du halt einfach zu wenig Zeit, um dafür zu sorgen,

00:25:49.246 --> 00:25:51.226
dass das nicht so komplett detached aussieht.

00:25:51.646 --> 00:25:53.506
Und das ist halt dann eben so das Problem. So Uncanny Valley-mäßig.

00:25:54.146 --> 00:25:56.586
Ja, genau. Und das ist halt eben das, wo man halt eben früher,

00:25:56.626 --> 00:25:58.866
als man dafür noch richtig arbeiten musste, als man den Computer noch selber,

00:25:59.326 --> 00:26:02.366
peitschen musste, damit er den T-Rex rendert, hat man dann halt irgendwie so

00:26:02.366 --> 00:26:05.166
die althergebrachten Tricks so her.

00:26:05.526 --> 00:26:07.846
Guck halt eben dahin, dann siehst du da hinten nicht, wie es eckig ist.

00:26:08.586 --> 00:26:11.686
Genutzt, sodass es halt eben keinem auffällt und heutzutage ist halt ach ja, komm, hau raus.

00:26:12.326 --> 00:26:14.606
Also deswegen, ich will nur sagen, ich hab da eine Theorie von wegen,

00:26:14.706 --> 00:26:17.786
das wird dann besser, würde ich nicht notwendigerweise so eine Wette eingehen.

00:26:20.423 --> 00:26:24.003
Okay. Ja, mal gucken. Also, ich hab den Eindruck, dass das schon,

00:26:24.083 --> 00:26:28.503
also auch damals, als man eben Animations und Transitions neu hatte und so,

00:26:28.643 --> 00:26:34.323
oder ich merk's auch in den Produkten, an denen ich baue, dass man solche Animationen

00:26:34.323 --> 00:26:40.343
drin hat, aber so im Laufe der Zeit dann doch der Wunsch von allen irgendwie immer stärker wird,

00:26:40.463 --> 00:26:44.223
die zu beschleunigen, dass man einfach irgendwie schneller vorankommt.

00:26:45.443 --> 00:26:53.163
Genau. Und das Filmethema noch weiter auszuweiten, das hat auch nichts mit Animationen

00:26:53.163 --> 00:26:56.863
zu tun, weil falls ihr es noch nicht getan habt, dann müsst ihr Nimona anschauen.

00:26:57.323 --> 00:26:59.303
Das war mein Kracherfilm des Jahres.

00:27:00.023 --> 00:27:04.423
Hab ich gesehen. War echt super. Hast du es auf Deutsch gesehen oder auf Englisch gesehen?

00:27:04.903 --> 00:27:08.383
Nee, ich hab den auf Deutsch gesehen, weil ich den mit hier mit meinem...

00:27:09.043 --> 00:27:11.823
Aber dann schau ich nochmal auf Englisch, wenn du Zeit hast,

00:27:11.903 --> 00:27:16.723
weil da ist ein Witz drin, der ist so gut. Und ich weiß, ich frag dich dann

00:27:16.723 --> 00:27:19.663
mal privat, oder da war so eine Stelle mit so einem Pferd.

00:27:19.963 --> 00:27:25.683
Nee, das spoilere ich zu viel. Ich kontaktiere dich nach dem Podcast auf.

00:27:25.803 --> 00:27:29.283
Das war schon sehr witzig. Okay, ich bin gespannt.

00:27:32.043 --> 00:27:35.763
So, harter Cut zum nächsten Thema. Also gute Transition quasi.

00:27:37.443 --> 00:27:43.643
Das war ja schon Hans-esk hier. Das war jetzt halt keine diskrete Transition.

00:27:43.683 --> 00:27:44.483
Das war jetzt ein Display.

00:27:45.343 --> 00:27:50.083
Ja. Das war jetzt eine sehr in-your-face-Transition.

00:27:53.943 --> 00:27:57.843
Kennt ihr das, wenn man so auf Dark-Mode-Seiten ist und dann wird man rausgelenkt

00:27:57.843 --> 00:28:00.843
auf so eine Light-Mode-Seite? Boah, das ist...

00:28:01.303 --> 00:28:04.543
Da wünschte ich mir manchmal, dass es gar keine Dark-Modes geben würde,

00:28:04.743 --> 00:28:08.243
dass man halt immer die ganze Zeit schon den Light-Mode hätte und einfach runtergeregelt

00:28:08.243 --> 00:28:10.663
ist und nicht dann so einen Light-Mode in your face bekommt. kommen.

00:28:10.943 --> 00:28:14.343
Ich bin ja kein Dark-Mode-Fan. Ich hab das eher selten, aber manchmal gibt's

00:28:14.343 --> 00:28:16.223
so Seiten, die das einfach so machen.

00:28:16.923 --> 00:28:20.023
Genau, also ein Spiel online ist so eine Seite. Ach, Moment,

00:28:20.143 --> 00:28:23.083
du meinst aber nicht von den System-Settings abhängig, sondern die einfach default

00:28:23.083 --> 00:28:26.403
schwarz sind, äh, sorry, Dark-Mode sind, das kann ja auch was anderes sein.

00:28:26.643 --> 00:28:34.363
Ja, ich weiß nicht genau, also die sind tagsüber weiß und, also auf meinem Handy, und abends dunkel.

00:28:34.723 --> 00:28:39.103
Hast du vielleicht auf deinem Device eingestellt, dass du ein Auto...

00:28:39.103 --> 00:28:43.043
Vielleicht hab ich das eingestellt. Vielleicht bist es du und nicht die Webseite.

00:28:43.123 --> 00:28:44.663
Ich hab's aber nicht eingestellt, das war schon so.

00:28:44.803 --> 00:28:47.963
Und es gibt auch nicht viele Seiten, die das machen. Aber Spiegel macht das so.

00:28:48.203 --> 00:28:54.483
Aber dummerweise machen das halt die per iFrame eingebundenen quasi Umfragen

00:28:54.483 --> 00:28:57.243
und Werbungen nicht. Die kommen da nicht irgendwie mit.

00:28:57.943 --> 00:29:01.263
Und das ist irgendwie krass, wenn man dann so runterscrollt und dann,

00:29:01.343 --> 00:29:04.623
au, ich kann nicht mehr sehen, ich bin geblendet.

00:29:05.323 --> 00:29:10.643
Wenn man halt irgendwie so ein Stück Werbung oder irgendwie so ein Bitte sagen

00:29:10.643 --> 00:29:17.063
Sie uns, ob die AfD verboten werden soll oder nicht O-Meter bedienen soll und so.

00:29:18.506 --> 00:29:22.606
Diese Opinion-Dinger. Ah, super. Das hab ich immer ...

00:29:23.086 --> 00:29:26.326
Weil ich mir alles radikal wegblocke und das, was nicht weggeblockt wird,

00:29:26.386 --> 00:29:30.026
wird von so einem Plugin auf Dark-Mode gezwungen, hab ich mir noch gar nicht

00:29:30.026 --> 00:29:31.726
Gedanken darum gemacht, dass man das machen könnte.

00:29:32.146 --> 00:29:35.246
Das ist ja super. Das ist ja voll der optische Troll.

00:29:36.446 --> 00:29:39.766
Ja, total. Also noch mehr als Werbung ohnehin ist.

00:29:40.006 --> 00:29:43.786
Wobei ich zahl auch für Spiegel. Also kommt jetzt nicht oft vor,

00:29:43.846 --> 00:29:46.966
aber dann sind es irgendwelche Third-Party-Ambits oder so was. Mhm.

00:29:48.506 --> 00:29:51.166
Aber okay, das kannst du doch eh nicht loswerden, wenn du auf so einer Nachrichtenseite

00:29:51.166 --> 00:29:54.046
bist und du hast irgendwie so redaktionellen Fotoinhalt, oder?

00:29:54.726 --> 00:29:56.826
Also irgendwie du scrollst runter und dann hast du irgendwie ein Foto hier,

00:29:56.866 --> 00:29:58.186
neuer Airbus und der ist ganz weiß.

00:29:58.566 --> 00:30:02.886
Das blendet doch genauso viel, oder? Das ist dann Pech, ja. Genau.

00:30:03.806 --> 00:30:06.286
Aber irgendwie passiert das bei den Fotos jetzt nicht so.

00:30:07.366 --> 00:30:11.306
Also da ist es eigentlich okay. Also da fällt mir das zumindest nicht so auf.

00:30:11.546 --> 00:30:13.886
Dann wissen wir ja, welchen Modus die Bildredaktion benutzte.

00:30:15.246 --> 00:30:15.946
Ja, vielleicht. leicht.

00:30:17.526 --> 00:30:20.106
Oder die regeln das vielleicht auch leicht runter. I don't know.

00:30:23.806 --> 00:30:28.846
Okay, dann haben wir als Thema eigentlich was Kleines, aber das war immer so

00:30:28.846 --> 00:30:30.226
ein bisschen so ein Kuriosum.

00:30:30.706 --> 00:30:38.786
Also das Backdrop-Pseudo-Element, also das man hinter Fullscreen-Videos hat,

00:30:38.926 --> 00:30:44.066
glaube ich, und eben dem Dialog-Element und vielleicht auch hinter dem einen

00:30:44.066 --> 00:30:45.086
oder anderen Element Element,

00:30:46.626 --> 00:30:54.146
dass das keine Custom Properties erben konnte vom Root, weil das irgendwie in

00:30:54.146 --> 00:31:01.086
einer eigenen Welt lebt und historisch hat das seinen Anfang eben genommen mit dem Video-Element.

00:31:02.653 --> 00:31:08.333
Und ich glaube, damals hat man halt entschieden, so, ja, das soll das nicht bekommen.

00:31:08.533 --> 00:31:12.893
Aber jetzt mit dem Dialog-Element und möglicherweise auch, weiß ich nicht,

00:31:12.973 --> 00:31:17.773
Pop-Up-Element das auch hat, möchte man das und das ging halt nicht.

00:31:18.013 --> 00:31:22.213
Du musstest dann quasi deine Custom-Properties irgendwie noch mal wiederholen.

00:31:22.953 --> 00:31:26.193
Und das war aber laut Spec so und die Browser haben das so implementiert.

00:31:26.253 --> 00:31:29.313
Und dann haben die Leute gesagt, das ist aber irgendwie ein bisschen seltsam, lass uns das mal ändern.

00:31:30.233 --> 00:31:34.713
Und dann wurde es in der Spec geändert und jetzt landet diese Änderung auch in den Browser.

00:31:36.893 --> 00:31:40.713
Und das können tatsächlich auch quasi alle schon.

00:31:40.913 --> 00:31:44.273
Also nur bei Opera ist das noch irgendwie nicht released. Ich weiß nicht,

00:31:44.273 --> 00:31:46.093
ob das alle schon geändert haben.

00:31:47.153 --> 00:31:55.113
Steht hier. Also die Chromis 122, der Firefox 120 und der Safari halt eben ganz frisch.

00:31:55.173 --> 00:31:57.733
Ich finde ja die Formulierung hier in der Kompatibilitätstabelle interessant.

00:31:58.073 --> 00:32:04.373
Backdrop Elements Inherit, bla bla bla, bla, bla, bla, from its originating element.

00:32:05.833 --> 00:32:09.853
Also Video-Backdrop vom Video-Element und so weiter. Aber was ist denn dann

00:32:09.853 --> 00:32:14.573
das originating element vom so komplett Seiten-Backdrop?

00:32:14.713 --> 00:32:19.433
Weil der ist ja eigentlich nicht wirklich ein Kind vom Root, oder doch?

00:32:21.413 --> 00:32:25.753
Naja, die haben ja diese, also ich hatte ja mal gedacht, dass das vielleicht

00:32:25.753 --> 00:32:30.593
daran liegt, liegt, dass die ja in ihrem eigenen Element-Stack hängen.

00:32:32.633 --> 00:32:37.393
Also die sind ja in diesem Stack, der über allem drüber liegt.

00:32:38.533 --> 00:32:42.033
Alle Backdrops oder jetzt spezifisch der Full-Page-Backdrop für einen Dialog?

00:32:43.293 --> 00:32:48.193
Na, der Dialog ist da drin. Und der Backdrop für Dialog ist da, glaube ich, auch drin.

00:32:48.893 --> 00:32:52.953
Also das macht es ja erst ... Topmost-Layer-Ding, ne? Ja, genau, Topmost-Layer.

00:32:53.633 --> 00:33:01.913
Aber ja, das war jetzt so meine meine These, dass das quasi dass die sozusagen in einer Parallelwelt,

00:33:02.393 --> 00:33:06.913
leben und dann irgendwie deshalb das nicht erben, aber Also ich hatte das verstanden

00:33:06.913 --> 00:33:10.233
als nicht nur, also dass das tatsächlich explizit so ist und die Begründung

00:33:10.233 --> 00:33:14.473
für die erben nix und keine Custom Properties, weil die halt eben tatsächlich

00:33:14.473 --> 00:33:15.733
aus dem Kontext raus sind,

00:33:17.213 --> 00:33:21.513
Also weil beim Video-Element, das ist ja irgendwie noch so contained in dem

00:33:21.513 --> 00:33:22.513
Video-Element, das Das macht ja Sinn,

00:33:22.573 --> 00:33:27.273
das ist ja nicht wirklich ein Top-Most-Layer-Ding, aber bei dem Dialog ...

00:33:27.893 --> 00:33:30.753
Also, ich meine, macht Sinn, dass das so ist und dass das ja wirklich irgendwie

00:33:30.753 --> 00:33:33.933
so ein Top-Most-Layer ist, der in seiner eigenen Welt lebt, mag ja gerne in

00:33:33.933 --> 00:33:38.933
der Realität so sein, aber deswegen muss es ja noch lange nicht das ganze JavaScript-

00:33:38.933 --> 00:33:40.993
und CSS-Volk mitbekommen.

00:33:41.073 --> 00:33:43.253
Man kann denen das ja so zurechtbiegen, dass sich das anfühlt,

00:33:43.253 --> 00:33:47.913
als wäre das alles ... Als würde Root wirklich Root meinen und nicht einfach

00:33:47.913 --> 00:33:50.373
nur ein anderer Selektor für HTML sein. Also ...

00:33:52.237 --> 00:33:57.397
Also ich weiß, dass ich irgendwann mal da in die Spec reingeguckt hatte und

00:33:57.397 --> 00:34:01.277
da stand auch ein Grund drin, warum man das auch irgendwie gar nicht möchte,

00:34:01.417 --> 00:34:04.777
dass da irgendwelche Sachen sich hinvererben.

00:34:06.357 --> 00:34:10.437
Also wer da interessiert ist, kann da nochmal reinschauen. Das ist glaube ich

00:34:10.437 --> 00:34:13.137
Blödsinn, oder? Warum würde man das nicht haben wollen?

00:34:13.257 --> 00:34:16.117
Ich will doch, dass mein Dialog und mein Backdrop dann irgendwie auch genauso

00:34:16.117 --> 00:34:17.677
aussieht. Ich meine, wie sonst würde ich einen Dark Mode machen?

00:34:17.737 --> 00:34:21.517
Das ist ja völlig Banane. Ja, ja, aber dass das quasi erfunden wurde,

00:34:21.597 --> 00:34:26.077
das ja mit dieser Möglichkeit Videos an Fullscreen zu schalten, glaube ich.

00:34:26.597 --> 00:34:33.937
Und so in dem Kontext von der Szene, damals war das eben nicht gewollt.

00:34:35.037 --> 00:34:39.417
Dadurch, dass aber dann das Dialog auch dieses Backdrop-Element nimmt,

00:34:40.097 --> 00:34:42.917
hat Dialog dann natürlich auch diese Einschränkungen geerbt.

00:34:43.977 --> 00:34:46.877
Da ist man jetzt halt rangegangen und hat gesagt, so, ja, nee,

00:34:46.917 --> 00:34:51.397
das ist irgendwie Käse, das skaliert nicht, das machen wir jetzt weg.

00:34:53.677 --> 00:34:54.137
Mhm.

00:34:58.017 --> 00:35:01.317
Ich sehe gerade die aktuelle Spezifikation,

00:35:03.177 --> 00:35:07.917
von diesem Top-Layer-Zeug hat da ausführliche Anmerkungen, wie die Engines das

00:35:07.917 --> 00:35:12.837
implementieren sollten, damit das tatsächlich nicht direkt im Top-Layer ist,

00:35:12.897 --> 00:35:15.097
sondern irgendwie sowas, was am Ende den ähnlichen Effekt hat,

00:35:15.837 --> 00:35:18.397
und so, dass am Ende dann diese Custom-Properties wieder funktionieren.

00:35:18.937 --> 00:35:20.697
Sei es wie es sei, gut, dass das da ist.

00:35:22.677 --> 00:35:26.437
Genau, also es ist jetzt kein ich weiß nicht, ob das genau so,

00:35:26.477 --> 00:35:28.237
okay, Dark-Mode, Light-Mode,

00:35:29.597 --> 00:35:34.137
da ist es natürlich sinnvoll ansonsten wird es wahrscheinlich jetzt nicht so

00:35:34.137 --> 00:35:39.297
wahnsinnig viele Leute irgendwie tangieren, aber wenn man sich gefragt hat, warum es nicht ging,

00:35:40.717 --> 00:35:44.837
das ist der Grund und der ist jetzt behoben Naja, du kannst ja mit so einem

00:35:44.837 --> 00:35:47.597
Backdrop alles mögliche Lustige machen, also irgendwie zum Beispiel,

00:35:47.697 --> 00:35:53.317
was ich ja gerne mit sowas mache, ist hier einen Blur-Filter drauflegen und

00:35:53.317 --> 00:35:54.797
wo steht der Radius für das Ding drin?

00:35:54.917 --> 00:35:58.417
Irgendwo in den Custom Properties Ja.

00:36:02.244 --> 00:36:04.844
Also ja, ich habe das auch schon mehrfach verwendet und mich dann gewundert,

00:36:04.884 --> 00:36:07.344
warum geht das nicht? Aber jetzt geht es ja. Alles super.

00:36:08.624 --> 00:36:12.424
Genau. Jetzt können wir sagen, das hast du dir nur alles eingebildet.

00:36:12.584 --> 00:36:14.604
Guck doch mal, es geht doch. So sieht es aus.

00:36:17.764 --> 00:36:23.044
Okay, und dann haben wir eine ziemlich coole API. Also ich finde die irgendwie super.

00:36:24.684 --> 00:36:26.264
Die Check Visibility API.

00:36:28.684 --> 00:36:36.204
Die Die ist dem Intersection Observer ähnlich, aber mit dem Unterschied,

00:36:36.404 --> 00:36:42.484
dass es eben nicht um Intersections geht, sondern um die anderen Teile.

00:36:42.564 --> 00:36:49.484
Also ist der Display nicht auf None, ist die Opacity nicht auf Null und die

00:36:49.484 --> 00:36:51.844
Visibility nicht auf Hidden, all solche Sachen.

00:36:52.444 --> 00:36:58.844
Geht es da jetzt drum auf der ganzen Webseite oder ob das auch im Viewport zusätzlich ist?

00:36:59.964 --> 00:37:03.604
Also in dem Viewport wäre, dann wäre es der Intersection Observer,

00:37:03.824 --> 00:37:13.484
der, genau, der ist, also wenn du jetzt nichts weiter angibst, dann ist,

00:37:13.704 --> 00:37:16.964
dann guckt der ja, ob das Element eben im aktuellen Viewport ist.

00:37:18.304 --> 00:37:22.844
Genau, guckt aber eben auch auf diese anderen Dinge, also wenn das.

00:37:24.324 --> 00:37:30.364
Theoretisch im Viewport ist, aber eine Opacity von 0 hat, dann würde der auch nicht feuern,

00:37:31.604 --> 00:37:36.104
Ich glaube, das war früher mal anders aber mittlerweile ist ja auch der Intersection

00:37:36.104 --> 00:37:40.444
Observer in Version 2 oder so implementiert und da haben die solche Dinge eben

00:37:40.444 --> 00:37:42.724
auch mit einfließen lassen.

00:37:42.944 --> 00:37:48.184
Und Check Visibility ist dann, testet dann nicht ab ob das überhaupt im Viewport wäre.

00:37:48.384 --> 00:37:51.224
Das heißt, wenn ich zum Beispiel sage, ich mache einfach mal in Position Absolut,

00:37:52.024 --> 00:37:56.344
x minus 50 Pixel und es ist quasi

00:37:56.344 --> 00:38:00.284
gar nicht zu sehen, würde aber CheckVisibility trotzdem Choose sagen,

00:38:01.604 --> 00:38:06.524
wenn das Element an sich von CSS-Klassen her sichtbar sein sollte.

00:38:07.384 --> 00:38:09.124
Genau. Okay.

00:38:11.244 --> 00:38:18.704
Und dann kannst du aber auch noch, noch, wenn du möchtest, das Ding mit,

00:38:18.804 --> 00:38:21.784
also Options konfigurieren.

00:38:21.884 --> 00:38:25.484
Also da kannst du dann zum Beispiel sagen, äh.

00:38:28.634 --> 00:38:34.794
Was du für, ob du irgendwelche quasi Unterproperties gerade davon abtesten willst,

00:38:34.954 --> 00:38:39.954
also die, die ich eben genannt habe, da könnte man quasi sagen,

00:38:40.174 --> 00:38:44.534
so, ich möchte jetzt aber nur abtesten, ob die Opacity, also ich will nur die

00:38:44.534 --> 00:38:46.014
Opacity abchecken oder sowas.

00:38:46.974 --> 00:38:50.694
Genau, also man kann CheckVisibility also quasi auch zu einem CheckIf,

00:38:50.874 --> 00:38:56.914
ja, CheckOpacity umbauen, tatsächlich, oder zu nur CheckDisplay und sowas.

00:38:57.894 --> 00:39:01.734
Ja. Welchen Vorteil hat das Ganze dann? Beziehungsweise, stopp,

00:39:01.734 --> 00:39:03.334
ich habe es falsch gesagt.

00:39:03.534 --> 00:39:06.554
Es ist so, dass du die Checks erweitern kannst.

00:39:06.854 --> 00:39:13.154
Also standardmäßig ist es nur, checkt ja nur, ob Display auf None ist oder Display

00:39:13.154 --> 00:39:17.894
Contents eingestellt ist, wodurch das ja auch nicht gerendert wird, das Element.

00:39:19.094 --> 00:39:25.554
Oder genau, ob das in so einem Content Visibility Container drin steckt,

00:39:25.554 --> 00:39:28.974
der, das ist ja quasi so eine Art Lazy Rendering.

00:39:32.734 --> 00:39:37.154
Von Seitenabschnitten, kann man ja damit umsetzen. Und wenn das halt in so einem,

00:39:38.214 --> 00:39:41.634
Lazy-Gerenderten-Abschnitt drin ist, der aber nicht nahe des Viewports ist,

00:39:42.254 --> 00:39:46.394
dann wird ja nicht alles, was da drin ist, einfach nicht gerendert vom Browser.

00:39:46.914 --> 00:39:50.074
Die zwei Sachen, die sind standardmäßig da drin und genau dann kann man das

00:39:50.074 --> 00:39:59.294
erweitern auf Opacity und Visibility und ob es selber eine Content-Visibility-Property hat.

00:39:59.974 --> 00:40:03.634
Was macht denn der denn eigentlich an irgendwie CSS-Style-Recalculations oder

00:40:03.634 --> 00:40:04.974
ähnliches, wenn ich das aufrufe?

00:40:06.885 --> 00:40:10.705
Hm, das ist eine gute Frage. Ich weiß es nicht.

00:40:10.865 --> 00:40:17.545
Also an und für sich müsste er ja welche auslösen. Es ist auch keine asynchrone API.

00:40:17.925 --> 00:40:21.945
Das heißt also, das ist jetzt kein Request-Check-Visibility,

00:40:22.245 --> 00:40:31.985
sondern er müsste dann ein Recalculation triggern in dem Moment, wo man das abfragt.

00:40:32.485 --> 00:40:37.665
Aber er müsste halt wirklich nur rausfinden, welcher Display-Mode gilt jetzt für mich zum Beispiel.

00:40:39.565 --> 00:40:43.085
Weil er wäre ja gegebenenfalls, gegebenenfalls tut sich ja nichts.

00:40:43.285 --> 00:40:45.065
Also ich frage halt nur deshalb, mein Gehirn geht jetzt sofort zu.

00:40:46.705 --> 00:40:54.725
Nee, eigentlich dürfte der keine Neuberechnung auslösen, weil all die Dinge,

00:40:54.805 --> 00:40:59.805
die da quasi abgefragt werden, die stehen ja sowieso schon fest. Hm.

00:41:01.485 --> 00:41:04.485
Ja. Also ich überlege halt nur so, ist das irgendwie so ein,

00:41:04.645 --> 00:41:09.485
hier, ich rendere meine Web-Components, wenn sich was updatet.

00:41:09.785 --> 00:41:13.665
Macht das Sinn, mit so einem kleinen Klassendecorator einfach einen Guard für

00:41:13.665 --> 00:41:17.885
meine Rerender-Funktion zu packen, der sagt, du brauchst diesen ganzen Prozess,

00:41:17.885 --> 00:41:21.285
das HTML neu zu berechnen und dann DOM-Diff zu machen, nur dann zu tun,

00:41:21.365 --> 00:41:24.725
wenn du davon ausgehen kannst, dass dein Host überhaupt visible ist.

00:41:25.525 --> 00:41:27.965
Und ansonsten sparst du dir halt das ganze Domgediffe.

00:41:29.265 --> 00:41:31.745
Würde sich das unterm Strich performancetechnisch lohnen? Ist die Frage.

00:41:32.445 --> 00:41:36.845
Also ich würde sagen, das ist auf jeden Fall ein valider Ansatz. Die Frage ist ja.

00:41:38.456 --> 00:41:43.896
Was machst du, wenn das Element dann irgendwann wieder in die Sicht kommt?

00:41:44.096 --> 00:41:46.856
Oder wenn das dann aktiv geschaltet wird?

00:41:46.936 --> 00:41:52.416
Also ich hätte jetzt eher gesagt, dass ich das vielleicht flagge per Intersection

00:41:52.416 --> 00:41:53.996
Observer, ob es gerade sichtbar ist oder nicht.

00:41:54.596 --> 00:42:00.696
Im Sinne von Viewport? Genau. Und das Update eben zurückhalte bis zu dem Augenblick,

00:42:00.736 --> 00:42:03.076
wo die Visibility eben sich ändert.

00:42:03.616 --> 00:42:07.096
Ja, okay, das macht Sinn. Ja, es fehlt tatsächlich das Visibility Event,

00:42:07.096 --> 00:42:12.856
Wenn dein Check Visibility führt einen nur so und so weit, da hast du natürlich extrem recht. Leider.

00:42:13.736 --> 00:42:17.096
Genau, also ich mache das eigentlich, also bei dem Projekt, wo ich drin bin,

00:42:17.196 --> 00:42:20.216
in dem Frontend ist es auch so, dass im Grunde,

00:42:21.256 --> 00:42:26.836
also die Elemente, bei denen klar ist, dass die im Viewport direkt,

00:42:26.976 --> 00:42:30.836
also im Above-the-Fold sozusagen aufkreuzen, da mache ich das nicht.

00:42:30.916 --> 00:42:35.576
Aber bei allen Elementen, also irgendwelche Slider, die initialisiert werden

00:42:35.576 --> 00:42:40.176
und so, So, wenn die eben weiter unten im Viewport sind, dann hab ich da so

00:42:40.176 --> 00:42:42.396
eine Lazy-Initialisierung für die.

00:42:43.716 --> 00:42:47.596
Weil es kann auch sein, dass die gar nie ins Bild kommen. Ja.

00:42:47.976 --> 00:42:52.396
Also, das ist jetzt ein bisschen anders als bei dir. Du hast ja da regelmäßige

00:42:52.396 --> 00:42:55.616
Rerender-Zyklen anscheinend.

00:42:55.716 --> 00:43:00.236
Also, das ist natürlich noch effizienter. Aber bei mir ist es eben in der Regel

00:43:00.236 --> 00:43:03.216
so ein Einmal-Ding, ob das initialisiert wird oder nicht.

00:43:03.736 --> 00:43:06.776
Ja, das lohnt sich dann natürlich auf jeden Fall, weil die Wahrscheinlichkeit,

00:43:06.816 --> 00:43:09.976
dass jemand einfach nicht bis nach unten scrollt, ja recht hoch ist.

00:43:10.016 --> 00:43:13.316
Andererseits ist halt eben, wenn du so ein Komponentenmodell hast und du nicht

00:43:13.316 --> 00:43:16.216
jetzt irgendwie einfach React von der Stange verwendest, sondern was Eigenes

00:43:16.216 --> 00:43:20.896
baust, kannst du ja selber gestalten sozusagen, wann du dein Renderapparat losschicken

00:43:20.896 --> 00:43:22.976
willst und was so deine Prämissen sind für,

00:43:23.436 --> 00:43:27.116
ich gehe mal von einem Update aus und erlaube mir ein teures DOM-Div.

00:43:28.056 --> 00:43:31.036
Und wenn man da einfach sozusagen vor die Renderfunktion so einen Guard vorsetzen

00:43:31.036 --> 00:43:34.636
könnte, der guckt sichtbar oder nein, ist super.

00:43:34.756 --> 00:43:37.396
Und das geht mit Intersection Observer sicherlich sehr gut an,

00:43:37.436 --> 00:43:41.776
nicht so gut mit dem Check Visibility. Man bräuchte einen Visibility Observer.

00:43:44.756 --> 00:43:48.916
Ja, genau. Wobei das ist ja beim Intersection Observer auch so,

00:43:49.036 --> 00:43:53.776
also wenn du den aufschaltest auf ein Element, das im Viewport ist und du machst

00:43:53.776 --> 00:43:57.776
dann Opacity 0 drauf, dann müsste der im Prinzip auch triggern.

00:43:58.316 --> 00:44:06.016
Und dann ist eben die die Intersection-Ratio, die dürfte dann,

00:44:06.076 --> 00:44:11.736
oder dieses, die Is-Intersecting-Eigenschaft, die dürfte dann False sein. Ja.

00:44:12.236 --> 00:44:15.876
Aber ich meine, das andere Szenario sind natürlich so Sachen wie Display oder

00:44:15.876 --> 00:44:19.756
halt auch so Overflow-Hidden, ich schieb dich links raus.

00:44:21.280 --> 00:44:25.360
Mhm, genau. Wobei da ist es so, dass der Intersection Observer das bisher,

00:44:25.700 --> 00:44:29.800
ich glaube, der kann nur in vertikaler Achse arbeiten und nicht in horizontaler.

00:44:31.220 --> 00:44:35.720
Ich bin nicht ganz sicher, ob die das eventuell geändert haben. Moment, warte mal.

00:44:35.740 --> 00:44:38.460
Das heißt, wenn ich horizontal scrolle, ist... Also wenn du horizontal,

00:44:38.720 --> 00:44:43.120
also zum Beispiel, wir haben ja eben über diese Slider gesprochen und da sind Bilder drin.

00:44:43.500 --> 00:44:51.320
Und die lade ich lazy immer noch per JavaScript, nicht mit dem nativen lazy loading.

00:44:52.560 --> 00:44:57.300
Und zwar aus dem ziemlich beknackten Grund, dass wenn ich das native lazy loading

00:44:57.300 --> 00:45:01.960
drin habe, dass immer die iOS-Geräte irgendwann abgestürzt sind.

00:45:03.360 --> 00:45:07.440
Abgestürzt? Genau, also die die hatten irgendein Problem.

00:45:07.620 --> 00:45:12.020
Also du kannst dir dann ja auch die Stack Traces von denen angucken.

00:45:12.280 --> 00:45:16.440
Und ich weiß nicht, was es ist. Also eigentlich kann iOS das,

00:45:16.580 --> 00:45:21.060
aber in unserer Konstellation, vielleicht weil wir zu viele Bilder oder so hatten,

00:45:21.900 --> 00:45:23.820
hat das immer zum Absturz geführt.

00:45:25.020 --> 00:45:30.820
Und darum habe ich quasi zwei Implementationspfade drin und aktiv ist aber nur

00:45:30.820 --> 00:45:33.200
die JavaScript-Version.

00:45:34.700 --> 00:45:41.520
Und der nutzt Intersection Observer und diese Slider, die haben auch Bilder

00:45:41.520 --> 00:45:45.200
drin und es wäre ja eigentlich ganz cool, wenn ich den Bildern sagen könnte,

00:45:46.180 --> 00:45:50.860
wenn du quasi, wenn du zwar noch nicht zu sehen bist, aber so ein bisschen abseits

00:45:50.860 --> 00:45:52.740
des Viewports links oder rechts bist,

00:45:52.920 --> 00:45:57.320
dann lad schon mal, weil es ist sehr wahrscheinlich, dass man dann eben einmal

00:45:57.320 --> 00:46:01.460
weiter scrollt und dann ist das Bild eben da und fängt erst dann an zu laden

00:46:01.460 --> 00:46:06.900
Und das ist halt schwierig mit dem Intersection Observer, interessanterweise.

00:46:09.640 --> 00:46:14.900
Okay, aber für die Performance-Optimierung rein optional fürs Komponenten-Rerendering

00:46:14.900 --> 00:46:17.160
auf jeden Fall eine wahrscheinlich gute Idee.

00:46:18.540 --> 00:46:22.100
Ja. Warte mal, dann habe ich jetzt noch eine letzte Frage, weil du ja immer

00:46:22.100 --> 00:46:23.500
so viel vom Intersection-Observer erstellst.

00:46:23.660 --> 00:46:26.340
Für Mutation-Observer habe ich ja schon mal nachgemessen, dass es egal ist,

00:46:26.360 --> 00:46:30.160
ob man irgendwie 1000 von den Dingern hat oder irgendwie 7 Millionen,

00:46:30.280 --> 00:46:31.620
das macht performance-technisch keinen Unterschied.

00:46:32.560 --> 00:46:35.580
Wie ist es mit das Intersection-Observer? Ich baue meine Single-Page-Application,

00:46:35.660 --> 00:46:39.140
ich baue mein Facebook-Ding gleich nach und ich gebe jeder Komponenteninstanz

00:46:39.140 --> 00:46:41.540
seinen eigenen Intersection-Observer. Hast du Erfahrung?

00:46:42.260 --> 00:46:50.060
Keine Ahnung. Aber du musst ja, genau, wobei du im Grunde erzeugst ja in der

00:46:50.060 --> 00:46:54.660
Regel nur einen Intersection Observer und dann, also den konfigurierst du ja

00:46:54.660 --> 00:46:55.700
auf eine bestimmte Art und Weise.

00:46:56.200 --> 00:47:01.440
In der Regel sagst du, hey, mich interessiert die Intersection eben mit dem und dem Element.

00:47:01.680 --> 00:47:04.980
Ist eigentlich ja immer der Root quasi oder der Viewport.

00:47:06.100 --> 00:47:11.420
Und dann konfigurierst du noch die Margins und quasi welche,

00:47:11.680 --> 00:47:17.120
an welchen Thresholds, also an welchen Sichtbarkeitsthresholds letztendlich

00:47:17.120 --> 00:47:23.240
sowas wie Prozente, wie viel Prozent sichtbar ist, was soll der jeweils immer auslösen und Dinge tun.

00:47:26.140 --> 00:47:30.460
Aber das willst du bei so einem Konzept, machst du das ja nur einmal,

00:47:30.620 --> 00:47:34.720
konfigurierst du das für alle Komponenten, das willst du ja für alle gleich haben.

00:47:34.980 --> 00:47:39.420
Und dann hast du einen Intersection-Observer, mit dem du dann einfach immer nur observst.

00:47:39.480 --> 00:47:43.640
Du observst halt mit einem Intersection-Observer sehr viele Elemente.

00:47:44.220 --> 00:47:46.960
Ja, würde ich dann machen, wenn das die bessere Wahl ist. Wenn das die schlechtere

00:47:46.960 --> 00:47:51.500
Wahl ist, würde ich 100.000 Intersection-Observer bauen. Und das ist halt eben die Frage.

00:47:53.797 --> 00:47:56.117
Also für mich klingt es so, als kann das nur schlechter sein.

00:47:56.317 --> 00:48:00.237
100.000 Intersection-Observer bauen, die einzelnen Elemente observen.

00:48:00.557 --> 00:48:03.997
Ja, ich scroll gerade noch durch meinen Artikel mit den Mutation-Observern von damals.

00:48:07.057 --> 00:48:10.897
Ich glaube, das war doch damals so, dass in Chrome war das eine Performanta

00:48:10.897 --> 00:48:13.417
und in Firefox war es genau umgedreht oder so.

00:48:16.837 --> 00:48:19.837
Scroll, scroll, ich labere viel zu viel darüber, dass das alles keinen Unterschied

00:48:19.837 --> 00:48:23.697
macht. Weil der Unterschied messbar aber so klein ist.

00:48:28.457 --> 00:48:33.137
Wir können ja trotzdem auch uns schon mal weiter bewegen. Machen wir mal.

00:48:33.257 --> 00:48:35.957
Da brauchen wir aber auch deine Expertise. Oh nein.

00:48:36.477 --> 00:48:44.957
Doch, es gibt jetzt sozusagen aus diesem Web Components Kosmos das Custom State Set Interface.

00:48:46.337 --> 00:48:50.737
Also ich kenne die Use Cases nicht so genau, Genau, aber man kann sowas oder

00:48:50.737 --> 00:48:53.177
man kann irgendwelche States setzen,

00:48:53.337 --> 00:49:02.877
die dann von außen, also von außen sieht das die Web Component ja in der Regel aus wie nur ein Element.

00:49:04.017 --> 00:49:07.837
Und da kann man mit der, ich weiß ja nicht, wie nennt man das denn,

00:49:08.057 --> 00:49:15.477
Pseudoklassen-Methode, State, Klammer auf, dann kann man da eben sagen sowas

00:49:15.477 --> 00:49:18.177
wie, sagen wir mal, Visible.

00:49:18.817 --> 00:49:22.617
Ja. Wir können auch bei Checkbox bleiben.

00:49:22.977 --> 00:49:25.477
Aber man kann eben nicht so einen Doppelpunkt checked machen,

00:49:25.617 --> 00:49:31.637
sondern in dem Fall müsste man ein, also oder jetzt für diese spezifische API

00:49:31.637 --> 00:49:37.137
müsste man einen Doppelpunkt state, Klammer auf, checked, Klammer zu machen. Genau.

00:49:37.777 --> 00:49:42.637
Also man baut sich quasi seine eigene Pseudoklasse zweiter Klasse,

00:49:43.317 --> 00:49:47.197
die halt eben immer noch ein Parameter sein muss für die Ober-Pseudoklasse state.

00:49:48.647 --> 00:49:52.527
Naja, das ist halt der eine Use Case, also wo ich sozusagen meine eigene Pseudoklasse

00:49:52.527 --> 00:49:57.707
implementiere und dokumentiere für die Außenwelt, aber viel spannender finde

00:49:57.707 --> 00:50:00.327
ich eigentlich den Use Case interner State von der Komponente,

00:50:00.447 --> 00:50:04.107
weil vielleicht ist die Komponente super interaktiv, du kannst drin rumklicken

00:50:04.107 --> 00:50:07.567
und je nachdem, was du da drin geklickt hast, willst du halt dein eigenes Rendering

00:50:07.567 --> 00:50:11.347
in der Komponente updaten und brauchst irgendeine Art von Selector, womit du sagen kannst,

00:50:11.487 --> 00:50:16.027
hier, der Host ist jetzt in dem Zustand und entsprechend soll dieses CSS gelten und jenes nicht mehr.

00:50:16.847 --> 00:50:20.207
Und das kannst du ja tatsächlich in Privat nicht gut ausformulieren,

00:50:20.247 --> 00:50:22.167
wenn du diese Custom-States nicht hast,

00:50:22.267 --> 00:50:26.567
weil das Einzige, was du machen könntest, wäre irgendwie diese interne Zustandsänderung

00:50:26.567 --> 00:50:30.507
ändert tatsächlich was an dem äußeren Interface des Elements,

00:50:30.527 --> 00:50:31.947
im Sinne von da kommt ein Attribut hinzu,

00:50:32.007 --> 00:50:35.587
eine Klasse hinzu, aber das wäre ja nicht sehr Web-Componentig,

00:50:35.627 --> 00:50:37.547
weil HTML-Elemente tun das ja nicht,

00:50:37.647 --> 00:50:41.487
also indem ich irgendwie ein Textfeld fokussiere, kriege ich das ja keine neuen Attribute,

00:50:41.647 --> 00:50:44.587
sondern plötzlich gilt irgendwie ein anderer Zustand, der dann,

00:50:44.647 --> 00:50:46.007
okay, sich nach außen auswirkt.

00:50:46.027 --> 00:50:48.867
Ausprägt, weil meine, keine Ahnung, Fokus-Pseudoklasse jetzt greift,

00:50:48.947 --> 00:50:52.587
aber vor allen Dingen hat das ja Bedeutung für die interne Implementierung der Komponente.

00:50:53.267 --> 00:50:57.427
Und der Aspekt ist halt super an diesen Custom-States, weil das geht halt eben

00:50:57.427 --> 00:50:58.727
sonst einfach überhaupt gar nicht.

00:50:59.087 --> 00:51:02.427
Ich kann halt eben keinen privaten State haben. Und jetzt kann ich halt entweder

00:51:02.427 --> 00:51:05.727
einen öffentlichen State machen und indem ich halt dokumentiere,

00:51:05.747 --> 00:51:07.987
dass es halt eben hier diese Pseudoklasse zweiter Klasse gibt,

00:51:08.107 --> 00:51:12.087
oder ich dokumentiere es halt eben nicht, dann habe ich was Privates und wenn

00:51:12.087 --> 00:51:14.907
das alles fehlt, dann muss ich irgendwie Klassen setzen und das ist einfach doof.

00:51:16.347 --> 00:51:21.547
Okay, das heißt also, du siehst den Wert dieser API eigentlich wahrscheinlich

00:51:21.547 --> 00:51:28.407
mehr für die Betrachtung innerhalb der Web-Komponenten als für die Betrachtung von außerhalb.

00:51:28.867 --> 00:51:31.727
Ja, ich glaube, das ist beides wertvoll. Also das ist halt mein persönlicher

00:51:31.727 --> 00:51:34.527
Bias, weil ich halt vor kurzem so diverse Komponenten gebaut habe,

00:51:34.587 --> 00:51:37.847
so High-Level-Komponenten wie irgendwie ein Split-View, dass ich in der Mitte

00:51:37.847 --> 00:51:39.347
so ein Ding von links nach rechts draggen kann.

00:51:39.947 --> 00:51:42.207
Und dann will ich halt irgendwie intern, sobald ich am Draggen bin,

00:51:42.247 --> 00:51:45.207
meine Komponente in den Zustand versetzen, Dragging, damit ich halt intern meine

00:51:45.207 --> 00:51:46.447
Styles irgendwie orchestrieren kann.

00:51:47.207 --> 00:51:50.587
Und da gab es halt keine saubere Lösung zu, weil halt eben dieses Custom-State-Set

00:51:50.587 --> 00:51:53.467
auf Safari nicht ging und auf Firefox

00:51:53.467 --> 00:51:55.727
im Moment auch nur noch hinter einem Fleck ist, also in Arbeit ist.

00:51:57.127 --> 00:52:00.107
Und deswegen setze ich da im Moment eine Klasse mit einem Kommentar hinter,

00:52:00.187 --> 00:52:01.747
dass es doof und muss geändert werden ASAP.

00:52:03.227 --> 00:52:06.127
Und jetzt sind wir dem ganzen ASAP einen Schritt näher, weil Safari kann das auch.

00:52:07.167 --> 00:52:11.327
Also Custom State Set ist einfach wirklich nur so ein Set von Strings,

00:52:11.327 --> 00:52:12.547
so ähnlich wie eine Classlist halt.

00:52:12.907 --> 00:52:15.027
Nur halt eben mit der Bedeutung nicht, ich habe jetzt mehr Klassen,

00:52:15.047 --> 00:52:18.447
sondern ich habe diese internen Zustände, die sich über diese Pseudoklassen ausprägen.

00:52:19.267 --> 00:52:22.527
Eigentlich eine ganz triviale Sache, aber bestimmt in der Implementierung nicht

00:52:22.527 --> 00:52:25.547
ganz so trivial, weswegen Firefox noch ein bisschen am Schrauben ist.

00:52:27.988 --> 00:52:32.768
Ja, also ein bisschen vielleicht wie der Indeterminate-State,

00:52:32.908 --> 00:52:37.688
über den wir eingangs bei der letzten Revision sprachen, der sich ja auch nicht

00:52:37.688 --> 00:52:39.108
als Attribut niederschlägt.

00:52:40.088 --> 00:52:44.948
Ja, oder der Fokus-Pseudoklasse, hast du ja auch schon gesagt.

00:52:45.148 --> 00:52:47.888
Genau, ich wollte sagen, also weil das Indeterminate prägt sich ja zumindest

00:52:47.888 --> 00:52:51.408
über so ein IDL-Attribut aus. Also es ist ja ein Boolean, den du in JavaScript setzen kannst.

00:52:52.028 --> 00:52:55.508
Und das würde ja so was wie, ich dragge jetzt gerade in meinem Element dieses

00:52:55.508 --> 00:52:58.588
mittlere Ding durch die Gegend, um es zu resizen, Das würde sich ja gar nicht

00:52:58.588 --> 00:53:02.468
ausprägen, weil es gibt ja keine Notwendigkeit, da irgendwie das abzufragen,

00:53:02.488 --> 00:53:03.968
weil das ist ja eine User-Interaktion.

00:53:04.228 --> 00:53:08.848
Aus JavaScript ist das ja rein transaktionell. Also, das Ding wird halt gedrackt

00:53:08.848 --> 00:53:10.808
und plötzlich resized es sich, Ende aus Mickey Mouse.

00:53:10.988 --> 00:53:14.308
Da muss ja niemand wissen, dass das gerade im Gange ist, weil das ergibt ja keinen Sinn.

00:53:14.908 --> 00:53:19.368
Also, wirklich eher Focus-State als Indeterminate, wobei kann man sicherlich auch nutzen.

00:53:21.488 --> 00:53:22.008
Okay. Okay.

00:53:24.128 --> 00:53:33.868
Dann haben wir auch neu im Safari die Methode Promise.withResolvers und die

00:53:33.868 --> 00:53:40.248
kann man dann destrukturieren in die Promise selbst und die Resolve und Reject,

00:53:41.528 --> 00:53:42.368
Methoden.

00:53:44.008 --> 00:53:47.328
Im Chrome und Firefox klinke ich auch relativ neu.

00:53:48.148 --> 00:53:53.868
Genau. Genau. Warum möchte ich das tun? Darf ich dir eine Frage vorwegstellen?

00:53:54.028 --> 00:53:56.108
Dann kann ich dir sagen, ob du das überhaupt tun möchtest.

00:53:57.468 --> 00:54:02.608
Hast du jemals die Promise-Constructor-Funktion verwendet? Also jemals New Promise geschrieben?

00:54:07.188 --> 00:54:11.628
Nee. Dann brauchst du das nicht. Ich glaube, ich habe das einmal in meinem Leben,

00:54:11.688 --> 00:54:14.568
ich möchte nicht lügen, ich habe das einmal als Workaround für,

00:54:14.588 --> 00:54:17.228
glaube ich, vielleicht irgendeine Sleep-Methode geschrieben und das war's.

00:54:17.228 --> 00:54:20.628
Das ist auch ein sehr valider Einsatzzweck, persönlich auch mein häufigster

00:54:20.628 --> 00:54:24.128
für neues Projekt, baust ein paar Unit-Tests, ich brauche halt warten,

00:54:24.168 --> 00:54:26.008
damit ich gucken kann, ob die asynchronen Dinger passiert sind,

00:54:26.428 --> 00:54:28.928
machst du eine Sleep- oder Wait-Funktion, genau. Genau.

00:54:29.028 --> 00:54:32.868
Ja, ja. Also die Idee dahinter ist, also hinter New Promise oder halt eben diesem

00:54:32.868 --> 00:54:35.448
Konstrukt hier ist halt, normalerweise schreibt man New Promise,

00:54:35.568 --> 00:54:38.108
in New Promise steckt man eine Function hinein, die Function bekommt zwei Parameter

00:54:38.108 --> 00:54:41.788
übergeben, diese beiden Parameter sind Resolve, Reject, das sind Functions und

00:54:41.788 --> 00:54:45.268
dann kann man die innerhalb dieser Function, die man in New Promise hineingesteckt

00:54:45.268 --> 00:54:48.568
hat, aufrufen, um dann das Promise in den einen oder anderen Zustand zu überführen.

00:54:49.068 --> 00:54:52.448
Idee dahinter ist, Resolve und Reject privat halten, damit nur die Ersteller

00:54:52.448 --> 00:54:55.448
von Promise daran kommen können, damit nur die Ersteller von Promise bestimmen

00:54:55.448 --> 00:54:58.328
können, ob Resolved oder Reject mit welchem Wert oder welchem Error.

00:55:00.567 --> 00:55:04.847
Macht voll viel Sinn, funktioniert halt nicht. Weil es gibt halt genug APIs,

00:55:05.087 --> 00:55:07.987
die man bauen möchte, die am Ende ein Promise produzieren sollen,

00:55:08.127 --> 00:55:09.787
wo man irgendwelche Effekte abfangen

00:55:09.787 --> 00:55:12.667
möchte, die außerhalb von dieser Promise-Konstruktion stattfinden.

00:55:13.387 --> 00:55:16.487
Oder die man quasi von extern resolven möchte, ne?

00:55:16.927 --> 00:55:21.427
Irgendwann. Ich würde behaupten, dass von extern resolven generell eine schlechte

00:55:21.427 --> 00:55:24.907
Idee ist, weil das ja so den Erwartungen von einem Promise als halt Blackbox,

00:55:25.027 --> 00:55:26.787
die man irgendwann auspackt, widerspricht.

00:55:27.527 --> 00:55:32.027
Aber es gibt halt so Übergangssituationen. Also was ich letztens hatte,

00:55:32.087 --> 00:55:36.647
war, ich habe eine Funktion gebaut, da sollte man reingeben ein File-Objekt

00:55:36.647 --> 00:55:39.647
und dann wollte ich am Ende ein Promise auf den Base64-String raushauen.

00:55:40.427 --> 00:55:43.867
So, relativ trivial, nimmt man den File-Reader, der File-Reader spricht keine

00:55:43.867 --> 00:55:47.367
Promises, der hat noch so eine Callback-basierte API und genau dafür ist sowas

00:55:47.367 --> 00:55:50.787
wie New Promise oder PromiseWithReader soll was gedacht. Man hat eine API,

00:55:50.907 --> 00:55:53.727
die kann keine Promises, da baut man dann einen Promise-Wrapper drumherum.

00:55:54.147 --> 00:55:57.207
Und das braucht halt niemand, weil die meisten APIs heute Promises sprechen

00:55:57.207 --> 00:55:59.387
oder irgendwer hat schon den Wrapper gebaut.

00:56:00.067 --> 00:56:02.627
Deswegen nutzt das niemand, außer halt eben für so Sleep-Funktionen.

00:56:02.927 --> 00:56:06.167
Aber ich wollte halt eben dann in meiner Funktion gucken, ob der Input,

00:56:06.227 --> 00:56:08.527
den die bekommt, halt eben auch,

00:56:08.647 --> 00:56:11.927
naja, eine Instance-of-File ist und nicht irgendwie undefined oder so.

00:56:12.627 --> 00:56:15.327
Und wenn das dann der Fall sein sollte, wollte ich einen Fehler haben.

00:56:15.667 --> 00:56:16.587
Wie mache ich einen Fehler?

00:56:16.787 --> 00:56:19.447
Normalerweise schmeiße ich eine Exception. Ich will aber eine asynchrone Funktion

00:56:19.447 --> 00:56:21.387
bauen, die also ein Promise produziert.

00:56:21.607 --> 00:56:24.987
Und dann will ich halt eben einen Fehlerfall auch nur modellieren durch ein Rejected-Promise.

00:56:25.167 --> 00:56:28.647
Und ich will nicht sowas haben, wie das Ding kann, wenn es bis zu einem bestimmten

00:56:28.647 --> 00:56:31.867
internen Zustand kommt, ein Promise produzieren, das Rejected werden kann.

00:56:31.927 --> 00:56:34.447
Und vorher gibt es eine Exception, die ich mit Try-Catch anfangen soll.

00:56:34.567 --> 00:56:35.847
Das will man ja alles vereinheitlichen.

00:56:37.327 --> 00:56:40.627
Und naja, das ging halt damit total gut, weil dann habe ich einfach in der ersten

00:56:40.627 --> 00:56:44.547
Zeile genau diese Zeile geschrieben, gib mir das Promise und Resolve und Reject,

00:56:44.687 --> 00:56:48.247
dann konnte ich meinen Error-Check machen und wenn der dann halt tatsächlich,

00:56:48.987 --> 00:56:51.807
produziert hat hier, das ist jetzt ein Undefined und kein File,

00:56:51.947 --> 00:56:55.587
dann konnte ich einfach ein Error konstruieren, in Reject reinstecken und das

00:56:55.587 --> 00:56:59.407
Promise-Return ein Early-Exit machen, ohne halt irgendwie mir da groß einen

00:56:59.407 --> 00:57:00.447
abzubrechen mit New-Promise.

00:57:01.447 --> 00:57:05.087
Also die Theorie hinter der Konstruktion von New-Promise ist korrekt,

00:57:05.087 --> 00:57:07.687
aber in der Praxis ist das hier schon sinnvoll, muss ich einsehen.

00:57:09.867 --> 00:57:10.307
Okay.

00:57:13.187 --> 00:57:17.147
Dann hast du da einen Link für, für die Shownotes, für dein Konstrukt?

00:57:18.907 --> 00:57:24.407
Nee, das habe ich tatsächlich auch nur gebaut, um für die JavaScript Days nächste

00:57:24.407 --> 00:57:27.567
Woche, wo ich einen Talk mache über Neuerungen in JavaScript,

00:57:27.687 --> 00:57:29.447
ein Beispiel habe, warum das eine gute Idee ist.

00:57:30.027 --> 00:57:32.627
Okay. Da kommt das her. Sehr gut. Naja, aber es ist halt so,

00:57:32.647 --> 00:57:35.307
du baust einen Wrapper um den Pfeil, denkst rum und guckst, ob der Input irgendwie

00:57:35.307 --> 00:57:37.187
korrekt ist. Das ist, glaube ich, relativ selbsterklärend.

00:57:38.584 --> 00:57:43.224
Ja. Ich befürchte, wenn wir das senden, ist nächste Woche schon passiert gewesen. Korrekt.

00:57:44.004 --> 00:57:48.804
Oder hast du so weit voraus gedacht, dass das quasi doch noch erst eine Woche

00:57:48.804 --> 00:57:50.304
nach dem Release ist? Genau, genau.

00:57:50.744 --> 00:57:53.224
Also vor zwei Wochen wirst du darüber

00:57:53.224 --> 00:57:54.904
gesprochen haben. Ja, ich meine die JavaScript-Days im Oktober natürlich.

00:57:55.644 --> 00:57:58.164
Ah, natürlich. Ah, aha.

00:58:00.404 --> 00:58:06.484
Sehr, sehr schlau. Die Oktober in einer Woche? Ja. Ja.

00:58:06.884 --> 00:58:09.264
Raum, Zeit, Weißt du, das ist ja auch alles so.

00:58:11.664 --> 00:58:15.004
Genau, auf der Südhalbkugel ist ja jetzt auch Herbst und so.

00:58:15.864 --> 00:58:19.084
Richtig, richtig. Und der Strudel, wenn du dann an der Toilettenspülung ziehst,

00:58:19.104 --> 00:58:19.984
geht ja auch ganz anders rum.

00:58:20.184 --> 00:58:25.264
Und das erklärt... Habt ihr eine Ahnung, was passiert genau auf dem Äquator

00:58:25.264 --> 00:58:26.604
bei einer Toilettenspülung?

00:58:26.904 --> 00:58:29.304
Meinst du, das Klo spült einfach nicht?

00:58:31.124 --> 00:58:34.844
Spült es dann nicht oder was passiert dann? Wenn ich jetzt davon ausgehe,

00:58:34.884 --> 00:58:36.204
dass das... Oder wirbel das...

00:58:36.824 --> 00:58:39.544
Also, wenn ich davon ausgehen kann, dass das Klo in JavaScript implementiert

00:58:39.544 --> 00:58:44.944
ist, dann würde ich annehmen, dass es Infinity ausspuckt. So wie wenn ich durch Null teile.

00:58:48.684 --> 00:58:52.884
Infinity gibt es übrigens jetzt auch in CSS. Das habe ich gelesen. Das ist cool.

00:58:53.404 --> 00:58:56.004
Ich hatte keine Ahnung, dass es das gibt. Das ist der totale Oberhammer.

00:58:56.444 --> 00:58:57.664
Aber ich glaube, das ist auch ganz neu.

00:58:57.924 --> 00:59:01.784
Ich glaube, das ist jetzt noch nicht, dass es schon Ewigkeiten gibt.

00:59:02.024 --> 00:59:06.344
Da gab es ein echt cooles Post drüber. vielleicht können wir das auch noch rausfischen

00:59:06.344 --> 00:59:09.724
und in die Links werfen. Jo, ich hab's schon. Für den Z-Index?

00:59:11.764 --> 00:59:18.444
Genau. Der klemmt das aber dann quasi auf dem, also Infinity ist sozusagen nur

00:59:18.444 --> 00:59:22.184
der Repräsentant der größtmöglichen Z-Index-Zahlen.

00:59:22.224 --> 00:59:24.524
Jaja, MaxInt. Ja, genau.

00:59:25.084 --> 00:59:26.884
Nee, war das nicht nach Browser auch unterschiedlich?

00:59:28.424 --> 00:59:31.604
Also früher war das mal nach Browser unterschiedlich, aber mittlerweile ist,

00:59:31.644 --> 00:59:35.384
glaube ich, der höchstmögliche Z-Index. Ich glaube, das ist weiterhin unterschiedlich.

00:59:35.484 --> 00:59:37.464
Also es wurde, glaube ich, aber auch in diesem...

00:59:37.984 --> 00:59:41.344
Ich sage das hier mal so freier aus. Ihr könnt das ja mal challengen,

00:59:41.344 --> 00:59:42.404
die Hörerinnen und Hörer.

00:59:44.589 --> 00:59:48.909
Ich glaube, da gibt es so Chrome auf macOS, das ist vielleicht sogar anders als Chrome auf Windows.

00:59:49.889 --> 00:59:52.509
Aber ich labere jetzt einfach nur, was ich mir gerade im Kopf ausgedacht habe.

00:59:52.509 --> 00:59:57.329
Chrome auf macOS, wenn man jetzt die Breite auf Infinity stellt und die abfragt,

00:59:57.329 --> 01:00:01.929
kriegt man raus 16.777.214 Pixel.

01:00:02.329 --> 01:00:05.969
Ja, bei Width und Height hatten die Browser Unterschiede, aber ich glaube,

01:00:06.049 --> 01:00:08.329
beim Z-Index sind die gleich. Ach, 16 Millionen.

01:00:09.829 --> 01:00:13.829
Ja, okay. Wir wissen ja alle, dass das eigentlich ausschließlich für Z-Index

01:00:13.829 --> 01:00:16.129
verwendet werden wird, also stimmt schon.

01:00:16.349 --> 01:00:21.369
Wobei das lustige ist, wenn du das Ganze einsperrst in so ein Position Relative

01:00:21.369 --> 01:00:27.389
Ding mit Z-Index 0, dann kannst du da Z-Index Infinity draufwerfen auf das Kintelement.

01:00:28.969 --> 01:00:29.849
Es wird nicht mehr rauskommen.

01:00:31.629 --> 01:00:38.309
Infinity Important. Das ist der Hammer. Ich glaube, dann schmilzt der Browser einfach nur.

01:00:44.649 --> 01:00:51.069
Ja, was man auch gut gruppieren kann, sind ja Z-Index, Important und Infinity,

01:00:51.349 --> 01:00:54.069
aber gruppieren können wir jetzt auch Objekte.

01:00:54.349 --> 01:00:56.549
Äh, mit Iterables.

01:01:00.069 --> 01:01:03.669
Also, ja. Deswegen leite ich über an dich. Was können wir denn jetzt gruppieren?

01:01:03.869 --> 01:01:09.749
Alles, was Listen-like ist, also irgendwie Array, String, DOM-String-Map.

01:01:09.869 --> 01:01:11.829
Hast du nicht gesehen, alles, was in eine Voraufschleife passt? passt.

01:01:13.029 --> 01:01:16.149
Können wir reinstecken in Object Group By oder Map Group By.

01:01:16.249 --> 01:01:19.829
Da stecken wir rein das Objekt oder den String oder so, das iterierbare Zeug.

01:01:20.549 --> 01:01:23.809
Und eine Prädikat-Rauspick-Funktion. Also, keine Ahnung, Kasten,

01:01:23.809 --> 01:01:27.769
Haufen Objekte, die haben alle eine Property Value und dieser Value ist entweder

01:01:27.769 --> 01:01:30.309
A, B oder C. Und dann hast du irgendwie 70 Objekte von denen.

01:01:30.589 --> 01:01:33.529
Und dann gibt er dir zurück ein Objekt mit den Keys A, B, C.

01:01:33.989 --> 01:01:36.609
Und dann sind da drin Arrays, die hat nicht wahr.

01:01:38.647 --> 01:01:42.867
Das ist so ein Ding, was man schon immer, also ich glaube, das gibt es doch

01:01:42.867 --> 01:01:46.107
bestimmt bei Lodash oder sowas, aber man hat normalerweise, wenn man jetzt,

01:01:46.227 --> 01:01:49.827
kopiert man sich das halt einfach raus sowas, aber das heißt,

01:01:50.067 --> 01:01:54.267
ich kann jetzt quasi, vielleicht hast du es genau gerade gesagt,

01:01:54.447 --> 01:01:57.967
ich wiederhole nur, ob ich es jetzt richtig gecheckt habe, ich habe ein Array

01:01:57.967 --> 01:02:04.687
oder eine Liste an Dingern und irgendwas an diesen Dingern ist irgendwie die ID dieser Sache.

01:02:04.687 --> 01:02:13.287
Also ich könnte jetzt sagen, ich habe den Sport Formel 1, Formel 1 und den Sport

01:02:13.287 --> 01:02:16.627
Fußball und Fußball und ich habe halt jetzt dazu den Firstname und Nachnamen

01:02:16.627 --> 01:02:17.487
von verschiedenen Leuten.

01:02:17.747 --> 01:02:20.627
Jetzt interessiert mich aber Fußball überhaupt nicht, sondern nur Formel 1.

01:02:20.627 --> 01:02:24.167
Und damit ich dann schneller darauf zugreifen kann und nicht immer sagen muss,

01:02:24.287 --> 01:02:27.587
find all name equals Formel 1,

01:02:27.727 --> 01:02:33.987
kann ich dann sagen, Object Group by meine Sportliste und zwar mit dem Namen

01:02:33.987 --> 01:02:36.487
oder halt mit der Sportart.

01:02:36.607 --> 01:02:40.807
Und dann kann ich sagen, das ist ein Objekt, was rauspuzzelt,

01:02:40.847 --> 01:02:43.327
keine Liste mehr, Objekt Punkt Formel 1.

01:02:45.227 --> 01:02:47.927
Jetzt bin ich nicht ganz sicher, ob ich dir folgen konnte Das Ding ist halt

01:02:47.927 --> 01:02:52.027
schon Die Dinger werden wirklich nur umsortiert und halt eben anhand eines Index

01:02:52.027 --> 01:02:58.307
Sport oder Name und so Ja, dann gab ich einen Index Ich glaube,

01:02:58.447 --> 01:02:59.667
Vanessa hat das schon korrekt,

01:03:00.547 --> 01:03:04.927
gesagt Das Ding ist halt natürlich nur so unter der Prämisse interessiert mich

01:03:04.927 --> 01:03:07.467
nur Du hast natürlich die ganzen anderen Sachen immer noch da aber du meinst

01:03:07.467 --> 01:03:10.407
jetzt wirklich so, ich strukturiere das auf eine Weise, dass diejenigen,

01:03:10.567 --> 01:03:13.627
die sich nur für eins interessieren, nicht mehr suchen müssen Genau, das macht Sinn.

01:03:14.307 --> 01:03:16.947
Richtig, das hat auch gar nichts, stimmt, das hat eigentlich gar nichts damit

01:03:16.947 --> 01:03:19.827
zu tun gehabt, ob es mich noch interessiert oder nicht.

01:03:20.027 --> 01:03:22.867
Aber ich habe jetzt eben danach den Index und kann dann wahrscheinlich vielleicht

01:03:22.867 --> 01:03:25.167
auch schneller drauf zugreifen jedes Mal. Genau.

01:03:25.647 --> 01:03:29.587
Also ich habe auch so ein Ding in meiner persönlichen Toolbox drin,

01:03:29.587 --> 01:03:33.147
die ich mir da im Prinzip in jedes Projekt rein importiere, weil das braucht man eigentlich immer.

01:03:35.367 --> 01:03:39.327
Ja, sonst so was, was man mit Retools irgendwie abgefackelt hat, ne?

01:03:41.147 --> 01:03:46.967
Aber genau zu Reduce, also ich habe jetzt mal eine Einschätzungsfrage für euch,

01:03:47.107 --> 01:03:53.307
was jetzt genau alle solche Funktionen angeht, wie Reduce oder Map oder gegebenenfalls

01:03:53.307 --> 01:03:55.767
dann auch Group By und dann noch ein Find drauf. drauf.

01:03:57.567 --> 01:04:02.467
Bevorzugt ihr es normalerweise, mehrere von diesen Funktionen aufzurufen,

01:04:02.507 --> 01:04:06.787
die dann aber gegebenenfalls wiederholte Male das Array durchsuchen müssen,

01:04:06.927 --> 01:04:11.867
wie zum Beispiel in den Reduce und den Map, oder bevorzugt ihr eine For-Loop,

01:04:12.007 --> 01:04:13.507
wo ihr nur einmal durchgeht.

01:04:14.227 --> 01:04:20.187
Dafür wird es gegebenenfalls unlesbarer und ihr macht aber die Aktion nur in dieser einen For-Loop.

01:04:22.678 --> 01:04:28.018
Ja, also wenn das jetzt einfach so die Rundumfrage ist, ich persönlich habe

01:04:28.018 --> 01:04:32.938
mich ja mittlerweile komplett dem imperativen Goblin-Mode überanbeten und diesen

01:04:32.938 --> 01:04:35.438
ganzen funktionalen Krempel mache ich halt wirklich nur da, wenn es mir wirklich

01:04:35.438 --> 01:04:36.798
signifikante Tipperei spart.

01:04:37.758 --> 01:04:40.238
Ansonsten mache ich auch ganz, also ich mache hier alles Vorschleife,

01:04:40.318 --> 01:04:42.958
ich mache auch while true mit irgendwie sieben Breaks da drin,

01:04:43.058 --> 01:04:45.278
das ist mir sonst alles viel zu kompliziert, da muss ich zu viel Zeug wissen.

01:04:45.758 --> 01:04:49.198
Ich will auf den Code gucken und ich will einfach wissen, was schiebt der da

01:04:49.198 --> 01:04:51.958
an Zahlen durch die Gegend und der ganze andere Krempel ist mir zu kompliziert.

01:04:52.118 --> 01:04:55.798
Das portioniere ich dann schön in Objekten und Methoden und Funktionen und dann

01:04:55.798 --> 01:04:59.218
ist es auch übersichtlich und dann können mir die ganzen FancyPants-Leute den

01:04:59.218 --> 01:05:00.038
Buckel runterrutschen.

01:05:01.358 --> 01:05:06.238
Also bitte nutzt... Also die FancyPants-Leute werden jetzt MapReduce, FlatMap... Ja, genau.

01:05:06.358 --> 01:05:08.718
Also ich sage jetzt nicht, dass ich das nie verwende, sondern halt eben genau

01:05:08.718 --> 01:05:11.098
dann, wenn das offensichtlich die bessere Wahl ist.

01:05:11.278 --> 01:05:13.958
Aber wenn auch nur der Zweifel besteht, dass man das irgendwie mit billigeren,

01:05:13.958 --> 01:05:18.378
simpleren No-Brainern auch machen könnte, dann tendiere ich zu denen.

01:05:18.658 --> 01:05:22.178
Aber das ist allein meine persönliche Präferenz und hat nichts mit Performance

01:05:22.178 --> 01:05:25.978
zu tun, sondern einfach nur so, weil ich bin es halt müde, darüber nachzudenken

01:05:25.978 --> 01:05:29.738
und ich nehme jetzt die radikal simpelste Option, selbst wenn mich dann die

01:05:29.738 --> 01:05:31.758
React Kids schief angucken. Damit muss ich jetzt leben.

01:05:34.518 --> 01:05:40.118
Wie schauen dich denn die React-Kids an? Ich glaube, sie würden mich etwas freundlicher

01:05:40.118 --> 01:05:45.978
anschauen, weil ich wahrscheinlich Filter, Map und Reduce so aneinanderketten würde.

01:05:47.858 --> 01:05:52.798
Außer ich... Das heißt, du gehst dreimal durchs Array? Ja, je nachdem. Also, ähm...

01:05:54.177 --> 01:05:56.777
Also wenn du es gefiltert hast, wird es natürlich kleiner, aber dann geht es

01:05:56.777 --> 01:06:00.557
kleiner nachher durch. Das ist ja irgendwie sinnvoll. Immerhin.

01:06:01.437 --> 01:06:07.757
Genau, und dann würde ich, ich glaube, ich würde es anders handhaben,

01:06:07.757 --> 01:06:10.237
wenn ich merken würde, dass ich ein Performance-Problem habe.

01:06:11.757 --> 01:06:17.277
Dann würde ich es halt profilen. Wenn dabei herauskäme, dass dieser Prozess

01:06:17.277 --> 01:06:20.237
zu lange dauert, dann würde ich mich wahrscheinlich daran versuchen,

01:06:20.597 --> 01:06:22.737
alles in einer Schleife abzuarbeiten.

01:06:25.197 --> 01:06:31.637
Ähm, genau, so früher war das so in IE11-Zeiten, dass der langsam war mit diesen,

01:06:31.717 --> 01:06:35.097
äh, mit diesen neueren Array-Methoden.

01:06:35.557 --> 01:06:42.337
Und, äh, genau, dann hab ich das eben refactored auf eine Vorschleife und dann lief's schneller.

01:06:42.477 --> 01:06:45.357
Aber ich glaube, das ist jetzt bei aktuellen Engines nicht mehr der Fall.

01:06:45.577 --> 01:06:47.657
Ja, ich glaub, vor allen Dingen bei aktuellen Engines ist es auch so,

01:06:47.697 --> 01:06:52.257
dass das sozusagen nicht unbedingt mehr vorhersehbar ist aus der Sicht von Entwicklerinnen

01:06:52.257 --> 01:06:55.537
und Entwicklern, was aus dem JavaScript-Code am Ende wirklich wird,

01:06:55.657 --> 01:06:59.557
also zu was der das runterkompiliert, sobald der halt mal bei seinem Optimizer

01:06:59.557 --> 01:07:00.657
wirklich den dritten Gang einlegt.

01:07:02.957 --> 01:07:05.937
Genau, und das wollte ich auch gerade noch hinweisen. Ich sage,

01:07:06.057 --> 01:07:10.437
ich stelle die Frage manchmal ganz gern so aus Spaß, aber was im Browser dann

01:07:10.437 --> 01:07:13.377
tatsächlich ausgeführt wird, ist, glaube ich, echt noch eine andere Frage.

01:07:13.577 --> 01:07:16.237
Also ob das vielleicht sogar zu einer For-Loop umgewechselt wird,

01:07:16.357 --> 01:07:20.037
oder gegebenenfalls mit einer For-Loop langsamer werden könnte,

01:07:20.157 --> 01:07:23.277
unter Umständen. Ja, früher haben die Engines ja auch, glaube ich,

01:07:23.277 --> 01:07:27.157
diese For-Loops dann unrolled, wie sich das nennt.

01:07:27.377 --> 01:07:29.757
Also zumindest, wenn sie endlich waren.

01:07:30.557 --> 01:07:34.557
Und dann hast du quasi einfach die gleiche Anweisung bei einer For-Loop,

01:07:34.557 --> 01:07:38.337
die eigentlich 100 Mal laufen sollte, haben die die intern umgewandelt,

01:07:38.897 --> 01:07:42.537
dass halt 100 Mal hintereinander der gleiche Code dasteht.

01:07:42.557 --> 01:07:44.857
Also dass die For-Loop gar nicht mehr existierte.

01:07:46.177 --> 01:07:50.337
Und das war dann schneller. Ja, ich meine, beziehungsweise das können die ja

01:07:50.337 --> 01:07:54.517
heutzutage selbst dann machen, wenn sozusagen der Code nicht jetzt irgendwie

01:07:54.517 --> 01:07:57.797
hart gelimitet ist auf irgendwie zehn Schleifendurchläufe, sondern einfach nur,

01:07:57.817 --> 01:08:00.117
wenn die durch Beobachtung der Ausführung wissen,

01:08:00.317 --> 01:08:03.777
das Ding wird nie mit was anderem gefüttert als mit zehn Werten,

01:08:03.797 --> 01:08:06.417
dann unrollen die das ja auch schon spekulativ.

01:08:06.417 --> 01:08:10.337
Also deswegen denke ich halt immer so, diese Mikro-Performance-Optimierung ist

01:08:10.337 --> 01:08:12.077
spätestens, ist wirklich dieser Tage,

01:08:12.197 --> 01:08:16.197
also wenn man sich nicht wirklich den Maschinencode anguckt oder zumindest halt

01:08:16.197 --> 01:08:19.537
wirklich wie Shep dahin geht und das wirklich profilt, ist glaube ich nicht

01:08:19.537 --> 01:08:23.397
wirklich für normale Menschen vorhersehbar, was daraus wirklich wird und wenn

01:08:23.397 --> 01:08:24.597
es irgendwo hakt in der Performance,

01:08:24.697 --> 01:08:26.577
ist man wahrscheinlich besser damit beraten, irgendwie zu gucken,

01:08:26.657 --> 01:08:30.957
kann ich mir hier irgendwie ein Reflow oder sowas ähnliches einsparen oder tatsächlich

01:08:30.957 --> 01:08:35.697
einfach irgendwie das Programm strukturell vereinfachen, weil ich meine,

01:08:36.717 --> 01:08:40.897
Und so Sachen, so Überlegungen wie diese halt, versuchen irgendwie so clever

01:08:40.897 --> 01:08:43.977
zu sein und eigentlich ist ja das schnellstmögliche Programm einfach nur eins,

01:08:44.117 --> 01:08:47.117
das genau das macht, was es soll und nicht mehr.

01:08:49.280 --> 01:08:51.780
Also weil weniger kannst du ja nicht machen, dann ist ja nicht mehr das Programm

01:08:51.780 --> 01:08:53.200
und wenn es mehr macht, ist es unnötig langsam.

01:08:53.580 --> 01:08:57.660
Und einfach diesen Mehr-Aspekt zu identifizieren und zu eliminieren,

01:08:57.680 --> 01:09:01.680
ist glaube ich der einzig sinnvolle Weg für Performance-Optimierung und irgendwie clever sein.

01:09:01.960 --> 01:09:04.640
Also ich bin nicht cleverer als die Entwickler von irgendwie V8 oder so,

01:09:04.700 --> 01:09:05.960
deswegen warum sollte ich das probieren?

01:09:07.460 --> 01:09:12.340
Was ja manchmal auch ein Performance-Problem ist, ist, wenn sich die sogenannte

01:09:12.340 --> 01:09:17.580
Shape von Einträgen in einem Array ändern.

01:09:18.620 --> 01:09:25.680
Das heißt also, manchmal ist es vielleicht sogar besser, wenn man eben Filter bzw.

01:09:25.880 --> 01:09:32.500
Wenn man Map oder sowas benutzt, weil man dann ja quasi komplett neue Items

01:09:32.500 --> 01:09:38.780
erzeugt und nicht bestehende Items nachträglich eben ummodelt,

01:09:39.440 --> 01:09:42.920
was man ja bei einer For-Loop tun könnte, gegebenenfalls.

01:09:42.920 --> 01:09:45.020
Das deckt sich halt überhaupt nicht mit meiner eigenen Erfahrung.

01:09:46.040 --> 01:09:48.820
Also mein sämtlicher Code ist so viel schneller geworden, als ich irgendwann

01:09:48.820 --> 01:09:52.620
gesagt habe, dieses ganze Immutability-Zeug, das einem die React-Prediger da

01:09:52.620 --> 01:09:57.400
verkaufen, das hält nicht, was es verspricht.

01:09:57.980 --> 01:10:01.700
Also jedenfalls nicht, wenn du den naiven Ansatz fährst und wirklich sowas wie

01:10:01.700 --> 01:10:06.400
Objekt-Destructuring und Array-Destructuring machst, um die Arrays ineinander zu klonen.

01:10:06.940 --> 01:10:10.220
Und speziell nicht dann, wenn du irgendwie mit großen Datenmengen arbeitest

01:10:10.220 --> 01:10:12.340
und du das spekulativ machen musst, weil du gar nicht weißt,

01:10:12.360 --> 01:10:13.260
welche Änderungen es gab.

01:10:13.840 --> 01:10:16.960
Also speziell bei so einem Map, oder bei so einem, sagen wir mal,

01:10:17.020 --> 01:10:18.480
so ein Fake-Flat-Map, kennst du ja vielleicht.

01:10:18.680 --> 01:10:20.780
Du machst ein Flat-Map, aber eigentlich nur mit der Intention,

01:10:21.640 --> 01:10:23.880
im Prinzip ein Map und ein Filter in einem Schritt zu machen.

01:10:26.340 --> 01:10:30.060
Und bei den meisten Dingern hast du halt irgendwie, hat der Filter-Aspekt keine

01:10:30.060 --> 01:10:32.840
Wirkung und der Map- Aspekt hat tatsächlich auch keine Wirkung.

01:10:33.160 --> 01:10:36.260
Also du machst einen Loop über alles mit einer relativ komplizierten Konstruktion

01:10:36.260 --> 01:10:40.200
und du erzeugst die Arrays alle einmal nochmal neu, aber rein spekulativ und

01:10:40.200 --> 01:10:41.520
dann hat sich am Ende wirklich gar nicht was getan.

01:10:42.080 --> 01:10:44.600
Also das hatte ich früher halt eben wirklich oft gemacht, weil das einfach so

01:10:44.600 --> 01:10:47.420
von meiner React-Erfahrung in mir drin kleben geblieben ist.

01:10:47.640 --> 01:10:51.180
Und als ich wirklich gesagt habe, ne, imperativer Goblin-Mode,

01:10:51.240 --> 01:10:54.580
du hämmerst so lange auf dem globalen State herum, bis der in dem Zustand ist,

01:10:54.620 --> 01:10:56.640
den du haben willst, und wenn er nicht in dem Zustand ist, den du haben willst,

01:10:56.780 --> 01:11:00.080
dann debugst du halt und schreibst Tests, bis er in dem Zustand ist, den du haben willst.

01:11:01.340 --> 01:11:04.460
So, das hat meinen sämtlichen Code so viel schneller gemacht.

01:11:06.000 --> 01:11:09.340
Also, weniger ist mehr, kann man dazu sagen. Ja.

01:11:09.780 --> 01:11:14.660
Und das mit den Shapes halt eben auch, also, das habe ich mal eine Zeit lang

01:11:14.660 --> 01:11:17.080
wirklich sehr intensiv erforscht, weil ich halt das irgendwie wissen wollte

01:11:17.080 --> 01:11:19.820
und ich habe halt wirklich versucht, Test Cases zu konstruieren,

01:11:19.940 --> 01:11:23.460
wo ich wirklich mal den Case dafür machen konnte, wo ich wirklich sagen konnte,

01:11:23.660 --> 01:11:27.680
indem ich die Shapes bewahre und die reuse, indem ich diese Objekte,

01:11:28.240 --> 01:11:32.320
halt eben im Sinne von Immutable Programming reproduziere, will ich jetzt mal

01:11:32.320 --> 01:11:35.560
die statische Shape-Variante gewinnen lassen und die hat immer verloren,

01:11:35.720 --> 01:11:39.220
weil die Kosten für Objekt neu anlegen und nochmal neu anlegen und nochmal neu

01:11:39.220 --> 01:11:41.880
anlegen, bei allem, was halt nicht triviale Workloads waren,

01:11:43.480 --> 01:11:44.540
meistens so hoch waren,

01:11:46.471 --> 01:11:47.971
Dass sich das einfach echt nicht gerechnet hat.

01:11:50.391 --> 01:11:54.891
Okay. Ja, auch gut zu wissen. Unbenommen natürlich, wenn man jetzt irgendwie

01:11:54.891 --> 01:11:59.351
hingeht und man nimmt sowas wie die modernen Immutability-Libraries,

01:11:59.471 --> 01:12:02.791
die machen ja mithilfe von Proxys Persistent Data Structures,

01:12:02.931 --> 01:12:06.351
also wenn du dann sagst, klon mir das mit einer Änderung, dann klonen die ja

01:12:06.351 --> 01:12:08.631
nicht das komplette Objekt, sondern nur so Aspekte davon.

01:12:09.931 --> 01:12:14.351
Die mögen dann eventuell performanter sein, aber dann ist es halt wieder so,

01:12:14.351 --> 01:12:16.971
nicht die Performance-Optimierung, die ich eigentlich haben möchte,

01:12:17.051 --> 01:12:20.931
das Programm reduzieren auf das Nötigste, sondern noch mehr Programm draufwerfen,

01:12:20.951 --> 01:12:22.811
damit es schneller ist. Vor allem Komplexität auch.

01:12:23.991 --> 01:12:26.791
Dependencies, die ich updaten muss. Ja.

01:12:29.111 --> 01:12:34.271
Das ist das Ding. Nur der Vollständigkeit halber, Object Group By macht einem

01:12:34.271 --> 01:12:38.091
ein Object und Map Group By macht einem eine Map, damit man auch Keys haben

01:12:38.091 --> 01:12:42.251
kann, die keine Strings sind, sondern Objekte, Symbols, hast du nicht gesehen. Mhm.

01:12:43.071 --> 01:12:50.291
Und warum ist das nicht auf dem Array-Prototypen drauf? Äh, da gab's eine Web-Compatibility-Issue.

01:12:50.651 --> 01:12:53.771
Äh, warte mal. Äh, das hab ich auch irgendwo hier. Ah, okay.

01:12:53.871 --> 01:12:56.891
Wahrscheinlich wieder Mootools oder so, ne? Nicht Mootools, ähm,

01:12:56.931 --> 01:13:00.711
irgendein Security-Package. Ich erinnere mich jetzt gerade nicht genau, aber es war so.

01:13:00.971 --> 01:13:04.551
Also du hast ja manchmal so harten JavaScript-Libraries, die irgendwie aller

01:13:04.551 --> 01:13:08.371
möglichen Lockdown-Sachen machen, damit der globale Scope nicht von irgendwelchen

01:13:08.371 --> 01:13:11.131
injected Sachen in irgendwelche Zustände überführt werden kann.

01:13:11.571 --> 01:13:15.111
Und wenn ich mich richtig erinnere, war das bei diesem Group by der Gestalt,

01:13:15.131 --> 01:13:17.531
dass halt irgendein solches Produkt,

01:13:17.751 --> 01:13:20.611
das jetzt auch nicht von irgendwelchen Honks entwickelt wurde,

01:13:20.691 --> 01:13:22.951
sondern halt schon wirklich ein ernsthaftes Produkt ist, wo schlaue Leute dran

01:13:22.951 --> 01:13:28.131
arbeiten, von irgendeiner relativ großen Webseite eingesetzt wurde in einer veralteten Version.

01:13:28.691 --> 01:13:33.031
Version. Und diese faltete Version hatte halt irgendwie dann eine Compatibility-Issue

01:13:33.031 --> 01:13:36.231
mit dem kommenden Ding auf dem Array-Prototypen.

01:13:36.511 --> 01:13:40.191
Und dann hat man halt irgendwie, also dann, ich versuch das noch mal raus,

01:13:40.291 --> 01:13:42.931
da gibt's auf GitHub wirklich sehr schön diesen Issue, wo irgendwie so,

01:13:43.071 --> 01:13:46.371
ja hier ist das ECMAScript-Komitee, hier, ihr habt dieses Ding produziert,

01:13:46.451 --> 01:13:50.351
kennt ihr noch jemanden, der da arbeitet, der jemanden kennt, der das updaten kann?

01:13:50.551 --> 01:13:53.391
Die haben versucht, da anzurufen und wen zu erreichen, ja.

01:13:53.571 --> 01:13:55.611
Ja genau, das ist halt das eine. Und das andere ist natürlich,

01:13:55.771 --> 01:13:59.711
du willst eventuell Dinge Gruppieren anhand von irgendwelchen Aspekten, die keine Arrays sind.

01:14:00.951 --> 01:14:06.671
Genau, aber mal zum Beispiel Reduce erlaubt es dir auch beliebige Arten von

01:14:06.671 --> 01:14:13.671
Outputs am Ende zu haben und dennoch liegt es ja dann auf dem Array Prototypen.

01:14:14.291 --> 01:14:18.391
Ja, Outputs, aber es geht ja um die Inputs. Der Input von Reduce ist immer ein Array.

01:14:20.302 --> 01:14:23.462
Genau, und der Input von GroupBy ist nicht immer ein Array? Nee.

01:14:23.662 --> 01:14:27.502
Ah ja, okay, du hast ja gesagt, das sind Iterables. Okay, ja, klar.

01:14:27.822 --> 01:14:31.222
Genau, also du könntest theoretisch irgendwie eine, keine Ahnung,

01:14:31.302 --> 01:14:34.282
Maps nach Größe gruppieren, wenn du wolltest. Dann kannst du halt,

01:14:34.382 --> 01:14:35.622
nee, das ist ein schlechtes Beispiel.

01:14:35.922 --> 01:14:38.222
Und warum haben wir keinen Iterable-Prototypen dann?

01:14:39.482 --> 01:14:43.462
Naja, ne Moment, warte mal. Wir haben keinen Iterable-Prototypen.

01:14:43.522 --> 01:14:46.242
Also wir haben schon einen, also jetzt müssen wir unterscheiden zwischen einem

01:14:46.242 --> 01:14:48.242
Iterator und einem Iterable. Das ist ja nicht das Gleiche.

01:14:49.302 --> 01:14:53.582
Ein Iterable ist, lass mich überlegen genau, ein Iterable ist das Ding,

01:14:53.622 --> 01:14:56.922
auf dem Symbol.Iterator drauf ist, was eine Function ist, die du aufrufen kannst

01:14:56.922 --> 01:15:00.482
und dann bekommst du einen Iterator über die Dinger, die dieses Ding,

01:15:01.182 --> 01:15:04.982
repräsentiert und diese Iterables sind halt dann so Sachen wie deine Arrays deine Maps,

01:15:05.122 --> 01:15:09.162
deine Sets, deine Top-Level-Datenstrukturen, aus denen kannst du Iteratoren

01:15:09.162 --> 01:15:11.762
über einige ihrer Aspekte rausholen, über die Maps,

01:15:11.862 --> 01:15:16.042
über die Keys und so ähnliches und die haben einen gemeinsamen Prototypen und

01:15:16.042 --> 01:15:21.402
die die kriegen tatsächlich jetzt auch in ECMAScript neu so Funktionen wie Map und Filter und Reduce.

01:15:22.262 --> 01:15:24.922
Genau wie auf dem Array, mit dem Unterschied, dass, weil das halt Iteratoren

01:15:24.922 --> 01:15:28.582
sind, die potenziell ja Generators sein können, die also möglicherweise lazy

01:15:28.582 --> 01:15:30.642
sind. Die sind also ihrerseits dann lazy.

01:15:31.362 --> 01:15:34.362
Aber das Problem ist halt eben, das sind halt nicht die Top-Level-Datenstrukturen,

01:15:34.382 --> 01:15:38.002
sondern halt eben diese Iteratoren über die Daten eines anderen Objekts.

01:15:38.022 --> 01:15:41.742
Und du willst einfach nur sagen können, ich nehme meine DOM-String-List und

01:15:41.742 --> 01:15:44.662
schmeiße die in Object-Group-By rein und ich will als normaler Feld-,

01:15:44.662 --> 01:15:47.282
Wald- und Wiesen-JavaScript-Entwickler einfach nicht wissen,

01:15:47.362 --> 01:15:48.542
dass das da überhaupt Unterschiede sind.

01:15:48.582 --> 01:15:51.342
Ich will sagen, ich habe Liste von Zeug, gruppiere mir das, Ende aus,

01:15:51.402 --> 01:15:52.742
Mickey Maus, ich habe hier Arbeit zu verrichten.

01:15:53.302 --> 01:15:55.842
Und das leisten diese statischen Methoden dann halt noch am ehesten.

01:15:58.962 --> 01:15:59.762
Alles klar.

01:16:01.882 --> 01:16:07.562
Und dann haben wir abschließend haben wir noch so ein bisschen was über das,

01:16:08.442 --> 01:16:11.282
Video-Element und Video Sources.

01:16:11.502 --> 01:16:20.282
Und zwar ist es so, dass dass der Safari, ich weiß nicht, ob es jetzt die 17.4er-Version

01:16:20.282 --> 01:16:22.162
war oder ob das noch Technology Preview war,

01:16:23.442 --> 01:16:28.442
aber jetzt auch WebM als Videocontainer unterstützt.

01:16:30.022 --> 01:16:36.422
Was bisher nur für WebRTC der Fall war, aber jetzt eben auch in Video-Elementen,

01:16:36.422 --> 01:16:39.722
also VP8-Codec und VP9-Codec.

01:16:41.151 --> 01:16:49.231
Genau, und dann wurde auch geändert die Art und Weise, wie Safari sich die passende

01:16:49.231 --> 01:16:51.371
Source für ein Video-Element holt.

01:16:52.211 --> 01:17:00.131
Also laut Spec ist es ja eigentlich so gedacht, dass du hast eben dein Video-Element

01:17:00.131 --> 01:17:06.631
und darin hast du Sources aufgelistet, die wiederum auf bestimmte Dateien und Dateitypen zeigen.

01:17:06.631 --> 01:17:12.351
Und der Browser soll laut Spec von oben nach unten diese Sources durchgehen

01:17:12.351 --> 01:17:18.951
und die erste, die er eben abspielen kann, nehmen und alle anderen dann ignorieren.

01:17:18.951 --> 01:17:25.891
Und die Safari-Leute haben für sich entschieden, dass das vielleicht nicht immer

01:17:25.891 --> 01:17:32.371
das Optimum ist, also dass der Browser eben am besten weiß,

01:17:32.731 --> 01:17:35.651
wann welches Format zu nutzen ist.

01:17:35.651 --> 01:17:39.791
Vielleicht, wenn man eine schlechte Datenverbindung hat, dann lieber ein höher

01:17:39.791 --> 01:17:45.091
komprimiertes Videoformat, aber wenn der Akku leer ist, ein weniger hoch komprimiertes,

01:17:45.091 --> 01:17:47.311
aber eben eins, das weniger Akku frisst.

01:17:48.451 --> 01:17:53.191
Und genau deswegen haben die das eben geändert und weichen von der Spec ab.

01:17:53.631 --> 01:17:58.731
Der Safari-Browser guckt sich eben alle Sourcen erstmal an und sucht sich dann

01:17:58.731 --> 01:18:05.211
passend zur aktuellen Browsing-Situation die richtige Datei raus,

01:18:05.371 --> 01:18:07.071
die aus seiner Sicht richtige Datei.

01:18:07.671 --> 01:18:10.811
Aber wie finden wir denn jetzt als Entwicklerinnen und Entwickler das,

01:18:10.951 --> 01:18:15.091
dass wir da irgendwelchen Code schreiben und der Browser denkt sich, heute mach ich's mal so.

01:18:21.031 --> 01:18:25.951
Naja, keine Ahnung. Also ich glaube, ich finde es meistens besser,

01:18:27.031 --> 01:18:31.251
weil ich finde dieses Mikro-Managen des Browsers, das skaliert einfach nicht.

01:18:31.831 --> 01:18:36.391
Das heißt also, je mehr die Browser selber irgendwie für sich entscheiden,

01:18:36.651 --> 01:18:40.491
also im Prinzip so ein bisschen wie das ja auch bei dem Source-Set der Fall ist.

01:18:40.611 --> 01:18:45.191
Also du sagst dem Browser, guck mal hier, hier sind sechs verschiedene Auflösungen

01:18:45.191 --> 01:18:50.291
des Bildes. im Falle von Lazy-Bildern muss man ja bei dem Sizes-Attribut nur

01:18:50.291 --> 01:18:51.331
noch Auto reinschreiben.

01:18:52.551 --> 01:18:56.031
Und der Browser regelt alles von alleine. Der weiß dann, aha,

01:18:56.111 --> 01:18:59.511
das Bild rendere ich jetzt in dem Kontext in der Größe.

01:18:59.911 --> 01:19:04.871
Ich habe diese sechs Sourcen. Ich habe vielleicht ein dreifach Retina-Display.

01:19:05.591 --> 01:19:12.411
Dann nehme ich dieses Bild. Oder ich bin gerade aber auf Datenspar-Modus.

01:19:12.471 --> 01:19:16.311
Dann nehme ich das andere Bild. Passiert das eigentlich überhaupt?

01:19:17.591 --> 01:19:21.171
Also berücksichtigen die Browser sowas wie, meine Batterie ist so voll oder erzählen die das nur?

01:19:22.589 --> 01:19:29.269
Hm, ich glaube, das berücksichtigen die Browser größtenteils nicht.

01:19:29.389 --> 01:19:32.809
Ich weiß nicht, wie es jetzt mit dem Safari ausschaut, ob er das berücksichtigt.

01:19:34.389 --> 01:19:39.329
Aber die Möglichkeit hast du dann einfach. Also das muss ja nicht alles genutzt

01:19:39.329 --> 01:19:43.609
werden, aber so dieses Mikro-Managen, finde ich, ist einfach ...

01:19:45.249 --> 01:19:50.529
Also es ist zwar einerseits irgendwie cool, andererseits trifft man irgendwelche

01:19:50.529 --> 01:19:54.369
Annahmen, die vielleicht irgendwann nicht mehr zutreffend sind und man kann auch Fehler machen.

01:19:54.929 --> 01:19:58.409
Ja, das Ding ist halt, ich will ja gar nicht sagen, dass man das jetzt micromanagen

01:19:58.409 --> 01:20:04.129
müssen soll, sondern ich fände es halt gut, wenn ich das micromanagen könnte,

01:20:04.709 --> 01:20:06.229
wenn ich mich dazu entscheide.

01:20:07.329 --> 01:20:10.129
Das ist halt so das Ding. Also ich kann mir halt eben kein nicht wirkliches

01:20:10.129 --> 01:20:14.849
Szenario ausmalen, wo zum Beispiel jetzt bei deinem Bildbeispiel mit dem Source-Set.

01:20:15.449 --> 01:20:18.909
Da gibt es halt eben auf dem Device irgendwelche Hardware-Constraints und die

01:20:18.909 --> 01:20:21.729
alle tatsächlich durchzuiterieren zu iterieren und das Gerät zu fragen,

01:20:21.869 --> 01:20:24.969
hey, was hast du für eine Auflösung? Mal Pixeldichte hast du nicht gesehen.

01:20:25.469 --> 01:20:28.029
Ist wirklich relativ schwierig und ich glaube, bei Bildern ist es halt irgendwie

01:20:28.029 --> 01:20:31.849
auch so relativ, sagen wir mal, alles in allem, was so den Gesamtdaten-Payload

01:20:31.849 --> 01:20:32.909
angeht, sind die eher so klein.

01:20:34.449 --> 01:20:37.849
Aber zum Beispiel, vielleicht habe ich ja als diejenige Person,

01:20:37.969 --> 01:20:41.509
die einen Videoplayer einbettet, ja auch irgendwelche Wünsche darüber,

01:20:41.649 --> 01:20:43.969
was da jetzt bevorzugt abgefragt wird. Keine Ahnung.

01:20:44.189 --> 01:20:47.389
Ich will Daten bitteschön auf meinem Server sparen. Oder ich bin irgendwie wie

01:20:47.389 --> 01:20:50.969
der Open-Source-Cock-Sandalenträger und ich hab voll was gegen diese Codecs

01:20:50.969 --> 01:20:54.089
und ich biete das nur der Vollständigkeit halber an, aber aus ideologischen

01:20:54.089 --> 01:20:56.669
Gründen hätte ich gern irgendwie meine Open-Source-Codecs bevorzugt.

01:20:58.469 --> 01:21:00.969
Will sagen, hab ich denn als Autor gar nichts zu melden?

01:21:03.089 --> 01:21:08.109
Hm. Dann würde ich sagen, dann biete halt einfach das Format nicht an,

01:21:08.149 --> 01:21:10.849
dass du nicht irgendwie deliveren möchtest.

01:21:11.129 --> 01:21:14.389
Ja, das ist ja nicht realistisch. Hör mal, müssen doch die Leute schon irgendwie

01:21:14.389 --> 01:21:18.189
erreichen, aber man kann ihnen ja den den rechten Weg so schwer wie möglich

01:21:18.189 --> 01:21:20.569
machen. Denke wie ein Cookie-Banner-Autor. Weißt du?

01:21:23.549 --> 01:21:26.309
Ja. Also, keine Ahnung. Ich bin da jetzt auch nicht wirklich irgendwie so groß dagegen.

01:21:26.449 --> 01:21:29.509
Ich denke halt nur so, hm, also vorher konnte ich das so sortieren und ich konnte

01:21:29.509 --> 01:21:33.669
halt zumindest theoretisch mir einreden, dass ein Gedenk dessen,

01:21:33.669 --> 01:21:36.749
dass ich halt weiß, welche Browser welche Codecs können, ich durch die Reihenfolge

01:21:36.749 --> 01:21:39.509
meiner Sources schon irgendwie beeinflussen kann, dass die Wahrscheinlichkeit,

01:21:39.529 --> 01:21:40.849
dass er diesen nimmt, relativ hoch ist.

01:21:41.009 --> 01:21:44.029
Und jetzt sagt der Browser halt eben, nö, ich nehme halt den, der mir am besten passt.

01:21:44.309 --> 01:21:47.949
Und diese Kriterien, die ich dafür anlege, sind auch nicht irgendwie eindeutig

01:21:47.949 --> 01:21:50.469
und spezifiziert, sondern sind halt eben YOLO.

01:21:53.179 --> 01:21:56.179
Ja, ich weiß nicht.

01:21:56.299 --> 01:22:00.819
Also es ist ja natürlich nie so, dass irgendwelche Dinge nicht auch ohne quasi

01:22:00.819 --> 01:22:07.459
negative, also es gibt immer irgendwas, was halt dann einem auf die Füße fällt.

01:22:07.459 --> 01:22:12.739
Aber grundsätzlich, glaube ich, ist dieser Weg, den Browser das selber entscheiden zu lassen,

01:22:12.939 --> 01:22:16.079
am Ende wahrscheinlich immer der bessere,

01:22:16.159 --> 01:22:23.799
weil weniger Arbeit für dich als AutorIn und auch zukunftssicherer,

01:22:23.819 --> 01:22:30.559
weil du nicht irgendwelche Definitionen da reinpackst, die vielleicht irgendwann obsolet sind.

01:22:33.179 --> 01:22:35.379
Ja, und das ist auch irgendwann nicht mehr zu handeln. Ich glaube tatsächlich

01:22:35.379 --> 01:22:38.119
an sinnvolle Defaults. Ich glaube, man kann APIs definieren,

01:22:38.139 --> 01:22:40.399
die sinnvolle Defaults haben, aber wo man dann halt irgendwie sagen kann,

01:22:40.699 --> 01:22:43.299
ich will mir die Finger dreckig machen. Ich glaube, das geht.

01:22:47.299 --> 01:22:52.799
Ja, I don't know. Genau, also ich finde es auf jeden Fall grundsätzlich nicht schlecht.

01:22:56.279 --> 01:23:00.159
Und sieht man ja auch in dem Performance-Bereich, Und da machen die Browser

01:23:00.159 --> 01:23:04.179
das ja im Grunde auch out of the box größtenteils sehr vernünftig.

01:23:04.319 --> 01:23:09.019
Und man hat aber dann eben diese Möglichkeiten, darauf nochmal dediziert einzuwirken.

01:23:09.119 --> 01:23:15.519
Aber es gibt auch genug Leute, die mit diesen Tools in der Hand eben alles eher

01:23:15.519 --> 01:23:16.819
schlimmer machen als besser.

01:23:17.499 --> 01:23:19.959
Ja, ich bin doch auch schon groß. Ich darf das schlimmer machen,

01:23:20.019 --> 01:23:22.319
wenn ich möchte. Du darfst alles, ja.

01:23:23.239 --> 01:23:26.699
Ich schlage vor, dass du einfach irgendwie so einen Banner einbaust,

01:23:27.459 --> 01:23:30.339
dass, wenn jemand vom Safari auf die Seite kommt, dass du dann sagst,

01:23:30.339 --> 01:23:33.139
best viewed with, und dann einen der anderen Browser.

01:23:34.869 --> 01:23:39.329
Und die zwingst dann zu wechseln. Und dann dein Format durchdrückst.

01:23:39.429 --> 01:23:43.129
Aber nur, wenn entweder in der EU oder außerhalb oder auf dem Weg dorthin.

01:23:43.989 --> 01:23:45.329
Ja. Ganz wichtig.

01:23:47.129 --> 01:23:50.049
Auf internationalen Gewässern natürlich dann wieder nicht. Genau.

01:23:50.129 --> 01:23:53.029
Auf freier See kann man runterladen, was man möchte.

01:23:54.669 --> 01:23:58.209
Genau. Da kosten Daten auch nichts. An wen soll man dann das Geld bezahlen?

01:23:59.229 --> 01:24:04.349
Naja, an den Pirat, der da gerade am Horizont auftaucht und dich gerne entführen

01:24:04.349 --> 01:24:07.929
möchte. Ob der so eine Wechselfestplatte in der Hand hat mit den Daten? Ja, genau.

01:24:11.449 --> 01:24:12.869
Wechselfestplatte. Meine Güte.

01:24:16.949 --> 01:24:21.189
Das Einzige, wovon ich kein Fan bin, ist, wenn jetzt auch irgendwelche Video-Plattformen.

01:24:22.929 --> 01:24:27.289
Mir vorberechnen, welche Auflösung ich geschickt bekomme.

01:24:27.789 --> 01:24:31.389
Und teilweise habe ich manchmal eine relativ harte Zeit, das umzustellen,

01:24:31.429 --> 01:24:36.269
weil ich dann sagen will, ich will jetzt 4K und wenn ich zwei Minuten warte, ist vollkommen okay.

01:24:36.689 --> 01:24:40.949
Weil dieses Gekrissel will ich halt nicht anschauen. Das ist jetzt nicht vom

01:24:40.949 --> 01:24:44.309
Browser abhängig. Das ist wahrscheinlich auch einfach eine UX-Umsetzung oder sowas.

01:24:45.389 --> 01:24:48.569
Und ich kann ja gar nichts dagegen tun, dass das schon in der schlechteren Auflösung

01:24:48.569 --> 01:24:50.689
geladen wird, was ja dann erst recht wieder Zeit kostet.

01:24:51.089 --> 01:24:56.429
Aber ich bin da gar nicht so immer der große Fan von, ja, aber dann hast du

01:24:56.429 --> 01:24:57.329
jetzt schon was zu sehen.

01:24:57.449 --> 01:25:00.569
Ja, ich würde aber lieber gern warten und dafür ist dann gut.

01:25:00.569 --> 01:25:03.049
Und dafür schmerzt die Augen nicht.

01:25:03.109 --> 01:25:06.649
Oder nicht alle drei Sekunden anbuffern, anbuffern, anbuffern.

01:25:06.729 --> 01:25:08.509
Lass halt 20 Sekunden buffern.

01:25:09.149 --> 01:25:12.789
Und da fehlen mir dann auch einfach die Möglichkeiten, auf das selber einzustehen.

01:25:13.009 --> 01:25:17.369
Ja, das ist wirklich ein UX-Problem. Also da hätte ich auch einfach gern mehr Möglichkeiten.

01:25:18.829 --> 01:25:22.429
Also ich benutze halt relativ viel YouTube auf dem Telefon.

01:25:22.469 --> 01:25:25.809
Ich habe echt einfach den Eindruck, dass die Auflösung, mit der was abgespielt

01:25:25.809 --> 01:25:27.829
wird, komplett ausgewürfelt wird.

01:25:29.289 --> 01:25:32.089
Das macht keinen Sinn, oder? Also es ist,

01:25:32.689 --> 01:25:36.209
vor allem nicht von meinem Internet abhängig, ich habe eher das Gefühl von YouTubes

01:25:36.209 --> 01:25:38.689
Internet abhängig Genau mein Eindruck, also ob ich jetzt hier zu Hause im Highspeed

01:25:38.689 --> 01:25:43.969
WLAN bin, irgendwie in der 2G-Wüste oder irgendwie, weiß ich nicht LTE auf dem

01:25:43.969 --> 01:25:46.169
Land das ist komplett random, ob das jetzt.

01:25:48.289 --> 01:25:53.029
144p als wären wir irgendwie im ersten Weltkrieg, ich glaube es sagt Das ist

01:25:53.029 --> 01:25:56.989
aber echt hart Ist es aber, das spuckt dieses Ding aus Wahnsinn,

01:25:57.769 --> 01:26:02.229
Die Werbung kann übrigens immer in beste Auflösung abgespielt werden Ich ertrage

01:26:02.229 --> 01:26:06.409
das so wenig, dass ich dem Geld gebe damit ich keine Werbung habe Echt?

01:26:06.409 --> 01:26:10.369
Also mir ist das echt zu teuer Ich find das schon ein bisschen frech Es ist

01:26:10.369 --> 01:26:13.309
zu teuer und frech und gänzlich unerträglich, aber Werbung ist schlimmer.

01:26:14.956 --> 01:26:18.196
Ich muss auch sagen, dass bei YouTube die Werbung ist unerträglich.

01:26:18.416 --> 01:26:22.896
Es gibt andere, ich habe zum Beispiel eine Zeit lang für Join gezahlt,

01:26:22.936 --> 01:26:24.196
weil wir ja kein Fernsehen mehr haben.

01:26:25.156 --> 01:26:28.216
Da gab es eine Show, die habe ich da so durchgeguckt. Also habe ich dafür gezahlt

01:26:28.216 --> 01:26:30.356
und irgendwann hatte ich es dann nicht mehr und wollte aber gerade auch nur

01:26:30.356 --> 01:26:31.856
eine Folge von irgendwas anschauen.

01:26:31.936 --> 01:26:35.076
Und bei Join finde ich das, also ich will jetzt keine Anti-Werbung machen,

01:26:35.176 --> 01:26:38.276
dass man bei Join jetzt hier nicht nur den Free-Account nutzen soll,

01:26:38.276 --> 01:26:40.236
aber das ist wirklich wirklich okay.

01:26:40.496 --> 01:26:43.516
Die Qualität ist in Ordnung, die Anzahl der Werbung ist in Ordnung,

01:26:43.516 --> 01:26:44.776
sie machen nur diesen witzigen Trick.

01:26:44.956 --> 01:26:48.456
Dass sie immer hinschreiben, diese Werbung dauert noch acht Sekunden,

01:26:48.476 --> 01:26:50.516
danach kommen halt aber noch sechs andere Werbungen.

01:26:50.796 --> 01:26:53.616
Ah ja, schon gecheckt. Ist aber ganz süß.

01:26:54.636 --> 01:27:00.836
Aber das ist in Ordnung. Die Werbung auf YouTube ist, ey, das ist eine Lechheit.

01:27:01.276 --> 01:27:05.416
Ja, und vor allen Dingen erst, die Anzahl an Werbung, und vor allem,

01:27:05.416 --> 01:27:08.776
wenn du weißt, du machst jetzt dieses Video auf, und du willst schon zu Minute

01:27:08.776 --> 01:27:11.456
sieben vorspulen, du weißt vorher schon, dass du es machen willst.

01:27:11.636 --> 01:27:13.136
Aber nein, schlimmer, Also das

01:27:13.136 --> 01:27:17.536
kommt erst mal diese 800.000 Sekunden lang Werbung, dann spulst du vor.

01:27:17.636 --> 01:27:20.796
Und wenn du es falsch machst, bekommst du noch mal 8.000 Sekunden Werbung.

01:27:21.476 --> 01:27:25.796
Und dann gehe ich. Und natürlich auch die redaktionelle Qualität ist halt auch sehr lustig.

01:27:25.816 --> 01:27:30.116
Also das, was halt eben da die KI so auswürfelt, so, keine Ahnung,

01:27:30.196 --> 01:27:35.436
recherchierst halt mal irgendwas, dann guckst du halt mal irgendwie mal so in

01:27:35.436 --> 01:27:38.156
einem anonymen Tab, wo der Adblocker aus ist, irgendwie so zwei Videos.

01:27:38.376 --> 01:27:40.636
Und dann machst du irgendwie so einen Deep Dive irgendwie in so,

01:27:40.656 --> 01:27:44.796
keine Ahnung, Was treiben denn die verrückten Kryptoleute? Und was kriegst du dann für Werbung?

01:27:45.396 --> 01:27:49.836
Hier, kauf diese Coin, mach hier NFT, hast du nicht gesehen?

01:27:50.636 --> 01:27:53.396
Einfach nur weil, natürlich, ich gucke mir halt irgendwie so einen Rant an,

01:27:53.456 --> 01:27:57.896
der da irgendwie das ganze Ökosystem in Grund und Boden schimpft und dann als

01:27:57.896 --> 01:27:59.576
nächstes, hier, kauf doch mal was davon.

01:28:01.138 --> 01:28:05.678
Die Werbung, die ich nicht verstehe, ist, wenn ich mir jetzt zum Beispiel online

01:28:05.678 --> 01:28:09.818
Schuhe bestellt habe, warum kriegen die Services das nicht hin,

01:28:09.878 --> 01:28:13.478
zu checken, dass ich sie ja schon bestellt habe und nicht noch weitere zehnmal kaufen möchte?

01:28:13.478 --> 01:28:17.638
Das ist ein Klassiker der personalisierten Werbung, die irgendwie dann nichts rafft.

01:28:18.098 --> 01:28:20.378
Naja, entweder das oder ich bin mittlerweile dazu übergegangen,

01:28:20.398 --> 01:28:24.198
dass die selber, glaube ich, ein nicht allzu hohes Vertrauen in ihre Produkte

01:28:24.198 --> 01:28:28.458
haben, sodass die entweder davon ausgehen, dass die Dinger eh retourniert oder

01:28:28.458 --> 01:28:31.318
nach zwei Wochen durch sind, dass du gleich mehr haben willst.

01:28:31.398 --> 01:28:32.318
So interpretiere ich das.

01:28:33.198 --> 01:28:37.958
Oder ich sehe, oh, da ist es in Euro günstiger, deswegen kaufe ich es jetzt da. Ja, keine Ahnung.

01:28:38.878 --> 01:28:42.278
Als ob ich mir so einen Aufwand ... Keine Ahnung. Das ist übrigens auch schlau,

01:28:43.678 --> 01:28:44.478
apropos Personalisierung.

01:28:45.618 --> 01:28:50.078
Ich habe die abgeschaltet und dann kriege ich halt irgendeine Werbung.

01:28:51.658 --> 01:28:55.598
Vielleicht spannende. Ja, geht. Und dann habe ich nämlich so eine bekommen für

01:28:55.598 --> 01:28:59.518
irgendwelche total bescheuerten Spiele und ich so, echt jetzt? Also das will ich nicht.

01:28:59.658 --> 01:29:03.058
Das ist so total gaga. Ich weiß nicht, was das für eine Werbung ist.

01:29:03.278 --> 01:29:05.998
Da werden irgendwelche Männchen die ganze Zeit von so Monstern gefressen.

01:29:07.298 --> 01:29:11.798
Das klingt immer noch besser, als die Werbung, die diversen Leuten dann einfach auf X abgespielt wurde.

01:29:12.478 --> 01:29:15.918
Ja, ich wollte... Da waren einige Kracher dabei. Das konntest du dann zumindest

01:29:15.918 --> 01:29:19.638
in einem Work-Umfeld oder Familienumfeld oder am besten in gar keinem Umfeld

01:29:19.638 --> 01:29:21.878
mehr aufmachen. Ach, da waren mehr als ein X involviert.

01:29:23.358 --> 01:29:27.758
Da waren drei X involviert. Okay, da bin ich noch drum herum gekommen.

01:29:27.758 --> 01:29:31.078
Und wenn du dann auch noch überlegst, ob das jetzt personalisiert sein könnte

01:29:31.078 --> 01:29:36.598
bei der Person, dann, also das... Immerhin war es nur ein X und das X hatte

01:29:36.598 --> 01:29:38.618
keine Serifen. Das ist ja auch schon gut.

01:29:40.998 --> 01:29:44.978
Auch nicht schlecht. Naja, jedenfalls, wenn du bei YouTube diese Kack-Werbung

01:29:44.978 --> 01:29:48.438
dann blocken willst, wenn du dann sagen willst, also bitte tu die weg,

01:29:48.598 --> 01:29:50.858
ich möchte die nicht mehr sehen, gib mir andere Werbung,

01:29:52.058 --> 01:29:55.338
dann sagen die, ja, aber du hast ja Personalisierung abgeschaltet,

01:29:55.438 --> 01:29:56.258
dann können wir das nicht machen.

01:29:57.758 --> 01:30:03.278
Also du kannst quasi so, du kannst nicht sagen, ja, bitte spät mich nicht aus,

01:30:03.378 --> 01:30:07.438
aber die Werbung möchte ich bitte explizit nicht sehen, weil die einfach nur scheiße ist.

01:30:07.838 --> 01:30:10.418
Das geht da nicht. Dann sagen die, ja, nee, das geht ja nicht.

01:30:10.478 --> 01:30:11.918
Du hast ja Personalisierung abgeschaltet.

01:30:12.658 --> 01:30:15.638
Siehst du, das ist genau mein Dilemma. Der Preis, den ich da bezahle,

01:30:15.738 --> 01:30:17.158
der ist absolut unerträglich.

01:30:17.498 --> 01:30:21.418
Aber die Alternative ist halt noch 3% unerträglicher.

01:30:22.338 --> 01:30:26.018
Also das geht halt nicht. Das ist halt einfach komplett ... Ja,

01:30:26.038 --> 01:30:30.158
du kannst ja so Sachen machen wie irgendwie, VPN auf Türkei einstellen oder

01:30:30.158 --> 01:30:34.878
ich glaube Mexiko oder so, dann da kriegst du ja YouTube dann Premium nachgeworfen.

01:30:36.618 --> 01:30:42.738
Aber da hab ich dann immer so ein bisschen Angst, dass das dann irgendwann so

01:30:42.738 --> 01:30:45.398
rauskommt, dass mein Google-Account komplett gesperrt wird.

01:30:45.478 --> 01:30:49.578
Das ist ja nur das Schlimme. Dann hast du da deine ganzen Google-Services,

01:30:49.578 --> 01:30:51.978
die da alle zusammenhängen, alle gesperrt.

01:30:51.998 --> 01:30:55.078
Das ist wirklich mein Horrorszenario. Also das...

01:30:56.574 --> 01:31:00.414
Ich denke in der EU, also ich darf es machen, was du möchtest,

01:31:00.454 --> 01:31:08.094
aber ist es in der EU nicht so gesetzlich, dass du das schon machen können, dürfen, solltest?

01:31:08.114 --> 01:31:13.034
Aber wenn ich jetzt irgendwie quasi sozusagen betrüge und behaupte,

01:31:13.034 --> 01:31:18.794
ich wäre irgendwie in Mexiko oder ich glaube, so günstig gibt es das in keinem

01:31:18.794 --> 01:31:21.794
Land in der EU. Das heißt, ich muss schon irgendwie mich dann da.

01:31:22.634 --> 01:31:27.494
Dann wärst du ja nicht mehr in der EU. Genau. Ja, und das hat man ja schon ein

01:31:27.494 --> 01:31:30.074
paar Mal gelesen, dass dann irgendwelche Accounts gesperrt wurden,

01:31:30.194 --> 01:31:34.354
weil, keine Ahnung, im Google Drive Fotos von den Kindern sind.

01:31:34.414 --> 01:31:38.394
Die sind nicht bekleidet gewesen. Direkt hier Kinderporno, zack, weg.

01:31:38.854 --> 01:31:42.534
Und dann hast du auch keine Nummer mehr, die du anrufen kannst. Keinen Kontakt, nix.

01:31:42.994 --> 01:31:46.294
Und du bist halt einfach dann weg vom Fenster. Das ist übrigens der Grund,

01:31:46.394 --> 01:31:51.034
warum ich kein Fan von Single Sign-Ons bin. Weil ich denke, also.

01:31:55.134 --> 01:31:58.914
XXTwitter hat das ja auch mit diversen Leuten gemacht. Und wenn du dann deinen

01:31:58.914 --> 01:32:02.854
Twitter-Login teilweise genutzt hast für andere Services, dann konntest du diese

01:32:02.854 --> 01:32:04.194
anderen Services nicht mehr nutzen.

01:32:05.034 --> 01:32:08.214
Dementsprechend mache ich immer einen Login, falls möglich, mit meiner eigenen

01:32:08.214 --> 01:32:09.294
E-Mail. Mache ich auch immer, ja.

01:32:09.734 --> 01:32:16.114
Ist mir auch recht lieber. Single Sign-On, das SSO steht für Single Point of Failure. Ja.

01:32:18.154 --> 01:32:21.474
Single Sign-Off of Failure.

01:32:25.194 --> 01:32:32.174
Ja. Gut, es wird spät. Ja, aber war doch eine schöne... Und wir sind bei zwei

01:32:32.174 --> 01:32:33.474
geblieben. Zwei geblieben, genau.

01:32:34.534 --> 01:32:40.374
Ja, super. Hat Spaß gemacht. Und wir haben ja auch schon zwei Themen auserkoren,

01:32:40.374 --> 01:32:41.594
und die wir auch noch mal beackern wollen.

01:32:42.014 --> 01:32:44.494
Also Internationalisierung und ...

01:32:45.574 --> 01:32:49.914
Und CSS-Internationalisierung. Da schaue ich mir das an, wie man das so machen kann.

01:32:50.154 --> 01:32:56.154
Genau, und was Entwickler denken, wie die Welt tickt und sie tickt nicht so.

01:32:58.354 --> 01:33:01.334
Genau, da müssen wir noch einen Host-Kontext-Peter machen. Genau.

01:33:03.434 --> 01:33:10.254
Und dann habe ich noch überlegt, ob wir uns mal wen vom Google-VA-Team noch mal ins Haus holen.

01:33:10.894 --> 01:33:12.454
Ja, das wäre, glaube ich, eine gute Idee.

01:33:13.934 --> 01:33:15.854
Wir sind auch hier bei dir um die Ecke, Vanessa.

01:33:18.914 --> 01:33:23.134
Ja, ich fahre da einfach mal direkt hin. Ich gehe einfach direkt ins Google

01:33:23.134 --> 01:33:24.434
Office und sage, entschuldigen Sie.

01:33:26.354 --> 01:33:29.654
Brauche ja Podcast-Matte. Hier dahinten sieht es aus wie Compiler Engineer.

01:33:29.754 --> 01:33:30.754
Ich leih mir die mal kurz aus.

01:33:31.594 --> 01:33:34.894
Ich schicke dir hier unser mobiles Podcast-Set. Ich habe das Gefühl,

01:33:35.014 --> 01:33:38.394
wenn ich da irgendwo rein stolper und einfach sage, die Person schaut so aus,

01:33:38.434 --> 01:33:41.554
als könnte man darüber Bescheid wissen, kann das nur in Fettnäpfchen enden,

01:33:41.574 --> 01:33:45.394
weil ich kann euch nicht sagen, wie oft ich gefragt wurde, ob ich Marketing mache.

01:33:45.654 --> 01:33:49.434
Was eine Frechheit ist für alle Seiten, weil ich habe so wenig Ahnung von Marketing,

01:33:49.614 --> 01:33:51.854
dass es eine Beleidigung ist für alle Marketingleute.

01:33:55.089 --> 01:34:00.189
Ich kriege nicht mal Designer oder so. So etwas völlig anderes.

01:34:00.409 --> 01:34:01.949
Was macht mich zu Marketing?

01:34:02.589 --> 01:34:05.869
Weißt du, ich muss vielleicht irgendwie das mal überlegen.

01:34:06.729 --> 01:34:10.469
Vielleicht haben Marketingleute, vielleicht haben die dann mehr iPhones und

01:34:10.469 --> 01:34:12.729
so. Und Designer haben auch iPhones.

01:34:13.309 --> 01:34:16.529
Also irgendwelche Sachen hast du vielleicht. Was ich mir überlegt habe,

01:34:16.589 --> 01:34:19.069
es passiert mir vor allem im Startup-Bereich.

01:34:19.169 --> 01:34:23.549
Und ich habe die Überlegung, weil im Startup müssen ja diverse Gewerke breiter

01:34:23.549 --> 01:34:27.069
ausgebaut sein. und manche gibt es halt einfach gar nicht. Also QA gibt es halt nie.

01:34:27.269 --> 01:34:31.129
Aber Marketing und Sales ist halt schon auch sehr wichtig, gerade am Anfang.

01:34:31.529 --> 01:34:35.709
Und ob da die Leute so ihr Ausschlusskriterium machen, was man in so einem Startup

01:34:35.709 --> 01:34:38.049
braucht, das ist Dev, Design, Sales, Marketing.

01:34:39.869 --> 01:34:43.089
Und Design kriege ich anscheinend nicht. Für Dev bin ich zu blond.

01:34:43.489 --> 01:34:47.729
Ich wollte es gerade sagen. Für Sales zu weit nicht. Für die richtige Kategorisierung

01:34:47.729 --> 01:34:51.369
kann ich halt wahrscheinlich wirklich so die Kombination aus Bart und Rudi empfehlen.

01:34:53.489 --> 01:34:57.149
Ja stimmt, du müsst dir so ein Bart ankleben. Das würde wahrscheinlich echt

01:34:57.149 --> 01:34:59.989
helfen, also mir ist das noch nicht passiert, dass ich fehlkategorisiert wurde.

01:35:02.687 --> 01:35:08.167
Es ist nicht so schön. Naja. Genau, aber unsere Hörer, die wissen Bescheid.

01:35:09.227 --> 01:35:15.847
Die kennen den Pain auch. Wahrscheinlich auch, ja. High five an alle draußen. Ja, damn.

01:35:17.527 --> 01:35:22.307
Euch auf jeden Fall vielen Dank. Das war wieder eine sehr nette Runde.

01:35:22.467 --> 01:35:24.527
Vielen Dank fürs Moderieren. Immer gerne.

01:35:25.167 --> 01:35:33.407
Und auch danke für die Vertretung von Hans, Vanessa, mit den herrlichen Übergängen. Ah.

01:35:34.687 --> 01:35:40.467
Ja, ja, Tute. Das sind ja große Fußtopfen, wo ich da reintreten muss.

01:35:41.547 --> 01:35:45.107
Genau, und dann hören wir uns nächste Woche wieder. Wir wissen noch nicht,

01:35:45.127 --> 01:35:46.167
zu welchem Thema, glaube ich.

01:35:46.487 --> 01:35:51.467
Was bedeutet, dass wir gerade auf der Suche auch nach neuen Gästen und Gästinnen sind?

01:35:52.547 --> 01:35:56.067
Das überstöbern wir auch nicht zum ersten Mal. Jetzt müssen wir uns mal ein bisschen sammeln.

01:35:56.727 --> 01:36:00.167
Also, wir sind auf der Suche nach neuen Gästen. Also meldet euch gerne,

01:36:00.307 --> 01:36:02.687
falls ihr irgendein x-beliebiges Thema habt,

01:36:03.127 --> 01:36:08.747
im Bereich Web so ungefähr, über das ihr sprechen möchtet, auch gerne einfach

01:36:08.747 --> 01:36:14.267
nur ganz harmlos anfragen per E-Mail an die comments at workingdraft.de,

01:36:14.927 --> 01:36:19.587
denke ich oder in unserem Working Community Working Drafts.

01:36:19.627 --> 01:36:22.007
Genau. Da freuen wir uns sowieso, wenn ihr da reinschaut.

01:36:22.907 --> 01:36:27.367
Alles klar. Dann schönen Abend, schönen Tag und bis nächste Woche.

01:36:28.207 --> 01:36:29.767
Tschüss. Tschüssi. Ciao, ciao.

01:36:30.480 --> 01:36:53.520
Music.

01:36:32.327 --> 01:36:44.067
Bis zum nächsten Mal.