WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: VAR WARS: A New Scope
Publishing Date: 2023-06-12T13:30:07+02:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/var-vars-a-new-scope/

00:00:00.000 --> 00:00:05.180
 Wo wir sind, ist vorne, Folge 57, heute live von der Gulasch-Programmier-Nacht in Karlsruhe.

00:00:05.180 --> 00:00:23.840
 Herzlich willkommen bei Wo wir sind, ist vorne, Frontend-Fakten-Frotzelein,

00:00:23.840 --> 00:00:27.860
 der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

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

00:00:57.580 --> 00:01:06.100
 Ja, herzlich willkommen, schön, dass ihr alle hier seid und schön, dass ihr auch da seid an den Empfangsgeräten zu Hause.

00:01:06.100 --> 00:01:11.460
 Ja, man kann uns nämlich auch, wenn man das jetzt im Podcast hört, man kann uns auch live sehen, also nicht live,

00:01:11.460 --> 00:01:14.740
 aber man kann die Folge, die wir jetzt gerade live aufnehmen, kann man dann im Nachhinein auch sehen.

00:01:14.740 --> 00:01:17.320
 Die UL kommt natürlich in die Shownotes.

00:01:17.320 --> 00:01:18.780
 Genau.

00:01:19.420 --> 00:01:24.400
 Ja, ein paar Menschen haben sich gefunden, ist aber nett, dass wir nicht allein hier sind.

00:01:24.400 --> 00:01:29.260
 Wir machen mal hier so Show of Hands, wer kennt uns denn noch überhaupt nicht?

00:01:29.260 --> 00:01:32.080
 Oh, okay.

00:01:32.080 --> 00:01:32.860
 Fast alle.

00:01:32.860 --> 00:01:34.320
 Also wir müssen uns benehmen.

00:01:35.380 --> 00:01:37.260
 Und wer hört den Podcast ab und zu?

00:01:37.260 --> 00:01:38.400
 Wahrscheinlich die vordere Reihe nur.

00:01:38.400 --> 00:01:39.100
 Ja, okay.

00:01:39.100 --> 00:01:40.000
 Ah, okay.

00:01:40.000 --> 00:01:42.800
 Wer schaut den Stream ab und zu?

00:01:42.800 --> 00:01:44.460
 Okay, auch nur die vordere Reihe.

00:01:44.460 --> 00:01:46.060
 Gut, hab ich mir fast gedacht.

00:01:46.060 --> 00:01:47.480
 Und wer ist nicht freiwillig hier?

00:01:47.480 --> 00:01:48.880
 Okay.

00:01:48.880 --> 00:01:49.560
 Okay.

00:01:49.560 --> 00:01:52.360
 Das ganze Bock ist nicht freiwillig hier.

00:01:52.360 --> 00:01:53.040
 Okay, alles klar.

00:01:53.040 --> 00:01:55.780
 Ja, aber ihr macht das doch, weil es Freude macht, oder?

00:01:56.460 --> 00:01:58.340
 Ja, ja, ja, genau.

00:01:58.340 --> 00:02:02.640
 Ja, genau.

00:02:02.640 --> 00:02:07.080
 Jetzt, glaube ich, da müssen wir uns kurz vorstellen, wer wir sind und was wir so machen.

00:02:07.080 --> 00:02:12.880
 Weil, wenn die meisten hier uns nicht kennen, gut in unserem Podcast, wenn wir es dann später veröffentlichen, dann...

00:02:12.880 --> 00:02:13.920
 Das ist halt langweilig, oder?

00:02:13.920 --> 00:02:20.460
 Ja, egal, aber das sind ja vielleicht dann auch der eine oder die andere dabei, die das dann zum ersten Mal hört.

00:02:20.460 --> 00:02:21.240
 Genau.

00:02:21.240 --> 00:02:23.300
 Ja, ich bin Moritz.

00:02:23.300 --> 00:02:24.280
 Ich bin Konstantin.

00:02:24.620 --> 00:02:28.320
 Wir machen Frontend-Development und wir reden viel drüber, wir reden gerne drüber.

00:02:28.320 --> 00:02:31.500
 Wir machen das jetzt auch schon relativ lange, also wir haben was zu erzählen, glaube ich, oder?

00:02:31.500 --> 00:02:33.620
 Ja, wir erzählen halt was.

00:02:33.620 --> 00:02:40.000
 Also, die Wahrheit ist, also wir haben halt irgendwann mal gesagt, der Unterschied zwischen Podcaster und Nicht-Podcaster ist halt, dass wir halt podcasten.

00:02:40.000 --> 00:02:46.700
 Also, das hat nicht unbedingt jetzt was mit, dass wir schlauer sind als andere zu tun, sondern wir reden halt im Mikrofon statt irgendwo...

00:02:46.700 --> 00:02:51.180
 Genau, wir saßen oft zusammen irgendwie bei einem Bier und haben gesagt, Mensch, eigentlich könnte man da fast einen Podcast draus machen.

00:02:51.180 --> 00:02:53.180
 Und dann haben wir irgendwann zwei Mikros hingestellt und haben das gemacht.

00:02:53.840 --> 00:02:54.880
 Genau, so ist es entstanden.

00:02:54.880 --> 00:02:57.660
 Also, so dieses, ich glaube, viele Podcasts sind so entstanden.

00:02:57.660 --> 00:03:00.920
 So, hey, warum haben wir jetzt nicht gerade ein Mikrofon nebendran gestellt und beim nächsten Mal haben wir es dann gemacht.

00:03:00.920 --> 00:03:04.560
 Haben dann zwischendurch noch ein halbes Jahr damit verbracht, die Webseite zu programmieren.

00:03:04.560 --> 00:03:05.680
 Ungefähr.

00:03:06.380 --> 00:03:10.080
 Weil wir halt Frontendler sind, das muss dann halt irgendwie halbwegs fein aussehen.

00:03:10.080 --> 00:03:11.700
 Genau, vier Jahre machen wir das jetzt, glaube ich schon, ne?

00:03:11.700 --> 00:03:12.720
 Dieses Jahr.

00:03:12.720 --> 00:03:13.740
 So lange, oh Gott.

00:03:13.740 --> 00:03:17.980
 Ja, ähm, ja, was machen wir so im Podcast?

00:03:17.980 --> 00:03:21.640
 Wir erzählen aus unserem Development-Alltag.

00:03:21.640 --> 00:03:25.280
 Wir schauen uns immer mal wieder neue Sachen an.

00:03:25.280 --> 00:03:28.920
 Kommen wir auch nachher gleich noch zu verschiedenen Kategorien, die wir da haben.

00:03:28.920 --> 00:03:31.120
 Sollen wir mit was zu trinken?

00:03:31.180 --> 00:03:31.780
 Wir sitzen auf dem Trocknen.

00:03:31.780 --> 00:03:32.720
 Ja, wir müssen, wir müssen jetzt.

00:03:32.720 --> 00:03:37.720
 Genau, wir haben nämlich immer traditionell, beginnen wir jede Folge mit einem Kaltgetränk.

00:03:37.720 --> 00:03:40.000
 Früher war es immer Bier.

00:03:40.000 --> 00:03:42.940
 Aber irgendwann haben wir irgendwann gesagt, wir werden schon zu Podcast-Alkoholikern.

00:03:43.560 --> 00:03:46.720
 Deswegen ist es jetzt oft was Alkoholfreies, aber heute habe ich tatsächlich auch wieder

00:03:46.720 --> 00:03:47.240
 was Alkoholik.

00:03:47.240 --> 00:03:48.020
 Aber das ist serious.

00:03:48.020 --> 00:03:51.320
 Wenn man dann irgendwann einmal die Woche streamt und einmal die Woche podcastet, dann trinkt

00:03:51.320 --> 00:03:53.520
 man mindestens zwei Flaschen Bier pro Woche.

00:03:53.520 --> 00:03:54.240
 Und das ist schon regelmäßig.

00:03:54.240 --> 00:03:54.640
 Das ist regelmäßig.

00:03:54.640 --> 00:03:56.880
 Das ist auch so Fragebögen, so trinken Sie regelmäßig Alkohol.

00:03:56.880 --> 00:04:01.960
 Aber ich habe heute also tatsächlich ausnahmsweise zur Feier des Tages, ähm, ich hatte, ich

00:04:01.960 --> 00:04:04.280
 hatte, ich hatte, nee, wo ist mein Becher?

00:04:04.280 --> 00:04:05.220
 Ah, das ist mein Becher.

00:04:05.220 --> 00:04:05.580
 Sehr gut.

00:04:05.580 --> 00:04:10.320
 Ich war ja im Urlaub in Österreich oder an der Grenze zu Österreich und habe dir was mitgebracht.

00:04:10.320 --> 00:04:12.640
 Und zwar einmal vom Stiegelbräu in Salzburg.

00:04:12.740 --> 00:04:13.440
 Das ist jetzt wie, ja.

00:04:13.440 --> 00:04:14.940
 Das ist eigentlich für jetzt hier.

00:04:14.940 --> 00:04:17.420
 Schneeweißchen und Orangenrot heißt das, so ein Bier.

00:04:17.420 --> 00:04:20.760
 Und Almdudler, Marte, Guarana.

00:04:20.760 --> 00:04:22.460
 Das ist auch ein sehr hübsches Etikett.

00:04:22.460 --> 00:04:25.240
 Almdudler, Marte, Guarana.

00:04:25.240 --> 00:04:29.340
 Und hier den guten alten Flaschen, Dosenöffner, universell von der Oma, Erbstück.

00:04:29.340 --> 00:04:29.840
 Sehr gut.

00:04:29.840 --> 00:04:35.060
 Das ist, ja, in der Zeit, als man noch Sachen so produziert hat, dass sie 100 Jahre halten.

00:04:35.060 --> 00:04:41.060
 Aber hier, Marte, Guarana, Almdudler, das klingt so ein bisschen wie Bio-Brause-Pastinake oder so.

00:04:41.920 --> 00:04:43.960
 Der eine oder andere kennt es vielleicht vom Känguru.

00:04:43.960 --> 00:04:44.800
 Ich habe es leider nicht erfunden.

00:04:44.800 --> 00:04:47.620
 So, was, wie, achso, Moment.

00:04:47.620 --> 00:04:48.640
 Muss ich jetzt entscheiden, was du...

00:04:48.640 --> 00:04:48.980
 Das ist ja gar nicht.

00:04:48.980 --> 00:04:51.020
 Achso, wir fangen hier mit, ich will das jetzt mal probieren.

00:04:51.020 --> 00:04:51.960
 Achtung, das schäumt ein bisschen.

00:04:51.960 --> 00:04:53.840
 Das ist von dem Rad durchgeschüttelt worden.

00:04:53.840 --> 00:04:55.740
 Achso, du hast auch eine.

00:04:55.740 --> 00:04:55.980
 Perfekt.

00:04:55.980 --> 00:04:56.940
 Ja, ja, ich habe, äh, so.

00:04:56.940 --> 00:04:59.700
 Okay, und dann, aber warte mal, das ist gleich auch noch aufmachen.

00:04:59.700 --> 00:05:01.120
 Achso, hier für ASMR.

00:05:01.120 --> 00:05:06.380
 Das machen wir in unserem Podcast und Stream immer, dass wir alle mithören dürfen, wie

00:05:06.380 --> 00:05:07.460
 sie unsere Getränke anhören.

00:05:07.460 --> 00:05:10.100
 Ihr wartet auf Technik und so, gell?

00:05:10.100 --> 00:05:11.860
 Tja, da könnt ihr lange warten.

00:05:13.340 --> 00:05:16.480
 Also es ist oft so, dass wir irgendwie eine Dreiviertelstunde brauchen in der Folge, bis

00:05:16.480 --> 00:05:17.760
 wir dann zum Technikteil kommen.

00:05:17.760 --> 00:05:20.440
 Aber die Folgen sind auch manchmal vier Stunden lang, also.

00:05:20.440 --> 00:05:23.060
 Genau, heute haben wir nur eine, also wir müssen uns, glaube ich, ein bisschen ranhalten.

00:05:23.060 --> 00:05:24.460
 Jetzt können wir echt mal in echt Anstoß.

00:05:24.680 --> 00:05:28.440
 Normalerweise stoßen wir immer durch ein Portal an, weil jeder bei sich zu Hause sitzt.

00:05:28.440 --> 00:05:30.460
 Aber, mhm.

00:05:30.460 --> 00:05:34.860
 Man muss dazu sagen, vielleicht für die, die es jetzt nicht sehen können, es ist eine

00:05:34.860 --> 00:05:35.900
 sehr, sehr kleine Flasche.

00:05:35.900 --> 00:05:37.880
 Ähm, null.

00:05:37.880 --> 00:05:38.480
 Nee, weiß ich nicht.

00:05:38.480 --> 00:05:39.520
 Orangenrot, wer ist noch?

00:05:39.520 --> 00:05:40.440
 Der ist da drauf gekommen.

00:05:40.440 --> 00:05:43.040
 Kostnotiz des Braumeisters.

00:05:43.040 --> 00:05:43.840
 Ich lese kurz vor.

00:05:43.840 --> 00:05:49.720
 Strohblond, schaumgekrönt, fruchtig, runde, Zitrusorangenaromatik, schlank und mild,

00:05:49.720 --> 00:05:52.200
 angenehm, spritzig und belebend, trockener Abgang.

00:05:52.200 --> 00:05:53.020
 Also eigentlich alles.

00:05:53.100 --> 00:05:53.920
 Habe ich jetzt nicht gemerkt.

00:05:53.920 --> 00:05:54.780
 Schmeckt halt nach Bier.

00:05:54.780 --> 00:05:55.360
 Ja.

00:05:55.360 --> 00:05:56.260
 So.

00:05:56.260 --> 00:05:57.400
 Äh, genau.

00:05:57.400 --> 00:05:57.920
 Also wir machen...

00:05:57.920 --> 00:05:59.320
 Der Biersummel hier spricht aus dir.

00:05:59.320 --> 00:06:00.240
 Du hast richtig Ahnung.

00:06:00.240 --> 00:06:03.680
 Ähm, wir, äh, genau, wir machen den Podcast, wir haben aber auch seit, glaube ich, zwei

00:06:03.680 --> 00:06:06.460
 Jahren jetzt einen Stream, wo wir dann ein bisschen mehr, weil Podcast ist immer schwierig,

00:06:06.460 --> 00:06:11.020
 Technikthemen, Programmierung beibringen durch nur Hören, ähm, und dann haben wir

00:06:11.020 --> 00:06:13.400
 gesagt, wir machen einfach, oder ich habe gesagt, wir machen einen Stream, ich musste dann

00:06:13.400 --> 00:06:15.000
 morgens ein bisschen, äh, überrumpeln.

00:06:15.000 --> 00:06:16.100
 Stimmt, das war komisch.

00:06:16.100 --> 00:06:20.020
 Ich musste Konstantin dazu überreden, dass, was wir Podcast machen, und er musste mich dazu

00:06:20.020 --> 00:06:23.160
 überreden, mein Radiogesicht, äh, ins Fernsehen zu halten.

00:06:23.160 --> 00:06:26.820
 war eigentlich, hey, cool, dann können wir mehr Technik zeigen, und, äh, manchmal klappt

00:06:26.820 --> 00:06:29.280
 das, und manchmal machen wir auch andere Dinge.

00:06:29.280 --> 00:06:32.940
 Ja, oft ist es so, auch so gemeinsam mit der Community, wir, wir, wir wissen nicht, ob

00:06:32.940 --> 00:06:35.940
 das stimmt, aber wir, wir behaupten einfach, wir sind Deutschlands einziger Stream mit

00:06:35.940 --> 00:06:37.400
 Faxnummer, also man kann uns einen Fax schicken.

00:06:37.400 --> 00:06:41.200
 Genau, könnt ihr rechts oben sehen, also, äh, Faxnummer könnt ihr uns wirklich schicken,

00:06:41.200 --> 00:06:42.960
 ihr könnt uns auch jetzt einen Fax schicken, wenn ihr Lust habt.

00:06:42.960 --> 00:06:45.720
 Genau, wenn, wenn, wenn das reinkommt, lesen wir es am Ende der Sendung vor.

00:06:45.720 --> 00:06:48.360
 Gucken wir mal, gucken wir mal kurz rein, ob wir einen Fax gekriegt haben, und dann würden

00:06:48.360 --> 00:06:49.180
 wir das vielleicht auch zeigen.

00:06:49.180 --> 00:06:54.720
 Äh, genau, und Hot Hub Stream, lasst euch davon nicht irritieren, dann müsst ihr bei Twitch

00:06:54.720 --> 00:06:57.760
 mal dazu kommen, dann erklären wir das genauer, was es damit auf sich hat.

00:06:57.760 --> 00:07:01.540
 Genau, also, da produzieren wir auf immer so vorteilhafte Bilder wie das hier, oder ich

00:07:01.540 --> 00:07:06.560
 spring nochmal irgendwo anders hin, also, ist immer, ist immer sehr, manchmal, manchmal

00:07:06.560 --> 00:07:11.380
 spielen wir auch am Ende noch eine Runde, ähm, aber wir sehen vor allem immer sehr vorteilhaft

00:07:11.380 --> 00:07:12.380
 aus dabei.

00:07:12.380 --> 00:07:14.380
 Immer in jedem Frame, jeder Frame eintreffer.

00:07:14.380 --> 00:07:18.520
 Ist eigentlich egal, was für ein Video man von sich macht, wenn man sich länger filmt,

00:07:18.520 --> 00:07:22.200
 es ist eine sehr hohe Wahrscheinlichkeit, dass der einzelne Frame, den man dabei rauszieht,

00:07:22.200 --> 00:07:23.200
 dass der fürchterlich aussieht.

00:07:23.200 --> 00:07:27.140
 Also, ich habe jetzt wirklich nur wild rumgeklickt und irgendjemand sieht immer blöd dabei aus.

00:07:27.140 --> 00:07:29.140
 Vielleicht liegt es an uns.

00:07:29.140 --> 00:07:30.780
 So, äh, warte mal, ich muss hier grad mal...

00:07:30.780 --> 00:07:35.940
 Ja, also, ich glaube, dann sind wir jetzt mit dem Intro-Teil fertig und kommen zum ersten

00:07:35.940 --> 00:07:36.940
 Programmpunkt.

00:07:36.940 --> 00:07:49.220
 Wenn wir da dieses Bild stehen lassen, ist das ein bisschen verwirrend.

00:07:49.220 --> 00:07:50.800
 Ja, machen wir was schöneres.

00:07:50.800 --> 00:07:55.180
 Genau, am Anfang von unserem Stream kann man übrigens 2048 im Chat spielen.

00:07:55.180 --> 00:07:57.340
 Wer das Spiel kennt, ist so ein bisschen nerdig.

00:07:57.340 --> 00:07:59.380
 Man kann da so Zahlen zusammenschieben, bis man...

00:07:59.380 --> 00:08:02.180
 Bei uns muss man nur auf 64 kommen, das ist die einfache Variante.

00:08:02.400 --> 00:08:06.960
 Wir haben natürlich auch alles selber entwickelt und auch im Stream teilweise gezeigt.

00:08:06.960 --> 00:08:09.900
 Wir haben so ein Soundboard, also das, was wir jetzt hier haben, können wir auch im

00:08:09.900 --> 00:08:10.900
 Stream.

00:08:10.900 --> 00:08:16.900
 Und da wir remote sitzen, habe ich da ein Node-Skript gebastelt, was da beziehungsweise NWJS ist,

00:08:16.900 --> 00:08:21.700
 das ist so ein kleines Programmchen, das da läuft und geht nach draußen durch die Firewall

00:08:21.700 --> 00:08:24.920
 und der Moritz kann dann auf den Knopf drücken und dann spielt das im Stream.

00:08:24.920 --> 00:08:26.420
 Oder im Podcast.

00:08:26.420 --> 00:08:27.420
 Ach, du hast es noch.

00:08:27.420 --> 00:08:28.420
 Ich habe noch ein bisschen...

00:08:28.420 --> 00:08:29.420
 Geschütze aufgefallen.

00:08:29.420 --> 00:08:30.420
 Genau.

00:08:30.420 --> 00:08:34.040
 Aber es sieht jetzt aus, als ob ich der Superalkoholiker wäre, aber das ist eigentlich für

00:08:34.040 --> 00:08:35.040
 euch.

00:08:35.040 --> 00:08:37.040
 Wenn jemand ein Bier will, könnt ihr es euch hier abholen.

00:08:37.040 --> 00:08:38.040
 Ja, hier.

00:08:38.040 --> 00:08:39.040
 Da.

00:08:39.040 --> 00:08:41.300
 Das ist das gute Wölfe aus Karlsruhe.

00:08:41.300 --> 00:08:43.300
 Aber den will ich wieder zurück.

00:08:43.300 --> 00:08:44.300
 Noch jemand?

00:08:44.300 --> 00:08:45.300
 Ah.

00:08:45.300 --> 00:08:46.300
 Sehr gut.

00:08:46.300 --> 00:08:47.300
 Bitteschön.

00:08:47.300 --> 00:08:48.300
 Hahaha.

00:08:48.300 --> 00:08:52.880
 Eins brauche ich vielleicht noch für später, aber eins wäre noch, wenn...

00:08:52.880 --> 00:08:55.940
 Ich lasse es mal hier stehen, es ist nicht besonders kalt leider.

00:08:55.940 --> 00:09:00.120
 Also Retro ist bei uns, eigentlich reden wir am Anfang da immer so ein bisschen, was seit

00:09:00.120 --> 00:09:01.800
 der letzten Podcast-Folge passiert ist bei uns.

00:09:01.800 --> 00:09:06.000
 Also irgendwelche Dinge, die wir auf der Arbeit getan haben, die uns irgendwie geärgert

00:09:06.000 --> 00:09:07.820
 haben oder erfreut haben, mit denen wir uns beschäftigt haben.

00:09:07.820 --> 00:09:14.000
 Und heute, der Titel, also der Talk kann man ja gar nicht sagen, ihr erwartet das vielleicht

00:09:14.000 --> 00:09:18.660
 irgendwas, wenn ihr überhaupt einen technischen Hintergrund habt, Programmierhintergrund, Web, was

00:09:18.660 --> 00:09:21.740
 mit Scoping, Hoisting, Kunst, was das war.

00:09:21.740 --> 00:09:22.740
 Ne.

00:09:22.740 --> 00:09:23.740
 Ne.

00:09:23.740 --> 00:09:24.740
 Ähm.

00:09:24.740 --> 00:09:25.740
 Der Titel ist einfach nur Quatsch.

00:09:25.740 --> 00:09:26.740
 Ähm.

00:09:26.740 --> 00:09:27.740
 Ja.

00:09:27.740 --> 00:09:31.860
 Was passt zu einem Chaos-Event, irgendeine Tech-Anspielung auf Star Wars.

00:09:31.860 --> 00:09:32.860
 Auf Star Wars.

00:09:32.860 --> 00:09:33.860
 Genau.

00:09:33.860 --> 00:09:36.920
 Und wir haben uns natürlich langweiligerweise von Chat-GPT verschiedene Sachen generieren

00:09:36.920 --> 00:09:37.920
 lassen.

00:09:37.920 --> 00:09:40.660
 Und unter anderem kamen da auch noch ein paar andere Titel raus, die nicht so gut waren

00:09:40.660 --> 00:09:45.660
 wie der, wie zum Beispiel die Rückkehr des JSX-E.

00:09:45.660 --> 00:09:46.660
 I.

00:09:46.660 --> 00:09:47.660
 Ich hab keine Ahnung, was das ist.

00:09:47.660 --> 00:09:48.660
 JSX?

00:09:48.660 --> 00:09:49.660
 Ne.

00:09:49.660 --> 00:09:50.660
 Aber minus I.

00:09:50.660 --> 00:09:52.660
 Achso, damit es mit Jedi passt.

00:09:52.660 --> 00:09:54.660
 Damit es mit die Rückkehr der Jedi reicht.

00:09:54.660 --> 00:09:55.660
 Egal.

00:09:55.660 --> 00:09:57.660
 Oder das HTML schlägt zurück.

00:09:57.660 --> 00:10:00.660
 Also Chat-GPT war da nicht sehr kreativ.

00:10:00.660 --> 00:10:03.660
 Aber du hast tatsächlich was zu erzählen.

00:10:03.660 --> 00:10:05.660
 Naja, das ist nur ganz kurz.

00:10:05.660 --> 00:10:10.660
 Ich hab am Donnerstag erfolglos die Essensschlange beschallen dürfen.

00:10:10.660 --> 00:10:12.660
 Und dann hat es angefangen zu regnen.

00:10:12.660 --> 00:10:16.660
 Das war glaube ich der einzige Regen, der überhaupt jetzt hier war während der GPN,

00:10:16.660 --> 00:10:17.660
 war während meines DJ-Sets.

00:10:17.660 --> 00:10:18.660
 Also, danke.

00:10:18.660 --> 00:10:21.660
 Hattest du "Why does it always rain on me" in deiner Playlist?

00:10:21.660 --> 00:10:23.660
 Nee, aber "It's raining men".

00:10:23.660 --> 00:10:24.660
 Ah ja.

00:10:24.660 --> 00:10:26.660
 Aber das hab ich tatsächlich erst spontan dann...

00:10:26.660 --> 00:10:28.660
 Ja, da müssen wir nicht mehr drüber reden.

00:10:28.660 --> 00:10:29.660
 Das haken wir ab.

00:10:29.660 --> 00:10:32.660
 Wir müssen jetzt schnell zu was anderem kommen.

00:10:32.660 --> 00:10:35.660
 Ja, GPN, Highlights.

00:10:35.660 --> 00:10:36.660
 Achso, ja, Highlights bislang.

00:10:36.660 --> 00:10:40.660
 Ich hab zum Beispiel den Talk gesehen über das Karlsruher Modell.

00:10:40.660 --> 00:10:43.660
 Also, wir wohnen zwar schon lange in Karlsruher, wusste ich gar nicht.

00:10:43.660 --> 00:10:45.660
 Also, nicht so in der Tiefe Bescheid.

00:10:45.660 --> 00:10:47.660
 Hat das noch jemand gesehen, den Talk über das Karlsruher Modell?

00:10:47.660 --> 00:10:49.660
 Weiß jemand, was das Karlsruher Modell ist?

00:10:49.660 --> 00:10:52.660
 Da geht es darum, dass...

00:10:52.660 --> 00:10:54.660
 Das ist, glaube ich, so für Trainsport.

00:10:54.660 --> 00:10:57.660
 Da bin ich eigentlich, gehöre ich nicht dazu, aber ist trotzdem super interessant.

00:10:57.660 --> 00:11:00.660
 Die Straßenbahnen in Karlsruher fahren auf der gleichen Spurbreite wie Deutsche Bahn.

00:11:00.660 --> 00:11:02.660
 Das ist für Straßenbahnen eher ungewöhnlich.

00:11:02.660 --> 00:11:04.660
 Die haben normalerweise schmalere Spur.

00:11:04.660 --> 00:11:07.660
 Und deswegen können mit entsprechend ausgestatteter Technik

00:11:07.660 --> 00:11:10.660
 die Züge auch auf normale Deutsche Bahnstrecken fahren.

00:11:10.660 --> 00:11:13.660
 Fährt das eine Strom links runter, das andere fährt hoch und dann können die da weiterfahren.

00:11:13.660 --> 00:11:17.660
 Deswegen kann man von der Innenstadt aus quasi extrem weit fahren mit dem Zug,

00:11:17.660 --> 00:11:19.660
 ohne dass man irgendwie an den Hauptbahnhof muss.

00:11:19.660 --> 00:11:20.660
 Egal.

00:11:20.660 --> 00:11:25.660
 Das zeigt halt sehr so den Querschnitt und die Vielfalt hier bei der GPN.

00:11:25.660 --> 00:11:31.660
 Gut, ich meine die Schnittmenge aus Technik-Nerds und Bahn-Nerds ist, glaube ich, eben auch nicht sehr gering.

00:11:31.660 --> 00:11:34.660
 Aber es zeigt halt ja, um was es hier alles geht.

00:11:34.660 --> 00:11:35.660
 Also kann man nur empfehlen.

00:11:35.660 --> 00:11:37.660
 Es ist meine erste GPN auch dieses Jahr.

00:11:37.660 --> 00:11:39.660
 Aber ich finde es echt cool, was hier geboten wird.

00:11:39.660 --> 00:11:42.660
 Ich habe leider nicht geschafft, hier mir wirklich Talks vor Ort anzuschauen.

00:11:42.660 --> 00:11:43.660
 Aus familiären Gründen.

00:11:43.660 --> 00:11:44.660
 Aber ich habe dann zu Hause die auch nachgeschaut.

00:11:44.660 --> 00:11:46.660
 Auch das finde ich cool, dass man da wirklich...

00:11:46.660 --> 00:11:50.660
 Erstens, dass es hier nichts kostet und du kannst dann auch noch zu Hause das spenden.

00:11:50.660 --> 00:11:51.660
 Spenden natürlich.

00:11:51.660 --> 00:11:52.660
 Spenden.

00:11:52.660 --> 00:11:55.660
 Aber dass man hier einfach reinmarschieren kann, sich das angucken kann, aber auch von zu Hause

00:11:55.660 --> 00:11:56.660
 alles nachverfolgen kann.

00:11:56.660 --> 00:11:57.660
 Sehr cool.

00:11:57.660 --> 00:11:58.660
 Sehr cooles Konzept.

00:11:58.660 --> 00:11:59.660
 Ja, sehr geiles Event.

00:11:59.660 --> 00:12:00.660
 Und schön, dass wir auch hier sein dürfen.

00:12:00.660 --> 00:12:01.660
 Hier nochmal vielleicht...

00:12:01.660 --> 00:12:02.660
 Danke, falls er zu...

00:12:02.660 --> 00:12:05.660
 Nee, der ist bestimmt schon beschäftigt mit seinem Talk später.

00:12:05.660 --> 00:12:08.660
 Danke an Madonius, der uns gefragt hat, ob wir das hier machen wollen.

00:12:08.660 --> 00:12:09.660
 Genau.

00:12:09.660 --> 00:12:10.660
 Das ist für uns auch was Neues.

00:12:10.660 --> 00:12:11.660
 Also deswegen auch...

00:12:11.660 --> 00:12:13.660
 Also ein bisschen hat der Titel schon was damit zu tun.

00:12:13.660 --> 00:12:14.660
 A New Scope.

00:12:14.660 --> 00:12:15.660
 Für uns ist das hier eine neue Scope.

00:12:15.660 --> 00:12:17.660
 Also wir haben noch nie live auf einer Bühne gesendet.

00:12:17.660 --> 00:12:19.660
 Aber es kommt noch ein bisschen Technikgesprochen.

00:12:19.660 --> 00:12:20.660
 Ja, ein bisschen kommt auch noch.

00:12:20.660 --> 00:12:21.660
 Ein bisschen.

00:12:21.660 --> 00:12:23.660
 Ihr dürft auch rausgehen, wenn es heißt...

00:12:23.660 --> 00:12:27.660
 Achso, ich glaube, du hast nicht mehr geupdatet, aber das macht nichts.

00:12:27.660 --> 00:12:28.660
 Du weißt...

00:12:28.660 --> 00:12:29.660
 Achso, ja.

00:12:29.660 --> 00:12:30.660
 Okay.

00:12:30.660 --> 00:12:31.660
 Genau.

00:12:31.660 --> 00:12:32.660
 So.

00:12:32.660 --> 00:12:33.660
 Sollte das nicht automatisch updaten.

00:12:33.660 --> 00:12:34.660
 Achso, ja.

00:12:34.660 --> 00:12:35.660
 Tut es aber nicht.

00:12:35.660 --> 00:12:36.660
 Trello updatet nicht immer automatisch.

00:12:36.660 --> 00:12:37.660
 Das wissen wir jetzt auch.

00:12:37.660 --> 00:12:38.660
 Aber vielleicht, weil du...

00:12:38.660 --> 00:12:39.660
 Nee, du bist hier nicht im WLAN.

00:12:39.660 --> 00:12:40.660
 Deswegen.

00:12:40.660 --> 00:12:41.660
 Achso.

00:12:41.660 --> 00:12:42.660
 Egal.

00:12:42.660 --> 00:12:43.660
 Lass es.

00:12:43.660 --> 00:12:44.660
 Passt schon.

00:12:44.660 --> 00:12:45.660
 Dann kommt jetzt eigentlich die nächste...

00:12:45.660 --> 00:12:46.660
 Also ich fahr einfach mal ab.

00:12:46.660 --> 00:12:47.660
 Ja, mach das.

00:12:47.660 --> 00:12:50.660
 Die Property der Woche.

00:12:50.660 --> 00:12:55.660
 Das ist eine Rubrik, die wir normalerweise im Podcast haben.

00:12:55.660 --> 00:13:01.660
 Und da wir aber heute sehr, sehr, sehr viele Properties haben, die quasi das Thema sind,

00:13:01.660 --> 00:13:06.660
 überspringen wir das im Prinzip und kommen eigentlich dann direkt zur nächsten Rubrik.

00:13:06.660 --> 00:13:07.660
 Achso, das ist dann...

00:13:07.660 --> 00:13:08.660
 Also du musst aber jetzt umstecken, oder?

00:13:08.660 --> 00:13:09.660
 Nee, aber erst mal noch ein Jingle.

00:13:09.660 --> 00:13:11.660
 Ja, das ist eben die Frage, was...

00:13:11.660 --> 00:13:12.660
 Oh Gott, wer fängt denn da jetzt an?

00:13:12.660 --> 00:13:13.660
 Na ja, egal.

00:13:13.660 --> 00:13:14.660
 Ähm, dann...

00:13:14.660 --> 00:13:15.660
 Ähm, ja.

00:13:15.660 --> 00:13:26.660
 Das ist ein kleines Spielchen, das wir mit unseren Gästen, Gäst*innen gerne spielen.

00:13:26.660 --> 00:13:29.660
 So zum Aufwärmen reinkommen, die Gäst*innen kennenlernen.

00:13:29.660 --> 00:13:30.660
 Ähm, entscheide dich.

00:13:30.660 --> 00:13:33.660
 Es werden Fragen gestellt à la Katze oder Hund.

00:13:33.660 --> 00:13:35.660
 Und dann muss man aus der Pistole sagen...

00:13:35.660 --> 00:13:36.660
 Banane.

00:13:36.660 --> 00:13:37.660
 Ja, genau.

00:13:37.660 --> 00:13:38.660
 Nein, natürlich nicht.

00:13:38.660 --> 00:13:39.660
 Katze.

00:13:39.660 --> 00:13:43.660
 Wir dachten jetzt, wäre vielleicht mal ganz nett, so für die, die uns nicht kennen, also für

00:13:43.660 --> 00:13:46.660
 die meisten hier und auch für die Leute, die uns regelmäßig hören, aber so über uns

00:13:46.660 --> 00:13:49.660
 noch nicht so wirklich privat, äh, was wir sind.

00:13:49.660 --> 00:13:51.660
 Wir spielen das mal mit, mit uns.

00:13:51.660 --> 00:13:53.660
 Und es ist immer ganz, ganz, äh, ganz lustig.

00:13:53.660 --> 00:13:54.660
 Ja.

00:13:54.660 --> 00:13:57.660
 Es ist ganz lustig, immer den, den, äh, sich da Fragen auszudenken für die, für die Gäst*innen.

00:13:57.660 --> 00:13:59.660
 Ähm, aber dass wir selber machen, das wäre lustig.

00:13:59.660 --> 00:14:02.660
 Das klang witzig beim Ausdenken, aber ich halte sich mal vor, das war nichts.

00:14:02.660 --> 00:14:04.660
 Also, magst du anfangen oder soll ich anfangen?

00:14:04.660 --> 00:14:06.660
 Äh, ich hätt, ich hätt's hier.

00:14:06.660 --> 00:14:08.660
 Du hast es da, aber du hast es auf dem großen Display, dann kann ich es ja sehen.

00:14:08.660 --> 00:14:09.660
 Dann fang, dann fang ich an.

00:14:09.660 --> 00:14:10.660
 Achso, achso, ja.

00:14:10.660 --> 00:14:11.660
 Nee, stimmt.

00:14:11.660 --> 00:14:12.660
 Ja, dann...

00:14:12.660 --> 00:14:14.660
 Ja, wir brauchen aber noch, warte mal hier, äh...

00:14:14.660 --> 00:14:16.660
 Ähm, äh...

00:14:16.660 --> 00:14:18.660
 Bisschen Spannung reinbringen.

00:14:18.660 --> 00:14:19.660
 Wo ist er denn?

00:14:19.660 --> 00:14:21.660
 Achso, das heißt so, das hat...

00:14:21.660 --> 00:14:25.660
 So, das ist echt schon stressig für mich jetzt, allein, wenn ich mich losse.

00:14:25.660 --> 00:14:29.660
 Okay, ähm, Red Bull Cola oder Pale Ale?

00:14:29.660 --> 00:14:30.660
 Red Bull Cola.

00:14:30.660 --> 00:14:31.660
 Pizza oder Sushi?

00:14:31.660 --> 00:14:32.660
 Sushi.

00:14:32.660 --> 00:14:33.660
 Pink oder Glitzer?

00:14:33.660 --> 00:14:36.660
 Äh, Pink oder Glitzer.

00:14:36.660 --> 00:14:37.660
 Was jetzt?

00:14:37.660 --> 00:14:38.660
 Glitzer.

00:14:38.660 --> 00:14:40.660
 RGB oder Monochrom?

00:14:40.660 --> 00:14:41.660
 RGB.

00:14:41.660 --> 00:14:43.660
 Schnell oder Perfekt?

00:14:43.660 --> 00:14:44.660
 Perfekt.

00:14:44.660 --> 00:14:47.660
 Vue.js oder Open5.js?

00:14:47.660 --> 00:14:49.660
 Äh, Vue.js.

00:14:49.660 --> 00:14:52.660
 Corona-Warn-App-Anbindung oder OBS-Bugs?

00:14:52.660 --> 00:14:54.660
 OBS-Bugs.

00:14:54.660 --> 00:14:57.660
 24 Stunden Hot-Hub-Stream oder zwei Wochen Subathon?

00:14:57.660 --> 00:14:59.660
 Hot-Hub-Stream.

00:14:59.660 --> 00:15:02.660
 Worms-Armageddon oder Worms-WMD?

00:15:02.660 --> 00:15:03.660
 Worms-WMD.

00:15:03.660 --> 00:15:05.660
 Lüfter oder kein Lüfter?

00:15:05.660 --> 00:15:07.660
 Kein Lüfter.

00:15:07.660 --> 00:15:09.660
 Blue Screen oder Beach Ball of Death?

00:15:09.660 --> 00:15:11.660
 Blue Screen.

00:15:11.660 --> 00:15:13.660
 GPN oder Beyond Tellerrand?

00:15:13.660 --> 00:15:16.660
 Das ist ja gemein jetzt.

00:15:16.660 --> 00:15:17.660
 Beyond Tellerrand?

00:15:17.660 --> 00:15:18.660
 Okay.

00:15:18.660 --> 00:15:19.660
 Oh, oh, oh, oh.

00:15:19.660 --> 00:15:21.660
 Okay.

00:15:21.660 --> 00:15:22.660
 Okay.

00:15:22.660 --> 00:15:23.660
 Du kannst es laufen lassen.

00:15:23.660 --> 00:15:24.660
 Achso.

00:15:24.660 --> 00:15:25.660
 Mach ich erst weiter mit dir.

00:15:25.660 --> 00:15:26.660
 Okay, dann, ja.

00:15:26.660 --> 00:15:27.660
 Oh je.

00:15:27.660 --> 00:15:28.660
 Safari oder Chrome?

00:15:28.660 --> 00:15:29.660
 Safari.

00:15:29.660 --> 00:15:31.660
 Accessibility oder Usability?

00:15:31.660 --> 00:15:33.660
 Accessibility.

00:15:33.660 --> 00:15:35.660
 Regeln folgen oder Folgenregeln?

00:15:35.660 --> 00:15:36.660
 Folgenregeln.

00:15:36.660 --> 00:15:38.660
 Dream Theater oder Fun and Plus?

00:15:38.660 --> 00:15:39.660
 Dream Theater.

00:15:39.660 --> 00:15:41.660
 Han oder Guido?

00:15:41.660 --> 00:15:43.660
 Han oder was?

00:15:43.660 --> 00:15:44.660
 Han oder Greedo.

00:15:44.660 --> 00:15:45.660
 Greedo.

00:15:45.660 --> 00:15:47.660
 Star Wars oder Star Trek?

00:15:47.660 --> 00:15:48.660
 Star Trek.

00:15:48.660 --> 00:15:49.660
 Original Series oder Next Generation?

00:15:49.660 --> 00:15:50.660
 Next Generation.

00:15:50.660 --> 00:15:52.660
 Discovery oder Enterprise?

00:15:52.660 --> 00:15:55.660
 Discovery.

00:15:55.660 --> 00:15:57.660
 Vegan oder Vegan.

00:15:57.660 --> 00:15:58.660
 Vegan.

00:15:58.660 --> 00:15:59.660
 Vegan.

00:15:59.660 --> 00:16:01.660
 Gulasch oder Waffel?

00:16:01.660 --> 00:16:02.660
 Gaffel.

00:16:02.660 --> 00:16:04.660
 Gulasch.

00:16:04.660 --> 00:16:05.660
 Gulasch.

00:16:05.660 --> 00:16:06.660
 Gulasch.

00:16:06.660 --> 00:16:08.660
 Flora oder Club?

00:16:08.660 --> 00:16:10.660
 Club.

00:16:10.660 --> 00:16:11.660
 Gpn oder Congress.

00:16:11.660 --> 00:16:12.660
 Gpn.

00:16:12.660 --> 00:16:13.660
 Gpn.

00:16:13.660 --> 00:16:14.660
 Hey.

00:16:14.660 --> 00:16:15.660
 Okay.

00:16:15.660 --> 00:16:16.660
 Oh Gott.

00:16:16.660 --> 00:16:17.660
 Du hast dir aber auch Mühe gegeben.

00:16:17.660 --> 00:16:18.660
 Ja.

00:16:18.660 --> 00:16:19.660
 Das überrascht dich jetzt.

00:16:19.660 --> 00:16:20.660
 Dass ich mir mal Mühe gegeben habe.

00:16:20.660 --> 00:16:33.660
 Wahrscheinlich hätte ich nicht ankündigen sollen, dass ich dich ein bisschen quälen will mit den Fragen.

00:16:33.660 --> 00:16:34.660
 Ja.

00:16:34.660 --> 00:16:35.660
 Und naja.

00:16:35.660 --> 00:16:36.660
 So.

00:16:36.660 --> 00:16:37.660
 Aber jetzt.

00:16:37.660 --> 00:16:38.660
 Endlich.

00:16:38.660 --> 00:16:42.660
 Hier ist WWS IV mit dem Tagesthema.

00:16:42.660 --> 00:16:47.660
 Zu schnell.

00:16:47.660 --> 00:16:48.660
 Wir sind nicht zu schnell.

00:16:48.660 --> 00:16:50.660
 Wir sind zusammen ein bisschen schnell.

00:16:50.660 --> 00:16:51.660
 So.

00:16:51.660 --> 00:16:52.660
 Okay.

00:16:52.660 --> 00:16:53.660
 Dann gehe ich hier mal weiter.

00:16:53.660 --> 00:16:56.660
 Also unsere Slides sind heute ein Browser, weil wir machen ja Frontend.

00:16:56.660 --> 00:16:58.660
 Also wir brauchen kein Keynote oder sowas.

00:16:58.660 --> 00:16:59.660
 oder sowas.

00:16:59.660 --> 00:17:00.660
 Wir nutzen einfach Browser Tabs.

00:17:00.660 --> 00:17:04.660
 Und vielleicht hätte ich mir jetzt noch merken sollen, wie der Shortcut war mit zum nächsten Tab springen.

00:17:04.660 --> 00:17:05.660
 Aber ich muss es jetzt von Hand machen.

00:17:05.660 --> 00:17:07.660
 PC könnte ich ja sagen.

00:17:07.660 --> 00:17:08.660
 Apple weiß ich nicht.

00:17:08.660 --> 00:17:09.660
 Ja.

00:17:09.660 --> 00:17:11.660
 Es ist aber Chrome.

00:17:11.660 --> 00:17:12.660
 Es ist total egal.

00:17:12.660 --> 00:17:13.660
 Was?

00:17:13.660 --> 00:17:17.660
 Ja auf Windows ist es schon mal Tab.

00:17:17.660 --> 00:17:19.660
 Nee.

00:17:19.660 --> 00:17:20.660
 Alles geht kaputt.

00:17:20.660 --> 00:17:21.660
 Oh.

00:17:21.660 --> 00:17:23.660
 Jetzt leaken wir noch irgendwelche Sachen hier schön.

00:17:23.660 --> 00:17:24.660
 Ja.

00:17:24.660 --> 00:17:25.660
 Ähm.

00:17:25.660 --> 00:17:26.660
 Nein.

00:17:26.660 --> 00:17:27.660
 Das ist es nicht.

00:17:27.660 --> 00:17:30.660
 Tatsächlich vergessen hier auf Dings da.

00:17:30.660 --> 00:17:31.660
 Ähm.

00:17:31.660 --> 00:17:32.660
 Notifications.

00:17:32.660 --> 00:17:33.660
 Ähm.

00:17:33.660 --> 00:17:34.660
 Nicht stören zu stellen.

00:17:34.660 --> 00:17:35.660
 Das hätte ich vielleicht noch machen sollen.

00:17:35.660 --> 00:17:36.660
 Übrigens dieses kleine Icon da oben.

00:17:36.660 --> 00:17:38.660
 Das ist eine App, die heißt Amphetamin.

00:17:38.660 --> 00:17:39.660
 Äh.

00:17:39.660 --> 00:17:40.660
 Und die hält den Rechner wach.

00:17:40.660 --> 00:17:42.660
 Ist mir gerade noch eingefallen, was ich da gerade gesehen habe.

00:17:42.660 --> 00:17:43.660
 Ah ja.

00:17:43.660 --> 00:17:44.660
 Ist klar.

00:17:44.660 --> 00:17:45.660
 Ja.

00:17:45.660 --> 00:17:46.660
 Ist klar.

00:17:46.660 --> 00:17:47.660
 So.

00:17:47.660 --> 00:17:48.660
 Äh.

00:17:48.660 --> 00:17:49.660
 Wir fangen an.

00:17:49.660 --> 00:17:50.660
 Also wir haben uns überlegt für die GPN mit so.

00:17:50.660 --> 00:17:51.660
 Äh.

00:17:51.660 --> 00:17:53.660
 Was waren denn in unseren vergangenen Podcast-Folgen oder Streams?

00:17:53.660 --> 00:17:54.660
 Ähm.

00:17:54.660 --> 00:17:56.660
 Dinge, die wir so ein bisschen kaputt gespielt haben.

00:17:56.660 --> 00:17:57.660
 Weil das ist ja irgendwie schon so ein bisschen.

00:17:57.660 --> 00:17:58.660
 Äh.

00:17:58.660 --> 00:17:59.660
 Das Thema ist generell so.

00:17:59.660 --> 00:18:01.660
 Wie kann man denn Dinge benutzen?

00:18:01.660 --> 00:18:02.660
 Äh.

00:18:02.660 --> 00:18:03.660
 Anders als die eigentlich gedacht sind.

00:18:03.660 --> 00:18:05.660
 Oder wo sind denn die Grenzen davon?

00:18:05.660 --> 00:18:06.660
 Ja.

00:18:06.660 --> 00:18:07.660
 Das ist nicht alles.

00:18:07.660 --> 00:18:08.660
 Wir haben auch ein paar coole Sachen dabei.

00:18:08.660 --> 00:18:09.660
 Die einfach nur nett sind.

00:18:09.660 --> 00:18:11.660
 Wo wir nicht wissen, ob die jeder so weiß.

00:18:11.660 --> 00:18:12.660
 Wo man vielleicht noch was lernen kann.

00:18:12.660 --> 00:18:13.660
 Hoffentlich.

00:18:13.660 --> 00:18:14.660
 Ähm.

00:18:14.660 --> 00:18:16.660
 Aber wir haben angefangen mit Grenzen ausloten hier.

00:18:16.660 --> 00:18:17.660
 Und zwar.

00:18:17.660 --> 00:18:18.660
 Ähm.

00:18:18.660 --> 00:18:19.660
 Weiß nicht.

00:18:19.660 --> 00:18:20.660
 Wer von euch schreibt HTML ab und zu mal?

00:18:20.660 --> 00:18:21.660
 Ja.

00:18:21.660 --> 00:18:22.660
 Doch.

00:18:22.660 --> 00:18:23.660
 Schon ein paar.

00:18:23.660 --> 00:18:24.660
 Sehr gut.

00:18:24.660 --> 00:18:25.660
 Ähm.

00:18:25.660 --> 00:18:26.660
 Dann kennt ihr wahrscheinlich die Ordered List.

00:18:26.660 --> 00:18:27.660
 OL.

00:18:27.660 --> 00:18:28.660
 Ähm.

00:18:28.660 --> 00:18:29.660
 Genau.

00:18:29.660 --> 00:18:32.660
 Also das ist einfach nur eine Auflistung von Dingen, die dann eben durchnummeriert

00:18:32.660 --> 00:18:33.660
 wird automatisch vom System.

00:18:33.660 --> 00:18:36.660
 Also OL Tag mit LI Elementen üblicherweise.

00:18:36.660 --> 00:18:39.660
 Darin kann man auch verschachteln, wie ihr hier sehen könnt.

00:18:39.660 --> 00:18:40.660
 Vielleicht mach ich's noch mal gucken.

00:18:40.660 --> 00:18:41.660
 Kann man das gut lesen?

00:18:41.660 --> 00:18:42.660
 Ich mach's vielleicht noch mal ein bisschen größer.

00:18:42.660 --> 00:18:44.660
 Ist das irgendwie okay so?

00:18:44.660 --> 00:18:45.660
 Kann man das halbwegs lesen?

00:18:45.660 --> 00:18:46.660
 Auch den Code rechts?

00:18:46.660 --> 00:18:47.660
 Ja.

00:18:47.660 --> 00:18:48.660
 Nicken.

00:18:48.660 --> 00:18:49.660
 Auch in der letzten.

00:18:49.660 --> 00:18:50.660
 Ah.

00:18:50.660 --> 00:18:51.660
 Da hinten nicht.

00:18:51.660 --> 00:18:52.660
 Ich mach noch.

00:18:52.660 --> 00:18:53.660
 Dann mach ich gern noch eins größer.

00:18:53.660 --> 00:18:54.660
 Gucken wir mal.

00:18:54.660 --> 00:18:55.660
 Besser?

00:18:55.660 --> 00:18:56.660
 Okay.

00:18:56.660 --> 00:18:57.660
 Sehr gut.

00:18:57.660 --> 00:18:58.660
 Genau.

00:18:58.660 --> 00:18:59.660
 Wir müssen mal gucken.

00:18:59.660 --> 00:19:00.660
 Wir müssen wahrscheinlich noch ein paar mal hin und her.

00:19:00.660 --> 00:19:01.660
 Weil es geht nicht bei allen Demos so gut.

00:19:01.660 --> 00:19:02.660
 Genau.

00:19:02.660 --> 00:19:03.660
 Also das ist so eine ganz normale Ordered List.

00:19:03.660 --> 00:19:04.660
 Äh.

00:19:04.660 --> 00:19:05.660
 Die Section da, die muss euch nicht kümmern.

00:19:05.660 --> 00:19:06.660
 Oder das H2 auch nicht.

00:19:06.660 --> 00:19:08.660
 Es geht tatsächlich nur um dieses OL.

00:19:08.660 --> 00:19:09.660
 Mit LI drin.

00:19:09.660 --> 00:19:10.660
 Und dann noch mal verschachtelt.

00:19:10.660 --> 00:19:11.660
 OL, LI.

00:19:11.660 --> 00:19:12.660
 Ähm.

00:19:12.660 --> 00:19:14.660
 Das ist jetzt erst mal relativ unspektakulär.

00:19:14.660 --> 00:19:16.660
 Die Zahlen kommen da einfach automatisch hin.

00:19:16.660 --> 00:19:17.660
 Das macht, das macht der Browser.

00:19:17.660 --> 00:19:18.660
 Ah.

00:19:18.660 --> 00:19:19.660
 Ich sehe grad CTRL-Tab.

00:19:19.660 --> 00:19:20.660
 Das, äh.

00:19:20.660 --> 00:19:21.660
 Das kann ich gleich mal ausprobieren.

00:19:21.660 --> 00:19:22.660
 Äh.

00:19:22.660 --> 00:19:23.660
 Dann beim nächsten.

00:19:23.660 --> 00:19:24.660
 Ja.

00:19:24.660 --> 00:19:25.660
 Okay.

00:19:25.660 --> 00:19:26.660
 Genau.

00:19:26.660 --> 00:19:27.660
 Muss ich mir...

00:19:27.660 --> 00:19:28.660
 Halt mal so lange hoch, bis ich zum nächsten springe.

00:19:28.660 --> 00:19:29.660
 Danke.

00:19:29.660 --> 00:19:30.660
 Okay.

00:19:30.660 --> 00:19:31.660
 Genau.

00:19:31.660 --> 00:19:32.660
 Also soweit so gut.

00:19:32.660 --> 00:19:33.660
 Ähm.

00:19:33.660 --> 00:19:36.660
 Und dann findet man raus, dass es da so ein paar Attribute gibt, die man den Listen

00:19:36.660 --> 00:19:37.660
 geben kann.

00:19:37.660 --> 00:19:40.660
 Die zumindest ich nicht so kannte.

00:19:40.660 --> 00:19:42.660
 Das ist also, geht so ein bisschen über die Standard...

00:19:42.660 --> 00:19:44.660
 Können wir auch gleich mal hier schon auf Hands machen, ne?

00:19:44.660 --> 00:19:45.660
 Wenn wir schon mal die Möglichkeit haben, Feedback einzuholen.

00:19:45.660 --> 00:19:46.660
 Genau.

00:19:46.660 --> 00:19:48.660
 Kennt jemand Attribute, die man dem OL geben kann?

00:19:48.660 --> 00:19:49.660
 Da hinten?

00:19:49.660 --> 00:19:50.660
 Okay.

00:19:50.660 --> 00:19:51.660
 Ähm.

00:19:51.660 --> 00:19:52.660
 Ah, ja.

00:19:52.660 --> 00:19:53.660
 Genau.

00:19:53.660 --> 00:19:54.660
 Das kommt auf jeden Fall noch.

00:19:54.660 --> 00:19:55.660
 Ich glaub, wir müssen das wiederholen, ne?

00:19:55.660 --> 00:19:56.660
 Weil das hört man wahrscheinlich auf.

00:19:56.660 --> 00:19:57.660
 Genau.

00:19:57.660 --> 00:19:58.660
 Also es kam...

00:19:58.660 --> 00:19:59.660
 Es kam die Antwort, es gibt das Nummernsystem.

00:19:59.660 --> 00:20:00.660
 Genau.

00:20:00.660 --> 00:20:01.660
 Das kommt auf jeden Fall noch.

00:20:01.660 --> 00:20:02.660
 Aber ich zeig jetzt mal was.

00:20:02.660 --> 00:20:05.660
 Also es gibt zum Beispiel, man kann zum Beispiel den Start festlegen.

00:20:05.660 --> 00:20:08.660
 Ich kann zum Beispiel sagen, starte mir mit dem vierten Punkt.

00:20:08.660 --> 00:20:09.660
 Also mit der Nummer vier.

00:20:09.660 --> 00:20:10.660
 Dann schreib ich einfach hier Start vier.

00:20:10.660 --> 00:20:11.660
 Wer kennt das?

00:20:11.660 --> 00:20:12.660
 Wer weiß das?

00:20:12.660 --> 00:20:13.660
 Aha.

00:20:13.660 --> 00:20:14.660
 Okay.

00:20:14.660 --> 00:20:15.660
 Schon mal gesehen, immerhin.

00:20:15.660 --> 00:20:16.660
 Ah, so ein bisschen unsicher auch hier.

00:20:16.660 --> 00:20:17.660
 Man kann das auch mit negativen Werten nehmen.

00:20:17.660 --> 00:20:19.660
 Also das ist jetzt eine ganz normale OL ohne weitere Attribute.

00:20:19.660 --> 00:20:22.660
 Das heißt, das sind einfach nur ganz normale arabische Ziffern.

00:20:22.660 --> 00:20:25.660
 Kann also auch zum Beispiel bei minus drei starten und geht dann bis zu null.

00:20:25.660 --> 00:20:29.660
 Oder man kann zwischendurch nochmal sagen, ja, ich möchte gern bei 42.235 starten oder so.

00:20:29.660 --> 00:20:30.660
 ähm, das geht auch.

00:20:30.660 --> 00:20:31.660
 Ähm, das geht auch.

00:20:31.660 --> 00:20:32.660
 Genau.

00:20:32.660 --> 00:20:33.660
 So.

00:20:33.660 --> 00:20:49.660
 Was aber auch geht, und da wird's jetzt schon ein bisschen, da wurde ich schon ein bisschen

00:20:49.660 --> 00:20:51.660
 unsicherer, reversed, äh, kann man auch sagen.

00:20:51.660 --> 00:20:53.660
 Dann dreht sich das ganze Ding rum.

00:20:53.660 --> 00:20:56.660
 Das ist tatsächlich einfach nur das reversed Attribut, was da mit reingegeben wird.

00:20:56.660 --> 00:21:01.660
 Und dann starte ich halt, äh, bei einer Liste, die, ähm, und hier ist auch noch Start,

00:21:01.660 --> 00:21:02.660
 ist auch noch vier.

00:21:02.660 --> 00:21:05.660
 Also das heißt, äh, es geht dann quasi rückwärts von vier.

00:21:05.660 --> 00:21:10.660
 Man startet dann, äh, ja, vier, drei, zwei, eins und dann null minus eins.

00:21:10.660 --> 00:21:12.660
 Also das wird dann schon irgendwie ein bisschen funky.

00:21:12.660 --> 00:21:15.660
 Ich weiß nicht, wofür man das braucht, äh, aber es geht immerhin.

00:21:15.660 --> 00:21:18.660
 Und das verhält sich, finde ich, äh, erwartungsgemäß, würde ich jetzt sagen.

00:21:18.660 --> 00:21:24.660
 Ähm, natürlich immer auch nur, in Kombination macht's natürlich erst richtig Spaß,

00:21:24.660 --> 00:21:26.660
 weil es jetzt einfach nur reversed wäre, wäre es langweilig.

00:21:26.660 --> 00:21:29.660
 Aber ich wollte halt einfach auch wissen, geht es auch, dass es tatsächlich dann ins Negative geht.

00:21:29.660 --> 00:21:31.660
 So.

00:21:31.660 --> 00:21:36.660
 Dann den Type, das hatten wir gerade, das, das Attribut heißt Type.

00:21:36.660 --> 00:21:42.660
 Da kann man dann, ähm, zum Beispiel, äh, Type Groß I, wären große, äh, römische Ziffern.

00:21:42.660 --> 00:21:48.660
 Äh, man kann auch klein i nehmen, das sind dann kleine römische Ziffern, auch das kann man reversen.

00:21:48.660 --> 00:22:00.660
 Es gibt auch Type A, dann wird mit Buchstaben durchgezählt, äh, und in dem Fall war der Startjahr 42.235 und das ist die Buchstaben, das sind die Buchstabenrepräsentationen davon, also reversed.

00:22:00.660 --> 00:22:09.660
 Das wäre jetzt tatsächlich die, ähm, B, J, L, K, ist, äh, 42, äh, 42.235 in Buchstabenrepräsentation, okay.

00:22:09.660 --> 00:22:16.220
 Äh, also von A weiter und dann geht es halt weiter und dann, das, das, hast du gesagt, weiter die Demo, das war doch in der ursprünglichen nicht drin, oder?

00:22:16.220 --> 00:22:17.220
 Nee.

00:22:17.220 --> 00:22:19.220
 Weil ich hab's ja nochmal mehr kaputt gespielt, egal.

00:22:19.220 --> 00:22:22.660
 Egal, da kommen wir gleich noch zu, Konstantin hat noch, noch andere schlimme Sachen da mitgemacht.

00:22:22.660 --> 00:22:39.620
 Ähm, so, und dann gibt's noch ein paar Sachen, die nicht gehen, ähm, wo, wo das ganze System dann aussteigt, äh, nämlich zum Beispiel, äh, negativer Start bei römischen Ziffern, keine Ahnung, warum man das braucht, aber das geht auf jeden Fall nicht, weil es gibt ja auch bei römischen Zahlensystemen auch

00:22:39.620 --> 00:23:09.580
 keine Null, also es gibt auch dem, dem, dem Folge keine Minus Eins oder sowas. Ähm, gut, Roman lowercase, also kleine römische Ziffern logischerweise, ähm, lowercase letters und negativer, also mit, mit Buchstaben kann ich auch nicht ins Minus gehen, weil, was ist Minus A, ich hab keine Ahnung, wie das dann weitergehen würde, aber das ist auf jeden Fall nicht spezifiziert, also, was hier, hier vorne steht immer Minus Eins, weil das einfach nicht geht, das haben wir ja ausprobiert, Moment, die Demo ist hier, ähm, also ich hab's versucht, bei Minus Eins zu starten mit

00:23:09.580 --> 00:23:21.660
 Roman und dann kommt halt einfach trotzdem die Minus Eins, das ist dann offenbar der Fallback, der immer auf die, äh, Gesundheit, genau, Gesundheit zurückgeht, oder so. Ähm, dann hab ich jetzt hier was, äh, ich hab mal geguckt, wie weit

00:23:21.660 --> 00:23:27.700
 kann man denn mit römischen Ziffern gehen, ich weiß nicht, ob sich damit jemand auskennt, ich hab auch erst dann mich ein bisschen damit

00:23:27.700 --> 00:23:35.480
 beschäftigt, das ist nämlich die, in, in, in dem normalen römischen Zahlensystem, das sagt, du darfst nur maximal drei, wir haben's vorhin nochmal nachgeschaut,

00:23:35.480 --> 00:23:43.480
 du darfst maximal drei, äh, gleiche. Genau, weil die Präsentation der Buchstaben entscheidet ja, ob du abziehst oder, oder addierst, ne. Und deswegen ist die größte

00:23:43.480 --> 00:23:59.480
 Zahl, die man in diesem System machen kann, 3999. Ich weiß nicht, ob man oft eine Liste braucht, die länger ist als das mit römischen Zahlen, ähm, aber wenn ich jetzt bei der 4000, äh, zu 4000 gehe, ähm, dann wird die tatsächlich wieder als arabische Ziffer dargestellt, was ich irgendwie schon, äh,

00:23:59.480 --> 00:24:08.140
 interessant fand, das geht nicht und lowercase geht natürlich dann auch nicht. Und da haben wir nämlich dann vorher noch in den Standard, äh, mal geschaut, weil wir dachten, das ist doch komisch, dass es bei 4000 einfach stehen bleibt.

00:24:08.480 --> 00:24:16.480
 Also ich hätte jetzt erwartet, dass es dann irgendwie 4001 halt in, in arabischen Zahlen, äh, weitermacht. Und, äh, genau, da haben wir geguckt, was, was sagt denn der Standard? Und es gibt da tatsächlich

00:24:16.480 --> 00:24:24.480
 eigentlich eine Lösung. Da ist was Interessantes, also es ist so, man ist sich nicht so richtig einig, gehört das jetzt so richtig dazu oder nicht, aber es gibt wohl so eine Möglichkeit, äh, da nochmal so einen Strich

00:24:24.480 --> 00:24:30.480
 drüber zu machen und dann wird das mal 1000 genommen, glaub ich, was da steht. Ähm, ist, äh, schon irgendwie, oh.

00:24:30.480 --> 00:24:35.680
 Oh, das ist schön, wir haben Post gekriegt.

00:24:35.680 --> 00:24:38.460
 Ich, ich wollte nur kurz stören, weitermachen.

00:24:38.460 --> 00:24:41.900
 An einen Speaker in einem Saal, ja, ist gelungen.

00:24:41.900 --> 00:24:43.460
 An einen Speaker, okay, gut.

00:24:43.460 --> 00:24:48.640
 Vielen, vielen Dank an die Chaos Post. Ich hab mich schon gefragt, wann wir die erste, äh, die erste Chaos Post kriegen.

00:24:48.640 --> 00:24:51.560
 Also schickt uns jetzt alle Chaos Post, kann man auch online machen, glaub ich, gell?

00:24:51.560 --> 00:24:58.420
 Genau, also, ähm, diese Schreibweise, gut, ich, ich glaub, ich brauch's nie, aber es ist auf jeden Fall interessant, dass es das offenbar gibt.

00:24:58.420 --> 00:25:03.640
 Es ist im, also, ihr seht hier, das ist die HTML-Spec, es ist offenbar spezifiziert, aber kein Browser macht das.

00:25:03.640 --> 00:25:06.620
 Also weder Firefox noch Chromium, äh, ja, hat das irgendwie umgesetzt.

00:25:06.620 --> 00:25:11.560
 Safari hab ich's nicht ausprobiert, aber, ja, egal, äh, fand ich, fand ich irgendwie, äh, trotzdem interessant.

00:25:11.560 --> 00:25:20.380
 Äh, es gibt was, ich glaube, ich hab mal einen Standard gefunden, wo stand, danach kommt halt nix mehr, und, ähm, aber offenbar ist es spezifiziert jetzt aktuell, ähm, aber, jo, ja.

00:25:20.380 --> 00:25:24.920
 Das ist das, was wir gerne machen, äh, die Grenzen der Standards und der Implementierung und Austest.

00:25:24.920 --> 00:25:27.800
 So, und das auch jetzt, äh, hier geht's nämlich noch weiter.

00:25:27.980 --> 00:25:50.880
 War das nämlich noch nicht kaputt genug, und dann hab ich gedacht, was passiert denn, wenn ich's, äh, mit Buchstaben durchnummerieren lasse, aber, äh, den Start so setze, äh, genau, also das ist, äh, reversed, umgedreht, mit, äh, Buchstaben, äh, und noch den Start so gesetzt, dass ich dann irgendwann auf A zulaufe, und dann, was es dann macht, interessanterweise fängt's an mit 0, minus 1, äh, minus 2 weiter durchzunummerieren.

00:25:50.880 --> 00:25:51.800
 Ist halt immer der Fall weg.

00:25:51.800 --> 00:25:53.180
 Also, ist halt immer der Fall weg.

00:25:53.180 --> 00:26:13.600
 Ähm, und, äh, mit, mit Start 24, genau, das haben wir jetzt vorhin schon gesehen, deswegen, ich glaub, du hast da nochmal an der Demo, du hast dich nochmal erweitert, weil das war nämlich ursprünglich nicht drin, und da hab ich gedacht, was passiert denn, aber wenn ich bei Z bin, und ich hab aber mehr als irgendwie 26, äh, Punkte, äh, und dann macht's eben weiter mit A, A, A, B, A, C, und so weiter, und das geht immer weiter, bis man dann diese komischen Buchstabenkombinationen hat, die, äh, die du vorhin gezeigt hast.

00:26:14.160 --> 00:26:17.780
 Genau, also, weird stuff, man braucht's wahrscheinlich nie, aber, ist interessant.

00:26:17.780 --> 00:26:21.700
 Ja, aber sag mal, einfach, bei uns geht's ja nicht drum, braucht man das, oder? Haben ist besser als brauchen.

00:26:21.700 --> 00:26:22.240
 Ja, genau.

00:26:22.240 --> 00:26:33.080
 Äh, so, ich weiß nicht, wie gerne, äh, es gibt, wir haben noch hier den Wikipedia-Artikel zu den, äh, Roman Numerals, ähm, wo genau das irgendwie erklärt wird, und wie das heißt.

00:26:33.080 --> 00:26:38.960
 Das geht nämlich noch weiter, man kann nämlich statt einem Strich auch eine Box drumrum machen, und dann wird's mit, äh, mit 10.000 multipliziert.

00:26:39.680 --> 00:26:40.180
 Ja, verrückt.

00:26:40.180 --> 00:26:44.100
 Ich glaub, ja. Nur, dass man's mal gehört hat, ne?

00:26:44.100 --> 00:26:47.940
 So, machen wir das Nächste, machen wir jetzt, machen wir jetzt ein bisschen bunt.

00:26:47.940 --> 00:27:09.040
 Okay, also, ihr kennt ja Scrollbars, ne? Also, ihr seht das hier auch rechts am Rand, äh, Scrollbars, äh, früher, ganz, ganz, ganz früher durfte man Scrollbars im Internet Explorer mal stylen, und, äh, dann wurde das irgendwie ausgebaut mit dem Grund, äh, es ist nicht so gut mit User-Interface-Elementen die Leute rumspielen zu lassen, sondern dann weiß halt keiner mehr, was damit zu tun ist.

00:27:09.040 --> 00:27:11.720
 Aber ich glaube, damals konnte man nur einfärben. Man konnte, glaub ich, sonst nicht.

00:27:11.720 --> 00:27:14.500
 Ich glaub, man konnte eine Farbe geben, ja, für die komplette Scrollbar.

00:27:14.500 --> 00:27:20.300
 Ja, genau. Äh, das wurde irgendwann wieder, äh, wurde halt nicht übernommen, das war halt nur so ein Internet Explorer-Ding, die Älteren werden sich erinnern an den Internet Explorer.

00:27:20.300 --> 00:27:22.720
 Wenn ihr euch nicht an den Internet Explorer erinnert, dann ist das gut.

00:27:23.360 --> 00:27:27.180
 Also, den, den, den, der, das ist, das ist, das ist total okay.

00:27:27.180 --> 00:27:35.940
 So, und, ähm, es geht aber jetzt wieder, es gibt in WebKit wieder eine Möglichkeit, ähm, also in WebKit-basierten Browsern, ich weiß gar nicht, ob ich, ich hab Safari, hab ich, glaub ich, gar nicht getestet.

00:27:35.940 --> 00:27:37.960
 Also, Chrome und alles, was da so dazugehört.

00:27:38.040 --> 00:27:42.220
 In Firefox geht's meines Wissens nach nicht, aber die wollten das, glaub ich, äh, das ist verhaltetes Wissen, egal.

00:27:42.220 --> 00:27:49.360
 Ähm, und dann kann man, wenn man möchte, das sind Scrollbalken.

00:27:49.520 --> 00:27:57.900
 Also, man kann, ich sag auch nicht, dass es sinnvoll ist, ihr sollt es nicht machen, wir sagen euch hier, was ihr nicht machen sollt, auf jeden Fall.

00:27:57.900 --> 00:28:09.040
 Äh, ja genau, das Ding ist so mit so einem komischen, äh, WebKit-Prefix, äh, Scrollbar, das ist tatsächlich jetzt in dem Fall die, äh, die Breite und, äh, die Minimalbreite und die Minimalhöhe, deswegen wird das Ding so fett.

00:28:09.040 --> 00:28:19.480
 Ähm, dann haben wir Scrollbar-Track, das ist der Hintergrund, ähm, dann seht ihr hier so Repeating Radial Gradient, das ist jetzt so, das Muster hab ich nicht selbst gebaut, aber man kann halt mit, äh, mit Radial Gradients oder mit verschiedenen,

00:28:19.480 --> 00:28:33.040
 Gradients, äh, in CSS kann man halt so kleine Totenköpfe bauen und eben auch, ähm, wie ihr seht, dieses Biohazard-Symbol, was auf diesem, ähm, so genannten Scrollbar-Thump, genau, das ist das Ding, was man anfasst, was man hin und her schiebt.

00:28:33.040 --> 00:28:42.460
 Ähm, das kann man damit machen, wenn man möchte und ich hab gestern, oder, nee, vorgestern, als wir vorbereitet haben, ähm, den Konstantin gefragt, sag mal, kann man das vielleicht auch animieren?

00:28:42.460 --> 00:28:47.320
 Und das konnten wir natürlich nicht entgehen lassen, dass dann, äh, genau.

00:28:47.820 --> 00:28:50.300
 Ja, was heißt kaputt, aber es war noch nicht, da muss noch mehr, da geht noch mehr.

00:28:50.300 --> 00:28:51.760
 Also das ist so, und, ja.

00:28:51.760 --> 00:28:54.200
 Genau, kannst du mal, äh, weiter schalten.

00:28:54.200 --> 00:28:59.300
 Achso, was, was war, äh, achso, okay, ja, Bier, kann ich, kann ich gerne weitergeben, bitteschön.

00:28:59.300 --> 00:29:00.100
 Habt ihr den Öffner?

00:29:00.100 --> 00:29:01.680
 Okay, sehr gut.

00:29:01.680 --> 00:29:03.620
 Hoppla.

00:29:04.460 --> 00:29:06.720
 Also, jetzt ist das der, das ist der Moment für einen Applaus, oder?

00:29:06.720 --> 00:29:10.680
 Also, hab ich, hab ich gelernt, ja.

00:29:10.680 --> 00:29:13.840
 Also, zur Erklärung für den Podcast ist gerade jemand vom Stuhl gefallen.

00:29:13.840 --> 00:29:16.160
 Und Flasche umwerfen, hab ich, hab ich gelernt.

00:29:16.160 --> 00:29:18.080
 Genau, wenn's draußen kleppert, dann wird geklatscht.

00:29:18.080 --> 00:29:19.420
 Genau, es wird, es wird geklatscht.

00:29:21.420 --> 00:29:25.420
 Sehr gut, sehr gut.

00:29:25.420 --> 00:29:28.100
 Genau, also meine erste Intention war, äh, okay, dann machen wir halt irgendwie Keyframes

00:29:28.100 --> 00:29:30.820
 und eine CSS-Animation und animieren den Hintergrund.

00:29:30.820 --> 00:29:34.340
 Aber da haben sich die Browser-Hersteller wohl irgendwie gedacht, das ist zu viel des Guten,

00:29:34.340 --> 00:29:35.140
 das verhindern wir.

00:29:35.860 --> 00:29:38.740
 Aber wir wären nicht wir, wenn wir nicht ein bisschen weiter versucht hätten.

00:29:38.740 --> 00:29:44.140
 Und es geht, indem man die Hintergrundfarbe, oder die Animation der Hintergrundfarbe

00:29:44.140 --> 00:29:48.700
 nicht auf diese, diese Pseudo-Elemente setzt, sondern auf den Container, zu dem die Scrollbars

00:29:48.700 --> 00:29:49.140
 gehören.

00:29:49.140 --> 00:29:53.360
 Und dann kann ich Background Inherit setzen und dann funktioniert das auch mit der Animation.

00:29:53.360 --> 00:29:56.180
 Achso, ist das hier, ja, man sieht's so ein bisschen.

00:29:56.180 --> 00:29:58.040
 Genau, das ist ein, äh, das ist relativ dezent da unten.

00:29:58.040 --> 00:30:02.260
 Das ist ein CSS-Gradient, der halt durchwandert, der sich größer aufspannt, als das Element

00:30:02.260 --> 00:30:04.500
 ist und dann durchanimiert wird mit einer Transition.

00:30:05.300 --> 00:30:06.020
 Ja, mit einer Transform.

00:30:06.020 --> 00:30:08.220
 Und, äh, ja.

00:30:08.220 --> 00:30:09.660
 Kann man machen.

00:30:09.660 --> 00:30:12.340
 Kann man machen, aber Konstantin hat da noch nicht aufgehört.

00:30:12.340 --> 00:30:14.640
 Ich hab dann auch gemeint, es blinkt zu wenig, es war seine Idee.

00:30:14.640 --> 00:30:16.800
 Er meinte, ja, vielleicht kriegen wir noch was anderes hin.

00:30:16.800 --> 00:30:19.720
 Und dann ist mir eingefallen, ja klar, es gibt animierte SVGs.

00:30:19.720 --> 00:30:29.100
 Ja, es gibt animierte SVGs und, äh, ja, das geht offenbar, wie wir dann gelernt haben.

00:30:29.100 --> 00:30:32.480
 Also, hier tatsächlich Hotlinking auf andere Seiten, das ist immer erwünscht.

00:30:32.600 --> 00:30:36.480
 Immer eine gute Idee, das zu machen, sich die Grafiken von anderen Seiten zu ziehen.

00:30:36.480 --> 00:30:39.400
 In dem Fall natürlich schön, was ist das eigentlich, das ist so ein Android?

00:30:39.400 --> 00:30:43.260
 Das ist so ein Android mit aufgeklapptem Mund, der irgendwie verschiedene Browser ist.

00:30:43.260 --> 00:30:47.400
 Ja, ist auf jeden Fall, ne, das ist das Edge-Logo, ist gar nicht mal Internet Explorer.

00:30:47.400 --> 00:30:50.460
 Edge, Firefox und ein grüner Apfel, sehe ich das richtig?

00:30:50.460 --> 00:30:51.920
 Rot-Grün-Schwäche oder ist er orange?

00:30:51.920 --> 00:30:52.520
 Ist grün.

00:30:52.640 --> 00:30:53.760
 Okay, dann, immerhin.

00:30:53.760 --> 00:31:03.860
 Äh, ja, sehr schön, äh, unbedingt nachmachen, auf eurer Seite so einbauen, die CodePen, die Demos, äh, keine Ahnung, könnt ihr, könnt ihr, könnt ihr Konum auf CodePen, äh, folgen und angucken.

00:31:03.940 --> 00:31:07.900
 Die sind alle öffentlich, oder halt, äh, wenn die Demos von mir sind, Show Notes angucken, genau.

00:31:07.900 --> 00:31:10.800
 Ähm, oder halt die Demos von mir, das ist, äh, mein Name ist ...

00:31:10.800 --> 00:31:17.660
 Also, normalerweise würde man vielleicht einfach eine, eine Schmuckfarbe wählen oder zwei für den, für den Anfasser noch und damit arbeiten.

00:31:17.660 --> 00:31:29.660
 Also, man könnte das zum Beispiel so machen, wie auf unserer Podcast-Seite, das ist ja eher dezent, sag ich mal, ja, so sich an die Farben annähern und, äh, aber ich find eigentlich, ich find's schon schöner.

00:31:29.660 --> 00:31:31.060
 Ich find's eigentlich schon so schöner.

00:31:31.060 --> 00:31:32.360
 Sollten wir eigentlich bei uns auch einbauen.

00:31:32.360 --> 00:31:32.740
 Ja.

00:31:33.700 --> 00:31:42.100
 Aber vielleicht, mir ist es noch nicht hektisch genug, ehrlich gesagt, aber das, wir haben jetzt nichts Hektischeres, keine Ahnung, also das, doch, wir haben noch eine hektischere, nee, haben wir, ich weiß gar nicht genau.

00:31:42.100 --> 00:31:51.440
 Ähm, okay, dann kommen wir jetzt, warte mal, Moment, ach so, das Carrot ist da hinten, okay, gut, die Reihenfolge ist, glaub ich, ein bisschen anders, als ich es im Kopf hatte, egal.

00:31:51.440 --> 00:32:03.680
 Dann kommen wir jetzt noch zu was, äh, zu was Schönem, ähm, was irgendwann kommen wird, hoffentlich, aber wir haben vorhin festgestellt, oder ich hab vorhin sieben Teils festgestellt, dass die Demo, die ich dafür mal gebaut hab, komplett kaputt gegangen ist, weil die Browser-Hersteller mittlerweile,

00:32:03.700 --> 00:32:33.680
 irgendwie, also das ist ein Standard im Entstehen, ich zeig dann gleich mal, um was es geht, ähm, äh, wenn ihr Webseiten baut, äh, dann seid ihr bestimmt schon mal auf das Problem gestoßen, dass ihr so eine Select-Box, dass jemand so euch sagt, die würde ich jetzt gern stylen, also auf dem Mac sieht das so aus, das ist so ein ganz Standard, ich hab hier so ein Auswahlfeld, ich drück da drauf und dann hab ich verschiedene Optionen, die ich auswählen kann, das ist so eine Standard, äh, Select-Box, so, ähm, das ist schon immer ein Schmerz gewesen, wenn Grafiker dann kommen, äh, oder, oder UX-Designer und sagen,

00:32:33.680 --> 00:32:43.600
 hey, äh, style das mal, und da, man kann ein bisschen was machen, man kann ein bisschen was machen, ähm, das hier ist zum Beispiel, äh, eine Demo von Chris Coyer, der hat die Seite CSS-Tricks gegründet,

00:32:43.600 --> 00:32:49.760
 ich behaupte, der hat das ganz gut verstanden, was man so alles machen kann, aber was man, das Einzige, was man machen konnte, bislang, eigentlich war

00:32:49.760 --> 00:32:57.400
 immer nur, die Box selbst stylen, aber nicht den Content, also ihr seht, da ist jetzt irgendwie ein schöner blauer Rahmen drum, da ist irgendwie so ein Pfeil,

00:32:57.400 --> 00:33:03.500
 das sieht jetzt irgendwie ganz anders aus als vorher, das ist immer noch, ihr könnt es hier sehen, tatsächlich ein echtes Select-Element, nicht irgendwas anderes,

00:33:03.660 --> 00:33:10.440
 ähm, und man möchte das, äh, aus vielen verschiedenen Gründen, möchte man eigentlich immer die nativen, ähm, ähm, äh, Browser, äh,

00:33:10.440 --> 00:33:15.820
 UI-Elemente verwenden, man möchte das nicht von Hand irgendwie mit JavaScript und irgendwelchen Layern nachbauen, ähm,

00:33:15.820 --> 00:33:19.880
 weil es ist einfach so, es ist barrierefrei, es funktioniert immer mit der Tastatur und so weiter, also,

00:33:19.880 --> 00:33:25.440
 kann ich hier mal zeigen, äh, ich hab's jetzt mal angetappt, ich kann jetzt hier mit, mit Leertaste öffnen, mit den Pfeiltasten hin und her,

00:33:25.440 --> 00:33:29.180
 das ist das Verhalten, was ich eigentlich von der Select-Box immer haben will, genau.

00:33:29.760 --> 00:33:35.480
 Also, das ist so ziemlich alles, was, was die, was die längste, was die meiste Zeit jetzt irgendwie ging und lange ging ja auch gar nix.

00:33:35.480 --> 00:33:35.880
 Ja.

00:33:35.880 --> 00:33:39.820
 Also, da hat man sich früher aufgehäufen, irgendwie vielleicht noch, aber auch nicht in allen Browsern.

00:33:39.820 --> 00:33:45.960
 Also, früher, früher hat man sich damit ausgeholfen, dass man die Teile tatsächlich komplett transparent gemacht hat, äh,

00:33:45.960 --> 00:33:54.840
 und was drunter gelegt hat, was so aussehen soll, äh, wie die Select-Box, die man haben will und dass man trotzdem das native Element irgendwie verwenden kann, aber das ist irgendwie eklig.

00:33:54.840 --> 00:34:04.480
 So, aber, äh, es wissen die Browser-Hersteller und, und diverse Interessengruppen schon sehr, sehr lange, dass das, äh, keinen Spaß macht, äh, das zu stylen und dass es diese Anforderungen immer mal wieder gibt.

00:34:04.480 --> 00:34:11.640
 Ähm, und, äh, viele Leute bauen dann sowas, also, äh, das sieht jetzt erstmal gut aus, da sieht man hier irgendwie Select und so.

00:34:11.640 --> 00:34:14.960
 Ähm, ich kann mal zeigen, wie es aussieht, wenn man es bedient.

00:34:14.960 --> 00:34:18.800
 Ja, schön, schick, ist komplett anders, ist komplett umgestylt.

00:34:18.800 --> 00:34:26.940
 So, und jetzt zeige ich euch einfach mal, was da wirklich dahinter tickt, weil der Code hier, der ist ein bisschen misleading, weil da passiert eine Menge JavaScript im Hintergrund.

00:34:27.740 --> 00:34:29.660
 Das ist tatsächlich nur auf jQuery basierend.

00:34:29.660 --> 00:34:29.860
 Oh.

00:34:29.860 --> 00:34:32.840
 Die, kennt vielleicht auch der eine oder andere noch.

00:34:32.840 --> 00:34:38.580
 So, was aber hier in Wirklichkeit passiert ist, ups, sie, ah, jetzt, äh, jetzt hat sich's rumgedreht, interessant.

00:34:38.580 --> 00:34:40.280
 So, aber ist vielleicht gar nicht so schlecht.

00:34:40.280 --> 00:34:43.360
 So, was ist hier denn eigentlich wirklich?

00:34:43.360 --> 00:34:51.140
 Sorry, Nippon Paratka, dass wir dein Demo als, äh, als Negativbeispiel zeigen, tut mir leid.

00:34:51.140 --> 00:34:56.880
 Ähm, genau, was hier nämlich eigentlich sichtbar ist, da unten ist das Select noch, aber das hat Display None bekommen.

00:34:57.740 --> 00:35:05.260
 Und wenn ein, äh, ein Eingabefeld, egal, wenn irgendein HTML-Element, äh, Display None bekommt, dann wird das komplett entfernt aus dem DOM-Tree.

00:35:05.260 --> 00:35:10.720
 Das bedeutet auch zum Beispiel Screenreader oder irgendwelche Technologien, äh, das wird, ist, ist weg, es ist verschwunden dann.

00:35:10.720 --> 00:35:13.960
 Das heißt, es ist, äh, nicht mehr bedienbar, auch nicht mehr mit der Tastatur.

00:35:13.960 --> 00:35:26.460
 So, was jetzt, was wir jetzt hier eigentlich sehen, ist ein Span mit irgendwas drin, mit irgendwelchen, äh, CSS-Klassen, ähm, und dann irgendwie auch nochmal ein Diff mit, mit, das ist jetzt der Inhalt.

00:35:26.460 --> 00:35:31.060
 Und das wird alles per JavaScript auf und, äh, also die ganze Funktionalität ist mit JavaScript nachimplementiert worden.

00:35:31.060 --> 00:35:36.300
 Natürlich aber nicht alles, weil wenn ich jetzt da versuche reinzutabben, dann habe ich überhaupt gar kein fokussierbares Element.

00:35:36.300 --> 00:35:42.140
 Also, ihr seht, es ist irgendwie nach unten gesprungen, ich gehe nochmal nach oben, also ich klicke hier rein, es ist einfach nichts.

00:35:42.140 --> 00:35:46.380
 Äh, ich kann gar nichts mit der Tastatur machen und Screenreader sehen, das Element überhaupt nicht.

00:35:46.460 --> 00:35:50.740
 Also, das ist nicht so die, die beste Idee, sowas zu lösen, wenn man jetzt irgendwie so Designanforderungen hat.

00:35:50.740 --> 00:35:59.060
 Deswegen, äh, sind Menschen auf die Idee gekommen, da muss man was dran ändern und das ist jetzt so ein Standard, den haben wir ja, glaube ich, vor einem Jahr oder eineinhalb mal vorgestellt.

00:35:59.200 --> 00:36:05.800
 Und seitdem hat sich leider nicht so extrem viel getan, aber es gab dann Leute, die gesagt haben, hey, wir brauchen was Neues und was irgendwie barrierefrei ist und was richtig gut funktioniert.

00:36:05.800 --> 00:36:11.200
 Das ist, glaube ich, nach wie vor immer noch nur, äh, Chromium, äh, äh, äh.

00:36:12.200 --> 00:36:15.880
 Das steht auch hier, genau, Experimental Web-Plattform-Feature, das muss man dafür anschalten.

00:36:15.880 --> 00:36:17.620
 Und der Flag, das man extra aktivieren muss, hat sich auch nicht geändert.

00:36:17.620 --> 00:36:20.620
 Deswegen habe ich jetzt hier extra einen ganz neuen Chrome mit dem, mit dem Kram an.

00:36:20.620 --> 00:36:25.540
 Übrigens, äh, wenn man immer damit browset, dann passieren manchmal komische Dinge, äh, wenn man das immer anhat.

00:36:25.540 --> 00:36:28.100
 Ich hatte da schon sehr merkwürdige Effekte, dass Bilder nicht mehr geladen haben und so.

00:36:28.100 --> 00:36:33.900
 Sollte man nicht als Standard-Browser verwenden, in diesem Zustand, äh, würde ich, äh, würde ich, ja, von abraten.

00:36:33.900 --> 00:36:40.900
 Aber, was die erfunden haben, ist, die haben gesagt, naja, Select, wir wollen das Web nicht kaputt machen, äh, wir erfinden jetzt was Neues.

00:36:40.900 --> 00:36:44.080
 Wir, wir, wir, nehmen nicht das Alte und verändern, sondern wir erfinden was Neues.

00:36:44.080 --> 00:36:47.180
 Das heißt jetzt Select Menu, kann mehr, klingt, klingt ja schon mal super.

00:36:47.180 --> 00:36:52.440
 Ähm, aber seitdem die die Seite hier aufgesetzt haben, hat sich die Implementierung im Browser schon so verändert,

00:36:52.440 --> 00:36:54.100
 dass die Demos leider nicht mehr alle funktionieren.

00:36:54.100 --> 00:36:56.180
 Aber mich hat das hier schon extrem überzeugt.

00:36:56.180 --> 00:37:00.000
 Das ist nämlich, äh, ein rundes Emoji-Button, auf das ich draufklicken kann.

00:37:00.000 --> 00:37:02.980
 Und dann habe ich eine runde Select-Box, in der ich Sachen auswählen kann.

00:37:02.980 --> 00:37:06.460
 Und das kann ich tatsächlich auch hier mit der Tastatur machen.

00:37:06.600 --> 00:37:11.940
 Also, das ist tatsächlich ein echtes Browser-Element, was der Browser unterstützt mit allem Pipapo.

00:37:11.940 --> 00:37:15.140
 Aber ich kann halt zum Beispiel das ganze Ding rund designen, was vorher halt nicht ging.

00:37:15.140 --> 00:37:17.180
 Das Betriebssystem hat entschieden, wie es aussehen soll.

00:37:17.180 --> 00:37:18.460
 Man kann es aber auch noch ganz anders machen.

00:37:18.980 --> 00:37:26.880
 Also, zum Beispiel auch so irgendwie so Material-Design-artig, irgendwie so mit Schatten geht so ein Ding auf, das weiß ist und das wird so grau hinterlegt.

00:37:26.880 --> 00:37:28.780
 Also, ich kann tatsächlich auch den Inhalt irgendwie verändern.

00:37:28.780 --> 00:37:31.000
 Ähm, die Demo geht, glaube ich, nicht mehr.

00:37:31.000 --> 00:37:33.740
 Ähm, die geht auch nicht, wie ihr seht.

00:37:33.740 --> 00:37:36.880
 Äh, es gibt hier diesen ... Das finde ich noch ganz nett.

00:37:37.040 --> 00:37:40.060
 Also, das sind genau so diese Design-Anforderungen, die man gerne bekommt.

00:37:40.060 --> 00:37:42.240
 Ja, mach das Ding nochmal größer, ich will da noch einen Text unten drunter haben.

00:37:42.240 --> 00:37:43.200
 Geht alles mit Select nicht.

00:37:43.200 --> 00:37:44.420
 Ich kann da drin gar nichts designen.

00:37:44.420 --> 00:37:45.380
 Da ist einfach nur Text drin.

00:37:45.380 --> 00:37:47.380
 Und vielleicht kann ich noch ein Emoji reinpacken.

00:37:47.380 --> 00:37:48.160
 Und das war's dann auch.

00:37:48.160 --> 00:37:50.080
 Bild ist schon, ist schon Gülle geht nicht.

00:37:50.080 --> 00:37:55.300
 Und, ähm, hier also auch so was ein bisschen komplexer mit so einer, mit verschiedenen Gruppierungen.

00:37:55.300 --> 00:37:58.600
 Und dann habe ich unten Emojis und, ähm, genau.

00:37:59.940 --> 00:38:01.340
 Oder zum Beispiel auch Color-Picker.

00:38:01.340 --> 00:38:03.080
 Es gibt natürlich auch nativen Color-Picker.

00:38:03.080 --> 00:38:05.380
 Es gibt ja Input-Type-Color, glaube ich, wenn ich's richtig weiß.

00:38:05.380 --> 00:38:07.200
 Aber dann habe ich nicht so vorausgewählte Farben.

00:38:07.200 --> 00:38:08.300
 Das Ding ist tatsächlich komplett ...

00:38:08.300 --> 00:38:10.980
 Genau, das ist keine Palette, sondern du hast halt ein Farbfeld, ja.

00:38:10.980 --> 00:38:12.340
 So, und das, äh, ja gut.

00:38:12.340 --> 00:38:14.540
 Habe ich jetzt natürlich wieder was sehr Hübsches ausgewählt.

00:38:14.540 --> 00:38:19.180
 So, ähm, aber wir haben natürlich ja versucht, das kaputt zu machen.

00:38:19.180 --> 00:38:24.520
 Ähm, weil ich hab mich dann gefragt, äh, wenn man da schon so viel verrücktes Zeug mitmachen kann,

00:38:24.520 --> 00:38:25.800
 was kann man denn da alles reinpacken?

00:38:25.800 --> 00:38:27.040
 Wie, wie, wie geht denn das?

00:38:27.040 --> 00:38:29.520
 Und, äh, natürlich wieder eine kleine Demo gebaut.

00:38:29.740 --> 00:38:32.700
 Ähm, also das hier ist, Moment, müssen wir da ganz nach oben scrollen.

00:38:32.700 --> 00:38:34.680
 Nicht, nicht gleich mit dem Stranger-Stuff beginnen.

00:38:34.680 --> 00:38:36.500
 Also das ist jetzt Select-Menu-Plane.

00:38:36.500 --> 00:38:40.960
 Wenn ich einfach gar nichts damit mache, kein Style, nichts damit verändere.

00:38:40.960 --> 00:38:42.840
 Also das, ich zeig nochmal im HTML.

00:38:42.840 --> 00:38:45.920
 Ähm, genau.

00:38:45.920 --> 00:38:50.760
 Statt Select einfach nur steht da jetzt Select-Menu und Opt-Group und Option.

00:38:50.760 --> 00:38:52.940
 Das gibt's bei Select auch schon, also eine Gruppierung.

00:38:52.940 --> 00:38:56.120
 Ähm, und das sieht dann so aus.

00:38:56.120 --> 00:38:57.680
 Das sieht schon ein bisschen anders aus.

00:38:57.680 --> 00:39:02.340
 Das ist jetzt schon irgendwie mit weißem Hintergrund und sieht schon, aber daran hab ich am Style jetzt tatsächlich gar nichts geändert.

00:39:02.340 --> 00:39:03.560
 Das macht der Browser irgendwie so.

00:39:03.560 --> 00:39:10.580
 Ähm, dann hab ich mir gedacht, okay, äh, Regenbögen wären doch irgendwie mal, wären mal versucht wert.

00:39:10.580 --> 00:39:12.920
 Ihr seht schon, äh, das Ding sieht schon ein bisschen anders aus.

00:39:13.020 --> 00:39:15.800
 Das Teil hier ist irgendwie rot und das ist farblich hinterlegt mit dem Pfeil.

00:39:15.800 --> 00:39:19.760
 Das hätte man vielleicht mit CSS noch so, ah, ich glaube, den dicken roten Rahmen hätte man, glaube ich, nicht hingekriegt.

00:39:19.760 --> 00:39:28.780
 Aber man kann halt die Options auch, äh, mit Regenbögen hinterlegen, sehr, sehr hübsch, nicht mehr lesbar eigentlich und man kann da drin auch schön scrollen.

00:39:28.780 --> 00:39:34.180
 Ist das aber, okay, da sieht man schon, ähm, die Implementierung ist ein bisschen komisch, weil wenn ich jetzt, ähm, ist es größer geworden beim Scrollen.

00:39:34.180 --> 00:39:37.760
 Es ist, ähm, nee, also an meinem Code liegt's auf keinen Fall.

00:39:38.000 --> 00:39:42.220
 Nein, das liegt definitiv am Browser. Das hat schon mal funktioniert. Works on my machine, ihr wisst ja, ne?

00:39:42.220 --> 00:39:48.340
 So, genau, und das ist das, äh, Moment, ist das das? Ne, das ist das hier.

00:39:48.340 --> 00:39:56.620
 Hab ich eigentlich nur, da gibt's eigentlich nur eine CSS-Klasse, die ich da draufgelegt hab, äh, die heißt styled und dann hab ich halt, genau, da könnte ich vielleicht noch erklären, wie das generell gestylt wird.

00:39:56.620 --> 00:40:03.980
 Ähm, es gibt, ähm, da gibt's ein Pseudo-Element mit Doppelpunkt, Doppelpunkt, Part, das ist irgendwie, glaube ich, dafür erfunden worden.

00:40:03.980 --> 00:40:05.320
 Das hab ich sonst noch nirgends gesehen.

00:40:05.320 --> 00:40:07.840
 Ist das nicht für Web-Components auch, ne?

00:40:07.920 --> 00:40:17.680
 Ist, ja, ich glaube, ist auch für Web-Components, äh, in diesem Fall, äh, gibt's da fertige, äh, fertige, in dem Select-Box, äh, Select-Menu gibt's da fertige Werte, die da reingefüllt werden können, zum Beispiel der Button.

00:40:17.680 --> 00:40:19.740
 Das ist das ganze Ding hier.

00:40:19.740 --> 00:40:23.080
 Das ist quasi wie nochmal ein Selektor, der da, der übergeben wird als Parameter.

00:40:23.080 --> 00:40:28.760
 Genau, da seht ihr hier, äh, Background-Color-Peach-Puff, das ist das hier, ich weiß nicht, wie das bei euch aussieht, eine meiner Lieblingsfarben.

00:40:28.760 --> 00:40:33.000
 Ähm, dann haben wir Selected-Value, das ist das Rote, also seht ihr hier Background-Red.

00:40:33.000 --> 00:40:36.600
 Ähm, also das ist wirklich der derzeit ausgewählte Text.

00:40:37.840 --> 00:40:41.560
 Oder vielleicht auch was anderes, wie wir gleich noch sehen werden, vielleicht nicht nur Text.

00:40:41.560 --> 00:40:45.640
 Ähm, und dann gibt es noch List-Box, das ist das, das ist die Box, die da aufgeht.

00:40:45.640 --> 00:40:49.400
 Da sieht man hier Border-Radius, 100-Pixel, ähm, Padding und so weiter.

00:40:49.400 --> 00:40:51.740
 Minheit, was nicht so richtig greift.

00:40:51.740 --> 00:40:52.980
 Genau.

00:40:53.520 --> 00:41:07.720
 So, aber, wenn wir, wenn wir noch anderes komisches Zeug damit versucht hätten, ähm, ich hab jetzt dann mal versucht, in ein Select-Menu alles reinzupacken, was mir so einfällt, was da nichts zu suchen hat.

00:41:08.420 --> 00:41:14.080
 Also so, ich hab mir gedacht, okay, ja, keine Ahnung, was sind wir da vielleicht drin haben, irgendwie Bilder oder so vielleicht noch, Text, klar.

00:41:15.080 --> 00:41:18.700
 Aber, okay, was wäre mit einem Link?

00:41:19.760 --> 00:41:24.660
 Das ergibt irgendwie keinen Sinn, weil ich klicke ja schon oft was drauf, ich wähle was aus, Link funktioniert, haben wir hier.

00:41:24.660 --> 00:41:30.640
 Äh, geht's hier auf www.siv.de, also unsere Webseite, SVG-Grafik, okay, das ist jetzt gar nicht so wild.

00:41:31.440 --> 00:41:35.600
 Man kann zum Beispiel anderes HTML reinpacken, eine Liste und eine Überschrift, geht vielleicht auch noch.

00:41:35.600 --> 00:41:46.600
 Ups, Moment, ein Eingabefeld, weiß nicht, wofür das gut sein soll, vielleicht, ah doch, das hab ich, glaub ich, in einer anderen Demo gesehen, so als Filter zum Beispiel, könnte noch sinnvoll sein.

00:41:46.600 --> 00:42:01.420
 Ein weiteres Select geht auch, ähm, es ist ein bisschen schwierig drauf zu klicken, ähm, es geht da nämlich zu, aber ich hab jetzt hier, ihr seht, ich hab's ausgewählt, also Option 1, Option 2, das ist jetzt das, was ich ausgewählt hab.

00:42:01.440 --> 00:42:03.020
 Das ist dieses komplette Select-Feld hier.

00:42:03.020 --> 00:42:08.440
 Also steht dann quasi bei dem ausgewählten immer das drin, was sich auch mit Text-Content, äh, mit dem Attribut rausbekommt.

00:42:08.440 --> 00:42:17.500
 Genau, also wenn da kein Text drinsteht und das nur irgendwie jetzt ein HTML-Element ist ohne Text, äh, zum Beispiel bei SVG hab ich SVG dazu geschrieben, also wenn jetzt kein SVG stehen würde, dann wäre das einfach leer.

00:42:17.500 --> 00:42:26.500
 Ähm, ein Date-Picker geht auch und, äh, ein YouTube-Live-Stream-Video.

00:42:26.500 --> 00:42:28.420
 Was im Endeffekt ein Live-Frame ist, der dann...

00:42:28.420 --> 00:42:33.900
 Ähm, also ich hab jetzt, ich steck jetzt das nicht um, aber ihr glaubt mir, das läuft jetzt tatsächlich und da kommt jetzt Sound raus.

00:42:33.900 --> 00:42:41.580
 Also dass auch da, auch das geht, man kann natürlich noch andere Input-Felder, äh, reintoten, irgendwie Range-Input, jetzt muss ich aufpassen, dass ich da rausgehe, ah nee, es geht trotzdem zu, schade.

00:42:41.580 --> 00:42:49.760
 Äh, also auch das, und ich weiß nicht so genau, wie sinnvoll das ist, ähm, vielleicht habt ihr noch Ideen, was man da noch reinpacken könnte, was da nicht hingehört.

00:42:49.760 --> 00:42:54.920
 Äh, ich glaub, YouTube-Live-Video war so das, war so das, das krasseste, was mir eingefallen ist.

00:42:54.980 --> 00:42:57.000
 Also es ist im Endeffekt unrestriktiert, ne?

00:42:57.000 --> 00:43:00.980
 Es ist komplett, ja, ich hab nichts gefunden, was nicht funktioniert da drin.

00:43:00.980 --> 00:43:10.840
 Ähm, außer das Design ist jetzt irgendwie, es geht jetzt irgendwie in eine komische Richtung auf, weil, das will ich vielleicht noch zeigen, also es hat mal so funktioniert, wie man es vermuten würde, aber wenn ich es jetzt aufklappe,

00:43:11.820 --> 00:43:17.040
 Wenn ich es jetzt so weit gescrollt hab, es ist jetzt am oberen Bildschirmrand, was würdet ihr sagen, in welche Richtung klappt es auf, wenn ich jetzt drauf drücke?

00:43:17.040 --> 00:43:19.380
 Nach unten?

00:43:19.380 --> 00:43:20.460
 Genau, falsch.

00:43:20.460 --> 00:43:22.380
 Es klappt nach oben.

00:43:22.380 --> 00:43:25.520
 Ähm, keine Ahnung, das, äh, wir wissen es nicht genau.

00:43:25.520 --> 00:43:42.940
 Ja, das hat ja schon mal funktioniert und ich vermute, äh, wir haben vor einer Weile mal, ähm, die Popover, äh, API vorgestellt und da gab's dann so ein ganz crazy CSS-Notation mit Add Position, wo ich dann Berechnungen drin anstellen konnte, wie viel Platz hab ich im Viewport und soll das erst oben und dann unten angezeigt werden und so weiter.

00:43:43.300 --> 00:44:13.000
 Und ich, äh, vermute, dass, äh, in Chromium das, äh, schon implementiert wurde, auch jetzt für die, für diese Select Menus, äh, und wir das in der Demo im Endeffekt, äh, updaten müssen, aber ich würde trotzdem erwarten, dass der Default-Zustand das automatisch macht, dass er den, den, den Viewport nicht nutzt, aber wie gesagt, das ist alles irgendwie so, äh, ja, top, top-notch, äh, ähm, alles ganz neu und, ähm, wir haben ja auch diesen, äh, die, die CSS-Subgrid-Geschichte jetzt irgendwie schon seit zwei Jahren verfolgt, äh, im Bugtracker von, von, von Chromium.

00:44:13.080 --> 00:44:27.320
 Also, die Sachen brauchen einfach eine Weile, bis sie implementiert werden und ich bin gespannt, ob da noch was zusammengestrichen wird, dass ich da nicht alles reinpacken darf oder ob das so bleibt, ähm, und, äh, ja, wie, wie, wie schnell wir das nutzen können, aber ich befürchte so, im letzten Jahr wird das noch nix.

00:44:27.320 --> 00:44:42.860
 Das, das, das, ich bin ein großer Fan von, das soll unbedingt ganz schnell live gehen, weil da so viele Probleme mit gelöst werden. Also, ich, ich erinnere mich noch, dass ich mal auf einer, auf einer Konferenz war, JS-Cont war das, glaube ich, ähm, wo, äh, ein damaliger Mitarbeiter von Microsoft irgendwie so eine große Kampagne gefahren hat, ich will jetzt wissen, mit welchen Formularelementen

00:44:42.860 --> 00:44:53.860
 Elementen habt ihr den meisten Pain. Er hat da eine Umfrage gemacht und da kam am Ende mit Abstand raus, Select ist der größte Schmerz bei allen, weil man damit quasi gar nix machen kann und, äh, das wär wirklich, wirklich tolle Sache, weil zum Beispiel so was...

00:44:53.860 --> 00:45:16.860
 Es ist halt vor allem, dass das, das letzte Inselchen noch an Formularelementen bisher, außer was, wo wir gleich noch, äh, drauf kommen, was sich halt noch nicht stylen lässt. Also, selbst Checkboxen, das war ja auch früher, äh, eine ziemliche Pain, die man dann auch irgendwie versteckt hat oder, äh, umpositioniert hat und dann irgendwie ein anderes Element hin, Span hinten ran und mit dem Checkt, äh, Pseudoselektor dann irgendwelche Dinge gebastelt hat. Das, selbst das geht ja jetzt inzwischen eigentlich, äh, ganz gut. Und jetzt so das Select ist noch das letzte Ding.

00:45:16.860 --> 00:45:25.260
 Checkboxen und Radio Buttons und sowas, das kann man mittlerweile eigentlich alles ganz gut mit Bordmitteln machen oder es gibt, äh, anerkannte Workarounds, die wirklich gut auch für alle Systeme funktionieren und so.

00:45:25.340 --> 00:45:32.920
 Accessible sind. Äh, genau, auch Accessible sind, aber das, das Select ist einfach ein Pain in the Butt. Das muss, das muss, äh, ich brauch Select Menu.

00:45:32.920 --> 00:45:48.780
 So, ihr seht jetzt hier grad noch, äh, ein Cursor blinken. Ich hab hier grad nochmal, also, ich mag's ja gern bunt. Was, was, was, was meinst du, wär, wär eine Schande, wenn, wenn der nicht auch als in Regenbogenfarben blinken könnte, oder?

00:45:48.940 --> 00:45:58.840
 Find ich auch. Gut, also, ja, schwache Überleitung, ich weiß, aber, äh, in unserer nächsten Demo hab ich genau das mal versucht, weil es gibt nämlich tatsächlich eine Eigenschaft in CSS, die heißt Carrot Color.

00:45:58.840 --> 00:46:10.940
 Ähm, und wir haben vorhin tatsächlich, äh, live noch debugged, ob wir irgendwie hinkriegen können, dass man, dass der Cursor ein bisschen breiter ist und wir haben's tatsächlich auch dann geschafft, weil, äh, ich, ähm,

00:46:11.300 --> 00:46:23.220
 Wenn ich jetzt da reinklicke, dann, äh, macht euch, macht euch gefasst auf, äh, Regenbogen, ähm, weil es ist tatsächlich möglich, äh, nicht, nicht nur in einer Farbe einzufärben, sondern tatsächlich mit einer CSS-Animation, hier mit einer Keyframe-Animation,

00:46:23.220 --> 00:46:30.420
 einfach durch verschiedene Farben, äh, durchzurotieren. In dem Fall halt einfach Green, Yellow, Red, äh, Blue und, äh, genau.

00:46:30.540 --> 00:46:44.960
 Die Übergänge werden vom Browser gemacht und es blinkt halt so, ich glaube, irgendwo hab ich noch die Zeit angegeben, nur 0,5 Sekunden, ähm, und, äh, das, äh, infinite, das heißt, es, äh, rotiert immer weiter und der Cursor blinkt jetzt, äh, sehr, sehr bunt und ich glaube, man kann's aber, man kann's aber ganz gut sehen.

00:46:44.960 --> 00:46:59.100
 Und standardmäßig ist der aber immer nur ein Pixel dünn und ich kann das auch nicht irgendwie, ich kann da keine Width, äh, setzen oder so und dann, äh, irgendjemand hat uns vorhin, äh, ich glaub du warst das, ne, aber dann probiert doch mal, äh, das Ganze mit einer, mit einem Transform hoch zu skalieren.

00:46:59.100 --> 00:47:01.540
 Und das war tatsächlich die, die Dosis.

00:47:01.540 --> 00:47:21.560
 Genau, und wir haben hier Transform Scale 8 in dem Fall, also wirklich achtfache Vergrößerung von diesem Eingabefeld, ähm, also mit Zoom hat's nicht funktioniert, ähm, mit, äh, Font Size hat's nicht funktioniert, aber mit, äh, mit Transform Scale hat's funktioniert und jetzt ist das Ding tatsächlich auch relativ breit, ist natürlich nur für Demo-Zwecke jetzt so groß, ähm, aber, Regenbogencursor auf eurer Seite ab morgen.

00:47:21.560 --> 00:47:22.420
 Genau.

00:47:22.420 --> 00:47:22.880
 Ganz einfach.

00:47:22.880 --> 00:47:28.840
 Also das sind, äh, das sind natürlich jetzt Kleinigkeiten und was wir hier vorstellen, ist natürlich alles immer viel, äh, Gespiele und, und nicht unbedingt für den Alltagseinsatz gedacht.

00:47:28.840 --> 00:47:39.560
 Aber, ähm, es ist halt, äh, wir, wir kommen an einen Punkt, wo wir kaum noch Elemente haben, die vom Browser vorgegeben oder aus, aus dem System UI kommen, sondern wir können alles beeinflussen.

00:47:39.560 --> 00:47:45.220
 Ob das jetzt unbedingt gut ist oder schlecht, so mit den Scrollbars, ne, äh, kann man sich drüber streiten, aber es ist halt einfach, es ist möglich.

00:47:45.360 --> 00:47:57.940
 Also wir sind einfach immer weniger eingeschränkt und wir haben jetzt so an, an Layout-Funktionalitäten, ähm, in CSS endlich, äh, auch einen Punkt, wo eigentlich alles möglich wird und, äh, früher gab's nicht mal abgerundete Ecken, wie man sie jetzt hier sieht, ja.

00:47:58.380 --> 00:48:10.520
 Ähm, ähm, und jetzt, jetzt kommt halt an Implementierung und nichts mehr groß Bahnbrechendes, sondern es geht halt in die Details und ich kann jetzt halt die, die, äh, Carat-Farbe da ändern und ich kann, äh, Selects ändern und so weiter.

00:48:10.660 --> 00:48:22.700
 Also, äh, ich find das nicht schlecht, also, ähm, man kann einfach jetzt, ne, viele wissen das auch noch gar nicht und man kann aber irgendwie auf einer Seite vielleicht dadurch hervorstechen, dass halt mein Textcursor auch zu der Farbe passt.

00:48:22.700 --> 00:48:27.560
 Jetzt nicht unbedingt rund blinkt, aber dass er halt von der Farbe her passt und dass meine Scrollbars irgendwie, äh, schicker aussehen.

00:48:27.560 --> 00:48:29.580
 Ich glaube, in den meisten Fällen sollte man die Finger davon lassen.

00:48:29.580 --> 00:48:32.380
 Wenn man's gut macht, kann man's durchaus benutzen.

00:48:32.380 --> 00:48:40.400
 Äh, ich, Iberg, bin da auch sehr gespalten, ob man das tun sollte oder nicht, oder ob man so ein, wirklich diese Möglichkeit, da bin ich mir echt nicht sicher, ob's eine gute Idee ist, aber,

00:48:40.660 --> 00:48:55.680
 Keine Ahnung, äh, vielleicht gibt's ja gute Anwendungsfälle, mir fällt jetzt außerdem hier keiner ein, aber, ja, weil meistens der Browser eigentlich ganz gut weiß, wenn er die Hintergrundfarbe von einem Element kennt, wo ein Cursor drin blinkt, dann weiß er auch ganz gut, in was für eine Farbe der Cursor sein sollte, um dann ausreichenden Kontrast zu bieten, das ist ja wichtig.

00:48:55.680 --> 00:49:09.360
 Gut, dann, äh, ja, dann, äh, ich hab grad schon angesprochen, die letzte, eine der letzten Bastionen im, im Formularbereich, ähm, war immer der, der Auswahlbutton, ähm, Datei auswählen, also, äh, Input-Type, äh, File

00:49:09.360 --> 00:49:23.600
 Und, äh, da haben wir in der Folge mit, äh, Manuel Matusowitsch, der ja auch schon sehr lange in diesem Game dabei ist, haben wir festgestellt, dass wir das alle drei nicht kannten, obwohl das schon irgendwie seit acht Jahren oder so funktioniert.

00:49:23.680 --> 00:49:40.160
 Und man sieht das auch ganz oft auf Formularen, äh, auf, auf Seiten in freier Wildbahn, die sind irgendwie schön gestylt und alles, äh, ist irgendwie schön in CI-Farbe, aber diese Upload-Geschichten, die sehen, entweder sind sie komplett ersetzt durch so einen, äh, File-Picker mit, mit ich kann Drag-and-Drop benutzen und so, oder sie sind halt einfach hässlich grau.

00:49:40.700 --> 00:49:55.600
 Und, äh, man kann das mit, hier unten sieht man's, äh, File-Selector-Button, ähm, als Pseudo-Element, kann man, äh, das tatsächlich stylen und kann's dann ganz normal, Background-Color, äh, Padding-Border, äh, Margin und so weiter, äh, den Button stylen.

00:49:55.640 --> 00:50:01.540
 Und das wussten wir alle drei, äh, die wir da saßen und das schon lange machen, wussten wir das nicht. Kannte das schon jemand? Wusste das jemand? Setz das ein.

00:50:01.540 --> 00:50:02.960
 Ja.

00:50:02.960 --> 00:50:04.060
 Schaut mal, wieder was gelernt.

00:50:04.060 --> 00:50:25.620
 Ja, meistens war, war der Weg früher drumherum, auch dieses Ding halt auf Opacity 0 zu setzen, also durchsichtig zu machen und dann irgendwas hinten dran zu legen, was fürchterlich hässlich ist und dann, was auch von Browser zu Browser extrem unterschiedlich, wie groß dieses Ding standardmäßig ist, weil manche haben noch einen Text, also hier steht zum Beispiel keine ausgewählt unten drunter, wenn ich da drauf drücke, dann seh ich tatsächlich auch, äh, also ich kann auch unten draufklicken,

00:50:25.640 --> 00:50:32.060
 auf den Text, äh, jeder Browser macht's anders, äh, also bin ich auch um alles froh, äh, wie man das Ding irgendwie stylen kann.

00:50:32.060 --> 00:50:37.020
 Okay, so, äh, wir haben gerade angezeigt bekommen, wir haben noch fünf Minuten.

00:50:37.020 --> 00:50:37.680
 Fünf Minuten.

00:50:37.680 --> 00:50:39.100
 Müssen wir uns jetzt, müssen wir uns jetzt beeilen.

00:50:39.100 --> 00:50:41.120
 Ähm, was zeigen wir noch?

00:50:41.120 --> 00:50:47.680
 Äh, ja, du hast noch, wir haben noch eine Rubrik und das Ende, ich glaub, da kommen wir schon.

00:50:47.680 --> 00:50:51.560
 Achso, meinst du, also, okay, Musik machen wir nicht mehr? Okay, alles klar, gut.

00:50:51.560 --> 00:50:52.640
 Hätte ich jetzt gesagt.

00:50:52.640 --> 00:50:55.300
 Äh, was haben wir denn noch? Achso, ja, genau.

00:50:56.640 --> 00:51:01.800
 Dann kommt jetzt, Moment, normalerweise ...

00:51:01.800 --> 00:51:03.460
 Das Geiltein.

00:51:03.460 --> 00:51:06.680
 Geiltein.

00:51:06.680 --> 00:51:08.700
 Wird beim Jingle mitgesungen hier vorne.

00:51:08.700 --> 00:51:10.680
 Sehr schön.

00:51:10.680 --> 00:51:15.420
 Bitte ab jetzt immer, wir müssen vielleicht im Livestream, müssen wir diese Jingles vielleicht auch mal ...

00:51:15.420 --> 00:51:16.480
 Ja, wir brauchen einen Rückkanal.

00:51:16.480 --> 00:51:18.620
 Ihr müsst, ihr müsst alle parallel auch live gehen.

00:51:18.620 --> 00:51:19.600
 Äh, egal.

00:51:19.600 --> 00:51:20.700
 Ähm, so.

00:51:20.700 --> 00:51:23.180
 Äh, das Geiltein seid natürlich ihr.

00:51:23.180 --> 00:51:24.740
 Ja, okay, ja, ich weiß, ja.

00:51:24.740 --> 00:51:31.340
 Äh, ich hab tatsächlich ein kleines Geilteil mitgebracht, was jetzt ziemlich gut zu den, zu den Sachen passt, weil wir haben jetzt so ein bisschen gesagt, ja, Standards ...

00:51:31.340 --> 00:51:45.300
 Also, das müssen wir vielleicht kurz nochmal erklären, äh, also Geiltein ist bei uns, äh, immer so ein, ein Ding, einer von uns beiden sucht sich irgendwas raus und das muss dann auch gar nix, äh, mit dem, was wir täglich so machen, mit, mit Technik zu tun haben, sondern es kann auch ein Künstler sein, äh, ja, Musik, irgendwas. Ähm.

00:51:45.300 --> 00:52:06.140
 Ähm, aber heute hat's tatsächlich was mit dem, ähm, heute ist es was Technisches, ähm, und zwar eine Initiative auch von Emanuel Matusowitsch, wir haben ihn grad schon angesprochen, äh, und zwar die Seite html.dev, ähm, hatte ich ... kennt vielleicht der ein oder andere, ähm, genau, äh, da werden so ein bisschen Negativbeispiele gesammelt, wie man HTML nicht verwenden sollte, da geht's meistens um, ähm, barrierefreies HTML, aber auch semantisches HTML.

00:52:06.140 --> 00:52:33.360
 Also es gibt so viele Möglichkeiten, die man mit HTML nativ hat, äh, aber oft sieht man trotzdem dann irgendwie so die, die Diff-Suppe, also es wird irgendwie nur das Diff-Element verwendet und dann JavaScript draufgeworfen und in den, in den meisten Fällen, äh, ist das keine gute Idee, also da ist, ich hab fast noch nie gesehen, dass jemand zum Beispiel ein Select mit JavaScript vernünftig nachimplementiert hat, weil es wird immer irgendwas vergessen, irgendeine Tastaturkombination, die du damit verwenden kannst, die Escape-Taste, was weiß ich, gibt so viele Sachen, die da standardmäßig drin sind.

00:52:33.360 --> 00:53:03.340
 Und bei HTML werden so Negativbeispiele, ähm, gepostet, aber es ist nicht nur, äh, negativ, also ihr habt da oben auch gesehen, da gibt's auch den HTML-Heaven, ähm, aber bei jedem Beispiel, was hier, zum Beispiel Button, Display-Flex, Roll-Button, also, Roll-Button auf dem Button, der ist schon ein Button, weiß ich jetzt, weiß vielleicht nicht jeder, äh, es gibt auch immer, ähm, einen Tipp, wie man das dann löst, ähm, und ich finde, es ist eine, ist eine super Seite, ich mag das sehr gerne, ähm, da auf jeden Fall mal ab und zu irgendwie die Beispiele reingucken, da kommt, kommt nicht so extrem oft was Neues dazu, ihr seht ihr hier gerade, 18. Juli, aber die,

00:53:03.340 --> 00:53:10.340
 die alten, es sind 32 Beispiele, die alten, äh, sind auch schon ganz gut und, und sehr aufschlussreich, äh, genau, also, wenn man jetzt hier nochmal eins anguckt, hier, äh,

00:53:10.340 --> 00:53:19.340
 hier, äh, Link, Aria-Label, äh, äh, äh, äh, warum, warum hast du nicht einfach einen Link-Text, das ergibt irgendwie keinen Sinn, ähm.

00:53:20.720 --> 00:53:30.720
 Aber es ist halt schön, dass nicht nur gemeckert wird und irgendwie so Finger zeigt, sondern, dass man eben halt auch sieht, wie, wie macht man es dann richtig. Und gerade so für Einsteiger ist es, äh, äh, dann auch sehr schön zu sehen, wie man es dann richtig machen kann.

00:53:30.940 --> 00:53:34.360
 Genau, so, jetzt müssen wir uns beeilen, also, dann zeigen wir noch kurz, äh, achso.

00:53:34.360 --> 00:53:35.520
 Zeigen wir noch was?

00:53:35.940 --> 00:53:57.680
 Äh, unsere Seite, da dürft ihr gerne mal draufgehen, wo wir sind, ist vorne.show oder www.siv.de, dann, äh, schon umgeleitet, äh, kürzer zum Tippen, da könnt ihr gerne mal draufgehen, äh, wir streamen regelmäßig auf Twitch, äh, wie wir vorhin schon gesagt haben, ähm, wir machen Podcast, den könnt ihr ganz normal abonnieren, ähm, äh, per RSS-Feed in eurem Podcatcher findet ihr den hoffentlich auch einfach so, wenn ihr, äh, unseren Namen eingebt.

00:53:57.940 --> 00:54:10.480
 Ähm, wenn ihr auf die Seite kommen wollt, dann könnt ihr auch jetzt mal kurz abscannen, wer will, ähm, würde ich jetzt einfach mal so stehen lassen und, äh, damit kommen wir zu ...

00:54:10.480 --> 00:54:13.040
 Da ist Ende.

00:54:13.040 --> 00:54:16.640
 Ja, ich schäme mich da immer.

00:54:16.640 --> 00:54:21.700
 Dieser Jingle stammt aus einer Zeit, in der wir noch keine Jingle hatten und alle selber eingesungen haben.

00:54:21.700 --> 00:54:27.820
 Und dann haben wir, Konstantin hat irgendwann mal gemeint, jetzt schneiden wir mal einen zusammen aus den Sachen, die wir da irgendwie gemacht haben und das, äh,

00:54:27.820 --> 00:54:30.020
 Jedes Mal, vor Publikum schäme ich mich schon so.

00:54:30.020 --> 00:54:32.360
 Vielleicht brauchen wir neun, okay.

00:54:32.360 --> 00:54:42.340
 Ähm, ja, normalerweise, wenn wir, äh, einen Gast, eine Gästin haben, dann hat, äh, der, die Gästin, das letzte Wort und da, äh, wir heute bei euch zu Gast sind, habt ihr das letzte Wort.

00:54:42.340 --> 00:54:44.660
 Ich zähle jetzt bis drei und dann darf einfach jeder ein Wort sagen.

00:54:44.660 --> 00:54:46.420
 Eins, zwei, drei.

00:54:46.420 --> 00:54:47.320
 Mega.

00:54:47.320 --> 00:54:50.180
 Sehr schön.

00:54:50.180 --> 00:54:50.840
 Super.

00:54:50.840 --> 00:54:51.920
 Das war's.

00:54:51.920 --> 00:54:54.400
 Dann vielen Dank fürs, äh, fürs Zuhören und Zuschauen.

00:54:54.400 --> 00:54:55.620
 Macht's gut.

00:54:55.620 --> 00:54:56.740
 Ciao.

00:54:57.700 --> 00:55:27.680
 Vielen Dank.

00:55:27.700 --> 00:55:27.960
 Vertraue und glaube, es hilft, es heilt die göttliche Kraft!