WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: Aufgemerkt und aufgepasst mit Observer APIs
Publishing Date: 2022-10-09T20:50:00+02:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/aufgemerkt-und-aufgepasst-mit-observer-apis/

00:00:00.000 --> 00:00:06.000
 Wo wir sind, ist vorne, Folge 44. Heute geht's um die Stasi des Web-Developments. Aber pssst.

00:00:06.000 --> 00:00:25.220
 Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzeleien.

00:00:25.220 --> 00:00:29.240
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

00:00:30.000 --> 00:00:40.940
 Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.

00:00:54.820 --> 00:00:56.020
 Hallo.

00:00:56.020 --> 00:01:01.260
 Hey, hey, hey, du. Hey, du.

00:01:01.260 --> 00:01:02.380
 Möchtest du ein A kaufen?

00:01:02.380 --> 00:01:05.180
 Was, ein A kaufen?

00:01:05.180 --> 00:01:06.160
 Pssst, genau.

00:01:06.160 --> 00:01:08.660
 Nicht so laut.

00:01:08.660 --> 00:01:13.860
 Ja, und damit willkommen zu einer neuen Folge.

00:01:13.860 --> 00:01:17.720
 Ja, oder so. Irgendwie sowas in der Richtung heute, ne?

00:01:18.840 --> 00:01:21.140
 Wir lösen das nachher noch auf, um was es geht.

00:01:21.140 --> 00:01:29.480
 Wir sind spät dran. Ja, ihr könnt es in den Shownotes ja dann schon lesen, wenn es veröffentlicht wird. Sollen wir es jetzt schon sagen? Oder sollen wir die Leute noch lesen?

00:01:29.480 --> 00:01:32.260
 Nee, sag mal beim Thema. Lassen die noch ein bisschen verwirrt zurück.

00:01:32.260 --> 00:01:33.080
 Okay.

00:01:34.660 --> 00:01:39.060
 Okay, dann, ja, schön, dass ihr wieder dabei seid. Und dann kommen wir doch direkt zum Bierchen.

00:01:39.060 --> 00:01:50.520
 Zum Bier, ja. Bierchen ist gut. Also, die Flasche ist irgendwie sehr schwer und ist ein 0,5er. Das ist das letzte HörerInnen-Bierchen. Ich weiß gar nicht mehr, wer uns das geschickt hatte.

00:01:51.020 --> 00:01:52.060
 Ich hab gar keins mehr.

00:01:52.060 --> 00:02:03.340
 Jedenfalls ist das das letzte, was ich noch aufgehoben hab über den Sommer für die dritte Staffel. Und das ist ein Duckstein-Rot-Blond-Original auf Buchenholz gereift.

00:02:03.340 --> 00:02:05.660
 Das hab ich, davon hab ich schon viel gehört.

00:02:05.660 --> 00:02:06.760
 Ja, okay, so sieht's aus.

00:02:06.760 --> 00:02:15.020
 Nämlich der Leute aus, ich glaube der Nikolaus Wörl aus Methodisch-Inkorrekt, vom Methodisch-Inkorrekt-Podcast, der trinkt das, glaube ich, öfter.

00:02:15.020 --> 00:02:19.580
 Ah, okay. Also, da bin ich mal sehr gespannt. 1640 steht hier drauf.

00:02:19.580 --> 00:02:21.200
 Ich weiß nicht, ob die Flasche ist, nicht von 1640.

00:02:21.200 --> 00:02:24.360
 Auf jeden Fall Duckstein. Ja, warum eigentlich nicht?

00:02:24.360 --> 00:02:25.300
 Und es hat ...

00:02:25.300 --> 00:02:26.380
 Ist ja braun, also ...

00:02:26.380 --> 00:02:28.580
 Es hat 4,9 Prozent.

00:02:28.580 --> 00:02:31.460
 4,9. Ja, ich bin wieder langweilig unterwegs.

00:02:31.460 --> 00:02:34.460
 Ich hab wieder ein kleines Wolf.

00:02:34.460 --> 00:02:40.180
 Und ich hab das aber ... Ich war da jetzt aber auch noch mal in dieser Brauerei-Gaststätte die Tage.

00:02:40.180 --> 00:02:44.900
 Und es ist ... Von denen würde ich ... Ich glaube, ich muss mal gucken, ob es das auch in Flaschen gibt.

00:02:44.900 --> 00:02:48.600
 Das Kreusen von denen schmeckt auch gut. Kreusen ist so eine komische Karlsruher Erfindung.

00:02:48.600 --> 00:02:50.060
 Keiner so genau weiß.

00:02:50.060 --> 00:02:52.780
 Ja, egal, was es eigentlich ist.

00:02:52.780 --> 00:02:54.520
 Was es eigentlich ist, aber es schmeckt ganz gut.

00:02:54.520 --> 00:02:54.820
 Okay.

00:02:54.820 --> 00:02:56.540
 Es gibt vor, Bier zu sein, ja.

00:02:56.540 --> 00:02:59.620
 Okay, dann machen wir mal ASMR-Öffnung. Also, ich fang mal an.

00:02:59.620 --> 00:03:01.660
 Ich hab heute wieder einen richtigen Glaschniff, ne?

00:03:01.660 --> 00:03:04.040
 Aha.

00:03:04.040 --> 00:03:05.980
 Das ist ja gut.

00:03:05.980 --> 00:03:06.500
 Hier ...

00:03:06.500 --> 00:03:08.080
 Pass auf, Konstantin, heute machen wir das ...

00:03:08.080 --> 00:03:08.900
 Das schäumt schon wieder.

00:03:08.900 --> 00:03:12.040
 Heute machen wir das mal synchronisiert über das Portal.

00:03:12.120 --> 00:03:13.060
 Ja, du brauchst nichts machen.

00:03:13.060 --> 00:03:14.920
 Wir stoßen jetzt an, aber du brauchst nichts machen.

00:03:14.920 --> 00:03:15.280
 Ja, okay.

00:03:15.280 --> 00:03:16.300
 Also dann, zum Wohl.

00:03:16.300 --> 00:03:18.220
 Ah, sehr schön.

00:03:18.220 --> 00:03:19.600
 So.

00:03:19.600 --> 00:03:22.640
 Bevor das wieder so vermurksklingt hier.

00:03:22.640 --> 00:03:26.580
 Also, ich bin gespannt, ob ich diese Buchenholznote überhaupt rausschmecke.

00:03:26.640 --> 00:03:27.960
 Ich bin mal wieder erkältet, wie so oft.

00:03:27.960 --> 00:03:30.960
 Und schmeckt nicht so viel, aber ich probier's mal.

00:03:30.960 --> 00:03:34.520
 Ja, also, meins schmeckt wie immer.

00:03:34.520 --> 00:03:35.500
 Ganz gut.

00:03:35.500 --> 00:03:41.900
 Es ist interessant, wenn man nicht wirklich so die Aromen rausschmeckt.

00:03:41.900 --> 00:03:44.020
 Es hat so ein bisschen was von Lakritz.

00:03:44.020 --> 00:03:45.300
 Ah.

00:03:45.300 --> 00:03:48.380
 Aber mehr schmeck ich auch nicht, wirklich.

00:03:48.380 --> 00:03:52.140
 Okay.

00:03:52.140 --> 00:03:52.760
 Ist eigentlich schade.

00:03:52.760 --> 00:03:53.860
 Ja, schade.

00:03:53.980 --> 00:03:56.640
 Also, dann müssen wir das vielleicht noch mal probieren.

00:03:56.640 --> 00:03:57.420
 Ja, ich glaube auch.

00:03:57.420 --> 00:03:59.000
 In anderem gesundheitlichem Zustand.

00:03:59.000 --> 00:04:00.500
 Und ich würd's dann auch gern mal probieren.

00:04:00.500 --> 00:04:05.100
 Und ich weiß jetzt, wie gesagt, nicht genau, ob's genau dieses Duckstein ist, was der

00:04:05.100 --> 00:04:05.980
 Nikola Swirl trinkt.

00:04:05.980 --> 00:04:07.200
 Aber es ist auf jeden Fall eins.

00:04:07.200 --> 00:04:11.160
 Übrigens, ja, methodisch inkorrekt, sehr guter Podcast zum Thema Physik.

00:04:11.160 --> 00:04:13.660
 Kann ich auf jeden Fall hier an der Stelle empfehlen.

00:04:13.660 --> 00:04:15.240
 Gut.

00:04:15.240 --> 00:04:15.480
 Okay.

00:04:15.480 --> 00:04:18.940
 Haben wir Bier und Einleitung hinter uns gebracht.

00:04:18.940 --> 00:04:24.280
 Ähm, und dann, äh, würden wir weitergehen zu ...

00:04:24.280 --> 00:04:36.000
 Ich hab vorhin noch mal umsortiert.

00:04:36.000 --> 00:04:37.380
 Ja, ich hab's grad gesehen.

00:04:37.380 --> 00:04:41.560
 Nicht, dass du verwirrt wirst, weil, äh, es kam, es kam noch was dazu von mir.

00:04:41.560 --> 00:04:45.280
 Und deswegen, ich wollt das, äh, ein bisschen abwechselnd machen können.

00:04:45.280 --> 00:04:45.460
 Genau.

00:04:45.460 --> 00:04:48.800
 Weil ich hab jetzt ganz, ganz spontan, und das ist auch das, warum wir ein bisschen später

00:04:48.800 --> 00:04:52.380
 jetzt aufnehmen, das wisst ihr natürlich nicht, aber der Konstantin, der musste noch ein bisschen

00:04:52.380 --> 00:04:52.680
 warten.

00:04:52.680 --> 00:04:58.820
 Ähm, weil es begab sich, äh, in meinem Umfeld, dass ein Airtag verloren ging.

00:04:59.360 --> 00:05:02.980
 Wir haben ja schon mal über Airtags gesprochen, äh, die Apple-Dinger, mit denen man, äh,

00:05:02.980 --> 00:05:05.380
 die man an Schlüssel machen kann und so, mit denen man Sachen wiederfinden kann.

00:05:05.380 --> 00:05:10.420
 Interessanterweise ist aber nur das Airtag verloren gegangen, nicht das, was dran hing.

00:05:10.420 --> 00:05:11.080
 Ach.

00:05:11.080 --> 00:05:15.360
 War aber trotzdem interessant, ähm, dann zu gucken, findet man denn das jetzt wieder?

00:05:15.360 --> 00:05:15.680
 Aha.

00:05:15.680 --> 00:05:19.500
 Und dann, ähm, es war nämlich auch nicht klar, wo ist es verloren gegangen?

00:05:19.500 --> 00:05:27.240
 Und, äh, man hat aber auf der Karte dann tatsächlich gesehen, ähm, ja, das ist irgendwo

00:05:27.240 --> 00:05:29.200
 gesehen worden in der Karlsruher Weststadt.

00:05:29.360 --> 00:05:29.480
 Mhm.

00:05:29.480 --> 00:05:30.200
 So.

00:05:30.200 --> 00:05:33.420
 Und zwar auch mit einem Punkt, mit einer Straße und Hausnummer.

00:05:33.420 --> 00:05:35.380
 Ähm, genau.

00:05:35.380 --> 00:05:40.660
 Und das war dann, das war dann schon, okay, Straße, Hausnummer, Haus, also der, der, der

00:05:40.660 --> 00:05:43.420
 Böbel, der war auf der Karte schon so ein bisschen, dass man so dachte, das ist wahrscheinlich

00:05:43.420 --> 00:05:44.200
 in diesem Haus.

00:05:44.200 --> 00:05:46.220
 Und dann war jetzt so die Hausnummer.

00:05:46.220 --> 00:05:49.420
 Und sagt er euch aber auch nix, äh, die Adresse irgendwie, oder?

00:05:49.420 --> 00:05:50.720
 Nee, nee, überhaupt nicht, überhaupt nicht.

00:05:50.720 --> 00:05:56.080
 Und, ähm, jetzt war die Frage, ist das jetzt wirklich, kommen wir da jetzt wieder dran

00:05:56.080 --> 00:05:58.920
 oder liegt das jetzt irgendwo im Busch, findet man es da wieder oder ist es tatsächlich bei

00:05:58.920 --> 00:06:01.740
 jemandem zu Hause, weil das ist, glaube ich, relativ nutzlos, wenn so ein AirTag einmal

00:06:01.740 --> 00:06:03.000
 registriert ist auf ein Gerät.

00:06:03.000 --> 00:06:07.260
 Äh, ich glaube, das ist sinnlos, da kannst du da nix mit anfangen.

00:06:07.260 --> 00:06:10.980
 Also, ich weiß nicht, ob es da irgendwie findige Hacker gibt, die das dann irgendwie, ähm,

00:06:11.480 --> 00:06:14.680
 entsperren können, aber ich glaube, ich glaube aber, das ist ja auch bei iPhones ziemlich

00:06:14.680 --> 00:06:17.320
 schwierig, ähm, wenn die auf irgendeinem Account registriert sind.

00:06:17.320 --> 00:06:20.720
 Also, Apple, die geben, die geben sich da relativ, äh, große Mühe, glaube ich, dass das nicht

00:06:20.720 --> 00:06:21.340
 so einfach geht.

00:06:21.340 --> 00:06:26.540
 Ähm, ja, und dann, ähm, haben wir halt einfach mal, also wir sind so ein bisschen rumgelaufen,

00:06:26.640 --> 00:06:32.380
 da gab es auch irgendwie so einen Innenhof, ähm, da war nichts und, ähm, ich weiß nicht,

00:06:32.380 --> 00:06:38.360
 wer das kennt mit dieser Woist-App und den AirTags, ähm, es ist so, dass, äh, generell mal

00:06:38.360 --> 00:06:42.360
 angezeigt wird, wenn man irgendwie da, da an diesem Punkt ist, ja, lauf mal noch ein bisschen

00:06:42.360 --> 00:06:47.540
 weiter rum, ich hab keine Connection, das ist so dieser, dieses, ich hab noch keine Verbindung

00:06:47.540 --> 00:06:52.460
 zu dem Gerät-Screen, das hatten wir eigentlich die ganze Zeit, dann haben wir gedacht, ich

00:06:52.460 --> 00:06:56.160
 glaube, wir müssen mal in das Haus rein, so. Und dann halt mal an verschiedenen Klingeln

00:06:56.160 --> 00:06:59.020
 geklingelt, dann hat auch tatsächlich jemand aufgemacht und den haben wir dann auch mal

00:06:59.020 --> 00:07:05.440
 gefragt, ja, ob er das zufällig hat, ähm, hat er nicht. Und, äh, dann sind wir noch, haben

00:07:05.440 --> 00:07:08.780
 wir gedacht, okay, ich hab auch vor kurzem festgestellt, ich hab meinen Schlüssel mal

00:07:08.780 --> 00:07:11.680
 gesucht und der war tatsächlich bei mir in der Wohnung, aber auf der anderen Seite, selbst

00:07:11.680 --> 00:07:13.640
 da war die Entfernung schon zu groß.

00:07:13.640 --> 00:07:14.380
 Oh, okay.

00:07:14.680 --> 00:07:18.540
 Und dann hab ich dann auch gedacht, okay, gut, und keine Ahnung, wie viel, also du,

00:07:18.540 --> 00:07:22.620
 du warst ja schon mal bei mir, also ich war bei mir in der Küche, äh, und der Schlüssel

00:07:22.620 --> 00:07:24.780
 lag im Bad und die haben, haben sich nicht gefunden.

00:07:24.780 --> 00:07:27.700
 Das reicht schon nicht, ich meine, das ist ja nicht so ein Riesenweg.

00:07:27.700 --> 00:07:32.220
 Ich glaube, es ist Bluetooth, ähm, und ich weiß auch, dass, wenn ich mit den Kopfhörern

00:07:32.220 --> 00:07:35.500
 in meinem Bad lauf, äh, dass da die Verbindung dann schon schlecht wird.

00:07:35.500 --> 00:07:36.120
 Okay.

00:07:36.120 --> 00:07:40.960
 Ähm, also ich nehme an, das ist einfach die normale Bluetooth-Reichweite und dann haben wir,

00:07:40.960 --> 00:07:44.440
 sind wir echt in dem Haus irgendwie hoch und runter und haben irgendwie so das, das Handy

00:07:44.440 --> 00:07:50.440
 an die Türen gehalten und tatsächlich, interessanterweise neben dem, der uns aufgemacht hat, war dann

00:07:50.440 --> 00:07:53.160
 plötzlich, ähm, du bist sehr weit entfernt.

00:07:53.160 --> 00:07:55.880
 Und ich dachte so, okay, da stand eben schon, lauf irgendwie noch ein bisschen rum, aber dieser

00:07:55.880 --> 00:07:57.820
 Screen ist jetzt anders, wieso sollte der sich verändern?

00:07:57.820 --> 00:08:02.300
 Ähm, und dann so, hm, lassen wir doch mal bimmeln, vielleicht geht es ja jetzt.

00:08:02.300 --> 00:08:05.440
 Und das ging dann und dann haben wir tatsächlich aus dieser Wohnung ein Bimmeln gehört.

00:08:05.980 --> 00:08:08.460
 Und dann haben wir da geklingelt und da war tatsächlich auch jemand zu Hause.

00:08:08.460 --> 00:08:14.320
 Und, ähm, ich unterstelle auch niemandem irgendwie, dass das, äh, dass es wohl einfach runtergefallen

00:08:14.320 --> 00:08:19.020
 lag irgendwo und jemand neugierig ist, hat es mitgenommen und hat sich gedacht, da ist irgendwie

00:08:19.020 --> 00:08:20.560
 ein Apfel drauf, da gucken wir mal, was es ist.

00:08:20.560 --> 00:08:22.880
 Ich glaube, so in diese Richtung muss das gelaufen sein.

00:08:22.980 --> 00:08:25.280
 Und dann haben wir gesagt, ja, wir haben hier irgendwie eine Schlüssel, war auch alles

00:08:25.280 --> 00:08:29.480
 ganz nett, hier so, äh, Schlüsselanhänger irgendwie verloren und, äh, habt ihr den

00:08:29.480 --> 00:08:31.500
 vielleicht und, äh, wir lassen es noch mal bimmeln.

00:08:31.500 --> 00:08:36.100
 Und, ah ja, tatsächlich, ah ja, der hat, hat, derjenige, der das gefunden hat, war, war gar

00:08:36.100 --> 00:08:38.560
 nicht anwesend, sondern gesagt, ja, klar, kein Problem hier, bitteschön.

00:08:38.560 --> 00:08:40.300
 Also, es hat tatsächlich geklappt.

00:08:40.300 --> 00:08:40.700
 Krass.

00:08:40.700 --> 00:08:42.320
 Das Ding wieder zu bekommen.

00:08:42.320 --> 00:08:47.040
 Ähm, ich meine, das wäre jetzt, naja, ich wollte gerade sagen, wäre kein schlimmer

00:08:47.040 --> 00:08:47.660
 Verlust gewesen.

00:08:47.660 --> 00:08:51.160
 Ich meine, der Schlüssel war halt nicht dran, aber das Ding hat halt schon Geld gekostet.

00:08:51.160 --> 00:08:54.620
 Und jetzt hat sich auch bewiesen, man kann es tatsächlich wieder finden.

00:08:54.620 --> 00:08:57.040
 Ähm, also zumindest in der Stadt.

00:08:57.040 --> 00:09:02.960
 Ähm, ja, das war jetzt, äh, also es hat sich jetzt, ich hab's ja noch nie, äh, im Ernstfall

00:09:02.960 --> 00:09:07.920
 ausprobiert, ich hab nur halt mal, äh, es irgendwo hingelegt und dann geguckt, find ich's

00:09:07.920 --> 00:09:11.540
 wieder und, äh, es hat tatsächlich geklappt jetzt, also, ohne dass man wusste, wo es ist.

00:09:11.540 --> 00:09:12.340
 Das ist doch gut zu wissen.

00:09:12.340 --> 00:09:18.800
 Es war jetzt aber auch echt Glück, weil, ähm, wenn, ich, ich glaube, wenn das Ding jetzt

00:09:18.800 --> 00:09:23.220
 in dieser Wohnung weiter weggelegen hätte von der Eingangstür, in, in, in einem, in einem

00:09:23.220 --> 00:09:25.940
 Raum, der noch weiter entfernt ist, ich glaube, dann hätten wir's nicht gefunden.

00:09:25.940 --> 00:09:30.020
 Nee, dann wär's zu weit weg, also, oder zu dicke Wände, irgendwie dicker Altbau, keine

00:09:30.020 --> 00:09:34.820
 Ahnung, ähm, ja, aber das nur so, äh, als, als schöne kleine Erfolgsgeschichte, erst mal

00:09:34.820 --> 00:09:38.620
 so, fuck, da muss man jetzt irgendwie was machen, müssen wir möglichst schnell, ähm, und

00:09:38.620 --> 00:09:40.560
 ja, hat am Ende geklappt, fand ich gut.

00:09:40.560 --> 00:09:41.400
 Sehr gut.

00:09:42.640 --> 00:09:44.040
 Ja, das dazu.

00:09:44.040 --> 00:09:49.640
 Ja, äh, mein nächster Retro-Punkt ist einfach nur so ein lustiges Ding, äh, haben wahrscheinlich

00:09:49.640 --> 00:09:56.540
 eh schon alle gesehen, aber, äh, Tim, Tim Cook, auch bekannt als Tim Apple, ähm, hat auf

00:09:56.540 --> 00:10:00.740
 Twitter was auf Deutsch gepostet und nicht nur auf Deutsch, sondern auf Bayerisch und zwar

00:10:00.740 --> 00:10:03.480
 schön, dass wir wieder einmal gemütlich zusammensitzen.

00:10:03.480 --> 00:10:06.860
 So happy to be back to Oktoberfest, Prost.

00:10:06.860 --> 00:10:12.580
 Äh, und zwar, also nicht nur genug, dass es auf, auf Deutsch dasteht, auf Bayerisch, es

00:10:12.580 --> 00:10:20.800
 ist ein Bild, ähm, mit Kai Pflaume, Tim Cook und Kai Pflaume, die sich, äh, zu posten

00:10:20.800 --> 00:10:23.400
 auf einem Bild, ähm, ja, die anscheinend irgendwie sich kennen.

00:10:23.400 --> 00:10:27.820
 Ich glaube, mir fällt grad der Name nicht ein, aber der, der Links von Tim Cook ist, glaube

00:10:27.820 --> 00:10:29.040
 ich, auch einen Apple-Mitarbeiter.

00:10:29.040 --> 00:10:29.440
 Okay.

00:10:29.440 --> 00:10:32.320
 Den hab ich, glaube ich, in, in Keynotes irgendwie schon mal gesehen.

00:10:32.320 --> 00:10:36.240
 Ähm, und die, die Dame, die noch drauf ist, ist wahrscheinlich irgendwie die Freundin

00:10:36.240 --> 00:10:40.380
 von Kai Pflaume, oder was weiß ich, keine Ahnung, ähm, aber ja, tatsächlich, aber Kai Pflaume,

00:10:40.380 --> 00:10:42.400
 das ist ja echt, der altert ja gar nicht.

00:10:42.400 --> 00:10:43.260
 Nee, nee, krass, ne?

00:10:43.260 --> 00:10:47.660
 Der ist doch schon hunderttausend Jahre alt und, äh, der sieht auf dem Bild aus, so wie

00:10:47.660 --> 00:10:48.520
 schon, wie schon immer.

00:10:48.520 --> 00:10:50.320
 Wie schon immer, wie Kai Pflaume halt aussieht, ja.

00:10:50.320 --> 00:10:51.080
 Das gibt's gar nicht.

00:10:51.080 --> 00:10:55.880
 Ja, aber, ist, äh, ja, fand ich einfach irgendwie lustig, diese Connection und dann schreibt

00:10:55.880 --> 00:10:57.500
 der auf, auf, auf Bayerisch.

00:10:57.500 --> 00:10:58.700
 Das hat er nicht selbst, das hat dem doch der Kai Pflaume.

00:10:58.700 --> 00:11:00.400
 Wahrscheinlich hat der Kai ihm das eingetippt, ja.

00:11:00.400 --> 00:11:04.100
 Aber ist, ist, ist, ist der, ist der Kai Bayer, weiß man das?

00:11:04.100 --> 00:11:10.240
 Das, das muss ja, das ist ja, das ist ja schon, das ist ja schon sehr gekonnt, bayerisch,

00:11:10.240 --> 00:11:10.600
 oder?

00:11:10.600 --> 00:11:12.260
 Ich glaub einfach, Kai Pflaume ist halt einfach überall.

00:11:12.260 --> 00:11:13.940
 Kai Pflaume ist, Kai Pflaume ist einfach überall.

00:11:13.940 --> 00:11:15.680
 In der Halle an der Saale geboren.

00:11:15.680 --> 00:11:16.460
 Ah ja, dann eher nicht so.

00:11:16.460 --> 00:11:18.000
 Nee, Sachsen-Anhalt ist das.

00:11:18.000 --> 00:11:21.060
 Äh, okay, ja, aber das ist, ja, das ist, das ist echt witzig.

00:11:21.100 --> 00:11:24.320
 Und passt auch gut zum Apple-Thema, also danke, alles richtig.

00:11:24.320 --> 00:11:27.000
 Genau, also, wollte ich vorhin den Übergang machen, aber jetzt ist der Übergang von deinem

00:11:27.000 --> 00:11:29.140
 Thema zu, zu Tim Cook, äh, genau.

00:11:29.140 --> 00:11:30.580
 Genau.

00:11:30.580 --> 00:11:31.820
 Und das, das war's auch schon dazu.

00:11:31.820 --> 00:11:35.820
 Gut, ich hatte, wir bleiben, wir bleiben bei Apple.

00:11:35.820 --> 00:11:37.380
 Wir bleiben nochmal bei Apple.

00:11:37.380 --> 00:11:41.840
 Ja, wir bleiben nochmal bei Apple, ähm, weil VoiceOver ist ja der, ist ja der Screenreader,

00:11:41.840 --> 00:11:47.160
 der, ähm, auf Apple-Geräten mit fest eingebaut ist, also tatsächlich, ich glaube sogar, äh,

00:11:47.160 --> 00:11:50.620
 auf so ziemlich allen, die irgendwie ein Bildschirm haben, also auf Mac gibt's den, auf

00:11:50.620 --> 00:11:56.120
 dem iPad gibt's den, auf dem iPhone gibt's den, ähm, genau, und da hab ich jetzt gerade

00:11:56.120 --> 00:11:59.760
 einen Test mitgemacht, das ist halt, da ich ja Mac benutze auch zum Entwickeln, ist das

00:11:59.760 --> 00:12:03.900
 so mein, äh, Screenreader, mit dem ich normalerweise die Sachen als erstes ausprobiere.

00:12:03.900 --> 00:12:09.220
 Ähm, auch wenn ich weiß, dass das wahrscheinlich nicht der am häufigsten genutzte Screenreader

00:12:09.220 --> 00:12:14.000
 ist, ich hab, hab so, so im, im, im Blick, dass das wahrscheinlich NVDA auf Windows ist

00:12:14.000 --> 00:12:17.680
 momentan und JAWS ist auch noch weit vorne, ähm, aber egal, das ist halt so das, womit

00:12:17.680 --> 00:12:21.120
 ich zuerst teste und ich hatte da echt so einen richtigen What-the-Fuck-Moment und ich hab

00:12:21.120 --> 00:12:24.480
 das auch in den Code-Pen gepackt und ich konnte es mir immer noch nicht so richtig herleiten.

00:12:24.480 --> 00:12:30.820
 Ich hatte, hatte es zu tun mit einer Tabelle, ähm, in der VoiceOver, auch, auch wenn das,

00:12:30.820 --> 00:12:34.220
 ich weiß, das HTML davon ist nicht perfekt, aber das ist leider generiert von einem Skript,

00:12:34.220 --> 00:12:39.200
 das konnte ich jetzt nicht verändern, ähm, ich wollte aber verstehen, ähm,

00:12:39.220 --> 00:12:43.820
 und zwar nach der zweiten, in der zweiten, äh, Zeile, ab der zweiten Zeile wird der

00:12:43.820 --> 00:12:45.800
 Inhalt der Tabelle komplett übersprungen.

00:12:45.800 --> 00:12:46.680
 Hm.

00:12:46.680 --> 00:12:49.640
 Wird einfach, es tut so, als ob da nichts mehr kommt.

00:12:49.640 --> 00:12:55.340
 Ähm, geht dann einfach zum nächsten Element nach der Tabelle weiter, ähm, und das sogar

00:12:55.340 --> 00:12:59.360
 auch, also ich hab erst gedacht, naja, das ist jetzt wahrscheinlich irgendwie per CSS, ist

00:12:59.360 --> 00:13:00.900
 da irgendwie was ausgeblendet oder so.

00:13:01.260 --> 00:13:04.520
 Nee, die Tabelle ist auch, auch wenn gar kein CSS dabei ist, passiert das.

00:13:04.520 --> 00:13:05.520
 Hm.

00:13:05.520 --> 00:13:12.020
 Ähm, es ist ein Konstrukt aus mit T-Head und T-Body und TH-Elementen und innen drin sind

00:13:12.020 --> 00:13:16.600
 nochmal Diffs und mit irgendwelchen Tab-Indexen und A-Elementen, die keine Links sind und so.

00:13:16.600 --> 00:13:22.540
 Und ich hab, ich weiß, wenn ich das Ding jetzt komplett runterstrippe und diese ganzen Spezialelemente

00:13:22.540 --> 00:13:24.040
 rausnehme, dann funktioniert's.

00:13:24.660 --> 00:13:27.740
 Aber ich hab noch nicht den einen Teil isolieren können.

00:13:27.740 --> 00:13:30.220
 Ich hab das Gefühl, es ist eine Kombination aus verschiedenen Dingen.

00:13:30.220 --> 00:13:35.600
 Ähm, also ich hab auch, äh, ein Tweet, äh, wo ich mal gefragt hab, vielleicht weiß ja

00:13:35.600 --> 00:13:37.080
 irgendjemand, woran's genau liegt.

00:13:37.080 --> 00:13:37.300
 Mhm.

00:13:37.300 --> 00:13:42.660
 Ähm, ich hab angefangen runterzustrippen und es muss eine Kombination aus verschiedenen

00:13:42.660 --> 00:13:43.780
 Dingen sein, nicht nur eins.

00:13:43.780 --> 00:13:46.340
 Weil ich hab so ziemlich alles einzeln schon rausgenommen.

00:13:46.340 --> 00:13:49.980
 Also vielleicht, vielleicht hab ich auch genau die eine Sache vergessen, äh, zu ändern.

00:13:49.980 --> 00:13:53.260
 Aber ich hab schon extrem viel damit rumgespielt und ich kann das Verhalten nicht ändern,

00:13:53.420 --> 00:13:58.260
 außer ich, ähm, schreib die Tabelle im Prinzip komplett neu, ohne, also mach nur Text rein,

00:13:58.260 --> 00:13:58.920
 dann geht's, ja.

00:13:58.920 --> 00:14:03.320
 Und das ist, meiner Meinung nach, muss das eigentlich ein Bug im Screenreader sein.

00:14:03.320 --> 00:14:08.660
 Ähm, aber, äh, würde mich freuen, wenn jemand da draußen das hört und, ähm, meckert mit

00:14:08.660 --> 00:14:11.460
 VoiceOver oder sich damit vielleicht auskennt und das benutzt.

00:14:11.460 --> 00:14:16.720
 Gerne mal meine CodePen-Demo aufmachen, die in dem Tweet drin ist, ähm, und, und mal nachschauen.

00:14:16.720 --> 00:14:22.180
 Also wenn du schaffst, da ein minimal reproduzierbares Beispiel draus zu machen, dann am besten ein

00:14:22.180 --> 00:14:23.540
 Backticket erstellen, ne?

00:14:23.540 --> 00:14:24.440
 Genau.

00:14:24.440 --> 00:14:28.300
 Genau, das, das wär dann das Nächste, was ich auf jeden Fall, äh, vorhabe.

00:14:28.300 --> 00:14:30.340
 Aber bisher weiß ich noch gar nicht genau, woran's liegt.

00:14:30.340 --> 00:14:34.100
 Ich kann's noch nicht, ich kann's noch nicht richtig, äh, festzuhren.

00:14:34.100 --> 00:14:34.420
 Genau.

00:14:34.420 --> 00:14:35.640
 Das dazu.

00:14:35.640 --> 00:14:37.280
 Dann sind wir jetzt, glaub ich, fertig mit Apple.

00:14:38.160 --> 00:14:43.020
 Okay, ähm, ich hab noch mal so einen kleinen Rückgriff auf die letzte Property der Woche.

00:14:43.020 --> 00:14:48.060
 Da hattest du was vorgestellt, so ein, so ein Range-Slider mit solchen Tick, äh, Dingern.

00:14:48.060 --> 00:14:52.780
 Und da hast du so eine Data-List benutzt, um diese verschiedenen Schritte da festzulegen.

00:14:52.780 --> 00:14:57.500
 Und ich hatte heute einen Fall, da hätte ich das gebrauchen können, äh, für einen Number-Input.

00:14:58.360 --> 00:15:01.440
 Weil ich da bestimmte Nummern, die schon vergeben sind, da gar nicht drin haben will.

00:15:01.440 --> 00:15:02.720
 Also nicht mit Ticks, ne?

00:15:02.720 --> 00:15:04.900
 Nicht, nicht visuell, aber, aber so eine Data-List.

00:15:04.900 --> 00:15:06.680
 Und ich wusste gar nicht, ob das, ob das da auch geht.

00:15:06.680 --> 00:15:09.300
 Und hab ich einfach mal ausprobiert und, äh, sieh da, funktioniert.

00:15:09.300 --> 00:15:11.320
 Also ich kann da auch eine Data-List festlegen.

00:15:11.460 --> 00:15:16.700
 Und dann hab ich, wenn ich diese, diese Pfeilchen hoch und runter, äh, die es da gibt, dann springt das auch zu den einzelnen Schritten.

00:15:16.700 --> 00:15:21.260
 Und, ähm, hab ich auch eine kleine, ähm, deine Demo umgebaut.

00:15:21.260 --> 00:15:26.040
 Und, äh, da kann man auch, wenn man, wenn es ganz leer ist, kann man auf dieses schwarze Pfeilchen klicken.

00:15:26.040 --> 00:15:28.160
 Und dann sieht man wirklich alle Schritte aufgelistet.

00:15:28.160 --> 00:15:29.580
 Hier 0, 10, 20, 30.

00:15:29.580 --> 00:15:33.880
 Und wenn ich auf die Pfeile hoch runterklicke, dann springt das echt zu den, zum nächsten Schritt.

00:15:33.880 --> 00:15:37.280
 Verrückt? Das wusste ich ja auch nicht.

00:15:37.280 --> 00:15:38.060
 Also es ist, äh.

00:15:38.320 --> 00:15:41.880
 Ich kann trotzdem händisch, äh, kann ich andere Werte eingeben.

00:15:41.880 --> 00:15:45.520
 Ich weiß nicht, was dann passieren würde, wenn ich das jetzt noch mit Validation irgendwie mache.

00:15:45.520 --> 00:15:46.600
 Müsste man mal ausprobieren.

00:15:46.600 --> 00:15:48.240
 Ähm, genau.

00:15:48.240 --> 00:15:52.200
 Aber es ist schon mal so als, als grobe Hilfe, dass ich nicht auf die Idee komme, vielleicht was anderes einzugeben.

00:15:52.200 --> 00:15:53.540
 Ist doch schon mal ganz cool.

00:15:53.540 --> 00:15:57.040
 Ja, und alles nativ im Browser bin ich ja immer.

00:15:57.040 --> 00:15:57.380
 Genau.

00:15:57.380 --> 00:15:59.280
 Großer Fan von.

00:15:59.280 --> 00:16:01.100
 Coole Sache.

00:16:01.100 --> 00:16:04.760
 Das hast du einfach, das hast du einfach durch, durch Probieren rausgefunden.

00:16:04.760 --> 00:16:05.300
 Genau.

00:16:05.300 --> 00:16:10.560
 Also ich hab dann einfach, ich hab dann gedacht, ach der Moritz hatte das doch mit dieser Step-List, mit diesen Data-List-Gedöns.

00:16:10.560 --> 00:16:17.740
 Ähm, das hab ich an sich auch schon mal versucht, äh, benutzt für, für so, ähm, Suchvorschläge quasi, ne?

00:16:17.740 --> 00:16:21.760
 Also dass du was eingibst und dann macht's eine Data-List, äh, wo du dann unten auswählen kannst.

00:16:21.760 --> 00:16:27.320
 Und, ähm, aber mit den Steps, ob das bei, bei Input, äh, Type-Number funktioniert, das wusste ich nicht.

00:16:27.320 --> 00:16:28.080
 Einfach ausprobiert.

00:16:28.180 --> 00:16:32.520
 Ich hab also deine Demo genommen, hab einfach, äh, äh, äh, äh, den, den Range-Lider ersetzt durch Type-Number.

00:16:32.520 --> 00:16:34.580
 Und, ähm, siehe da.

00:16:34.580 --> 00:16:36.120
 Hast du das in verschiedenen Browsern getestet?

00:16:36.120 --> 00:16:42.740
 Ähm, ich hab es, ich weiß gar nicht, ob ich es von Firefox dann auch getestet hab, also, äh, Chromium auf jeden Fall.

00:16:42.740 --> 00:16:47.180
 Äh, Firefox kann ich auch mal kurz gucken. Äh, Firefox macht's auch.

00:16:47.180 --> 00:16:47.580
 Ja.

00:16:47.580 --> 00:16:48.760
 Ah, ja cool.

00:16:48.760 --> 00:16:49.960
 Das, ah, wieder.

00:16:50.520 --> 00:17:08.320
 Und, und das zufällig finden, das find ich ja am allergeilsten eigentlich. Also nicht irgendwie jetzt in der Doku irgendwo so, na, probier mal aus, vielleicht geht das ja so. Oh, es geht so. Äh, das ist dann meiner Meinung nach, ähm, ein gut geschriebene, ich weiß gar nicht, ist das eine gut geschriebene Spezifikation oder auf jeden Fall eine gute Umsetzung?

00:17:08.320 --> 00:17:18.860
 Ja, ich weiß auch nicht. Also, klar, man könnte denken, ja gut, wenn es, äh, generell für Input-Elemente funktioniert, aber ich find halt, Number ist halt schon immer so ein spezielles Ding, ne, mit diesem hoch- und runterklicken und, äh, hab mich überrascht auch positiv, dass das funktioniert.

00:17:18.860 --> 00:17:25.420
 Ja, dieses hoch- und runterklicken, das hat sich mir noch nicht erschlossen, wofür man das wirklich braucht. Ähm, da können wir ja vielleicht nochmal überlegen, wofür das ist.

00:17:25.420 --> 00:17:38.300
 Ja, zumal das nicht mal mit der Tastatur, wenn ich diese Step-Liste da jetzt hab, dann spring ich nur in diese Liste, wo nur ein Element drin ist, also, nicht mal, nicht mal mit hoch- und runter kann ich da jetzt irgendwie das triggern. Ja, keine Ahnung, warum man das, äh, warum man das benutzt.

00:17:38.320 --> 00:17:52.140
 Ja, generell, ja, dieses hoch- runter, das ist, äh, vielleicht ist es, aber wobei, ich kann auch diese Pfeile, die lassen sich auch nicht antappen. Das heißt, ich kann auch mit einem Screenreader oder so, kann ich die gar nicht, kann ich gar nicht bedienen mit Eingabehilfen.

00:17:52.140 --> 00:18:00.080
 Ich kann aber mit, ähm, wenn ich mit, wenn ich mit, wenn ich reintappe, wenn ich das Element fokussiert habe, kann ich auch mit Pfeiltasten hoch und runter die Schritte auswenden.

00:18:00.080 --> 00:18:01.600
 Also, in Firefox geht es nicht.

00:18:01.600 --> 00:18:05.540
 Äh, ich hab's jetzt gerade in Chrome, da geht's, glaube ich.

00:18:05.540 --> 00:18:07.940
 Ah ja, in Chrome funktioniert das so, wie man sich's vorstellt, ja.

00:18:08.860 --> 00:18:10.940
 Naja, wir werden's, äh, wahrscheinlich nie erfahren.

00:18:10.940 --> 00:18:13.280
 Aber es funktioniert nicht.

00:18:13.280 --> 00:18:14.760
 Wahrscheinlich aus Versehen implementiert.

00:18:14.760 --> 00:18:16.880
 Genau, es sollte gar nicht funktionieren, aber, ja.

00:18:16.880 --> 00:18:19.260
 Jo.

00:18:19.260 --> 00:18:25.660
 Ja, ähm, dann noch, äh, kleine, kleine Rückschau, ähm, auch nochmal zu Twitter.

00:18:25.660 --> 00:18:30.800
 Wir haben eine kleine Umfrage gemacht, weil wir, äh, in der letzten, in der letzten Sendung, im letzten Stream?

00:18:30.800 --> 00:18:31.640
 Im letzten Stream haben wir es gesagt.

00:18:31.640 --> 00:18:36.480
 Im Stream, glaube ich, äh, angekündigt haben, dass wir auf die nächste Beyond-Tellerand-Konferenz gehen werden.

00:18:36.480 --> 00:18:40.060
 So, also Konstantin und ich, so wir beide, äh, so als Podcast.

00:18:40.060 --> 00:18:49.880
 Und dann haben wir uns überlegt, ja, wenn wir da eh schon zusammen hingehen, äh, und dann noch irgendwie die, die passenden T-Shirts anhaben, sodass ihr uns da auch finden könnt, ähm, dann könnte man ja da auch noch was machen, irgendwie so.

00:18:50.020 --> 00:18:57.880
 Und dann, äh, und dann, äh, und dann haben wir einfach mal eine Umfrage gemacht bei Twitter und, äh, mal gefragt, so ein paar Sachen in den Raum geworfen, was wir denn da machen sollen.

00:18:57.880 --> 00:19:03.140
 Wir haben mal geschrieben, Shirts mitbringen, HörerInnen treffen, Livestream vor Ort oder Podcast aufnehmen.

00:19:03.700 --> 00:19:08.200
 Ähm, und gewonnen hat auf jeden Fall, ich weiß nicht, ist es komisch, komisch sowas gegeneinander antreten zu lassen.

00:19:08.200 --> 00:19:13.500
 Also man sieht auch schon an den Ergebnissen, ähm, dass die meisten Sachen davon irgendwie populär sind.

00:19:13.500 --> 00:19:18.000
 Die Abstände sind nicht so groß, weil HörerInnen, HörerInnen treffen hat gewonnen mit 33,3 Prozent.

00:19:18.000 --> 00:19:23.480
 Ähm, aber danach kommt schon Podcast aufnehmen mit 28,6, Livestream vor Ort 23,8.

00:19:23.480 --> 00:19:25.680
 Und gut, Shirts mitbringen, die Shirts sind irgendwie nicht so beliebt.

00:19:26.160 --> 00:19:26.740
 Nee, nee.

00:19:26.740 --> 00:19:31.000
 Keine Ahnung, ähm, dann bringen wir sie, ähm, aber vielleicht sind ja alle Sachen einfach beliebter, ne, also.

00:19:31.000 --> 00:19:40.500
 Wir bringen einfach mal, ja, ich find's auch, ja, bei den Umfragen lässt man natürlich Sachen gegeneinander antreten, aber HörerInnen treffen, das wäre auch das jetzt gewesen, wo ich gesagt hätte, das, äh, bietet sich total an.

00:19:40.500 --> 00:19:41.880
 Das kann man auf jeden Fall machen, klar.

00:19:41.880 --> 00:19:44.620
 Hätten wir auch, wenn es nicht gewonnen, hätte wahrscheinlich gemacht, ne, also.

00:19:44.620 --> 00:19:45.300
 Hätten wir, ja, wahrscheinlich.

00:19:45.300 --> 00:19:47.900
 Wir sagen ja nicht so, ach so, äh, nee, gib bitte woanders hin.

00:19:47.900 --> 00:19:50.020
 Wir wollen jetzt nicht mit dir sprechen.

00:19:50.020 --> 00:19:55.880
 Ja, wir haben ja auch geschrieben, äh, wenn es ein Leben- und Wunschkonzert wäre, stand in dem Tweet, ähm, ähm, äh,

00:19:56.160 --> 00:20:00.800
 und wir würden uns natürlich offen halten, einfach was komplett anderes zu machen, als da das Ergebnis rauskommt.

00:20:00.800 --> 00:20:08.960
 Aber, ähm, nee, wir wollten einfach mal so, so, äh, eure Meinung einfangen, das haben wir, haben wir getan, ähm, und, äh, das werden wir auf jeden Fall dann machen.

00:20:08.960 --> 00:20:12.420
 Also, wir werden das noch rechtzeitig ankündigen, das ist ja erst im April, glaube ich.

00:20:12.420 --> 00:20:13.440
 Das machen wir auch einfach alles.

00:20:13.440 --> 00:20:16.340
 Das machen wir auch einfach alles, genau.

00:20:16.340 --> 00:20:20.920
 Wir treffen uns mit euch dort und, äh, machen einen Livestream vor Ort.

00:20:20.920 --> 00:20:26.140
 Ich glaube, das Komplizierteste, zumindest, wenn wir unserer Qualität treu bleiben wollen, ist Podcast.

00:20:26.160 --> 00:20:26.900
 aufnehmen.

00:20:26.900 --> 00:20:30.680
 Ähm, ja, da müssten wir hier die Interface und so weiter mitschalten.

00:20:30.680 --> 00:20:33.240
 Da muss man, da müssten wir ein bisschen mehr Equipment mitnehmen.

00:20:33.240 --> 00:20:36.100
 Äh, Livestream würde ich knallhart einfach mit dem Handy machen.

00:20:36.100 --> 00:20:36.460
 Ja, ja.

00:20:36.460 --> 00:20:42.480
 Äh, mit, mit Twitch irgendwie, einfach dann so, äh, mit, mit Selfiesticks, sowas besitze ich tatsächlich.

00:20:42.480 --> 00:20:44.440
 Ja, ohne, ohne Overlay und was weiß ich.

00:20:44.440 --> 00:20:47.780
 Ohne, ohne alles einfach, äh, würde ich einfach mit dem Handy live gehen.

00:20:47.780 --> 00:20:50.100
 Das ist, braucht man eigentlich nur eine stabile Internetverbindung.

00:20:50.100 --> 00:20:50.440
 Ja.

00:20:50.840 --> 00:20:52.340
 Ähm, genau.

00:20:52.340 --> 00:20:54.280
 Und Shirts mitbringen, ich glaube, das machen wir ja trotzdem.

00:20:54.280 --> 00:20:56.260
 Äh, da, da werden wir noch eine kleine Stellung nehmen.

00:20:56.260 --> 00:20:56.620
 Eine oder zwei.

00:20:56.620 --> 00:21:00.560
 Genau, und die werden dann, die werden dann höchst bietend versteigert.

00:21:00.560 --> 00:21:00.800
 Genau.

00:21:00.800 --> 00:21:01.240
 Oder so.

00:21:01.240 --> 00:21:05.920
 Wahrscheinlich, wahrscheinlich verkaufen sie sie dann für fünf Euro, wenn keiner mehr bietet.

00:21:05.920 --> 00:21:09.120
 Gut.

00:21:09.120 --> 00:21:11.240
 Dabei muss ich sagen, vielleicht bringen wir auch Hoodies mit.

00:21:11.240 --> 00:21:12.340
 Unsere Hoodies sind sehr gut.

00:21:12.340 --> 00:21:12.600
 Ja.

00:21:12.600 --> 00:21:15.620
 Also, ich werde mir auch demnächst nochmal, ich schicke dir, das wollte ich eigentlich

00:21:15.620 --> 00:21:18.880
 noch machen, äh, ich brauche noch ein paar T-Shirts und ein paar Hoodies für mich.

00:21:18.880 --> 00:21:19.900
 Mhm.

00:21:19.900 --> 00:21:22.420
 Schreibst du ja auch, vielleicht bestellst du ja auch du.

00:21:22.420 --> 00:21:23.600
 Wer weiß.

00:21:23.600 --> 00:21:26.800
 Ja, ach so, kann ich natürlich auch machen, ja.

00:21:26.800 --> 00:21:27.860
 Müssen wir mal gucken, genau.

00:21:27.860 --> 00:21:29.900
 Okay, das war das.

00:21:29.900 --> 00:21:35.840
 Ähm, und dann, das ist jetzt was, wo ich nicht genau weiß, inwieweit ich darüber, ich sag's

00:21:35.840 --> 00:21:39.820
 jetzt mal und dann sagst du mir hinterher, ob du glaubst, dass das eventuell sicherheitsrelevant

00:21:39.820 --> 00:21:43.500
 ist und wenn du sagst, es ist sicherheitsrelevant aus deiner Sicht, dann schneiden wir es raus.

00:21:43.500 --> 00:21:43.980
 Okay.

00:21:43.980 --> 00:21:45.020
 Okay.

00:21:45.020 --> 00:21:51.180
 Also, ich hab, äh, vorhin, äh, eine kleine Demo noch gebaut für das Thema, ähm, auf CodePen

00:21:51.180 --> 00:21:58.100
 und, äh, dabei eine Text-Area eingefügt und zwar ohne schließendes Text-Area-Tag.

00:21:58.100 --> 00:22:03.580
 Und interessanterweise, ich, äh, das ist der Bug, den ich dann vielleicht auch mal melden

00:22:03.580 --> 00:22:07.300
 möchte, ist, wenn man das tut, steht in der Text-Area dann aber plötzlich was drin,

00:22:07.640 --> 00:22:11.980
 nämlich Code, der danach kommt und ich weiß nicht genau, ob das, das ist normalerweise

00:22:11.980 --> 00:22:12.600
 nicht so, oder?

00:22:12.600 --> 00:22:14.880
 Mh, naja.

00:22:14.880 --> 00:22:16.320
 Weißt du, kannst du dir ...

00:22:16.320 --> 00:22:20.180
 Also, alles, was danach kommt, ist, ist, ist, ist ja quasi Text-Area.

00:22:20.180 --> 00:22:24.260
 Alles, was danach kommt, ist Text in der Text-Area, dann, dann lieg ich, dann lieg ich vielleicht

00:22:24.260 --> 00:22:26.500
 falsch und es ist einfach komplett normales Verhalten.

00:22:26.500 --> 00:22:32.460
 Dann vergisst du, was ich gesagt habe, ich, ich behaupte das Gegenteil.

00:22:32.460 --> 00:22:33.560
 Ähm, da ist halt die Frage ...

00:22:33.560 --> 00:22:37.900
 Aber wenn da jetzt HTML wirklich, also öffnende und schließende HTML-Elemente sind ...

00:22:37.900 --> 00:22:42.240
 Also, ich mein, an den Quelltext kommst du ja eh ran, da ist ja jetzt nix drin, was

00:22:42.240 --> 00:22:45.360
 du, was du nicht sonst sehen würdest, ne?

00:22:45.360 --> 00:22:51.280
 Ja, ich, man weiß ja nie, kann ich da dann irgendwie ... Ich weiß nicht, was man da wird.

00:22:51.280 --> 00:22:56.140
 Du hast einfach den nachfolgenden Inhalt von, von der Seite, den siehst du dann.

00:22:56.140 --> 00:22:56.860
 Genau.

00:22:56.860 --> 00:22:59.820
 Du hast in dem Fall einfach noch ein Script-Tag und schließender Body und schließender HTML.

00:22:59.820 --> 00:23:00.320
 Genau.

00:23:00.320 --> 00:23:06.040
 Und da kommst du ja aber auch dran, wenn du, wenn du einfach dir mit Elements-Inspector

00:23:06.040 --> 00:23:07.200
 in den Dev-Tools die Seite anschaust.

00:23:07.200 --> 00:23:10.460
 Mich hat's nur, mich hat's gewundert, dass das passiert.

00:23:10.460 --> 00:23:14.900
 Und warte mal, ich mach jetzt mal hier noch den Live-View und guck, ob es da auch passiert.

00:23:14.900 --> 00:23:17.660
 Tatsächlich. Das scheint, ist das normales Verhalten.

00:23:17.660 --> 00:23:24.260
 Ich hätte gedacht, dass der Browser da ein bisschen mehr failsafe ist und sagt, naja, da kommt jetzt irgendwie

00:23:24.260 --> 00:23:29.760
 HTML, das soll wahrscheinlich nicht da drin sein, jetzt in der Text-Area, aber kann natürlich auch sein, dass man HTML die Text-Area reinschreibt.

00:23:29.760 --> 00:23:33.000
 Nee, wahrscheinlich ist es einfach ganz normales Verhalten, was ich so noch nie beobachtet habe.

00:23:33.000 --> 00:23:33.860
 Ja.

00:23:33.860 --> 00:23:34.360
 Ja.

00:23:34.360 --> 00:23:37.160
 Ja, okay, dann, ähm, dann lassen wir es drin.

00:23:37.160 --> 00:23:37.940
 Ja.

00:23:37.940 --> 00:23:38.440
 Richtig.

00:23:38.440 --> 00:23:48.320
 Dann hab ich einfach nur was, dann hab ich einfach nur ganz stinknormales Verhalten gefunden, was, äh, ihr wahrscheinlich alle schon längst kennt und denkt, sag mal, was labert ihr denn da jetzt schon?

00:23:48.320 --> 00:23:51.260
 Ich glaube, da hat sich einfach noch niemand so wirklich Gedanken drüber gemacht.

00:23:51.260 --> 00:23:53.700
 Also,

00:23:53.700 --> 00:23:55.400
 Ja.

00:23:55.400 --> 00:23:56.960
 Ja, okay.

00:23:56.960 --> 00:24:11.100
 Das heißt, man muss auch, man muss HTML theoretisch gar nicht, äh, also das sollte man natürlich trotzdem tun, aber man muss das gar nicht, ähm, Entity encoden, um es in der Text-Area drin zu haben, sondern solange keine schließende Text-Area drin ist, macht es anscheinend alles automatisch.

00:24:11.100 --> 00:24:12.460
 Auch gut zu wissen.

00:24:14.200 --> 00:24:17.080
 Ja, wer weiß, wofür, wofür das noch ein interessanter Hack sein könnte.

00:24:17.080 --> 00:24:27.820
 Wenn du irgendwo Leute verwirren willst, schreibst du einfach am Anfang der Seite eine öffnende Text-Area und dann, ähm, der Rest ist dann, ja, keine Ahnung, muss man mal überlegen.

00:24:27.900 --> 00:24:29.720
 Man weiß ja nie so genau, wofür das noch gut sein könnte.

00:24:29.740 --> 00:24:31.060
 Irgendwas kriegen wir damit kaputt gemacht.

00:24:31.060 --> 00:24:32.840
 Ja, das schaffen wir schon.

00:24:34.400 --> 00:24:34.900
 Sehr gut.

00:24:34.900 --> 00:24:39.520
 Okay, dann sind wir schon durch mit der Retro.

00:24:39.520 --> 00:24:40.020
 Ja.

00:24:40.020 --> 00:24:42.040
 Nicht mal eine halbe Stunde, Mensch, sind wir heute fix.

00:24:42.580 --> 00:24:45.400
 Ja, ich hab schon überlegt, wir müssen heute schnell, wir müssen heute schnell machen, zack, zack.

00:24:45.400 --> 00:24:46.720
 Ja, wir sind spät dran, da müssen wir schon.

00:24:46.720 --> 00:24:48.080
 Aber wir haben, wir haben auch noch ein bisschen was.

00:24:48.080 --> 00:24:49.360
 Ja, ja, ja, klar, wir haben ja noch ein Thema.

00:24:49.360 --> 00:24:53.560
 Jetzt kommt erst noch eine Property, aber die wird auch, auch schnell, aber, äh, macht ja nix.

00:24:53.560 --> 00:24:57.220
 Die Property der Woche.

00:24:57.220 --> 00:25:02.100
 Dann hab ich auch weniger zu schneiden, das ist schön.

00:25:02.100 --> 00:25:10.460
 Äh, ja, die Property der Woche ist heute ein Event, ähm, und zwar das Input-Event.

00:25:10.820 --> 00:25:24.220
 Äh, wahrscheinlich kennen das schon viele, aber ich bin jetzt gerade erst die Tage wieder, äh, irgendwo auf einer Seite auf den Fall gestoßen, wo ich, ähm, was in der Text-Area eingeben musste und es hat nicht auf das, äh, auf Paste reagiert.

00:25:24.220 --> 00:25:36.580
 Also es hat immer nur reagiert, wenn ich tatsächlich, also und nicht nur das, sondern es hat nicht mal irgendwie auf Keydown oder so reagiert, sondern wirklich, ich musste das eingeben und dann den Fokus aus der Text-Area nehmen, damit sich das geändert hat.

00:25:36.580 --> 00:25:39.740
 Ich weiß nicht mehr, was es war, irgendwie so ein Sicherheits-Code eingeben oder was, ja.

00:25:39.740 --> 00:25:40.540
 Ähm.

00:25:40.820 --> 00:25:45.000
 Und dann musste ich erst echt, ich dachte so, okay, jetzt hab ich's eingegeben, was, was ist jetzt? Geht's jetzt weiter?

00:25:45.000 --> 00:25:52.340
 Und dann hab ich den Fokus aus der, aus dem Input genommen und zack, dann, dann, dann, dann hat's erst getriggert und es hat ja einfach auf das Change-Event, äh, reagiert.

00:25:53.060 --> 00:26:03.040
 Und, ähm, deswegen, vielleicht kennen das ja tatsächlich doch manche noch nicht, ähm, das Input-Event, ähm, also einfach Ad, äh, also ein Input und dann Add-Event-Listener und, äh, Input und ein Callback.

00:26:03.700 --> 00:26:24.980
 Und, ähm, ähm, das reagiert auf, direkt auf die Eingabe, sobald ich Buchstaben eintippe und aber eben auch auf Copy, Paste und auch Cut, weil früher, bevor es das gab, haben dann Leute dann, okay, ja, wenn C gedrückt wird und der, äh, äh, Steuerungs-Key-Modifier ist, ja, dann, dann, oder, äh, mit V und Steuerungs-Modifier, äh, dann wurde was eingefügt und dann gucke danach.

00:26:25.420 --> 00:26:45.580
 Dann haben die aber oft vergessen, dann Steuerung X zu reagieren und du hast was ausgeschnitten und dann hat es halt nicht das getriggert, dass, dass sich das geändert hat, äh, obwohl es das eigentlich halt logisch hätte müssen, ähm, mit dem Input-Event ist das alles in einem Rutsch, äh, ich krieg jede Änderung in dem Feld mit, live, auch ohne Blur, ähm, und Copy, Paste, Cut, funktioniert alles.

00:26:45.580 --> 00:26:55.280
 Ich erinnere mich noch an Zeiten, wo es das noch nicht gab, wo man eben diese komischen Workarounds noch bauen musste, ähm, aber seit's das gibt, gibt's eigentlich aus meiner Sicht so gut wie keinen Grund mehr,

00:26:55.280 --> 00:26:57.320
 etwas anderes zu verwenden bei Eingabefeldern.

00:26:57.320 --> 00:27:25.000
 Richtig, das ist ja auch so weit verbreitet, also ich hab jetzt keine News, hab ich jetzt gar nicht dazu, äh, ich hab's, ich hab's grad mal aufgemacht, also, das ist, das gibt's schon unglaublich lange, äh, also hier, ähm, Chrome 15, äh, interessanterweise, Safari 5.1, Safari 6 nicht, nee, Support Unknown, okay, ah, das ist, okay, grau ist unknown, also, Chrome 4 bis 14 ist offenbar auch unknown, ähm, aber es war zum Beispiel in Firefox,

00:27:25.140 --> 00:27:47.000
 Äh, Firefox 3 schon drin, aber da gab's noch Probleme mit bestimmten Edge-Cases, aber in Firefox 3 gab's das schon, das ist schon wirklich lange her, das ist kein Firefox 3, 2000, warte mal, 2008, 2008, 2008 Release, Firefox 3, also, könnt ihr euch, äh, überlegen.

00:27:49.000 --> 00:27:53.840
 Kann man, kann man nutzen, gibt eigentlich keine Ausrede, ähm, außer man will nicht bei jedem Keypress das haben.

00:27:53.840 --> 00:28:18.140
 Und, und da, und da wird's jetzt wieder interessant, damit, damit die, ähm, die jüngeren Leute unter euch, die, äh, vielleicht diese alte, diese alte Browser-War-Geschichte nicht mitgekriegt haben, ähm, also, wenn ich sag, Firefox 3 hatte das eingebaut, der 2008 released wurde, im Internet Explorer, war das erst richtig drin, äh, mit richtigem Support ab Version 10, 2012.

00:28:18.140 --> 00:28:19.120
 Ha, krass.

00:28:19.120 --> 00:28:33.100
 Beziehungsweise, es gab's schon irgendwie in Kaputt mit Partial Support in IE9 2011, was aber auch drei Jahre nach Firefox ist. Ähm, ja, das muss man sich, das muss man sich mal geben.

00:28:33.100 --> 00:29:00.400
 Ja, wir haben jetzt Evergreen-Browser, eigentlich alle, ich weiß nicht, ob ich jetzt das bei Safari so nennen würde, aber der wird auch deutlich häufiger geupdatet mittlerweile. Ähm, zumindest auf dem Mac wird der relativ häufig geupdatet. Ich glaube, auf den iOS-Geräten ist er immer noch ans System gekoppelt. Also, da, da muss ein OS-Update kommen, dass der, äh, Browser auch ein Update kriegt. Das ist noch eigentlich das, das Langsamste. Alle anderen sind ja mittlerweile sehr schnell geworden.

00:29:01.080 --> 00:29:12.480
 Ja, hoffentlich ändert sich da auch mal was dran. Wäre schon schön, wenn das da auch ein bisschen schneller ging. Weil es ist ja doch so, ne, wir wollen jetzt nicht sagen, es ist der neue IE, aber es ist halt schon immer so, naja, gut, aber auf Safari, auf Mobil müssen wir halt noch warten.

00:29:12.580 --> 00:29:18.520
 Ja, also, aber bei Input müsst ihr nicht warten, das könnt ihr einfach überall einsetzen.

00:29:18.520 --> 00:29:27.640
 Genau. Und da fällt mir gerade auf, das ist, äh, eigentlich auch eine gute Überleitung zu unserem Thema, so Dinge, die man früher anders und viel komplizierter gemacht hat und die man jetzt ganz einfach machen kann, ne?

00:29:27.640 --> 00:29:28.840
 Ja. Ist doch echt ein guter Übergang.

00:29:29.700 --> 00:29:30.720
 Dann kommen wir da mit.

00:29:30.720 --> 00:29:35.520
 Hier ist WWS IV mit dem Tagesthema.

00:29:35.520 --> 00:29:47.060
 Ja, war wieder grammatikalisch. Also, ich weiß auch gar nicht, was wir dabei gedacht haben. Also, selbst wenn es nur mit das Tagesthema, hätte auch mein Satz keinen Sinn gemacht.

00:29:47.260 --> 00:29:56.480
 Aber gut. Es ist, aber, aber das, das Jingle oder den Jingle, weiß gar nicht genau, ähm, haben wir schon lange nicht mehr gehört. Ähm, von daher ist das okay.

00:29:56.480 --> 00:30:01.420
 Ja, weil wir immer dann direkt die, die Property zum, oder die Retro zum, zum, zum Tagesthema gemacht haben. Das stimmt.

00:30:01.420 --> 00:30:09.260
 Genau. So, heute gibt's wieder ein Thema. Ähm, und ich hab ja vorhin schon gesagt, es geht um Stasi und Stalking und Observation.

00:30:09.260 --> 00:30:12.800
 Und dann sind wir halt, da sind wir eigentlich dann schon.

00:30:12.800 --> 00:30:36.860
 Genau. Es geht um, äh, Observer im, im Allgemeinen. Und zwar um den Mutation-Observer, den Resize-Observer und den Intersection-Observer. Und dann gibt's der Vollständigkeit halber, hab ich noch aufgeschrieben, einen Performance-Observer und Reporting-Observer. Äh, da kann man sich dann irgendwie aus den, ich meine, dass damit die Dev-Tools gemeint sind, ne? Wenn diese Performance-Geschichte da, sobald's da, äh, quasi neue Daten gibt, dann kann man sich die irgendwie abgreifen.

00:30:36.860 --> 00:30:37.620
 Hm.

00:30:37.960 --> 00:30:47.760
 Aber das, das werden wir heute nicht, äh, nicht besprechen. Ähm, das war nur der Vollständigkeit halber, wir machen also, äh, den Mutation-Observer, Resize-Observer und Intersection-Observer, da sprechen wir heute drüber.

00:30:47.760 --> 00:30:59.560
 Und, äh, vielleicht, zumindest ist jetzt so mein Gefühl, ich weiß, du hast, äh, du hast wahrscheinlich wieder mehr vorbereitet als ich, ich hab mir Mühe gegeben, aber ich hab mir die MDN-Artikel dazu angefangen durchzulesen.

00:30:59.560 --> 00:31:07.320
 Und das sag ich extra deswegen, weil Resize-Observer und, äh, Mutation-Observer sind relativ kurze Artikel.

00:31:07.320 --> 00:31:07.820
 Mhm.

00:31:07.820 --> 00:31:13.500
 Aber der Intersection-Observer, das, der hat's in sich. Ich glaub, da könnte man eine komplett eigene Sendung dazu machen.

00:31:13.500 --> 00:31:14.340
 Das stimmt, ja.

00:31:14.340 --> 00:31:18.560
 Ähm, da ist, äh, da gibt's einiges, ich glaube, da werden wir, wir werden nicht mit allem ...

00:31:18.560 --> 00:31:19.760
 Wir werden da an der Oberfläche kratzen erst mal.

00:31:19.760 --> 00:31:20.500
 Genau, wir kratzen heute ...

00:31:20.500 --> 00:31:22.880
 Vielleicht schaffen wir's irgendwann mal, äh, noch ein bisschen tiefer einzusteigen.

00:31:22.880 --> 00:31:29.480
 Genau, wir kratzen heute, das wollte ich nur vorweg schicken, äh, wir kratzen da heute eher so ein bisschen an der Oberfläche, was ist denn das überhaupt, was kann man damit machen?

00:31:29.480 --> 00:31:35.220
 Ähm, und, und gehen jetzt nicht in, in jede, jede erdenkliche Tiefe rein, sondern, ja.

00:31:35.220 --> 00:31:38.480
 Aber insgesamt kann man sagen, äh, sind sie alle relativ ähnlich.

00:31:38.480 --> 00:31:51.260
 Also vom Grund, Grundsystem her, ähm, registriere ich einmal so einen Observer oder beziehungsweise erstelle eine neue Instanz davon, also New Intersection-Observer, New, äh, Mutation-Observer, New Resize-Observer.

00:31:51.260 --> 00:31:56.920
 Ähm, übergebe dann Callback als erstes Argument und, äh, Optionen als zweites Argument.

00:31:56.920 --> 00:32:13.700
 Und dann hab ich einmal diesen Observer, der ist noch gar nicht irgendwo dran gebunden, jetzt an irgendwelche Elemente, die ich, die ich observieren will, äh, sondern ich kann dann wiederum sagen, äh, dieser Observer soll jetzt, ähm, Punkt Observe als Methode, äh, und dann übergebe ich das, das Element, das ich observen will.

00:32:13.700 --> 00:32:18.840
 Und ich kann das auch jederzeit wieder unobserven, das Element, oder ich kann den komplett, ähm, ähm, äh, destroyen.

00:32:18.840 --> 00:32:23.420
 Weiß gar nicht, das Destroyer war, glaub ich, äh, äh, an, äh, Disconnect, Disconnect ist dann die Methode.

00:32:23.420 --> 00:32:25.260
 Da werden dann alle, äh, aufgelöst.

00:32:25.960 --> 00:32:32.200
 Und, ähm, ähm, ist so ein bisschen ähnlich wie mit diesen Audio-Notes und sowas, die ich, die ich immer wieder, ähm, neu verbinden kann und so.

00:32:32.320 --> 00:32:42.680
 Also, das Konzept gefällt mir, äh, eigentlich ganz gut, dass ich sagen kann, ich, äh, aus Performance-Gründen stoppe ich zwischendrin was und lass es dann wieder weiterlaufen und so, ähm, ist eine, ist eine gute Geschichte.

00:32:42.680 --> 00:32:54.040
 Und generell Performance ist auch so ein, so ein Thema, warum diese Observer eigentlich notwendig sind, ähm, weil früher hat man halt einfach, äh, irgendwie aufs, aufs Resize-Event gehört und dann.

00:32:54.320 --> 00:32:56.300
 Genau, wir haben ja noch gar nicht gesagt, was sie eigentlich tun.

00:32:56.300 --> 00:33:06.360
 Genau, wir haben noch gar nicht gesagt, was sie tun, ja, aber jedenfalls noch als Übergang, ähm, es war früher komplizierter und wir haben das alles im Main-Thread gemacht und haben, äh, haben irgendwie Set-Intervall oder so gemacht, ja.

00:33:06.360 --> 00:33:13.880
 Vielleicht später, wenn wir dann, äh, Schlüsse gehabt wollten, dann mit, ähm, äh, wie heißt's, ähm, Request-Animation-Frame.

00:33:13.880 --> 00:33:21.680
 Ähm, aber es lief halt alles im Main-Thread und es war langsam und es war nicht schön. Und jetzt gibt's diese Observer.

00:33:22.340 --> 00:33:37.960
 Ja, ich, äh, ich hatte das Thema irgendwann mal draufgeschrieben, weil ich, äh, drauf gestoßen bin, also mein, mein Use-Case war ganz konkret und, äh, ich muss dazu sagen, ich hab, ähm, mit Mutation Observer und, äh, Moment, ich, nee, der, der, den ich auf jeden Fall auf dem, auf dem Tablett hatte, war Resize Observer.

00:33:37.960 --> 00:33:38.660
 Mhm.

00:33:38.660 --> 00:33:51.560
 Ähm, das war der mit dem, wo ich draufgekommen bin, hey, da gibt's, stimmt, da gibt's ja sowas Neues und ich hab damit noch nie rumgespielt und dann hab ich tatsächlich mal, äh, eine Stelle gebraucht, äh, es an der Stelle gebraucht und dachte dann so, äh, okay, das ist ja eigentlich relativ easy.

00:33:51.560 --> 00:34:03.240
 Und ich muss dazu auch sagen, dass die, äh, die, das gilt eigentlich für fast alles in der MDN, die MDN-Demo-Codes sind meistens meiner Meinung nach viel komplizierter, als sie sein müssten.

00:34:03.480 --> 00:34:04.040
 Mhm.

00:34:04.040 --> 00:34:12.280
 Weil ich erwarte eigentlich von so einer Dokumentation ganz am Anfang, die erste Demo, das soll das minimalste Beispiel sein, was man machen kann.

00:34:12.280 --> 00:34:23.500
 Und meistens sind es relativ große, komplizierte Beispiele, also auch bei diesen Observern, wo ich so denke, das geht doch mit drei Zeilen, das ist die Essenz, wieso müsst ihr denn jetzt 27 machen?

00:34:23.700 --> 00:34:31.940
 Warum? Also, da sieht man doch dann gar nicht mehr, um was geht's jetzt eigentlich? Naja, wie auch immer. Also, ähm, ich weiß gar nicht, welche Reihenfolge Mutational Observer wolltest du zuerst?

00:34:31.940 --> 00:34:44.500
 Also, Mutational Observer, äh, observiert ein Element und ob sich darin etwas tut oder sich an Attributen von dem Element etwas ändert. Oder ob sich im DOM was ändert, so ganz grob gesagt.

00:34:44.700 --> 00:34:51.540
 Weil du sagst, oder das, äh, also ich kann, äh, mit den Einstellungen, mit der Config, die ich da übergebe, kann ich darauf Einfluss nehmen, was ich überhaupt berichtet haben will.

00:34:51.540 --> 00:35:06.880
 Also, standardmäßig, äh, ist da vieles deaktiviert und ich kann halt wirklich sagen, möchte ich erstmal, dass, ähm, dass ich auch, ähm, benachrichtigt werde, wenn sich Kind-Elemente irgendwie ändern, möchte ich benachrichtigt werden, wenn neue Kind-Elemente hinzukommen oder entfernt werden, möchte ich über diese Attributänderung, ähm, informiert werden.

00:35:07.000 --> 00:35:16.500
 Das heißt, da muss man vorher, also als ich das am Anfang mal ausprobieren wollte, hab ich ihn halt draufgeklatscht, hab das Config-Objekt eigentlich leer gelassen, ähm, und mich dann gewundert, warum ich irgendwie nichts zurückbekomme.

00:35:16.500 --> 00:35:25.760
 Und dann erstmal doch nochmal die Doku genau angeschaut und, naja, okay, ich muss das erst alles anfragen. Und das ist vielleicht am Anfang ein bisschen nervig, denkt man so, ähm, aber es dient halt der Performance.

00:35:25.960 --> 00:35:45.940
 Also, ich muss nicht Sachen, weil im Hintergrund läuft das ja ähnlich ab, wie wir das früher gemacht haben, sprich, es wird ständig geguckt, tut sich irgendwie was, ähm, beziehungsweise die Objekte geben halt dann wieder Rückmeldungen, wenn sie wissen, okay, ich werde observiert, ähm, und damit das nicht sein muss, damit möglichst wenig an Ressourcen verbraucht wird, ähm, gibt man eben frei, ich brauche die und die Informationen.

00:35:47.600 --> 00:35:53.580
 Genau, also, ich hab da eine, wir haben da noch mehrere Demos, die wir später zeigen, ähm, ich hab so eine kleine, kleine Demo bei Co-Kern gebaut.

00:35:53.580 --> 00:35:56.140
 Zeigen können wir sie nicht, aber ihr könnt sie anklicken.

00:35:56.140 --> 00:36:15.260
 Ihr könnt sie dann anklicken, genau. Ähm, ja, aber wollen wir, wollen wir auf jeden Fall noch drüber sprechen. Und, äh, wenn ich mich so was nähere oder nähern möchte, äh, dann, dann versuch ich immer so eine Minimaldemo zu bauen von dem, also wirklich, was ich vorhin gesagt habe, so ein Dreizeiler, der, äh, um, um die Essenz irgendwie abzubilden und irgendwie rauszufinden.

00:36:15.680 --> 00:36:26.100
 Ähm, wie gesagt, ich bin nicht mehr, ähm, am Ende zu Intersection Observer gekommen, weil das war tatsächlich dann, äh, zu kompliziert, um in der kurzen Vorbereitungszeit, die ich hier heute noch hatte, äh, das zu bauen, weil ihr wisst ja, AirTags.

00:36:26.100 --> 00:36:29.020
 Ähm, ähm, genau.

00:36:29.020 --> 00:36:41.100
 Aber, äh, der Mutation Observer, der geht ziemlich einfach und, äh, was ich da nämlich gemacht hab, und ich fand das jetzt in dem Fall, die, die, für mich war das die schnellste und einfachste Sache, tatsächlich das mit dem Attribut, ähm, zu schauen.

00:36:41.100 --> 00:36:50.840
 Und ich hab da, äh, einfach dann gesagt, naja, also in, in der Demo, die ihr da noch seht, äh, du kannst halt einen, äh, Knopf drücken und, äh, der fügt dem Body Tag dann eine Klasse hinzu.

00:36:50.840 --> 00:36:54.940
 Und dann kann ich, hab ich, geb ich unten aus, wie oft das denn jetzt schon sich verändert hat.

00:36:55.740 --> 00:37:01.460
 Äh, genau, kannst, jedes Mal, wenn du klickst, Observer, und dann, äh, kann man dann sehen, am Body, da kommt irgendwie eine Klasse dazu.

00:37:01.460 --> 00:37:04.280
 Genau. Ähm, so einfach kann's sein.

00:37:04.280 --> 00:37:09.180
 Aber dazu muss man dem, wie du eben grad schon gesagt hast, dann aber sagen, dass er Attribute angucken soll.

00:37:09.180 --> 00:37:18.860
 Da muss man, äh, die, ähm, als Parameter-Attributes, also Parameter-Objekt, äh, Config-Objekt, äh, Attributes-True, äh, übergeben, zum Beispiel, wenn man, wenn man die haben will.

00:37:18.860 --> 00:37:22.400
 Und wenn man das nicht macht, dann kriegst du davon gar nichts mit. Also ...

00:37:22.400 --> 00:37:29.180
 Und so ist es auch mit, äh, wenn ich jetzt wissen möchte, was war denn das vorherige, der vorherige Wert und was ist der neue Wert, krieg ich standardmäßig auch nicht.

00:37:29.180 --> 00:37:35.440
 Da muss ich dann, äh, Old Value heißt das, glaub ich, oder Old Values, ähm, angeben und das auf True setzen.

00:37:35.440 --> 00:37:43.040
 Und nur dann krieg ich eben auch in dem, was ich dann in dem Callback zurückbekomme, nur dann krieg ich eben auch, äh, das alte Value zurück.

00:37:43.040 --> 00:37:48.760
 Weil das ist ja auch wieder wie Sourcenverbrauch, ne, ich muss das, das muss ja irgendwo zwischengespeichert werden.

00:37:48.860 --> 00:37:51.800
 Weil in dem Moment, wo ich die Benachrichtigung bekomme, ist es ja eigentlich schon wieder weg.

00:37:51.800 --> 00:37:59.340
 Genau, hast du da nicht, warte mal, hast du Mutation-Observer, hast du keine Demo gemacht?

00:37:59.340 --> 00:38:14.380
 Äh, zum, nee, eine eigene Demo nicht. Also bei Mutation-Observer find ich's, fand ich's auch immer schwierig, da eine gescheite Demo zu finden, mit einem, irgendwie, also so Strip-Down, wie du gesagt hast, ne, möglichst wenig Kletterer-Datsch, aber trotzdem irgendwie so ein, so ein, so ein, so ein Real-Life-Anwendungsfall.

00:38:14.900 --> 00:38:16.460
 Na gut, das hab ich jetzt bei mir nicht.

00:38:16.460 --> 00:38:26.080
 Ne, klar, weil es waren viele so Demos, ähm, du öffnest die im Code-Pen, du klickst irgendwo drauf und es passiert nichts, weil du musst erst die Konsole aufmachen, in der Konsole lockt es dann, dass sich was verändert hat.

00:38:26.380 --> 00:38:36.620
 Und ich hätte gerne eine Demo gehabt, aber hatte auch nicht die Zeit, dann selber noch eine zu stricken, ähm, wo ich direkt auf der Seite einfach sehe, okay, da hat's jetzt was getan und, äh, warum wäre das nützlich, das jetzt zu wissen?

00:38:36.960 --> 00:38:55.920
 Also klar, ob irgendwo eine Klasse dazukommt, äh, ja, also wichtig ist, glaub ich, echt, kommen neue Elemente hinzu, wenn ich die dynamisch hinzufüge, weil dann, dann kann ich mir nämlich sparen, bei dem, bei dem, zum Beispiel jetzt Click-Event-Listener auf einem Button, der ein Element hinzufügt, da dann zu sagen, ah ja, und wenn das passiert, dann ruft das in das Callback auf.

00:38:55.920 --> 00:39:23.080
 Sondern ich kann einfach sagen, okay, ich hab hier eine Liste, ich hab ein UL-Element, ähm, und ich möchte jetzt nicht irgendwie auf den, auf den Button oder ich hab vielleicht sogar eine fertige Anwendung und möchte die erweitern und komm da gar nicht rein, dass ich irgendwie genau an die richtige Stelle des Click-Event-Listeners, äh, komme und müsste dann einen eigenen registrieren, dann kann ich auch einfach sagen, okay, wenn sich an diesem UL etwas ändert innen drin und da kommen Elemente hinzu, das werden welche entfernt, Beispiel To-Do-Liste oder so, ähm, dann nachrichtige mich und dann kann ich da drauf reagieren.

00:39:23.080 --> 00:39:28.300
 Genau, das Geile ist halt, du kannst, äh, auf asynchrone Dinge reagieren, wenn sie dann tatsächlich erst passiert sind.

00:39:28.300 --> 00:39:28.640
 Genau.

00:39:28.640 --> 00:39:30.940
 Und musst jetzt nicht früher dann irgendwie so denken, genau.

00:39:30.940 --> 00:39:37.020
 Vielleicht ist dann noch gar nicht das Element da, also müsste ich sagen, okay, warte, bis das Ajax-Request fertig ist, aber wann ist das dann fertig?

00:39:37.020 --> 00:39:52.580
 Äh, wenn ich jetzt irgendwie eine, eine, eine Library hab, ähm, und kein, kein Standard-Ajax, dann kann ich mich da vielleicht einklinken, ähm, gut, kann ich bei Fetch auch, aber ist kompliziert, ähm, und das kann ich mir einfach sparen, indem ich, wenn die einzige Information, die ich wissen will, ist, ist da jetzt was Neues hinzugekommen,

00:39:53.080 --> 00:39:54.420
 Perfekt, Mutation-Observer.

00:39:54.420 --> 00:40:08.660
 Genau, und, äh, wer, wer das lernen möchte, ähm, was ich da jetzt noch gefunden hab bei der Recherche, was ich eigentlich ziemlich gut fand, besser als die, äh, die MDN-Demos, die, die es da gab, ähm, es gibt einen schönen Artikel vom Smashing Magazine von 2019,

00:40:09.080 --> 00:40:27.080
 Getting to know the Mutation-Observer-AP, äh, die genau, äh, mit so einem, mit so einem Minimal-Demo beginnt, ähm, und das fand ich eigentlich irgendwie sehr nett und gut erklärt, und da hab ich mich ein bisschen besser abgeholt gefühlt als, äh, in der MDN an der Stelle, jetzt könnte man natürlich sagen, ja, dann editier halt die MDN, ja, das mach ich dann übermorgen.

00:40:27.080 --> 00:40:47.080
 Ja, okay, ich seh jetzt auch ein Artikel, das ist schön, das sind so, das wird immer komplexer, ne, am Anfang so ganz, genau, genau, am Anfang ist es, am Anfang ist es halt quasi, quasi, äh, der, der Dreizeiler oder so, oder der vierte, ne, das ist eigentlich tatsächlich ein Dreizeiler, ähm, und dann wird's immer ein bisschen komplizierter und so, was macht man denn damit, also das find ich tatsächlich einen ziemlich guten Artikel, äh, zu dem Thema, und dann kann die...

00:40:47.080 --> 00:40:53.780
 Okay, das sind auch, äh, Sachen dabei, die ich auf CodePen jetzt direkt nicht gefunden hatte, also Demos, okay, cool.

00:40:53.780 --> 00:40:56.160
 Und das verweist aber auch wieder auf CodePen, also...

00:40:56.160 --> 00:40:59.140
 Genau, genau, aber die Demos hatte ich nicht gefunden bei der Suche, ja.

00:40:59.140 --> 00:41:03.320
 Genau, auch das, äh, auch das, das mit dem Stop, äh, also mit dem, äh, das mit dem, äh...

00:41:03.320 --> 00:41:08.520
 Genau, das sind eben Schaden und das ist da auch drin, und da kann man sich mal angucken, wie das funktioniert.

00:41:08.520 --> 00:41:17.060
 So, als, als Info am Rande, weil wir es vorhin auch über IE hatten, äh, ist das der, der Mutation Observer ist der einzige von den dreien, der es schon in den IE 11 geschafft hatte, die anderen, äh,

00:41:17.060 --> 00:41:22.360
 kamen dann erst mit Edge, teilweise erst mit Edge Chromium dann, ähm, und gar nicht in Edge direkt.

00:41:22.360 --> 00:41:28.780
 Wobei generell, äh, glaub ich, dass man mittlerweile ziemlich safe sagen kann, dass man die benutzen kann, alle drei, ne?

00:41:28.780 --> 00:41:30.920
 Inzwischen ja, ja, würd ich sagen.

00:41:30.920 --> 00:41:33.020
 Das ist, ich guck grad noch mal, äh...

00:41:33.020 --> 00:41:37.020
 Ich glaub, waren alle so 95, 98 Prozent, äh...

00:41:37.020 --> 00:41:43.220
 Ja, ja, ja, 95, 98, tatsächlich ganz genau, zwischen 95 und 98, du hast es ganz genau gesagt.

00:41:43.220 --> 00:41:46.320
 Aber ich seh grad noch Intersection Observer Version 2.

00:41:46.780 --> 00:41:55.160
 Hab ich auch gesehen, ja, da gibt's noch mal irgendwie, äh, speziellere, ob, ob was überlagert ist, äh, und irgendwie Click-Tracking kann man da verhindern, und was weiß ich.

00:41:55.160 --> 00:41:59.820
 Aber das ist in Firefox, glaub ich, noch nicht, war das, ne? Safari und Firefox sind da, glaub ich, noch.

00:41:59.820 --> 00:42:03.240
 Ja, in Safari und Firefox ist das noch nicht in Chromium-Browsern.

00:42:03.240 --> 00:42:05.200
 Aber das hab ich mir so genau jetzt genau gar nicht angeschaut.

00:42:05.220 --> 00:42:13.060
 Nee, ich, tatsächlich, ich auch nicht, hab's jetzt grade auf Can I Use zum ersten Mal gesehen, weil das hat irgendwie 74 Prozent oder so, ähm, ja, okay.

00:42:13.760 --> 00:42:30.500
 Auf der Suche nach einem Real-Beispiel, äh, hab ich da noch was gefunden, äh, ein, ein Code-Pen, ein bisschen umfangreicher, ähm, das ist ein, ein Polyfill für das CSS, äh, für die Attribute-CSS-Funktion, also ATTR, Klammer auf, Klammer zu.

00:42:30.500 --> 00:42:42.400
 Ähm, die kann man ja nutzen im Content aktuell nur, also wenn ich ein Before- oder After-Pseudo-Element hab, dann kann ich ja im Content-Attribut nutzen und krieg dann wirklich den, von dem Data-Attribut, ähm, den, den Wert dann da rein.

00:42:42.400 --> 00:42:48.760
 Funktioniert aber aktuell nur dort und ist wohl schon so gedacht von der Speck her, ähm, dass das überall funktionieren soll.

00:42:48.760 --> 00:42:57.780
 Und da gibt es jetzt, äh, so ein Polyfill, ich muss allerdings gleich die Warnung dazu senden, ich will das nicht für den Produktiveinsatz empfehlen.

00:42:57.780 --> 00:43:03.160
 Also zum einen, äh, funktioniert das, wenn ich das richtig gesehen hab, nur mit, äh, Inline-Style-Blöcken.

00:43:03.160 --> 00:43:09.860
 Also erstmal ist das ja eigentlich schon gegen die Spezifikation, dass Style-Blöcke einfach mitten im, im Dokument sind, die sollten eigentlich im Head-Bereich sein.

00:43:09.860 --> 00:43:11.380
 Ah, darf man das nicht mittlerweile?

00:43:11.380 --> 00:43:18.520
 Äh, darf man, wird von allen Browsern eigentlich, glaub ich, auch richtig, äh, umgesetzt, aber es ist eigentlich nicht richtig.

00:43:18.520 --> 00:43:21.460
 Also eigentlich ist das Style-Element nicht, nicht erlaubt im Body-Bereich.

00:43:21.460 --> 00:43:25.960
 Es ist quasi so ein Living-Standard, dass das funktioniert.

00:43:25.960 --> 00:43:30.560
 Ich bin, also war mein letzter Stand zumindest, korrigiert mich gerne, wenn ich da falsch lieg.

00:43:30.560 --> 00:43:37.840
 Ja genau, wir sagen jetzt, wir behaupten das jetzt einfach und wir werden dann schon rausfinden, weil dann so ein paar Rage-Kommentare kommen, ihr habt doch keine Ahnung.

00:43:37.840 --> 00:43:43.020
 Äh, ich geb ja zu, ich mach das auch, also ich hab auch schon Style-Blöcke im, im, im, im, im, im, im, im drin benutzt.

00:43:43.020 --> 00:43:43.560
 Hast du?

00:43:44.340 --> 00:43:54.200
 Also jedenfalls, äh, genau, was das, äh, der Kopf dicker als der Hals.

00:43:54.200 --> 00:43:55.000
 Der Hals, genau.

00:43:55.000 --> 00:44:04.600
 Und da sieht man halt, das sind so Range-Slider im, im Data-Width und Data-Height-Attribut, ähm, die auch nicht auf Input reagieren, sondern auch erst auf Change.

00:44:06.500 --> 00:44:08.660
 Das könnte man doch schön live machen, naja.

00:44:08.660 --> 00:44:09.520
 Ähm.

00:44:09.520 --> 00:44:11.420
 Guck mal, das ist von 2013.

00:44:11.420 --> 00:44:13.060
 Muss ich sagen.

00:44:13.060 --> 00:44:15.160
 Das sehen wir dem Fabrice jetzt mal nach.

00:44:15.160 --> 00:44:20.300
 Das steht, äh, das steht im JavaScript-Blog, also in so einem Kommentar drin.

00:44:20.300 --> 00:44:22.700
 Weiß ich nicht, ob das, sieht aber so aus, als ob das.

00:44:23.400 --> 00:44:25.200
 Ah ja, okay, ja, dann sehen wir es mir nach.

00:44:25.200 --> 00:44:44.820
 Ähm, genau, also da, da sind jedenfalls so Data-Width und Data-Height-Attribute auf so einem Diff und in dem CSS-Blog, den man unten drunter sieht, und das finde ich auch interessant, äh, wissen auch viele nicht, ähm, dass man einem Style-Blog, Display-Blog geben kann und dann wird der wirklich dargestellt.

00:44:45.220 --> 00:44:54.840
 Also das, was du da siehst, diese grünen Felder mit dem CSS drin, das sind nicht irgendwie Diffs, wo nochmal dann zur Sichtbarkeit das, äh, CSS drin ist, sondern das sind wirklich Style-Blöcke mit Display-Blog.

00:44:54.840 --> 00:45:01.840
 Ich, äh, ich, äh, ich kenne jemanden, der, der mit solchen Edge-Cases sich mal eine große Zeit verbracht hat.

00:45:01.840 --> 00:45:02.780
 Okay.

00:45:02.780 --> 00:45:06.500
 Ähm, ja, man kann auch einen Script-Blog sichtbar machen, wenn man möchte.

00:45:06.500 --> 00:45:07.120
 Ja, genau, bei Script- und Style.

00:45:07.120 --> 00:45:14.120
 Und so, das ist eigentlich, äh, ist auch echt interessant, das sind ganz normale Elemente eigentlich, ähm, sie sind halt standardmäßig auf Display-None.

00:45:15.200 --> 00:45:17.760
 Und, äh, wenn ich das ändere, dann sind sie da.

00:45:17.760 --> 00:45:19.620
 Ja, dann sind sie einfach da.

00:45:19.620 --> 00:45:21.120
 Schon ein bisschen fies.

00:45:21.120 --> 00:45:24.720
 Aber okay, also auch das nur in Ausnahmefällen machen.

00:45:24.720 --> 00:45:30.120
 Ja, in dem Fall ist es halt wirklich, ne, es geht darum, CSS zu visualisieren und zu zeigen, hey, das ist das CSS dazu.

00:45:30.120 --> 00:45:31.420
 Ja, perfekt, warum nicht?

00:45:31.420 --> 00:45:34.860
 Also besser als nochmal ein Diff mit dem exakt gleichen Inhalt innen dran zu glatschen, ne?

00:45:35.380 --> 00:45:47.060
 Aber egal, also da ist jedenfalls drin dann Width, Doppelpunkt, äh, Attribute, also ATTR, Klammer auf, Data Width und dann sogar noch mit Einheit, also Data Width und dann noch Leerzeichen PX.

00:45:47.620 --> 00:45:50.200
 Das, äh, wusste ich auch nicht, dass das so ohne weiteres geht.

00:45:50.200 --> 00:45:53.220
 Ähm, zumindest soll es wohl laut dem, dem Standard gehen.

00:45:54.760 --> 00:45:59.380
 Und, äh, ja, damit ist das, ist das machbar.

00:45:59.380 --> 00:46:11.280
 Also es reagiert einfach auf den, auf den Change von diesem Data Attribut und entsprechend wird dann mit einem Haufen JavaScript, äh, wird dann das CSS entsprechend geparsed, auch mit Regex.

00:46:11.280 --> 00:46:15.800
 Also wie gesagt, nicht für den, nicht tatsächlich für den Einsatz, äh, gedacht.

00:46:15.800 --> 00:46:20.720
 Aber ich fand's mal ganz interessant zu sehen, okay, dafür könnte man's gebrauchen.

00:46:20.720 --> 00:46:21.480
 Hm.

00:46:21.480 --> 00:46:23.760
 Coole Sache.

00:46:24.760 --> 00:46:28.880
 Ja, dann kommen wir auch, ähm, glaube ich schon zum Resize Observer, ne?

00:46:28.880 --> 00:46:32.860
 Das war ja der Ausgangspunkt, wegen was wir das auf die Liste genommen hatten.

00:46:32.860 --> 00:46:34.280
 Das war mein Ausgangspunkt.

00:46:34.280 --> 00:46:38.640
 Ich kann ja mal kurz erklären, ähm, wofür ich das damals gebraucht habe.

00:46:38.640 --> 00:46:49.960
 Ähm, und zwar, äh, wollte ich den, ähm, es war, es war ein, ein, warte mal, ich glaube ich hatte es gebaut mit Details und Summary.

00:46:49.960 --> 00:46:53.200
 Ähm, oh, jetzt, ich weiß tatsächlich gerade nicht mehr zu 100%.

00:46:53.200 --> 00:46:56.580
 Ich weiß tatsächlich gerade nicht mehr zu 100%, warum es an der Stelle dann gebraucht wurde.

00:46:56.580 --> 00:47:00.000
 Auf jeden Fall war es so ein klassisches Element, was man größer und kleiner klappen kann, ne?

00:47:00.000 --> 00:47:00.820
 Mhm.

00:47:00.820 --> 00:47:09.740
 Und da musste ich eben wissen, ähm, wie hoch ist es denn am Ende und diesen Moment abpassen, wo sich die Größe geändert hat.

00:47:09.740 --> 00:47:14.340
 Ähm, ich weiß jetzt gerade gar nicht mehr genau, warum wir das dann am Ende so umgesetzt haben.

00:47:14.340 --> 00:47:17.220
 Hehe, hätte ich mich mal besser vorbereitet.

00:47:17.220 --> 00:47:18.300
 Ähm, egal.

00:47:18.580 --> 00:47:23.280
 Ähm, das war aber in dem Fall eine Anforderung und, äh, man hätte das irgendwie kompliziert irgendwie drumherum bauen können.

00:47:23.280 --> 00:47:26.600
 Und ich bin ja immer Fan von Lösungen, die irgendwie ohne JavaScript auskommen.

00:47:26.600 --> 00:47:31.700
 Aber da war das tatsächlich eine elegante Lösung, äh, weil, wie gesagt, am Ende war es tatsächlich genau dieser Dreizeiler.

00:47:31.700 --> 00:47:32.640
 Mehr habe ich nicht gebraucht.

00:47:32.640 --> 00:47:38.760
 Ähm, ich glaube, da wird dann, ich glaube, auf Basis dessen wurde dann irgendwie ein Button, ähm, geändert.

00:47:39.020 --> 00:47:44.540
 Der dann irgendwie, äh, der eine wird eingeblendet, der andere wird ausgeblendet, ähm, und das, äh, war dann immer ganz gut.

00:47:44.540 --> 00:47:47.280
 Ich glaube, die Höhe hat irgendwie noch eine Rolle gespielt von der Höhe.

00:47:47.280 --> 00:47:47.840
 Und das ist auch egal.

00:47:47.840 --> 00:47:53.880
 Ähm, auf jeden Fall, ähm, dafür gibt es, glaube ich, einige Anwendungsfälle, dass man rausfinden möchte, ob ein Element die Größe ändert.

00:47:53.880 --> 00:47:59.680
 Weil es kann ja auch sein, ah, doch, ich weiß es wieder, weil da nämlich auch Bilder drin sein konnten, von denen wir die Höhe nicht wussten.

00:47:59.680 --> 00:47:59.900
 Mhm.

00:47:59.900 --> 00:48:09.000
 Ähm, und die unter Umständen auch nachgeladen werden, ähm, weil du Lazy Loading, weil wir, äh, Loading klicken.

00:48:09.020 --> 00:48:17.020
 Und wenn du dann gleich Lazy drin hattest, ja, das heißt, im initialen Zustand wussten wir nicht, wie hoch das Bild ist, oder, ja, doch, wie hoch das Bild ist in dem Element.

00:48:17.020 --> 00:48:21.020
 Ähm, aber man wollte was, man wollte, ähm, ausblenden können trotzdem.

00:48:21.020 --> 00:48:26.760
 Und, aber dann, wenn man aufklappt, sollte es trotzdem die richtige Höhe haben, dass man auf 100 Prozent gehen kann.

00:48:26.760 --> 00:48:29.800
 Ich glaube, das, ich glaube, das war der Anwendungsfall, genau.

00:48:29.800 --> 00:48:38.560
 Ähm, und, äh, das hat, das funktioniert total gut mit Resize Observer, weil ich sofort dann bei einem Element irgendwie mitkrieg, wenn sich die Höhe ändert.

00:48:38.560 --> 00:48:42.700
 Und ich weiß dann auch genau die Höhe, wo es hingeht und kann dann dementsprechend da drauf reagieren.

00:48:42.700 --> 00:48:49.600
 Ähm, letzten Endes funktioniert es, äh, ziemlich genauso, äh, wie Mutation Observer vom Prinzip her, was wir gerade schon erklärt haben.

00:48:49.600 --> 00:48:53.620
 Ähm, ich kann hier gerade nochmal da in meine Minimal-Demo reingehen.

00:48:53.620 --> 00:49:04.560
 Ähm, also ich hab hier da zum Beispiel, äh, auf den Body, äh, in meiner Demo, ähm, einen Resize Observer gelegt.

00:49:04.560 --> 00:49:10.520
 Und hab dann, ähm, ganz wirklich ganz simpel, das bringt in dem Fall nicht wirklich viel, weil ich lese nichts aus.

00:49:10.520 --> 00:49:14.100
 Aber ich lese einfach nur aus, wie oft hat sich's verändert in meiner Demo.

00:49:14.100 --> 00:49:20.200
 Das heißt, wenn ich jetzt, ähm, die Breite von dem Browser verändere, dann geht die Zahl hoch, wie oft das jetzt schon resized wurde.

00:49:20.200 --> 00:49:22.880
 Das ist jetzt kein, das ist jetzt nichts, was mir jetzt wirklich was bringt.

00:49:23.280 --> 00:49:30.820
 Aber das wäre der klassische Fall, den man früher mit, mit Window, ähm, eventless in der Resize, äh, getriggert hätte oder abgefangen hätte.

00:49:30.820 --> 00:49:43.060
 Aber das ist halt das, das super, das ist das Positive, ähm, dass man das eben jetzt nicht nur auf das Browserfenster beziehen kann, sondern wirklich auf jedes einzelne Element, wenn darin irgendwas passiert, wird das eben getriggert und dann bekomme ich das mit.

00:49:44.120 --> 00:49:52.480
 Es wäre jetzt natürlich, äh, die Demo, ich hab's ja vorhin mit heißer Nadel gestrickt, es wäre natürlich viel cleverer jetzt zum Beispiel die Breite dann auszugeben von dem Element, ähm, weil die sich ja ändert.

00:49:52.480 --> 00:49:54.280
 Dafür hab ich eine Demo gebastelt.

00:49:54.280 --> 00:49:55.340
 Ah, perfekt.

00:49:55.340 --> 00:49:57.880
 Ähm, wenn du mal auf Konstantins Demo klickst.

00:49:57.880 --> 00:49:59.020
 Konstantins Demo?

00:49:59.620 --> 00:50:00.780
 Das ist eine Text-Area.

00:50:00.780 --> 00:50:01.760
 Ah, ja.

00:50:01.760 --> 00:50:15.460
 Und, äh, wenn ich da das Code-Pen in der Höhe oder in der Breite ändere, oder aber auch, weil das ist nämlich per VH und VW, ähm, das heißt, oder einfach diesen Anfasser nehme, rechts unten in der Text-Area, und den größer und kleiner ziehe.

00:50:15.460 --> 00:50:21.340
 Weil eine Text-Area ja ein Element ist, was man theoretisch tatsächlich ohne irgendwelches weiteres Skript oder irgendwas resizen kann.

00:50:21.340 --> 00:50:21.500
 Ja.

00:50:21.500 --> 00:50:25.600
 Hm, ja, cool. Und dann wird, äh, werden die Pixel angezeigt.

00:50:25.600 --> 00:50:27.380
 Naja.

00:50:28.720 --> 00:50:33.140
 Aber was ich, äh, die, die Text-Größe ändert sich ja auch. Das ist ja fancy.

00:50:33.140 --> 00:50:34.160
 Ja, ja.

00:50:34.160 --> 00:50:35.760
 Aha, ja.

00:50:35.760 --> 00:50:39.040
 Ich seh auch, was du da gemacht hast. Die Höhe durch vier.

00:50:39.040 --> 00:50:41.580
 Mhm. Nice.

00:50:41.580 --> 00:50:43.920
 Nice. Nicht schlecht.

00:50:43.920 --> 00:50:44.640
 Cool.

00:50:44.640 --> 00:50:57.340
 Ja, das ist tatsächlich, äh, eine Demo, die, ja, ähm, ja, eigentlich ein bisschen besser als meine, weil du da nämlich, da nämlich dann auch noch zeigst, dass man da innen drin dann eben auch noch Dinge auslesen kann, ähm, von dem aktuellen Zustand.

00:50:57.820 --> 00:50:59.620
 Ähm, ja, das ist, äh, das ist, äh, das ist cool.

00:50:59.620 --> 00:51:05.580
 I like, das solltet ihr euch unbedingt, also meine Demo müsst ihr euch nicht unbedingt angucken, aber Konstantin's Demo solltet ihr euch anschauen.

00:51:06.280 --> 00:51:18.200
 Ja, ich hab da, vielleicht erklären wir auch mal noch kurz in diesem Callback, ähm, da hab ich nämlich dann richtig Entries zurück und das ist eine Sammlung von, von allen Elementen, die ich beobachte und beziehungsweise die sich geändert haben.

00:51:18.340 --> 00:51:23.600
 Und das heißt, ich muss darüber noch mal mit 4-H drüber loopen, weil da könnten auch durchaus mehrere zurückkommen.

00:51:24.100 --> 00:51:35.160
 Und, äh, dann kann ich eben sagen, Entry, äh, Punkt Target, so wie bei, wie ich bei Event, Punkt Target, ähm, ähm, mir das Event, das, das, das Element holen kann, das das getriggert hat, ist das da eben Entry.

00:51:35.640 --> 00:51:45.080
 Also, das ist dann, glaub ich, auch, äh, ein Objekt vom, äh, vom, vom Typ Resize Observer Entry, zumindest ist das beim, beim, äh, bei dem Intersection Observer so.

00:51:45.080 --> 00:51:56.940
 Und, genau, Entry.Target, da krieg ich dann das Element und dann kann ich eben ganz normal, äh, Value, Style, äh, mir rausholen und denn die Höhe und die Breite, die bekomme ich über Entry.ContentRect.

00:51:56.940 --> 00:52:05.440
 Und das ist halt was, was man früher gemacht hätte, äh, mit, ähm, also einerseits eben mit dem Resize Event Listener.

00:52:05.640 --> 00:52:14.200
 Was halt nicht so performant ist, aber auch mit Get Bounding ClientRect, ja, um dann wirklich die, die Höhe und Breite inklusive Margin, Padding und so weiter zu holen.

00:52:14.200 --> 00:52:28.300
 Und Get Bounding ClientRect erzeugt aber halt einen, einen, ja, zwei, benutze ich bestimmt den falschen Begriff, Redraw, Reflow, also irgendwas von beidem, äh, was, was halt Konsequenzen hat auf die Performance, weil das dann wirklich neu gezeichnet werden muss.

00:52:28.300 --> 00:52:32.280
 Das heißt, das sollte man nur in Ausnahmefällen benutzen und es ist halt wenig performant.

00:52:32.660 --> 00:52:37.000
 Und in dem Fall kriege ich das zurück direkt, ähm, mit, mit, mit Höhe und Breite.

00:52:37.000 --> 00:52:44.560
 Du musst ja sagen, als ich zum ersten Mal Get Client, nee, wie heißt es, Get Bound, Get Client, Bound, äh, Get, Get Bounding ClientRect.

00:52:44.560 --> 00:52:46.020
 Get Bounding ClientRect.

00:52:46.020 --> 00:52:49.700
 Als ich das zum ersten Mal benutzt habe, da habe ich mich so ein bisschen wie ein kleiner Magier gefühlt.

00:52:49.700 --> 00:52:57.280
 Ah, ja, das fand ich, das ist witzig, ja, das fand ich auch so, boah, krass, und dann kriege ich genau die Werte zurück, wie das Element da gerendert ist.

00:52:57.280 --> 00:53:01.740
 Wie cool ist das denn? Bis ich dann irgendwo gelesen habe, A macht das nicht, das ist sehr unfair vermannt.

00:53:01.740 --> 00:53:08.020
 Warte mal, ich muss gerade mal gucken, wie lange es das schon gibt, weil ich, ich hab so irgendwie im Kopf, dass es das nicht schon immer gibt.

00:53:08.020 --> 00:53:10.280
 Nee, nee, das kam auch erst später, ne?

00:53:10.280 --> 00:53:16.740
 Weil, weil ich auch, äh, das war, das war ja früher, davor, bevor es Get Bounding ClientRect, ich kann's echt nicht aussprechen.

00:53:18.400 --> 00:53:18.840
 Spezifizität.

00:53:18.840 --> 00:53:31.300
 Ja, ja, genau, Spezifizität, richtig, ähm, ja, weil das war sowas, man wollte vorher, früher, davor, bevor es das gab, ja auch schon rausfinden, wie groß ist denn jetzt ein Element und zu welchem Zeitpunkt.

00:53:31.300 --> 00:53:35.780
 Und dann war, aber hat das ein Marge, hat das ein Padding, ist, äh, Box-Sizing gesetzt und so weiter.

00:53:35.780 --> 00:53:38.580
 Dann musstest du alle möglichen Sachen mit einbeziehen, ja, völlig.

00:53:38.580 --> 00:53:40.680
 Dann hast du doch irgendwas vergessen und es hat doch nicht gestimmt.

00:53:40.680 --> 00:53:42.080
 Ja, genau.

00:53:42.080 --> 00:53:49.940
 Also heute ist die Folge der Dinge, die man früher kompliziert gemacht hat und heute einfach, wir kommen immer wieder an diesen, an diesen Punkt heute, ja, das ist ja der Grund, Grundtenor.

00:53:49.940 --> 00:53:53.280
 Get Bounding ClientRect.

00:53:53.280 --> 00:53:56.240
 Also ich weiß es noch genau, als ich das zum ersten Mal, das, das war, das war toll.

00:53:56.240 --> 00:54:05.740
 Das weiß ich auch noch, wo ich das, äh, hatte, das war, das hab ich, glaub ich, auch mal gezeigt, das haben wir von Kunden, ähm, so alte Flash-Animationen umgebaut.

00:54:05.780 --> 00:54:09.100
 Mit SVG und, und JavaScript, äh, die animiert.

00:54:09.100 --> 00:54:14.480
 Das waren so ganz viele Bestandteile und dann hat man auch was klicken können und dann hat sich das bewegt und wenn man das geklickt hat, ging's zum nächsten Schritt und so.

00:54:14.480 --> 00:54:31.440
 Und da war halt auch das Problem, die müssen ja skalieren und dann musste ich halt berechnen, äh, in welchem Verhältnis ist es jetzt gerade und dann hatte ich, bin ich da drauf gestoßen, das ist jetzt schon einige Jahre her und das war auch so dieses Gefühl so, boah, krass, ich muss da jetzt gar nicht mehr viel rum, äh, rumrechnen, ich krieg das einfach direkt, ja.

00:54:33.440 --> 00:54:36.100
 Oh, ich seh, da gibt's noch ne Demo, die du verlinkt hast.

00:54:36.100 --> 00:54:43.940
 Genau, dann hab ich noch ne Demo, ähm, die, die, die, die find ich auch cool. Äh, da gibt's drei Buttons, Start-Stop-Animation und Grow und Shrink, wir machen mal die rechten beiden zuerst.

00:54:44.020 --> 00:54:55.260
 Wenn ich da Grow macht, dann wird einfach so ein dickrandiges, äh, grünes Diff, wird dann größer und irgendwann, das sind so, so Spalten und Zeilen mit, mit Emojis drin.

00:54:56.020 --> 00:55:03.000
 Und wenn das groß genug wird, dass da noch ne Spalte theoretisch dazu passen würde, dann kommt auch automatische Spalte dazu und, und ne Zeile.

00:55:03.000 --> 00:55:12.020
 Und bei Shrink wird's wieder kleiner. Aber so richtig fancy wird's, wenn ich den Start-Stop-Animation-Button klicke und das, was man da sieht, dass das so größer und kleiner wird,

00:55:12.680 --> 00:55:15.000
 das ist tatsächlich einfach nur ne CSS-Animation.

00:55:15.000 --> 00:55:21.160
 Also, das ist nicht irgendwie, oh, mit JavaScript und dann wird halt geguckt, naja, wo bin ich jetzt an welcher Stelle und wie viele passen da rein,

00:55:21.160 --> 00:55:26.780
 sondern das ist wirklich ne CSS-Animation und darauf kann ich aber reagieren anhand von diesem Resize-Observer.

00:55:26.780 --> 00:55:35.900
 Und je nachdem, wie viel Platz dann da ist in dem Diff, werden da halt entsprechend viele Zeilen und, äh, Spalten an Emojis drin ausgegeben.

00:55:35.900 --> 00:55:38.520
 Hm, das ist von Avent U.

00:55:38.520 --> 00:55:40.400
 Ist es?

00:55:40.400 --> 00:55:41.200
 Ja.

00:55:41.200 --> 00:55:42.460
 Tatsächlich, Avent U, ja.

00:55:42.460 --> 00:55:46.120
 Ja, der, äh, Hauptentwickler und Erfinder von Vue.js, ja.

00:55:46.120 --> 00:55:49.300
 Ha, hab ich grad gedacht, hä, Avent U, das hab ich doch schon mal gehört.

00:55:49.300 --> 00:55:50.540
 Hm.

00:55:50.540 --> 00:55:53.360
 Aber das kann eigentlich nicht sein, oder?

00:55:53.360 --> 00:55:54.480
 Wie, das kann nicht sein.

00:55:54.480 --> 00:55:57.180
 Der hat nur, der hat nur zwei Follower bei Codefans.

00:55:57.180 --> 00:55:58.320
 Ist das nicht der Avent U?

00:55:58.320 --> 00:55:59.700
 Ja, keine Ahnung.

00:55:59.700 --> 00:56:03.860
 Aber es ist auch vom Bild her, ähm, es hat ja irgendwie ein Alt-Account.

00:56:03.860 --> 00:56:06.240
 Land, genau, Location China.

00:56:06.240 --> 00:56:07.120
 Ja.

00:56:07.120 --> 00:56:10.120
 Das ist schon ein bisschen, das ist doch, das ist doch nicht der echte Avent U.

00:56:10.120 --> 00:56:10.820
 Ich weiß es nicht.

00:56:11.800 --> 00:56:12.080
 Hm.

00:56:12.080 --> 00:56:16.100
 Zwei Follower finde ich ein bisschen wenig für ein Avent U.

00:56:16.100 --> 00:56:18.460
 Aber vielleicht weiß er mal sein Passwort vergessen und seine E-Mail-Adresse.

00:56:18.460 --> 00:56:22.860
 Ja, vielleicht weiß aber auch einfach keiner, dass das ist, also vielleicht ist er einfach nie gefunden worden.

00:56:22.860 --> 00:56:26.640
 Vielleicht ist er auch einfach auf CodePen so gut wie nicht aktiv und hat halt irgendwie mal so eine Demo da.

00:56:26.640 --> 00:56:27.440
 Ja, stimmt, der hat da so.

00:56:27.440 --> 00:56:28.200
 Keiner hat was gemacht.

00:56:28.200 --> 00:56:29.380
 Man weiß es nicht.

00:56:29.380 --> 00:56:31.560
 Ich finde, das ist auch nur ein Namensvetter, kann auch sein.

00:56:31.560 --> 00:56:35.660
 Aber ich fand das echt ganz cool, weil ich zuerst dachte so, das kann doch nicht nur eine CSS-Animation sein.

00:56:35.660 --> 00:56:39.800
 Aber klar, äh, die CSS-Animation triggert eben auch den, den Resize.

00:56:42.800 --> 00:56:46.400
 Ja, ich glaube, das habe ich nur zur Hälfte verstanden, das müsste ich mir im Detail nochmal angucken.

00:56:46.580 --> 00:56:53.020
 Also, dieses Groß- und Kleinwerden, das ist wirklich nur Keyframes, 0%, 100% und 50%.

00:56:53.020 --> 00:56:57.320
 Und bei 50% setzt es halt auf 600 Pixel Breite und 300 Pixel Höhe.

00:56:57.320 --> 00:57:00.060
 Und ansonsten die Werte, die es halt gerade hat.

00:57:00.060 --> 00:57:05.140
 Und dieser Resize-Observer sagt halt nur, okay, wie viel Platz habe ich denn?

00:57:05.140 --> 00:57:08.520
 Und eine Kachel, die braucht ungefähr so und so viel Platz.

00:57:08.520 --> 00:57:11.900
 Und jetzt loop mal durch, wie viele du da reinkriegst.

00:57:11.900 --> 00:57:14.700
 Und dementsprechend wird es mit so Kacheln gefüllt.

00:57:15.380 --> 00:57:17.120
 Wo kommen diese scheiß Emojis her?

00:57:17.120 --> 00:57:20.740
 Oh, das ist gar nicht, gar nicht gut.

00:57:20.740 --> 00:57:22.120
 Ja, wo sind die Emojis?

00:57:22.120 --> 00:57:23.960
 Eigentlich ist doch Magie.

00:57:23.960 --> 00:57:25.960
 Nee, ist nicht wurscht.

00:57:25.960 --> 00:57:27.080
 Wo sind die Emojis?

00:57:27.080 --> 00:57:28.360
 Wo sind die Emojis?

00:57:28.360 --> 00:57:34.220
 Ja, da wird Serena-Text und dann wird, ähm, was macht er denn hier, äh, jetzt willst du das wissen, ne?

00:57:34.220 --> 00:57:39.720
 Ja, wahrscheinlich irgendwie mit so, mit so Unicode, äh.

00:57:39.720 --> 00:57:45.060
 Ach, der baut tatsächlich String from Codepoint, Unicode, ach du Scheiße, okay, gut.

00:57:45.280 --> 00:57:47.660
 Ja, weil er dann halt wirklich dynamisch drauf reagieren kann, ne?

00:57:47.660 --> 00:57:48.380
 Also je nachdem.

00:57:48.380 --> 00:57:52.180
 Deswegen sind's auch, es fällt mir auch jetzt erst auf, in jeder Zeile sind's ja andere.

00:57:52.180 --> 00:57:54.160
 Genau, es werden wirklich immer mehr.

00:57:54.160 --> 00:57:58.580
 Und dann müsste er ja alle Fälle abfangen und so, oder sie, äh, nee, er redet you.

00:57:59.300 --> 00:58:03.500
 Genau, und dann kannst du halt sagen, ja, nimm einfach den nächsten Emoji in der Reihe.

00:58:03.500 --> 00:58:08.820
 Das ist natürlich auch noch, das hat nebenbei lernt man noch eine fancy Art Emojis, äh, zu generieren.

00:58:09.200 --> 00:58:10.100
 Zu generieren, ja.

00:58:10.100 --> 00:58:21.000
 Also hier steht Stringpunkt from Codepoint in Klammern 0x1f00 plus r, äh, und r wird hochgezählt dann wahrscheinlich, genau.

00:58:21.000 --> 00:58:23.100
 Ja, r plus plus.

00:58:23.100 --> 00:58:25.460
 Fancy schmenzig.

00:58:25.460 --> 00:58:30.260
 Ja, das ist wirklich, äh, ja, ich hab die ganze Zeit rumgescrollt und dachte, wo sind denn die Emojis?

00:58:30.780 --> 00:58:34.900
 Die müssen doch, irgendwo müssen die doch sein, die müssen ja eigentlich im Javascript sein, wenn es dynamisch generiert wird.

00:58:34.900 --> 00:58:35.720
 Und da waren keine.

00:58:35.720 --> 00:58:36.560
 Ja, was?

00:58:36.560 --> 00:58:37.540
 Was?

00:58:37.540 --> 00:58:43.920
 Also, Resize Observer könnt ihr auch benutzen, äh, außer ihr müsst irgendwie noch den IE supporten, dann tut ihr mir wirklich leid.

00:58:43.920 --> 00:58:47.740
 Ähm, und, ja, das war's zum Resize Observer.

00:58:47.740 --> 00:58:51.240
 Ja, dann habt ihr aber auch keinen so richtigen Spaß in diesem Podcast, wenn ihr den IE supportet.

00:58:51.240 --> 00:58:54.780
 Dann habt ihr auch keinen so richtigen Spaß an der Arbeit und wahrscheinlich keinen richtigen Spaß am Leben.

00:58:54.780 --> 00:58:57.280
 Oh je.

00:58:57.280 --> 00:58:58.140
 Behaupte ich jetzt mal.

00:58:58.140 --> 00:58:59.480
 Oh je.

00:58:59.480 --> 00:59:00.220
 Nein.

00:59:00.780 --> 00:59:03.000
 Ja, der, äh.

00:59:03.000 --> 00:59:07.800
 Also, jetzt hat sich's auch endlich geklärt, wer von uns der Gute und wer der Böse ist, der Konstantin ist der Böse.

00:59:07.800 --> 00:59:09.320
 Aber nur so ganz subtil.

00:59:09.320 --> 00:59:12.400
 Ganz subtil, aber er ist einfach der Böse von uns beiden.

00:59:12.400 --> 00:59:16.260
 So, das wollte ich nur ein für alle mal klären, weil das war, das war bislang nicht klar.

00:59:16.260 --> 00:59:17.320
 War das nicht ganz klar, okay.

00:59:17.320 --> 00:59:18.500
 Nee, jetzt, jetzt.

00:59:18.500 --> 00:59:20.280
 Ich glaub, die Tendenz ging bisher in eine andere Richtung.

00:59:20.280 --> 00:59:22.800
 Richtig, und jetzt ist es endlich mal klargestellt.

00:59:22.800 --> 00:59:26.420
 Okay, also, Intersection Observer.

00:59:26.420 --> 00:59:27.980
 Oh ja, toll.

00:59:27.980 --> 00:59:30.260
 Die große Baustelle.

00:59:30.720 --> 00:59:31.680
 Die große Baustelle.

00:59:31.680 --> 00:59:49.120
 Nee, aber vor allem, ähm, ich fand da auf der MDN tatsächlich diesen, da find ich's ganz nett, dass da, also der Artikel ist lang und ich fand's ganz interessant tatsächlich, den, äh, den Anfang da zu lesen, weil da nämlich so ein bisschen erklärt wird, warum hat man denn das jetzt irgendwie gebraucht?

00:59:49.620 --> 00:59:52.720
 Ähm, was sind denn jetzt die konkreten Anwendungsfälle für Intersection Observer?

00:59:52.720 --> 01:00:02.420
 Also, vielleicht erst mal ganz kurz gesagt, Intersection Observer, ähm, sagt mir, ob ein Element im View-, ob sichtbar ist, ich weiß gar nicht, im Viewport?

01:00:02.420 --> 01:00:12.420
 Nee, ob sichtbar ist, es kann ja auch innerhalb von einem, von einem anderen Element mit Scrollbalken versteckt sein, ob es sichtbar ist und wenn ja, wie viel Prozent davon sichtbar sind?

01:00:12.520 --> 01:00:14.040
 Also, ich glaube, so weit, so weit geht's.

01:00:14.040 --> 01:00:32.200
 Also, das sieht man auch in dem, in der ersten visuellen Demo in dem MDN-Artikel, also so ungefähr nach 20 Mal scrollen, sieht man das auch ganz gut, das sind so orange Boxen, die man hoch und runter scrollen kann, ähm, und die haben in allen vier Ecken Prozentwerte stehen und da sieht man eben, äh, die verändern sich.

01:00:32.360 --> 01:00:46.780
 Ja, und das ist auch interessant, ähm, man muss sich mal angucken, wie die Prozentwerte sich da verändern, ähm, weil bei der, bei der obersten Box, äh, in ein Prozent Schritten, ähm, bei der nächsten sind es, äh, es ist ein bisschen komisch.

01:00:46.780 --> 01:00:50.140
 Die nächste verstehe ich auch nicht, weil die ist irgendwie mal 50.

01:00:50.140 --> 01:01:01.740
 Und dann bei der nächsten sind's, bei der nächsten sind's wieder ein, nee, da sind's zehn Prozent Schritte und bei der letzten sind's, es sind auf jeden Fall größere Schritte, da sind's irgendwie 25 Prozent Schritte, ah, genau.

01:01:01.740 --> 01:01:05.000
 Bei der letzten sind's 25 Prozent Schritte, genau.

01:01:05.000 --> 01:01:07.700
 Also, man kann auch, äh, man muss das auch nicht ...

01:01:07.700 --> 01:01:18.020
 Genau, das ist die eine Option, Threshold nennt sich die, da kann man halt sagen, okay, wie, wie krass soll's denn reagieren? Brauch ich wirklich die Information bei jeder Pixeländerung oder reicht mir das auch, wenn's, wenn's, wenn's ein bisschen später passiert?

01:01:19.140 --> 01:01:30.260
 Genau, also, und ich kann halt auch, äh, mir sagen lassen, ähm, es ist irgendwie ein Pixel davon sichtbar, sag mir dann mal Bescheid oder sag mir erst Bescheid, wenn die Hälfte mindestens davon sichtbar ist oder so.

01:01:30.260 --> 01:01:49.120
 Ähm, und, äh, die, die Anwendungsfälle dafür, äh, die sind zum Beispiel Lazy Loading von Bildern früher, mittlerweile, würd ich sagen, braucht man's nicht mehr, aber als man das so was noch selbst gebaut hat, Lazy Loading beim Runterscrollen, ähm, Infinite Scrolling, äh, auf Webseiten, also so der Klassiker, ich scroll runter und,

01:01:49.120 --> 01:02:00.900
 äh, sobald ich einen bestimmten Punkt geladen, äh, den Punkt erreicht hab, wird was nachgeladen, ähm, am besten nicht erst, wenn man ganz unten ist, das nervt mich immer, wenn Infinite Scrolling, wenn ich immer erst, oder wenn ich einen Knopf drücken muss.

01:02:00.980 --> 01:02:20.900
 Ja, und, und vor allem, bitte, bitte, dann macht, wenn ihr noch eine Sockelleiste habt, die irgendwie, entweder sticky, oder macht, macht die Links nicht in eine Sockelleiste, weil ich hab echt schon Seiten gesehen, du konntest, du konntest nicht, du kommst nicht zum Impressum, also der Impressumslink ist da, und du kommst aber nicht hin, weil sobald du unten bist, lädst du was nach.

01:02:20.900 --> 01:02:22.500
 Das war bei Facebook mal eine Zeit lang so.

01:02:22.500 --> 01:02:36.440
 Ja? Ähm, ja, das war bei Facebook mal, man ist nicht zum, ich weiß nicht, Impressum hatten die wahrscheinlich eh nie, aber in diese, in diese Futterleiste ist man nie hingekommen, oder nur, immer in dem Augenblick, wo man dachte, ah, jetzt kann ich klicken, es wurde wieder nachgeladen.

01:02:36.440 --> 01:02:37.360
 Ja, der hatte da bescheuert.

01:02:37.360 --> 01:02:47.440
 Ähm, ja, dann musste man halt relativ lange scrollen, bis irgendwann, weil die hatten irgendwie so ein Limit drin, nach, nach 95 Mal nachladen, konntest du dann zu dem.

01:02:47.440 --> 01:02:48.820
 Da hast du Facebook zu Ende gespielt.

01:02:48.820 --> 01:02:56.480
 Genau, das geht, das geht immer noch übrigens, ich hab da nämlich mal so ein kleines Skript gebaut, wo ich, egal, wo ich Werbung irgendwie, äh, nicht so wichtig.

01:02:56.480 --> 01:03:05.880
 Ja, ich, ich hab, ich hab manchmal Spaß mit der Browserkonsole und diversen Social Networks und probier da Sachen aus, wenn mich was nervt, irgendwie Werbung oder so, dann.

01:03:06.440 --> 01:03:10.540
 Ähm, ja, äh, ich weiß auf jeden Fall, dass es immer noch ein Limit gibt, vertraut mir.

01:03:10.540 --> 01:03:16.060
 Ähm, es gibt auch ein Limit bei Xing, wie oft man auf Profile klickt, wusstest du das?

01:03:16.060 --> 01:03:20.480
 Nein, das wusste ich nicht. Das hast du aber auch nicht durch manuell klicken.

01:03:20.480 --> 01:03:21.960
 Mehr sage ich dazu jetzt auch nicht.

01:03:21.960 --> 01:03:29.220
 Ich glaube, es könnte vielleicht sein, dass großes Interesse an unseren Skripten besteht, so in Zukunft.

01:03:29.220 --> 01:03:33.800
 Die sollten wir dann, die, die veröffentlichen wir dann mal, ähm, unter Pseudonym.

01:03:34.100 --> 01:03:34.420
 Genau.

01:03:34.420 --> 01:03:40.020
 Wir sagen dann, ah, wir haben da was, was Interessantes gefunden von, von Avenue.

01:03:40.020 --> 01:03:41.820
 Guy, Guy, guck ich, genau.

01:03:41.820 --> 01:03:43.620
 Von Avenue mit zwei Followern.

01:03:43.620 --> 01:03:45.860
 Avenue bei Code Penden mit zwei Followern.

01:03:45.860 --> 01:03:46.120
 Location China.

01:03:46.120 --> 01:03:51.380
 Location China hat, hat was Interessantes da irgendwie.

01:03:51.380 --> 01:03:55.140
 Das müsst ihr euch unbedingt mal angucken, da kann man, da kann man verrückte Sachen mitmachen.

01:03:55.140 --> 01:03:55.820
 Egal.

01:03:55.820 --> 01:03:59.760
 Können wir nie tun, aber dass das jemand, das da immer noch auf die Idee kam.

01:04:00.500 --> 01:04:05.180
 Nee, also, vielleicht, egal, ich versuche nochmal zurück zum Thema zu kommen.

01:04:05.180 --> 01:04:08.320
 Ich habe zwar nicht nur so halb Lust, aber egal, das andere ist auch interessant.

01:04:08.320 --> 01:04:15.080
 Ähm, und jetzt kommt der Punkt, wo ich mir gedacht habe, das ist was, womit ich schon zu tun hatte und mir gedacht habe, ja, das ist das, was die wollen.

01:04:15.080 --> 01:04:18.060
 Nämlich, äh, Sichtbarkeit von Werbemitteln.

01:04:18.120 --> 01:04:27.180
 Ähm, ich weiß, ich habe, also wer sich mal Werbe, so Bannerwerbung angeguckt hat, was darin so technisch passiert, da kann man eine Menge lernen.

01:04:27.180 --> 01:04:30.480
 Und das sollte man dann, das meiste davon sollte man sofort wieder vergessen.

01:04:30.480 --> 01:04:43.980
 Das, ähm, das ist die, die, wenn, wer die schwarzeste Magie im Internet finden will, das waren früher die, äh, die Click-Jacking-Skripte, äh, mit denen man bei Facebook heimlich Klicks, äh, Like-Klicks eingesammelt hat.

01:04:44.740 --> 01:04:48.860
 Und jetzt ist es, oder wahrscheinlich damals auch schon, es ist auf jeden Fall die Werbung.

01:04:48.860 --> 01:04:58.280
 Wer wirklich in, in, in den dunklen, bösen Schlund des Internets gucken will, der soll sich mal, der soll sich mal Werbemittel inspizieren, äh, inspekten im, im Browser.

01:04:58.280 --> 01:05:02.340
 Das ist wirklich die Hölle. Also, was da abgeht, wie viele verschachtelte iFrames da ineinander sind.

01:05:02.340 --> 01:05:11.080
 Und die benutzen dann teilweise noch irgendwelche uralten, obskuren HTML- und, und JavaScript-Sachen, die eigentlich schon gar nicht mehr im Standard sind,

01:05:11.080 --> 01:05:14.760
 aber irgendwie noch unterstützt werden und einem irgendeine komische Information geben kann.

01:05:14.760 --> 01:05:17.920
 Und glaub mir, die tracken alles, was geht.

01:05:17.920 --> 01:05:24.380
 Alles, wo nicht unbedingt so eine, so eine, so eine, so eine, äh, ja, so ein Request aufgeht, darf ich das tracken.

01:05:24.380 --> 01:05:27.480
 Alles, wo das nicht aufgeht, garantiert trackt das Werbemittel das.

01:05:27.480 --> 01:05:30.520
 Ob das irgendwie die Position vom Device ist oder sonst irgendwas.

01:05:30.520 --> 01:05:33.940
 Alles, alles, jede Schnittstelle, jede Scheiß-Schnittstelle wird da abgefragt.

01:05:34.620 --> 01:05:45.660
 Das ist richtig pervers, ähm, aber es war mir schon klar, weil das war immer wieder die Frage, wenn, wenn, wenn, wenn wir es mit Werbemitteln zu tun haben, wie findet man denn raus, ob was angezeigt wurde und wie oft und wie viel davon.

01:05:45.660 --> 01:05:57.480
 Und das geht dann natürlich mit Intersection Observer perfekt, weil du tatsächlich sogar sagen kannst, ich bezahle dir nur ein, wurde nun zum Drittel, du kriegst nur ein Drittel vom Geld, weil das Werbemittel wurde nur ein Drittel angezeigt.

01:05:57.680 --> 01:05:58.820
 Könnte man theoretisch machen.

01:05:58.820 --> 01:05:59.060
 Ja, ja.

01:05:59.060 --> 01:06:19.400
 Damit, ähm, natürlich, äh, glaube ich, dass du nicht jeden Edge-Case damit abgebildet kriegst, weil man vielleicht dann doch noch irgendwie schafft, was drüber zu legen, was aber nicht, also ich glaube, man kann, wenn man ganz obskur unterwegs ist, könnte man es schaffen, dass etwas als sichtbar angezeigt, äh, oder wo Intersection Observer sagt, es ist sichtbar, es ist aber doch nicht sichtbar.

01:06:19.400 --> 01:06:22.520
 Ich glaube, da gibt es eine Menge interessanter Wege.

01:06:22.520 --> 01:06:35.460
 Ja, gut, klar, drüberlegen kannst du immer was, also darum geht's ja beim Intersection Observer auch gar nicht, sondern du sagst ja, das Element ist das Root-Element, ähm, und das sind die Elemente, die ich beobachten will, und im Verhältnis zueinander sind die, äh, die Intersection.

01:06:35.460 --> 01:06:37.160
 Naja, den Werbern geht's schon darum.

01:06:37.160 --> 01:06:38.840
 Ja, ja, denen geht's schon darum, ja klar.

01:06:38.840 --> 01:06:47.540
 Also, gut, als Werber musst du nicht, also, das Skript läuft ja am Ende bei dem Anbieter, wo die Werbung halt geschaltet wird, und der kann ja auch nur die Tracking-Informationen weitergeben.

01:06:47.540 --> 01:06:48.580
 Das glaubst du.

01:06:48.780 --> 01:07:04.920
 Achso, beziehungsweise gut, über iFrames kannst du theoretisch auch, ja, ne, ne, ne, ne, es ist noch viel schlimmer, ähm, wenn, ähm, wenn du sie lässt, die Leute, die die Werbemittel ausspielen, dann geben die dir ein Skript, was du direkt bei dir einbindest, ja, was, was von denen kommt.

01:07:04.920 --> 01:07:15.260
 Das ist das Allerschlimmste, dann übernehmen die komplett deine Seite eigentlich und können damit alles machen, was sie wollen. Das dürft ihr, also, wenn ihr irgendwo mal Werbung einbaut, das dürft ihr auf keinen Fall machen.

01:07:15.420 --> 01:07:17.840
 Nee, immer irgendwie Sandboxen, eigentlich immer ein iFrame.

01:07:17.840 --> 01:07:32.860
 Ich glaube, auch Google möchte das, ich glaube, auch Google möchte das mit seinem AdSense, der Standardweg ist, glaube ich, so, den die, der Standardweg, schon lang nicht mehr gemacht, aber früher war das so, der Standardweg war, hier hast du ein Skript, tu das mal in die Seite und dann kannst du hier Werbemittel ausspielen.

01:07:33.420 --> 01:07:46.640
 Und, äh, nee, das macht man nicht. Unbedingt immer einen iFrame drumherum machen, weil sonst kann, sonst kann das, was, was, ja, das Werbemittel oder keine Ahnung, was ihr auch immer einbindet, mit eurer Seite alles Mögliche machen.

01:07:47.760 --> 01:07:50.640
 Ähm, wieso ist das denn so verkratzt?

01:07:50.640 --> 01:07:54.500
 Hm, ich glaube, meine Kamera ist kaputt. Egal, so.

01:07:54.500 --> 01:08:08.720
 Ähm, genau, also, aber ihr könnt euch vorstellen, wenn man tatsächlich prozentual anzeigen kann, welches Element wie viel, wie viel sichtbar ist, ähm, dass das natürlich für Leute, die Werbung anzeigen wollen, sehr interessant ist.

01:08:08.900 --> 01:08:36.560
 Dann haben wir hier noch als, als weiteren Punkt irgendwie, ähm, ob es sinnvoll ist, irgendwie Animations zu starten, ähm, je nachdem, ob man es überhaupt sehen kann oder nicht, finde ich auch, tatsächlich ist es auch so ein Performance-Ding, was man damit machen kann, ähm, genau, und da wird auch nochmal Get Bowning Client Wrecked, äh, erwähnt, weil man damit natürlich auch früher irgendwelche wilden Berechnungen gemacht hat, mit denen man hat versucht hat, rauszufinden, ähm, ob denn etwas sichtbar ist oder nicht.

01:08:37.520 --> 01:08:39.300
 Wobei, ich glaube, richtig rausfinden kann.

01:08:39.300 --> 01:08:45.920
 Der letzte, der letzte Halbsatz sagt es eigentlich, äh, in dem Absatz über Get Bowning Client Wrecked, things can get downright ugly.

01:08:45.920 --> 01:08:57.160
 Genau, und vom Prinzip her funktioniert es wieder, ähm, eigentlich genauso, wie wir es vorhin schon gesagt haben.

01:08:57.160 --> 01:09:00.520
 Was da aber sehr interessant ist, ist dieser Threshold auf jeden Fall.

01:09:00.520 --> 01:09:07.500
 Ähm, genau, also, ich kann einen Margin einerseits festlegen, also wirklich nochmal, okay, lass so und so viel Pixel spielen,

01:09:07.520 --> 01:09:21.040
 Raum, aber eben auch diesen Threshold, dass ich sage, ich möchte nicht über jede Änderung informiert werden, ist so ein bisschen wie so ein De-Bouncing, ne, ähm, sondern erst, wenn, wenn die Schwelle groß genug ist, erst dann brauche ich die Information.

01:09:21.300 --> 01:09:34.680
 Und das ist auch das, was wir gesehen haben, wo wir uns gewundert haben bei dem zweiten, bei dieser zweiten Box, ähm, die da sich nur so sporadisch updatet, das ist eben genau das, also die hat einen Threshold von 50%, also bei der, genau bei der 50%-Marke.

01:09:34.760 --> 01:09:43.100
 Das heißt, nur, wenn ich diese 50%-Marke über oder unterschreite von dieser Box, ändert sich, kriege ich überhaupt irgendwie was mit, äh, von dem Wert.

01:09:43.100 --> 01:09:47.560
 Also ich kriege nur mit, wenn die zur Hälfte verschwindet oder zur Hälfte wieder auftaucht.

01:09:48.720 --> 01:09:52.020
 Ah ja, steht da, hätten sie auch mal lesen können, steht natürlich direkt oben drüber.

01:09:52.020 --> 01:09:53.400
 Genau.

01:09:53.400 --> 01:10:00.180
 Ja genau, und die letzte tatsächlich 25%, das ist das, was ich vorhin schon gesagt habe, wobei da auch bei mir obskure Zahlen rauskommen.

01:10:00.180 --> 01:10:05.880
 Ich kriege nämlich erst mal 99 und dann kriege ich irgendwie 73 und dann kriege ich 48 und dann kriege ich 24.

01:10:06.720 --> 01:10:10.220
 Naja, das hat vorhin irgendwie besser geklappt, ich glaub, ich muss die Seite nochmal neu laden.

01:10:10.220 --> 01:10:19.120
 Ähm, genau, also, und da gibt's, da, wie schon gesagt, dazu könnte man eine komplette oder vielleicht sogar zwei Sendungen machen, wenn man da wirklich in die Tiefe geht.

01:10:19.120 --> 01:10:32.500
 Genau, weil da kommen dann so Sachen wie dann, Overflow spielt dann irgendwie da eine Rolle und so Clipping, das dann passiert und, äh, mit iFrames ist nochmal irgendwie speziell und, also, da gibt's viele verschiedene Edge-Cases und, ähm.

01:10:34.000 --> 01:10:43.440
 Hast du aber jetzt, äh, ne Demo, äh, verlinkt, die ich ziemlich cool finde, ehrlich gesagt, ich, ich, ich nehm die dir jetzt, die kommt nämlich als nächstes jetzt, die nehm ich dir jetzt, nehm ich dir jetzt einfach mal weg.

01:10:43.440 --> 01:11:03.080
 Ähm, da hast du nämlich auch ne CodePen-Demo, wo, äh, diesmal nicht von Evan Yu, sondern von Simon Evans, aber irgendwie wieder was mit Evan, das ist irgendwie, ähm, genau, du hast, du hast rechts oben, äh, so ein, so ein, äh, so ein Rechteck, wo drinsteht, nothing is visible, scroll und dann scrollt man und dann kommt irgendwann ein Element reingefahren

01:11:03.080 --> 01:11:17.260
 und das scheint, äh, tatsächlich beim ersten Pixel direkt das schon zu ändern, weil sobald, wirklich nur ein ganz kleiner Teil davon sichtbar ist, steht Item 1 is visible, ähm, also tatsächlich, äh, ja genau, da fährt halt von unten diese Box rein

01:11:17.260 --> 01:11:23.380
 und sobald's wieder verschwindet, steht da wieder nothing is visible und dann kommt Item 2 und dann steht ja Item 2 is visible und so weiter

01:11:23.380 --> 01:11:37.720
 und dann, äh, das Item 3 ist dann noch ein bisschen kleiner, ähm, genau, und so, so kann man sich dann, äh, da durchscrollen und, ähm, kriegt relativ schön gezeigt, ähm, dass, dass diese, diese, diese, ja, diese Sichtbarkeitserkennung

01:11:37.720 --> 01:11:39.220
 tatsächlich ziemlich gut funktioniert.

01:11:39.220 --> 01:11:44.880
 Finde ich, finde ich echt eine schöne Demo, ist auch visuell, finde ich, schön gemacht, ähm, braucht man eigentlich dann gar nichts.

01:11:44.880 --> 01:11:46.140
 Ja, mir auch gefallen, deswegen hab ich die aufgenommen.

01:11:46.140 --> 01:11:48.500
 Deswegen darf ich auch, brauche ich nix selber stricken.

01:11:48.500 --> 01:11:55.620
 Genau, und aber auch bei der muss ich sagen, ähm, ich hätte mir, das, und da bin ich dann leider am Ende nicht mehr ganz dazu gekommen,

01:11:55.720 --> 01:12:13.940
 weil das eben das Komplizierteste war, umzusetzen und sich zu überlegen, ja, was ist denn jetzt sinnvoller Anwendungsfall und wie kann ich denn jetzt so minimal runterbrechen, dass ich vier Zeilen Code hab oder so, und das, daran bin ich dann gescheitert, äh, das hab ich nicht auf die Schnelle hingekriegt, aber das baue ich vielleicht noch ein hinterher, muss ich mal gucken. Genau.

01:12:13.940 --> 01:12:23.180
 Aber die Demo ist echt, die, die zeigt wirklich sehr, sehr gut, äh, wie das Ding funktioniert und, äh, ich, ja, auch nur ein Teil von den Optionen wahrscheinlich.

01:12:23.180 --> 01:12:38.960
 Ist auch schon fast ein bisschen zu komplex, also wenn man das JavaScript anschaut, ist schon trotzdem viel, was da passiert, aber es ist halbwegs nachvollziehbar, ne, was da, äh, das nimmt sich halt den Text aus diesen Elementen dann raus und zeigt dann den an und es lockt auch noch in die Konsole, das könnte man, hätte man sich auch sparen können in der CodePen-Demo.

01:12:38.960 --> 01:12:53.160
 Das ist das, was ich meinte mit ne Minimaldemo, das ist das, was ich immer versuche, wenn ich ne Demo baue, dass man halt wirklich, dass kein Quatsch drumherum ist, dass man wirklich die Essenz von, von dem Ding irgendwie, äh, begreift, aber, ja gut, ich, ich finde die auf jeden Fall, äh,

01:12:53.160 --> 01:12:57.400
 sehr schön gemacht, um das oben zu verstehen, wie das Ding generell, was es tut.

01:12:57.400 --> 01:13:21.520
 Und dann gibt's noch, äh, das fand ich auch ganz schön, einen Intersection Observer Visualizer, auch als CodePen, ich glaube allerdings, dass da was nicht so ganz sauber funktioniert, aber vom, vom Grundprinzip her ist es, äh, cool gemacht, ich hab da so ein, ähm, türkisenes, gestricheltes, äh, Rechteck und innen drin einen weißen Container mit Scrollbar, in dem wiederum sich mehrere pinke Container befinden, die ich scrollen kann.

01:13:21.520 --> 01:13:37.820
 Und da kann ich dann links an so zwei, ähm, Input-Reglern, kann ich das Root-Margin und das Threshold, was ich eben halt als, äh, in dem Konfigurationsobjekt übergeben kann, bei dem, bei der Instanzierung, ähm, kann ich mit rumspielen,

01:13:39.760 --> 01:13:45.740
 so eine Shadow-Box, äh, in der Größe von dieser pinken Box, was sich dadurch verändert an dem Threshold.

01:13:45.740 --> 01:14:01.980
 Und, äh, es scheint mir nur, also die Boxen sind nicht ganz aligned, diese Shadows sind ein bisschen zu weit nach rechts versetzt und auch unten, wenn ich da raus und rein scrolle, hab ich das Gefühl, es entfärbt sich schon ein paar Pixel zu früh eigentlich.

01:14:02.320 --> 01:14:04.040
 Das, genau das hab ich grad auch gesehen, ja.

01:14:04.040 --> 01:14:14.120
 Also, ich glaube, dass da leider irgendwas verschoben ist in der Demo, vielleicht funktioniert die im Safari besser oder ich weiß es nicht, was da falsch ist, ähm, ist wahrscheinlich auch schon ein bisschen älter jetzt, aber ich fand die eigentlich ganz cool gemacht.

01:14:14.120 --> 01:14:31.820
 Ähm, und ich hab dann auch mal geguckt, wer hat die denn gemacht? Michelle Barker, weil ich fand das cool visualisiert, also, dass man sich das besser vorstellen kann und dafür tut die immer noch, also, auch wenn es jetzt nicht ganz stimmt, aber so grob schafft das ein besseres Verständnis, was macht denn dieser Root-Margin eigentlich überhaupt und, und dieser Threshold, wofür sorgt der denn?

01:14:32.320 --> 01:14:39.420
 Ähm, und da hab ich geguckt, Michelle Barker ist eine Entwicklerin und die hat auch eine, eine sehr fancy Seite, wenn du da mal draufklickst.

01:14:39.420 --> 01:14:43.480
 Oh, sowas mag ich ja. Sehr schön.

01:14:43.480 --> 01:14:57.080
 Und dann warte mal, bis der Text ganz da ist und dann kannst du mit der Maus da mit so einer Lupe drüberfahren und diesen Texteffekt, wollte ich noch gucken, wie sie das gemacht hat, ob das dann SVG ist oder wie sie das da füllt, also, schaut euch das mal an.

01:14:57.080 --> 01:15:04.000
 Und der Rand von diesem Kreis zeigt auch schon Text an, also, da ist ja nochmal so ein Rahmen drumherum, so ein runder.

01:15:04.000 --> 01:15:06.320
 Genau, der wird ja auch irgendwie über so Compositing.

01:15:06.320 --> 01:15:12.060
 Und auch der zeigt was an, was irgendwie unten drunter ist, ist ja crazy. Interesting. Sehr cool.

01:15:12.080 --> 01:15:17.380
 Und auch der, also der Effekt gefällt mir auch gut, das sieht wirklich so Neonröhren leuchtmäßig aus, also so für unsere Seite auch.

01:15:17.380 --> 01:15:23.600
 Und die Farbe des Kreises ändert sich je nach der Position, wo das Ding auf der Seite ist.

01:15:23.600 --> 01:15:27.440
 Genau, ich denke mal, das ist so ein Gradialverlauf, der da dann irgendwie einfach im Hintergrund liegt.

01:15:28.360 --> 01:15:33.440
 Und dann dieser Kreis um die Maus schneidet das aus, aber ich fand's, also, es ist echt fancy.

01:15:33.440 --> 01:15:33.820
 Fancy.

01:15:33.820 --> 01:15:34.340
 Ja.

01:15:34.340 --> 01:15:46.140
 Ja, wobei ich jetzt ja tippen würde, dass man irgendwie so eine Art Maskierung ist und das Ding halt quasi doppelt da ist.

01:15:46.140 --> 01:15:48.180
 Genau, genau, hätte ich jetzt auch gedacht, ja.

01:15:49.460 --> 01:15:50.780
 Ja, aber es ist total cool.

01:15:50.780 --> 01:16:01.840
 Und ich finde auch, dass, ich mag auch das, das, das, das ist die Animation, die ich gerne für unsere Seite hätte, fürs Hamburger Menü, dass du quasi sowas hast, was ich tatsächlich vom Hamburger Menü ausfällt.

01:16:01.840 --> 01:16:04.760
 Genau, aber das ist dann auch der gleiche, der gleiche Radialverlauf im Hintergrund.

01:16:04.760 --> 01:16:07.680
 Genau, dieser, dieser Kreis fährt dann auf.

01:16:07.680 --> 01:16:09.940
 Also, das ist der Kreis von dem Maus-Cursor.

01:16:09.940 --> 01:16:11.100
 Also, wenn du guckst ...

01:16:11.100 --> 01:16:11.960
 Nee, das ist ein anderer.

01:16:11.960 --> 01:16:12.600
 Das ist ein anderer.

01:16:12.600 --> 01:16:14.860
 Nee, das ist orange bis pink und grün.

01:16:14.860 --> 01:16:18.660
 Ja, aber geh mal ganz, geh mal ganz, geh mal ganz, geh mal ganz nach links unten.

01:16:18.660 --> 01:16:20.060
 Aber am Anfang sieht's so aus.

01:16:20.060 --> 01:16:20.900
 Interessant.

01:16:20.900 --> 01:16:21.680
 Ja.

01:16:21.680 --> 01:16:24.040
 Das ist lila und ...

01:16:24.040 --> 01:16:28.640
 Aber kann es sein, dass er sich tatsächlich, kann es sein, dass er sich wirklich verändert mit der Position?

01:16:28.640 --> 01:16:31.100
 Keine Ahnung.

01:16:31.100 --> 01:16:33.540
 Ich glaub, der verändert sich wirklich mit der Position.

01:16:33.540 --> 01:16:37.680
 Also, der ist, weil es würde mich, es ist jetzt sehr ...

01:16:37.680 --> 01:16:38.340
 Also, es ist jedenfalls echt schön gemacht.

01:16:38.340 --> 01:16:41.340
 Wir reden jetzt sehr visuell, das ist grad, ihr müsst euch angucken.

01:16:41.340 --> 01:16:44.580
 Vielleicht zeigen wir die Seite auch mal noch im Stream nächstes Mal.

01:16:44.580 --> 01:16:45.940
 Ja, das ist eine gute Idee.

01:16:45.940 --> 01:16:46.940
 Ich kann die mal ...

01:16:46.940 --> 01:16:49.840
 Und dann können wir uns auch im Stream mal gemeinsam anschauen, wie's gemacht ist.

01:16:49.840 --> 01:16:50.900
 Wie sie das gemacht hat, ja.

01:16:50.900 --> 01:16:51.900
 Ja.

01:16:51.900 --> 01:16:52.900
 Sehr gerne.

01:16:52.900 --> 01:16:53.900
 Äh ...

01:16:53.900 --> 01:16:54.900
 Das find ich gut.

01:16:54.900 --> 01:16:55.900
 Gleich mal hier ...

01:16:55.900 --> 01:16:57.300
 Wo haben wir denn ...

01:16:57.300 --> 01:16:57.900
 Streams?

01:16:57.900 --> 01:16:58.900
 Das ist sehr gut.

01:16:58.900 --> 01:16:59.900
 Siebter Zehnter.

01:16:59.900 --> 01:17:00.900
 Sehr gut.

01:17:00.900 --> 01:17:01.900
 Genau.

01:17:01.900 --> 01:17:02.900
 Sehr gut.

01:17:02.900 --> 01:17:03.900
 So.

01:17:03.900 --> 01:17:09.860
 Ja, wollte ich nur am Rand, weil ich die Seite gesehen hab und dachte, da ist echt ...

01:17:09.860 --> 01:17:11.820
 Das ist doch was für uns.

01:17:11.820 --> 01:17:12.820
 Nee, das ist doch was für uns.

01:17:12.820 --> 01:17:13.820
 Das ist doch was für uns.

01:17:13.820 --> 01:17:15.820
 Das ist doch was für uns.

01:17:15.820 --> 01:17:16.820
 So.

01:17:16.820 --> 01:17:18.780
 Ja, genau.

01:17:18.780 --> 01:17:19.780
 Ja, genau.

01:17:19.780 --> 01:17:23.780
 Meine Demo, die kommt auch noch in die ... in die Show Notes.

01:17:23.780 --> 01:17:24.780
 Ähm ...

01:17:24.780 --> 01:17:26.740
 Aber wie gesagt, das ist nichts Verrücktes.

01:17:26.740 --> 01:17:28.740
 Ich hab halt versucht, es minimal runterzubrechen.

01:17:28.740 --> 01:17:31.820
 und Intersection Observer ist jetzt halt nicht mit dabei, aber die beiden anderen.

01:17:31.820 --> 01:17:32.820
 Mhm.

01:17:32.820 --> 01:17:33.820
 Äh, genau.

01:17:33.820 --> 01:17:37.820
 Und dann ... vielleicht noch ... ähm ... das, was ich jetzt gerade am Anfang geschoben hab,

01:17:37.820 --> 01:17:39.180
 ich muss es noch kurz erinnern.

01:17:39.180 --> 01:17:45.820
 Ich hab mich ... ich hab mich vorhin verschrieben ... bei Observer und hatte ein E zu viel drin.

01:17:45.820 --> 01:17:48.700
 Und hab dann gelesen, Obis Server.

01:17:48.700 --> 01:17:53.700
 Also ... also ein ... ein fettleibiger Kellner.

01:17:53.700 --> 01:17:56.500
 Und ich ... und ich hab das ... ich hab das gelesen ...

01:17:56.500 --> 01:17:58.500
 Ja, das musst du, das musst du in die Show Notes packen.

01:17:58.500 --> 01:18:02.260
 Ich war auch noch auf Trello und hab das gelesen und hab's direkt kopiert

01:18:02.260 --> 01:18:04.940
 und hab eine Instanz von Stable Diffusion aufgemacht.

01:18:04.940 --> 01:18:10.220
 Also von diesem Text-to-to-Image-AI-Gedöns, über das wir im letzten Stream gesprochen haben.

01:18:10.220 --> 01:18:10.700
 Pack das Bild bitte in die Show Notes.

01:18:10.700 --> 01:18:14.100
 Und das Bild kommt auch in die Show Notes und ...

01:18:14.100 --> 01:18:14.780
 Obis Server.

01:18:14.780 --> 01:18:17.620
 Obis Server und es kam halt heraus eine ...

01:18:17.620 --> 01:18:18.700
 Es ist gut.

01:18:18.700 --> 01:18:25.780
 Eine stark übergewichtige Kellnerin, die mit einem Lächeln zwei Teller mit Essen serviert.

01:18:26.320 --> 01:18:28.640
 Vielleicht sollte man da den Image-Filter noch mal drüber laufen lassen.

01:18:28.640 --> 01:18:30.080
 Aber nee, das passt schon, das ist ...

01:18:30.080 --> 01:18:33.080
 Face, äh, Face, äh, ja, genau, Face-Things.

01:18:33.080 --> 01:18:35.080
 Aber ist egal, das passt schon, das ist, das ist genau so ...

01:18:35.080 --> 01:18:37.080
 Ich würde sagen, äh ...

01:18:37.080 --> 01:18:38.080
 Genau.

01:18:38.080 --> 01:18:39.360
 Ich mein, das ist sehr witzig.

01:18:39.360 --> 01:18:44.960
 Ich hab das aus Spaß reingeschrieben in die Show Notes, weil ich eben diesen Vertipper und diesen Verleser hatte.

01:18:44.960 --> 01:18:46.080
 Ja, ein paar Sekunden später hat das ...

01:18:46.080 --> 01:18:47.840
 Ich hab das durchgeführt, das ist das Bild.

01:18:47.840 --> 01:18:49.840
 Wieso ist da jetzt plötzlich ein Bild drin?

01:18:49.840 --> 01:18:51.840
 Und dann seh ich: Ah, okay.

01:18:51.840 --> 01:18:53.840
 Eine dicke Kellnerin, sehr gut.

01:18:53.840 --> 01:18:54.840
 Ähm ...

01:18:54.840 --> 01:18:57.840
 Ja, aber das ist auch interessant, äh, das Server ...

01:18:57.840 --> 01:19:01.840
 Das ist ja ... Also, ich find das so aus ... aus ... aus Gender-Sicht interessant.

01:19:01.840 --> 01:19:04.960
 Ich hab natürlich an einen Mann gedacht, bei Kellner, ne?

01:19:04.960 --> 01:19:05.960
 Mhm.

01:19:05.960 --> 01:19:07.960
 Und, ähm, es kam jetzt aber eine Frau raus.

01:19:07.960 --> 01:19:10.520
 Oder zumindest eine weiblich gelesene Person.

01:19:10.520 --> 01:19:16.600
 Ich hab mehrere Iterationen gemacht, also, es kam auch, ähm, das war halt die erste, und es kamen dann auch noch männliche Kellner.

01:19:16.600 --> 01:19:17.600
 Nee, das fand ich gut.

01:19:17.600 --> 01:19:18.600
 Das fand ich gut.

01:19:18.600 --> 01:19:22.000
 Das ist halt im Englischen, es gibt halt einfach diese Unterscheidung nicht.

01:19:22.000 --> 01:19:23.000
 Genau.

01:19:23.000 --> 01:19:24.000
 Gut.

01:19:24.000 --> 01:19:26.120
 Ja, dann sind wir auch schon durch mit dem Thema.

01:19:26.120 --> 01:19:31.080
 Das war relativ abstrakt heute, glaub ich, aber es ist vielleicht mehr so ein, äh ...

01:19:31.080 --> 01:19:34.280
 weniger ein "Wir erklären euch ganz genau, wie das geht, sondern mehr so ein Häppchen."

01:19:34.280 --> 01:19:40.880
 Richtig, eher so ein Anreiz, so "Hey, guck mal, das gibt's", weil ich glaub, dass viele von diesen Observern vielleicht auch gar noch nicht gehört haben, ähm, und ...

01:19:40.880 --> 01:19:41.880
 Genau.

01:19:41.880 --> 01:20:00.320
 Ja, schaut euch das an, also, ich mein, das machen wir hier auch, dass wir einfach Sachen sagen, "Hey, guck mal, das gibt's überhaupt", und, äh, mehr Details erhaltet ihr in den Links, und, äh, oder ihr könnt mal dran denken, also, klar, das nächste Mal, wenn ihr in der Situation seid, "Ah, ich brauch, ich muss bei Resize irgendwas machen", dann denkt ihr halt eben vielleicht nicht, "Ah, dann mach ich halt wieder Add-Event-Listener-Resize",

01:20:00.320 --> 01:20:06.520
 und mach hier "Get Bown-In-Client-Racked", sondern ihr wisst, "Ah, da gab's doch was", und dann guckt ihr nochmal da.

01:20:06.520 --> 01:20:08.520
 Vielleicht aber eh nur so alte Leute wie mir.

01:20:08.520 --> 01:20:09.520
 Vielleicht.

01:20:09.520 --> 01:20:18.080
 Ja, gut, dann, äh, sind wir durch mit dem Thema. Mensch, heute alles echt zackig.

01:20:18.080 --> 01:20:21.520
 Raggi-zacki, aber wir sind trotzdem schon bei anderthalb Stunden.

01:20:21.520 --> 01:20:25.720
 Ja, ich fäng dann, dann machen wir jetzt noch das "Geil-Teil", und dann, dann ist es auch gut, ne?

01:20:25.720 --> 01:20:26.720
 Ajo, Dohane.

01:20:26.720 --> 01:20:27.720
 Das "Geil-Teil".

01:20:27.720 --> 01:20:29.720
 "Geil-Teil".

01:20:29.720 --> 01:20:31.720
 "Geil-Teil".

01:20:31.720 --> 01:20:32.720
 "Geil-Teil".

01:20:32.720 --> 01:20:34.720
 "Geil-Teil".

01:20:34.720 --> 01:20:35.720
 Das war live.

01:20:35.720 --> 01:20:37.720
 Ähm, ja.

01:20:37.720 --> 01:20:47.920
 Etwas, ein kleines, das sind eigentlich zwei. Das eine, das mache ich, weil ich euch das Outro ersparen will, was wir schon mal hatten.

01:20:47.920 --> 01:20:52.120
 Ähm, weiß nicht, ob ihr das schon angehört habt. Egal, äh, wir fangen mit dem, äh, mit dem ersten fangen wir an, oder?

01:20:52.120 --> 01:20:53.120
 Wie wär's, wir fangen mal an mit dem ersten.

01:20:53.120 --> 01:20:55.120
 Ja, ja, das ist gut, ja.

01:20:55.120 --> 01:21:08.120
 Und zwar gibt es jetzt, äh, "canidev.tools". Äh, also ihr kennt vielleicht "can I use" und "can I email" und keine Ahnung, was es sonst noch alles gibt, ähm, es gibt auch "canidev.tools".

01:21:08.120 --> 01:21:17.120
 Und das ist, äh, eine Liste, ähm, von, von Features, von Dev-Tools in Browsern und von welchem Browser sie unterstützt werden.

01:21:17.120 --> 01:21:19.120
 Und das finde ich ziemlich, äh, ziemlich hilfreich.

01:21:19.120 --> 01:21:27.920
 Also erstens, weil man dadurch, weil man dadurch neue Features vielleicht entdeckt, die man in seinem Standardbrowser gar nicht hat, aber denkt so, ey, das, das wäre doch mal nützlich, wenn ich irgendwie entwickle.

01:21:27.920 --> 01:21:40.720
 Ähm, das war bei mir früher so, als ich Firefox verwendet hab noch, ich hab, ich hab eine Weile Firefox verwendet zum Entwickeln, ähm, also noch gar nicht, noch gar nicht so lange her, äh, deswegen sag ich jetzt, weil früher haben alle Firefox verwendet zum Entwickeln mit Firebug.

01:21:40.720 --> 01:21:46.320
 Ich meine aber später danach nochmal, als irgendwie Firefox-Quantum rauskam, ähm, hab ich dann gesagt, ha, jetzt mach ich das nochmal und hab ich ein paar Jahre noch benutzt.

01:21:46.320 --> 01:22:00.000
 Wusste aber, dass es, ähm, in Chrome, in den Dev-Tools, äh, was gibt, was es in Firefox damals nicht gab, nämlich, ähm, dass man dieses Break-On, kennst du das?

01:22:00.000 --> 01:22:12.760
 Also, dass das JavaScript, ähm, dass das ein Break-Point gesetzt wird, ähm, sobald zum Beispiel sich im DOM was ändert. Also, quasi, äh, wie wir jetzt heute gelernt haben, Mutation Observer, wenn man so will, ne?

01:22:12.760 --> 01:22:27.340
 Ja, ähm, dass dann aber tatsächlich ein Break-Point genau an die Stelle ins JavaScript geht, das dann eben diesen, diesen Change ausgelöst hat. Und das gab's halt, ich weiß nicht, ob's das mittlerweile in Firefox gibt, gab's damals nicht. Und das heißt, ich bin dann immer, um das zu machen, hab ich dann halt Chrome aufgemacht.

01:22:28.440 --> 01:22:39.020
 Und darum gibt's in Firefox was, was ich, was meines Wissens nach bis heute in Chrome nicht gibt, ähm, nämlich, äh, dieses, dass man angezeigt kriegt, welche Schriftart wirklich geladen wird jetzt.

01:22:39.020 --> 01:22:42.920
 Also, welche Schriftart ist das jetzt gerade? Und dann so, mit so, mit noch, mit noch Font-Infos dabei.

01:22:42.920 --> 01:22:47.780
 Firefox hatte zum Beispiel auch den ersten Grid-Inspektor, sowas gibt's mittlerweile, glaub ich, in Chrome auch.

01:22:47.780 --> 01:22:55.980
 Aber genau für solche Sachen, wo die einen Dev-Tools was können und die anderen vielleicht nicht, ist es total nützlich, aber auf Can-I-Dev-Tools mal zu gucken, was gibt's denn so?

01:22:55.980 --> 01:23:02.280
 Und dann kann man sagen, ah, in dem Browser kann ich irgendwie dieses Tool, also hier, keine Ahnung, was gibt's denn zum Beispiel jetzt hier?

01:23:02.280 --> 01:23:09.000
 Ich geh jetzt einfach mal zum Spaß auf Accessibility, ähm, und sehe dann zum Beispiel in Safari gibt's keinen Find-Color-Contrast.

01:23:09.020 --> 01:23:12.620
 äh, und kein Show-Tab-Order, das gibt's aber in allen anderen.

01:23:12.620 --> 01:23:16.920
 Ähm, oder den Accessibility-Tree kann ich nicht angucken.

01:23:16.920 --> 01:23:25.540
 Ähm, aber in den anderen geht's. Also, wenn jetzt Safari mein Entwicklungsbrowser ist, kann ich sagen, okay, gut, ich könnte aber jetzt das in, in Chrome oder in Firefox, hab ich das, da kann ich das, äh, kann ich das machen.

01:23:25.540 --> 01:23:38.220
 Ähm, oder beispielsweise, ich geh mal jetzt zu JavaScript, ähm, ich denke, das wird auch noch erweitert werden, diese Liste, weil die sind noch nicht so richtig, da könnte meiner Meinung nach noch viel mehr drin sein, weil ich glaube, äh, da ...

01:23:38.220 --> 01:23:41.660
 Ja, man kann da auch selber dazu beitragen, man kann auf GitHub da Pull-Requests stellen.

01:23:41.660 --> 01:24:00.440
 Genau, das wollte ich, genau, also die Listen, die Listen sind noch relativ klein, ähm, aber es ist halt dann, ja, im Prinzip gibt's, da sind auch keine Browser-Versionen drin derzeit, es ist einfach nur, äh, wahrscheinlich die neueste Version, nehm ich mal an, auf die, die sich bezieht, äh, von, von den, äh, was haben wir hier, Chrome, Firefox, Edge, Safari und Opera, glaube ich.

01:24:01.080 --> 01:24:07.720
 Ähm, und das ist einfach nur ein Haken oder eben, eben keine, also, oder eben, ja, gibt's oder gibt's nicht. Es ist relativ einfach noch diese Daten, genau.

01:24:08.120 --> 01:24:26.440
 Und ich finde dieses Interface ganz cool gemacht, ähm, du kannst da irgendwie dann auch sortieren, äh, und, und kannst die einzelnen Kategorien durchgehen, also Konsole, Elemente, JavaScript, Network, Other, Sources, Accessibility, ähm, hast auch ein Filter, wo du eintippen kannst, wenn du irgendwie was Bestimmtes suchst.

01:24:26.440 --> 01:24:47.900
 Ähm, siehst dann auch, äh, wenn du auf All gehst, ich glaub nicht, das glaubst du bei allen, aber bei All ist es am eindrucksvollsten, ähm, welcher Browser wie viele von denen unterstützt, und da ist Chrome halt zum Beispiel ganz vorne mit 93, aber hat auch nicht alles, weil zum Beispiel at Audio Breakpoint, gibt's in Chrome nicht, aber dafür in Safari, äh, at Audio Breakpoint.

01:24:47.900 --> 01:25:07.400
 Wäre ich nie drauf gekommen, dass man sowas braucht, aber, ähm, ja, ich entwickle ja auch nicht mit der, äh, Web Audio API. Ähm, da sieht man dann zum Beispiel, äh, ja, also Chrome ist ganz vorne, äh, leider Safari irgendwie weit hinten, aber ich glaube, die Jen Simmons, äh, bei, bei Apple, die ist da, die ist da ganz vorne mit dabei, ähm, dass da jetzt sich ganz viel tut.

01:25:07.400 --> 01:25:17.500
 Also, ziemlich coole, äh, Übersicht, falls ihr mal irgendwie ein bestimmtes Tool sucht und denkt, ja, gibt's das denn eigentlich in meinem Browser, ähm, und genau, was du vorhin noch gesagt hast, da kann man auch selbst was hinzufügen,

01:25:17.500 --> 01:25:27.340
 und das find ich tatsächlich ganz witzig gelöst, weil auf dieser Seite hast du einen Add New Button, und wenn du auf den draufdrückst, dann kannst du, kommst du direkt zu GitHub, um Issue zu eröffnen.

01:25:27.340 --> 01:25:32.380
 Und das gibt auch, wenn du, wenn du eins ausgewählt hast, gibt's auch einen Edit Button, und dann kommst du auch, äh, an die entsprechende Stelle.

01:25:32.380 --> 01:25:39.220
 Ah, das hab ich noch gar nicht gesehen. Ah ja, da gibt's einen Edit Button, und dann komm ich auch direkt, ja, dann kann ich direkt, da komm ich zu Fork, dann kann ich direkt Forken.

01:25:39.220 --> 01:25:41.480
 Ja, das find ich deswegen eine schöne Identifikation.

01:25:41.480 --> 01:25:47.260
 Also direkt auch zu der Datei, Add Inline Styles jetzt zum Beispiel, also je nachdem, wo du da klickst, ist gut gemacht.

01:25:48.060 --> 01:26:00.440
 Würde mich interessieren, ob das ein Framework ist, was sie da genutzt haben, um aus dem Repo das zu generieren. Muss ich mir mal angucken, ja, also find ich, find ich echt schön. Also das Tool schön, ähm, die Art und Weise, wie's gemacht ist, schön. Schönes Geilteil.

01:26:01.300 --> 01:26:13.080
 Ja, dankeschön. Also, äh, ich denk, ich werd's die nächste Zeit auf jeden Fall noch ein paar Mal verwenden. Und, ähm, eigentlich find ich's auch total interessant wegen dieser Integration mit GitHub, das ist, das ist eine Sache, die man sich da echt abgucken kann.

01:26:13.080 --> 01:26:25.740
 Ich hab auch noch nicht auf jeden Knopf da draufgedrückt, den's da gibt. Äh, ich glaub, da gibt's vielleicht noch einiges zu entdecken. Okay, und so, weil ich euch einfach nicht entlassen kann, ohne was, ohne euch ein bisschen zu quälen.

01:26:25.740 --> 01:26:40.380
 Ohne Quatsch. Ohne Quatsch geht's halt nicht. Ähm, vielleicht erinnert sich der eine oder die andere an ein Outro, was wir mal hatten. Ähm, oh, ich hab's jetzt gerade aus Versehen schon gestartet, oh Gott, nein, ich kann's jetzt auf keinen Fall hören.

01:26:42.300 --> 01:26:56.480
 Ähm, und, äh, immer wieder, immer wieder hab ich viel mehr ein, es gibt doch diesen einen Menschen, der so, der so, äh, bekannte Stücke irgendwie mit, mit schräg klingender Flöte spielt.

01:26:56.480 --> 01:27:12.280
 Und ich weiß nicht, ob wir's vielleicht schon mal verlinkt haben, aber ich müsste jetzt einfach da nochmal durch. Ähm, Chariots of Fire, allerdings mit schlecht gespielter Blockflöte. Ähm, wer, also, vielleicht kennt ihr das Lied nicht, ähm, vom Namen her, aber wenn ihr's dann hört,

01:27:12.300 --> 01:27:14.780
 hört, dann kennt ihr's im Zusammenhang mit irgendwelchen, äh.

01:27:14.780 --> 01:27:17.740
 Ich hab bestimmt schon mal eine Szene gesehen, wo jemand in Zeitlupe rennt.

01:27:17.740 --> 01:27:34.280
 Ja, genau, wo jemand in Zeitlupe rennt, oder irgendwelche Olympiadensachen irgendwie, ich glaub, daher kenn ich's, oder zumindest bilde ich's mir ein, dass, dass es früher dafür verwendet wurde. Ähm, das mit Flöte, das ist quasi das, das inoffizielle Outro der Sendung heute. Wir haben natürlich noch das.

01:27:34.280 --> 01:27:37.880
 Ich hab's mir vorhin schon angehört, ja. Es lohnt sich.

01:27:37.980 --> 01:27:52.680
 Und es fängt, es fängt, es fängt auch einfach sehr, sehr, ähm, nett an und wird dann merkwürdig. Und, äh, ich kann's auf jeden Fall nur empfehlen. Also, Chariots of Fire von DJ Dettweiler Flute Emotional Remix heißt das.

01:27:52.680 --> 01:28:00.620
 Auch noch, ja. Es ist, äh, auf Soundcloud, da war ich auch schon länger nicht mehr. Das ist, äh, die, die machen, dass es die immer noch gibt.

01:28:00.620 --> 01:28:01.260
 Mhm.

01:28:01.260 --> 01:28:08.740
 Finde ich, finde ich irgendwie, ähm, ja, bemerkenswert. Und irgendwie hat sich auch, das Layout der Seite hat sich auch seit 100 Jahren nicht verändert, aber es war vielleicht auch einfach gut.

01:28:08.740 --> 01:28:22.860
 Es funktioniert, genau. Ähm, ja, das, hört, hört euch das mal an. Und ich, äh, nehme aber keine, keine Beschwerden oder Klagen entgegen. Beschwert euch, wenn, wenn das eure Ohren kaputt macht, beschwert euch einfach bei Olli Schulz.

01:28:22.860 --> 01:28:26.160
 Oder so. Weil nicht bei mir.

01:28:26.160 --> 01:28:27.380
 Sehr gut.

01:28:27.380 --> 01:28:29.560
 Sagt nicht, ich hätte euch nicht gewarnt.

01:28:31.220 --> 01:28:33.860
 Genau. Damit, ähm, ja.

01:28:33.860 --> 01:28:36.100
 Ist das geil, könnte sein.

01:28:36.100 --> 01:28:37.140
 Und dann kommt jetzt.

01:28:37.140 --> 01:28:38.460
 Ist das geil, oder? Oh Gott, nein.

01:28:38.460 --> 01:28:41.260
 Das Ende.

01:28:41.260 --> 01:28:44.240
 Ey, aber der Satz hat gepasst.

01:28:44.240 --> 01:28:45.600
 Immerhin.

01:28:45.600 --> 01:28:49.920
 Aus Versehen, ne?

01:28:49.920 --> 01:28:51.280
 Ja.

01:28:51.280 --> 01:28:53.220
 Mensch, wir haben es wieder geschafft.

01:28:53.220 --> 01:28:55.840
 Auch wenn, wenn ein bisschen später, äh, als geplant.

01:28:55.840 --> 01:28:58.600
 Ähm, wir haben eine, oh, nur eineinhalb Stunden, Mensch.

01:28:58.600 --> 01:29:00.680
 Das ist, wir sind ja quasi, kriegst recht durchgegangen.

01:29:00.700 --> 01:29:02.420
 Ganz kurze Folge hier.

01:29:02.420 --> 01:29:03.720
 Wahnsinn.

01:29:03.720 --> 01:29:08.080
 Naja, ihr sollt ja was kriegen für euer Geld, oder irgendwie so, ne?

01:29:08.080 --> 01:29:10.340
 Ihr sollt ja nichts kriegen für euer Geld.

01:29:10.340 --> 01:29:11.240
 Apropos euer Geld.

01:29:11.240 --> 01:29:12.680
 Apropos euer Geld.

01:29:12.680 --> 01:29:17.560
 Jetzt habe ich natürlich noch keine Jingles produziert, die euch nach eurem Geld fragen.

01:29:17.560 --> 01:29:19.280
 Aber dann fragen wir jetzt einfach nochmal danach.

01:29:19.280 --> 01:29:21.520
 Wenn, äh, wenn euch das gefallen hat hier.

01:29:21.520 --> 01:29:26.460
 Wenn euch das, ja, das mache ich jetzt nochmal Freestyle, aber es kommen vielleicht, ja, irgendwann, wenn ich noch,

01:29:26.460 --> 01:29:28.860
 ach, mich muss die Muse küssen.

01:29:28.960 --> 01:29:31.560
 Es kann sein, dass es morgen ist, vielleicht auch in den ersten sieben Jahren.

01:29:31.560 --> 01:29:33.100
 Man weiß es nicht so genau.

01:29:33.100 --> 01:29:36.380
 Die, die Muse kommt und dann steckt sie einem die Zunge in den Hals.

01:29:36.380 --> 01:29:37.240
 So ist es halt manchmal.

01:29:37.240 --> 01:29:39.400
 Und manchmal bleibt sie halt einfach weg.

01:29:39.400 --> 01:29:41.540
 Ähm, genau.

01:29:41.680 --> 01:29:53.640
 Aber wenn euch das gefallen hat, ähm, dann denkt doch drüber nach, uns zu unterstützen, ähm, auf wo wir sind, ist vorne.show oder www.siv.de slash unterstützen.

01:29:54.600 --> 01:29:56.800
 Könnt ihr mal schauen, wie ihr uns unterstützen könnt.

01:29:56.800 --> 01:29:57.800
 Es gibt verschiedene Möglichkeiten.

01:29:57.800 --> 01:29:59.500
 Ihr könnt uns eine Spende da lassen.

01:29:59.500 --> 01:30:01.140
 Ihr könnt uns bei Twitch abonnieren.

01:30:01.140 --> 01:30:02.280
 Ihr könnt uns bei YouTube folgen.

01:30:02.280 --> 01:30:03.720
 Ihr könnt uns bei Twitter folgen.

01:30:03.720 --> 01:30:05.760
 Ihr könnt unser Merch kaufen.

01:30:05.760 --> 01:30:08.820
 Äh, ihr könnt uns was von unseren Wunschlisten schenken.

01:30:08.820 --> 01:30:13.940
 Ihr könnt dem Konstantin, äh, obskure, äh, Oliven schicken aus Spanien.

01:30:14.320 --> 01:30:15.480
 Es gibt eine Menge Möglichkeiten.

01:30:15.480 --> 01:30:19.760
 Wir würden uns sehr freuen, ähm, äh, wenn wir was zurückkriegen.

01:30:19.760 --> 01:30:22.120
 Und, äh, wir freuen uns auch sehr über Feedback.

01:30:22.120 --> 01:30:26.480
 Also, wenn ihr irgendwas habt, wenn wir irgendwas mal wieder falsch gesagt haben, dann gerne auch.

01:30:26.480 --> 01:30:28.240
 Oder auch, wenn wir was besonders gut gemacht haben.

01:30:28.240 --> 01:30:29.460
 Das freuen wir besonders gerne.

01:30:29.460 --> 01:30:30.740
 Genau.

01:30:30.740 --> 01:30:37.760
 Also, nach der letzten Sendung, wo wir, wo wir so einen kleinen Aufruf gestartet haben, kamen tatsächlich, äh, ich glaube, äh, ein paar Spenden.

01:30:37.760 --> 01:30:40.600
 Nee, nicht glaube, ich weiß, ein paar Spenden kamen tatsächlich rein.

01:30:40.600 --> 01:30:42.540
 Vielen, vielen Dank an der Stelle nochmal.

01:30:43.260 --> 01:30:44.680
 Ähm, damit hab ich gar nicht gerechnet.

01:30:44.680 --> 01:30:46.700
 Und die waren teilweise auch gar nicht so klein.

01:30:46.700 --> 01:30:48.560
 Ähm, also vielen Dank.

01:30:48.560 --> 01:30:50.080
 Und es kam auch tatsächlich Feedback.

01:30:50.080 --> 01:30:56.040
 Auch in Form von Kommentaren oder auf Twitter, äh, wo man uns geschrieben hat, dass es schön war, dass mal wieder eine Folge kam.

01:30:56.040 --> 01:31:01.640
 Und, äh, das ist schön zu sehen, dass, dass wir Menschen damit auch eine Freude machen, wenn wir, wenn wir hier reden.

01:31:01.640 --> 01:31:03.520
 Genau.

01:31:03.520 --> 01:31:05.700
 Das war bisher immer so, bis auf heute.

01:31:05.700 --> 01:31:07.360
 Heute hört das auf.

01:31:07.360 --> 01:31:08.420
 Nein, Spaß.

01:31:08.420 --> 01:31:09.600
 Ähm, genau.

01:31:09.600 --> 01:31:13.140
 Wenn ihr könnt, äh, und wir, es reicht uns.

01:31:13.200 --> 01:31:20.180
 Es reicht auch schon, wenn ihr uns, äh, eine Bewertung, eine schöne, positive, natürlich gute, positive Bewertung bei Podcastportalen, äh, gebt.

01:31:20.180 --> 01:31:28.120
 Oder auch bei Spotify, weil ich habe, glaube ich, gesehen, dass es da noch, ähm, eher mau ist mit den, äh, mit den Bewertungen.

01:31:28.120 --> 01:31:35.200
 Und da steht irgendwie ab, erst ab einer gewissen Mindestzahl und ich weiß nicht, wie die ist, weiß nicht genau, welche das ist, werden die Bewertungen überhaupt angezeigt?

01:31:35.660 --> 01:31:37.140
 Ich glaube, die haben wir noch nicht erreicht.

01:31:37.140 --> 01:31:37.540
 Aha.

01:31:37.540 --> 01:31:40.740
 Also, äh, falls ihr uns bei Spotify hört.

01:31:40.740 --> 01:31:41.520
 Ab auf Spotify, wenn ihr dort seid.

01:31:41.520 --> 01:31:42.420
 Genau.

01:31:42.420 --> 01:31:48.760
 Falls ihr uns bei Spotify hört oder falls ihr uns nicht bei Spotify hört, könnt ihr uns trotzdem dort eine gute Bewertung abgeben. Das wäre sehr schön.

01:31:48.760 --> 01:31:50.280
 Ja.

01:31:50.280 --> 01:31:51.140
 Okay.

01:31:51.140 --> 01:31:51.660
 Hast du noch was?

01:31:51.660 --> 01:31:52.480
 Ich hab nix mehr.

01:31:52.800 --> 01:31:57.180
 Und, äh, ich weiß jetzt noch nicht, wann die Folge dann erscheinen wird, ob wir dann schon gestreamt haben oder nicht.

01:31:57.180 --> 01:32:01.860
 Also, jedenfalls streamen wir oder haben gestreamt am, äh, 7. Oktober.

01:32:01.860 --> 01:32:03.480
 So ist der Plan.

01:32:03.480 --> 01:32:07.160
 Und, äh, ja, schaut rein oder, oder auch nicht.

01:32:07.160 --> 01:32:09.300
 Schaut rein, haut rein.

01:32:09.300 --> 01:32:11.100
 Und, äh.

01:32:11.100 --> 01:32:14.140
 Und, äh, ja, ansonsten, gute Zeit, bis zum nächsten Mal.

01:32:14.140 --> 01:32:16.480
 Ja, macht's gut, bis dann.

01:32:16.480 --> 01:32:16.820
 Ciao.

01:32:16.820 --> 01:32:21.740
 Dö, dö, dö, dö, dö, dö.

01:32:22.800 --> 01:32:24.440
 Dö, dö, dö, dö.